chore: compose

src/views/workflow/process/DiscardPromptModal.vue

@@ -0,0 +1,85 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    title="流程作废"
+    minHeight="100px"
+    @ok="handleSubmit"
+    @register="registerModal"
+  >
+    <Form :model="modelRef" :rules="rulesRef">
+      <FormItem name="reason" v-bind="validateInfos.reason">
+        <a-textarea v-model:value="modelRef.reason" placeholder="请输入流程作废原因" :rows="4"/>
+      </FormItem>
+    </Form>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用ant-design-vue原生组件编写表单,采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { reactive } from 'vue';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { Form } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { removeProcessInstance } from '/@/api/platform/workflow/controller/process';
+  import { isEmpty } from '/@/utils/is';
+
+  /** 类型规范统一声明定义区域 */
+  interface WindowState {
+    ids: string;
+    reason: string;
+  }
+
+  /** 通用变量统一声明区域 */
+  const { createMessage } = useMessage();
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  const emit = defineEmits(['success', 'register']);
+  const FormItem = Form.Item;
+  const useForm = Form.useForm;
+  const modelRef = reactive<WindowState>({
+    ids: '',
+    reason: ''
+  });
+  const rulesRef = reactive<Recordable>({
+    reason: [
+      {
+        required: true,
+        whitespace: true,
+        message: '请输入流程作废原因！',
+      }
+    ]
+  });
+  const { resetFields, clearValidate, validate, validateInfos } = useForm(modelRef, rulesRef);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner( (data: BoxPayload) => {
+    // 处理清除脏数据
+    resetFields();
+    clearValidate();
+    // 处理设置数据
+    modelRef.ids = data.ids;
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+  });
+
+  /** 处理模态框提交 */
+  async function handleSubmit() {
+    try {
+      // 验证数据
+      await validate();
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      if (isEmpty(modelRef.ids)) return createMessage.error('流程定义ID不存在,请检查!');
+      await removeProcessInstance(modelRef.ids, modelRef.reason);
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+</script>

src/views/workflow/process/RunProcess.vue

@@ -36,6 +36,7 @@
       </template>
     </BasicTable>
     <WorkflowChartModal @register="registerModal"/>
+    <DiscardPromptModal @register="registerDiscardModal" @success="handleRefreshTable"/>
   </div>
 </template>
 
@@ -52,11 +53,10 @@
   import { getTaskDefinition } from '/@/api/platform/workflow/controller/task';
   import { PageEnum } from '/@/enums/workflowEnum';
   import { useRouter } from 'vue-router';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { listProcessRun, removeProcessInstance } from '/@/api/platform/workflow/controller/process';
+  import { listProcessRun } from '/@/api/platform/workflow/controller/process';
   import WorkflowChartModal from '/@/views/workflow/task/popups/WorkflowChartModal.vue';
   import { useModal } from '/@/components/Modal';
-  //import { createPrompt } from '/@/components/Prompt';
+  import DiscardPromptModal from './DiscardPromptModal.vue';
 
   interface TableState {
     ids: string[];
@@ -69,6 +69,7 @@
       WorkflowChartModal,
       BasicTable,
       TableAction,
+      DiscardPromptModal,
     },
     setup() {
       const state = reactive<TableState>({
@@ -81,7 +82,7 @@
       });
       const { push } = useRouter();
       const [registerModal, { openModal }] = useModal();
-      const { createMessage } = useMessage();
+      const [registerDiscardModal, { openModal: openDiscardModal }] = useModal();
       const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
         api: listProcessRun,
         rowKey: 'processInsId',
@@ -132,17 +133,8 @@
       }
 
       async function handleDiscard(record?: Recordable) {
-        const ids = record?.id || toRaw(state.ids);
-        /*createPrompt({
-          title: '流程作废',
-          required: true,
-          label: '作废原因',
-          onOK: async (value: string) => {
-            await removeProcessInstance(ids, value);
-            createMessage.success('作废成功!');
-            handleRefreshTable();
-          }
-        });*/
+        const ids = record?.processInsId || toRaw(state.ids);
+        openDiscardModal(true, { ids });
       }
 
       function handleTrace(record: Recordable) {
@@ -161,7 +153,9 @@
         handleProcessView,
         handleDiscard,
         handleTrace,
-        handleSelectionChange
+        handleSelectionChange,
+        handleRefreshTable,
+        registerDiscardModal
       };
     }
   });