Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

工作流表单+模型代码提交

Browse Source
This commit is contained in:
hongawen
2024-05-09 14:18:39 +08:00
parent eeef608ccd
commit 06611f527a
266 changed files with 18227 additions and 22039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
View File

@@ -1,182 +1,185 @@
<template>
<div>
<el-form label-width='100px'>
<el-form-item label='规则类型' prop='candidateStrategy'>
<el-select
v-model='userTaskForm.candidateStrategy'
clearable
style='width: 100%'
@change='changeCandidateStrategy'
>
<el-option
v-for='dict in RuleTypeList'
:key='dict.code'
:label='dict.name'
:value='dict.code'
/>
</el-select>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 10'
label='指定角色'
prop='candidateParam'
>
<el-select
v-model='userTaskForm.candidateParam'
clearable
multiple
style='width: 100%'
@change='updateElementTask'
>
<el-option v-for='item in roleOptions' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 20'
label='指定部门'
prop='candidateParam'
span='24'
>
<el-tree-select
ref='treeRef'
v-model='userTaskForm.candidateParam'
:data='deptTreeOptions'
:props='defaultProps'
empty-text='加载中，请稍后'
multiple
node-key='id'
show-checkbox
@change='updateElementTask'
/>
</el-form-item>
<div v-if="dataType === 'ROLES'">
<el-select v-model='roleIds' :size='mini' placeholder='请选择 角色' @change='changeSelectRoles'>
<el-option
v-for='item in roleOptions'
:key='item.id'
:label='item.name'
:value='`ROLE${item.id}`'
>
</el-option>
</el-select>
</div>
</div>
<el-form-item
v-if='userTaskForm.candidateStrategy == 30'
label='指定用户'
prop='candidateParam'
span='24'
>
<el-select
v-model='userTaskForm.candidateParam'
clearable
multiple
style='width: 100%'
@change='updateElementTask'
>
<el-option
v-for='item in userOptions'
:key='item.id'
:label='item.name'
:value='item.id'
/>
</el-select>
</el-form-item>
</el-form>
</template>
<script lang='ts' setup>
import { listAllUserByDeptId } from '@/api/user-boot/user'
import { onMounted, reactive, ref, watch, onBeforeUnmount, toRaw, nextTick } from 'vue'
import { defaultProps, handleTree } from '@/utils/tree'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const RuleTypeList = ref()
import { getRoleSimpleList } from '@/api/user-boot/role'
import { getUserSimpleList } from '@/api/user-boot/user'
interface UserTaskForm {
dataType: any,
assignee: any,
candidateUsers: any,
candidateGroups: any,
text: any
}
const userTaskForm: UserTaskForm = reactive({
dataType: '',
assignee: '',
candidateUsers: '',
candidateGroups: '',
text: []
// dueDate: '',
// followUpDate: '',
// priority: ''
})
const mini = ref('small')
const dataType = ref('ROLES')
const multiLoopType = ref('Null')
const roleIds = ref('')
const roleOptions = ref([{ id: '', name: '' }])
const bpmnElement = ref()
const isSequential = ref(false)
defineOptions({ name: 'UserTask' })
const props = defineProps({
id: String,
type: String
id: String,
type: String
})
const userTaskForm = ref({
candidateStrategy: '', // 分配规则
candidateParam: [] // 分配选项
})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const changeSelectRoles = (val: any) => {
let groups = null
let text = null
if (val && val.length > 0) {
userTaskForm.dataType = 'ROLES'
groups = val.join() || null
let textArr = roleOptions.value.filter(k => val.indexOf(`ROLE${k.id}`) >= 0)
text = textArr?.map(k => k.name).join() || null
} else {
userTaskForm.dataType = ''
multiLoopType.value = 'Null'
}
userTaskForm.candidateGroups = groups
userTaskForm.text = text
updateElementTask()
export interface optionVO {
id: string
name: string
}
/**
* 跟新节点数据
*/
const updateElementTask = () => {
const taskAttr = Object.create(null)
for (let key in userTaskForm) {
taskAttr[key] = userTaskForm[key]
}
bpmnInstances().modeling.updateProperties(bpmnElement.value, taskAttr)
}
const roleOptions = ref<optionVO[]>([]) // 角色列表
const userOptions = ref<optionVO[]>([]) // 用户列表
const deptTreeOptions = ref() // 部门树
const resetTaskForm = () => {
const bpmnElementObj = bpmnElement.value?.businessObject
if (!bpmnElementObj) {
return
const businessObject = bpmnElement.value.businessObject
if (!businessObject) {
return
}
if (businessObject.candidateStrategy != undefined) {
userTaskForm.value.candidateStrategy = businessObject.candidateStrategy
} else {
userTaskForm.value.candidateStrategy = undefined
}
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
if (userTaskForm.value.candidateStrategy === 60) {
// 特殊：流程表达式，只有一个 input 输入框
userTaskForm.value.candidateParam = [businessObject.candidateParam]
} else {
userTaskForm.value.candidateParam = businessObject.candidateParam.split(',')
}
clearOptionsData()
getRoleOptions()
let roleIdData = bpmnElementObj['candidateGroups'] || []
if (roleIdData && roleIdData.length > 0) {
roleIds.value = roleIdData.split(',')
}
getElementLoop(bpmnElementObj)
} else {
userTaskForm.value.candidateParam = []
}
}
/**
* 清空选项数据
*/
const clearOptionsData = () => {
// this.selectedUser.ids = []
// this.selectedUser.text = []
roleIds.value = ''
/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
const changeCandidateStrategy = () => {
userTaskForm.value.candidateParam = []
updateElementTask()
}
const getRoleOptions = () => {
if (!roleOptions.value || roleOptions.value.length <= 0) {
listAllUserByDeptId('').then(res => {
roleOptions.value = res.data
//默认第一个
if (roleOptions.value.length > 0) {
roleIds.value = roleOptions.value[0].id
}
})
}
/** 选中某个 options 时候，更新 bpmn 图 */
const updateElementTask = () => {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
candidateStrategy: userTaskForm.value.candidateStrategy,
candidateParam: userTaskForm.value.candidateParam.join(',')
})
}
const getElementLoop = (businessObject: any) => {
if (!businessObject.loopCharacteristics) {
multiLoopType.value = 'Null'
return
}
isSequential.value = businessObject.loopCharacteristics.isSequential
if (businessObject.loopCharacteristics.completionCondition) {
if (businessObject.loopCharacteristics.completionCondition.body === '${nrOfCompletedInstances >= nrOfInstances}') {
multiLoopType.value = 'SequentialMultiInstance'
} else {
multiLoopType.value = 'ParallelMultiInstance'
}
}
// 打开监听器弹窗
const processExpressionDialogRef = ref()
const openProcessExpressionDialog = async () => {
processExpressionDialogRef.value.open()
}
const selectProcessExpression = (expression) => {
userTaskForm.value.candidateParam = [expression.expression]
}
watch(
() => props.id,
() => {
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
},
{ immediate: true }
)
onMounted(async () => {
// 获得角色列表
// roleOptions.value = await RoleApi.getSimpleRoleList()
// 获得用户列表
await listAllUserByDeptId('').then(res => {
roleOptions.value = res.data
})
// 获得角色列表
await getRoleSimpleList().then(res => {
roleOptions.value = res.data
})
// 获得用户列表
await getUserSimpleList().then(res => {
userOptions.value = res.data
})
//传入type的名称
RuleTypeList.value = dictData.getBasicData('rule_type')
//
// // 获得部门列表
// const deptOptions = await DeptApi.getSimpleDeptList()
// deptTreeOptions.value = handleTree(deptOptions, 'id')
})
onBeforeUnmount(() => {
bpmnElement.value = null
bpmnElement.value = null
})
</script>
<style scoped lang='scss'>
.el-row .el-radio-group {
margin-bottom: 15px;
.el-radio {
line-height: 28px;
}
}
.el-tag {
margin-bottom: 10px;
+ .el-tag {
margin-left: 10px;
}
}
.custom-label {
padding-left: 5px;
font-weight: 500;
font-size: 14px;
color: #606266;
}
</style>