修改

src/views/newRole/index.vue

@@ -272,7 +272,6 @@ export default {
     },
     //获取角色已有权限
     async getRoleQuth (item) {
-      console.log(item)
       this.$refs.tree.setCheckedKeys([])
       const newItem = _.cloneDeep(item)
       const newObj = {}
@@ -478,18 +477,14 @@ export default {
       if (this.dataObj.user_id || this.dataObj.user_group_id) {
         this.msgUserId = data.auth_id
         const newItem = _.cloneDeep(this.dataObj)
-        const addRes = []
         const newObj = {}
         if (newItem.hasOwnProperty('user_id')) {
           newObj.user_id = newItem.user_id
         } else {
           newObj.user_group_id = newItem.user_group_id
         }
-        addRes.push(newObj)
-        addRes.push({
-          auth_id: data.auth_id
-        })
-        const { code, returnData } = await this.getQueryList(SERVICE_ID.sysUserAuthId, [{ user_id: getToken('userid'), auth_id: data.auth_id }])
+        newObj.auth_id = data.auth_id
+        const { code, returnData } = await this.getQueryList(SERVICE_ID.sysUserAuthId, { user_id: getToken('userid'), auth_id: data.auth_id })
         if (code == 0) {
           const result = returnData
           if (result && result.length) {
@@ -497,8 +492,8 @@ export default {
               item.row_auth = null
             })
             this.checkArrs = [...result]
-            const { code, returnData } = await this.getQueryList(SERVICE_ID.userAuthorizationId, addRes)
-            if (code == 0) {
+            const { code, returnData } = await this.getQueryList(SERVICE_ID.userAuthorizationId, newObj)
+            if (code == 0 && returnData && returnData.length) {
               const res = returnData.filter(item => item.queryTemplateColumnSetID)
               if (res && res.length) {
                 // const caps = _.intersectionBy([result, res], 'queryTemplateColumnSetID')

src/views/newUserManagement/index.vue

@@ -322,7 +322,6 @@ export default {
       }
       this.arrs.push({ user_group_name: '新建账号组' })
       this.type = 'add'
-      this.activeIndex = this.arrs.length - 1
       this.treeCheckId = null
       this.tableData = []
       this.clearForm()
@@ -331,24 +330,19 @@ export default {
       // this.treeCheckId = this.arrs[this.arrs.length-1].user_group_id
     },
     async handleNodeClick (data) {
-      if (data.user_group_id !== 0) {
+      if (data.user_group_id) {
         this.treeCheckId = data.user_group_id
         this.treeCheckObj = _.cloneDeep(data)
         this.formInline = _.cloneDeep(data)
         this.type = 'edit'
         const { code, returnData } = await this.getQueryList(SERVICE_ID.getUserTableId, {
-          up_user_group_id: data.up_user_group_id
+          up_user_group_id: data.user_group_id
         })
         if (code == 0 && returnData && returnData.length) {
           this.tableData = returnData
         } else {
           this.tableData = []
         }
-      } else {
-        alert('不可选中')
-        return
-        // this.formInline.user_group_name = ''
-        // this.formInline.user_group_comment = ''
       }
     },
     //清空表单
@@ -436,12 +430,14 @@ export default {
       })
     },
     handleTableAdd () {
-      if (this.activeIndex) {
+      if (this.treeCheckObj.user_group_id) {
         this.tableFlag = true
         this.dataType = 'add'
         this.dataTitle = '新增账号'
         this.clearTableForm()
         // this.ruleForm.user_group_id = this.arrs[this.activeIndex].user_group_id
+      } else {
+        this.$message.error('请选中用户后再操作')
       }
     },
     handleTableEdit (row) {
@@ -516,21 +512,22 @@ export default {
         if (valid) {
           // this.ruleForm.user_pwd= MD5(this.ruleForm.user_pwd)
           if (this.dataType == 'add') {
+            this.ruleForm.up_user_group_id = this.ruleForm.user_group_id
+            delete this.ruleForm.user_group_id
             const data = this.ruleForm
             const { code } = await this.getChangeList(SERVICE_ID.getUserTableId, data, 1)
             this.tipMsg(code)
           } else {
             const id = this.ruleForm.user_group_id
             if (id) {
-              this.ruleForm.user_id = this.userId
               this.ruleForm.user_pwd = MD5(this.ruleForm.user_pwd)
               const data = this.ruleForm
-              const { code } = await this.getChangeList(SERVICE_ID.getUserTableId, data, 2, 'user_id')
+              const { code } = await this.getChangeList(SERVICE_ID.getUserTableId, data, 2, 'up_user_group_id')
               this.tipMsg(code)
             }
           }
           const result = await this.getQueryList(SERVICE_ID.getUserTableId, {
-            up_user_group_id: this.treeCheckObj.up_user_group_id
+            up_user_group_id: this.treeCheckObj.user_group_id
           })
           this.tableData = result.returnData
           this.tipMsg(result.code)

src/views/table/css/index.scss

@@ -19,8 +19,8 @@
       letter-spacing: 0;
     }
     .hd-td {
-      display: flex;
-      justify-content: center;
+      white-space: nowrap;
+      padding: 0 15px;
     }
     .cell-click {
       cursor: pointer;
@@ -33,6 +33,12 @@
       .cell {
         font-weight: bold;
         color: #101116;
+        .el-tooltip {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          line-height: 34px;
+        }
         > .el-checkbox {
           display: none;
         }

src/views/table/index.vue

@@ -11,37 +11,19 @@
       <template v-if="tableData.length || tableCols.length">
         <div style="height: calc(100% - 40px);">
           <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border @cell-click="cellClick" :cell-class-name="cellClass" ref="table" :height="tableHeight ? tableHeight : minHeight - 8 + 'vh'" class="table infinite-list" style=" overflow: auto" :style="{width: tableWidth ? tableWidth : '100%'}" @select="selectHandler">
-            <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip" :formatter="formatter">
+            <el-table-column v-for="(item, index) in tableColsCopy" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip" :formatter="formatter">
               <template #header>
-                <span class="colTips">
-                  <el-tooltip :content="item.columnDescribe" placement="top">
-                    <span>{{ item.columnLabel }}</span>
-                  </el-tooltip>
-                </span>
-                <span v-if="item.needFilters">
-                  <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
-                    <i slot="reference" :class="[
-                        'filter-arrow',
-                        'el-icon-arrow-down',
-                        arrowClass(item.columnName),
-                      ]" />
-                    <el-form>
-                      <el-form-item :label="item.columnLabel">
-                        <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
-                          <el-option v-for="(option, optionIndex) in tableDataFilters[
-                              item.columnName
-                            ]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
-                        </el-select>
-                      </el-form-item>
-                    </el-form>
-                  </el-popover>
-                </span>
+                <el-tooltip :content="item.columnDescribe || item.columnLabel" placement="top">
+                  <TableHeaderCell :label="item.columnLabel" :filter-options="tableDataFilters[item.columnName]" :filter-values.sync="filterValues[item.columnName]" :sortable="item.needSort" :sort-rule.sync="tableDataSortRules[item.columnName]" />
+                </el-tooltip>
               </template>
             </el-table-column>
             <el-table-column v-if="authBtns.length" fixed="right" label="操作" :width="fixedWidth">
               <template slot-scope="scope">
                 <div class="hd-td">
-                  <auth-button v-for="(item,index) in authBtns" :key="index" :auth="item" :row="scope.row" />
+                  <el-scrollbar style="height: 100%">
+                    <auth-button v-for="(item,index) in authBtns" :key="index" :auth="item" :row="scope.row" />
+                  </el-scrollbar>
                 </div>
               </template>
             </el-table-column>
@@ -136,6 +118,7 @@ import AuthButton from './components/authButton.vue';
 import { translateDataToTreeAllTreeMsg, getAuthData } from "@/utils/validate";
 import { Query, newData, modifyData, moveData, abnormalDataRecovery } from "@/api/webApi";
 import { getToken } from '@/utils/auth';
+import TableHeaderCell from '@/components/TableHeaderCell/index.vue';
 export default {
   name: "DataTable",
   props: {
@@ -187,7 +170,7 @@ export default {
       default: "180px",
     },
   },
-  components: { Dialog, NoData, AdvanceQuery, AuthButton },
+  components: { Dialog, NoData, AdvanceQuery, AuthButton, TableHeaderCell },
   data () {
     return {
       pageTitle: '',
@@ -236,7 +219,8 @@ export default {
       authBtnCol: [],
       authBtnColName: [],
       urlParams: {},
-      authId: ''
+      authId: '',
+      tableDataSortRules: {},
     };
   },
   computed: {
@@ -278,22 +262,27 @@ export default {
 
     //设置表头-下拉-选中数据
     filteredTableData () {
-      if (this.isTree) {
-        this.tableData = translateDataToTreeAllTreeMsg(
-          this.tableData,
-          "parentID",
-          "companyID"
-        );
-      }
-      return this.tableData.filter((item) => {
-        let flag = true;
-        Object.entries(this.filterValues).forEach(([key, value]) => {
-          if (value !== "" && item[key] !== value) {
-            flag = false;
+      const filtered = this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(String(item[key]))) {
+            flag = false
           }
-        });
-        return flag;
-      });
+        })
+        return flag
+      })
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
+      return this._.orderBy(filtered, sortRules[0], sortRules[1])
     },
   },
   mounted () {
@@ -366,6 +355,7 @@ export default {
             }
             this.$store.dispatch('auth/changeAuthMsg', returnData)
             this.tableCols = returnData;
+            this.setTableCols();
             if (Object.keys(this.urlParams).length) {
               this.getQuery(this.queryId, this.urlParams);
             } else {
@@ -379,6 +369,17 @@ export default {
         console.log(error)
       }
     },
+    setTableCols () {
+      this.tableCols.forEach(({ columnName, needFilters, needSort }) => {
+        if (needFilters) {
+          this.$set(this.tableDataFilters, columnName, [])
+          this.$set(this.filterValues, columnName, [])
+        }
+        if (needSort) {
+          this.$set(this.tableDataSortRules, columnName, '')
+        }
+      })
+    },
     autoBtnObj (item) {
       switch (item.service_type) {
         case '1':
@@ -616,88 +617,37 @@ export default {
       const datas = _.cloneDeep(this.tableColsCopy);
       // const reqUts = [];
       datas.forEach(async (item) => {
-        this.tableDataFilters[item.columnName] = [];
         if (item.needGroup) {
           this.tableGroups.push(item.columnName);
         }
-        if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
-          this.tableArrs.push(item.columnName);
-          // const reqUt = this.getSelectData(item.listqueryTemplateID)
-          // reqUts.push(reqUt)
-          // if (!this.tableOptions[item.columnName]) {
-          //   //开始位置beginPosition 结束位置endPosition (区分开始结束位置必须传null)
-          //   if (
-          //     item.columnName !== "beginPosition" &&
-          //     item.columnName !== "endPosition"
-          //   ) {
-          //     this.tableOptions[item.columnName] = await this.getSelectData(
-          //       item.listqueryTemplateID
-          //     );
-          //   } else {
-          //     this.tableOptions[item.columnName] = await this.getSelectData(
-          //       item.listqueryTemplateID,
-          //       null
-          //     );
-          //     this.tabledatacopy[item.columnName] = _.cloneDeep(
-          //       this.tableOptions[item.columnName]
-          //     );
-          //   }
-          // } else {
-          //   if (
-          //     item.columnName === "beginPosition" ||
-          //     item.columnName === "endPosition"
-          //   ) {
-          //     this.tableOptions[item.columnName] = await this.getSelectData(
-          //       item.listqueryTemplateID,
-          //       null
-          //     );
-          //   }
-          // }
-          //
-        }
-        // this.filterValues[item.columnName] = ''
       });
-      setTableFilters(this.tableData, this.tableDataFilters);
-      this.tableGroup(this.tableData);
+      const dats = this.setTableFilters(this.tableData, this.tableDataFilters)
+      this.tableDataFilters = _.cloneDeep(dats)
       // this.selectTableRows(this.tableData, "DeployID");
-      this.tableOptionscp = _.cloneDeep(this.tableOptions);
-      const arrbegin = _.cloneDeep(this.tableOptions);
-      if (arrbegin) {
-        setTimeout(() => {
-          this.tableData.forEach((element) => {
-            if (this.tableOptions.beginNode) {
-              arrbegin.beginNode.forEach((res) => {
-                if (res.v === element.beginNode) {
-                  element.beginNode = res.k;
-                }
-              });
-              arrbegin.endNode.forEach((res) => {
-                if (res.v == element.endNode) {
-                  element.endNode = res.k;
-                }
-              });
-              arrbegin.calculationBasis.forEach((res) => {
-                if (res.v == element.calculationBasis) {
-                  element.calculationBasis = res.k;
-                }
-              });
-              //位置
-              this.tabledatacopy.beginPosition.forEach((res) => {
-                if (res.v == element.beginPosition) {
-                  element.beginPosition = res.k;
-                }
-              });
-              this.tabledatacopy.endPosition.forEach((res) => {
-                if (res.v == element.endPosition) {
-                  element.endPosition = res.k;
-                }
-              });
-            }
-          });
-        }, 100);
-      }
+      this.tableGroup(this.tableData)
       // this.getSelectDataAll(reqUts)
     },
+    setTableFilters (tableData, filters) {
+      const tempSets = {}
+      Object.keys(filters).forEach(key => {
+        tempSets[key] = new Set()
+      })
+      tableData.forEach(item => {
+        Object.keys(tempSets).forEach(key => {
+          ; (item[key] ?? '') !== '' && tempSets[key].add(String(item[key]))
+        })
+      })
+      Object.keys(tempSets).forEach(key => {
+        filters[key] = _.orderBy(
+          [...tempSets[key]].map(value => ({
+            text: value,
+            value,
+          })),
+          o => o.value
+        )
+      })
+      return filters
+    },
     //获取所有获取弹框-下拉数据-请求状态
     getSelectDataAll (reqUts) {
       Promise.all(reqUts)