232 lines
8.5 KiB
Vue
232 lines
8.5 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 { addLngBBank, getLngBBank, updateLngBBank, deleteLngBBank } from '/@/api/mdm/Bank';
|
||
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';
|
||
import { getTreeData } from '/@/api/mdm/CountryRegion';
|
||
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 () => {
|
||
const treeData = await getTreeData({})
|
||
formProps.schemas?.forEach(v => {
|
||
if (v.field == 'regionCode') {
|
||
v.componentProps.options = treeData
|
||
}
|
||
})
|
||
console.log(formProps.schemas, 667)
|
||
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 {
|
||
let record = await getLngBBank(rowId);
|
||
record = {...record, regionCode: (record.regionCode || []).split(',')}
|
||
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 updateLngBBank({...values, regionCode: (values.regionCode||[]).join(',')});
|
||
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 addLngBBank({...values, regionCode: (values.regionCode||[]).join(',')});
|
||
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); //表单事件：加载表单
|
||
}
|
||
function getFormModel() {
|
||
return systemFormRef.value.formModel
|
||
}
|
||
async function handleDelete(id) {
|
||
return await deleteLngBBank([id]);
|
||
}
|
||
defineExpose({
|
||
setFieldsValue,
|
||
resetFields,
|
||
validate,
|
||
add,
|
||
update,
|
||
setFormDataFromId,
|
||
setDisabledForm,
|
||
setMenuPermission,
|
||
setWorkFlowForm,
|
||
getRowKey,
|
||
getFormModel,
|
||
handleDelete
|
||
});
|
||
</script> |