perf: 编写工作流表单模块

2 years ago · 1d01543b21
12 changed files with 533 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -10,6 +10,10 @@
				@@ -10,6 +10,10 @@
 	/>
 	<title><%= title %></title>
 	<link rel="icon" href="/favicon.ico"/>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css">
+	<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js" charset="utf-8"></script>
+	<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.1"></script>
 </head>
 <body>
 <script>
--- a/src/api/platform/common/workflow/extension/controller/formCategory.ts
+++ b/src/api/platform/common/workflow/extension/controller/formCategory.ts
@ -0,0 +1,25 @@
				@@ -0,0 +1,25 @@
+/**
+ * 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+ * author entfrm开发团队-王翔
+ */
+import { FormCategory, FormCategoryParams, FormCategoryResult } from '/@/api/platform/common/workflow/extension/entity/formCategory';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/common_proxy/common/workflow/extension/formCategory/list',
+  get = '/common_proxy/common/workflow/extension/formCategory',
+  save = '/common_proxy/common/workflow/extension/formCategory/save',
+  edit = '/common_proxy/common/workflow/extension/formCategory/update',
+  del = '/common_proxy/common/workflow/extension/formCategory/remove',
+}
+
+export const listFormCategory = (params?: Partial<FormCategoryParams>) => defHttp.get({ url: Api.list, params });
+
+export const addFormCategory = (params: Partial<FormCategory>)=> defHttp.post({ url: Api.save ,data: params });
+
+export const editFormCategory = (params: Partial<FormCategory>) => defHttp.put({ url: Api.edit, data: params });
+
+export const getFormCategory = (id: string) => defHttp.get<FormCategory>({ url: `${Api.get}/${id}` });
+
+export const delFormCategory = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });
--- a/src/api/platform/common/workflow/extension/controller/formDefinition.ts
+++ b/src/api/platform/common/workflow/extension/controller/formDefinition.ts
@ -0,0 +1,25 @@
				@@ -0,0 +1,25 @@
+/**
+ * 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+ * author entfrm开发团队-王翔
+ */
+import { FormDefinition, FormDefinitionParams, FormDefinitionResult } from '/@/api/platform/common/workflow/extension/entity/formDefinition';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/common_proxy/common/workflow/extension/formDefinition/list',
+  get = '/common_proxy/common/workflow/extension/formDefinition',
+  save = '/common_proxy/common/workflow/extension/formDefinition/save',
+  edit = '/common_proxy/common/workflow/extension/formDefinition/update',
+  del = '/common_proxy/common/workflow/extension/formDefinition/remove',
+}
+
+export const listFormDefinition = (params?: Partial<FormDefinitionParams>) => defHttp.get<FormDefinitionResult>({url: Api.list, params}, { isReturnResultResponse: true });
+
+export const addFormDefinition = (params: Partial<FormDefinition>)=> defHttp.post({url: Api.save ,data: params});
+
+export const editFormDefinition = (params: Partial<FormDefinition>) => defHttp.put({url: Api.edit, data: params});
+
+export const getFormDefinition = (id: string) => defHttp.get<FormDefinition>({url: `${Api.get}/${id}` });
+
+export const delFormDefinition = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });
--- a/src/api/platform/common/workflow/extension/controller/formDefinitionJson.ts
+++ b/src/api/platform/common/workflow/extension/controller/formDefinitionJson.ts
@ -0,0 +1,28 @@
				@@ -0,0 +1,28 @@
+/**
+ * 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+ * author entfrm开发团队-王翔
+ */
+import { FormDefinitionJsonParams, FormDefinitionJson, FormDefinitionJsonResult } from '/@/api/platform/common/workflow/extension/entity/formDefinitionJson';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/common_proxy/common/workflow/extension/formDefinitionJson/list',
+  get = '/common_proxy/common/workflow/extension/formDefinitionJson',
+  save = '/common_proxy/common/workflow/extension/formDefinitionJson/save',
+  edit = '/common_proxy/common/workflow/extension/formDefinitionJson/update',
+  del = '/common_proxy/common/workflow/extension/formDefinitionJson/remove',
+  setPrimaryVersion = '/common_proxy/common/workflow/extension/formDefinitionJson/setPrimaryVersion'
+}
+
+export const listFormDefinitionJson = (params?: Partial<FormDefinitionJsonParams>) => defHttp.get<FormDefinitionJsonResult>({url: Api.list, params}, { isReturnResultResponse: true });
+
+export const addFormDefinitionJson = (params: Partial<FormDefinitionJson>)=> defHttp.post({url: Api.save ,data: params});
+
+export const editFormDefinitionJson = (params: Partial<FormDefinitionJson>) => defHttp.put({url: Api.edit, data: params});
+
+export const getFormDefinitionJson = (id: string) => defHttp.get<FormDefinitionJson>({url: `${Api.get}/${id}` });
+
+export const delFormDefinitionJson = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });
+
+export const setPrimaryVersion = (id: string) => defHttp.put({ url:`${Api.setPrimaryVersion}/${id}` });
--- a/src/api/platform/common/workflow/extension/entity/formCategory.ts
+++ b/src/api/platform/common/workflow/extension/entity/formCategory.ts
@ -0,0 +1,10 @@
				@@ -0,0 +1,10 @@
+import type { R } from '/#/axios';
+import type { TreeEntity, Page } from '/@/api/common/data/entity';
+
+export type FormCategoryParams = Page & FormCategory;
+
+export interface FormCategory extends TreeEntity<FormCategory> {
+  [key: string]: any;
+}
+
+export type FormCategoryResult = R<FormCategory[]>;
--- a/src/api/platform/common/workflow/extension/entity/formDefinition.ts
+++ b/src/api/platform/common/workflow/extension/entity/formDefinition.ts
@ -0,0 +1,17 @@
				@@ -0,0 +1,17 @@
+import type { R } from '/#/axios';
+import type { CommonEntity, Page } from '/@/api/common/data/entity';
+import type { FormCategory } from './formCategory';
+import type { FormDefinitionJson } from './formDefinitionJson';
+
+export type FormDefinitionParams = Page & FormDefinition;
+
+export interface FormDefinition extends CommonEntity {
+  id: string;
+  categoryId: string;
+  name: string;
+  formCategory: FormCategory;
+  formDefinitionJson: FormDefinitionJson;
+  [key:string]: any;
+}
+
+export type FormDefinitionResult = R<FormDefinition[]>;
--- a/src/api/platform/common/workflow/extension/entity/formDefinitionJson.ts
+++ b/src/api/platform/common/workflow/extension/entity/formDefinitionJson.ts
@ -0,0 +1,16 @@
				@@ -0,0 +1,16 @@
+import type { R } from '/#/axios';
+import type { CommonEntity, Page } from '/@/api/common/data/entity';
+
+export type FormDefinitionJsonParams = Page & FormDefinitionJson;
+
+export interface FormDefinitionJson extends CommonEntity {
+  id: string;
+  formDefinitionId: string;
+  json: string;
+  version: number;
+  status: string;
+  isPrimary: string;
+  [key:string]: any;
+}
+
+export type FormDefinitionJsonResult = R<FormDefinitionJson[]>;
--- a/src/components/Form/src/components/ApiTreeSelect.vue
+++ b/src/components/Form/src/components/ApiTreeSelect.vue
@ -16,6 +16,7 @@
				@@ -16,6 +16,7 @@
  import { get } from 'lodash-es';
  import { propTypes } from '/@/utils/propTypes';
  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { listToTree, TreeHelperConfig } from '/@/utils/helper/treeHelper';

  export default defineComponent({
    name: 'ApiTreeSelect',
@ -25,6 +26,8 @@
				@@ -25,6 +26,8 @@
      params: { type: Object },
      immediate: { type: Boolean, default: true },
      resultField: propTypes.string.def(''),
+      listToTree: { type: Boolean, default: false },
+      treeConfig: { type: Object as PropType<TreeHelperConfig>,}
    },
    emits: ['options-change', 'change'],
    setup(props, { attrs, emit }) {
@ -76,6 +79,7 @@
				@@ -76,6 +79,7 @@
        if (!result) return;
        if (!isArray(result)) {
          result = get(result, props.resultField);
+          props.listToTree && (result = listToTree(result, props.treeConfig));
        }
        treeData.value = (result as Recordable[]) || [];
        isFirstLoaded.value = true;
--- a/src/utils/helper/treeHelper.ts
+++ b/src/utils/helper/treeHelper.ts
@ -5,7 +5,7 @@
				@@ -5,7 +5,7 @@
 * @create: 2022/4/7
 */

-interface TreeHelperConfig {
+export interface TreeHelperConfig {
  id: string;
  children: string;
  parentId: string;
--- a/src/views/common/workflow/extension/form/FormModal.vue
+++ b/src/views/common/workflow/extension/form/FormModal.vue
@ -0,0 +1,79 @@
				@@ -0,0 +1,79 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="720px"
+    @register="registerModal"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+/**
+ * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+ * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+ * author entfrm开发团队-王翔
+ */
+import { ref, unref } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from './form.data';
+import { addFormDefinition, editFormDefinition, getFormDefinition } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
+import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+
+/** 通用变量统一声明区域 */
+const tag = ref<Nullable<string>>('');
+/** https://v3.cn.vuejs.org/api/options-data.html#emits */
+const emit = defineEmits(['success', 'register']);
+const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
+  labelWidth: 100,
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  baseColProps: { span: 24 }
+});
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+  // 处理清除脏数据
+  await resetFields();
+  await clearValidate();
+  // 处理设置数据
+  tag.value = data._tag;
+  const id = data.record?.id;
+  const props: Partial<ModalProps> = { confirmLoading: false };
+  // 采用tag标签区分操作
+  switch (unref(tag)) {
+    case 'add':
+      props.title = '新增流程表单';
+      break;
+    case 'edit':
+      props.title = '编辑流程表单';
+      await setFieldsValue(await getFormDefinition(id));
+      break;
+  }
+  // 尾部:设置处理后的最终配置数据
+  setModalProps(props);
+});
+
+/** 处理弹出框提交 */
+async function handleSubmit() {
+  try {
+    // 提取验证数据
+    const formData = await validate();
+    // 处理提交之前逻辑
+    setModalProps({ confirmLoading: true });
+    // 采用tag标签区分操作
+    switch (unref(tag)) {
+      case 'add':
+        await addFormDefinition(formData);
+        break;
+      case 'edit':
+        await editFormDefinition(formData);
+        break;
+    }
+    // 处理提交完成之后逻辑
+    closeModal();
+    emit('success');
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>
--- a/src/views/common/workflow/extension/form/form.data.ts
+++ b/src/views/common/workflow/extension/form/form.data.ts
@ -0,0 +1,108 @@
				@@ -0,0 +1,108 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { listFormCategory } from '/@/api/platform/common/workflow/extension/controller/formCategory';
+
+/** 表格列配置 */
+export const columns: BasicColumn[] = [
+  {
+    title: '表单名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '分类',
+    dataIndex: ['formCategory', 'name'],
+  },
+  {
+    title: '版本号',
+    dataIndex: ['formDefinitionJson', 'version'],
+    width: 200,
+    customRender: ({ record }) => {
+      return h(Tag, {color: 'success'}, () => record.formDefinitionJson?.version);
+    }
+  },
+  {
+    title: '状态',
+    dataIndex:  ['formDefinitionJson', 'status'],
+    width: 200,
+    customRender: ({ record }) => {
+      return  record.formDefinitionJson?.status == '1' ?
+        h(Tag, { color: 'success' }, () => '已发布'):
+        h(Tag, { color: 'red' }, () => '未发布');
+    }
+  },
+  {
+    title: '是否主版本',
+    dataIndex: ['formDefinitionJson', 'isPrimary'],
+    width: 200,
+    customRender: ({ record }) => {
+      return  record.formDefinitionJson?.isPrimary == '1' ?
+        h(Tag, { color: 'success' }, () => '主版本'):
+        h(Tag, { color: 'red' }, () => '非主版本');
+    }
+  },
+];
+
+/** 搜索表单配置 */
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'categoryId',
+    label: '表单分类',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      placeholder: '请选择分类',
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id'
+      },
+      getPopupContainer: () => document.body,
+      api: listFormCategory,
+      listToTree: true,
+    },
+    colProps: { span: 8 }
+  },
+  {
+    field: 'name',
+    label: '表单名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入表单名称',
+    },
+    colProps: { span: 8 }
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'ID',
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'categoryId',
+    label: '表单分类',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      placeholder: '请选择分类',
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id'
+      },
+      getPopupContainer: () => document.body,
+      api: listFormCategory,
+      listToTree: true,
+    },
+    required: true,
+  },
+  {
+    field: 'name',
+    label: '表单名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入表单名称',
+    },
+  },
+];
--- a/src/views/common/workflow/extension/form/index.vue
+++ b/src/views/common/workflow/extension/form/index.vue
@ -0,0 +1,216 @@
				@@ -0,0 +1,216 @@
+<template>
+  <PageWrapper
+    contentClass="flex"
+    contentFullHeight
+    fixedHeight
+    dense
+  >
+    <div class="m-4 mr-0 overflow-hidden bg-white w-1/4 xl:w-1/5">
+      <BasicTree
+        title="表单分类"
+        toolbar
+        search
+        :clickRowToExpand="false"
+        :treeData="state.treeData"
+        :fieldNames="{ key: 'id', title: 'name' }"
+        @select="handleSelect"
+      />
+    </div>
+    <BasicTable
+      class="w-3/4 xl:w-4/5"
+      @register="registerTable"
+      @selection-change="handleSelectionChange"
+    >
+      <template #tableTitle>
+        <a-button
+          type="primary"
+          @click="handleAdd()"
+        >新增</a-button>
+        <a-button
+          type="primary"
+          :disabled="state.single"
+          @click="handleEdit()"
+        >修改</a-button>
+        <a-button
+          type="primary"
+          :disabled="state.multiple"
+          @click="handleDel()"
+        >删除</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '设计',
+                icon: 'fa-solid:mortar-pestle',
+                onClick: handleEdit.bind(null, record)
+              },
+              {
+                label: '修改',
+                icon: 'fa-solid:mortar-pestle',
+                color: 'error',
+                onClick: handleDel.bind(null, record)
+              }]"
+            :dropDownActions="[
+              {
+                label: '版本管理',
+                icon: 'fa-solid:mortar-pestle',
+                onClick: handleDel.bind(null, record),
+              },
+              {
+                label: '删除',
+                icon: 'fa-solid:mortar-pestle',
+                color: 'error',
+                onClick: handleDel.bind(null, record),
+              }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <FormModal @register="registerModal" @success="handleRefreshTable"/>
+  </PageWrapper>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, toRaw, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { listFormDefinition, delFormDefinition } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { useModal } from '/@/components/Modal';
+  import FormModal from './FormModal.vue';
+  import { columns, searchFormSchema } from './form.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { listToTree } from '/@/utils/helper/treeHelper';
+  import { listFormCategory } from '/@/api/platform/common/workflow/extension/controller/formCategory';
+
+  /** 类型规范统一声明定义区域 */
+  interface TableState {
+    ids: string[];
+    single: boolean;
+    multiple: boolean;
+    searchInfo: Recordable;
+    treeData: TreeItem[];
+  }
+
+  export default defineComponent({
+    name: 'WorkFlowForm',
+    components: {
+      BasicTable,
+      PageWrapper,
+      BasicTree,
+      TableAction,
+      FormModal,
+    },
+    setup() {
+
+      /** 通用变量统一声明区域 */
+      const state = reactive<TableState>({
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 搜索信息
+        searchInfo: {},
+        treeData: []
+      });
+
+      const { createConfirm, createMessage } = useMessage();
+      const [registerModal, { openModal }] = useModal();
+      const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal();
+      const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+        title: '流程表单列表',
+        api: listFormDefinition,
+        rowKey: 'id',
+        columns,
+        formConfig: {
+          compact: true,
+          labelWidth: 100,
+          schemas: searchFormSchema,
+          autoSubmitOnEnter: true,
+          showAdvancedButton: true,
+          autoAdvancedLine: 3,
+        },
+        rowSelection: { type: 'checkbox' },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        clickToRowSelect: false,
+        showIndexColumn: false,
+        searchInfo: state.searchInfo,
+        actionColumn: {
+          width: 220,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: false
+        },
+        handleSearchInfoFn: () => clearSelectedRowKeys()
+      });
+
+      onMounted(async () => {
+        state.treeData = listToTree(await listFormCategory());
+      });
+
+      /** 处理多选框选中数据 */
+      function handleSelectionChange(selection?: Recordable) {
+        const rowSelection = toRaw(selection?.keys) || [];
+        state.ids = rowSelection;
+        state.single = rowSelection.length != 1;
+        state.multiple = !rowSelection.length;
+      }
+
+      /** 新增按钮操作,行内新增与工具栏局域新增通用 */
+      function handleAdd() {
+        openModal(true,{ _tag: 'add' });
+      }
+
+      /** 编辑按钮操作,行内编辑 */
+      function handleEdit(record?: Recordable) {
+        record = record || { id: toRaw(state.ids) };
+        openModal(true, { _tag: 'edit', record });
+      }
+
+      /** 删除按钮操作,行内删除 */
+      async function handleDel(record?: Recordable) {
+        const ids = record?.id || toRaw(state.ids);
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: `是否确认删除表单编号为${ids}吗?`,
+          onOk: async () => {
+            await delFormDefinition(ids);
+            createMessage.success('删除成功!');
+            handleRefreshTable();
+          }
+        });
+      }
+
+      /** 处理表格刷新 */
+      function handleRefreshTable() {
+        clearSelectedRowKeys();
+        reload();
+      }
+
+      function handleSelect(selectedKeys: string[]) {
+        state.searchInfo.categoryId = selectedKeys[0];
+        handleRefreshTable();
+      }
+
+      return {
+        state,
+        registerTable,
+        registerModal,
+        registerResetPwdModal,
+        handleAdd,
+        handleEdit,
+        handleDel,
+        handleSelectionChange,
+        handleRefreshTable,
+        handleSelect,
+      };
+    }
+  });
+</script>