532 lines
17 KiB
Vue
532 lines
17 KiB
Vue
<template>
|
|
<j-modal
|
|
:title="$t('userSelect.select')"
|
|
:width="width"
|
|
:visible="visible"
|
|
switchFullscreen
|
|
:maskClosable="false"
|
|
:confirmLoading="confirmLoading"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel">
|
|
|
|
<div class="modal-content">
|
|
<a-spin :spinning="topLoading">
|
|
<a-input-search style="margin-bottom: 1px" :placeholder="$t('pleaseEnter') + $t('treeSelection.primaryNodeName')" @search="onSearch" />
|
|
<a-tree
|
|
ref="tree"
|
|
:checkable="checkable"
|
|
:checkStrictly="true"
|
|
:replaceFields="replaceFields"
|
|
:class="treeScreenClass"
|
|
:treeData="treeData"
|
|
:autoExpandParent="autoExpandParent"
|
|
@check="onCheck"
|
|
@select="onSelect"
|
|
@expand="onExpand"
|
|
@load="onLoad"
|
|
:loadData="loadData"
|
|
:expandedKeys="expandedKeys"
|
|
:checkedKeys="checkedKeys"
|
|
:loadedKeys="loadedKeys"
|
|
:selectedKeys.sync="selectedKeys">
|
|
|
|
<template slot="title" slot-scope="{dataRef}">
|
|
<span v-if="searchValue && dataRef[replaceFields.title].indexOf(searchValue) > -1">
|
|
<span style="color: #f50">{{ dataRef[replaceFields.title] }}</span>
|
|
</span>
|
|
<span v-else>{{ dataRef[replaceFields.title] }}</span>
|
|
</template>
|
|
</a-tree>
|
|
</a-spin>
|
|
</div>
|
|
|
|
<p class="modal-content-title">{{ $t('treeSelection.selectedData') }}</p>
|
|
<a-spin :spinning="bottomLoading">
|
|
<div v-if="dataSourceRight && dataSourceRight.length > 0" class="name-content">
|
|
<div v-for="(item, index) in dataSourceRight" :key="item[replaceFields.key]" class="name-div">
|
|
{{ item[replaceFields.title] }}
|
|
<a-icon type="close" @click="handleDelete(item, index)" />
|
|
</div>
|
|
</div>
|
|
<a-empty v-else />
|
|
</a-spin>
|
|
|
|
<!--底部父子关联操作和确认取消按钮-->
|
|
<template slot="footer" v-if="treeOpera && checkable">
|
|
<div class="drawer-bootom-button">
|
|
<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
|
|
<a-menu slot="overlay">
|
|
<a-menu-item key="1" @click="switchCheckStrictly(2)">{{ $t('parentChildConnection') }}</a-menu-item>
|
|
<a-menu-item key="2" @click="switchCheckStrictly(1)">{{ $t('cancelConnection') }}</a-menu-item>
|
|
</a-menu>
|
|
<a-button>
|
|
{{ treeOperationText }} <a-icon type="up" />
|
|
</a-button>
|
|
</a-dropdown>
|
|
<!-- <a-button style="float: left" @click="switchCheckStrictly(parentChildRelate ? 1 : 2)">{{ treeOperationText }}</a-button>-->
|
|
<a-button @click="handleCancel" type="primary" style="margin-right: 0.8rem">{{ $t('close') }}</a-button>
|
|
<a-button @click="handleOk" type="primary" >{{ $t('confirm') }}</a-button>
|
|
</div>
|
|
</template>
|
|
</j-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction, postAction } from '../../api/manage'
|
|
|
|
export default {
|
|
name: 'TreeDataSelectModal',
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
checkable: { // 是否多选
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 是否校验必选
|
|
checkRequired: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 获取数据的接口
|
|
optionsHref: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
// 标签库的限制，只能选第三级
|
|
isTagLibraryRestriction: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
dictId: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
treeOpera: { // 是否可以切换父子关联
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
treeScreenClass () {
|
|
return {
|
|
'my-dept-select-tree': true,
|
|
fullscreen: this.fullscreen
|
|
}
|
|
},
|
|
treeOperationText () {
|
|
return this.parentChildRelate ? this.$t('parentChildConnection') : this.$t('cancelConnection')
|
|
}
|
|
},
|
|
watch: {
|
|
// 是否只能选第三级
|
|
isTagLibraryRestriction (val) {
|
|
if (val) {
|
|
this.setOnlySelectThreeLevel(this.treeData)
|
|
}
|
|
},
|
|
value (val) {
|
|
if (val) {
|
|
this.checkedKeys = val.split(',')
|
|
}
|
|
},
|
|
optionsHref: {
|
|
immediate: true,
|
|
handler (val) {
|
|
console.log('-------------optionsHref', val)
|
|
if (val === '/laws/standard/partName/queryFirstList') {
|
|
// 是涉及系统/部件
|
|
this.replaceFields = { children: 'childPartNameList', title: 'name', key: 'code' }
|
|
this.lazyLoadHref = '/laws/standard/partName/getChild'
|
|
this.searchFieldName = 'nodeName'
|
|
this.lazyLoadPidFieldName = 'parentCode'
|
|
} else { // 标签库
|
|
this.replaceFields = { children: 'childrenList', title: 'itemText', key: 'itemValue' }
|
|
this.lazyLoadHref = '/laws/dictTree/getChild'
|
|
this.searchFieldName = 'nodeName'
|
|
this.lazyLoadPidFieldName = 'dictItemId'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
// if (this.treeOpera) {
|
|
// this.switchCheckStrictly(1)
|
|
// }
|
|
},
|
|
data () {
|
|
return {
|
|
width: 800,
|
|
visible: false,
|
|
confirmLoading: false,
|
|
topLoading: false,
|
|
bottomLoading: false,
|
|
parentChildRelate: true, // 父子节点是否关联
|
|
autoExpandParent: false, // 是否自动展开父节点
|
|
treeData: [],
|
|
expandedKeys: [],
|
|
checkedKeys: [],
|
|
checkedRows: [],
|
|
selectedKeys: [],
|
|
loadedKeys: [],
|
|
searchValue: '', // 查询框内容
|
|
replaceFields: {},
|
|
dataSourceRight: [],
|
|
lazyLoadHref: '', // 懒加载接口
|
|
searchFieldName: '', // 查询传的字段名
|
|
lazyLoadPidFieldName: '' // 懒加载传父级的字段名
|
|
}
|
|
},
|
|
methods: {
|
|
show () {
|
|
this.visible = true
|
|
this.treeData = []
|
|
this.checkedRows = []
|
|
this.checkedKeys = []
|
|
this.loadedKeys = []
|
|
this.selectedKeys = []
|
|
this.dataSourceRight = []
|
|
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)
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
onCheck (checkedKeys, info) {
|
|
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 {
|
|
// 不是父子关联
|
|
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 = []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onSelect (selectedKeys, info) {
|
|
// 取消关联的情况下才走onSelect的逻辑
|
|
if (!this.parentChildRelate) {
|
|
if (selectedKeys && selectedKeys.length > 0) {
|
|
// 说明是选中了数据
|
|
this.selectedKeys = [...selectedKeys]
|
|
this.dataSourceRight = [info.node.dataRef]
|
|
} else {
|
|
// 没有数据，直接清空
|
|
this.selectedKeys = []
|
|
this.dataSourceRight = []
|
|
}
|
|
}
|
|
},
|
|
onLoad (loadedKeys) {
|
|
this.loadedKeys = loadedKeys
|
|
},
|
|
onExpand (expandedKeys) {
|
|
console.log('========expandedKeys', expandedKeys)
|
|
this.expandedKeys = expandedKeys
|
|
},
|
|
// 异步加载
|
|
async loadData (node) {
|
|
console.log('-------------loadData', node)
|
|
if (node.dataRef.children) {
|
|
return
|
|
}
|
|
this.topLoading = true
|
|
const params = {}
|
|
if (this.optionsHref !== '/laws/standard/partName/queryFirstList') {
|
|
// 不是涉及系统部件
|
|
params.dictId = this.dictId
|
|
}
|
|
// 查询条件的名称
|
|
if (this.searchValue) {
|
|
params[this.searchFieldName] = this.searchValue
|
|
}
|
|
// 父节点id
|
|
if (this.optionsHref === '/laws/standard/partName/queryFirstList') {
|
|
// 是涉及系统部件
|
|
params[this.lazyLoadPidFieldName] = node.dataRef.code
|
|
} else {
|
|
params[this.lazyLoadPidFieldName] = node.dataRef.id
|
|
}
|
|
await getAction(this.lazyLoadHref, params).then(res => {
|
|
if (res.success) {
|
|
node.dataRef[this.replaceFields.children] = res.result.record || res.result
|
|
}
|
|
}).finally(() => {
|
|
this.topLoading = false
|
|
})
|
|
},
|
|
handleCancel () {
|
|
this.visible = false
|
|
},
|
|
close () {
|
|
this.visible = false
|
|
this.checkedKeys = []
|
|
this.expandedKeys = []
|
|
this.loadedKeys = []
|
|
this.dataSourceRight = []
|
|
this.treeData = []
|
|
this.searchValue = ''
|
|
},
|
|
onSearch (value) {
|
|
this.searchValue = value
|
|
// this.autoExpandParent = true
|
|
this.getTreeData()
|
|
this.expandedKeys = []
|
|
this.loadedKeys = []
|
|
this.$forceUpdate()
|
|
},
|
|
// 设置树只能选第三级
|
|
setOnlySelectThreeLevel (treeData) {
|
|
for (const item of treeData) {
|
|
item.disabled = item.level + '' !== '3'
|
|
item.disableCheckbox = item.level + '' !== '3'
|
|
if (item.childPartNameList && item.childPartNameList.length > 0) {
|
|
this.setOnlySelectThreeLevel(item.childPartNameList)
|
|
}
|
|
}
|
|
},
|
|
// 切换父子关联
|
|
switchCheckStrictly (v) {
|
|
if (v === 1) {
|
|
// 取消父子关联
|
|
this.parentChildRelate = false
|
|
} else if (v === 2) {
|
|
// 增加父子关联
|
|
this.parentChildRelate = true
|
|
}
|
|
},
|
|
getTreeData () {
|
|
this.topLoading = true
|
|
const params = {}
|
|
if (this.optionsHref !== '/laws/standard/partName/queryFirstList') {
|
|
// 不是涉及系统部件
|
|
params.dictId = this.dictId
|
|
}
|
|
// 查询条件的名称
|
|
if (this.searchValue) {
|
|
params[this.searchFieldName] = this.searchValue
|
|
}
|
|
getAction(this.optionsHref, params).then(res => {
|
|
if (res.success) {
|
|
this.treeData = res.result.records || res.result
|
|
}
|
|
}).finally(() => {
|
|
this.topLoading = 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
|
|
}
|
|
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()
|
|
},
|
|
getSelectedList (codes) {
|
|
this.bottomLoading = true
|
|
const params = {
|
|
selectNodeCodes: codes,
|
|
dictId: this.dictId
|
|
}
|
|
let url
|
|
// 涉及系统/部件
|
|
if (this.optionsHref === '/laws/standard/partName/queryFirstList') {
|
|
url = '/laws/standard/partName/echo'
|
|
} else { // 标签库
|
|
url = '/laws/dictTree/echo'
|
|
}
|
|
if (!url) {
|
|
return
|
|
}
|
|
postAction(url, params).then(res => {
|
|
if (res.success) {
|
|
this.dataSourceRight = JSON.parse(JSON.stringify(res.result))
|
|
}
|
|
}).finally(() => {
|
|
this.bottomLoading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
/deep/ .ant-modal-content {
|
|
padding-bottom: 18px;
|
|
}
|
|
.my-dept-select-tree{
|
|
height:350px;
|
|
|
|
&.fullscreen{
|
|
height: calc(100vh - 250px);
|
|
}
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.modal-content-title {
|
|
color: #1D2129;
|
|
font-weight: 500;
|
|
margin-right: 12px;
|
|
margin-bottom: 0;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.drawer-bootom-button {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
border-top: 1px solid #e8e8e8;
|
|
padding: 10px 16px;
|
|
text-align: right;
|
|
left: 0;
|
|
background: #fff;
|
|
border-radius: 0 0 2px 2px;
|
|
}
|
|
|
|
.name-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
.name-div {
|
|
width: auto;
|
|
padding: 5px 16px;
|
|
margin-right: 12px;
|
|
margin-top: 8px;
|
|
background: rgba(213, 44, 38, 0.08);
|
|
border-radius: 4px 4px 4px 4px;
|
|
opacity: 1;
|
|
color: @primary-color;
|
|
white-space: nowrap;
|
|
/deep/ .anticon {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|