22 changed files with 877 additions and 75 deletions
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
@ -0,0 +1,190 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-10-17 15:39:19 |
||||
|
@ 备注: 选择人员或角色 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { departments, roles, getDebounceData, getRoleList, getDepartmentList, 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: ()=> [] |
||||
|
}, |
||||
|
isDepartment: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
}); |
||||
|
let emits = defineEmits(['update:visible', 'change']) |
||||
|
let visibleDialog = computed({ |
||||
|
get(){ |
||||
|
return props.visible |
||||
|
}, |
||||
|
set(){ |
||||
|
closeDialog() |
||||
|
} |
||||
|
}) |
||||
|
let checkedRoleList = ref([]) |
||||
|
let checkedEmployessList = ref([]) |
||||
|
let checkedDepartmentList = ref([]) |
||||
|
let activeName = ref('1') |
||||
|
let list = computed(()=> { |
||||
|
// console.log("抄送--->",activeName.value) |
||||
|
if(activeName.value === '2'){ |
||||
|
return [{ |
||||
|
type: 'role', |
||||
|
not: false, |
||||
|
data: roles.value, |
||||
|
isActive: (item)=> $func.toggleClass(checkedRoleList.value, item, 'roleId'), |
||||
|
change: (item)=> $func.toChecked(checkedRoleList.value, item, 'roleId') |
||||
|
}] |
||||
|
}else{ |
||||
|
return [ |
||||
|
{ |
||||
|
isDepartment: props.isDepartment, |
||||
|
type: 'department', |
||||
|
data: departments.value.childDepartments, |
||||
|
isActive: (item)=> $func.toggleClass(checkedDepartmentList.value, item), |
||||
|
change: (item)=> $func.toChecked(checkedDepartmentList.value, item), |
||||
|
next: (item)=> getDepartmentList(item.id) |
||||
|
},{ |
||||
|
type: 'employee', |
||||
|
data: departments.value.employees, |
||||
|
isActive: (item)=> $func.toggleClass(checkedEmployessList.value, item), |
||||
|
change: (item)=> $func.toChecked(checkedEmployessList.value, item), |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}) |
||||
|
let resList = computed(()=>{ |
||||
|
// console.log("list---->data",checkedEmployessList.value) |
||||
|
let data = [{ |
||||
|
type: 'role', |
||||
|
data: checkedRoleList.value, |
||||
|
cancel: (item)=> $func.removeEle(checkedRoleList.value, item, 'roleId') |
||||
|
},{ |
||||
|
type: 'employee', |
||||
|
data: checkedEmployessList.value, |
||||
|
cancel: (item)=> $func.removeEle(checkedEmployessList.value, item) |
||||
|
}] |
||||
|
if(props.isDepartment){ |
||||
|
data.splice(1, 0, { |
||||
|
type: 'department', |
||||
|
data: checkedDepartmentList.value, |
||||
|
cancel: (item)=> $func.removeEle(checkedDepartmentList.value, item) |
||||
|
}) |
||||
|
} |
||||
|
return data |
||||
|
}) |
||||
|
watch(()=> props.visible, (val)=>{ |
||||
|
// console.log("props.data====》",props.data) |
||||
|
if(val){ |
||||
|
activeName.value = "1"; |
||||
|
getDepartmentList(); |
||||
|
searchVal.value = ""; |
||||
|
checkedEmployessList.value = props.data.filter(item=>item.type===1).map(({name,targetId,icon,iconToBase64})=>({ |
||||
|
employeeName: name, |
||||
|
id: targetId, |
||||
|
icon: icon, |
||||
|
iconToBase64: iconToBase64 |
||||
|
})); |
||||
|
checkedRoleList.value = props.data.filter(item=>item.type===2).map(({name,targetId})=>({ |
||||
|
roleName: name, |
||||
|
roleId: targetId |
||||
|
})); |
||||
|
checkedDepartmentList.value = props.data.filter(item=>item.type===3).map(({name,targetId})=>({ |
||||
|
departmentName: name, |
||||
|
id: targetId |
||||
|
})); |
||||
|
} |
||||
|
}); |
||||
|
let total = computed(()=> { |
||||
|
return checkedEmployessList.value.length |
||||
|
+ checkedRoleList.value.length |
||||
|
+ checkedDepartmentList.value.length |
||||
|
}) |
||||
|
|
||||
|
const handleClick = ()=> { |
||||
|
searchVal.value = ""; |
||||
|
if (activeName.value === '1') { |
||||
|
getDepartmentList(); |
||||
|
} else { |
||||
|
getRoleList(); |
||||
|
} |
||||
|
} |
||||
|
const saveDialog = ()=> { |
||||
|
let checkedList = [ |
||||
|
...checkedRoleList.value, |
||||
|
...checkedEmployessList.value, |
||||
|
...checkedDepartmentList.value |
||||
|
].map(item=>({ |
||||
|
type: item.employeeName?1:(item.roleName?2:3), |
||||
|
targetId: item.id || item.roleId, |
||||
|
name: item.employeeName || item.roleName || item.departmentName, |
||||
|
icon: item.icon, |
||||
|
iconToBase64: item.iconToBase64 |
||||
|
})) |
||||
|
// console.log("checkedList-saveDialog-->",checkedList) |
||||
|
emits('change',checkedList) |
||||
|
} |
||||
|
const delList = ()=> { |
||||
|
checkedEmployessList.value = []; |
||||
|
checkedRoleList.value = []; |
||||
|
checkedDepartmentList.value = []; |
||||
|
} |
||||
|
const closeDialog = ()=> { |
||||
|
emits('update:visible', false) |
||||
|
} |
||||
|
onMounted(()=> { |
||||
|
getDepartmentList(); |
||||
|
}) |
||||
|
</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,activeName)"> |
||||
|
<el-tabs v-model="activeName" @tab-change="handleClick"> |
||||
|
<el-tab-pane label="组织架构" name="1"></el-tab-pane> |
||||
|
<el-tab-pane label="角色列表" name="2"></el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<p v-if="activeName ===1 && !searchVal" class="ellipsis tree_nav"> |
||||
|
<span class="ellipsis" @click="getDepartmentList(0)">全部</span> |
||||
|
<span v-for="(item,index) in departments.titleDepartments" :key="index+'a'" class="ellipsis" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
||||
|
</p> |
||||
|
<selectBox :list="list" style="height: 360px;"/> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<selectResult :total="total" :list="resList" @del="delList"/> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
||||
|
<el-button type="primary" @click="saveDialog">确 定</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,103 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 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, |
||||
|
data: roles.value, |
||||
|
isActive: (item) => $func.toggleClass(checkedRoleList.value, item, 'roleId'), |
||||
|
change: (item) => { |
||||
|
checkedRoleList.value = [item] |
||||
|
} |
||||
|
}] |
||||
|
}) |
||||
|
let resList = computed(() => { |
||||
|
return [{ |
||||
|
type: 'role', |
||||
|
data: checkedRoleList.value, |
||||
|
cancel: (item) => $func.removeEle(checkedRoleList.value, item, 'roleId') |
||||
|
}] |
||||
|
}) |
||||
|
let visibleDialog = computed({ |
||||
|
get() { |
||||
|
return props.visible |
||||
|
}, |
||||
|
set(val) { |
||||
|
closeDialog() |
||||
|
} |
||||
|
}) |
||||
|
watch(() => props.visible, (val) => { |
||||
|
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 => ({ |
||||
|
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> |
||||
@ -0,0 +1,121 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-10-16 08:36:15 |
||||
|
@ 备注: 通用左侧选择 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
defineProps({ |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<ul class="select-box"> |
||||
|
<template v-for="(elem, i) in list" :key="i"> |
||||
|
<!--角色列表遍历--> |
||||
|
<template v-if="elem.type === 'role'"> |
||||
|
<li v-for="item in elem.data" :key="item.roleId" class="check_box" :class="{not: !elem.isDepartment}"> |
||||
|
<div :class="elem.isActive(item) && 'active'"> |
||||
|
<a :title="item.departmentNames" @click="elem.change(item)"> |
||||
|
|
||||
|
<img src="@/assets/images/icon_role.png">{{item.roleName}} |
||||
|
</a> |
||||
|
</div> |
||||
|
</li> |
||||
|
</template> |
||||
|
<!--行政组织遍历--> |
||||
|
<template v-if="elem.type === 'department'"> |
||||
|
<li v-for="item in elem.data" :key="item.id" class="check_box" :class="{not: !elem.isDepartment}"> |
||||
|
<div :class="elem.isActive(item) && 'active'"> |
||||
|
<a v-if="elem.isDepartment" @click="elem.change(item)"> |
||||
|
<span></span><img src="@/assets/images/icon_file.png">{{item.departmentName}} |
||||
|
</a> |
||||
|
<a v-else><img src="@/assets/images/icon_file.png">{{item.departmentName}}</a> |
||||
|
<i @click="elem.next(item)">下级</i> |
||||
|
</div> |
||||
|
</li> |
||||
|
</template> |
||||
|
<!--人员信息遍历--> |
||||
|
<template v-if="elem.type === 'employee'"> |
||||
|
<li v-for="item in elem.data" :key="item.id" class="check_box" :class="{not: !elem.isDepartment}"> |
||||
|
<div :class="elem.isActive(item) && 'active'"> |
||||
|
<a :title="item.departmentNames" @click="elem.change(item)"> |
||||
|
<span></span><img v-if="item.icon != ''" :src="item.icon"> |
||||
|
<img v-if="item.icon == '' && item.iconToBase64 != ''" :src="item.iconToBase64"> |
||||
|
<img v-if="item.icon == '' && item.iconToBase64 == ''" src="@/assets/images/icon_people.png"> |
||||
|
{{item.employeeName}} |
||||
|
</a> |
||||
|
</div> |
||||
|
</li> |
||||
|
</template> |
||||
|
</template> |
||||
|
</ul> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.select-box { |
||||
|
height: 420px; |
||||
|
overflow-y: auto; |
||||
|
li{ |
||||
|
padding: 5px 0; |
||||
|
|
||||
|
|
||||
|
div{ |
||||
|
display: flex; |
||||
|
box-sizing: border-box; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
i{ |
||||
|
padding-left: 24px; |
||||
|
padding-right: 10px; |
||||
|
color: #3195f8; |
||||
|
cursor: pointer; |
||||
|
border-left: 1px solid rgb(238, 238, 238); |
||||
|
background: url("@/assets/images/next_level_active.png") no-repeat 10px center; |
||||
|
} |
||||
|
a::before{ |
||||
|
border: none; |
||||
|
} |
||||
|
span{ |
||||
|
display:inline-block; |
||||
|
width:15px; |
||||
|
height:15px; |
||||
|
background: url("@/assets/images/checkbox.png"); |
||||
|
background-size:cover; |
||||
|
} |
||||
|
a { |
||||
|
img{ |
||||
|
margin-left:5px; |
||||
|
width: 14px; |
||||
|
vertical-align: middle; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
div.active{ |
||||
|
a{ |
||||
|
color: rgb(197, 197, 197); |
||||
|
img{ |
||||
|
margin-left:5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
i{ |
||||
|
color: rgb(197, 197, 197); |
||||
|
background-image: url("@/assets/images/next_level.png"); |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
span{ |
||||
|
display:inline-block; |
||||
|
width:15px; |
||||
|
height:15px; |
||||
|
background: url("@/assets/images/checkbox_true.png"); |
||||
|
background-size:cover; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,14 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-10-18 09:02:53 |
||||
|
@ 备注: 工作流画板 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<div></div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue