mirror of
https://gitee.com/myxzgzs/boyue_jnpf.git
synced 2025-08-09 07:42:43 +08:00
417 lines
17 KiB
Plaintext
417 lines
17 KiB
Plaintext
|
#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>
|