<template> <el-dialog :title="dialogObj.title" :visible.sync="dialogObj.show" :close-on-click-modal="false" center width="500px"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="赠品名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="成本价格" prop="cost_price"> <el-input v-model="form.cost_price"></el-input> </el-form-item> <el-form-item label="赠品总数" prop="gift_num"> <el-input v-model="form.gift_num"></el-input> </el-form-item> <el-form-item label="库存数量" prop="stock_num"> <div>{{form.stock_num}}</div> </el-form-item> <el-form-item label="赠品类型" prop="type"> <el-select v-model="form.type" placeholder="请选择" clearable> <el-option label="渠道赠品(市场渠道或投放需求关联的赠品)" value="1"></el-option> <el-option label="活动赠品(全勤打卡或其他运营活动关联的赠品)" value="2"></el-option> <el-option label="关联赠品(销售为了关单而赠送的赠品)" value="3"></el-option> </el-select> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogObj.show = false">取 消</el-button> <el-button type="primary" @click="sub">保 存</el-button> </span> </el-dialog> </template> <script> import {giftConfigAddApi, giftConfigEditApi} from "../../service/api"; export default { name: "dialogObj", props: [ 'dialogObj' ], data() { const validGiftNum = (rule, value, callback) => { if (!/^[0-9]+$/.test(value)) { callback(new Error('只能填数字')); } else { callback(); } }; const validCostPrice = (rule, value, callback) => { if (!/^[\.\d]*$/.test(value)) { callback(new Error('只能填数字和小数')); } else { callback(); } }; return { form: { name: '', cost_price: '', gift_num: '', stock_num: 0, type: '' }, rules: { name: [ {required: true, message: '请输入赠品名称'}, {max: 20, message: '赠品名称不能超过20汉字'} ], cost_price: [ {required: true, message: '请输入成本价格'}, {validator: validCostPrice} ], gift_num: [ {required: true, message: '请输入赠品总数'}, {validator: validGiftNum} ], type: [ {required: true, message: '请选择赠品类型', trigger: 'change'} ] } } }, methods: { sub() { this.$refs['form'].validate((valid) => { if (valid) { let json = { name: this.form.name, cost_price: this.form.cost_price, type: this.form.type, gift_num: this.form.gift_num }; switch (this.dialogObj.type) { case 0: giftConfigAddApi(json).then(res => { this.$message({ type: 'success', message: '新增成功!' }); this.$emit("reflash"); this.dialogObj.show = false; }); break; case 1: giftConfigEditApi(this.dialogObj.id, json).then(res => { this.$message({ type: 'success', message: '修改成功!' }); this.$emit("reflash"); this.dialogObj.show = false; }); break; } } else { return false; } }); } }, watch: { 'dialogObj.show'() { this.$nextTick(() => { this.$refs['form'].resetFields(); if (this.dialogObj.type == 1) { this.form.name = this.dialogObj.name; this.form.cost_price = this.dialogObj.cost_price; this.form.gift_num = this.dialogObj.gift_num; this.form.stock_num = this.dialogObj.stock_num; this.form.type = this.dialogObj.gift_type.toString(); } }); } } } </script> <style scoped> </style>