[update] 修改选择用户和组织机构组件

This commit is contained in:
lideqin
2023-08-29 18:57:24 +08:00
parent fecd8c01cc
commit 9c9193a78e
2 changed files with 62 additions and 21 deletions
@@ -15,8 +15,8 @@
:value="checkedValue"
@click="selectClick"
>
<a-select-option v-for="(item, index) in selectType" :key="index">
{{ item }}
<a-select-option v-for="(item) in selectOptions" :key="item.key">
{{ item.title }}
</a-select-option>
</a-select>
<a-button type="primary" class="button-box" @click="selectClick">
@@ -50,19 +50,20 @@ export default {
type: Object,
default: () => {
return {
organ: '',
user: ''
organ: [],
user: []
}
}
}
},
mounted () {
this.checkedValue = this.value.map(item => item.value)
this.selectOptions = this.value.organ.concat(this.value.user)
this.checkedValue = this.value.organ.concat(this.value.user).map(item => item.key)
},
data () {
return {
checkedValue: [],
selectValue: []
selectOptions: [] // 下拉框数据,为了回显
}
},
methods: {
@@ -70,13 +71,26 @@ export default {
this.$refs.selectModal.open()
},
selectChange (arrOne, arrTwo) {
console.log(arrOne, arrTwo)
if (this.selectType === 'all') {
this.selectValue = [...arrOne, ...arrTwo]
this.selectOptions = arrOne.concat(arrTwo)
this.$emit('change', {
organ: arrOne,
user: arrTwo
})
} else {
this.selectValue = arrOne
this.selectOptions = arrOne
if (this.selectType === 'organ') {
this.$emit('change', {
organ: arrOne
})
} else {
this.$emit('change', {
user: arrOne
})
}
}
this.checkedValue = this.selectValue.map(item => item.value)
this.$emit('change', this.selectType)
this.checkedValue = this.selectOptions.map(item => item.key)
}
},
model: {
@@ -73,12 +73,12 @@
<a-table
v-if="switchValue === 'organ'"
:columns="columnsOrgan"
rowKey="id"
rowKey="key"
bordered
:scroll="{x: 500}"
:data-source="dataSourceOrgan"
:pagination="ipaginationOrgan"
:row-selection="{ selectedRowKeys: selectedRowKeysOrgan, onChange: onSelectChangeOrgan, getCheckboxProps: getCheckboxPropsOrgan, type: type }"
:row-selection="{ selectedRowKeys: selectedRowKeysOrgan, onChange: onSelectChangeOrgan, type: type }"
:loading="loadingLeft"
@change="organLeftTableChange">
</a-table>
@@ -90,7 +90,7 @@
:scroll="{x: 500}"
:data-source="dataSourceUser"
:pagination="ipaginationUser"
:row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser, getCheckboxProps: getCheckboxPropsUser, type: type }"
:row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser, type: type }"
:loading="loadingLeft"
@change="userLeftTableChange">
</a-table>
@@ -102,7 +102,8 @@
<a-table
v-if="switchValue === 'organ'"
:columns="columnsOrganRight"
rowKey="id"
rowKey="key"
:pagination="false"
bordered
:scroll="{x: 300}"
:loading="loadingRight"
@@ -115,6 +116,7 @@
v-else-if="switchValue === 'user'"
:columns="columnsOrganRight"
rowKey="id"
:pagination="false"
bordered
:scroll="{x: 300}"
:loading="loadingRight"
@@ -378,7 +380,13 @@ export default {
this.loadDataOrgan()
return
}
this.dataSourceOrgan = res.result || []
this.dataSourceOrgan = res.result.map(item => {
return {
key: item.key,
parentId: item.parentId,
title: item.title
}
}) || []
this.ipaginationOrgan.total = res.result.total
} else {
this.$message.warn(res.message)
@@ -389,9 +397,18 @@ export default {
},
// 组织机构左侧树的选择
onSelectChangeOrgan (selectedRowKeys, selectedRows) {
this.selectedRowKeysOrgan = selectedRows
this.selectedRowKeysOrgan = selectedRowKeys
this.selectedRowsOrgan = selectedRows
this.dataSourceOrganRight.map(selectedRows)
if (this.type === 'checkbox') {
for (const rowIndex in selectedRows) {
if (!this.dataSourceOrganRight.find(item => item.key === selectedRows[rowIndex].key)) {
// 右侧不存在,追加到右侧表格
this.dataSourceOrganRight.push(selectedRows[rowIndex])
}
}
} else {
this.dataSourceOrganRight = selectedRows
}
},
// 组织结构左侧树的复选框状态
getCheckboxPropsOrgan (record) {
@@ -457,9 +474,18 @@ export default {
},
// 用户左侧表的选择
onSelectChangeUser (selectedRowKeys, selectedRows) {
this.selectedRowKeysUser = selectedRows
this.selectedRowKeysUser = selectedRowKeys
this.selectedRowsUser = selectedRows
this.dataSourceUserRight.map(selectedRows)
if (this.type === 'checkbox') {
for (const rowIndex in selectedRows) {
if (!this.dataSourceUserRight.find(item => item.id === selectedRows[rowIndex].id)) {
// 右侧不存在,追加到右侧表格
this.dataSourceUserRight.push(selectedRows[rowIndex])
}
}
} else {
this.dataSourceUserRight = selectedRows
}
},
// 用户左侧表的复选框状态
getCheckboxPropsUser (record) {
@@ -499,14 +525,15 @@ export default {
} else {
this.$emit('change', this.dataSourceUserRight)
}
this.visible = false
},
handleCancel () {
this.close()
},
close () {
this.visible = false
this.dataSourceOrgan = []
this.dataSourceUser = []
// this.dataSourceOrgan = []
// this.dataSourceUser = []
this.dataSourceOrganRight = []
this.dataSourceUserRight = []
this.selectedRowKeysOrgan = []