QR/laws_chery_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/树形弹框组件修改属性'

Browse Source
This commit is contained in:
lideqin
2024-08-08 11:49:01 +08:00
parent 564779ba68 28c786a82e
commit bf1d24a48b
3 changed files with 656 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/customField/AddForm.vue
+20 -20
View File
@@ -135,24 +135,24 @@
:replaceFields="notNeedEnTitleTreeField.includes(item.dbFieldName) ? null : {title: isChinese() ? 'title' : 'enTitle'}"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
<!--16、树形弹框选择-->
<tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value || item.fieldShowType === FieldType.TREE_MODAL_SELECT_SEARCH_DIFF.value"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
@nameChange="treeSelectNameChange"
:filedName="item.dbFieldName"
type="checkbox"
:options-href="item.fieldHref"
:nameStr="formInline[item.dbFieldName + '_dictText']"
:dict-id="item.dictId"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
<!-- <tree-data-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value || item.fieldShowType === FieldType.TREE_MODAL_SELECT_SEARCH_DIFF.value"-->
<!-- :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
<!-- v-model="formInline[item.dbFieldName]"-->
<!-- :fieldName="item.dbFieldName"-->
<!-- :nameStr="formInline[item.dbFieldName + '_dictText']"-->
<!-- @nameChange="treeDataSelectNameChange"-->
<!-- :optionsHref="item.fieldHref"-->
<!-- :dict-id="item.dictId"/>-->
<!-- <tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value || item.fieldShowType === FieldType.TREE_MODAL_SELECT_SEARCH_DIFF.value"-->
<!-- :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
<!-- v-model="formInline[item.dbFieldName]"-->
<!-- @nameChange="treeSelectNameChange"-->
<!-- :filedName="item.dbFieldName"-->
<!-- type="checkbox"-->
<!-- :options-href="item.fieldHref"-->
<!-- :nameStr="formInline[item.dbFieldName + '_dictText']"-->
<!-- :dict-id="item.dictId"-->
<!-- :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />-->
<tree-data-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value || item.fieldShowType === FieldType.TREE_MODAL_SELECT_SEARCH_DIFF.value"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
:fieldName="item.dbFieldName"
:nameStr="formInline[item.dbFieldName + '_dictText']"
@nameChange="treeDataSelectNameChange"
:optionsHref="item.treeFirstHref"
:dict-id="item.dictId"/>
</a-form-model-item>
</div>
</template>
@@ -184,12 +184,12 @@ import TreeSelection from '../selection/TreeSelection'
import STreeSelect from '../STreeSelect'
import { isHasPermission } from '../../utils/hasPermission'
import { mapGetters } from 'vuex'
// import TreeDataSelection from '../selection/TreeDataSelection'
import TreeDataSelection from '../selection/TreeDataSelection'
export default {
name: 'AddForm',
components: {
// TreeDataSelection,
TreeDataSelection,
UserSelection,
JMultipleDatePicker,
StandardSelection,
src/components/selection/TreeDataSelectModal.vue
+491
View File
@@ -0,0 +1,491 @@
<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-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"
:loadData="loadData"
:expandedKeys="expandedKeys"
:checkedKeys="checkedKeys"
: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>
</div>
<p class="modal-content-title">{{ $t('treeSelection.selectedData') }}</p>
<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 />
<!--底部父子关联操作和确认取消按钮-->
<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(1)">{{ $t('parentChildConnection') }}</a-menu-item>-->
<!-- <a-menu-item key="2" @click="switchCheckStrictly(2)">{{ $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('cancelConnection') : this.$t('parentChildConnection')
}
},
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: 'id' }
this.lazyLoadHref = '/laws/standard/partName/getChild'
this.searchFieldName = 'nodeName'
this.lazyLoadPidFieldName = 'dictItemId'
} 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,
parentChildRelate: true, // 父子节点是否关联
autoExpandParent: false, // 是否自动展开父节点
treeData: [],
expandedKeys: [],
checkedKeys: [],
checkedRows: [],
selectedKeys: [],
searchValue: '', // 查询框内容
replaceFields: {},
dataSourceRight: [],
lazyLoadHref: '', // 懒加载接口
searchFieldName: '', // 查询传的字段名
lazyLoadPidFieldName: '' // 懒加载传父级的字段名
}
},
methods: {
show () {
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)
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 = []
}
}
},
onExpand (expandedKeys) {
this.expandedKeys = expandedKeys
},
// 异步加载
async loadData (node) {
if (node.dataRef.children) {
return
}
this.confirmLoading = true
const params = {}
params.dictId = this.dictId
// 查询条件的名称
if (this.searchValue) {
params[this.searchFieldName] = this.searchValue
}
// 父节点id
params.dictItemId = 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.confirmLoading = false
})
},
handleCancel () {
this.visible = false
},
close () {
this.visible = false
this.checkedKeys = []
this.expandedKeys = []
this.dataSourceRight = []
this.treeData = []
this.searchValue = ''
},
onSearch (value) {
this.searchValue = value
this.autoExpandParent = true
this.getTreeData()
},
// 设置树只能选第三级
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.confirmLoading = true
const params = {}
params.dictId = this.dictId
getAction(this.optionsHref, params).then(res => {
if (res.success) {
this.treeData = res.result.records || res.result
}
}).finally(() => {
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
}
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) {
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))
}
})
}
}
}
</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(0, 100, 250, 0.08);
border-radius: 4px 4px 4px 4px;
opacity: 1;
color: @primary-color;
white-space: nowrap;
/deep/ .anticon {
margin-left: 4px;
}
}
}
</style>
src/components/selection/TreeDataSelection.vue
+145
View File
@@ -0,0 +1,145 @@
<template>
<div class="components-input-demo-presuffix">
<div class="user-organ-wrap">
<a-input class="user-input" @click="openModal" :placeholder="placeholder" v-model="nameStr" :title="nameStr" readOnly>
<a-icon v-if="nameStr" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
</a-input>
<a-button type="primary" class="button-box" @click="openModal" :disabled="disabled" v-if="showBtn && !disabled">
{{ $t('select') }}
</a-button>
</div>
<tree-data-select-modal
ref="selectModal"
:checkable="checkable"
:value="value"
:dict-id="dictId"
v-bind="$attrs"
:options-href="optionsHref"
@change="handleChange"
@nameChange="nameChange"
@listChange="listChange"/>
</div>
</template>
<script>
import TreeDataSelectModal from './TreeDataSelectModal'
export default {
name: 'TreeDataSelection',
components: { TreeDataSelectModal },
props: {
checkable: { // 是否多选
type: Boolean,
required: false,
default: true
},
value: {
type: String,
required: false
},
disabled: {
type: Boolean,
required: false,
default: false
},
// 获取数据的接口
optionsHref: {
type: String,
required: false,
default: ''
},
// 名称字符串
nameStr: {
type: String,
required: false,
default: ''
},
fieldName: {
type: String,
required: false,
default: ''
},
dictId: {
type: String,
required: false,
default: ''
},
showBtn: {
type: Boolean,
required: false,
default: true
},
placeholder: {
type: String,
default: ''
}
},
watch: {
nameStr: {
immediate: true,
handler (val) {
console.log('----------nameStr', val)
}
}
},
data () {
return {
visible: false,
confirmLoading: false
}
},
methods: {
openModal () {
this.$refs.selectModal.show()
},
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.handleChange('')
this.nameChange('')
this.listChange([])
}
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style scoped lang="less">
.user-organ-wrap {
width: 100%;
position: relative;
display: flex;
align-items: center;
//height: 39.98px;
.user-input {
resize: none;
width: calc(100% - 70px);
}
// 因为需要加title，所以不能把鼠标事件去掉
/deep/ .ant-input-disabled {
background: #fff;
color: rgba(0, 0, 0, 0.65);
cursor: default;
}
.button-box {
margin-left: 5px;
}
}
</style>