修改界面

stdiet-admin/src/main/filters/local/application.yml

@@ -82,7 +82,7 @@ spring:
     druid:
       # 主库数据源
       master:
-        url: jdbc:mysql://47.115.23.82:3306/stdiet_test?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+        url: jdbc:mysql://47.115.23.82:3306/stdiet?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
         password: gzDxPaZcSiXJpi2N
         username: root
       slave:

stdiet-custom/src/main/resources/mapper/custom/SysDishesMapper.xml

@@ -44,7 +44,7 @@
 
     <sql id="selectSysIngreditentsByIdVo">
         SELECT * FROM(
-            SELECT ingredient_id AS id, ingredient_weight AS weight, cus_weight, cus_unit
+            SELECT ingredient_id AS id, ingredient_weight AS weight, cus_weight, cus_unit, remark
             FROM sys_dishes_ingredient
             WHERE dishes_id = #{id}
         ) dishes

stdiet-ui/src/components/AutoHideInfo/index.vue

@@ -3,7 +3,7 @@
     <div v-for="item in mData" :key="item">
       {{ item }}
     </div>
-    <div v-if="showMore">
+    <div v-if="data.length > 3">
       <div>...</div>
       <el-popover placement="top-start" width="200" popper-class="autohideinfo_detial" trigger="hover">
         <div v-for="item in data" :key="item">{{ item }}</div>
@@ -14,30 +14,28 @@
 </template>
 
 <script>
-export default {
+  export default {
-  name: "AutoHideInfo",
+    name: "AutoHideInfo",
-  data() {
+    data() {
-    return {
+      return {
-      mData: [],
+      };
-      showMore: false,
-    };
-  },
-  props: {
-    data: {
-      type: Array,
-      default: [],
-      required: true,
     },
-  },
+    props: {
-  watch: {
+      data: {
-    data: function (val, oldVal) {
+        type: Array,
-      if (val) {
+        default: '',
-        this.showMore = val.length > 3;
+        // required: true,
-        this.mData = val.slice(0, 3);
+      },
-      }
     },
-  },
+    computed: {
-};
+      mData: function () {
+        if (this.data instanceof Array) {
+          return this.data.slice(0, 3);
+        }
+        return [];
+      },
+    },
+  };
 </script>
 
 <style>

stdiet-ui/src/views/custom/dishes/index.vue

@@ -51,8 +51,16 @@
     </el-row>
 
     <el-table v-loading="loading" :data="dishesList" @selection-change="handleSelectionChange">
-      <!--      <el-table-column type="selection" width="55" align="center" />-->
+      <el-table-column label="审核状态" align="center" width="80">
-      <!--      <el-table-column label="id" align="center" prop="id" />-->
+        <template slot-scope="scope">
+          <el-tag
+            :type="scope.row.reviewStatus === 'yes' ? 'success' : 'danger'"
+            disable-transitions
+          >
+            {{ scope.row.reviewStatus === "yes" ? "已审核" : "未审核" }}
+          </el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="菜品名称" align="center" prop="name"/>
       <el-table-column label="菜品类型" align="center" prop="type" :formatter="typeFormat"/>
       <el-table-column label="包含食材" align="center">
@@ -65,18 +73,12 @@
       </el-table-column>
       <el-table-column label="推荐人群" align="center">
         <template slot-scope="scope">
-          <div v-for="tag in scope.row.recTags"
+          <autohideinfo :data="scope.row.recTags"/>
-            :key="tag">
-            {{tag}}
-          </div>
         </template>
       </el-table-column>
       <el-table-column label="忌口人群" align="center">
         <template slot-scope="scope">
-          <div v-for="tag in scope.row.notRecTags"
+          <autohideinfo :data="scope.row.notRecTags"/>
-               :key="tag">
-            {{tag}}
-          </div>
         </template>
       </el-table-column>
       <el-table-column label="做法" align="center" prop="methods"/>
@@ -219,6 +221,10 @@
                 prop="carbonRatio"
                 label="C/100g">
               </el-table-column>
+              <el-table-column
+                prop="remark"
+                label="备注">
+              </el-table-column>
             </el-table>
           </el-form-item>
           <el-form-item label="推荐人群">
@@ -255,9 +261,13 @@
 <script>
   import {addDishes, delDishes, exportDishes, getDishes, listDishes, updateDishes} from "@/api/custom/dishes";
   import {listAllIngredient} from "@/api/custom/ingredient";
+  import AutoHideInfo from "@/components/AutoHideInfo";
 
   export default {
     name: "Dishes",
+    components: {
+      autohideinfo: AutoHideInfo,
+    },
     data() {
       return {
         // 遮罩层
@@ -578,6 +588,10 @@
         const {columns, data} = param;
         return columns.reduce((arr, cur, idx) => {
           if (idx > 1) {
+            if(idx === 6) {
+              // 备注
+              return arr;
+            }
             arr[idx] = data.reduce((acc, dAcc) => {
               if (idx === 2) {
                 return acc + parseFloat(dAcc.weight);

stdiet-ui/src/views/custom/ingredient/index.vue

@@ -96,10 +96,12 @@
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
-          >搜索</el-button
+        >搜索
+        </el-button
         >
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
+        >重置
+        </el-button
         >
       </el-form-item>
     </el-form>
@@ -112,7 +114,7 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['custom:ingredient:add']"
-          >新增
+        >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
@@ -122,7 +124,7 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['custom:ingredient:export']"
-          >导出
+        >导出
         </el-button>
       </el-col>
       <right-toolbar
@@ -190,19 +192,15 @@
         width="120"
       >
         <template slot-scope="scope">
-          <div v-if="scope.row.notRec">
+          <autohideinfo :data="string2Arr(scope.row.notRec)"/>
-            <autohideinfo :data="scope.row.notRec.split(',')" />
-          </div>
         </template>
       </el-table-column>
       <el-table-column label="推荐人群" align="center" prop="rec" width="120">
         <template slot-scope="scope">
-          <div v-if="scope.row.rec">
+          <autohideinfo :data="string2Arr(scope.row.rec)"/>
-            <autohideinfo :data="scope.row.rec.split(',')" />
-          </div>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="备注" align="center" prop="remark"/>
       <el-table-column
         label="操作"
         align="center"
@@ -215,7 +213,7 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['custom:ingredient:edit']"
-            >修改
+          >修改
           </el-button>
           <el-button
             size="mini"
@@ -223,7 +221,7 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['custom:ingredient:remove']"
-            >删除
+          >删除
           </el-button>
         </template>
       </el-table-column>
@@ -243,7 +241,7 @@
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-col :span="12">
             <el-form-item label="食材名称" prop="name" label-width="90px">
-              <el-input v-model="form.name" placeholder="请输入食材名称" />
+              <el-input v-model="form.name" placeholder="请输入食材名称"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -378,239 +376,244 @@
 </template>
 
 <script>
-import {
+  import {
-  addIngredient,
+    addIngredient,
-  delIngredient,
+    delIngredient,
-  exportIngredient,
+    exportIngredient,
-  getIngredient,
+    getIngredient,
-  listIngredient,
+    listIngredient,
-  updateIngredient,
+    updateIngredient,
-} from "@/api/custom/ingredient";
+  } from "@/api/custom/ingredient";
 
-import AutoHideInfo from "@/components/AutoHideInfo";
+  import AutoHideInfo from "@/components/AutoHideInfo";
 
-import { listPhysicalSigns } from "@/api/custom/physicalSigns";
+  import {listPhysicalSigns} from "@/api/custom/physicalSigns";
 
-export default {
+  export default {
-  name: "Ingredient",
+    name: "Ingredient",
-  components: {
+    components: {
-    autohideinfo: AutoHideInfo,
+      autohideinfo: AutoHideInfo,
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 食材表格数据
-      ingredientList: [],
-      // 审核状态
-      reviewStatusOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 食材类别字典
-      typeOptions: [],
-      // 地域字典
-      areaOptions: [],
-      //
-      physicalSignsOptions: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        name: null,
-        type: null,
-        area: null,
-        notRecIds: null,
-        recIds: null,
-        reviewStatus: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {},
-    };
-  },
-  created() {
-    this.getList();
-    this.getDicts("cus_ing_type").then((response) => {
-      this.typeOptions = response.data;
-    });
-    this.getDicts("cus_area").then((response) => {
-      this.areaOptions = response.data;
-    });
-    this.getDicts("cus_review_status").then((response) => {
-      this.reviewStatusOptions = response.data;
-    });
-    listPhysicalSigns().then((response) => {
-      this.physicalSignsOptions = response.rows.map((obj) => ({
-        dictLabel: obj.name,
-        dictValue: obj.id,
-      }));
-    });
-  },
-  methods: {
-    /** 查询食材列表 */
-    getList() {
-      this.loading = true;
-      listIngredient(this.queryParams).then((response) => {
-        this.ingredientList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
     },
-    // 食材类别字典翻译
+    data() {
-    typeFormat(row, column) {
+      return {
-      return this.selectDictLabel(this.typeOptions, row.type);
+        // 遮罩层
-    },
+        loading: true,
-    // 地域字典翻译
+        // 选中数组
-    areaFormat(row, column) {
+        ids: [],
-      return this.selectDictLabel(this.areaOptions, row.area);
+        // 非单个禁用
-    },
+        single: true,
-    // 取消按钮
+        // 非多个禁用
-    cancel() {
+        multiple: true,
-      this.open = false;
+        // 显示搜索条件
-      this.reset();
+        showSearch: true,
-    },
+        // 总条数
-    // 表单重置
+        total: 0,
-    reset() {
+        // 食材表格数据
-      this.form = {
+        ingredientList: [],
-        id: null,
+        // 审核状态
-        name: null,
+        reviewStatusOptions: [],
-        type: null,
+        // 弹出层标题
-        proteinRatio: null,
+        title: "",
-        fatRatio: null,
+        // 是否显示弹出层
-        carbonRatio: null,
+        open: false,
-        area: null,
+        // 食材类别字典
-        notRecIds: [],
+        typeOptions: [],
-        recIds: [],
+        // 地域字典
-        remark: null,
+        areaOptions: [],
-        createBy: null,
+        //
-        createTime: null,
+        physicalSignsOptions: [],
-        updateBy: null,
+        // 查询参数
-        updateTime: null,
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          name: null,
+          type: null,
+          area: null,
+          notRecIds: null,
+          recIds: null,
+          reviewStatus: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {},
       };
-      this.resetForm("form");
     },
-    /** 搜索按钮操作 */
+    created() {
-    handleQuery() {
-      this.queryParams.pageNum = 1;
       this.getList();
+      this.getDicts("cus_ing_type").then((response) => {
+        this.typeOptions = response.data;
+      });
+      this.getDicts("cus_area").then((response) => {
+        this.areaOptions = response.data;
+      });
+      this.getDicts("cus_review_status").then((response) => {
+        this.reviewStatusOptions = response.data;
+      });
+      listPhysicalSigns().then((response) => {
+        this.physicalSignsOptions = response.rows.map((obj) => ({
+          dictLabel: obj.name,
+          dictValue: obj.id,
+        }));
+      });
     },
-    /** 重置按钮操作 */
+    methods: {
-    resetQuery() {
+      /** 查询食材列表 */
-      this.resetForm("queryForm");
+      getList() {
-      this.handleQuery();
+        this.loading = true;
-    },
+        listIngredient(this.queryParams).then((response) => {
-    // 多选框选中数据
+          this.ingredientList = response.rows;
-    handleSelectionChange(selection) {
+          this.total = response.total;
-      this.ids = selection.map((item) => item.id);
+          this.loading = false;
-      this.single = selection.length !== 1;
+        });
-      this.multiple = !selection.length;
+      },
-    },
+      // 食材类别字典翻译
-    /** 新增按钮操作 */
+      typeFormat(row, column) {
-    handleAdd() {
+        return this.selectDictLabel(this.typeOptions, row.type);
-      this.reset();
+      },
-      this.open = true;
+      // 地域字典翻译
-      this.title = "添加食材";
+      areaFormat(row, column) {
-    },
+        return this.selectDictLabel(this.areaOptions, row.area);
-    /** 修改按钮操作 */
+      },
-    handleUpdate(row) {
+      // 取消按钮
-      this.reset();
+      cancel() {
-      const id = row.id || this.ids;
+        this.open = false;
-      getIngredient(id).then((response) => {
+        this.reset();
-        this.form = response.data;
+      },
-        this.form.notRecIds = this.form.rec
+      // 表单重置
-          ? this.form.rec
+      reset() {
-              .split(",")
+        this.form = {
-              .map(
+          id: null,
-                (label) =>
+          name: null,
-                  this.physicalSignsOptions.find(
+          type: null,
-                    (pObj) => pObj.dictLabel === label
+          proteinRatio: null,
-                  ).dictValue
+          fatRatio: null,
-              )
+          carbonRatio: null,
-          : [];
+          area: null,
-        this.form.recIds = this.form.notRec
+          notRecIds: [],
-          ? this.form.notRec
+          recIds: [],
-              .split(",")
+          remark: null,
-              .map(
+          createBy: null,
-                (label) =>
+          createTime: null,
-                  this.physicalSignsOptions.find(
+          updateBy: null,
-                    (pObj) => pObj.dictLabel === label
+          updateTime: null,
-                  ).dictValue
+        };
-              )
+        this.resetForm("form");
-          : [];
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map((item) => item.id);
+        this.single = selection.length !== 1;
+        this.multiple = !selection.length;
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
         this.open = true;
-        this.title = "修改食材";
+        this.title = "添加食材";
-      });
+      },
-    },
+      /** 修改按钮操作 */
-    /** 提交按钮 */
+      handleUpdate(row) {
-    submitForm() {
+        this.reset();
-      this.$refs["form"].validate((valid) => {
+        const id = row.id || this.ids;
-        if (valid) {
+        getIngredient(id).then((response) => {
-          if (this.form.id != null) {
+          this.form = response.data;
-            updateIngredient(this.form).then((response) => {
+          this.form.notRecIds = this.form.rec
-              if (response.code === 200) {
+            ? this.form.rec
-                this.msgSuccess("修改成功");
+              .split(",")
-                this.open = false;
+              .map(
-                this.getList();
+                (label) =>
-              }
+                  this.physicalSignsOptions.find(
-            });
+                    (pObj) => pObj.dictLabel === label
-          } else {
+                  ).dictValue
-            addIngredient(this.form).then((response) => {
+              )
-              if (response.code === 200) {
+            : [];
-                this.msgSuccess("新增成功");
+          this.form.recIds = this.form.notRec
-                this.open = false;
+            ? this.form.notRec
-                this.getList();
+              .split(",")
-              }
+              .map(
-            });
+                (label) =>
+                  this.physicalSignsOptions.find(
+                    (pObj) => pObj.dictLabel === label
+                  ).dictValue
+              )
+            : [];
+          this.open = true;
+          this.title = "修改食材";
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate((valid) => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateIngredient(this.form).then((response) => {
+                if (response.code === 200) {
+                  this.msgSuccess("修改成功");
+                  this.open = false;
+                  this.getList();
+                }
+              });
+            } else {
+              addIngredient(this.form).then((response) => {
+                if (response.code === 200) {
+                  this.msgSuccess("新增成功");
+                  this.open = false;
+                  this.getList();
+                }
+              });
+            }
           }
-        }
+        });
-      });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$confirm('是否确认删除食材编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(function () {
+            return delIngredient(ids);
+          })
+          .then(() => {
+            this.getList();
+            this.msgSuccess("删除成功");
+          })
+          .catch(function () {
+          });
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        const queryParams = this.queryParams;
+        this.$confirm("是否确认导出所有食材数据项?", "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(function () {
+            return exportIngredient(queryParams);
+          })
+          .then((response) => {
+            this.download(response.msg);
+          })
+          .catch(function () {
+          });
+      },
+      string2Arr(str) {
+        return str ? str.split(',') : []
+      }
     },
-    /** 删除按钮操作 */
+  };
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$confirm('是否确认删除食材编号为"' + ids + '"的数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return delIngredient(ids);
-        })
-        .then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
-        .catch(function () {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有食材数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return exportIngredient(queryParams);
-        })
-        .then((response) => {
-          this.download(response.msg);
-        })
-        .catch(function () {});
-    },
-  },
-};
 </script>