admin-sjzx/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue

<template>
    <div>

        <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>

</template>

<script lang='ts' setup>
import { listAllUserByDeptId } from '@/api/user-boot/user'
import { onMounted, reactive, ref, watch, onBeforeUnmount, toRaw, nextTick } from 'vue'

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)
const props = defineProps({
    id: String,
    type: String
})
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()
}

/**
 * 跟新节点数据
 */
const updateElementTask = () => {
    const taskAttr = Object.create(null)
    for (let key in userTaskForm) {
        taskAttr[key] = userTaskForm[key]
    }
    bpmnInstances().modeling.updateProperties(bpmnElement.value, taskAttr)
}

const resetTaskForm = () => {
    const bpmnElementObj = bpmnElement.value?.businessObject
    if (!bpmnElementObj) {
        return
    }
    clearOptionsData()
    getRoleOptions()
    let roleIdData = bpmnElementObj['candidateGroups'] || []
    if (roleIdData && roleIdData.length > 0) {
        roleIds.value = roleIdData.split(',')
    }
    getElementLoop(bpmnElementObj)
}

/**
 * 清空选项数据
 */
const clearOptionsData = () => {
    // this.selectedUser.ids = []
    // this.selectedUser.text = []
    roleIds.value = ''
}

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
            }
        })
    }
}

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'

        }
    }
}

watch(
    () => props.id,
    () => {
        bpmnElement.value = bpmnInstances().bpmnElement
        nextTick(() => {
            resetTaskForm()
        })
    },
    { immediate: true }
)

onMounted(async () => {
    // 获得角色列表
    // roleOptions.value = await RoleApi.getSimpleRoleList()
    // 获得用户列表
    await listAllUserByDeptId('').then(res => {
        roleOptions.value = res.data
    })
})

onBeforeUnmount(() => {
    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>