<script lang="ts" setup>
|
import { inject, nextTick, onMounted, reactive, ref, toRefs, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { createAsyncComponent, getDateTimeUnit } from '@jnpf/utils';
|
|
import { useUserStore } from '@vben/stores';
|
|
import dayjs from 'dayjs';
|
|
import { buildDisplayOnlySubmitData } from '#/components/FormGenerator/src/helper/displayOnly';
|
import { useBaseStore, useGeneratorStore } from '#/store';
|
import { normalizeOrganizationConfig, resolveCurrentOrganizationDefaultIds } from '#/utils/organizationConfig';
|
|
import { useFilePermissions } from '../hooks/useFilePermissions';
|
import { refreshFlowEditTime } from './flowEditTime';
|
|
const props = defineProps(['config']);
|
const emit = defineEmits(['setPageLoad', 'eventReceiver']);
|
const filePermissions = useFilePermissions(() => props.config);
|
defineExpose({ claimDisplayedBillNumbers, dataFormSubmit, prepareWorkflowFiles });
|
|
interface State {
|
config: any;
|
formConf: any;
|
formData: any;
|
key: number;
|
loading: boolean;
|
isCustomCopy: boolean;
|
dataForm: any;
|
eventType: string;
|
flowUrgent: number;
|
}
|
|
const { createMessage } = useMessage();
|
const baseStore = useBaseStore();
|
const getLeftTreeActiveInfo: (() => any) | null = inject('getLeftTreeActiveInfo', null);
|
const Parser = createAsyncComponent(() => import('#/components/FormGenerator/src/components/Parser.vue'));
|
const parserRef = ref<any>(null);
|
const state = reactive<State>({
|
config: {},
|
formConf: {},
|
formData: {},
|
key: Date.now(),
|
loading: false,
|
isCustomCopy: false,
|
dataForm: {
|
id: '',
|
formData: {},
|
flowId: '',
|
},
|
eventType: '',
|
flowUrgent: 1,
|
});
|
const { config, formConf, key, loading } = toRefs(state);
|
const generatorStore = useGeneratorStore();
|
const userStore = useUserStore();
|
|
function init(config) {
|
state.config = config;
|
state.formConf = parseFormConf(config.formConf);
|
state.formData = {};
|
state.dataForm.id = config.id || '';
|
state.dataForm.flowId = config.flowId;
|
state.isCustomCopy = config.flowTemplateJson && config.flowTemplateJson.properties && config.flowTemplateJson.properties.isCustomCopy;
|
state.loading = true;
|
let extra = {};
|
try {
|
if (config.id) {
|
extra = {
|
modelId: config.flowId,
|
id: config.id,
|
type: config.type,
|
flowId: config.flowId,
|
processId: config.id,
|
taskId: config.taskId,
|
opType: config.opType,
|
};
|
const draftData = config.draftData;
|
const hasDraftData =
|
String(config.opType) === '3' && !!draftData && typeof draftData === 'object' && !Array.isArray(draftData) && Object.keys(draftData).length > 0;
|
// 审批暂存数据可能仅包含当前节点修改的字段，必须叠加在已持久化的流程表单数据上。
|
state.formData = { id: config.id, ...(config.formData || {}), ...(hasDraftData ? draftData : {}), flowId: config.flowId };
|
} else {
|
state.formData = { ...(config.formData || {}), ...(config.params || {}) };
|
if (getLeftTreeActiveInfo) state.formData = { ...getLeftTreeActiveInfo(), ...state.formData };
|
}
|
generatorStore.setDynamicModelExtra(extra);
|
if (!Array.isArray(state.formConf.fields)) {
|
state.formConf.fields = [];
|
console.error('[dynamicForm] formConf.fields missing', config.formId || config.flowId);
|
}
|
state.formData = refreshFlowEditTime(state.formConf.fields, state.formData, config);
|
fillFormData(state.formConf, state.formData, !config.id);
|
} catch (error) {
|
console.error('[dynamicForm] init error:', error);
|
if (!Array.isArray(state.formConf?.fields)) state.formConf = { fields: [] };
|
}
|
nextTick(() => {
|
state.loading = false;
|
state.key = Date.now();
|
setTimeout(() => {
|
emit('setPageLoad');
|
}, 200);
|
});
|
}
|
function parseFormConf(raw: any) {
|
if (!raw) return { fields: [] };
|
if (typeof raw === 'object') return raw?.fields ? raw : { ...raw, fields: raw.fields || [] };
|
try {
|
const parsed = JSON.parse(raw);
|
if (!parsed || typeof parsed !== 'object') return { fields: [] };
|
if (!Array.isArray(parsed.fields)) parsed.fields = [];
|
return parsed;
|
} catch (error) {
|
console.error('[dynamicForm] parse formConf error:', error);
|
return { fields: [] };
|
}
|
}
|
function fillFormData(form, data, isAdd) {
|
const userInfo: any = userStore.getUserInfo;
|
const currDate = new Date();
|
form.disabled = state.config.disabled;
|
const isEmptyValue = (value) => value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0);
|
const getFieldOperate = (item, parent?) => {
|
if (!state.config.formOperates || !state.config.formOperates.length) return null;
|
const id = item.__config__.isSubTable ? `${parent.__vModel__}-${item.__vModel__}` : item.__vModel__;
|
const arr = state.config.formOperates.filter((o) => o.id === id) || [];
|
return arr.length ? arr[0] : null;
|
};
|
const loop = (list, parent?) => {
|
for (const item of list) {
|
if (item.__vModel__) {
|
const hasDataKey = Object.prototype.hasOwnProperty.call(data, item.__vModel__);
|
const hasDataValue = hasDataKey && !isEmptyValue(data[item.__vModel__]);
|
const fieldOperate = getFieldOperate(item, parent);
|
const noWritePermission = !!fieldOperate && !fieldOperate.write;
|
const shouldUseDataValue = hasDataKey && (hasDataValue || !item.__config__.defaultCurrent);
|
const val = shouldUseDataValue ? data[item.__vModel__] : noWritePermission ? undefined : item.__config__.defaultValue;
|
item.__config__.__skipDefaultValueInit = noWritePermission && !hasDataValue;
|
if (!item.__config__.isSubTable) item.__config__.defaultValue = val;
|
const canInitCurrentDefault = isAdd || item.__config__.isSubTable || (!!fieldOperate?.write && !hasDataValue);
|
if (canInitCurrentDefault && item.__config__.defaultCurrent && !item.__config__.__skipDefaultValueInit) {
|
if (item.__config__.jnpfKey === 'datePicker') {
|
item.__config__.defaultValue = dayjs(currDate).startOf(getDateTimeUnit(item.format)).valueOf();
|
}
|
if (item.__config__.jnpfKey === 'timePicker') {
|
item.__config__.defaultValue = dayjs(currDate).format(item.format || 'HH:mm:ss');
|
}
|
if (item.__config__.jnpfKey === 'organizeSelect' && isAdd && !hasDataValue) {
|
item.__config__.defaultValue = resolveCurrentOrganizationDefaultIds(
|
userInfo,
|
normalizeOrganizationConfig(baseStore.getSysConfig).currentOrganizationDefaultLevel,
|
!!item.multiple,
|
);
|
}
|
if (item.__config__.jnpfKey === 'userSelect' && userInfo.userId) {
|
item.__config__.defaultValue = item.multiple ? [userInfo.userId] : userInfo.userId;
|
}
|
if (item.__config__.jnpfKey === 'usersSelect' && userInfo.userId) {
|
item.__config__.defaultValue = [`${userInfo.userId}--user`];
|
}
|
if (item.__config__.jnpfKey === 'posSelect' && userInfo.positionIds?.length) {
|
item.__config__.defaultValue = item.multiple ? userInfo.positionIds : userInfo.positionId;
|
}
|
if (item.__config__.jnpfKey === 'sign' && userInfo.signImg) {
|
item.__config__.defaultValue = userInfo.signImg;
|
}
|
}
|
if (isAdd && !item.__config__.isSubTable && hasDataValue) item.__config__.defaultValue = data[item.__vModel__];
|
let isDisabled = item.disabled || false;
|
let noShow = item.__config__.noShow || false;
|
let required = item.__config__.required || false;
|
if (fieldOperate) {
|
if (!fieldOperate.read) noShow = true;
|
if (!fieldOperate.write) isDisabled = true;
|
required = fieldOperate.required ? fieldOperate.required : item.__config__.required;
|
}
|
if (state.config.readonly || state.config.disabled) isDisabled = true;
|
item.disabled = isDisabled;
|
item.__config__.noShow = noShow;
|
item.__config__.required = required || false;
|
}
|
if (['popupAttr', 'relationFormAttr'].includes(item.__config__.jnpfKey) && !item.isStorage && state.config.disabled) {
|
item.disabled = true;
|
}
|
if (item.__config__ && item.__config__.children && Array.isArray(item.__config__.children)) {
|
loop(item.__config__.children, item);
|
}
|
}
|
};
|
loop(form.fields);
|
form.formData = data;
|
}
|
function getParser() {
|
const parser = unref(parserRef);
|
if (!parser) {
|
throw new Error('parser is null!');
|
}
|
return parser;
|
}
|
async function prepareWorkflowFiles() {
|
return getParser().prepareWorkflowFiles();
|
}
|
function dataFormSubmit(eventType, flowUrgent, afterValidation?: () => Promise<boolean>) {
|
if (state.config.isPreview) return createMessage.warning('功能预览不支持数据保存');
|
state.eventType = eventType;
|
state.flowUrgent = flowUrgent;
|
// 暂存类操作（发起暂存/审批暂存/协办保存）不触发提交前置（beforeSubmit）
|
const isSave = ['save', 'saveAudit', 'saveAssist'].includes(eventType);
|
getParser().handleSubmit(isSave, afterValidation);
|
}
|
function claimDisplayedBillNumbers() {
|
return getParser().claimDisplayedBillNumbers();
|
}
|
function submitForm(data, callback) {
|
if (!data) return;
|
const formData = buildDisplayOnlySubmitData(state.formConf.fields, { ...state.formData, ...data });
|
state.dataForm.formData = formData;
|
if (callback && typeof callback === 'function') callback();
|
emit('eventReceiver', state.dataForm, state.eventType);
|
}
|
|
onMounted(() => {
|
init(props.config);
|
});
|
</script>
|
|
<template>
|
<div class="flow-form" :style="{ margin: '0 auto', width: formConf.fullScreenWidth || '100%' }">
|
<Parser
|
ref="parserRef"
|
:form-conf="formConf"
|
:organization-mapping-fields="state.config.organizationMappingFields || []"
|
:organization-display-level="normalizeOrganizationConfig(baseStore.getSysConfig).workflowDepartmentDisplayLevel"
|
:model-id="state.config.formId || state.config.flowId"
|
:record-id="state.config.id"
|
:task-id="state.config.taskId"
|
:file-permissions="filePermissions"
|
:file-permission-readonly="state.config.opType == 0"
|
:is-online-utils-open="true"
|
:defer-bill-number-claim="true"
|
:params="config.params"
|
:require-review="false"
|
@submit="submitForm"
|
:key="key"
|
v-if="!loading" />
|
</div>
|
</template>
|
