-
+
@@ -36,15 +36,16 @@
已选 ({{ selected.length }})
@@ -108,12 +109,22 @@ export default {
modelValue: { type: Array, default: () => [] },
type: { type: [String, Number], default: 1 },
height: { type: [String, Number], default: 280 },
- width: { type: [String, Number], default: 600 },
+ width: { type: [String, Number], default: '100%' },
+ datatype: { type: [String, Number], default: 'id' },
+ config: {
+ type: Object, default: () => ({
+ config: []
+ })
+ },
},
watch: {
// 当内部 selected 数据变化时,发出一个更新事件给父组件
selectedIds(newVal) {
- this.$emit('update:modelValue', newVal);
+ if (this.datatype == 'id') {
+ this.$emit('update:modelValue', newVal);
+ return true;
+ }
+ this.$emit('update:modelValue', this.selected);
},
},
computed: {
@@ -128,7 +139,8 @@ export default {
}
},
mounted() {
- this.value = this.modelValue;
+ this.userProps = Object.assign({}, config.user.props, this.config.userProps || {});
+ this.groupProps = Object.assign({}, config.group.props, this.config.groupProps || {});
this.open()
},
methods: {
@@ -154,16 +166,18 @@ export default {
async getUser() {
this.showUserloading = true;
var params = {
- [config.user.request.keyword]: this.keyword || null,
- [config.user.request.groupid]: this.groupid || null,
- [config.user.request.page]: this.currentPage,
- [config.user.request.limit]: this.limit
+ [this.config.keyword || config.user.request.keyword]: this.keyword || null,
+ [this.config.groupid || config.user.request.groupid]: this.groupid || null,
+ [this.config.page || config.user.request.page]: this.currentPage,
+ [this.config.limit || config.user.request.limit]: this.limit
}
- var res = await this.$http.get('user/index/lists', params);
+ var res = await this.$http.get(this.config.url || 'user/index/lists', params);
this.showUserloading = false;
this.user = config.user.parseData(res).rows;
this.total = config.user.parseData(res).total || 0;
this.$refs.userScrollbar.setScrollTop(0)
+
+ this.selected = this.modelValue
},
//获取角色
async getRole() {
@@ -171,8 +185,6 @@ export default {
var res = await this.$http.get('user/group/roleList', { type: 'system' });
this.showGrouploading = false;
this.role = res.data
-
-
// 使用filter方法筛选出具有特定ID的对象
this.selected = this.role.filter(item => this.modelValue.includes(item.id)).map(item => ({
id: item[config.role.props.key],
@@ -191,11 +203,11 @@ export default {
userClick(data, checked) {
if (checked) {
this.selected.push({
- id: data[config.user.props.key],
- name: data[config.user.props.label]
+ id: data[this.userProps.key],
+ name: data[this.userProps.label]
})
} else {
- this.selected = this.selected.filter(item => item.id != data[config.user.props.key])
+ this.selected = this.selected.filter(item => item.id != data[this.userProps.key])
}
},
//用户分页点击
@@ -209,14 +221,16 @@ export default {
this.currentPage = 1
this.getUser()
},
+ // 子组件删除
+ setCheckedKeys() {
+ this.$nextTick(() => {
+ this.type == 1 ? this.$refs.userTree.setCheckedKeys(this.selectedIds) : this.$refs.groupTree.setCheckedKeys(this.selectedIds)
+ })
+ },
//删除已选
deleteSelected(index) {
this.selected.splice(index, 1);
- if (this.type == 1) {
- this.$refs.userTree.setCheckedKeys(this.selectedIds)
- } else if (this.type == 2) {
- this.$refs.groupTree.setCheckedKeys(this.selectedIds)
- }
+ this.setCheckedKeys()
},
//角色点击
roleClick(data, checked) {
@@ -245,7 +259,8 @@ export default {
}
.x-user-select__left {
- width: calc((100%*0.7 - 10px));
+ min-width: 320px;
+ flex: none;
}
.x-user-select__right {
@@ -264,13 +279,13 @@ export default {
}
.x-user-select__tree {
- width: 50%;
+ width: 40%;
height: 100%;
border-right: 1px solid var(--el-border-color-light);
}
.x-user-select__user {
- width: 50%;
+ width: 60%;
height: 100%;
display: flex;
flex-direction: column;
@@ -308,7 +323,7 @@ export default {
}
.x-user-select__selected {
- width: calc((100%*0.3 - 20px));
+ width: 100%;
border: 1px solid var(--el-border-color-light);
background: var(--el-color-white);
}
@@ -368,7 +383,7 @@ export default {
}
.x-user-select-role .x-user-select__left {
- width: calc((100% - 20px)/2);
+ min-width: 200px;
}
.x-user-select-role .x-user-select__tree {
@@ -377,7 +392,7 @@ export default {
}
.x-user-select-role .x-user-select__selected {
- width: calc((100% - 20px)/2);
+ width: 100%;
}
.x-user-select-role .x-user-select__select {