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