新建编辑一个页面合体，拿下。

<template>
  <div id="register" v-loading="loadingLocationData" element-loading-text="加载中...">
    <h2>{{editMode ? '编辑代理商' : '新建代理商'}}</h2>

    <el-form label-position="right" label-width="90px" class="agent-form">
      <el-form-item required label="账号类型">
        <el-radio :disabled="editMode" v-model="form.agentType" :label="1">正式账号</el-radio>
        <el-radio :disabled="editMode" v-model="form.agentType" :label="2">内部账号</el-radio>
      </el-form-item>

      <el-form-item required label="企业名">
        <el-input
          placeholder="请输入完整的企业名"
          v-model="form.agentName"
          @blur="form.agentName = form.agentName.trim()"
          ref="focus"
          maxlength="40"
        ></el-input>
      </el-form-item>

      <el-form-item required label="地址">
        <el-row type="flex" justify="space-between">
          <el-col :span="7">
            <el-select v-model="form.countryId" placeholder="选择国家" @change="resetCountry">
              <el-option
                v-for="item in countryOptions"
                :key="item.countryId"
                :label="item.countryName"
                :value="item.countryId"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-select v-model="form.provinceId" placeholder="选择省/直辖市" @change="resetProvince">
              <el-option
                v-for="item in provinceOptions"
                :key="item.provinceId"
                :label="item.provinceName"
                :value="item.provinceId"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-select v-model="form.cityId" placeholder="选择市" @change="resetCity">
              <el-option
                v-for="item in cityOptions"
                :key="item.cityId"
                :label="item.cityName"
                :value="item.cityId"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-select v-model="form.districtId" placeholder="选择区/县">
              <el-option
                v-for="item in districtOptions"
                :key="item.districtId"
                :label="item.districtName"
                :value="item.districtId"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-col :span="24" class="margin-top">
          <el-input placeholder="请输入详细地址" v-model="form.agentAddress"  maxlength="200"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item required label="代理期">
        <el-date-picker
          type="daterange"
          v-model="form.daterange"
          placeholder="选择日期范围"
          range-separator="至"
          class="half"
          :editable="false"
          :clearable="false"
          :picker-options="picker"
          @change="onDateRangeChange"
        ></el-date-picker>
      </el-form-item>

      <el-form-item required label="渠道经理">
        <el-input
          v-model="form.sellerSysUserName"
          placeholder="请输入渠道经理"
          class="half"
          @blur="form.sellerSysUserName = form.sellerSysUserName.trim()"
           maxlength="40"
        ></el-input>
      </el-form-item>

      <el-form-item label="管理员信息">
        <hr color="#d8d8d8" size="1" style="margin: 17px 0">
      </el-form-item>

      <el-form-item required label="姓名">
        <el-input
          placeholder="请输入企业负责人姓名"
          v-model="form.adminStaffName"
          class="half"
          @blur="form.adminStaffName && (form.adminStaffName = form.adminStaffName.trim())"
          maxlength="40"
        ></el-input>
      </el-form-item>

      <el-form-item required label="账号">
        <el-input
          placeholder="请输入大陆手机号或邮箱"
          v-model="form.adminStaffAccount"
          class="half"
          :disabled="isdisabled"
        ></el-input>
        <!--
          total的意义：
          65536: 格式错误
          >0: 表示已经是total家企业的管理员
          =0: 还不是管理员，稳
          <0: 账号为空，清除提示
        -->
        <span
          v-show="total > 0"
          style="margin-left:10px;color:#FF4949"
        >{{total === 65536 ? '提示：账号格式错误' : '提示：该账号已是' + total + '家企业的管理员'}}</span>
        <span v-show="total === 0" style="margin-left:10px;color:#13CE66">提示：该账号尚未被注册</span>
        <span v-show="total < 0" style="margin-left:10px"></span>
      </el-form-item>

      <el-form-item label></el-form-item>
    </el-form>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple">&nbsp;</div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-button @click="close_go" class="cancel">取 消</el-button>
          <el-button
            type="primary"
            @click="submit"
            :loading="loading"
            :disabled="total === 65536"
            class="created"
          >{{editMode ? '保 存' : '创 建'}}</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">&nbsp;</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { format } from '@/lib/format'
import { register, update, fetch } from '@/api/agent'
import { CHINA_COUNTRY_ID } from '@/constants/location'
import { randomn } from '@/lib/utils'

export default {
  data() {
    return {
      form: {
        agentType: 1,
        agentName: '',
        countryId: CHINA_COUNTRY_ID,
        provinceId: '',
        districtId: '',
        cityId: '',
        agentAddress: '',
        daterange: [],
        agentStartTime: '',
        agentEndTime: '',
        sellerSysUserName: '',
        adminStaffName: '',
        adminStaffAccount: '',
        agentStaffPhone: '',
        agentStaffEmail: ''
      },
      picker: {
        disabledDate(time) {
          return time.getTime() < (Date.now() - 1000 * 60 * 60 * 24)
        },
        shortcuts: [
          {
            text: '签约一年',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              end.setYear(end.getFullYear() + 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '签约两年',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              end.setYear(end.getFullYear() + 2)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      loadingLocationData: false,
      loading: false,
      total: -1,
      agentInfo: {},
      verify:''//判断管理是否可编辑
    }
  },
  created() {
    console.log('created钩子～～～')
    if (this.editMode) {
      // 编辑代理商，获取代理商信息
      const query = {
        optionAnds: [
          { options: [{ key: 'agent_id', value: this.$route.params.id }] }
        ]
      }
      fetch(query).then(response => {
        this.agentInfo = JSON.parse(JSON.stringify(response.data[0]))
        this.verify = response.data[0].verify
        console.log(1111111111111111,this.verify)
        console.log('response', response, this.agentInfo)
        if (this.agentInfo) {
          let {
            agentType,
            agentName,
            countryId,
            provinceId,
            cityId,
            districtId,
            agentAddress,
            agentStartTime,
            agentEndTime,
            sellerSysUserName,
            adminStaffName,
            adminStaffPhone
          } = this.agentInfo
          this.form.agentType = agentType
          this.form.agentName = agentName
          this.form.countryId = countryId
          this.form.provinceId = provinceId == 0 ? '' : provinceId
          this.form.cityId = cityId == 0 ? '' : cityId
          this.form.districtId = districtId == 0 ? '' : districtId
          this.form.agentAddress = agentAddress
          this.form.agentStartTime = new Date(+agentStartTime)
          this.form.agentEndTime = new Date(+agentEndTime)
          this.form.sellerSysUserName = sellerSysUserName
          this.form.adminStaffName = adminStaffName
          this.form.adminStaffAccount = adminStaffPhone
          this.form.daterange = [
            new Date(+agentStartTime),
            new Date(+agentEndTime)
          ]
          console.log('this.form', this.form)
        }
      })
    }
  },
  computed: {
     isdisabled :function(){
        if(!this.editMode){          
          return false
        }else{ 
          return this.verify
        }
      },
    editMode() {
      return this.$route.name == 'agentEdit'//通过名字来判断是否为编辑页面
    },
    countryOptions() {
      return this.$store.state.location.countries || []
    },
    provinceOptions() {
      if (this.form.countryId === CHINA_COUNTRY_ID) {
        return this.$store.state.location.provincesOfChina
      } else {
        return []
      }
    },
    cityOptions() {
      if (this.form.provinceId) {
        return this.$store.state.location.citiesOfChina.filter(
          item => item.provinceId === this.form.provinceId
        )
      } else {
        return []
      }
    },
    districtOptions() {
      if (this.form.cityId) {
        return this.$store.state.location.districtsOfChina.filter(
          item => item.cityId === this.form.cityId
        )
      } else {
        return []
      }
    }
  },
  methods: {
    resetCountry() {
      if (this.form.countryId !== '17230') {
        this.form.provinceId = this.form.cityId = this.form.districtId = ''
      }
    },
    resetProvince() {
      this.$nextTick(() => {
        this.form.cityId = ''
        this.form.districtId = ''
      })
    },
    resetCity() {
      this.$nextTick(() => {
        this.form.districtId = ''
      })
    },
    onDateRangeChange() {
      this.form.agentStartTime = new Date(this.form.daterange[0]).getTime()
      this.form.agentEndTime = new Date(this.form.daterange[1]).getTime()
    },
    validate() {
      if (
        !this.form.agentName ||
        (!this.form.provinceId && this.form.countryId === CHINA_COUNTRY_ID) ||
        (!this.form.cityId && this.form.countryId === CHINA_COUNTRY_ID) ||
        !this.form.agentAddress ||
        !this.form.agentStartTime ||
        !this.form.agentEndTime ||
        !this.form.sellerSysUserName ||
        !this.form.adminStaffName ||
        !this.form.adminStaffAccount ||
        (!/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,4}$/.test(
          this.form.adminStaffAccount
        ) &&
          !/^1[0-9]{10}$/.test(this.form.adminStaffAccount))
      ) {
        this.$message({
          message: '信息不完整或不规范，请检查',
          type: 'warning'
        })
        return false
      }
      if (/^1d{10}$/.test(this.form.adminStaffAccount)) {
        this.form.agentStaffPhone = this.form.adminStaffAccount
        return true
      } else if (!/^[w.-]+@w+([.-]w+)*.w+$/.test(this.form.account)) {
        this.form.agentStaffEmail = this.form.adminStaffAccount
        return true
      } else {
        this.$message({
          message: '账号信息格式填写错误',
          type: 'warning'
        })
        return false
      }
    },
    submit() {
      // 如果选了非中国
      if (this.form.countryId !== '17230') {
        this.form.provinceId = '0'
        this.form.cityId = '0'
        this.form.districtId = '0'
      }
      if (this.validate()) {
        const info = `请确认以下关键信息：企业名：${
          this.form.agentName
        }，账号：${this.form.adminStaffAccount}`

        this.$confirm(info, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.editMode ? this.update() : this.create()
        })
      }
    },
    close_go() {
      history.go(-1)
    },
    create() {
      // 注册代理商
      console.log('this.form', this.form)
      const query = {
        agentEntity: {
          adminStaffName: this.form.adminStaffName,
          adminStaffPhone: this.form.agentStaffPhone,
          agentAddress: this.form.agentAddress,
          agentStartTime: this.form.agentStartTime,
          agentEndTime: this.form.agentEndTime,
          agentName: this.form.agentName,
          agentStatus: 1,
          agentType: this.form.agentType,
          cityId: this.form.cityId,
          countryId: this.form.countryId,
          currencyId: 'CNY',
          districtId: this.form.districtId,
          provinceId: this.form.provinceId,
          sellerSysUserName: this.form.sellerSysUserName,
          timeZoneId: 'Asia/Shanghai',
          sysSequence: '4' + new Date().getTime().toString() + randomn(3)
        },
        agentStaffEntity: {
          agentStaffName: this.form.adminStaffName,
          agentStaffEmail: this.form.agentStaffEmail,
          agentStaffPhone: this.form.agentStaffPhone,
          agentStaffRole: 1
        }
      }
      register(query).then(response => {
        console.log('注册结果', response)
        this.$message({
          message: '新增代理商成功',
          type: 'success'
        })
        this.$router.push('/main/agentList')
      })
      console.log(this.form.agentAddress)
    },
    update() {
      const query = {
        agentId: this.agentInfo.agentId,
        sysSequence: '4' + new Date().getTime().toString() + randomn(3),
        sysVersion: this.agentInfo.sysVersion,
        adminStaffName: this.form.adminStaffName,
        adminStaffPhone: this.form.agentStaffPhone,
        agentAddress: this.form.agentName,
        agentStartTime: new Date(this.form.agentStartTime).getTime(),
        agentEndTime: new Date(this.form.agentEndTime).getTime(),
        agentName: this.form.agentName,
        agentStatus: 1,
        agentType: this.form.agentType,
        cityId: this.form.cityId,
        countryId: this.form.countryId,
        districtId: this.form.districtId,
        currencyId: 'CNY',
        provinceId: this.form.provinceId,
        sellerSysUserName: this.form.sellerSysUserName,
        timeZoneId: 'Asia/Shanghai'
      }
      update(query).then(response => {
        console.log('编辑结果', response)
        if (response.code === 0) {
          this.$message({
            message: '编辑代理商成功',
            type: 'success'
          })
          this.$router.push('/main/agentList')
        }
      })
    }
  }
}
</script>

<style>
.agent-form {
   700px;
  margin: 0 auto;
}
.half {
   350px !important;
}
.margin-top {
  margin-top: 10px;
}
.cancel {
   100px;
  background: #fff;
  color: #353535;
  margin-right: 30px;
  margin-left: 20px;
}
.created {
   100px;
}
/* .center{
   margin: auto;
 } */
</style>

by the way

// 版本管理
const queryVersion = resolve => require(['@/views/queryVersion/queryVersion'], resolve)
const newVersion = resolve => require(['@/views/queryVersion/newVersion'], resolve)//新建 and 编辑页面




　　　{
        path: 'newVersion',
        name: 'newVersion',
        component: newVersion//
      },
      {
        path: 'editVersion',
        name: 'editVersion',
        component: newVersion
      }