21 changed files with 43365 additions and 9520 deletions
File diff suppressed because it is too large
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<div class="add-node-btn-box"> |
|||
<div class="add-node-btn"> |
|||
<el-popover placement="right-start" v-model="visible" width="auto"> |
|||
<div class="add-node-popover-body"> |
|||
<a class="add-node-popover-item approver" @click="addType(1)"> |
|||
<div class="item-wrapper"> |
|||
<span class="iconfont"></span> |
|||
</div> |
|||
<p>审批人</p> |
|||
</a> |
|||
<a class="add-node-popover-item notifier" @click="addType(2)"> |
|||
<div class="item-wrapper"> |
|||
<span class="iconfont"></span> |
|||
</div> |
|||
<p>抄送人</p> |
|||
</a> |
|||
<a class="add-node-popover-item condition" @click="addType(4)"> |
|||
<div class="item-wrapper"> |
|||
<span class="iconfont"></span> |
|||
</div> |
|||
<p>条件分支</p> |
|||
</a> |
|||
</div> |
|||
<template #reference> |
|||
<button class="btn" type="button"> |
|||
<span class="iconfont"></span> |
|||
</button> |
|||
</template> |
|||
</el-popover> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { ref } from 'vue' |
|||
let props = defineProps({ |
|||
childNodeP: { |
|||
type: Object, |
|||
default: ()=> ({}) |
|||
} |
|||
}) |
|||
let emits = defineEmits(['update:childNodeP']) |
|||
let visible = ref(false) |
|||
const addType = (type)=> { |
|||
visible.value = false; |
|||
if (type != 4) { |
|||
var data; |
|||
if (type == 1) { |
|||
data = { |
|||
"nodeName": "审核人", |
|||
"error": true, |
|||
"type": 1, |
|||
"settype": 1, |
|||
"selectMode": 0, |
|||
"selectRange": 0, |
|||
"directorLevel": 1, |
|||
"examineMode": 1, |
|||
"noHanderAction": 1, |
|||
"examineEndDirectorLevel": 0, |
|||
"childNode": props.childNodeP, |
|||
"nodeUserList": [] |
|||
} |
|||
} else if (type == 2) { |
|||
data = { |
|||
"nodeName": "抄送人", |
|||
"type": 2, |
|||
"ccSelfSelectFlag": 1, |
|||
"childNode": props.childNodeP, |
|||
"nodeUserList": [] |
|||
} |
|||
} |
|||
emits("update:childNodeP", data) |
|||
} else { |
|||
emits("update:childNodeP", { |
|||
"nodeName": "路由", |
|||
"type": 4, |
|||
"childNode": null, |
|||
"conditionNodes": [{ |
|||
"nodeName": "条件1", |
|||
"error": true, |
|||
"type": 3, |
|||
"priorityLevel": 1, |
|||
"conditionList": [], |
|||
"nodeUserList": [], |
|||
"childNode": props.childNodeP, |
|||
}, { |
|||
"nodeName": "条件2", |
|||
"type": 3, |
|||
"priorityLevel": 2, |
|||
"conditionList": [], |
|||
"nodeUserList": [], |
|||
"childNode": null |
|||
}] |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="less"> |
|||
.add-node-btn-box { |
|||
width: 240px; |
|||
display: -webkit-inline-box; |
|||
display: -ms-inline-flexbox; |
|||
display: inline-flex; |
|||
-ms-flex-negative: 0; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
-ms-flex-positive: 1; |
|||
position: relative; |
|||
&:before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: -1; |
|||
margin: auto; |
|||
width: 2px; |
|||
height: 100%; |
|||
background-color: #cacaca |
|||
} |
|||
.add-node-btn { |
|||
user-select: none; |
|||
width: 240px; |
|||
padding: 20px 0 32px; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
flex-grow: 1; |
|||
.btn { |
|||
outline: none; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); |
|||
width: 30px; |
|||
height: 30px; |
|||
background: #3296fa; |
|||
border-radius: 50%; |
|||
position: relative; |
|||
border: none; |
|||
line-height: 30px; |
|||
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); |
|||
transition: all .3s cubic-bezier(.645, .045, .355, 1); |
|||
.iconfont { |
|||
color: #fff; |
|||
font-size: 16px |
|||
} |
|||
&:hover { |
|||
transform: scale(1.3); |
|||
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, .1) |
|||
} |
|||
&:active { |
|||
transform: none; |
|||
background: #1e83e9; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="less"> |
|||
.add-node-popover-body { |
|||
display: flex; |
|||
.add-node-popover-item { |
|||
margin-right: 10px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
flex: 1; |
|||
color: #191f25!important; |
|||
.item-wrapper { |
|||
user-select: none; |
|||
display: inline-block; |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-bottom: 5px; |
|||
background: #fff; |
|||
border: 1px solid #e2e2e2; |
|||
border-radius: 50%; |
|||
transition: all .3s cubic-bezier(.645, .045, .355, 1); |
|||
.iconfont { |
|||
font-size: 35px; |
|||
line-height: 80px |
|||
} |
|||
} |
|||
&.approver{ |
|||
.item-wrapper { |
|||
color: #ff943e |
|||
} |
|||
} |
|||
&.notifier{ |
|||
.item-wrapper { |
|||
color: #3296fa |
|||
} |
|||
} |
|||
&.condition{ |
|||
.item-wrapper { |
|||
color: #15bc83 |
|||
} |
|||
} |
|||
&:hover{ |
|||
.item-wrapper { |
|||
background: #3296fa; |
|||
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, .4) |
|||
} |
|||
.iconfont { |
|||
color: #fff |
|||
} |
|||
} |
|||
&:active{ |
|||
.item-wrapper { |
|||
box-shadow: none; |
|||
background: #eaeaea |
|||
} |
|||
.iconfont { |
|||
color: inherit |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,46 @@ |
|||
/* |
|||
* @Date: 2022-08-29 14:00:42 |
|||
* @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2023-03-29 15:53:05 |
|||
* @FilePath: /Workflow-Vue3/src/components/dialog/common.js |
|||
*/ |
|||
|
|||
import { getRoles, getDepartments, getEmployees } from '@/api/index.js' |
|||
import $func from '@/utils/index.js' |
|||
import { ref } from 'vue' |
|||
export let searchVal = ref('') |
|||
export let departments = ref({ |
|||
titleDepartments: [], |
|||
childDepartments: [], |
|||
employees: [], |
|||
}) |
|||
export let roles = ref({}) |
|||
export let getRoleList = async () => { |
|||
let { data: { list } } = await getRoles() |
|||
roles.value = list; |
|||
} |
|||
export let getDepartmentList = async (parentId = 0) => { |
|||
let { data } = await getDepartments({ parentId }) |
|||
departments.value = data; |
|||
} |
|||
export let getDebounceData = (event, type = 1) => { |
|||
$func.debounce(async () => { |
|||
if (event.target.value) { |
|||
let data = { |
|||
searchName: event.target.value, |
|||
pageNum: 1, |
|||
pageSize: 30 |
|||
} |
|||
if (type == 1) { |
|||
departments.value.childDepartments = []; |
|||
let res = await getEmployees(data) |
|||
departments.value.employees = res.data.list |
|||
} else { |
|||
let res = await getRoles(data) |
|||
roles.value = res.data.list |
|||
} |
|||
} else { |
|||
type == 1 ? await getDepartmentList() : await getRoleList(); |
|||
} |
|||
})() |
|||
} |
|||
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<el-dialog title="选择成员" v-model="visibleDialog" :width="600" 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)"> |
|||
<p class="ellipsis tree_nav" v-if="!searchVal"> |
|||
<span @click="getDepartmentList(0)" class="ellipsis">天下</span> |
|||
<span v-for="(item,index) in departments.titleDepartments" class="ellipsis" |
|||
:key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
|||
</p> |
|||
<selectBox :list="list"/> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<template #footer> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import { computed, watch, ref } from 'vue'; |
|||
import { departments, getDebounceData, getDepartmentList, searchVal } from './common' |
|||
import $func from '@/utils/index.js' |
|||
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 checkedDepartmentList = ref([]) |
|||
let checkedEmployessList = ref([]) |
|||
let list = computed(()=> { |
|||
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(()=>{ |
|||
let data = [{ |
|||
type: 'employee', |
|||
data: checkedEmployessList.value, |
|||
cancel: (item)=> $func.removeEle(checkedEmployessList.value, item) |
|||
}] |
|||
if(props.isDepartment){ |
|||
data.unshift({ |
|||
type: 'department', |
|||
data: checkedDepartmentList.value, |
|||
cancel: (item)=> $func.removeEle(checkedDepartmentList.value, item) |
|||
}) |
|||
} |
|||
return data |
|||
}) |
|||
watch(()=> props.visible, (val)=>{ |
|||
if(val){ |
|||
getDepartmentList(); |
|||
searchVal.value = ""; |
|||
checkedEmployessList.value = props.data.filter(item=>item.type===1).map(({name,targetId})=>({ |
|||
employeeName: name, |
|||
id: targetId |
|||
})); |
|||
checkedDepartmentList.value = props.data.filter(item=>item.type===3).map(({name,targetId})=>({ |
|||
departmentName: name, |
|||
id: targetId |
|||
})); |
|||
} |
|||
}) |
|||
|
|||
const closeDialog = ()=> { |
|||
emits('update:visible', false) |
|||
} |
|||
|
|||
let total = computed(()=> checkedDepartmentList.value.length + checkedEmployessList.value.length) |
|||
|
|||
let saveDialog = ()=> { |
|||
let checkedList = [ |
|||
...checkedDepartmentList.value, |
|||
...checkedEmployessList.value |
|||
].map(item=>({ |
|||
type: item.employeeName ? 1: 3, |
|||
targetId: item.id, |
|||
name: item.employeeName || item.departmentName |
|||
})) |
|||
emits('change',checkedList) |
|||
} |
|||
const delList = ()=> { |
|||
checkedDepartmentList.value = []; |
|||
checkedEmployessList.value = [] |
|||
} |
|||
</script> |
|||
<style> |
|||
@import "@/css/dialog.css"; |
|||
</style> |
|||
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<el-dialog title="选择成员" v-model="visibleDialog" :width="600" 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,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 class="ellipsis tree_nav" v-if="activeName === '1' && !searchVal"> |
|||
<span @click="getDepartmentList(0)" class="ellipsis">天下</span> |
|||
<span v-for="(item,index) in departments.titleDepartments" class="ellipsis" |
|||
:key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
|||
</p> |
|||
<selectBox :list="list" style="height: 360px;"/> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<template #footer> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import { computed, watch, ref } from 'vue' |
|||
import $func from '@/utils/index.js' |
|||
import { departments, roles, getDebounceData, getRoleList, getDepartmentList, searchVal } from './common' |
|||
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(()=> { |
|||
if(activeName.value === '2'){ |
|||
return [{ |
|||
type: 'role', |
|||
not: false, |
|||
data: roles.value, |
|||
isActiveItem: (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(()=>{ |
|||
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)=>{ |
|||
if(val){ |
|||
activeName.value = "1"; |
|||
getDepartmentList(); |
|||
searchVal.value = ""; |
|||
checkedEmployessList.value = props.data.filter(item=>item.type===1).map(({name,targetId})=>({ |
|||
employeeName: name, |
|||
id: targetId |
|||
})); |
|||
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 |
|||
})) |
|||
emits('change',checkedList) |
|||
} |
|||
const delList = ()=> { |
|||
checkedEmployessList.value = []; |
|||
checkedRoleList.value = []; |
|||
checkedDepartmentList.value = []; |
|||
} |
|||
const closeDialog = ()=> { |
|||
emits('update:visible', false) |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "@/css/dialog.css"; |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<!-- |
|||
* @Date: 2022-08-25 14:05:59 |
|||
* @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2023-03-29 16:05:54 |
|||
* @FilePath: /Workflow-Vue3/src/components/dialog/errorDialog.vue |
|||
--> |
|||
<template> |
|||
<el-dialog title="提示" v-model="visibleDialog" :width="520"> |
|||
<div class="ant-confirm-body"> |
|||
<i class="anticon anticon-close-circle" style="color: #f00;"></i> |
|||
<span class="ant-confirm-title">当前无法发布</span> |
|||
<div class="ant-confirm-content"> |
|||
<div> |
|||
<p class="error-modal-desc">以下内容不完善，需进行修改</p> |
|||
<div class="error-modal-list"> |
|||
<div class="error-modal-item" v-for="(item,index) in list" :key="index"> |
|||
<div class="error-modal-item-label">流程设计</div> |
|||
<div class="error-modal-item-content">{{item.name}} 未选择{{item.type}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<template #footer> |
|||
<el-button @click="visibleDialog = false">我知道了</el-button> |
|||
<el-button type="primary" @click="visibleDialog = false">前往修改</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed } from 'vue' |
|||
let props = defineProps({ |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
let emits = defineEmits(['update:visible']) |
|||
|
|||
let visibleDialog = computed({ |
|||
get() { |
|||
return props.visible |
|||
}, |
|||
set(val) { |
|||
emits('update:visible', val) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.ant-confirm-body .ant-confirm-title { |
|||
color: rgba(0, 0, 0, .85); |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
line-height: 1.4; |
|||
display: block; |
|||
overflow: hidden |
|||
} |
|||
|
|||
.ant-confirm-body .ant-confirm-content { |
|||
margin-left: 38px; |
|||
font-size: 14px; |
|||
color: rgba(0, 0, 0, .65); |
|||
margin-top: 8px |
|||
} |
|||
|
|||
.ant-confirm-body>.anticon { |
|||
font-size: 22px; |
|||
margin-right: 16px; |
|||
float: left |
|||
} |
|||
</style> |
|||
@ -0,0 +1,96 @@ |
|||
<!-- |
|||
* @Date: 2022-08-25 14:05:59 |
|||
* * @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2023-03-15 14:59:19 |
|||
* @FilePath: /Workflow-Vue3/src/components/dialog/roleDialog.vue |
|||
--> |
|||
<template> |
|||
<el-dialog title="选择角色" v-model="visibleDialog" :width="600" 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> |
|||
<template #footer> |
|||
<el-button @click="closeDialog">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import { computed, watch, ref } from 'vue' |
|||
import $func from '@/utils/index.js' |
|||
import { roles, getDebounceData, getRoleList, searchVal } from './common' |
|||
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> |
|||
|
|||
<style> |
|||
@import "@/css/dialog.css"; |
|||
</style> |
|||
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="审批人设置" v-model="visible" custom-class="set_promoter" :show-close="false" :size="550" :before-close="saveApprover"> |
|||
<div class="demo-drawer__content"> |
|||
<div class="drawer_content"> |
|||
<div class="approver_content"> |
|||
<el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType"> |
|||
<el-radio v-for="({value, label}) in setTypes" :key="value" :label="value">{{label}}</el-radio> |
|||
</el-radio-group> |
|||
<el-button type="primary" @click="addApprover" v-if="approverConfig.settype==1">添加/修改成员</el-button> |
|||
<p class="selected_list" v-if="approverConfig.settype==1"> |
|||
<span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(approverConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="approverConfig.nodeUserList.length!=0" @click="approverConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
</div> |
|||
<div class="approver_manager" v-if="approverConfig.settype==2"> |
|||
<p> |
|||
<span>发起人的：</span> |
|||
<select v-model="approverConfig.directorLevel"> |
|||
<option v-for="item in directorMaxLevel" :value="item" :key="item">{{item==1?'直接':'第'+item+'级'}}主管</option> |
|||
</select> |
|||
</p> |
|||
<p class="tip">找不到主管时，由上级主管代审批</p> |
|||
</div> |
|||
<div class="approver_self" v-if="approverConfig.settype==5"> |
|||
<p>该审批节点设置“发起人自己”后，审批人默认为发起人</p> |
|||
</div> |
|||
<div class="approver_self_select" v-show="approverConfig.settype==4"> |
|||
<el-radio-group v-model="approverConfig.selectMode" style="width: 100%;"> |
|||
<el-radio v-for="({value, label}) in selectModes" :label="value" :key="value">{{label}}</el-radio> |
|||
</el-radio-group> |
|||
<h3>选择范围</h3> |
|||
<el-radio-group v-model="approverConfig.selectRange" style="width: 100%;" @change="changeRange"> |
|||
<el-radio v-for="({value, label}) in selectRanges" :label="value" :key="value">{{label}}</el-radio> |
|||
</el-radio-group> |
|||
<template v-if="approverConfig.selectRange==2||approverConfig.selectRange==3"> |
|||
<el-button type="primary" @click="addApprover" v-if="approverConfig.selectRange==2">添加/修改成员</el-button> |
|||
<el-button type="primary" @click="addRoleApprover" v-else>添加/修改角色</el-button> |
|||
<p class="selected_list"> |
|||
<span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(approverConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" @click="approverConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
</template> |
|||
|
|||
</div> |
|||
<div class="approver_manager" v-if="approverConfig.settype==7"> |
|||
<p>审批终点</p> |
|||
<p style="padding-bottom:20px"> |
|||
<span>发起人的：</span> |
|||
<select v-model="approverConfig.examineEndDirectorLevel"> |
|||
<option v-for="item in directorMaxLevel" :value="item" :key="item">{{item==1?'最高':'第'+item}}层级主管</option> |
|||
</select> |
|||
</p> |
|||
</div> |
|||
<div class="approver_some" v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||(approverConfig.settype==4&&approverConfig.selectMode==2)"> |
|||
<p>多人审批时采用的审批方式</p> |
|||
<el-radio-group v-model="approverConfig.examineMode" class="clear"> |
|||
<el-radio :label="1">依次审批</el-radio> |
|||
<br/> |
|||
<el-radio :label="2" v-if="approverConfig.settype!=2">会签(须所有审批人同意)</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="approver_some" v-if="approverConfig.settype==2||approverConfig.settype==7"> |
|||
<p>审批人为空时</p> |
|||
<el-radio-group v-model="approverConfig.noHanderAction" class="clear"> |
|||
<el-radio :label="1">自动审批通过/不允许发起</el-radio> |
|||
<br/> |
|||
<el-radio :label="2">转交给审核管理员</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveApprover">确 定</el-button> |
|||
<el-button @click="closeDrawer">取 消</el-button> |
|||
</div> |
|||
<employees-dialog |
|||
v-model:visible="approverVisible" |
|||
:data="checkedList" |
|||
@change="sureApprover" |
|||
/> |
|||
<role-dialog |
|||
v-model:visible="approverRoleVisible" |
|||
:data="checkedRoleList" |
|||
@change="sureRoleApprover" |
|||
/> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script setup> |
|||
import {ref, watch, computed} from 'vue' |
|||
import $func from '@/utils/index' |
|||
import { setTypes, selectModes, selectRanges } from '@/utils/const' |
|||
import { mapState, mapMutations } from '@/utils/lib' |
|||
import employeesDialog from '../dialog/employeesDialog.vue' |
|||
import roleDialog from '../dialog/roleDialog.vue' |
|||
|
|||
let props = defineProps({ |
|||
directorMaxLevel: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}); |
|||
let approverConfig = ref({}) |
|||
let approverVisible = ref(false) |
|||
let approverRoleVisible = ref(false) |
|||
let checkedRoleList = ref([]) |
|||
let checkedList = ref([]) |
|||
let { approverConfig1, approverDrawer } = mapState() |
|||
let visible = computed({ |
|||
get(){ |
|||
return approverDrawer.value |
|||
}, |
|||
set(){ |
|||
closeDrawer() |
|||
} |
|||
}) |
|||
watch(approverConfig1, (val)=>{ |
|||
approverConfig.value = val.value |
|||
}) |
|||
let { setApproverConfig, setApprover} = mapMutations() |
|||
let changeRange = ()=> { |
|||
approverConfig.value.nodeUserList = []; |
|||
} |
|||
const changeType = (val)=> { |
|||
approverConfig.value.nodeUserList = []; |
|||
approverConfig.value.examineMode = 1; |
|||
approverConfig.value.noHanderAction = 2; |
|||
if (val == 2) { |
|||
approverConfig.value.directorLevel = 1; |
|||
} else if (val == 4) { |
|||
approverConfig.value.selectMode = 1; |
|||
approverConfig.value.selectRange = 1; |
|||
} else if (val == 7) { |
|||
approverConfig.value.examineEndDirectorLevel = 1 |
|||
} |
|||
} |
|||
const addApprover = ()=> { |
|||
approverVisible.value = true; |
|||
checkedList.value = approverConfig.value.nodeUserList |
|||
} |
|||
const addRoleApprover = ()=> { |
|||
approverRoleVisible.value = true; |
|||
checkedRoleList.value = approverConfig.value.nodeUserList |
|||
} |
|||
const sureApprover = (data)=> { |
|||
approverConfig.value.nodeUserList = data; |
|||
approverVisible.value = false; |
|||
} |
|||
const sureRoleApprover = (data)=> { |
|||
approverConfig.value.nodeUserList = data; |
|||
approverRoleVisible.value = false; |
|||
} |
|||
const saveApprover = ()=> { |
|||
approverConfig.value.error = !$func.setApproverStr(approverConfig.value) |
|||
setApproverConfig({ |
|||
value: approverConfig.value, |
|||
flag: true, |
|||
id: approverConfig1.value.id |
|||
}) |
|||
closeDrawer() |
|||
} |
|||
const closeDrawer = ()=> { |
|||
setApprover(false) |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.set_promoter{ |
|||
.approver_content { |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #f2f2f2; |
|||
} |
|||
.approver_self_select, |
|||
.approver_content{ |
|||
.el-button{ |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
.approver_content, |
|||
.approver_some, |
|||
.approver_self_select{ |
|||
.el-radio-group{ |
|||
display: unset; |
|||
} |
|||
.el-radio{ |
|||
width: 27%; |
|||
margin-bottom: 20px; |
|||
height: 16px; |
|||
} |
|||
} |
|||
.approver_manager p { |
|||
line-height: 32px; |
|||
} |
|||
.approver_manager select { |
|||
width: 420px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
.approver_manager p.tip { |
|||
margin: 10px 0 22px 0; |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
color: #f8642d; |
|||
} |
|||
.approver_self { |
|||
padding: 28px 20px; |
|||
} |
|||
.approver_self_select, |
|||
.approver_manager, |
|||
.approver_content, |
|||
.approver_some { |
|||
padding: 20px 20px 0; |
|||
} |
|||
.approver_manager p:first-of-type, |
|||
.approver_some p { |
|||
line-height: 19px; |
|||
font-size: 14px; |
|||
margin-bottom: 14px; |
|||
} |
|||
.approver_self_select h3 { |
|||
margin: 5px 0 20px; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
line-height: 19px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,363 @@ |
|||
<!-- |
|||
* @Date: 2023-03-15 14:44:17 |
|||
* @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2023-03-29 15:53:11 |
|||
* @FilePath: /Workflow-Vue3/src/components/drawer/conditionDrawer.vue |
|||
--> |
|||
|
|||
<template> |
|||
<el-drawer :append-to-body="true" title="条件设置" v-model="visible" custom-class="condition_copyer" :show-close="false" :size="550" :before-close="saveCondition"> |
|||
<template #header="{ titleId, titleClass }"> |
|||
<h3 :id="titleId" :class="titleClass">条件设置</h3> |
|||
<select v-model="conditionConfig.priorityLevel" class="priority_level"> |
|||
<option v-for="item in conditionsConfig.conditionNodes.length" :value="item" :key="item">优先级{{item}}</option> |
|||
</select> |
|||
</template> |
|||
<div class="demo-drawer__content"> |
|||
<div class="condition_content drawer_content"> |
|||
<p class="tip">当审批单同时满足以下条件时进入此流程</p> |
|||
<ul> |
|||
<li v-for="(item,index) in conditionConfig.conditionList" :key="index"> |
|||
<span class="ellipsis">{{item.type==1 ? '发起人':item.showName}}：</span> |
|||
<div v-if="item.type==1"> |
|||
<p :class="conditionConfig.nodeUserList.length > 0?'selected_list':''" @click.self="addConditionRole" style="cursor:text"> |
|||
<span v-for="(item1,index1) in conditionConfig.nodeUserList" :key="index1"> |
|||
{{item1.name}}<img src="@/assets/images/add-close1.png" @click="$func.removeEle(conditionConfig.nodeUserList,item1,'targetId')"> |
|||
</span> |
|||
<input type="text" placeholder="请选择具体人员/角色/部门" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole"> |
|||
</p> |
|||
</div> |
|||
<div v-else-if="item.columnType == 'String' && item.showType == 3"> |
|||
<p class="check_box"> |
|||
<a :class="$func.toggleStrClass(item,item1.key)&&'active'" @click="toStrChecked(item,item1.key)" |
|||
v-for="(item1,index1) in JSON.parse(item.fixedDownBoxValue)" :key="index1">{{item1.value}}</a> |
|||
</p> |
|||
</div> |
|||
<div v-else> |
|||
<p> |
|||
<select v-model="item.optType" :style="'width:'+(item.optType==6?370:100)+'px'" @change="changeOptType(item)"> |
|||
<option v-for="({value, label}) in optTypes" :value="value" :key="value">{{ label }}</option> |
|||
</select> |
|||
<input v-if="item.optType!=6" type="text" :placeholder="'请输入'+item.showName" v-enter-number="2" v-model="item.zdy1"> |
|||
</p> |
|||
<p v-if="item.optType==6"> |
|||
<input type="text" style="width:75px;" class="mr_10" v-enter-number="2" v-model="item.zdy1"> |
|||
<select style="width:60px;" v-model="item.opt1"> |
|||
<option v-for="({value, label}) in opt1s" :value="value" :key="value">{{ label }}</option> |
|||
</select> |
|||
<span class="ellipsis" style="display:inline-block;width:60px;vertical-align: text-bottom;">{{item.showName}}</span> |
|||
<select style="width:60px;" class="ml_10" v-model="item.opt2"> |
|||
<option v-for="({value, label}) in opt1s" :value="value" :key="value">{{ label }}</option> |
|||
</select> |
|||
<input type="text" style="width:75px;" v-enter-number="2" v-model="item.zdy2"> |
|||
</p> |
|||
</div> |
|||
<a v-if="item.type==1" @click="conditionConfig.nodeUserList= [];$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
<a v-if="item.type==2" @click="$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
</li> |
|||
</ul> |
|||
<el-button type="primary" @click="addCondition">添加条件</el-button> |
|||
<el-dialog title="选择条件" v-model="conditionVisible" :width="480" append-to-body class="condition_list"> |
|||
<p>请选择用来区分审批流程的条件字段</p> |
|||
<p class="check_box"> |
|||
<a :class="$func.toggleClass(conditionList,{columnId:0},'columnId')&&'active'" @click="$func.toChecked(conditionList,{columnId:0},'columnId')">发起人</a> |
|||
<a v-for="(item,index) in conditions" :key="index" :class="$func.toggleClass(conditionList,item,'columnId')&&'active'" |
|||
@click="$func.toChecked(conditionList,item,'columnId')">{{item.showName}}</a> |
|||
</p> |
|||
<template #footer> |
|||
<el-button @click="conditionVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="sureCondition">确 定</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
<employees-role-dialog |
|||
v-model:visible="conditionRoleVisible" |
|||
:data="checkedList" |
|||
@change="sureConditionRole" |
|||
:isDepartment="true" |
|||
/> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveCondition">确 定</el-button> |
|||
<el-button @click="closeDrawer">取 消</el-button> |
|||
</div> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script setup> |
|||
import { ref, watch, computed } from 'vue' |
|||
import $func from '@/utils/index' |
|||
import { mapState, mapMutations } from '@/utils/lib' |
|||
import { optTypes, opt1s } from '@/utils/const' |
|||
import { getConditions } from '@/api/index' |
|||
import employeesRoleDialog from '../dialog/employeesRoleDialog.vue' |
|||
|
|||
let conditionVisible = ref(false) |
|||
let conditionsConfig = ref({ |
|||
conditionNodes: [], |
|||
}) |
|||
let conditionConfig = ref({}) |
|||
let PriorityLevel = ref('') |
|||
let conditions = ref([]) |
|||
let conditionList = ref([]) |
|||
let checkedList = ref([]) |
|||
let conditionRoleVisible = ref(false) |
|||
|
|||
let { tableId, conditionsConfig1, conditionDrawer } = mapState() |
|||
let visible = computed({ |
|||
get() { |
|||
return conditionDrawer.value |
|||
}, |
|||
set() { |
|||
closeDrawer() |
|||
} |
|||
}) |
|||
watch(conditionsConfig1, (val) => { |
|||
conditionsConfig.value = val.value; |
|||
PriorityLevel.value = val.priorityLevel |
|||
conditionConfig.value = val.priorityLevel |
|||
? conditionsConfig.value.conditionNodes[val.priorityLevel - 1] |
|||
: { nodeUserList: [], conditionList: [] } |
|||
}) |
|||
let { setCondition, setConditionsConfig } = mapMutations() |
|||
|
|||
const changeOptType = (item) => { |
|||
if (item.optType == 1) { |
|||
item.zdy1 = 2; |
|||
} else { |
|||
item.zdy1 = 1; |
|||
item.zdy2 = 2; |
|||
} |
|||
} |
|||
const toStrChecked = (item, key) => { |
|||
let a = item.zdy1 ? item.zdy1.split(",") : [] |
|||
var isIncludes = $func.toggleStrClass(item, key); |
|||
if (!isIncludes) { |
|||
a.push(key) |
|||
item.zdy1 = a.toString() |
|||
} else { |
|||
removeStrEle(item, key); |
|||
} |
|||
} |
|||
const removeStrEle = (item, key) => { |
|||
let a = item.zdy1 ? item.zdy1.split(",") : [] |
|||
var includesIndex; |
|||
a.map((item, index) => { |
|||
if (item == key) { |
|||
includesIndex = index |
|||
} |
|||
}); |
|||
a.splice(includesIndex, 1); |
|||
item.zdy1 = a.toString() |
|||
} |
|||
const addCondition = async () => { |
|||
conditionList.value = []; |
|||
conditionVisible.value = true; |
|||
let { data } = await getConditions({ tableId: tableId.value }) |
|||
conditions.value = data; |
|||
if (conditionConfig.value.conditionList) { |
|||
for (var i = 0; i < conditionConfig.value.conditionList.length; i++) { |
|||
var { columnId } = conditionConfig.value.conditionList[i] |
|||
if (columnId == 0) { |
|||
conditionList.value.push({ columnId: 0 }) |
|||
} else { |
|||
conditionList.value.push(conditions.value.filter(item => { return item.columnId == columnId; })[0]) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
const sureCondition = () => { |
|||
//1.弹窗有，外面无+ |
|||
//2.弹窗有，外面有不变 |
|||
for (var i = 0; i < conditionList.value.length; i++) { |
|||
var { columnId, showName, columnName, showType, columnType, fixedDownBoxValue } = conditionList.value[i]; |
|||
if ($func.toggleClass(conditionConfig.value.conditionList, conditionList.value[i], "columnId")) { |
|||
continue; |
|||
} |
|||
if (columnId == 0) { |
|||
conditionConfig.value.nodeUserList = []; |
|||
conditionConfig.value.conditionList.push({ |
|||
"type": 1, |
|||
"columnId": columnId, |
|||
"showName": '发起人' |
|||
}); |
|||
} else { |
|||
if (columnType == "Double") { |
|||
conditionConfig.value.conditionList.push({ |
|||
"showType": showType, |
|||
"columnId": columnId, |
|||
"type": 2, |
|||
"showName": showName, |
|||
"optType": "1", |
|||
"zdy1": "2", |
|||
"opt1": "<", |
|||
"zdy2": "", |
|||
"opt2": "<", |
|||
"columnDbname": columnName, |
|||
"columnType": columnType, |
|||
}) |
|||
} else if (columnType == "String" && showType == "3") { |
|||
conditionConfig.value.conditionList.push({ |
|||
"showType": showType, |
|||
"columnId": columnId, |
|||
"type": 2, |
|||
"showName": showName, |
|||
"zdy1": "", |
|||
"columnDbname": columnName, |
|||
"columnType": columnType, |
|||
"fixedDownBoxValue": fixedDownBoxValue |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
//3.弹窗无，外面有- |
|||
for (let i = conditionConfig.value.conditionList.length - 1; i >= 0; i--) { |
|||
if (!$func.toggleClass(conditionList.value, conditionConfig.value.conditionList[i], "columnId")) { |
|||
conditionConfig.value.conditionList.splice(i, 1); |
|||
} |
|||
} |
|||
conditionConfig.value.conditionList.sort(function (a, b) { return a.columnId - b.columnId; }); |
|||
conditionVisible.value = false; |
|||
} |
|||
const saveCondition = () => { |
|||
closeDrawer() |
|||
var a = conditionsConfig.value.conditionNodes.splice(PriorityLevel.value - 1, 1)//截取旧下标 |
|||
conditionsConfig.value.conditionNodes.splice(conditionConfig.value.priorityLevel - 1, 0, a[0])//填充新下标 |
|||
conditionsConfig.value.conditionNodes.map((item, index) => { |
|||
item.priorityLevel = index + 1 |
|||
}); |
|||
for (var i = 0; i < conditionsConfig.value.conditionNodes.length; i++) { |
|||
conditionsConfig.value.conditionNodes[i].error = $func.conditionStr(conditionsConfig.value, i) == "请设置条件" && i != conditionsConfig.value.conditionNodes.length - 1 |
|||
} |
|||
setConditionsConfig({ |
|||
value: conditionsConfig.value, |
|||
flag: true, |
|||
id: conditionsConfig1.value.id |
|||
}) |
|||
} |
|||
const addConditionRole = () => { |
|||
conditionRoleVisible.value = true; |
|||
checkedList.value = conditionConfig.value.nodeUserList |
|||
} |
|||
const sureConditionRole = (data) => { |
|||
conditionConfig.value.nodeUserList = data; |
|||
conditionRoleVisible.value = false; |
|||
} |
|||
const closeDrawer = (val) => { |
|||
setCondition(false) |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.condition_copyer { |
|||
.priority_level { |
|||
position: absolute; |
|||
top: 11px; |
|||
right: 30px; |
|||
width: 100px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.condition_content { |
|||
padding: 20px 20px 0; |
|||
|
|||
p.tip { |
|||
margin: 20px 0; |
|||
width: 510px; |
|||
text-indent: 17px; |
|||
line-height: 45px; |
|||
background: rgba(241, 249, 255, 1); |
|||
border: 1px solid rgba(64, 163, 247, 1); |
|||
color: #46a6fe; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
ul { |
|||
max-height: 500px; |
|||
overflow-y: scroll; |
|||
margin-bottom: 20px; |
|||
|
|||
li { |
|||
&>span { |
|||
float: left; |
|||
margin-right: 8px; |
|||
width: 70px; |
|||
line-height: 32px; |
|||
text-align: right; |
|||
} |
|||
|
|||
&>div { |
|||
display: inline-block; |
|||
width: 370px; |
|||
|
|||
&>p:not(:last-child) { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
|
|||
&:not(:last-child)>div>p { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
&>a { |
|||
float: right; |
|||
margin-right: 10px; |
|||
margin-top: 7px; |
|||
} |
|||
|
|||
select, |
|||
input { |
|||
width: 100%; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
|
|||
select+input { |
|||
width: 260px; |
|||
} |
|||
|
|||
select { |
|||
margin-right: 10px; |
|||
width: 100px; |
|||
} |
|||
|
|||
p.selected_list { |
|||
padding-left: 10px; |
|||
border-radius: 4px; |
|||
min-height: 32px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
word-break: break-word; |
|||
} |
|||
|
|||
p.check_box { |
|||
line-height: 32px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.condition_list { |
|||
.el-dialog__body { |
|||
padding: 16px 26px; |
|||
} |
|||
|
|||
p { |
|||
color: #666666; |
|||
margin-bottom: 10px; |
|||
|
|||
&>.check_box { |
|||
margin-bottom: 0; |
|||
line-height: 36px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,95 @@ |
|||
<!-- |
|||
* @Date: 2022-08-25 14:05:59 |
|||
* @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2023-03-16 16:13:48 |
|||
* @FilePath: /Workflow-Vue3/src/components/drawer/copyerDrawer.vue |
|||
--> |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="抄送人设置" v-model="visible" custom-class="set_copyer" :show-close="false" :size="550" :before-close="saveCopyer"> |
|||
<div class="demo-drawer__content"> |
|||
<div class="copyer_content drawer_content"> |
|||
<el-button type="primary" @click="addCopyer">添加成员</el-button> |
|||
<p class="selected_list"> |
|||
<span v-for="(item,index) in copyerConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(copyerConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="copyerConfig.nodeUserList&©erConfig.nodeUserList.length!=0" @click="copyerConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
<el-checkbox-group v-model="ccSelfSelectFlag" class="clear"> |
|||
<el-checkbox :label="1">允许发起人自选抄送人</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveCopyer">确 定</el-button> |
|||
<el-button @click="closeDrawer">取 消</el-button> |
|||
</div> |
|||
<employees-role-dialog |
|||
v-model:visible="copyerVisible" |
|||
:data="checkedList" |
|||
@change="sureCopyer" |
|||
/> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script setup> |
|||
import employeesRoleDialog from '../dialog/employeesRoleDialog.vue' |
|||
import $func from '@/utils/index' |
|||
import { mapState, mapMutations } from '@/utils/lib.js' |
|||
import { ref, watch, computed } from 'vue' |
|||
let copyerConfig = ref({}) |
|||
let ccSelfSelectFlag = ref([]) |
|||
let copyerVisible = ref(false) |
|||
let checkedList = ref([]) |
|||
let { copyerDrawer, copyerConfig1 } = mapState() |
|||
let visible = computed({ |
|||
get() { |
|||
return copyerDrawer.value |
|||
}, |
|||
set() { |
|||
closeDrawer() |
|||
} |
|||
}) |
|||
let { setCopyerConfig, setCopyer } = mapMutations() |
|||
watch(copyerConfig1, (val) => { |
|||
copyerConfig.value = val.value; |
|||
ccSelfSelectFlag.value = copyerConfig.value.ccSelfSelectFlag == 0 ? [] : [copyerConfig.value.ccSelfSelectFlag] |
|||
}) |
|||
|
|||
const addCopyer = () => { |
|||
copyerVisible.value = true; |
|||
checkedList.value = copyerConfig.value.nodeUserList |
|||
} |
|||
const sureCopyer = (data) => { |
|||
copyerConfig.value.nodeUserList = data; |
|||
copyerVisible.value = false; |
|||
} |
|||
const saveCopyer = () => { |
|||
copyerConfig.value.ccSelfSelectFlag = ccSelfSelectFlag.value.length == 0 ? 0 : 1; |
|||
copyerConfig.value.error = !$func.copyerStr(copyerConfig.value); |
|||
setCopyerConfig({ |
|||
value: copyerConfig.value, |
|||
flag: true, |
|||
id: copyerConfig1.value.id |
|||
}) |
|||
closeDrawer(); |
|||
} |
|||
const closeDrawer = () => { |
|||
setCopyer(false) |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.set_copyer { |
|||
.copyer_content { |
|||
padding: 20px 20px 0; |
|||
|
|||
.el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.el-checkbox { |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
<!-- |
|||
* @Date: 2022-08-25 14:05:59 |
|||
* @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2023-03-17 16:06:24 |
|||
* @FilePath: /Workflow-Vue3/src/components/drawer/promoterDrawer.vue |
|||
--> |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="发起人" v-model="visible" custom-class="set_promoter" :show-close="false" :size="550" :before-close="savePromoter"> |
|||
<div class="demo-drawer__content"> |
|||
<div class="promoter_content drawer_content"> |
|||
<p>{{ $func.arrToStr(flowPermission) || '所有人' }}</p> |
|||
<el-button type="primary" @click="addPromoter">添加/修改发起人</el-button> |
|||
</div> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="savePromoter">确 定</el-button> |
|||
<el-button @click="closeDrawer">取 消</el-button> |
|||
</div> |
|||
<employees-dialog |
|||
:isDepartment="true" |
|||
v-model:visible="promoterVisible" |
|||
:data="checkedList" |
|||
@change="surePromoter" |
|||
/> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script setup> |
|||
import employeesDialog from '../dialog/employeesDialog.vue' |
|||
import $func from '@/utils/index' |
|||
import { mapState, mapMutations } from '@/utils/lib' |
|||
import { computed, ref, watch } from 'vue' |
|||
let flowPermission = ref([]) |
|||
let promoterVisible = ref(false) |
|||
let checkedList = ref([]) |
|||
let { promoterDrawer, flowPermission1 } = mapState() |
|||
let visible = computed({ |
|||
get() { |
|||
return promoterDrawer.value |
|||
}, |
|||
set() { |
|||
closeDrawer() |
|||
} |
|||
}) |
|||
watch(flowPermission1, (val) => { |
|||
flowPermission.value = val.value |
|||
}) |
|||
|
|||
let { setPromoter, setFlowPermission } = mapMutations() |
|||
|
|||
const addPromoter = () => { |
|||
checkedList.value = flowPermission.value |
|||
promoterVisible.value = true; |
|||
} |
|||
const surePromoter = (data) => { |
|||
flowPermission.value = data; |
|||
promoterVisible.value = false; |
|||
} |
|||
const savePromoter = () => { |
|||
setFlowPermission({ |
|||
value: flowPermission.value, |
|||
flag: true, |
|||
id: flowPermission1.value.id |
|||
}) |
|||
closeDrawer() |
|||
} |
|||
const closeDrawer = () => { |
|||
setPromoter(false) |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.set_promoter { |
|||
.promoter_content { |
|||
padding: 0 20px; |
|||
.el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
p { |
|||
padding: 18px 0; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,311 @@ |
|||
<!-- |
|||
* @Date: 2022-09-21 14:41:53 |
|||
* @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2023-04-12 17:48:26 |
|||
* @FilePath: /Workflow-Vue3/src/components/nodeWrap.vue |
|||
--> |
|||
<template> |
|||
<div class="node-wrap" v-if="nodeConfig.type < 3"> |
|||
<div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')"> |
|||
<div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`"> |
|||
<span v-if="nodeConfig.type == 0">{{ nodeConfig.nodeName }}</span> |
|||
<template v-else> |
|||
<span class="iconfont">{{nodeConfig.type == 1?'':''}}</span> |
|||
<input |
|||
v-if="isInput" |
|||
type="text" |
|||
class="ant-input editable-title-input" |
|||
@blur="blurEvent()" |
|||
@focus="$event.currentTarget.select()" |
|||
v-focus |
|||
v-model="nodeConfig.nodeName" |
|||
:placeholder="defaultText" |
|||
/> |
|||
<span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span> |
|||
<i class="anticon anticon-close close" @click="delNode"></i> |
|||
</template> |
|||
</div> |
|||
<div class="content" @click="setPerson"> |
|||
<div class="text"> |
|||
<span class="placeholder" v-if="!showText">请选择{{defaultText}}</span> |
|||
{{showText}} |
|||
</div> |
|||
<i class="anticon anticon-right arrow"></i> |
|||
</div> |
|||
<div class="error_tip" v-if="isTried && nodeConfig.error"> |
|||
<i class="anticon anticon-exclamation-circle"></i> |
|||
</div> |
|||
</div> |
|||
<addNode v-model:childNodeP="nodeConfig.childNode" /> |
|||
</div> |
|||
<div class="branch-wrap" v-if="nodeConfig.type == 4"> |
|||
<div class="branch-box-wrap"> |
|||
<div class="branch-box"> |
|||
<button class="add-branch" @click="addTerm">添加条件</button> |
|||
<div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index"> |
|||
<div class="condition-node"> |
|||
<div class="condition-node-box"> |
|||
<div class="auto-judge" :class="isTried && item.error ? 'error active' : ''"> |
|||
<div class="sort-left" v-if="index != 0" @click="arrTransfer(index, -1)"><</div> |
|||
<div class="title-wrapper"> |
|||
<input |
|||
v-if="isInputList[index]" |
|||
type="text" |
|||
class="ant-input editable-title-input" |
|||
@blur="blurEvent(index)" |
|||
@focus="$event.currentTarget.select()" |
|||
v-focus |
|||
v-model="item.nodeName" |
|||
/> |
|||
<span v-else class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span> |
|||
<span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span> |
|||
<i class="anticon anticon-close close" @click="delTerm(index)"></i> |
|||
</div> |
|||
<div class="sort-right" v-if="index != nodeConfig.conditionNodes.length - 1" @click="arrTransfer(index)">></div> |
|||
<div class="content" @click="setPerson(item.priorityLevel)">{{ $func.conditionStr(nodeConfig, index) }}</div> |
|||
<div class="error_tip" v-if="isTried && item.error"> |
|||
<i class="anticon anticon-exclamation-circle"></i> |
|||
</div> |
|||
</div> |
|||
<addNode v-model:childNodeP="item.childNode" /> |
|||
</div> |
|||
</div> |
|||
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" /> |
|||
<template v-if="index == 0"> |
|||
<div class="top-left-cover-line"></div> |
|||
<div class="bottom-left-cover-line"></div> |
|||
</template> |
|||
<template v-if="index == nodeConfig.conditionNodes.length - 1"> |
|||
<div class="top-right-cover-line"></div> |
|||
<div class="bottom-right-cover-line"></div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
<addNode v-model:childNodeP="nodeConfig.childNode" /> |
|||
</div> |
|||
</div> |
|||
<nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode"/> |
|||
</template> |
|||
<script setup> |
|||
import { onMounted, ref, watch, getCurrentInstance, computed } from "vue"; |
|||
import $func from "@/utils/index"; |
|||
import { mapState, mapMutations } from "@/utils/lib"; |
|||
import { bgColors, placeholderList } from '@/utils/const' |
|||
let _uid = getCurrentInstance().uid; |
|||
|
|||
let props = defineProps({ |
|||
nodeConfig: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
flowPermission: { |
|||
type: Object, |
|||
default: () => [], |
|||
}, |
|||
}); |
|||
|
|||
let defaultText = computed(() => { |
|||
return placeholderList[props.nodeConfig.type] |
|||
}); |
|||
let showText = computed(() => { |
|||
if (props.nodeConfig.type == 0) return $func.arrToStr(props.flowPermission) || '所有人' |
|||
if (props.nodeConfig.type == 1) return $func.setApproverStr(props.nodeConfig) |
|||
return $func.copyerStr(props.nodeConfig) |
|||
}); |
|||
|
|||
let isInputList = ref([]); |
|||
let isInput = ref(false); |
|||
const resetConditionNodesErr = () => { |
|||
for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) { |
|||
props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == "请设置条件" && i != props.nodeConfig.conditionNodes.length - 1; |
|||
} |
|||
} |
|||
onMounted(() => { |
|||
if (props.nodeConfig.type == 1) { |
|||
props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig); |
|||
} else if (props.nodeConfig.type == 2) { |
|||
props.nodeConfig.error = !$func.copyerStr(props.nodeConfig); |
|||
} else if (props.nodeConfig.type == 4) { |
|||
resetConditionNodesErr() |
|||
} |
|||
}); |
|||
let emits = defineEmits(["update:flowPermission", "update:nodeConfig"]); |
|||
let { |
|||
isTried, |
|||
flowPermission1, |
|||
approverConfig1, |
|||
copyerConfig1, |
|||
conditionsConfig1, |
|||
} = mapState(); |
|||
watch(flowPermission1, (flow) => { |
|||
if (flow.flag && flow.id === _uid) { |
|||
emits("update:flowPermission", flow.value); |
|||
} |
|||
}); |
|||
watch(approverConfig1, (approver) => { |
|||
if (approver.flag && approver.id === _uid) { |
|||
emits("update:nodeConfig", approver.value); |
|||
} |
|||
}); |
|||
watch(copyerConfig1, (copyer) => { |
|||
if (copyer.flag && copyer.id === _uid) { |
|||
emits("update:nodeConfig", copyer.value); |
|||
} |
|||
}); |
|||
watch(conditionsConfig1, (condition) => { |
|||
if (condition.flag && condition.id === _uid) { |
|||
emits("update:nodeConfig", condition.value); |
|||
} |
|||
}); |
|||
let { |
|||
setPromoter, |
|||
setApprover, |
|||
setCopyer, |
|||
setCondition, |
|||
setFlowPermission, |
|||
setApproverConfig, |
|||
setCopyerConfig, |
|||
setConditionsConfig, |
|||
} = mapMutations(); |
|||
const clickEvent = (index) => { |
|||
if (index || index === 0) { |
|||
isInputList.value[index] = true; |
|||
} else { |
|||
isInput.value = true; |
|||
} |
|||
}; |
|||
const blurEvent = (index) => { |
|||
if (index || index === 0) { |
|||
isInputList.value[index] = false; |
|||
props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || "条件"; |
|||
} else { |
|||
isInput.value = false; |
|||
props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText |
|||
} |
|||
}; |
|||
const delNode = () => { |
|||
emits("update:nodeConfig", props.nodeConfig.childNode); |
|||
}; |
|||
const addTerm = () => { |
|||
let len = props.nodeConfig.conditionNodes.length + 1; |
|||
props.nodeConfig.conditionNodes.push({ |
|||
nodeName: "条件" + len, |
|||
type: 3, |
|||
priorityLevel: len, |
|||
conditionList: [], |
|||
nodeUserList: [], |
|||
childNode: null, |
|||
}); |
|||
resetConditionNodesErr() |
|||
emits("update:nodeConfig", props.nodeConfig); |
|||
}; |
|||
const delTerm = (index) => { |
|||
props.nodeConfig.conditionNodes.splice(index, 1); |
|||
props.nodeConfig.conditionNodes.map((item, index) => { |
|||
item.priorityLevel = index + 1; |
|||
item.nodeName = `条件${index + 1}`; |
|||
}); |
|||
resetConditionNodesErr() |
|||
emits("update:nodeConfig", props.nodeConfig); |
|||
if (props.nodeConfig.conditionNodes.length == 1) { |
|||
if (props.nodeConfig.childNode) { |
|||
if (props.nodeConfig.conditionNodes[0].childNode) { |
|||
reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode); |
|||
} else { |
|||
props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode; |
|||
} |
|||
} |
|||
emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode); |
|||
} |
|||
}; |
|||
const reData = (data, addData) => { |
|||
if (!data.childNode) { |
|||
data.childNode = addData; |
|||
} else { |
|||
reData(data.childNode, addData); |
|||
} |
|||
}; |
|||
const setPerson = (priorityLevel) => { |
|||
var { type } = props.nodeConfig; |
|||
if (type == 0) { |
|||
setPromoter(true); |
|||
setFlowPermission({ |
|||
value: props.flowPermission, |
|||
flag: false, |
|||
id: _uid, |
|||
}); |
|||
} else if (type == 1) { |
|||
setApprover(true); |
|||
setApproverConfig({ |
|||
value: { |
|||
...JSON.parse(JSON.stringify(props.nodeConfig)), |
|||
...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 }, |
|||
}, |
|||
flag: false, |
|||
id: _uid, |
|||
}); |
|||
} else if (type == 2) { |
|||
setCopyer(true); |
|||
setCopyerConfig({ |
|||
value: JSON.parse(JSON.stringify(props.nodeConfig)), |
|||
flag: false, |
|||
id: _uid, |
|||
}); |
|||
} else { |
|||
setCondition(true); |
|||
setConditionsConfig({ |
|||
value: JSON.parse(JSON.stringify(props.nodeConfig)), |
|||
priorityLevel, |
|||
flag: false, |
|||
id: _uid, |
|||
}); |
|||
} |
|||
}; |
|||
const arrTransfer = (index, type = 1) => { |
|||
//向左-1,向右1 |
|||
props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice( |
|||
index + type, |
|||
1, |
|||
props.nodeConfig.conditionNodes[index] |
|||
)[0]; |
|||
props.nodeConfig.conditionNodes.map((item, index) => { |
|||
item.priorityLevel = index + 1; |
|||
}); |
|||
resetConditionNodesErr() |
|||
emits("update:nodeConfig", props.nodeConfig); |
|||
}; |
|||
</script> |
|||
<style> |
|||
.error_tip { |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
transform: translate(150%, 0px); |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.promoter_person .el-dialog__body { |
|||
padding: 10px 20px 14px 20px; |
|||
} |
|||
|
|||
.selected_list { |
|||
margin-bottom: 20px; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.selected_list span { |
|||
margin-right: 10px; |
|||
padding: 3px 6px 3px 9px; |
|||
line-height: 12px; |
|||
white-space: nowrap; |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(220, 220, 220, 1); |
|||
} |
|||
|
|||
.selected_list img { |
|||
margin-left: 5px; |
|||
width: 7px; |
|||
height: 7px; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<!-- |
|||
* @Date: 2022-08-26 17:18:14 |
|||
* @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2022-09-21 14:36:25 |
|||
* @FilePath: /Workflow-Vue3/src/components/selectBox.vue |
|||
--> |
|||
<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="{active: elem.isActive && elem.isActive(item), not: elem.not}" |
|||
@click="elem.change(item)"> |
|||
<a :title="item.description" :class="{active: elem.isActiveItem && elem.isActiveItem(item)}"> |
|||
<img src="@/assets/images/icon_role.png">{{item.roleName}} |
|||
</a> |
|||
</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}"> |
|||
<a v-if="elem.isDepartment" |
|||
:class="elem.isActive(item) && 'active'" |
|||
@click="elem.change(item)"> |
|||
<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> |
|||
</li> |
|||
</template> |
|||
<template v-if="elem.type === 'employee'"> |
|||
<li v-for="item in elem.data" :key="item.id" class="check_box"> |
|||
<a :class="elem.isActive(item) && 'active'" |
|||
@click="elem.change(item)" |
|||
:title="item.departmentNames"> |
|||
<img src="@/assets/images/icon_people.png">{{item.employeeName}} |
|||
</a> |
|||
</li> |
|||
</template> |
|||
</template> |
|||
</ul> |
|||
</template> |
|||
<script setup> |
|||
defineProps({ |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
</script> |
|||
<style lang="less"> |
|||
.select-box { |
|||
height: 420px; |
|||
overflow-y: auto; |
|||
|
|||
li { |
|||
padding: 5px 0; |
|||
|
|||
i { |
|||
float: right; |
|||
padding-left: 24px; |
|||
padding-right: 10px; |
|||
color: #3195f8; |
|||
font-size: 12px; |
|||
cursor: pointer; |
|||
background: url(~@/assets/images/next_level_active.png) no-repeat 10px center; |
|||
border-left: 1px solid rgb(238, 238, 238); |
|||
} |
|||
|
|||
a.active+i { |
|||
color: rgb(197, 197, 197); |
|||
background-image: url(~@/assets/images/next_level.png); |
|||
pointer-events: none; |
|||
} |
|||
|
|||
img { |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
<!-- |
|||
* @Date: 2022-08-26 16:29:24 |
|||
* @LastEditors: StavinLi 495727881@qq.com |
|||
* @LastEditTime: 2022-09-21 14:36:30 |
|||
* @FilePath: /Workflow-Vue3/src/components/selectResult.vue |
|||
--> |
|||
<template> |
|||
<div class="select-result l"> |
|||
<p class="clear">已选（{{total}}） |
|||
<a @click="emits('del')">清空</a> |
|||
</p> |
|||
<ul> |
|||
<template v-for="({type, data, cancel}) in list" :key="type"> |
|||
<template v-if="type === 'role'"> |
|||
<li v-for="item in data" :key="item.roleId"> |
|||
<img src="@/assets/images/icon_role.png"> |
|||
<span>{{item.roleName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
<template v-if="type === 'department'"> |
|||
<li v-for="item in data" :key="item.id"> |
|||
<img src="@/assets/images/icon_file.png"> |
|||
<span>{{item.departmentName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
<template v-if="type === 'employee'"> |
|||
<li v-for="item in data" :key="item.id"> |
|||
<img src="@/assets/images/icon_people.png"> |
|||
<span>{{item.employeeName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
</template> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
defineProps({ |
|||
total: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
list: { |
|||
type: Array, |
|||
default: () => [{ type: 'role', data, cancel }] |
|||
} |
|||
}) |
|||
let emits = defineEmits(['del']) |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.select-result { |
|||
width: 276px; |
|||
height: 100%; |
|||
font-size: 12px; |
|||
|
|||
ul { |
|||
height: 460px; |
|||
overflow-y: auto; |
|||
|
|||
li { |
|||
margin: 11px 26px 13px 19px; |
|||
line-height: 17px; |
|||
|
|||
span { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
img { |
|||
&:first-of-type { |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
&:last-of-type { |
|||
float: right; |
|||
margin-top: 2px; |
|||
width: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
p { |
|||
padding-left: 19px; |
|||
padding-right: 20px; |
|||
line-height: 37px; |
|||
border-bottom: 1px solid #f2f2f2; |
|||
|
|||
a { |
|||
float: right; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,23 @@ |
|||
import Layout from "@/layout/index.vue"; |
|||
|
|||
const workflowRouter = [{ |
|||
path: '/workflow', |
|||
component: Layout, |
|||
redirect: '/workflow', |
|||
name: 'workflow', |
|||
meta: { |
|||
title: '工作流', |
|||
icon: 'School' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'workflow', |
|||
component: () => import('@/views/workflow/index.vue'), |
|||
name: 'work-flow', |
|||
meta: { title: '工作流', keepAlive: true , icon: 'MenuIcon'} |
|||
}, |
|||
|
|||
] |
|||
}] |
|||
|
|||
export default workflowRouter |
|||
@ -0,0 +1,14 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-05-09 15:22:33 |
|||
@ 备注: |
|||
--> |
|||
<template> |
|||
|
|||
</template> |
|||
<script lang='ts' setup> |
|||
|
|||
</script> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue