表头设置 组件封装

dsk-operate-ui/src/api/consultingOrgManagement/index.js

+import request from '@/utils/request';
+
+/**
+ * 咨询机构合作台账 查询列表 以及 查询参数
+ * @param {object} params 
+ * @returns 
+ */
+export const getConsultingOrgProjectListWithSearchApi = (params) => request({
+  url: "/advisory/body/getProjectList",
+  method: "get",
+  params
+});
\ No newline at end of file

dsk-operate-ui/src/assets/styles/common.css

@@ -55,3 +55,13 @@
   padding: 16px 24px;
   box-sizing: border-box;
 }
+
+.head-enter-active,
+.head-leave-active {
+  transition: all 0.5s ease;
+}
+.head-enter,
+.head-leave-to {
+  opacity: 0;
+  transform: translateY(50px);
+}

dsk-operate-ui/src/assets/styles/el-search-form-public.scss

@@ -41,6 +41,16 @@
       }
     }
 
+    .el-input__suffix {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-input__icon {
+        line-height: 32px;
+      }
+    }
+
     .el-date-editor {
       width: 268px;
       height: 32px;

dsk-operate-ui/src/assets/styles/index.scss

@@ -464,21 +464,30 @@ li {
       height: 100%;
       font-size: 14px;
       color: #232323;
+
+      .cell {
+        padding-right: 12px;
+        padding-left: 12px;
+        line-height: 21px;
+        font-size: 12px;
+        font-weight: 400;
+      }
+
       th {
         height: 40px;
-        font-size: 12px !important;
-        font-weight: 400 !important;
-        color: rgba(35, 35, 35, 0.8);
         padding: 9px 0px;
+        .cell {
+          color: rgba(35, 35, 35, 0.8);
+        }
       }
+
       td {
-        font-size: 14px;
-      }
-      .cell {
-        padding-right: 12px;
-        padding-left: 12px;
-        line-height: 21px;
+        padding: 9px 0px;
+        .cell {
+          color: #232323;
+        }
       }
+
       .sort-caret.ascending {
         border-bottom-color: rgba(0, 129, 255, 0.5);
       }
@@ -505,10 +514,7 @@ li {
       .is-scrolling-left + .el-table__fixed,
       .is-scrolling-middle + .el-table__fixed,
       .is-scrolling-right + .el-table__fixed {
-        //box-shadow:none;
-        //-webkit-box-shadow: 2px 0px 1px -2px #C3CBD5;
         box-shadow: 2px 0 8px -7px #202020;
-        //border-right: 1px solid #C3CBD5;
         height: auto !important;
         bottom: 16px !important;
       }

dsk-operate-ui/src/components/DskTableHeaderSetting/components/SettingBar/index.vue

 <template>
   <transition>
-    <div class="dsk-table-header-setting-bar">
+    <div class="dsk-table-header-setting-bar" :class="{'is-outer' : isOuter}">
       <div class="dsk-table-header-setting-bar-inner">
 
+        <!-- 固定表头 -->
+        <div class="lock-header-container" v-if="lockColumn.length">
+          <div class="lock-header-item" v-for="(item,index) of lockColumn" :key="item.uid">
+            <img src="@/assets/images/consultingAgencyManagement/lock.png" alt="">
+            <div class="lock-header-item-label">{{item.label}}</div>
+          </div>
+        </div>
+
+        <!-- 已选字段 -->
+        <div class="use-header-container" v-if="useColumn.length">
+          <div class="use-header-title">已选字段</div>
+          <vuedraggable v-model="useColumn" class="use-header-container-inner" ghostClass="dragClass">
+            <transition-group name="fade" tag="div">
+              <div class="use-header-item" v-for="(item,index) of useColumn" :key="item.uid">
+                <el-checkbox v-model="item.use" class="use-header-item-label"
+                  @change="flag => checkedChange(index,flag,item)">{{item.label}}</el-checkbox>
+                <img src="@/assets/images/consultingAgencyManagement/use-header-btn.png" alt="">
+              </div>
+            </transition-group>
+          </vuedraggable>
+        </div>
+
+        <!-- 未选字段 -->
+        <div class="not-use-header-container" v-if="notUseColumn.length">
+          <div class="not-use-header-title">未选字段</div>
+          <div class="not-use-header-item" v-for="(item,index) of notUseColumn" :key="item.uid">
+            <el-checkbox v-model="item.use" class="not-use-header-item-label"
+              @change="flag => checkedChange(index,flag,item)">{{item.label}}</el-checkbox>
+          </div>
+        </div>
+
       </div>
+
+      <!-- 确定 取消 -->
+      <div class="dsk-table-header-setting-footer">
+        <el-button @click.stop="cancel">取消</el-button>
+        <el-button type="primary" @click.stop="ok">确定</el-button>
+      </div>
+
     </div>
   </transition>
 </template>
 <script>
 import vuedraggable from "vuedraggable";
+import { v4 } from 'uuid';
 export default {
   name: "dskTableHeaderSettingBar",
   components: {
@@ -24,11 +63,13 @@ export default {
     return {
       lockColumn: [],
       useColumn: [],
-      notUseColumn: []
+      notUseColumn: [],
+      isOuter: false
     };
   },
   //可访问data属性
   created() {
+    this.containerPositionInit();
     this.settingHeaderClassify();
   },
   //计算集
@@ -37,32 +78,75 @@ export default {
   },
   //方法集
   methods: {
+    async containerPositionInit() {
+      try {
+        await this.$nextTick();
+        const container = document.querySelector(".dsk-table-header-setting");
+        // 获取定位元素距离 视口右边缘状况
+        const right = container.getBoundingClientRect().right;
+        // 获取屏幕视口大小进行对比
+        const viewPortWidth = document.documentElement.clientWidth;
+        // 获取当前容器超出点击区域宽度
+        const settingBar = document.querySelector(".dsk-table-header-setting-bar").offsetWidth - container.offsetWidth;
+        // 是否超出视口
+        const outer = right + settingBar > viewPortWidth ? true : false;
+        this.isOuter = outer;
+      } catch (error) {
+
+      }
+    },
     // 表头当前状态分类
     settingHeaderClassify() {
       if (this.settingList?.length) {
         const temp = JSON.parse(JSON.stringify(this.settingList));
         const len = temp.length;
         for (let index = 0; index < len; index++) {
+          temp[index].uid = v4();
           if (temp[index].lock) {
             this.lockColumn.push({
               ...temp[index],
-              use: true
+              use: true,
             });
             continue;
           }
           // 设置了false值
           if (temp[index].hasOwnProperty("use") && temp[index].use === false) {
-            this.notUseColumn.push(temp[index]);
+            this.notUseColumn.push({
+              ...temp[index],
+              use: false
+            });
             continue;
           }
           // 默认为true 展示
           this.useColumn.push({
             ...temp[index],
-            use: true
+            use: true,
           });
         }
-        console.log(this.useColumn);
+        // console.log(this.lockColumn);
+        // console.log(this.useColumn);
+        // console.log(this.notUseColumn);
+      }
+    },
+    checkedChange(index, flag, item) {
+      // 选中 往use push
+      if (flag) {
+        this.notUseColumn.splice(index, 1);
+        this.useColumn.push(item);
+        return;
       }
+      this.useColumn.splice(index, 1);
+      this.notUseColumn.push(item);
+    },
+    cancel() {
+      this.$emit("settingClose");
+    },
+    ok() {
+      const _lockColumn = JSON.parse(JSON.stringify(this.lockColumn));
+      const _useColumn = JSON.parse(JSON.stringify(this.useColumn));
+      const _notUseColumn = JSON.parse(JSON.stringify(this.notUseColumn));
+      this.$emit("settingChange", _lockColumn.concat(_useColumn, _notUseColumn));
+      this.cancel();
     }
   },
 }
@@ -70,19 +154,155 @@ export default {
 <style lang="scss" scoped>
 .dsk-table-header-setting-bar {
   position: absolute;
-  top: 24px;
+  top: 28px;
   left: 0px;
   width: 236px;
   height: 456px;
   background: #fff;
   border: 1px solid #eeeeee;
+  border-radius: 4px;
   box-sizing: border-box;
   z-index: 3000;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.04),
+    0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
+
+  &.is-outer {
+    left: unset;
+    right: 0px;
+  }
 
   .dsk-table-header-setting-bar-inner {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 56px);
+    padding: 12px;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 16px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f3f4f5;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      border: 4px solid #f3f4f5;
+      background: rgba(98, 110, 126, 0.2);
+    }
+
+    .lock-header-container {
+      padding-bottom: 12px;
+      border-bottom: 1px solid #eeeeee;
+      box-sizing: border-box;
+
+      .lock-header-item {
+        display: flex;
+        align-items: center;
+        line-height: 24px;
+        font-size: 14px;
+        color: #232323;
+
+        & > img {
+          width: 14px;
+          height: 14px;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    ::v-deep .use-header-container {
+      padding: 12px 0px;
+      box-sizing: border-box;
+
+      .dragClass {
+        background: rgba(0, 129, 255, 0.3);
+      }
+
+      .use-header-title {
+        color: rgba(35, 35, 35, 0.4);
+        font-size: 14px;
+        font-weight: 400;
+      }
+
+      .use-header-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 8px;
+        cursor: pointer;
+
+        .el-checkbox__input.is-checked .el-checkbox__inner {
+          background-color: #0081ff;
+          border-color: #0081ff;
+        }
+
+        .el-checkbox__inner:hover {
+          border-color: #0081ff;
+        }
+
+        .el-checkbox__label {
+          color: rgba(35, 35, 35, 0.8);
+          font-size: 14px;
+          padding-left: 8px;
+        }
+        & > img {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+    ::v-deep .not-use-header-container {
+      border-top: 1px solid #eeeeee;
+      padding: 12px 0px;
+      box-sizing: border-box;
+
+      .not-use-header-title {
+        color: rgba(35, 35, 35, 0.4);
+        font-size: 14px;
+        font-weight: 400;
+      }
+
+      .not-use-header-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 8px;
+
+        .el-checkbox__input.is-checked .el-checkbox__inner {
+          background-color: #0081ff;
+          border-color: #0081ff;
+        }
+
+        .el-checkbox__inner:hover {
+          border-color: #0081ff;
+        }
+
+        .el-checkbox__label {
+          color: rgba(35, 35, 35, 0.8);
+          font-size: 14px;
+          padding-left: 8px;
+        }
+      }
+    }
+  }
+
+  .dsk-table-header-setting-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 56px;
+    padding: 0px 12px;
+    border-top: 1px solid #eeeeee;
+    box-sizing: border-box;
+
+    .el-button {
+      height: 32px;
+      padding: 0 16px;
+      box-sizing: border-box;
+    }
   }
 }
 </style>

dsk-operate-ui/src/components/DskTableHeaderSetting/index.vue

 <template>
-  <div class="dsk-table-header-setting" @click="showHeaderSetting">
+  <div class="dsk-table-header-setting" @click="showHeaderSetting = !showHeaderSetting">
     <svg-icons :icon-class="'table-header-setting-icon'" :class-name="'table-header-setting-icon'"></svg-icons>
     <div class="table-header-setting-text">表头设置</div>
-    <setting-bar v-if="showHeaderSettingStatus" :settingList="settingList"></setting-bar>
+    <transition appear name="head" mode="out-in">
+      <setting-bar v-if="showHeaderSettingStatus" :settingList="settingList" @settingChange="settingChange"
+        @settingClose="showHeaderSettingStatus = false"></setting-bar>
+    </transition>
   </div>
 </template>
 <script>
@@ -37,6 +40,9 @@ export default {
   methods: {
     showHeaderSetting() {
       this.showHeaderSettingStatus = true;
+    },
+    settingChange(use) {
+      this.$emit("settingChange", use);
     }
   },
 }

dsk-operate-ui/src/components/TableListCom/index.vue

 <template>
-  <div class="Tables table-list-com-ins">
+  <div class="table-list-com-ins">
     <div class="table-item">
       <el-table v-if="tableDataTotal>0" class="fixed-table" :class="headerFixed ? 'headerFixed':''" v-loading="tableLoading" :data="tableData"
-        element-loading-text="Loading" ref="tableRef" border fit highlight-current-row v-sticky-header.always="stickyHeader"
-        :default-sort="defaultSort?defaultSort:{}" @sort-change="sortChange" @selection-change="selectionChange" :cell-class-name="cellClassName"
-        :cell-style="cellStyle">
+        element-loading-text="Loading" ref="tableRef" border fit highlight-current-row :default-sort="defaultSort?defaultSort:{}"
+        @sort-change="sortChange" @selection-change="selectionChange" :cell-class-name="cellClassName" :cell-style="cellStyle" :height="height"
+        :maxHeight="maxHeight">
         <el-table-column type="selection" :width="needSelection.width ? needSelection.width : '38px'" v-if="needSelection.flag"
           :fixed="needSelection.fixed" :align="needSelection.align" :show-overflow-tooltip="needSelection.showOverflowTooltip">
         </el-table-column>
@@ -12,43 +12,46 @@
           <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
         </el-table-column>
         <template v-for="(item,index) in formColum">
-          <!-- 复选框列 -->
-          <el-table-column v-if="item.type == 'selection'" type="selection" :key="index" :width="item.width ? item.width : '38px'" :fixed="item.fixed"
-            :align="item.align?item.align:'left'" :show-overflow-tooltip="item.showOverflowTooltip">
-          </el-table-column>
-          <!-- 序号列 -->
-          <el-table-column v-else-if="item.type == 'index'" type="index" :key="index" :label="item.label ? item.label : '序号'"
-            :width="flexWidth(tableData)" :align="item.align?item.align:'left'" :fixed="item.fixed" :resizable="false">
-            <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
-          </el-table-column>
-          <!-- 普通列 -->
-          <el-table-column v-else :key="index" :label="item.label" :prop="item.prop" :width="item.width" :min-width="item.minWidth"
-            :align="item.align?item.align:'left'" :fixed="item.fixed" :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false"
-            :resizable="false">
-            <template v-if="item.children&&item.children.length">
-              <el-table-column v-for="(cld, i) in item.children" :key="i" :prop="cld.prop" :label="cld.label" :width="cld.width" :resizable="false">
-                <template slot-scope="cldscope">
-                  <template v-if="cld.slot">
-                    <slot :name="cld.prop" :row="cldscope.row" :data="cld"></slot>
+          <template v-if="item.use !== false">
+            <!-- 复选框列 -->
+            <el-table-column v-if="item.type == 'selection'" type="selection" :key="item.uid ? item.uid : index"
+              :width="item.width ? item.width : '38px'" :fixed="item.fixed" :align="item.align?item.align:'left'"
+              :show-overflow-tooltip="item.showOverflowTooltip">
+            </el-table-column>
+            <!-- 序号列 -->
+            <el-table-column v-else-if="item.type == 'index'" type="index" :key="item.uid ? item.uid : index" :label="item.label ? item.label : '序号'"
+              :width="flexWidth(tableData)" :align="item.align?item.align:'left'" :fixed="item.fixed" :resizable="false">
+              <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
+            </el-table-column>
+            <!-- 普通列 -->
+            <el-table-column v-else :key="item.uid ? item.uid : index" :label="item.label" :prop="item.prop" :width="item.width"
+              :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
+              :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false">
+              <template v-if="item.children&&item.children.length">
+                <el-table-column v-for="(cld, i) in item.children" :key="i" :prop="cld.prop" :label="cld.label" :width="cld.width" :resizable="false">
+                  <template slot-scope="cldscope">
+                    <template v-if="cld.slot">
+                      <slot :name="cld.prop" :row="cldscope.row" :data="cld"></slot>
+                    </template>
+                    <template v-else>
+                      <span>{{cldscope.row[cld.prop] || '-'}}</span>
+                    </template>
                   </template>
-                  <template v-else>
-                    <span>{{cldscope.row[cld.prop] || '-'}}</span>
-                  </template>
-                </template>
-              </el-table-column>
-            </template>
-            <template v-else-if="item.slotHeader" slot="header">
-              <slot :name="item.slotName"></slot>
-            </template>
-            <template slot-scope="scope">
-              <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item"></slot>
-              <!-- 操作栏 -->
-              <slot v-else-if="item.prop == 'action-field-bar'" name="action-field-bar" :row="scope.row" :index="scope.$index" :data="item"></slot>
-              <span v-else>
-                {{ scope.row[item.prop] || '-' }}
-              </span>
-            </template>
-          </el-table-column>
+                </el-table-column>
+              </template>
+              <template v-else-if="item.slotHeader" slot="header">
+                <slot :name="item.slotName"></slot>
+              </template>
+              <template slot-scope="scope">
+                <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item"></slot>
+                <!-- 操作栏 -->
+                <slot v-else-if="item.prop == 'action-field-bar'" name="action-field-bar" :row="scope.row" :index="scope.$index" :data="item"></slot>
+                <span v-else>
+                  {{ scope.row[item.prop] || '-' }}
+                </span>
+              </template>
+            </el-table-column>
+          </template>
         </template>
         <template slot="empty">
         </template>
@@ -58,10 +61,12 @@
         <no-data />
       </div>
     </div>
+
     <div class="pagination-box" v-if="show_page && tableDataTotal>queryParams.pageSize">
       <el-pagination background :current-page="current_page" :page-size="queryParams.pageSize" :total="tableDataTotal"
         layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
     </div>
+
   </div>
 </template>
 
@@ -70,6 +75,12 @@ import NoData from '@/components/NoData';
 export default {
   name: "tableListCom",
   props: {
+    height: {
+      type: [String, Number]
+    },
+    maxHeight: {
+      type: [String, Number]
+    },
     isIndex: {
       type: Boolean,
       default: false
@@ -96,7 +107,7 @@ export default {
     stickyHeader: {
       type: Object,
       default: () => ({
-        offsetBottom: '10px',
+        offsetBottom: '0px',
         offsetTop: "0px"
       })
     },
@@ -192,55 +203,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.Tables {
-  ::v-deep .el-table__body tr.current-row > td.el-table__cell {
-    background-color: #ffffff;
-  }
-
-  ::v-deep .el-table__row {
-    &:nth-child(even) {
-      background-color: #f9fcff;
-      .more {
-        background: #f8fbff;
-        span {
-          color: #0081ff;
-        }
-      }
+.table-list-com-ins {
+  ::v-deep .table-item {
+    .no-line-feed {
+      display: inline-block;
+      color: #0081ff;
+      cursor: pointer;
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
-    &:nth-child(odd) {
-      .more {
-        span {
-          color: #0081ff;
-        }
-      }
+    .pagination-box {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
     }
-  }
-  .table-item {
-    ::v-deep .el-table td.el-table__cell {
-      border-bottom: 0;
-    }
-  }
-  ::v-deep .el-table th.el-table__cell.is-leaf,
-  ::v-deep .el-table td.el-table__cell {
-    border-bottom: 1px solid #e6eaf1;
-    box-sizing: border-box;
-  }
-  ::v-deep .el-table--border .el-table__cell {
-    border-right: 1px solid #e6eaf1;
-    box-sizing: border-box;
-  }
-  ::v-deep .el-table__body tr.hover-row.current-row > td,
-  ::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
-  ::v-deep .el-table__body tr.hover-row.el-table__row--striped > td,
-  ::v-deep .el-table__body tr.hover-row > td {
-    background-color: #dcebff !important;
-    .more {
-      background: #dcebff;
+
+    .el-table th.gutter {
+      display: table-cell !important;
     }
-  }
 
-  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
-    background-color: #dcebff;
+    .el-table--border th.gutter:last-of-type {
+      display: block !important;
+    }
   }
 }
 </style>