feat：【antd】【erp 系统】purchase/in 重构 4/4

apps/web-antd/src/views/erp/purchase/in/data.ts

@@ -189,7 +189,6 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择结算账户',
-        disabled: true,
         allowClear: true,
         showSearch: true,
         api: getAccountSimpleList,
@@ -414,6 +413,21 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    {
+      fieldName: 'accountId',
+      label: '结算账户',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
     {
       fieldName: 'paymentStatus',
       label: '付款状态',

apps/web-antd/src/views/erp/purchase/in/index.vue

@@ -66,7 +66,10 @@ async function handleDelete(ids: number[]) {
 }
 
 /** 审批/反审批操作 */
-async function handleUpdateStatus(row: ErpPurchaseInApi.PurchaseIn, status: number) {
+async function handleUpdateStatus(
+  row: ErpPurchaseInApi.PurchaseIn,
+  status: number,
+) {
   const hideLoading = message.loading({
     content: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
     duration: 0,

apps/web-antd/src/views/erp/purchase/in/modules/form.vue

@@ -10,6 +10,7 @@ import { $t } from '@vben/locales';
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
+import { getAccountSimpleList } from '#/api/erp/finance/account';
 import {
   createPurchaseIn,
   getPurchaseIn,
@@ -178,6 +179,12 @@ const [Modal, modalApi] = useVbenModal({
     formApi.setDisabled(formType.value === 'detail');
     formApi.updateSchema(useFormSchema(formType.value));
     if (!data || !data.id) {
+      // 新增时，默认选中账户
+      const accountList = await getAccountSimpleList();
+      const defaultAccount = accountList.find((item) => item.defaultStatus);
+      if (defaultAccount) {
+        await formApi.setValues({ accountId: defaultAccount.id });
+      }
       return;
     }
     modalApi.lock();
@@ -220,4 +227,4 @@ const [Modal, modalApi] = useVbenModal({
       </template>
     </Form>
   </Modal>
-</template>
+</template>

apps/web-antd/src/views/erp/purchase/in/modules/purchase-order-select-grid.vue

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getPurchaseOrderPage } from '#/api/erp/purchase/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 getPurchaseOrderPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            inEnable: true,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    radioConfig: {
-      trigger: 'row',
-      highlight: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
-  gridEvents: {
-    radioChange: ({ row }: { row: ErpPurchaseOrderApi.PurchaseOrder }) => {
-      emit('selectRow', row);
-    },
-  },
-});
-</script>
-
-<template>
-  <Grid class="max-h-[600px]" table-title="采购订单列表(仅展示可入库)" />
-</template>

apps/web-antd/src/views/erp/purchase/in/modules/purchase-order-select.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
 import { ref } from 'vue';
@@ -7,9 +8,12 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Input, message, Modal } from 'ant-design-vue';
 
-import SelectPurchaseOrderGrid from './purchase-order-select-grid.vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPurchaseOrderPage } from '#/api/erp/purchase/order';
 
-const props = defineProps({
+import { useOrderGridColumns, useOrderGridFormSchema } from '../data';
+
+defineProps({
   orderNo: {
     type: String,
     default: () => undefined,
@@ -19,16 +23,61 @@ const props = defineProps({
     default: false,
   },
 });
+
 const emit = defineEmits<{
   'update:order': [order: ErpPurchaseOrderApi.PurchaseOrder];
 }>();
-const order = ref<ErpPurchaseOrderApi.PurchaseOrder>();
-const open = ref<boolean>(false);
 
-const handleSelectOrder = (selectOrder: ErpPurchaseOrderApi.PurchaseOrder) => {
+const order = ref<ErpPurchaseOrderApi.PurchaseOrder>(); // 选择的采购订单
+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 getPurchaseOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            returnEnable: true,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    radioConfig: {
+      trigger: 'row',
+      highlight: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
+  gridEvents: {
+    radioChange: ({ row }: { row: ErpPurchaseOrderApi.PurchaseOrder }) => {
+      handleSelectOrder(row);
+    },
+  },
+});
+
+/** 选择采购订单 */
+function handleSelectOrder(selectOrder: ErpPurchaseOrderApi.PurchaseOrder) {
   order.value = selectOrder;
-};
+}
 
+/** 确认选择采购订单 */
 const handleOk = () => {
   if (!order.value) {
     message.warning('请选择一个采购订单');
@@ -41,7 +90,6 @@ const handleOk = () => {
 
 <template>
   <Input
-    v-bind="$attrs"
     readonly
     :value="orderNo"
     :disabled="disabled"
@@ -52,19 +100,18 @@ const handleOk = () => {
         <IconifyIcon
           class="h-full w-6 cursor-pointer"
           icon="ant-design:setting-outlined"
-          :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"
-          @click="() => !props.disabled && (open = true)"
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+          @click="() => !disabled && (open = true)"
         />
       </div>
     </template>
   </Input>
   <Modal
+    class="!w-[50vw]"
     v-model:open="open"
     title="选择关联订单"
-    class="!w-[50vw]"
-    :show-confirm-button="true"
     @ok="handleOk"
   >
-    <SelectPurchaseOrderGrid @select-row="handleSelectOrder" />
+    <Grid class="max-h-[600px]" table-title="采购订单列表(仅展示可退货)" />
   </Modal>
 </template>