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

#parse("PublicMacro/DetailMarco.vm")
#parse("PublicMacro/ConstantMarco.vm")
##参数
#ConstantParams()
<template>
##    全屏弹窗
#if(${context.popupType}=="fullScreen")
    <BasicPopup v-bind="$attrs" @register="registerPopup" :title="title" destroyOnClose>
        <template #insertToolbar>
            #if(${context.HasPrintBtn})
              <a-button type="primary" @click="handlePrint">#if(${context.printButtonTextI18nCode}){{t('${context.printButtonTextI18nCode}','${context.printButtonText}')}}#else${context.printButtonText}#end</a-button>
            #end
        </template>
        <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"  ref="formRef" >
            <a-row :gutter="#if(${context.formStyle}=='word-form')0#else${context.gutter}#end">
                <!-- 具体表单 -->
                #DetailFormRendering()
                <!-- 表单结束 -->
            </a-row>
            </a-form>
        </a-row>
    </BasicPopup>
#end
##    普通弹窗
#if(${context.popupType}=="general")
    <BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="${context.generalWidth}"
                :minHeight="100" :showOkBtn="false">
        <template #insertFooter>
            #if(${context.HasPrintBtn})
              <a-button type="primary" @click="handlePrint">#if(${context.printButtonTextI18nCode}){{t('${context.printButtonTextI18nCode}','${context.printButtonText}')}}#else${context.printButtonText}#end</a-button>
            #end
        </template>
        <!-- 表单 -->
        <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"  ref="formRef">
            <a-row :gutter="#if(${context.formStyle}=='word-form')0#else${context.gutter}#end">
                <!-- 具体表单 -->
                #DetailFormRendering()
                <!-- 表单结束 -->
            </a-row>
            </a-form>
        </a-row>
    </BasicModal>
#end
##    右侧弹窗
#if(${context.popupType}=="drawer")
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" width="${context.drawerWidth}" showFooter
                 :showOkBtn="false">
        <template #insertFooter>
            #if(${context.HasPrintBtn})
              <a-button type="primary" @click="handlePrint">#if(${context.printButtonTextI18nCode}){{t('${context.printButtonTextI18nCode}','${context.printButtonText}')}}#else${context.printButtonText}#end</a-button>
            #end
        </template>
        <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"  ref="formRef" >
            <a-row :gutter="#if(${context.formStyle}=='word-form')0#else${context.gutter}#end">
                <!-- 具体表单 -->
                #DetailFormRendering()
                <!-- 表单结束 -->
            </a-row>
            </a-form>
        </a-row>
    </BasicDrawer>
#end
    <!-- 有关联表单详情：开始 -->
    <RelationDetail ref="relationDetailRef" />
    <!-- 有关联表单详情：结束 -->
    #if(${context.HasPrintBtn})
        <PrintSelect @register="registerPrintSelect" @change="handleShowBrowse" />
        <PrintBrowse @register="registerPrintBrowse" />
    #end
</template>
<script lang="ts" setup>
    import { getDetailInfo } from './helper/api';
    import { getConfigData } from '@/api/onlineDev/visualDev';
    import { reactive, toRefs, nextTick, ref, computed, unref ,toRaw} from 'vue';
    #if(${context.popupType}=="fullScreen")
    import { BasicPopup, usePopup } from '@/components/Popup';
    #end
    import { BasicModal, useModal } from '@/components/Modal';
    #if(${context.popupType}=="drawer")
    import { BasicDrawer, useDrawer } from '@/components/Drawer';
    #end
    #if($childSummary == true)
    import { thousandsFormat } from '@/utils/jnpf';
    #end
    // 有关联表单详情
    import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
    // 表单权限
    import { usePermission } from '@/hooks/web/usePermission';
    #if(${context.HasPrintBtn})
    // 打印模板多条生成PrintSelect
    import PrintSelect from '@/components/PrintDesign/printSelect/index.vue';
    import PrintBrowse from '@/components/PrintDesign/printBrowse/index.vue';
    #end
    import { useMessage } from '@/hooks/web/useMessage';
    import { CaretRightOutlined } from '@ant-design/icons-vue';
    import { buildUUID } from '@/utils/uuid';
    import { useI18n } from '@/hooks/web/useI18n';
    import { getDataChange } from '@/api/onlineDev/visualDev';
    import { getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface';
    import ExtraRelationInfo from '@/components/Jnpf/RelationForm/src/ExtraRelationInfo.vue';

    interface State {
        dataForm: any;
        title: string;
        maskConfig: any;
        interfaceRes: any;
        locationScope: any;
        extraOptions: any;
        extraData: any;

##  活动面板参数
#foreach($fieLdsModel in ${context.form})
#set($jnpfKey = "${fieLdsModel.jnpfKey}")
#set($formModel = ${fieLdsModel.formModel})
#set($outermost = ${formModel.outermost})
#set($isEnd = "${fieLdsModel.isEnd}")
#if(${isEnd}=='0')
    #if($jnpfKey=='collapse')
        #if(${outermost}=='0')
            ${formModel.model}:any;
        #end
    #end
    #if($jnpfKey=='tab')
        #if(${outermost}=='0')
            ${formModel.model}:any;
        #end
    #end
    #if($jnpfKey=='steps')
        #if(${outermost}=='0')
            ${formModel.model}:any;
        #end
    #end
#end
#end
##    子表平铺活动面板变量
#foreach($children in ${context.children})
    #set($aliasname = "${children.aliasLowName}")
    #if($!{children.layoutType} == 'list')
            ${aliasname}outerActiveKey: any;
            ${aliasname}innerActiveKey: any;
    #end
#end
    }

    defineOptions({ name: 'Detail' });
    const { createMessage, createConfirm } = useMessage();
    #if(${context.popupType}=="fullScreen")
    const [registerPopup, { openPopup, setPopupProps, closePopup }] = usePopup();
    #end
    #if(${context.popupType}=="general")
    const [registerModal, { openModal, setModalProps, closeModal }] = useModal();
    #end
    #if(${context.popupType}=="drawer")
    const [registerDrawer, { openDrawer, setDrawerProps, closeDrawer }] = useDrawer();
    #end
    #if(${context.HasPrintBtn})
    const [registerPrintSelect, { openModal: openPrintSelect }] = useModal();
    const [registerPrintBrowse, { openModal: openPrintBrowse }] = useModal();
    #end
    ##子表列表字段-及合计方法
    #DetailChildTableColumns()

    const { t } = useI18n();
    const relationDetailRef = ref<any>(null);
    const state = reactive<State>({
        dataForm:{},
        title: t('common.detailText','详情'),
        maskConfig:#CreateMaskConfig(),
        interfaceRes: ${context.templateJsonAll},
        locationScope:#CreateLocationScope(),
        extraOptions: #CreateExtraOptions(),
        extraData: #CreateExtraData(),
##  活动面板参数
#foreach($fieLdsModel in ${context.form})
    #set($jnpfKey = "${fieLdsModel.jnpfKey}")
    #set($formModel = ${fieLdsModel.formModel})
    #set($outermost = ${formModel.outermost})
    #set($isEnd = "${fieLdsModel.isEnd}")
    #if(${isEnd}=='0')
        #if($jnpfKey=='collapse')
            #if(${outermost}=='0')
        ${formModel.model}:${formModel.active},
            #end
        #end
        #if($jnpfKey=='tab')
            #if(${outermost}=='0')
        ${formModel.model}:'${formModel.active}',
            #end
        #end
        #if($jnpfKey=='steps')
            #if(${outermost}=='0')
        ${formModel.model}:${formModel.active},
            #end
        #end
    #end
#end
##    子表平铺活动面板变量
#foreach($children in ${context.children})
    #set($aliasname = "${children.aliasLowName}")
    #if($!{children.layoutType} == 'list')
        ${aliasname}outerActiveKey: [0],
        ${aliasname}innerActiveKey: [],
    #end
#end
    });
    const { title, dataForm, maskConfig } = toRefs(state);
    // 表单权限
    const { hasFormP } = usePermission();

    defineExpose({ init });

    function init(data) {
        state.dataForm.id = data.id;
        #if(${context.popupType}=="fullScreen")
            openPopup();
        #end
        #if(${context.popupType}=="general")
            openModal();
        #end
        #if(${context.popupType}=="drawer")
            openDrawer();
        #end
        nextTick(() => {
            setTimeout(initData, 0);
        });
    }
    function initData() {
        changeLoading(true);
        #InitActiveValue()
        if (state.dataForm.id) {
            getData(state.dataForm.id);
        } else {
        #if(${context.popupType}=="fullScreen")
            closePopup();
        #end
        #if(${context.popupType}=="general")
            closeModal();
        #end
        #if(${context.popupType}=="drawer")
            closeDrawer();
        #end
        }
    }
    function getData(id) {
        getDetailInfo(id).then((res) => {
            state.dataForm = res.data || {};
            nextTick(() => {
## 子表平铺，默认展开
        #foreach($itemModel in ${context.children})
            #set($aliasname =$itemModel.aliasLowName)
            #if($!{itemModel.layoutType} == 'list')
                  if (state.dataForm.${aliasname}List) {
                    for (let i = 0; i < state.dataForm.${aliasname}List.length; i++) {
                      state.dataForm.${aliasname}List[i].jnpfId = buildUUID();
                    }
                  }
                  set${aliasname}ActiveKey();
            #end
        #end
              #runAllExtraFun()
                changeLoading(false);
            });
        });
    }

##   平铺布局时设置默认展开
#foreach($itemModel in ${context.children})
    #if(${itemModel.layoutType} == 'list')
    #set($aliasname =$itemModel.aliasLowName)
    // 平铺布局时设置默认展开
    function set${aliasname}ActiveKey() {
        state.${aliasname}outerActiveKey = [0];
        state.${aliasname}innerActiveKey = [];
        #if(${itemModel.defaultExpandAll})
            state.${aliasname}innerActiveKey = ['summary'];
            if (!state.dataForm.${aliasname}List.length) return;
            for (let i = 0; i < state.dataForm.${aliasname}List.length; i++) {
                state.${aliasname}innerActiveKey.push(state.dataForm.${aliasname}List[i].jnpfId);
            }
        #end
    }
    #end
#end
    function toDetail(modelId, id, propsValue) {
        if (!id) return;
        getConfigData(modelId).then((res) => {
            if (!res.data || !res.data.formData) return;
            const formConf = JSON.parse(res.data.formData);
            formConf.popupType = 'general';
            formConf.hasPrintBtn = false;
            formConf.customBtns = [];
            const data = { id, formConf, modelId, propsValue};
            relationDetailRef.value?.init(data);
        });
    }
    #if($context.HasPrintBtn)
    function handlePrint() {
        let printId=#if(${context.PrintId})${context.PrintId}#else [] #end
        if (!printId?.length) return createMessage.error('未配置打印模板');
        if (printId?.length === 1) return  handleShowBrowse(printId[0]);
        openPrintSelect(true, printId);
    }
    function handleShowBrowse(id) {
        openPrintBrowse(true, { id, formInfo: [{ formId: state.dataForm.id }] });
    }
    #end
    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) {
        setFormProps({ loading });
    }
    ##合计方法
    #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

    function getParamList(key) {
      let templateJson: any[] = state.interfaceRes[key];
      if (!templateJson || !templateJson.length || !state.dataForm) return templateJson;
      for (let i = 0; i < templateJson.length; i++) {
        if (templateJson[i].relationField && templateJson[i].sourceType == 1) {
          templateJson[i].defaultValue = state.dataForm[templateJson[i].relationField + '_id'] || '';
        }
      }
      return templateJson;
    }
##  生成关联表单弹窗初始化数据方法
    #ExtraInfoFun()
</script>