yunzhupaas/yunzhupaas-web-vue3
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(contracttemp): 用抽屉替换模态框优化详情和表单界面

Browse Source 
- 将 Detail.vue 与 Form.vue 中的 BasicModal 替换为 BasicDrawer
- 调整详情页和表单页布局样式，包含内边距和宽度设置
- 更新状态管理和方法，匹配抽屉打开、关闭与加载流程
- 统一合同打印模板字段列展示格式，修正字段名错误
- 增加合同模版编码与名称为必填且唯一属性
- 修正合同参数和打印模板的提示文案细节
- 优化代码格式及空格缩进统一规范
This commit is contained in:
朱进
2026-05-21 16:23:35 +08:00
parent 301c0199d2
commit 05cd45a18d
4 changed files with 436 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

775
src/views/cm/contracttemp/Detail.vue
View File

@@ -1,423 +1,418 @@
<template> <template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="1000px" :minHeight="100" <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" width="80%" showFooter
:showOkBtn="false"> :showOkBtn="false">
<template #insertFooter> <template #insertFooter>
</template> </template>
<!-- 表单 --> <a-row class="p-10px dynamic-form ">
<a-row class="dynamic-form "> <!-- 表单 -->
<a-form :colon="false" size="middle" layout="horizontal" labelAlign="right" <a-form :colon="false" size="middle" layout= "horizontal"
:labelCol="{ style: { width: '100px' } }" :model="dataForm" ref="formRef"> labelAlign= "right"
<a-row :gutter="15"> :labelCol="{ style: { width: '100px' } }" :model="dataForm" ref="formRef" >
<!-- 具体表单 --> <a-row :gutter="15">
<a-col :span="12" class="ant-col-item"> <!-- 具体表单 -->
<a-form-item name="contract_temp_code"> <a-col :span="12" class="ant-col-item" >
<template #label>合同模版编码 <a-form-item
</template> name="contract_temp_code" >
<YunzhupaasInput v-model:value="dataForm.contract_temp_code" placeholder="请输入" disabled <template #label>合同模版编码
detailed allowClear :style='{ "width": "100%" }' </template> <YunzhupaasInput v-model:value="dataForm.contract_temp_code"
:maskConfig="maskConfig.contract_temp_code"> placeholder="请输入" disabled
</YunzhupaasInput> detailed allowClear :style='{"width":"100%"}' :maskConfig = "maskConfig.contract_temp_code" >
</a-form-item> </YunzhupaasInput>
</a-col> </a-form-item>
<a-col :span="12" class="ant-col-item"> </a-col>
<a-form-item name="contract_temp_name"> <a-col :span="12" class="ant-col-item" >
<template #label>合同模版名称 <a-form-item
</template> name="contract_temp_name" >
<YunzhupaasInput v-model:value="dataForm.contract_temp_name" placeholder="请输入" disabled <template #label>合同模版名称
detailed allowClear :style='{ "width": "100%" }' </template> <YunzhupaasInput v-model:value="dataForm.contract_temp_name"
:maskConfig="maskConfig.contract_temp_name"> placeholder="请输入" disabled
</YunzhupaasInput> detailed allowClear :style='{"width":"100%"}' :maskConfig = "maskConfig.contract_temp_name" >
</a-form-item> </YunzhupaasInput>
</a-col> </a-form-item>
<a-col :span="24" class="ant-col-item"> </a-col>
<a-form-item name="remark"> <a-col :span="24" class="ant-col-item" >
<template #label>备注 <a-form-item
</template> name="remark" >
<p>{{ dataForm.remark }}</p> <template #label>备注
</a-form-item> </template> <p>{{dataForm.remark}}</p>
</a-col> </a-form-item>
<a-col :span="24" class="ant-col-item"> </a-col>
<a-tabs v-model:activeKey="state.activetabformItem45e7a2" tabPosition="left" class="mb-20"> <a-col :span="24" class="ant-col-item">
<a-tab-pane tab="合同框架" key="1" forceRender> <a-tabs v-model:activeKey="state.activetabformItem45e7a2" tabPosition="left" class="mb-20" >
<a-row :gutter="15"> <a-tab-pane tab="合同框架" key="1" forceRender>
<table class="table-grid-box" <a-row :gutter="15">
:style='{ "--borderType": "solid", "--borderColor": "#E2E0E0", "--borderWidth": "1px" }'> <table class="table-grid-box" :style='{"--borderType":"solid","--borderColor":"#E2E0E0","--borderWidth":"1px"}'>
<tbody> <tbody>
<tr> <tr>
<td colspan="1" rowspan="1"> <td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item"> <a-col :span="24" class="ant-col-item" >
<a-form-item name="is_framework"> <a-form-item
<template #label>框架合同 name="is_framework" >
<BasicHelp text="是：只有合同基本信息和合同主体，无合同清单、金额、付款计划。否：反之" /> <template #label>框架合同
</template> <BasicHelp text="是：只有合同基本信息和合同主体，无合同清单、金额、付款计划。否：反之" /></template> <p>{{dataForm.is_framework}}</p>
<p>{{ dataForm.is_framework }}</p> </a-form-item>
</a-form-item> </a-col>
</a-col> </td>
</td> <td colspan="1" rowspan="1">
<td colspan="1" rowspan="1"> <a-col :span="24" class="ant-col-item" >
<a-col :span="24" class="ant-col-item"> <a-form-item
<a-form-item name="is_detail_list"> name="is_detail_list" >
<template #label>清单合同 <template #label>清单合同
<BasicHelp <BasicHelp text="是：显示合同清单，合同金额根据清单金额汇总生成；否：不显示清单，只显示合同金额与付款计划，合同金额手工录入" /></template> <p>{{dataForm.is_detail_list}}</p>
text="是：显示合同清单，合同金额根据清单金额汇总生成；否：不显示清单，只显示合同金额与付款计划，合同金额手工录入" /> </a-form-item>
</template> </a-col>
<p>{{ dataForm.is_detail_list }}</p> </td>
</a-form-item> </tr>
</a-col> <tr>
</td> <td colspan="1" rowspan="1">
</tr> <a-col :span="24" class="ant-col-item" >
<tr> <a-form-item
<td colspan="1" rowspan="1"> name="enable_tableProductList" >
<a-col :span="24" class="ant-col-item"> <template #label>启用产品清单
<a-form-item name="enable_tableProductList"> </template> <p>{{dataForm.enable_tableProductList}}</p>
<template #label>启用产品清单 </a-form-item>
</template> </a-col>
<p>{{ dataForm.enable_tableProductList }}</p> </td>
</a-form-item> <td colspan="1" rowspan="1">
</a-col> <a-col :span="24" class="ant-col-item" >
</td> <a-form-item
<td colspan="1" rowspan="1"> name="enable_tableMaterialList" >
<a-col :span="24" class="ant-col-item"> <template #label>启用材料清单
<a-form-item name="enable_tableMaterialList"> </template> <p>{{dataForm.enable_tableMaterialList}}</p>
<template #label>启用材料清单 </a-form-item>
</template> </a-col>
<p>{{ dataForm.enable_tableMaterialList }}</p> </td>
</a-form-item> </tr>
</a-col> <tr>
</td> <td colspan="1" rowspan="1">
</tr> <a-col :span="24" class="ant-col-item" >
<tr> <a-form-item
<td colspan="1" rowspan="1"> name="enable_tableWorktypeList" >
<a-col :span="24" class="ant-col-item"> <template #label>启用人力清单
<a-form-item name="enable_tableWorktypeList"> </template> <p>{{dataForm.enable_tableWorktypeList}}</p>
<template #label>启用人力清单 </a-form-item>
</template> </a-col>
<p>{{ dataForm.enable_tableWorktypeList }}</p> </td>
</a-form-item> <td colspan="1" rowspan="1">
</a-col> <a-col :span="24" class="ant-col-item" >
</td> <a-form-item
<td colspan="1" rowspan="1"> name="enable_tableAssetList" >
<a-col :span="24" class="ant-col-item"> <template #label>启用资产清单
<a-form-item name="enable_tableAssetList"> </template> <p>{{dataForm.enable_tableAssetList}}</p>
<template #label>启用资产清单 </a-form-item>
</template> </a-col>
<p>{{ dataForm.enable_tableAssetList }}</p> </td>
</a-form-item> </tr>
</a-col> <tr>
</td> <td colspan="1" rowspan="1">
</tr> <a-col :span="24" class="ant-col-item" >
<tr> <a-form-item
<td colspan="1" rowspan="1"> name="enable_tableTaskList" >
<a-col :span="24" class="ant-col-item"> <template #label>启用任务清单
<a-form-item name="enable_tableTaskList"> </template> <p>{{dataForm.enable_tableTaskList}}</p>
<template #label>启用任务清单 </a-form-item>
</template> </a-col>
<p>{{ dataForm.enable_tableTaskList }}</p> </td>
</a-form-item> <td colspan="1" rowspan="1">
</a-col> </td>
</td> </tr>
<td colspan="1" rowspan="1"> <tr>
</td> <td colspan="1" rowspan="1">
</tr> </td>
<tr> <td colspan="1" rowspan="1">
<td colspan="1" rowspan="1"> </td>
</td> </tr>
<td colspan="1" rowspan="1"> </tbody>
</td> </table>
</tr>
</tbody>
</table>
</a-row>
</a-tab-pane>
<a-tab-pane tab="合同参数" key="2" forceRender>
<a-row :gutter="15">
<table class="table-grid-box"
:style='{ "--borderType": "solid", "--borderColor": "#E2E0E0", "--borderWidth": "1px" }'>
<tbody>
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item">
<a-form-item name="contract_type">
<template #label>合同类型
</template>
<p>{{ dataForm.contract_type }}</p>
</a-form-item>
</a-col>
</td>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item">
<a-form-item name="enable_printing">
<template #label>启用在线打印
</template>
<p>{{ dataForm.enable_printing }}</p>
</a-form-item>
</a-col>
</td>
</tr>
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item">
<a-form-item name="our_company_type">
<template #label>我方签约类型
</template>
<p>{{ dataForm.our_company_type }}</p>
</a-form-item>
</a-col>
</td>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item">
<a-form-item name="second_party_type">
<template #label>乙方签约类型
</template>
<p>{{ dataForm.second_party_type }}</p>
</a-form-item>
</a-col>
</td>
</tr>
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item">
<a-form-item name="third_party_type">
<template #label>丙方签约类型
</template>
<p>{{ dataForm.third_party_type }}</p>
</a-form-item>
</a-col>
</td>
<td colspan="1" rowspan="1">
</td>
</tr>
</tbody>
</table>
</a-row>
</a-tab-pane>
<a-tab-pane tab="打印模版" key="fbb4be" forceRender>
<a-row :gutter="15">
<a-col :span="24" class="ant-col-item mb-20px">
<a-form-item>
<a-table :data-source="dataForm.tablePrintingTemp"
:columns="contractPrintingTempColumns" size="small" :pagination="false"
:scroll="{ x: 'max-content' }">
<template #headerCell="{ column }">
<span class="required-sign" v-if="column.required">*</span>
{{ column.title }}
<BasicHelp :text="column.tipLabel"
v-if="column.tipLabel && column.title" />
</template>
<template #bodyCell="{ column, index, record }">
<template v-if="column.key === 'index'">{{ index + 1 }}</template>
<template v-if="column.key === 'printing_temp_id'">
<p>{{ record.printing_temp_id }}</p>
</template>
<template v-if="column.key === 'is_enabled'">
<p>{{ record.is_enabled }}</p>
</template>
</template>
</a-table>
</a-form-item>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</a-col>
<!-- 表单结束 -->
</a-row> </a-row>
</a-tab-pane >
<a-tab-pane tab="合同参数" key="2" forceRender>
<a-row :gutter="15">
<table class="table-grid-box" :style='{"--borderType":"solid","--borderColor":"#E2E0E0","--borderWidth":"1px"}'>
<tbody>
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item
name="contract_type" >
<template #label>合同类型
</template> <p>{{dataForm.contract_type}}</p>
</a-form-item>
</a-col>
</td>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item
name="enable_printing" >
<template #label>启用在线打印
</template> <p>{{dataForm.enable_printing}}</p>
</a-form-item>
</a-col>
</td>
</tr>
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item
name="our_company_type" >
<template #label>我方签约类型
</template> <p>{{dataForm.our_company_type}}</p>
</a-form-item>
</a-col>
</td>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item
name="second_party_type" >
<template #label>乙方签约类型
</template> <p>{{dataForm.second_party_type}}</p>
</a-form-item>
</a-col>
</td>
</tr>
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item
name="third_party_type" >
<template #label>丙方签约类型
</template> <p>{{dataForm.third_party_type}}</p>
</a-form-item>
</a-col>
</td>
<td colspan="1" rowspan="1">
</td>
</tr>
</tbody>
</table>
</a-row>
</a-tab-pane >
<a-tab-pane tab="打印模版" key="fbb4be" forceRender>
<a-row :gutter="15">
<a-col :span="24" class="ant-col-item mb-20px" >
<a-form-item>
<a-table :data-source="dataForm.tablePrintingTemp"
:columns="contractPrintingTempColumns" size="small" :pagination="false" :scroll="{ x: 'max-content' }">
<template #headerCell="{ column }">
<span class="required-sign" v-if="column.required">*</span>
{{ column.title }}
<BasicHelp :text="column.tipLabel" v-if="column.tipLabel && column.title" />
</template>
<template #bodyCell="{ column, index, record }">
<template v-if="column.key === 'index'">{{ index + 1 }}</template>
<template v-if="column.key === 'printing_temp_id' ">
<p>{{record.printing_temp_id}}</p>
</template>
<template v-if="column.key === 'is_enabled' ">
<p>{{record.is_enabled}}</p>
</template>
</template>
</a-table>
</a-form-item>
</a-col>
</a-row>
</a-tab-pane >
</a-tabs>
</a-col>
<!-- 表单结束 -->
</a-row>
</a-form> </a-form>
</a-row> </a-row>
</BasicModal> </BasicDrawer>
<!-- 有关联表单详情：开始 --> <!-- 有关联表单详情：开始 -->
<RelationDetail ref="relationDetailRef" /> <RelationDetail ref="relationDetailRef" />
<!-- 有关联表单详情：结束 --> <!-- 有关联表单详情：结束 -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { getDetailInfo } from './helper/api'; import { getDetailInfo } from './helper/api';
import { getConfigData } from '@/api/onlineDev/visualDev'; import { getConfigData } from '@/api/onlineDev/visualDev';
import { reactive, toRefs, nextTick, ref, computed, unref, toRaw } from 'vue'; import { reactive, toRefs, nextTick, ref, computed, unref ,toRaw} from 'vue';
import { BasicModal, useModal } from '@/components/Modal'; import { BasicModal, useModal } from '@/components/Modal';
// 有关联表单详情 import { BasicDrawer, useDrawer } from '@/components/Drawer';
import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue'; // 有关联表单详情
// 表单权限 import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
import { usePermission } from '@/hooks/web/usePermission'; // 表单权限
import { useMessage } from '@/hooks/web/useMessage'; import { usePermission } from '@/hooks/web/usePermission';
import { CaretRightOutlined } from '@ant-design/icons-vue'; import { useMessage } from '@/hooks/web/useMessage';
import { buildUUID } from '@/utils/uuid'; import { CaretRightOutlined } from '@ant-design/icons-vue';
import { useI18n } from '@/hooks/web/useI18n'; import { buildUUID } from '@/utils/uuid';
import { getDataChange } from '@/api/onlineDev/visualDev'; import { useI18n } from '@/hooks/web/useI18n';
import { getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface'; import { getDataChange } from '@/api/onlineDev/visualDev';
import ExtraRelationInfo from '@/components/yunzhupaas/RelationForm/src/ExtraRelationInfo.vue'; import { getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface';
import ExtraRelationInfo from '@/components/yunzhupaas/RelationForm/src/ExtraRelationInfo.vue';
interface State { interface State {
dataForm: any; dataForm: any;
title: string; title: string;
maskConfig: any; maskConfig: any;
interfaceRes: any; interfaceRes: any;
locationScope: any; locationScope: any;
extraOptions: any; extraOptions: any;
extraData: any; extraData: any;
activetabformItem45e7a2: any; activetabformItem45e7a2:any;
} }
defineOptions({ name: 'Detail' }); defineOptions({ name: 'Detail' });
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const [registerModal, { openModal, setModalProps, closeModal }] = useModal(); const [registerDrawer, { openDrawer, setDrawerProps, closeDrawer }] = useDrawer();
const contractPrintingTempColumns: any[] = computed(() => { const contractPrintingTempColumns: any[] = computed(() => {
let list = [ let list = [
{ {
title: '打印模版ID', title: '打印模版ID' ,
dataIndex: 'printing_temp_id', dataIndex: 'printing_temp_id' ,
key: 'printing_temp_id', key: 'printing_temp_id' ,
width: 350, width: 350,
labelWidth: '', labelWidth: '' ,
span: '24', span:'24',
tipLabel: '', tipLabel: '' ,
required: false, required: false,
style: { "width": "100%" }, style: {"width":"100%"} ,
align: 'left', align: 'left',
fixed: false, fixed: false ,
formP: 'printing_temp_id', formP: 'printing_temp_id' ,
}, },
{ {
title: '是否启用', title: '是否启用' ,
dataIndex: 'is_enabled', dataIndex: 'is_enabled' ,
key: 'is_enabled', key: 'is_enabled' ,
labelWidth: '', labelWidth: '' ,
span: '24', span:'24',
tipLabel: '', tipLabel: '' ,
required: false, required: false,
style: '', style: '',
align: 'left', align: 'left',
fixed: false, fixed: false ,
formP: 'is_enabled', formP: 'is_enabled' ,
}, },
]; ];
const indexColumn = { title: '序号', showLabel: true, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left', width: 50 }; const indexColumn = { title: '序号', showLabel: true, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left', width: 50 };
//子表复杂表头-处理 //子表复杂表头-处理
let columnList = list; let columnList = list;
let complexHeaderList: any[] = []; let complexHeaderList: any[] = [];
if (complexHeaderList.length) { if (complexHeaderList.length) {
let childColumns: any[] = []; let childColumns: any[] = [];
let firstChildColumns: string[] = []; let firstChildColumns: string[] = [];
for (let i = 0; i < complexHeaderList.length; i++) { for (let i = 0; i < complexHeaderList.length; i++) {
const e = complexHeaderList[i]; const e = complexHeaderList[i];
e.title = e.fullNameI18nCode ? t(e.fullNameI18nCode, e.fullName) : e.fullName; e.title = e.fullNameI18nCode ? t(e.fullNameI18nCode,e.fullName) : e.fullName;
e.align = e.align; e.align = e.align;
e.children = []; e.children = [];
e.yunzhupaasKey = 'complexHeader'; e.yunzhupaasKey = 'complexHeader';
if (e.childColumns?.length) { if (e.childColumns?.length) {
childColumns.push(...e.childColumns); childColumns.push(...e.childColumns);
for (let k = 0; k < e.childColumns.length; k++) { for (let k = 0; k < e.childColumns.length; k++) {
const item = e.childColumns[k]; const item = e.childColumns[k];
for (let j = 0; j < list.length; j++) { for (let j = 0; j < list.length; j++) {
const o = list[j]; const o = list[j];
if (o.key == item && o.fixed !== 'left' && o.fixed !== 'right') e.children.push({ ...o }); if (o.key == item && o.fixed !== 'left' && o.fixed !== 'right') e.children.push({ ...o });
}
}
}
if (e.children.length) firstChildColumns.push(e.children[0].key);
}
complexHeaderList = complexHeaderList.filter(o => o.children.length);
let newList: any[] = [];
for (let i = 0; i < list.length; i++) {
const e = list[i];
if (!childColumns.includes(e.key) || e.fixed === 'left' || e.fixed === 'right') {
newList.push(e);
} else {
if (firstChildColumns.includes(e.key)) {
const item = complexHeaderList.find(o => o.childColumns.includes(e.key));
newList.push(item);
} }
} }
} }
if (e.children.length) firstChildColumns.push(e.children[0].key); columnList = newList;
} }
complexHeaderList = complexHeaderList.filter(o => o.children.length); let columns = [indexColumn, ...columnList]
let newList: any[] = []; const leftFixedList = columns.filter(o => o.fixed === 'left');
for (let i = 0; i < list.length; i++) { const rightFixedList = columns.filter(o => o.fixed === 'right');
const e = list[i]; const noFixedList = columns.filter(o => o.fixed !== 'left' && o.fixed !== 'right');
if (!childColumns.includes(e.key) || e.fixed === 'left' || e.fixed === 'right') { return [...leftFixedList, ...noFixedList, ...rightFixedList];
newList.push(e);
} else {
if (firstChildColumns.includes(e.key)) {
const item = complexHeaderList.find(o => o.childColumns.includes(e.key));
newList.push(item);
}
}
}
columnList = newList;
}
let columns = [indexColumn, ...columnList]
const leftFixedList = columns.filter(o => o.fixed === 'left');
const rightFixedList = columns.filter(o => o.fixed === 'right');
const noFixedList = columns.filter(o => o.fixed !== 'left' && o.fixed !== 'right');
return [...leftFixedList, ...noFixedList, ...rightFixedList];
});
const { t } = useI18n();
const relationDetailRef = ref<any>(null);
const state = reactive<State>({
dataForm: {},
title: t('common.detailText', '详情'),
maskConfig: {
contract_temp_code: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
contract_temp_name: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
}
,
interfaceRes: { "enable_tableAssetList": [], "is_framework": [], "enable_tableMaterialList": [], "enable_printing": [], "our_company_type": [], "third_party_type": [], "remark": [], "contractPrintingTempprinting_temp_id": [], "enable_tableWorktypeList": [], "contract_type": [], "enable_tableTaskList": [], "contractPrintingTempis_enabled": [], "contract_temp_code": [], "enable_tableProductList": [], "is_detail_list": [], "second_party_type": [], "contract_temp_name": [] },
locationScope: {
}
,
extraOptions: {
}
,
extraData: {
}
,
activetabformItem45e7a2: 'fbb4be',
});
const { title, dataForm, maskConfig } = toRefs(state);
// 表单权限
const { hasFormP } = usePermission();
defineExpose({ init });
function init(data) {
state.dataForm.id = data.id;
openModal();
nextTick(() => {
setTimeout(initData, 0);
}); });
const { t } = useI18n();
const relationDetailRef = ref<any>(null);
const state = reactive<State>({
dataForm:{},
title: t('common.detailText','详情'),
maskConfig:{
contract_temp_code: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
contract_temp_name: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
} }
function initData() { ,
changeLoading(true); interfaceRes: {"enable_tableAssetList":[],"is_framework":[],"enable_tableMaterialList":[],"enable_printing":[],"our_company_type":[],"third_party_type":[],"remark":[],"contractPrintingTempprinting_temp_id":[],"enable_tableWorktypeList":[],"contract_type":[],"enable_tableTaskList":[],"contractPrintingTempis_enabled":[],"contract_temp_code":[],"enable_tableProductList":[],"is_detail_list":[],"second_party_type":[],"contract_temp_name":[]},
state.activetabformItem45e7a2 = 'fbb4be'; locationScope:{
if (state.dataForm.id) {
getData(state.dataForm.id);
} else {
closeModal();
}
} }
function getData(id) { ,
getDetailInfo(id).then((res) => { extraOptions: {
state.dataForm = res.data || {}; }
,
extraData: {
}
,
activetabformItem45e7a2:'1',
});
const { title, dataForm, maskConfig } = toRefs(state);
// 表单权限
const { hasFormP } = usePermission();
defineExpose({ init });
function init(data) {
state.dataForm.id = data.id;
openDrawer();
nextTick(() => { nextTick(() => {
changeLoading(false); setTimeout(initData, 0);
}); });
}); }
} function initData() {
changeLoading(true);
function toDetail(modelId, id, propsValue) { state.activetabformItem45e7a2='1';
if (!id) return; if (state.dataForm.id) {
getConfigData(modelId).then((res) => { getData(state.dataForm.id);
if (!res.data || !res.data.formData) return; } else {
const formConf = JSON.parse(res.data.formData); closeDrawer();
formConf.popupType = 'general';
formConf.hasPrintBtn = false;
formConf.customBtns = [];
const data = { id, formConf, modelId, propsValue };
relationDetailRef.value?.init(data);
});
}
function setFormProps(data) {
setModalProps(data);
}
function changeLoading(loading) {
setFormProps({ loading });
}
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; function getData(id) {
} getDetailInfo(id).then((res) => {
state.dataForm = res.data || {};
nextTick(() => {
changeLoading(false);
});
});
}
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);
});
}
function setFormProps(data) {
setDrawerProps(data);
}
function changeLoading(loading) {
setFormProps({ loading });
}
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;
}
</script> </script>

57
src/views/cm/contracttemp/Form.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<BasicModal v-bind="$attrs" @register="registerModal" width="1000px" <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="80%" showFooter
:minHeight="100"
:cancelText="t('common.cancelText','取消')" :cancelText="t('common.cancelText','取消')"
:okText="t('common.okText','确定')" :okText="t('common.okText','确定')"
@ok="handleSubmit" :closeFunc="onClose"> @ok="handleSubmit" :closeFunc="onClose">
@@ -26,12 +25,13 @@
<yunzhupaasCheckboxSingle v-model:value="submitType" :label="continueText" /> <yunzhupaasCheckboxSingle v-model:value="submitType" :label="continueText" />
</div> </div>
</template> </template>
<a-row class="dynamic-form "> <a-row class="p-10px dynamic-form ">
<!-- 表单 -->
<a-form :colon="false" size="middle" layout= "horizontal" <a-form :colon="false" size="middle" layout= "horizontal"
labelAlign= "right" labelAlign= "right"
:labelCol="{ style: { width: '100px' } }" :model="dataForm" :rules="dataRule" ref="formRef"> :labelCol="{ style: { width: '100px' } }" :model="dataForm" :rules="dataRule" ref="formRef" >
<a-row :gutter="15"> <a-row :gutter="15">
<!-- 具体表单 --> <!-- 具体表单 -->
<a-col :span="12" class="ant-col-item" > <a-col :span="12" class="ant-col-item" >
<a-form-item <a-form-item
name="contract_temp_code" > name="contract_temp_code" >
@@ -300,8 +300,6 @@
<a-col :span="24" class="ant-col-item mb-20px" > <a-col :span="24" class="ant-col-item mb-20px" >
<a-form-item> <a-form-item>
<yunzhupaasGroupTitle content="设计子表" :bordered="false"
helpMessage="" />
<a-table :data-source="dataForm.contractPrintingTempList" <a-table :data-source="dataForm.contractPrintingTempList"
:columns="contractPrintingTempColumns" size="small" :pagination="false" :scroll="{ x: 'max-content' }" :columns="contractPrintingTempColumns" size="small" :pagination="false" :scroll="{ x: 'max-content' }"
:rowSelection="getcontractPrintingTempRowSelection" rowKey="yunzhupaasId"> :rowSelection="getcontractPrintingTempRowSelection" rowKey="yunzhupaasId">
@@ -346,16 +344,16 @@
</a-tab-pane > </a-tab-pane >
</a-tabs> </a-tabs>
</a-col> </a-col>
<!-- 表单结束 --> <!-- 表单结束 -->
</a-row> </a-row>
</a-form> </a-form>
</a-row> </a-row>
</BasicModal> </BasicDrawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { create, update, getInfo } from './helper/api'; import { create, update, getInfo } from './helper/api';
import { reactive, toRefs, nextTick, ref, unref, computed,toRaw, inject } from 'vue'; import { reactive, toRefs, nextTick, ref, unref, computed,toRaw, inject } from 'vue';
import { BasicModal, useModal } from '@/components/Modal'; import { BasicDrawer, useDrawer } from '@/components/Drawer';
import { yunzhupaasRelationForm } from '@/components/yunzhupaas'; import { yunzhupaasRelationForm } from '@/components/yunzhupaas';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { useI18n } from '@/hooks/web/useI18n'; import { useI18n } from '@/hooks/web/useI18n';
@@ -403,7 +401,7 @@ continueText: string; allList: any[];
const userInfo = userStore.getUserInfo; const userInfo = userStore.getUserInfo;
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const { t } = useI18n(); const { t } = useI18n();
const [registerModal, { openModal, setModalProps }] = useModal(); const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const contractPrintingTempColumns: any[] = computed(() => { const contractPrintingTempColumns: any[] = computed(() => {
let list = [ let list = [
@@ -527,6 +525,27 @@ tableRows:{
}, },
dataRule: { dataRule: {
contract_temp_code: [
{
required: true,
message: t('sys.validate.textRequiredSuffix','不能为空'),
trigger: 'blur'
},
],
contract_temp_name: [
{
required: true,
message: t('sys.validate.textRequiredSuffix','不能为空'),
trigger: 'blur'
},
],
contract_type: [
{
required: true,
message: t('sys.validate.arrayRequiredPrefix ','请至少选择一个'),
trigger: 'change'
},
],
}, },
optionsObj:{ optionsObj:{
@@ -558,7 +577,7 @@ maskConfig:{
locationScope:{ locationScope:{
}, },
activetabformItem45e7a2:'fbb4be', activetabformItem45e7a2:'1',
selectedcontractPrintingTempRowKeys : [], selectedcontractPrintingTempRowKeys : [],
extraOptions:{ extraOptions:{
}, },
@@ -585,7 +604,7 @@ extraOptions:{
state.title = !data.id ? t('common.add2Text','新增') : t('common.editText','编辑'); state.title = !data.id ? t('common.add2Text','新增') : t('common.editText','编辑');
state.continueText = !data.id ? t('common.continueAndAddText','确定并新增') : t('common.continueText','确定并继续'); setFormProps({ continueLoading: false }); state.continueText = !data.id ? t('common.continueAndAddText','确定并新增') : t('common.continueText','确定并继续'); setFormProps({ continueLoading: false });
state.dataForm.id = data.id; state.dataForm.id = data.id;
openModal(); openDrawer();
state.allList = data.allList; state.allList = data.allList;
state.currIndex = state.allList.length && data.id ? state.allList.findIndex((item) => item.id === data.id) : 0; state.currIndex = state.allList.length && data.id ? state.allList.findIndex((item) => item.id === data.id) : 0;
nextTick(() => { nextTick(() => {
@@ -596,7 +615,7 @@ extraOptions:{
} }
function initData() { function initData() {
changeLoading(true); changeLoading(true);
state.activetabformItem45e7a2='fbb4be'; state.activetabformItem45e7a2='1';
if (state.dataForm.id) { if (state.dataForm.id) {
getData(state.dataForm.id); getData(state.dataForm.id);
} else { } else {
@@ -696,10 +715,10 @@ extraOptions:{
getData(id); getData(id);
} }
function setFormProps(data) { function setFormProps(data) {
setModalProps(data); setDrawerProps(data);
} }
function changeLoading(loading) { function changeLoading(loading) {
setModalProps({ loading }); setDrawerProps({ loading });
} }
async function onClose() { async function onClose() {
if (state.isContinue) emit('reload'); if (state.isContinue) emit('reload');

5
src/views/cm/contracttemp/helper/columnList.ts
View File

@@ -23,11 +23,12 @@ const columnList = [
"label":"合同模版编码", "label":"合同模版编码",
"trigger":"blur", "trigger":"blur",
"showLabel":true, "showLabel":true,
"required":false, "required":true,
"tableName":"cm_contract_temp", "tableName":"cm_contract_temp",
"renderKey":1779197093361, "renderKey":1779197093361,
"layout":"colFormItem", "layout":"colFormItem",
"tagIcon":"icon-ym icon-ym-generator-input", "tagIcon":"icon-ym icon-ym-generator-input",
"unique":true,
"tag":"YunzhupaasInput", "tag":"YunzhupaasInput",
"regList":[], "regList":[],
"tableAlign":"left", "tableAlign":"left",
@@ -99,7 +100,7 @@ const columnList = [
"label":"合同模版名称", "label":"合同模版名称",
"trigger":"blur", "trigger":"blur",
"showLabel":true, "showLabel":true,
"required":false, "required":true,
"tableName":"cm_contract_temp", "tableName":"cm_contract_temp",
"renderKey":1779197096173, "renderKey":1779197096173,
"layout":"colFormItem", "layout":"colFormItem",

19
src/views/cm/contracttemp/helper/superQueryJson.ts
View File

@@ -25,11 +25,12 @@ const superQueryJson = [
"label":"合同模版编码", "label":"合同模版编码",
"trigger":"blur", "trigger":"blur",
"showLabel":true, "showLabel":true,
"required":false, "required":true,
"tableName":"cm_contract_temp", "tableName":"cm_contract_temp",
"renderKey":1779197093361, "renderKey":1779197093361,
"layout":"colFormItem", "layout":"colFormItem",
"tagIcon":"icon-ym icon-ym-generator-input", "tagIcon":"icon-ym icon-ym-generator-input",
"unique":true,
"tag":"YunzhupaasInput", "tag":"YunzhupaasInput",
"regList":[], "regList":[],
"tableAlign":"left", "tableAlign":"left",
@@ -92,7 +93,7 @@ const superQueryJson = [
"label":"合同模版名称", "label":"合同模版名称",
"trigger":"blur", "trigger":"blur",
"showLabel":true, "showLabel":true,
"required":false, "required":true,
"tableName":"cm_contract_temp", "tableName":"cm_contract_temp",
"renderKey":1779197096173, "renderKey":1779197096173,
"layout":"colFormItem", "layout":"colFormItem",
@@ -192,7 +193,7 @@ const superQueryJson = [
], ],
"defaultValue":0, "defaultValue":0,
"noShow":false, "noShow":false,
"tipLabel":"是：只有合同基本信息和合同主体，无合同清单和金额。否：反之", "tipLabel":"是：只有合同基本信息和合同主体，无合同清单、金额、付款计划。否：反之",
"tableFixed":"none", "tableFixed":"none",
"dragDisabled":false, "dragDisabled":false,
"className":[], "className":[],
@@ -234,7 +235,7 @@ const superQueryJson = [
], ],
"defaultValue":1, "defaultValue":1,
"noShow":false, "noShow":false,
"tipLabel":"是：显示合同清单，合同金额根据清单金额汇总生成；否：不显示清单，合同金额手工录入", "tipLabel":"是：显示合同清单，合同金额根据清单金额汇总生成；否：不显示清单，只显示合同金额与付款计划，合同金额手工录入",
"tableFixed":"none", "tableFixed":"none",
"dragDisabled":false, "dragDisabled":false,
"className":[], "className":[],
@@ -496,7 +497,7 @@ const superQueryJson = [
"propsUrl":"", "propsUrl":"",
"templateJson":[], "templateJson":[],
"showLabel":true, "showLabel":true,
"required":false, "required":true,
"tableName":"cm_contract_temp", "tableName":"cm_contract_temp",
"renderKey":1779206776300, "renderKey":1779206776300,
"tagIcon":"icon-ym icon-ym-generator-select", "tagIcon":"icon-ym icon-ym-generator-select",
@@ -810,7 +811,7 @@ const superQueryJson = [
], ],
"templateJson":[], "templateJson":[],
"__config__":{ "__config__":{
"relationTable":"cm_contract_pringing_temp", "relationTable":"cm_contract_printing_temp",
"yunzhupaasKey":"popupTableSelect", "yunzhupaasKey":"popupTableSelect",
"defaultValue":"", "defaultValue":"",
"parentVModel":"tablePrintingTemp", "parentVModel":"tablePrintingTemp",
@@ -853,7 +854,7 @@ const superQueryJson = [
"filterable":true, "filterable":true,
"clearable":true, "clearable":true,
"multiple":false, "multiple":false,
"fullName":"设计子表-打印模版ID", "fullName":"打印模板-打印模版ID",
"relationField":"f_full_name", "relationField":"f_full_name",
"extraOptions":[], "extraOptions":[],
"popupTitle":"选择数据", "popupTitle":"选择数据",
@@ -867,7 +868,7 @@ const superQueryJson = [
{ {
"__config__":{ "__config__":{
"formId":"formItemd53b4e", "formId":"formItemd53b4e",
"relationTable":"cm_contract_pringing_temp", "relationTable":"cm_contract_printing_temp",
"yunzhupaasKey":"switch", "yunzhupaasKey":"switch",
"visibility":[ "visibility":[
"pc", "pc",
@@ -897,7 +898,7 @@ const superQueryJson = [
"activeValue":1, "activeValue":1,
"inactiveValue":0, "inactiveValue":0,
"__vModel__":"is_enabled", "__vModel__":"is_enabled",
"fullName":"设计子表-是否启用", "fullName":"打印模板-是否启用",
"inactiveTxt":"N", "inactiveTxt":"N",
"fullNameI18nCode":[ "fullNameI18nCode":[
"", "",