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

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

@@ -1,67 +1,64 @@
<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">
<template #insertFooter>
</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"
labelAlign= "right"
: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-form-item
name="contract_temp_code" >
<template #label>合同模版编码
</template>
<YunzhupaasInput v-model:value="dataForm.contract_temp_code" placeholder="请输入" disabled
detailed allowClear :style='{ "width": "100%" }'
:maskConfig="maskConfig.contract_temp_code">
</template> <YunzhupaasInput v-model:value="dataForm.contract_temp_code"
placeholder="请输入" disabled
detailed allowClear :style='{"width":"100%"}' :maskConfig = "maskConfig.contract_temp_code" >
</YunzhupaasInput>
</a-form-item>
</a-col>
<a-col :span="12" class="ant-col-item" >
<a-form-item name="contract_temp_name">
<a-form-item
name="contract_temp_name" >
<template #label>合同模版名称
</template>
<YunzhupaasInput v-model:value="dataForm.contract_temp_name" placeholder="请输入" disabled
detailed allowClear :style='{ "width": "100%" }'
:maskConfig="maskConfig.contract_temp_name">
</template> <YunzhupaasInput v-model:value="dataForm.contract_temp_name"
placeholder="请输入" disabled
detailed allowClear :style='{"width":"100%"}' :maskConfig = "maskConfig.contract_temp_name" >
</YunzhupaasInput>
</a-form-item>
</a-col>
<a-col :span="24" class="ant-col-item" >
<a-form-item name="remark">
<a-form-item
name="remark" >
<template #label>备注
</template>
<p>{{ dataForm.remark }}</p>
</template> <p>{{dataForm.remark}}</p>
</a-form-item>
</a-col>
<a-col :span="24" class="ant-col-item">
<a-tabs v-model:activeKey="state.activetabformItem45e7a2" tabPosition="left" class="mb-20" >
<a-tab-pane tab="合同框架" key="1" forceRender>
<a-row :gutter="15">
<table class="table-grid-box"
:style='{ "--borderType": "solid", "--borderColor": "#E2E0E0", "--borderWidth": "1px" }'>
<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="is_framework">
<a-form-item
name="is_framework" >
<template #label>框架合同
<BasicHelp text="是：只有合同基本信息和合同主体，无合同清单、金额、付款计划。否：反之" />
</template>
<p>{{ dataForm.is_framework }}</p>
<BasicHelp text="是：只有合同基本信息和合同主体，无合同清单、金额、付款计划。否：反之" /></template> <p>{{dataForm.is_framework}}</p>
</a-form-item>
</a-col>
</td>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item name="is_detail_list">
<a-form-item
name="is_detail_list" >
<template #label>清单合同
<BasicHelp
text="是：显示合同清单，合同金额根据清单金额汇总生成；否：不显示清单，只显示合同金额与付款计划，合同金额手工录入" />
</template>
<p>{{ dataForm.is_detail_list }}</p>
<BasicHelp text="是：显示合同清单，合同金额根据清单金额汇总生成；否：不显示清单，只显示合同金额与付款计划，合同金额手工录入" /></template> <p>{{dataForm.is_detail_list}}</p>
</a-form-item>
</a-col>
</td>
@@ -69,19 +66,19 @@
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item name="enable_tableProductList">
<a-form-item
name="enable_tableProductList" >
<template #label>启用产品清单
</template>
<p>{{ dataForm.enable_tableProductList }}</p>
</template> <p>{{dataForm.enable_tableProductList}}</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_tableMaterialList">
<a-form-item
name="enable_tableMaterialList" >
<template #label>启用材料清单
</template>
<p>{{ dataForm.enable_tableMaterialList }}</p>
</template> <p>{{dataForm.enable_tableMaterialList}}</p>
</a-form-item>
</a-col>
</td>
@@ -89,19 +86,19 @@
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item name="enable_tableWorktypeList">
<a-form-item
name="enable_tableWorktypeList" >
<template #label>启用人力清单
</template>
<p>{{ dataForm.enable_tableWorktypeList }}</p>
</template> <p>{{dataForm.enable_tableWorktypeList}}</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_tableAssetList">
<a-form-item
name="enable_tableAssetList" >
<template #label>启用资产清单
</template>
<p>{{ dataForm.enable_tableAssetList }}</p>
</template> <p>{{dataForm.enable_tableAssetList}}</p>
</a-form-item>
</a-col>
</td>
@@ -109,10 +106,10 @@
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item name="enable_tableTaskList">
<a-form-item
name="enable_tableTaskList" >
<template #label>启用任务清单
</template>
<p>{{ dataForm.enable_tableTaskList }}</p>
</template> <p>{{dataForm.enable_tableTaskList}}</p>
</a-form-item>
</a-col>
</td>
@@ -131,25 +128,24 @@
</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" }'>
<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">
<a-form-item
name="contract_type" >
<template #label>合同类型
</template>
<p>{{ dataForm.contract_type }}</p>
</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">
<a-form-item
name="enable_printing" >
<template #label>启用在线打印
</template>
<p>{{ dataForm.enable_printing }}</p>
</template> <p>{{dataForm.enable_printing}}</p>
</a-form-item>
</a-col>
</td>
@@ -157,19 +153,19 @@
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item name="our_company_type">
<a-form-item
name="our_company_type" >
<template #label>我方签约类型
</template>
<p>{{ dataForm.our_company_type }}</p>
</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">
<a-form-item
name="second_party_type" >
<template #label>乙方签约类型
</template>
<p>{{ dataForm.second_party_type }}</p>
</template> <p>{{dataForm.second_party_type}}</p>
</a-form-item>
</a-col>
</td>
@@ -177,10 +173,10 @@
<tr>
<td colspan="1" rowspan="1">
<a-col :span="24" class="ant-col-item" >
<a-form-item name="third_party_type">
<a-form-item
name="third_party_type" >
<template #label>丙方签约类型
</template>
<p>{{ dataForm.third_party_type }}</p>
</template> <p>{{dataForm.third_party_type}}</p>
</a-form-item>
</a-col>
</td>
@@ -196,13 +192,11 @@
<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' }">
: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" />
<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>
@@ -224,7 +218,7 @@
</a-row>
</a-form>
</a-row>
</BasicModal>
</BasicDrawer>
<!-- 有关联表单详情：开始 -->
<RelationDetail ref="relationDetailRef" />
<!-- 有关联表单详情：结束 -->
@@ -234,6 +228,7 @@ import { getDetailInfo } from './helper/api';
import { getConfigData } from '@/api/onlineDev/visualDev';
import { reactive, toRefs, nextTick, ref, computed, unref ,toRaw} from 'vue';
import { BasicModal, useModal } from '@/components/Modal';
import { BasicDrawer, useDrawer } from '@/components/Drawer';
// 有关联表单详情
import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
// 表单权限
@@ -260,7 +255,7 @@ interface State {
defineOptions({ name: 'Detail' });
const { createMessage, createConfirm } = useMessage();
const [registerModal, { openModal, setModalProps, closeModal }] = useModal();
const [registerDrawer, { openDrawer, setDrawerProps, closeDrawer }] = useDrawer();
const contractPrintingTempColumns: any[] = computed(() => {
let list = [
{
@@ -358,7 +353,7 @@ const state = reactive<State>({
extraData: {
}
,
activetabformItem45e7a2: 'fbb4be',
activetabformItem45e7a2:'1',
});
const { title, dataForm, maskConfig } = toRefs(state);
// 表单权限
@@ -368,18 +363,18 @@ defineExpose({ init });
function init(data) {
state.dataForm.id = data.id;
openModal();
openDrawer();
nextTick(() => {
setTimeout(initData, 0);
});
}
function initData() {
changeLoading(true);
state.activetabformItem45e7a2 = 'fbb4be';
state.activetabformItem45e7a2='1';
if (state.dataForm.id) {
getData(state.dataForm.id);
} else {
closeModal();
closeDrawer();
}
}
function getData(id) {
@@ -404,7 +399,7 @@ function toDetail(modelId, id, propsValue) {
});
}
function setFormProps(data) {
setModalProps(data);
setDrawerProps(data);
}
function changeLoading(loading) {
setFormProps({ loading });

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

@@ -1,6 +1,5 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" width="1000px"
:minHeight="100"
<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="80%" showFooter
:cancelText="t('common.cancelText','取消')"
:okText="t('common.okText','确定')"
@ok="handleSubmit" :closeFunc="onClose">
@@ -26,7 +25,8 @@
<yunzhupaasCheckboxSingle v-model:value="submitType" :label="continueText" />
</div>
</template>
<a-row class="dynamic-form ">
<a-row class="p-10px dynamic-form ">
<!-- 表单 -->
<a-form :colon="false" size="middle" layout= "horizontal"
labelAlign= "right"
:labelCol="{ style: { width: '100px' } }" :model="dataForm" :rules="dataRule" ref="formRef" >
@@ -300,8 +300,6 @@
<a-col :span="24" class="ant-col-item mb-20px" >
<a-form-item>
<yunzhupaasGroupTitle content="设计子表" :bordered="false"
helpMessage="" />
<a-table :data-source="dataForm.contractPrintingTempList"
:columns="contractPrintingTempColumns" size="small" :pagination="false" :scroll="{ x: 'max-content' }"
:rowSelection="getcontractPrintingTempRowSelection" rowKey="yunzhupaasId">
@@ -350,12 +348,12 @@
</a-row>
</a-form>
</a-row>
</BasicModal>
</BasicDrawer>
</template>
<script lang="ts" setup>
import { create, update, getInfo } from './helper/api';
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 { useMessage } from '@/hooks/web/useMessage';
import { useI18n } from '@/hooks/web/useI18n';
@@ -403,7 +401,7 @@ continueText: string; allList: any[];
const userInfo = userStore.getUserInfo;
const { createMessage, createConfirm } = useMessage();
const { t } = useI18n();
const [registerModal, { openModal, setModalProps }] = useModal();
const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();
const formRef = ref<FormInstance>();
const contractPrintingTempColumns: any[] = computed(() => {
let list = [
@@ -527,6 +525,27 @@ tableRows:{
},
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:{
@@ -558,7 +577,7 @@ maskConfig:{
locationScope:{
},
activetabformItem45e7a2:'fbb4be',
activetabformItem45e7a2:'1',
selectedcontractPrintingTempRowKeys : [],
extraOptions:{
},
@@ -585,7 +604,7 @@ extraOptions:{
state.title = !data.id ? t('common.add2Text','新增') : t('common.editText','编辑');
state.continueText = !data.id ? t('common.continueAndAddText','确定并新增') : t('common.continueText','确定并继续'); setFormProps({ continueLoading: false });
state.dataForm.id = data.id;
openModal();
openDrawer();
state.allList = data.allList;
state.currIndex = state.allList.length && data.id ? state.allList.findIndex((item) => item.id === data.id) : 0;
nextTick(() => {
@@ -596,7 +615,7 @@ extraOptions:{
}
function initData() {
changeLoading(true);
state.activetabformItem45e7a2='fbb4be';
state.activetabformItem45e7a2='1';
if (state.dataForm.id) {
getData(state.dataForm.id);
} else {
@@ -696,10 +715,10 @@ extraOptions:{
getData(id);
}
function setFormProps(data) {
setModalProps(data);
setDrawerProps(data);
}
function changeLoading(loading) {
setModalProps({ loading });
setDrawerProps({ loading });
}
async function onClose() {
if (state.isContinue) emit('reload');

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

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

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

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