From 2003057c2f68b12a7c9455a32ad7e90cd2755115 Mon Sep 17 00:00:00 2001
From: zhangyuan <zhangyuan@sarnasea.com>
Date: Mon, 25 Apr 2022 13:26:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E9=80=A0=E5=8E=9F=E6=9C=AC=E7=9A=84?=
 =?UTF-8?q?=E4=BA=BA=E5=91=98=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/blackSearch.vue    | 649 ++++++++++++++++++++++++
 src/views/modules/plugins/rent/resi.vue |   2 +-
 2 files changed, 650 insertions(+), 1 deletion(-)
 create mode 100644 src/views/components/blackSearch.vue

diff --git a/src/views/components/blackSearch.vue b/src/views/components/blackSearch.vue
new file mode 100644
index 00000000..6cc4a41a
--- /dev/null
+++ b/src/views/components/blackSearch.vue
@@ -0,0 +1,649 @@
+<template>
+  <div class="resi-container">
+    <el-card class="resi-card">
+      <el-row class="resi-row-box" :class="openSearch && 'resi-row-more'">
+        <el-row class="resi-row">
+          <el-col :span="6">
+            <div class="resi-cell">
+              <div class="resi-cell-label">所属网格</div>
+              <div class="resi-cell-value">
+                <el-select
+                  v-model.trim="form.GRID_ID"
+                  placeholder="请选择"
+                  size="small"
+                  clearable
+                  class="resi-cell-select"
+                  @change="handleChangeGrid"
+                >
+                  <el-option
+                    v-for="item in optionsG"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="18">
+            <div class="resi-cell">
+              <div class="resi-cell-label">所属房屋</div>
+              <div class="resi-cell-value">
+                <el-select
+                  v-model.trim="form.VILLAGE_ID"
+                  placeholder="请选择小区"
+                  size="small"
+                  clearable
+                  class="resi-cell-select"
+                  @clear="handleClearVillage"
+                  @change="handleChangeV"
+                >
+                  <el-option
+                    v-for="item in optionsV"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-select
+                  v-model.trim="form.BUILD_ID"
+                  placeholder="楼号"
+                  size="small"
+                  clearable
+                  style="width: 120px;"
+                  class="resi-cell-select"
+                  :disabled="changeVDisabled"
+                  @clear="handleClearBuild"
+                  @change="handleChangeB"
+                >
+                  <el-option
+                    v-for="item in optionsB"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-select
+                  v-model.trim="form.UNIT_ID"
+                  :disabled="changeBDisabled"
+                  placeholder="单元"
+                  size="small"
+                  clearable
+                  style="width: 120px;"
+                  class="resi-cell-select"
+                  @click="handleClearDan"
+                  @change="handleChangeD"
+                >
+                  <el-option
+                    v-for="item in optionsD"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-select
+                  v-model.trim="form.HOME_ID"
+                  :disabled="changeDDisabled"
+                  placeholder="房号"
+                  size="small"
+                  clearable
+                  style="width: 120px;"
+                  class="resi-cell-select"
+                >
+                  <el-option
+                    v-for="item in optionsH"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row
+          v-for="(item, index) in sliceList(formList, 4)"
+          :key="index"
+          class="resi-row"
+        >
+          <el-col v-for="n in item" :key="n.id" :span="6">
+            <div class="resi-cell">
+              <div class="resi-cell-label">{{ n.label }}</div>
+              <div
+                class="resi-cell-value"
+                :class="n.itemType === 'radio' && 'resi-cell-value-radio'"
+              >
+                <el-input
+                  v-if="n.itemType === 'input' || n.itemType === 'textarea'"
+                  v-model.trim="form[n.columnName]"
+                  class="resi-cell-input"
+                  size="small"
+                  clearable
+                  placeholder="请输入内容"
+                >
+                </el-input>
+                <template v-else-if="n.itemType === 'datepicker'">
+                  <el-date-picker
+                    v-if="n.queryType === 'daterange'"
+                    v-model.trim="form[n.columnName]"
+                    type="daterange"
+                    align="right"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    class="resi-cell--daterange"
+                    size="small"
+                    format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd"
+                  >
+                  </el-date-picker>
+                  <el-date-picker
+                    v-else
+                    v-model.trim="form[n.columnName]"
+                    class="resi-cell-input"
+                    type="date"
+                    size="small"
+                    clearable
+                    format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd"
+                    placeholder="选择日期"
+                  >
+                  </el-date-picker>
+                </template>
+                <el-select
+                  v-else-if="n.itemType === 'select' || n.itemType === 'radio'"
+                  v-model.trim="form[n.columnName]"
+                  placeholder="请选择"
+                  size="small"
+                  clearable
+                  class="resi-cell-select"
+                >
+                  <el-option
+                    v-for="item in n.options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-cascader
+                  v-else-if="n.itemType === 'cascader'"
+                  v-model.trim="form[n.columnName]"
+                  :options="n.options"
+                  :props="{ checkStrictly: true }"
+                  clearable
+                  size="small"
+                  class="resi-cell-select"
+                >
+                </el-cascader>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-row>
+      <el-row 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="handleSearch">查询</el-button>
+          <el-button class="diy-button--reset" size="small" @click="resetForm">重置</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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ResiSearch',
+  props: {
+    formList: {
+      type: Array,
+      default: () => []
+    },
+    columnName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    let initForm = (arr, columnName) => {
+      let _form = {}
+      // console.log('formInfo', obj)
+      // if (Object.keys(obj).length > 0) {
+      //   _form = { ...obj }
+      //   return _form
+      // }
+      arr.forEach((item) => {
+        if (columnName && columnName === item.columnName) _form[item.columnName] = '1'
+        else _form[item.columnName] = ''
+      })
+      return _form
+    }
+    let form = initForm(this.formList, this.columnName)
+    let tempFormList = this.formList.map(item => {
+      
+      return {
+        ...item,
+        isChange: this.columnName && this.columnName === item.columnName ? true : false
+      }
+    })
+    let constForm = {
+      ...form,
+      GRID_ID: '',
+      VILLAGE_ID: '',
+      BUILD_ID: '',
+      UNIT_ID: '',
+      HOME_ID: ''
+    }
+    return {
+      pageLoading: false,
+      openSearch: false,
+      optionsV: [],
+      optionsB: [],
+      optionsH: [],
+      optionsD: [],
+      optionsG: [],
+      value: '',
+      fixedList: [],
+      fixedForm: {
+        GRID_ID: '',
+        VILLAGE_ID: '',
+        BUILD_ID: '',
+        UNIT_ID: '',
+        HOME_ID: ''
+      },
+      constForm,
+      form: {
+        ...form,
+        GRID_ID: '',
+        VILLAGE_ID: '',
+        BUILD_ID: '',
+        UNIT_ID: '',
+        HOME_ID: ''
+      },
+      tempFormList,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    sliceList() {
+      return function (data, count) {
+        if (data !== undefined) {
+          let index = 0
+          let arrTemp = []
+          for (let i = 0; i < data.length; i++) {
+            index = parseInt(i / count)
+            if (arrTemp.length <= index) {
+              arrTemp.push([])
+            }
+            arrTemp[index].push(data[i])
+          }
+          return arrTemp
+        }
+      }
+    },
+    changeVDisabled() {
+      return !this.form.VILLAGE_ID
+    },
+    changeBDisabled() {
+      return !this.form.BUILD_ID
+    },
+    changeDDisabled() {
+      return !this.form.UNIT_ID
+    }
+  },
+  watch: {
+    form: {
+      handler(val, val2) {
+        // console.log('valpppp----', val, val2)
+        for (let n in val) {
+          if (this.constForm[n] !== val[n]) {
+            this.handleChangeForm(n)
+            console.log('nnnnnn', n)
+          }
+        }
+        this.constForm = { ...val }
+      },
+      deep: true
+    }
+  },
+  created() {
+    // this.initForm()
+    // console.log('formcccc---', this.form)
+    this.getGridList()
+    this.getValiheList()
+    if (this.columnName) this.handleChangeForm(this.columnName)
+  },
+  methods: {
+    initForm() {
+      this.formList.forEach((item) => {
+        this.$set(this.form, item.columnName, '')
+      })
+      console.log('formcccc---', this.form)
+    },
+    handleClearVillage() {
+      this.form.BUILD_ID = ''
+      this.form.HOME_ID = ''
+    },
+    handleClearBuild() {
+      this.form.BUILD_ID = ''
+      this.form.UNIT_ID = ''
+      this.form.HOME_ID = ''
+    },
+    handleClearDan() {
+      this.form.UNIT_ID = ''
+      this.form.HOME_ID = ''
+    },
+    resetForm(formName) {
+      for(const n in this.form) {
+        this.form[n] = ''
+      }
+      this.handleSearch()
+    },
+    handleSearch() {
+      // console.log('formmmmm---', this.form)
+      const itemTypes = ['daterange', 'timerange']
+      let arr = this.tempFormList
+        .filter((n) => n.isChange)
+        .map((item) => {
+          return {
+            queryType: item.queryType,
+            tableName: item.tableName,
+            columnName: item.columnName,
+            // columnValue: []
+            columnValue:
+              itemTypes.includes(item.queryType) ||
+              itemTypes.includes(item.itemType)
+                ? this.form[item.columnName]
+                : [this.form[item.columnName].toString()]
+          }
+        })
+      let arr1 = this.fixedList
+        .filter((n) => n.columnValue.length > 0)
+        .map((item) => {
+          return {
+            ...item
+          }
+        })
+      let arr3 = [...arr1, ...arr]
+      this.$emit('search', arr3)
+    },
+    handleOpenSearch() {
+      this.openSearch = !this.openSearch
+    },
+    handleChangeGrid(val) {
+      console.log('val', val)
+      this.form.VILLAGE_ID = ''
+      this.form.BUILD_ID = ''
+      this.form.UNIT_ID = ''
+      this.form.HOME_ID = ''
+      this.getValiheList()
+    },
+    handleChangeV(val) {
+      console.log('val', val)
+      this.form.BUILD_ID = ''
+      this.form.UNIT_ID = ''
+      this.form.HOME_ID = ''
+      this.getBuildList()
+    },
+    handleChangeB(val) {
+      console.log('val', val)
+      this.form.UNIT_ID = ''
+      this.form.HOME_ID = ''
+      this.getUniList()
+    },
+    handleChangeD(val) {
+      console.log('val', val)
+      this.form.HOME_ID = ''
+      this.getHouseList()
+    },
+    // 监听基础form
+    handleChangeForm(val) {
+      for (let n in this.fixedForm) {
+        if (n === val) {
+          if (this.fixedList.length > 0) {
+            let _item = {}
+            let hasVal = false
+            this.fixedList.forEach((item, index) => {
+              if (item.columnName == val) {
+                hasVal = true
+                item.columnValue[0] = this.form[val]
+                if (!this.form[val]) this.fixedList.splice(index, 1)
+                console.log('fixedList----val', this.fixedList)
+              } else {
+                _item = {
+                  queryType: 'equal',
+                  tableName: 'ic_resi_user',
+                  columnName: val,
+                  columnValue: [this.form[val]]
+                }
+                console.log('fixedList----else', _item)
+                // this.$set(this.fixedList, index, _item)
+              }
+            })
+            if (Object.keys(_item).length > 0 && !hasVal) this.fixedList.push(_item)
+          } else {
+            this.$set(this.fixedList, 0, {
+              queryType: 'equal',
+              tableName: 'ic_resi_user',
+              columnName: val,
+              columnValue: [this.form[val]]
+            })
+          }
+        }
+      }
+      console.log('fixedList----999', this.fixedList)
+      this.tempFormList.forEach((item) => {
+        if (item.columnName === val) item.isChange = true
+      })
+    },
+    getGridList() {
+      const { user } = this.$store.state
+      this.$http
+        .post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'query' })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取查询详情成功', res.data)
+            this.optionsG = res.data
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+    getValiheList() {
+      const { user } = this.$store.state
+      this.$http
+        .post('/gov/org/icneighborhood/neighborhoodoption', {
+          gridId: this.form.GRID_ID,
+          agencyId: ''
+          // agencyId: user.agencyId
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取查询详情成功', res.data)
+            this.optionsV = res.data
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+    getBuildList() {
+      this.$http
+        .post('/gov/org/icbuilding/buildingoption', {
+          neighborHoodId: this.form.VILLAGE_ID
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取查询详情成功', res.data)
+            this.optionsB = res.data
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+    getUniList() {
+      this.$http
+        .post('/gov/org/icbuildingunit/unitoption', {
+          buildingId: this.form.BUILD_ID
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取查询详情成功', res.data)
+            this.optionsD = res.data
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+    getHouseList() {
+      this.$http
+        .post('/gov/org/ichouse/houseoption', { unitId: this.form.UNIT_ID })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取查询详情成功', res.data)
+            this.optionsH = res.data
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.resi-container .resi-card {
+  position: relative;
+  overflow: visible;
+}
+.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;
+  }
+}
+.resi-row-box {
+  height: 104px;
+  overflow: hidden;
+  transition: height 0.5s;
+}
+.resi-row-more {
+  height: max-content;
+  transition: height 0.5s;
+}
+.resi-row {
+  margin-bottom: 20px;
+}
+.resi-search {
+  // padding-right: 20px;
+  .el-col {
+    text-align: right;
+  }
+}
+.resi-container .resi-cell {
+  display: flex;
+  align-items: center;
+  .resi-cell-label {
+    flex-shrink: 0;
+    width: 70px;
+    box-sizing: border-box;
+    margin-right: 15px;
+    text-align: right;
+    // line-height: 32;
+  }
+  .resi-cell-value-radio {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+  }
+  .resi-cell-input {
+    width: 200px;
+  }
+  .resi-cell--daterange {
+    width: 200px;
+  }
+  .resi-cell-select {
+    width: 200px;
+    box-sizing: border-box;
+    margin-right: 10px;
+    &-middle {
+      width: 130px;
+    }
+    &-small {
+      width: 88px;
+    }
+  }
+  .resi-cell-select:last-child {
+    margin-right: 0;
+  }
+}
+</style>
diff --git a/src/views/modules/plugins/rent/resi.vue b/src/views/modules/plugins/rent/resi.vue
index 2ddbf7a4..7e70c161 100644
--- a/src/views/modules/plugins/rent/resi.vue
+++ b/src/views/modules/plugins/rent/resi.vue
@@ -269,7 +269,7 @@
 
 <script>
 import nextTick from 'dai-js/tools/nextTick'
-import resiSearch from '../../../components/resiSearch.vue'
+import resiSearch from '../../../components/blackSearch.vue'
 import resiForm from '../../../components/resiForm.vue'
 import editResi from '../../../components/editResi.vue'
 import axios from 'axios'