forgetest5
/
jeecg-boot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

This commit is contained in:
zhangdaiscott 2021-08-20 11:20:40 +08:00
parent 07812d517b
commit 9bf9339a11
4 changed files with 409 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/JVxeTable.js
View File

@ -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
},

76
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/cells/JVxeSelectCell.vue
View File

@ -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(',')

8
ant-design-vue-jeecg/src/components/jeecg/JVxeTable/mixins/JVxeCellMixins.js
View File

@ -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
}
}
},
},

268
ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/JVxeDemo3.vue
View File

@ -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' },
]
}
},
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: '' }
}])
}
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)
})
},
// 模拟加载数据，模拟数据格式不同的情况下如何组装数据
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>