修复忌口展示

stdiet-ui/src/components/HealthyView/ACFCom/index.vue

@@ -33,10 +33,16 @@ const {
   mapGetters,
 } = createNamespacedHelpers("recipes");
 import SimpleIngredientListView from "./SimpleIngredientListView";
-import { updateHealthy } from "@/api/custom/healthy";
 export default {
   name: "ACFCom",
-  props: ["value", "id"],
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
   components: {
     SimpleIngredientListView,
   },
@@ -47,7 +53,7 @@ export default {
   },
   watch: {
     value(val) {
-      this.data = val;
+      this.data = val || [];
     },
   },
   methods: {
@@ -74,11 +80,7 @@ export default {
       this.handleOnHide();
     },
     handleOnHide() {
-      updateHealthy({ id: this.id, avoidFood: this.data }).then((res) => {
-        if (res.code === 200) {
-          this.$message.success("忌口修改成功");
-        }
-      });
+      this.$emit("onConfirm", { avoidFood: this.data });
     },
     ...mapMutations(["updateAvoidFoodIds"]),
   },

stdiet-ui/src/components/HealthyView/RemarkCom/index.vue

@@ -28,11 +28,14 @@
   </div>
 </template>
 <script>
-import { updateHealthy } from "@/api/custom/healthy";
-
 export default {
   name: "RemarkCom",
-  props: ["value", "id"],
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
   components: {},
   data() {
     return {
@@ -42,6 +45,7 @@ export default {
   },
   watch: {
     value(val) {
+      console.log(val);
       this.nData = val;
     },
     nData(val) {
@@ -70,12 +74,7 @@ export default {
   },
   methods: {
     handleOnHide() {
-      // console.log("handleOnHide");
-      updateHealthy({ id: this.id, remark: this.nData }).then((res) => {
-        if (res.code === 200) {
-          this.$message.success("备注修改成功");
-        }
-      });
+      this.$emit("onConfirm", { remark: this.nData });
     },
   },
 };

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

@@ -1,7 +1,7 @@
 <template>
   <div class="health_view_wrapper">
     <div>
-      <h2>{{ this.data.name }}</h2>
+      <h2>{{ data.name }}</h2>
       <div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
         <text-info
           v-for="i in info"
@@ -11,8 +11,16 @@
           extraclass="text-info-extra"
         />
       </div>
-      <RemarkCom v-if="dev" :value.sync="data.remark" :id="data.id" />
-      <ACFCom v-if="dev" :value.sync="data.avoidFood" :id="data.id" />
+      <RemarkCom
+        v-if="dev"
+        :value.sync="data.remark"
+        @onConfirm="handleOnConfirm"
+      />
+      <ACFCom
+        v-if="dev"
+        :value.sync="data.avoidFood"
+        @onConfirm="handleOnConfirm"
+      />
     </div>
     <el-collapse>
       <el-collapse-item
@@ -47,6 +55,7 @@
 import TextInfo from "@/components/TextInfo";
 import ACFCom from "./ACFCom";
 import RemarkCom from "./RemarkCom";
+import { updateHealthy } from "@/api/custom/healthy";
 
 export default {
   name: "HealthyView",
@@ -220,18 +229,18 @@ export default {
     getImgUrl(path) {
       return `${window.location.origin}${path}`;
     },
+    handleOnConfirm(data) {
+      updateHealthy({ id: this.data.id, ...data }).then((res) => {
+        if (res.code === 200) {
+          this.$message.success("修改成功");
+        }
+      });
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .health_view_wrapper {
-  position: relative;
-  .remark_btn {
-    position: absolute;
-    top: 0;
-    right: 16px;
-  }
-
   .msg-info {
     display: flex;
     margin-bottom: 8px;