chore: 新增/编辑/导出xml

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

@@ -101,6 +101,7 @@ export function workflowDefinitionImport(file: File) {
 export function workflowDefinitionExport(id: ID) {
   return requestClient.postWithMsg<Blob>(
     `/workflow/definition/exportDef/${id}`,
+    {},
     {
       responseType: 'blob',
       isTransformResponse: false,

apps/web-antd/src/views/workflow/processDefinition/data.tsx

@@ -74,3 +74,32 @@ export const columns: VxeGridProps['columns'] = [
     width: 280,
   },
 ];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'TreeSelect',
+    fieldName: 'category',
+    label: '流程分类',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Input',
+    fieldName: 'flowCode',
+    label: '流程分类',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'flowName',
+    label: '流程名称',
+    rules: 'required',
+  },
+];

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

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { Page, type VbenFormProps } from '@vben/common-ui';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { getVxePopupContainer } from '@vben/utils';
 
@@ -16,13 +16,16 @@ import {
   workflowDefinitionActive,
   workflowDefinitionCopy,
   workflowDefinitionDelete,
+  workflowDefinitionExport,
   workflowDefinitionList,
   workflowDefinitionPublish,
 } from '#/api/workflow/definition';
+import { downloadByData } from '#/utils/file/download';
 
 import CategoryTree from './category-tree.vue';
 import { ActivityStatusEnum } from './constant';
 import { columns, querySchema } from './data';
+import processDefinitionModal from './process-definition-modal.vue';
 
 // 左边部门用
 const selectedCode = ref<string[]>([]);
@@ -81,7 +84,7 @@ const gridOptions: VxeGridProps = {
   rowConfig: {
     isHover: true,
     keyField: 'id',
-    height: 66,
+    height: 100,
   },
   id: 'workflow-definition-index',
 };
@@ -158,6 +161,42 @@ async function handleCopy(row: any) {
   await workflowDefinitionCopy(row.id);
   await tableApi.query();
 }
+
+const [ProcessDefinitionModal, modalApi] = useVbenModal({
+  connectedComponent: processDefinitionModal,
+});
+
+/**
+ * 新增流程
+ */
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+/**
+ * 编辑流程
+ */
+function handleEdit(row: any) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+/**
+ * 导出xml
+ * @param row row
+ */
+async function handleExportXml(row: any) {
+  const hideLoading = message.loading($t('pages.common.downloadLoading'), 0);
+  try {
+    const blob = await workflowDefinitionExport(row.id);
+    downloadByData(blob, `${row.flowName}-${Date.now()}.xml`);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    hideLoading();
+  }
+}
 </script>
 
 <template>
@@ -181,7 +220,11 @@ async function handleCopy(row: any) {
             >
               {{ $t('pages.common.delete') }}
             </a-button>
-            <a-button type="primary" v-access:code="['system:user:add']">
+            <a-button
+              type="primary"
+              v-access:code="['system:user:add']"
+              @click="handleAdd"
+            >
               {{ $t('pages.common.add') }}
             </a-button>
           </Space>
@@ -246,9 +289,18 @@ async function handleCopy(row: any) {
                 <a-button size="small" type="link"> 复制流程 </a-button>
               </Popconfirm>
             </div>
+            <div>
+              <a-button size="small" type="link" @click="handleEdit(row)">
+                编辑信息
+              </a-button>
+              <a-button size="small" type="link" @click="handleExportXml(row)">
+                导出流程
+              </a-button>
+            </div>
           </div>
         </template>
       </BasicTable>
     </div>
+    <ProcessDefinitionModal @reload="() => tableApi.reload()" />
   </Page>
 </template>

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import {
+  addFullName,
+  cloneDeep,
+  getPopupContainer,
+  listToTree,
+} from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { categoryList } from '#/api/workflow/category';
+import {
+  workflowDefinitionAdd,
+  workflowDefinitionInfo,
+  workflowDefinitionUpdate,
+} from '#/api/workflow/definition';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function setupCategorySelect() {
+  // menu
+  const resp = await categoryList();
+  const tree = listToTree(resp);
+  const fullMenuTree = [
+    {
+      id: 0,
+      categoryName: $t('menu.root'),
+      children: tree,
+    },
+  ];
+  addFullName(fullMenuTree, 'categoryName', ' / ');
+
+  formApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: {
+          label: 'categoryName',
+          value: 'id',
+        },
+        getPopupContainer,
+        // 设置弹窗滚动高度 默认256
+        listHeight: 300,
+        showSearch: true,
+        treeData: fullMenuTree,
+        treeDefaultExpandAll: false,
+        // 默认展开的树节点
+        treeDefaultExpandedKeys: [0],
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'categoryName',
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'category',
+    },
+  ]);
+}
+
+const [BasicDrawer, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    // 加载分类树选择
+    await setupCategorySelect();
+    if (isUpdate.value && id) {
+      const record = await workflowDefinitionInfo(id);
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value
+      ? workflowDefinitionUpdate(data)
+      : workflowDefinitionAdd(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicDrawer
+    :close-on-click-modal="false"
+    :fullscreen-button="false"
+    :title="title"
+    class="w-[550px]"
+  >
+    <div class="min-h-[300px]">
+      <BasicForm />
+    </div>
+  </BasicDrawer>
+</template>