Merge branch 'main' of http://175.6.124.250:3100/kevinMao/canteen_system
This commit is contained in:
		
						commit
						a8a9235c86
					
				| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
		Loading…
	
		Reference in New Issue