You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.7 KiB
92 lines
2.7 KiB
3 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2023-03-21 15:10:02
|
||
|
|
@ 备注: 角色弹窗
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<el-dialog title="选择角色" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person">
|
||
|
|
<div class="person_body clear">
|
||
|
|
<div class="person_tree l">
|
||
|
|
<input type="text" placeholder="搜索角色" v-model="searchVal" @input="getDebounceData($event,2)">
|
||
|
|
<selectBox :list="list" />
|
||
|
|
</div>
|
||
|
|
<selectResult :total="total" @del="delList" :list="resList"/>
|
||
|
|
</div>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click="$emit('update:visible',false)">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="saveDialog">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import selectBox from '../selectBox.vue';
|
||
|
|
import selectResult from '../selectResult.vue';
|
||
|
|
import mixins from './mixins'
|
||
|
|
export default {
|
||
|
|
components: { selectBox, selectResult },
|
||
|
|
mixins: [mixins],
|
||
|
|
props: ['visible', 'data'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
checkedRoleList: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
visible(val) {
|
||
|
|
this.visibleDialog = this.visible
|
||
|
|
if (val) {
|
||
|
|
this.getRoleList();
|
||
|
|
this.searchVal = "";
|
||
|
|
this.checkedRoleList = this.data.map(({ name, targetId }) => ({
|
||
|
|
roleName: name,
|
||
|
|
roleId: targetId
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
visibleDialog(val) {
|
||
|
|
this.$emit('update:visible', val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
total() {
|
||
|
|
return this.checkedRoleList.length
|
||
|
|
},
|
||
|
|
list() {
|
||
|
|
return [{
|
||
|
|
type: 'role',
|
||
|
|
not: true,
|
||
|
|
data: this.roles,
|
||
|
|
isActive: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'roleId'),
|
||
|
|
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||
|
|
change: (item) => this.checkedRoleList = [item]
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
resList() {
|
||
|
|
return [{
|
||
|
|
type: 'role',
|
||
|
|
data: this.checkedRoleList,
|
||
|
|
cancel: (item) => this.$func.removeEle(this.checkedRoleList, item, 'roleId')
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
saveDialog() {
|
||
|
|
let checkedList = this.checkedRoleList.map(item => ({
|
||
|
|
type: 2,
|
||
|
|
targetId: item.roleId,
|
||
|
|
name: item.roleName
|
||
|
|
}))
|
||
|
|
this.$emit('change', checkedList)
|
||
|
|
},
|
||
|
|
delList() {
|
||
|
|
this.checkedRoleList = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang='less'>
|
||
|
|
|
||
|
|
</style>
|