Merge remote-tracking branch 'yudao/dev' into dev

apps/web-antd/src/views/ai/chat/index/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO @gjd：https://t.zsxq.com/pmNb1 AI 对话、绘图底部没对齐
 import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
 import type { AiChatMessageApi } from '#/api/ai/chat/message';
 
@@ -23,6 +24,7 @@ import MessageList from './components/message/MessageList.vue';
 import MessageListEmpty from './components/message/MessageListEmpty.vue';
 import MessageLoading from './components/message/MessageLoading.vue';
 import MessageNewConversation from './components/message/MessageNewConversation.vue';
+
 /** AI 聊天对话 列表 */
 defineOptions({ name: 'AiChat' });
 

apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue

@@ -69,7 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,

apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue

@@ -66,7 +66,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,

apps/web-antd/src/views/ai/image/manager/index.vue

@@ -79,7 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiImageApi.Image>,
@@ -104,7 +104,10 @@ onMounted(async () => {
       </template>
       <template #userId="{ row }">
         <span>
-          {{ userList.find((item) => item.id === row.userId)?.nickname }}
+          {{
+            userList.find((item: SystemUserApi.User) => item.id === row.userId)
+              ?.nickname
+          }}
         </span>
       </template>
       <template #publicStatus="{ row }">

apps/web-antd/src/views/ai/knowledge/document/index.vue

@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiKnowledgeDocumentApi.KnowledgeDocument>,

apps/web-antd/src/views/ai/knowledge/knowledge/index.vue

@@ -95,7 +95,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiKnowledgeKnowledgeApi.Knowledge>,

apps/web-antd/src/views/ai/knowledge/segment/index.vue

@@ -86,7 +86,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiKnowledgeKnowledgeApi.Knowledge>,

apps/web-antd/src/views/ai/mindmap/manager/index.vue

@@ -70,7 +70,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiMindmapApi.MindMap>,
@@ -108,7 +108,10 @@ onMounted(async () => {
       </template>
       <template #userId="{ row }">
         <span>
-          {{ userList.find((item) => item.id === row.userId)?.nickname }}
+          {{
+            userList.find((item: SystemUserApi.User) => item.id === row.userId)
+              ?.nickname
+          }}
         </span>
       </template>
       <template #actions="{ row }">

apps/web-antd/src/views/ai/model/apiKey/index.vue

@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiModelApiKeyApi.ApiKey>,

apps/web-antd/src/views/ai/model/chatRole/index.vue

@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiModelChatRoleApi.ChatRole>,

apps/web-antd/src/views/ai/model/model/index.vue

@@ -79,7 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiModelModelApi.Model>,
@@ -112,7 +112,11 @@ onMounted(async () => {
       </template>
       <template #keyId="{ row }">
         <span>
-          {{ apiKeyList.find((item) => item.id === row.keyId)?.name }}
+          {{
+            apiKeyList.find(
+              (item: AiModelApiKeyApi.ApiKey) => item.id === row.keyId,
+            )?.name
+          }}
         </span>
       </template>
       <template #actions="{ row }">

apps/web-antd/src/views/ai/model/tool/index.vue

@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiModelToolApi.Tool>,

apps/web-antd/src/views/ai/music/manager/index.vue

@@ -79,7 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiMusicApi.Music>,

apps/web-antd/src/views/ai/workflow/index.vue

@@ -76,7 +76,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<any>,

apps/web-antd/src/views/ai/write/manager/index.vue

@@ -62,7 +62,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiWriteApi.AiWritePageReq>,

apps/web-antd/src/views/basic/productunit/index.vue

@@ -114,7 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<ProductUnitApi.ProductUnit>,

apps/web-antd/src/views/basic/productunitgroup/index.vue

@@ -118,7 +118,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<ProductUnitGroupApi.ProductUnitGroup>,

apps/web-antd/src/views/bpm/category/index.vue

@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmCategoryApi.Category>,

apps/web-antd/src/views/bpm/form/index.vue

@@ -109,7 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {

apps/web-antd/src/views/bpm/group/index.vue

@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmUserGroupApi.UserGroup>,

apps/web-antd/src/views/bpm/model/definition/index.vue

@@ -76,7 +76,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
   } as VxeTableGridOptions,
 });

apps/web-antd/src/views/bpm/model/form/index.vue

@@ -123,6 +123,7 @@ const formData: any = ref({
     enable: false,
     summary: [],
   },
+  allowWithdrawTask: false,
 });
 
 // 流程数据
@@ -178,6 +179,16 @@ async function initData() {
     // 特殊：复制场景
     if (route.params.type === 'copy') {
       delete formData.value.id;
+      if (formData.value.bpmnXml) {
+        formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
+          formData.value.name,
+          `${formData.value.name}副本`,
+        );
+        formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
+          formData.value.key,
+          `${formData.value.key}_copy`,
+        );
+      }
       formData.value.name += '副本';
       formData.value.key += '_copy';
     }

apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue

@@ -69,7 +69,27 @@ const selectedUsers = ref<number[]>();
 
 const rules: Record<string, Rule[]> = {
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  key: [
+    { required: true, message: '流程标识不能为空', trigger: 'blur' },
+    {
+      validator: (_rule: any, value: string, callback: any) => {
+        if (!value) {
+          callback();
+          return;
+        }
+        if (!/^[a-z_][\-\w.$]*$/i.test(value)) {
+          callback(
+            new Error(
+              '只能包含字母、数字、下划线、连字符和点号，且必须以字母或下划线开头',
+            ),
+          );
+          return;
+        }
+        callback();
+      },
+      trigger: 'blur',
+    },
+  ],
   category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],

apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue

@@ -220,6 +220,9 @@ function initData() {
   if (modelData.value.taskAfterTriggerSetting) {
     taskAfterTriggerEnable.value = true;
   }
+  if (modelData.value.allowWithdrawTask === undefined) {
+    modelData.value.allowWithdrawTask = false;
+  }
 }
 
 /** 监听表单 ID 变化，加载表单数据 */
@@ -272,6 +275,18 @@ defineExpose({ initData, validate });
         </div>
       </div>
     </FormItem>
+    <FormItem class="mb-5" label="审批人权限">
+      <div class="mt-1 flex flex-col">
+        <Checkbox v-model:checked="modelData.allowWithdrawTask">
+          允许审批人撤回任务
+        </Checkbox>
+        <div class="ml-6">
+          <TypographyText type="secondary">
+            审批人可撤回正在审批节点的前一节点
+          </TypographyText>
+        </div>
+      </div>
+    </FormItem>
     <FormItem v-if="modelData.processIdRule" class="mb-5" label="流程编码">
       <Row :gutter="8" align="middle">
         <Col :span="1">

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -415,6 +415,7 @@ const handleRenameSuccess = () => {
     >
       <div class="flex h-12 items-center">
         <!-- 头部：分类名 -->
+        <!-- TODO @jason：1）无法拖动排序；2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。 -->
         <div class="flex items-center">
           <Tooltip v-if="isCategorySorting" title="拖动排序">
             <span

apps/web-antd/src/views/bpm/oa/leave/index.vue

@@ -38,7 +38,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmOALeaveApi.Leave>,

apps/web-antd/src/views/bpm/processExpression/index.vue

@@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmProcessExpressionApi.ProcessExpression>,

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -2,6 +2,8 @@
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemUserApi } from '#/api/system/user';
 
+// TODO @jason：业务表单审批时，读取不到界面，参见 https://t.zsxq.com/eif2e
+
 import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';

apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue

@@ -4,7 +4,7 @@ import type { Rule } from 'ant-design-vue/es/form';
 
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -102,6 +102,7 @@ const approveSignFormRef = ref();
 const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
   [],
 ); // 下一个审批节点信息
+const nextAssigneesTimelineRef = ref(); // 下一个节点审批人时间线组件的引用
 const approveReasonForm: any = reactive({
   reason: '',
   signPicUrl: '',
@@ -278,6 +279,10 @@ function closePopover(type: string, formRef: any | FormInstance) {
   }
   if (popOverVisible.value[type]) popOverVisible.value[type] = false;
   nextAssigneesActivityNode.value = [];
+  // 清理 Timeline 组件中的自定义审批人数据
+  if (nextAssigneesTimelineRef.value) {
+    nextAssigneesTimelineRef.value.batchSetCustomApproveUsers({});
+  }
 }
 
 /** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
@@ -290,6 +295,7 @@ async function initNextAssigneesFormField() {
     processVariablesStr: JSON.stringify(variables),
   });
   if (data && data.length > 0) {
+    const customApproveUsersData: Record<string, any[]> = {}; // 用于收集需要设置到 Timeline 组件的自定义审批人数据
     data.forEach((node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
       if (
         // 情况一：当前节点没有审批人，并且是发起人自选
@@ -302,7 +308,23 @@ async function initNextAssigneesFormField() {
       ) {
         nextAssigneesActivityNode.value.push(node);
       }
+
+      // 如果节点有 candidateUsers，设置到 customApproveUsers 中
+      if (node.candidateUsers && node.candidateUsers.length > 0) {
+        customApproveUsersData[node.id] = node.candidateUsers;
+      }
     });
+
+    // 将 candidateUsers 设置到 Timeline 组件中
+    await nextTick(); // 等待下一个 tick，确保 Timeline 组件已经渲染
+    if (
+      nextAssigneesTimelineRef.value &&
+      Object.keys(customApproveUsersData).length > 0
+    ) {
+      nextAssigneesTimelineRef.value.batchSetCustomApproveUsers(
+        customApproveUsersData,
+      );
+    }
   }
 }
 
@@ -364,6 +386,10 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
       await TaskApi.approveTask(data);
       popOverVisible.value.approve = false;
       nextAssigneesActivityNode.value = [];
+      // 清理 Timeline 组件中的自定义审批人数据
+      if (nextAssigneesTimelineRef.value) {
+        nextAssigneesTimelineRef.value.batchSetCustomApproveUsers({});
+      }
       message.success('审批通过成功');
     } else {
       // 审批不通过数据
@@ -733,9 +759,10 @@ defineExpose({ loadTodoTask });
               >
                 <div class="-mb-8 -mt-3.5 ml-2.5">
                   <ProcessInstanceTimeline
+                    ref="nextAssigneesTimelineRef"
                     :activity-nodes="nextAssigneesActivityNode"
                     :show-status-icon="false"
-                    :use-next-assignees="true"
+                    :enable-approve-user-select="true"
                     @select-user-confirm="selectNextAssigneesConfirm"
                   />
                 </div>

apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue

@@ -23,12 +23,12 @@ defineOptions({ name: 'BpmProcessInstanceTimeline' });
 const props = withDefaults(
   defineProps<{
     activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[]; // 审批节点信息
+    enableApproveUserSelect?: boolean; // 是否开启审批人自选功能
     showStatusIcon?: boolean; // 是否显示头像右下角状态图标
-    useNextAssignees?: boolean; //  是否用于下一个节点审批人选择
   }>(),
   {
     showStatusIcon: true, // 默认值为 true
-    useNextAssignees: false, // 默认值为 false
+    enableApproveUserSelect: false, // 默认值为 false
   },
 );
 
@@ -183,6 +183,9 @@ function handleUserSelectConfirm(userList: any[]) {
 
 /** 跳转子流程 */
 function handleChildProcess(activity: any) {
+  if (!activity.processInstanceId) {
+    return;
+  }
   push({
     name: 'BpmProcessInstanceDetail',
     query: {
@@ -197,12 +200,12 @@ function shouldShowCustomUserSelect(
 ) {
   return (
     isEmpty(activity.tasks) &&
-    isEmpty(activity.candidateUsers) &&
-    (BpmCandidateStrategyEnum.START_USER_SELECT ===
-      activity.candidateStrategy ||
-      (BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
-        activity.candidateStrategy &&
-        props.useNextAssignees))
+    ((BpmCandidateStrategyEnum.START_USER_SELECT ===
+      activity.candidateStrategy &&
+      isEmpty(activity.candidateUsers)) ||
+      (props.enableApproveUserSelect &&
+        BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
+          activity.candidateStrategy))
   );
 }
 
@@ -225,6 +228,21 @@ function handleUserSelectClosed() {
 function handleUserSelectCancel() {
   selectedUsers.value = [];
 }
+
+/** 设置自定义审批人 */
+const setCustomApproveUsers = (activityId: string, users: any[]) => {
+  customApproveUsers.value[activityId] = users || [];
+};
+
+/** 批量设置多个节点的自定义审批人 */
+const batchSetCustomApproveUsers = (data: Record<string, any[]>) => {
+  Object.keys(data).forEach((activityId) => {
+    customApproveUsers.value[activityId] = data[activityId] || [];
+  });
+};
+
+// 暴露方法给父组件
+defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers });
 </script>
 
 <template>
@@ -291,6 +309,7 @@ function handleUserSelectCancel() {
               ghost
               size="small"
               @click="handleChildProcess(activity)"
+              :disabled="!activity.processInstanceId"
             >
               查看子流程
             </Button>

apps/web-antd/src/views/bpm/processInstance/index.vue

@@ -90,7 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {

apps/web-antd/src/views/bpm/processInstance/manager/index.vue

@@ -99,7 +99,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,

apps/web-antd/src/views/bpm/processInstance/report/index.vue

@@ -115,7 +115,7 @@ const createGrid = () => {
         keyField: 'id',
       },
       toolbarConfig: {
-        refresh: { code: 'query' },
+        refresh: true,
         search: true,
       },
       proxyConfig: {

apps/web-antd/src/views/bpm/processListener/index.vue

@@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<BpmProcessListenerApi.ProcessListener>,

apps/web-antd/src/views/bpm/task/copy/index.vue

@@ -48,7 +48,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {

apps/web-antd/src/views/bpm/task/done/index.vue

@@ -4,8 +4,10 @@ import type { BpmTaskApi } from '#/api/bpm/task';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
+import { message } from 'ant-design-vue';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getTaskDonePage } from '#/api/bpm/task';
+import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
 import { router } from '#/router';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -23,7 +25,15 @@ function handleHistory(row: BpmTaskApi.TaskManager) {
   });
 }
 
-const [Grid] = useVbenVxeGrid({
+/** 撤回任务 */
+async function handleWithdraw(row: BpmTaskApi.TaskManager) {
+  await withdrawTask(row.id);
+  message.success('撤回成功');
+  // 刷新表格数据
+  await gridApi.query();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
@@ -46,13 +56,13 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmTaskApi.Task>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 </script>
 
@@ -75,6 +85,13 @@ const [Grid] = useVbenVxeGrid({
       <template #actions="{ row }">
         <TableAction
           :actions="[
+            {
+              label: '撤回',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              color: 'warning',
+              onClick: handleWithdraw.bind(null, row),
+            },
             {
               label: '历史',
               type: 'link',

apps/web-antd/src/views/bpm/task/manager/index.vue

@@ -45,7 +45,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {

apps/web-antd/src/views/bpm/task/todo/index.vue

@@ -47,7 +47,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     cellConfig: {

apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue

@@ -55,7 +55,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmClueApi.Clue>,

apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue

@@ -77,7 +77,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContractApi.Contract>,

apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue

@@ -77,7 +77,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContractApi.Contract>,

apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue

@@ -55,7 +55,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,

apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue

@@ -55,7 +55,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,

apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue

@@ -65,7 +65,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,

apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue

@@ -72,7 +72,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivableApi.Receivable>,

apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue

@@ -72,7 +72,7 @@ const [Grid] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,

apps/web-antd/src/views/crm/business/index.vue

@@ -97,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessApi.Business>,

apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue

@@ -120,7 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessApi.Business>,

apps/web-antd/src/views/crm/business/modules/detail-list.vue

@@ -146,7 +146,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessApi.Business>,

apps/web-antd/src/views/crm/business/status/index.vue

@@ -72,7 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessStatusApi.BusinessStatus>,

apps/web-antd/src/views/crm/clue/index.vue

@@ -90,7 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmClueApi.Clue>,

apps/web-antd/src/views/crm/contact/index.vue

@@ -102,7 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContactApi.Contact>,

apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue

@@ -120,7 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContactApi.Contact>,

apps/web-antd/src/views/crm/contact/modules/detail-list.vue

@@ -143,7 +143,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContactApi.Contact>,

apps/web-antd/src/views/crm/contract/index.vue

@@ -139,7 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmContractApi.Contract>,

apps/web-antd/src/views/crm/contract/modules/detail-list.vue

@@ -93,7 +93,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmBusinessApi.Business>,

apps/web-antd/src/views/crm/customer/index.vue

@@ -108,7 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,

apps/web-antd/src/views/crm/customer/limitConfig/index.vue

@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerLimitConfigApi.CustomerLimitConfig>,

apps/web-antd/src/views/crm/customer/pool/index.vue

@@ -52,7 +52,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,

apps/web-antd/src/views/crm/followup/index.vue

@@ -132,7 +132,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
   } as VxeTableGridOptions<CrmFollowUpApi.FollowUpRecord>,
 });

apps/web-antd/src/views/crm/permission/modules/permission-list.vue

@@ -169,7 +169,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmPermissionApi.Permission>,

apps/web-antd/src/views/crm/product/category/index.vue

@@ -90,7 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
     },
     treeConfig: {
       parentField: 'parentId',

apps/web-antd/src/views/crm/product/index.vue

@@ -94,7 +94,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmProductApi.Product>,

apps/web-antd/src/views/crm/product/modules/detail-list.vue

@@ -42,7 +42,7 @@ const [Grid] = useVbenVxeGrid({
       },
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     keepSource: true,

apps/web-antd/src/views/crm/product/modules/product-table.vue

@@ -66,7 +66,7 @@ function handleUpdateValue(row: any) {
   } else {
     tableData.value[index] = row;
   }
-  emit('update:products', tableData.value);
+  emit('update:products', [...tableData.value]);
 }
 
 /** 表格配置 */

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

@@ -134,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivableApi.Receivable>,

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

@@ -91,7 +91,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivableApi.Receivable>,

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

@@ -113,7 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,

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

@@ -104,7 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,

apps/web-antd/src/views/erp/home/components/SummaryCard.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+
+import { computed } from 'vue';
+
+import { AnalysisOverview } from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+interface Props {
+  saleSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
+  purchaseSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  saleSummary: () => ({}),
+  purchaseSummary: () => ({}),
+});
+
+/** 概览数据 */
+// TODO @nehc：应该是有 8 个小卡片，少了 4 个？
+const overviewItems = computed<AnalysisOverviewItem[]>(() => [
+  {
+    icon: SvgCardIcon,
+    title: '今日销售',
+    totalTitle: '今日采购',
+    totalValue: props.purchaseSummary?.todayPrice || 0,
+    value: props.saleSummary?.todayPrice || 0,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '昨日销售',
+    totalTitle: '昨日采购',
+    totalValue: props.purchaseSummary?.yesterdayPrice || 0,
+    value: props.saleSummary?.yesterdayPrice || 0,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '本月销售',
+    totalTitle: '本月采购',
+    totalValue: props.purchaseSummary?.monthPrice || 0,
+    value: props.saleSummary?.monthPrice || 0,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '今年销售',
+    totalTitle: '今年采购',
+    totalValue: props.purchaseSummary?.yearPrice || 0,
+    value: props.saleSummary?.yearPrice || 0,
+  },
+]);
+</script>
+
+<template>
+  <AnalysisOverview :items="overviewItems" />
+</template>

apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import type { EChartsOption } from 'echarts';
+
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { ErpPurchaseStatisticsApi } from '#/api/erp/statistics/purchase';
+import type { ErpSaleStatisticsApi } from '#/api/erp/statistics/sale';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Card } from 'ant-design-vue';
+
+import {
+  getPurchaseSummary,
+  getPurchaseTimeSummary,
+} from '#/api/erp/statistics/purchase';
+import { getSaleSummary, getSaleTimeSummary } from '#/api/erp/statistics/sale';
+
+interface Props {
+  title: string;
+  type?: 'purchase' | 'sale';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'sale',
+});
+
+/** 销售统计数据 */
+const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
+const getSaleStatistics = async () => {
+  saleSummary.value = await getSaleSummary();
+  saleTimeSummaryList.value = await getSaleTimeSummary();
+};
+
+/** 采购统计数据 */
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
+const purchaseTimeSummaryList =
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
+const getPurchaseStatistics = async () => {
+  purchaseSummary.value = await getPurchaseSummary();
+  purchaseTimeSummaryList.value = await getPurchaseTimeSummary();
+};
+
+/** 获取当前类型的时段数据 */
+const currentTimeSummaryList = ref<Array<{ price: number; time: string }>>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 折线图配置 */
+const lineChartOptions: EChartsOption = {
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [
+    {
+      name: '金额',
+      type: 'line',
+      smooth: true,
+      areaStyle: {},
+      data: [],
+    },
+  ],
+  toolbox: {
+    feature: {
+      dataZoom: {
+        yAxisIndex: false,
+      },
+      brush: {
+        type: ['lineX', 'clear'],
+      },
+      saveAsImage: {
+        show: true,
+        name: props.title,
+      },
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+    data: [],
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+};
+
+/** 初始化数据 */
+const initData = async () => {
+  if (props.type === 'sale') {
+    await getSaleStatistics();
+    currentTimeSummaryList.value = saleTimeSummaryList.value;
+  } else {
+    await getPurchaseStatistics();
+    currentTimeSummaryList.value = purchaseTimeSummaryList.value;
+  }
+};
+
+/** 监听数据变化并更新图表 */
+watch(
+  () => currentTimeSummaryList.value,
+  (val) => {
+    if (!val || val.length === 0) {
+      return;
+    }
+
+    // 更新图表数据
+    const xAxisData = val.map((item) => item.time);
+    const seriesData = val.map((item) => item.price);
+
+    const options = {
+      ...lineChartOptions,
+      xAxis: {
+        ...lineChartOptions.xAxis,
+        data: xAxisData,
+      },
+      series: [
+        {
+          ...lineChartOptions.series![0],
+          data: seriesData,
+        },
+      ],
+    };
+
+    renderEcharts(options);
+  },
+  { immediate: true },
+);
+
+/** 组件挂载时初始化数据 */
+onMounted(() => {
+  initData();
+});
+
+/** 暴露数据给父组件使用 */
+defineExpose({
+  saleSummary,
+  purchaseSummary,
+  saleTimeSummaryList,
+  purchaseTimeSummaryList,
+});
+</script>
+
+<template>
+  <Card>
+    <template #title>
+      <span>{{ title }}</span>
+    </template>
+    <!-- 折线图 -->
+    <EchartsUI ref="chartRef" />
+  </Card>
+</template>

apps/web-antd/src/views/erp/home/index.vue

@@ -1,7 +1,21 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { DocAlert, Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Col, Row, Spin } from 'ant-design-vue';
+
+import SummaryCard from './components/SummaryCard.vue';
+import TimeSummaryChart from './components/TimeSummaryChart.vue';
+
+/** ERP首页 */
+defineOptions({ name: 'ErpHome' });
+
+const loading = ref(false); // 加载中
+
+/** 图表组件引用 */
+const saleChartRef = ref();
+const purchaseChartRef = ref();
 </script>
 
 <template>
@@ -12,23 +26,28 @@ import { Button } from 'ant-design-vue';
         url="https://doc.iocoder.cn/erp/build/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/home/index.vue"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/home/index.vue
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <Spin :spinning="loading">
+      <div class="flex flex-col gap-4">
+        <!-- 销售/采购的全局统计 -->
+        <SummaryCard />
+
+        <!-- 销售/采购的时段统计 -->
+        <Row :gutter="16">
+          <!-- 销售统计 -->
+          <Col :md="12" :sm="12" :xs="24">
+            <TimeSummaryChart ref="saleChartRef" title="销售统计" type="sale" />
+          </Col>
+          <!-- 采购统计 -->
+          <Col :md="12" :sm="12" :xs="24">
+            <TimeSummaryChart
+              ref="purchaseChartRef"
+              title="采购统计"
+              type="purchase"
+            />
+          </Col>
+        </Row>
+      </div>
+    </Spin>
   </Page>
 </template>

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

@@ -0,0 +1,427 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        style: { display: 'none' },
+      },
+      fieldName: 'id',
+      label: 'ID',
+      hideLabel: true,
+      formItemClass: 'hidden',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+      fieldName: 'no',
+      label: '订单单号',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      fieldName: 'supplierId',
+      label: '供应商',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择订单时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        style: { width: '100%' },
+      },
+      fieldName: 'orderTime',
+      label: '订单时间',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 2, maxRows: 4 },
+        class: 'w-full',
+      },
+      fieldName: 'remark',
+      label: '备注',
+      formItemClass: 'col-span-3',
+    },
+    {
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: true,
+      },
+      fieldName: 'fileUrl',
+      label: '附件',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'product',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        style: { width: '100%' },
+      },
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+      rules: z.number().min(0).optional(),
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '付款优惠',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'discountPrice',
+      label: '付款优惠',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'totalPrice',
+      label: '优惠后金额',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      fieldName: 'accountId',
+      label: '结算账户',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入支付订金',
+        precision: 2,
+        style: { width: '100%' },
+        min: 0,
+      },
+      fieldName: 'depositPrice',
+      label: '支付订金',
+      rules: z.number().min(0).optional(),
+    },
+  ];
+}
+
+/** 采购订单项表格列定义 */
+export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 100,
+      slots: { default: 'taxPercent' },
+    },
+    {
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      title: '税额合计',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始时间', '结束时间'],
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'returnStatus',
+      label: '退货状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未退货', value: 0 },
+          { label: '部分退货', value: 1 },
+          { label: '全部退货', value: 2 },
+        ],
+        placeholder: '请选择退货状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '订单单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'productNames',
+      title: '产品信息',
+      showOverflow: 'tooltip',
+      minWidth: 120,
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'orderTime',
+      title: '订单时间',
+      width: 160,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      minWidth: 120,
+    },
+    {
+      field: 'inCount',
+      title: '入库数量',
+      minWidth: 120,
+    },
+    {
+      field: 'returnCount',
+      title: '退货数量',
+      minWidth: 120,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatNumber',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatNumber',
+      minWidth: 120,
+    },
+    {
+      field: 'depositPrice',
+      title: '支付订金',
+      formatter: 'formatNumber',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

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

@@ -1,34 +1,268 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePurchaseOrder,
+  deletePurchaseOrderList,
+  exportPurchaseOrder,
+  getPurchaseOrderPage,
+  updatePurchaseOrderStatus,
+} from '#/api/erp/purchase/order';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import PurchaseOrderForm from './modules/form.vue';
+
+/** ERP 采购订单列表 */
+defineOptions({ name: 'ErpPurchaseOrder' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: PurchaseOrderForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+// TODO @nehc handleRowCheckboxChange 放的位置；
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpPurchaseOrderApi.PurchaseOrder[];
+}) {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 详情 */
+function handleDetail(row: ErpPurchaseOrderApi.PurchaseOrder) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
+/** 新增 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑 */
+function handleEdit(row: ErpPurchaseOrderApi.PurchaseOrder) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除 */
+async function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrder) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    if (row.id) await deletePurchaseOrder(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess'),
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } catch {
+    // 处理错误
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 批量删除 */
+// TODO @nehc handleBatchDelete 是不是和别的模块，一个风格
+async function handleBatchDelete() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deletePurchaseOrderList(checkedIds.value);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess'),
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } catch {
+    // 处理错误
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 审批/反审批操作 */
+function handleUpdateStatus(
+  row: ErpPurchaseOrderApi.PurchaseOrder,
+  status: number,
+) {
+  // TODO @nehc 是不是和别的模块，类似的 status 处理一个风格
+  const hideLoading = message.loading({
+    content: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  updatePurchaseOrderStatus(row.id, status)
+    .then(() => {
+      message.success({
+        content: `${status === 20 ? '审批' : '反审批'}成功`,
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      // 处理错误
+    })
+    .finally(() => {
+      hideLoading();
+    });
+}
+
+/** 导出 */
+async function handleExport() {
+  const data = await exportPurchaseOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '采购订单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPurchaseOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="【采购】采购订单、入库、退货"
         url="https://doc.iocoder.cn/erp/purchase/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="采购订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['采购订单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:purchase-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:purchase-order:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-order:delete'],
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleBatchDelete,
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:purchase-order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:purchase-order:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'link',
+              auth: ['erp:purchase-order:update-status'],
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              color: 'error',
+              auth: ['erp:purchase-order:delete'],
+              onClick: handleDelete.bind(null, row),
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

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

@@ -0,0 +1,363 @@
+<script lang="ts" setup>
+// TODO @nehc：看看整个逻辑，和 erp 风格的主子表，能不能更统一一些；
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { erpPriceMultiply } from '@vben/utils';
+
+import { Input, InputNumber, Select } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getStockCount } from '#/api/erp/stock/stock';
+
+import { usePurchaseOrderItemTableColumns } from '../data';
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+  discountPercent: 0,
+});
+
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:total-price',
+]);
+
+// TODO @nehc:这种一次性的，是不是可以不定义哈？
+interface Props {
+  items?: ErpPurchaseOrderApi.PurchaseOrderItem[];
+  disabled?: boolean;
+  discountPercent?: number;
+}
+
+const tableData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]);
+const productOptions = ref<any[]>([]);
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    editConfig: {
+      trigger: 'click',
+      mode: 'cell',
+    },
+    columns: usePurchaseOrderItemTableColumns(),
+    data: tableData.value,
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    minHeight: 250,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    await nextTick();
+    tableData.value = [...items];
+    await nextTick();
+    // TODO @nehc：这里，是不是直接 await 下？
+    gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 计算 discountPrice、totalPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPercent],
+  () => {
+    if (!tableData.value || tableData.value.length === 0) {
+      return;
+    }
+    const totalPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.totalPrice || 0),
+      0,
+    );
+    const discountPrice =
+      props.discountPercent === null
+        ? 0
+        : erpPriceMultiply(totalPrice, props.discountPercent / 100);
+    // TODO @nehc：这里的 idea 红色告警？
+    const finalTotalPrice = totalPrice - discountPrice;
+
+    // 发送计算结果给父组件
+    emit('update:discount-price', discountPrice);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+});
+
+function handleAdd() {
+  const newRow = {
+    productId: null,
+    productName: '',
+    productUnitId: null,
+    productUnitName: '',
+    productBarCode: '',
+    count: 1,
+    productPrice: 0,
+    totalProductPrice: 0,
+    taxPercent: 0,
+    taxPrice: 0,
+    totalPrice: 0,
+    stockCount: 0,
+    remark: '',
+  };
+  // TODO @nehc：这里的红色告警哈？
+  tableData.value.push(newRow);
+  gridApi.grid.insertAt(newRow, -1);
+  emit('update:items', [...tableData.value]);
+}
+
+function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
+  gridApi.grid.remove(row);
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+
+  const stockCount = await getStockCount(productId);
+
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = stockCount || 0;
+  row.productPrice = product.purchasePrice;
+  row.count = row.count || 1;
+
+  handlePriceChange(row);
+}
+
+function handlePriceChange(row: any) {
+  if (row.productPrice && row.count) {
+    row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+    row.taxPrice =
+      erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
+    row.totalPrice = row.totalProductPrice + row.taxPrice;
+  }
+  handleUpdateValue(row);
+}
+
+function handleUpdateValue(row: any) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+const getSummaries = (): {
+  count: number;
+  productName: string;
+  taxPrice: number;
+  totalPrice: number;
+  totalProductPrice: number;
+} => {
+  return {
+    productName: '合计',
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalProductPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalProductPrice || 0),
+      0,
+    ),
+    taxPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.taxPrice || 0),
+      0,
+    ),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+};
+
+const validate = async (): Promise<boolean> => {
+  try {
+    for (let i = 0; i < tableData.value.length; i++) {
+      const item = tableData.value[i];
+      if (item) {
+        if (!item.productId) {
+          throw new Error(`第 ${i + 1} 行：产品不能为空`);
+        }
+        if (!item.count || item.count <= 0) {
+          throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+        }
+        if (!item.productPrice || item.productPrice <= 0) {
+          throw new Error(`第 ${i + 1} 行：产品单价不能为空`);
+        }
+      }
+    }
+    return true;
+  } catch (error) {
+    console.error('验证失败:', error);
+    throw error;
+  }
+};
+
+const getData = (): ErpPurchaseOrderApi.PurchaseOrderItem[] => tableData.value;
+const init = (
+  items: ErpPurchaseOrderApi.PurchaseOrderItem[] | undefined,
+): void => {
+  tableData.value =
+    items && items.length > 0
+      ? items.map((item) => {
+          const newItem = { ...item };
+          if (newItem.productPrice && newItem.count) {
+            newItem.totalProductPrice =
+              erpPriceMultiply(newItem.productPrice, newItem.count) ?? 0;
+            newItem.taxPrice =
+              erpPriceMultiply(
+                newItem.totalProductPrice,
+                (newItem.taxPercent || 0) / 100,
+              ) ?? 0;
+            newItem.totalPrice = newItem.totalProductPrice + newItem.taxPrice;
+          }
+          return newItem;
+        })
+      : [];
+  nextTick(() => {
+    gridApi.grid.reloadData(tableData.value);
+  });
+};
+
+defineExpose({
+  validate,
+  getData,
+  init,
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #productId="{ row }">
+      <Select
+        v-if="!disabled"
+        v-model:value="row.productId"
+        :options="productOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+        style="width: 100%"
+        placeholder="请选择产品"
+        show-search
+        @change="handleProductChange($event, row)"
+      />
+      <span v-else>{{ row.productName || '-' }}</span>
+    </template>
+
+    <template #count="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.count"
+        :min="0"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.count || '-' }}</span>
+    </template>
+
+    <template #productPrice="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.productPrice"
+        :min="0"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.productPrice || '-' }}</span>
+    </template>
+
+    <template #taxPercent="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
+
+    <template #remark="{ row }">
+      <Input v-if="!disabled" v-model:value="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+
+    <template #bottom>
+      <div class="border-border bg-muted mt-2 rounded border p-2">
+        <div class="text-muted-foreground flex justify-between text-sm">
+          <span class="text-foreground font-medium">合计：</span>
+          <div class="flex space-x-4">
+            <span>数量：{{ getSummaries().count }}</span>
+            <span>金额：{{ getSummaries().totalProductPrice }}</span>
+            <span>税额：{{ getSummaries().taxPrice }}</span>
+            <span>税额合计：{{ getSummaries().totalPrice }}</span>
+          </div>
+        </div>
+      </div>
+
+      <TableAction
+        v-if="!disabled"
+        class="mt-4 flex justify-center"
+        :actions="[
+          {
+            label: '添加产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+
+    <template #actions="{ row }">
+      <TableAction
+        v-if="!disabled"
+        :actions="[
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

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

@@ -0,0 +1,218 @@
+<script lang="ts" setup>
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPurchaseOrder,
+  getPurchaseOrder,
+  updatePurchaseOrder,
+} from '#/api/erp/purchase/order';
+
+import { useFormSchema } from '../data';
+import PurchaseOrderItemForm from './PurchaseOrderItemForm.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpPurchaseOrderApi.PurchaseOrder>();
+const formType = ref('');
+const itemFormRef = ref();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') return '添加采购订单';
+  if (formType.value === 'update') return '编辑采购订单';
+  return '采购订单详情';
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    if (formData.value && changedFields.includes('discountPercent')) {
+      formData.value.discountPercent = values.discountPercent;
+    }
+  },
+});
+
+const handleUpdateItems = (items: ErpPurchaseOrderApi.PurchaseOrderItem[]) => {
+  formData.value = modalApi.getData<ErpPurchaseOrderApi.PurchaseOrder>();
+  if (formData.value) {
+    formData.value.items = items;
+  }
+};
+
+const handleUpdateDiscountPrice = (discountPrice: number) => {
+  if (formData.value) {
+    formData.value.discountPrice = discountPrice;
+    formApi.setValues({
+      discountPrice: formData.value.discountPrice,
+    });
+  }
+};
+
+const handleUpdateTotalPrice = (totalPrice: number) => {
+  if (formData.value) {
+    formData.value.totalPrice = totalPrice;
+    formApi.setValues({
+      totalPrice: formData.value.totalPrice,
+    });
+  }
+};
+
+// TODO @nehc：这里的注释使用 /** */ 和别的模块一致哈；
+/**
+ * 创建或更新采购订单
+ */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    await nextTick();
+
+    // TODO @nehc：应该不会不存在，直接校验，简洁一点！另外，可以看看别的模块，主子表的处理哈；
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    if (itemFormInstance && typeof itemFormInstance.validate === 'function') {
+      try {
+        const isValid = await itemFormInstance.validate();
+        if (!isValid) {
+          message.error('子表单验证失败');
+          return;
+        }
+      } catch (error) {
+        // TODO @nehc：这里的红色告警，看看怎么处理掉
+        message.error(error.message || '子表单验证失败');
+        return;
+      }
+    } else {
+      message.error('子表单验证方法不存在');
+      return;
+    }
+
+    // 验证产品清单不能为空
+    if (!formData.value?.items || formData.value.items.length === 0) {
+      message.error('产品清单不能为空，请至少添加一个产品');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as ErpPurchaseOrderApi.PurchaseOrder;
+    data.items = formData.value?.items;
+    // 将文件数组转换为字符串
+    if (data.fileUrl && Array.isArray(data.fileUrl)) {
+      data.fileUrl = data.fileUrl.length > 0 ? data.fileUrl[0] : '';
+    }
+    try {
+      await (formType.value === 'create'
+        ? createPurchaseOrder(data)
+        : updatePurchaseOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success(formType.value === 'create' ? '新增成功' : '更新成功');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    if (!data) {
+      return;
+    }
+    formType.value = data.type;
+
+    if (!data.id) {
+      // 初始化空的表单数据
+      formData.value = { items: [] } as ErpPurchaseOrderApi.PurchaseOrder;
+      await nextTick();
+      // TODO @nehc：看看有没办法简化
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init([]);
+      }
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      formData.value = await getPurchaseOrder(data.id);
+      // 将字符串形式的文件 URL 转换为数组形式以适配 FileUpload 组件
+      // TODO @nehc：这里的 idea 会有黄色告警，看看是不是简化下？
+      // TODO @nehc：记忆中，好像不用数组的转换，可以在看看？
+      if (
+        formData.value.fileUrl &&
+        typeof formData.value.fileUrl === 'string'
+      ) {
+        formData.value.fileUrl = formData.value.fileUrl
+          ? [formData.value.fileUrl]
+          : [];
+      }
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      // 初始化子表单
+      await nextTick();
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init(formData.value.items || []);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+defineExpose({ modalApi });
+</script>
+
+<template>
+  <Modal
+    v-bind="$attrs"
+    :title="getTitle"
+    class="w-1/2"
+    :closable="true"
+    :mask-closable="true"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #product="slotProps">
+        <PurchaseOrderItemForm
+          v-bind="slotProps"
+          ref="itemFormRef"
+          class="w-full"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          :discount-percent="formData?.discountPercent ?? 0"
+          @update:items="handleUpdateItems"
+          @update:discount-price="handleUpdateDiscountPrice"
+          @update:total-price="handleUpdateTotalPrice"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>

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

@@ -0,0 +1,233 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'contact',
+      label: '联系人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      },
+    },
+    {
+      fieldName: 'telephone',
+      label: '联系电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系电话',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '电子邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入电子邮箱',
+      },
+    },
+    {
+      fieldName: 'fax',
+      label: '传真',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入传真',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        precision: 0,
+        class: 'w-full',
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'taxNo',
+      label: '纳税人识别号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入纳税人识别号',
+      },
+    },
+    {
+      fieldName: 'taxPercent',
+      label: '税率(%)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入税率',
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+    },
+    {
+      fieldName: 'bankName',
+      label: '开户行',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入开户行',
+      },
+    },
+    {
+      fieldName: 'bankAccount',
+      label: '开户账号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入开户账号',
+      },
+    },
+    {
+      fieldName: 'bankAddress',
+      label: '开户地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入开户地址',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'telephone',
+      label: '联系电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系电话',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '供应商名称',
+      minWidth: 150,
+    },
+    {
+      field: 'contact',
+      title: '联系人',
+      minWidth: 120,
+    },
+    {
+      field: 'mobile',
+      title: '手机号码',
+      minWidth: 130,
+    },
+    {
+      field: 'telephone',
+      title: '联系电话',
+      minWidth: 130,
+    },
+    {
+      field: 'email',
+      title: '电子邮箱',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 80,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      fixed: 'right',
+      width: 160,
+      slots: { default: 'actions' },
+    },
+  ];
+}

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

@@ -1,34 +1,156 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
 
-import { Button } from 'ant-design-vue';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSupplier,
+  exportSupplier,
+  getSupplierPage,
+} from '#/api/erp/purchase/supplier';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import SupplierForm from './modules/form.vue';
+
+/** 供应商管理 */
+defineOptions({ name: 'ErpSupplier' });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 添加供应商 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑供应商 */
+function handleEdit(row: ErpSupplierApi.Supplier) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除供应商 */
+async function handleDelete(row: ErpSupplierApi.Supplier) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteSupplier(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+/** 导出供应商 */
+async function handleExport() {
+  const data = await exportSupplier(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '供应商.xls', source: data });
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: SupplierForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSupplierPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpSupplierApi.Supplier>,
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="【采购】采购订单、入库、退货"
         url="https://doc.iocoder.cn/erp/purchase/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/supplier/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/supplier/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="供应商列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['供应商']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:supplier:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:supplier:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:supplier:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:supplier:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

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

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createSupplier,
+  getSupplier,
+  updateSupplier,
+} from '#/api/erp/purchase/supplier';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formType = ref<'create' | 'update'>('create');
+const supplierId = ref<number>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpSupplierApi.Supplier;
+    try {
+      if (formType.value === 'create') {
+        await createSupplier(data);
+        message.success($t('ui.actionMessage.createSuccess'));
+      } else {
+        await updateSupplier(data);
+        message.success($t('ui.actionMessage.updateSuccess'));
+      }
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: 'create' | 'update' }>();
+    if (!data) {
+      return;
+    }
+    formType.value = data.type;
+    supplierId.value = data.id;
+
+    modalApi.lock();
+    try {
+      if (data.type === 'update' && data.id) {
+        // 编辑模式，加载数据
+        const supplierData = await getSupplier(data.id);
+        await formApi.setValues(supplierData);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+defineExpose({
+  modalApi,
+});
+</script>
+
+<template>
+  <Modal
+    :title="formType === 'create' ? '新增供应商' : '编辑供应商'"
+    class="w-3/5"
+  >
+    <Form class="mx-4" />
+  </Modal>
+</template>

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

@@ -0,0 +1,297 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { createRequiredValidation } from '#/adapter/vxe-table';
+import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        style: { display: 'none' },
+      },
+      fieldName: 'id',
+      label: 'ID',
+      hideLabel: true,
+      formItemClass: 'hidden',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+      fieldName: 'no',
+      label: '入库单号',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      fieldName: 'supplierId',
+      label: '供应商',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择入库时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        style: { width: '100%' },
+      },
+      fieldName: 'inTime',
+      label: '入库时间',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 2, maxRows: 4 },
+        class: 'w-full',
+      },
+      fieldName: 'remark',
+      label: '备注',
+      formItemClass: 'col-span-3',
+    },
+    {
+      component: 'FileUpload',
+      componentProps: {
+        maxNumber: 1,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: true,
+      },
+      fieldName: 'fileUrl',
+      label: '附件',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'product',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
+    },
+  ];
+}
+
+/** 入库产品清单表格列定义 */
+export function useStockInItemTableColumns(
+  isValidating?: any,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
+    {
+      field: 'warehouseId',
+      title: '仓库名称',
+      minWidth: 150,
+      slots: { default: 'warehouseId' },
+      className: createRequiredValidation(isValidating, 'warehouseId'),
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+      className: createRequiredValidation(isValidating, 'productId'),
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 100,
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      slots: { default: 'count' },
+      className: createRequiredValidation(isValidating, 'count'),
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalPrice',
+      title: '金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      title: '操作',
+      width: 50,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '入库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+    {
+      fieldName: 'inTime',
+      label: '入库时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '入库单号',
+      minWidth: 180,
+    },
+    {
+      field: 'productNames',
+      title: '产品信息',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'inTime',
+      title: '入库时间',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDateTime',
+      },
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 90,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 300,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

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

@@ -1,34 +1,220 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockInApi } from '#/api/erp/stock/in';
 
-import { Button } from 'ant-design-vue';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteStockIn,
+  exportStockIn,
+  getStockInPage,
+  updateStockInStatus,
+} from '#/api/erp/stock/in';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import StockInForm from './modules/form.vue';
+
+/** 其它入库单管理 */
+defineOptions({ name: 'ErpStockIn' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: StockInForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出入库单 */
+async function handleExport() {
+  const data = await exportStockIn(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '其它入库单.xls', source: data });
+}
+
+/** 新增/编辑/详情 */
+function openForm(type: string, id?: number) {
+  formModalApi.setData({ type, id }).open();
+}
+
+/** 删除 */
+async function handleDelete(ids: any[]) {
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteStockIn(ids);
+    message.success({
+      content: '删除成功',
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 审核/反审核 */
+async function handleUpdateStatus(id: any, status: number) {
+  const statusText = status === 20 ? '审核' : '反审核';
+  const hideLoading = message.loading({
+    content: `${statusText}中...`,
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await updateStockInStatus({ id, status });
+    message.success({
+      content: `${statusText}成功`,
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockInPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    checkboxConfig: {
+      reserve: true,
+    },
+  } as VxeTableGridOptions<ErpStockInApi.StockIn>,
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="【库存】其它入库、其它出库"
         url="https://doc.iocoder.cn/erp/stock-in-out/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/in/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/in/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <Grid table-title="其它入库单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['其它入库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:stock-in:create'],
+              onClick: () => openForm('create'),
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'default',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock-in:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'default',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:stock-in:delete'],
+              popConfirm: {
+                title: '是否删除所选中数据？',
+                confirm: () => {
+                  const checkboxRecords = gridApi.grid.getCheckboxRecords();
+                  if (checkboxRecords.length === 0) {
+                    message.warning('请选择要删除的数据');
+                    return;
+                  }
+                  handleDelete(checkboxRecords.map((item) => item.id));
+                },
+              },
+            },
+          ]"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:stock-in:query'],
+              onClick: () => openForm('detail', row.id),
+            },
+            {
+              label: '编辑',
+              auth: ['erp:stock-in:update'],
+              icon: ACTION_ICON.EDIT,
+              disabled: row.status !== 10,
+              onClick: () => openForm('update', row.id),
+            },
+            {
+              label: '审核',
+              auth: ['erp:stock-in:update'],
+              ifShow: row.status === 10,
+              popConfirm: {
+                title: '确认要审核该入库单吗？',
+                confirm: () => handleUpdateStatus(row.id, 20),
+              },
+            },
+            {
+              label: '反审核',
+              danger: true,
+              auth: ['erp:stock-in:update'],
+              ifShow: row.status === 20,
+              popConfirm: {
+                title: '确认要反审核该入库单吗？',
+                confirm: () => handleUpdateStatus(row.id, 10),
+              },
+            },
+            {
+              label: '删除',
+              danger: true,
+              auth: ['erp:stock-in:delete'],
+              disabled: row.status !== 10,
+              popConfirm: {
+                title: '确认要删除该入库单吗？',
+                confirm: () => handleDelete([row.id]),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 表单弹窗 -->
+    <FormModal @success="onRefresh" />
   </Page>
 </template>

apps/web-antd/src/views/erp/stock/in/modules/StockInItemForm.vue

@@ -0,0 +1,363 @@
+<script lang="ts" setup>
+// TODO @nehc：这里的组件名
+import type { ErpStockInApi } from '#/api/erp/stock/in';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { erpPriceMultiply } from '@vben/utils';
+
+import { Input, InputNumber, Select } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getStockCount } from '#/api/erp/stock/stock';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+import { useStockInItemTableColumns } from '../data';
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+});
+
+const emit = defineEmits(['update:items']);
+
+interface Props {
+  items?: ErpStockInApi.StockInItem[];
+  disabled?: boolean;
+}
+
+const tableData = ref<ErpStockInApi.StockInItem[]>([]);
+const productOptions = ref<any[]>([]);
+const warehouseOptions = ref<any[]>([]);
+const isValidating = ref(false);
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    editConfig: {
+      trigger: 'click',
+      mode: 'cell',
+    },
+    columns: useStockInItemTableColumns(isValidating),
+    data: tableData.value,
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    minHeight: 250,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    showFooter: true,
+    footerCellClassName: 'stock-in-footer-cell',
+    footerMethod: ({ columns }) => {
+      const footers: any[][] = [];
+      const sums = getSummaries();
+      const footerData: any[] = [];
+      columns.forEach((column, columnIndex) => {
+        if (columnIndex === 0) {
+          footerData.push('合计');
+        } else if (column.field === 'count') {
+          footerData.push(sums.count);
+        } else if (column.field === 'totalPrice') {
+          footerData.push(sums.totalPrice);
+        } else {
+          footerData.push('');
+        }
+      });
+      footers.push(footerData);
+      return footers;
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    await nextTick();
+    tableData.value = [...items];
+    await nextTick();
+    gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+});
+
+function handleAdd() {
+  const newRow = {
+    warehouseId: null,
+    productId: null,
+    productName: '',
+    productUnitId: null,
+    productUnitName: '',
+    productBarCode: '',
+    count: 1,
+    productPrice: 0,
+    totalPrice: 0,
+    stockCount: 0,
+    remark: '',
+  };
+  tableData.value.push(newRow);
+  gridApi.grid.insertAt(newRow, -1);
+  emit('update:items', [...tableData.value]);
+  // 触发表格重新渲染以更新cellClassName
+  nextTick(() => {
+    gridApi.grid.refreshColumn();
+  });
+}
+
+function handleDelete(row: ErpStockInApi.StockInItem) {
+  gridApi.grid.remove(row);
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+async function handleWarehouseChange(warehouseId: any, row: any) {
+  const warehouse = warehouseOptions.value.find((w) => w.id === warehouseId);
+  if (!warehouse) {
+    return;
+  }
+
+  row.warehouseId = warehouseId;
+
+  // 如果已选择产品，重新获取库存
+  if (row.productId) {
+    const stockCount = await getStockCount(row.productId, warehouseId);
+    row.stockCount = stockCount || 0;
+  }
+
+  handleUpdateValue(row);
+}
+
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+
+  // 获取库存数量
+  const stockCount = row.warehouseId
+    ? await getStockCount(productId, row.warehouseId)
+    : await getStockCount(productId);
+
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = stockCount || 0;
+  row.productPrice = product.purchasePrice || 0;
+  row.count = row.count || 1;
+
+  handlePriceChange(row);
+}
+
+function handlePriceChange(row: any) {
+  if (row.productPrice && row.count) {
+    row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+  }
+  handleUpdateValue(row);
+}
+
+function handleUpdateValue(row: any) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+  // 触发表格重新渲染以更新cellClassName
+  nextTick(() => {
+    gridApi.grid.refreshColumn();
+  });
+}
+
+const getSummaries = (): {
+  count: number;
+  totalPrice: number;
+} => {
+  return {
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+};
+
+/** 验证表单 */
+function validate(): Promise<boolean> {
+  return new Promise((resolve) => {
+    isValidating.value = true;
+
+    // 触发表格重新渲染以显示验证错误
+    nextTick(() => {
+      gridApi.grid.refreshColumn();
+    });
+
+    // 验证是否有产品清单
+    if (!tableData.value || tableData.value.length === 0) {
+      resolve(false);
+      return;
+    }
+
+    // 验证每一行的必填字段
+    for (const item of tableData.value) {
+      if (
+        !item.warehouseId ||
+        !item.productId ||
+        !item.count ||
+        item.count <= 0
+      ) {
+        resolve(false);
+        return;
+      }
+    }
+
+    // 验证通过，清除验证状态
+    isValidating.value = false;
+    nextTick(() => {
+      gridApi.grid.refreshColumn();
+    });
+
+    resolve(true);
+  });
+}
+
+/** 初始化表格数据 */
+function init(items: ErpStockInApi.StockInItem[]) {
+  tableData.value = items || [];
+  gridApi.grid.reloadData(tableData.value);
+}
+
+defineExpose({
+  validate,
+  init,
+  handleAdd,
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4 flex justify-between">
+      <span class="text-lg font-medium"></span>
+    </div>
+
+    <Grid>
+      <template #warehouseId="{ row }">
+        <Select
+          v-model:value="row.warehouseId"
+          :options="warehouseOptions"
+          :field-names="{ label: 'name', value: 'id' }"
+          placeholder="请选择仓库"
+          :disabled="disabled"
+          show-search
+          @change="(value) => handleWarehouseChange(value, row)"
+          class="w-full"
+        />
+      </template>
+
+      <template #productId="{ row }">
+        <Select
+          v-model:value="row.productId"
+          :options="productOptions"
+          :field-names="{ label: 'name', value: 'id' }"
+          placeholder="请选择产品"
+          :disabled="disabled"
+          show-search
+          @change="(value) => handleProductChange(value, row)"
+          class="w-full"
+        />
+      </template>
+
+      <template #count="{ row }">
+        <InputNumber
+          v-model:value="row.count"
+          :disabled="disabled"
+          :min="0.001"
+          :precision="3"
+          @change="() => handlePriceChange(row)"
+          class="w-full"
+        />
+      </template>
+
+      <template #productPrice="{ row }">
+        <InputNumber
+          v-model:value="row.productPrice"
+          :disabled="disabled"
+          :min="0.01"
+          :precision="2"
+          @change="() => handlePriceChange(row)"
+          class="w-full"
+        />
+      </template>
+
+      <template #remark="{ row }">
+        <Input
+          v-model:value="row.remark"
+          :disabled="disabled"
+          placeholder="请输入备注"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          v-if="!disabled"
+          :actions="[
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该产品吗？',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+
+      <template #bottom>
+        <TableAction
+          v-if="!disabled"
+          class="mt-4 flex justify-center"
+          :actions="[
+            {
+              label: '添加产品',
+              type: 'default',
+              onClick: handleAdd,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
+
+<style scoped>
+:deep(.vxe-table .vxe-footer--column.stock-in-footer-cell .vxe-cell) {
+  background-color: #f5f5f5 !important;
+}
+</style>

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

@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import type { ErpStockInApi } from '#/api/erp/stock/in';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createStockIn,
+  getStockIn,
+  updateStockIn,
+  updateStockInStatus,
+} from '#/api/erp/stock/in';
+
+import { useFormSchema } from '../data';
+import StockInItemForm from './StockInItemForm.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpStockInApi.StockIn>();
+const formType = ref('');
+const itemFormRef = ref();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') return '添加其它入库单';
+  if (formType.value === 'update') return '编辑其它入库单';
+  return '其它入库单详情';
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const handleUpdateItems = (items: ErpStockInApi.StockInItem[]) => {
+  formData.value = modalApi.getData<ErpStockInApi.StockIn>();
+  if (formData.value) {
+    formData.value.items = items;
+  }
+};
+
+/**
+ * 创建或更新其它入库单
+ */
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    await nextTick();
+
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    if (itemFormInstance && typeof itemFormInstance.validate === 'function') {
+      try {
+        const isValid = await itemFormInstance.validate();
+        if (!isValid) {
+          message.error('产品清单验证失败，请检查必填项');
+          return;
+        }
+      } catch (error) {
+        message.error(error.message || '产品清单验证失败');
+        return;
+      }
+    } else {
+      message.error('产品清单验证方法不存在');
+      return;
+    }
+
+    // 验证产品清单不能为空
+    if (!formData.value?.items || formData.value.items.length === 0) {
+      message.error('产品清单不能为空，请至少添加一个产品');
+      return;
+    }
+
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpStockInApi.StockIn;
+    data.items = formData.value?.items;
+    // 将文件数组转换为字符串
+    if (data.fileUrl && Array.isArray(data.fileUrl)) {
+      data.fileUrl = data.fileUrl.length > 0 ? data.fileUrl[0] : '';
+    }
+    try {
+      await (formType.value === 'create'
+        ? createStockIn(data)
+        : updateStockIn(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success(formType.value === 'create' ? '新增成功' : '更新成功');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    if (!data) {
+      return;
+    }
+    formType.value = data.type;
+
+    if (!data.id) {
+      // 初始化空的表单数据
+      formData.value = { items: [] } as ErpStockInApi.StockIn;
+      await nextTick();
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init([]);
+      }
+      // 如果是新增，自动添加一行
+      if (formType.value === 'create' && itemFormInstance) {
+        itemFormInstance.handleAdd();
+      }
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      formData.value = await getStockIn(data.id);
+      // 将字符串形式的文件URL转换为数组形式以适配FileUpload组件
+      if (
+        formData.value.fileUrl &&
+        typeof formData.value.fileUrl === 'string'
+      ) {
+        formData.value.fileUrl = formData.value.fileUrl
+          ? [formData.value.fileUrl]
+          : [];
+      }
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      // 初始化子表单
+      await nextTick();
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init(formData.value.items || []);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 审核/反审核 */
+async function handleUpdateStatus(id: number, status: number) {
+  try {
+    await updateStockInStatus({ id, status });
+    message.success(status === 20 ? '审核成功' : '反审核成功');
+    emit('success');
+    await modalApi.close();
+  } catch (error) {
+    message.error(error.message || '操作失败');
+  }
+}
+
+defineExpose({ modalApi, handleUpdateStatus });
+</script>
+
+<template>
+  <Modal
+    v-bind="$attrs"
+    :title="getTitle"
+    class="w-4/5"
+    :closable="true"
+    :mask-closable="true"
+    :show-confirm-button="formType !== 'detail'"
+  >
+    <Form class="mx-3">
+      <template #product="slotProps">
+        <StockInItemForm
+          v-bind="slotProps"
+          ref="itemFormRef"
+          class="w-full"
+          :items="formData?.items ?? []"
+          :disabled="formType === 'detail'"
+          @update:items="handleUpdateItems"
+        />
+      </template>
+    </Form>
+  </Modal>
+</template>

apps/web-antd/src/views/erp/stock/record/data.ts

@@ -0,0 +1,146 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+    {
+      fieldName: 'bizType',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择类型',
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'bizNo',
+      label: '业务单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入业务单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 150,
+    },
+    {
+      field: 'categoryName',
+      title: '产品分类',
+      width: 120,
+    },
+    {
+      field: 'unitName',
+      title: '产品单位',
+      width: 100,
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      width: 120,
+    },
+    {
+      field: 'bizType',
+      title: '类型',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE },
+      },
+    },
+    {
+      field: 'bizNo',
+      title: '出入库单号',
+      width: 200,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'createTime',
+      title: '出入库日期',
+      width: 180,
+      cellRender: {
+        name: 'CellDateTime',
+      },
+    },
+    {
+      field: 'count',
+      title: '出入库数量',
+      width: 120,
+      cellRender: {
+        name: 'CellAmount',
+        props: {
+          digits: 2,
+        },
+      },
+    },
+    {
+      field: 'totalCount',
+      title: '库存量',
+      width: 100,
+      cellRender: {
+        name: 'CellAmount',
+        props: {
+          digits: 2,
+        },
+      },
+    },
+    {
+      field: 'creatorName',
+      title: '操作人',
+      width: 100,
+    },
+  ];
+}

apps/web-antd/src/views/erp/stock/record/index.vue

@@ -1,32 +1,78 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockRecordApi } from '#/api/erp/stock/record';
 
-import { Button } from 'ant-design-vue';
+import { DocAlert, Page } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportStockRecord, getStockRecordPage } from '#/api/erp/stock/record';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 产品库存明细管理 */
+defineOptions({ name: 'ErpStockRecord' });
+
+/** 导出库存明细 */
+async function handleExport() {
+  const data = await exportStockRecord(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品库存明细.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockRecordApi.StockRecord>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【库存】产品库存、库存明细"
-      url="https://doc.iocoder.cn/erp/stock/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/record/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/record/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】产品库存、库存明细"
+        url="https://doc.iocoder.cn/erp/stock/"
+      />
+    </template>
+
+    <Grid table-title="产品库存明细列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock-record:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

apps/web-antd/src/views/erp/stock/stock/data.ts

@@ -0,0 +1,76 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择仓库',
+        allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        filterOption: false,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 150,
+    },
+    {
+      field: 'unitName',
+      title: '产品单位',
+      minWidth: 100,
+    },
+    {
+      field: 'categoryName',
+      title: '产品分类',
+      minWidth: 120,
+    },
+    {
+      field: 'count',
+      title: '库存量',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellAmount',
+        props: {
+          digits: 2,
+        },
+      },
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 120,
+    },
+  ];
+}

apps/web-antd/src/views/erp/stock/stock/index.vue

@@ -1,32 +1,78 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpStockApi } from '#/api/erp/stock/stock';
 
-import { Button } from 'ant-design-vue';
+import { DocAlert, Page } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportStock, getStockPage } from '#/api/erp/stock/stock';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 产品库存管理 */
+defineOptions({ name: 'ErpStock' });
+
+/** 导出库存 */
+async function handleExport() {
+  const data = await exportStock(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品库存.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getStockPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpStockApi.Stock>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【库存】产品库存、库存明细"
-      url="https://doc.iocoder.cn/erp/stock/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/stock/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/stock/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】产品库存、库存明细"
+        url="https://doc.iocoder.cn/erp/stock/"
+      />
+    </template>
+
+    <Grid table-title="产品库存列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:stock:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

apps/web-antd/src/views/erp/stock/warehouse/data.ts

@@ -0,0 +1,214 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '仓库名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'address',
+      label: '仓库地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库地址',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'warehousePrice',
+      label: '仓储费(元)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入仓储费，单位：元/天/KG',
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+    },
+    {
+      fieldName: 'truckagePrice',
+      label: '搬运费(元)',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入搬运费，单位：元',
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+    },
+    {
+      fieldName: 'principal',
+      label: '负责人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入负责人',
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        precision: 0,
+        class: 'w-full',
+      },
+      rules: 'required',
+      defaultValue: 0,
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '仓库名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '仓库状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择仓库状态',
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = ErpWarehouseApi.Warehouse>(
+  onDefaultStatusChange?: (
+    newStatus: boolean,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '仓库名称',
+      minWidth: 150,
+    },
+    {
+      field: 'address',
+      title: '仓库地址',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'warehousePrice',
+      title: '仓储费(元)',
+      width: 120,
+      cellRender: {
+        name: 'CellMoney',
+      },
+    },
+    {
+      field: 'truckagePrice',
+      title: '搬运费(元)',
+      width: 120,
+      cellRender: {
+        name: 'CellMoney',
+      },
+    },
+    {
+      field: 'principal',
+      title: '负责人',
+      width: 100,
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 80,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'defaultStatus',
+      title: '是否默认',
+      width: 100,
+      cellRender: {
+        attrs: { beforeChange: onDefaultStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: true,
+          unCheckedValue: false,
+        },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      cellRender: {
+        name: 'CellDateTime',
+      },
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-antd/src/views/erp/stock/warehouse/index.vue

@@ -1,32 +1,180 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
 
-import { Button } from 'ant-design-vue';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWarehouse,
+  exportWarehouse,
+  getWarehousePage,
+  updateWarehouseDefaultStatus,
+} from '#/api/erp/stock/warehouse';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import WarehouseForm from './modules/form.vue';
+
+/** 仓库管理 */
+defineOptions({ name: 'ErpWarehouse' });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 添加仓库 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑仓库 */
+function handleEdit(row: ErpWarehouseApi.Warehouse) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除仓库 */
+async function handleDelete(row: ErpWarehouseApi.Warehouse) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteWarehouse(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+/** 修改默认状态 */
+async function handleDefaultStatusChange(
+  newStatus: boolean,
+  row: ErpWarehouseApi.Warehouse,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newStatus ? '开启' : '取消';
+
+    confirm({
+      content: `确认要${text}"${row.name}"默认吗?`,
+    })
+      .then(async () => {
+        // 更新默认状态
+        await updateWarehouseDefaultStatus(row.id!, newStatus);
+        message.success(`${text}默认状态成功`);
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 导出仓库 */
+async function handleExport() {
+  const data = await exportWarehouse(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '仓库.xls', source: data });
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: WarehouseForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleDefaultStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWarehousePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ErpWarehouseApi.Warehouse>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【库存】产品库存、库存明细"
-      url="https://doc.iocoder.cn/erp/stock/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/warehouse/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/warehouse/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】产品库存、库存明细"
+        url="https://doc.iocoder.cn/erp/stock/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="仓库列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['仓库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:warehouse:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:warehouse:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:warehouse:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:warehouse:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

apps/web-antd/src/views/erp/stock/warehouse/modules/form.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { ErpWarehouseApi } from '#/api/erp/stock/warehouse';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWarehouse,
+  getWarehouse,
+  updateWarehouse,
+} from '#/api/erp/stock/warehouse';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formType = ref<'create' | 'update'>('create');
+const warehouseId = ref<number>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as ErpWarehouseApi.Warehouse;
+    try {
+      if (formType.value === 'create') {
+        await createWarehouse(data);
+        message.success($t('ui.actionMessage.createSuccess'));
+      } else {
+        await updateWarehouse(data);
+        message.success($t('ui.actionMessage.updateSuccess'));
+      }
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: 'create' | 'update' }>();
+    if (!data) {
+      return;
+    }
+    formType.value = data.type;
+    warehouseId.value = data.id;
+
+    modalApi.lock();
+    try {
+      if (data.type === 'update' && data.id) {
+        const warehouseData = await getWarehouse(data.id);
+        await formApi.setValues(warehouseData);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+defineExpose({
+  modalApi,
+});
+</script>
+
+<template>
+  <Modal :title="formType === 'create' ? '新增仓库' : '编辑仓库'" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-antd/src/views/infra/apiAccessLog/index.vue

@@ -59,7 +59,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraApiAccessLogApi.ApiAccessLog>,

apps/web-antd/src/views/infra/apiErrorLog/index.vue

@@ -75,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraApiErrorLogApi.ApiErrorLog>,

apps/web-antd/src/views/infra/codegen/index.vue

@@ -175,7 +175,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraCodegenApi.CodegenTable>,

apps/web-antd/src/views/infra/config/index.vue

@@ -115,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<InfraConfigApi.Config>,

apps/web-antd/src/views/infra/demo/demo01/index.vue

@@ -114,7 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,

apps/web-antd/src/views/infra/demo/demo02/index.vue

@@ -105,7 +105,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo02CategoryApi.Demo02Category>,

apps/web-antd/src/views/infra/demo/demo03/erp/index.vue

@@ -142,7 +142,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isCurrent: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue

@@ -133,7 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       enabled: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     height: '600px',

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue

@@ -133,7 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       enabled: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
     height: '600px',

apps/web-antd/src/views/infra/demo/demo03/inner/index.vue

@@ -140,7 +140,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     toolbarConfig: {
-      refresh: { code: 'query' },
+      refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,