食物规格增加默认规格功能

src/views/foodModifier/components/ModifierDetail.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="createPost-container">
-    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="90px" class="form-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="130px" class="form-container">
       <div class="createPost-main-container">
+        <el-checkbox @change="checkboxChange" :disabled="isEdit" v-model="isDefaultModifier" style="margin: 0 0 10px 100px">默认规格</el-checkbox>
         <el-form-item label="规格名称：" style="margin-bottom: 40px;width: 60%" prop="name">
-          <el-input v-model="postForm.name" placeholder="请输入名称" @blur="updateUnit" />
+          <el-input :disabled="isDefaultModifier" v-model="postForm.name" placeholder="请输入名称" @blur="updateUnit" />
         </el-form-item>
-        <el-form-item label="数值：" style="margin-bottom: 40px;width: 60%" prop="quantity">
+        <el-form-item v-show="!isDefaultModifier" label="数值：" style="margin-bottom: 40px;width: 60%" prop="quantity">
           <el-input v-model="postForm.quantity" placeholder="请输入数值" />
         </el-form-item>
-        <el-form-item label="单位名称：" style="margin-bottom: 40px;width: 60%" prop="unit">
+        <el-form-item v-show="!isDefaultModifier"  label="单位名称：" style="margin-bottom: 40px;width: 60%" prop="unit">
           <el-autocomplete
             style="width: 100%"
             v-model="postForm.unit"
@@ -36,7 +37,7 @@
         <el-form-item label="卡尺每格刻度：" prop="stepScale" style="margin-bottom: 40px;width: 60%">
           <el-input v-model="postForm.stepScale" placeholder="请输入卡尺每格刻度" />
         </el-form-item>
-        <el-form-item label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
+        <el-form-item v-show="!isDefaultModifier"  label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
           <dropzone
             id="modifierImages"
             :default-img="postForm.images"
@@ -68,11 +69,13 @@ export default {
   components: { Dropzone },
   data() {
     return {
+      defaultModifierName: '-',
       postForm: {},
       rules: {},
       loading: false,
       foodId: '',
-      modifierId: ''
+      modifierId: '',
+      isDefaultModifier: false
     }
   },
   created() {
@@ -86,6 +89,9 @@ export default {
     fetchData() {
       getFoodModifier(this.foodId, this.modifierId).then(res => {
         this.postForm = res.data
+        if (this.postForm.name === this.defaultModifierName) {
+          this.isDefaultModifier = true
+        }
       })
     },
     removeFile(file) {
@@ -142,6 +148,10 @@ export default {
       if (!this.postForm.inInitUnit && unitName) {
         this.$set(this.postForm, 'inInitUnit', unitName)
       }
+    },
+    checkboxChange(value) {
+      const name = value ? this.defaultModifierName : ''
+      this.$set(this.postForm, 'name', name)
     }
   }
 }