jnpf-resources-v6x/TemplateCodeVue3/TemplateCode4/html/FormPopup.vue.vm

#parse("PublicMacro/FormMarco.vm")
#foreach($fieLdsModel in ${context.form})
    #set($jnpfKey = "${fieLdsModel.jnpfKey}")
    #if($jnpfKey == 'table')
        #set($child = $fieLdsModel.childList)
        #if($child.showSummary)
            #set($childSummary=true)
        #end
        #if($child.footerBtnsList.size()>2)
            #set($isSelectDialog = true)
        #end
        #if($child.isNumLimit)
            #set($isNumLimitSwitch = true)
        #end
    #end
#end
<script lang="ts" setup>
    import { create } from './helper/api';
    import { reactive, toRefs, nextTick, ref, unref, computed, toRaw} from 'vue';
    import { BasicPopup, usePopupInner } from '@jnpf/ui/popup';
    import { useUserStore } from '@vben/stores';
    import type { FormInstance } from 'ant-design-vue';
    import { useMessage,usePermission } from '@jnpf/hooks';
    import { $t } from '#/locales';
    import { JnpfRelationForm } from '@jnpf/ui';
    #if($isSelectDialog == true)
    import SelectModal from '#/components/InputTable/src/components/SelectModal.vue';
    #end
    import { thousandsFormat , getDateTimeUnit, getTimeUnit, buildUUID} from '@jnpf/utils';
    import { getDictionaryDataSelector } from '#/api/systemData/dictionary';
    import { getDataInterfaceRes } from '#/api/systemData/dataInterface';
    import dayjs from 'dayjs';
    import { cloneDeep } from 'lodash-es';
    import { CaretRightOutlined } from '@ant-design/icons-vue';

    interface State {
        btnLoading: boolean;
        #createStateParam("any")
    }

    defineEmits(['register']);
    const userStore = useUserStore();
    const userInfo:any = userStore.getUserInfo;
    const { createMessage, createConfirm } = useMessage();
    const [registerPopup, { changeLoading }] = usePopupInner(init);
    const formRef = ref<FormInstance>();
    #if($isSelectDialog == true)
    // 子表弹窗数据
    const selectModal = ref(null);
    #end
    const state = reactive<State>({
        btnLoading: false,
        #createStateParam()
    });
    const { dataForm, dataRule, btnLoading, optionsObj, ableAll, maskConfig } = toRefs(state);
    // 表单权限
    const { hasFormP } = usePermission();
    #GetChildTableColumns()

    function init() {
        changeLoading(true);
        #EditGetOption(false)
        #InitActiveValue()
        nextTick(() => {
            changeLoading(false);
        });
    }
    async function handleSubmit() {
        try {
            const values = await getForm()?.validate();
            if (!values) return;
### 非流程子表字段验证
            #if(!$context.isFlow)
            #foreach($itemModel in ${context.children})
            if(!$!{itemModel.aliasLowName}Exist()) return;
            #end
            #end
            state.btnLoading = true;
            create(state.dataForm)
                .then(res => {
                    createMessage.success(res.msg);
                    state.btnLoading = false;
                    handleReset();
                })
                .catch(() => {
                    state.btnLoading = false;
                });
        } catch (_) {}
    }
    function handleReset() {
        getForm().resetFields();
        #foreach($child in ${context.children})
        state.dataForm.${child.aliasLowName}List = [];
        #end
        init();
    }
    function getForm() {
        const form = unref(formRef);
        if (!form) {
            throw new Error('form is null!');
        }
        return form;
    }
    ##数据联动changeData方法
    #ChangeData()
    ##子表其他方法
    #CreateChildTableMethod()
    ##子表弹窗数据方法
    #if($isSelectDialog == true)
    #ChildDialogMethod()
    #end
    ##合计方法
    #if($childSummary==true)
    //子表合计方法
    function getCmpValOfRow(row, key, summaryField) {
        if (!summaryField.length) return '';
        const isSummary = key => summaryField.includes(key);
        const target = row[key];
        if (!target) return '';
        let data = isNaN(target) ? 0 : Number(target);
        if (isSummary(key)) return data || 0;
        return '';
    }
    #end
##数据选项--数据字典和远端数据初始化方法
    #GetDataOptionsMethod()
##动态时间处理
    #GetRelationDate()
</script>
<template>
  <BasicPopup v-bind="$attrs" @register="registerPopup" :show-back-icon="false" :show-cancel-btn="false" title="${context.formModelName}">
    <template #insertToolbar>
      <a-button type="primary" @click="handleSubmit" :loading="btnLoading">{{$t('common.saveText','保存')}}</a-button>
      <a-button type="warning" class="ml-[10px]" @click="handleReset">{{$t('component.cropper.btn_reset','重置')}}</a-button>
    </template>
    <a-row class="p-[10px] dynamic-form ${context.formStyle}" :style="{ margin: '0 auto', width: '100%' }">
      <!-- 表单 -->
        <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" >
      <a-row :gutter="#if(${context.formStyle}=='word-form')0#else${context.gutter}#end">
        <!-- 具体表单 -->
          #FormRendering()
        <!-- 表单结束 -->
      </a-row>
      </a-form>
    </a-row>
      #if($isSelectDialog == true)
        <SelectModal :config="state.currTableConf" :formData="state.dataForm" ref="selectModal" @select="addForSelect"/>
      #end
  </BasicPopup>
</template>