更多查询

src/views/components/rangeInput.vue

@@ -0,0 +1,115 @@
+<template>
+<el-form :model="inputForm" :rules="rules" class="demo-form-inline">
+  <div class="flex-div">
+    <el-form-item prop="start">
+      <el-input
+        v-model="inputForm.start"
+        class="wd50"
+        size="small"
+        :type="inputType"
+        clearable
+        placeholder="请输入内容"
+        @change="handleChange"
+      />
+    </el-form-item>
+    <div>-</div>
+    <el-form-item prop="end">
+      <el-input
+        v-model="inputForm.end"
+        class="wd50"
+        size="small"
+        :type="inputType"
+        clearable
+        placeholder="请输入内容"
+        @change="handleChange"
+        @blur="handleBlur"
+      />
+    </el-form-item>
+  </div>
+  
+</el-form>
+</template>
+
+<script>
+export default {
+  name: 'inputRange',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => { 
+        return {
+          start: '',
+          end: ''
+        }
+       }
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    let checkAge = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入内容'))
+      } else {
+        if (value < this.inputForm.start) {
+          callback(new Error('结束值不能小于开始值'))
+        }
+        callback()
+      }
+    }
+    return {
+      inputForm: {...this.value},
+      rules: {
+        end: [
+            { validator: checkAge, trigger: 'blur' }
+          ],
+      }
+    }
+  },
+  computed: {
+    inputType() {
+      if (this.type == 'num') return 'number'
+    }
+  },
+  watch: {
+    'value.start'(val) {
+      this.inputForm.start = val
+    },
+    'value.end'(val) {
+      this.inputForm.end = val
+    },
+  },
+  methods: {
+    handleChange(val) {
+      // if ()
+      this.$emit('change', { ...this.inputForm})
+    },
+    handleBlur() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-div {
+  display: flex;
+  align-items: center;
+}
+.wd50 {
+  // width: 45%;
+}
+.demo-form-inline {
+  ::v-deep .el-form-item {
+    width: 40%;
+    margin: 0;
+  }
+}
+
+</style>

src/views/components/resiSearch.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="resi-container">
-    <el-card class="resi-card">
+    <!-- <el-card class="resi-card"> -->
-      <el-row class="resi-row-box" :class="openSearch && 'resi-row-more'">
+      <el-row class="resi-row-box" :class="!isArrow && 'resi-row-more'">
-        <el-row class="resi-row">
+        <el-row v-if="showGrid" class="resi-row">
           <el-col :span="6">
             <div class="resi-cell">
               <div class="resi-cell-label">所属网格</div>
@@ -107,13 +107,13 @@
           </el-col>
         </el-row>
         <el-row
-          v-for="(item, index) in sliceList(formList, 4)"
+          v-for="(item, index) in sliceList(itemList, 4)"
           :key="index"
           class="resi-row"
         >
-          <el-col v-for="n in item" :key="n.id" :span="6">
+          <el-col v-for="n in item" :key="n.id" :span="computdSpan(item.length)">
             <div class="resi-cell">
-              <div class="resi-cell-label">{{ n.label }}</div>
+              <div class="resi-cell-label" :class="item.length != 4 && 'resi-cell-label1'">{{ n.label }}</div>
               <div
                 class="resi-cell-value"
                 :class="n.itemType === 'radio' && 'resi-cell-value-radio'"
@@ -127,6 +127,16 @@
                   placeholder="请输入内容"
                 >
                 </el-input>
+                <template v-else-if="n.itemType == 'inputRange'">
+                  <!-- <el-input
+                    v-model.trim="form[n.columnName]"
+                    class="resi-cell-input"
+                    size="small"
+                    clearable
+                    placeholder="请输入内容"
+                  /> -->
+                  <inputRange v-model="form[n.columnName]" :type="n.validType" @change="handleAgeChange" />
+                </template>
                 <template v-else-if="n.itemType === 'datepicker'">
                   <el-date-picker
                     v-if="n.queryType === 'daterange'"
@@ -182,12 +192,18 @@
                   class="resi-cell-select"
                 >
                 </el-cascader>
+                <template v-else-if="n.itemType === 'checkbox'">
+                  <el-checkbox-group v-model="form[n.columnName]">
+                    <el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value">{{ns.label}}</el-checkbox>
+                    <!-- <el-checkbox label="n.la"></el-checkbox> -->
+                  </el-checkbox-group>
+                </template>
               </div>
             </div>
           </el-col>
         </el-row>
       </el-row>
-      <el-row class="resi-search">
+      <el-row v-if="isArrow" class="resi-search">
         <!-- <el-col :span="20">
           <el-button type="primary" size="mini">查询</el-button>
         </el-col> -->
@@ -196,17 +212,21 @@
           <el-button class="diy-button--reset" size="small" @click="resetForm">重置</el-button>
         </el-col>
       </el-row>
-      <div class="resi-down" @click="handleOpenSearch">
+      <!-- <div v-if="isArrow" class="resi-down" @click="handleOpenSearch">
         <img v-if="openSearch" src="../../assets/img/arrow-up.png" />
         <img v-else src="../../assets/img/arrow-down.png" />
-      </div>
+      </div> -->
-    </el-card>
+    <!-- </el-card> -->
   </div>
 </template>
 
 <script>
+import inputRange from './rangeInput.vue'
 export default {
   name: 'ResiSearch',
+  components: {
+    inputRange
+  },
   props: {
     formList: {
       type: Array,
@@ -215,6 +235,14 @@ export default {
     columnName: {
       type: String,
       default: ''
+    },
+    showGrid: {
+      type: Boolean,
+      default: false
+    },
+    isArrow: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -226,13 +254,23 @@ export default {
       //   return _form
       // }
       arr.forEach((item) => {
-        if (columnName && columnName === item.columnName) _form[item.columnName] = '1'
+        if (item.itemType == 'checkbox') _form[item.columnName] = []
+        else if (columnName && columnName === item.columnName) _form[item.columnName] = '1'
+        else if (item.itemType == 'inputRange') _form[item.columnName] = { start: '', end: ''}
         else _form[item.columnName] = ''
       })
       return _form
     }
-    let form = initForm(this.formList, this.columnName)
+    let itemList = this.formList.map(item => {
-    let tempFormList = this.formList.map(item => {
+      if (item.itemType == 'inputRange' && item.funType == 'agetoyear') {
+        item.columnName = 'age'
+      }
+      return {
+        ...item
+      }
+    })
+    let form = initForm(itemList, this.columnName)
+    let tempFormList = itemList.map(item => {
       
       return {
         ...item,
@@ -256,6 +294,7 @@ export default {
       optionsD: [],
       optionsG: [],
       value: '',
+      itemList,
       fixedList: [],
       fixedForm: {
         GRID_ID: '',
@@ -332,7 +371,7 @@ export default {
     },
     changeDDisabled() {
       return !this.form.UNIT_ID
-    }
+    },
   },
   watch: {
     form: {
@@ -352,6 +391,7 @@ export default {
   created() {
     // this.initForm()
     // console.log('formcccc---', this.form)
+
     this.getGridList()
     this.getValiheList()
     if (this.columnName) this.handleChangeForm(this.columnName)
@@ -363,6 +403,9 @@ export default {
       })
       console.log('formcccc---', this.form)
     },
+    computdSpan(len) {
+      return len == 1 ? 24 : 6
+    },
     handleClearVillage() {
       this.form.BUILD_ID = ''
       this.form.HOME_ID = ''
@@ -378,28 +421,37 @@ export default {
     },
     resetForm(formName) {
       for(const n in this.form) {
-        this.form[n] = ''
+        if (n == 'age') {
+          this.form.age = {
+            start: '',
+            end: ''
+          }
+        } else if (typeof this.form[n] == 'object') this.form[n] = []
+        else this.form[n] = ''
+        
       }
-      this.handleSearch()
+      // let arr3 = [...arr1, ...arr]
+      this.$emit('search', [])
+      // this.handleSearch()
     },
     handleSearch() {
       // console.log('formmmmm---', this.form)
-      const itemTypes = ['daterange', 'timerange']
+      const itemTypes = ['daterange', 'timerange', 'checkbox']
-      let arr = this.tempFormList
+      let a = this.tempFormList.filter(item => item.itemType != 'inputRange')
-        .filter((n) => n.isChange)
+      let arr = a.filter((n) => n.isChange).map((item) => {
-        .map((item) => {
           return {
             queryType: item.queryType,
             tableName: item.tableName,
             columnName: item.columnName,
             // columnValue: []
-            columnValue:
+            columnValue: this.form[item.columnName] && 
-              itemTypes.includes(item.queryType) ||
+              (itemTypes.includes(item.queryType) ||
               itemTypes.includes(item.itemType)
                 ? this.form[item.columnName]
-                : [this.form[item.columnName].toString()]
+                : [this.form[item.columnName].toString()])
           }
         })
+      const arr2 = arr.filter(item => item.columnValue.length > 0)
       let arr1 = this.fixedList
         .filter((n) => n.columnValue.length > 0)
         .map((item) => {
@@ -407,12 +459,21 @@ export default {
             ...item
           }
         })
-      let arr3 = [...arr1, ...arr]
+      let arr3 = [...arr1, ...arr2]
       this.$emit('search', arr3)
+      return arr3
     },
     handleOpenSearch() {
       this.openSearch = !this.openSearch
     },
+    handleAgeChange(val) {
+      console.log('val----age---', val)
+      if (val.end) {
+        const s = this.computedBirth(val.end)
+        const e = this.computedBirth(val.start)
+        this.form.BIRTHDAY = [s, e]
+      }
+    },
     handleChangeGrid(val) {
       console.log('val', val)
       this.form.VILLAGE_ID = ''
@@ -563,16 +624,35 @@ export default {
         .catch(() => {
           return this.$message.error('网络错误')
         })
+    },
+    computedBirth(age) {
+      let now = new Date(); 
+      let nowYear = now.getFullYear(); 
+      let nowMonth = now.getMonth()+1; 
+      let nowDay = now.getDate(); // 按照减法原理，先day相减，不够向month借；然后month相减，不够向year借；最后year相减。 
+      let subYear = nowYear - age
+      if(nowMonth < 10){
+        nowMonth = '0'+ nowMonth
+      }
+      if(nowDay < 10){
+        nowDay = '0' + nowDay
+      }
+      console.log(subYear+'-'+nowMonth+'-'+nowDay);
+      return subYear + '-' + nowMonth + '-' + nowDay
     }
   }
 }
 </script>
 
 <style lang="scss" scope>
-.resi-container .resi-card {
+// .resi-container {
-  position: relative;
+//   position: relative;
-  overflow: visible;
+//   overflow: visible;
-}
+// }
+// .resi-container .resi-card {
+//   position: relative;
+//   overflow: visible;
+// }
 .resi-down {
   position: absolute;
   left: 50%;
@@ -614,12 +694,15 @@ export default {
   align-items: center;
   .resi-cell-label {
     flex-shrink: 0;
-    width: 70px;
+    min-width: 70px;
     box-sizing: border-box;
     margin-right: 15px;
     text-align: right;
     // line-height: 32;
   }
+  .resi-cell-label1 {
+    width: max-content;
+  }
   .resi-cell-value-radio {
     display: flex;
     align-items: center;

src/views/modules/base/resi.vue

@@ -1,10 +1,39 @@
 <template>
   <div class="resi-container">
-    <resi-search v-if="searchList.length > 0"
+    <el-card class="resi-card">
-                 ref="resiSearch"
+      <el-collapse v-if="openSearch" v-model="activeNames">
-                 :form-list="searchList"
+        <el-collapse-item v-for="item in searchList" :key="item.itemGroupId" 
-                 :column-name="defaultCategotyKey"
+          :title="item.groupName" :name="item.itemGroupId">
-                 @search="handleSearch" />
+          <resi-search v-if="searchList.length > 0"
+                  :ref="'resiSearch' + item.itemGroupId"
+                  :form-list="item.queryItemList"
+                  :column-name="defaultCategotyKey"
+                  :show-grid="item.groupName == '基础信息'"
+                  />
+        </el-collapse-item>
+      </el-collapse>
+      <template v-else>
+        <resi-search v-if="searchList.length > 0"
+                  ref="resiSearch"
+                  :form-list="searchList[0].queryItemList"
+                  :column-name="defaultCategotyKey"
+                  :is-arrow="true"
+                  @search="handleSearch" />
+      </template>
+      <el-row v-if="openSearch" class="resi-search">
+        <!-- <el-col :span="20">
+          <el-button type="primary" size="mini">查询</el-button>
+        </el-col> -->
+        <el-col :span="24">
+          <el-button type="primary" size="small" @click="handleSearchFrom">查询</el-button>
+          <el-button class="diy-button--reset" size="small" @click="resetSearchForm">重置</el-button>
+        </el-col>
+      </el-row>
+      <div class="resi-down" @click="handleOpenSearch">
+        <img v-if="openSearch" src="../../../assets/img/arrow-up.png" />
+        <img v-else src="../../../assets/img/arrow-down.png" />
+      </div>
+    </el-card>
     <el-card class="resi-card-table">
       <div class="resi-row-btn">
         <el-button size="small"
@@ -277,6 +306,7 @@ import { mapGetters } from 'vuex'
 import resiTransfer from '../../components/resiTransfer.vue'
 import resiChangeRecord from '../../components/resiChangeRecord.vue'
 import peopleMore from "@/views/modules/shequ/cpts/people-more";
+import { listen } from 'ol/events'
 
 export default {
   components: {
@@ -289,6 +319,8 @@ export default {
   },
   data () {
     return {
+      activeNames: ['1'],
+      openSearch: false,
       exportBtn: false,
       exportBtnTitle: '导出',
       importBtnTitle: '导入',
@@ -342,11 +374,12 @@ export default {
 
   },
   async activated () {
-    if (this.$route.query) {
+    console.log('this.$route.query---', this.$route.query)
+    if (this.$route.query && this.$route.query.columnName) {
       this.searchList = []
       let query = this.$route.query
       this.defaultCategotyKey = query.columnName
-      console.log(this.defaultCategotyKey)
+      console.log('defaultCategotyKey----', this.defaultCategotyKey)
       await this.getSearchList()
       this.$refs.resiSearch.handleSearch()
     }
@@ -419,6 +452,9 @@ export default {
       this.tranferShow = false
       this.getTableData()
     },
+    handleOpenSearch() {
+      this.openSearch = !this.openSearch
+    },
     computedWidth (label, type) {
       
       let wd = ''
@@ -514,12 +550,39 @@ export default {
       
       return _val || row[item.columnName]
     },
+    handleSearchFrom() {
+      let arr = []
+      this.searchList.forEach(item => {
+        const arr1 = this.$refs[`resiSearch${item.itemGroupId}`][0].handleSearch()
+        arr = arr.concat(arr1)
+        // console.log('search-----refs', this.$refs[`resiSearch${item.itemGroupId}`])
+      })
+      console.log('search-----refs', this.$refs)
+
+      console.log('search-----arr', arr)
+      this.currentPage = 1
+      this.conditions = arr
+      this.getTableData()
+    },
     handleSearch (val) {
       console.log('searchhh--', val)
       this.currentPage = 1
       this.conditions = val
       this.getTableData()
     },
+    resetSearchForm(formName) {
+      // for(const n in this.form) {
+      //   this.form[n] = ''
+      // }
+      // this.handleSearch()
+      this.searchList.forEach(item => {
+        this.$refs[`resiSearch${item.itemGroupId}`][0].resetForm()
+        // console.log('search-----refs', this.$refs[`resiSearch${item.itemGroupId}`])
+      })
+      this.currentPage = 1
+      this.conditions = []
+      this.getTableData()
+    },
     async handleExportModule () {
       let url = "/epmetuser/icresiuser/import/download-template"
 
@@ -1055,8 +1118,9 @@ export default {
       return options
     },
     async getSearchList () {
+      //  /oper/customize/icform/conditionlist
       await this.$http
-        .post('/oper/customize/icform/conditionlist', {
+        .post('/oper/customize/icform/conditionlist-bygroup', {
           formCode: 'resi_base_info',
           dynamic: true
         })
@@ -1065,15 +1129,29 @@ export default {
             return this.$message.error(res.msg)
           } else {
             console.log('获取查询详情成功--sss', res)
-            this.searchList = res.data
+            
             res.data.forEach((item) => {
-              if (item.optionSourceType === 'remote') {
+              item.queryItemList.forEach(n => {
-                this.getOptionsList(item.optionSourceValue).then((res) => {
+                if (n.optionSourceType === 'remote') {
-                  item.options = res
+                  this.getOptionsList(n.optionSourceValue).then((res) => {
-                })
+                    n.options = res
-                // console.log('')
+                  })
-              }
+                  // console.log('')
+                } else if (n.itemType == 'radio' && n.options.length == 0) {
+                  n.options = [
+                      {
+                          label: "是",
+                          value: "1"
+                      },
+                      {
+                          label: "否",
+                          value: "0"
+                      }
+                    ]
+                }
+              })
             })
+            this.searchList = res.data
           }
         })
         .catch(() => {
@@ -1197,6 +1275,10 @@ export default {
     background: linear-gradient(90deg, #1a5afd, #26c4ff);
   }
 }
+.resi-container .resi-card {
+  position: relative;
+  overflow: visible;
+}
 .resi-container .resi-card-table {
   ::v-deep .el-table th {
     color: #fff;
@@ -1216,6 +1298,31 @@ export default {
     color: rgba(0, 167, 169, 1);
   }
 }
+.resi-search {
+  // padding-right: 20px;
+  margin-top: 10px;
+  .el-col {
+    text-align: right;
+  }
+}
+.resi-down {
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 46px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-left: -23rpx;
+  cursor: pointer;
+  background: #ffffff;
+  border-radius: 0 0 10px 10px;
+  img {
+    display: block;
+  }
+}
 </style>
 
 <style lang="scss" scoped>