Browse Source

perf: 编写工作流表单模块

master
wangxiang 2 years ago
parent
commit
1d01543b21
  1. 4
      index.html
  2. 25
      src/api/platform/common/workflow/extension/controller/formCategory.ts
  3. 25
      src/api/platform/common/workflow/extension/controller/formDefinition.ts
  4. 28
      src/api/platform/common/workflow/extension/controller/formDefinitionJson.ts
  5. 10
      src/api/platform/common/workflow/extension/entity/formCategory.ts
  6. 17
      src/api/platform/common/workflow/extension/entity/formDefinition.ts
  7. 16
      src/api/platform/common/workflow/extension/entity/formDefinitionJson.ts
  8. 4
      src/components/Form/src/components/ApiTreeSelect.vue
  9. 2
      src/utils/helper/treeHelper.ts
  10. 79
      src/views/common/workflow/extension/form/FormModal.vue
  11. 108
      src/views/common/workflow/extension/form/form.data.ts
  12. 216
      src/views/common/workflow/extension/form/index.vue

4
index.html

@ -10,6 +10,10 @@
/> />
<title><%= title %></title> <title><%= title %></title>
<link rel="icon" href="/favicon.ico"/> <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> </head>
<body> <body>
<script> <script>

25
src/api/platform/common/workflow/extension/controller/formCategory.ts

@ -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}` });

25
src/api/platform/common/workflow/extension/controller/formDefinition.ts

@ -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}` });

28
src/api/platform/common/workflow/extension/controller/formDefinitionJson.ts

@ -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}` });

10
src/api/platform/common/workflow/extension/entity/formCategory.ts

@ -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[]>;

17
src/api/platform/common/workflow/extension/entity/formDefinition.ts

@ -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[]>;

16
src/api/platform/common/workflow/extension/entity/formDefinitionJson.ts

@ -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[]>;

4
src/components/Form/src/components/ApiTreeSelect.vue

@ -16,6 +16,7 @@
import { get } from 'lodash-es'; import { get } from 'lodash-es';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
import { LoadingOutlined } from '@ant-design/icons-vue'; import { LoadingOutlined } from '@ant-design/icons-vue';
import { listToTree, TreeHelperConfig } from '/@/utils/helper/treeHelper';
export default defineComponent({ export default defineComponent({
name: 'ApiTreeSelect', name: 'ApiTreeSelect',
@ -25,6 +26,8 @@
params: { type: Object }, params: { type: Object },
immediate: { type: Boolean, default: true }, immediate: { type: Boolean, default: true },
resultField: propTypes.string.def(''), resultField: propTypes.string.def(''),
listToTree: { type: Boolean, default: false },
treeConfig: { type: Object as PropType<TreeHelperConfig>,}
}, },
emits: ['options-change', 'change'], emits: ['options-change', 'change'],
setup(props, { attrs, emit }) { setup(props, { attrs, emit }) {
@ -76,6 +79,7 @@
if (!result) return; if (!result) return;
if (!isArray(result)) { if (!isArray(result)) {
result = get(result, props.resultField); result = get(result, props.resultField);
props.listToTree && (result = listToTree(result, props.treeConfig));
} }
treeData.value = (result as Recordable[]) || []; treeData.value = (result as Recordable[]) || [];
isFirstLoaded.value = true; isFirstLoaded.value = true;

2
src/utils/helper/treeHelper.ts

@ -5,7 +5,7 @@
* @create: 2022/4/7 * @create: 2022/4/7
*/ */
interface TreeHelperConfig { export interface TreeHelperConfig {
id: string; id: string;
children: string; children: string;
parentId: string; parentId: string;

79
src/views/common/workflow/extension/form/FormModal.vue

@ -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>

108
src/views/common/workflow/extension/form/form.data.ts

@ -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: '请输入表单名称',
},
},
];

216
src/views/common/workflow/extension/form/index.vue

@ -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>
Loading…
Cancel
Save