{"remainingRequest":"D:\\jenkins\\workspace\\ljzc-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\ljzc-fvue\\src\\components\\SuperSearch\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\ljzc-fvue\\src\\components\\SuperSearch\\index.vue","mtime":1701739792361},{"path":"D:\\jenkins\\workspace\\ljzc-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\ljzc-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\ljzc-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport lodash from 'lodash'\r\n\r\nexport default {\r\n  name: 'SuperSearch',\r\n  props: {\r\n    // 搜索表单\r\n    searchForm: {\r\n      default() {\r\n        return {\r\n          type: ['1'],\r\n          department: ['2'],\r\n          department1: ['33'],\r\n          name: '张三',\r\n          quality: [],\r\n          page: 1,\r\n          size: 10\r\n        }\r\n      },\r\n      type: Object\r\n    },\r\n    // 搜索配置项\r\n    basisOption: {\r\n      default() {\r\n        return [\r\n          {\r\n            itemLabel: '分类',\r\n            itemProp: 'type',\r\n            itemType: 'radio',\r\n            searchType: 'basic',\r\n            labelWidth: '70px',\r\n            option: [\r\n              {name: '分类1', value: '0'},\r\n              {name: '分类2', value: '1'},\r\n              {name: '分类3', value: '2'},\r\n              {name: '分类4', value: '3'}\r\n            ]\r\n          },\r\n          {\r\n            itemLabel: '部门',\r\n            itemProp: 'department',\r\n            itemType: 'radio',\r\n            searchType: 'basic',\r\n            labelWidth: '70px',\r\n            option: [\r\n              {name: '部门1', value: '0'},\r\n              {name: '部门2', value: '1'},\r\n              {name: '部门3', value: '2'},\r\n              {name: '部门4', value: '3'}\r\n            ]\r\n          },\r\n          {\r\n            itemLabel: '品质',\r\n            itemProp: 'quality1',\r\n            itemType: 'checkbox',\r\n            searchType: 'basic',\r\n            labelWidth: '70px',\r\n            option: [\r\n              {name: '品质1', value: '0'},\r\n              {name: '品质2', value: '1'},\r\n              {name: '品质3', value: '2'},\r\n              {name: '品质4', value: '3'}\r\n            ]\r\n          },\r\n          {\r\n            itemLabel: '性格',\r\n            itemProp: 'quality',\r\n            itemType: 'checkbox',\r\n            searchType: 'basic',\r\n            labelWidth: '70px',\r\n            option: [\r\n              {name: '性格1', value: '0'},\r\n              {name: '性格2', value: '1'},\r\n              {name: '性格3', value: '2'},\r\n              {name: '性格4', value: '3'},\r\n              {name: '性格5', value: '4'}\r\n            ]\r\n          },\r\n          {\r\n            itemLabel: '部门部门部门',\r\n            itemProp: 'department1',\r\n            itemType: 'radio',\r\n            searchType: 'basic',\r\n            labelWidth: '160px',\r\n            option: [\r\n              {name: '部门1', value: '0'},\r\n              {name: '部门2', value: '1'},\r\n              {name: '部门3', value: '2'},\r\n              {name: '部门4', value: '3'}\r\n            ]\r\n          },\r\n          {\r\n            itemLabel: '姓名',\r\n            itemProp: 'name',\r\n            itemType: 'input',\r\n            labelWidth: '90px',\r\n            searchType: 'advance'\r\n          },\r\n          {\r\n            itemLabel: '年龄',\r\n            itemProp: 'age',\r\n            itemType: 'input',\r\n            labelWidth: '90px',\r\n            searchType: 'advance'\r\n          },\r\n          {\r\n            itemLabel: '性别',\r\n            itemProp: 'gender',\r\n            itemType: 'input',\r\n            labelWidth: '90px',\r\n            searchType: 'advance'\r\n          },\r\n          {\r\n            itemLabel: '模糊匹配',\r\n            itemProp: 'matching',\r\n            itemType: 'input',\r\n            labelWidth: '90px',\r\n            searchType: 'advance'\r\n          }\r\n          // {\r\n          //   itemLabel: '性别',\r\n          //   itemProp: 'gender',\r\n          //   itemType: 'input',\r\n          //   labelWidth: '90px',\r\n          //   searchType: 'advance'\r\n          // },\r\n          // {\r\n          //   itemLabel: '模糊匹配',\r\n          //   itemProp: 'matching',\r\n          //   itemType: 'input',\r\n          //   labelWidth: '90px',\r\n          //   searchType: 'advance'\r\n          // }\r\n        ]\r\n      },\r\n      type: Array\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      search: {\r\n        basicSearchArr: [], // 基础搜索\r\n        advanceSearchArr: [] // 高级搜索\r\n      },\r\n      isShow: false,\r\n      height: '0px',\r\n      maxHeight: '0px',\r\n      cloneForm: {}\r\n    }\r\n  },\r\n  watch: {\r\n    search: {\r\n      handler(searchArr) {\r\n        Object.keys(searchArr).forEach(key => {\r\n          searchArr[key].forEach(i => this.$set(this.searchForm, i.itemProp, i.itemValue))\r\n        })\r\n      },\r\n      deep: true,\r\n    }\r\n  },\r\n  created() {\r\n    // 克隆原表单\r\n    this.cloneForm = lodash.cloneDeep(this.searchForm)\r\n    this.dataInitialization(this.cloneForm)\r\n  },\r\n  mounted() {\r\n    this.getAllHeight()\r\n    this.$root.$on('resize', _ => this.getAllHeight(200))\r\n  },\r\n  methods: {\r\n    // 计算元素高度函数\r\n    getHeightUnfold(dom) {\r\n      let fakeNode = dom.cloneNode(true)\r\n      fakeNode.style.maxHeight = '1000px'\r\n      dom.parentNode.insertBefore(fakeNode, dom)\r\n      fakeNode.style.height = 'auto'\r\n      fakeNode.style.visibility = 'hidden'\r\n      let height = fakeNode.getBoundingClientRect().height\r\n      dom.parentNode.removeChild(fakeNode)\r\n      return height\r\n    },\r\n\r\n    // 动态计算收起，展开高度\r\n    getAllHeight(delay = 0, callback) {\r\n      if (!(this.$refs.superSearch && this.$refs.basic)) return\r\n      this.$refs.superSearch.style.transition = 'height 0s'\r\n      this.$nextTick(_ => {\r\n        this.height = this.getHeightUnfold(this.$refs.basic) + 'px'\r\n        this.maxHeight = this.getHeightUnfold(this.$refs.superSearch) + 'px'\r\n        setTimeout(_ => {\r\n          this.$refs.superSearch.style.transition = 'height 0.3s'\r\n          callback && callback(this.height, this.maxHeight)\r\n        }, delay)\r\n      })\r\n    },\r\n\r\n    // 初始化数据结构\r\n    dataInitialization(form = {}) {\r\n      const [basicSearchArr, advanceSearchArr] = ['basic', 'advance'].map(searchType => {\r\n        return this.basisOption.flatMap(i => {\r\n          console.log(i.searchType !== searchType);\r\n          if (i.searchType !== searchType) return []\r\n          let itemValue, labelWidth, isIndeterminate = false, checkAll = false,timeType,valueFormat\r\n          if (i.itemType === 'checkbox' || i.itemType === 'radio') {\r\n            itemValue = typeof form[i.itemProp] === 'undefined' ? [] : form[i.itemProp]\r\n            checkAll = i.option.length === itemValue.length\r\n            isIndeterminate = itemValue.length > 0 && itemValue.length < i.option.length\r\n          } else {\r\n            itemValue = typeof form[i.itemProp] === 'undefined' ? '' : form[i.itemProp]\r\n          }\r\n          labelWidth = i.labelWidth || 'auto'\r\n          timeType = i.timeType || ''\r\n          valueFormat = i.valueFormat || ''\r\n          \r\n          return {\r\n            ...i,\r\n            isIndeterminate,\r\n            checkAll,\r\n            itemValue,\r\n            labelWidth,\r\n            timeType,\r\n            valueFormat\r\n          }\r\n        })\r\n      })\r\n      this.search.basicSearchArr = basicSearchArr\r\n      this.search.advanceSearchArr = advanceSearchArr\r\n      console.warn(this.search )\r\n\r\n    },\r\n\r\n    // 全选改变\r\n    handleCheckAllChange(val, item) {\r\n      item.itemValue = val ? item.option.map(i => i.value) : []\r\n      item.isIndeterminate = false\r\n    },\r\n\r\n    //   多选勾选改变\r\n    handleCheckedCitiesChange(val, item) {\r\n      console.log(item);\r\n      item.checkAll = item.option.length === item.itemValue.length\r\n      item.isIndeterminate = item.itemValue.length > 0 && item.itemValue.length < item.option.length\r\n    },\r\n\r\n    // 单选框改变\r\n    radioChange(val, item) {\r\n      // 保证只能选中一个\r\n      if (val.length <= 1) return\r\n      item.itemValue = [val[val.length - 1]]\r\n    },\r\n    // 重置\r\n    resetClick() {\r\n      Object.keys(this.searchForm).forEach(key => {\r\n        Object.keys(this.cloneForm).forEach(_key => {\r\n          if (key === _key) this.searchForm[key] = this.cloneForm[key]\r\n        })\r\n      })\r\n      this.$emit('reset', this.searchForm)\r\n      this.dataInitialization(this.cloneForm)\r\n    },\r\n    // 搜索\r\n    searchClick() {\r\n      // this.isShow = false\r\n      this.$emit('search', this.searchForm)\r\n    },\r\n\r\n    // 展开高级搜索\r\n    isShowAdvance() {\r\n      this.isShow = !this.isShow\r\n      this.$emit('is-show-advance')\r\n    }\r\n\r\n  },\r\n  beforeDestroy() {\r\n    this.$root.$off('resize', _ => this.getAllHeight(200))\r\n  }\r\n}\r\n",null]}