-
- {{ item.name }}
+
+ {{ item[replaceFields.title] }}
+
+
+
+
+
@@ -61,7 +78,7 @@ export default {
checkable: { // 是否多选
type: Boolean,
required: false,
- default: true
+ default: false
},
// 是否校验必选
checkRequired: {
@@ -81,22 +98,15 @@ export default {
required: false,
default: false
},
- // 存储字段 [key field]
- storeField: {
- type: String,
- default: 'id',
- required: false
- },
- // 显示字段 [label field]
- textField: {
- type: String,
- default: 'name',
- required: false
- },
dictId: {
type: String,
required: false,
default: ''
+ },
+ treeOpera: { // 是否可以切换父子关联
+ type: Boolean,
+ required: false,
+ default: true
}
},
computed: {
@@ -105,6 +115,9 @@ export default {
'my-dept-select-tree': true,
fullscreen: this.fullscreen
}
+ },
+ treeOperationText () {
+ return this.parentChildRelate ? this.$t('parentChildConnection') : this.$t('cancelConnection')
}
},
watch: {
@@ -126,9 +139,9 @@ export default {
if (val === '/laws/standard/partName/') {
// 是涉及系统/部件
this.replaceFields = { children: 'childPartNameList', title: 'name', key: 'id' }
- this.lazyLoadHref = ''
- this.searchFieldName = 'name'
- this.lazyLoadPidFieldName = ''
+ this.lazyLoadHref = '/laws/standard/partName/getChild'
+ this.searchFieldName = 'nodeName'
+ this.lazyLoadPidFieldName = 'dictItemId'
} else { // 标签库
this.replaceFields = { children: 'childrenList', title: 'itemText', key: 'id' }
this.lazyLoadHref = '/laws/dictTree/getChild'
@@ -138,18 +151,23 @@ export default {
}
}
},
+ created () {
+ // if (this.treeOpera) {
+ // this.switchCheckStrictly(1)
+ // }
+ },
data () {
return {
width: 800,
visible: false,
confirmLoading: false,
- checkStrictly: true,
+ parentChildRelate: false, // 父子节点是否关联
autoExpandParent: false, // 是否自动展开父节点
treeData: [],
expandedKeys: [],
checkedKeys: [],
checkedRows: [],
- loadedKeys: [], // 已经加载的节点
+ selectedKeys: [],
searchValue: '', // 查询框内容
replaceFields: {},
dataSourceRight: [],
@@ -163,50 +181,145 @@ export default {
this.visible = true
this.checkedRows = []
this.checkedKeys = []
+ this.selectedKeys = []
this.searchValue = ''
this.getTreeData()
+ if (this.value) {
+ if (this.checkable) {
+ this.checkedKeys = this.value.split(',')
+ } else {
+ this.selectedKeys = this.value.split(',')
+ }
+ // 初始化选中数据列表
+ this.getSelectedList(this.value)
+ }
},
onCheck (checkedKeys, info) {
- console.log('----------onCheck', checkedKeys, info)
- if (!this.checkable) {
- // // 不是多选
- // const arr = checkedKeys.checked.filter(item => !this.checkedKeys.includes(item))
- // this.checkedKeys = [...arr]
- // this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef]
- } else {
- if (this.checkStrictly) {
- this.checkedKeys = checkedKeys.checked
+ console.log('----------onCheck', checkedKeys)
+ console.log('----------info.checked', info.checked)
+ console.log('----------info.node', info.node.dataRef)
+ if (this.checkable) {
+ // 是多选
+ if (this.parentChildRelate) {
+ // 是父子关联
+ if (info.checked) {
+ // 是选中数据了
+ let childrenList = []
+ if (info.node.dataRef[this.replaceFields.children]) {
+ // 有子节点获取子节点数据
+ childrenList = info.node.dataRef[this.replaceFields.children].map(item => item[this.replaceFields.key])
+ }
+ this.checkedKeys = [...this.checkedKeys, ...checkedKeys.checked, ...childrenList]
+ } else {
+ // 是取消选中了，把当前和子节点都取消选中
+ let currAndChildNode = []
+ if (info.node.dataRef[this.replaceFields.children]) {
+ // 有子节点获取子节点数据
+ const childrenNode = info.node.dataRef[this.replaceFields.children].map(item => item[this.replaceFields.key])
+ currAndChildNode = [...childrenNode, info.node.dataRef[this.replaceFields.key]]
+ } else {
+ currAndChildNode = [info.node.dataRef[this.replaceFields.key]]
+ }
+ this.checkedKeys = this.checkedKeys.filter(item => !currAndChildNode.includes(item))
+ }
+ // 处理下方显示已选数据
+ if (info.checked) {
+ console.log('------------增加了数据')
+ // 说明是增加了数据,把点击的数据和子数据追加进去
+ for (const key of checkedKeys.checked) {
+ // 当前选中没在选中列表中的加进去
+ if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === key)) {
+ // 右侧不存在，追加到右侧表格
+ this.dataSourceRight.push(info.node.dataRef)
+ }
+ }
+ if (info.node.dataRef[this.replaceFields.children]) {
+ // 有子集追加
+ for (const keyItem of info.node.dataRef[this.replaceFields.children]) {
+ // 当前选中的子集没在列表中的加进去
+ if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === keyItem[this.replaceFields.key])) {
+ // 右侧不存在，追加到右侧表格
+ this.dataSourceRight.push(keyItem)
+ }
+ }
+ }
+ } else {
+ console.log('----------删除了数据')
+ // 说明是删除了数据
+ if (this.checkedKeys && this.checkedKeys.length > 0) {
+ // 还有选中数据，从dataSourceRight里面找到点击的数据和他的子数据清空
+ for (let i = 0; i < this.dataSourceRight.length; i++) {
+ if (!this.checkedKeys.find(item => item === this.dataSourceRight[i][this.replaceFields.key])) {
+ // 表格选中中没有找到这一条数据，说明已经被删了
+ this.dataSourceRight.splice(i, 1)
+ i--
+ }
+ }
+ } else {
+ // 已经没有选中数据了，直接清空展示数据
+ this.dataSourceRight = []
+ }
+ }
} else {
- this.checkedKeys = checkedKeys
+ // 不是父子关联
+ console.log('-----------checkedKeys', this.checkedKeys, checkedKeys)
+ if (info.checked) {
+ // 是选中数据了
+ this.checkedKeys = [...this.checkedKeys, ...checkedKeys.checked]
+ } else {
+ // 是取消选中了
+ this.checkedKeys = this.checkedKeys.filter(item => item !== info.node.dataRef[this.replaceFields.key])
+ }
+ // 处理下方显示已选数据
+ if (info.checked) {
+ console.log('------------不父子关联增加了数据')
+ // 说明是增加了数据,把点击的数据追加进去
+ for (const key of checkedKeys.checked) {
+ // 当前选中没在选中列表中的加进去
+ if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === key)) {
+ // 右侧不存在，追加到右侧表格
+ this.dataSourceRight.push(info.node.dataRef)
+ }
+ }
+ } else {
+ console.log('----------不父子关联删除了数据')
+ // 说明是删除了数据
+ if (this.checkedKeys && this.checkedKeys.length > 0) {
+ // 还有选中数据，从dataSourceRight里面找到点击的数据和他的子数据清空
+ for (let i = 0; i < this.dataSourceRight.length; i++) {
+ if (!this.checkedKeys.find(item => item === this.dataSourceRight[i][this.replaceFields.key])) {
+ // 表格选中中没有找到这一条数据，说明已经被删了
+ this.dataSourceRight.splice(i, 1)
+ i--
+ }
+ }
+ } else {
+ // 已经没有选中数据了，直接清空展示数据
+ this.dataSourceRight = []
+ }
+ }
}
- this.checkedRows = this.getCheckedRows(this.checkedKeys)
}
},
onSelect (selectedKeys, info) {
// 取消关联的情况下才走onSelect的逻辑
- if (this.checkStrictly) {
- const keys = []
- keys.push(selectedKeys[0])
- if (!this.checkedKeys || this.checkedKeys.length === 0 || !this.checkable) {
- this.checkedKeys = [...keys]
- this.checkedRows = [info.node.dataRef]
+ if (!this.parentChildRelate) {
+ if (selectedKeys && selectedKeys.length > 0) {
+ // 说明是选中了数据
+ this.selectedKeys = [...selectedKeys]
+ this.dataSourceRight = [info.node.dataRef]
} else {
- const currKey = info.node.dataRef.key
- if (this.checkedKeys.indexOf(currKey) >= 0) {
- this.checkedKeys = this.checkedKeys.filter(item => item !== currKey)
- } else {
- this.checkedKeys.push(...keys)
- }
+ // 没有数据，直接清空
+ this.selectedKeys = []
+ this.dataSourceRight = []
}
- this.checkedRows = this.getCheckedRows(this.checkedKeys)
}
},
onExpand (expandedKeys) {
this.expandedKeys = expandedKeys
},
// 异步加载
- loadData (node) {
- console.log('-------node', node)
+ async loadData (node) {
if (node.dataRef.children) {
return
}
@@ -219,10 +332,9 @@ export default {
}
// 父节点id
params.dictItemId = node.dataRef.id
- getAction(this.lazyLoadHref, params).then(res => {
+ await getAction(this.lazyLoadHref, params).then(res => {
if (res.success) {
- node[this.replaceFields.children] = res.result.record
- this.loadedKeys.push(node.id)
+ node.dataRef[this.replaceFields.children] = res.result.record || res.result
}
}).finally(() => {
this.confirmLoading = false
@@ -254,6 +366,16 @@ export default {
}
}
},
+ // 切换父子关联
+ switchCheckStrictly (v) {
+ if (v === 1) {
+ // 取消父子关联
+ this.parentChildRelate = false
+ } else if (v === 2) {
+ // 增加父子关联
+ this.parentChildRelate = true
+ }
+ },
getTreeData () {
this.confirmLoading = true
const params = {}
@@ -266,65 +388,46 @@ export default {
this.confirmLoading = false
})
},
+ // 已选数据列表的删除
+ handleDelete (record, index) {
+ this.dataSourceRight.splice(index, 1)
+ if (this.checkable) {
+ // 多选从checkedKeys里面筛选出去
+ this.checkedKeys = this.checkedKeys.filter(item => item !== record[this.replaceFields.key])
+ } else {
+ // 单选从selectedKeys里面筛选出去
+ this.selectedKeys = this.selectedKeys.filter(item => item !== record[this.replaceFields.key])
+ }
+ },
handleOk () {
if (this.checkRequired && (!this.checkedKeys || this.checkedKeys.length === 0)) {
this.$message.warning(this.$t('selectLeastOne'))
return
}
- if (!this.checkedKeys || this.checkedKeys.length === 0) {
- this.$emit('ok', '')
- } else {
- const checkRow = this.getCheckedRows(this.checkedKeys)
- const keyStr = this.checkedKeys.join(',')
- this.$emit('ok', checkRow, keyStr)
- }
+ this.$emit('nameChange', this.dataSourceRight.map(item => item[this.replaceFields.title]).join(','))
+ this.$emit('change', this.dataSourceRight.map(item => item[this.replaceFields.key]).join(','))
+ this.$emit('listChange', this.dataSourceRight)
this.close()
},
- // 根据 checkedKeys 获取 rows
- getCheckedRows (checkedKeys) {
- const forChildren = (list, key) => {
- for (const item of list) {
- if (item[this.storeField] === key) {
- return item
- }
- if (item[this.replaceFields.children] instanceof Array) {
- const value = forChildren(item[this.replaceFields.children], key)
- if (value != null) {
- return value
- }
- }
- }
- return null
- }
-
- const rows = []
- for (const key of checkedKeys) {
- const row = forChildren(this.treeData, key)
- if (row != null) {
- rows.push(row)
- }
- }
- return rows
- },
getSelectedList (codes) {
const params = {
- selectNodeCodes: codes
+ selectNodeCodes: codes,
+ dictId: this.dictId
}
let url
// 涉及系统/部件
if (this.optionsHref === '/laws/standard/partName/') {
url = '/laws/standard/partName/echo'
- } else if (this.optionsHref === '/laws/lawsLabelDatabase/queryTreeList') { // 标签库
- url = '/laws/lawsLabelDatabase/queryByCodes'
+ } else { // 标签库
+ // url = '/laws/lawsLabelDatabase/queryByCodes'
+ url = '/laws/standard/partName/echo'
}
if (!url) {
return
}
postAction(url, params).then(res => {
if (res.success) {
- const nameArr = (res.result || []).map(item => item[this.text])
- // 抛出名称
- this.$emit('initComp', nameArr.join(','))
+ this.dataSourceRight = JSON.parse(JSON.stringify(res.result))
}
})
}
@@ -333,6 +436,9 @@ export default {
diff --git a/src/components/selection/TreeDataSelection.vue b/src/components/selection/TreeDataSelection.vue
index 33aeb5f..d0bdd22 100644
--- a/src/components/selection/TreeDataSelection.vue
+++ b/src/components/selection/TreeDataSelection.vue
@@ -1,18 +1,19 @@
@@ -38,35 +39,13 @@ export default {
required: false,
default: false
},
- // 自定义返回字段，默认返回 id
- customReturnField: {
- type: String,
- default: ''
- },
// 获取数据的接口
optionsHref: {
type: String,
required: false,
default: ''
},
- // 是否返回选中的对象
- backObj: {
- type: Boolean,
- default: false,
- required: false
- },
- // 存储字段 [key field]
- storeField: {
- type: String,
- default: 'id',
- required: false
- },
- // 显示字段 [label field]
- textField: {
- type: String,
- default: 'name',
- required: false
- },
+ // 名称字符串
nameStr: {
type: String,
required: false,
@@ -83,66 +62,40 @@ export default {
default: ''
}
},
+ watch: {
+ nameStr: {
+ immediate: true,
+ handler (val) {
+ console.log('----------nameStr', val)
+ }
+ }
+ },
data () {
return {
visible: false,
- confirmLoading: false,
- storeVals: '', // [key values]
- textVals: '' // [label values]
- }
- },
- mounted () {
- this.storeVals = this.value
- },
- watch: {
- value (val) {
- this.storeVals = val
+ confirmLoading: false
}
},
methods: {
- // 返回选中的部门信息
- backObjInfo () {
- if (this.backObj === true) {
- if (this.storeVals && this.storeVals.length > 0) {
- const arr1 = this.storeVals.split(',')
- const arr2 = this.textVals.split(',')
- const info = []
- for (let i = 0; i < arr1.length; i++) {
- info.push({
- value: arr1[i],
- text: arr2[i]
- })
- }
- this.$emit('back', info)
- }
- }
- },
openModal () {
this.$refs.selectModal.show()
},
- handleOK (rows) {
- if (!rows && rows.length <= 0) {
- this.textVals = ''
- this.storeVals = ''
- } else {
- const arr1 = []
- const arr2 = []
- for (const dep of rows) {
- arr1.push(dep[this.storeField])
- arr2.push(dep[this.textField])
- }
- this.storeVals = arr1.join(',')
- this.textVals = arr2.join(',')
- }
- this.$emit('change', this.storeVals)
- this.$emit('nameChange', this.textVals, this.fieldName)
- this.backObjInfo()
+ handleChange (value) {
+ this.$emit('change', value, this.fieldName)
+ },
+ nameChange (value) {
+ this.$emit('nameChange', value, this.fieldName)
+ },
+ listChange (value) {
+ this.$emit('listChange', value, this.fieldName)
},
handleEmpty () {
if (this.disabled) {
return
}
- this.handleOK('')
+ this.handleChange('')
+ this.nameChange('')
+ this.listChange([])
}
},
model: {