soc相关

package.json

@@ -96,6 +96,7 @@
     "video.js": "^7.21.5",
     "vue": "3.5.12",
     "vue-dompurify-html": "^4.1.4",
+    "vue-draggable-plus": "^0.6.1",
     "vue-echarts": "^7.0.3",
     "vue-i18n": "9.10.2",
     "vue-json-viewer": "^3.0.4",

pnpm-lock.yaml

@@ -221,6 +221,9 @@ importers:
       vue-dompurify-html:
         specifier: ^4.1.4
         version: 4.1.4(vue@3.5.12(typescript@5.3.3))
+      vue-draggable-plus:
+        specifier: ^0.6.1
+        version: 0.6.1(@types/sortablejs@1.15.9)
       vue-echarts:
         specifier: ^7.0.3
         version: 7.0.3(@vue/runtime-core@3.5.12)(echarts@5.6.0)(vue@3.5.12(typescript@5.3.3))
@@ -1549,36 +1552,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.0':
     resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.0':
     resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.0':
     resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.0':
     resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.0':
     resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.0':
     resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
@@ -1687,46 +1696,55 @@ packages:
     resolution: {integrity: sha512-9OwUnK/xKw6DyRlgx8UizeqRFOfi9mf5TYCw1uolDaJSbUmBxP85DE6T4ouCMoN6pXw8ZoTeZCSEfSaYo+/s1w==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.27.4':
     resolution: {integrity: sha512-Vgdo4fpuphS9V24WOV+KwkCVJ72u7idTgQaBoLRD0UxBAWTF9GWurJO9YD9yh00BzbkhpeXtm6na+MvJU7Z73A==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.27.4':
     resolution: {integrity: sha512-pleyNgyd1kkBkw2kOqlBx+0atfIIkkExOTiifoODo6qKDSpnc6WzUY5RhHdmTdIJXBdSnh6JknnYTtmQyobrVg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.27.4':
     resolution: {integrity: sha512-caluiUXvUuVyCHr5DxL8ohaaFFzPGmgmMvwmqAITMpV/Q+tPoaHZ/PWa3t8B2WyoRcIIuu1hkaW5KkeTDNSnMA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.27.4':
     resolution: {integrity: sha512-FScrpHrO60hARyHh7s1zHE97u0KlT/RECzCKAdmI+LEoC1eDh/RDji9JgFqyO+wPDb86Oa/sXkily1+oi4FzJQ==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.27.4':
     resolution: {integrity: sha512-qyyprhyGb7+RBfMPeww9FlHwKkCXdKHeGgSqmIXw9VSUtvyFZ6WZRtnxgbuz76FK7LyoN8t/eINRbPUcvXB5fw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.27.4':
     resolution: {integrity: sha512-PFz+y2kb6tbh7m3A7nA9++eInGcDVZUACulf/KzDtovvdTizHpZaJty7Gp0lFwSQcrnebHOqxF1MaKZd7psVRg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.27.4':
     resolution: {integrity: sha512-Ni8mMtfo+o/G7DVtweXXV/Ol2TFf63KYjTtoZ5f078AUgJTmaIJnj4JFU7TK/9SVWTaSJGxPi5zMDgK4w+Ez7Q==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.27.4':
     resolution: {integrity: sha512-5AeeAF1PB9TUzD+3cROzFTnAJAcVUGLuR8ng0E0WXGkYhp6RD6L+6szYVX+64Rs0r72019KHZS1ka1q+zU/wUw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.27.4':
     resolution: {integrity: sha512-yOpVsA4K5qVwu2CaS3hHxluWIK5HQTjNV4tWjQXluMiiiu4pJj4BN98CvxohNCpcjMeTXk/ZMJBRbgRg8HBB6A==}
@@ -1772,24 +1790,28 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@swc/core-linux-arm64-musl@1.9.3':
     resolution: {integrity: sha512-tzVH480RY6RbMl/QRgh5HK3zn1ZTFsThuxDGo6Iuk1MdwIbdFYUY034heWUTI4u3Db97ArKh0hNL0xhO3+PZdg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@swc/core-linux-x64-gnu@1.9.3':
     resolution: {integrity: sha512-ivXXBRDXDc9k4cdv10R21ccBmGebVOwKXT/UdH1PhxUn9m/h8erAWjz5pcELwjiMf27WokqPgaWVfaclDbgE+w==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@swc/core-linux-x64-musl@1.9.3':
     resolution: {integrity: sha512-ILsGMgfnOz1HwdDz+ZgEuomIwkP1PHT6maigZxaCIuC6OPEhKE8uYna22uU63XvYcLQvZYDzpR3ms47WQPuNEg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@swc/core-win32-arm64-msvc@1.9.3':
     resolution: {integrity: sha512-e+XmltDVIHieUnNJHtspn6B+PCcFOMYXNJB1GqoCcyinkEIQNwC8KtWgMqUucUbEWJkPc35NHy9k8aCXRmw9Kg==}
@@ -1983,6 +2005,9 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -5435,6 +5460,15 @@ packages:
     peerDependencies:
       vue: ^2.7.0 || ^3.0.0
 
+  vue-draggable-plus@0.6.1:
+    resolution: {integrity: sha512-FbtQ/fuoixiOfTZzG3yoPl4JAo9HJXRHmBQZFB9x2NYCh6pq0TomHf7g5MUmpaDYv+LU2n6BPq2YN9sBO+FbIg==}
+    peerDependencies:
+      '@types/sortablejs': ^1.15.0
+      '@vue/composition-api': '*'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-echarts@7.0.3:
     resolution: {integrity: sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==}
     peerDependencies:
@@ -7425,6 +7459,8 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/sortablejs@1.15.9': {}
+
   '@types/trusted-types@2.0.7':
     optional: true
 
@@ -11257,6 +11293,10 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  vue-draggable-plus@0.6.1(@types/sortablejs@1.15.9):
+    dependencies:
+      '@types/sortablejs': 1.15.9
+
   vue-echarts@7.0.3(@vue/runtime-core@3.5.12)(echarts@5.6.0)(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       echarts: 5.6.0

src/api/pms/iotopeationfill/index.ts

@@ -39,6 +39,7 @@ export interface IotOpeationFillVO {
   isCollection: any
   description: any
   wellNamePair: any
+  noGasTasks: any
 }
 
 // 运行记录填报 API

src/api/pms/meeting/index.ts

@@ -0,0 +1,56 @@
+import request from '@/config/axios'
+
+export const OperationMeetingApi = {
+  // 查询会议分页
+  getOperationMeetingPage: async (params: {
+    pageNo: number
+    pageSize: number
+    deptId?: number
+    meetingDate?: string[]
+  }) => {
+    return await request.get({ url: `/pms/iot-operation-meeting/page`, params })
+  },
+
+  // 查询汇总会议列表
+  getIntegratedMeetingList: async () => {
+    return await request.get({ url: `/pms/iot-operation-meeting/integratedMeeting` })
+  },
+
+  // 查询汇总会议详情
+  getSummarizedProjectDetails: async (params: { meetingSeries: string; year: string | number }) => {
+    return await request.get({
+      url: `/pms/iot-operation-meeting/summarizedProjectDetails`,
+      params
+    })
+  },
+
+  // 查询会议详情
+  getOperationMeeting: async (id: number) => {
+    return await request.get({ url: `/pms/iot-operation-meeting/get?id=${id}` })
+  },
+
+  // 保存运营会议及明细
+  saveBatch: async (data: { operationMeeting: unknown; details: unknown[] }) => {
+    return await request.post({ url: `/pms/iot-operation-meeting/saveBatch`, data })
+  },
+
+  getProjectNameOptions: async () => {
+    return await request.get({ url: `/pms/iot-operation-meeting/cachedProjects` })
+  },
+
+  getPreviousWorkPlan: async (params: {
+    projectName: string
+    id?: string | number
+    meetingId?: string | number
+  }) => {
+    return await request.get({ url: `/pms/iot-operation-meeting/previousWorkPlan`, params })
+  },
+
+  getMandatoryOrNot: async () => {
+    return await request.get({ url: `/pms/iot-operation-meeting/mandatoryOrNot` })
+  },
+
+  getDeptList: async () => {
+    return await request.get({ url: `/system/dept/includeDisabledCompanies` })
+  }
+}

src/api/system/dept/index.ts

@@ -13,6 +13,7 @@ export interface DeptVO {
   costCenterIds: string[]
   stockLocationIds: string[]
   createTime: Date
+  type: string
 }
 
 // 查询部门（精简)列表

src/components/ZmTable/README.md

@@ -0,0 +1,492 @@
+# ZmTable
+
+`ZmTable` 是基于 Element Plus `el-table` / `el-table-column` 封装的业务表格组件，主要补了这些能力：
+
+- 默认统一表格视觉样式。
+- 自动按内容计算列宽，并支持全局限制最大宽度。
+- 表格级 `align` 统一控制列对齐方式。
+- 列头内置排序、筛选按钮，但排序和筛选逻辑交给调用方自定义。
+- 操作列可以开启列设置面板，支持列显隐、固定左/右、拖拽排序。
+- 支持多级表头，子级表头只能在自己的父级分组内排序。
+- 样式通过少量 CSS 变量开放给外部调整。
+
+## 文件说明
+
+| 文件 | 作用 |
+| --- | --- |
+| `index.vue` | 表格主体，负责数据、默认样式、列配置收集、列顺序/显隐/固定渲染。 |
+| `ZmTableColumn.vue` | 列组件，负责列头按钮、排序、筛选、操作列设置入口、列宽计算。 |
+| `ZmTableColumnSettingTree.vue` | 列设置面板里的递归树，负责拖拽排序、显隐、固定按钮。 |
+| `token.ts` | 表格内部依赖注入类型和 key。 |
+| `useTableComponents.ts` | 给 TS 泛型使用的便捷导出。 |
+
+## 基础用法
+
+推荐在页面里通过 `useTableComponents<T>()` 获取泛型组件，这样 `prop`、`row` 会更容易获得类型提示。
+
+```vue
+<script setup lang="ts">
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+
+interface ListItem {
+  id: number
+  name: string
+  status: string
+}
+
+const loading = ref(false)
+const list = ref<ListItem[]>([])
+
+const { ZmTable, ZmTableColumn } = useTableComponents<ListItem>()
+</script>
+
+<template>
+  <ZmTable :data="list" :loading="loading">
+    <ZmTableColumn type="index" label="序号" :width="60" />
+    <ZmTableColumn prop="name" label="名称" />
+    <ZmTableColumn prop="status" label="状态">
+      <template #default="{ row }">
+        <el-tag>{{ row.status }}</el-tag>
+      </template>
+    </ZmTableColumn>
+  </ZmTable>
+</template>
+```
+
+也可以直接用小写组件名：
+
+```vue
+<zm-table :data="list" :loading="loading">
+  <zm-table-column prop="name" label="名称" />
+</zm-table>
+```
+
+## ZmTable Props
+
+`ZmTable` 继承大部分 Element Plus `TableProps`，下面是额外增加或重点关注的属性。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `data` | `T[]` | 必填 | 表格数据。 |
+| `loading` | `boolean` | 必填 | 表格 loading 状态。 |
+| `align` | `'left' \| 'center' \| 'right'` | `'center'` | 全局列对齐方式。普通列会使用它；开启排序、筛选、操作列时，列头会优先左对齐。 |
+| `columnMaxWidth` | `number` | `360` | 自动计算列宽时的最大宽度。 |
+| `customClass` | `boolean` | `false` | 为 `true` 时不挂载默认 `.zm-table` class，也就不会使用组件默认样式变量。 |
+| `showBorder` | `boolean` | `false` | 控制组件自己的边框显示样式。 |
+| `showOverflowTooltip` | `boolean` | `true` | 继承自 Element Plus。想让文字换行时传 `false`，再配合页面 CSS 覆盖 `.cell` 的换行样式。 |
+
+组件内部默认还会给 Element Plus 表格设置这些值：
+
+```ts
+{
+  size: 'default',
+  stripe: true,
+  border: true,
+  highlightCurrentRow: true,
+  showOverflowTooltip: true,
+  scrollbarAlwaysOn: true,
+  tooltipOptions: {
+    popperClass: 'max-w-120'
+  }
+}
+```
+
+## ZmTableColumn Props
+
+`ZmTableColumn` 继承大部分 Element Plus `TableColumnCtx`，下面是额外增加或重点关注的属性。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `prop` | `keyof T \| string` | - | 字段名，也会作为列设置 key 的优先来源。 |
+| `action` | `boolean` | `false` | 标记为操作列，并在表头显示列设置按钮。操作列本身不会进入列设置列表。 |
+| `hideInColumnSettings` | `boolean` | `false` | 不显示在列设置面板里，适合序号列、选择列等固定功能列。 |
+| `isParent` | `boolean` | `false` | 标记当前列是多级表头父级。需要控制子级列排序/显隐/固定时必须加。 |
+| `zmSortable` | `boolean` | `false` | 显示排序按钮。组件只维护/展示排序状态，具体排序逻辑由调用方处理。 |
+| `zmFilterable` | `boolean` | `false` | 显示筛选按钮和 popover。筛选内容和筛选逻辑由调用方通过 `#filter` 自定义。 |
+| `sortOrder` | `'asc' \| 'desc' \| null` | - | 外部受控排序状态。传了这个值之后，组件不会自己保存排序状态。 |
+| `defaultSortOrder` | `'asc' \| 'desc' \| null` | `null` | 非受控模式下的默认排序状态。 |
+| `zmSortMethod` | `(prop, order) => void` | - | 点击排序按钮后调用。 |
+| `filterActive` | `boolean` | - | 强制控制筛选按钮激活态。不传时根据 `filterModelValue` 自动判断。 |
+| `filterModelValue` | `any` | - | 筛选值，可用 `v-model:filter-model-value` 双向绑定。 |
+| `realValue` | `(...args) => any` | - | 获取真实展示值。自动算宽时会优先使用它；配合 `coverFormatter` 时也会作为 formatter。 |
+| `coverFormatter` | `boolean` | `false` | 为 `true` 时，把 `realValue` 作为 Element Plus 的 `formatter` 使用。 |
+
+## 排序
+
+开启 `zm-sortable` 后，表头只显示排序按钮和排序状态图标：
+
+- 未排序：`i-lucide:arrow-up-down`
+- 升序：`i-lucide:arrow-up-narrow-wide`
+- 降序：`i-lucide:arrow-down-wide-narrow`
+
+点击顺序是：
+
+```txt
+null -> asc -> desc -> null
+```
+
+非受控用法：
+
+```vue
+<ZmTableColumn prop="meetingDate" label="会议日期" zm-sortable :zm-sort-method="handleSort" />
+```
+
+```ts
+function handleSort(prop: string, order: 'asc' | 'desc' | null) {
+  query.value.sortField = prop
+  query.value.sortOrder = order
+  getList()
+}
+```
+
+受控用法：
+
+```vue
+<ZmTableColumn
+  prop="meetingDate"
+  label="会议日期"
+  zm-sortable
+  v-model:sort-order="meetingDateOrder"
+  @sort-change="handleSortChange"
+/>
+```
+
+```ts
+const meetingDateOrder = ref<'asc' | 'desc' | null>(null)
+
+function handleSortChange(payload: { prop: string; order: 'asc' | 'desc' | null }) {
+  query.value.sortField = payload.prop
+  query.value.sortOrder = payload.order
+  getList()
+}
+```
+
+## 筛选
+
+开启 `zm-filterable` 后，表头只显示筛选按钮。popover 里面展示什么、怎么过滤，都由调用方写在 `#filter` 插槽里。
+
+```vue
+<ZmTableColumn
+  prop="status"
+  label="状态"
+  zm-filterable
+  v-model:filter-model-value="query.status"
+  @filter-visible-change="handleFilterVisibleChange"
+>
+  <template #filter="{ filterModelValue, updateFilterModelValue, close }">
+    <div class="p-2">
+      <el-select
+        :model-value="filterModelValue"
+        placeholder="请选择状态"
+        clearable
+        class="w-full"
+        @update:model-value="updateFilterModelValue"
+      >
+        <el-option label="启用" value="enable" />
+        <el-option label="停用" value="disable" />
+      </el-select>
+
+      <div class="mt-2 flex justify-end gap-2">
+        <el-button size="small" @click="updateFilterModelValue(undefined)">清空</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          @click="
+            () => {
+              handleQuery()
+              close()
+            }
+          "
+        >
+          确定
+        </el-button>
+      </div>
+    </div>
+  </template>
+</ZmTableColumn>
+```
+
+`#filter` 插槽会收到这些常用参数：
+
+| 参数                            | 说明                                           |
+| ------------------------------- | ---------------------------------------------- |
+| `prop`                          | 当前列字段名。                                 |
+| `filterModelValue`              | 当前筛选值。                                   |
+| `updateFilterModelValue(value)` | 更新筛选值，会触发 `update:filterModelValue`。 |
+| `close()`                       | 关闭 popover。                                 |
+| `setVisible(visible)`           | 手动控制 popover 显隐。                        |
+
+筛选按钮是否高亮：
+
+- 传了 `filterActive` 时，以 `filterActive` 为准。
+- 没传 `filterActive` 时，组件会根据 `filterModelValue` 是否有值自动判断。
+
+## 操作列和列设置
+
+给操作列加 `action`，表头会显示设置按钮。
+
+```vue
+<ZmTable :data="list" :loading="loading">
+  <ZmTableColumn prop="name" label="名称" />
+  <ZmTableColumn prop="status" label="状态" />
+
+  <ZmTableColumn label="操作" width="120" fixed="right" action>
+    <template #default="{ row }">
+      <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
+    </template>
+  </ZmTableColumn>
+</ZmTable>
+```
+
+列设置面板支持：
+
+- 拖拽调整列顺序。
+- 显示 / 隐藏列。
+- 固定到左侧 / 固定到右侧 / 取消固定。
+- 重置为初始列配置。
+
+列设置 key 的优先级：
+
+```txt
+columnKey -> prop -> type -> label -> column-${index}
+```
+
+建议动态列、同名列、没有 `prop` 的列都手动传 `column-key`，避免 key 不稳定。
+
+```vue
+<ZmTableColumn column-key="custom-action" label="自定义列">
+  ...
+</ZmTableColumn>
+```
+
+## 多级表头
+
+Element Plus 原生多级表头可以直接写：
+
+```vue
+<ZmTableColumn label="累计" is-parent>
+  <ZmTableColumn prop="totalGasInjection" label="注气量" />
+  <ZmTableColumn prop="totalWaterInjection" label="注水量" />
+  <ZmTableColumn prop="totalPower" label="用电量" />
+</ZmTableColumn>
+```
+
+如果想让列设置面板识别并控制子级表头，需要给父级列加 `is-parent`。
+
+子级列拖拽时只能在自己的父级分组内排序。比如 `累计` 下面有三个子列，这三个子列只能在 `累计` 里面互相调整，不能被拖到其他父级外面。
+
+## 对齐优先级
+
+普通列对齐优先级：
+
+```txt
+列自己的 align -> ZmTable 的 align -> 默认 center
+```
+
+开启了下面任意能力时，表头会优先左对齐，方便标题和按钮同时展示：
+
+- `action`
+- `zm-sortable`
+- `zm-filterable`
+
+示例：
+
+```vue
+<ZmTable :data="list" :loading="loading" align="right">
+  <ZmTableColumn prop="amount" label="金额" />
+  <ZmTableColumn prop="name" label="名称" align="left" />
+  <ZmTableColumn prop="date" label="日期" zm-sortable />
+</ZmTable>
+```
+
+上面例子里：
+
+- `amount` 使用表格全局 `right`。
+- `name` 使用列自己的 `left`。
+- `date` 因为开启了排序，表头优先 `left`。
+
+## 自动列宽
+
+每个有 `prop` 的列会根据表头和当前数据自动计算 `minWidth`。
+
+计算逻辑大致是：
+
+- 取表头文字宽度。
+- 取当前页数据里该列内容的最大文字宽度。
+- 如果列头有排序/筛选按钮，会额外加上按钮宽度。
+- 最终宽度不会超过 `ZmTable` 的 `columnMaxWidth`，默认是 `360`。
+
+```vue
+<ZmTable :data="list" :loading="loading" :column-max-width="480">
+  <ZmTableColumn prop="description" label="描述" />
+</ZmTable>
+```
+
+如果展示值不是原始字段值，建议传 `real-value`，这样自动宽度会按真实显示值计算。
+
+```vue
+<ZmTableColumn
+  prop="meetingDate"
+  label="会议日期"
+  cover-formatter
+  :real-value="(row) => dayjs(row.meetingDate).format('YYYY-MM-DD')"
+/>
+```
+
+## 插槽
+
+`ZmTable` 会透传 Element Plus 表格的大部分插槽，默认插槽用于放 `ZmTableColumn`。
+
+`ZmTableColumn` 会透传 Element Plus 列的大部分插槽：
+
+```vue
+<ZmTableColumn prop="status" label="状态">
+  <template #default="{ row }">
+    <el-tag>{{ row.status }}</el-tag>
+  </template>
+</ZmTableColumn>
+```
+
+如果自定义了 `#header`，组件内置的排序、筛选、设置按钮不会自动渲染，需要调用方自己处理表头内容。
+
+## Expose
+
+`ZmTable` 暴露了内部 Element Plus 表格实例：
+
+```vue
+<script setup lang="ts">
+const tableRef = ref()
+
+function clearSelection() {
+  tableRef.value?.elTableRef?.clearSelection()
+}
+</script>
+
+<template>
+  <ZmTable ref="tableRef" :data="list" :loading="loading" />
+</template>
+```
+
+## CSS 变量
+
+默认样式挂在 `.zm-table` 上。外部可以通过 class 覆盖变量：
+
+```vue
+<ZmTable class="meeting-table" :data="list" :loading="loading" />
+```
+
+```scss
+.meeting-table {
+  --zm-table-font-size: 13px;
+  --zm-table-header-bg: #f3f6fb;
+  --zm-table-cell-height: 44px;
+}
+```
+
+### 表格变量
+
+| 变量 | 默认值 | 说明 |
+| --- | --- | --- |
+| `--zm-table-font-family` | `inherit` | 表格字体。 |
+| `--zm-table-font-size` | `12px` | 表格基础字号。 |
+| `--zm-table-text-color` | `#40546d` | 普通文字颜色。 |
+| `--zm-table-strong-text-color` | `#24364d` | body 单元格文字颜色。 |
+| `--zm-table-row-font-weight` | `500` | body 单元格字重。 |
+| `--zm-table-bg` | `var(--el-bg-color)` | 表格背景。 |
+| `--zm-table-border-color` | `#e7edf4` | 表格外边框颜色。 |
+| `--zm-table-radius` | `10px` | 表格圆角。 |
+| `--zm-table-header-bg` | `var(--el-fill-color-extra-light, #f7f9fc)` | 表头背景。 |
+| `--zm-table-header-text-color` | `var(--el-text-color-secondary, #6b7f99)` | 表头文字颜色。 |
+| `--zm-table-header-border-color` | `var(--zm-table-border-color)` | 表头边框颜色。 |
+| `--zm-table-header-cell-height` | `36px` | 普通表头高度。 |
+| `--zm-table-header-group-cell-height` | `42px` | 多级表头父级高度。 |
+| `--zm-table-header-font-size` | `var(--zm-table-font-size)` | 表头字号。 |
+| `--zm-table-header-font-weight` | `600` | 表头字重。 |
+| `--zm-table-header-line-height` | `16px` | 表头行高。 |
+| `--zm-table-header-icon-btn-size` | `18px` | 表头图标按钮尺寸。 |
+| `--zm-table-header-icon-btn-color` | `#8aa0b8` | 表头图标默认颜色。 |
+| `--zm-table-header-icon-btn-radius` | `4px` | 表头图标按钮圆角。 |
+| `--zm-table-header-icon-btn-hover-color` | `var(--el-color-primary)` | 表头图标 hover 颜色。 |
+| `--zm-table-header-icon-btn-hover-bg` | `var(--el-color-primary-light-9)` | 表头图标 hover 背景。 |
+| `--zm-table-header-icon-btn-active-color` | `var(--zm-table-header-icon-btn-hover-color)` | 表头图标激活颜色。 |
+| `--zm-table-header-icon-btn-active-bg` | `var(--zm-table-header-icon-btn-hover-bg)` | 表头图标激活背景。 |
+| `--zm-table-header-icon-size` | `16px` | 表头图标尺寸。 |
+| `--zm-table-row-border-color` | `#edf2f7` | body 单元格边框颜色。 |
+| `--zm-table-stripe-bg` | `#fcfdff` | 斑马纹背景。 |
+| `--zm-table-hover-bg` | `#f5f9ff` | 行 hover 背景。 |
+| `--zm-table-current-bg` | `#eef6ff` | 当前行背景。 |
+| `--zm-table-cell-height` | `38px` | body 单元格高度。 |
+| `--zm-table-cell-padding-x` | `13px` | body 单元格左右 padding。 |
+| `--zm-table-cell-first-padding-left` | `calc(var(--zm-table-cell-padding-x) + 3px)` | 每行第一个单元格左 padding。 |
+| `--zm-table-cell-last-padding-right` | `var(--zm-table-cell-first-padding-left)` | 每行最后一个单元格右 padding。 |
+| `--zm-table-cell-line-height` | `18px` | body 单元格行高。 |
+| `--zm-table-empty-min-height` | `148px` | 空状态最小高度。 |
+| `--zm-table-empty-bg` | `var(--zm-table-bg)` | 空状态背景。 |
+| `--zm-table-empty-text-font-size` | `var(--zm-table-font-size)` | 空状态文字字号。 |
+| `--zm-table-empty-text-color` | `var(--el-text-color-secondary)` | 空状态文字颜色。 |
+| `--zm-table-scrollbar-size` | `7px` | 滚动条尺寸。 |
+| `--zm-table-scrollbar-thumb-bg` | `#b8c5d6` | 滚动条滑块颜色。 |
+
+### 列设置变量
+
+列设置面板 popover 使用 `.zm-table-column-setting-popper`，可以全局覆盖，也可以在页面样式中覆盖。
+
+| 变量 | 默认值 | 说明 |
+| --- | --- | --- |
+| `--zm-table-column-setting-font-size` | `var(--zm-table-font-size, 12px)` | 设置面板字号。 |
+| `--zm-table-column-setting-text-color` | `var(--el-text-color-regular)` | 设置面板文字颜色。 |
+| `--zm-table-column-setting-border-color` | `var(--el-border-color)` | 设置面板分割线颜色。 |
+| `--zm-table-column-setting-hover-bg` | `var(--el-fill-color-lighter)` | 设置项 hover 背景。 |
+| `--zm-table-column-setting-radius` | `6px` | 设置项圆角。 |
+| `--zm-table-column-setting-gap` | `4px` | 设置项纵向间距。 |
+| `--zm-table-column-setting-max-height` | `360px` | 设置面板最大高度。 |
+| `--zm-table-column-setting-row-height` | `32px` | 一级设置项高度。 |
+| `--zm-table-column-setting-child-row-height` | `30px` | 子级设置项高度。 |
+| `--zm-table-column-setting-item-font-weight` | `400` | 普通设置项字重。 |
+| `--zm-table-column-setting-group-font-weight` | `600` | 分组设置项字重。 |
+| `--zm-table-column-setting-icon-btn-size` | `22px` | 设置项图标按钮尺寸。 |
+| `--zm-table-column-setting-icon-size` | `15px` | 设置项图标尺寸。 |
+| `--zm-table-column-setting-icon-color` | `#8aa0b8` | 设置项图标默认颜色。 |
+| `--zm-table-column-setting-icon-active-color` | `var(--el-color-primary)` | 设置项图标激活颜色。 |
+| `--zm-table-column-setting-icon-active-bg` | `var(--el-color-primary-light-9)` | 设置项图标激活背景。 |
+| `--zm-table-column-setting-ghost-bg` | `var(--el-color-primary-light-9)` | 拖拽占位背景。 |
+| `--zm-table-column-setting-ghost-opacity` | `0.55` | 拖拽占位透明度。 |
+
+### 自动宽度测量变量
+
+自动算宽时会创建隐藏文本节点测量文字宽度，可以用这两个变量控制测量字体：
+
+| 变量 | 默认值 | 说明 |
+| --- | --- | --- |
+| `--zm-table-column-width-measure-font-size` | `--zm-table-font-size` 或当前表格字号 | 测量文字宽度时的字号。 |
+| `--zm-table-column-width-measure-font-family` | 当前表格字体或 `Noto Sans SC` | 测量文字宽度时的字体。 |
+
+## 文字换行
+
+默认 `showOverflowTooltip` 是 `true`，单元格会走 Element Plus 的溢出 tooltip。想关闭 tooltip 并让内容自动换行，可以这样写：
+
+```vue
+<ZmTable class="wrap-table" :data="list" :loading="loading" :show-overflow-tooltip="false">
+  <ZmTableColumn prop="description" label="描述" />
+</ZmTable>
+```
+
+```scss
+.wrap-table {
+  :deep(.el-table__body .cell) {
+    overflow: visible;
+    text-overflow: initial;
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+```
+
+## 注意事项
+
+- 列设置只识别 `ZmTableColumn`，不要在默认插槽里混入其他会渲染成列的组件。
+- 多级表头想被设置面板递归识别，需要在父级列上加 `is-parent`。
+- 动态列建议手动传 `column-key`，否则列顺序和显隐状态可能因为 key 变化而重置。
+- 排序和筛选按钮只负责 UI 状态，不会自动修改 `data` 或请求接口。
+- 如果传了自定义 `#header`，内置排序、筛选、设置按钮不会出现。
+- `customClass=true` 会关闭默认 `.zm-table` 样式，相关 CSS 变量也不会自动生效。

src/components/ZmTable/ZmTableColumn.vue

@@ -1,51 +1,92 @@
 <script lang="ts" setup generic="T">
 import { type TableColumnCtx } from 'element-plus'
-import { computed, useAttrs, inject, ref } from 'vue'
-import { Filter } from '@element-plus/icons-vue'
-import { SortOrder, TableContextKey } from './token'
-
-interface Props extends /* @vue-ignore */ Partial<Omit<TableColumnCtx<T>, 'prop'>> {
+import { computed, inject, nextTick, ref, useAttrs, watch } from 'vue'
+import { TableContextKey } from './token'
+import ZmTableColumnSettingTree from './ZmTableColumnSettingTree.vue'
+import type { ColumnAlign, ColumnSettingItem, SortChangePayload, SortOrder } from './token'
+import type { DefaultRow } from 'element-plus/es/components/table/src/table/defaults'
+
+interface Props
+  extends /* @vue-ignore */ Partial<
+    Omit<TableColumnCtx<T extends DefaultRow ? T : DefaultRow>, 'prop'>
+  > {
   prop?: (keyof T & string) | (string & {})
+  action?: boolean
+  hideInColumnSettings?: boolean
+  isParent?: boolean
   zmSortable?: boolean
   zmFilterable?: boolean
+  sortOrder?: SortOrder | null
+  defaultSortOrder?: SortOrder | null
+  zmSortMethod?: (prop: string, order: SortOrder | null) => void
+  filterActive?: boolean
   filterModelValue?: any
   realValue?: (...args: any[]) => any
   coverFormatter?: boolean
 }
 
-const emits = defineEmits(['update:filterModelValue'])
+const emits = defineEmits<{
+  'update:filterModelValue': [value: any]
+  'update:sortOrder': [order: SortOrder | null]
+  'sort-change': [payload: SortChangePayload]
+  'filter-click': [payload: { prop?: string }]
+  'filter-visible-change': [visible: boolean]
+}>()
+
 const props = defineProps<Props>()
 const attrs = useAttrs()
 
 const tableContext = inject(TableContextKey, {
   data: ref([]),
-  sortingFields: ref([]),
-  onQuery: () => {},
-  onSort: () => {},
-  loading: ref(false)
+  loading: ref(false),
+  columnAlign: ref<ColumnAlign>('center'),
+  columnMaxWidth: ref(360),
+  columnSettings: ref([]),
+  updateColumnVisible: () => {},
+  updateColumnFixed: () => {},
+  updateColumnOrder: () => {},
+  resetColumnSettings: () => {}
 })
 
+const innerSortOrder = ref<SortOrder | null>(props.defaultSortOrder ?? null)
+const filterVisible = ref(false)
+const settingVisible = ref(false)
+
 const defaultOptions = ref<Partial<Props>>({
   align: 'center',
-  resizable: true,
-  showOverflowTooltip: true,
-  coverFormatter: false
+  resizable: true
 })
 
 const bindProps = computed(() => {
+  const {
+    action,
+    hideInColumnSettings,
+    zmSortable,
+    zmFilterable,
+    sortOrder,
+    defaultSortOrder,
+    zmSortMethod,
+    filterActive,
+    filterModelValue,
+    realValue,
+    coverFormatter,
+    isParent,
+    ...columnProps
+  } = props
+  const columnAlign = props.align || (attrs.align as ColumnAlign | undefined)
   const resolvedAlign =
-    props.zmSortable || props.zmFilterable
+    action || zmSortable || zmFilterable
       ? 'left'
-      : attrs.align || props.align || defaultOptions.value.align
+      : columnAlign || tableContext.columnAlign.value || defaultOptions.value.align
 
   return {
     ...defaultOptions.value,
     ...attrs,
-    ...props,
+    ...columnProps,
     prop: props.prop,
     align: resolvedAlign,
-    className: (props.className ?? '') + ' ' + props.prop,
-    formatter: props.coverFormatter ? props.realValue : props.formatter
+    className: [props.className, props.prop].filter(Boolean).join(' '),
+    formatter: coverFormatter ? realValue : props.formatter
   }
 })
 
@@ -54,18 +95,27 @@ const alignMap: Record<string, string> = {
   left: 'justify-between',
   right: 'justify-end'
 }
-const headerFlexClass = computed(
-  () => alignMap[bindProps.value.align as string] || 'justify-center'
-)
+const headerFlexClass = computed(() => alignMap[String(bindProps.value.align)] || 'justify-center')
 
-const currentSortField = computed(() => {
-  if (!props.prop) return undefined
-  return tableContext.sortingFields.value.find((f: any) => f.field === props.prop)
+const isSortControlled = computed(() => props.sortOrder !== undefined)
+const currentOrder = computed<SortOrder | null>(() => {
+  return isSortControlled.value ? (props.sortOrder ?? null) : innerSortOrder.value
 })
+const isSortActive = computed(() => currentOrder.value !== null)
 
-const isSortActive = computed(() => !!currentSortField.value)
+const hasFilterValue = (value: any) => {
+  if (Array.isArray(value)) return value.length > 0
+  if (typeof value === 'string') return value.length > 0
+  return value !== undefined && value !== null && value !== ''
+}
+const isFilterActive = computed(() => props.filterActive ?? hasFilterValue(props.filterModelValue))
 
-const currentOrder = computed<SortOrder | undefined>(() => currentSortField.value?.order)
+const columnSettingsModel = computed<ColumnSettingItem[]>({
+  get: () => tableContext.columnSettings.value,
+  set: (items) => {
+    tableContext.updateColumnOrder(items.map((item) => item.key))
+  }
+})
 
 const handleSortClick = () => {
   if (!props.prop) return
@@ -78,58 +128,102 @@ const handleSortClick = () => {
     nextOrder = null
   }
 
-  tableContext.onSort(props.prop, nextOrder)
+  if (!isSortControlled.value) {
+    innerSortOrder.value = nextOrder
+  }
+
+  emits('update:sortOrder', nextOrder)
+  emits('sort-change', { prop: props.prop, order: nextOrder })
+  props.zmSortMethod?.(props.prop, nextOrder)
 }
 
-const handleSearchClick = () => {
-  if (tableContext.onQuery && props.prop) {
-    tableContext.onQuery({
-      prop: props.prop,
-      value: props.filterModelValue
-    })
+const updateFilterModelValue = (value: any) => {
+  emits('update:filterModelValue', value)
+}
+
+const closeFilterPopover = () => {
+  filterVisible.value = false
+}
+
+const setFilterVisible = (visible: boolean) => {
+  filterVisible.value = visible
+}
+
+const getFilterSlotProps = (scope: any) => ({
+  ...scope,
+  prop: props.prop,
+  filterModelValue: props.filterModelValue,
+  close: closeFilterPopover,
+  setVisible: setFilterVisible,
+  updateFilterModelValue
+})
+
+const handleFilterReferenceClick = () => {
+  emits('filter-click', { prop: props.prop })
+}
+
+watch(
+  () => props.defaultSortOrder,
+  (order) => {
+    if (!isSortControlled.value) {
+      innerSortOrder.value = order ?? null
+    }
   }
+)
+
+watch(filterVisible, (visible) => {
+  emits('filter-visible-change', visible)
+})
+
+const getTableComputedStyle = () => {
+  const tableElement = document.querySelector('.zm-table') as HTMLElement | null
+  return getComputedStyle(tableElement ?? document.documentElement)
 }
 
-const getTextWidth = (text: string, fontSize = 14) => {
+const getTableStyleVariable = (name: string, fallback: string) => {
+  const style = getTableComputedStyle()
+  return style.getPropertyValue(name).trim() || fallback
+}
+
+const getTextWidth = (text: string) => {
+  const tableStyle = getTableComputedStyle()
   const span = document.createElement('span')
   span.style.visibility = 'hidden'
   span.style.position = 'absolute'
   span.style.whiteSpace = 'nowrap'
-  span.style.fontSize = `${fontSize}px`
-  span.style.fontFamily = 'PingFang SC'
+  span.style.fontSize = getTableStyleVariable(
+    '--zm-table-column-width-measure-font-size',
+    getTableStyleVariable('--zm-table-font-size', tableStyle.fontSize || '12px')
+  )
+  span.style.fontFamily = getTableStyleVariable(
+    '--zm-table-column-width-measure-font-family',
+    tableStyle.fontFamily || 'Noto Sans SC'
+  )
   span.innerText = text
-
   document.body.appendChild(span)
   const width = span.offsetWidth
   document.body.removeChild(span)
-
   return width
 }
 
 const calculativeWidth = () => {
+  if (!props.prop) return
   const values = tableContext.data.value
-    .map((item) => props.realValue?.(item) || item[props.prop])
-    .filter(Boolean)
-
-  let labelWidth = getTextWidth(bindProps.value.label || '') + 34
-
-  if (props.zmFilterable || props.zmSortable) {
-    labelWidth += 8
-  }
-
+    .map((item) => props.realValue?.(item) ?? item[props.prop as keyof typeof item])
+    .filter(hasFilterValue)
+  let labelWidth = getTextWidth(bindProps.value.label || '') + 32
+  if (props.zmFilterable || props.zmSortable) labelWidth += 8
   if (props.zmFilterable) labelWidth += 22
   if (props.zmSortable) labelWidth += 22
-
   const maxWidth = Math.min(
-    Math.max(...values.map((value) => getTextWidth(value) + 34), labelWidth),
-    360
+    Math.max(...values.map((value) => getTextWidth(String(value)) + 38), labelWidth),
+    tableContext.columnMaxWidth.value
   )
-
   defaultOptions.value.minWidth = maxWidth
 }
 
 watch(
-  () => tableContext.loading.value,
+  [() => tableContext.loading.value, () => tableContext.columnMaxWidth.value],
   () => {
     nextTick(() => {
       calculativeWidth()
@@ -144,14 +238,13 @@ watch(
     <template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
       <slot v-if="name !== 'header'" :name="name" v-bind="slotData || {}"></slot>
     </template>
-
     <template #header="scope">
       <slot name="header" v-bind="scope">
         <div class="header-wrapper" :class="headerFlexClass">
           <span class="truncate" :title="scope.column.label">{{ scope.column.label }}</span>
-          <div v-if="bindProps.zmSortable || bindProps.zmFilterable" class="action-area">
+          <div v-if="props.action || props.zmSortable || props.zmFilterable" class="action-area">
             <el-tooltip
-              v-if="bindProps.zmSortable"
+              v-if="props.zmSortable"
               :content="
                 currentOrder === 'asc'
                   ? '点击降序'
@@ -162,53 +255,74 @@ watch(
               placement="top"
               :show-after="500"
             >
-              <div
+              <button
+                type="button"
                 class="icon-btn"
                 :class="{ 'is-active': isSortActive }"
                 @click.stop="handleSortClick"
               >
-                <i
-                  class="zm-sort-icon"
-                  :class="{
-                    'is-desc': currentOrder === 'desc'
-                  }"
-                ></i>
-              </div>
+                <div v-if="currentOrder === 'asc'" class="sort-icon i-lucide:arrow-up-narrow-wide">
+                </div>
+                <div
+                  v-else-if="currentOrder === 'desc'"
+                  class="sort-icon i-lucide:arrow-down-wide-narrow"
+                >
+                </div>
+                <div v-else class="sort-icon i-lucide:arrow-up-down"></div>
+              </button>
             </el-tooltip>
 
             <el-popover
-              v-if="bindProps.zmFilterable"
-              placement="top-end"
+              v-if="props.zmFilterable"
+              v-model:visible="filterVisible"
+              placement="top"
               :popper-options="{ modifiers: [{ name: 'offset', options: { offset: [16, 18] } }] }"
               trigger="click"
               :width="260"
               :show-arrow="false"
             >
               <template #reference>
-                <div
+                <button
+                  type="button"
                   class="icon-btn"
-                  :class="{ 'is-active': bindProps.filterModelValue }"
-                  @click.stop
+                  :class="{ 'is-active': isFilterActive }"
+                  @click.stop="handleFilterReferenceClick"
                 >
-                  <el-icon :size="16"><Filter /></el-icon>
-                </div>
+                  <div class="filter-icon i-lucide:list-filter"></div>
+                </button>
               </template>
+              <slot name="filter" v-bind="getFilterSlotProps(scope)"></slot>
+            </el-popover>
+
+            <el-popover
+              v-if="props.action"
+              v-model:visible="settingVisible"
+              placement="bottom-end"
+              trigger="click"
+              :width="360"
+              :show-arrow="false"
+              popper-class="zm-table-column-setting-popper"
+            >
+              <template #reference>
+                <button type="button" class="icon-btn" title="列设置" @click.stop>
+                  <div class="setting-icon i-lucide:settings"></div>
+                </button>
+              </template>
+
+              <div class="column-setting-panel">
+                <ZmTableColumnSettingTree v-model="columnSettingsModel" />
 
-              <slot name="filter" v-bind="scope">
-                <div class="flex gap-2 p-1">
-                  <el-input
-                    :model-value="bindProps.filterModelValue"
-                    @input="(val) => emits('update:filterModelValue', val)"
-                    placeholder="输入关键词"
+                <div class="column-setting-footer">
+                  <el-button
+                    link
+                    type="primary"
                     size="small"
-                    clearable
-                    @keydown.enter="handleSearchClick"
-                  />
-                  <el-button type="primary" size="small" @click="handleSearchClick">
-                    搜索
+                    @click="tableContext.resetColumnSettings"
+                  >
+                    重置
                   </el-button>
                 </div>
-              </slot>
+              </div>
             </el-popover>
           </div>
         </div>
@@ -218,78 +332,103 @@ watch(
 </template>
 
 <style scoped lang="scss">
+// 表头整体容器：左侧是标题，右侧是按钮区。
 .header-wrapper {
   display: flex;
   align-items: center;
   width: 100%;
   height: 100%;
+  min-width: 0;
+  gap: 6px;
+  font-size: var(--zm-table-header-font-size, var(--zm-table-font-size, 12px));
+  font-weight: var(--zm-table-header-font-weight, 600);
+  line-height: var(--zm-table-header-line-height, 16px);
+  color: var(--zm-table-header-text-color, #6b7f99);
   user-select: none;
+
+  .truncate {
+    min-width: 0;
+  }
 }
 
+// 表头右侧按钮区。
 .action-area {
   display: flex;
+  flex: 0 0 auto;
   height: 100%;
-  margin-left: 8px;
+  margin-left: 4px;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
 }
 
+// 表头小图标按钮的通用样式。
 .icon-btn {
   display: flex;
-  width: 20px;
-  height: 20px;
-  color: var(--el-text-color-secondary);
+  width: var(--zm-table-header-icon-btn-size, 18px);
+  height: var(--zm-table-header-icon-btn-size, 18px);
+  padding: 0;
+  color: var(--zm-table-header-icon-btn-color, #8aa0b8);
   cursor: pointer;
-  border-radius: 4px;
-  transition: background-color 0.2s;
+  background: transparent;
+  border: 0;
+  border-radius: var(--zm-table-header-icon-btn-radius, 4px);
+  transition:
+    color 0.16s ease,
+    background-color 0.16s ease;
   align-items: center;
   justify-content: center;
 
   &:hover {
-    color: var(--el-color-primary);
-    background-color: var(--el-fill-color-darker);
+    color: var(--zm-table-header-icon-btn-hover-color, var(--el-color-primary));
+    background-color: var(--zm-table-header-icon-btn-hover-bg, var(--el-color-primary-light-9));
   }
 
   &.is-active {
-    color: var(--el-color-primary);
+    color: var(--zm-table-header-icon-btn-active-color, var(--el-color-primary));
+    background-color: var(--zm-table-header-icon-btn-active-bg, var(--el-color-primary-light-9));
   }
 }
 
-.zm-sort-icon {
-  position: relative;
-  display: flex;
-  width: 12px;
-  height: 12px;
-  align-items: center;
-  justify-content: center;
-
-  &::before,
-  &::after {
-    position: absolute;
-    width: 8px;
-    height: 2px;
-    background-color: currentcolor;
-    border-radius: 2px;
-    content: '';
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  &::before {
-    transform: translateX(-2.2px) rotate(45deg);
-  }
+// 排序、筛选、设置这几个图标统一大小。
+.sort-icon,
+.filter-icon,
+.setting-icon {
+  width: var(--zm-table-header-icon-size, 16px);
+  height: var(--zm-table-header-icon-size, 16px);
+}
 
-  &::after {
-    transform: translateX(2.2px) rotate(-45deg);
-  }
+// 列设置面板容器。
+.column-setting-panel {
+  min-width: 0;
+}
 
-  &.is-desc {
-    &::before {
-      transform: translateX(-2.2px) rotate(-45deg);
-    }
+// 面板底部区域，放重置按钮。
+.column-setting-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 8px;
+  margin-top: 8px;
+  border-top: 1px solid var(--zm-table-column-setting-border-color, var(--el-border-color-lighter));
+}
 
-    &::after {
-      transform: translateX(2.2px) rotate(45deg);
-    }
-  }
+:global(.zm-table-column-setting-popper) {
+  --zm-table-column-setting-font-size: var(--zm-table-font-size, 12px);
+  --zm-table-column-setting-text-color: var(--el-text-color-regular);
+  --zm-table-column-setting-border-color: var(--el-border-color);
+  --zm-table-column-setting-hover-bg: var(--el-fill-color-lighter);
+  --zm-table-column-setting-radius: 6px;
+  --zm-table-column-setting-gap: 4px;
+  --zm-table-column-setting-max-height: 360px;
+  --zm-table-column-setting-row-height: 32px;
+  --zm-table-column-setting-child-row-height: 30px;
+  --zm-table-column-setting-item-font-weight: 400;
+  --zm-table-column-setting-group-font-weight: 600;
+  --zm-table-column-setting-icon-btn-size: 22px;
+  --zm-table-column-setting-icon-size: 15px;
+  --zm-table-column-setting-icon-color: #8aa0b8;
+  --zm-table-column-setting-icon-active-color: var(--el-color-primary);
+  --zm-table-column-setting-icon-active-bg: var(--el-color-primary-light-9);
+  --zm-table-column-setting-ghost-bg: var(--el-color-primary-light-9);
+  --zm-table-column-setting-ghost-opacity: 0.55;
 }
 </style>

src/components/ZmTable/ZmTableColumnSettingTree.vue

@@ -0,0 +1,255 @@
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import { TableContextKey } from './token'
+import type { ColumnFixed, ColumnSettingItem } from './token'
+
+defineOptions({
+  name: 'ZmTableColumnSettingTree'
+})
+
+interface Props {
+  modelValue: ColumnSettingItem[]
+  parentKey?: string
+  level?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  level: 0
+})
+
+const emits = defineEmits<{
+  'update:modelValue': [value: ColumnSettingItem[]]
+}>()
+
+const tableContext = inject(TableContextKey, {
+  data: ref([]),
+  loading: ref(false),
+  columnAlign: ref('center' as const),
+  columnMaxWidth: ref(360),
+  columnSettings: ref([]),
+  updateColumnVisible: () => {},
+  updateColumnFixed: () => {},
+  updateColumnOrder: () => {},
+  resetColumnSettings: () => {}
+})
+
+const columnList = computed<ColumnSettingItem[]>({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits('update:modelValue', value)
+  }
+})
+
+const dragHandleClass = computed(() => `column-setting-drag-handle-${props.level}`)
+const dragHandleSelector = computed(() => `.${dragHandleClass.value}`)
+const dragGroup = computed(() => ({
+  name: `zm-table-column-setting-${props.parentKey || 'root'}`,
+  pull: false,
+  put: false
+}))
+
+const hasChildColumns = (item: ColumnSettingItem) => !!item.children?.length
+
+const getVisibleTooltip = (item: ColumnSettingItem) => (item.visible ? '隐藏列' : '显示列')
+
+const getFixedTooltip = (item: ColumnSettingItem, fixed: Exclude<ColumnFixed, false>) => {
+  if (item.fixed === fixed) return fixed === 'left' ? '取消固定左侧' : '取消固定右侧'
+  return fixed === 'left' ? '固定到左侧' : '固定到右侧'
+}
+
+const handleChildColumnOrder = (parentKey: string, children: ColumnSettingItem[]) => {
+  tableContext.updateColumnOrder(
+    children.map((item) => item.key),
+    parentKey
+  )
+}
+
+const toggleColumnFixed = (item: ColumnSettingItem, fixed: Exclude<ColumnFixed, false>) => {
+  tableContext.updateColumnFixed(item.key, item.fixed === fixed ? false : fixed)
+}
+</script>
+
+<template>
+  <VueDraggable
+    v-model="columnList"
+    :animation="150"
+    :handle="dragHandleSelector"
+    :group="dragGroup"
+    ghost-class="column-setting-ghost"
+    class="column-setting-list"
+    :class="{ 'is-root': level === 0, 'is-child-list': level > 0 }"
+  >
+    <div v-for="item in columnList" :key="item.key" class="column-setting-group">
+      <div
+        class="column-setting-item"
+        :class="{ 'is-group': hasChildColumns(item), 'is-child': level > 0 }"
+      >
+        <button
+          type="button"
+          class="column-setting-icon-btn column-setting-drag-handle"
+          :class="dragHandleClass"
+          title="拖拽排序"
+        >
+          <div class="i-lucide:grip-vertical"></div>
+        </button>
+        <span class="column-setting-label" :title="item.label">
+          {{ item.label }}
+        </span>
+        <el-tooltip
+          :content="getVisibleTooltip(item)"
+          placement="top"
+          :show-after="500"
+          :hide-after="0"
+        >
+          <button
+            type="button"
+            class="column-setting-icon-btn"
+            :class="{ 'is-active': item.visible }"
+            @click="tableContext.updateColumnVisible(item.key, !item.visible)"
+          >
+            <div :class="item.visible ? 'i-lucide:eye' : 'i-lucide:eye-off'"></div>
+          </button>
+        </el-tooltip>
+        <el-tooltip
+          :content="getFixedTooltip(item, 'left')"
+          placement="top"
+          :show-after="500"
+          :hide-after="0"
+        >
+          <button
+            type="button"
+            class="column-setting-icon-btn"
+            :class="{ 'is-active': item.fixed === 'left' }"
+            @click="toggleColumnFixed(item, 'left')"
+          >
+            <div class="i-lucide:panel-left"></div>
+          </button>
+        </el-tooltip>
+        <el-tooltip
+          :content="getFixedTooltip(item, 'right')"
+          placement="top"
+          :show-after="500"
+          :hide-after="0"
+        >
+          <button
+            type="button"
+            class="column-setting-icon-btn"
+            :class="{ 'is-active': item.fixed === 'right' }"
+            @click="toggleColumnFixed(item, 'right')"
+          >
+            <div class="i-lucide:panel-right"></div>
+          </button>
+        </el-tooltip>
+      </div>
+
+      <ZmTableColumnSettingTree
+        v-if="item.children?.length"
+        :model-value="item.children"
+        :parent-key="item.key"
+        :level="level + 1"
+        @update:model-value="(children) => handleChildColumnOrder(item.key, children)"
+      />
+    </div>
+  </VueDraggable>
+</template>
+
+<style scoped lang="scss">
+.column-setting-list {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--zm-table-column-setting-gap, 4px);
+
+  &.is-root {
+    max-height: var(--zm-table-column-setting-max-height, 360px);
+    overflow-y: auto;
+  }
+
+  &.is-child-list {
+    padding-left: 18px;
+    margin: 3px 0 6px;
+    border-left: 1px dashed var(--zm-table-column-setting-border-color, var(--el-border-color));
+    gap: 3px;
+  }
+}
+
+.column-setting-group {
+  min-width: 0;
+}
+
+.column-setting-item {
+  display: grid;
+  height: var(--zm-table-column-setting-row-height, 32px);
+  min-width: 0;
+  padding: 0 4px;
+  font-size: var(--zm-table-column-setting-font-size, 12px);
+  font-weight: var(--zm-table-column-setting-item-font-weight, 400);
+  color: var(--zm-table-column-setting-text-color, var(--el-text-color-regular));
+  border-radius: var(--zm-table-column-setting-radius, 6px);
+  align-items: center;
+  column-gap: 6px;
+  grid-template-columns: 22px minmax(0, 1fr) repeat(3, 24px);
+
+  &:hover {
+    background: var(--zm-table-column-setting-hover-bg, var(--el-fill-color-lighter));
+  }
+
+  &.is-group {
+    font-weight: var(--zm-table-column-setting-group-font-weight, 600);
+  }
+
+  &.is-child {
+    height: var(--zm-table-column-setting-child-row-height, 30px);
+    padding-left: 2px;
+  }
+}
+
+.column-setting-label {
+  overflow: hidden;
+  color: currentcolor;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.column-setting-icon-btn {
+  display: flex;
+  width: var(--zm-table-column-setting-icon-btn-size, 22px);
+  height: var(--zm-table-column-setting-icon-btn-size, 22px);
+  padding: 0;
+  color: var(--zm-table-column-setting-icon-color, #8aa0b8);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+
+  &:hover,
+  &.is-active {
+    color: var(--zm-table-column-setting-icon-active-color, var(--el-color-primary));
+    background-color: var(
+      --zm-table-column-setting-icon-active-bg,
+      var(--el-color-primary-light-9)
+    );
+  }
+
+  > div {
+    width: var(--zm-table-column-setting-icon-size, 15px);
+    height: var(--zm-table-column-setting-icon-size, 15px);
+  }
+}
+
+.column-setting-drag-handle {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.column-setting-ghost {
+  background: var(--zm-table-column-setting-ghost-bg, var(--el-color-primary-light-9));
+  opacity: var(--zm-table-column-setting-ghost-opacity, 0.55);
+}
+</style>

src/components/ZmTable/index.vue

@@ -1,25 +1,50 @@
 <script lang="ts" setup generic="T">
 import type { TableInstance, TableProps } from 'element-plus'
-import { FilterPayload, SortField, SortOrder, TableContextKey } from './token'
+import {
+  Comment,
+  Fragment,
+  Text,
+  cloneVNode,
+  computed,
+  nextTick,
+  provide,
+  ref,
+  useAttrs,
+  useSlots
+} from 'vue'
+import { TableContextKey } from './token'
+import type { ColumnAlign, ColumnFixed, ColumnSettingItem } from './token'
+import type { DefaultRow } from 'element-plus/es/components/table/src/table/defaults'
+import type { VNode } from 'vue'
+
+interface ColumnMeta {
+  key: string
+  label: string
+  action: boolean
+  configurable: boolean
+  fixed: ColumnFixed
+  children: ColumnMeta[]
+}
 
-interface Props extends /* @vue-ignore */ Partial<Omit<TableProps<T>, 'data'>> {
+interface Props
+  extends /* @vue-ignore */ Partial<
+    Omit<TableProps<T extends DefaultRow ? T : DefaultRow>, 'data'>
+  > {
   data: T[]
   loading: boolean
-  handleQuery?: (payload?: FilterPayload) => void
-  sortingFields?: SortField[]
-  sortFn?: (prop: string, order: SortOrder | null) => void
   customClass?: boolean
   showBorder?: boolean
+  align?: ColumnAlign
+  columnMaxWidth?: number
 }
 
 const props = defineProps<Props>()
-
-const emits = defineEmits<{
-  'update:sortingFields': [fields: SortField[]]
-}>()
-
 const attrs = useAttrs()
+const slots = useSlots()
 const tableRef = ref<TableInstance>()
+const columnSettings = ref<ColumnSettingItem[]>([])
+const columnDefaultSettings = ref<ColumnSettingItem[]>([])
+const slotColumnSignature = ref('')
 
 const defaultOptions: Partial<Props> = {
   size: 'default',
@@ -36,7 +61,14 @@ const defaultOptions: Partial<Props> = {
 }
 
 const bindProps = computed(() => {
-  const { data, sortingFields, ...otherProps } = props
+  const {
+    data,
+    customClass: _customClass,
+    showBorder: _showBorder,
+    align: _align,
+    columnMaxWidth,
+    ...otherProps
+  } = props
 
   return {
     ...defaultOptions,
@@ -46,44 +78,295 @@ const bindProps = computed(() => {
   }
 })
 
-const handleDefaultSort = (prop: string, order: SortOrder | null) => {
-  const newFields = [...(props.sortingFields || [])]
+const safeData = computed(() => props.data || [])
+const safeLoading = computed(() => props.loading)
+const safeColumnAlign = computed<ColumnAlign>(() => {
+  return props.align === 'left' || props.align === 'right' || props.align === 'center'
+    ? props.align
+    : 'center'
+})
+const safeColumnMaxWidth = computed(() => {
+  const maxWidth = Number(props.columnMaxWidth)
+  return Number.isFinite(maxWidth) && maxWidth > 0 ? maxWidth : 360
+})
+
+const forwardedSlots = computed(() => {
+  const { default: _default, ...restSlots } = slots
+  return restSlots
+})
+
+const getPropValue = (props: Record<string, any> | null | undefined, ...keys: string[]) => {
+  if (!props) return undefined
+  for (const key of keys) {
+    if (props[key] !== undefined) return props[key]
+  }
+  return undefined
+}
+
+const toBoolean = (value: unknown) => value === true || value === ''
+
+const normalizeFixed = (fixed: unknown): ColumnFixed => {
+  if (fixed === true || fixed === 'left') return 'left'
+  if (fixed === 'right') return 'right'
+  return false
+}
+
+const isColumnNode = (node: VNode) => {
+  if (!node.type && typeof node.type !== 'object') return false
+  const nodeType = node.type as { __name?: string }
+  return nodeType.__name === 'ZmTableColumn'
+}
+
+const canResolveColumnChildren = (node: VNode) => {
+  const nodeProps = node.props
+  return toBoolean(getPropValue(nodeProps, 'isParent', 'is-parent'))
+}
 
-  const idx = newFields.findIndex((f) => f.field === prop)
+const getColumnKey = (node: VNode, index: number, parentKey?: string) => {
+  const nodeProps = node.props
+  const key = getPropValue(nodeProps, 'columnKey', 'column-key')
+  const prop = getPropValue(nodeProps, 'prop')
+  const type = getPropValue(nodeProps, 'type')
+  const label = getPropValue(nodeProps, 'label')
+  const fallbackKey = parentKey ? `${parentKey}.column-${index}` : `column-${index}`
+  return String(key ?? prop ?? type ?? label ?? fallbackKey)
+}
+
+const getColumnLabel = (node: VNode, index: number, parentKey?: string) => {
+  const label = getPropValue(node.props, 'label')
+  return String(label ?? getColumnKey(node, index, parentKey))
+}
 
-  if (order === null) {
-    if (idx > -1) {
-      newFields.splice(idx, 1)
+const getColumnChildren = (node: VNode) => {
+  if (!canResolveColumnChildren(node)) return []
+  const children = node.children
+  if (children && typeof children === 'object' && 'default' in children) {
+    const defaultSlot = (children as { default?: unknown }).default
+    if (typeof defaultSlot !== 'function') return []
+    try {
+      const slotNodes = defaultSlot()
+      const normalizedNodes = Array.isArray(slotNodes) ? slotNodes : slotNodes ? [slotNodes] : []
+      return flattenSlotNodes(normalizedNodes as VNode[]).filter(isColumnNode)
+    } catch {
+      return []
     }
-  } else {
-    if (idx > -1) {
-      newFields[idx] = { ...newFields[idx], order }
-    } else {
-      newFields.push({ field: prop, order })
+  }
+  return []
+}
+
+const getColumnMeta = (node: VNode, index: number, parentKey?: string): ColumnMeta => {
+  const key = getColumnKey(node, index, parentKey)
+  const action = toBoolean(getPropValue(node.props, 'action'))
+  const hideInColumnSettings = toBoolean(
+    getPropValue(node.props, 'hideInColumnSettings', 'hide-in-column-settings')
+  )
+  return {
+    key,
+    label: getColumnLabel(node, index, parentKey),
+    action,
+    configurable: !action && !hideInColumnSettings,
+    fixed: normalizeFixed(getPropValue(node.props, 'fixed')),
+    children: getColumnChildren(node)
+      .map((child, childIndex) => getColumnMeta(child, childIndex, key))
+      .filter((item) => item.configurable)
+  }
+}
+
+const flattenSlotNodes = (nodes: Array<VNode | null | undefined>): VNode[] => {
+  return nodes.flatMap((node) => {
+    if (!node) return []
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      return flattenSlotNodes(node.children as VNode[])
     }
+    if (node.type === Comment || node.type === Text) return []
+    return [node]
+  })
+}
+
+const syncColumnSettings = (nodes: VNode[]) => {
+  const metas = nodes
+    .map((node, index) => getColumnMeta(node, index))
+    .filter((item) => item.configurable)
+  const signature = JSON.stringify(metas)
+  if (signature === slotColumnSignature.value) return
+  slotColumnSignature.value = signature
+  nextTick(() => {
+    const defaults = metas.map(createDefaultColumnSetting)
+    columnDefaultSettings.value = defaults
+    columnSettings.value = mergeColumnSettings(defaults, columnSettings.value)
+  })
+}
+
+const createDefaultColumnSetting = (meta: ColumnMeta): ColumnSettingItem => ({
+  key: meta.key,
+  label: meta.label,
+  visible: true,
+  fixed: meta.fixed,
+  children: meta.children.length ? meta.children.map(createDefaultColumnSetting) : undefined
+})
+
+const mergeColumnSettings = (
+  defaults: ColumnSettingItem[],
+  current: ColumnSettingItem[]
+): ColumnSettingItem[] => {
+  const defaultMap = new Map(defaults.map((item) => [item.key, item]))
+  const currentMap = new Map(current.map((item) => [item.key, item]))
+  const existingItems = current
+    .filter((item) => defaultMap.has(item.key))
+    .map((item) => {
+      const defaultItem = defaultMap.get(item.key)!
+      return {
+        ...defaultItem,
+        visible: item.visible,
+        fixed: item.fixed,
+        children: defaultItem.children
+          ? mergeColumnSettings(defaultItem.children, item.children || [])
+          : undefined
+      }
+    })
+  const addedItems = defaults.filter((item) => !currentMap.has(item.key))
+  return [...existingItems, ...addedItems]
+}
+
+const mapColumnSettings = (
+  items: ColumnSettingItem[],
+  mapper: (item: ColumnSettingItem) => ColumnSettingItem
+): ColumnSettingItem[] => {
+  return items.map((item) => {
+    const mappedItem = mapper(item)
+    return {
+      ...mappedItem,
+      children: mappedItem.children ? mapColumnSettings(mappedItem.children, mapper) : undefined
+    }
+  })
+}
+
+const updateColumnVisible = (key: string, visible: boolean) => {
+  columnSettings.value = mapColumnSettings(columnSettings.value, (item) =>
+    item.key === key ? { ...item, visible } : item
+  )
+}
+
+const updateColumnFixed = (key: string, fixed: ColumnFixed) => {
+  columnSettings.value = mapColumnSettings(columnSettings.value, (item) =>
+    item.key === key ? { ...item, fixed } : item
+  )
+}
+
+const sortSettingsByKeys = (items: ColumnSettingItem[], keys: string[]) => {
+  const orderMap = new Map(keys.map((key, index) => [key, index]))
+  return [...items].sort((a, b) => {
+    const orderA = orderMap.get(a.key) ?? Number.MAX_SAFE_INTEGER
+    const orderB = orderMap.get(b.key) ?? Number.MAX_SAFE_INTEGER
+    return orderA - orderB
+  })
+}
+
+const updateColumnOrder = (keys: string[], parentKey?: string) => {
+  if (!parentKey) {
+    columnSettings.value = sortSettingsByKeys(columnSettings.value, keys)
+    return
   }
 
-  emits('update:sortingFields', newFields)
-  props.handleQuery?.()
+  columnSettings.value = mapColumnSettings(columnSettings.value, (item) => {
+    if (item.key !== parentKey) return item
+
+    return {
+      ...item,
+      children: item.children ? sortSettingsByKeys(item.children, keys) : item.children
+    }
+  })
 }
 
-const safeSortingFields = computed(() => props.sortingFields || [])
-const safeData = computed(() => props.data || [])
-const safeLoading = computed(() => props.loading)
+const cloneColumnSettings = (items: ColumnSettingItem[]): ColumnSettingItem[] => {
+  return items.map((item) => ({
+    ...item,
+    children: item.children ? cloneColumnSettings(item.children) : undefined
+  }))
+}
+
+const resetColumnSettings = () => {
+  columnSettings.value = cloneColumnSettings(columnDefaultSettings.value)
+}
+
+const applyColumnSetting = (node: VNode, setting: ColumnSettingItem) => {
+  const clonedNode = cloneVNode(
+    node,
+    {
+      columnKey: setting.key,
+      fixed: setting.fixed || undefined,
+      key: `${setting.key}-${setting.visible}-${setting.fixed || 'none'}`
+    },
+    true
+  )
+
+  const childNodes = getColumnChildren(node)
+  if (!childNodes.length || !setting.children?.length) return clonedNode
+
+  const originalChildren =
+    clonedNode.children && typeof clonedNode.children === 'object' ? clonedNode.children : {}
+
+  return {
+    ...clonedNode,
+    children: {
+      ...(originalChildren as Record<string, unknown>),
+      default: () => renderColumnNodes(childNodes, setting.children || [], setting.key)
+    }
+  } as VNode
+}
+
+const isColumnVisible = (setting: ColumnSettingItem) => {
+  if (setting.visible === false) return false
+  if (!setting.children?.length) return true
+  return setting.children.some(isColumnVisible)
+}
+
+const renderColumnNodes = (nodes: VNode[], settings: ColumnSettingItem[], parentKey?: string) => {
+  const settingMap = new Map(settings.map((item) => [item.key, item]))
+  const orderMap = new Map(settings.map((item, index) => [item.key, index]))
+  const sortedConfigurableNodes = nodes
+    .map((node, index) => ({ node, meta: getColumnMeta(node, index, parentKey) }))
+    .filter(({ meta }) => {
+      const setting = settingMap.get(meta.key)
+      return meta.configurable && setting && isColumnVisible(setting)
+    })
+    .sort((a, b) => {
+      const orderA = orderMap.get(a.meta.key) ?? Number.MAX_SAFE_INTEGER
+      const orderB = orderMap.get(b.meta.key) ?? Number.MAX_SAFE_INTEGER
+      return orderA - orderB
+    })
+
+  return nodes.flatMap((node, index) => {
+    const meta = getColumnMeta(node, index, parentKey)
+
+    if (!meta.configurable) return [node]
+
+    const nextColumn = sortedConfigurableNodes.shift()
+    if (!nextColumn) return []
+
+    const setting = settingMap.get(nextColumn.meta.key)
+    return setting ? [applyColumnSetting(nextColumn.node, setting)] : [nextColumn.node]
+  })
+}
+
+const renderDefaultSlot = () => {
+  const nodes = flattenSlotNodes(slots.default?.() || [])
+  syncColumnSettings(nodes)
+  return renderColumnNodes(nodes, columnSettings.value)
+}
+
+const TableDefaultSlot = () => renderDefaultSlot()
 
 provide(TableContextKey, {
-  onQuery: (payload) => props.handleQuery?.(payload),
-  onSort: (prop, order) => {
-    if (props.sortFn) {
-      props.sortFn(prop, order)
-    } else {
-      handleDefaultSort(prop, order)
-    }
-  },
-  // 关键：传递响应式的 data 和 sortingFields
   data: safeData,
-  sortingFields: safeSortingFields,
-  loading: safeLoading
+  loading: safeLoading,
+  columnAlign: safeColumnAlign,
+  columnMaxWidth: safeColumnMaxWidth,
+  columnSettings,
+  updateColumnVisible,
+  updateColumnFixed,
+  updateColumnOrder,
+  resetColumnSettings
 })
 
 defineExpose({
@@ -99,15 +382,64 @@ defineExpose({
     v-bind="bindProps"
     :data="data"
   >
-    <template v-for="(_, name) in $slots" #[name]="slotData">
+    <template v-for="(_, name) in forwardedSlots" #[name]="slotData">
       <slot :name="name" v-bind="slotData || {}"></slot>
     </template>
+    <TableDefaultSlot />
   </el-table>
 </template>
 
-<style>
+<style lang="scss">
 .zm-table {
-  border-radius: 8px;
+  --zm-table-font-family: inherit;
+  --zm-table-font-size: 12px;
+  --zm-table-text-color: #40546d;
+  --zm-table-strong-text-color: #24364d;
+  --zm-table-row-font-weight: 500;
+  --zm-table-bg: var(--el-bg-color);
+  --zm-table-border-color: #e7edf4;
+  --zm-table-radius: 10px;
+  --zm-table-header-bg: var(--el-fill-color-extra-light, #f7f9fc);
+  --zm-table-header-text-color: var(--el-text-color-secondary, #6b7f99);
+  --zm-table-header-border-color: var(--zm-table-border-color);
+  --zm-table-header-cell-height: 36px;
+  --zm-table-header-group-cell-height: 42px;
+  --zm-table-header-font-size: var(--zm-table-font-size);
+  --zm-table-header-font-weight: 600;
+  --zm-table-header-line-height: 16px;
+  --zm-table-header-icon-btn-size: 18px;
+  --zm-table-header-icon-btn-color: #8aa0b8;
+  --zm-table-header-icon-btn-radius: 4px;
+  --zm-table-header-icon-btn-hover-color: var(--el-color-primary);
+  --zm-table-header-icon-btn-hover-bg: var(--el-color-primary-light-9);
+  --zm-table-header-icon-btn-active-color: var(--zm-table-header-icon-btn-hover-color);
+  --zm-table-header-icon-btn-active-bg: var(--zm-table-header-icon-btn-hover-bg);
+  --zm-table-header-icon-size: 16px;
+  --zm-table-row-border-color: #edf2f7;
+  --zm-table-stripe-bg: #fcfdff;
+  --zm-table-hover-bg: #f5f9ff;
+  --zm-table-current-bg: #eef6ff;
+  --zm-table-cell-height: 38px;
+  --zm-table-cell-padding-x: 12px;
+  --zm-table-cell-first-padding-left: 0px;
+  --zm-table-cell-last-padding-right: 0px;
+  --zm-table-cell-line-height: 18px;
+  --zm-table-empty-min-height: 148px;
+  --zm-table-empty-bg: var(--zm-table-bg);
+  --zm-table-empty-text-font-size: var(--zm-table-font-size);
+  --zm-table-empty-text-color: var(--el-text-color-secondary);
+  --zm-table-scrollbar-size: 7px;
+  --zm-table-scrollbar-thumb-bg: #b8c5d6;
+
+  width: 100%;
+  overflow: hidden;
+  font-family: var(--zm-table-font-family);
+  font-size: var(--zm-table-font-size);
+  color: var(--zm-table-text-color);
+  background: var(--zm-table-bg);
+  border: 1px solid var(--zm-table-border-color);
+  border-radius: var(--zm-table-radius);
+  box-shadow: none;
 
   &::before,
   &::after {
@@ -125,20 +457,59 @@ defineExpose({
     display: none;
   }
 
+  .el-table__inner-wrapper,
+  .el-table__header-wrapper,
+  .el-table__body-wrapper,
+  .el-scrollbar__wrap {
+    background: transparent;
+  }
+
+  .el-table__inner-wrapper {
+    border-radius: var(--zm-table-radius);
+  }
+
   .el-table__cell {
-    height: 52px;
+    height: var(--zm-table-cell-height);
+    padding: 0;
+    color: var(--zm-table-text-color);
+    background: var(--zm-table-bg);
+    border-right: 1px solid var(--zm-table-row-border-color) !important;
+    border-bottom: 1px solid var(--zm-table-row-border-color) !important;
+    transition:
+      background-color 0.16s ease,
+      color 0.16s ease;
 
     &:last-child {
       border-right: none !important;
     }
   }
 
+  .cell {
+    padding-right: var(--zm-table-cell-padding-x);
+    padding-left: var(--zm-table-cell-padding-x);
+    line-height: var(--zm-table-cell-line-height);
+  }
+
   .el-table__header {
-    border-bottom-right-radius: 8px;
-    border-bottom-left-radius: 8px;
+    color: var(--zm-table-header-text-color);
 
     .el-table__cell {
-      background: var(--el-fill-color-light) !important;
+      height: var(--zm-table-header-cell-height);
+      font-size: var(--zm-table-header-font-size);
+      font-weight: var(--zm-table-header-font-weight);
+      color: var(--zm-table-header-text-color);
+      background: var(--zm-table-header-bg) !important;
+      border-right: 1px solid var(--zm-table-header-border-color) !important;
+      border-bottom: 1px solid var(--zm-table-header-border-color) !important;
+
+      .cell {
+        display: flex;
+        min-height: 100%;
+        align-items: center;
+        justify-content: center;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
 
       &:last-child {
         .cell {
@@ -150,41 +521,120 @@ defineExpose({
     tr:first-child {
       .el-table__cell {
         &:first-child {
-          border-bottom-left-radius: 8px;
+          border-top-left-radius: var(--zm-table-radius);
         }
 
         &:last-child {
-          border-bottom-right-radius: 8px;
+          border-top-right-radius: var(--zm-table-radius);
         }
       }
     }
+
+    tr:not(:last-child) {
+      .el-table__cell {
+        height: var(--zm-table-header-group-cell-height);
+        border-bottom-color: var(--zm-table-header-border-color) !important;
+      }
+    }
   }
 
-  .el-table__body-wrapper {
-    .el-table__cell {
-      &:last-child {
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
+  .el-table__body {
+    tr.el-table__row--striped {
+      .el-table__cell {
+        background: var(--zm-table-stripe-bg);
+      }
+    }
+
+    tr:hover,
+    tr.hover-row {
+      .el-table__cell {
+        background: var(--zm-table-hover-bg) !important;
+      }
+    }
+
+    tr.current-row {
+      .el-table__cell {
+        // color: var(--el-color-primary);
+        background: var(--zm-table-current-bg) !important;
       }
+    }
+  }
+
+  .el-table__row {
+    .el-table__cell {
+      font-weight: var(--zm-table-row-font-weight);
+      color: var(--zm-table-strong-text-color);
 
       &:first-child {
-        border-bottom-left-radius: 8px;
-        border-top-left-radius: 8px;
+        // .cell {
+        //   padding-left: var(--zm-table-cell-first-padding-left);
+        // }
+      }
+
+      &:last-child {
+        // .cell {
+        //   padding-right: var(--zm-table-cell-last-padding-right);
+        // }
       }
     }
   }
-}
 
-.zm-table:not(.show-border) {
-  .el-table__cell {
-    border: none !important;
+  .el-table__empty-block {
+    min-height: var(--zm-table-empty-min-height);
+    background: var(--zm-table-empty-bg);
   }
 
+  .el-table__empty-text {
+    font-size: var(--zm-table-empty-text-font-size);
+    color: var(--zm-table-empty-text-color);
+  }
+
+  .el-table__cell.el-table-fixed-column--left,
+  .el-table__cell.el-table-fixed-column--right {
+    background: inherit;
+  }
+
+  .el-table__cell.el-table-fixed-column--left.is-last-column {
+    box-shadow: 6px 0 12px -10px rgb(15 23 42 / 22%);
+  }
+
+  .el-table__cell.el-table-fixed-column--right.is-first-column {
+    box-shadow: -6px 0 12px -10px rgb(15 23 42 / 22%);
+  }
+
+  .el-table__fixed-right-patch {
+    background: var(--zm-table-header-bg);
+    border-bottom: 1px solid var(--zm-table-header-border-color);
+  }
+
+  .el-scrollbar__bar {
+    &.is-horizontal {
+      height: var(--zm-table-scrollbar-size);
+    }
+
+    &.is-vertical {
+      width: var(--zm-table-scrollbar-size);
+    }
+  }
+
+  .el-scrollbar__thumb {
+    background: var(--zm-table-scrollbar-thumb-bg);
+    border-radius: 999px;
+    opacity: 0.55;
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+}
+
+.zm-table:not(.show-border) {
   .el-table__header {
     .el-table__cell {
+      border-right-color: var(--zm-table-header-border-color) !important;
+
       .cell {
-        border-right: var(--el-table-border);
-        border-color: var(--el-table-header-text-color);
+        border-right: none;
       }
 
       &:last-child {
@@ -194,13 +644,5 @@ defineExpose({
       }
     }
   }
-
-  .el-table__row {
-    &:last-child {
-      .el-table__cell {
-        border-bottom: none;
-      }
-    }
-  }
 }
 </style>

src/components/ZmTable/token.ts

@@ -1,23 +1,32 @@
-import type { InjectionKey } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
 
 export type SortOrder = 'asc' | 'desc'
+export type ColumnFixed = false | 'left' | 'right'
+export type ColumnAlign = 'left' | 'center' | 'right'
 
-export interface SortField {
-  field: string
-  order: SortOrder
+export interface SortChangePayload {
+  prop: string
+  order: SortOrder | null
 }
 
-export interface FilterPayload {
-  prop: string
-  value: any
+export interface ColumnSettingItem {
+  key: string
+  label: string
+  visible: boolean
+  fixed: ColumnFixed
+  children?: ColumnSettingItem[]
 }
 
 export interface TableContext<T = any> {
-  onQuery: (payload?: FilterPayload) => void
-  onSort: (prop: string, order: SortOrder | null) => void
   data: Ref<T[]>
-  sortingFields: Ref<SortField[]>
   loading: Ref<boolean>
+  columnAlign: Ref<ColumnAlign>
+  columnMaxWidth: Ref<number>
+  columnSettings: Ref<ColumnSettingItem[]>
+  updateColumnVisible: (key: string, visible: boolean) => void
+  updateColumnFixed: (key: string, fixed: ColumnFixed) => void
+  updateColumnOrder: (keys: string[], parentKey?: string) => void
+  resetColumnSettings: () => void
 }
 
 export const TableContextKey: InjectionKey<TableContext> = Symbol('zm-table')

src/layout/components/Menu/src/components/useRenderMenuItem.tsx

@@ -17,9 +17,15 @@ export const useRenderMenuItem = () =>
           if (currentSource === 'zhly') {
             return (
               !v.meta?.hidden &&
-              ['智慧连油', '连油监控', '监控查询', '视频告警', '分屏管理', '告警配置'].includes(
-                v.meta?.title
-              )
+              [
+                '智慧连油',
+                '连油监控',
+                '监控查询',
+                '视频告警',
+                '分屏管理',
+                '告警配置',
+                '连油看板'
+              ].includes(v.meta?.title)
             )
           } else if (currentSource === 'znzq') {
             return !v.meta?.hidden && ['/device_monitor'].includes(v.path)
@@ -48,9 +54,17 @@ export const useRenderMenuItem = () =>
                 '证书管理',
                 '危险源管理',
                 '环境因素识别',
-                '事故事件上报'
+                '事故事件上报',
+                '隐患排查',
+                'SOC卡分析数据源',
+                'SOC卡汇总',
+                'JSA'
               ].includes(v.meta?.title)
             )
+          } else if (currentSource === 'yyhy') {
+            return (
+              !v.meta?.hidden && ['生产运营双周会', '数据填报', '数据汇总'].includes(v.meta?.title)
+            )
           } else {
             return !v.meta?.hidden
           }

src/layout/components/TagsView/src/helper.ts

@@ -15,6 +15,8 @@ export const filterAffixTags = (routes: AppRouteRecordRaw[], parentPath = '') =>
       route.meta.affix = true
     } else if (currentSource === 'qhse' && tagPath === '/qhse/measure/ledger') {
       route.meta.affix = true
+    } else if (currentSource === 'yyhy' && tagPath === '/operation-meeting/fill') {
+      route.meta.affix = true
     }
     if (meta?.affix) {
       tags.push({ ...route, path: tagPath, fullPath: tagPath } as RouteLocationNormalizedLoaded)

src/permission.ts

@@ -119,6 +119,11 @@ router.beforeEach(async (to, from, next) => {
         next({ path: '/qhse/measure/ledger' })
       }
 
+      if (source && source === 'yyhy') {
+        sessionStorage.setItem('LOGIN_SOURCE', source as string)
+        next({ path: '/operation-meeting/fill' })
+      }
+
       next({ path: '/' })
     } else {
       // 获取所有字典
@@ -182,6 +187,11 @@ router.beforeEach(async (to, from, next) => {
         next({ path: '/qhse/measure/ledger' })
       }
 
+      if (source && source === 'yyhy') {
+        sessionStorage.setItem('LOGIN_SOURCE', source as string)
+        next({ path: '/operation-meeting/fill' })
+      }
+
       next({ path: '/index' })
     } else if (whiteList.indexOf(to.path) !== -1) {
       const code = to.query.code
@@ -208,6 +218,8 @@ router.beforeEach(async (to, from, next) => {
         next(`/login?redirect=/video_center/protocol`)
       } else if (source && source === 'qhse') {
         next(`/login?redirect=/qhse/measure/ledger`)
+      } else if (source && source === 'yyhy') {
+        next(`/login?redirect=/operation-meeting/fill`)
       } else next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
     }
   }

src/styles/var.css

@@ -71,4 +71,5 @@ body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: 'Noto Sans SC';
 }

src/views/pms/iotopeationfill/index1.vue

@@ -59,7 +59,11 @@
                   </span>
                 </el-form-item>
                 <el-form-item
-                  v-if="deviceItem.deviceName === '生产日报' && companyName !== 'ry'"
+                  v-if="
+                    deviceItem.deviceName === '生产日报' &&
+                    companyName !== 'ry' &&
+                    companyName !== 'rh'
+                  "
                   label="井号"
                   class="custom-label1"
                 >
@@ -70,7 +74,7 @@
                 <el-form-item
                   v-else-if="
                     deviceItem.deviceName === '生产日报' &&
-                    companyName === 'ry' &&
+                    (companyName === 'ry' || companyName === 'rh') &&
                     taskOptions.length > 0
                   "
                   label="井号"
@@ -737,7 +741,8 @@ const rules = reactive<FormRules>({
   dailyGasInjection: [
     {
       validator: (_rule, value, callback) => {
-        if (companyName.value !== 'rh') return callback()
+        if (companyName.value !== 'rh' || !taskId.value || noGasTasks.value.includes(taskId.value))
+          return callback()
 
         const dailyInjectGasTime =
           attrList.value.find((item) => item.description === 'dailyInjectGasTime')?.fillContent || 0
@@ -815,6 +820,8 @@ const showComponent = () => {
   }
 }
 
+const noGasTasks = ref<number[]>([])
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -834,13 +841,18 @@ const getList = async () => {
     }
     await getAttrList()
 
-    const daily = list.value.find((item) => item.deviceName === '生产日报') ?? { wellNamePair: {} }
+    const daily = list.value.find((item) => item.deviceName === '生产日报') ?? {
+      wellNamePair: {},
+      noGasTasks: []
+    }
 
     taskOptions.value = Object.keys(daily.wellNamePair ?? {}).map((key) => ({
       label: daily.wellNamePair[key],
       value: Number(key)
     }))
 
+    noGasTasks.value = (daily.noGasTasks ?? []).map(Number)
+
     taskId.value = taskOptions.value[0]?.value
 
     IotOpeationFillApi.getReportDetails(deptId.split(',')[3]).then((res) => {

src/views/pms/iotrddailyreport/index.vue

@@ -332,7 +332,7 @@ onMounted(() => {
               </zm-table-column>
               <zm-table-column
                 prop="reportDetails"
-                label="当日生产动态"
+                label="生产动态"
                 width="320"
                 :show-overflow-tooltip="false"
               >
@@ -343,10 +343,10 @@ onMounted(() => {
                         <el-badge
                           :value="row.reportDetails.length"
                           type="primary"
-                          class="max-w-full"
+                          class="max-w-full translate-y-0.5"
                         >
                           <div
-                            class="w-72 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2"
+                            class="w-72 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer px-2 py-0.5 rounded gap-y-2"
                           >
                             <div class="flex items-center gap-x-2">
                               <div class="flex items-center">

src/views/pms/iotrhdailyreport/index.vue

@@ -54,7 +54,7 @@ const totalWorkKeys: [string, string, string, string, number][] = [
     0
   ],
   ['notReported', '个', '未填报', 'i-material-symbols:cancel-outline-rounded text-rose', 0],
-  ['totalGasInjection', '万方', '累计注气量', 'i-material-symbols:cloud-outline text-sky', 4],
+  ['totalGasInjection', '万方', '累计注气量', 'i-material-symbols:cloud-outline text-sky', 2],
   [
     'totalWaterInjection',
     '万方',

src/views/pms/iotrhdailyreport/summary.vue

@@ -44,7 +44,7 @@ const query = ref<Query>({
 })
 
 const totalWorkKeys: [string, string, string, string, number][] = [
-  ['totalGasInjection', '万方', '累计注气量', 'i-material-symbols:cloud-outline text-sky', 4],
+  ['totalGasInjection', '万方', '累计注气量', 'i-material-symbols:cloud-outline text-sky', 2],
   [
     'totalWaterInjection',
     '万方',

src/views/pms/iotrydailyreport/ry-table.vue

@@ -230,9 +230,13 @@ function handleCurrentChange(val: number) {
                 <div v-if="row.reportDetails && row.reportDetails.length > 0" class="py-2">
                   <el-popover placement="right" trigger="hover" width="320" popper-class="!p-0">
                     <template #reference>
-                      <el-badge :value="row.reportDetails.length" type="primary" class="max-w-full">
+                      <el-badge
+                        :value="row.reportDetails.length"
+                        type="primary"
+                        class="max-w-full translate-y-0.5"
+                      >
                         <div
-                          class="w-72 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2"
+                          class="w-72 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer px-2 py-0.5 rounded gap-y-2"
                         >
                           <div class="flex items-center gap-x-2">
                             <div class="flex items-center">

src/views/pms/iotrydailyreport/ry-xj-table.vue

@@ -261,9 +261,13 @@ function handleCurrentChange(val: number) {
                 <div v-if="row.reportDetails && row.reportDetails.length > 0" class="py-2">
                   <el-popover placement="right" trigger="hover" width="320" popper-class="p-0!">
                     <template #reference>
-                      <el-badge :value="row.reportDetails.length" type="primary" class="max-w-full">
+                      <el-badge
+                        :value="row.reportDetails.length"
+                        type="primary"
+                        class="max-w-full translate-y-0.5"
+                      >
                         <div
-                          class="w-72 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2"
+                          class="w-72 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer px-2 py-0.5 rounded gap-y-2"
                         >
                           <div class="flex items-center gap-x-2">
                             <div class="flex items-center">

src/views/pms/operation-meeting/components/meeting-detail-drawer.vue

@@ -0,0 +1,502 @@
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DetailItem } from '../types'
+import { OperationMeetingApi } from '@/api/pms/meeting'
+import { useDebounceFn, useWindowSize } from '@vueuse/core'
+
+interface Props {
+  visible: boolean
+  detail?: DetailItem
+  type: 'create' | 'edit' | 'view'
+  formType: 'create' | 'edit'
+}
+
+interface ProjectNameSuggestion {
+  value: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  detail: undefined
+})
+
+const emits = defineEmits<{
+  'update:visible': [visible: boolean]
+  save: [item: DetailItem]
+}>()
+
+const { width } = useWindowSize()
+const detailFormRef = ref<FormInstance>()
+const detailForm = ref<DetailItem>(createDetailItem())
+const previousWorkPlanQueryKey = ref('')
+const equipmentUtilizationRateRequired = ref(true)
+
+const detailDrawerSize = computed(() => (width.value <= 768 ? '100%' : '50%'))
+const detailDrawerTitle = computed(() => {
+  if (props.type === 'view') {
+    return '查看会议明细'
+  }
+
+  return props.formType === 'create' ? '新增会议明细' : '编辑会议明细'
+})
+
+const projectNameOptions = ref<string[]>([])
+const projectNameSuggestions = computed<ProjectNameSuggestion[]>(() =>
+  projectNameOptions.value.map((item) => ({ value: item }))
+)
+
+function createDetailItem(): DetailItem {
+  return {
+    raw: {},
+    projectName: '',
+    currentRevenue: undefined,
+    cumulativeRevenue: undefined,
+    currentOnAccount: undefined,
+    cumulativeOnAccount: undefined,
+    currentPayment: undefined,
+    cumulativePayment: undefined,
+    plannedWorkload: '',
+    actualCompletion: '',
+    equipmentUtilizationRate: undefined,
+    keyWorkCompletion: '',
+    problemsAnalysis: '',
+    nextPlannedWorkload: '',
+    priorityTasks: ''
+  }
+}
+
+const cloneDetailItem = (data?: Partial<DetailItem>): DetailItem => ({
+  raw: data?.raw || {},
+  projectName: data?.projectName || '',
+  currentRevenue: data?.currentRevenue,
+  cumulativeRevenue: data?.cumulativeRevenue,
+  currentOnAccount: data?.currentOnAccount,
+  cumulativeOnAccount: data?.cumulativeOnAccount,
+  currentPayment: data?.currentPayment,
+  cumulativePayment: data?.cumulativePayment,
+  plannedWorkload: data?.plannedWorkload || '',
+  actualCompletion: data?.actualCompletion || '',
+  equipmentUtilizationRate: data?.equipmentUtilizationRate,
+  keyWorkCompletion: data?.keyWorkCompletion || '',
+  problemsAnalysis: data?.problemsAnalysis || '',
+  nextPlannedWorkload: data?.nextPlannedWorkload || '',
+  priorityTasks: data?.priorityTasks || ''
+})
+
+const requiredTextRule = (message: string) => [
+  {
+    required: true,
+    whitespace: true,
+    message,
+    trigger: ['blur', 'change']
+  }
+]
+
+const requiredNumberRule = (message: string) => [
+  {
+    required: true,
+    type: 'number' as const,
+    message,
+    trigger: ['blur', 'change']
+  }
+]
+
+const nonNegativeNumberRule = (requiredMessage: string, fieldLabel: string) => [
+  ...requiredNumberRule(requiredMessage),
+  {
+    type: 'number' as const,
+    min: 0,
+    message: `${fieldLabel}不能小于0`,
+    trigger: ['blur', 'change']
+  }
+]
+
+const numberRangeRule = (requiredMessage: string, fieldLabel: string, min: number, max: number) => [
+  ...requiredNumberRule(requiredMessage),
+  {
+    type: 'number' as const,
+    min,
+    max,
+    message: `${fieldLabel}需在${min}到${max}之间`,
+    trigger: ['blur', 'change']
+  }
+]
+
+const optionalNumberRangeRule = (fieldLabel: string, min: number, max: number) => [
+  {
+    type: 'number' as const,
+    min,
+    max,
+    message: `${fieldLabel}需在${min}到${max}之间`,
+    trigger: ['blur', 'change']
+  }
+]
+
+const getEquipmentUtilizationRateRules = () =>
+  equipmentUtilizationRateRequired.value
+    ? numberRangeRule('请输入设备利用率', '设备利用率', 0, 100)
+    : optionalNumberRangeRule('设备利用率', 0, 100)
+
+const detailRules = reactive<FormRules>({
+  projectName: requiredTextRule('请选择或者输入项目名称'),
+  currentRevenue: nonNegativeNumberRule('请输入收入-本期', '收入-本期'),
+  cumulativeRevenue: nonNegativeNumberRule('请输入收入-累计', '收入-累计'),
+  currentOnAccount: nonNegativeNumberRule('请输入挂帐-本期', '挂帐-本期'),
+  cumulativeOnAccount: nonNegativeNumberRule('请输入挂帐-累计', '挂帐-累计'),
+  currentPayment: nonNegativeNumberRule('请输入回款-本期', '回款-本期'),
+  cumulativePayment: nonNegativeNumberRule('请输入回款-累计', '回款-累计'),
+  plannedWorkload: requiredTextRule('请输入计划工作量'),
+  actualCompletion: requiredTextRule('请输入实际完成'),
+  equipmentUtilizationRate: getEquipmentUtilizationRateRules(),
+  keyWorkCompletion: requiredTextRule('请输入重点工作及完成情况'),
+  problemsAnalysis: requiredTextRule('请输入存在问题及分析'),
+  nextPlannedWorkload: requiredTextRule('请输入下期计划工作量'),
+  priorityTasks: requiredTextRule('请输入重点工作事项')
+})
+
+const updateEquipmentUtilizationRateRule = (required: boolean) => {
+  equipmentUtilizationRateRequired.value = required
+  detailRules.equipmentUtilizationRate = getEquipmentUtilizationRateRules()
+  nextTick(() => detailFormRef.value?.clearValidate('equipmentUtilizationRate'))
+}
+
+const loadEquipmentUtilizationRateRule = async () => {
+  updateEquipmentUtilizationRateRule(true)
+
+  try {
+    const data = await OperationMeetingApi.getMandatoryOrNot()
+    updateEquipmentUtilizationRateRule(data?.mandatory !== false)
+  } catch {
+    updateEquipmentUtilizationRateRule(true)
+  }
+}
+
+const queryProjectNameSearch = (
+  queryString: string,
+  cb: (results: ProjectNameSuggestion[]) => void
+) => {
+  const keyword = queryString.trim().toLowerCase()
+
+  if (!keyword) {
+    cb(projectNameSuggestions.value)
+    return
+  }
+
+  cb(projectNameSuggestions.value.filter((item) => item.value.toLowerCase().includes(keyword)))
+}
+
+const getDetailRawQueryValue = (key: 'id' | 'meetingId') => {
+  const value = detailForm.value.raw?.[key]
+
+  if (value === undefined || value === null) {
+    return ''
+  }
+
+  return typeof value === 'string' || typeof value === 'number' ? value : String(value)
+}
+
+const updatePlannedWorkloadFromPreviousPlan = (data?: Record<string, unknown>) => {
+  detailForm.value.plannedWorkload = String(data?.nextPlannedWorkload || '')
+}
+
+const loadPreviousWorkPlan = async () => {
+  const projectName = detailForm.value.projectName.trim()
+
+  if (!projectName) {
+    previousWorkPlanQueryKey.value = ''
+    return
+  }
+
+  const params = {
+    projectName,
+    id: getDetailRawQueryValue('id'),
+    meetingId: getDetailRawQueryValue('meetingId')
+  }
+  const queryKey = JSON.stringify(params)
+
+  if (previousWorkPlanQueryKey.value === queryKey) return
+
+  previousWorkPlanQueryKey.value = queryKey
+
+  try {
+    const data = await OperationMeetingApi.getPreviousWorkPlan(params)
+    if (detailForm.value.projectName.trim() !== projectName) return
+    updatePlannedWorkloadFromPreviousPlan(data)
+  } catch {
+    previousWorkPlanQueryKey.value = ''
+  }
+}
+
+const handleProjectNameComplete = useDebounceFn(loadPreviousWorkPlan, 300)
+
+const handleProjectNameSelect = (item: ProjectNameSuggestion) => {
+  detailForm.value.projectName = item.value
+  void handleProjectNameComplete()
+}
+
+const handleVisibleChange = (visible: boolean) => {
+  emits('update:visible', visible)
+
+  if (!visible) {
+    detailForm.value = createDetailItem()
+    previousWorkPlanQueryKey.value = ''
+    nextTick(() => detailFormRef.value?.clearValidate())
+  }
+}
+
+const saveDetailItem = async () => {
+  if (props.type === 'view' || !detailFormRef.value) return
+
+  const valid = await detailFormRef.value.validate().catch(() => false)
+
+  if (!valid) return
+
+  emits('save', cloneDetailItem(detailForm.value))
+}
+
+async function loadProjectNameOptions() {
+  try {
+    const data = await OperationMeetingApi.getProjectNameOptions()
+    projectNameOptions.value = Array.isArray(data) ? data.filter(Boolean).map(String) : []
+  } catch {
+    projectNameOptions.value = []
+  }
+}
+
+watch(
+  () => [props.visible, props.detail] as const,
+  ([visible]) => {
+    if (!visible) return
+
+    detailForm.value = cloneDetailItem(props.detail)
+    previousWorkPlanQueryKey.value = ''
+    nextTick(() => detailFormRef.value?.clearValidate())
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  loadProjectNameOptions()
+  loadEquipmentUtilizationRateRule()
+})
+</script>
+
+<template>
+  <el-drawer
+    :model-value="visible"
+    @update:model-value="handleVisibleChange"
+    :append-to-body="true"
+    :size="detailDrawerSize"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    header-class="mb-0! p-4!"
+    body-class="bg-gray-100"
+    footer-class="p-4!"
+  >
+    <template #header>
+      <div class="flex items-center">
+        <span class="font-bold text-xl">{{ detailDrawerTitle }}</span>
+      </div>
+    </template>
+
+    <el-form
+      ref="detailFormRef"
+      label-position="top"
+      size="default"
+      :model="detailForm"
+      :rules="detailRules"
+      :disabled="type === 'view'"
+      scroll-to-error
+      require-asterisk-position="right"
+    >
+      <section class="detail-section">
+        <div class="detail-section__grid detail-section__grid--single">
+          <el-form-item label="项目名称" prop="projectName">
+            <el-autocomplete
+              v-model="detailForm.projectName"
+              class="w-full!"
+              placeholder="请选择或输入项目名称"
+              clearable
+              :fetch-suggestions="queryProjectNameSearch"
+              :trigger-on-focus="true"
+              @change="handleProjectNameComplete"
+              @select="handleProjectNameSelect"
+            />
+          </el-form-item>
+        </div>
+      </section>
+
+      <section class="detail-section">
+        <h4 class="detail-section__title">经营情况(万元)</h4>
+        <div class="detail-section__grid">
+          <el-form-item label="收入-本期" prop="currentRevenue">
+            <el-input-number
+              v-model="detailForm.currentRevenue"
+              class="w-full!"
+              :controls="false"
+              :precision="2"
+            />
+          </el-form-item>
+          <el-form-item label="收入-累计" prop="cumulativeRevenue">
+            <el-input-number
+              v-model="detailForm.cumulativeRevenue"
+              class="w-full!"
+              :controls="false"
+              :precision="2"
+            />
+          </el-form-item>
+          <el-form-item label="挂帐-本期" prop="currentOnAccount">
+            <el-input-number
+              v-model="detailForm.currentOnAccount"
+              class="w-full!"
+              :controls="false"
+              :precision="2"
+            />
+          </el-form-item>
+          <el-form-item label="挂帐-累计" prop="cumulativeOnAccount">
+            <el-input-number
+              v-model="detailForm.cumulativeOnAccount"
+              class="w-full!"
+              :controls="false"
+              :precision="2"
+            />
+          </el-form-item>
+          <el-form-item label="回款-本期" prop="currentPayment">
+            <el-input-number
+              v-model="detailForm.currentPayment"
+              class="w-full!"
+              :controls="false"
+              :precision="2"
+            />
+          </el-form-item>
+          <el-form-item label="回款-累计" prop="cumulativePayment">
+            <el-input-number
+              v-model="detailForm.cumulativePayment"
+              class="w-full!"
+              :controls="false"
+              :precision="2"
+            />
+          </el-form-item>
+        </div>
+      </section>
+
+      <section class="detail-section">
+        <h4 class="detail-section__title">本期生产运行情况</h4>
+        <div class="detail-section__grid">
+          <el-form-item label="计划工作量" prop="plannedWorkload">
+            <el-input
+              v-model="detailForm.plannedWorkload"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入计划工作量"
+            />
+          </el-form-item>
+          <el-form-item label="实际完成" prop="actualCompletion">
+            <el-input
+              v-model="detailForm.actualCompletion"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入实际完成"
+            />
+          </el-form-item>
+          <el-form-item label="设备利用率(%)" prop="equipmentUtilizationRate">
+            <el-input-number
+              v-model="detailForm.equipmentUtilizationRate"
+              class="w-full!"
+              :controls="false"
+              :precision="2"
+            />
+          </el-form-item>
+        </div>
+      </section>
+
+      <section class="detail-section">
+        <h4 class="detail-section__title">生产管理情况及重点工作</h4>
+        <div class="detail-section__grid">
+          <el-form-item label="重点工作及完成情况" prop="keyWorkCompletion">
+            <el-input
+              v-model="detailForm.keyWorkCompletion"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入重点工作及完成情况"
+            />
+          </el-form-item>
+          <el-form-item label="存在问题及分析" prop="problemsAnalysis">
+            <el-input
+              v-model="detailForm.problemsAnalysis"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入存在问题及分析"
+            />
+          </el-form-item>
+        </div>
+      </section>
+
+      <section class="detail-section">
+        <h4 class="detail-section__title">下期工作计划</h4>
+        <div class="detail-section__grid">
+          <el-form-item label="计划工作量" prop="nextPlannedWorkload">
+            <el-input
+              v-model="detailForm.nextPlannedWorkload"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入下期计划工作量"
+            />
+          </el-form-item>
+          <el-form-item label="重点工作事项" prop="priorityTasks">
+            <el-input
+              v-model="detailForm.priorityTasks"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入重点工作事项"
+            />
+          </el-form-item>
+        </div>
+      </section>
+    </el-form>
+
+    <template #footer>
+      <el-button size="default" @click="handleVisibleChange(false)">取消</el-button>
+      <el-button size="default" v-if="type !== 'view'" type="primary" @click="saveDetailItem">
+        保存
+      </el-button>
+    </template>
+  </el-drawer>
+</template>
+
+<style scoped lang="scss">
+.detail-section {
+  padding: 20px;
+  margin-bottom: 16px;
+  background: #fff;
+  border: 1px solid rgb(229 231 235 / 90%);
+  border-radius: 12px;
+}
+
+.detail-section__title {
+  margin: 0 0 16px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.detail-section__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px 24px;
+
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+  }
+}
+
+.detail-section__grid--single {
+  grid-template-columns: 1fr;
+}
+
+@media (width <= 960px) {
+  .detail-section__grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/views/pms/operation-meeting/components/operation-meeting-content.vue

@@ -0,0 +1,786 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import type { DeptOption, DetailItem, OperationMeeting } from '../types'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+
+interface OperationMeetingForm
+  extends Omit<Partial<OperationMeeting>, 'meetingDate' | 'meetingSeries'> {
+  meetingDate?: number | string | Date
+  meetingSeries?: number
+}
+
+interface Props {
+  meeting: OperationMeetingForm
+  details: DetailItem[]
+  type: 'create' | 'edit' | 'view'
+  deptOptions?: DeptOption[]
+  loading?: boolean
+  showMeetingMeta?: boolean
+}
+
+interface DetailCardField {
+  label: string
+  prop: keyof DetailItem
+  unit?: string
+  numeric?: boolean
+}
+
+interface MeetingTableCellStyleProps {
+  column: {
+    property?: string
+  }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  deptOptions: () => [],
+  loading: false,
+  showMeetingMeta: true
+})
+
+const emits = defineEmits<{
+  'update:meeting': [meeting: OperationMeetingForm]
+  'add-detail': []
+  'edit-detail': [row: DetailItem, index: number]
+  'delete-detail': [index: number]
+}>()
+
+const { ZmTable, ZmTableColumn } = useTableComponents<DetailItem>()
+
+const detailSummaryFields = [
+  'currentRevenue',
+  'cumulativeRevenue',
+  'currentOnAccount',
+  'cumulativeOnAccount',
+  'currentPayment',
+  'cumulativePayment'
+] as const
+
+type DetailSummaryField = (typeof detailSummaryFields)[number]
+
+const detailSummaryLabelMap: Record<DetailSummaryField, string> = {
+  currentRevenue: '收入-本期',
+  cumulativeRevenue: '收入-累计',
+  currentOnAccount: '挂帐-本期',
+  cumulativeOnAccount: '挂帐-累计',
+  currentPayment: '回款-本期',
+  cumulativePayment: '回款-累计'
+}
+
+const detailSummaryToneMap: Record<DetailSummaryField, 'revenue' | 'account' | 'payment'> = {
+  currentRevenue: 'revenue',
+  cumulativeRevenue: 'revenue',
+  currentOnAccount: 'account',
+  cumulativeOnAccount: 'account',
+  currentPayment: 'payment',
+  cumulativePayment: 'payment'
+}
+
+const detailSummaryIconMap: Record<DetailSummaryField, string> = {
+  currentRevenue: 'i-lucide:badge-japanese-yen',
+  cumulativeRevenue: 'i-lucide:badge-japanese-yen',
+  currentOnAccount: 'i-lucide:badge-alert',
+  cumulativeOnAccount: 'i-lucide:badge-alert',
+  currentPayment: 'i-lucide:badge-check',
+  cumulativePayment: 'i-lucide:badge-check'
+}
+
+const detailCardGroups: { title: string; fields: DetailCardField[] }[] = [
+  {
+    title: '经营情况',
+    fields: [
+      { label: '收入-本期', prop: 'currentRevenue', unit: '万元', numeric: true },
+      { label: '收入-累计', prop: 'cumulativeRevenue', unit: '万元', numeric: true },
+      { label: '挂帐-本期', prop: 'currentOnAccount', unit: '万元', numeric: true },
+      { label: '挂帐-累计', prop: 'cumulativeOnAccount', unit: '万元', numeric: true },
+      { label: '回款-本期', prop: 'currentPayment', unit: '万元', numeric: true },
+      { label: '回款-累计', prop: 'cumulativePayment', unit: '万元', numeric: true }
+    ]
+  },
+  {
+    title: '本期生产运行情况',
+    fields: [
+      { label: '计划工作量', prop: 'plannedWorkload' },
+      { label: '实际完成', prop: 'actualCompletion' },
+      { label: '设备利用率', prop: 'equipmentUtilizationRate', unit: '%', numeric: true }
+    ]
+  },
+  {
+    title: '生产管理情况及重点工作',
+    fields: [
+      { label: '重点工作及完成情况', prop: 'keyWorkCompletion' },
+      { label: '存在问题及分析', prop: 'problemsAnalysis' }
+    ]
+  },
+  {
+    title: '下期工作计划',
+    fields: [
+      { label: '计划工作量', prop: 'nextPlannedWorkload' },
+      { label: '重点工作事项', prop: 'priorityTasks' }
+    ]
+  }
+]
+
+const meetingTableBlueColumns = new Set<keyof DetailItem>([
+  'projectName',
+  'actualCompletion',
+  'keyWorkCompletion',
+  'problemsAnalysis'
+])
+
+const companyDisplayName = computed(() => {
+  if (props.meeting.companyName) {
+    return props.meeting.companyName
+  }
+
+  if (props.meeting.deptId) {
+    return props.deptOptions.find((item) => item.value === props.meeting.deptId)?.label || ''
+  }
+
+  return ''
+})
+
+const meetingSeriesModel = computed({
+  get: () => props.meeting.meetingSeries,
+  set: (meetingSeries) => emits('update:meeting', { ...props.meeting, meetingSeries })
+})
+
+const meetingDateModel = computed({
+  get: () => props.meeting.meetingDate,
+  set: (meetingDate) => emits('update:meeting', { ...props.meeting, meetingDate })
+})
+
+const supportModel = computed({
+  get: () => props.meeting.support,
+  set: (support) => emits('update:meeting', { ...props.meeting, support })
+})
+
+const formatSummaryNumber = (value: number) =>
+  value.toLocaleString('zh-CN', {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: Number.isInteger(value) ? 0 : 2
+  })
+
+const getDetailSummaryTotal = (field: DetailSummaryField) =>
+  props.details.reduce((sum, item) => sum + Number(item[field] || 0), 0)
+
+const detailSummaryCards = computed(() =>
+  detailSummaryFields.map((field) => ({
+    label: detailSummaryLabelMap[field],
+    value: formatSummaryNumber(getDetailSummaryTotal(field)),
+    tone: detailSummaryToneMap[field],
+    icon: detailSummaryIconMap[field]
+  }))
+)
+
+const showMeetingMetaFields = computed(() => props.type !== 'view' || props.showMeetingMeta)
+
+const formatDetailCardValue = (item: DetailItem, field: DetailCardField) => {
+  const value = item[field.prop]
+
+  if (value === undefined || value === null || value === '') {
+    return '-'
+  }
+
+  if (!field.numeric) {
+    return String(value)
+  }
+
+  const numericValue = Number(value)
+
+  if (Number.isNaN(numericValue)) {
+    return '-'
+  }
+
+  return `${formatSummaryNumber(numericValue)}${field.unit || ''}`
+}
+
+const getMeetingTableCellStyle: any = ({
+  column
+}: MeetingTableCellStyleProps): CSSProperties | undefined => {
+  const property = column.property as keyof DetailItem | undefined
+
+  if (property && meetingTableBlueColumns.has(property)) {
+    return { color: '#1b71f6' }
+  }
+
+  return undefined
+}
+
+const visible = ref(false)
+</script>
+
+<template>
+  <section class="p-2 bg-white border-solid border-1 border-gray-200/90 rounded-xl">
+    <div class="meeting-section__top">
+      <h2 class="meeting-section__title">生产运营双周例会汇报</h2>
+
+      <div
+        :class="[
+          'meeting-section__grid',
+          { 'meeting-section__grid--company-only': !showMeetingMetaFields }
+        ]"
+      >
+        <el-form-item
+          v-if="showMeetingMetaFields"
+          label="会议期次"
+          label-position="left"
+          prop="meetingSeries"
+          class="mb-0! min-w-0"
+        >
+          <el-input-number
+            v-model="meetingSeriesModel"
+            class="w-full!"
+            placeholder="请输入会议期次"
+            :disabled="type === 'view'"
+            :controls="false"
+            :min="1"
+            :step="1"
+            :precision="0"
+          />
+        </el-form-item>
+
+        <el-form-item label="所属公司" label-position="left" class="mb-0! min-w-0">
+          <el-input
+            :model-value="companyDisplayName"
+            class="w-full!"
+            placeholder="新建保存后系统自动填充"
+            disabled
+          />
+          <div v-if="type === 'create'" class="absolute text-xs text-gray top-8">
+            新建保存后由系统自动填充。
+          </div>
+        </el-form-item>
+
+        <el-form-item
+          v-if="showMeetingMetaFields"
+          label="会议日期"
+          label-position="left"
+          prop="meetingDate"
+          class="mb-0! min-w-0"
+        >
+          <el-date-picker
+            v-model="meetingDateModel"
+            type="date"
+            placeholder="请选择会议日期"
+            :disabled="type === 'view'"
+            class="w-full!"
+          />
+        </el-form-item>
+      </div>
+    </div>
+
+    <section class="meeting-summary-strip">
+      <div class="meeting-summary-strip__title">
+        <span>公司整体</span>
+        <small>经营数据汇总</small>
+      </div>
+      <div class="meeting-summary-strip__grid">
+        <div
+          v-for="item in detailSummaryCards"
+          :key="item.label"
+          :class="['meeting-summary-strip__item', `meeting-summary-strip__item--${item.tone}`]"
+        >
+          <div :class="item.icon + ' size-5 icon'"></div>
+          <span>{{ item.label }}</span>
+          <strong>{{ item.value }}<em>万元</em></strong>
+        </div>
+      </div>
+    </section>
+
+    <section class="meeting-detail-panel">
+      <el-button class="mb-2" size="default" link @click="() => (visible = !visible)">
+        <div class="flex items-center gap-1">
+          <div
+            :class="[
+              'i-lucide:chevron-right size-4 meeting-detail-toggle__icon',
+              { 'meeting-detail-toggle__icon--expanded': visible }
+            ]"
+          ></div>
+          <!-- {{ visible ? '收起' : '展开' }} -->
+        </div>
+      </el-button>
+      <div v-show="visible" class="flex items-center justify-between gap-4 mb-4">
+        <h3 class="text-lg font-bold m-0">会议明细</h3>
+        <el-button v-if="type !== 'view'" type="primary" @click="emits('add-detail')">
+          <Icon icon="ep:plus" class="mr-5px" />
+          新增一行
+        </el-button>
+      </div>
+      <div class="meeting-detail-table-view">
+        <ZmTable
+          class="meeting-table"
+          :data="details"
+          :loading="loading"
+          :max-height="660"
+          align="left"
+          :show-overflow-tooltip="false"
+          :cell-style="getMeetingTableCellStyle"
+        >
+          <zm-table-column min-width="8%" align="center" label="项目名称" prop="projectName" />
+          <zm-table-column min-width="27%" label="本期生产运行情况">
+            <zm-table-column min-width="10%" label="计划工作量" prop="plannedWorkload" />
+            <zm-table-column min-width="10%" label="实际完成" prop="actualCompletion" />
+            <zm-table-column
+              min-width="7%"
+              label="设备利用率"
+              prop="equipmentUtilizationRate"
+              :formatter="(row) => `${row.equipmentUtilizationRate}%`"
+            />
+          </zm-table-column>
+          <zm-table-column min-width="31%" label="生产管理情况及重点工作	">
+            <zm-table-column min-width="19%" label="重点工作及完成情况" prop="keyWorkCompletion" />
+            <zm-table-column min-width="12%" label="存在问题及分析" prop="problemsAnalysis" />
+          </zm-table-column>
+          <zm-table-column min-width="29%" label="下期工作计划		">
+            <zm-table-column min-width="10%" label="计划工作量" prop="nextPlannedWorkload" />
+            <zm-table-column min-width="19%" label="重点工作事项" prop="priorityTasks" />
+          </zm-table-column>
+          <zm-table-column label="操作" min-width="5%" align="center" fixed="right">
+            <template #default="{ row, $index }">
+              <div class="meeting-table__actions">
+                <el-button
+                  link
+                  size="default"
+                  type="primary"
+                  @click="emits('edit-detail', row, $index)"
+                >
+                  {{ type === 'view' ? '查看' : '编辑' }}
+                </el-button>
+                <el-button
+                  v-if="type !== 'view'"
+                  link
+                  size="default"
+                  type="danger"
+                  @click="emits('delete-detail', $index)"
+                >
+                  删除
+                </el-button>
+              </div>
+            </template>
+          </zm-table-column>
+        </ZmTable>
+      </div>
+
+      <div v-loading="loading" class="meeting-detail-card-view">
+        <template v-if="details.length">
+          <article v-for="(item, index) in details" :key="index" class="meeting-detail-card">
+            <div class="meeting-detail-card__header">
+              <div class="meeting-detail-card__title">
+                <span>项目名称</span>
+                <strong>{{ item.projectName || '-' }}</strong>
+              </div>
+              <el-tag size="small" effect="plain">第 {{ index + 1 }} 项</el-tag>
+            </div>
+
+            <section
+              v-for="group in detailCardGroups"
+              :key="group.title"
+              class="meeting-detail-card__group"
+            >
+              <h4>{{ group.title }}</h4>
+              <div class="meeting-detail-card__fields">
+                <div
+                  v-for="field in group.fields"
+                  :key="field.prop"
+                  class="meeting-detail-card__field"
+                >
+                  <span>{{ field.label }}</span>
+                  <strong>{{ formatDetailCardValue(item, field) }}</strong>
+                </div>
+              </div>
+            </section>
+
+            <div class="meeting-detail-card__actions">
+              <el-button
+                link
+                size="small"
+                type="primary"
+                @click="emits('edit-detail', item, index)"
+              >
+                {{ type === 'view' ? '查看' : '编辑' }}
+              </el-button>
+              <el-button
+                v-if="type !== 'view'"
+                link
+                size="small"
+                type="danger"
+                @click="emits('delete-detail', index)"
+              >
+                删除
+              </el-button>
+            </div>
+          </article>
+        </template>
+        <el-empty v-else description="暂无会议明细" :image-size="80" />
+      </div>
+    </section>
+
+    <section class="meeting-support-panel">
+      <el-form-item
+        label="需集团协调支持的事项"
+        prop="support"
+        class="meeting-form-item mb-0! min-w-0"
+      >
+        <el-input
+          v-model="supportModel"
+          type="textarea"
+          :rows="4"
+          :disabled="type === 'view'"
+          placeholder="请输入需集团协调支持的事项"
+        />
+      </el-form-item>
+    </section>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.meeting-section__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px 20px;
+}
+
+.meeting-section__grid--company-only {
+  grid-template-columns: minmax(280px, 420px);
+  justify-content: start;
+}
+
+.meeting-section__top {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 240px;
+  align-items: start;
+  margin-bottom: 18px;
+}
+
+.meeting-section__title {
+  padding-top: 4px;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 32px;
+  color: #1f2937;
+  white-space: nowrap;
+  transform: translateY(-4px);
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 800;
+  color: #1f2937;
+}
+
+.meeting-summary-strip {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  gap: 8px;
+  align-items: stretch;
+  padding: 6px 8px;
+  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
+  border: 1px solid #dbeafe;
+  border-radius: 8px;
+}
+
+.meeting-summary-strip__title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-right: 8px;
+  border-right: 1px solid #dbeafe;
+
+  span {
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 20px;
+    color: #1f2937;
+  }
+
+  small {
+    margin-top: 0;
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 16px;
+    color: #64748b;
+  }
+}
+
+.meeting-summary-strip__grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 4px;
+}
+
+.meeting-summary-strip__item {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 4px 6px;
+  background: rgb(255 255 255 / 72%);
+  border: 1px solid rgb(219 234 254 / 70%);
+  border-radius: 7px;
+
+  span {
+    display: block;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 16px;
+    color: #1f2937;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  strong {
+    display: flex;
+    min-width: 0;
+    flex-shrink: 0;
+    align-items: baseline;
+    gap: 3px;
+    margin-top: 0;
+    overflow: hidden;
+    font-size: 15px;
+    font-weight: 800;
+    line-height: 18px;
+    color: #1b71f6;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  em {
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 800;
+    color: #64748b;
+  }
+}
+
+.meeting-summary-strip__item--revenue strong,
+.meeting-summary-strip__item--revenue .icon {
+  color: #1b71f6;
+}
+
+.meeting-summary-strip__item--revenue {
+  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
+  border-color: #bfdbfe;
+}
+
+.meeting-summary-strip__item--account strong,
+.meeting-summary-strip__item--account .icon {
+  color: #f59e0b;
+}
+
+.meeting-summary-strip__item--account {
+  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
+  border-color: #fde68a;
+}
+
+.meeting-summary-strip__item--payment strong,
+.meeting-summary-strip__item--payment .icon {
+  color: #10b981;
+}
+
+.meeting-summary-strip__item--payment {
+  background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%);
+  border-color: #bbf7d0;
+}
+
+.meeting-detail-panel {
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.meeting-detail-toggle__icon {
+  transition: transform var(--el-transition-duration) ease;
+}
+
+.meeting-detail-toggle__icon--expanded {
+  transform: rotate(90deg);
+}
+
+.meeting-table {
+  --zm-table-font-size: 18px;
+  --zm-table-header-font-size: 18px;
+  --zm-table-header-font-weight: 800;
+  --zm-table-row-font-weight: 800;
+  --zm-table-header-text-color: #333;
+  --zm-table-border-color: #cbd5e1;
+  --zm-table-header-border-color: #c2ccda;
+  --zm-table-row-border-color: #d4dce8;
+
+  :deep(.header-wrapper) {
+    height: 20px;
+    justify-content: center !important;
+    text-align: center;
+
+    .truncate {
+      width: 100%;
+      height: 20px;
+      text-align: center;
+    }
+  }
+}
+
+.meeting-table__actions {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  :deep(.el-button) {
+    margin-left: 0;
+  }
+}
+
+.meeting-support-panel {
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.meeting-detail-table-view {
+  display: block;
+}
+
+.meeting-detail-card-view {
+  display: none;
+}
+
+.meeting-detail-card {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 12px;
+  padding-bottom: 4px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+}
+
+.meeting-detail-card__header,
+.meeting-detail-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.meeting-detail-card__title {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.meeting-detail-card__title span,
+.meeting-detail-card__field span {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--el-text-color-secondary);
+}
+
+.meeting-detail-card__title strong {
+  overflow: hidden;
+  font-size: 16px;
+  line-height: 1.35;
+  color: var(--el-text-color-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meeting-detail-card__group {
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.meeting-detail-card__group h4 {
+  margin: 0 0 10px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+}
+
+.meeting-detail-card__fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+}
+
+.meeting-detail-card__field {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.meeting-detail-card__field strong {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--el-text-color-primary);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.meeting-detail-card__actions {
+  justify-content: flex-end;
+  padding-top: 2px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+@media (width <= 960px) {
+  .meeting-section__top {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .meeting-section__title {
+    padding-top: 0;
+    line-height: 24px;
+    transform: translateY(0);
+  }
+
+  .meeting-section__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .meeting-summary-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .meeting-summary-strip__title {
+    padding-right: 0;
+    padding-bottom: 12px;
+    border-right: 0;
+    border-bottom: 1px solid #dbeafe;
+  }
+
+  .meeting-summary-strip__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (width <= 768px) {
+  .meeting-detail-table-view {
+    display: none;
+  }
+
+  .meeting-detail-card-view {
+    display: flex;
+    min-height: 160px;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .meeting-summary-strip__grid,
+  .meeting-detail-card__fields {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/views/pms/operation-meeting/index.vue

@@ -0,0 +1,441 @@
+<script lang="ts" setup>
+import { OperationMeetingApi } from '@/api/pms/meeting'
+import type { DeptOption, OperationMeetingListItem } from './types'
+import { rangeShortcuts } from '@/utils/formatTime'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+import MeetingForm from './meeting-form.vue'
+import dayjs from 'dayjs'
+
+interface Query {
+  pageNo: number
+  pageSize: number
+  deptId: number | undefined
+  meetingDate: string[]
+}
+
+const createInitialQuery = (): Query => ({
+  pageNo: 1,
+  pageSize: 10,
+  deptId: undefined,
+  meetingDate: []
+})
+
+const query = ref<Query>(createInitialQuery())
+const loading = ref(false)
+const total = ref(0)
+const list = ref<OperationMeetingListItem[]>([])
+const visible = ref(false)
+const type = ref('create' as 'create' | 'edit' | 'view')
+const currentId = ref<number>()
+
+const { ZmTable, ZmTableColumn } = useTableComponents<OperationMeetingListItem>()
+
+const deptOptions = ref<DeptOption[]>([])
+
+async function getDeptOptions() {
+  const deptList = await OperationMeetingApi.getDeptList()
+  deptOptions.value = deptList
+    .filter((item) => {
+      return item.type === '1'
+    })
+    .map((item) => ({
+      label: item.name,
+      value: item.id as number
+    }))
+}
+
+async function getList() {
+  loading.value = true
+  try {
+    const res = await OperationMeetingApi.getOperationMeetingPage(query.value)
+    list.value = res.list || []
+    total.value = res.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleQuery() {
+  query.value.pageNo = 1
+  getList()
+}
+
+function handleSizeChange(val: number) {
+  query.value.pageSize = val
+  handleQuery()
+}
+
+function handleCurrentChange(val: number) {
+  query.value.pageNo = val
+  handleQuery()
+}
+
+function resetQuery() {
+  query.value = createInitialQuery()
+  getList()
+}
+
+onMounted(() => {
+  getDeptOptions()
+  getList()
+})
+
+function handleCreate() {
+  type.value = 'create'
+  currentId.value = undefined
+  visible.value = true
+}
+
+function handleEdit(id: number) {
+  type.value = 'edit'
+  currentId.value = id
+  visible.value = true
+}
+
+function handleView(id: number) {
+  type.value = 'view'
+  currentId.value = id
+  visible.value = true
+}
+
+function formatMeetingDate(row: Pick<OperationMeetingListItem, 'meetingDate'>) {
+  return row.meetingDate ? dayjs(row.meetingDate).format('YYYY-MM-DD') : '-'
+}
+</script>
+<template>
+  <div
+    class="operation-meeting-page min-w-0 overflow-x-hidden grid grid-rows-[auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
+  >
+    <el-form
+      size="default"
+      label-position="left"
+      class="operation-meeting-query min-w-0 overflow-hidden rounded-lg bg-white p-4 shadow dark:bg-[#1d1e1f]"
+    >
+      <div class="min-w-0 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div
+          class="operation-meeting-query__fields min-w-0 flex-1 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-[repeat(2,minmax(0,320px))]"
+        >
+          <el-form-item label="所属公司" class="operation-meeting-query__item mb-0! min-w-0">
+            <el-select
+              v-model="query.deptId"
+              class="w-full!"
+              placeholder="请选择所属公司"
+              :options="deptOptions"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="会议日期" class="operation-meeting-query__item mb-0! min-w-0">
+            <el-date-picker
+              v-model="query.meetingDate"
+              type="daterange"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              :shortcuts="rangeShortcuts"
+              class="w-full!"
+            />
+          </el-form-item>
+        </div>
+
+        <div
+          class="operation-meeting-query__actions min-w-0 flex flex-col gap-3 sm:flex-row lg:shrink-0"
+        >
+          <el-button type="primary" class="!ml-0 w-full sm:w-auto" @click="handleQuery">
+            搜索
+          </el-button>
+          <el-button class="!ml-0 w-full sm:w-auto" @click="resetQuery">重置</el-button>
+          <el-button type="primary" plain class="!ml-0 w-full sm:w-auto" @click="handleCreate">
+            新建
+          </el-button>
+        </div>
+      </div>
+    </el-form>
+    <div
+      class="operation-meeting-data-panel bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-h-0"
+    >
+      <div class="flex-1 min-h-0 relative">
+        <el-auto-resizer class="operation-meeting-table-view absolute">
+          <template #default="{ width, height }">
+            <zm-table
+              :data="list"
+              :loading="loading"
+              :width="width"
+              :max-height="height"
+              :height="height"
+              show-border
+            >
+              <ZmTableColumn label="会议期次" prop="meetingSeries" width="180" />
+              <ZmTableColumn label="公司名称" prop="companyName" :min-width="220" />
+              <ZmTableColumn
+                label="会议日期"
+                prop="meetingDate"
+                cover-formatter
+                :real-value="formatMeetingDate"
+                :min-width="160"
+              />
+              <ZmTableColumn label="操作" width="120" fixed="right">
+                <template #default="{ row }">
+                  <el-button size="default" link type="primary" @click="handleEdit(row.id)">
+                    编辑
+                  </el-button>
+                  <el-button size="default" link type="success" @click="handleView(row.id)">
+                    查看
+                  </el-button>
+                </template>
+              </ZmTableColumn>
+            </zm-table>
+          </template>
+        </el-auto-resizer>
+
+        <div v-loading="loading" class="operation-meeting-card-view">
+          <template v-if="list.length">
+            <article v-for="item in list" :key="item.id" class="operation-meeting-card">
+              <div class="operation-meeting-card__header">
+                <div class="operation-meeting-card__title">
+                  <span>会议期次</span>
+                  <strong>{{ item.meetingSeries || '-' }}</strong>
+                </div>
+              </div>
+
+              <div class="operation-meeting-card__content">
+                <div class="operation-meeting-card__field">
+                  <span>公司名称</span>
+                  <strong>{{ item.companyName || '-' }}</strong>
+                </div>
+                <div class="operation-meeting-card__field">
+                  <span>会议日期</span>
+                  <strong>{{ formatMeetingDate(item) }}</strong>
+                </div>
+              </div>
+
+              <div class="operation-meeting-card__actions">
+                <el-button size="default" link type="primary" @click="handleEdit(item.id)">
+                  编辑
+                </el-button>
+                <el-button size="default" link type="success" @click="handleView(item.id)">
+                  查看
+                </el-button>
+              </div>
+            </article>
+          </template>
+          <el-empty v-else description="暂无数据" :image-size="80" />
+        </div>
+      </div>
+      <div class="operation-meeting-pagination h-8 mt-2 flex items-center justify-end">
+        <el-pagination
+          class="operation-meeting-pagination__desktop"
+          size="default"
+          v-show="total > 0"
+          :current-page="query.pageNo"
+          :page-size="query.pageSize"
+          :background="true"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+        <el-pagination
+          class="operation-meeting-pagination__mobile"
+          size="small"
+          v-show="total > 0"
+          :current-page="query.pageNo"
+          :page-size="query.pageSize"
+          :background="true"
+          :total="total"
+          layout="prev, pager, next"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+  <meeting-form
+    v-model:visible="visible"
+    :id="currentId"
+    :type="type"
+    :dept-options="deptOptions"
+    @update:visible="visible = $event"
+    @success="getList"
+  />
+</template>
+
+<style scoped lang="scss">
+.operation-meeting-query__fields,
+.operation-meeting-query__actions {
+  width: min(100%, 428px);
+  max-width: 100%;
+}
+
+.operation-meeting-query__item {
+  width: 100%;
+  max-width: 100%;
+}
+
+:deep(.operation-meeting-query .el-form-item__content),
+:deep(.operation-meeting-query .el-select),
+:deep(.operation-meeting-query .el-date-editor),
+:deep(.operation-meeting-query .el-button) {
+  max-width: 100%;
+  min-width: 0;
+}
+
+:deep(.operation-meeting-query .el-select),
+:deep(.operation-meeting-query .el-date-editor) {
+  width: 100% !important;
+  box-sizing: border-box;
+}
+
+:deep(.operation-meeting-query .el-range-editor.el-input__wrapper) {
+  display: flex;
+  width: 100% !important;
+  max-width: 100%;
+  min-width: 0;
+}
+
+:deep(.operation-meeting-query .el-range-input) {
+  min-width: 0;
+}
+
+:deep(.operation-meeting-query .el-range-separator) {
+  flex-shrink: 0;
+}
+
+.operation-meeting-table-view {
+  display: block;
+}
+
+.operation-meeting-card-view {
+  display: none;
+}
+
+.operation-meeting-pagination__mobile {
+  display: none;
+}
+
+.operation-meeting-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  padding-bottom: 4px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+}
+
+.operation-meeting-card__header,
+.operation-meeting-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.operation-meeting-card__title {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.operation-meeting-card__title span,
+.operation-meeting-card__field span {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--el-text-color-secondary);
+}
+
+.operation-meeting-card__title strong {
+  overflow: hidden;
+  font-size: 16px;
+  line-height: 1.35;
+  color: var(--el-text-color-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.operation-meeting-card__content {
+  display: grid;
+  gap: 10px;
+}
+
+.operation-meeting-card__field {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+.operation-meeting-card__field strong {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--el-text-color-primary);
+  overflow-wrap: anywhere;
+}
+
+.operation-meeting-card__actions {
+  justify-content: flex-end;
+  padding-top: 2px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+@media (width >= 640px) {
+  .operation-meeting-query__fields {
+    width: min(100%, 664px);
+  }
+
+  .operation-meeting-query__actions {
+    width: auto;
+    max-width: none;
+  }
+}
+
+@media (width < 768px) {
+  .operation-meeting-page {
+    height: auto;
+    min-height: calc(
+      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
+    );
+    grid-template-rows: auto 1fr;
+    gap: 12px;
+  }
+
+  .operation-meeting-data-panel {
+    min-height: 280px;
+    padding: 12px;
+  }
+
+  .operation-meeting-table-view,
+  .operation-meeting-pagination__desktop {
+    display: none;
+  }
+
+  .operation-meeting-card-view {
+    display: flex;
+    min-height: 180px;
+    flex: 1;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+  }
+
+  .operation-meeting-pagination {
+    height: auto;
+    min-height: 32px;
+    justify-content: center;
+    margin-top: 12px;
+  }
+
+  .operation-meeting-pagination__mobile {
+    display: flex;
+    max-width: 100%;
+    justify-content: center;
+  }
+}
+</style>

src/views/pms/operation-meeting/meeting-form.vue

@@ -0,0 +1,358 @@
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DeptOption, DetailItem, OperationMeeting } from './types'
+import MeetingDetailDrawer from './components/meeting-detail-drawer.vue'
+import OperationMeetingContent from './components/operation-meeting-content.vue'
+import { OperationMeetingApi } from '@/api/pms/meeting'
+import { useWindowSize } from '@vueuse/core'
+
+interface Props {
+  visible: boolean
+  id?: number
+  type: 'create' | 'edit' | 'view'
+  deptOptions?: DeptOption[]
+}
+
+interface OperationMeetingForm
+  extends Omit<Partial<OperationMeeting>, 'meetingDate' | 'meetingSeries'> {
+  meetingDate?: number | string | Date
+  meetingSeries?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'create',
+  deptOptions: () => []
+})
+
+const emits = defineEmits(['update:visible', 'success'])
+const message = useMessage()
+
+const operationMeeting = ref<OperationMeetingForm>({})
+const operationMeetingRef = ref<FormInstance>()
+const loading = ref(false)
+const { width } = useWindowSize()
+
+const detailItems = ref<DetailItem[]>([])
+const detailDrawerVisible = ref(false)
+const detailEditingIndex = ref(-1)
+const detailFormType = ref<'create' | 'edit'>('create')
+const detailForm = ref<DetailItem>(createDetailItem())
+
+const isMobile = computed(() => width.value <= 768)
+const drawerSize = computed(() => (isMobile.value ? '100%' : '100%'))
+
+function createDetailItem(): DetailItem {
+  return {
+    raw: {},
+    projectName: '',
+    currentRevenue: undefined,
+    cumulativeRevenue: undefined,
+    currentOnAccount: undefined,
+    cumulativeOnAccount: undefined,
+    currentPayment: undefined,
+    cumulativePayment: undefined,
+    plannedWorkload: '',
+    actualCompletion: '',
+    equipmentUtilizationRate: undefined,
+    keyWorkCompletion: '',
+    problemsAnalysis: '',
+    nextPlannedWorkload: '',
+    priorityTasks: ''
+  }
+}
+
+const cloneDetailItem = (data?: Partial<DetailItem>): DetailItem => ({
+  raw: data?.raw || {},
+  projectName: data?.projectName || '',
+  currentRevenue: data?.currentRevenue,
+  cumulativeRevenue: data?.cumulativeRevenue,
+  currentOnAccount: data?.currentOnAccount,
+  cumulativeOnAccount: data?.cumulativeOnAccount,
+  currentPayment: data?.currentPayment,
+  cumulativePayment: data?.cumulativePayment,
+  plannedWorkload: data?.plannedWorkload || '',
+  actualCompletion: data?.actualCompletion || '',
+  equipmentUtilizationRate: data?.equipmentUtilizationRate,
+  keyWorkCompletion: data?.keyWorkCompletion || '',
+  problemsAnalysis: data?.problemsAnalysis || '',
+  nextPlannedWorkload: data?.nextPlannedWorkload || '',
+  priorityTasks: data?.priorityTasks || ''
+})
+
+const parseNumberValue = (value: unknown) => {
+  if (value === undefined || value === null || value === '') return undefined
+  const parsed = Number(String(value).replace('%', ''))
+
+  return Number.isNaN(parsed) ? undefined : parsed
+}
+
+const parseMeetingSeries = (value: unknown) => {
+  if (value === undefined || value === null || value === '') return undefined
+  const matched = String(value).match(/\d+/)
+
+  return matched ? Number(matched[0]) : undefined
+}
+
+const normalizeDetailItem = (data?: Record<string, unknown>): DetailItem => ({
+  raw: data || {},
+  projectName: String(data?.projectName || ''),
+  currentRevenue: parseNumberValue(data?.currentRevenue),
+  cumulativeRevenue: parseNumberValue(data?.cumulativeRevenue),
+  currentOnAccount: parseNumberValue(data?.currentOnAccount),
+  cumulativeOnAccount: parseNumberValue(data?.cumulativeOnAccount),
+  currentPayment: parseNumberValue(data?.currentPayment),
+  cumulativePayment: parseNumberValue(data?.cumulativePayment),
+  plannedWorkload: String(data?.plannedWorkload || ''),
+  actualCompletion: String(data?.actualCompletion || ''),
+  equipmentUtilizationRate: parseNumberValue(data?.equipmentUtilizationRate),
+  keyWorkCompletion: String(data?.keyWorkCompletion || ''),
+  problemsAnalysis: String(data?.problemsAnalysis || ''),
+  nextPlannedWorkload: String(data?.nextPlannedWorkload || ''),
+  priorityTasks: String(data?.priorityTasks || '')
+})
+
+const requiredTextRule = (message: string) => [
+  {
+    required: true,
+    whitespace: true,
+    message,
+    trigger: ['blur', 'change']
+  }
+]
+
+const operationMeetingRules = reactive<FormRules>({
+  meetingDate: [{ required: true, message: '请选择会议日期', trigger: 'change' }],
+  meetingSeries: [
+    {
+      required: true,
+      type: 'number',
+      message: '请输入会议期次',
+      trigger: ['blur', 'change']
+    },
+    {
+      type: 'number',
+      min: 1,
+      message: '会议期次最小为1',
+      trigger: ['blur', 'change']
+    }
+  ],
+  support: requiredTextRule('请输入需集团协调支持的事项')
+})
+
+const handleAddDetailItem = () => {
+  detailFormType.value = 'create'
+  detailEditingIndex.value = -1
+  detailForm.value = createDetailItem()
+  detailDrawerVisible.value = true
+}
+
+const handleEditDetailItem = (row: DetailItem, index: number) => {
+  detailFormType.value = 'edit'
+  detailEditingIndex.value = index
+  detailForm.value = cloneDetailItem(row)
+  detailDrawerVisible.value = true
+}
+
+const handleDeleteDetailItem = (index: number) => {
+  detailItems.value.splice(index, 1)
+}
+
+const handleDetailDrawerChange = (visible: boolean) => {
+  detailDrawerVisible.value = visible
+
+  if (!visible) {
+    detailForm.value = createDetailItem()
+    detailFormType.value = 'create'
+    detailEditingIndex.value = -1
+  }
+}
+
+const updateOperationMeeting = (nextOperationMeeting: OperationMeetingForm) => {
+  operationMeeting.value = nextOperationMeeting
+}
+
+const saveDetailItem = (item: DetailItem) => {
+  const nextItem = cloneDetailItem(item)
+
+  if (detailEditingIndex.value > -1) {
+    detailItems.value.splice(detailEditingIndex.value, 1, nextItem)
+  } else {
+    detailItems.value.push(nextItem)
+  }
+
+  handleDetailDrawerChange(false)
+}
+
+const resetForm = () => {
+  operationMeeting.value = {}
+  detailItems.value = []
+  loading.value = false
+  handleDetailDrawerChange(false)
+  nextTick(() => operationMeetingRef.value?.clearValidate())
+}
+
+const loadOperationMeetingDetail = async (id: number) => {
+  loading.value = true
+  try {
+    const data = await OperationMeetingApi.getOperationMeeting(id)
+
+    if (!props.visible) return
+
+    operationMeeting.value = {
+      id: data?.id,
+      deptId: data?.deptId,
+      companyName: data?.companyName || '',
+      meetingDate: data?.meetingDate,
+      support: data?.support || '',
+      meetingSeries: parseMeetingSeries(data?.meetingSeries)
+    }
+
+    const details = Array.isArray(data?.details) ? data.details : []
+    detailItems.value = details.map((item) => normalizeDetailItem(item as Record<string, unknown>))
+    nextTick(() => operationMeetingRef.value?.clearValidate())
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleVisibleChange = (visible: boolean) => {
+  emits('update:visible', visible)
+
+  if (!visible) {
+    resetForm()
+  }
+}
+
+watch(
+  () => [props.visible, props.id, props.type] as const,
+  ([visible, id, type]) => {
+    if (!visible) return
+
+    if (type === 'create') {
+      resetForm()
+      return
+    }
+
+    if (id) {
+      loadOperationMeetingDetail(id)
+    }
+  }
+)
+
+const formatMeetingSeries = (value: number) => `第${value}期`
+
+const getMeetingDateTimestamp = (value: OperationMeetingForm['meetingDate']) => {
+  if (value instanceof Date) return value.getTime()
+  if (typeof value === 'number') return value
+  if (typeof value === 'string') {
+    const timestamp = new Date(value).getTime()
+
+    return Number.isNaN(timestamp) ? undefined : timestamp
+  }
+
+  return undefined
+}
+
+const buildOperationMeetingPayload = (): Partial<OperationMeeting> => {
+  const payload: Partial<OperationMeeting> = {
+    meetingDate: getMeetingDateTimestamp(operationMeeting.value.meetingDate),
+    meetingSeries: formatMeetingSeries(operationMeeting.value.meetingSeries as number),
+    support: operationMeeting.value.support || ''
+  }
+
+  if (operationMeeting.value.id) {
+    payload.id = operationMeeting.value.id
+  }
+
+  return payload
+}
+
+const buildDetailPayload = (item: DetailItem): Omit<DetailItem, 'raw'> => {
+  const { raw, ...rest } = item
+  return rest
+}
+
+const submitForm = async () => {
+  if (props.type === 'view' || !operationMeetingRef.value) return
+
+  const valid = await operationMeetingRef.value.validate().catch(() => false)
+
+  if (!valid) return
+
+  if (detailItems.value.length === 0) {
+    message.warning('请先新增至少一条会议明细')
+    return
+  }
+
+  loading.value = true
+  try {
+    await OperationMeetingApi.saveBatch({
+      operationMeeting: buildOperationMeetingPayload(),
+      details: detailItems.value.map((item) => buildDetailPayload(item))
+    })
+
+    message.success('保存成功')
+    handleVisibleChange(false)
+    emits('success')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <el-drawer
+    :model-value="visible"
+    @update:model-value="handleVisibleChange"
+    body-class="bg-gray-100"
+    footer-class="p-4!"
+    :size="drawerSize"
+    :with-header="false"
+  >
+    <el-form
+      ref="operationMeetingRef"
+      label-width="auto"
+      label-position="top"
+      size="default"
+      :model="operationMeeting"
+      :rules="operationMeetingRules"
+      v-loading="loading"
+      scroll-to-error
+      require-asterisk-position="right"
+    >
+      <OperationMeetingContent
+        :meeting="operationMeeting"
+        :details="detailItems"
+        :type="type"
+        :dept-options="deptOptions"
+        :loading="loading"
+        @update:meeting="updateOperationMeeting"
+        @add-detail="handleAddDetailItem"
+        @edit-detail="handleEditDetailItem"
+        @delete-detail="handleDeleteDetailItem"
+      />
+    </el-form>
+
+    <template #footer>
+      <el-button size="default" @click="handleVisibleChange(false)">取消</el-button>
+      <el-button
+        v-if="type !== 'view'"
+        size="default"
+        type="primary"
+        :loading="loading"
+        @click="submitForm"
+      >
+        保存
+      </el-button>
+    </template>
+
+    <MeetingDetailDrawer
+      :visible="detailDrawerVisible"
+      :detail="detailForm"
+      :type="type"
+      :form-type="detailFormType"
+      @update:visible="handleDetailDrawerChange"
+      @save="saveDetailItem"
+    />
+  </el-drawer>
+</template>

src/views/pms/operation-meeting/summary-form.vue

@@ -0,0 +1,260 @@
+<script lang="ts" setup>
+import type { DeptOption, DetailItem, OperationMeeting } from './types'
+import MeetingDetailDrawer from './components/meeting-detail-drawer.vue'
+import OperationMeetingContent from './components/operation-meeting-content.vue'
+import { OperationMeetingApi } from '@/api/pms/meeting'
+import { useWindowSize } from '@vueuse/core'
+
+interface Props {
+  visible: boolean
+  meetingSeries?: string
+  year?: string | number
+  deptOptions?: DeptOption[]
+}
+
+interface OperationMeetingForm
+  extends Omit<Partial<OperationMeeting>, 'meetingDate' | 'meetingSeries'> {
+  meetingDate?: number | string | Date
+  meetingSeries?: number
+}
+
+interface SummaryMeetingItem {
+  key: string
+  meeting: OperationMeetingForm
+  details: DetailItem[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  meetingSeries: '',
+  year: '',
+  deptOptions: () => []
+})
+
+const emits = defineEmits<{
+  'update:visible': [visible: boolean]
+}>()
+
+const { width } = useWindowSize()
+const drawerSize = computed(() => (width.value <= 768 ? '100%' : '100%'))
+
+const loading = ref(false)
+const summaryMeetings = ref<SummaryMeetingItem[]>([])
+const detailDrawerVisible = ref(false)
+const detailForm = ref<DetailItem>(createDetailItem())
+
+function createDetailItem(): DetailItem {
+  return {
+    raw: {},
+    projectName: '',
+    currentRevenue: undefined,
+    cumulativeRevenue: undefined,
+    currentOnAccount: undefined,
+    cumulativeOnAccount: undefined,
+    currentPayment: undefined,
+    cumulativePayment: undefined,
+    plannedWorkload: '',
+    actualCompletion: '',
+    equipmentUtilizationRate: undefined,
+    keyWorkCompletion: '',
+    problemsAnalysis: '',
+    nextPlannedWorkload: '',
+    priorityTasks: ''
+  }
+}
+
+const cloneDetailItem = (data?: Partial<DetailItem>): DetailItem => ({
+  raw: data?.raw || {},
+  projectName: data?.projectName || '',
+  currentRevenue: data?.currentRevenue,
+  cumulativeRevenue: data?.cumulativeRevenue,
+  currentOnAccount: data?.currentOnAccount,
+  cumulativeOnAccount: data?.cumulativeOnAccount,
+  currentPayment: data?.currentPayment,
+  cumulativePayment: data?.cumulativePayment,
+  plannedWorkload: data?.plannedWorkload || '',
+  actualCompletion: data?.actualCompletion || '',
+  equipmentUtilizationRate: data?.equipmentUtilizationRate,
+  keyWorkCompletion: data?.keyWorkCompletion || '',
+  problemsAnalysis: data?.problemsAnalysis || '',
+  nextPlannedWorkload: data?.nextPlannedWorkload || '',
+  priorityTasks: data?.priorityTasks || ''
+})
+
+const parseNumberValue = (value: unknown) => {
+  if (value === undefined || value === null || value === '') return undefined
+  const parsed = Number(String(value).replace('%', ''))
+
+  return Number.isNaN(parsed) ? undefined : parsed
+}
+
+const parseMeetingSeries = (value: unknown) => {
+  if (value === undefined || value === null || value === '') return undefined
+  const matched = String(value).match(/\d+/)
+
+  return matched ? Number(matched[0]) : undefined
+}
+
+const normalizeDetailItem = (data?: Record<string, unknown>): DetailItem => ({
+  raw: data || {},
+  projectName: String(data?.projectName || ''),
+  currentRevenue: parseNumberValue(data?.currentRevenue),
+  cumulativeRevenue: parseNumberValue(data?.cumulativeRevenue),
+  currentOnAccount: parseNumberValue(data?.currentOnAccount),
+  cumulativeOnAccount: parseNumberValue(data?.cumulativeOnAccount),
+  currentPayment: parseNumberValue(data?.currentPayment),
+  cumulativePayment: parseNumberValue(data?.cumulativePayment),
+  plannedWorkload: String(data?.plannedWorkload || ''),
+  actualCompletion: String(data?.actualCompletion || ''),
+  equipmentUtilizationRate: parseNumberValue(data?.equipmentUtilizationRate),
+  keyWorkCompletion: String(data?.keyWorkCompletion || ''),
+  problemsAnalysis: String(data?.problemsAnalysis || ''),
+  nextPlannedWorkload: String(data?.nextPlannedWorkload || ''),
+  priorityTasks: String(data?.priorityTasks || '')
+})
+
+const normalizeSummaryMeeting = (
+  data: Record<string, unknown>,
+  index: number
+): SummaryMeetingItem => {
+  const details = Array.isArray(data.details) ? data.details : []
+  const id = data.id === undefined || data.id === null ? index : String(data.id)
+
+  return {
+    key: `${id}-${index}`,
+    meeting: {
+      id: parseNumberValue(data.id),
+      deptId: parseNumberValue(data.deptId),
+      companyName: String(data.companyName || ''),
+      meetingDate: data.meetingDate as number | string | Date | undefined,
+      support: String(data.support || ''),
+      meetingSeries: parseMeetingSeries(data.meetingSeries)
+    },
+    details: details.map((item) => normalizeDetailItem(item as Record<string, unknown>))
+  }
+}
+
+const resetForm = () => {
+  summaryMeetings.value = []
+  loading.value = false
+  detailDrawerVisible.value = false
+  detailForm.value = createDetailItem()
+}
+
+const handleVisibleChange = (visible: boolean) => {
+  emits('update:visible', visible)
+
+  if (!visible) {
+    resetForm()
+  }
+}
+
+const loadSummaryDetails = async () => {
+  if (!props.meetingSeries || !props.year) {
+    summaryMeetings.value = []
+    return
+  }
+
+  const meetingSeries = props.meetingSeries
+  const year = props.year
+  loading.value = true
+  try {
+    const res = await OperationMeetingApi.getSummarizedProjectDetails({
+      meetingSeries,
+      year
+    })
+
+    if (!props.visible || props.meetingSeries !== meetingSeries || props.year !== year) return
+
+    const meetings = Array.isArray(res) ? res : []
+    summaryMeetings.value = meetings.map((item, index) =>
+      normalizeSummaryMeeting(item as Record<string, unknown>, index)
+    )
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleViewDetail = (row: DetailItem) => {
+  detailForm.value = cloneDetailItem(row)
+  detailDrawerVisible.value = true
+}
+
+const handleDetailDrawerChange = (visible: boolean) => {
+  detailDrawerVisible.value = visible
+
+  if (!visible) {
+    detailForm.value = createDetailItem()
+  }
+}
+
+watch(
+  () => [props.visible, props.meetingSeries, props.year] as const,
+  ([visible]) => {
+    if (!visible) return
+    loadSummaryDetails()
+  }
+)
+</script>
+
+<template>
+  <el-drawer
+    :model-value="visible"
+    @update:model-value="handleVisibleChange"
+    body-class="bg-gray-100"
+    footer-class="p-4!"
+    :size="drawerSize"
+    :with-header="false"
+  >
+    <div v-loading="loading" class="summary-form">
+      <template v-if="summaryMeetings.length">
+        <el-form
+          v-for="(item, index) in summaryMeetings"
+          :key="item.key"
+          label-width="auto"
+          label-position="top"
+          size="default"
+          :model="item.meeting"
+          class="summary-form__meeting"
+        >
+          <OperationMeetingContent
+            :meeting="item.meeting"
+            :details="item.details"
+            type="view"
+            :dept-options="deptOptions"
+            :loading="loading"
+            :show-meeting-meta="index === 0"
+            @edit-detail="handleViewDetail"
+          />
+        </el-form>
+      </template>
+
+      <el-empty v-else description="暂无汇总会议详情" :image-size="100" />
+    </div>
+
+    <template #footer>
+      <el-button size="default" @click="handleVisibleChange(false)">关闭</el-button>
+    </template>
+
+    <MeetingDetailDrawer
+      :visible="detailDrawerVisible"
+      :detail="detailForm"
+      type="view"
+      form-type="edit"
+      @update:visible="handleDetailDrawerChange"
+    />
+  </el-drawer>
+</template>
+
+<style scoped lang="scss">
+.summary-form {
+  min-height: 240px;
+}
+
+.summary-form__meeting {
+  margin-bottom: 16px;
+}
+
+.summary-form__meeting:last-child {
+  margin-bottom: 0;
+}
+</style>

src/views/pms/operation-meeting/summary.vue

@@ -0,0 +1,292 @@
+<script lang="ts" setup>
+import { OperationMeetingApi } from '@/api/pms/meeting'
+import type { DeptOption, OperationMeetingListItem } from './types'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+import SummaryForm from './summary-form.vue'
+import dayjs from 'dayjs'
+
+const loading = ref(false)
+const list = ref<OperationMeetingListItem[]>([])
+const visible = ref(false)
+const currentMeetingSeries = ref('')
+const currentYear = ref('')
+
+const { ZmTable, ZmTableColumn } = useTableComponents<OperationMeetingListItem>()
+
+const deptOptions = ref<DeptOption[]>([])
+
+async function getDeptOptions() {
+  const deptList = await OperationMeetingApi.getDeptList()
+  deptOptions.value = deptList
+    .filter((item) => {
+      return item.type === '1'
+    })
+    .map((item) => ({
+      label: item.name,
+      value: item.id as number
+    }))
+}
+
+async function getList() {
+  loading.value = true
+  try {
+    const res = await OperationMeetingApi.getIntegratedMeetingList()
+    list.value = res || []
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleQuery() {
+  getList()
+}
+
+function resetQuery() {
+  getList()
+}
+
+function getMeetingYear(row: Pick<OperationMeetingListItem, 'meetingDate'>) {
+  const meetingDate = dayjs(row.meetingDate)
+
+  return meetingDate.isValid() ? meetingDate.format('YYYY') : ''
+}
+
+function handleView(row: OperationMeetingListItem) {
+  currentMeetingSeries.value = row.meetingSeries || ''
+  currentYear.value = getMeetingYear(row)
+  visible.value = true
+}
+
+function formatMeetingDate(row: Pick<OperationMeetingListItem, 'meetingDate'>) {
+  return row.meetingDate ? dayjs(row.meetingDate).format('YYYY-MM-DD') : '-'
+}
+
+onMounted(() => {
+  getDeptOptions()
+  getList()
+})
+</script>
+
+<template>
+  <div
+    class="operation-meeting-page min-w-0 overflow-x-hidden grid grid-rows-[auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
+  >
+    <el-form
+      size="default"
+      label-position="left"
+      class="operation-meeting-query min-w-0 overflow-hidden rounded-lg bg-white p-4 shadow dark:bg-[#1d1e1f]"
+    >
+      <div class="min-w-0 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-end">
+        <div
+          class="operation-meeting-query__actions min-w-0 flex flex-col gap-3 sm:flex-row lg:shrink-0"
+        >
+          <el-button type="primary" class="!ml-0 w-full sm:w-auto" @click="handleQuery">
+            搜索
+          </el-button>
+          <el-button class="!ml-0 w-full sm:w-auto" @click="resetQuery">重置</el-button>
+        </div>
+      </div>
+    </el-form>
+
+    <div
+      class="operation-meeting-data-panel bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-h-0"
+    >
+      <div class="flex-1 min-h-0 relative">
+        <el-auto-resizer class="operation-meeting-table-view absolute">
+          <template #default="{ width, height }">
+            <zm-table
+              :data="list"
+              :loading="loading"
+              :width="width"
+              :max-height="height"
+              :height="height"
+              show-border
+            >
+              <ZmTableColumn label="会议期次" prop="meetingSeries" width="180" />
+              <ZmTableColumn label="公司名称" prop="companyName" :min-width="220" />
+              <ZmTableColumn
+                label="会议日期"
+                prop="meetingDate"
+                cover-formatter
+                :real-value="formatMeetingDate"
+                :min-width="160"
+              />
+              <ZmTableColumn label="操作" width="100" fixed="right">
+                <template #default="{ row }">
+                  <el-button size="default" link type="success" @click="handleView(row)">
+                    查看
+                  </el-button>
+                </template>
+              </ZmTableColumn>
+            </zm-table>
+          </template>
+        </el-auto-resizer>
+
+        <div v-loading="loading" class="operation-meeting-card-view">
+          <template v-if="list.length">
+            <article v-for="item in list" :key="item.id" class="operation-meeting-card">
+              <div class="operation-meeting-card__header">
+                <div class="operation-meeting-card__title">
+                  <span>会议期次</span>
+                  <strong>{{ item.meetingSeries || '-' }}</strong>
+                </div>
+              </div>
+
+              <div class="operation-meeting-card__content">
+                <div class="operation-meeting-card__field">
+                  <span>公司名称</span>
+                  <strong>{{ item.companyName || '-' }}</strong>
+                </div>
+                <div class="operation-meeting-card__field">
+                  <span>会议日期</span>
+                  <strong>{{ formatMeetingDate(item) }}</strong>
+                </div>
+              </div>
+
+              <div class="operation-meeting-card__actions">
+                <el-button size="default" link type="success" @click="handleView(item)">
+                  查看
+                </el-button>
+              </div>
+            </article>
+          </template>
+          <el-empty v-else description="暂无数据" :image-size="80" />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <summary-form
+    v-model:visible="visible"
+    :meeting-series="currentMeetingSeries"
+    :year="currentYear"
+    :dept-options="deptOptions"
+    @update:visible="visible = $event"
+  />
+</template>
+
+<style scoped lang="scss">
+.operation-meeting-query__actions {
+  width: min(100%, 428px);
+  max-width: 100%;
+}
+
+:deep(.operation-meeting-query .el-button) {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.operation-meeting-table-view {
+  display: block;
+}
+
+.operation-meeting-card-view {
+  display: none;
+}
+
+.operation-meeting-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  padding-bottom: 4px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+}
+
+.operation-meeting-card__header,
+.operation-meeting-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.operation-meeting-card__title {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.operation-meeting-card__title span,
+.operation-meeting-card__field span {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--el-text-color-secondary);
+}
+
+.operation-meeting-card__title strong {
+  overflow: hidden;
+  font-size: 16px;
+  line-height: 1.35;
+  color: var(--el-text-color-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.operation-meeting-card__content {
+  display: grid;
+  gap: 10px;
+}
+
+.operation-meeting-card__field {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+.operation-meeting-card__field strong {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--el-text-color-primary);
+  overflow-wrap: anywhere;
+}
+
+.operation-meeting-card__actions {
+  justify-content: flex-end;
+  padding-top: 2px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+@media (width >= 640px) {
+  .operation-meeting-query__actions {
+    width: auto;
+    max-width: none;
+  }
+}
+
+@media (width < 768px) {
+  .operation-meeting-page {
+    height: auto;
+    min-height: calc(
+      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
+    );
+    grid-template-rows: auto 1fr;
+    gap: 12px;
+  }
+
+  .operation-meeting-data-panel {
+    min-height: 280px;
+    padding: 12px;
+  }
+
+  .operation-meeting-table-view {
+    display: none;
+  }
+
+  .operation-meeting-card-view {
+    display: flex;
+    min-height: 180px;
+    flex: 1;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/pms/operation-meeting/types.ts

@@ -0,0 +1,42 @@
+export interface DeptOption {
+  label: string
+  value: number
+}
+
+export interface OperationMeeting {
+  id?: number
+  deptId?: number
+  companyName?: string
+  meetingDate: number
+  meetingSeries: string
+  support: string
+}
+
+export interface DetailItem {
+  raw: Record<string, unknown>
+  projectName: string
+  currentRevenue: number | undefined // 本期收入
+  cumulativeRevenue: number | undefined // 累计收入
+  currentOnAccount: number | undefined // 本期挂帐
+  cumulativeOnAccount: number | undefined // 累计挂帐
+  currentPayment: number | undefined // 本期回款
+  cumulativePayment: number | undefined // 累计回款
+  plannedWorkload: string // 计划工作量
+  actualCompletion: string // 实际完成
+  equipmentUtilizationRate: number | undefined // 设备利用率
+  keyWorkCompletion: string // 重点工作及完成情况
+  problemsAnalysis: string // 存在问题及分析
+  nextPlannedWorkload: string // 下期计划工作量
+  priorityTasks: string // 重点工作事项
+}
+
+export interface OperationMeetingListItem {
+  id: number
+  deptId: number | undefined
+  companyName: string
+  meetingDate: number
+  meetingSeries: string
+  support?: string
+}
+
+export type OperationMeetingOpenType = 'create' | 'edit' | 'readonly'

src/views/pms/stat/rykb/safeday.vue

@@ -2,7 +2,7 @@
 import CountTo from '@/components/count-to1.vue'
 import { IotStatApi } from '@/api/pms/stat'
 
-const FIXED_SAFE_DAYS = 109
+const FIXED_SAFE_DAYS = 123
 
 const safeDays = ref(FIXED_SAFE_DAYS)
 

uno.config.ts

@@ -1,4 +1,10 @@
-import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
+import {
+  defineConfig,
+  toEscapedSelector as e,
+  presetUno,
+  presetIcons,
+  presetWebFonts
+} from 'unocss'
 // import transformerVariantGroup from '@unocss/transformer-variant-group'
 
 export default defineConfig({
@@ -115,7 +121,16 @@ ${selector}:after {
       }
     ]
   ],
-  presets: [presetUno({ dark: 'class', attributify: false }), presetIcons()],
+  presets: [
+    presetUno({ dark: 'class', attributify: false }),
+    presetIcons(),
+    presetWebFonts({
+      provider: 'google',
+      fonts: {
+        sans: 'Noto Sans SC'
+      }
+    })
+  ],
   // transformers: [transformerVariantGroup()],
   shortcuts: {
     'wh-full': 'w-full h-full'