jnpf-resources/TemplateCodeVue3/TemplateCode2/html/ExtraForm.vue.vm

#parse("PublicMacro/FormMarco.vm")
## 行内-弹窗编辑生成表单字段
#macro(FormRenderingExtra)
    #foreach($html in ${context.columnList})
        #set($vModel = "${html.vModel}")
        #set($beforeVmodel = "${html.vModel}")
        #set($mastModel="${context.formModel}.${beforeVmodel}")
        #set($config = $html.config)
        #set($mastKey = "${config.jnpfKey}")
        #set($show = $config.noShow)
        #set($pcshow = $config.pc)
        #set($startTime=${html.startTime})
        #set($endTime=${html.endTime})
        #if(${mastKey}=='datePicker'||${mastKey}=='timePicker')
            #GetStartAndEndTime($mastKey,$config,$html,$startTime,$endTime)
        #end
        #if($show == false && $pcshow == true && !$html.prop.toLowerCase().startsWith("tablefield"))
            <a-col :span="24" class="ant-col-item" #if($context.isFlow) v-if="judgeShow('${beforeVmodel}')"
            #elseif(${context.columnData.useFormPermission}) #if(${vModel}) v-if="jnpf.hasFormP('${beforeVmodel}')"
            #elseif($mastKey == 'relationFormAttr' || $mastKey == 'popupAttr') v-if="jnpf.hasFormP('${html.relationField}')" #end  #end >
                <a-form-item #if($config.showLabel == true) #if($config.labelWidth && ${context.labelPosition}!="top") :labelCol="{ style: { width: '${config.labelWidth}px' } }"#end
                #else :labelCol="{ style: { width: '0px' } }"#end #if($vModel) name="${beforeVmodel}" #end>
                    <template #label>#if(${config.labelI18nCode}) {{t('${config.labelI18nCode}','${config.label}')}} #else${config.label} #end
                        #if((${config.label} || ${config.labelI18nCode}) && ${context.labelSuffix})${context.labelSuffix}#end
                        #if((${config.label} || ${config.labelI18nCode}) && (${config.tipLabel} || ${config.tipLabelI18nCode}))
                          <BasicHelp #if(${config.tipLabelI18nCode}) :text="t('${config.tipLabelI18nCode}','${config.tipLabel}')" #else text="${config.tipLabel}" #end />#end</template>
                    #CreateFieldTag($mastKey,$html,$config,$mastModel,$beforeVmodel,-1,false)
                </a-form-item>
            </a-col>
        #end
    #end
#end
<template>
##
##<!-- 普通弹窗 -->
<BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="${context.generalWidth}"
            #if(${context.cancelButtonText} || ${context.cancelButtonTextI18nCode})
            #if(${context.cancelButtonTextI18nCode}):cancelText="t('${context.cancelButtonTextI18nCode}','${context.cancelButtonText}')"
            #else cancelText="${context.CancelButton}"#end
            #end
            #if(${context.confirmButtonText} || ${context.confirmButtonTextI18nCode})
            #if(${context.confirmButtonTextI18nCode}):okText="t('${context.confirmButtonTextI18nCode}','${context.confirmButtonText}')"
            #else okText="${context.confirmButtonText}"#end
            #end
            :minHeight="100"  @ok="handleSubmit(0)" @continue="handleSubmit(1)" :closeFunc="onClose">
    <a-row  class="dynamic-form ${context.formStyle}">
        <a-form :colon="false" size="${context.size}" layout=#if(${context.labelPosition}=="top") "vertical" #else "horizontal" #end
        labelAlign=#if(${context.labelPosition}=="right") "right" #else "left" #end
        #if(${context.labelPosition}!="top") :labelCol="{ style: { width: '${context.labelWidth}px' } }" #end
        :model="dataForm" :rules="dataRule" ref="formRef"  class="${context.formStyle}">
        <a-row :gutter="#if(${context.formStyle}=='word-form')0#else${context.gutter}#end">
            <!-- 具体表单 -->
            #FormRenderingExtra()
            <!-- 表单结束 -->
        </a-row>
        </a-form>
    </a-row>
</BasicModal>
##<!-- 普通弹窗 -->


</template>
<script lang="ts" setup>
    import { create, update, getInfo } from './helper/api';
    import { reactive, toRefs, nextTick, ref, unref, computed } from 'vue';
    import { BasicModal, useModal } from '@/components/Modal';
    import { useMessage } from '@/hooks/web/useMessage';
    import { useUserStore } from '@/store/modules/user';
    import type { FormInstance } from 'ant-design-vue';
    import { JnpfRelationForm } from '@/components/Jnpf';
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary';
    import { getDataInterfaceRes } from '@/api/systemData/dataInterface';
    import { thousandsFormat , getDateTimeUnit, getTimeUnit} from '@/utils/jnpf';
    import dayjs from 'dayjs';
    import { useI18n } from '@/hooks/web/useI18n';

    interface State {
        #createStateParam("any")
        title: string;
    }

    const emit = defineEmits(['reload']);
    const userStore = useUserStore();
    const userInfo = userStore.getUserInfo;
    const { createMessage } = useMessage();
    const { t } = useI18n();
    const [registerModal, { openModal, setModalProps }] = useModal();


    const formRef = ref<FormInstance>();
    const state = reactive<State>({
        #createStateParam()
        title: '',
    });
    const { title, dataRule, dataForm, optionsObj, ableAll, maskConfig } = toRefs(state);

    defineExpose({ init });

    function init(data) {
        state.title = !data.id || data.id === 'jnpfAdd' ? t('common.add2Text','新增') : t('common.editText','编辑');
        setFormProps({ continueLoading: false });
        openModal();
        ##主表options
        #foreach($fieLdsModel in ${context.fields})
            #set($html = $fieLdsModel.formColumnModel.fieLdsModel)
            #set($vModel = "${html.vModel}")
            #set($config = $html.config)
            #set($dataType = "$!{config.dataType}")
            #if($!{config.dataType}=='dictionary'||$!{config.dataType}=='dynamic')
              get${vModel}Options();
            #end
        #end

        ##副表options
        #foreach($ColumnFieldModel in ${context.mastTable})
            #set($html =${ColumnFieldModel.formMastTableModel})
            #set($vModel = "${html.vModel}")
            #set($config = $html.mastTable.fieLdsModel.config)
            #if($!{config.dataType}=='dictionary'||$!{config.dataType}=='dynamic')
              get${vModel}Options();
            #end
        #end
        nextTick(() => {
            getForm().resetFields();
            state.dataForm = JSON.parse(JSON.stringify(data.formData));
            state.dataForm.id = !data.id || data.id === 'jnpfAdd' ? '' :data.id;
        });
    }
    function getForm() {
        const form = unref(formRef);
        if (!form) {
            throw new Error('form is null!');
        }
        return form;
    }
    async function handleSubmit() {
        try {
            const values = await getForm()?.validate();
            if (!values) return;
            setFormProps({ continueLoading: true });
            const formMethod = state.dataForm.id ? update : create;
            formMethod(state.dataForm)
                    .then((res) => {
                        createMessage.success(res.msg);
                        setFormProps({ continueLoading: false });
                        setFormProps({ open: false });
                        emit('reload');
                    })
                    .catch(() => {
                        setFormProps({ continueLoading: false });
                    });
        } catch (_) {}
    }
    function setFormProps(data) {
        setModalProps(data);
    }
    function changeLoading(loading) {
        setModalProps({ loading });
    }

    async function onClose() {
        if (state.isContinue) emit('reload');
        return true;
    }
    //option方法
    #GetDataOptionsMethod()
##动态时间处理
    #GetRelationDate()
</script>