feat：【antd】【crm】优化合同的整体代码风格

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

@@ -2,22 +2,21 @@
 import type { CrmContractApi } from '#/api/crm/contract';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { ArrowLeft } from '@vben/icons';
 
-import { Button, Card, Tabs } from 'ant-design-vue';
+import { Card, Tabs } from 'ant-design-vue';
 
 import { getContract } from '#/api/crm/contract';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
-import ContractDetailsInfo from './modules/info.vue';
-import ContractForm from '../modules/form.vue';
+import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { $t } from '#/locales';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 import { ProductDetailsList } from '#/views/crm/product/components';
@@ -26,26 +25,20 @@ import {
   ReceivablePlanDetailsList,
 } from '#/views/crm/receivable';
 
+import Form from '../modules/form.vue';
 import { useDetailSchema } from './data';
-
-const loading = ref(false);
+import ContractDetailsInfo from './modules/info.vue';
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const contractId = ref(0);
-
-const contract = ref<CrmContractApi.Contract>({} as CrmContractApi.Contract);
-const contractLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const contractId = ref(0); // 合同编号
+const contract = ref<CrmContractApi.Contract>({} as CrmContractApi.Contract); // 合同详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
-// 校验负责人权限和编辑权限
-const validateOwnerUser = computed(
-  () => permissionListRef.value?.validateOwnerUser,
-);
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
-
 const [Descriptions] = useDescription({
   componentProps: {
     bordered: false,
@@ -56,7 +49,7 @@ const [Descriptions] = useDescription({
 });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ContractForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -68,15 +61,17 @@ const [TransferModal, transferModalApi] = useVbenModal({
 /** 加载合同详情 */
 async function loadContractDetail() {
   loading.value = true;
-  const data = await getContract(contractId.value);
-  contract.value = data;
-  // 操作日志
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CONTRACT,
-    bizId: contractId.value,
-  });
-  contractLogList.value = logList.list;
-  loading.value = false;
+  try {
+    contract.value = await getContract(contractId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_CONTRACT,
+      bizId: contractId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -85,17 +80,17 @@ function handleBack() {
   router.push('/crm/contract');
 }
 
-/** 编辑 */
+/** 编辑合同 */
 function handleEdit() {
   formModalApi.setData({ id: contractId.value }).open();
 }
 
-/** 转移 */
+/** 转移合同 */
 function handleTransfer() {
   transferModalApi.setData({ bizType: BizTypeEnum.CRM_CONTRACT }).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   contractId.value = Number(route.params.id);
   loadContractDetail();
@@ -107,42 +102,54 @@ onMounted(() => {
     <FormModal @success="loadContractDetail" />
     <TransferModal @success="loadContractDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
-        <Button @click="handleBack">
-          <ArrowLeft class="size-5" />
-          返回
-        </Button>
-        <Button
-          v-if="validateWrite"
-          type="primary"
-          @click="handleEdit"
-          v-access:code="['crm:contract:update']"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
-          转移
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:contract:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+          {
+            label: '转移',
+            type: 'primary',
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="contract" />
     </Card>
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ContractDetailsInfo :contract="contract" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="合同跟进" key="2" :force-render="true">
+        <Tabs.TabPane tab="合同跟进" key="1" :force-render="true">
           <FollowUp :biz-id="contractId" :biz-type="BizTypeEnum.CRM_CONTRACT" />
         </Tabs.TabPane>
+        <Tabs.TabPane tab="详细资料" key="2" :force-render="true">
+          <ContractDetailsInfo :contract="contract" />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="产品" key="3" :force-render="true">
           <ProductDetailsList
             :biz-id="contractId"
             :biz-type="BizTypeEnum.CRM_CONTRACT"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="回款" key="4" :force-render="true">
+        <Tabs.TabPane
+          tab="回款"
+          key="4"
+          :force-render="true"
+          v-if="contract.customerId"
+        >
           <ReceivablePlanDetailsList
             :contract-id="contractId"
             :customer-id="contract.customerId"
@@ -162,7 +169,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="6" :force-render="true">
-          <AsyncOperateLog :log-list="contractLogList" />
+          <OperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>