diff --git a/src/views/personnelManagement/departmentStructure/index.vue b/src/views/personnelManagement/departmentStructure/index.vue
index 7512eb0..3c05fe7 100644
--- a/src/views/personnelManagement/departmentStructure/index.vue
+++ b/src/views/personnelManagement/departmentStructure/index.vue
@@ -4,6 +4,7 @@
               :isPageTable="true">
       <template #headerExtra>
         <n-button strong secondary type="primary" @click="addDepartmentStructure"> 添加库存</n-button>
+        <n-button strong secondary type="primary" > 导入</n-button>
       </template>
     </TablePro>
   </div>
diff --git a/src/views/smartRecipes/foodManagement/index.ts b/src/views/smartRecipes/foodManagement/index.ts
new file mode 100644
index 0000000..98c7edb
--- /dev/null
+++ b/src/views/smartRecipes/foodManagement/index.ts
@@ -0,0 +1,175 @@
+export interface FoodItemValue {
+  ca?:number | string,
+  carbs?:number | string,
+  code?:string,
+  createTime?:string,
+  createUserId?:string,
+  createUserName?:string,
+  dietaryFiber?: number | string,
+  fat?: number | string,
+  fe?: number | string,
+  id?: string,
+  image?:string,
+  label?:number | string,
+  labelStr?:string,
+  name?:string,
+  power?:number | string,
+  primaryType?:string,
+  primaryTypeName?:string,
+  protein?:number | string,
+  se?: number | string,
+  secondaryType?:string,
+  secondaryTypeName?:string,
+  supplier?: string,
+  supplyCost?:number | string,
+  supplyProductCode?:string,
+  supplyProductName?:string,
+  updateTime?:string,
+  vitaminA?:number | string,
+  vitaminB1?: number | string,
+  vitaminB2?:number | string,
+  vitaminC?: number | string,
+  vitaminE?: number | string,
+  zn?: number | string
+}
+
+const datalist:FoodItemValue[] = [
+  {
+    ca:28,
+    carbs: 2,
+    code:"0452061",
+    createTime:"2024-04-10 00:15:48",
+    createUserId:"1",
+    createUserName:"系统管理员",
+    dietaryFiber: 1.2,
+    fat: 0.4,
+    fe: 1,
+    id: "1777629039623471334",
+    image:"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
+    label:3,
+    labelStr:"果蔬",
+    name:"梅菜",
+    power:16,
+    primaryType:"1732325785633374210",
+    primaryTypeName:"蔬菜类及制品",
+    protein:1.8,
+    se: 0.53,
+    secondaryType:"1732327277182402562",
+    secondaryTypeName:"嫩茎、叶、花菜类",
+    supplier: "",
+    supplyCost:0,
+    supplyProductCode:"FBC10001",
+    supplyProductName:"甜梅菜",
+    updateTime:"2024-08-03 23:07:20",
+    vitaminA:142,
+    vitaminB1: 0.02,
+    vitaminB2:0.11,
+    vitaminC: 72,
+    vitaminE: 0.64,
+    zn: 0.41
+  },
+  {
+    ca:28,
+    carbs: 2,
+    code:"0452061",
+    createTime:"2024-04-10 00:15:48",
+    createUserId:"1",
+    createUserName:"系统管理员",
+    dietaryFiber: 1.2,
+    fat: 0.4,
+    fe: 1,
+    id: "1777629039623471334",
+    image:"https://picsum.photos/id/10/100/100",
+    label:3,
+    labelStr:"果蔬",
+    name:"梅菜",
+    power:16,
+    primaryType:"1732325785633374210",
+    primaryTypeName:"蔬菜类及制品",
+    protein:1.8,
+    se: 0.53,
+    secondaryType:"1732327277182402562",
+    secondaryTypeName:"嫩茎、叶、花菜类",
+    supplier: "",
+    supplyCost:0,
+    supplyProductCode:"FBC10001",
+    supplyProductName:"甜梅菜",
+    updateTime:"2024-08-03 23:07:20",
+    vitaminA:142,
+    vitaminB1: 0.02,
+    vitaminB2:0.11,
+    vitaminC: 72,
+    vitaminE: 0.64,
+    zn: 0.41
+  },
+  {
+    ca:28,
+    carbs: 2,
+    code:"0452061",
+    createTime:"2024-04-10 00:15:48",
+    createUserId:"1",
+    createUserName:"系统管理员",
+    dietaryFiber: 1.2,
+    fat: 0.4,
+    fe: 1,
+    id: "1777629039623471334",
+    image:"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
+    label:3,
+    labelStr:"果蔬",
+    name:"梅菜",
+    power:16,
+    primaryType:"1732325785633374210",
+    primaryTypeName:"蔬菜类及制品",
+    protein:1.8,
+    se: 0.53,
+    secondaryType:"1732327277182402562",
+    secondaryTypeName:"嫩茎、叶、花菜类",
+    supplier: "",
+    supplyCost:0,
+    supplyProductCode:"FBC10001",
+    supplyProductName:"甜梅菜",
+    updateTime:"2024-08-03 23:07:20",
+    vitaminA:142,
+    vitaminB1: 0.02,
+    vitaminB2:0.11,
+    vitaminC: 72,
+    vitaminE: 0.64,
+    zn: 0.41
+  },
+  {
+    ca:28,
+    carbs: 2,
+    code:"0452061",
+    createTime:"2024-04-10 00:15:48",
+    createUserId:"1",
+    createUserName:"系统管理员",
+    dietaryFiber: 1.2,
+    fat: 0.4,
+    fe: 1,
+    id: "1777629039623471334",
+    image:"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
+    label:3,
+    labelStr:"果蔬",
+    name:"梅菜",
+    power:16,
+    primaryType:"1732325785633374210",
+    primaryTypeName:"蔬菜类及制品",
+    protein:1.8,
+    se: 0.53,
+    secondaryType:"1732327277182402562",
+    secondaryTypeName:"嫩茎、叶、花菜类",
+    supplier: "",
+    supplyCost:0,
+    supplyProductCode:"FBC10001",
+    supplyProductName:"甜梅菜",
+    updateTime:"2024-08-03 23:07:20",
+    vitaminA:142,
+    vitaminB1: 0.02,
+    vitaminB2:0.11,
+    vitaminC: 72,
+    vitaminE: 0.64,
+    zn: 0.41
+  }
+];
+
+export default datalist;
diff --git a/src/views/smartRecipes/foodManagement/index.vue b/src/views/smartRecipes/foodManagement/index.vue
index 44a0dba..afa9a52 100644
--- a/src/views/smartRecipes/foodManagement/index.vue
+++ b/src/views/smartRecipes/foodManagement/index.vue
@@ -1,11 +1,618 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-<div>食材管理</div>
+  <div class="departmentStructure">
+    <TablePro ref="tableRef" :request-api="reqApi" :search-form-options="searchFormOptions" :columns="columns"
+              :single-line="false"
+              :isPageTable="true">
+      <template #headerExtra>
+        <n-button strong secondary type="primary" @click="addDepartmentStructure"> 添加食材原料</n-button>
+        <n-button strong secondary type="primary"> 导入</n-button>
+      </template>
+    </TablePro>
+  </div>
 </template>
+<script setup lang="tsx">
+  import { NButton, useModal, type FormInst } from "naive-ui";
+  import { reactive, ref } from "vue";
+  import type { modelDefaultValue } from "@/views/personnelManagement/departmentStructure/index.ts";
+  import { TablePro, type TableProProps, FormPro, type FormItemOptions, type TableProInst } from "@/components";
 
+  type TableType = TableProProps<any, any>
+  import api from "@/axios";
+  import datalist, { type FoodItemValue } from "@/views/smartRecipes/foodManagement/index.ts";
+  import CustomImageUpload from "@/components/customImageUpload/index.vue";
+
+  const modal = useModal();
+  const form = ref<FormInst | null>(null);
+  const reqApi: TableType["requestApi"] = (params) => {
+    return new Promise((resolve: any) => {
+      resolve({
+        code: 200,
+        data: {
+          pages: "2",
+          current: "1",
+          records: datalist,
+          size: "5",
+          total: "10"
+        },
+        success: "成功"
+      });
+    });
+  };
+  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
+    categories: {
+      type: "select",
+      label: "食物大类",
+      options: [
+        {
+          value: "蛋类及制品",
+          label: "蛋类及制品"
+        },
+        {
+          value: "干豆类及制品",
+          label: "干豆类及制品"
+        },
+        {
+          value: "禽肉类及制品",
+          label: "禽肉类及制品"
+        },
+        {
+          value: "谷类及制品",
+          label: "谷类及制品"
+        },
+        {
+          value: "坚果、种子类",
+          label: "坚果、种子类"
+        },
+        {
+          value: "粮油调料",
+          label: "粮油调料"
+        },
+        {
+          value: "菌藻类",
+          label: "菌藻类"
+        },
+        {
+          value: "蔬菜类",
+          label: "蔬菜类"
+        },
+        {
+          value: "厨房用品",
+          label: "厨房用品"
+        },
+        {
+          value: "水果类",
+          label: "水果类"
+        },
+        {
+          value: "其他",
+          label: "其他"
+        }
+      ]
+    },
+    subCategories: {
+      type: "select",
+      label: "食物小类",
+      options: [
+        {
+          value: "食物小类",
+          label: "食物小类"
+        }
+      ]
+    },
+    goodsLabel: {
+      type: "select",
+      label: "标签",
+      options: [{
+        value: "谷薯",
+        label: "谷薯"
+      }, {
+        value: "肉蛋",
+        label: "肉蛋"
+      }, {
+        value: "果蔬",
+        label: "果蔬"
+      }, {
+        value: "豆类坚果",
+        label: "豆类坚果"
+      }, {
+        value: "其他",
+        label: "其他"
+      }]
+    },
+    name: {
+      type: "input",
+      label: "名称"
+    }
+  });
+
+  const columns = ref<TableType["columns"]>([
+    {
+      key: "image",
+      title: "食物图片",
+      width: 100,
+      render: (value: any) => {
+        return (
+          <n-avatar
+            round
+            src={value.image}
+          />
+        );
+      }
+    },
+    {
+      key: "primaryTypeName",
+      title: "食物大类",
+      width: 100
+    },
+    {
+      key: "secondaryTypeName",
+      title: "食物小类",
+      width: 150
+    },
+    {
+      key: "name",
+      title: "食物名称",
+      width: 100
+    },
+    {
+      key: "labelStr",
+      title: "食物标签",
+      width: 100
+    },
+    {
+      key: "power",
+      title: "热量",
+      width: 60
+    },
+    {
+      key: "protein",
+      title: "蛋白质",
+      width: 70
+    },
+    {
+      key: "fat",
+      title: "脂肪",
+      width: 60
+    },
+    {
+      key: "carbs",
+      title: "碳水化合物",
+      width: 100
+    },
+    {
+      key: "dietaryFiber",
+      title: "不溶性膳食纤维",
+      width: 140
+    },
+    {
+      key: "vitaminA",
+      title: "总维生素A",
+      width: 100
+    },
+    {
+      key: "vitaminB1",
+      title: "维生素B₁",
+      width: 100
+    },
+    {
+      key: "vitaminB2",
+      title: "维生素B₂",
+      width: 100
+    },
+    {
+      key: "vitaminC",
+      title: "维生素C",
+      width: 80
+    },
+    {
+      key: "vitaminE",
+      title: "维生素E",
+      width: 80
+    },
+    {
+      key: "ca",
+      title: "钙",
+      width: 50
+    },
+    {
+      key: "zn",
+      title: "锌",
+      width: 80
+    },
+    {
+      key: "fe",
+      title: "铁",
+      width: 20
+    },
+    {
+      key: "createUserName",
+      title: "提交人",
+      width: 80
+    },
+    {
+      key: "createTime",
+      title: "提交时间",
+      width: 80
+    },
+    {
+      key: "updateTime",
+      title: "更新时间",
+      width: 80
+    },
+    {
+      key: "",
+      title: "操作",
+      fixed: "right",
+      render: (value: FoodItemValue) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type="warning"
+              onClick={() => {
+                console.log(value, "000");
+                title.value = `修改食材原料`;
+                userValue.value.image = value.image
+                userValue.value.ca = value.ca
+                userValue.value.carbs = value.carbs
+                userValue.value.fat = value.fat
+                userValue.value.fe = value.fe
+                userValue.value.power = value.power
+                userValue.value.se = value.se
+                userValue.value.vitaminA = value.vitaminA
+                userValue.value.vitaminC = value.vitaminC
+                userValue.value.vitaminE = value.vitaminE
+                userValue.value.vitaminB1 = value.vitaminB1
+                userValue.value.vitaminB2 = value.vitaminB2
+                userValue.value.name = value.name
+                userValue.value.zn = value.zn
+                userValue.value.dietaryFiber = value.dietaryFiber
+                userValue.value.protein = value.protein
+                userValue.value.labelStr = value.labelStr
+                userValue.value.primaryTypeName = value.primaryTypeName
+                userValue.value.secondaryTypeName = value.secondaryTypeName
+
+                modalRef.value = modal.create({
+                  title: title.value,
+                  preset: "card",
+                  style: {
+                    width: "1000px"
+                  },
+                  content: () => (
+                    <div style="height:600px;overflow-y: auto;scrollbar-width: none;">
+                      <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
+                               form-item-options={formOptions1User} gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
+                      </FormPro>
+                      <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
+                               form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
+                      </FormPro>
+                    </div>
+
+                  ),
+                  footer: () => (
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "flex-end"
+                      }}
+                    >
+                      <n-button
+                        loading={loading.value}
+                        style={{ marginRight: "10px" }}
+                        type="primary"
+                        onClick={() => {
+                          modalRef.value.destroy();
+                          resetModelValue();
+                        }}
+                      >
+                        确认
+                      </n-button>
+                      <n-button
+                        onClick={() => {
+                          modalRef.value.destroy();
+                          resetModelValue();
+                        }}
+                      >
+                        取消
+                      </n-button>
+                    </div>
+                  ),
+                  onAfterLeave: () => {
+                    resetModelValue();
+                  }
+                });
+              }}
+            >编辑
+            </n-button>
+            <n-button type="error" style={{ margin: "0 10px" }}>
+              删除
+            </n-button>
+          </div>
+        );
+      }
+    }
+
+  ]);
+  const userDefaultValue = {
+    ca: "",
+    carbs: "",
+    code: "",
+    createTime: "",
+    createUserId: "",
+    createUserName: "",
+    dietaryFiber: "",
+    fat: "",
+    fe: "",
+    id: "",
+    image: "",
+    label: "",
+    labelStr: "",
+    name: "",
+    power: "",
+    primaryType: "",
+    primaryTypeName: "",
+    protein: "",
+    se: "",
+    secondaryType: "",
+    secondaryTypeName: "",
+    supplier: "",
+    supplyCost: "",
+    supplyProductCode: "",
+    supplyProductName: "",
+    updateTime: "",
+    vitaminA: "",
+    vitaminB1: "",
+    vitaminB2: "",
+    vitaminC: "",
+    vitaminE: "",
+    zn: ""
+  };
+
+  const userValue = ref<FoodItemValue>({
+    ...userDefaultValue
+  });
+
+  const resetModelValue = () => {
+    userValue.value = { ...userDefaultValue };
+  };
+
+  const addUserOrUpdate = () => {
+    form.value?.validate().then(() => {
+      // loading.value = true
+
+    });
+  };
+  const formOptionsUser = reactive<FormItemOptions<FoodItemValue>>({
+    primaryTypeName: {
+      type: "select",
+      label: "食物大类",
+      required: true,
+      labelAlign: "center",
+      options: [
+        {
+          value: "蛋类及制品",
+          label: "蛋类及制品"
+        },
+        {
+          value: "干豆类及制品",
+          label: "干豆类及制品"
+        },
+        {
+          value: "禽肉类及制品",
+          label: "禽肉类及制品"
+        },
+        {
+          value: "谷类及制品",
+          label: "谷类及制品"
+        },
+        {
+          value: "坚果、种子类",
+          label: "坚果、种子类"
+        },
+        {
+          value: "粮油调料",
+          label: "粮油调料"
+        },
+        {
+          value: "菌藻类",
+          label: "菌藻类"
+        },
+        {
+          value: "蔬菜类",
+          label: "蔬菜类"
+        },
+        {
+          value: "厨房用品",
+          label: "厨房用品"
+        },
+        {
+          value: "水果类",
+          label: "水果类"
+        },
+        {
+          value: "其他",
+          label: "其他"
+        }
+      ]
+    },
+    secondaryTypeName: {
+      type: "select",
+      label: "食物小类",
+      required: true,
+      options: [
+        {
+          value: "大豆",
+          label: "大豆"
+        },
+        {
+          value: "红豆",
+          label: "红豆"
+        },
+        {
+          value: "绿豆",
+          label: "绿豆"
+        }
+      ]
+    },
+    name: {
+      type: "input",
+      label: "食物名称",
+      required: true
+    },
+    labelStr: {
+      type: "radioGroup",
+      label: "食物标签",
+      required: true,
+      options: [{
+        value: "谷薯",
+        label: "谷薯"
+      }, {
+        value: "肉蛋",
+        label: "肉蛋"
+      }, {
+        value: "果蔬",
+        label: "果蔬"
+      }, {
+        value: "豆类坚果",
+        label: "豆类坚果"
+      }, {
+        value: "其他",
+        label: "其他"
+      }]
+    },
+    power: {
+      type: "input",
+      label: "能量（kcal/100g）"
+    },
+    protein: {
+      type: "input",
+      label: "蛋白质（g/100g）"
+    },
+    fat: {
+      type: "input",
+      label: "脂肪（g/100g）"
+    },
+    carbs: {
+      type: "input",
+      label: "碳水化合物（g/100g）"
+    },
+    dietaryFiber: {
+      type: "input",
+      label: "不溶性膳食纤维（g/100g）"
+    },
+    vitaminA: {
+      type: "input",
+      label: "维生素A（μgRAE/100g）"
+    },
+    vitaminB1: {
+      type: "input",
+      label: "维生素B1（mg/100g）"
+    },
+    vitaminB2: {
+      type: "input",
+      label: "维生素B2（mg/100g）"
+    },
+    vitaminC: {
+      type: "input",
+      label: "维生素C（mg/100g）"
+    },
+    vitaminE: {
+      type: "input",
+      label: "维生素E（mg/100g）"
+    },
+    ca: {
+      type: "input",
+      label: "钙（mg/100g）"
+    },
+    zn: {
+      type: "input",
+      label: "锌（mg/100g）"
+    },
+    fe: {
+      type: "input",
+      label: "铁（mg/100g）"
+    }
+  });
+  const formOptions1User = reactive<FormItemOptions<FoodItemValue>>({
+    // // form表单
+    image: {
+      type: "custom",
+      label: "",
+      customRender: (modelValue) => {
+        return (
+          <div style="margin: auto;text-align: center">
+            <div>
+              <n-image
+                width="150"
+                height="150"
+                src={modelValue.image}
+              />
+            </div>
+            上传菜品图片
+          </div>
+        );
+      }
+    },
+  });
+  const loading = ref<boolean>(false);
+  const modalRef = ref();
+  const title = ref("添加食材原料");
+  const addDepartmentStructure = () => {
+    modalRef.value = modal.create({
+      title: title.value,
+      preset: "card",
+      style: {
+        width: "1000px"
+      },
+      content: () => (
+        <div style="height:600px;overflow-y: auto;scrollbar-width: none;">
+          <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
+                   form-item-options={formOptions1User} gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
+          </FormPro>
+          <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
+                   form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
+          </FormPro>
+        </div>
+
+      ),
+      footer: () => (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end"
+          }}
+        >
+          <n-button
+            loading={loading.value}
+            style={{ marginRight: "10px" }}
+            type="primary"
+            onClick={() => {
+              addUserOrUpdate();
+            }}
+          >
+            确认
+          </n-button>
+          <n-button
+            onClick={() => {
+              modalRef.value.destroy();
+              resetModelValue();
+            }}
+          >
+            取消
+          </n-button>
+        </div>
+      ),
+      onAfterLeave: () => {
+        resetModelValue();
+      }
+    });
+  };
+</script>
 <style scoped lang="scss">
+  .departmentStructure {
+    //overflow-y: auto;
 
+  }
 </style>
\ No newline at end of file