feat：【antd】【crm】线索、联系人的详情，改成 TableAction 实现

apps/web-antd/src/views/crm/clue/detail/index.vue

@@ -7,15 +7,15 @@ import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
 
-import { Button, Card, message, Tabs } from 'ant-design-vue';
+import { Card, message, Tabs } from 'ant-design-vue';
 
 import { getClue, transformClue } from '#/api/crm/clue';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
 import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 
@@ -117,34 +117,37 @@ onMounted(() => {
     <FormModal @success="getClueDetail" />
     <TransferModal @success="getClueDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
+      <TableAction
-        <Button @click="handleBack">
+        :actions="[
-          <IconifyIcon icon="lucide:arrow-left" />
+          {
-          返回
+            label: '返回',
-        </Button>
+            type: 'default',
-        <Button
+            icon: 'lucide:arrow-left',
-          v-if="permissionListRef?.validateWrite"
+            onClick: handleBack,
-          type="primary"
+          },
-          @click="handleEdit"
+          {
-          v-access:code="['crm:clue:update']"
+            label: $t('ui.actionTitle.edit'),
-        >
+            type: 'primary',
-          {{ $t('ui.actionTitle.edit') }}
+            icon: ACTION_ICON.EDIT,
-        </Button>
+            auth: ['crm:clue:update'],
-        <Button
+            ifShow: permissionListRef?.validateWrite,
-          v-if="permissionListRef?.validateOwnerUser"
+            onClick: handleEdit,
-          type="primary"
+          },
-          @click="handleTransfer"
+          {
-        >
+            label: '转移',
-          转移
+            type: 'primary',
-        </Button>
+            ifShow: permissionListRef?.validateOwnerUser,
-        <Button
+            onClick: handleTransfer,
-          v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
+          },
-          type="primary"
+          {
-          @click="handleTransform"
+            label: '转化为客户',
-        >
+            type: 'primary',
-          转化为客户
+            ifShow:
-        </Button>
+              permissionListRef?.validateOwnerUser && !clue?.transformStatus,
-      </div>
+            onClick: handleTransform,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="clue" />

apps/web-antd/src/views/crm/contact/detail/index.vue

@@ -8,13 +8,14 @@ import { useRoute, useRouter } from 'vue-router';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 
-import { Button, Card, Tabs } from 'ant-design-vue';
+import { Card, Tabs } from 'ant-design-vue';
 
 import { getContact } from '#/api/crm/contact';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
 import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
 import { BusinessDetailsList } from '#/views/crm/business';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
@@ -96,26 +97,30 @@ onMounted(() => {
     <FormModal @success="getContactDetail" />
     <TransferModal @success="getContactDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
+      <TableAction
-        <Button @click="handleBack">
+        :actions="[
-          <IconifyIcon icon="lucide:arrow-left" />
+          {
-          返回
+            label: '返回',
-        </Button>
+            type: 'default',
-        <Button
+            icon: 'lucide:arrow-left',
-          v-if="permissionListRef?.validateWrite"
+            onClick: handleBack,
-          type="primary"
+          },
-          @click="handleEdit"
+          {
-        >
+            label: $t('ui.actionTitle.edit'),
-          {{ $t('ui.actionTitle.edit') }}
+            type: 'primary',
-        </Button>
+            icon: ACTION_ICON.EDIT,
-        <Button
+            auth: ['crm:contact:update'],
-          v-if="permissionListRef?.validateOwnerUser"
+            ifShow: permissionListRef?.validateWrite,
-          type="primary"
+            onClick: handleEdit,
-          @click="handleTransfer"
+          },
-        >
+          {
-          转移
+            label: '转移',
-        </Button>
+            type: 'primary',
-      </div>
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="contact" />