111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<template>
|
||
<el-dialog title="添加临时菜" width="410px" v-model="show" @close="reset">
|
||
<div>
|
||
<div>将临时菜添加至购物车，不会影响总商品库</div>
|
||
<div class="u-m-t-16">
|
||
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
|
||
<el-form-item label="菜品名称" prop="product_name">
|
||
<el-input v-model="form.product_name" placeholder="请输入菜品名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="价格" prop="discount_sale_amount">
|
||
<el-input v-model="form.discount_sale_amount" placeholder="请输入价格" type="number">
|
||
<template #append>元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="下单数量" prop="number">
|
||
<el-input v-model="form.number" placeholder="请输入下单数量" type="number"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input v-model="form.remark" placeholder="请输入备注"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div>
|
||
<el-button size="medium" @click="close">取消</el-button>
|
||
<el-button size="medium" type="primary" @click="confirm">确定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import { ElMessage } from "element-plus";
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
rules: {
|
||
product_name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
|
||
discount_sale_amount: [{ required: true, message: "请输入菜品价格", trigger: "blur" }],
|
||
number: [{ required: true, message: "请输入下单数量", trigger: "blur" }],
|
||
},
|
||
form: {
|
||
product_name: "",
|
||
discount_sale_amount: "",
|
||
number: 1,
|
||
remark: "",
|
||
},
|
||
category: [],
|
||
units: [],
|
||
option: {},
|
||
};
|
||
},
|
||
|
||
methods: {
|
||
reset() {
|
||
this.$refs.form.resetFields();
|
||
},
|
||
|
||
open(opt) {
|
||
this.show = true;
|
||
this.option = opt;
|
||
},
|
||
close() {
|
||
this.show = false;
|
||
},
|
||
async submit() {
|
||
this.$emit("confirm", this.form);
|
||
this.close();
|
||
},
|
||
confirm() {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
console.log(valid);
|
||
if (this.form.discount_sale_amount * 1 <= 0 || this.form.discount_sale_amount * 1 <= 0) {
|
||
return ElMessage.error("价格和数量必须大于0");
|
||
}
|
||
this.submit();
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
mounted() {},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.el-dialog__body) {
|
||
margin-bottom: 14px;
|
||
margin-top: 14px;
|
||
}
|
||
: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;
|
||
}
|
||
:deep(.el-input__inner::-webkit-inner-spin-button) {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
:deep(el-input__inner::-webkit-outer-spin-button) {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
</style> |