update.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" div-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-btn-area">
            <button type="button" class="cancel" @click="close('form')">取消</button>
            <button type="primary" class="confirm"  @click="submitForm('form')">确认</button>
          </div>
         <!-- <el-form-item style="margin-top: 60px">
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button @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:[
            {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:[
             {pattern:/^[1-9]\d*$/,message:'结算周期格式不正确',trigger:'blur'}
          ],

          subscribeDay:[
             {pattern:/^[1-9]\d*$/,message:'包场开放预约天数格式不正确',trigger:'blur'}
          ],

        }
      }
    },
    created: function () {

    },
    mounted: function () {
        this.getStore();
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      getStore(){
        let self=this;
        var id=self.$route.params.id;

        self.ajax({
          url:api.storeManage.get.url(id),
          success:function(res) {
            self.form= res.data;

          }
        });
        },
      submitForm(formName) {
        let self=this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.ajax({
              type:"POST",
              url:api.storeManage.update.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>