Skip to content

J
jeecg-boot
Commit 92028a7e by zhangdaiscott
Options

JVXETable提供更便捷的三级联动机制,解决联动展示与选择BUG #2867

parent 8ce40fa3
Showing with 377 additions and 89 deletions
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/JVxeTable.js
...@@ -98,6 +98,8 @@ export default { ...@@ -98,6 +98,8 @@ export default {
// 是否一直显示组件，如果为false则只有点击的时候才出现组件 // 是否一直显示组件，如果为false则只有点击的时候才出现组件
// 注：该参数不能动态修改；如果行、列字段多的情况下，会根据机器性能造成不同程度的卡顿。 // 注：该参数不能动态修改；如果行、列字段多的情况下，会根据机器性能造成不同程度的卡顿。
alwaysEdit: PropTypes.bool.def(false), alwaysEdit: PropTypes.bool.def(false),
// 联动配置，数组，详情配置见文档
linkageConfig: PropTypes.array.def(() => []),
}, },
data() { data() {
return { return {
...@@ -151,7 +153,10 @@ export default { ...@@ -151,7 +153,10 @@ export default {
// 允许执行刷新特效的行ID // 允许执行刷新特效的行ID
reloadEffectRowKeysMap: {}, reloadEffectRowKeysMap: {},
//配置了但是没有授权的按钮和列 集合 //配置了但是没有授权的按钮和列 集合
excludeCode:[] excludeCode:[],
// 联动下拉选项（用于隔离不同的下拉选项）
// 内部联动配置，map
_innerLinkageConfig: null,
} }
}, },
computed: { computed: {
...@@ -178,6 +183,18 @@ export default { ...@@ -178,6 +183,18 @@ export default {
renderOptions.target = this 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) { if (column.editRender) {
Object.assign(column.editRender, renderOptions) Object.assign(column.editRender, renderOptions)
} }
...@@ -278,15 +295,21 @@ export default { ...@@ -278,15 +295,21 @@ export default {
immediate: true, immediate: true,
async handler() { async handler() {
let vxe = await getRefPromise(this, 'vxe') let vxe = await getRefPromise(this, 'vxe')
// 阻断vue监听大数据，提高性能
this.dataSource.forEach((data, idx) => {
// 开启了排序就自动计算排序值 // 开启了排序就自动计算排序值
if (this.dragSort) { if (this.dragSort) {
this.dataSource.forEach((data, idx) => {
this.$set(data, this.dragSortKey, idx + 1) 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) vxe.loadData(this.dataSource)
// TODO 解析disabledRows // TODO 解析disabledRows
...@@ -469,8 +492,41 @@ export default { ...@@ -469,8 +492,41 @@ export default {
this._innerColumns = _innerColumns this._innerColumns = _innerColumns
this._innerEditRules = _innerEditRules 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() { created() {
}, },
mounted() { mounted() {
...@@ -671,6 +727,19 @@ export default { ...@@ -671,6 +727,19 @@ export default {
// issues/2784 // issues/2784
// 先清空所有数据 // 先清空所有数据
xTable.loadData([]) 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) return xTable.insertAt(dataSource)
} }
...@@ -797,6 +866,7 @@ export default { ...@@ -797,6 +866,7 @@ export default {
* 添加一行或多行 * 添加一行或多行
* *
* @param rows * @param rows
* @param isOnlJs 是否是onlineJS增强触发的
* @return * @return
*/ */
async addRows(rows = {}, isOnlJs) { async addRows(rows = {}, isOnlJs) {
...@@ -896,6 +966,89 @@ export default { ...@@ -896,6 +966,89 @@ export default {
this.$emit(name, event) 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 */ /** 加载数据字典并合并到 options */
_loadDictConcatToOptions(column) { _loadDictConcatToOptions(column) {
initDictOptions(column.dictCode).then((res) => { initDictOptions(column.dictCode).then((res) => {
...@@ -1088,6 +1241,15 @@ export default { ...@@ -1088,6 +1241,15 @@ export default {
let createValue = getEnhancedMixins(col.$type || col.type, 'createValue') let createValue = getEnhancedMixins(col.$type || col.type, 'createValue')
record[col.key] = createValue({row: record, column, $table: xTable}) 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 return record
}, },
......
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/cells/JVxeSelectCell.vue
...@@ -7,11 +7,16 @@ ...@@ -7,11 +7,16 @@
v-bind="selectProps" v-bind="selectProps"
style="width: 100%;" style="width: 100%;"
@blur="handleBlur" @blur="handleBlur"
@change="handleChangeCommon" @change="handleChange"
@search="handleSearchSelect" @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"> <a-select-option :key="option.value" :value="option.value" :disabled="option.disabled">
<span>{{option.text || option.label || option.title|| option.value}}</span> <span>{{option.text || option.label || option.title|| option.value}}</span>
</a-select-option> </a-select-option>
...@@ -23,10 +28,18 @@ ...@@ -23,10 +28,18 @@
<script> <script>
import JVxeCellMixins, { dispatchEvent } from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins' import JVxeCellMixins, { dispatchEvent } from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'
import { JVXETypes } from '@comp/jeecg/JVxeTable/index' import { JVXETypes } from '@comp/jeecg/JVxeTable/index'
import { filterDictText } from '@comp/dict/JDictSelectUtil'
export default { export default {
name: 'JVxeSelectCell', name: 'JVxeSelectCell',
mixins: [JVxeCellMixins], mixins: [JVxeCellMixins],
data(){
return {
loading: false,
// 异步加载的options（用于多级联动）
asyncOptions: null,
}
},
computed: { computed: {
selectProps() { selectProps() {
let props = {...this.cellProps} let props = {...this.cellProps}
...@@ -37,6 +50,32 @@ ...@@ -37,6 +50,32 @@
} }
return props 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() { created() {
let multiple = [JVXETypes.selectMultiple, JVXETypes.list_multi] let multiple = [JVXETypes.selectMultiple, JVXETypes.list_multi]
...@@ -54,6 +93,16 @@ ...@@ -54,6 +93,16 @@
}, },
methods: { methods: {
handleChange(value) {
debugger
// 处理下级联动
let linkage = this.renderOptions.linkage
if (linkage) {
linkage.linkageSelectChange(this.row, this.originColumn, linkage.config, value)
}
this.handleChangeCommon(value)
},
/** 处理blur失去焦点事件 */ /** 处理blur失去焦点事件 */
handleBlur(value) { handleBlur(value) {
let {allowInput, options} = this.originColumn let {allowInput, options} = this.originColumn
...@@ -120,7 +169,28 @@ ...@@ -120,7 +169,28 @@
dispatchEvent.call(this, event, 'ant-select') 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) { getValue(value) {
if (Array.isArray(value)) { if (Array.isArray(value)) {
return value.join(',') return value.join(',')
......
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/mixins/JVxeCellMixins.js
...@@ -102,7 +102,13 @@ export default { ...@@ -102,7 +102,13 @@ export default {
// 判断是否启用翻译 // 判断是否启用翻译
if (this.renderType === JVXERenderType.spaner && this.enhanced.translate.enabled) { 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
}
} }
}, },
}, },
......
ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/JVxeDemo3.vue
...@@ -8,123 +8,173 @@ ...@@ -8,123 +8,173 @@
:height="484" :height="484"
:dataSource="dataSource" :dataSource="dataSource"
:columns="columns" :columns="columns"
@valueChange="handleValueChange" :linkage-config="linkageConfig"
/> />
</template> </template>
<script> <script>
import moment from 'moment' import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { randomNumber, randomUUID } from '@/utils/util'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
export default { export default {
name: 'JVxeDemo2', name: 'JVxeDemo2',
data() { data() {
return { return {
// 联动配置
linkageConfig: [
{requestData: this.requestData, key: 's1'},
// 可配置多个联动
{requestData: this.loadData, key: 'level1',},
],
columns: [ columns: [
{ {
title: '性别',
key: 'sex',
type: JVXETypes.select,
dictCode: 'sex',
width: '180px',
placeholder: '请选择${title}',
},
{
title: '省/直辖市/自治区', title: '省/直辖市/自治区',
key: 's1', key: 's1',
type: JVXETypes.select, type: JVXETypes.select,
width: '240px', width: '180px',
options: [], placeholder: '请选择${title}',
placeholder: '请选择${title}' // 联动字段（即下一级的字段）
linkageKey: 's2',
}, },
{ {
title: '市', title: '市',
key: 's2', key: 's2',
type: JVXETypes.select, type: JVXETypes.select,
width: '240px', width: '180px',
options: [], placeholder: '请选择${title}',
placeholder: '请选择${title}' // 联动字段（即下一级的字段）
linkageKey: 's3',
}, },
{ {
title: '县/区', title: '县/区',
key: 's3', key: 's3',
type: JVXETypes.select, type: JVXETypes.select,
width: '240px', width: '180px',
options: [], options: [],
placeholder: '请选择${title}' 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: [], 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: [ mockData: [
{ text: '北京市', value: '110000', parent: null }, {text: '北京市', value: '110000', parent: ''},
{ text: '天津市', value: '120000', parent: null }, {text: '天津市', value: '120000', parent: ''},
{ text: '河北省', value: '130000', parent: null }, {text: '河北省', value: '130000', parent: ''},
{ text: '上海市', value: '310000', parent: null }, {text: '上海市', value: '310000', parent: ''},
{ text: '北京市', value: '110100', parent: '110000' }, {text: '北京市', value: '110100', parent: '110000'},
{ text: '天津市市', value: '120100', parent: '120000' }, {text: '天津市市', value: '120100', parent: '120000'},
{ text: '石家庄市', value: '130100', parent: '130000' }, {text: '石家庄市', value: '130100', parent: '130000'},
{ text: '唐山市', value: '130200', parent: '130000' }, {text: '唐山市', value: '130200', parent: '130000'},
{ text: '秦皇岛市', value: '130300', parent: '130000' }, {text: '秦皇岛市', value: '130300', parent: '130000'},
{ text: '上海市', value: '310100', parent: '310000' }, {text: '上海市', value: '310100', parent: '310000'},
{ text: '东城区', value: '110101', parent: '110100' }, {text: '东城区', value: '110101', parent: '110100'},
{ text: '西城区', value: '110102', parent: '110100' }, {text: '西城区', value: '110102', parent: '110100'},
{ text: '朝阳区', value: '110105', parent: '110100' }, {text: '朝阳区', value: '110105', parent: '110100'},
{ text: '和平区', value: '120101', parent: '120100' }, {text: '和平区', value: '120101', parent: '120100'},
{ text: '河东区', value: '120102', parent: '120100' }, {text: '河东区', value: '120102', parent: '120100'},
{ text: '河西区', value: '120103', parent: '120100' }, {text: '河西区', value: '120103', parent: '120100'},
{ text: '黄浦区', value: '310101', parent: '310100' }, {text: '黄浦区', value: '310101', parent: '310100'},
{ text: '徐汇区', value: '310104', parent: '310100' }, {text: '徐汇区', value: '310104', parent: '310100'},
{ text: '长宁区', value: '310105', parent: '310100' }, {text: '长宁区', value: '310105', parent: '310100'},
{ text: '长安区', value: '130102', parent: '130100' }, {text: '长安区', value: '130102', parent: '130100'},
{ text: '桥西区', value: '130104', parent: '130100' }, {text: '桥西区', value: '130104', parent: '130100'},
{ text: '新华区', value: '130105', parent: '130100' }, {text: '新华区', value: '130105', parent: '130100'},
{ text: '路南区', value: '130202', parent: '130200' }, {text: '路南区', value: '130202', parent: '130200'},
{ text: '路北区', value: '130203', parent: '130200' }, {text: '路北区', value: '130203', parent: '130200'},
{ text: '古冶区', value: '130204', parent: '130200' }, {text: '古冶区', value: '130204', parent: '130200'},
{ text: '海港区', value: '130302', parent: '130300' }, {text: '海港区', value: '130302', parent: '130300'},
{ text: '山海关区', value: '130303', parent: '130300' }, {text: '山海关区', value: '130303', parent: '130300'},
{ text: '北戴河区', value: '130304', parent: '130300' }, {text: '北戴河区', value: '130304', parent: '130300'},
] ],
} mockData1: [
{id: '1', name: '图书馆', parentId: '0'},
{id: '2', name: '电影院', parentId: '0'},
}, {id: '3', name: '一楼', parentId: '1'},
created() { {id: '4', name: '二楼', parentId: '1'},
// 初始化数据 {id: '5', name: '中影星美', parentId: '2'},
this.columns[0].options = this.request(null) {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: { methods: {
/**
request(parentId) { * 模拟从后台查询数据
return this.mockData.filter(i => i.parent === parentId) */
requestData(parent) {
return new Promise((resolve, reject) => {
let data = this.mockData.filter(i => i.parent === parent)
setTimeout(() => {
resolve(data)
}, 500)
})
}, },
/** 当选项被改变时，联动其他组件 */ // 模拟加载数据，模拟数据格式不同的情况下如何组装数据
handleValueChange(event) { async loadData(parent) {
const { type, row, column, value, target } = event return new Promise((resolve, reject) => {
console.log("event",event) let parentId = parent === '' ? '0' : parent
if (type === JVXETypes.select) { let data = this.mockData1.filter(i => i.parentId === parentId)
data = data.map(item => {
// 第一列 return {
if (column.key === 's1') { // 必须包含以下两个字段
// 设置第二列的 options value: item.id,
console.log('this.request(value)::',this.request(value)) text: item.name,
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: '' }
}])
}
}
}
} }
})
setTimeout(() => {
resolve(data)
}, 500)
})
},
} }
}
</script> </script>
<style scoped> <style scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment