增加临时菜弹窗

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

@@ -0,0 +1,142 @@
+<template>
+  <el-dialog
+    title="添加临时菜"
+    width="410px"
+    :visible.sync="show"
+    @close="reset"
+  >
+    <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-item>
+          <el-form-item label="菜品分类">
+            <el-select v-model="form.category" filterable placeholder="选择分类">
+              <el-option
+                v-for="item in category"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </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-input>
+          </el-form-item>
+          <el-form-item label="单位">
+            <el-select v-model="form.unit" filterable placeholder="选择单位">
+              <el-option
+                v-for="item in units"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="下单数量">
+            <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-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div slot="footer">
+      <el-button size="medium" @click="close"> 取消 </el-button>
+      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+  <script>
+import { tbShopCategoryGet,tbShopUnit } from "@/api/shop";
+
+export default {
+  data() {
+    return {
+      show: false,
+      form: {
+        name: "",
+        category:'',
+        price: "",
+        unit:'',
+        num:1,
+        note:''
+      },
+      category:[],
+      units:[]
+    };
+  },
+
+  methods: {
+    async getCategory() {
+      const { content } = await tbShopCategoryGet({
+        page: 0,
+        size: 300,
+        sort: "id",
+        shopId: localStorage.getItem("shopId"),
+      });
+      this.category = content.reduce((prve, cur) => {
+        prve.push(cur);
+        return [...prve, ...cur.childrenList];
+      }, []);
+    },
+    async getUnit() {
+      const { content } = await tbShopUnit({
+        page: 0,
+        size: 300,
+        sort: "id",
+        shopId: localStorage.getItem("shopId"),
+      });
+      this.units = content
+    },
+    reset() {},
+
+    open() {
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+    },
+    confirm() {
+      this.$emit("confirm", this.form);
+      this.close();
+    },
+  },
+  mounted() {
+    this.getCategory()
+    this.getUnit()
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  margin-bottom: 14px;
+  margin-top: 14px;
+}
+::v-deep .el-form-item__label {
+  text-align: left;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep  .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>