add_goods.vue 3.25 KB
Newer Older
xulili's avatar
xulili committed
1 2
<template>
  <div class="dialogs">
3 4
    <!-- <el-dialog  title="创建任务" :visible.sync="dialogVisible"  width="480px" -->
    <el-dialog  title="佣金配置" :visible.sync="dialogVisible"  width="480px"
xulili's avatar
xulili committed
5 6 7 8
      :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">
9
            <el-input v-model="form.goodName"></el-input>
xulili's avatar
xulili committed
10 11
          </el-form-item>
          <el-form-item label="价格:">
12
            <el-input disabled="true" v-model="form.goodPrice"></el-input>
xulili's avatar
xulili committed
13 14
          </el-form-item>
          <el-form-item label="库存:">
15
            <el-input v-model.number="form.goodNum"></el-input>
xulili's avatar
xulili committed
16 17
          </el-form-item>
          <el-form-item label="佣金:" prop="charges">
18
            <el-radio-group v-model="form.goodBackType">
xulili's avatar
xulili committed
19 20 21 22
              <el-radio :label="1">佣金</el-radio>
              <el-radio :label="2">百分比</el-radio>
            </el-radio-group>
          </el-form-item>
23 24
          <el-form-item v-if="form.goodBackType===1" label="金额:" label-width="176px" class="chargeInput" >
            <el-input v-model="form.goodBackPrice"></el-input>
xulili's avatar
xulili committed
25 26
            <span class="unit">元 ( ¥ )</span>
          </el-form-item>
27 28
          <el-form-item v-if="form.goodBackType===2" label="佣金比例:" label-width="176px"  class="chargeInput" >
            <el-input v-model="form.goodBackPercent"></el-input>
xulili's avatar
xulili committed
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
            <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:{
48 49 50 51 52 53 54 55 56 57
          goodName: '膳魔师',
          goodPrice: '200',
          goodNum: '44',
          goodBackType: 2,
          goodBackPrice: '20',
          goodBackPercent: '10',


          goods:'膳魔师',
          price:'200',
xulili's avatar
xulili committed
58
          charges:1,
59
          num:44
xulili's avatar
xulili committed
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
        },
        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>