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

#parse("PublicMacro/FormMarco.vm")
<template>
##    全屏弹窗
#if(${context.popupType}=="fullScreen")
##<!-- 全屏弹窗 -->
    <BasicPopup v-bind="$attrs" @register="registerPopup" showOkBtn destroyOnClose
                    #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
                    @ok="handleSubmit" :closeFunc="onClose">
      <template #title>
        <a-space :size="10">
          <div class="text-16px font-medium">{{ title }}</div>
##      <!-- 分组和树形不展示 -->
            #if(${context.hasConfirmAndAddBtn} && (!${context.groupTable} && !${context.treeTable}))
            <a-space-compact size="small" block  v-if="dataForm.id">
                <a-tooltip :title="t('common.prevRecord')">
                  <a-button size="small" :disabled="getPrevDisabled" @click="handlePrev">
                    <i class="icon-ym icon-ym-caret-left text-10px"></i>
                  </a-button>
                </a-tooltip>
                <a-tooltip :title="t('common.nextRecord')">
                  <a-button size="small" :disabled="getNextDisabled" @click="handleNext">
                    <i class="icon-ym icon-ym-caret-right text-10px"></i>
                  </a-button>
                </a-tooltip>
            </a-space-compact>
            #end
        </a-space>
      </template>
    #if(${context.hasConfirmAndAddBtn} && (!${context.groupTable} && !${context.treeTable}))
##        <!-- 分组和树形不展示 -->
        <template #insertToolbar>
          <JnpfCheckboxSingle v-model:value="submitType" :label="continueText" v-if="showContinueBtn" />
        </template>
##        <!-- 分组和树形不展示 -->
    #end
        <a-row class="p-10px dynamic-form ${context.formStyle}" :style="{ margin: '0 auto', width: '${context.fullScreenWidth}' }">
            <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>
    </BasicPopup>
##<!-- 全屏弹窗 -->
#end
##    普通弹窗
#if(${context.popupType}=="general")
##<!-- 普通弹窗 -->
    <BasicModal v-bind="$attrs" @register="registerModal"  width="${context.generalWidth}"
                    :minHeight="100"
                    #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
                    @ok="handleSubmit" :closeFunc="onClose">
      <template #title>
        <a-space :size="10">
          <div class="text-16px font-medium">{{ title }}</div>
##      <!-- 分组和树形不展示 -->
            #if(${context.hasConfirmAndAddBtn} && (!${context.groupTable} && !${context.treeTable}))
              <a-space-compact size="small" block  v-if="dataForm.id">
                <a-tooltip :title="t('common.prevRecord')">
                  <a-button size="small" :disabled="getPrevDisabled" @click="handlePrev">
                    <i class="icon-ym icon-ym-caret-left text-10px"></i>
                  </a-button>
                </a-tooltip>
                <a-tooltip :title="t('common.nextRecord')">
                  <a-button size="small" :disabled="getNextDisabled" @click="handleNext">
                    <i class="icon-ym icon-ym-caret-right text-10px"></i>
                  </a-button>
                </a-tooltip>
              </a-space-compact>
            #end
        </a-space>
      </template>
    #if(${context.hasConfirmAndAddBtn} && (!${context.groupTable} && !${context.treeTable}))
##        <!-- 分组和树形不展示 -->
        <template #insertFooter>
          <div class="float-left mt-5px">
            <JnpfCheckboxSingle v-model:value="submitType" :label="continueText" />
          </div>
        </template>
##        <!-- 分组和树形不展示 -->
    #end
        <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">
            <a-row :gutter="#if(${context.formStyle}=='word-form')0#else${context.gutter}#end">
                <!-- 具体表单 -->
                #FormRendering()
                <!-- 表单结束 -->
            </a-row>
            </a-form>
        </a-row>
    </BasicModal>
##<!-- 普通弹窗 -->
#end
##    右侧弹窗
#if(${context.popupType}=="drawer")
##<!-- 右侧弹窗 -->
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="${context.drawerWidth}" showFooter
                    #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
                    @ok="handleSubmit" :closeFunc="onClose">
      <template #title>
        <a-space :size="10">
          <div class="text-16px font-medium">{{ title }}</div>
##      <!-- 分组和树形不展示 -->
            #if(${context.hasConfirmAndAddBtn} && (!${context.groupTable} && !${context.treeTable}))
              <a-space-compact size="small" block  v-if="dataForm.id">
                <a-tooltip :title="t('common.prevRecord')">
                  <a-button size="small" :disabled="getPrevDisabled" @click="handlePrev">
                    <i class="icon-ym icon-ym-caret-left text-10px"></i>
                  </a-button>
                </a-tooltip>
                <a-tooltip :title="t('common.nextRecord')">
                  <a-button size="small" :disabled="getNextDisabled" @click="handleNext">
                    <i class="icon-ym icon-ym-caret-right text-10px"></i>
                  </a-button>
                </a-tooltip>
              </a-space-compact>
            #end
        </a-space>
      </template>
    #if(${context.hasConfirmAndAddBtn} && (!${context.groupTable} && !${context.treeTable}))
##        <!-- 分组和树形不展示 -->
        <template #insertFooter>
          <div class="float-left mt-5px">
            <JnpfCheckboxSingle v-model:value="submitType" :label="continueText" />
          </div>
        </template>
##        <!-- 分组和树形不展示 -->
    #end
        <a-row class="p-10px 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" >
                <a-row :gutter="#if(${context.formStyle}=='word-form')0#else${context.gutter}#end">
                    <!-- 具体表单 -->
                    #FormRendering()
                    <!-- 表单结束 -->
                </a-row>
            </a-form>
        </a-row>
    </BasicDrawer>
##<!-- 右侧弹窗 -->
#end
#if($isSelectDialog == true)
    <SelectModal :config="state.currTableConf" :formData="state.dataForm" ref="selectModal" @select="addForSelect"/>
#end
</template>
<script lang="ts" setup>
    import { create, update, getInfo } from './helper/api';
    import { reactive, toRefs, nextTick, ref, unref, computed,toRaw, inject } from 'vue';
    #if(${context.popupType}=="fullScreen")
    import { BasicPopup, usePopup } from '@/components/Popup';
    #end
    #if(${context.popupType}=="general")
    import { BasicModal, useModal } from '@/components/Modal';
    #end
    #if(${context.popupType}=="drawer")
    import { BasicDrawer, useDrawer } from '@/components/Drawer';
    #end
    import { JnpfRelationForm } from '@/components/Jnpf';
    import { useMessage } from '@/hooks/web/useMessage';
    import { useI18n } from '@/hooks/web/useI18n';
    import { useUserStore } from '@/store/modules/user';
    import type { FormInstance } from 'ant-design-vue';
    #if($isSelectDialog == true)
    import SelectModal from '@/components/CommonModal/src/SelectModal.vue';
    #end
    import { thousandsFormat , getDateTimeUnit, getTimeUnit} from '@/utils/jnpf';
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary';
    import { getDataInterfaceRes } from '@/api/systemData/dataInterface';
    import dayjs from 'dayjs';
    // 表单权限
    import { usePermission } from '@/hooks/web/usePermission';
    import { cloneDeep } from 'lodash-es';
    import { buildUUID } from '@/utils/uuid';
    import { CaretRightOutlined } from '@ant-design/icons-vue';


    interface State {
        #createStateParam("any")
        title: string;
        #if(${context.hasConfirmAndAddBtn})continueText: string; #end
        allList: any[];
        currIndex: number;
        isContinue: boolean;
        submitType: number;
        showContinueBtn: boolean;
    }

    const emit = defineEmits(['reload']);
    const getLeftTreeActiveInfo: (() => any) | null = inject('getLeftTreeActiveInfo', null);
    const userStore = useUserStore();
    const userInfo = userStore.getUserInfo;
    const { createMessage, createConfirm } = useMessage();
    const { t } = useI18n();
    #if(${context.popupType}=="fullScreen")
    const [registerPopup, { openPopup, setPopupProps }] = usePopup();
    #end
    #if(${context.popupType}=="general")
    const [registerModal, { openModal, setModalProps }] = useModal();
    #end
    #if(${context.popupType}=="drawer")
    const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();
    #end
    const formRef = ref<FormInstance>();
    #if($isSelectDialog == true)
    // 子表弹窗数据
    const selectModal = ref(null);
    #end
    #GetChildTableColumns()
    const state = reactive<State>({
        #createStateParam()
        title: "",
        #if(${context.hasConfirmAndAddBtn}) continueText: "", #end
        allList: [],
        currIndex: 0,
        isContinue: false,
        submitType: 0,
        showContinueBtn: #if(${context.hasConfirmAndAddBtn}) true #else false #end,
    });
    const { title, #if(${context.hasConfirmAndAddBtn}) continueText, #end showContinueBtn, dataRule, dataForm, optionsObj, ableAll, maskConfig,submitType } = toRefs(state);

    const getPrevDisabled = computed(() => state.currIndex === 0);
    const getNextDisabled = computed(() => state.currIndex === state.allList.length - 1);
    // 表单权限
    const { hasFormP } = usePermission();

    defineExpose({ init });

    function init(data) {
        state.submitType = 0;
        state.isContinue = false;
        state.title = !data.id ? t('common.add2Text','新增') : t('common.editText','编辑');
        #if(${context.hasConfirmAndAddBtn}) state.continueText = !data.id ? t('common.continueAndAddText','确定并新增') : t('common.continueText','确定并继续'); #end
        setFormProps({ continueLoading: false });
        state.dataForm.id = data.id;
    #if(${context.popupType}=="fullScreen")
        openPopup();
    #end
    #if(${context.popupType}=="general")
        openModal();
    #end
    #if(${context.popupType}=="drawer")
        openDrawer();
    #end
        state.allList = data.allList;
        state.currIndex = state.allList.length && data.id ? state.allList.findIndex((item) => item.id === data.id) : 0;
        nextTick(() => {
            getForm().resetFields();
        #foreach($child in ${context.children})
            state.dataForm.${child.aliasLowName}List = [];
        #end
            setTimeout(initData, 0);
        });
    }
    function initData() {
        changeLoading(true);
        #InitActiveValue()
        if (state.dataForm.id) {
            getData(state.dataForm.id);
        } else {
            //初始化options
            #EditGetOption(false)
            // 设置默认值
            state.dataForm={
                #CreateDataform()
            };
            if (getLeftTreeActiveInfo) state.dataForm = {...state.dataForm, ...(getLeftTreeActiveInfo() || {}) };
            state.childIndex = -1;
            changeLoading(false);
        }
    }
    function getForm() {
        const form = unref(formRef);
        if (!form) {
            throw new Error('form is null!');
        }
        return form;
    }
    function getData(id) {
        getInfo(id).then((res) => {
            state.dataForm = res.data || {};
##          初始化options
            #EditGetOption(true)
            state.childIndex = -1;
            changeLoading(false);
        });
    }
    async function handleSubmit(type) {
        try {
            const values = await getForm()?.validate();
            if (!values) return;
### 非流程子表字段验证
            #if(!$context.isFlow)
            #foreach($itemModel in ${context.children})
            if(!$!{itemModel.aliasLowName}Exist()) return;
            #end
            #end


             setFormProps({ confirmLoading: true });
            const formMethod = state.dataForm.id ? update : create;
            formMethod(state.dataForm)
                    .then((res) => {
                        createMessage.success(res.msg);
                        setFormProps({ confirmLoading: false });
                        if (state.submitType == 1) {
                            initData();
                            state.isContinue = true;
                        } else {
                            setFormProps({ open: false });
                            emit('reload');
                        }
                    })
                    .catch(() => {
                        setFormProps({ confirmLoading: false });
                    });
        } catch (_) {}
    }
    function handlePrev() {
        state.currIndex--;
        handleGetNewInfo();
    }
    function handleNext() {
        state.currIndex++;
        handleGetNewInfo();
    }
    function handleGetNewInfo() {
        changeLoading(true);
        getForm().resetFields();
        const id = state.allList[state.currIndex].id;
        getData(id);
    }
    function setFormProps(data) {
    #if(${context.popupType}=="fullScreen")
        setPopupProps(data);
    #end
    #if(${context.popupType}=="general")
        setModalProps(data);
    #end
    #if(${context.popupType}=="drawer")
        setDrawerProps(data);
    #end
    }
    function changeLoading(loading) {
    #if(${context.popupType}=="fullScreen")
        setPopupProps({ loading });
    #end
    #if(${context.popupType}=="general")
        setModalProps({ loading });
    #end
    #if(${context.popupType}=="drawer")
        setDrawerProps({ loading });
    #end
    }
    async function onClose() {
        if (state.isContinue) emit('reload');
        return true;
    }

    ##合计方法
    #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
    ##数据联动changeData方法
    #ChangeData()
    ##子表其他方法
    #CreateChildTableMethod()
    ##子表弹窗数据方法
    #if($isSelectDialog == true)
    #ChildDialogMethod()
    #end
##数据选项--数据字典和远端数据初始化方法
    #GetDataOptionsMethod()
##动态时间处理
    #GetRelationDate()
</script>