feat：【mall 商城】交易订单（30% antd remark 优化代码风格）

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

@@ -261,3 +261,26 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     },
   ];
 }
+
+/** 订单备注表单配置 */
+export function useRemarkFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 3,
+      },
+    },
+  ];
+}

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

@@ -25,10 +25,10 @@ import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';
 
-import DeliveryForm from '../modules/delevery-form.vue';
+import DeliveryForm from '../modules/delivery-form.vue';
+import RemarkForm from '../modules/remark-form.vue';
 import OrderUpdateAddressForm from '../modules/update-address-form.vue';
 import OrderUpdatePriceForm from '../modules/update-price-form.vue';
-import OrderUpdateRemarkForm from '../modules/update-remark-form.vue';
 import {
   useDeliveryInfoSchema,
   useExpressTrackColumns,
@@ -146,8 +146,8 @@ const [DeliveryFormModal, deliveryFormModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-const [OrderUpdateRemarkFormModal, remarkFormModalApi] = useVbenModal({
+const [RemarkFormModal, remarkFormModalApi] = useVbenModal({
-  connectedComponent: OrderUpdateRemarkForm,
+  connectedComponent: RemarkForm,
   destroyOnClose: true,
 });
 
@@ -298,7 +298,7 @@ onMounted(async () => {
 
     <!-- 各种操作的弹窗 -->
     <DeliveryFormModal @success="getDetail" />
-    <OrderUpdateRemarkFormModal @success="getDetail" />
+    <RemarkFormModal @success="getDetail" />
     <OrderUpdateAddressFormModal @success="getDetail" />
     <OrderUpdatePriceFormModal @success="getDetail" />
 

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

@@ -2,6 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallOrderApi } from '#/api/mall/trade/order';
 
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
@@ -21,7 +22,7 @@ import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import DeliveryForm from './modules/delivery-form.vue';
-import UpdateRemarkForm from './modules/update-remark-form.vue';
+import RemarkForm from './modules/remark-form.vue';
 
 const { push } = useRouter();
 
@@ -30,8 +31,8 @@ const [DeliveryFormModal, deliveryFormModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-const [UpdateRemarkFormModal, updateRemarkFormModalApi] = useVbenModal({
+const [RemarkFormModal, remarkFormModalApi] = useVbenModal({
-  connectedComponent: UpdateRemarkForm,
+  connectedComponent: RemarkForm,
   destroyOnClose: true,
 });
 
@@ -52,7 +53,35 @@ function handleDelivery(row: MallOrderApi.Order) {
 
 /** 备注 */
 function handleRemark(row: MallOrderApi.Order) {
-  updateRemarkFormModalApi.setData(row).open();
+  remarkOrderId.value = row.id;
+  remarkFormVisible.value = true;
+  remarkFormApi.setValues(row);
+}
+
+/** 提交备注 */
+async function handleRemarkSubmit() {
+  const { valid } = await remarkFormApi.validate();
+  if (!valid) return;
+
+  remarkFormLoading.value = true;
+  try {
+    const data =
+      (await remarkFormApi.getValues()) as MallOrderApi.RemarkRequest;
+    await updateOrderRemark(data);
+    message.success($t('ui.actionMessage.operationSuccess'));
+    remarkFormVisible.value = false;
+    handleRefresh();
+  } catch (error) {
+    console.error('更新订单备注失败:', error);
+  } finally {
+    remarkFormLoading.value = false;
+  }
+}
+
+/** 取消备注 */
+function handleRemarkCancel() {
+  remarkFormVisible.value = false;
+  remarkOrderId.value = undefined;
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -105,7 +134,18 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <DeliveryFormModal @success="handleRefresh" />
-    <UpdateRemarkFormModal @success="handleRefresh" />
+
+    <!-- 订单备注弹窗 -->
+    <Modal
+      v-model:open="remarkFormVisible"
+      title="订单备注"
+      :confirm-loading="remarkFormLoading"
+      @ok="handleRemarkSubmit"
+      @cancel="handleRemarkCancel"
+      width="33.33%"
+    >
+      <RemarkForm class="mx-4" />
+    </Modal>
     <Grid table-title="订单列表">
       <template #expand_content="{ row }">
         <List item-layout="vertical" :data-source="row.items">

apps/web-antd/src/views/mall/trade/order/modules/remark-form.vue

@@ -10,6 +10,7 @@ import { message } from 'ant-design-vue';
 import { useVbenForm } from '#/adapter/form';
 import { updateOrderRemark } from '#/api/mall/trade/order';
 import { $t } from '#/locales';
+import { useRemarkFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
@@ -24,26 +25,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [
+  schema: useRemarkFormSchema(),
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    // TODO @xingyu：发货默认选中第一个？
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Input',
-      componentProps: {
-        type: 'textarea',
-        rows: 3,
-      },
-    },
-  ],
   showDefaultActions: false,
 });
 
@@ -73,13 +55,13 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<MallOrderApi.Order>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
-      await formApi.setValues({ id: data.id, remark: data.remark });
       // 设置到 values
+      await formApi.setValues(data);
     } finally {
       modalApi.unlock();
     }
@@ -88,7 +70,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-1/3" title="订单备注">
+  <Modal title="订单备注" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
-</template>
+</template>