JVXETable提供三级联动简单方案,解决联动展示与选择BUG #2867

zhangdaiscott
1 parent 07812d51
Showing 4 changed files with 408 additions and 120 deletions
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/JVxeTable.js
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/cells/JVxeSelectCell.vue
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/mixins/JVxeCellMixins.js
ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/JVxeDemo3.vue
@@ -98,6 +98,8 @@ export default {
     // 是否一直显示组件，如果为false则只有点击的时候才出现组件
     // 注：该参数不能动态修改；如果行、列字段多的情况下，会根据机器性能造成不同程度的卡顿。
     alwaysEdit: PropTypes.bool.def(false),
+    // 联动配置，数组，详情配置见文档
+    linkageConfig: PropTypes.array.def(() => []),
   },
   data() {
     return {
@@ -151,7 +153,10 @@ export default {
       // 允许执行刷新特效的行ID
       reloadEffectRowKeysMap: {},
       //配置了但是没有授权的按钮和列 集合
-      excludeCode:[]
+      excludeCode:[],
+      // 联动下拉选项（用于隔离不同的下拉选项）
+      // 内部联动配置，map
+      _innerLinkageConfig: null,
     }
   },
   computed: {
@@ -178,6 +183,18 @@ export default {
             renderOptions.target = this
           }
         }
+        // 处理联动列，联动列只能作用于 select 组件
+        if (column.$type === JVXETypes.select && this._innerLinkageConfig != null) {
+          // 判断当前列是否是联动列
+          if (this._innerLinkageConfig.has(column.key)) {
+            renderOptions.linkage = {
+              config: this._innerLinkageConfig.get(column.key),
+              getLinkageOptionsSibling: this.getLinkageOptionsSibling,
+              getLinkageOptionsAsync: this.getLinkageOptionsAsync,
+              linkageSelectChange: this.linkageSelectChange,
+            }
+          }
+        }
         if (column.editRender) {
           Object.assign(column.editRender, renderOptions)
         }
@@ -278,15 +295,21 @@ export default {
       immediate: true,
       async handler() {
         let vxe = await getRefPromise(this, 'vxe')
-        // 阻断vue监听大数据，提高性能
  
-        // 开启了排序就自动计算排序值
-        if (this.dragSort) {
-          this.dataSource.forEach((data, idx) => {
+        this.dataSource.forEach((data, idx) => {
+          // 开启了排序就自动计算排序值
+          if (this.dragSort) {
             this.$set(data, this.dragSortKey, idx + 1)
-          })
-        }
+          }
+          // 处理联动回显数据
+          if (this._innerLinkageConfig != null) {
+            for (let configItem of this._innerLinkageConfig.values()) {
+              this.autoSetLinkageOptionsByData(data, '', configItem, 0)
+            }
+          }
+        })
  
+        // 阻断vue监听大数据，提高性能
         vxe.loadData(this.dataSource)
  
         // TODO 解析disabledRows
@@ -469,7 +492,40 @@ export default {
         this._innerColumns = _innerColumns
         this._innerEditRules = _innerEditRules
       }
-    }
+    },
+    // watch linkageConfig
+    // 整理多级联动配置
+    linkageConfig: {
+      immediate: true,
+      handler() {
+        if (Array.isArray(this.linkageConfig) && this.linkageConfig.length > 0) {
+          // 获取联动的key顺序
+          let getLcKeys = (key, arr) => {
+            let col = this._innerColumns.find(col => col.key === key)
+            if (col) {
+              arr.push(col.key)
+              if (col.linkageKey) {
+                return getLcKeys(col.linkageKey, arr)
+              }
+            }
+            return arr
+          }
+          let configMap = new Map()
+          this.linkageConfig.forEach(lc => {
+            let keys = getLcKeys(lc.key, [])
+            // 多个key共享一个，引用地址
+            let configItem = {
+              ...lc, keys,
+              optionsMap: new Map()
+            }
+            keys.forEach(k => configMap.set(k, configItem))
+          })
+          this._innerLinkageConfig = configMap
+        } else {
+          this._innerLinkageConfig = null
+        }
+      }
+    },
   },
   created() {
   },
@@ -671,6 +727,19 @@ export default {
         // issues/2784
         // 先清空所有数据
         xTable.loadData([])
+
+        dataSource.forEach((data, idx) => {
+          // 开启了排序就自动计算排序值
+          if (this.dragSort) {
+            this.$set(data, this.dragSortKey, idx + 1)
+          }
+          // 处理联动回显数据
+          if (this._innerLinkageConfig != null) {
+            for (let configItem of this._innerLinkageConfig.values()) {
+              this.autoSetLinkageOptionsByData(data, '', configItem, 0)
+            }
+          }
+        })
         // 再新增
         return xTable.insertAt(dataSource)
       }
@@ -797,6 +866,7 @@ export default {
      * 添加一行或多行
      *
      * @param rows
+     * @param isOnlJs 是否是onlineJS增强触发的
      * @return
      */
     async addRows(rows = {}, isOnlJs) {
@@ -896,6 +966,89 @@ export default {
       this.$emit(name, event)
     },
  
+    /** 【多级联动】获取同级联动下拉选项 */
+    getLinkageOptionsSibling(row, col, config, request) {
+      // 如果当前列不是顶级列
+      let key = ''
+      if (col.key !== config.key) {
+        // 就找出联动上级列
+        let idx = config.keys.findIndex(k => col.key === k)
+        let parentKey = config.keys[idx - 1]
+        key = row[parentKey]
+        // 如果联动上级列没有选择数据，就直接返回空数组
+        if (key === '' || key == null) {
+          return []
+        }
+      } else {
+        key = 'root'
+      }
+      let options = config.optionsMap.get(key)
+      if (!Array.isArray(options)) {
+        if (request) {
+          let parent = key === 'root' ? '' : key
+          return this.getLinkageOptionsAsync(config, parent)
+        } else {
+          options = []
+        }
+      }
+      return options
+    },
+    /** 【多级联动】获取联动下拉选项（异步） */
+    getLinkageOptionsAsync(config, parent) {
+      return new Promise(resolve => {
+        let key = parent ? parent : 'root'
+        let options
+        if (config.optionsMap.has(key)) {
+          options = config.optionsMap.get(key)
+          if (options instanceof Promise) {
+            options.then(opt => {
+              config.optionsMap.set(key, opt)
+              resolve(opt)
+            })
+          } else {
+            resolve(options)
+          }
+        } else if (typeof config.requestData === 'function') {
+          // 调用requestData方法，通过传入parent来获取子级
+          let promise = config.requestData(parent)
+          config.optionsMap.set(key, promise)
+          promise.then(opt => {
+            config.optionsMap.set(key, opt)
+            resolve(opt)
+          })
+        } else {
+          resolve([])
+        }
+      })
+    },
+    // 【多级联动】 用于回显数据，自动填充 optionsMap
+    autoSetLinkageOptionsByData(data, parent, config, level) {
+      if (level === 0) {
+        this.getLinkageOptionsAsync(config, '')
+      } else {
+        this.getLinkageOptionsAsync(config, parent)
+      }
+      if (config.keys.length - 1 > level) {
+        let value = data[config.keys[level]]
+        if (value) {
+          this.autoSetLinkageOptionsByData(data, value, config, level + 1)
+        }
+      }
+    },
+    // 【多级联动】联动组件change时，清空下级组件
+    linkageSelectChange(row, col, config, value) {
+      if (col.linkageKey) {
+        this.getLinkageOptionsAsync(config, value)
+        let idx = config.keys.findIndex(k => k === col.key)
+        let values = {}
+        for (let i = idx; i < config.keys.length; i++) {
+          values[config.keys[i]] = ''
+        }
+        // 清空后几列的数据
+        this.setValues([{rowKey: row.id, values}])
+      }
+    },
+
     /** 加载数据字典并合并到 options */
     _loadDictConcatToOptions(column) {
       initDictOptions(column.dictCode).then((res) => {
@@ -1088,6 +1241,15 @@ export default {
           let createValue = getEnhancedMixins(col.$type || col.type, 'createValue')
           record[col.key] = createValue({row: record, column, $table: xTable})
         }
+        // update-begin--author:sunjianlei---date:20210819------for: 处理联动列，联动列只能作用于 select 组件
+        if (col.$type === JVXETypes.select && this._innerLinkageConfig != null) {
+          // 判断当前列是否是联动列
+          if (this._innerLinkageConfig.has(col.key)) {
+            let configItem = this._innerLinkageConfig.get(col.key)
+            this.getLinkageOptionsAsync(configItem, '')
+          }
+        }
+        // update-end--author:sunjianlei---date:20210819------for: 处理联动列，联动列只能作用于 select 组件
       })
       return record
     },
@@ -7,11 +7,16 @@
     v-bind="selectProps"
     style="width: 100%;"
     @blur="handleBlur"
-    @change="handleChangeCommon"
+    @change="handleChange"
     @search="handleSearchSelect"
   >
  
-    <template v-for="option of originColumn.options">
+    <div v-if="loading" slot="notFoundContent">
+      <a-icon type="loading"  />
+      <span>&nbsp;加载中…</span>
+    </div>
+
+    <template v-for="option of selectOptions">
       <a-select-option :key="option.value" :value="option.value" :disabled="option.disabled">
         <span>{{option.text || option.label || option.title|| option.value}}</span>
       </a-select-option>
@@ -23,10 +28,18 @@
 <script>
   import JVxeCellMixins, { dispatchEvent } from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'
   import { JVXETypes } from '@comp/jeecg/JVxeTable/index'
+  import { filterDictText } from '@comp/dict/JDictSelectUtil'
  
   export default {
     name: 'JVxeSelectCell',
     mixins: [JVxeCellMixins],
+    data(){
+      return {
+        loading: false,
+        // 异步加载的options（用于多级联动）
+        asyncOptions: null,
+      }
+    },
     computed: {
       selectProps() {
         let props = {...this.cellProps}
@@ -37,6 +50,32 @@
         }
         return props
       },
+      // 下拉选项
+      selectOptions() {
+        if (this.asyncOptions) {
+          return this.asyncOptions
+        }
+        let {linkage} = this.renderOptions
+        if (linkage) {
+          let {getLinkageOptionsSibling, config} = linkage
+          let res = getLinkageOptionsSibling(this.row, this.originColumn, config, true)
+          // 当返回Promise时，说明是多级联动
+          if (res instanceof Promise) {
+            this.loading = true
+            res.then(opt => {
+              this.asyncOptions = opt
+              this.loading = false
+            }).catch(e => {
+              console.error(e)
+              this.loading = false
+            })
+          } else {
+            this.asyncOptions = null
+            return res
+          }
+        }
+        return this.originColumn.options
+      },
     },
     created() {
       let multiple = [JVXETypes.selectMultiple, JVXETypes.list_multi]
@@ -54,6 +93,16 @@
     },
     methods: {
  
+      handleChange(value) {
+        debugger
+        // 处理下级联动
+        let linkage = this.renderOptions.linkage
+        if (linkage) {
+          linkage.linkageSelectChange(this.row, this.originColumn, linkage.config, value)
+        }
+        this.handleChangeCommon(value)
+      },
+
       /** 处理blur失去焦点事件 */
       handleBlur(value) {
         let {allowInput, options} = this.originColumn
@@ -120,7 +169,28 @@
           dispatchEvent.call(this, event, 'ant-select')
         },
       },
-      translate: {enabled: true},
+      translate: {
+        enabled: true,
+        async handler(value,) {
+          let options
+          let {linkage} = this.renderOptions
+          // 判断是否是多级联动，如果是就通过接口异步翻译
+          if (linkage) {
+            let {getLinkageOptionsSibling, config} = linkage
+            options = getLinkageOptionsSibling(this.row, this.originColumn, config, true)
+            if (options instanceof Promise) {
+              return new Promise(resolve => {
+                options.then(opt => {
+                  resolve(filterDictText(opt, value))
+                })
+              })
+            }
+          } else {
+            options = this.column.own.options
+          }
+          return filterDictText(options, value)
+        },
+      },
       getValue(value) {
         if (Array.isArray(value)) {
           return value.join(',')
@@ -102,7 +102,13 @@ export default {
  
         // 判断是否启用翻译
         if (this.renderType === JVXERenderType.spaner && this.enhanced.translate.enabled) {
-          this.innerValue = this.enhanced.translate.handler.call(this, value)
+          let res = this.enhanced.translate.handler.call(this, value)
+          // 异步翻译，目前仅【多级联动】使用
+          if (res instanceof Promise) {
+            res.then(value => this.innerValue = value)
+          } else {
+            this.innerValue = res
+          }
         }
       },
     },
@@ -8,123 +8,173 @@
     :height="484"
     :dataSource="dataSource"
     :columns="columns"
-    @valueChange="handleValueChange"
+    :linkage-config="linkageConfig"
   />
 </template>
  
 <script>
-  import moment from 'moment'
-  import { randomNumber, randomUUID } from '@/utils/util'
-  import { JVXETypes } from '@/components/jeecg/JVxeTable'
+import { JVXETypes } from '@/components/jeecg/JVxeTable'
  
-  export default {
-    name: 'JVxeDemo2',
-    data() {
-      return {
-        columns: [
-          {
-            title: '省/直辖市/自治区',
-            key: 's1',
-            type: JVXETypes.select,
-            width: '240px',
-            options: [],
-            placeholder: '请选择${title}'
-          },
-          {
-            title: '市',
-            key: 's2',
-            type: JVXETypes.select,
-            width: '240px',
-            options: [],
-            placeholder: '请选择${title}'
-          },
-          {
-            title: '县/区',
-            key: 's3',
-            type: JVXETypes.select,
-            width: '240px',
-            options: [],
-            placeholder: '请选择${title}'
-          }
-        ],
-        dataSource: [],
-    
-        mockData: [
-          { text: '北京市', value: '110000', parent: null },
-          { text: '天津市', value: '120000', parent: null },
-          { text: '河北省', value: '130000', parent: null },
-          { text: '上海市', value: '310000', parent: null },
-      
-          { text: '北京市', value: '110100', parent: '110000' },
-          { text: '天津市市', value: '120100', parent: '120000' },
-          { text: '石家庄市', value: '130100', parent: '130000' },
-          { text: '唐山市', value: '130200', parent: '130000' },
-          { text: '秦皇岛市', value: '130300', parent: '130000' },
-          { text: '上海市', value: '310100', parent: '310000' },
-      
-          { text: '东城区', value: '110101', parent: '110100' },
-          { text: '西城区', value: '110102', parent: '110100' },
-          { text: '朝阳区', value: '110105', parent: '110100' },
-          { text: '和平区', value: '120101', parent: '120100' },
-          { text: '河东区', value: '120102', parent: '120100' },
-          { text: '河西区', value: '120103', parent: '120100' },
-          { text: '黄浦区', value: '310101', parent: '310100' },
-          { text: '徐汇区', value: '310104', parent: '310100' },
-          { text: '长宁区', value: '310105', parent: '310100' },
-          { text: '长安区', value: '130102', parent: '130100' },
-          { text: '桥西区', value: '130104', parent: '130100' },
-          { text: '新华区', value: '130105', parent: '130100' },
-          { text: '路南区', value: '130202', parent: '130200' },
-          { text: '路北区', value: '130203', parent: '130200' },
-          { text: '古冶区', value: '130204', parent: '130200' },
-          { text: '海港区', value: '130302', parent: '130300' },
-          { text: '山海关区', value: '130303', parent: '130300' },
-          { text: '北戴河区', value: '130304', parent: '130300' },
-        ]
-      }
+export default {
+  name: 'JVxeDemo2',
+  data() {
+    return {
+      // 联动配置
+      linkageConfig: [
+        {requestData: this.requestData, key: 's1'},
+        // 可配置多个联动
+        {requestData: this.loadData, key: 'level1',},
+      ],
+      columns: [
+        {
+          title: '性别',
+          key: 'sex',
+          type: JVXETypes.select,
+          dictCode: 'sex',
+          width: '180px',
+          placeholder: '请选择${title}',
+        },
+        {
+          title: '省/直辖市/自治区',
+          key: 's1',
+          type: JVXETypes.select,
+          width: '180px',
+          placeholder: '请选择${title}',
+          // 联动字段（即下一级的字段）
+          linkageKey: 's2',
+        },
+        {
+          title: '市',
+          key: 's2',
+          type: JVXETypes.select,
+          width: '180px',
+          placeholder: '请选择${title}',
+          // 联动字段（即下一级的字段）
+          linkageKey: 's3',
+        },
+        {
+          title: '县/区',
+          key: 's3',
+          type: JVXETypes.select,
+          width: '180px',
+          options: [],
+          placeholder: '请选择${title}',
+        },
+        {
+          title: '一级',
+          key: 'level1',
+          type: JVXETypes.select,
+          width: '180px',
+          placeholder: '请选择${title}',
+          // 联动字段（即下一级的字段）
+          linkageKey: 'level2',
+        },
+        {
+          title: '二级',
+          key: 'level2',
+          type: JVXETypes.select,
+          width: '180px',
+          placeholder: '请选择${title}',
+          // 联动字段（即下一级的字段）
+          linkageKey: 'level3',
+        },
+        {
+          title: '三级',
+          key: 'level3',
+          type: JVXETypes.select,
+          width: '180px',
+          placeholder: '请选择${title}',
+        }
+      ],
+      dataSource: [
+        {sex: '1', s1: '110000', s2: '110100', s3: '110101', level1: '1', level2: '3', level3: '7'},
+        {sex: '2', s1: '130000', s2: '130300', s3: '130303', level1: '2', level2: '6', level3: '14'},
+      ],
+      // 模拟数据
+      mockData: [
+        {text: '北京市', value: '110000', parent: ''},
+        {text: '天津市', value: '120000', parent: ''},
+        {text: '河北省', value: '130000', parent: ''},
+        {text: '上海市', value: '310000', parent: ''},
  
+        {text: '北京市', value: '110100', parent: '110000'},
+        {text: '天津市市', value: '120100', parent: '120000'},
+        {text: '石家庄市', value: '130100', parent: '130000'},
+        {text: '唐山市', value: '130200', parent: '130000'},
+        {text: '秦皇岛市', value: '130300', parent: '130000'},
+        {text: '上海市', value: '310100', parent: '310000'},
+
+        {text: '东城区', value: '110101', parent: '110100'},
+        {text: '西城区', value: '110102', parent: '110100'},
+        {text: '朝阳区', value: '110105', parent: '110100'},
+        {text: '和平区', value: '120101', parent: '120100'},
+        {text: '河东区', value: '120102', parent: '120100'},
+        {text: '河西区', value: '120103', parent: '120100'},
+        {text: '黄浦区', value: '310101', parent: '310100'},
+        {text: '徐汇区', value: '310104', parent: '310100'},
+        {text: '长宁区', value: '310105', parent: '310100'},
+        {text: '长安区', value: '130102', parent: '130100'},
+        {text: '桥西区', value: '130104', parent: '130100'},
+        {text: '新华区', value: '130105', parent: '130100'},
+        {text: '路南区', value: '130202', parent: '130200'},
+        {text: '路北区', value: '130203', parent: '130200'},
+        {text: '古冶区', value: '130204', parent: '130200'},
+        {text: '海港区', value: '130302', parent: '130300'},
+        {text: '山海关区', value: '130303', parent: '130300'},
+        {text: '北戴河区', value: '130304', parent: '130300'},
+      ],
+      mockData1: [
+        {id: '1', name: '图书馆', parentId: '0'},
+        {id: '2', name: '电影院', parentId: '0'},
+
+        {id: '3', name: '一楼', parentId: '1'},
+        {id: '4', name: '二楼', parentId: '1'},
+        {id: '5', name: '中影星美', parentId: '2'},
+        {id: '6', name: '万达国际', parentId: '2'},
+
+        {id: '7', name: '技术图书', parentId: '3'},
+        {id: '8', name: '财务图书', parentId: '3'},
+        {id: '9', name: '儿童图书', parentId: '4'},
+        {id: '10', name: '励志图书', parentId: '4'},
+        {id: '11', name: '1号厅', parentId: '5'},
+        {id: '12', name: '2号厅', parentId: '5'},
+        {id: '13', name: 'I-MAX厅', parentId: '6'},
+        {id: '14', name: '3D厅', parentId: '6'},
+      ],
+    }
+  },
+  methods: {
+    /**
+     * 模拟从后台查询数据
+     */
+    requestData(parent) {
+      return new Promise((resolve, reject) => {
+        let data = this.mockData.filter(i => i.parent === parent)
+        setTimeout(() => {
+          resolve(data)
+        }, 500)
+      })
     },
-    created() {
-      // 初始化数据
-      this.columns[0].options = this.request(null)
-    },
-    methods: {
-      
-      request(parentId) {
-        return this.mockData.filter(i => i.parent === parentId)
-      },
-  
-      /** 当选项被改变时，联动其他组件 */
-      handleValueChange(event) {
-        const { type, row, column, value, target } = event
-        console.log("event",event)
-        if (type === JVXETypes.select) {
-      
-          // 第一列
-          if (column.key === 's1') {
-            // 设置第二列的 options
-            console.log('this.request(value)::',this.request(value))
-            target.$refs.vxe.columns[3].options = this.request(value)
-            // 清空后两列的数据
-            target.setValues([{
-              rowKey: row.id,
-              values: { s2: '', s3: '' }
-            }])
-            target.$refs.vxe.columns[4].options = []
-          } else
-          // 第二列
-          if (column.key === 's2') {
-            target.$refs.vxe.columns[4].options = this.request(value)
-            target.setValues([{
-              rowKey: row.id,
-              values: { s3: '' }
-            }])
+
+    // 模拟加载数据，模拟数据格式不同的情况下如何组装数据
+    async loadData(parent) {
+      return new Promise((resolve, reject) => {
+        let parentId = parent === '' ? '0' : parent
+        let data = this.mockData1.filter(i => i.parentId === parentId)
+        data = data.map(item => {
+          return {
+            // 必须包含以下两个字段
+            value: item.id,
+            text: item.name,
           }
-        }
-    
-      }
-    }
+        })
+        setTimeout(() => {
+          resolve(data)
+        }, 500)
+      })
+    },
   }
+}
 </script>
  
 <style scoped>