bpm：完成流程实例的列表界面

yudao-ui-admin-vue3/src/views/bpm/definition/index.vue

@@ -45,11 +45,9 @@
     </XModal>
   </ContentWrap>
 </template>
-
 <script setup lang="ts">
 // 全局相关的 import
 import { ref } from 'vue'
-// import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 
 // 业务相关的 import
 import * as DefinitionApi from '@/api/bpm/definition'
@@ -87,7 +85,7 @@ const handleFormDetail = async (row) => {
     // 弹窗打开
     formDetailVisible.value = true
   } else {
-    router.push({
+    await router.push({
       path: row.formCustomCreatePath
     })
   }

yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue

@@ -15,7 +15,7 @@
           @click="cancelLeave(row)"
         />
         <!-- 操作: 详情 -->
-        <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" />
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
         <!-- 操作: 审批进度 -->
         <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
       </template>

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

@@ -14,97 +14,69 @@
       </template>
       <!-- 当前审批任务 -->
       <template #tasks_default="{ row }">
-        <el-button
+        <el-button v-for="task in row.tasks" :key="task.id" type="text">
-          v-for="task in row.tasks"
-          :key="task.id"
-          type="text"
-          @click="handleFormDetail(task.id)"
-        >
           <span>{{ task.name }}</span>
         </el-button>
       </template>
       <!-- 操作 -->
       <template #actionbtns_default="{ row }">
+        <XButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
         <XButton
-          type="primary"
+          preIcon="ep:delete"
           title="取消"
           v-if="row.result === 1"
-          preIcon="ep:delete"
           @click="handleCancel(row)"
         />
-        <XButton type="primary" title="详情" preIcon="ep:edit-pen" @click="handleDetail(row)" />
       </template>
     </XTable>
   </ContentWrap>
 </template>
 <script setup lang="ts">
 // 全局相关的 import
-import { ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { useXTable } from '@/hooks/web/useXTable'
-import { useRouter } from 'vue-router'
 
 // 业务相关的 import
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-// import { decodeFields } from '@/utils/formGenerator' // TODO 芋艿：后续根据情况清理
 import { allSchemas } from './process.data'
 
 const router = useRouter() // 路由
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
 // ========== 列表相关 ==========
-const [registerTable] = useXTable({
+const [registerTable, { reload }] = useXTable({
   allSchemas: allSchemas,
   getListApi: ProcessInstanceApi.getMyProcessInstancePageApi
 })
-// 流程表单的弹出框
+
-const detailOpen = ref(false)
-const detailForm = ref()
 /** 发起流程操作 **/
 const handleCreate = () => {
   router.push({
     name: 'BpmProcessInstanceCreate'
   })
 }
-/** 流程表单的详情按钮操作 */
-const handleFormDetail = (row) => {
-  // 情况一：使用流程表单
-  if (row.formId) {
-    // 设置值 TODO 芋艿：动态表单做完后，需要测试下
-    detailForm.value = {
-      ...JSON.parse(row.formConf),
-      fields: decodeFields([], row.formFields)
-    }
-    // 弹窗打开
-    detailOpen.value = true
-    // 情况二：使用业务表单
-  } else if (row.formCustomCreatePath) {
-    router.push({ path: row.formCustomCreatePath })
-  }
-}
 
 // 列表操作
 const handleDetail = (row) => {
-  console.log(row, 'row')
+  router.push({
-  router.push({ path: '/process-instance/detail', query: { id: row.id } })
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
 }
+
 /** 取消按钮操作 */
 const handleCancel = (row) => {
-  const id = row.id
+  ElMessageBox.prompt('请输入取消原因', '取消流程', {
-  ElMessageBox.prompt('请输入取消原因？', '取消流程', {
+    confirmButtonText: t('common.ok'),
-    type: 'warning',
+    cancelButtonText: t('common.cancel'),
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
     inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
     inputErrorMessage: '取消原因不能为空'
-  })
+  }).then(async ({ value }) => {
-    .then(({ value }) => {
+    await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
-      return ProcessInstanceApi.cancelProcessInstanceApi(id, value)
+    message.success('取消成功')
-    })
+    reload()
-    .then(() => {
-      ElMessage({
-        message: '取消成功',
-        type: 'success'
-      })
   })
 }
 </script>

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

@@ -41,7 +41,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
       title: '当前审批任务',
       field: 'tasks',
       table: {
-        width: 100,
+        width: 140,
         slots: {
           default: 'tasks_default'
         }

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

@@ -58,7 +58,7 @@
       </el-table-column>
       <el-table-column label="当前审批任务" align="center" prop="tasks">
         <template v-slot="scope">
-          <el-button v-for="task in scope.row.tasks" :key="task.id" type="text" @click="handleFormDetail(task.id)">
+          <el-button v-for="task in scope.row.tasks" :key="task.id" type="text"">
             <span>{{ task.name }}</span>
           </el-button>
         </template>