chore: 流程部署

apps/web-antd/src/api/workflow/definition/index.ts

@@ -80,15 +80,15 @@ export function workflowDefinitionCopy(id: ID) {
 
 /**
  * 导入流程定义
- * @param file 模型文件
  * @returns boolean
  */
-export function workflowDefinitionImport(file: File) {
+export function workflowDefinitionImport(data: {
+  category: ID;
+  file: Blob | File;
+}) {
   return requestClient.postWithMsg<boolean>(
     '/workflow/definition/importDef',
-    {
-      file,
-    },
+    data,
     { headers: { 'Content-Type': 'multipart/form-data' } },
   );
 }

apps/web-antd/src/views/workflow/processDefinition/category-tree.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
 
 const selectCode = defineModel('selectCode', {
   required: true,
-  type: Array as PropType<string[]>,
+  type: Array as PropType<number[] | string[]>,
 });
 
 const searchValue = defineModel('searchValue', {
@@ -98,7 +98,7 @@ onMounted(loadTree);
             v-if="categoryTreeArray.length > 0"
             v-model:selected-keys="selectCode"
             :class="$attrs.class"
-            :field-names="{ title: 'categoryName', key: 'categoryCode' }"
+            :field-names="{ title: 'categoryName', key: 'id' }"
             :show-line="{ showLeafIcon: false }"
             :tree-data="categoryTreeArray"
             :virtual="false"

apps/web-antd/src/views/workflow/processDefinition/index.vue

@@ -25,10 +25,11 @@ import { downloadByData } from '#/utils/file/download';
 import CategoryTree from './category-tree.vue';
 import { ActivityStatusEnum } from './constant';
 import { columns, querySchema } from './data';
+import processDefinitionDeployModal from './process-definition-deploy-modal.vue';
 import processDefinitionModal from './process-definition-modal.vue';
 
 // 左边部门用
-const selectedCode = ref<string[]>([]);
+const selectedCode = ref<number[] | string[]>([]);
 
 const formOptions: VbenFormProps = {
   schema: querySchema(),
@@ -197,6 +198,27 @@ async function handleExportXml(row: any) {
     hideLoading();
   }
 }
+
+const [ProcessDefinitionDeployModal, deployModalApi] = useVbenModal({
+  connectedComponent: processDefinitionDeployModal,
+});
+
+/**
+ * 部署流程xml
+ */
+function handleDeploy() {
+  if (selectedCode.value.length === 0) {
+    message.warning('请先选择流程分类');
+    return;
+  }
+  const selectedCategory = selectedCode.value[0];
+  if (selectedCategory === 0) {
+    message.warning('不可选择根目录进行部署, 请选择子分类');
+    return;
+  }
+  deployModalApi.setData({ category: selectedCategory });
+  deployModalApi.open();
+}
 </script>
 
 <template>
@@ -220,6 +242,9 @@ async function handleExportXml(row: any) {
             >
               {{ $t('pages.common.delete') }}
             </a-button>
+            <a-button v-access:code="['system:user:add']" @click="handleDeploy">
+              部署
+            </a-button>
             <a-button
               type="primary"
               v-access:code="['system:user:add']"
@@ -302,5 +327,6 @@ async function handleExportXml(row: any) {
       </BasicTable>
     </div>
     <ProcessDefinitionModal @reload="() => tableApi.reload()" />
+    <ProcessDefinitionDeployModal @reload="() => tableApi.reload()" />
   </Page>
 </template>

apps/web-antd/src/views/workflow/processDefinition/process-definition-deploy-modal.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { UploadFile } from 'ant-design-vue/es/upload/interface';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { InBoxIcon } from '@vben/icons';
+
+import { Upload } from 'ant-design-vue';
+
+import { workflowDefinitionImport } from '#/api/workflow/definition';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const UploadDragger = Upload.Dragger;
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onConfirm: handleSubmit,
+});
+
+const fileList = ref<UploadFile[]>([]);
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true);
+    if (fileList.value.length !== 1) {
+      handleCancel();
+      return;
+    }
+    const data = {
+      file: fileList.value[0]!.originFileObj as Blob,
+      category: modalApi.getData().category,
+    };
+    await workflowDefinitionImport(data);
+    emit('reload');
+    handleCancel();
+  } catch (error) {
+    console.warn(error);
+    modalApi.close();
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+function handleCancel() {
+  modalApi.close();
+  fileList.value = [];
+}
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :fullscreen-button="false"
+    title="流程部署"
+  >
+    <!-- z-index不设置会遮挡模板下载loading -->
+    <!-- 手动处理 而不是放入文件就上传 -->
+    <UploadDragger
+      v-model:file-list="fileList"
+      :before-upload="() => false"
+      :max-count="1"
+      :show-upload-list="true"
+      accept="text/xml"
+    >
+      <p class="ant-upload-drag-icon flex items-center justify-center">
+        <InBoxIcon class="text-primary size-[48px]" />
+      </p>
+      <p class="ant-upload-text">点击或者拖拽到此处上传文件</p>
+    </UploadDragger>
+  </BasicModal>
+</template>