<template> <div class="dialogs"> <el-dialog title="创建任务" :visible.sync="dialogVisible" width="480px" :before-close="handleClose" class="addGoods"> <div class="dialogMain"> <el-form :model="form" :rules="formRules" ref="addform" label-width="130px"> <el-form-item label="商品:" prop="goods"> <el-input v-model="form.goods"></el-input> </el-form-item> <el-form-item label="价格:"> <el-input v-model="form.price"></el-input> </el-form-item> <el-form-item label="库存:"> <el-input v-model.number="form.num"></el-input> </el-form-item> <el-form-item label="佣金:" prop="charges"> <el-radio-group v-model="form.charges"> <el-radio :label="1">佣金</el-radio> <el-radio :label="2">百分比</el-radio> </el-radio-group> </el-form-item> <el-form-item v-if="form.charges===1" label="金额:" label-width="176px" class="chargeInput" > <el-input v-model="form.num"></el-input> <span class="unit">元 ( ¥ )</span> </el-form-item> <el-form-item v-if="form.charges===2" label="佣金比例:" label-width="176px" class="chargeInput" > <el-input v-model="form.num"></el-input> <span class="unit">( % )</span> </el-form-item> </el-form> </div> <div slot="footer" class="dialog-footer"> <el-button size="small" @click="handleCancel('addform')">取 消</el-button> <el-button size="small" type="primary" @click="handleSubmit('addform')">提交</el-button> </div> </el-dialog> </div> </template> <script> export default { name: 'add_goods', data(){ return{ dialogVisible:false, form:{ goods:'', price:'', charges:1, num:0 }, formRules:{ goods: [ { required: true, message: '请输入商品', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], } } }, methods:{ // 弹窗关闭 handleClose(done) { this.$confirm('确认关闭?') .then(_ => { done(); }) .catch(_ => {}); }, handleSubmit(formName){ this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, handleCancel(formName){ this.$refs[formName].resetFields(); this.dialogVisible = false }, }, watch:{ dialogVisible(){ if(this.dialogVisible){ if(this.$refs.addform){ this.$refs.addform.resetFields(); } } } } } </script> <style scoped> </style>