fix(fixcontact): 调整定点联系单页面格式并修复反馈表单组件引用
- 查询筛选列由 xl=4 放宽为 xl=6,解决联系单位/主办部门多选框被遮挡 - 相关分管所领导筛选框改为常驻显示,展开/收起仅控制协办部门 - Form/BPMForm 宽标签列改为 6/18、7/17,避免长标签文字溢出 - FeedbackForm 修复 SzSelectUser 组件导入名并调整 labelCol/wrapperCol - 新增 FIXCONTACT_CHECKLIST.md 核对说明文档 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
# 定点联系单(fixcontact)页面格式调整与前端核查说明
|
||||
|
||||
> 核对日期:2026-08-06
|
||||
> 核对范围:`src/views/bg/fixcontact/` 全部 9 个文件
|
||||
> 核对方式:静态代码审查(项目 package.json 未配置 lint / vue-tsc 脚本,故采用逐文件人工核查 + 引用存在性校验)
|
||||
|
||||
---
|
||||
|
||||
## 一、格式调整记录(消除文字被输入框遮挡 / 对齐)
|
||||
|
||||
### 1. `FixedContact20260730List.vue`(列表页 / 查询区)
|
||||
|
||||
| 问题 | 调整 |
|
||||
|------|------|
|
||||
| 查询表单 3 个长标签(定点联系所领导 / 联系单位(部门) / 相关分管所领导,各 7-8 个字)在 `:xl="4"`(约占 1/6 屏宽)窄列内超出 label 列宽,文字被输入框遮挡/截断 | 标签文字缩短为 ≤5 字,完整含义保留在 tooltip 中:`定点联系所领导→联系所领导`、`联系单位(部门)→联系单位`、`相关分管所领导→分管所领导` |
|
||||
| 筛选框(尤其 SzSelectDept 多选部门框)在 `:xl="4"` 窄列下只有约 90px 宽,输入框被压窄显得"被挡住" | 全部筛选列由 `:xl="4"`(每行 6 个)放宽为 `:xl="6"`(每行 4 个),输入框约 150px,`labelCol/wrapperCol` 恢复为 `10/14` |
|
||||
| 「相关分管所领导」默认被「展开」折叠隐藏,用户期望常驻筛选 | 去掉 `relatedLeader` 的 `v-if="toggleSearchStatus"`,改为始终显示;「展开/收起」仅控制「协办部门」 |
|
||||
|
||||
### 2. `FixedContact20260730Form.vue`(新增/编辑弹窗表单)
|
||||
|
||||
| 问题 | 调整 |
|
||||
|------|------|
|
||||
| 整行字段的宽标签列 `span 3` 过窄:`定点联系所领导审批意见`(11字)/`相关分管所领导批示意见`(12字)在弹窗宽 1100 下溢出 | `wideLabelCol: span 3→6`,`wideWrapperCol: span 21→18`(6+18=24),标签单行完整显示 |
|
||||
| 冗余导入 `SzUserSelect`(未使用) | 已删除 |
|
||||
|
||||
### 3. `FixedContact20260730BPMForm.vue`(流程表单)
|
||||
|
||||
| 问题 | 调整 |
|
||||
|------|------|
|
||||
| 宽标签列 `span 3` 过窄,整行字段(联系点建议诉求摘要 / 定点联系所领导审批意见 / 相关分管所领导批示意见)与半行流程办理字段(`是否需要所领导审批` 等)均会溢出 | `wideLabelCol: span 3→7`,`wideWrapperCol: span 21→17`(7+17=24),与常规标签列 `span 7` 对齐 |
|
||||
|
||||
### 4. `FixedContact20260730FeedbackForm.vue`(反馈表单)
|
||||
|
||||
| 问题 | 调整 |
|
||||
|------|------|
|
||||
| `formItemLayout` 为 `labelCol 5 + wrapperCol 16 = 21 ≠ 24`,整行控件右侧留空 3 格,且半行字段 6 字标签在 `span 5` 下贴边 | 改为 `labelCol span 6 + wrapperCol span 18 = 24`,控件填满整行、各行对齐 |
|
||||
|
||||
### 5. 无需调整的文件
|
||||
|
||||
`FixedContact20260730Modal.vue`、`FixedContact20260730FeedbackModal.vue`(仅弹窗壳);`FixedContact20260730BPMFeedbackModal.vue`(`labelCol 7/17`、`wideLabelCol 5/19` 经核算标签均能单行放下);`FixedContact20260730.api.ts`、`FixedContact20260730.data.ts`(无布局)。
|
||||
|
||||
---
|
||||
|
||||
## 二、前端错误核查
|
||||
|
||||
### 发现并修复 2 处
|
||||
|
||||
| 级别 | 文件 | 问题 | 处理 |
|
||||
|------|------|------|------|
|
||||
| 功能 | `FixedContact20260730FeedbackForm.vue` | 模板使用 `<SzSelectUser>`,但导入名是 `SzUserSelect`;`SzSelectUser` 未在 `registerGlobComp` 全局注册(已核对 `src/components/registerGlobComp.ts`),组件无法解析 → 「反馈人」选择器不渲染 | 导入名改为 `SzSelectUser`(与模板一致,与 Form/BPMForm 惯例一致) |
|
||||
| 规范 | `FixedContact20260730Form.vue` | 重复导入同一文件且 `SzUserSelect` 未使用(eslint/TS no-unused-vars) | 删除冗余导入 |
|
||||
|
||||
### 引用存在性校验(全部通过)
|
||||
|
||||
| 引用 | 校验结果 |
|
||||
|------|---------|
|
||||
| `@/constant/supervision` → `PARTY_COMMITTEE_DEPT_ID / CHARGE_LEADER_ROLE_ID / SUOBAN_DEPT_ID / MEASURE_RES_LEADER_ROLE_ID` | `src/constant/supervision/index.ts` 存在 ✓ |
|
||||
| `SzUserSelect.vue`(组件 name = `SzSelectUser`) | `src/components/semri/userComponent/SzUserSelect.vue` ✓ |
|
||||
| `SzDeptUserModal.vue` | `src/components/semri/deptUserComponent/SzDeptUserModal.vue` ✓ |
|
||||
| `SUploadFile.vue` | `src/components/semri/fileComponent/SUploadFile.vue` ✓ |
|
||||
| `DeptRoleUserSelectDropDown.vue` / `SzSelectDept.vue` / `JInput.vue` | 均存在 ✓ |
|
||||
| `FlowScheduleStartModalForBG.vue` / `BusinessProcessListModal.vue` | `src/components/semri/process/` 下存在 ✓ |
|
||||
| `TaskHandleInnerContent.vue` | `src/views/super/bpm/process/.../TaskHandleInnerContent.vue` ✓ |
|
||||
| `useSubApproveUserResolver` | `src/composables/useSubApproveUserResolver.ts` ✓ |
|
||||
| `startProcessSchedules` | `src/api/common/api.ts` ✓ |
|
||||
| `dateUtil` | `src/utils/dateUtil.ts` ✓ |
|
||||
| `getValueType` | `src/utils/index.ts` ✓ |
|
||||
| `showImportValidationErrors` | `src/utils/helper/importError.ts` ✓ |
|
||||
| `api.ts` 导出的 list/deleteOne/batchDelete/saveOrUpdate/queryById/fixedContactFeedbackList/statusStats/saveBpmForm/setBpmVariableLocal/withDrawFixContact/saveSubApprove/setProcessVariable/getProcessVariable | 均在 List/BPMForm 中有引用且导出 ✓ |
|
||||
|
||||
### 已核对、无异常
|
||||
|
||||
- 各组件 `defineExpose` / 模板 ref 调用(如 `registerModal.value.disableSubmit`)沿用本仓库既有模式。
|
||||
- 表单校验 `Form.useForm`、`validateInfos`、`resetFields` 用法正确。
|
||||
- 列表展开反馈子表、行状态着色(`status-row-1/2/3`)、导出/导入/模板校验回调均正常。
|
||||
|
||||
---
|
||||
|
||||
## 三、说明与假设
|
||||
|
||||
1. 查询表单标签做了**文字精简**(完整说明保留在 tooltip),这是在不改动列宽布局的前提下消除遮挡的最稳妥方式;如需完整标签,请按上文说明放宽列宽。
|
||||
2. `BPMForm.vue` 中 `是否需要所领导审批`(9字)在半行字段 + `span 7` 标签下,当表单容器宽度 ≥ 约 880px 时单行完整显示;流程表单在任务办理页为整页宽渲染,满足该条件。若后续将该表单嵌入更窄的弹窗,需再加大标签占比或改为整行字段。
|
||||
3. 项目未配置 lint/typecheck 脚本,本核对以静态审查为准;建议在开发环境实际打开各弹窗与查询区目视复核一遍最终效果。
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form ref="formRef" @keyup.enter="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24" class="search-form-row">
|
||||
<a-col :xl="4" :lg="6" :md="8" :sm="12">
|
||||
<a-col :xl="6" :lg="6" :md="8" :sm="12">
|
||||
<a-form-item name="formNo">
|
||||
<template #label>
|
||||
<a-tooltip title="支持模糊查询">表单编号</a-tooltip>
|
||||
@@ -12,10 +12,10 @@
|
||||
<a-tooltip title="支持模糊查询"><JInput v-model:value="queryParam.formNo" type="like" placeholder="请输入表单编号" allow-clear trim @update:value="searchQuery" /></a-tooltip>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="6" :md="8" :sm="12">
|
||||
<a-col :xl="6" :lg="6" :md="8" :sm="12">
|
||||
<a-form-item name="contactLeader">
|
||||
<template #label>
|
||||
<a-tooltip title="按所党委分管所领导筛选">定点联系所领导</a-tooltip>
|
||||
<a-tooltip title="按所党委分管所领导筛选">联系所领导</a-tooltip>
|
||||
</template>
|
||||
<a-tooltip title="按所党委分管所领导筛选">
|
||||
<DeptRoleUserSelectDropDown
|
||||
@@ -30,15 +30,15 @@
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="6" :md="8" :sm="12">
|
||||
<a-col :xl="6" :lg="6" :md="8" :sm="12">
|
||||
<a-form-item name="contactDept">
|
||||
<template #label>
|
||||
<a-tooltip title="按联系单位筛选">联系单位(部门)</a-tooltip>
|
||||
<a-tooltip title="按联系单位筛选">联系单位</a-tooltip>
|
||||
</template>
|
||||
<a-tooltip title="按联系单位筛选"><SzSelectDept v-model:value="queryParam.contactDept" placeholder="请选择" allow-clear style="width: 100%" @change="searchQuery" /></a-tooltip>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="6" :md="8" :sm="12">
|
||||
<a-col :xl="6" :lg="6" :md="8" :sm="12">
|
||||
<a-form-item name="hostDept">
|
||||
<template #label>
|
||||
<a-tooltip title="按主办部门筛选">主办部门</a-tooltip>
|
||||
@@ -46,10 +46,10 @@
|
||||
<a-tooltip title="按主办部门筛选"><SzSelectDept v-model:value="queryParam.hostDept" placeholder="请选择" allow-clear style="width: 100%" @change="searchQuery" /></a-tooltip>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="toggleSearchStatus" :xl="4" :lg="6" :md="8" :sm="12">
|
||||
<a-col :xl="6" :lg="6" :md="8" :sm="12">
|
||||
<a-form-item name="relatedLeader">
|
||||
<template #label>
|
||||
<a-tooltip title="按相关分管所领导筛选">相关分管所领导</a-tooltip>
|
||||
<a-tooltip title="按相关分管所领导筛选">分管所领导</a-tooltip>
|
||||
</template>
|
||||
<a-tooltip title="按相关分管所领导筛选">
|
||||
<DeptRoleUserSelectDropDown
|
||||
@@ -64,7 +64,7 @@
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="toggleSearchStatus" :xl="4" :lg="6" :md="8" :sm="12">
|
||||
<a-col v-if="toggleSearchStatus" :xl="6" :lg="6" :md="8" :sm="12">
|
||||
<a-form-item name="coDept">
|
||||
<template #label>
|
||||
<a-tooltip title="按协办部门筛选">协办部门</a-tooltip>
|
||||
@@ -72,7 +72,7 @@
|
||||
<a-tooltip title="按协办部门筛选"><SzSelectDept v-model:value="queryParam.coDept" placeholder="请选择" allow-clear style="width: 100%" @change="searchQuery" /></a-tooltip>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="6" :md="8" :sm="12">
|
||||
<a-col :xl="6" :lg="6" :md="8" :sm="12">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
|
||||
<a-button preIcon="ant-design:reload-outlined" style="margin-left: 8px" @click="searchReset">重置</a-button>
|
||||
|
||||
@@ -261,8 +261,8 @@
|
||||
|
||||
const labelCol = { xs: { span: 24 }, sm: { span: 7 } };
|
||||
const wrapperCol = { xs: { span: 24 }, sm: { span: 17 } };
|
||||
const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } };
|
||||
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 21 } };
|
||||
const wideLabelCol = { xs: { span: 24 }, sm: { span: 7 } };
|
||||
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 17 } };
|
||||
|
||||
const feedbackModalRef = ref();
|
||||
const loading = ref(false);
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
|
||||
import SzUserSelect from '/@/components/semri/userComponent/SzUserSelect.vue';
|
||||
import SzSelectUser from '/@/components/semri/userComponent/SzUserSelect.vue';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
|
||||
const mainId = inject('mainId');
|
||||
@@ -88,8 +88,8 @@
|
||||
});
|
||||
const disabled = computed(() => props.disabled);
|
||||
const formItemLayout = {
|
||||
labelCol: { xs: { span: 24 }, sm: { span: 5 } },
|
||||
wrapperCol: { xs: { span: 24 }, sm: { span: 16 } },
|
||||
labelCol: { xs: { span: 24 }, sm: { span: 6 } },
|
||||
wrapperCol: { xs: { span: 24 }, sm: { span: 18 } },
|
||||
};
|
||||
|
||||
function add() {
|
||||
|
||||
@@ -115,7 +115,6 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
|
||||
import SzUserSelect from '/@/components/semri/userComponent/SzUserSelect.vue';
|
||||
import SzSelectUser from '/@/components/semri/userComponent/SzUserSelect.vue';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { saveOrUpdate } from '../FixedContact20260730.api';
|
||||
@@ -153,8 +152,8 @@
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 7 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 17 } });
|
||||
const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } };
|
||||
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 21 } };
|
||||
const wideLabelCol = { xs: { span: 24 }, sm: { span: 6 } };
|
||||
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 18 } };
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const validatorRules = reactive({
|
||||
seqNo: [{ required: true, message: '请输入序号' }],
|
||||
|
||||
Reference in New Issue
Block a user