编辑新增共用一个页面

 <div class="panel panel-default" v-if="!showList" @submit.prevent="validateBeforeSubmit">
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-sm-2 control-label">品牌中文</div>
        <div class="col-sm-10">
          <input type="text" name="brandZh" class="form-control" v-model="brandZh"  data-vv-delay="50"  data-vv-as="品牌中文" :rules="{required: true, message: '品牌不能为空', }"  :class="{'input': true, 'is-danger': errors.has('brandZh') }" placeholder="品牌中文"/>
          <span v-show="errors.has('brandZh')" class="text-danger">{{ errors.first('brandZh') }}</span>                               
        </div>
      </div>
       <div class="form-group">
        <div class="col-sm-2 control-label">品牌档次</div>
        <div class="col-sm-10">
          <el-select v-model="brandLevel" placeholder="请选择" >
          <el-option
            v-for="item in brandLevels"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>
      </div>       
       <div class="form-group">
        <div class="col-sm-2 control-label">正常交期（天）</div>
        <div class="col-sm-10">
        <input type="text" name="deliveryTime" class="form-control" v-model="deliveryTime"  data-vv-delay="50"  data-vv-as="交期"  placeholder="请输入" />
  

        <div class="form-group">
        <div class="col-sm-2 control-label"></div>
        <input type="button" class="btn btn-primary" @click="validateBeforeSubmit" value="确定"/>
        <input type="button" class="btn btn-warning" @click="reload" value="返回"/>
      </div>
    </form>
  </div>
</div>



add () {
      var _this = this
      _this.showList = false
      _this.title = '新增'
      _this.brandList = {}
      _this.brandZh = ''
      _this.brandEn = ''
      _this.brandLevel = 1
      _this.place = ''
      _this.companyWeb = ''
      _this.manufacturer = '',//制造商
      _this.dealer = '',//经销商
      _this.contactPerson = '',//联系人
      _this.phone  = '',//手机号码
      _this.mailbox = '',//邮箱
      _this.deliveryTime = ''
      _this.mainProducts = ''
      
      // _this.basePrice = ''
    },
 update (index, event) {
      var _this = this
      var id = event
      if (id == null) {
        return
      }
      _this.title = '编辑'
      _this.getInfo(id)
      _this.brandList = {}
    },
    saveOrUpdate (event) {
      var _this = this
      // _this.brandList.category = _this.category
      _this.brandList.brandZh = _this.brandZh
      _this.brandList.brandEn = _this.brandEn
      _this.brandList.brandLevel = _this.brandLevel
      _this.brandList.place = _this.place
      _this.brandList.companyWeb = _this.companyWeb
      _this.brandList.manufacturer =  _this.manufacturer 
      _this.brandList.dealer =  _this.dealer 
      _this.brandList.contactPerson =  _this.contactPerson 
      _this.brandList.phone  =  _this.phone 
      _this.brandList.mailbox =  _this.mailbox 
      _this.brandList.deliveryTime = _this.deliveryTime
       var re =  /^[1-9]\d*$/;
         if (!re.test(_this.brandList.deliveryTime)) {
            this.$message.error('交期不能为空且须为正整数');
            
            return
        }
      _this.brandList.mainProducts = _this.mainProducts
       var id = _this.brandList.id
      console.log(_this.brandList)
      var url = _this.brandList.id == null ? '/cost-manager/base/brand/save' : '/cost-manager/base/brand/update'
      api.request('POST', url, _this.brandList).then(function (rsp) {
        _this.brandList = {}
        if (rsp.data.code === 0) {
          console.log(rsp)
          if (id == null) {
            _this.$message('新增成功')
          } else {
            _this.$message('更新成功')
          }
          console.log(rsp)
          _this.getTableList()
          _this.reload()
        } else {
          _this.$message.error(rsp.data.message)
        }
      }).catch(error => {
        console.log('error:' + error)
      })
    },
getInfo (id) {

      var _this = this
      _this.brandList = {}
      var data={
        id
      }//编辑接口
      api.request('POST', '/cost-manager/base/brand/info',data).then(function (rsp) {
        if (rsp.data.code === 0) {
          _this.showList = false
          _this.brandList = rsp.data.data
          _this.brandZh = _this.brandList.brandZh
          _this.brandEn = _this.brandList.brandEn
          _this.brandLevel = _this.brandList.brandLevel
          _this.place = _this.brandList.place
          _this.companyWeb = _this.brandList.companyWeb
          _this.manufacturer = _this.brandList.manufacturer
          _this.dealer = _this.brandList.dealer
          _this.contactPerson = _this.brandList.contactPerson
          _this.phone = _this.brandList.phone
          _this.mailbox = _this.brandList.mailbox
          _this.deliveryTime = _this.brandList.deliveryTime
          _this.mainProducts = _this.brandList.mainProducts
        } else{
          _this.$message.error(rsp.data.message)
        }
      }).catch(error => {
        console.log('error:' + error)
      })
    },