yxk-20260526-查询督办流程modal：少量样式和字段调整

src/components/semri/process/BusinessProcessListModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <j-modal :title="title" :width="1400" :visible="visible" :footer="null" @cancel="handleCancel" cancelText="关闭">
+  <j-modal :title="title" :width="modalWidth" :visible="visible" :footer="null" @cancel="handleCancel" cancelText="关闭">
     <div class="business-process-list-modal">
       <BasicTable class="business-process-table" @register="registerTable">
         <template #action="{ record }">
@@ -31,6 +31,9 @@
   const visible = ref(false);
   const currentBusinessId = ref('');
   const defaultColumns = columns;
+  const modalWidth = 'min(1280px, calc(100vw - 64px))';
+  // 按当前列宽合计收敛横向滚动距离，避免少量列被默认宽度撑得过大。
+  const tableScrollX = 1680;
   // 固定表体高度，让横向滚动条停留在弹窗底部，而不是跟随少量数据行出现在中间。
   const tableBodyHeight = 500;
   const { createMessage } = useMessage();
@@ -48,12 +51,12 @@
     actionColumn: {
       title: '操作',
       dataIndex: 'action',
-      width: 180,
+      width: 120,
       fixed: 'right',
       slots: { customRender: 'action' },
     },
     scroll: {
-      x: 3600,
+      x: tableScrollX,
       y: tableBodyHeight,
     },
   });
@@ -143,12 +146,53 @@
 
 <style lang="less" scoped>
   .business-process-list-modal {
+    padding: 12px;
+    background: #f5f7fb;
+
     :deep(.vben-basic-table) {
       padding: 0;
     }
 
+    :deep(.business-process-table .ant-table-wrapper) {
+      padding: 0;
+      overflow: hidden;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      background: #fff;
+    }
+
+    :deep(.business-process-table .ant-table) {
+      background: #fff;
+    }
+
+    :deep(.business-process-table .ant-table-thead > tr > th) {
+      padding: 10px 8px;
+      color: #334155;
+      font-weight: 600;
+      background: #f8fafc;
+      border-bottom-color: #e5e7eb;
+      white-space: nowrap;
+    }
+
+    :deep(.business-process-table .ant-table-tbody > tr > td) {
+      padding: 9px 8px;
+      color: #334155;
+      border-bottom-color: #eef2f7;
+      white-space: nowrap;
+    }
+
+    :deep(.business-process-table .ant-table-tbody > tr:hover > td) {
+      background: #f8fbff;
+    }
+
+    :deep(.business-process-table .ant-table-cell) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     :deep(.business-process-table .ant-table-body) {
       height: 500px;
+      border-bottom: 1px solid #e5e7eb;
     }
   }
 </style>

src/components/semri/process/QueryProcessList.data.ts

@@ -1,8 +1,11 @@
-import {BasicColumn} from '/@/components/Table';
-import {FormSchema} from '/@/components/Table';
-import { rules} from '/@/utils/helper/validator';
+import { BasicColumn } from '/@/components/Table';
 import { render } from '/@/utils/common/renderUtils';
-import { getWeekMonthQuarterYear } from '/@/utils';
+
+// 流程列表接口可能返回 *_dictText，也可能只返回原始值；这里统一做展示兜底。
+function getTranslatedText(record, dictTextField, rawText, dictCode) {
+  return record?.[dictTextField] || render.renderDict(rawText, dictCode);
+}
+
 //列表数据
 export const columns: BasicColumn[] = [
   // {
@@ -12,23 +15,31 @@ export const columns: BasicColumn[] = [
   // },
   {
     title: '督办标题',
-    align: "center",
+    align: 'center',
     dataIndex: 'title',
+    width: 180,
+    ellipsis: true,
   },
   {
     title: '督办内容',
-    align: "center",
+    align: 'center',
     dataIndex: 'content',
+    width: 220,
+    ellipsis: true,
   },
   {
     title: '流程名称',
-    align: "center",
+    align: 'center',
     dataIndex: 'flowName',
+    width: 160,
+    ellipsis: true,
   },
   {
     title: '流程实例ID',
-    align: "center",
-    dataIndex: 'processInstId'
+    align: 'center',
+    dataIndex: 'processInstId',
+    width: 220,
+    ellipsis: true,
   },
   // {
   //   title: '流程类型',
@@ -37,8 +48,12 @@ export const columns: BasicColumn[] = [
   // },
   {
     title: '流程状态',
-    align: "center",
-    dataIndex: 'bpmStatus'
+    align: 'center',
+    dataIndex: 'bpmStatus',
+    width: 100,
+    customRender: ({ text, record }) => {
+      return getTranslatedText(record, 'bpmStatus_dictText', text, 'super_status');
+    },
   },
   // {
   //   title: '关联台账事项ID',
@@ -63,8 +78,12 @@ export const columns: BasicColumn[] = [
 
   {
     title: '是否紧急',
-    align: "center",
-    dataIndex: 'urgencyLevel_dictText'
+    align: 'center',
+    dataIndex: 'urgencyLevel',
+    width: 90,
+    customRender: ({ text, record }) => {
+      return getTranslatedText(record, 'urgencyLevel_dictText', text, 'yn');
+    },
   },
   // {
   //   title: '自定义分组',
@@ -92,9 +111,14 @@ export const columns: BasicColumn[] = [
   //   dataIndex: 'finishMethod'
   // },
   {
-    title: '被督办部门id',
-    align: "center",
-    dataIndex: 'deptId'
+    title: '被督办部门',
+    align: 'center',
+    dataIndex: 'deptId',
+    width: 150,
+    ellipsis: true,
+    customRender: ({ text, record }) => {
+      return record?.deptId_dictText || record?.deptName || text || '';
+    },
   },
   // {
   //   title: '被督办部门名称（冗余）',
@@ -133,17 +157,19 @@ export const columns: BasicColumn[] = [
   // },
   {
     title: '要求完成日期',
-    align: "center",
+    align: 'center',
     dataIndex: 'requireFinishDate',
-    customRender:({text}) =>{
-      text = !text ? "" : (text.length > 10 ? text.substr(0,10) : text);
+    width: 120,
+    customRender: ({ text }) => {
+      text = !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
       return text;
     },
   },
   {
     title: '督办开始时间',
-    align: "center",
-    dataIndex: 'startTime'
+    align: 'center',
+    dataIndex: 'startTime',
+    width: 160,
   },
   // {
   //   title: '截止时间（精确到时分，与 require_finish_date 互补）',
@@ -153,8 +179,9 @@ export const columns: BasicColumn[] = [
   // },
   {
     title: '实际完成时间',
-    align: "center",
-    dataIndex: 'actualFinishTime'
+    align: 'center',
+    dataIndex: 'actualFinishTime',
+    width: 160,
   },
   // {
   //   title: '是否已逾期',