feat：【antd】【bpm】processInstance/detail 代码评审

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -11,6 +11,12 @@ import {
   BpmTaskStatusEnum,
   DICT_TYPE,
 } from '@vben/constants';
+import {
+  SvgBpmApproveIcon,
+  SvgBpmCancelIcon,
+  SvgBpmRejectIcon,
+  SvgBpmRunningIcon,
+} from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
 import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';
@@ -23,12 +29,6 @@ import { getSimpleUserList } from '#/api/system/user';
 import DictTag from '#/components/dict-tag/dict-tag.vue';
 import { setConfAndFields2 } from '#/components/form-create';
 import { registerComponent } from '#/utils';
-import {
-  SvgBpmApproveIcon,
-  SvgBpmCancelIcon,
-  SvgBpmRejectIcon,
-  SvgBpmRunningIcon,
-} from '#/views/bpm/processInstance/detail/modules/icons';
 
 import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
 import ProcessInstanceOperationButton from './modules/operation-button.vue';
@@ -44,22 +44,11 @@ const props = defineProps<{
   taskId?: string; // 任务编号
 }>();
 
+// TODO @jason：是不是使用全局的 FieldPermissionType？export enum FieldPermissionType {
 enum FieldPermissionType {
-  /**
-   * 隐藏
-   */
-  // eslint-disable-next-line no-unused-vars
-  NONE = '3',
-  /**
-   * 只读
-   */
-  // eslint-disable-next-line no-unused-vars
-  READ = '1',
-  /**
-   * 编辑
-   */
-  // eslint-disable-next-line no-unused-vars
-  WRITE = '2',
+  NONE = '3', // 隐藏
+  READ = '1', // 只读
+  WRITE = '2', // 编辑
 }
 
 const processInstanceLoading = ref(false); // 流程实例的加载中
@@ -67,6 +56,8 @@ const processInstance = ref<BpmProcessInstanceApi.ProcessInstance>(); // 流程
 const processDefinition = ref<any>({}); // 流程定义
 const processModelView = ref<any>({}); // 流程模型视图
 const operationButtonRef = ref(); // 操作按钮组件 ref
+const activeTab = ref('form');
+const taskListRef = ref();
 const auditIconsMap: {
   [key: string]:
     | typeof SvgBpmApproveIcon
@@ -82,29 +73,28 @@ const auditIconsMap: {
   [BpmTaskStatusEnum.RETURN]: SvgBpmRejectIcon,
   [BpmTaskStatusEnum.WAIT]: SvgBpmRunningIcon,
 };
+const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
 
-// ========== 申请信息 ==========
-const fApi = ref<any>(); //
+const fApi = ref<any>();
 const detailForm = ref({
   rule: [],
   option: {},
   value: {},
 }); // 流程实例的表单详情
-
 const writableFields: Array<string> = []; // 表单可以编辑的字段
 
-/** 加载流程实例 */
-const BusinessFormComponent = shallowRef<any>(null); // 异步组件
+const BusinessFormComponent = shallowRef<any>(null); // 异步组件(业务表单）
 
 /** 获取详情 */
 async function getDetail() {
   // 获得审批详情
-  getApprovalDetail();
-
+  await getApprovalDetail();
   // 获得流程模型视图
-  getProcessModelView();
+  await getProcessModelView();
 }
 
+/** 获得审批详情 */
 async function getApprovalDetail() {
   processInstanceLoading.value = true;
   try {
@@ -114,11 +104,9 @@ async function getApprovalDetail() {
       taskId: props.taskId,
     };
     const data = await getApprovalDetailApi(param);
-
     if (!data) {
       message.error('查询不到审批详情信息！');
     }
-
     if (!data.processDefinition || !data.processInstance) {
       message.error('查询不到流程信息！');
     }
@@ -143,6 +131,7 @@ async function getApprovalDetail() {
           processInstance.value.formVariables,
         );
       }
+      // TODO @jason：这里 await 来搞？
       nextTick().then(() => {
         fApi.value?.btn.show(false);
         fApi.value?.resetBtn.show(false);
@@ -187,11 +176,7 @@ async function getProcessModelView() {
   }
 }
 
-// 审批节点信息
-const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
-/**
- * 设置表单权限
- */
+/** 设置表单权限 */
 function setFieldPermission(field: string, permission: string) {
   if (permission === FieldPermissionType.READ) {
     fApi.value?.disabled(true, field);
@@ -206,6 +191,7 @@ function setFieldPermission(field: string, permission: string) {
   }
 }
 
+// TODO @jason：这个还要么？
 /**
  * 操作成功后刷新
  */
@@ -214,16 +200,13 @@ function setFieldPermission(field: string, permission: string) {
 //   getDetail();
 // };
 
-/** 当前的Tab */
-const activeTab = ref('form');
-const taskListRef = ref();
-
 /** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
 watch(
   () => activeTab.value,
   (newVal) => {
     if (newVal === 'record') {
       // 如果切换到流转记录标签，刷新任务列表
+      // TODO @jason：await nextTick 要不？
       nextTick(() => {
         taskListRef.value?.refresh();
       });
@@ -232,7 +215,6 @@ watch(
 );
 
 /** 初始化 */
-const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
 onMounted(async () => {
   await getDetail();
   // 获得用户列表
@@ -281,9 +263,9 @@ onMounted(async () => {
               >
                 {{ processInstance?.startUser?.nickname.substring(0, 1) }}
               </Avatar>
-              <span class="text-sm">{{
-                processInstance?.startUser?.nickname
-              }}</span>
+              <span class="text-sm">
+                {{ processInstance?.startUser?.nickname }}
+              </span>
             </div>
             <div class="text-gray-500">
               {{ formatDateTime(processInstance?.startTime) }} 提交
@@ -324,9 +306,8 @@ onMounted(async () => {
                       :rule="detailForm.rule"
                     />
                   </div>
-
                   <div
-                    v-if="
+                    v-else-if="
                       processDefinition?.formType === BpmModelFormType.CUSTOM
                     "
                     class="h-full"
@@ -341,7 +322,6 @@ onMounted(async () => {
                 </Col>
               </Row>
             </TabPane>
-
             <TabPane
               tab="流程图"
               key="diagram"
@@ -367,7 +347,6 @@ onMounted(async () => {
                 />
               </div>
             </TabPane>
-
             <TabPane tab="流转记录" key="record" class="tab-pane-content">
               <div class="h-full">
                 <BpmProcessInstanceTaskList
@@ -377,7 +356,6 @@ onMounted(async () => {
                 />
               </div>
             </TabPane>
-
             <!-- TODO 待开发 -->
             <TabPane
               tab="流转评论"
@@ -410,6 +388,7 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
+// @jason：看看能不能通过 tailwindcss 简化下
 .ant-tabs-content {
   height: 100%;
 }