营养信息类别

src/api/dish/material.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
-// 原料类别
+// 原料类别树
 export function systemMaterialTreeApi(data) {
   return request({
-    url: '/smart-canteen/api/v1/menumaterialcategory/tree/list',
+    url: '/smart-canteen/menu_material_category/getTree',
     method: 'post',
     headers: {
         "merchant-id":"378915229716713472",

src/api/dish/nutritionInfo.js

@@ -1,36 +1,64 @@
 import request from '@/utils/request'
 
-// 获取营养信息类别
+// 获取营养信息类别-树
-export function typeListApi(data) {
+export function nutritionTypeListApi(data) {
   return request({
     url: '/smart-canteen/menu_nutrition_type/nutritionTypeList',
     method: 'post',
     data: data
   })
 }
+// 新增营养类别接口-树
+export function nutritionTypeAddApi(data) {
+  return request({
+    url: '/smart-canteen/menu_nutrition_type/add',
+    method: 'post',
+    data: data
+  })
+}
+// 修改营养类别接口-树
+export function nutritionTypeEditApi(data) {
+  return request({
+    url: '/smart-canteen/menu_nutrition_type/edit',
+    method: 'post',
+    data: data
+  })
+}
+// 删除营养类别接口-树
+export function nutritionTypeDelApi(data) {
+  return request({
+    url: '/smart-canteen/menu_nutrition_type/del',
+    method: 'post',
+    data: data
+  })
+}
+
+
+
+
 
 // 查询获取所有营养信息
 export function listNutrition(query) {
   return request({
     url: '/smart-canteen/menu_nutrition/list',
-    method: 'get',
+    method: 'post',
-    param: query
+    data: query
   })
 }
 
 // 查询详细
 export function getNutrition(data) {
   return request({
-    url: '/smart-canteen/api/v1/menunutrition/oneMaterial',
+    url: '/smart-canteen/menu_nutrition_type/getInfo',
-    method: 'post',
+    method: 'get',
-    data: data
+    params: data
   })
 }
 
 // 新增
 export function addMenuNutrition(data) {
   return request({
-    url: '/smart-canteen/api/v1/menunutrition/addMenuNutrition',
+    url: '/smart-canteen/menu_nutrition/add',
     method: 'post',
     data: data
   })
@@ -39,7 +67,7 @@ export function addMenuNutrition(data) {
 // 修改
 export function updateNutrition(data) {
   return request({
-    url: '/smart-canteen/api/v1/menunutrition/updateMenuNutrition',
+    url: '/smart-canteen/menu_nutrition/edit',
     method: 'post',
     data: data
   })

src/views/dish/nutritionInfo/index.vue

@@ -1,5 +1,68 @@
 <template>
   <div class="app-container">
+    <el-row :gutter="20">
+      <!--树数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <div style="width: 96%;display: flex;align-items: center;justify-content: space-between;">
+            <span>营养信息分类</span>
+            <span style="font-size: 24px;font-weight: 600;cursor: pointer;" @click.stop="() => appendTreeNode()">+</span>
+          </div>
+          <el-input
+            v-model="keyWord"
+            placeholder="请输入关键字进行搜索"
+            clearable
+            maxlength="50"
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+
+        <div class="head-container" style>
+          <el-tree style="height: 700px; overflow: scroll"
+            :data="cascaderOptions" :props="defaultProps"
+            :show-checkbox="true" :default-expand-all="true"
+            :expand-on-click-node="false" :filter-node-method="filterNode"
+            ref="typeTree" node-key="id" highlight-current @node-click="handleNodeClick"
+          >
+              <span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
+                <span v-if="isMousemoveId === data.value && node.label.length > 10">{{
+                    node.label.slice(0, 10) + "..."
+                  }}</span>
+                <span v-else>{{ node.label }}</span>
+
+                <span class="btn-items" v-if="isMousemoveId === data.value">
+                  <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-plus" v-if="data.level<2"
+                    @click.stop="() => appendTreeNode(data)"
+                  >
+                  </el-button>
+                  <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-edit-outline"
+                    style="color: #67c23a"
+                    @click.stop="() => editTreeNode(data)"
+                  >
+                  </el-button>
+                  <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-delete"
+                    style="color: #f56c6c" v-if="!data.children||data.children.length==0"
+                    @click.stop="() => removeTreeNode(data)"
+                  >
+                  </el-button>
+                </span>
+              </span>
+          </el-tree>
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="20" :xs="24">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
           <el-form-item label="营养信息类别" prop="type" >
             <el-cascader
@@ -84,9 +147,31 @@
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
+      </el-col>
+    </el-row>
 
-    <!-- 添加或修改岗位对话框 -->
+
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+
+
+    <!-- 添加或修改类别对话框 -->
+    <el-dialog :title="title+'-营养信息类别'" :visible.sync="openType" width="500px" append-to-body :close-on-click-modal="false">
+      <el-form ref="typeForm" :model="typeForm" :rules="typeRules" label-width="120px">
+        <el-form-item label="父节点名称" prop="parentName" v-if="typeForm.parentName">
+          <el-input v-model="typeForm.parentName" placeholder="请输入父节点名称" maxlength="30" disabled/>
+        </el-form-item>  
+        <el-form-item label="类别名称" prop="name">
+          <el-input v-model="typeForm.name" placeholder="请输入类别名称" maxlength="30"/>
+        </el-form-item> 
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="openType=false">取 消</el-button>
+      </div>
+    </el-dialog>
+    
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :title="title+'-营养信息'" :visible.sync="open" width="1000px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="180px" label-position="right">
 
         <el-row>
@@ -465,7 +550,8 @@
 </template>
 
 <script>
-import { listNutrition, getNutrition, delNutrition, addMenuNutrition, updateNutrition, typeListApi } from "@/api/dish/nutritionInfo";
+import { nutritionTypeListApi,nutritionTypeAddApi, nutritionTypeEditApi, nutritionTypeDelApi  } from "@/api/dish/nutritionInfo";
+import { listNutrition, getNutrition, delNutrition, addMenuNutrition, updateNutrition } from "@/api/dish/nutritionInfo";
 import { cascaderMixin } from './cascaderMixin';
 
 export default {
@@ -532,9 +618,9 @@ export default {
       },
       // 表单校验
       rules: {
-        nutritionCategory: [
+        // nutritionCategory: [
-          { required: true, message: "请选择营养信息类别", trigger: "change" }
+        //   { required: true, message: "请选择营养信息类别", trigger: "change" }
-        ],
+        // ],
         nutritionName: [
           { required: true, message: "营养信息名称不能为空", trigger: "blur" }
         ],
@@ -544,22 +630,43 @@ export default {
       },
       typeSelected: [], // 级联选择器的选中值
       typeTreeData:[],//类别接口返回数据（未处理）
-      cascaderOptions: [] // 级联选择器的选项（已处理）
+      cascaderOptions: [], // 级联选择器的选项（已处理）
+      defaultProps: {
+        children: "children",
+        label: "label",
+        id: "value"
+      },
+      keyWord:"",//左侧树-关键字查询
+      isMousemoveId: null,
+      openType:false,
+      typeForm:{},
+      typeRules: {
+        name: [
+          { required: true, message: "类别名称不能为空", trigger: "change" }
+        ],
+        // nutritionName: [
+        //   { required: true, message: "营养信息名称不能为空", trigger: "blur" }
+        // ],
+        // nutritionCode: [
+        //   { required: true, message: "食材编码不能为空", trigger: "blur" }
+        // ]
+      },
     };
   },
-
-
   created() {
-    this.getFoodType();
+    this.getNutritionTypeList();
     this.getList();
   },
+  watch: {
+    // 根据名称筛选部门树
+    keyWord(val) {
+      this.$refs.typeTree.filter(val);
+    },
+  },
   methods: { 
-    /**
+    //获取营养信息类别 
-     * 获取所有食材类别
+    getNutritionTypeList() {
-     * @returns {Promise<void>}
+      nutritionTypeListApi().then(response => {
-     */
-    getFoodType() {
-      typeListApi().then(response => {
         this.typeTreeData = response.data;
         this.cascaderOptions = this.cascaderOptionsMethod();
         console.log(this.cascaderOptions)
@@ -568,25 +675,105 @@ export default {
         console.error("Failed to fetch food types:", error);
       });
     },  
-
+    //生成级联选择器的选项数据
-    /**
-     * 生成级联选择器的选项数据
-     * @returns {Array<{value: string, label: string, children: Array<{value: string, label: string}>}>}
-     */
     cascaderOptionsMethod() {
       if (this.typeTreeData.length==0) {
         return [];
       }
       return this.typeTreeData.map(item => ({
-        value: item.bigType,
+        value: item.id,
         label: item.bigType,
+        parentId:0,
+        level:1,
         children: item.littleTypeList.map(subItem => ({
-          value: '#'+subItem,//父子类别value一致时选中识别不出来，加个#号区分
+          value: subItem.id,//父子类别value一致时选中识别不出来，加个#号区分
-          label: subItem
+          label: subItem.bigType,
+          parentId:item.id,
+          level:2
         }))
       }));
     },
-
+    // 筛选节点 - 左侧树
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件 - 左侧树
+    async handleNodeClick(data, node) {
+      console.log(data)
+      // this.handleQuery();
+    },
+    /* 树节点增加 */
+    appendTreeNode(data) {
+      console.log(data) 
+      if(data&&data.level==1){
+        this.typeForm={}
+        this.typeForm.parentId = data.value;
+        this.typeForm.parentName = data.label; 
+      }else{
+        this.typeForm={}
+        this.typeForm.parentId = 0; 
+      }
+      this.resetForm("typeForm");
+      this.openType = true;
+      this.title = "新增";
+    }, 
+    /* 树节点修改 */
+    editTreeNode(data) {
+      console.log(data) 
+      this.typeForm={}
+      this.resetForm("typeForm");
+      this.$set(this.typeForm,"id",data.value)
+      this.$set(this.typeForm,"name",data.label)
+      // this.typeForm = {
+      //   ...data
+      // };
+      this.openType = true;
+      this.title = "修改";
+    },
+    /* 树节点删除 */
+    removeTreeNode(data) {
+      console.log(data, "删除时的数据源--");
+      this.$modal
+        .confirm("是否确认删除数据项？")
+        .then(function () {
+          return nutritionTypeDelApi({ids:[data.value]});
+        })
+        .then(() => {
+          this.$modal.msgSuccess("删除成功");
+          // this.getList();
+          this.getNutritionTypeList();
+        })
+        .catch(() => {});
+    },
+    onMousemove(data) {
+      this.isMousemoveId = data.value;
+    },
+    onMouseleave() {
+      this.isMousemoveId = null;
+    },
+    handleSubmit(){
+      console.log(this.typeForm)
+      this.$refs.typeForm.validate(valid => {
+        if (valid) {
+          if (this.typeForm.id != undefined) {
+            console.log('修改')
+            nutritionTypeEditApi(this.typeForm).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.openType = false;
+              this.getNutritionTypeList();
+            });
+          } else {
+            console.log('新增')
+            nutritionTypeAddApi(this.typeForm).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.openType = false;
+              this.getNutritionTypeList();
+            });
+          }
+        }
+      });
+    },
     /**
      * 处理级联选择器值变化
      * @param {Array<string>} value - 选中的值数组
@@ -601,10 +788,10 @@ export default {
         this.queryParams.littleType = undefined;
       }
     }, 
-
     /** 查询岗位列表 */
     getList() {
       this.loading = true;
+      console.log(this.queryParams)
       listNutrition(this.queryParams).then(response => {
         this.menuNutritionList = response.rows;
         this.total = Number(response.total);
@@ -678,9 +865,9 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.nutritionId;
+      // const id = row.nutritionId;
       var data = {
-        nutritionId: id
+        id: row.id
       }
       getNutrition(data).then(response => {
         this.form = response.data;
@@ -793,10 +980,140 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 ::v-deep .el-dialog__body {
   max-height: calc(90vh - 120px);
   overflow-y: auto;
   padding: 20px;
 }
+
+
+::v-deep.el-table .fixed-width .el-button--mini {
+  width: 60px !important;
+  margin-bottom: 10px;
+}
+
+::v-deep .btn-items .el-button + .el-button {
+  margin-left: 6px;
+}
+.btn-items {
+  margin-left: 4px;
+  .el-button--text {
+    font-size: 16px;
+  }
+}
+// ::v-deep .el-tree .el-tree-node__expand-icon.expanded {
+//   -webkit-transform: rotate(0deg);
+//   transform: rotate(0deg);
+// }
+// ::v-deep .el-tree .el-icon-caret-right:before {
+//   content: "\e783";
+//   font-size: 16px;
+// }
+// ::v-deep
+// .el-tree
+// .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+//   content: "\e781";
+//   font-size: 16px;
+//   color: #1890ff;
+// }
+
+// ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
+//   color: #1890ff !important;
+// }
+// ::v-deep .el-tree-node__expand-icon.is-leaf {
+//   color: transparent !important;
+// }
+
+// ::v-deep
+// .el-tree--highlight-current
+// .el-tree-node.is-current
+// > .el-tree-node__content {
+//   background-color: #8decf1;
+// }
+
+::v-deep .el-dialog .material-dialog {
+  // 表单标签文字样式
+  .el-form-item__label {
+    font-size: 14px;
+    color: #606266;
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  // 输入框文字样式
+  .el-input__inner {
+    font-size: 14px;
+    color: #303133;
+
+    &::placeholder {
+      font-size: 13px;
+      color: #c0c4cc;
+    }
+  }
+
+  // 单位文字样式
+  span {
+    font-size: 14px;
+    // color: #606266;
+    margin-left: 8px;
+  }
+
+  // 下拉选择框文字样式
+  .el-select {
+    .el-input__inner {
+      font-size: 14px;
+      color: #303133;
+    }
+  }
+
+  // 只读输入框样式
+  .el-input.is-disabled .el-input__inner {
+    background-color: #f5f7fa;
+    border-color: #e4e7ed;
+    color: #606266;
+    cursor: not-allowed;
+  }
+}
+
+// 表格内文字样式
+::v-deep .el-table {
+  font-size: 14px;
+
+  th {
+    font-weight: 500;
+    color: #303133;
+  }
+
+  td {
+    color: #606266;
+  }
+}
+
+// 按钮文字样式
+::v-deep .el-button {
+  font-size: 14px;
+
+  &--text {
+    font-size: 13px;
+  }
+}
+
+// 树节点文字样式
+::v-deep .el-tree-node__label {
+  font-size: 14px;
+  color: #606266;
+}
+
+// 搜索框文字样式
+::v-deep .el-input--small {
+  .el-input__inner {
+    font-size: 13px;
+
+    &::placeholder {
+      font-size: 13px;
+      color: #c0c4cc;
+    }
+  }
+}
 </style>