查询过滤工具函数添加

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

@@ -70,6 +70,9 @@
 
       .el-range__close-icon {
         line-height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .el-range-separator {

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

 <template>
-  <div class="dsk-table-header-setting" @click="showHeaderSetting = !showHeaderSetting">
+  <div class="dsk-table-header-setting" @click="showHeaderSetting">
     <svg-icons :icon-class="'table-header-setting-icon'" :class-name="'table-header-setting-icon'"></svg-icons>
     <div class="table-header-setting-text">表头设置</div>
     <transition appear name="head" mode="out-in">

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

@@ -4,7 +4,7 @@
       <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 :default-sort="defaultSort?defaultSort:{}"
         @sort-change="sortChange" @selection-change="selectionChange" :cell-class-name="cellClassName" :cell-style="cellStyle" :height="height"
-        :maxHeight="maxHeight">
+        :maxHeight="maxHeight" v-sticky-header="stickyHeader">
         <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>
@@ -26,7 +26,8 @@
             <!-- 普通列 -->
             <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">
+              :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false"
+              :show-overflow-tooltip="item.showOverflowTooltip">
               <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">
@@ -108,7 +109,8 @@ export default {
       type: Object,
       default: () => ({
         offsetBottom: '0px',
-        offsetTop: "0px"
+        offsetTop: "0px",
+        show: false
       })
     },
     headerFixed: {
@@ -214,19 +216,120 @@ export default {
       text-overflow: ellipsis;
       overflow: hidden;
     }
+
     .pagination-box {
       display: flex;
       align-items: center;
       justify-content: flex-end;
     }
 
-    .el-table th.gutter {
-      display: table-cell !important;
-    }
+    // .el-table th.gutter {
+    //   display: table-cell !important;
+    // }
 
     .el-table--border th.gutter:last-of-type {
       display: block !important;
+      padding-right: 16px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 16px;
+      height: 16px;
     }
+
+    .el-scrollbar-warp::-webkit-scrollbar {
+      width: 16px;
+      height: 16px;
+    }
+
+    .el-table {
+      .cell {
+        height: 21px;
+        &.el-tooltip {
+          height: 21px;
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #ffffff;
+  }
+  /*::v-deep .el-table__fixed{
+      height: calc(100% - 16px) !important;
+    }*/
+
+  ::v-deep .el-table__row {
+    &:nth-child(even) {
+      background-color: #f9fcff;
+      .more {
+        background: #f8fbff;
+        span {
+          color: #0081ff;
+        }
+      }
+    }
+    &:nth-child(odd) {
+      .more {
+        span {
+          color: #0081ff;
+        }
+      }
+    }
+  }
+  .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;
+  }
+  ::v-deep .el-table--border .el-table__cell {
+    border-right: 1px solid #e6eaf1;
+  }
+  ::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;
+    }
+  }
+
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: #dcebff;
+  }
+  ::v-deep .fixed-table {
+    overflow: visible;
+  }
+  ::v-deep .el-table__header-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 9;
+  }
+  ::v-deep .el-table__fixed-header-wrapper {
+    position: sticky;
+    z-index: 9;
+    top: 0;
+  }
+  .headerFixed {
+    ::v-deep .el-table__header-wrapper {
+      position: sticky;
+      top: 80px;
+      z-index: 9;
+    }
+    ::v-deep .el-table__fixed-header-wrapper {
+      position: sticky;
+      z-index: 9;
+      top: 80px;
+    }
+  }
+  ::v-deep .el-table__fixed {
+    overflow-x: clip;
+    overflow-y: clip;
   }
 }
 </style>

dsk-operate-ui/src/utils/index.js

@@ -587,6 +587,43 @@ export function hasDuplicates(arr, mapKey = null) {
   }
 }
 
+/**
+ * 表单查询条件过滤
+ * @param {Object} params 
+ */
+export function queryConditionFiltering(params) {
+  try {
+    if (Object.prototype.toString.call(params) != "[object Object]") throw new Error("传入查询条件不是一个对象");
+    const _temp = JSON.parse(JSON.stringify(params));
+    const keys = Object.keys(_temp);;
+    const len = keys.length;
+    const result = {};
+    for (let index = 0; index < len; index++) {
+      const key = keys[index];
+      if (_temp.hasOwnProperty(key)) {
+        // 数组内部不处理 外部处理
+        if (_temp[key] instanceof Array) {
+          result[key] = _temp[key];
+          continue;
+        }
+        // 如果是对象 递归处理
+        if (Object.prototype.toString.call(_temp[key]) == "[object Object]") {
+          result[key] = queryConditionFiltering(_temp[key]);
+          continue;
+        }
+        // 过滤无效值 0为有效数据
+        if (_temp[key] || _temp[key] == "0") {
+          result[key] = _temp[key];
+          continue;
+        }
+      }
+    }
+    return result;
+  } catch (error) {
+    console.warn(error);
+  }
+}
+
 // 甲方详情左侧菜单映射
 export const detailSideBar = new Map([
   // 企业速览

dsk-operate-ui/src/views/consultingOrgManagement/components/ProjectList/index.vue

@@ -50,7 +50,7 @@
 
       <!-- 查询重置 -->
       <div class="consulting-search-form-btn">
-        <el-button type="primary" @click="searchForm" class="search-btn">查询</el-button>
+        <el-button type="primary" @click="searchForm(true)" class="search-btn">查询</el-button>
         <el-button @click="resetForm" class="reset-btn">重置</el-button>
       </div>
 
@@ -102,6 +102,7 @@ import DskTableHeaderSetting from "@/components/DskTableHeaderSetting";
 import TableListCom from "@/components/TableListCom";
 import Skeleton from "@/components/Skeleton";
 import { getConsultingOrgProjectListWithSearchApi } from "@/api/consultingOrgManagement";
+import { queryConditionFiltering } from "@/utils";
 import { v4 } from 'uuid';
 export default {
   name: "cooperationDeskAccountProject",
@@ -114,35 +115,53 @@ export default {
   data() {
     return {
       form: {
+        // 项目名称
         projectName: "",
-        consultingAgency: "",
-        ownerName: "",
-        undertakingUnit: "",
+        // 咨询机构名称
+        advisoryBodyName: "",
+        // 业主单位
+        ownerUnit: "",
+        // 承接项目单位
+        undertakeProjectUnit: "",
+        // 项目创建开始时间
+        projectStartTime: "",
+        // 项目创建开始结束时间
+        projectEndTime: "",
+        // 组件时间用值
         projectCreateTime: [],
-        prjectType: "",
-        engineeringCategory: "",
-        engineeringCategoryDeatil: "",
-        contractAmount: []
+        // 项目承接类型
+        projectUndertakeType: "",
+        // 工程基础大类
+        engineeringFoundationCategory: "",
+        // 工程类别明细
+        engineeringCategoryDetail: "",
+        // 组件合同金额区间
+        contractAmount: [],
+        // 最小合同金额
+        minContractAmount: "",
+        // 最大合同金额
+        maxContractAmount: ""
       },
       tableLoading: false,
       // 列表表头
       formColum: [
-        { label: '序号', type: "index", lock: true, fixed: true, uid: v4() },
-        { label: '项目列表', prop: 'projectName', width: "220px", lock: true, slot: true, uid: v4() },
+        { label: '序号', prop: "staticSerialNumber", type: "index", lock: true, fixed: false, uid: v4() },
+        { label: '项目列表', prop: 'projectName', width: "220px", lock: true, fixed: false, slot: true, uid: v4(), showOverflowTooltip: true },
         { label: '项目编码', prop: 'projectCode', width: "121px", uid: v4() },
         { label: '省市', prop: 'provinceName', width: "100px", uid: v4() },
         { label: '项目承接类型', prop: 'isinvestproject', width: "100px", uid: v4() },
-        { label: '工程基础大类', prop: 'projectType1', width: "100px", uid: v4() },
-        { label: '工程类别明细', prop: 'projectType', width: "100px", uid: v4() },
+        { label: '工程基础大类', prop: 'projectType1', minWidth: "100px", uid: v4() },
+        { label: '工程类别明细', prop: 'projectType', minWidth: "100px", uid: v4() },
         { label: '项目负责人姓名', prop: 'projectLeader', width: "110px", uid: v4() },
         { label: '项目负责人专业', prop: 'projectLeaderMajor', width: "110px", uid: v4() },
         { label: '项目负责人联系电话', prop: 'projectLeaderPhone', width: "135px", uid: v4() },
         { label: '合同金额（元）', prop: 'contractOrigValue', width: "110px", align: "right", uid: v4() },
-        { label: '业主单位', prop: 'ownerName', slot: true, uid: v4() },
+        { label: '业主单位', prop: 'ownerName', slot: true, uid: v4(), width: "185px", showOverflowTooltip: true },
         { label: '项目承接单位', prop: 'contractOrgName', width: "196px", slot: true, uid: v4() },
         { label: '咨询机构名称', prop: 'advisoryBodyName', width: "172px", slot: true, uid: v4() },
         { label: '创建时间', prop: 'loadTime', width: "172px", uid: v4() },
       ],
+      fixedPropsKey: ["staticSerialNumber", "projectName"],
       queryParams: {
         pageSize: 50,
         pageNum: 1
@@ -186,7 +205,10 @@ export default {
   },
   //可访问data属性
   created() {
-    this.getList();
+    this.init();
+  },
+  beforeDestroy() {
+    this.removeScrollXListen();
   },
   //计算集
   computed: {
@@ -194,18 +216,52 @@ export default {
   },
   //方法集
   methods: {
-    searchForm() {
+    async init() {
+      try {
+        await this.getList(this.queryParams);
+      } catch (error) {
 
+      }
+    },
+    // 创建最终查询条件
+    mergeCondition() {
+      const _queryParams = JSON.parse(JSON.stringify(this.queryParams));
+      // 过滤条件
+      const _form = queryConditionFiltering(this.form);
+      // 处理时间
+      if (_form?.projectCreateTime?.length) {
+        _form.projectStartTime = _form?.projectCreateTime[0];
+        _form.projectEndTime = _form?.projectCreateTime[1];
+      }
+      // 处理合同金额
+      if (_form?.contractAmount?.length) {
+        _form.minContractAmount = _form?.contractAmount[0];
+        _form.maxContractAmount = _form?.contractAmount[1];
+      }
+
+      delete _form.contractAmount;
+      delete _form.projectCreateTime;
+
+      return { ..._queryParams, ..._form };
+    },
+    searchForm(defaultPage = false) {
+      // 查询按钮从第一页查询
+      if (defaultPage) {
+        this.queryParams.pageNum = 1;
+        this.queryParams.pageSize = 50;
+      }
+      this.getList(this.mergeCondition());
     },
     resetForm() {
       const defaultValue = this.$options.data.call(this);
       this.form = defaultValue.form;
       this.queryParams = defaultValue.queryParams;
+      this.getList(this.queryParams);
     },
-    async getList() {
+    async getList(params) {
       try {
         this.tableLoading = true;
-        const result = await getConsultingOrgProjectListWithSearchApi(this.queryParams);
+        const result = await getConsultingOrgProjectListWithSearchApi(params);
         if (result.code == 200) {
           this.tableDataList = result.rows ? result.rows : [];
           this.total = result.total ? result.total : 0;
@@ -218,9 +274,11 @@ export default {
       } finally {
         this.tableLoading = false;
         await this.$nextTick();
-        this.$refs.tableContainer.$refs.tableRef.doLayout();
+        this.total ? this.$refs.tableContainer.$refs.tableRef.doLayout() : null;
+        this.listenScrollX();
       }
     },
+    // 表头设置变化
     async settingChange(use) {
       try {
         this.formColum = use;
@@ -229,7 +287,33 @@ export default {
       }
     },
     handleCurrentChange(page) {
+      this.queryParams.pageNum = page;
+      this.searchForm();
+    },
+    async listenScrollX() {
+      try {
+        await this.$nextTick();
+        const scrollContainer = document.querySelector(".el-table__body-wrapper");
+        if (scrollContainer) {
+          scrollContainer.removeEventListener("scroll", this.listenHandler, false);
+          scrollContainer.addEventListener("scroll", this.listenHandler, false);
+        }
+      } catch (error) {
 
+      }
+    },
+    removeScrollXListen() {
+      const scrollContainer = document.querySelector(".el-table__body-wrapper");
+      if (scrollContainer) {
+        scrollContainer.removeEventListener("scroll", this.listenHandler, false);
+      }
+    },
+    listenHandler(e) {
+      const { target } = e;
+      if (target) {
+        const flag = target.scrollLeft > 0 ? true : false;
+        this.formColum.forEach(item => this.fixedPropsKey.includes(item.prop) ? item.fixed = flag : null);
+      }
     }
   },
 }