[update] 修改选择用户和组织机构组件
This commit is contained in:
@@ -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 = []
|
||||
|
||||
Reference in New Issue
Block a user