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

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

@@ -20,7 +20,7 @@ import {
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
+import { OperateLog } from '#/components/operate-log';
 import { ACTION_ICON, TableAction } from '#/components/table-action';
 import { $t } from '#/locales';
 import { BusinessDetailsList } from '#/views/crm/business/components';
@@ -318,7 +318,7 @@ onMounted(() => {
           <ReceivableDetailsList :customer-id="customerId" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="8" :force-render="true">
-          <AsyncOperateLog :log-list="logList" />
+          <OperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>

apps/web-antd/src/views/crm/receivable/components/detail-list.vue

@@ -1,3 +1,4 @@
+<!-- 回款列表：用于【客户】【合同】详情中，展示它们关联的回款列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmReceivableApi } from '#/api/crm/receivable';
@@ -13,8 +14,8 @@ import {
 } from '#/api/crm/receivable';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './data';
 import Form from '../modules/form.vue';
+import { useDetailListColumns } from './data';
 
 const props = defineProps<{
   contractId?: number; // 合同编号
@@ -27,7 +28,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -54,10 +55,8 @@ async function handleDelete(row: CrmReceivableApi.Receivable) {
   });
   try {
     await deleteReceivable(row.id!);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
+    handleRefresh();
-    });
-    onRefresh();
   } finally {
     hideLoading();
   }
@@ -88,6 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -99,7 +99,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <div>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction

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

@@ -2,43 +2,39 @@
 import type { CrmReceivableApi } from '#/api/crm/receivable';
 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 { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getReceivable } from '#/api/crm/receivable';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
+import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { $t } from '#/locales';
 import { PermissionList } from '#/views/crm/permission';
 
 import ReceivableForm from '../modules/form.vue';
 import { useDetailSchema } from './data';
 import Info from './modules/info.vue';
 
-const loading = ref(false);
-
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const receivableId = ref(0);
+const loading = ref(false); // 加载中
-
+const receivableId = ref(0); // 回款编号
 const receivable = ref<CrmReceivableApi.Receivable>(
   {} as CrmReceivableApi.Receivable,
-);
+); // 回款详情
-const receivableLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
-// 校验编辑权限
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
-
 const [Descriptions] = useDescription({
   componentProps: {
     bordered: false,
@@ -56,15 +52,17 @@ const [FormModal, formModalApi] = useVbenModal({
 /** 加载回款详情 */
 async function loadReceivableDetail() {
   loading.value = true;
-  const data = await getReceivable(receivableId.value);
+  try {
-  receivable.value = data;
+    receivable.value = await getReceivable(receivableId.value);
-  // 操作日志
+    // 操作日志
-  const logList = await getOperateLogPage({
+    const res = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_RECEIVABLE,
+      bizType: BizTypeEnum.CRM_RECEIVABLE,
-    bizId: receivableId.value,
+      bizId: receivableId.value,
-  });
+    });
-  receivableLogList.value = logList.list;
+    logList.value = res.list;
-  loading.value = false;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -78,7 +76,7 @@ function handleEdit() {
   formModalApi.setData({ id: receivableId.value }).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   receivableId.value = Number(route.params.id);
   loadReceivableDetail();
@@ -89,20 +87,24 @@ onMounted(() => {
   <Page auto-content-height :title="receivable?.no" :loading="loading">
     <FormModal @success="loadReceivableDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
+      <TableAction
-        <Button @click="handleBack">
+        :actions="[
-          <ArrowLeft class="size-5" />
+          {
-          返回
+            label: '返回',
-        </Button>
+            type: 'default',
-        <Button
+            icon: 'lucide:arrow-left',
-          v-if="validateWrite"
+            onClick: handleBack,
-          type="primary"
+          },
-          @click="handleEdit"
+          {
-          v-access:code="['crm:receivable:update']"
+            label: $t('ui.actionTitle.edit'),
-        >
+            type: 'primary',
-          {{ $t('ui.actionTitle.edit') }}
+            icon: ACTION_ICON.EDIT,
-        </Button>
+            auth: ['crm:receivable:update'],
-      </div>
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="receivable" />
@@ -122,7 +124,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
-          <AsyncOperateLog :log-list="receivableLogList" />
+          <OperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>

apps/web-antd/src/views/crm/receivable/index.vue

@@ -43,8 +43,11 @@ function handleChangeSceneType(key: number | string) {
 
 /** 导出表格 */
 async function handleExport() {
-  // TODO @AI：缺少了 sceneType 参考，参考下别的模块？
+  const formValues = await gridApi.formApi.getValues();
-  const data = await exportReceivable(await gridApi.formApi.getValues());
+  const data = await exportReceivable({
+    sceneType: sceneType.value,
+    ...formValues,
+  });
   downloadFileFromBlobPart({ fileName: '回款.xls', source: data });
 }
 
@@ -251,4 +254,4 @@ const [Grid, gridApi] = useVbenVxeGrid({
 :deep(.vxe-toolbar div) {
   z-index: 1;
 }
-</style>
+</style>

apps/web-antd/src/views/crm/receivable/modules/form.vue

@@ -65,8 +65,6 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData();
     if (!data) {
-      // 设置到 values
-      await formApi.setValues(data);
       return;
     }
     const { receivable, plan } = data;