From 1d1c8773c9b7d5cb133210175db53f4eabcd617a Mon Sep 17 00:00:00 2001 From: wsm <2746563060@qq.com> Date: Thu, 6 Aug 2026 14:26:32 +0800 Subject: [PATCH] =?UTF-8?q?style(inspectTask):=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=B7=A1=E8=A7=86=E6=95=B4=E6=94=B9=E8=A1=A8=E5=8D=95=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E5=88=97=E4=B8=8E=E6=9F=A5=E8=AF=A2=E5=88=97=E5=AE=BD?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 查询筛选列 xl 4 6 加宽 - 新增编辑表单 labelCol 6/18 8/16 - 流程表单宽字段 labelCol 3/21 7/17 Co-Authored-By: Claude Opus 4.7 --- .../dq/inspectTask/DqInspectTaskList.vue | 10 +-- .../dq/inspectTask/INSPECT_TASK_CHECKLIST.md | 87 +++++++++++++++++++ .../components/DqInspectTaskBPMForm.vue | 4 +- .../components/DqInspectTaskForm.vue | 6 +- 4 files changed, 97 insertions(+), 10 deletions(-) create mode 100644 src/views/dq/inspectTask/INSPECT_TASK_CHECKLIST.md diff --git a/src/views/dq/inspectTask/DqInspectTaskList.vue b/src/views/dq/inspectTask/DqInspectTaskList.vue index 713adc6..bf726d5 100644 --- a/src/views/dq/inspectTask/DqInspectTaskList.vue +++ b/src/views/dq/inspectTask/DqInspectTaskList.vue @@ -4,22 +4,22 @@
- + - + - + - + 未开始 @@ -28,7 +28,7 @@ - + 查询 重置 diff --git a/src/views/dq/inspectTask/INSPECT_TASK_CHECKLIST.md b/src/views/dq/inspectTask/INSPECT_TASK_CHECKLIST.md new file mode 100644 index 0000000..373c72e --- /dev/null +++ b/src/views/dq/inspectTask/INSPECT_TASK_CHECKLIST.md @@ -0,0 +1,87 @@ +# 巡视整改任务（inspectTask）页面格式调整与前端核查说明 + +> 核对日期：2026-08-06 +> 核对范围：`src/views/dq/inspectTask/` 全部 Vue 组件（7 个）+ `DqInspectTask.api.ts` / `DqInspectTask.data.ts` +> 核对方式：静态代码审查（项目 package.json 未配置 lint / vue-tsc 脚本，故采用逐文件人工核查 + 引用存在性校验），参照 `src/views/bg/xispeak/` 已完成的格式调整方案 + +--- + +## 一、格式调整记录（消除文字被输入框遮挡 / 对齐） + +### 1. `DqInspectTaskList.vue`（列表页 / 查询区） + +| 问题 | 调整 | +|------|------| +| 查询表单 4 个筛选列 + 按钮列均为 `:xl="4"`（约占 1/6 屏宽），「措施责任部门」6 字标签在窄 label 列内超宽（标签盒约 67px < 文字 84px），输入框被压缩 | 全部 5 列统一放宽为 `:xl="6"`（每行 4 个，按钮列换行），标签盒由约 67px 拓宽到约 100px，「措施责任部门」单行放下 | +| 「整改措施」「分管所领导」「措施责任部门」「督办状态」均 ≤6 字 | 无需精简标签（与 xispeak 不同，xispeak 因有 10 字标签才精简） | +| labelCol 为 `xl:6 / xxl:9` | 保持不动，放宽列后标签与输入框均有余量 | + +### 2. `DqInspectTaskForm.vue`（新增/编辑弹窗表单，弹窗宽 800） + +| 问题 | 调整 | +|------|------| +| 半行字段「是否需要党群领导审批」10 字标签约 140px，基准 `labelCol 6/18` 下标签盒仅约 90px，严重溢出换行 | 基准 `labelCol: span 6→8`、`wrapperCol: span 18→16`（8+16=24）；标签精简为 `需党群领导审批`（7 字 98px < 标签盒约 120px） | +| 其余 6 字标签（措施责任部门/措施责任领导/整改交付成果/成效评价标准）原 84px 紧贴 90px 标签盒 | 放宽基准后单行有余量 | +| 整行字段「具体问题」标签 4 字 | 全宽字段标签盒约 186px，无溢出，无需调整 | + +### 3. `DqInspectTaskBPMForm.vue`（流程表单） + +| 问题 | 调整 | +|------|------| +| 流程办理字段（是否办结 / 部门经办人）使用 `wideLabelCol span 3`，在任务办理页半行字段下标签盒窄，「部门经办人」5 字约 70px 贴边/溢出 | `wideLabelCol: span 3→7`，`wideWrapperCol: span 21→17`（7+17=24），与基准标签列 `span 7` 对齐 | +| 基础信息区基准 `labelCol 7/17` 可容纳 ≤10 字标签（任务办理页较宽） | 保持不动 | + +### 4. 无需调整的文件 + +- `DqInspectTaskModal.vue`（仅弹窗壳，宽 800，无表单布局） +- `DqInspectTaskBPMFeedbackModal.vue`（反馈弹窗，宽 820）：标签最长 6 字（实际完成时间 84px < 半行标签盒约 106px）；整行 wide 字段（工作进展/监督意见/附件）最长 4 字，`wideLabelCol span 3` 标签盒约 93px 可容纳——无溢出，无需调整（与 xispeak 反馈弹窗不同，后者有 16 字证明材料标签才需放宽） +- `DqInspectTaskFlowScheduleStartModal.vue`（流程调度弹窗，宽 720）：使用固定 120px 标签宽，最长标签 8 字「党群领导是否审批」112px 可容纳 +- `DqInspectTask.api.ts`、`DqInspectTask.data.ts`（无布局） + +--- + +## 二、前端错误核查 + +### 发现并修复 1 处（功能级） + +| 级别 | 文件 | 问题 | 处理 | +|------|------|------|------| +| 功能 | `DqInspectTaskList.vue` | 模板「导入」按钮 `@click="onImpportXls"` 拼写错误（双 p），脚本解构的是 `onImportXls`（单 p），点击会抛 `ReferenceError: onImpportXls is not defined` | 改为 `onImportXls`（全仓库其余 14 处均为单 p 写法） | + +### 引用存在性校验（全部通过） + +| 引用 | 校验结果 | +|------|---------| +| `ledgerColumns / dqInspectProgressColumns / superQuerySchema` | `DqInspectTask.data.ts` 存在 ✓ | +| `ledgerList / deleteOne / batchDelete / getImportUrl / getExportUrl / getImportExcelByEasyExcelUrl / getCheckExcelByEasyExcelUrl / getExportXlsHeadersUrl / saveOrUpdate / statusStats / queryDataById / specificProblemOptions / queryDqInspectProgressListByMainId / saveBpmForm / saveSubApprove / setProcessVariable` | `DqInspectTask.api.ts` 均导出 ✓ | +| `progressList / progressDelete`（`../inspectProgress/DqInspectProgress.api`）、`saveOrUpdate as progressSaveOrUpdate` | inspectProgress api 存在 ✓ | +| `PARTY_COMMITTEE_DEPT_ID / CHARGE_LEADER_ROLE_ID / MEASURE_RES_LEADER_ROLE_ID / PARTY_MASSES_DEPT_ID / SDW_LEADER_ROLE_ID` | `src/constant/supervision/index.ts` 存在 ✓ | +| `SzSelectDept / DeptRoleUserSelectDropDown / DeptRoleUserSelectRadioGroup / JInput / JSwitch / JDictSelectTag / JSelectDept / JSelectUser / SzDeptUserModal / JFormContainer / SUploadFile` | 均存在 ✓ | +| `DqInspectProgressFeedbackViewModal.vue` | `src/views/dq/inspectProgress/components/` ✓ | +| `TaskHandleInnerContent.vue` | `src/views/super/bpm/process/personalOffice/myHandleTask/content/` ✓ | +| `useSelectNameResolver / useSubApproveUserResolver / buildDeptLeaderAssignReason / normalizeDeptNames` | `src/composables/` 均存在 ✓ | +| `FlowScheduleStartModal / BusinessProcessListModal` | `src/components/semri/process/` 下存在 ✓ | +| `initBpmFormData`（usePermission）、`showImportValidationErrors`、`dateUtil`、`startProcessSchedules` | 引用存在 ✓ | + +### 已核对、无异常 + +- `DqInspectTaskBPMFeedbackModal.vue` 无 xispeak 反馈弹窗的 `mainId` 注入缺陷——本弹窗通过 `open(mainId, bpmProcessId)` 参数传值，不依赖 `inject('mainId')`，`unref` 未使用。 +- 各表单无 `value.format('YYYY-MM-DD')` 对 Date 调用的缺陷（xispeak FeedbackForm 存在该潜在 P2），全目录 grep `.format(` 无匹配。 +- 树形表格合并行（`calcLedgerRowSpan` / `calcGroupRowSpan`）、状态统计（`statusStats` / `fetchStatusStats`）、流程调度（`startProcessSchedules`）、导入校验（`handleCheckExcel` / `handleImportByTemplate` / `showImportValidationErrors`）回调均正常。 + +### 发现但未改（P2 建议，不影响运行） + +| 文件 | 说明 | +|------|------| +| `DqInspectTaskBPMFeedbackModal.vue` | 3 处 `console.log` 调试输出（兜底查找/匹配成功/填充当前部门），建议后续清理 | +| `DqInspectTaskForm.vue` | 1 处 `console.log('表单提交数据', values)` 调试输出，建议后续清理 | +| `DqInspectTaskForm.vue` | 子表单 `dqInspectProgress` tab 及 `JVxeTable` / `dqInspectProgressTableRef` 相关代码整体被注释（预留），`getSubFormAndTableData` 的 `dqInspectProgress` 键当前空转 | + +--- + +## 三、说明与假设 + +1. 查询表单标签均 ≤6 字，本次仅放宽列宽即可消除遮挡，**未做标签文字精简**（与 xispeak 不同，xispeak 因含 10 字标签才精简）。唯一精简的标签是弹窗表单中 10 字的「是否需要党群领导审批」→「需党群领导审批」，完整语义由开关（j-switch）承载；BPM 流程表单因页面较宽保留完整标签，两处标签文字略有差异。 +2. 各弹窗 labelCol 调整依据弹窗声明宽度核算（DqInspectTaskModal=800、DqInspectTaskBPMFeedbackModal=820、DqInspectTaskFlowScheduleStartModal=720）。`DqInspectTaskForm` 基准统一为 `8/16`，可容纳 7 字标签单行显示；若后续弹窗被嵌入更窄容器，需再加大标签占比。 +3. `DqInspectTaskBPMFeedbackModal` 与 `DqInspectTaskBPMForm` 构成流程反馈链，均复用 `inspectProgress/DqInspectProgress.api` 的 `saveOrUpdate / list / deleteOne`；inspectTask 对 inspectProgress 的这 3 个函数和 FeedbackViewModal 组件存在活依赖。 +4. 项目未配置 lint/typecheck 脚本，本核对以静态审查为准；建议在开发环境实际打开列表页与弹窗目视复核一遍最终效果（可复用 `%TEMP%/pwverify` 的 Playwright 截图方案）。 diff --git a/src/views/dq/inspectTask/components/DqInspectTaskBPMForm.vue b/src/views/dq/inspectTask/components/DqInspectTaskBPMForm.vue index 626cede..6f0085b 100644 --- a/src/views/dq/inspectTask/components/DqInspectTaskBPMForm.vue +++ b/src/views/dq/inspectTask/components/DqInspectTaskBPMForm.vue @@ -269,8 +269,8 @@ import { buildDeptLeaderAssignReason, normalizeDeptNames } from '/@/composables/ 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 } }; diff --git a/src/views/dq/inspectTask/components/DqInspectTaskForm.vue b/src/views/dq/inspectTask/components/DqInspectTaskForm.vue index 9d80a1a..7f9bdc0 100644 --- a/src/views/dq/inspectTask/components/DqInspectTaskForm.vue +++ b/src/views/dq/inspectTask/components/DqInspectTaskForm.vue @@ -123,7 +123,7 @@ - + @@ -239,8 +239,8 @@ import { PARTY_COMMITTEE_DEPT_ID, CHARGE_LEADER_ROLE_ID as _CHARGE_LEADER_ROLE_I delFlag: '', }); - const labelCol = ref({ xs: { span: 24 }, sm: { span: 6 } }); - const wrapperCol = ref({ xs: { span: 24 }, sm: { span: 18 } }); + const labelCol = ref({ xs: { span: 24 }, sm: { span: 8 } }); + const wrapperCol = ref({ xs: { span: 24 }, sm: { span: 16 } }); //表单验证 const validatorRules = reactive({