table多级表头和高级查询修改

src/components/AdvancedQuery/index.vue

@@ -10,7 +10,7 @@
                   col.prop === 'comparisonOperator' ||
                   col.inputType[rowIndex] === 'select'
                 ">
-                  <el-select style="width: 120px;" size="small" v-model="row[col.prop]" placeholder="请选择" @change="
+                  <el-select :style="col.prop === 'comparisonOperator' ? 'width:120px':'width:195px'" size="small" v-model="row[col.prop]" placeholder="请选择" @change="
                     value => {
                       selectChangeHandler(value, rowIndex, colIndex)
                     }
@@ -42,10 +42,10 @@
                   " @keydown.native="inputHold(row[col.prop])" @input="inputLimit(row[col.prop], rowIndex)" @blur="inputFix(row[col.prop], rowIndex)" />
                 </template>
                 <template v-else-if="col.inputType[rowIndex] === 'date'">
-                  <el-date-picker v-model="row[col.prop]" size="small" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false" />
+                  <el-date-picker style="width: 195px;" v-model="row[col.prop]" size="small" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false" />
                 </template>
                 <template v-else-if="col.inputType[rowIndex] === 'datetime'">
-                  <el-date-picker v-model="row[col.prop]" size="small" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :clearable="false" />
+                  <el-date-picker style="width: 195px;" v-model="row[col.prop]" size="small" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :clearable="false" />
                 </template>
                 <template v-else-if="col.inputType === 'delete'">
                   <i class="clickable-delete el-icon-error" @click="deleteParam(rowIndex)" />
@@ -83,6 +83,7 @@
 <script>
 import { parseTime } from '@/utils/index'
 import { mapGetters } from 'vuex'
+import { Query } from "@/api/webApi"
 const comparisonOperatorOptions = [
   {
     label: '小于等于',
@@ -269,7 +270,7 @@ export default {
       const colDatas = this.authMsg
       if (colDatas?.length) {
         // const columns = colDatas.filter(item => item.isfiltercolumn)
-        const columns = colDatas.filter(item => item.pagetype != 'button' && item.isdisplay != 0)
+        const columns = colDatas.filter(item => item.isfiltercolumn)
         const datas = _.orderBy(columns, ['displaynumber'], ['asc', 'desc'])
         this.getColumnSet(datas)
       }
@@ -342,30 +343,38 @@ export default {
         connector: '',
       })
     },
-    selectChangeHandler (value, rowIndex, colIndex) {
+    async selectChangeHandler (value, rowIndex, colIndex) {
       if (colIndex === 0) {
         // const datas = this.tableColMunt.filter(item => item.columnName == value)
-        const { dataType, options } = this.columnSet[value]
+        const { datatype, dropdownlistid, dropdownlistlabel, dropdownlist, defaultparameters } = this.columnSet[value]
         // const { dataType, options } = datas[0]
         // 下拉框发生改变清空之前的数据
         this.paramsForm.params[rowIndex].paramValue = ''
-        if (dataType === 'date') {
+        if (datatype === 'date') {
           this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
             .slice(0, 5)
             .reverse()
           this.paramsTableCols[2].inputType[rowIndex] = 'date'
-        } else if (dataType === 'datetime') {
+        } else if (datatype === 'datetime') {
           this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
             .slice(0, 5)
             .reverse()
           this.paramsTableCols[2].inputType[rowIndex] = 'datetime'
-        } else if (options) {
+        } else if (dropdownlist || dropdownlist == 0) {
+          const datacontent = defaultparameters ? { filter: this.formatDefault(defaultparameters) } : { filter: { 1: 1 } }
+          const { code, returnData } = await Query({ serviceid: dropdownlist, datacontent, event: '0', page: 1, size: 9999 })
+          if (code == 0 && returnData?.length) {
+            returnData.map(item => {
+              item.label = item[dropdownlistlabel],
+                item.value = item[dropdownlistid]
+            })
+          }
           this.paramsTableCols[1].options[rowIndex] =
             comparisonOperatorOptions.slice(4, 5)
           this.paramsTableCols[2].inputType[rowIndex] = 'select'
-          this.paramsTableCols[2].options[rowIndex] = options
+          this.paramsTableCols[2].options[rowIndex] = returnData || []
           this.paramsForm.params[rowIndex].paramValue = ''
-        } else if (dataType === 'number') {
+        } else if (datatype === 'number') {
           this.paramsTableCols[1].options[rowIndex] = comparisonOperatorOptions
             .slice(0, 5)
             .reverse()
@@ -387,6 +396,18 @@ export default {
         }
       }
     },
+    //格式化传递参数数据
+    formatDefault (item) {
+      if (typeof item != 'string') return {}
+      const filterItem = {}
+      const parameters = item.replace('{', '').replace('}', '')
+      const parametersSplit = parameters?.split(',')
+      parametersSplit.map(item => {
+        const [key, val] = item?.split(':')
+        filterItem[key] = val
+      })
+      return filterItem
+    },
     inputHold (value) {
       this.checkValue = value
     },

src/components/SimpleTable/index.vue

@@ -4,6 +4,17 @@
       <el-table-column v-if="selected" type="selection" width="55">
       </el-table-column>
       <el-table-column v-for="col in filteredTableCols" :key="col.pagecode" :prop="col.pagecode" :label="col.pagename" :width="col.displaywidth" :show-overflow-tooltip="showOverflowTooltip" :formatter="tableFormatter">
+        <el-table-column v-for="colItem in col.children" :key="colItem.pagecode" :prop="colItem.pagecode" :label="colItem.pagename" :width="colItem.displaywidth" :show-overflow-tooltip="showOverflowTooltip" :formatter="tableFormatter">
+          <template #header>
+            <el-tooltip :content="colItem.pagedescribe || colItem.pagename" placement="top">
+              <TableHeaderCell :label="colItem.pagename" :filter-options="tableDataFilters[colItem.pagecode]" :filter-values.sync="filterValues[col.pagecode]" filter-style="arrow" :sortable="!!colItem.enablesort" :sort-rule.sync="tableDataSortRules[colItem.pagecode]" />
+            </el-tooltip>
+          </template>
+          <template slot-scope="scope">
+            <span v-if="!colItem.backgroundcolorexpression">{{ scope.row[colItem.pagecode] }}</span>
+            <div v-else :class="isTrue(scope.row[colItem.pagecode],colItem.backgroundcolorexpression )"></div>
+          </template>
+        </el-table-column>
         <template #header>
           <el-tooltip :content="col.pagedescribe || col.pagename" placement="top">
             <TableHeaderCell :label="col.pagename" :filter-options="tableDataFilters[col.pagecode]" :filter-values.sync="filterValues[col.pagecode]" filter-style="arrow" :sortable="!!col.enablesort" :sort-rule.sync="tableDataSortRules[col.pagecode]" />

src/views/tablePage/index.vue

@@ -41,7 +41,7 @@ import AdvancedQuery from '@/components/AdvancedQuery'
 import AuthButton from '@/components/AuthButton'
 import { mapGetters } from 'vuex'
 import { Query, newData, modifyData, moveData, start, stop, startAll, stopAll } from "@/api/webApi"
-import { formatChange } from '@/utils/validate'
+import { formatChange, listToTree } from '@/utils/validate'
 
 export default {
   name: 'TablePage',
@@ -217,11 +217,11 @@ export default {
     getColumnData (columnArrs = []) {
       const returnData = [...columnArrs]
       this.$store.dispatch('auth/changeAuthMsg', returnData)
-      const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay != 0);
-      const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc']);
+      const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay != 0)
+      const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc'])
       // const formItemCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay == 2 || item.isdisplay == 3);
-      // this.formItem = _.orderBy(formItemCopy, ['displaynumber'], ['asc']);
-      this.tableCols = tableColsCopyOrder;
+      // this.formItem = _.orderBy(formItemCopy, ['displaynumber'], ['asc']); 
+      this.tableCols = listToTree(tableColsCopyOrder, 'groupid', 'pagecode')
       const columncode = returnData.find(
         (item) => item.isprimarykey == 1
       );
@@ -629,7 +629,7 @@ export default {
       const arr = [...dataRules]
       if (arr && arr.length) {
         arr.forEach(item => {
-          item.value = item.value.replace(/\s*/g, "")
+          item.value = typeof item.value == 'string' ? item.value.replace(/\s*/g, "") : item.value
         })
       }
       this.defaultfilter = arr