模型基础信息

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

@@ -1,234 +1,182 @@
 <template>
-  <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 getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
-          :key="dict.value"
-          :label="dict.label"
-          :value="dict.value"
-        /> -->
-      </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 || userTaskForm.candidateStrategy == 21"
-      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 == 22"
-      label="指定岗位"
-      prop="candidateParam"
-      span="24"
-    >
-      <el-select
-        v-model="userTaskForm.candidateParam"
-        clearable
-        multiple
-        style="width: 100%"
-        @change="updateElementTask"
-      >
-        <el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id" />
-      </el-select>
-    </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"
-      >
-        <el-option
-          v-for="item in userOptions"
-          :key="item.id"
-          :label="item.nickname"
-          :value="item.id"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item
-      v-if="userTaskForm.candidateStrategy === 40"
-      label="指定用户组"
-      prop="candidateParam"
-    >
-      <el-select
-        v-model="userTaskForm.candidateParam"
-        clearable
-        multiple
-        style="width: 100%"
-        @change="updateElementTask"
-      >
-        <el-option
-          v-for="item in userGroupOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item
-      v-if="userTaskForm.candidateStrategy === 60"
-      label="流程表达式"
-      prop="candidateParam"
-    >
-      <el-input
-        type="textarea"
-        v-model="userTaskForm.candidateParam[0]"
-        clearable
-        style="width: 72%"
-        @change="updateElementTask"
-      />
-      <el-button class="ml-5px" size="small" type="success" @click="openProcessExpressionDialog"
-        >选择表达式</el-button
-      >
-      <!-- 选择弹窗 -->
-      <ProcessExpressionDialog ref="processExpressionDialogRef" @select="selectProcessExpression" />
-    </el-form-item>
-  </el-form>
+    <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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+<script lang='ts' setup>
+import { listAllUserByDeptId } from '@/api/user-boot/user'
+import { onMounted, reactive, ref, watch, onBeforeUnmount, toRaw, nextTick } from 'vue'
 
-import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw,nextTick } from 'vue'
-import { defaultProps, handleTree } from '@/utils/tree'
-import * as RoleApi from '@/api/system/role'
-import * as DeptApi from '@/api/system/dept'
-import * as PostApi from '@/api/system/post'
-import * as UserApi from '@/api/system/user'
-import * as UserGroupApi from '@/api/bpm/userGroup'
-import ProcessExpressionDialog from './ProcessExpressionDialog.vue'
+interface UserTaskForm {
+    dataType: any,
+    assignee: any,
+    candidateUsers: any,
+    candidateGroups: any,
+    text: any
+}
 
-defineOptions({ name: 'UserTask' })
-const props = defineProps({
-  id: String,
-  type: String
-})
-const userTaskForm = ref({
-  candidateStrategy: undefined, // 分配规则
-  candidateParam: [] // 分配选项
+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 roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
-const deptTreeOptions = ref() // 部门树
-const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+/**
+ * 跟新节点数据
+ */
+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 businessObject = bpmnElement.value.businessObject
-  if (!businessObject) {
-    return
-  }
-  if (businessObject.candidateStrategy != undefined) {
-    userTaskForm.value.candidateStrategy = parseInt(businessObject.candidateStrategy) as any
-  } 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(',')
-        .map((item) => +item)
+    const bpmnElementObj = bpmnElement.value?.businessObject
+    if (!bpmnElementObj) {
+        return
     }
-  } else {
-    userTaskForm.value.candidateParam = []
-  }
+    clearOptionsData()
+    getRoleOptions()
+    let roleIdData = bpmnElementObj['candidateGroups'] || []
+    if (roleIdData && roleIdData.length > 0) {
+        roleIds.value = roleIdData.split(',')
+    }
+    getElementLoop(bpmnElementObj)
 }
 
-/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
-const changeCandidateStrategy = () => {
-  userTaskForm.value.candidateParam = []
-  updateElementTask()
+/**
+ * 清空选项数据
+ */
+const clearOptionsData = () => {
+    // this.selectedUser.ids = []
+    // this.selectedUser.text = []
+    roleIds.value = ''
 }
 
-/** 选中某个 options 时候，更新 bpmn 图  */
-const updateElementTask = () => {
-  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
-    candidateStrategy: userTaskForm.value.candidateStrategy,
-    candidateParam: userTaskForm.value.candidateParam.join(',')
-  })
+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 processExpressionDialogRef = ref()
-const openProcessExpressionDialog = async () => {
-  processExpressionDialogRef.value.open()
-}
-const selectProcessExpression = (expression) => {
-  userTaskForm.value.candidateParam = [expression.expression]
+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 }
+    () => props.id,
+    () => {
+        bpmnElement.value = bpmnInstances().bpmnElement
+        nextTick(() => {
+            resetTaskForm()
+        })
+    },
+    { immediate: true }
 )
 
 onMounted(async () => {
-  // 获得角色列表
-  roleOptions.value = await RoleApi.getSimpleRoleList()
-  // 获得部门列表
-  const deptOptions = await DeptApi.getSimpleDeptList()
-  deptTreeOptions.value = handleTree(deptOptions, 'id')
-  // 获得岗位列表
-  postOptions.value = await PostApi.getSimplePostList()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-  // 获得用户组列表
-  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+    // 获得角色列表
+    // roleOptions.value = await RoleApi.getSimpleRoleList()
+    // 获得用户列表
+    await listAllUserByDeptId('').then(res => {
+        roleOptions.value = res.data
+    })
 })
 
 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>