save.vue

<template>
  <!-- 主内容 -->
  <div class="container-fluid">
    <div class="page page-member-all">
      <div class="page-breadcrumb">
        <ol class="breadcrumb">
          <li>
            <router-link v-bind:to="'/store/list'">商家管理</router-link>
          </li>
          <li class="active">添加商家</li>
        </ol>

      </div>
      <div class="page-body page-mem-body">
        <el-form ref="form" :model="form" label-width="100" :rules="rules">
            <div class="form-row">
              <span class="row-desc">商家名称</span>
              <el-form-item prop="name">

              <el-input v-model="form.name" type="text" placeholder="请输入商家名称" :maxlength="50"></el-input>
              </el-form-item>

            </div>
            <div class="form-row" prop="company">
              <span class="row-desc">公司全称</span>
              <el-form-item prop="company">

              <el-input v-model="form.company" type="text" placeholder="请输入公司全称" :maxlength="50"></el-input>
              </el-form-item>

            </div>


            <div class="form-row" prop="address">
              <span class="row-desc">地址</span>
              <el-form-item prop="address">
              <el-input type="text" v-model="form.address"placeholder="请输入地址" :maxlength="50"></el-input>
              </el-form-item>
            </div>

            <div class="form-row" prop="contact">
              <span class="row-desc">联系人</span>
              <el-form-item prop="contact">
              <el-input type="text" v-model="form.contact" placeholder="请输入联系人" :maxlength="50"></el-input>
              </el-form-item>
            </div>


            <div class="form-row" prop="contactPhone">
              <span class="row-desc">联系电话</span>
              <el-form-item prop="contactPhone">
              <el-input type="text" v-model="form.contactPhone" placeholder="请输入联系电话" :maxlength="11"></el-input>
              </el-form-item>
            </div>


            <div class="form-row" prop="dutyParagraph">
              <span class="row-desc">税号</span>
              <el-form-item prop="dutyParagraph">
              <el-input type="text" v-model="form.dutyParagraph" placeholder="请输入税号" :maxlength="50"></el-input>
              </el-form-item>
            </div>


            <div class="form-row" prop="taxRate">
              <span class="row-desc">费率</span>
              <el-form-item prop="taxRate">
              <el-input type="number" v-model="form.taxRate" placeholder="请输入税率" :maxlength="50"></el-input>
              </el-form-item>
            </div>


            <div class="form-row" prop="bank">
              <span class="row-desc">开户行</span>
              <el-form-item prop="bank">
              <el-input type="text" v-model="form.bank" placeholder="请输入开户行" :maxlength="50"></el-input>
              </el-form-item>
            </div>


            <div class="form-row" prop="bankAccount">
              <span class="row-desc">银行帐号</span>
              <el-form-item prop="bankAccount">
              <el-input type="text" v-model="form.bankAccount" placeholder="请输入银行帐号" :maxlength="50"></el-input>
              </el-form-item>
            </div>


            <div class="form-row" prop="cycle">
              <span class="row-desc">结算周期</span>
              <el-form-item prop="cycle">
              <el-input type="number" v-model="form.cycle" placeholder="请输入结算周期" :maxlength="50"> <template slot="append">天</template></el-input>

              </el-form-item>
            </div>


            <div class="form-row" prop="subscribeDay">
              <span class="row-desc">包场开放预约天数</span>
              <el-form-item prop="subscribeDay">
              <el-input type="number" v-model="form.subscribeDay" placeholder="请输入包场开放预约天数" :maxlength="50"> <template slot="append">天</template></el-input>
              </el-form-item>
            </div>
          <div class="form-row" prop="userName">
            <span class="row-desc">商家管理端帐号</span>
            <el-form-item prop="userName">
            <el-input type="text" v-model="form.userName" placeholder="请输入商家管理端帐号"></el-input>
            </el-form-item>
          </div>


            <div class="form-row" prop="password">
              <span class="row-desc">商家管理端密码</span>
              <el-form-item prop="password">
              <el-input type="text" v-model="form.password" placeholder="请输入商家管理端密码"></el-input>
              </el-form-item>
            </div>

          <div class="form-btn-area">
            <button type="button" class="cancel" @click="close('form')">取消</button>
            <button type="primary" class="confirm"  @click="submitForm('form')">确认</button>
          </div>
        <!--  <el-form-item class="form-btn-area">
            <el-button type="primary" class="confirm" @click="submitForm('form')">立即创建</el-button>
            <el-button  class="cancel" @click="close('form')">取消</el-button>
          </el-form-item>-->
        </el-form>
      </div>


    </div>
  </div>
</template>

<script>
  import ElInput from '../../../../node_modules/element-ui/packages/input/src/input'
  import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item'
  export default {
    components: {
      ElFormItem,
      ElInput},
    data() {
      return {
        form: {},
        rules: {
          taxRate:[
            {required: true, message: '请输入费率', trigger: 'blur'},
            {pattern:/^([1-9]+(\.[0-9]{2})?|0\.[1-9][0-9]|0\.0[1-9])$/,message:'费率输入格式不正确',trigger:'blur'}
          ],
          name: [
            {required: true, message: '请输入商家名称', trigger: 'blur'},
          ],
          company: [
            {required: true, message: '请输入公司全称', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请输入地址', trigger: 'blur'}
          ],
          contact: [
            {required:true, message:'请输入联系人',trigger:'blur'}
          ],
          contactPhone:[
            {required:true,message:'请输入联系人电话',trigger:'blur'},
            {pattern:/^0{0,1}(13[0-9]|15[0-9]|14[0-9]|18[0-9]|17[0-9])[0-9]{8}$/,message:'联系人电话格式不正确',trigger:'blur'}
          ],

          dutyParagraph:[
            {required:true,message:"请输入税号",trigger:'blur'}
          ],
          bank:[
            {required:true,message:'请输入开户行',trigger:'blur'}
          ],
          bankAccount:[
            {required:true,message:'请输入银行帐号',trigger:'blur'},
            {pattern:/^([1-9]{1})(\d{14}|\d{18})$/,message:'银行帐号格式不正确',trigger:'blur'}
          ],
          cycle:[
            {required:true,message:'请输入结算周期',trigger:'blur'},
            {pattern:/^[1-9]\d*$/,message:'请输入正整数',trigger:'blur'}
          ],

          subscribeDay:[
            {required:true,message:"请输入包场开放预约天数",trigger:'blur'},
            {pattern:/^[1-9]\d*$/,message:'请输入正整数',trigger:'blur'}
          ],
          userName:[
            {required:true,message:'请输入商家管理端帐号',trigger:'blur'}
          ],
          password:[
            {required:true,message:'请输入商家管理端密码',trigger:'blur'},
            {pattern:/^[\S]{6,16}$/,message:'密码长度为6-16位'}
          ],
        }
      }
    },
    created: function () {

    },
    mounted: function () {
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      submitForm(formName) {
        let self=this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.ajax({
              type:"POST",
              url:api.storeManage.create.url,
              data:self.form,
              success:function (res) {
                self.$message({
                  message: res.message,
                  duration:2000,
                  onClose:(function () {
                    self.$router.push('/store/list');
                  })
                });
              }
            });
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        close() {
          let self=this;
          this.$confirm('是否要返回列表页, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            self.$router.push('/store/list');
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        }
    }
  }
</script>