canteen_system/src/views/smartRecipes/dishesManagement/index.vue

<template>
  <div class="dishesManagement">
    <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="addDishes"> 添加菜品</n-button>
        <n-button strong secondary type="primary"> 导入</n-button>
      </template>
    </TablePro>
  </div>
</template>
<script setup lang="tsx">
  import { NButton, useModal, type FormInst, NPerformantEllipsis } 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 datalist, { type DishesValue } from "@/views/smartRecipes/dishesManagement/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"]>({
    groups: {
      type: "select",
      label: "适应群体",
      options: [
        {
          value: "小学",
          label: "小学"
        },
        {
          value: "初中",
          label: "初中"
        },
        {
          value: "高中及以上",
          label: "高中及以上"
        },
        {
          value: "成人男",
          label: "成人男"
        },
        {
          value: "成人女",
          label: "成人女"
        },
        {
          value: "高龄老人",
          label: "高龄老人"
        },
        {
          value: "三高人群",
          label: "三高人群"
        },
        {
          value: "糖尿病人群",
          label: "糖尿病人群"
        },
        {
          value: "痛风人群",
          label: "痛风人群"
        },
        {
          value: "肝肾障碍",
          label: "肝肾障碍"
        }
      ]
    },
    dishesCategory: {
      type: "select",
      label: "菜品类别",
      options: [
        {
          value: "主荤",
          label: "主荤"
        },
        {
          value: "副荤",
          label: "副荤"
        },
        {
          value: "素菜",
          label: "素菜"
        }, {
          value: "小菜",
          label: "小菜"
        },
        {
          value: "水果",
          label: "水果"
        },
        {
          value: "坚果",
          label: "坚果"
        },
        {
          value: "汤饮",
          label: "汤饮"
        }
      ]
    },
    spicinessStr: {
      type: "select",
      label: "辣度",
      options: [{
        value: "不辣",
        label: "不辣"
      }, {
        value: "微辣",
        label: "微辣"
      }]
    },
    name: {
      type: "input",
      label: "菜品名称"
    }
  });

  const columns = ref<TableType["columns"]>([
    {
      key: "name",
      title: "菜品名称",
      width: 130
    },
    {
      key: "adaptableGroupStr",
      title: "适应人群",
      width: 130,
      render: (value: any) => {
        return (
          <n-tag type="success">
            {value.adaptableGroupStr}
          </n-tag>
        );
      }
    },
    {
      key: "dishTypesStr",
      title: "菜品类别",
      width: 130,
      render: (value: any) => {
        return (
          <n-tag type="success">
            {value.dishTypesStr}
          </n-tag>
        );
      }
    },
    {
      key: "spicinessStr",
      title: "辣度",
      width: 130,
      render: (value: any) => {
        return (
          <n-tag type="success">
            {value.spicinessStr}
          </n-tag>
        );
      }
    },
    {
      key: "image",
      title: "菜品图片",
      width: 100,
      render: (value: any) => {
        return (
          <n-avatar
            round
            src={value.image}
          />
        );
      }
    },
    {
      key: "percentage",
      title: "食物占比",
      width: 130
    },
    {
      key: "cerealsPotato",
      title: "谷薯含量",
      width: 120
    },
    {
      key: "meatEgg",
      title: "肉蛋含量",
      width: 100
    },
    {
      key: "fruitsVegetables",
      title: "果蔬含量",
      width: 100
    },
    {
      key: "beansNuts",
      title: "豆类坚果类",
      width: 100
    },
    {
      key: "power",
      title: "能量",
      width: 100
    },
    {
      key: "protein",
      title: "蛋白质",
      width: 100
    },
    {
      key: "fat",
      title: "脂肪",
      width: 100
    },
    {
      key: "appraise",
      title: "营养师评语",
      width: 130,
      render: ({ appraise }) => (
        <div>
          {appraise.split("/").map((item: string, index: number) => (
            <NPerformantEllipsis
              key={index}
              style={{ maxWidth: "100px" }}
              // 关键配置 👇
              tooltip={{
                contentStyle: {
                  whiteSpace: "pre-line",  // 允许换行
                  maxWidth: "200px"       // 限制提示框宽度
                }
              }}
            >
              {item.replace(/\s/g, "\n")} {/* 将空格转为换行 */}
            </NPerformantEllipsis>
          ))}
        </div>
      )
    },
    {
      key: "essentials",
      title: "制作要点",
      width: 130,
      render: ({ essentials }) => (
        <div>
          {essentials.split("/").map((item: string, index: number) => (
            <NPerformantEllipsis
              key={index}
              style={{ maxWidth: "100px" }}
              // 关键配置 👇
              tooltip={{
                contentStyle: {
                  whiteSpace: "pre-line",  // 允许换行
                  maxWidth: "200px"       // 限制提示框宽度
                }
              }}
            >
              {item.replace(/\s/g, "\n")} {/* 将空格转为换行 */}
            </NPerformantEllipsis>
          ))}
        </div>
      )
    },
    {
      key: "createTime",
      title: "提交时间",
      width: 130
    },
    {
      key: "updateTime",
      title: "更新时间",
      width: 130
    },
    {
      key: "",
      title: "操作",
      width: 150,
      fixed: "right",
      render: (value: DishesValue) => {
        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.name = value.name;
                userValue.value.adaptableGroupStr = value.adaptableGroupStr;
                userValue.value.dishTypesStr = value.dishTypesStr;
                userValue.value.spicinessStr = value.spicinessStr;
                userValue.value.power = value.power;
                userValue.value.fat = value.fat;
                userValue.value.meatEgg = value.meatEgg;
                userValue.value.percentage = value.percentage;
                userValue.value.protein = value.protein;
                userValue.value.cerealsPotato = value.cerealsPotato;
                userValue.value.fruitsVegetables = value.fruitsVegetables;
                userValue.value.beansNuts = value.beansNuts;
                userValue.value.essentials = value.essentials;
                userValue.value.appraise = value.appraise;
                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 = {
    adaptableGroup: "",
    adaptableGroupStr: "",
    appraise: "",
    beansNuts: "",
    cerealsPotato: "",
    code: "",
    cost: "",
    createTime: "",
    deptId: "",
    deptName: "",
    dishTypes: "",
    dishTypesStr: "",
    essentials: "",
    fat: "",
    fruitsVegetables: "",
    image: "",
    meatEgg: "",
    name: "",
    percentage: "",
    power: "",
    protein: "",
    spiciness: "",
    spicinessStr: "",
    updateTime: "",
    user: "",
    userName: ""
  };

  const userValue = ref<DishesValue>({
    ...userDefaultValue
  });

  const resetModelValue = () => {
    userValue.value = { ...userDefaultValue };
  };

  const addUserOrUpdate = () => {
    form.value?.validate().then(() => {
      // loading.value = true

    });
  };
  const formOptionsUser = reactive<FormItemOptions<DishesValue>>({
    name: {
      type: "input",
      label: "菜品名称",
      required: true
    },
    adaptableGroupStr: {
      type: "select",
      label: "适应群体",
      required: true,
      options: [
        {
          value: "小学",
          label: "小学"
        },
        {
          value: "初中",
          label: "初中"
        },
        {
          value: "高中及以上",
          label: "高中及以上"
        },
        {
          value: "成人男",
          label: "成人男"
        },
        {
          value: "成人女",
          label: "成人女"
        },
        {
          value: "高龄老人",
          label: "高龄老人"
        },
        {
          value: "三高人群",
          label: "三高人群"
        },
        {
          value: "糖尿病人群",
          label: "糖尿病人群"
        },
        {
          value: "痛风人群",
          label: "痛风人群"
        },
        {
          value: "肝肾障碍",
          label: "肝肾障碍"
        }
      ]
    },
    dishTypesStr: {
      type: "select",
      label: "菜品类别",
      required: true,
      options: [
        {
          value: "主荤",
          label: "主荤"
        },
        {
          value: "副荤",
          label: "副荤"
        },
        {
          value: "素菜",
          label: "素菜"
        }, {
          value: "小菜",
          label: "小菜"
        },
        {
          value: "水果",
          label: "水果"
        },
        {
          value: "坚果",
          label: "坚果"
        },
        {
          value: "汤饮",
          label: "汤饮"
        }
      ]
    },
    spicinessStr: {
      type: "radioGroup",
      label: "辣度",
      required: true,
      options: [{
        value: "不辣",
        label: "不辣"
      }, {
        value: "微辣",
        label: "微辣"
      }]
    },
    cerealsPotato:{
       type:'input',
       label:'谷薯含量（g/100g）',
       componentsProps: {
        disabled: true,
      },
    },
    meatEgg:{
      type:'input',
      label:'肉蛋含量（g/100g）',
      componentsProps: {
        disabled: true,
      },
    },
    fruitsVegetables:{
      type:'input',
      label:'果蔬含量（g/100g）',
      componentsProps: {
        disabled: true,
      },
    },
    beansNuts:{
      type:'input',
      label:'豆类坚果类（g/100g）',
      componentsProps: {
        disabled: true,
      },
    },
    power:{
      type:'input',
      label:'能量（kcal/100g）',
      componentsProps: {
        disabled: true,
      },
    },
    protein:{
      type:'input',
      label:'蛋白质（g/100g）',
      componentsProps: {
        disabled: true,
      },
    },
    percentage:{
       type:'input',
       label:'食物占比',
       componentsProps: {
        disabled: true,
      },
    },
    fat:{
      type:'input',
      label:'脂肪（g/100g）',
      componentsProps: {
        disabled: true,
      },
    },
    appraise:{
      type:'input',
      label:'营养师评语',
      componentsProps: {
        type:'textarea'
      },
    },
    essentials:{
      type:'input',
      label:'制作要点',
      componentsProps: {
        type:'textarea'
      },
    }
  })
  const formOptions1User = reactive<FormItemOptions<DishesValue>>({
    // // 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 addDishes = () => {
    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">
  //.dishesManagement {
  //  //overflow-y: auto;
  //
  //}
</style>