chore: compose

2 years ago · 1ba713a2f0
6 changed files with 693 additions and 70 deletions
--- a/src/views/workflow/process/ApplyProcess.vue
+++ b/src/views/workflow/process/ApplyProcess.vue
@ -0,0 +1,151 @@
				@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '历史',
+                icon: 'fa6-solid:clock-rotate-left',
+                onClick: handleProcessView.bind(null, record)
+              }]"
+            :dropDownActions="[
+              {
+                label: '撤销',
+                icon: 'fa-solid:toggle-on',
+                ifShow: record.mesCode === '_workflow_process_waiting',
+                onClick: handleRevoke.bind(null, record)
+              },
+              {
+                label: '编辑',
+                icon: 'fa-solid:toggle-on',
+                ifShow: record.mesCode === '_workflow_process_revoke' || record.mesCode === '_workflow_process_reject',
+                onClick: handleRestartSubmit.bind(null, record)
+              }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { applyColumns, searchApplyFormSchema } from './process.data';
+  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 { selfProcessInstanceList, undoProcessInstance } from '/@/api/platform/workflow/controller/process';
+
+  export default defineComponent({
+    name: 'ApplyProcess',
+    components: {
+      BasicTable,
+      TableAction,
+    },
+    setup() {
+      const { push } = useRouter();
+      const { createConfirm } = useMessage();
+      const [registerTable, { reload }] = useTable({
+        api: selfProcessInstanceList,
+        rowKey: 'processInsId',
+        columns: applyColumns,
+        formConfig: {
+          compact: true,
+          labelWidth: 100,
+          schemas: searchApplyFormSchema,
+          autoSubmitOnEnter: true,
+          showAdvancedButton: true,
+          autoAdvancedLine: 3,
+          fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        clickToRowSelect: false,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: false
+        },
+      });
+
+      async function handleProcessView(record: Recordable) {
+        const { vars } = record;
+        const task = await getTaskDefinition({
+          processInsId: record.processInsId,
+          processDefId: record.processDefId
+        });
+        await push({
+          path: PageEnum.TASK_FORM_VIEW_PAGE,
+          query: {
+            _meta: 'y',
+            title: vars.title,
+            formTitle: vars.title,
+            formType: task.formType,
+            formKey: task.formKey,
+            processDefKey: task.processDefKey,
+            processInsId: task.processInsId,
+            processDefId: task.processDefId,
+            businessId: task.businessId,
+          }
+        });
+      }
+
+      async function handleRevoke(record: Recordable) {
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: '确定要撤销该流程吗?',
+          onOk: async () => {
+            await undoProcessInstance(record?.processInsId);
+            handleRefreshTable();
+          }
+        });
+      }
+
+      async function handleRestartSubmit(record: Recordable) {
+        const { vars } = record;
+        const task = await getTaskDefinition({
+          processDefId: record.processDefId
+        });
+        await push({
+          path: PageEnum.TASK_FORM_PAGE,
+          query: {
+            _meta: 'y',
+            status: 'reStart',
+            title: vars.title,
+            formTitle: vars.title,
+            formType: task.formType,
+            formKey: task.formKey,
+            processDefId: record.processDefId,
+            processDefKey: record.processDefKey,
+            processInsId: record.processInsId,
+          }
+        });
+      }
+
+      function handleRefreshTable() {
+        reload();
+      }
+
+      return {
+        handleProcessView,
+        registerTable,
+        handleRevoke,
+        handleRestartSubmit,
+      };
+    }
+  });
+</script>
--- a/src/views/workflow/process/HistoryProcess.vue
+++ b/src/views/workflow/process/HistoryProcess.vue
@ -0,0 +1,165 @@
				@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable"
+                @selection-change="handleSelectionChange"
+    >
+      <template #tableTitle>
+        <a-button
+          danger
+          type="primary"
+          :disabled="state.multiple"
+          @click="handleDel()"
+        >删除</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '流程图',
+                icon: 'fa6-solid:bars-progress',
+                onClick: handleTrace.bind(null, record)
+              }]"
+            :dropDownActions="[
+              {
+                label: '历史',
+                icon: 'fa-solid:toggle-on',
+                onClick: handleProcessView.bind(null, record)
+              },
+              {
+                label: '删除',
+                icon: 'fa-solid:toggle-on',
+                onClick: handleDel.bind(null, record)
+              }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <WorkflowChartModal @register="registerModal"/>
+  </div>
+</template>
+
+<script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { defineComponent, reactive, toRaw } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { historyColumns } from './process.data';
+  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 { listProcessHistory, removeHistoryProcessIns } from '/@/api/platform/workflow/controller/process';
+  import WorkflowChartModal from '/@/views/workflow/task/popups/WorkflowChartModal.vue';
+  import { useModal } from '/@/components/Modal';
+
+  interface TableState {
+    ids: string[];
+    single: boolean;
+    multiple: boolean;
+  }
+  export default defineComponent({
+    name: 'HistoryProcess',
+    components: {
+      WorkflowChartModal,
+      BasicTable,
+      TableAction,
+    },
+    setup() {
+      const state = reactive<TableState>({
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+      });
+      const { push } = useRouter();
+      const [registerModal, { openModal }] = useModal();
+      const { createConfirm, createMessage } = useMessage();
+      const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+        api: listProcessHistory,
+        rowKey: 'processInsId',
+        columns: historyColumns,
+        rowSelection: { type: 'checkbox' },
+        useSearchForm: false,
+        showTableSetting: true,
+        bordered: true,
+        clickToRowSelect: false,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: false
+        },
+        handleSearchInfoFn: () => clearSelectedRowKeys()
+      });
+
+      function handleSelectionChange(selection?: Recordable) {
+        const rowSelection = toRaw(selection?.keys) || [];
+        state.ids = rowSelection;
+        state.single = rowSelection.length != 1;
+        state.multiple = !rowSelection.length;
+      }
+
+      async function handleProcessView(record: Recordable) {
+        const { vars } = record;
+        const task = await getTaskDefinition({
+          processInsId: record.processInsId,
+          processDefId: record.processDefId
+        });
+        await push({
+          path: PageEnum.TASK_FORM_VIEW_PAGE,
+          query: {
+            _meta: 'y',
+            title: vars.title,
+            formTitle: vars.title,
+            formType: task.formType,
+            formKey: task.formKey,
+            processInsId: task.processInsId,
+            processDefId: task.processDefId,
+            businessId: task.businessId,
+          }
+        });
+      }
+
+      async function handleDel(record?: Recordable) {
+        const ids = record?.id || toRaw(state.ids);
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: '确定要删除历史流程吗?',
+          onOk: async () => {
+            await removeHistoryProcessIns(ids);
+            createMessage.success('删除成功!');
+            handleRefreshTable();
+          }
+        });
+      }
+
+      function handleTrace(record: Recordable) {
+        openModal(true, { record: record.taskInfo });
+      }
+
+      function handleRefreshTable() {
+        clearSelectedRowKeys();
+        reload();
+      }
+
+      return {
+        state,
+        registerModal,
+        registerTable,
+        handleProcessView,
+        handleDel,
+        handleTrace,
+        handleSelectionChange
+      };
+    }
+  });
+</script>
--- a/src/views/workflow/process/RunProcess.vue
+++ b/src/views/workflow/process/RunProcess.vue
@ -0,0 +1,168 @@
				@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable"
+                @selection-change="handleSelectionChange"
+    >
+      <template #tableTitle>
+        <a-button
+          danger
+          type="primary"
+          :disabled="state.multiple"
+          @click="handleDiscard()"
+        >作废</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                icon: 'fa6-solid:bars-progress',
+                onClick: handleProcessView.bind(null, record)
+              }]"
+            :dropDownActions="[
+              {
+                label: '进度',
+                icon: 'fa-solid:toggle-on',
+                onClick: handleTrace.bind(null, record)
+              },
+              {
+                label: '作废',
+                icon: 'fa-solid:toggle-on',
+                onClick: handleDiscard.bind(null, record)
+              }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <WorkflowChartModal @register="registerModal"/>
+  </div>
+</template>
+
+<script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { defineComponent, reactive, toRaw } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { runColumns } from './process.data';
+  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 WorkflowChartModal from '/@/views/workflow/task/popups/WorkflowChartModal.vue';
+  import { useModal } from '/@/components/Modal';
+  //import { createPrompt } from '/@/components/Prompt';
+
+  interface TableState {
+    ids: string[];
+    single: boolean;
+    multiple: boolean;
+  }
+  export default defineComponent({
+    name: 'RunProcess',
+    components: {
+      WorkflowChartModal,
+      BasicTable,
+      TableAction,
+    },
+    setup() {
+      const state = reactive<TableState>({
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+      });
+      const { push } = useRouter();
+      const [registerModal, { openModal }] = useModal();
+      const { createMessage } = useMessage();
+      const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+        api: listProcessRun,
+        rowKey: 'processInsId',
+        columns: runColumns,
+        useSearchForm: false,
+        rowSelection: { type: 'checkbox' },
+        showTableSetting: true,
+        bordered: true,
+        clickToRowSelect: false,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: false
+        },
+        handleSearchInfoFn: () => clearSelectedRowKeys()
+      });
+
+      function handleSelectionChange(selection?: Recordable) {
+        const rowSelection = toRaw(selection?.keys) || [];
+        state.ids = rowSelection;
+        state.single = rowSelection.length != 1;
+        state.multiple = !rowSelection.length;
+      }
+
+      async function handleProcessView(record: Recordable) {
+        const { vars } = record;
+        const task = await getTaskDefinition({
+          taskDefKey: record.activityId,
+          processInsId: record.processInsId,
+          processDefId: record.processDefId
+        });
+        await push({
+          path: PageEnum.TASK_FORM_VIEW_PAGE,
+          query: {
+            _meta: 'y',
+            title: vars.title,
+            formTitle: vars.title,
+            formType: task.formType,
+            formKey: task.formKey,
+            taskDefKey: task.taskDefKey,
+            processInsId: task.processInsId,
+            processDefId: task.processDefId,
+            businessId: task.businessId,
+          }
+        });
+      }
+
+      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();
+          }
+        });*/
+      }
+
+      function handleTrace(record: Recordable) {
+        openModal(true, { record: record.taskInfo });
+      }
+
+      function handleRefreshTable() {
+        clearSelectedRowKeys();
+        reload();
+      }
+
+      return {
+        state,
+        registerModal,
+        registerTable,
+        handleProcessView,
+        handleDiscard,
+        handleTrace,
+        handleSelectionChange
+      };
+    }
+  });
+</script>
--- a/src/views/workflow/process/process.data.ts
+++ b/src/views/workflow/process/process.data.ts
@ -1,68 +0,0 @@
				@@ -1,68 +0,0 @@
-import { BasicColumn, FormSchema } from '/@/components/Table';
-import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
-import { listProcessCategory } from '/@/api/platform/workflow/extension/controller/processCategory';
-
-export const columns: BasicColumn[] = [
-  {
-    title: '流程名称',
-    dataIndex: 'name',
-    width: 200,
-  },
-  {
-    title: '流程KEY',
-    dataIndex: 'key',
-    width: 200,
-  },
-  {
-    title: '流程分类',
-    dataIndex: 'category',
-    width: 150,
-    customRender: ({ record }) => {
-      const category = record.category;
-      return h(Tag, { color: 'processing' }, () => String(record.category).split(',')[1] || '未分类');
-    }
-  },
-  {
-    title: '流程版本',
-    dataIndex: 'version',
-    width: 150,
-    customRender: ({ record }) => {
-      const version = record.version;
-      return h(Tag, { color: version ? 'success' : 'warning' }, () => version || '版本未发布');
-    }
-  },
-  {
-    title: '上次发布时间',
-    dataIndex: 'deploymentTime',
-    width: 200
-  }
-];
-
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'categoryId',
-    label: '流程分类',
-    component: 'ApiTreeSelect',
-    componentProps: {
-      placeholder: '请选择流程分类',
-      fieldNames:{
-        label: 'name',
-        key: 'id',
-        value: 'id'
-      },
-      api: listProcessCategory,
-      listToTree: true
-    },
-    colProps: { span: 8 }
-  },
-  {
-    field: 'name',
-    label: '流程名称',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入流程名称'
-    },
-    colProps: { span: 8 }
-  }
-];
--- a/src/views/workflow/process/process.data.tsx
+++ b/src/views/workflow/process/process.data.tsx
@ -0,0 +1,207 @@
				@@ -0,0 +1,207 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { listProcessCategory } from '/@/api/platform/workflow/extension/controller/processCategory';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '流程名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '流程KEY',
+    dataIndex: 'key',
+    width: 200,
+  },
+  {
+    title: '流程分类',
+    dataIndex: 'category',
+    width: 150,
+    customRender: ({ record }) => {
+      const category = record.category;
+      return h(Tag, { color: 'processing' }, () => String(record.category).split(',')[1] || '未分类');
+    }
+  },
+  {
+    title: '流程版本',
+    dataIndex: 'version',
+    width: 150,
+    customRender: ({ record }) => {
+      const version = record.version;
+      return h(Tag, { color: version ? 'success' : 'warning' }, () => version || '版本未发布');
+    }
+  },
+  {
+    title: '上次发布时间',
+    dataIndex: 'deploymentTime',
+    width: 200
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'categoryId',
+    label: '流程分类',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      placeholder: '请选择流程分类',
+      fieldNames:{
+        label: 'name',
+        key: 'id',
+        value: 'id'
+      },
+      api: listProcessCategory,
+      listToTree: true
+    },
+    colProps: { span: 8 }
+  },
+  {
+    field: 'name',
+    label: '流程名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入流程名称'
+    },
+    colProps: { span: 8 }
+  }
+];
+
+export const applyColumns: BasicColumn[] = [
+  {
+    title: '流程标题',
+    dataIndex: ['vars', 'title'],
+    width: 200,
+  },
+  {
+    title: '流程名称',
+    dataIndex: 'processDefName',
+    width: 200,
+  },
+  {
+    title: '当前节点',
+    dataIndex:  'taskName',
+    width: 200,
+  },
+  {
+    title: '流程状态',
+    dataIndex:  'mesName',
+    width: 150,
+    customRender: ({ record }) => {
+      return h(Tag, { color: 'processing' }, () =>  record.mesName);
+    }
+  },
+  {
+    title: '发起时间 / 结束时间',
+    dataIndex: 'startTime',
+    width: 200,
+    customRender: ({ record }) => {
+      return [
+        <p style={{ margin: '0', padding: '0' }}>
+          { record.startTime || '--' }
+        </p>,
+        <p style={{ margin: '0', padding: '0', color: '#999!import'}}>
+          { record.endTime || '--' }
+        </p>
+      ];
+    }
+  }
+];
+
+export const searchApplyFormSchema: FormSchema[] = [
+  {
+    field: 'title',
+    label: '流程标题',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入流程标题',
+    },
+    colProps: { span: 8 }
+  },
+  {
+    field: 'dateRange',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      style: { width:'100%' },
+      valueFormat: 'YYYY-MM-DD',
+      placeholder: ['开始日期','结束日期']
+    },
+    colProps: { span: 8 }
+  }
+];
+
+export const historyColumns: BasicColumn[] = [
+  {
+    title: '实例名称',
+    dataIndex: ['vars', 'title'],
+    width: 200,
+  },
+  {
+    title: '流程名称',
+    dataIndex: 'processDefName',
+    width: 200,
+  },
+  {
+    title: '流程发起人',
+    dataIndex: ['vars', 'userName'],
+    width: 200,
+  },
+  {
+    title: '流程状态',
+    dataIndex:  'mesName',
+    width: 150,
+    customRender: ({ record }) => {
+      return h(Tag, { color: 'processing' }, () =>  record.mesName);
+    }
+  },
+  {
+    title: '发起时间 / 结束时间',
+    dataIndex: 'startTime',
+    width: 200,
+    customRender: ({ record }) => {
+      return [
+        <p style={{ margin: '0', padding: '0' }}>
+          { record.startTime || '--' }
+        </p>,
+        <p style={{ margin: '0', padding: '0', color: '#999!import' }}>
+          { record.endTime || '--' }
+        </p>
+      ];
+    }
+  }
+];
+
+export const runColumns: BasicColumn[] = [
+  {
+    title: '标题',
+    dataIndex: ['vars', 'title'],
+    width: 200,
+  },
+  {
+    title: '流程名称',
+    dataIndex: 'processDefName',
+    width: 200,
+  },
+  {
+    title: '当前节点',
+    dataIndex:  'taskName',
+    width: 150,
+    customRender: ({ record }) => {
+      return h(Tag, { color: 'processing' }, () =>  record.taskName);
+    }
+  },
+  {
+    title: '流程状态',
+    dataIndex:  'mesName',
+    width: 150,
+    customRender: ({ record }) => {
+      return h(Tag, { color: 'processing' }, () =>  record.mesName);
+    }
+  },
+  {
+    title: '流程发起人',
+    dataIndex: ['vars', 'userName'],
+    width: 200,
+  },
+];
--- a/src/views/workflow/task/TaskFormView.vue
+++ b/src/views/workflow/task/TaskFormView.vue
@ -32,7 +32,7 @@
				@@ -32,7 +32,7 @@
                     :disabled="true"
          />
        </ATabPane>
-        <ATabPane key="processInfo">
+        <ATabPane v-if="state.processInsId" key="processInfo">
          <template #tab>
            <span>
              <Icon icon="fa6-solid:money-bill-wheat"/>流程信息
@ -48,7 +48,7 @@
				@@ -48,7 +48,7 @@
          </template>
          <WorkflowChartModel ref="workflowChart"/>
        </ATabPane>
-        <ATabPane key="flowRecord">
+        <ATabPane v-if="state.processInsId" key="flowRecord">
          <template #tab>
            <span>
              <Icon icon="fa6-solid:bars-progress"/>流转记录