feat：【antd】【erp 系统】sale/out 部分重构（sale-order-select）

apps/web-antd/src/views/erp/sale/out/modules/form.vue

@@ -14,7 +14,7 @@ import { createSaleOut, getSaleOut, updateSaleOut } from '#/api/erp/sale/out';
 
 import { useFormSchema } from '../data';
 import ItemForm from './item-form.vue';
-import SelectSaleOrderForm from './select-sale-order-form.vue';
+import SaleOrderSelect from './sale-order-select.vue';
 
 const emit = defineEmits(['success']);
 const formData = ref<
@@ -106,7 +106,6 @@ const handleUpdateTotalPrice = (totalPrice: number) => {
   formApi.setValues({
     totalPrice,
   });
-  formData.value.totalPrice = totalPrice;
 };
 
 /** 选择销售订单 */
@@ -131,6 +130,7 @@ const handleUpdateOrder = (order: ErpSaleOrderApi.SaleOrder) => {
   formData.value.items = order.items!.filter(
     (item) => item.count && item.count > 0,
   ) as ErpSaleOutApi.SaleOutItem[];
+  formApi.setValues(formData.value, false);
 };
 
 /** 创建或更新销售出库 */
@@ -224,7 +224,7 @@ const [Modal, modalApi] = useVbenModal({
         />
       </template>
       <template #orderNo>
-        <SelectSaleOrderForm
+        <SaleOrderSelect
           :order-no="formData?.orderNo"
           @update:order="handleUpdateOrder"
         />

apps/web-antd/src/views/erp/sale/out/modules/sale-order-select.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSaleOrderPage } from '#/api/erp/sale/order';
+
+import { useOrderGridColumns, useOrderGridFormSchema } from '../data';
+
+defineProps({
+  orderNo: {
+    type: String,
+    default: () => undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  'update:order': [order: ErpSaleOrderApi.SaleOrder];
+}>();
+
+const order = ref<ErpSaleOrderApi.SaleOrder>(); // 选择的采购订单
+const open = ref<boolean>(false); // 选择采购订单弹窗是否打开
+
+/** 表格配置 */
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useOrderGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useOrderGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSaleOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            outEnable: true,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    radioConfig: {
+      trigger: 'row',
+      highlight: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSaleOrderApi.SaleOrder>,
+  gridEvents: {
+    radioChange: ({ row }: { row: ErpSaleOrderApi.SaleOrder }) => {
+      handleSelectOrder(row);
+    },
+  },
+});
+
+/** 选择采购订单 */
+function handleSelectOrder(selectOrder: ErpSaleOrderApi.SaleOrder) {
+  order.value = selectOrder;
+}
+
+/** 确认选择采购订单 */
+const handleOk = () => {
+  if (!order.value) {
+    message.warning('请选择一个采购订单');
+    return;
+  }
+  emit('update:order', order.value);
+  open.value = false;
+};
+</script>
+
+<template>
+  <Input
+    readonly
+    :value="orderNo"
+    :disabled="disabled"
+    @click="() => !disabled && (open = true)"
+  >
+    <template #addonAfter>
+      <div>
+        <IconifyIcon
+          class="h-full w-6 cursor-pointer"
+          icon="ant-design:setting-outlined"
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+          @click="() => !disabled && (open = true)"
+        />
+      </div>
+    </template>
+  </Input>
+  <Modal
+    class="!w-[50vw]"
+    v-model:open="open"
+    title="选择关联订单"
+    @ok="handleOk"
+  >
+    <Grid class="max-h-[600px]" table-title="销售订单列表(仅展示可出库)" />
+  </Modal>
+</template>

apps/web-antd/src/views/erp/sale/out/modules/select-sale-order-form.vue

@@ -1,70 +0,0 @@
-<script lang="ts" setup>
-import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
-
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Input, message, Modal } from 'ant-design-vue';
-
-import SelectSaleOrderGrid from './select-sale-order-grid.vue';
-
-defineProps({
-  orderNo: {
-    type: String,
-    default: () => undefined,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits<{
-  'update:order': [order: ErpSaleOrderApi.SaleOrder];
-}>();
-const order = ref<ErpSaleOrderApi.SaleOrder>();
-const open = ref<boolean>(false);
-
-const handleSelectOrder = (selectOrder: ErpSaleOrderApi.SaleOrder) => {
-  order.value = selectOrder;
-};
-
-const handleOk = () => {
-  if (!order.value) {
-    message.warning('请选择一个采购订单');
-    return;
-  }
-  emit('update:order', order.value);
-  open.value = false;
-};
-</script>
-
-<template>
-  <Input
-    v-bind="$attrs"
-    readonly
-    :value="orderNo"
-    :disabled="disabled"
-    @click="() => !disabled && (open = true)"
-  >
-    <template #addonAfter>
-      <div>
-        <IconifyIcon
-          class="h-full w-6 cursor-pointer"
-          icon="ant-design:setting-outlined"
-          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
-          @click="() => !disabled && (open = true)"
-        />
-      </div>
-    </template>
-  </Input>
-  <Modal
-    v-model:open="open"
-    title="选择关联订单"
-    class="!w-[50vw]"
-    :show-confirm-button="true"
-    @ok="handleOk"
-  >
-    <SelectSaleOrderGrid @select-row="handleSelectOrder" />
-  </Modal>
-</template>

apps/web-antd/src/views/erp/sale/out/modules/select-sale-order-grid.vue

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getSaleOrderPage } from '#/api/erp/sale/order';
-
-import { useOrderGridColumns, useOrderGridFormSchema } from '../data';
-
-const emit = defineEmits(['selectRow']);
-
-const [Grid] = useVbenVxeGrid({
-  formOptions: {
-    schema: useOrderGridFormSchema(),
-  },
-  gridOptions: {
-    columns: useOrderGridColumns(),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getSaleOrderPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            outEnable: true,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    radioConfig: {
-      trigger: 'row',
-      highlight: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<ErpSaleOrderApi.SaleOrder>,
-  gridEvents: {
-    radioChange: ({ row }: { row: ErpSaleOrderApi.SaleOrder }) => {
-      emit('selectRow', row);
-    },
-  },
-});
-</script>
-
-<template>
-  <Grid class="max-h-[600px]" table-title="销售订单列表(仅展示可出库)" />
-</template>