列表搜索项支持级联

石广澎

2023-11-21 99e37eb1e5ba8636b6a5994861dec31278d312c2

列表搜索项支持级联

 admin-web/README-×¢ÒâÊÂÏî.md

@@ -79,4 +79,36 @@
              return { value: DateFormatter.LongToDateTime(row.create_time) }
            }
```
7. è¡¨å•æœç´¢é¡¹çº§è”
```
 {
    type: 'select',
    dataIndex: 'orgId',
    label: '主办单位',
    placeholder: '请选择',
    defaultValue: '',
    options: [],
    cascader: [{key:'orgDeptId',queryKey: 'parentId'}],
    optionsConfig: {
      label: 'label',
      value: 'id',
      url: SettingIplatform.apiBaseURL + '/base/dept/select/treeDept'
    }
  },
  {
    type: 'select',
    dataIndex: 'orgDeptId',
    label: '主办部门',
    placeholder: '请选择',
    defaultValue: '',
    // é€‰æ‹©åŽä¼šè§¦å‘哪些项的加载，支持多个； parentId
    // ä¼šè‡ªåŠ¨åœ¨æŒ‡å®šé¡¹åŠ ä¸Š{[dataIndex]: value}的筛选条件
    options: [],
    optionsConfig: {
      label: 'deptName',
      value: 'id',
      url: SettingIplatform.apiBaseURL + '/base/dept/selectDeptByParentId'
    }
  },
```


 admin-web/src/components/mySearch/SearchItem.vue

@@ -132,54 +132,7 @@
    item: Object,
  },
  created() {
    if (this.item.type === 'select' && this.item.optionsConfig) {
      if (this.$axios === undefined) {
        console.error('请先配置this.$axios');
        return;
      }
      request({
        url: this.item.optionsConfig.url,
        method: 'get',
      }).then((res) => {
        const data = res || [];
        this.item.options = [];
        data.forEach((v) => {
          this.item.options.push({
            label: v[this.item.optionsConfig.label || 'label'],
            value: v[this.item.optionsConfig.value || 'value'],
          });
        });
      });
    }
    if (this.item.type === 'cascader' && this.item.optionsConfig) {
      if (this.$axios === undefined) {
        console.error('请先配置this.$axios');
        return;
      }
      request({
        url: this.item.optionsConfig.url,
        method: 'get',
      }).then((res) => {
        const data = res || [];
        this.item.options = [];
        this.item.options = data;
      });
    }
    if (this.item.type === 'tree-select' && this.item.optionsConfig) {
      if (this.$axios === undefined) {
        console.error('请先配置this.$axios');
        return;
      }
      if (this.item.asyncLoad) {
        this.asyncLoad({value: 0}).then((res) => {
          this.treeData = res;
        });
      } else {
        this.asyncLoad({}).then((res) => {
          this.treeData = res;
        });
      }
    }
    this.initData({})
  },
  watch: {
    value(v) {
@@ -230,6 +183,64 @@
    };
  },
  methods: {
    clearData() {
      this.item.options = []
      this.treeData = []
    },
    initData(params) {
      this.val = this.item.defaultValue
      if (this.item.type === 'select' && this.item.optionsConfig) {
        if (this.$axios === undefined) {
          console.error('请先配置this.$axios');
          return;
        }
        request({
          url: this.item.optionsConfig.url,
          method: 'get',
          params
        }).then((res) => {
          const data = res || [];
          this.item.options = [];
          data.forEach((v) => {
            this.item.options.push({
              label: v[this.item.optionsConfig.label || 'label'],
              value: v[this.item.optionsConfig.value || 'value'],
            });
          });
        });
      }
      if (this.item.type === 'cascader' && this.item.optionsConfig) {
        if (this.$axios === undefined) {
          console.error('请先配置this.$axios');
          return;
        }
        request({
          url: this.item.optionsConfig.url,
          method: 'get',
          params
        }).then((res) => {
          const data = res || [];
          this.item.options = [];
          this.item.options = data;
        });
      }
      if (this.item.type === 'tree-select' && this.item.optionsConfig) {
        if (this.$axios === undefined) {
          console.error('请先配置this.$axios');
          return;
        }
        if (this.item.asyncLoad) {
          params.value = 0
          this.asyncLoad(params).then((res) => {
            this.treeData = res;
          });
        } else {
          this.asyncLoad(params).then((res) => {
            this.treeData = res;
          });
        }
      }
    },
    panelChange(v, type) {
      var info = null
      if (v && this.item.type !== 'date-time-picker') {

 admin-web/src/components/mySearch/mySearch.vue

@@ -2,7 +2,7 @@
  <div class="table-page-search-wrapper" style="padding: 0 10px 10px 10px">
    <el-form :model="form" inline ref="formData" size="small">
      <el-form-item :label="item.label" :prop="item.dataIndex" v-for="(item, i) in myItems1" :key="i">
        <search-item :item="item" @change="formChange($event, i)" :value="item.value" />
        <search-item :ref="item.dataIndex" :item="item" @change="formChange($event, i)" :value="item.value" />
      </el-form-item>
      <el-form-item>
        <div class="table-page-search-submitButtons">
@@ -82,6 +82,27 @@
      });
    },
    formChange(e, i) {
      const item = this.items[i]
      if(item.cascader&&item.cascader.length>0){
        item.cascader.map(obj=>{
          const st = this.$refs[obj.key]
          if(st&&st[0]){

            if(!e){
              st[0].clearData()
              let cur = this.items.find(t=>t.dataIndex==obj.key)
              cur.value = ''
              this.form[cur.dataIndex] = '';
              // this.$set
            }else{
              st[0].initData({
                [obj.queryKey]: e
              })
            }

          }
        })
      }
      this.form[this.items[i].dataIndex] = e;
      this.items[i].value = e;
      this.$forceUpdate();