代客下单增加临时菜

src/views/tool/Instead/components/popup-linshiCai.vue

@@ -8,12 +8,20 @@
     <div>
       <div>将临时菜添加至购物车，不会影响总商品库</div>
       <div class="u-m-t-16">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="菜品名称">
-            <el-input v-model="form.name"></el-input>
+        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+          <el-form-item label="菜品名称" prop="name">
+            <el-input
+              v-model="form.name"
+              placeholder="请输入菜品名称"
+            ></el-input>
           </el-form-item>
-          <el-form-item label="菜品分类">
-            <el-select v-model="form.category" filterable placeholder="选择分类">
+          <el-form-item label="菜品分类" prop="categoryId">
+            <el-select
+              v-model="form.categoryId"
+              @change="selectChange($event, 'form', 'categoryId')"
+              filterable
+              placeholder="选择分类"
+            >
               <el-option
                 v-for="item in category"
                 :key="item.id"
@@ -23,13 +31,22 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="价格">
-            <el-input v-model="form.price" placeholder="请输入价格" type="number">
-                <template slot="append">元</template>
+          <el-form-item label="价格" prop="price">
+            <el-input
+              v-model="form.price"
+              placeholder="请输入价格"
+              type="number"
+            >
+              <template slot="append">元</template>
             </el-input>
           </el-form-item>
-          <el-form-item label="单位">
-            <el-select v-model="form.unit" filterable placeholder="选择单位">
+          <el-form-item label="单位" prop="unit">
+            <el-select
+              v-model="form.unit"
+              filterable
+              placeholder="选择单位"
+              @change="selectChange($event, 'form', 'unit')"
+            >
               <el-option
                 v-for="item in units"
                 :key="item.id"
@@ -39,13 +56,16 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="下单数量">
-            <el-input v-model="form.num" placeholder="请输入下单数量" type="number">
+          <el-form-item label="下单数量" prop="num">
+            <el-input
+              v-model="form.num"
+              placeholder="请输入下单数量"
+              type="number"
+            >
             </el-input>
           </el-form-item>
           <el-form-item label="备注">
-            <el-input v-model="form.note" placeholder="请输入备注" >
-            </el-input>
+            <el-input v-model="form.note" placeholder="请输入备注"> </el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -57,22 +77,32 @@
   </el-dialog>
 </template>
   <script>
-import { tbShopCategoryGet,tbShopUnit } from "@/api/shop";
-
+import { tbShopCategoryGet, tbShopUnit } from "@/api/shop";
+import * as $InsteadApi from "@/api/Instead";
 export default {
   data() {
     return {
       show: false,
+      rules: {
+        name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
+        categoryId: [
+          { required: true, message: "请选择菜品分类", trigger: "blur" },
+        ],
+        price: [{ required: true, message: "请输入菜品价格", trigger: "blur" }],
+        unit: [{ required: true, message: "请选择菜品单位", trigger: "blur" }],
+        num: [{ required: true, message: "请输入下单数量", trigger: "blur" }],
+      },
       form: {
         name: "",
-        category:'',
+        categoryId: "",
         price: "",
-        unit:'',
-        num:1,
-        note:''
+        unit: "",
+        num: 1,
+        note: "",
       },
-      category:[],
-      units:[]
+      category: [],
+      units: [],
+      option:{}
     };
   },
 
@@ -96,24 +126,52 @@ export default {
         sort: "id",
         shopId: localStorage.getItem("shopId"),
       });
-      this.units = content
+      this.units = content;
+    },
+    reset() {
+      this.$refs.form.resetFields();
     },
-    reset() {},
 
-    open() {
+    open(opt) {
       this.show = true;
+      this.option=opt
     },
     close() {
       this.show = false;
     },
-    confirm() {
-      this.$emit("confirm", this.form);
+
+    //解决selectc值改变后未验证问题
+    selectChange($event, ref, type) {
+      // this.$refs[ref][0].validateField(type)
+      this.$refs[ref].validateField(type);
+    },
+    async submit() {
+      const res = await $InsteadApi.$temporaryDishes({...this.option,...this.form});
+      console.log(res);
+      this.$notify({
+        title: "临时菜添加成功",
+        type: "success",
+      });
+      this.$emit("updateCart");
       this.close();
     },
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          console.log(valid);
+          // this.$emit("confirm", this.form);
+          // this.close();
+          this.submit();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
   },
   mounted() {
-    this.getCategory()
-    this.getUnit()
+    this.getCategory();
+    this.getUnit();
   },
 };
 </script>
@@ -131,7 +189,7 @@ input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-::v-deep  .el-input__inner::-webkit-inner-spin-button {
+::v-deep .el-input__inner::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }