kanglai
/
kicc-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chore: 表单适配

master
wangxiang 2 years ago
parent
3ccff310e1
commit
ad9c815603
6 changed files with 506 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 80
      src/views/workflow/extension/form/FormCategoryModal.vue
  2. 11
      src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
  3. 4
      src/views/workflow/extension/form/index.vue
  4. 103
      src/views/workflow/extension/formJson/FormJsonModal.vue
  5. 164
      src/views/workflow/extension/formJson/formJson.data.ts
  6. 150
      src/views/workflow/extension/formJson/index.vue

80
src/views/workflow/extension/form/FormCategoryModal.vue
Unescape View File

@ -0,0 +1,80 @@ @@ -0,0 +1,80 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
minHeight="100px"
@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/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>

11
src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
Unescape View File

@ -9,8 +9,8 @@ @@ -9,8 +9,8 @@
>
<div id="formDesign"/>
<template #centerFooter>
<a-button type="primary" @click="handleSubmitForm(0)">保存草稿</a-button>
<a-button type="primary" @click="handleSubmitForm(1)">保存并发布</a-button>
<a-button type="primary" @click="handleSubmitForm('0')">保存草稿</a-button>
<a-button type="primary" @click="handleSubmitForm('1')">保存并发布</a-button>
<a-button danger type="primary" @click="closeModal">放弃</a-button>
</template>
</BasicModal>
@ -62,10 +62,13 @@ @@ -62,10 +62,13 @@
[GlStateEnum.FORM_DESIGN_PROPS_KEY]: formDesignProps
}
}), { sandbox: { experimentalStyleIsolation: true }});
// 处理清除脏数据
state.form = {};
formDesignProps.options = {};
state.tag = data._tag;
const id = data.record?.id;
state.form.formDefinitionId = data.record?.formDefinitionId;
// 处理设置数据
const props: Partial<ModalProps> = { confirmLoading: false };
switch (state.tag) {
case 'add':
@ -85,11 +88,11 @@ @@ -85,11 +88,11 @@
}
/** 处理弹出框提交 */
async function handleSubmitForm(status: number) {
async function handleSubmitForm(status: string) {
try {
const formRef = microAppStore.getFormDesignApp.getFormDesignRef();
state.form.json = formRef.getWidgetFormJson();
this.form.status = status;
state.form.status = status;
state.form.isPrimary = '1';
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });

4
src/views/workflow/extension/form/index.vue
Unescape View File

@ -234,9 +234,9 @@ @@ -234,9 +234,9 @@
}
/** 处理工作流表单设计 */
function handleWorkFlowFormDesign (row) {
function handleWorkFlowFormDesign(row: Recordable) {
const record = row.formDefinitionJson || {};
openWorkflowFormModal(true, { _tag: 'add', record });
openWorkflowFormModal(true, { _tag: 'edit', record });
}
function handleSelect(selectedKeys: string[]) {

103
src/views/workflow/extension/formJson/FormJsonModal.vue
Unescape View File

@ -0,0 +1,103 @@ @@ -0,0 +1,103 @@
<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 './formJson.data';
import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { isEmpty } from '/@/utils/is';
/** 通用变量统一声明区域 */
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 clientId = data.record?.clientId;
const props: Partial<ModalProps> = { confirmLoading: false };
await updateSchema({
field: 'clientId',
componentProps: {
disabled: unref(tag) != 'add'
},
rules: [
{
required: true,
whitespace: true,
message: '请输入客户端编码'
},
{
validator: async (rule, value) => {
if (!isEmpty(value)) {
const result = await listClient({ clientId: value });
const list = result.data?.filter(item => item.clientId != clientId);
if(list?.length > 0) return Promise.reject('该客户端编码已存在');
}
return Promise.resolve();
},
validateTrigger: 'blur'
}]
});
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增客户端';
break;
case 'edit':
props.title = '编辑客户端';
await setFieldsValue(await getClient(clientId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addClient(formData);
break;
case 'edit':
await editClient(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

164
src/views/workflow/extension/formJson/formJson.data.ts
Unescape View File

@ -0,0 +1,164 @@ @@ -0,0 +1,164 @@
/**
* @program: kicc-ui
* @description: 授权客户端模块动态渲染配置
* @author: entfrm开发团队-王翔
* @create: 2022/4/21
*/
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
/** 表格列配置 */
export const columns: BasicColumn[] = [
{
title: '客户端Id',
dataIndex: 'clientId',
width: 100
},
{
title: '客户端密钥',
dataIndex: 'clientSecret',
width: 100
},
{
title: '授权类型',
dataIndex: 'authorizedGrantTypes',
width: 130
},
{
title: '授权范围',
dataIndex: 'scope',
width: 90
},
{
title: '令牌过期秒数',
dataIndex: 'accessTokenValidity',
width: 130
},
{
title: '令牌过期秒数',
dataIndex: 'refreshTokenValidity',
width: 130
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 100
}
];
/** 搜索表单配置 */
export const searchFormSchema: FormSchema[] = [
{
field: 'clientId',
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 formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'clientId',
label: '客户端Id',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'clientSecret',
label: '客户端密钥',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'authorizedGrantTypes',
label: '授权类型',
component: 'InputTextArea',
required:true,
componentProps: {
rows: 3
},
colProps: {
span: 24
}
},
{
field: 'scope',
label: '授权范围',
component: 'Input',
required:true,
colProps: {
span: 12
}
},
{
field: 'accessTokenValidity',
label: '过期秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'refreshTokenValidity',
label: '刷新秒数',
component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
colProps: {
span: 12
}
},
{
field: 'webServerRedirectUri',
label: '回调地址',
component: 'Input',
colProps: {
span: 12
}
},
{
field: 'additionalInformation',
label: '附加说明',
component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
}
];

150
src/views/workflow/extension/formJson/index.vue
Unescape View File

@ -0,0 +1,150 @@ @@ -0,0 +1,150 @@
<template>
<div>
<BasicTable
@register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button
v-auth="['client_add']"
type="primary"
@click="handleAdd()"
>新增客户端</a-button>
<a-button
v-auth="['client_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改客户端</a-button>
<a-button
v-auth="['client_del']"
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-regular:pen-to-square',
auth: ['client_edit'],
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
auth: ['client_del'],
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ClientModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<script lang="ts" setup>
/**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,采用 setup 写法
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔
*/
import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listClient, delClient } from '/@/api/platform/system/controller/client';
import { useModal } from '/@/components/Modal';
import ClientModal from './ClientModal.vue';
import { columns, searchFormSchema } from './formJson.data';
import { useMessage } from '/@/hooks/web/useMessage';
/** 类型规范统一声明定义区域 */
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '客户端列表',
api: listClient,
rowKey: 'clientId',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
//slots: { customRender: 'action' },
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { clientId: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const clientIds = record?.clientId || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除客户端编号为${clientIds}客户端吗?`,
onOk: async () => {
await delClient(clientIds);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>
Write Preview
Loading…
Cancel
Save