fix(web-antdv-next): 统一 Collapse 面板和表格插槽写法

apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue

@@ -1,5 +1,15 @@
 <script lang="ts" setup>
-import { h, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import type { TableColumnType } from 'antdv-next';
+
+import {
+  computed,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
 
 import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
@@ -38,6 +48,80 @@ const dialogVisible = ref(false); // 弹窗可见性
 const dialogTitle = ref<string | undefined>(undefined); // 弹窗标题
 const selectActivityType = ref<string | undefined>(undefined); // 选中 Task 的活动编号
 const selectTasks = ref<any[]>([]); // 选中的任务数组
+const approvalColumns = computed<TableColumnType[]>(() => {
+  const userColumn: TableColumnType =
+    selectActivityType.value === 'bpmn:UserTask'
+      ? {
+          align: 'center',
+          key: 'approver',
+          title: '审批人',
+          width: 100,
+        }
+      : {
+          align: 'center',
+          dataIndex: ['assigneeUser', 'nickname'],
+          key: 'starter',
+          title: '发起人',
+          width: 100,
+        };
+
+  return [
+    {
+      align: 'center',
+      key: 'index',
+      title: '序号',
+      width: 50,
+    },
+    userColumn,
+    {
+      align: 'center',
+      key: 'dept',
+      title: '部门',
+      width: 100,
+    },
+    {
+      align: 'center',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      render: (val) => formatDate(val),
+      title: '开始时间',
+      width: 140,
+    },
+    {
+      align: 'center',
+      dataIndex: 'endTime',
+      key: 'endTime',
+      render: (val) => formatDate(val),
+      title: '结束时间',
+      width: 140,
+    },
+    {
+      align: 'center',
+      dataIndex: 'status',
+      key: 'status',
+      title: '审批状态',
+      width: 90,
+    },
+    ...(selectActivityType.value === 'bpmn:UserTask'
+      ? [
+          {
+            align: 'center',
+            dataIndex: 'reason',
+            key: 'reason',
+            title: '审批建议',
+            width: 120,
+          } as TableColumnType,
+        ]
+      : []),
+    {
+      align: 'center',
+      dataIndex: 'durationInMillis',
+      key: 'durationInMillis',
+      title: '耗时',
+      width: 100,
+    },
+  ];
+});
 
 /** Zoom：恢复 */
 const processReZoom = () => {
@@ -358,78 +442,32 @@ onBeforeUnmount(() => {
       :width="1000"
     >
       <Row>
-        <Table :data-source="selectTasks" size="small" :bordered="true">
+        <Table
-          <Table.Column title="序号" align="center" width="50">
+          :columns="approvalColumns"
-            <template #default="{ index }">
+          :data-source="selectTasks"
+          size="small"
+          :bordered="true"
+        >
+          <template #bodyCell="{ column, index, record }">
+            <template v-if="column.key === 'index'">
               {{ index + 1 }}
             </template>
-          </Table.Column>
+            <template v-else-if="column.key === 'approver'">
-          <Table.Column
-            title="审批人"
-            width="100"
-            align="center"
-            v-if="selectActivityType === 'bpmn:UserTask'"
-          >
-            <template #default="{ record }">
               {{ record.assigneeUser?.nickname || record.ownerUser?.nickname }}
             </template>
-          </Table.Column>
+            <template v-else-if="column.key === 'dept'">
-          <Table.Column
-            title="发起人"
-            data-index="assigneeUser.nickname"
-            width="100"
-            align="center"
-            v-else
-          />
-          <Table.Column title="部门" width="100" align="center">
-            <template #default="{ record }">
               {{ record.assigneeUser?.deptName || record.ownerUser?.deptName }}
             </template>
-          </Table.Column>
+            <template v-else-if="column.key === 'status'">
-          <Table.Column
-            :custom-render="({ text }) => formatDate(text)"
-            align="center"
-            title="开始时间"
-            data-index="createTime"
-            width="140"
-          />
-          <Table.Column
-            :custom-render="({ text }) => formatDate(text)"
-            align="center"
-            title="结束时间"
-            data-index="endTime"
-            width="140"
-          />
-          <Table.Column
-            align="center"
-            title="审批状态"
-            data-index="status"
-            width="90"
-          >
-            <template #default="{ record }">
               <DictTag
                 :type="DICT_TYPE.BPM_TASK_STATUS"
                 :value="record.status"
               />
             </template>
-          </Table.Column>
+            <template v-else-if="column.key === 'durationInMillis'">
-          <Table.Column
-            align="center"
-            title="审批建议"
-            data-index="reason"
-            width="120"
-            v-if="selectActivityType === 'bpmn:UserTask'"
-          />
-          <Table.Column
-            align="center"
-            title="耗时"
-            data-index="durationInMillis"
-            width="100"
-          >
-            <template #default="{ record }">
               {{ formatPast2(record.durationInMillis) }}
             </template>
-          </Table.Column>
+          </template>
         </Table>
       </Row>
     </Modal>

apps/web-antdv-next/src/views/iot/device/device/modules/form.vue

@@ -6,7 +6,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Button, Collapse, message, Space } from 'antdv-next';
+import { Button, Collapse, CollapsePanel, message, Space } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 import { createDevice, getDevice, updateDevice } from '#/api/iot/device/device';
@@ -208,12 +208,12 @@ onMounted(async () => {
     <div class="mx-4">
       <Form />
       <Collapse v-model:active-key="activeKey" class="mt-4">
-        <Collapse.Panel key="advanced" header="更多设置">
+        <CollapsePanel key="advanced" header="更多设置">
           <AdvancedForm />
           <Space class="mt-2">
             <Button type="primary" @click="openMapDialog">坐标拾取</Button>
           </Space>
-        </Collapse.Panel>
+        </CollapsePanel>
       </Collapse>
     </div>
   </Modal>

apps/web-antdv-next/src/views/iot/product/product/modules/form.vue

@@ -5,7 +5,7 @@ import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Collapse, message } from 'antdv-next';
+import { Collapse, CollapsePanel, message } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 import {
@@ -148,9 +148,9 @@ const [Modal, modalApi] = useVbenModal({
     <div class="mx-4">
       <Form />
       <Collapse v-model:active-key="activeKey" class="mt-4">
-        <Collapse.Panel key="advanced" header="更多设置">
+        <CollapsePanel key="advanced" header="更多设置">
           <AdvancedForm />
-        </Collapse.Panel>
+        </CollapsePanel>
       </Collapse>
     </div>
   </Modal>