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

<template>
  <el-form label-width='100px'>
    <el-form-item label='规则类型' prop='candidateStrategy'>
      <el-select
          v-model='userTaskForm.candidateStrategy'
          clearable
          style='width: 100%'
          @change='changeCandidateStrategy'
          filterable
      >
        <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'
          filterable
      >
        <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>

    <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'
          filterable
      >
        <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 { 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'

defineOptions({ name: 'UserTask' })
const props = defineProps({
  id: String,
  type: String
})
const userTaskForm = ref({
  candidateStrategy: '', // 分配规则
  candidateParam: [] // 分配选项
})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances

export interface optionVO {
  id: string
  name: string
}

const roleOptions = ref<optionVO[]>([]) // 角色列表
const userOptions = ref<optionVO[]>([]) // 用户列表
const deptTreeOptions = ref() // 部门树

const resetTaskForm = () => {
  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(',')
    }
  } else {
    userTaskForm.value.candidateParam = []
  }
}

/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
const changeCandidateStrategy = () => {
  userTaskForm.value.candidateParam = []
  updateElementTask()
}

/** 选中某个 options 时候，更新 bpmn 图  */
const updateElementTask = () => {
  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
    candidateStrategy: userTaskForm.value.candidateStrategy,
    candidateParam: userTaskForm.value.candidateParam.join(',')
  })
}

// 打开监听器弹窗
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()
      })
    },
    { immediate: true }
)


onMounted(async () => {
  // 获得角色列表
  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
})
</script>