bpm：流程详情的转派审批人

yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue

@@ -39,6 +39,18 @@
             title="通过"
             @click="handleAudit(item, true)"
           />
+          <XButton
+            pre-icon="ep:close"
+            type="danger"
+            title="不通过"
+            @click="handleAudit(item, false)"
+          />
+          <XButton
+            pre-icon="ep:edit"
+            type="primary"
+            title="转办"
+            @click="handleUpdateAssignee(item)"
+          />
         </div>
       </el-col>
     </el-card>
@@ -116,17 +128,56 @@
         </div>
       </el-col>
     </el-card>
+
+    <!-- 对话框(转派审批人) -->
+    <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
+      <el-form
+        ref="updateAssigneeFormRef"
+        :model="updateAssigneeForm"
+        :rules="updateAssigneeRules"
+        label-width="110px"
+      >
+        <el-form-item label="新审批人" prop="assigneeUserId">
+          <el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
+            <el-option
+              v-for="item in userOptions"
+              :key="parseInt(item.id)"
+              :label="item.nickname"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <!-- 操作按钮 -->
+      <template #footer>
+        <!-- 按钮：保存 -->
+        <XButton
+          type="primary"
+          :title="t('action.save')"
+          :loading="updateAssigneeLoading"
+          @click="submitUpdateAssigneeForm"
+        />
+        <!-- 按钮：关闭 -->
+        <XButton
+          :loading="updateAssigneeLoading"
+          :title="t('dialog.close')"
+          @click="updateAssigneeLoading = false"
+        />
+      </template>
+    </XModal>
   </ContentWrap>
 </template>
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
 import dayjs from 'dayjs'
+import * as UserApi from '@/api/system/user'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
 import { formatPast2 } from '@/utils/formatTime'
 
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 const { proxy } = getCurrentInstance()
 
 // ========== 审批信息 ==========
@@ -216,9 +267,66 @@ const getTimelineItemType = (item) => {
   return ''
 }
 
+// ========== 审批记录 ==========
+const updateAssigneeVisible = ref(false)
+const updateAssigneeLoading = ref(false)
+const updateAssigneeForm = ref({
+  id: undefined,
+  assigneeUserId: undefined
+})
+const updateAssigneeRules = ref({
+  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
+})
+const updateAssigneeFormRef = ref()
+const userOptions = ref([])
+
+// 处理转派审批人
+const handleUpdateAssignee = (task) => {
+  // 设置表单
+  resetUpdateAssigneeForm()
+  updateAssigneeForm.value.id = task.id
+  // 设置为打开
+  updateAssigneeVisible.value = true
+}
+
+// 提交转派审批人
+const submitUpdateAssigneeForm = async () => {
+  // 1. 校验表单
+  const elForm = unref(updateAssigneeFormRef)
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return
+
+  // 2.1 提交审批
+  updateAssigneeLoading.value = true
+  try {
+    await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
+    // 2.2 设置为隐藏
+    updateAssigneeVisible.value = false
+    // 加载最新数据
+    getDetail()
+  } finally {
+    updateAssigneeLoading.value = false
+  }
+}
+
+// 重置转派审批人表单
+const resetUpdateAssigneeForm = () => {
+  updateAssigneeForm.value = {
+    id: undefined,
+    assigneeUserId: undefined
+  }
+  updateAssigneeFormRef.value?.resetFields()
+}
+
 // ========== 初始化 ==========
 onMounted(() => {
+  // 加载详情
   getDetail()
+  // 加载用户的列表
+  UserApi.getListSimpleUsersApi().then((data) => {
+    userOptions.value.push(...data)
+  })
 })
 
 const getDetail = () => {

yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue

@@ -1,20 +1,8 @@
 <template>
   <div class="app-container">
 
-    <el-button
+
-        icon="el-icon-circle-close"
+
-        type="danger"
-        size="mini"
-        @click="handleAudit(item, false)"
-    >不通过</el-button
-    >
-    <el-button
-        icon="el-icon-edit-outline"
-        type="primary"
-        size="mini"
-        @click="handleUpdateAssignee(item)"
-    >转办</el-button
-    >
     <el-button
         icon="el-icon-edit-outline"
         type="primary"
@@ -44,44 +32,10 @@
         :taskData="tasks"
       />
     </el-card>
-
-    <!-- 对话框(转派审批人) -->
-    <el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
-      <el-form
-        ref="updateAssigneeForm"
-        :model="updateAssignee.form"
-        :rules="updateAssignee.rules"
-        label-width="110px"
-      >
-        <el-form-item label="新审批人" prop="assigneeUserId">
-          <el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
-            <el-option
-              v-for="item in userOptions"
-              :key="parseInt(item.id)"
-              :label="item.nickname"
-              :value="parseInt(item.id)"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
-        <el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getProcessDefinitionBpmnXML } from "@/api/bpm/definition"
-import { DICT_TYPE, getDictOptions } from "@/utils/dict"
-import store from "@/store"
-import { decodeFields } from "@/utils/formGenerator"
-import Parser from '@/components/parser/Parser'
-import { getProcessInstanceApi } from "@/api/bpm/processInstance"
-import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task"
-import { getListSimpleUsersApi } from "@/api/system/user"
-import { getActivityList } from "@/api/bpm/activity"
 
 // 流程实例的详情页，可用于审批
 export default {
@@ -95,92 +49,10 @@ export default {
         prefix: "flowable"
       },
       activityList: [],
-
-      // 转派审批人
-      userOptions: [],
-      updateAssignee: {
-        open: false,
-        form: {
-          assigneeUserId: undefined,
-        },
-        rules: {
-          assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
     }
   },
 
-      // 数据字典
-      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
-    }
-  },
-  created () {
-    this.id = this.$route.query.id
-    if (!this.id) {
-      this.$message.error('未传递 id 参数，无法查看流程信息')
-      return
-    }
-    this.getDetail()
 
-    // 获得用户列表
-    this.userOptions = []
-    getListSimpleUsersApi().then(response => {
-      this.userOptions.push(...response.data)
-    })
-  },
-  methods: {
-    /** 获得流程实例 */
-    getDetail () {
-      // 获得流程实例相关
-      this.processInstanceLoading = true
-      getProcessInstanceApi(this.id).then(response => {
-        // 加载流程图
-        getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
-          this.bpmnXML = response.data
-        })
-
-        // 加载活动列表
-        getActivityList({
-          processInstanceId: this.processInstance.id
-        }).then(response => {
-          this.activityList = response.data
-        })
-      })
-    },
-
-
-    /** 处理转派审批人 */
-    handleUpdateAssignee (task) {
-      // 设置表单
-      this.resetUpdateAssigneeForm()
-      this.updateAssignee.form.id = task.id
-      // 设置为打开
-      this.updateAssignee.open = true
-    },
-    /** 提交转派审批人 */
-    submitUpdateAssigneeForm () {
-      this.$refs['updateAssigneeForm'].validate(valid => {
-        if (!valid) {
-          return
-        }
-        updateTaskAssignee(this.updateAssignee.form).then(response => {
-          this.$modal.msgSuccess("转派任务成功！")
-          this.updateAssignee.open = false
-          this.getDetail() // 获得最新详情
-        })
-      })
-    },
-    /** 取消转派审批人 */
-    cancelUpdateAssigneeForm () {
-      this.updateAssignee.open = false
-      this.resetUpdateAssigneeForm()
-    },
-    /** 重置转派审批人 */
-    resetUpdateAssigneeForm () {
-      this.updateAssignee.form = {
-        id: undefined,
-        assigneeUserId: undefined,
-      }
-      this.resetForm("updateAssigneeForm")
-    },
     /** 处理审批退回的操作 */
     handleDelegate (task) {
       this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！")
@@ -201,14 +73,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss">
-.my-process-designer {
-  height: calc(100vh - 200px);
-}
-
-.box-card {
-  width: 100%;
-  margin-bottom: 20px;
-}
-</style>

yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts

@@ -1,36 +0,0 @@
-import { reactive } from 'vue'
-// import { useI18n } from '@/hooks/web/useI18n'
-import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
-import { DICT_TYPE } from '@/utils/dict'
-// const { t } = useI18n() // 国际化
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '流程名称',
-  action: true,
-  actionWidth: '200px',
-  columns: [
-    {
-      title: '流程分类',
-      field: 'category',
-      dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
-      dictClass: 'number'
-    },
-    {
-      title: '流程版本',
-      field: 'processDefinition.version',
-      table: {
-        slots: {
-          default: 'version_default'
-        }
-      }
-    },
-    {
-      title: '流程描述',
-      field: 'description'
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

yudao-ui-admin/src/views/bpm/processInstance/detail.vue

@@ -163,10 +163,7 @@ export default {
         rules: {
           assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
         }
-      },
+      }
-
-      // 数据字典
-      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
     };
   },
   created() {