简易查询修改

src/components/AdvancedQuery/index.vue

@@ -223,6 +223,7 @@ export default {
         if (arr && arr.length) {
           const datas = []
           const types = []
+          this.paramsForm.params = []
           arr.forEach(item => {
             if (isNaN(item.value) && !isNaN(Date.parse(item.value))) {
               types.push('date')

src/components/PublicPageHeader/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="PublicPageHeader">
-    <div class="PublicPageHeader-content flex">
+    <div class="PublicPageHeader-content">
       <div class="PublicPageHeader-title manageTitle">{{ pageTitle }}</div>
+    </div>
+    <div class="PublicPageHeader-btns flex">
       <div class="PublicPageHeader-query">
         <slot name="d_foot" />
       </div>
-    </div>
-    <div class="PublicPageHeader-btns">
-      <slot />
+      <div class="PublicPageHeader-btns-list">
+        <slot />
+      </div>
     </div>
   </div>
 </template>

src/components/SimpleQuery/index.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="simpleQuery">
+  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="simpleQuery">
     <el-form ref="ruleForm" inline :model="tableForm">
       <el-form-item v-for="(item, index) in formItemArr" :key=" index" :rules="fromDataReq(item)" :prop="item.pagecode">
         <template v-if="fromDataType(item.datatype) == 'SELECT' || fromDataType(item.datatype) == 'SELECTS'">
-          <el-select class="input-shadow" size="small" :multiple="fromDataType(item.datatype) == 'SELECTS'?true:false" filterable default-first-option style="width: 100%" v-model="tableForm[item.pagecode]" @change="changeSelect(item.pagecode, item)" placeholder="请选择" clearable @clear="tableForm[item.pagecode] = ''">
-            <el-option v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams[item['dropdownlistid']]" :label="itemParams[item['dropdownlistlabel']]" :value="itemParams[item['dropdownlistid']]">
+          <el-select class="input-shadow" size="small" :multiple="fromDataType(item.datatype) == 'SELECTS'?true:false" filterable default-first-option style="width: 100%" v-model="tableForm[item.pagecode]" @change="changeSelect(item.pagecode, item)" :placeholder="'请选择'+item.pagename" clearable @clear="tableForm[item.pagecode] = ''">
+            <el-option v-for="(itemParams,sindex) in tableOptions[item.pagecode]" :key="itemParams[item['dropdownlistid']]+sindex" :label="itemParams[item['dropdownlistlabel']]" :value="itemParams[item['dropdownlistid']]">
             </el-option>
           </el-select>
         </template>
         <template v-else-if="fromDataType(item.datatype) == 'DROP'">
-          <el-select class="input-shadow" size="small" multiple filterable default-first-option style="width: 100%" v-model="tableForm[item.pagecode]" @change="changeSelect(item.pagecode, item)" placeholder="请选择" clearable @clear="tableForm[item.pagecode] = ''">
+          <el-select class="input-shadow" size="small" multiple filterable default-first-option style="width: 100%" v-model="tableForm[item.pagecode]" @change="changeSelect(item.pagecode, item)" :placeholder="'请选择'+item.pagename" clearable @clear="tableForm[item.pagecode] = ''">
             <el-option v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams['dropdownlistid']" :label="itemParams['dropdownlistlabel']" :value="itemParams['dropdownlistid']">
             </el-option>
           </el-select>
@@ -22,7 +22,7 @@
           </el-select>
         </template>
         <template v-else-if="fromDataType(item.datatype) == 'TEXT' || fromDataType(item.datatype) == 'VARCHAR'">
-          <el-input size="small" :placeholder="'请输入'+item.pagename" @change="inputChangeHandler(item.pagecode)" v-model="tableForm[item.pagecode]"></el-input>
+          <el-input size="small" clearable :placeholder="'请输入'+item.pagename" @change="inputChangeHandler(item.pagecode)" v-model="tableForm[item.pagecode]"></el-input>
         </template>
         <template v-else-if="fromDataType(item.datatype) == 'TEXTAREA'">
           <el-input type="textarea" v-model="tableForm[item.pagecode]"></el-input>
@@ -68,9 +68,13 @@
           <el-input size="small" v-model.number="tableForm[item.pagecode]" onkeyup="value=value.replace(/[^1-9]/g,'')" @change="inputChangeHandler(item.pagecode)"></el-input>
         </template>
         <template v-else>
-          <el-input size="small" v-model="tableForm[item.pagecode]" @change="inputChangeHandler(item.pagecode)"></el-input>
+          <el-input size="small" :placeholder="'请输入'+item.pagename" v-model="tableForm[item.pagecode]" @change="inputChangeHandler(item.pagecode)"></el-input>
         </template>
       </el-form-item>
+      <el-form-item>
+        <!-- <el-button size="small" @click="restSubmit" type="warning">重置</el-button> -->
+        <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -85,13 +89,19 @@ export default {
     simpleQueryItem: {
       type: Array,
       default: () => new Array()
-    }
+    },
+    selectOptions: {
+      type: Array,
+      default: () => new Array()
+    },
   },
   components: { PublicPageForm },
   data () {
     return {
+      loading: false,
       tableForm: {},
       tableOptions: {},
+      queryContent: {},
       formItemArr: []
     }
   },
@@ -112,7 +122,7 @@ export default {
         const itemReq = isrequired ? true : false
         const itemRule = formatrule ? true : false
         if (dropdownlist || dropdownlist == 0) return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'change' }]
-        else if (itemType == 'date' || itemType == 'datetime') return [{ required: itemReq, type: 'date', message: `${pagename}不能为空`, trigger: 'change' }]
+        else if (itemType == 'date' || itemType == 'datetime') return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'change' }]
         else
           if (itemReq && itemRule) return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'blur' }, { pattern: new RegExp(formatrule), message: `请输入合法的${pagename}规则`, trigger: 'blur' }]
         return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'blur' }]
@@ -127,10 +137,52 @@ export default {
       deep: true,
       immediate: true
     },
+    selectOptions: {
+      handler (array) {
+        this.formatForm(array)
+      },
+      deep: true,
+      immediate: true
+    },
   },
   methods: {
     onSubmit () {
-      this.$emit('queryValue', this.formInline)
+      try {
+        this.$refs['ruleForm'].validate(valid => {
+          if (!valid) {
+            throw new Error()
+          }
+        })
+        const queryContent = []
+        const params = this.tableForm
+        for (const key in params) {
+          if (Object.hasOwnProperty.call(params, key)) {
+            const value = params[key]
+            if (value) {
+              const obj = {
+                column: key,
+                comparator: '=',
+                value,
+                connector: '',
+                left: '(',
+                right: ')'
+              }
+              queryContent.push(obj)
+            }
+          }
+        }
+        this.queryContent = queryContent
+        this.$emit('queryValue', this.queryContent)
+      } catch (error) {
+        error.message && this.$message.error(error.message)
+      }
+    },
+    restSubmit () {
+      const tableForm = {}
+      this.tableForm = tableForm
+    },
+    sendColData () {
+      this.$emit('queryValue', this.queryContent)
     },
     //获取表单下拉数据
     changeSelect (code) {
@@ -166,16 +218,49 @@ export default {
     getSelectData (formItem) {
       if (!formItem.length || !Array.isArray(formItem)) return
       const formItemCopy = _.cloneDeep(formItem)
-      formItemCopy.map(async ({ dropdownlist, pagecode, defaultparameters }) => {
+      const results = []
+      const resultsKey = []
+      formItemCopy.map(({ dropdownlist, pagecode, defaultparameters }) => {
         if (((dropdownlist || dropdownlist == 0) && dropdownlist != "")) {
           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) {
-            this.tableOptions[pagecode] = _.cloneDeep(returnData)
-          }
+          results.push(Query({ serviceid: dropdownlist, datacontent, event: '0', page: 1, size: 9999 }))
+          resultsKey.push(pagecode)
+        }
+      })
+      if (results?.length) {
+        this.getAnscyData(resultsKey, results, formItemCopy)
+      } else {
+        this.formItemArr = formItemCopy
+      }
+    },
+    //获取异步数据
+    async getAnscyData (allResultKey, allResult, formItem) {
+      this.loading = true
+      const results = await Promise.allSettled(allResult)
+      results.map((item, index) => {
+        const { status, value } = item
+        if (status == 'fulfilled') {
+          const { code, returnData } = value
+          this.tableOptions[allResultKey[index]] = code == 0 && returnData?.length ? this.formatData(returnData) : []
+        }
+      })
+      this.formItemArr = formItem
+      this.loading = false
+    },
+    formatData (returnData) {
+      return typeof returnData == 'string' ? JSON.parse(returnData) : returnData
+    },
+    formatForm (array) {
+      if (!array.length) return
+      const ndatas = [...array]
+      const tableForm = {}
+      ndatas.forEach(item => {
+        const { column, value } = item
+        if (value) {
+          tableForm[column] = value
         }
       })
-      this.formItemArr = formItemCopy
+      this.tableForm = tableForm
     }
   }
 }
@@ -183,8 +268,6 @@ export default {
 
 <style lang="scss" scoped>
 ::v-deep.simpleQuery {
-  height: 52px;
-  padding-right: 20px;
   .el-scrollbar__wrap {
     overflow-x: auto;
   }

src/views/tablePage/index.vue

@@ -2,7 +2,7 @@
   <div :style="pageTableHeight" class="TablePage">
     <PublicPageHeader class="TablePage_header" :page-title="dataTitle ? dataTitle : pageTitle">
       <template slot="d_foot">
-        <SimpleQuery v-if="simpleQueryFlag" :simple-query-item="simpleQueryItem" @queryValue="queryValue" />
+        <SimpleQuery v-if="simpleQueryFlag" :selectOptions="advancedQueryValue" :simple-query-item="simpleQueryItem" @queryValue="queryValue" />
       </template>
       <AuthButton :auth="pageAuthBtnAdd" />
       <AuthButton :auth="pageAuthBtnQuery" />
@@ -24,7 +24,7 @@
       </PublicPageDialog>
       <!--高级查询-->
       <PublicPageDialog dialog-title="高级查询" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedClose" @handleSubmit="advancedTable('advancedDialogForm')">
-        <AdvancedQuery ref="advancedDialogForm" @getAdvancedQueryData="getAdvancedQueryData" />
+        <AdvancedQuery ref="advancedDialogForm" :selectOptions="simpleQueryValue" @getAdvancedQueryData="getAdvancedQueryData" />
         <template slot="d_foot">
           <el-button size="small" @click="restCollect('advancedDialogForm')" type="warning">重置</el-button>
           <el-button size="small" @click="queryCollect('advancedDialogForm')" type="primary">收藏</el-button>
@@ -107,8 +107,10 @@ export default {
       selectedDataCheck: {}, //勾选树-选中
       triggerserviceid: null, //勾选后查询的serviceid
       summaryFlag: false, //是否显示合计行
-      simpleQueryFlag: false,
-      simpleQueryItem: []
+      simpleQueryFlag: false, //是否开启了简易查询
+      simpleQueryItem: [], //简易查询表单数据项
+      simpleQueryValue: [], //简易查询缓存值
+      advancedQueryValue: [], //高级查询缓存值
     }
   },
   computed: {
@@ -630,8 +632,16 @@ export default {
       }
     },
     //简易查询-确定
-    queryValue (from) {
-      console.log(from)
+    queryValue (dataRules) {
+      const arr = [...dataRules]
+      if (arr && arr.length) {
+        arr.forEach(item => {
+          item.value = typeof item.value == 'string' ? item.value.replace(/\s*/g, "") : item.value
+        })
+      }
+      this.defaultfilter = arr.length ? arr : { 1: 1 }
+      this.simpleQueryValue = arr
+      this.queryTableData(true)
     },
     //高级查询-确定
     advancedTable (refName) {
@@ -645,7 +655,6 @@ export default {
     },
     //高级查询-确定-数据
     getAdvancedQueryData (dataRules) {
-      console.log(dataRules)
       const arr = [...dataRules]
       if (arr && arr.length) {
         arr.forEach(item => {
@@ -653,6 +662,7 @@ export default {
         })
       }
       this.defaultfilter = arr
+      this.advancedQueryValue = arr
       this.queryTableData(true)
     },
     //高级查询-收藏