fix: 诊所和药店分开管理

apps/web-antd/src/views/business/product/health-food/api/index.ts

@@ -0,0 +1,79 @@
+// 导入请求客户端
+import { requestClient } from '#/api/request';
+
+// API前缀：保健食品管理接口路径
+const prefix = 'health-food/';
+
+/**
+ * 分页查询保健食品列表
+ * @param data - 查询参数对象，包含分页信息和其他筛选条件
+ * @returns 返回保健食品列表数据
+ */
+export async function getHealthFoodList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取保健食品下拉选项列表
+ * 用于下拉选择框等场景
+ * @param data - 查询参数对象
+ * @returns 返回保健食品选项列表
+ */
+export async function getHealthFoodOption(data: any) {
+  return requestClient.get<any>(`${prefix}option`, { params: data });
+}
+
+/**
+ * 获取保健食品详情
+ * @param id - 保健食品ID
+ * @returns 返回保健食品详细信息
+ */
+export async function getHealthFoodInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 导出保健食品数据
+ * 将保健食品数据导出为Excel文件
+ * @returns 返回Excel文件数据流
+ */
+export async function exportHealthFoodApi() {
+  return requestClient.download(`${prefix}export`);
+}
+
+/**
+ * 新增保健食品
+ * @param data - 保健食品数据对象，包含所有必填字段
+ * @returns 返回创建结果
+ */
+export async function createHealthFood(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑保健食品
+ * @param data - 保健食品数据对象，必须包含id字段
+ * @returns 返回更新结果
+ */
+export async function updateHealthFood(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除保健食品
+ * @param data - 删除参数对象，包含ids数组（要删除的保健食品ID列表）
+ * @returns 返回删除结果
+ */
+export async function deleteHealthFood(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}
+
+/**
+ * 导入保健食品数据
+ * 通过Excel文件批量导入保健食品数据
+ * @param data - 上传参数对象，包含file字段（Excel文件）
+ * @returns 返回导入结果
+ */
+export async function importHealthFoodApi(data: Record<string, any>) {
+  return requestClient.upload(`${prefix}import`, data);
+}

apps/web-antd/src/views/business/product/health-food/components/ExcelUpload.vue

@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+// 导入Vue响应式API
+import { ref } from 'vue';
+
+// 导入Vben UI组件
+import { useVbenModal } from '@vben/common-ui';
+
+// 导入Ant Design Vue组件
+import { message, UploadDragger, type UploadFile } from 'ant-design-vue';
+
+// 导入保健食品导入API
+import { importHealthFoodApi } from '../api';
+
+// 表格API实例，用于导入成功后刷新表格
+const gridApi = ref();
+// 文件列表
+const fileList = ref<UploadFile[]>([]);
+// 选中的文件对象
+const selectedFile = ref<File | null>(null);
+// 是否有文件被选中的标记
+const isFileSelected = ref(false);
+
+// 初始化弹窗组件
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false, // 不显示全屏按钮
+  draggable: true, // 可拖拽
+  // 取消按钮回调
+  onCancel() {
+    // 重置文件状态
+    selectedFile.value = null;
+    isFileSelected.value = false;
+    fileList.value = [];
+    modalApi.close();
+  },
+  // 确认按钮回调：上传Excel文件
+  onConfirm: async () => {
+    // 检查是否有选中文件
+    if (!selectedFile.value) {
+      message.warning('请先选择要上传的文件');
+      return;
+    }
+
+    // 设置弹窗加载状态
+    modalApi.setState({ loading: true, confirmLoading: true });
+
+    try {
+      // 调用导入API
+      await importHealthFoodApi({
+        file: selectedFile.value,
+      });
+
+      message.success('导入成功');
+      // 刷新表格数据
+      gridApi.value?.reload();
+
+      // 重置文件状态
+      selectedFile.value = null;
+      isFileSelected.value = false;
+      fileList.value = [];
+
+      // 关闭弹窗
+      modalApi.close();
+    } catch {
+      message.error('导入失败');
+    } finally {
+      // 取消加载状态
+      modalApi.setState({ loading: false, confirmLoading: false });
+    }
+  },
+  // 弹窗打开/关闭状态变化回调
+  onOpenChange(isOpen: boolean) {
+    // 获取表格API实例
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    // 重置文件状态
+    selectedFile.value = null;
+    isFileSelected.value = false;
+    fileList.value = [];
+  },
+});
+
+/**
+ * 处理文件选择变化
+ * 只存储文件不上传，等待用户点击确认按钮后再上传
+ * @param info - 文件信息对象
+ */
+const handleChange = (info: { file: UploadFile }) => {
+  const { file } = info;
+
+  // 如果文件被移除
+  if (file.status === 'removed') {
+    selectedFile.value = null;
+    isFileSelected.value = false;
+    return;
+  }
+
+  if (file) {
+    // 存储选中的文件
+    selectedFile.value = file;
+    isFileSelected.value = true;
+    message.success('文件已选择，请点击确认按钮上传');
+  }
+};
+</script>
+<template>
+  <Modal class="w-[30%]" title="上传Excel">
+    <!-- 显示文件选择状态提示 -->
+    <div
+      v-if="isFileSelected"
+      class="mb-4 rounded border border-green-200 bg-green-50 p-3"
+    >
+      <p class="text-sm text-green-700">已选择文件：{{ selectedFile?.name }}</p>
+      <p class="mt-1 text-xs text-green-600">
+        文件已准备就绪，点击确认按钮开始上传
+      </p>
+    </div>
+
+    <!-- Excel文件上传组件 -->
+    <UploadDragger
+      v-model:file-list="fileList"
+      :before-upload="() => false"
+      :max-count="1"
+      :on-change="handleChange"
+      accept=".xlsx,.xls"
+      name="file"
+    >
+      <p class="flex justify-center">
+        <svg
+          height="64"
+          viewBox="0 0 32 32"
+          width="64"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <linearGradient
+              id="vscodeIconsFileTypeExcel0"
+              gradientTransform="translate(0 2100)"
+              gradientUnits="userSpaceOnUse"
+              x1="4.494"
+              x2="13.832"
+              y1="-2092.086"
+              y2="-2075.914"
+            >
+              <stop offset="0" stop-color="#18884f" />
+              <stop offset=".5" stop-color="#117e43" />
+              <stop offset="1" stop-color="#0b6631" />
+            </linearGradient>
+          </defs>
+          <path
+            d="M19.581 15.35L8.512 13.4v14.409A1.19 1.19 0 0 0 9.705 29h19.1A1.19 1.19 0 0 0 30 27.809V22.5Z"
+            fill="#185c37"
+          />
+          <path
+            d="M19.581 3H9.705a1.19 1.19 0 0 0-1.193 1.191V9.5L19.581 16l5.861 1.95L30 16V9.5Z"
+            fill="#21a366"
+          />
+          <path d="M8.512 9.5h11.069V16H8.512Z" fill="#107c41" />
+          <path
+            d="M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 0 0 1.194-1.191V9.391A1.2 1.2 0 0 0 16.434 8.2"
+            opacity="0.1"
+          />
+          <path
+            d="M15.783 8.85H8.512V25.1h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
+            opacity="0.2"
+          />
+          <path
+            d="M15.783 8.85H8.512V23.8h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
+            opacity="0.2"
+          />
+          <path
+            d="M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
+            opacity="0.2"
+          />
+          <path
+            d="M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85"
+            fill="url(#vscodeIconsFileTypeExcel0)"
+          />
+          <path
+            d="m5.7 19.873l2.511-3.884l-2.3-3.862h1.847L9.013 14.6c.116.234.2.408.238.524h.017q.123-.281.26-.546l1.342-2.447h1.7l-2.359 3.84l2.419 3.905h-1.809l-1.45-2.711A2.4 2.4 0 0 1 9.2 16.8h-.024a1.7 1.7 0 0 1-.168.351l-1.493 2.722Z"
+            fill="#fff"
+          />
+          <path
+            d="M28.806 3h-9.225v6.5H30V4.191A1.19 1.19 0 0 0 28.806 3"
+            fill="#33c481"
+          />
+          <path d="M19.581 16H30v6.5H19.581Z" fill="#107c41" />
+        </svg>
+      </p>
+      <p class="ant-upload-text">点击或拖动文件到此区域进行选择</p>
+      <p class="ant-upload-hint">
+        支持单个上传，xlsx格式文件。选择文件后需要点击确认按钮进行上传。
+      </p>
+    </UploadDragger>
+  </Modal>
+</template>

apps/web-antd/src/views/business/product/health-food/components/modal.vue

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+// 导入Vue响应式API
+import {ref} from 'vue';
+
+// 导入Vben UI组件
+import {useVbenModal} from '@vben/common-ui';
+// 导入用户状态管理
+import {useUserStore} from '@vben/stores';
+
+// 导入Ant Design Vue组件
+import {message} from 'ant-design-vue';
+
+// 导入Vben表单适配器
+import {useVbenForm} from '#/adapter/form';
+// 导入药品使用相关API（用于获取单位选项）
+import {getDrugUseList} from '#/views/doctor/doctor-reception/api';
+
+// 导入保健食品管理相关API
+import {createHealthFood, getHealthFoodInfo, updateHealthFood,} from '../api';
+// 导入表单配置
+import {modalFormProps} from '../config/form';
+
+// 获取用户状态管理实例
+const userStore = useUserStore();
+
+// 定义响应式变量：存储单位选项数据
+// 注意：已移除使用时间、使用方法、频率选项，因为保健食品不需要这些字段
+const drugUnit = ref([]); // 单位选项
+
+// 获取单位选项数据
+getDrugUseList().then((res) => {
+  // 处理单位选项数据
+  drugUnit.value = res.drug_unit.map((item) => {
+    return {
+      label: item.name,
+      value: item.id,
+    };
+  });
+  return res;
+});
+
+// 是否为编辑模式
+const isUpdate = ref(false);
+// 表格API实例，用于刷新表格数据
+const gridApi = ref();
+
+// 初始化表单组件
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+// 初始化弹窗组件
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false, // 不显示全屏按钮
+  draggable: true, // 可拖拽
+  // 取消按钮回调
+  onCancel() {
+    modalApi.close();
+  },
+  // 确认按钮回调：提交表单数据
+  onConfirm: async () => {
+    // 验证表单
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        // 获取表单值
+        const values = await formApi.getValues();
+        // 设置弹窗加载状态
+        modalApi.setState({ loading: true, confirmLoading: true });
+        // 根据是否为编辑模式选择不同的API
+        const submitApi = isUpdate.value
+          ? updateHealthFood
+          : createHealthFood;
+        // 提交数据
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            // 刷新表格数据
+            gridApi.value?.reload();
+            // 关闭弹窗
+            modalApi.close();
+          })
+          .finally(() => {
+            // 取消加载状态
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    // 验证并提交表单
+    await formApi.validateAndSubmitForm();
+  },
+  // 弹窗打开/关闭状态变化回调
+  onOpenChange(isOpen: boolean) {
+    // 获取表格API实例
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      // 更新表单字段的选项数据
+      // 注意：已移除使用时间（time_id）、使用方法（type_id）、频率（frequency_id）字段的更新，因为保健食品不需要这些字段
+      formApi.updateSchema([
+        {
+          componentProps: {
+            options: drugUnit.value, // 单位选项
+          },
+          fieldName: 'unit_id',
+        },
+      ]);
+      // 获取弹窗传入的数据
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        // 设置是否为编辑模式
+        isUpdate.value = update;
+
+        // 如果是编辑模式且有id，获取完整详情并写入表单
+        if (update && values.id) {
+          // 调用获取详情API
+          getHealthFoodInfo(values.id)
+            .then((res: any) => {
+              if (res) {
+                // 使用详情数据覆盖表单，确保所有字段都是最新的
+                formApi.setValues({
+                  ...values,
+                  introduction_images: res.introduction_images, // 商品介绍图
+                });
+
+                console.log(formApi.getValues());
+              } else {
+                // 如果获取详情失败，使用传入的values
+                formApi.setValues(values);
+              }
+            })
+            .catch((error) => {
+              console.error('获取商品详情失败:', error);
+              // 获取失败时，使用传入的values
+              formApi.setValues(values);
+            });
+        } else {
+          // 新增模式，直接使用传入的values
+          formApi.setValues(values);
+        }
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}保健食品`"
+    class="w-[30%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/business/product/health-food/config/form.ts

@@ -0,0 +1,250 @@
+// 导入Vben表单配置类型
+import type {VbenFormProps} from '#/adapter/form';
+
+// 导入供应商选项API
+import {getSupplierOption} from '#/views/system/supplier/api';
+
+/**
+ * 保健食品管理表单配置
+ * 用于新增和编辑保健食品的弹窗表单
+ * 注意：
+ * 1. 已移除function字段（药品主治功能），因为保健食品不需要功效字段
+ * 2. 已移除对应症状（indications）、使用时间（time_id）、使用方法（type_id）、频率（frequency_id）字段，因为保健食品不需要这些字段
+ */
+export const modalFormProps: VbenFormProps = {
+  // 表单布局：12栅格系统
+  wrapperClass: 'grid-cols-12',
+  // 通用配置
+  commonConfig: {
+    // 所有表单项默认占满整行（12列）
+    formItemClass: 'col-span-12',
+    // 所有表单项的组件属性
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 表单布局方式：水平布局
+  layout: 'horizontal',
+  // 表单字段配置数组
+  schema: [
+    {
+      // ID字段：隐藏字段，用于编辑时标识记录
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false, // 隐藏显示
+        triggerFields: ['id'],
+      },
+    },
+    {
+      // 显示选择字段：隐藏字段，用于内部逻辑控制
+      component: 'VbenInput',
+      fieldName: 'showSelect',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false, // 隐藏显示
+        triggerFields: ['id'],
+      },
+    },
+    {
+      // 产品图片字段：必填，用于上传保健食品的主图
+      component: 'Avatar',
+      fieldName: 'image',
+      label: '产品图片',
+      rules: 'required', // 必填验证
+      formItemClass: 'col-span-6',
+    },
+    {
+      // 所属供应商字段：必填，下拉选择供应商
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true, // 允许清空
+        showSearch: true, // 显示搜索框
+        // 自定义过滤逻辑：根据供应商名称进行搜索
+        filterOption: (input: string, option: any) => {
+          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        },
+        // 接口返回数据转换为options格式
+        afterFetch: (data: { id: number; name: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        api: getSupplierOption, // 调用供应商选项API
+        placeholder: '请选择',
+      },
+      fieldName: 'supplier_id',
+      formItemClass: 'col-span-6',
+      label: '所属供应商',
+      rules: 'required', // 必填验证
+    },
+    {
+      // 保健食品昵称字段：必填，保健食品的常用名称
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入保健食品昵称',
+      },
+      fieldName: 'drug_name',
+      formItemClass: 'col-span-6',
+      label: '保健食品昵称',
+      rules: 'required', // 必填验证
+    },
+    {
+      // 保健食品别名字段：必填，保健食品的其他名称
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入保健食品别名',
+      },
+      fieldName: 'drug_alias',
+      formItemClass: 'col-span-6',
+      label: '保健食品别名',
+      rules: 'required', // 必填验证
+    },
+    {
+      // 保健食品编号字段：必填，保健食品的唯一编号
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入保健食品编号',
+      },
+      fieldName: 'drug_number',
+      formItemClass: 'col-span-6',
+      label: '保健食品编号',
+      rules: 'required', // 必填验证
+    },
+    {
+      // 规格字段：必填，保健食品的规格信息
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入规格',
+      },
+      fieldName: 'specification',
+      formItemClass: 'col-span-6',
+      label: '规格',
+      rules: 'required', // 必填验证
+    },
+    {
+      // 单位字段：必填，下拉选择单位选项
+      component: 'VbenSelect',
+      componentProps: {
+        options: [], // 选项通过动态加载填充
+        placeholder: '请选择',
+      },
+      fieldName: 'unit_id',
+      formItemClass: 'col-span-6',
+      label: '单位',
+      rules: 'required', // 必填验证
+    },
+    // 注意：已移除使用时间（time_id）、使用方法（type_id）、频率（frequency_id）字段，因为保健食品不需要这些字段
+    {
+      // 商品状态字段：必填，单选按钮组，选择商品状态
+      component: 'RadioGroup',
+      componentProps: {
+        placeholder: '请选择',
+        options: [
+          {
+            label: '草稿',
+            value: 1,
+          },
+          {
+            label: '下架',
+            value: 2,
+          },
+          {
+            label: '上架',
+            value: 3,
+          },
+        ],
+      },
+      defaultValue: 1, // 默认值为草稿
+      formItemClass: 'col-span-12',
+      fieldName: 'status',
+      label: '商品状态',
+      rules: 'required', // 必填验证
+    },
+    {
+      // 是否处方药字段：必填，单选按钮组，选择是否为处方药
+      component: 'RadioGroup',
+      componentProps: {
+        placeholder: '请选择',
+        options: [
+          {
+            label: '是',
+            value: 0,
+          },
+          {
+            label: '否',
+            value: 1,
+          },
+        ],
+      },
+      defaultValue: 1, // 默认值为否
+      formItemClass: 'col-span-12',
+      fieldName: 'is_otc',
+      label: '是否处方药',
+      rules: 'required', // 必填验证
+    },
+    // 注意：已移除function字段（药品主治功能）和对应症状（indications）字段，因为保健食品不需要这些字段
+    {
+      // 产品说明书字段：必填，用于上传保健食品的说明书图片
+      component: 'Avatar',
+      fieldName: 'instruction',
+      label: '产品说明书',
+      rules: 'required', // 必填验证
+      formItemClass: 'col-span-6',
+    },
+    {
+      // 商品介绍图字段：可选，支持上传多张图片，最多20张
+      component: 'UploadImageSortable',
+      fieldName: 'introduction_images',
+      label: '商品介绍图',
+      formItemClass: 'col-span-12',
+      componentProps: {
+        maxCount: 20, // 最多上传20张图片
+        multiple: true, // 支持多选
+      },
+    },
+  ],
+  // 不显示默认的表单操作按钮（确认、取消），由弹窗组件控制
+  showDefaultActions: false,
+};
+
+/**
+ * Excel上传表单配置
+ * 用于批量导入保健食品数据的弹窗表单
+ */
+export const uploadExcelProps: VbenFormProps = {
+  // 表单布局：12栅格系统
+  wrapperClass: 'grid-cols-12',
+  // 通用配置
+  commonConfig: {
+    // 所有表单项默认占满整行（12列）
+    formItemClass: 'col-span-12',
+    // 所有表单项的组件属性
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 表单布局方式：水平布局
+  layout: 'horizontal',
+  // 表单字段配置数组
+  schema: [
+    {
+      // Excel文件上传字段：必填，用于选择要导入的Excel文件
+      component: 'Upload',
+      componentProps: {
+        placeholder: '请选择',
+        multiple: true, // 支持多选（虽然通常只上传一个文件）
+      },
+      fieldName: 'frequency_id',
+      formItemClass: 'col-span-12',
+      label: '导入excel',
+      rules: 'file', // 文件验证规则
+    },
+  ],
+  // 不显示默认的表单操作按钮（确认、取消），由弹窗组件控制
+  showDefaultActions: false,
+};

apps/web-antd/src/views/business/product/health-food/config/search.ts

@@ -0,0 +1,43 @@
+// 导入Vben表单配置类型
+import type { VbenFormProps } from '#/adapter/form';
+
+/**
+ * 保健食品管理搜索表单配置
+ * 用于在列表页面顶部进行搜索筛选
+ */
+export const formOptions: VbenFormProps = {
+  // 默认展开搜索表单（不折叠）
+  collapsed: false,
+  // 搜索表单字段配置数组
+  schema: [
+    {
+      // 保健食品名称搜索字段：支持模糊搜索
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入名称',
+      },
+      defaultValue: '', // 默认值为空字符串
+      fieldName: 'name',
+      label: '保健食品名称',
+    },
+    // 注意：可以根据需要添加更多搜索字段，如时间范围等
+    // {
+    //   component: 'RangePicker',
+    //   componentProps: {
+    //     format: 'YYYY-MM-DD', // 确保格式与你需要的一致
+    //   },
+    //   fieldName: 'search_time',
+    //   label: '时间范围',
+    // },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 提交按钮配置
+  submitButtonOptions: {
+    content: '查询', // 按钮文字
+  },
+  // 是否在字段值改变时自动提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/business/product/health-food/config/table.ts

@@ -0,0 +1,105 @@
+// 导入VxeGrid配置类型
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+// 导入保健食品列表查询API
+import { getHealthFoodList } from '../api';
+
+/**
+ * 表格行数据类型定义
+ */
+interface RowType {
+  id: string; // 保健食品ID
+  name: string; // 保健食品名称
+  logo: string; // 保健食品Logo
+  introduce: string; // 保健食品介绍
+  created_at: string; // 创建时间
+}
+
+/**
+ * 保健食品管理表格配置
+ * 定义表格的列、分页、查询等配置
+ */
+export const gridOptions: VxeGridProps<RowType> = {
+  // 复选框配置
+  checkboxConfig: {
+    highlight: true, // 高亮选中行
+    labelField: '', // 标签字段
+  },
+  // 列配置
+  columnConfig: {
+    useKey: true, // 使用key作为列的唯一标识
+  },
+  // 行配置
+  rowConfig: {
+    useKey: true, // 使用key作为行的唯一标识
+  },
+  // 表格列定义数组
+  columns: [
+    { type: 'checkbox', width: 60 }, // 复选框列
+    { field: 'id', align: 'left', title: 'ID', width: 100 }, // ID列
+    { field: 'drug_name', align: 'left', title: '保健食品名称' }, // 保健食品名称列
+    { field: 'pinyin_simple', title: '拼音' }, // 拼音列
+    { field: 'supplier.name', title: '供应商', slots: { default: 'supplier' } }, // 供应商列，使用插槽自定义显示
+    {
+      field: 'image',
+      align: 'left',
+      title: '产品图片',
+      slots: { default: 'image' }, // 使用插槽显示图片
+      width: 130,
+    },
+    {
+      field: 'instruction',
+      align: 'left',
+      title: '说明书',
+      slots: { default: 'instruction' }, // 使用插槽显示说明书
+      width: 130,
+    },
+    // 注意：已移除function列（主要功能），因为保健食品不需要功效字段
+    { field: 'specification', title: '规格' }, // 规格列
+    { field: 'status', title: '状态', slots: { default: 'status' } }, // 状态列，使用插槽显示标签
+    { field: 'created_at', title: '发布时间' }, // 发布时间列
+    { type: 'html', title: '操作', width: 230, slots: { default: 'action' } }, // 操作列，使用插槽显示操作按钮
+  ],
+  // 保持数据源
+  keepSource: true,
+  // 分页配置
+  pagerConfig: {},
+  // 代理配置：用于数据请求
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      // 当表格需要加载数据时，会调用此方法
+      query: async ({ page }, formValues) => {
+        // 调用保健食品列表查询API
+        return await getHealthFoodList({
+          page: page.currentPage, // 当前页码
+          pageSize: page.pageSize, // 每页条数
+          ...formValues, // 合并搜索表单的值
+        });
+      },
+    },
+  },
+  // 表格高度：自动适应
+  height: 'auto',
+  // 是否显示边框
+  border: false,
+  // 工具栏配置
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 显示刷新按钮
+    print: false, // 不显示打印按钮
+    export: false, // 不显示导出按钮（使用自定义导出按钮）
+    zoom: true, // 显示最大化最小化按钮
+    slots: {
+      buttons: 'toolbar-buttons', // 自定义工具栏按钮插槽
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  // 是否显示溢出内容
+  showOverflow: false,
+};

apps/web-antd/src/views/business/product/health-food/index.vue

@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+// 导入VxeGrid监听器类型
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+// 导入Vue响应式API
+import { ref } from 'vue';
+
+// 导入Vben UI组件
+import { Page, useVbenModal } from '@vben/common-ui';
+
+// 导入Ant Design Vue组件
+import { Button, Image, message, Tag } from 'ant-design-vue';
+
+// 导入Vben VxeGrid适配器
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+// 导入表格操作组件
+import { TableAction } from '#/components/table-action';
+// 导入文件下载工具
+import { downloadByData } from '#/util/tool';
+
+// 导入保健食品管理相关API
+import { deleteHealthFood, exportHealthFoodApi } from './api';
+// 导入表单弹窗组件
+import FormModalDemo from './components/modal.vue';
+// 导入Excel上传组件
+import ExcelUpload from './components/ExcelUpload.vue';
+// 导入搜索表单配置
+import { formOptions } from './config/search';
+// 导入表格配置
+import { gridOptions } from './config/table';
+
+// 控制顶部表格下拉操作按钮的显示状态
+const hasTopTableDropDownActions = ref(false);
+
+// 定义表格事件监听器
+const gridEvents: VxeGridListeners<any> = {
+  // 复选框变化事件：当用户选择或取消选择行时触发
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    // 如果有选中的记录，显示批量操作按钮
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  // 全选复选框事件：当用户全选或取消全选时触发
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    // 如果有选中的记录，显示批量操作按钮
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+// 初始化表格组件，传入搜索表单配置、表格配置和事件监听器
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+// 初始化表单弹窗组件
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+// 初始化Excel上传弹窗组件
+const [ExcelUploadModal, ExcelUploadModalApi] = useVbenModal({
+  connectedComponent: ExcelUpload,
+});
+
+/**
+ * 显示表单弹窗
+ * @param data - 表单数据，默认为空对象
+ * @param isUpdate - 是否为编辑模式，默认为false（新增模式）
+ */
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    // 是否为更新模式
+    update: isUpdate,
+    // 表格API实例，用于刷新表格
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+/**
+ * 删除保健食品
+ * @param row - 要删除的行数据，如果为空则删除选中的多条记录
+ */
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    // 单个删除
+    ids.push(row);
+  } else {
+    // 批量删除：获取所有选中的记录ID
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  // 调用删除API
+  deleteHealthFood({ ids }).then(() => {
+    message.success('删除成功!');
+    // 刷新表格
+    gridApi.reload();
+  });
+};
+
+/**
+ * 导出保健食品数据
+ * 将数据导出为Excel文件
+ */
+const passApplication = () => {
+  // 调用导出API
+  exportHealthFoodApi().then((res) => {
+    // 创建下载链接并触发下载
+    downloadByData(res.data, '萧康云医-保健食品导出.xlsx');
+    message.success('导出成功!');
+  });
+};
+
+/**
+ * 打开Excel上传弹窗
+ * 用于批量导入保健食品数据
+ */
+const openExcelUploadModal = () => {
+  ExcelUploadModalApi.setData({
+    // 传入表格API实例，用于导入成功后刷新表格
+    gridApi,
+  });
+  ExcelUploadModalApi.open();
+};
+</script>
+
+<template>
+  <Page auto-content-height title="保健食品管理">
+    <ExcelUploadModal />
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :flex="false"
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+            {
+              label: '导入',
+              type: 'primary',
+              icon: 'ix:export-check',
+              onClick: openExcelUploadModal.bind(null),
+            },
+            {
+              label: '导出',
+              type: 'primary',
+              icon: 'mingcute:download-3-fill',
+              onClick: passApplication.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #image="{ row }">
+        <Image :src="row.image" height="30" width="30" />
+      </template>
+      <template #supplier="{ row }">
+        {{ row.supplier?.name || row.source }}
+      </template>
+      <template #instruction="{ row }">
+        <div class="div" style="width: 120px; height: 120px; overflow: scroll">
+          <Image :src="row.instruction" height="30" width="30" />
+        </div>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status_color">{{ row.status_txt }}</Tag>
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>