feat：【mall 商城】售后退款（100% antd form）

apps/web-antd/src/views/mall/trade/afterSale/data.ts

@@ -4,6 +4,7 @@ import type { VxeGridPropTypes } from '#/adapter/vxe-table';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -60,6 +61,30 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 拒绝售后表单的 schema 配置 */
+export function useDisagreeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'reason',
+      label: '拒绝原因',
+      componentProps: {
+        placeholder: '请输入拒绝原因',
+        rows: 4,
+      },
+      rules: z.string().min(2, { message: '拒绝原因不能少于 2 个字符' }),
+    },
+  ];
+}
+
 /** 表格列配置 */
 export function useGridColumns(): VxeGridPropTypes.Columns {
   return [

apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue

@@ -25,6 +25,7 @@ import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';
 
+import DisagreeForm from '../modules/disagree-form.vue';
 import {
   useAfterSaleInfoSchema,
   useOperateLogSchema,
@@ -109,7 +110,7 @@ const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
 });
 
 const [DisagreeModal, disagreeModalApi] = useVbenModal({
-  connectedComponent: () => import('./modules/disagree-form.vue'),
+  connectedComponent: DisagreeForm,
   destroyOnClose: true,
 });
 
@@ -217,10 +218,6 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height :title="afterSale.no" :loading="loading">
-    <!-- TODO @AI：晚点搞；
-    <DisagreeModal @success="getDetail" />
-    -->
-
     <template #extra>
       <TableAction
         :actions="[
@@ -266,6 +263,9 @@ onMounted(() => {
       />
     </template>
 
+    <!-- 拒绝售后弹窗 -->
+    <DisagreeModal @success="getDetail" />
+
     <!-- 订单信息 -->
     <Card class="mb-4">
       <OrderDescriptions :data="afterSale" />

apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
+
+import { useDisagreeFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MallAfterSaleApi.AfterSale>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDisagreeFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    try {
+      const data =
+        (await formApi.getValues()) as MallAfterSaleApi.DisagreeRequest;
+      await AfterSaleApi.disagreeAfterSale(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ afterSale: MallAfterSaleApi.AfterSale }>();
+    if (!data?.afterSale) {
+      return;
+    }
+    formData.value = data.afterSale;
+    modalApi.lock();
+    try {
+      // 设置表单数据
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="拒绝售后" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>