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.
104 lines
2.6 KiB
104 lines
2.6 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-10-17 13:20:34
|
|
@ 备注: 选择角色
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { roles, getDebounceData, getRoleList, searchVal } from '@/components/workflow/dialog/common'
|
|
import $func from '@/utils/workflow/index'
|
|
//引入样式
|
|
import '@/styles/workflowcss/dialog.scss'
|
|
//引入页面
|
|
import selectBox from '@/components/workflow/selectBoxs.vue'
|
|
import selectResult from '@/components/workflow/selectResult.vue'
|
|
|
|
let props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
let checkedRoleList = ref([])
|
|
let emits = defineEmits(['update:visible', 'change'])
|
|
let list = computed(() => {
|
|
return [{
|
|
type: 'role',
|
|
not: true,
|
|
isDepartment:false,
|
|
data: roles.value,
|
|
isActive: (item:any) => $func.toggleClass(checkedRoleList.value, item, 'roleId'),
|
|
change: (item:any) => {
|
|
checkedRoleList.value = [item]
|
|
}
|
|
}]
|
|
})
|
|
let resList = computed(() => {
|
|
return [{
|
|
type: 'role',
|
|
data: checkedRoleList.value,
|
|
cancel: (item:any) => $func.removeEle(checkedRoleList.value, item, 'roleId')
|
|
}]
|
|
})
|
|
let visibleDialog = computed({
|
|
get() {
|
|
return props.visible
|
|
},
|
|
set(val) {
|
|
closeDialog()
|
|
}
|
|
})
|
|
watch(() => props.visible, (val:any) => {
|
|
if (val) {
|
|
getRoleList();
|
|
searchVal.value = "";
|
|
checkedRoleList.value = props.data.map(({ name, targetId }) => ({
|
|
roleName: name,
|
|
roleId: targetId
|
|
}));
|
|
}
|
|
})
|
|
let total = computed(() => checkedRoleList.value.length)
|
|
const saveDialog = () => {
|
|
let checkedList = checkedRoleList.value.map((item:any) => ({
|
|
type: 2,
|
|
targetId: item.roleId,
|
|
name: item.roleName
|
|
}))
|
|
emits('change', checkedList)
|
|
}
|
|
const delList = () => {
|
|
checkedRoleList.value = [];
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
emits('update:visible', false)
|
|
}
|
|
</script>
|
|
<template>
|
|
<el-dialog v-model="visibleDialog" title="选择角色" :width="600" append-to-body class="promoter_person">
|
|
<div class="person_body clear">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div class="person_tree l">
|
|
<input v-model="searchVal" type="text" placeholder="搜索角色" @input="getDebounceData($event,2)">
|
|
<selectBox :list="list"/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<selectResult :list="resList" :total="total" @del="delList"/>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<template #footer>
|
|
<el-button @click="closeDialog">取 消</el-button>
|
|
<el-button type="primary" @click="saveDialog">确 定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
|
|
</style>
|
|
|