191 lines
8.4 KiB
Vue
191 lines
8.4 KiB
Vue
<template>
|
||
<SimpleForm ref="systemFormRef" :formProps="data.formDataProps" :formModel="{}" :isWorkFlow="props.fromPage != FromPageType.MENU" />
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { reactive, ref, onBeforeMount, onMounted } from 'vue';
|
||
import { formProps, formEventConfigs, formConfig } from './config';
|
||
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
|
||
import { addTestfrom3, getTestfrom3, updateTestfrom3 } from '/@/api/system/Testfrom3';
|
||
import { cloneDeep } from 'lodash-es';
|
||
import { FormDataProps } from '/@/components/Designer/src/types';
|
||
import { usePermission } from '/@/hooks/web/usePermission';
|
||
import { useFormConfig } from '/@/hooks/web/useFormConfig';
|
||
import { FromPageType } from '/@/enums/workflowEnum';
|
||
import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent } from '/@/hooks/web/useFormEvent';
|
||
import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
|
||
import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const { filterFormSchemaAuth } = usePermission();
|
||
const { mergeFormSchemas, mergeFormEventConfigs } = useFormConfig();
|
||
const { currentRoute } = useRouter();
|
||
|
||
const RowKey = 'id';
|
||
const emits = defineEmits(['changeUploadComponentIds', 'loadingCompleted', 'form-mounted']);
|
||
const props = defineProps({
|
||
fromPage: {
|
||
type: Number,
|
||
default: FromPageType.MENU
|
||
}
|
||
});
|
||
const systemFormRef = ref();
|
||
const data: { formDataProps: FormDataProps } = reactive({
|
||
formDataProps: { schemas: [] } as FormDataProps
|
||
});
|
||
const state = reactive({
|
||
formModel: {}
|
||
});
|
||
|
||
let customFormEventConfigs = [];
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
// 合并渲染覆盖配置中的字段配置、表单事件配置
|
||
await mergeCustomFormRenderConfig();
|
||
|
||
if (props.fromPage == FromPageType.MENU) {
|
||
setMenuPermission();
|
||
await createFormEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：初始化表单
|
||
await loadFormEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：加载表单
|
||
} else if (props.fromPage == FromPageType.FLOW) {
|
||
emits('loadingCompleted'); //告诉系统表单已经加载完毕
|
||
// loadingCompleted后 工作流页面直接利用Ref调用setWorkFlowForm方法
|
||
} else if (props.fromPage == FromPageType.PREVIEW) {
|
||
// 预览 无需权限，表单事件也无需执行
|
||
} else if (props.fromPage == FromPageType.DESKTOP) {
|
||
// 桌面设计 表单事件需要执行
|
||
emits('loadingCompleted'); //告诉系统表单已经加载完毕
|
||
await createFormEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：初始化表单
|
||
await loadFormEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：加载表单
|
||
}
|
||
emits('form-mounted', formProps);
|
||
} catch (error) {}
|
||
});
|
||
|
||
async function mergeCustomFormRenderConfig() {
|
||
let cloneProps = cloneDeep(formProps);
|
||
let fEventConfigs = cloneDeep(formEventConfigs);
|
||
if (formConfig.useCustomConfig) {
|
||
if (props.fromPage !== FromPageType.FLOW) {
|
||
let formPath = currentRoute.value.query.formPath;
|
||
//1.合并字段配置
|
||
cloneProps.schemas = await mergeFormSchemas({ formSchema: cloneProps.schemas!, formPath: formPath });
|
||
//2.合并表单事件配置
|
||
fEventConfigs = await mergeFormEventConfigs({ formEventConfigs: fEventConfigs, formPath: formPath });
|
||
}
|
||
}
|
||
data.formDataProps = cloneProps;
|
||
customFormEventConfigs = fEventConfigs;
|
||
}
|
||
|
||
// 根据菜单页面权限，设置表单属性（必填，禁用，显示）
|
||
function setMenuPermission() {
|
||
data.formDataProps.schemas = filterFormSchemaAuth(data.formDataProps.schemas!);
|
||
}
|
||
|
||
// 校验form 通过返回表单数据
|
||
async function validate() {
|
||
let values = [];
|
||
try {
|
||
values = await systemFormRef.value?.validate();
|
||
//添加隐藏组件
|
||
if (data.formDataProps.hiddenComponent?.length) {
|
||
data.formDataProps.hiddenComponent.forEach((component) => {
|
||
values[component.bindField] = component.value;
|
||
});
|
||
}
|
||
} finally {
|
||
}
|
||
return values;
|
||
}
|
||
// 根据行唯一ID查询行数据，并设置表单数据 【编辑】
|
||
async function setFormDataFromId(rowId, skipUpdate) {
|
||
try {
|
||
const record = await getTestfrom3(rowId);
|
||
if (skipUpdate) {
|
||
return record;
|
||
}
|
||
setFieldsValue(record);
|
||
state.formModel = record;
|
||
await getFormDataEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
|
||
return record;
|
||
} catch (error) {}
|
||
}
|
||
// 辅助设置表单数据
|
||
function setFieldsValue(record) {
|
||
systemFormRef.value.setFieldsValue(record);
|
||
}
|
||
// 重置表单数据
|
||
async function resetFields() {
|
||
await systemFormRef.value.resetFields();
|
||
}
|
||
// 设置表单数据全部为Disabled 【查看】
|
||
async function setDisabledForm(isDisabled) {
|
||
data.formDataProps.schemas = changeSchemaDisabled(cloneDeep(data.formDataProps.schemas), isDisabled);
|
||
}
|
||
// 获取行键值
|
||
function getRowKey() {
|
||
return RowKey;
|
||
}
|
||
// 更新api表单数据
|
||
async function update({ values, rowId }) {
|
||
try {
|
||
values[RowKey] = rowId;
|
||
state.formModel = values;
|
||
let saveVal = await updateTestfrom3(values);
|
||
await submitFormEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：提交表单
|
||
return saveVal;
|
||
} catch (error) {}
|
||
}
|
||
// 新增api表单数据
|
||
async function add(values) {
|
||
try {
|
||
state.formModel = values;
|
||
let saveVal = await addTestfrom3(values);
|
||
await submitFormEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：提交表单
|
||
return saveVal;
|
||
} catch (error) {}
|
||
}
|
||
// 根据工作流页面权限，设置表单属性（必填，禁用，显示）
|
||
async function setWorkFlowForm(obj: WorkFlowFormParams) {
|
||
try {
|
||
const cloneProps = cloneDeep(formProps);
|
||
customFormEventConfigs = cloneDeep(formEventConfigs);
|
||
if (formConfig.useCustomConfig) {
|
||
const parts = obj.formConfigKey.split('_');
|
||
const formId = parts[1];
|
||
cloneProps.schemas = await mergeFormSchemas({ formSchema: cloneProps.schemas!, formId: formId });
|
||
customFormEventConfigs = await mergeFormEventConfigs({ formEventConfigs: customFormEventConfigs, formId: formId });
|
||
}
|
||
|
||
let flowData = changeWorkFlowForm(cloneProps, obj);
|
||
let { buildOptionJson, uploadComponentIds, formModels, isViewProcess } = flowData;
|
||
data.formDataProps = buildOptionJson;
|
||
emits('changeUploadComponentIds', uploadComponentIds); //工作流中必须保存上传组件id【附件汇总需要】
|
||
if (isViewProcess) {
|
||
setDisabledForm(); //查看
|
||
}
|
||
state.formModel = formModels;
|
||
if (formModels[RowKey]) {
|
||
setFormDataFromId(formModels[RowKey], false);
|
||
} else {
|
||
setFieldsValue(formModels);
|
||
}
|
||
} catch (error) {}
|
||
await createFormEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：初始化表单
|
||
await loadFormEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：加载表单
|
||
}
|
||
defineExpose({
|
||
setFieldsValue,
|
||
resetFields,
|
||
validate,
|
||
add,
|
||
update,
|
||
setFormDataFromId,
|
||
setDisabledForm,
|
||
setMenuPermission,
|
||
setWorkFlowForm,
|
||
getRowKey
|
||
});
|
||
</script>
|