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

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

@@ -1,6 +1,6 @@
+<!-- 回款计划列表：用于【客户】【合同】详情中，展示它们关联的回款计划列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmReceivableApi } from '#/api/crm/receivable';
 import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -14,7 +14,6 @@ import {
 } from '#/api/crm/receivable/plan';
 import { $t } from '#/locales';
 
-import ReceivableForm from '../../modules/form.vue';
 import Form from '../modules/form.vue';
 import { useDetailListColumns } from './data';
 
@@ -28,13 +27,8 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-const [ReceivableFormModal, receivableFormModalApi] = useVbenModal({
-  connectedComponent: ReceivableForm,
-  destroyOnClose: true,
-});
-
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -48,28 +42,21 @@ function handleCreate() {
     .open();
 }
 
-/** 创建回款 */
-function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
-  receivableFormModalApi.setData({ plan: row }).open();
-}
-
 /** 编辑回款计划 */
-function handleEdit(row: CrmReceivableApi.Receivable) {
-  formModalApi.setData({ receivable: row }).open();
+function handleEdit(row: CrmReceivablePlanApi.Plan) {
+  formModalApi.setData({ receivablePlan: row }).open();
 }
 
 /** 删除回款计划 */
 async function handleDelete(row: CrmReceivablePlanApi.Plan) {
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.period]),
+    content: $t('ui.actionMessage.deleting', [`第${row.period}期`]),
     duration: 0,
   });
   try {
     await deleteReceivablePlan(row.id!);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
-    });
-    onRefresh();
+    message.success($t('ui.actionMessage.deleteSuccess', [`第${row.period}期`]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -78,15 +65,14 @@ async function handleDelete(row: CrmReceivablePlanApi.Plan) {
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useDetailListColumns(),
-    height: 400,
+    height: 500,
     keepSource: true,
     proxyConfig: {
       ajax: {
-        query: async ({ page }, formValues) => {
+        query: async ({ page }) => {
           const queryParams: CrmReceivablePlanApi.PlanPageParam = {
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            ...formValues,
           };
           if (props.customerId && !props.contractId) {
             queryParams.customerId = props.customerId;
@@ -101,6 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -112,8 +99,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <div>
-    <FormModal @success="onRefresh" />
-    <ReceivableFormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction
@@ -131,14 +117,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <template #actions="{ row }">
         <TableAction
           :actions="[
-            {
-              label: $t('ui.actionTitle.create', ['回款']),
-              type: 'link',
-              icon: ACTION_ICON.ADD,
-              auth: ['crm:receivable-plan:create'],
-              disabled: !!row.receivableId,
-              onClick: handleCreateReceivable.bind(null, row),
-            },
             {
               label: $t('common.edit'),
               type: 'link',
@@ -153,7 +131,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['crm:receivable-plan:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.period]),
+                title: $t('ui.actionMessage.deleteConfirm', [`第${row.period}期`]),
                 confirm: handleDelete.bind(null, row),
               },
             },

apps/web-antd/src/views/crm/receivable/plan/data.ts

@@ -14,6 +14,33 @@ import { getSimpleUserList } from '#/api/system/user';
 export function useFormSchema(): VbenFormSchema[] {
   const userStore = useUserStore();
   return [
+    {
+      fieldName: 'period',
+      label: '期数',
+      component: 'Input',
+      componentProps: {
+        placeholder: '保存时自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => !values.id,
+      },
+      defaultValue: userStore.userInfo?.id,
+      rules: 'required',
+    },
     {
       fieldName: 'customerId',
       label: '客户',
@@ -65,33 +92,6 @@ export function useFormSchema(): VbenFormSchema[] {
         },
       },
     },
-    {
-      fieldName: 'period',
-      label: '期数',
-      component: 'Input',
-      componentProps: {
-        placeholder: '保存时自动生成',
-        disabled: true,
-      },
-    },
-    {
-      fieldName: 'ownerUserId',
-      label: '负责人',
-      component: 'ApiSelect',
-      componentProps: {
-        api: () => getSimpleUserList(),
-        fieldNames: {
-          label: 'nickname',
-          value: 'id',
-        },
-      },
-      dependencies: {
-        triggerFields: ['id'],
-        disabled: (values) => !values.id,
-      },
-      defaultValue: userStore.userInfo?.id,
-      rules: 'required',
-    },
     {
       fieldName: 'price',
       label: '计划回款金额',
@@ -120,7 +120,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remindDays',
       label: '提前几天提醒',
       component: 'InputNumber',
-      rules: 'required',
       componentProps: {
         placeholder: '请输入提前几天提醒',
         min: 0,
@@ -130,7 +129,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'returnType',
       label: '回款方式',
       component: 'Select',
-      rules: 'required',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE, 'number'),
         placeholder: '请选择回款方式',
@@ -144,6 +142,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入备注',
         rows: 4,
       },
+      formItemClass: 'md:col-span-2',
     },
   ];
 }

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

@@ -1,43 +1,43 @@
 <script setup lang="ts">
-import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
-import type { SystemOperateLogApi } from '#/api/system/operate-log';
+import type {CrmReceivablePlanApi} from '#/api/crm/receivable/plan';
+import {getReceivablePlan} from '#/api/crm/receivable/plan';
+import type {SystemOperateLogApi} from '#/api/system/operate-log';
 
-import { computed, onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+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 {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 { getOperateLogPage } from '#/api/crm/operateLog';
-import { BizTypeEnum } from '#/api/crm/permission';
-import { getReceivablePlan } from '#/api/crm/receivable/plan';
-import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
-import { PermissionList } from '#/views/crm/permission';
-import { ReceivablePlanDetailsInfo } from '#/views/crm/receivable';
+import {ACTION_ICON, TableAction} from '#/adapter/vxe-table';
 
-import { useDetailSchema } from './data';
+import {getOperateLogPage} from '#/api/crm/operateLog';
+import {BizTypeEnum} from '#/api/crm/permission';
+import {useDescription} from '#/components/description';
+import {AsyncOperateLog} from '#/components/operate-log';
+import {PermissionList} from '#/views/crm/permission';
+import { ReceivablePlanDetailsInfo} from '#/views/crm/receivable';
+import { $t } from '#/locales';
+
+import {useDetailSchema} from './data';
 import ReceivablePlanForm from '../modules/form.vue';
 
-const loading = ref(false);
-
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const receivablePlanId = ref(0);
-
+const loading = ref(false); // 加载中
+const receivablePlanId = ref(0); // 回款计划编号
 const receivablePlan = ref<CrmReceivablePlanApi.Plan>(
   {} as CrmReceivablePlanApi.Plan,
 );
-const receivablePlanLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 // 校验编辑权限
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
+const validateWrite = () => permissionListRef.value?.validateWrite;
 
 const [Descriptions] = useDescription({
   componentProps: {
@@ -54,17 +54,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 加载回款计划详情 */
-async function loadreceivablePlanDetail() {
+async function getReceivablePlanDetail() {
   loading.value = true;
-  const data = await getReceivablePlan(receivablePlanId.value);
-  receivablePlan.value = data;
-  // 操作日志
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_RECEIVABLE_PLAN,
-    bizId: receivablePlanId.value,
-  });
-  receivablePlanLogList.value = logList.list;
-  loading.value = false;
+  try {
+    receivablePlan.value = await getReceivablePlan(receivablePlanId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_RECEIVABLE_PLAN,
+      bizId: receivablePlanId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -78,35 +80,39 @@ function handleEdit() {
   formModalApi.setData({ id: receivablePlanId.value }).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   receivablePlanId.value = Number(route.params.id);
-  loadreceivablePlanDetail();
+  getReceivablePlanDetail();
 });
 </script>
 
 <template>
   <Page
     auto-content-height
-    :title="`第${receivablePlan?.period}期`"
+    :title="`第 ${receivablePlan?.period} 期`"
     :loading="loading"
   >
-    <FormModal @success="loadreceivablePlanDetail" />
+    <FormModal @success="getReceivablePlanDetail" />
     <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:receivable-plan:update']"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            disabled: !validateWrite(),
+            onClick: handleEdit,
+            auth: ['crm:receivable-plan:update'],
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="receivablePlan" />
@@ -126,7 +132,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
-          <AsyncOperateLog :log-list="receivablePlanLogList" />
+          <AsyncOperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>