2025-06-30 09:38:03 +08:00

362 lines
14 KiB
Plaintext

#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>