<script lang="ts" setup>
|
import { computed, nextTick, reactive, ref, toRefs, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicPopup, usePopupInner } from '@jnpf/ui/popup';
|
import { createAsyncComponent, getDateTimeUnit } from '@jnpf/utils';
|
|
import { useUserStore } from '@vben/stores';
|
|
import dayjs from 'dayjs';
|
|
import { createModel } from '#/api/onlineDev/visualDev';
|
import { $t } from '#/locales';
|
|
interface State {
|
formConf: any;
|
config: any;
|
loading: boolean;
|
btnLoading: boolean;
|
key: number;
|
}
|
|
defineEmits(['register']);
|
const { createMessage } = useMessage();
|
const userStore = useUserStore();
|
const [registerPopup, { changeLoading }] = usePopupInner(init);
|
const parserRef = ref<any>(null);
|
const state = reactive<State>({
|
formConf: {},
|
config: {},
|
loading: false,
|
btnLoading: false,
|
key: Date.now(),
|
});
|
const { formConf, key, loading, config, btnLoading } = toRefs(state);
|
const Parser = createAsyncComponent(() => import('#/components/FormGenerator/src/components/Parser.vue'));
|
|
const getOkText = computed(() => {
|
const text = state.formConf.confirmButtonTextI18nCode
|
? $t(state.formConf.confirmButtonTextI18nCode, state.formConf.confirmButtonText)
|
: state.formConf.confirmButtonText;
|
return text || $t('common.okText');
|
});
|
|
function fillFormData(form, data) {
|
const userInfo = userStore.getUserInfo;
|
const currDate = new Date();
|
const loop = (list) => {
|
for (const item of list) {
|
if (item.__vModel__ && item.__config__.defaultCurrent) {
|
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' && userInfo?.organizeIds?.length) {
|
item.__config__.defaultValue = item.multiple ? userInfo.organizeIds : userInfo.organizeId;
|
}
|
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 (item.__config__ && item.__config__.children && Array.isArray(item.__config__.children)) {
|
loop(item.__config__.children);
|
}
|
}
|
};
|
loop(form.fields);
|
form.formData = data;
|
}
|
function init(data) {
|
changeLoading(true);
|
state.loading = true;
|
state.config = data;
|
state.formConf = data.formData ? JSON.parse(data.formData) : {};
|
fillFormData(state.formConf, {});
|
nextTick(() => {
|
changeLoading(false);
|
state.loading = false;
|
state.key = Date.now();
|
});
|
}
|
function submitForm(data, callback) {
|
if (!data) return;
|
state.btnLoading = true;
|
const dataForm = { data: JSON.stringify(data) };
|
createModel(state.config.modelId, dataForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
if (callback && typeof callback === 'function') callback();
|
state.btnLoading = false;
|
handleReset();
|
})
|
.catch(() => {
|
state.btnLoading = false;
|
});
|
}
|
function handleReset() {
|
fillFormData(state.formConf, {});
|
nextTick(() => {
|
getParser().handleReset();
|
});
|
}
|
function handleSubmit() {
|
if (state.config.isPreview) return createMessage.warning('功能预览不支持数据保存');
|
getParser().handleSubmit();
|
}
|
function getParser() {
|
const parser = unref(parserRef);
|
if (!parser) throw new Error('parser is null!');
|
return parser;
|
}
|
</script>
|
<template>
|
<BasicPopup v-bind="$attrs" @register="registerPopup" :show-back-icon="false" :show-cancel-btn="false" :title="config.fullName">
|
<template #insertToolbar>
|
<a-button type="primary" @click="handleSubmit" :loading="btnLoading">{{ getOkText }}</a-button>
|
<a-button type="warning" class="ml-[10px]" @click="handleReset">{{ $t('common.resetText') }}</a-button>
|
</template>
|
<div class="p-[10px]" :style="{ margin: '0 auto', width: formConf.fullScreenWidth || '100%' }">
|
<Parser ref="parserRef" :form-conf="formConf" @submit="submitForm" :key="key" v-if="!loading" />
|
</div>
|
</BasicPopup>
|
</template>
|
