报表行颜色修改 客户名称等搜索条件组件改远程搜索

src/components/LowDesign/src/LowReport/index.vue

@@ -45,7 +45,30 @@
         </ElButton>
         <div ref="tableHeightRef"></div>
       </template>
-    
+      <template  v-for="prop in searchReportSlots" :key="prop" #[`${prop}-search`]="scope" >
+      <div>
+        <el-select
+        v-model="tableSearch[prop]"
+        :multiple="scope.column.multiple"
+        filterable
+        remote
+        remote-show-suffix
+        clearable
+        :disabled="loading"
+        :collapse-tags="scope.column.collapseTags"
+        :collapse-tags-tooltip="scope.column.collapseTagsTooltip"
+        :placeholder="'请选择'+scope.column.label"
+        :remote-method="(query) => remoteMethod(query, scope.column)"
+      >
+        <el-option
+          v-for="(item,index) in scope.column.dicData"
+          :key="index"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      </div>
+      </template>
       <template v-for="prop in numberRange" :key="prop" #[`${prop}-search`]="scope">
         <InputNumberRange
           v-model="tableSearch[prop]"
@@ -142,6 +165,7 @@ const tableInfo = ref<any>({})
 const timerObj = ref<any>({})
 const numberRange = ref<string[]>([])
 const dateRange=ref<string[]>([])
+const searchReportSlots=ref<string[]>([])
 const hideColumns=ref<string[]>([])
 const dateTimeRange=ref<string[]>([])
 const timeRange=ref<string[]>([])
@@ -159,6 +183,18 @@ const permissions =
 const selectIds = computed(() => {
   return tableSelect.value.map((item) => item['id'])
 })
+const remoteMethod= async(query,column)=>{
+  if(!query){
+    return
+  }
+  let params={
+    pageSize: 100,
+    pageNo:1,
+  }
+  params[column.prop]=query
+  let data = await ReportApi.getTableList(column.reportCode,params)
+  column.dicData=column.formatterDic(data)
+}
 const crudBind = computed(() => {
   const obj = {}
   if (tableInfo.value.isPage) obj['page'] = tablePage.value
@@ -183,10 +219,9 @@ watch(()=>tableHeightRef.value,()=>{
       if(tableOption.value.showSummary&&tableOption.value.index&&tableOption.value.selection){
         document.querySelector('tfoot tr td').colSpan="2"
         document.querySelectorAll('tfoot tr td')[1].style.display="none"
-
       }
       
-    },1000)
+    },2000)
   }
 })
 let resizeObserver = null;
@@ -209,6 +244,7 @@ const setLastAmountRowClass=(row,rowIndex)=>{
     return 'lastAmountRow'
   }
 }
+
 const summaryMethod1=({columns,data})=>{
   // 1. 初始化汇总结果数组（和表格列数量一致）
       const result = new Array(columns.length).fill("");
@@ -231,22 +267,6 @@ const summaryMethod1=({columns,data})=>{
     })
     return styleObj
   }
-
-  // 远程搜索处理函数
-    async function handleRemoteSearch(code,prop,page,dictData) {
-      // 空关键词时可选择加载前10条或清空
-      try {
-        let res = await ReportApi.getTableList(code,{pageSize: 50, pageNo:page})
-        // 更新下拉选项
-        dictData= dictData.concat(res.records.map(item=>({
-          label:item[prop],
-          value:item[prop]
-        })))
-        page++
-      } finally {
-       
-      }
-    }
 function getCurrentDate() {
   const now = new Date();
   // 补零函数：小于10则前面加0
@@ -335,7 +355,7 @@ const initTable = async () => {
 
   //   }
   // 处理动态列（暂不构建children，等数据返回后动态生成）
-  dynamicFields.forEach((item, index) => {
+  dynamicFields.forEach(async (item, index) => {
     if (item.parentFieldCode && item.parentFieldCode !== '') return
     const config: any = {
       prop: item.fieldCode,
@@ -377,6 +397,10 @@ const initTable = async () => {
         if(item.fieldName=='效期剩余时间(天)分类') config.searchSpan=5
     
     if(config.search) config.searchLabelWidth=item.fieldName.length*12 +40
+    const moreIn="MORE_IN".includes(item.queryMode)
+    config.searchType=moreIn?'select':config.searchType
+    config.multiple=config.collapseTags=config.collapseTagsTooltip =moreIn
+    item.queryMode=='LIKE'?config.multiple=config.collapseTags=config.collapseTagsTooltip =true:''
     const jkTableDicFields={
       '货品名称':'hpmx',
       '货品':'hpmx',
@@ -392,23 +416,18 @@ const initTable = async () => {
     }
     if(Object.keys(jkTableDicFields).includes(item.fieldName)&&config.search){
       config.dataType= 'string'
-      config.dictType= 'defaultTable'             
+      config.reportCode= `${jkTableDicFields[item.fieldName]}`
-      config.dicUrl= `/lideeyunji/report-data/list/${jkTableDicFields[item.fieldName]}`
+      const formatterData=(res) => { //请求数据格式化
-      config.dicMethod= 'post'
-      config.dicQuery= { //请求参数
-           pageSize: 1000000,
-           pageNo:1
-        } 
-      // config.dicData=[]
-      //   config.remote=true
-      //   config.popperAppendToBody= true
-      //   let pageN=1
-      //   config.remoteMethod= handleRemoteSearch(jkTableDicFields[item.fieldName],config.prop,pageN,config.dicData)
-      config.dicFormatter= (res) => { //请求数据格式化
         const arr=[...new Set(res.records.map(item=>item[config.prop=="zonename"?"salezonename":config.prop]))]
         return arr.map(item=>({label:item,value:item}))
       }
-      config.searchType='select'
+      let data = await ReportApi.getTableList(jkTableDicFields[item.fieldName],{pageSize: 50, pageNo:1})
+      config.formatterDic=formatterData
+      config.page=1
+      config.total=data.total
+      config.dicData=formatterData(data)
+      searchReportSlots.value.push(config.prop)
+      // config.multiple?tableSearch.value[config.prop]=item.searchDefaultValue?item.searchDefaultValue.split(','):[]:''
     }
     if(item.dictCode){
       const dictData=getStrDictOptions(item.dictCode)
@@ -417,9 +436,7 @@ const initTable = async () => {
       config.dataType= 'string'
       dictFieldList.value.push(config)
     }
-    const moreIn="MORE_IN".includes(item.queryMode)
+    
-    config.searchType=moreIn?'select':config.searchType
-    config.multiple=config.filterable=config.collapseTags=moreIn
    
     if(!!item.isAmount){
       index==0?amountFieds.value.fistField=config.prop:''
@@ -438,7 +455,6 @@ const initTable = async () => {
       hideColumns.value.push(config.prop)
     }
     if (item.queryMode == 'RANGE') config.searchRange = true
-    if (item.queryMode == 'LIKE') config.multiple = config.collapseTags=true
     if (['Integer', 'BigInt', 'BigDecimal'].includes(item.fieldType)) config.type = 'number'
     else if (item.fieldType == 'Date') {
       config.type = 'date'
@@ -861,6 +877,16 @@ defineExpose({
     }
   }
 
+  :deep(.el-table){
+     .is-group th.el-table__cell,th.el-table__cell{
+      background-color: #C6EFFE;
+      }
+      .el-table__body tr.hover-row>td.el-table__cell{
+        background-color: #FFFFD2;
+      }
+ 
+  }
+
   .lastAmountRow{
 
   }

src/styles/var.css

@@ -53,6 +53,8 @@
   --app-footer-height: 30px;
 
   --transition-time-02: 0.2s;
+
+  --el-fill-color-lighter: #F5F5F6;
 }
 
 .dark {