docs: 修正二开文档里一处代码错误
fix: 移除代码生成器中列表页的审批对话框(已经改为路由,对话框无用),以及行中的发起流程按钮,现在查看按钮可以同时处理表单和流程 fix: 环境变量不在git里保存,防止多人开发时互相覆盖
This commit is contained in:
38
.env.development.example
Normal file
38
.env.development.example
Normal file
@ -0,0 +1,38 @@
|
||||
# 是否开启mock数据,关闭时需要自行对接后台接口
|
||||
VITE_USE_MOCK = false
|
||||
|
||||
# 资源公共路径,需要以 /开头和结尾
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 本地开发代理,可以解决跨域及多地址代理
|
||||
# 如果接口地址匹配到,则会转发到http://localhost:3000,防止本地出现跨域问题
|
||||
# 可以有多个,注意多个不能换行,否则代理将会失效
|
||||
# VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
|
||||
# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
|
||||
|
||||
# 是否删除Console.log
|
||||
VITE_DROP_CONSOLE = false
|
||||
|
||||
# 接口地址
|
||||
# 如果没有跨域问题,直接在这里配置即可
|
||||
VITE_GLOB_API_URL=http://10.133.96.105:8077
|
||||
# 报表系统地址
|
||||
VITE_GLOB_REPORT_URL=http://10.133.96.105:3100
|
||||
|
||||
# 文件上传接口 可选
|
||||
VITE_GLOB_UPLOAD_URL = /system/oss/upload
|
||||
|
||||
# 文件预览接口 可选
|
||||
VITE_GLOB_UPLOAD_PREVIEW = http://10.0.252.28:8012/onlinePreview?url=
|
||||
|
||||
#外部url地址
|
||||
VITE_GLOB_OUT_LINK_URL = ['http://localhost:4100']
|
||||
|
||||
#打印项目地址
|
||||
VITE_GLOB_PRINT_BASE_URL = http://114.116.210.204:3300
|
||||
|
||||
# 接口地址前缀,有些系统所有接口地址都有前缀,可以在这里统一加,方便切换
|
||||
VITE_GLOB_API_URL_PREFIX =
|
||||
|
||||
# 屏蔽通知消息的轮询
|
||||
VITE_DISABLE_NEWS = true
|
||||
38
.env.production.example
Normal file
38
.env.production.example
Normal file
@ -0,0 +1,38 @@
|
||||
# 是否开启mock
|
||||
VITE_USE_MOCK = true
|
||||
|
||||
# 资源公共路径,需要以 / 开头和结尾
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 是否删除Console.log
|
||||
VITE_DROP_CONSOLE = true
|
||||
|
||||
# 打包是否输出gz|br文件
|
||||
# 可选: gzip | brotli | none
|
||||
# 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件
|
||||
VITE_BUILD_COMPRESS = 'gzip'
|
||||
|
||||
# 使用compress时是否删除源文件,默认false
|
||||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
|
||||
|
||||
# 接口地址 可以由nginx做转发或者直接写实际地址
|
||||
VITE_GLOB_API_URL=http://10.133.96.60:8088
|
||||
|
||||
|
||||
# 文件上传地址 可以由nginx做转发或者直接写实际地址
|
||||
VITE_GLOB_UPLOAD_URL = /system/oss/upload
|
||||
|
||||
# 文件预览接口 可选
|
||||
VITE_GLOB_UPLOAD_PREVIEW = http://114.116.210.204:8012/onlinePreview?url=
|
||||
|
||||
#外部url地址
|
||||
VITE_GLOB_OUT_LINK_URL = ['http://114.116.210.204:4100']
|
||||
|
||||
#打印项目地址
|
||||
VITE_GLOB_PRINT_BASE_URL = http://114.116.210.204:3300
|
||||
|
||||
# 接口地址前缀,有些系统所有接口地址都有前缀,可以在这里统一加,方便切换
|
||||
VITE_GLOB_API_URL_PREFIX =
|
||||
|
||||
# 打包是否开启pwa功能
|
||||
VITE_USE_PWA = false
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -12,6 +12,8 @@ tests/server/static/upload
|
||||
.env.local
|
||||
.env.*.local
|
||||
.eslintcache
|
||||
.env.development
|
||||
.env.production
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
|
||||
@ -11,9 +11,15 @@
|
||||
- 表单和表格需要合理调整字段宽度,响应式布局下需要使用定宽模式,一般情况下,字段的宽度取平均字长 + 2个汉字的宽度为宜,不要留太长的label,也要避免出现label换行
|
||||
|
||||
## Q&A
|
||||
|
||||
### 为什么表单所有字段都成了必填
|
||||
默认情况下,绑定流程后,新建节点的所有字段都被设置为必填,需要在流程的开始节点-表单设置中去掉非必填的项。
|
||||
|
||||
### 表单设计和代码模版有什么区别
|
||||
代码模版生成的本地文件有二开支持,表单符合UI规范,表单设计可以在线发布,像低开一样,不用写代码,但是界面不符合UI规范。
|
||||
|
||||
两种方法表单设计器支持内容一致,也都支持流程,差别只是UI方面。建议在设计业务模块优先使用代码模版。
|
||||
|
||||
## 在Tab页中打开表单/流程
|
||||
如果你需要自己编程实现Tab页跳转,或者升级旧版框架的页面,可以参考下面步骤:
|
||||
```typescript
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
components: { Form, Col, SimpleFormItem, Row, FormItem },
|
||||
mixins: [SimpleFormSetup],
|
||||
setup(props, ctx) {
|
||||
const ret = SimpleForm.setup(props, ctx);
|
||||
const ret = SimpleFormSetup.setup(props, ctx);
|
||||
return {
|
||||
...ret
|
||||
};
|
||||
|
||||
0
docs/表单二开/3_明细表二开例子.md
Normal file
0
docs/表单二开/3_明细表二开例子.md
Normal file
1
docs/表单二开/4_表单tab页拆分+改为进度条样式.md
Normal file
1
docs/表单二开/4_表单tab页拆分+改为进度条样式.md
Normal file
@ -0,0 +1 @@
|
||||
# 二开实例:Tab页拆分+样式调整+校验
|
||||
@ -1,16 +1,12 @@
|
||||
<template>
|
||||
<div ref="formWrap">
|
||||
<Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign"
|
||||
:layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol"
|
||||
@keypress.enter="handleEnterPress">
|
||||
<Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
|
||||
<Row v-bind="getRow">
|
||||
<template v-for="schema in getSchemas" :key="schema.field">
|
||||
<Col v-if="getIfShow(schema, formModel[schema.field])"
|
||||
v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
|
||||
<Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
|
||||
<div v-if="schema?.componentProps.respBreakLine" style="width: 100%; height: 1px"></div>
|
||||
<template v-if="showComponent(schema) && schema.type !== 'slot'">
|
||||
<SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi"
|
||||
:isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
|
||||
<SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
|
||||
</template>
|
||||
<template v-if="schema.type === 'slot'">
|
||||
<slot :formModel="formModel" :name="schema.slotName" :schema="schema"></slot>
|
||||
@ -34,21 +30,21 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue';
|
||||
import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil, debounce } from 'lodash-es';
|
||||
import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted, onUnmounted } from 'vue';
|
||||
import { CardComponentProps, FormActionType, FormProps, FormSchema, GridComponentProps, TabComponentProps, regTestProps, requestProps } from '../../Form/src/types/form';
|
||||
import SimpleFormItem from './components/SimpleFormItem.vue';
|
||||
import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
|
||||
import { arrayValueComponents, defaultValueComponents, staticDataComponents, noFieldComponent, noDefaultValueComponents, noShowWorkFlowComponents, noShowGenerateComponents } from '../../Form/src/helper';
|
||||
import { deepMerge } from '/@/utils';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { needDicDefaultValue } from '../../Designer/src/types';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { camelCaseString } from '/@/utils/event/design';
|
||||
import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue';
|
||||
import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil, debounce } from 'lodash-es';
|
||||
import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted, onUnmounted } from 'vue';
|
||||
import { CardComponentProps, FormActionType, FormProps, FormSchema, GridComponentProps, TabComponentProps, regTestProps, requestProps } from '../../Form/src/types/form';
|
||||
import SimpleFormItem from './components/SimpleFormItem.vue';
|
||||
import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
|
||||
import { arrayValueComponents, defaultValueComponents, staticDataComponents, noFieldComponent, noDefaultValueComponents, noShowWorkFlowComponents, noShowGenerateComponents } from '../../Form/src/helper';
|
||||
import { deepMerge } from '/@/utils';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { needDicDefaultValue } from '../../Designer/src/types';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { camelCaseString } from '/@/utils/event/design';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { notification } = useMessage();
|
||||
@ -57,13 +53,13 @@ import { camelCaseString } from '/@/utils/event/design';
|
||||
const wrapWidth = ref(960);
|
||||
const formData = inject('formData', { noInject: true });
|
||||
|
||||
const propsRef = ref<Partial<FormProps>>({});
|
||||
const propsRef = ref<Partial<FormProps>>({});
|
||||
|
||||
const schemaRef = ref<Nullable<FormSchema[]>>(null);
|
||||
const schemaRef = ref<Nullable<FormSchema[]>>(null);
|
||||
|
||||
const emit = defineEmits(['submit']);
|
||||
const emit = defineEmits(['submit']);
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
// 表单配置规则
|
||||
formProps: {
|
||||
type: Object as PropType<FormProps>
|
||||
@ -71,7 +67,7 @@ const props = defineProps({
|
||||
//表单数据
|
||||
formModel: {
|
||||
type: Object as PropType<Recordable>,
|
||||
default: () => { }
|
||||
default: () => {}
|
||||
},
|
||||
//是否是工作流
|
||||
isWorkFlow: {
|
||||
@ -87,33 +83,33 @@ const props = defineProps({
|
||||
watches: {
|
||||
type: Array
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const getSchemas = computed<FormSchema[]>(() => {
|
||||
const getSchemas = computed<FormSchema[]>(() => {
|
||||
return (unref(getProps).schemas as any) || unref(schemaRef);
|
||||
});
|
||||
});
|
||||
|
||||
// Get the basic configuration of the form
|
||||
const getProps = computed((): FormProps => {
|
||||
// Get the basic configuration of the form
|
||||
const getProps = computed((): FormProps => {
|
||||
return { ...(props.formProps as FormProps), ...unref(propsRef) } as FormProps;
|
||||
});
|
||||
});
|
||||
|
||||
// Get uniform row style and Row configuration for the entire form
|
||||
const getRow = computed((): Recordable => {
|
||||
// Get uniform row style and Row configuration for the entire form
|
||||
const getRow = computed((): Recordable => {
|
||||
const { baseRowStyle = {}, rowProps } = props.formProps!;
|
||||
|
||||
return {
|
||||
style: baseRowStyle,
|
||||
...rowProps
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
function getWrapSize() {
|
||||
function getWrapSize() {
|
||||
const rect = formWrap.value?.getBoundingClientRect();
|
||||
wrapWidth.value = rect?.width || 960;
|
||||
}
|
||||
}
|
||||
|
||||
function getColWidth(schema: any) {
|
||||
function getColWidth(schema: any) {
|
||||
const compProps = schema.componentProps;
|
||||
if (compProps?.responsive) {
|
||||
if (compProps.respNewRow) {
|
||||
@ -130,11 +126,11 @@ function getColWidth(schema: any) {
|
||||
}
|
||||
}
|
||||
return schema.colProps?.span;
|
||||
}
|
||||
}
|
||||
|
||||
const debGetWrapSize = debounce(getWrapSize, 300);
|
||||
const debGetWrapSize = debounce(getWrapSize, 300);
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', debGetWrapSize);
|
||||
getWrapSize();
|
||||
nextTick(() => {
|
||||
@ -145,17 +141,17 @@ onMounted(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', debGetWrapSize);
|
||||
});
|
||||
});
|
||||
|
||||
function showComponent(schema) {
|
||||
function showComponent(schema) {
|
||||
return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
|
||||
}
|
||||
}
|
||||
|
||||
function getIsShow(schema: FormSchema, itemValue: any): boolean {
|
||||
function getIsShow(schema: FormSchema, itemValue: any): boolean {
|
||||
const { show } = schema;
|
||||
const { showAdvancedButton } = getProps.value;
|
||||
const itemIsAdvanced = showAdvancedButton ? (isBoolean(schema.isAdvanced) ? schema.isAdvanced : true) : true;
|
||||
@ -176,9 +172,9 @@ function getIsShow(schema: FormSchema, itemValue: any): boolean {
|
||||
|
||||
isShow = isShow && itemIsAdvanced;
|
||||
return isShow;
|
||||
}
|
||||
}
|
||||
|
||||
function getIfShow(schema: FormSchema, itemValue: any): boolean {
|
||||
function getIfShow(schema: FormSchema, itemValue: any): boolean {
|
||||
const { ifShow } = schema;
|
||||
|
||||
let isIfShow = true;
|
||||
@ -195,16 +191,16 @@ function getIfShow(schema: FormSchema, itemValue: any): boolean {
|
||||
});
|
||||
}
|
||||
return isIfShow;
|
||||
}
|
||||
}
|
||||
|
||||
const formModel = reactive<Recordable>(props.formModel);
|
||||
const isCustom = inject<boolean>('isCustomForm', false);
|
||||
provide('formModel', formModel);
|
||||
provide('formProps', getProps);
|
||||
provide('isCustomForm', isCustom || props.isWorkFlow);
|
||||
provide('isCamelCase', props.isCamelCase);
|
||||
formData.formModel=formModel;
|
||||
const handleSubmit = async () => {
|
||||
const formModel = reactive<Recordable>(props.formModel);
|
||||
const isCustom = inject<boolean>('isCustomForm', false);
|
||||
provide('formModel', formModel);
|
||||
provide('formProps', getProps);
|
||||
provide('isCustomForm', isCustom || props.isWorkFlow);
|
||||
provide('isCamelCase', props.isCamelCase);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const { submitFunc } = unref(getProps);
|
||||
if (submitFunc && isFunction(submitFunc)) {
|
||||
@ -213,18 +209,18 @@ const handleSubmit = async () => {
|
||||
}
|
||||
const res = await formRef.value!.validate();
|
||||
emit('submit', res);
|
||||
} catch (error) { }
|
||||
};
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
const handleReset = () => {
|
||||
resetFields();
|
||||
};
|
||||
};
|
||||
|
||||
const refreshFieldObj = ref<object>({});
|
||||
const refreshFieldObj = ref<object>({});
|
||||
|
||||
getComponent(getSchemas.value);
|
||||
getComponent(getSchemas.value);
|
||||
|
||||
function getComponent(component) {
|
||||
function getComponent(component) {
|
||||
const layoutComponents = ['tab', 'grid', 'card'];
|
||||
component?.map((info) => {
|
||||
if (layoutComponents.includes(info.type!)) {
|
||||
@ -253,9 +249,9 @@ function getComponent(component) {
|
||||
setComponentDefault(info);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setComponentDefault(item) {
|
||||
function setComponentDefault(item) {
|
||||
if ((staticDataComponents.includes(item.component) && (item.componentProps as any)?.datasourceType === 'staticData') || (needDicDefaultValue.includes(item.type) && (item.componentProps as any)?.datasourceType === 'dic')) {
|
||||
let { defaultSelect } = item.componentProps as any;
|
||||
formModel[item.field] = defaultSelect;
|
||||
@ -285,12 +281,12 @@ function setComponentDefault(item) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 回车提交表单
|
||||
*/
|
||||
function handleEnterPress(e: KeyboardEvent) {
|
||||
function handleEnterPress(e: KeyboardEvent) {
|
||||
const { autoSubmitOnEnter } = unref(getProps);
|
||||
if (!autoSubmitOnEnter) return;
|
||||
if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
|
||||
@ -299,21 +295,21 @@ function handleEnterPress(e: KeyboardEvent) {
|
||||
handleSubmit();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//调用表单验证
|
||||
const validate = async (nameList?: NamePath[]): Promise<any> => formRef.value?.validate(nameList);
|
||||
//调用表单验证
|
||||
const validate = async (nameList?: NamePath[]): Promise<any> => formRef.value?.validate(nameList);
|
||||
|
||||
//清除表单验证
|
||||
const clearValidate = async (name?: string | string[]): Promise<any> => formRef.value?.clearValidate(name);
|
||||
//清除表单验证
|
||||
const clearValidate = async (name?: string | string[]): Promise<any> => formRef.value?.clearValidate(name);
|
||||
|
||||
//跳到某个字段
|
||||
const scrollToField = async (name: NamePath, options?: ScrollOptions): Promise<any> => formRef.value?.scrollToField(name, options);
|
||||
//跳到某个字段
|
||||
const scrollToField = async (name: NamePath, options?: ScrollOptions): Promise<any> => formRef.value?.scrollToField(name, options);
|
||||
|
||||
//验证某个字段
|
||||
const validateFields = async (nameList?: NamePath[] | string, options?: ValidateOptions): Promise<any> => formRef.value?.validateFields(nameList, options);
|
||||
//验证某个字段
|
||||
const validateFields = async (nameList?: NamePath[] | string, options?: ValidateOptions): Promise<any> => formRef.value?.validateFields(nameList, options);
|
||||
|
||||
const findSchema = (schemaArr, key) => {
|
||||
const findSchema = (schemaArr, key) => {
|
||||
let schema;
|
||||
const formListComponent = ['tab', 'grid', 'card'];
|
||||
schemaArr?.some((info) => {
|
||||
@ -341,14 +337,14 @@ const findSchema = (schemaArr, key) => {
|
||||
}
|
||||
});
|
||||
return schema;
|
||||
};
|
||||
};
|
||||
|
||||
const setDefaultValue = async (): Promise<void> => {
|
||||
const setDefaultValue = async (): Promise<void> => {
|
||||
getComponent(getSchemas.value);
|
||||
};
|
||||
};
|
||||
|
||||
// 重置表单所有数据
|
||||
const resetFields = async (): Promise<void> => {
|
||||
// 重置表单所有数据
|
||||
const resetFields = async (): Promise<void> => {
|
||||
Object.keys(formModel).forEach((key) => {
|
||||
//没有绑定字段的组件不处理
|
||||
if (!key) return;
|
||||
@ -394,15 +390,15 @@ const resetFields = async (): Promise<void> => {
|
||||
}
|
||||
});
|
||||
nextTick(() => clearValidate());
|
||||
};
|
||||
};
|
||||
|
||||
// 更改formProps
|
||||
const setProps = async (formProps: Partial<FormProps>): Promise<void> => {
|
||||
// 更改formProps
|
||||
const setProps = async (formProps: Partial<FormProps>): Promise<void> => {
|
||||
propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
|
||||
};
|
||||
};
|
||||
|
||||
//设定某个字段值 慎用 建议直接页面直接操作formModel数据
|
||||
const setFieldsValue = async (values: Recordable): Promise<void> => {
|
||||
//设定某个字段值 慎用 建议直接页面直接操作formModel数据
|
||||
const setFieldsValue = async (values: Recordable): Promise<void> => {
|
||||
Object.keys(values).forEach((key) => {
|
||||
if (!isNil(key)) {
|
||||
formModel[key] = values[key];
|
||||
@ -410,14 +406,14 @@ const setFieldsValue = async (values: Recordable): Promise<void> => {
|
||||
});
|
||||
|
||||
executeEvent(getSchemas.value);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
/**
|
||||
* 执行schema中 所有change事件
|
||||
* 修改bug #5090
|
||||
* 为了保证表单赋值触发所有组件的change事件
|
||||
*/
|
||||
const executeEvent = (allSchemas: FormSchema[]) => {
|
||||
const executeEvent = (allSchemas: FormSchema[]) => {
|
||||
for (const schema of allSchemas) {
|
||||
//如果是这几个组件 需要查询子级
|
||||
if (['Card', 'Tab', 'Grid'].includes(schema.component)) {
|
||||
@ -478,15 +474,15 @@ const executeEvent = (allSchemas: FormSchema[]) => {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
};
|
||||
};
|
||||
|
||||
//获取表单值 慎用 建议直接页面直接操作formModel数据
|
||||
const getFieldsValue = (): Recordable => {
|
||||
//获取表单值 慎用 建议直接页面直接操作formModel数据
|
||||
const getFieldsValue = (): Recordable => {
|
||||
return toRaw(unref(formModel));
|
||||
};
|
||||
};
|
||||
|
||||
//更新schema
|
||||
const updateSchema = async (data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> => {
|
||||
//更新schema
|
||||
const updateSchema = async (data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> => {
|
||||
let updateData: Partial<FormSchema>[] = [];
|
||||
if (isObject(data)) {
|
||||
updateData.push(data as FormSchema);
|
||||
@ -519,8 +515,8 @@ const updateSchema = async (data: Partial<FormSchema> | Partial<FormSchema>[]):
|
||||
});
|
||||
|
||||
schemaRef.value = uniqBy(schema, 'field');
|
||||
};
|
||||
const deepEachChild = (childs: GridComponentProps[] | TabComponentProps[] | CardComponentProps[], thisItem: FormSchema) => {
|
||||
};
|
||||
const deepEachChild = (childs: GridComponentProps[] | TabComponentProps[] | CardComponentProps[], thisItem: FormSchema) => {
|
||||
childs?.forEach((child: GridComponentProps | CardComponentProps | TabComponentProps) => {
|
||||
child.list.forEach((it: FormSchema) => {
|
||||
if (['Card', 'Tab', 'Grid'].includes(it.component)) {
|
||||
@ -534,10 +530,10 @@ const deepEachChild = (childs: GridComponentProps[] | TabComponentProps[] | Card
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
//重置schema
|
||||
const resetSchema = async (data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> => {
|
||||
//重置schema
|
||||
const resetSchema = async (data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> => {
|
||||
let updateData: Partial<FormSchema>[] = [];
|
||||
if (isObject(data)) {
|
||||
updateData.push(data as FormSchema);
|
||||
@ -553,9 +549,9 @@ const resetSchema = async (data: Partial<FormSchema> | Partial<FormSchema>[]): P
|
||||
}
|
||||
|
||||
schemaRef.value = updateData as FormSchema[];
|
||||
};
|
||||
//移除schema
|
||||
const removeSchemaByFiled = async (fields: string | string[]): Promise<void> => {
|
||||
};
|
||||
//移除schema
|
||||
const removeSchemaByFiled = async (fields: string | string[]): Promise<void> => {
|
||||
const schemaList: FormSchema[] = cloneDeep(unref(getSchemas));
|
||||
if (!fields) {
|
||||
return;
|
||||
@ -575,9 +571,9 @@ const removeSchemaByFiled = async (fields: string | string[]): Promise<void> =>
|
||||
}
|
||||
}
|
||||
schemaRef.value = schemaList;
|
||||
};
|
||||
//追加schema
|
||||
const appendSchemaByField = async (schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined): Promise<void> => {
|
||||
};
|
||||
//追加schema
|
||||
const appendSchemaByField = async (schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined): Promise<void> => {
|
||||
const schemaList: FormSchema[] = cloneDeep(unref(getSchemas));
|
||||
|
||||
const index = schemaList.findIndex((schema) => schema.field === prefixField);
|
||||
@ -591,10 +587,10 @@ const appendSchemaByField = async (schema: FormSchema, prefixField: string | und
|
||||
}
|
||||
|
||||
schemaRef.value = schemaList;
|
||||
};
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = async (e?: Event): Promise<void> => {
|
||||
// 提交
|
||||
const submit = async (e?: Event): Promise<void> => {
|
||||
e && e.preventDefault();
|
||||
const { submitFunc } = unref(getProps);
|
||||
if (submitFunc && isFunction(submitFunc)) {
|
||||
@ -609,9 +605,9 @@ const submit = async (e?: Event): Promise<void> => {
|
||||
} catch (error: any) {
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const showModal = async (modal: ModalFuncProps) => {
|
||||
const showModal = async (modal: ModalFuncProps) => {
|
||||
Modal.confirm({
|
||||
title: modal.title,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
@ -620,15 +616,15 @@ const showModal = async (modal: ModalFuncProps) => {
|
||||
onCancel: modal.onCancel,
|
||||
...modal
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const regTest = async (regular: regTestProps) => {
|
||||
const regTest = async (regular: regTestProps) => {
|
||||
const regExpression = regular.regExpression;
|
||||
const testRes = regExpression.test(regular.testValue);
|
||||
testRes ? message.success(regular.successMessage) : message.error(regular.errorMessage);
|
||||
};
|
||||
};
|
||||
|
||||
const httpRequest = async (request: requestProps) => {
|
||||
const httpRequest = async (request: requestProps) => {
|
||||
if (request.requestType.toLowerCase() === 'get') {
|
||||
return defHttp[request.requestType](
|
||||
{
|
||||
@ -650,17 +646,17 @@ const httpRequest = async (request: requestProps) => {
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const refreshAPI = (field: string) => {
|
||||
const refreshAPI = (field: string) => {
|
||||
if (!field) return;
|
||||
if (!Object.keys(unref(refreshFieldObj)).includes(field)) {
|
||||
unref(refreshFieldObj)[field] = 0;
|
||||
}
|
||||
unref(refreshFieldObj)[field]++;
|
||||
};
|
||||
};
|
||||
|
||||
const changeStyle = (schema, style, field?) => {
|
||||
const changeStyle = (schema, style, field?) => {
|
||||
if (field) {
|
||||
const changeSchema = unref(getSchemas).filter((item) => {
|
||||
if (props.isCamelCase) {
|
||||
@ -672,9 +668,9 @@ const changeStyle = (schema, style, field?) => {
|
||||
schema = changeSchema[0];
|
||||
}
|
||||
schema.componentProps.style = { ...schema.componentProps.style, ...style };
|
||||
};
|
||||
};
|
||||
|
||||
const formApi: FormActionType = {
|
||||
const formApi: FormActionType = {
|
||||
submit,
|
||||
validate,
|
||||
clearValidate,
|
||||
@ -694,8 +690,8 @@ const formApi: FormActionType = {
|
||||
refreshAPI,
|
||||
changeStyle,
|
||||
setDefaultValue
|
||||
};
|
||||
};
|
||||
|
||||
//将表单方法 导出 给父组件使用。
|
||||
defineExpose<FormActionType>(formApi);
|
||||
//将表单方法 导出 给父组件使用。
|
||||
defineExpose<FormActionType>(formApi);
|
||||
</script>
|
||||
|
||||
@ -581,55 +581,6 @@ export function buildListCode(model: GeneratorConfig): string {
|
||||
</BasicTable>
|
||||
${model.listConfig.isLeftMenu ? '</div>' : ''}
|
||||
|
||||
${
|
||||
hasStartWorkButton
|
||||
? `
|
||||
<LookProcess
|
||||
v-if="visibleLookProcessRef"
|
||||
:taskId="taskIdRef"
|
||||
:processId="processIdRef"
|
||||
@close="visibleLookProcessRef = false"
|
||||
:visible="visibleLookProcessRef"
|
||||
/>
|
||||
<LaunchProcess
|
||||
v-if="visibleLaunchProcessRef"
|
||||
:schemaId="schemaIdRef"
|
||||
:form-data="formDataRef"
|
||||
:form-id="formIdComputedRef"
|
||||
:rowKeyData="rowKeyData"
|
||||
:draftsId="draftsId"
|
||||
@close="handleCloseLaunch"
|
||||
/>
|
||||
<ApprovalProcess
|
||||
v-if="visibleApproveProcessRef"
|
||||
:taskId="taskIdRef"
|
||||
:processId="processIdRef"
|
||||
:schemaId="schemaIdRef"
|
||||
@close="handleCloseApproval"
|
||||
:visible="visibleApproveProcessRef"
|
||||
/>
|
||||
${
|
||||
hasFlowRecordButton
|
||||
? `<BasicModal
|
||||
v-if="visibleFlowRecordModal"
|
||||
:visible="visibleFlowRecordModal"
|
||||
:title="t('查看流转记录')"
|
||||
:paddingRight="15"
|
||||
:showOkBtn="false"
|
||||
:width="1200"
|
||||
@visible-change="
|
||||
(v) => {
|
||||
visibleFlowRecordModal = v;
|
||||
}
|
||||
"
|
||||
:bodyStyle="{ minHeight: '400px !important' }"
|
||||
>
|
||||
<FlowRecord :processId="processIdRef" />
|
||||
</BasicModal>`
|
||||
: ''
|
||||
}`
|
||||
: ''
|
||||
}
|
||||
${
|
||||
hasTemplatePrint
|
||||
? ` <PrintPreview
|
||||
@ -999,8 +950,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
|
||||
});
|
||||
|
||||
function dbClickRow(record) {
|
||||
if (record.workflowData?.taskIds && record.workflowData.taskIds.length) {
|
||||
const { processId, taskIds, schemaId } = record.workflowData;
|
||||
const { processId, taskIds, schemaId } = record.workflowData || {};
|
||||
if (taskIds && taskIds.length) {
|
||||
router.push({
|
||||
path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
|
||||
query: {
|
||||
@ -1008,8 +959,7 @@ ${hasTemplatePrint ? ' reactive ' : ''}
|
||||
formName: formName
|
||||
}
|
||||
});
|
||||
} else if (record.workflowData?.schemaId && !record.workflowData.taskIds && record.workflowData.processId) {
|
||||
const { processId, schemaId } = record.workflowData;
|
||||
} else if (schemaId && !taskIds && processId) {
|
||||
router.push({
|
||||
path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
|
||||
query: {
|
||||
@ -1377,13 +1327,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
|
||||
${
|
||||
formType === 'modal'
|
||||
? `
|
||||
router.push({
|
||||
path: '/form/${lowerClassName}/' + record.id + '/viewForm',
|
||||
query: {
|
||||
formPath: '${model.outputConfig.outputValue}/${lowerClassName}',
|
||||
formName: formName
|
||||
}
|
||||
});`
|
||||
dbClickRow(record);
|
||||
`
|
||||
: `
|
||||
openDrawer(true, {
|
||||
isView: true,
|
||||
@ -1527,38 +1472,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
|
||||
if (record.workflowData?.enabled) {
|
||||
//与工作流有关联的表单
|
||||
if (record.workflowData.status) {
|
||||
//如果是本人需要审批的数据 就会有taskIds 所以需要修改绑定事件
|
||||
const act: ActionItem = {};
|
||||
if (record.workflowData.taskIds) {
|
||||
act.tooltip = '查看流程(待审批)';
|
||||
act.icon = 'daishenpi|svg';
|
||||
act.onClick = handleApproveProcess.bind(null, record);
|
||||
// 查看按钮现在同时有流程和表单的功能
|
||||
} else {
|
||||
act.tooltip =
|
||||
'查看流程' + (record.workflowData.status === 'ACTIVE' ? '(审批中)' : '(已完成)');
|
||||
act.icon =
|
||||
record.workflowData.status === 'ACTIVE' ? 'jinshenpi|svg' : 'shenpiwancheng|svg';
|
||||
act.onClick = handleStartwork.bind(null, record);
|
||||
}
|
||||
actionsList.unshift(act);
|
||||
${
|
||||
hasFlowRecordButton
|
||||
? `if (hasFlowRecord) {
|
||||
actionsList.splice(1, 0, {
|
||||
tooltip: '查看流转记录',
|
||||
icon: 'liuzhuanxinxi|svg',
|
||||
onClick: handleFlowRecord.bind(null, record),
|
||||
});
|
||||
}`
|
||||
: ''
|
||||
}
|
||||
|
||||
} else {
|
||||
actionsList.unshift({
|
||||
icon: 'faqishenpi|svg',
|
||||
tooltip: record.workflowData.draftId ? '编辑草稿' : '发起审批' ,
|
||||
onClick: handleLaunchProcess.bind(null, record),
|
||||
});
|
||||
actionsList = actionsList.concat(editAndDelBtn);
|
||||
}
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user