简易查询

src/components/AdvancedQuery/index.vue

@@ -10,7 +10,7 @@
                   col.prop === 'comparisonOperator' ||
                   col.inputType[rowIndex] === 'select'
                 ">
-                  <el-select :style="col.prop === 'comparisonOperator' ? 'width:120px':'width:195px'" size="small" v-model="row[col.prop]" placeholder="请选择" @change="
+                  <el-select filterable clearable :style="col.prop === 'comparisonOperator' ? 'width:120px':'width:195px'" size="small" v-model="row[col.prop]" placeholder="请选择" @change="
                     value => {
                       selectChangeHandler(value, rowIndex, colIndex)
                     }

src/components/SimpleQuery/index.vue

@@ -1,33 +1,198 @@
 <template>
   <div class="simpleQuery">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
-      <el-form-item label="">
-        <el-date-picker size="small" v-model="formInline.timeRange" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
+    <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-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-option v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams['dropdownlistid']" :label="itemParams['dropdownlistlabel']" :value="itemParams['dropdownlistid']">
+            </el-option>
+          </el-select>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'ICON' || fromDataType(item.datatype) == 'icon'">
+          <el-select size="small" clearable v-model="tableForm[item.pagecode]" placeholder="请选择图标">
+            <el-option v-for="(item,index) in formIcons" :key="index" :label="item.name" :value="item.value">
+              <i style="font-size: 18px;" :class="item.name"></i>
+            </el-option>
+          </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>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'TEXTAREA'">
+          <el-input type="textarea" v-model="tableForm[item.pagecode]"></el-input>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'PASSWORD'">
+          <el-input show-password v-model="tableForm[item.pagecode]"></el-input>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'UNPASSWORD'">
+          <el-input show-password v-model="tableForm[item.pagecode]"></el-input>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'UPLOAD'">
+          <upload-item :id="index" :base-img="tableForm[item.pagecode]" ref="upload" />
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'SWITCH'">
+          <el-switch v-model="tableForm[item.pagecode]"></el-switch>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'CASCADER'">
+          <el-cascader v-model="tableForm[item.pagecode]" :options="tableOptions[item.pagecode]"></el-cascader>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'CHECKBOX'">
+          <el-checkbox-group v-model="tableForm[item.pagecode]">
+            <el-checkbox v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams[item['dropdownlistid']]" :label="itemParams[item['dropdownlistid']]" name="type">{{ [item['dropdownlistlabel']] }}</el-checkbox>
+          </el-checkbox-group>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'RADIO'">
+          <el-radio-group v-model="tableForm[item.pagecode]">
+            <el-radio v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams[item['dropdownlistid']]" :label="itemParams[item['dropdownlistid']]" name="type">{{ [item['dropdownlistlabel']] }}</el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'TIME'">
+          <el-time-picker size="small" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" v-model="tableForm[item.pagecode]" placeholder="选择任意时间段" @change="inputChangeHandler(item.pagecode)">
+          </el-time-picker>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'DATE'">
+          <el-date-picker size="small" class="datetimes" value-format="yyyy-MM-dd" v-model="tableForm[item.pagecode]" type="date" placeholder="选择日期" @change="inputChangeHandler(item.pagecode)">
+          </el-date-picker>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'DATETIME'">
+          <el-date-picker size="small" class="datetimes" value-format="yyyy-MM-dd HH:mm:ss" v-model="tableForm[item.pagecode]" type="datetime" placeholder="选择日期时间" @change="inputChangeHandler(item.pagecode)">
+          </el-date-picker>
+        </template>
+        <template v-else-if="fromDataType(item.datatype) == 'INT' || fromDataType(item.datatype) == 'tinyint' || fromDataType(item.datatype) == 'NUMBER'">
+          <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>
+        </template>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
+import PublicPageForm from '@/components/publicPageForm'
+import { Query } from "@/api/webApi"
+
 export default {
+  name: 'SimpleQuery',
+  props: {
+    simpleQueryItem: {
+      type: Array,
+      default: () => new Array()
+    }
+  },
+  components: { PublicPageForm },
   data () {
     return {
-      formInline: {
-        timeRange: '',
-      }
+      tableForm: {},
+      tableOptions: {},
+      formItemArr: []
     }
   },
+  computed: {
+    //设置新增修改表单类型
+    fromDataType () {
+      return function (type) {
+        if (type) {
+          return type.toLocaleUpperCase().replace(/\([^\)]*\)/g, "");
+        }
+      }
+    },
+    //设置新增修改表单必填类型
+    fromDataReq () {
+      return function (item) {
+        const { dropdownlist, datatype, pagename, isrequired, formatrule } = item
+        const itemType = datatype.replace(/\([^\)]*\)/g, "")
+        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 (itemReq && itemRule) return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'blur' }, { pattern: new RegExp(formatrule), message: `请输入合法的${pagename}规则`, trigger: 'blur' }]
+        return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'blur' }]
+      }
+    },
+  },
+  watch: {
+    simpleQueryItem: {
+      handler (array) {
+        this.getSelectData(array)
+      },
+      deep: true,
+      immediate: true
+    },
+  },
   methods: {
     onSubmit () {
       this.$emit('queryValue', this.formInline)
+    },
+    //获取表单下拉数据
+    changeSelect (code) {
+      if (code == 'passparameters') return
+      const datas = this.$store.state.auth.authMsg
+      if (!datas?.length) return
+      const ndata = datas.filter(item => item.labelcode && item.pagecode == code)
+      if (ndata?.length) {
+        const nitem = ndata[0]
+        const nval = this.tableForm[code]
+        const { dropdownlistlabel, labelcode, dropdownlistid } = nitem
+        const wdata = this.tableOptions[code].filter(item => item[dropdownlistid] == nval)
+        if (!wdata.length) return
+        const witem = wdata[0]
+        this.tableForm[labelcode] = witem[dropdownlistlabel]
+      }
+    },
+    inputChangeHandler (data) {
+      if (!this.tableForm[data]) this.tableForm[data] = null
+    },
+    //格式化传递参数数据
+    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
+    },
+    getSelectData (formItem) {
+      if (!formItem.length || !Array.isArray(formItem)) return
+      const formItemCopy = _.cloneDeep(formItem)
+      formItemCopy.map(async ({ 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)
+          }
+        }
+      })
+      this.formItemArr = formItemCopy
     }
   }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+::v-deep.simpleQuery {
+  height: 52px;
+  padding-right: 20px;
+  .el-scrollbar__wrap {
+    overflow-x: auto;
+  }
+  .is-vertical {
+    display: none;
+  }
+  .el-select {
+    width: 100%;
+  }
+}
 </style>

src/components/publicPageForm/index.vue

@@ -109,10 +109,6 @@ export default {
       type: Number,
       default: 8
     },
-    formType: {
-      type: String,
-      default: 'add'
-    },
     labelWidth: {
       type: String,
       default: '80px'

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="false" @queryValue="queryValue" />
+        <SimpleQuery v-if="simpleQueryFlag" :simple-query-item="simpleQueryItem" @queryValue="queryValue" />
       </template>
       <AuthButton :auth="pageAuthBtnAdd" />
       <AuthButton :auth="pageAuthBtnQuery" />
@@ -107,6 +107,8 @@ export default {
       selectedDataCheck: {}, //勾选树-选中
       triggerserviceid: null, //勾选后查询的serviceid
       summaryFlag: false, //是否显示合计行
+      simpleQueryFlag: false,
+      simpleQueryItem: []
     }
   },
   computed: {
@@ -227,16 +229,21 @@ export default {
       // const formItemCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay == 2 || item.isdisplay == 3);
       // this.formItem = _.orderBy(formItemCopy, ['displaynumber'], ['asc']);
       const msgCounts = tableColsCopyOrder.filter(item => item.enablecount)
+      const simpleQueryItem = _.cloneDeep(returnData).filter((item) => item.easysearch && item.isfiltercolumn)
       if (msgCounts.length) {
         this.summaryFlag = true
       }
       this.tableCols = listToTree(tableColsCopyOrder, 'groupid', 'pagecode')
       const columncode = returnData.find(
         (item) => item.isprimarykey == 1
-      );
+      )
       if (columncode && Object.keys(columncode).length) {
         this.tableKey = columncode['pagecode']
       }
+      if (simpleQueryItem?.length) {
+        this.simpleQueryFlag = true
+        this.simpleQueryItem = simpleQueryItem
+      }
     },
     //获取tree点击
     treeNodeClick (data) {