新建编辑一个页面合体，拿下。
1 <template> 2 <div id="register" v-loading="loadingLocationData" element-loading-text="加载中..."> 3 <h2>{{editMode ? '编辑代理商' : '新建代理商'}}</h2> 4 5 <el-form label-position="right" label-width="90px" class="agent-form"> 6 <el-form-item required label="账号类型"> 7 <el-radio :disabled="editMode" v-model="form.agentType" :label="1">正式账号</el-radio> 8 <el-radio :disabled="editMode" v-model="form.agentType" :label="2">内部账号</el-radio> 9 </el-form-item> 10 11 <el-form-item required label="企业名"> 12 <el-input 13 placeholder="请输入完整的企业名" 14 v-model="form.agentName" 15 @blur="form.agentName = form.agentName.trim()" 16 ref="focus" 17 maxlength="40" 18 ></el-input> 19 </el-form-item> 20 21 <el-form-item required label="地址"> 22 <el-row type="flex" justify="space-between"> 23 <el-col :span="7"> 24 <el-select v-model="form.countryId" placeholder="选择国家" @change="resetCountry"> 25 <el-option 26 v-for="item in countryOptions" 27 :key="item.countryId" 28 :label="item.countryName" 29 :value="item.countryId" 30 ></el-option> 31 </el-select> 32 </el-col> 33 <el-col :span="7"> 34 <el-select v-model="form.provinceId" placeholder="选择省/直辖市" @change="resetProvince"> 35 <el-option 36 v-for="item in provinceOptions" 37 :key="item.provinceId" 38 :label="item.provinceName" 39 :value="item.provinceId" 40 ></el-option> 41 </el-select> 42 </el-col> 43 <el-col :span="7"> 44 <el-select v-model="form.cityId" placeholder="选择市" @change="resetCity"> 45 <el-option 46 v-for="item in cityOptions" 47 :key="item.cityId" 48 :label="item.cityName" 49 :value="item.cityId" 50 ></el-option> 51 </el-select> 52 </el-col> 53 <el-col :span="7"> 54 <el-select v-model="form.districtId" placeholder="选择区/县"> 55 <el-option 56 v-for="item in districtOptions" 57 :key="item.districtId" 58 :label="item.districtName" 59 :value="item.districtId" 60 ></el-option> 61 </el-select> 62 </el-col> 63 </el-row> 64 <el-col :span="24" class="margin-top"> 65 <el-input placeholder="请输入详细地址" v-model="form.agentAddress" maxlength="200"></el-input> 66 </el-col> 67 </el-form-item> 68 69 <el-form-item required label="代理期"> 70 <el-date-picker 71 type="daterange" 72 v-model="form.daterange" 73 placeholder="选择日期范围" 74 range-separator="至" 75 class="half" 76 :editable="false" 77 :clearable="false" 78 :picker-options="picker" 79 @change="onDateRangeChange" 80 ></el-date-picker> 81 </el-form-item> 82 83 <el-form-item required label="渠道经理"> 84 <el-input 85 v-model="form.sellerSysUserName" 86 placeholder="请输入渠道经理" 87 class="half" 88 @blur="form.sellerSysUserName = form.sellerSysUserName.trim()" 89 maxlength="40" 90 ></el-input> 91 </el-form-item> 92 93 <el-form-item label="管理员信息"> 94 <hr color="#d8d8d8" size="1" style="margin: 17px 0"> 95 </el-form-item> 96 97 <el-form-item required label="姓名"> 98 <el-input 99 placeholder="请输入企业负责人姓名" 100 v-model="form.adminStaffName" 101 class="half" 102 @blur="form.adminStaffName && (form.adminStaffName = form.adminStaffName.trim())" 103 maxlength="40" 104 ></el-input> 105 </el-form-item> 106 107 <el-form-item required label="账号"> 108 <el-input 109 placeholder="请输入大陆手机号或邮箱" 110 v-model="form.adminStaffAccount" 111 class="half" 112 :disabled="isdisabled" 113 ></el-input> 114 <!-- 115 total的意义： 116 65536: 格式错误 117 >0: 表示已经是total家企业的管理员 118 =0: 还不是管理员，稳 119 <0: 账号为空，清除提示 120 --> 121 <span 122 v-show="total > 0" 123 style="margin-left:10px;color:#FF4949" 124 >{{total === 65536 ? '提示：账号格式错误' : '提示：该账号已是' + total + '家企业的管理员'}}</span> 125 <span v-show="total === 0" style="margin-left:10px;color:#13CE66">提示：该账号尚未被注册</span> 126 <span v-show="total < 0" style="margin-left:10px"></span> 127 </el-form-item> 128 129 <el-form-item label></el-form-item> 130 </el-form> 131 <el-row> 132 <el-col :span="8"> 133 <div class="grid-content bg-purple"> </div> 134 </el-col> 135 <el-col :span="8"> 136 <div class="grid-content bg-purple-light"> 137 <el-button @click="close_go" class="cancel">取 消</el-button> 138 <el-button 139 type="primary" 140 @click="submit" 141 :loading="loading" 142 :disabled="total === 65536" 143 class="created" 144 >{{editMode ? '保 存' : '创 建'}}</el-button> 145 </div> 146 </el-col> 147 <el-col :span="8"> 148 <div class="grid-content bg-purple"> </div> 149 </el-col> 150 </el-row> 151 </div> 152 </template> 153 154 <script> 155 import { format } from '@/lib/format' 156 import { register, update, fetch } from '@/api/agent' 157 import { CHINA_COUNTRY_ID } from '@/constants/location' 158 import { randomn } from '@/lib/utils' 159 160 export default { 161 data() { 162 return { 163 form: { 164 agentType: 1, 165 agentName: '', 166 countryId: CHINA_COUNTRY_ID, 167 provinceId: '', 168 districtId: '', 169 cityId: '', 170 agentAddress: '', 171 daterange: [], 172 agentStartTime: '', 173 agentEndTime: '', 174 sellerSysUserName: '', 175 adminStaffName: '', 176 adminStaffAccount: '', 177 agentStaffPhone: '', 178 agentStaffEmail: '' 179 }, 180 picker: { 181 disabledDate(time) { 182 return time.getTime() < (Date.now() - 1000 * 60 * 60 * 24) 183 }, 184 shortcuts: [ 185 { 186 text: '签约一年', 187 onClick(picker) { 188 const start = new Date() 189 const end = new Date() 190 end.setYear(end.getFullYear() + 1) 191 picker.$emit('pick', [start, end]) 192 } 193 }, 194 { 195 text: '签约两年', 196 onClick(picker) { 197 const start = new Date() 198 const end = new Date() 199 end.setYear(end.getFullYear() + 2) 200 picker.$emit('pick', [start, end]) 201 } 202 } 203 ] 204 }, 205 loadingLocationData: false, 206 loading: false, 207 total: -1, 208 agentInfo: {}, 209 verify:''//判断管理是否可编辑 210 } 211 }, 212 created() { 213 console.log('created钩子～～～') 214 if (this.editMode) { 215 // 编辑代理商，获取代理商信息 216 const query = { 217 optionAnds: [ 218 { options: [{ key: 'agent_id', value: this.$route.params.id }] } 219 ] 220 } 221 fetch(query).then(response => { 222 this.agentInfo = JSON.parse(JSON.stringify(response.data[0])) 223 this.verify = response.data[0].verify 224 console.log(1111111111111111,this.verify) 225 console.log('response', response, this.agentInfo) 226 if (this.agentInfo) { 227 let { 228 agentType, 229 agentName, 230 countryId, 231 provinceId, 232 cityId, 233 districtId, 234 agentAddress, 235 agentStartTime, 236 agentEndTime, 237 sellerSysUserName, 238 adminStaffName, 239 adminStaffPhone 240 } = this.agentInfo 241 this.form.agentType = agentType 242 this.form.agentName = agentName 243 this.form.countryId = countryId 244 this.form.provinceId = provinceId == 0 ? '' : provinceId 245 this.form.cityId = cityId == 0 ? '' : cityId 246 this.form.districtId = districtId == 0 ? '' : districtId 247 this.form.agentAddress = agentAddress 248 this.form.agentStartTime = new Date(+agentStartTime) 249 this.form.agentEndTime = new Date(+agentEndTime) 250 this.form.sellerSysUserName = sellerSysUserName 251 this.form.adminStaffName = adminStaffName 252 this.form.adminStaffAccount = adminStaffPhone 253 this.form.daterange = [ 254 new Date(+agentStartTime), 255 new Date(+agentEndTime) 256 ] 257 console.log('this.form', this.form) 258 } 259 }) 260 } 261 }, 262 computed: { 263 isdisabled :function(){ 264 if(!this.editMode){ 265 return false 266 }else{ 267 return this.verify 268 } 269 }, 270 editMode() { 271 return this.$route.name == 'agentEdit'//通过名字来判断是否为编辑页面 272 }, 273 countryOptions() { 274 return this.$store.state.location.countries || [] 275 }, 276 provinceOptions() { 277 if (this.form.countryId === CHINA_COUNTRY_ID) { 278 return this.$store.state.location.provincesOfChina 279 } else { 280 return [] 281 } 282 }, 283 cityOptions() { 284 if (this.form.provinceId) { 285 return this.$store.state.location.citiesOfChina.filter( 286 item => item.provinceId === this.form.provinceId 287 ) 288 } else { 289 return [] 290 } 291 }, 292 districtOptions() { 293 if (this.form.cityId) { 294 return this.$store.state.location.districtsOfChina.filter( 295 item => item.cityId === this.form.cityId 296 ) 297 } else { 298 return [] 299 } 300 } 301 }, 302 methods: { 303 resetCountry() { 304 if (this.form.countryId !== '17230') { 305 this.form.provinceId = this.form.cityId = this.form.districtId = '' 306 } 307 }, 308 resetProvince() { 309 this.$nextTick(() => { 310 this.form.cityId = '' 311 this.form.districtId = '' 312 }) 313 }, 314 resetCity() { 315 this.$nextTick(() => { 316 this.form.districtId = '' 317 }) 318 }, 319 onDateRangeChange() { 320 this.form.agentStartTime = new Date(this.form.daterange[0]).getTime() 321 this.form.agentEndTime = new Date(this.form.daterange[1]).getTime() 322 }, 323 validate() { 324 if ( 325 !this.form.agentName || 326 (!this.form.provinceId && this.form.countryId === CHINA_COUNTRY_ID) || 327 (!this.form.cityId && this.form.countryId === CHINA_COUNTRY_ID) || 328 !this.form.agentAddress || 329 !this.form.agentStartTime || 330 !this.form.agentEndTime || 331 !this.form.sellerSysUserName || 332 !this.form.adminStaffName || 333 !this.form.adminStaffAccount || 334 (!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test( 335 this.form.adminStaffAccount 336 ) && 337 !/^1[0-9]{10}$/.test(this.form.adminStaffAccount)) 338 ) { 339 this.$message({ 340 message: '信息不完整或不规范，请检查', 341 type: 'warning' 342 }) 343 return false 344 } 345 if (/^1\d{10}$/.test(this.form.adminStaffAccount)) { 346 this.form.agentStaffPhone = this.form.adminStaffAccount 347 return true 348 } else if (!/^[\w.-]+@\w+([.-]\w+)*\.\w+$/.test(this.form.account)) { 349 this.form.agentStaffEmail = this.form.adminStaffAccount 350 return true 351 } else { 352 this.$message({ 353 message: '账号信息格式填写错误', 354 type: 'warning' 355 }) 356 return false 357 } 358 }, 359 submit() { 360 // 如果选了非中国 361 if (this.form.countryId !== '17230') { 362 this.form.provinceId = '0' 363 this.form.cityId = '0' 364 this.form.districtId = '0' 365 } 366 if (this.validate()) { 367 const info = `请确认以下关键信息：企业名：${ 368 this.form.agentName 369 }，账号：${this.form.adminStaffAccount}` 370 371 this.$confirm(info, '提示', { 372 confirmButtonText: '确定', 373 cancelButtonText: '取消', 374 type: 'info' 375 }).then(() => { 376 this.editMode ? this.update() : this.create() 377 }) 378 } 379 }, 380 close_go() { 381 history.go(-1) 382 }, 383 create() { 384 // 注册代理商 385 console.log('this.form', this.form) 386 const query = { 387 agentEntity: { 388 adminStaffName: this.form.adminStaffName, 389 adminStaffPhone: this.form.agentStaffPhone, 390 agentAddress: this.form.agentAddress, 391 agentStartTime: this.form.agentStartTime, 392 agentEndTime: this.form.agentEndTime, 393 agentName: this.form.agentName, 394 agentStatus: 1, 395 agentType: this.form.agentType, 396 cityId: this.form.cityId, 397 countryId: this.form.countryId, 398 currencyId: 'CNY', 399 districtId: this.form.districtId, 400 provinceId: this.form.provinceId, 401 sellerSysUserName: this.form.sellerSysUserName, 402 timeZoneId: 'Asia/Shanghai', 403 sysSequence: '4' + new Date().getTime().toString() + randomn(3) 404 }, 405 agentStaffEntity: { 406 agentStaffName: this.form.adminStaffName, 407 agentStaffEmail: this.form.agentStaffEmail, 408 agentStaffPhone: this.form.agentStaffPhone, 409 agentStaffRole: 1 410 } 411 } 412 register(query).then(response => { 413 console.log('注册结果', response) 414 this.$message({ 415 message: '新增代理商成功', 416 type: 'success' 417 }) 418 this.$router.push('/main/agentList') 419 }) 420 console.log(this.form.agentAddress) 421 }, 422 update() { 423 const query = { 424 agentId: this.agentInfo.agentId, 425 sysSequence: '4' + new Date().getTime().toString() + randomn(3), 426 sysVersion: this.agentInfo.sysVersion, 427 adminStaffName: this.form.adminStaffName, 428 adminStaffPhone: this.form.agentStaffPhone, 429 agentAddress: this.form.agentName, 430 agentStartTime: new Date(this.form.agentStartTime).getTime(), 431 agentEndTime: new Date(this.form.agentEndTime).getTime(), 432 agentName: this.form.agentName, 433 agentStatus: 1, 434 agentType: this.form.agentType, 435 cityId: this.form.cityId, 436 countryId: this.form.countryId, 437 districtId: this.form.districtId, 438 currencyId: 'CNY', 439 provinceId: this.form.provinceId, 440 sellerSysUserName: this.form.sellerSysUserName, 441 timeZoneId: 'Asia/Shanghai' 442 } 443 update(query).then(response => { 444 console.log('编辑结果', response) 445 if (response.code === 0) { 446 this.$message({ 447 message: '编辑代理商成功', 448 type: 'success' 449 }) 450 this.$router.push('/main/agentList') 451 } 452 }) 453 } 454 } 455 } 456 </script> 457 458 <style> 459 .agent-form { 460 width: 700px; 461 margin: 0 auto; 462 } 463 .half { 464 width: 350px !important; 465 } 466 .margin-top { 467 margin-top: 10px; 468 } 469 .cancel { 470 width: 100px; 471 background: #fff; 472 color: #353535; 473 margin-right: 30px; 474 margin-left: 20px; 475 } 476 .created { 477 width: 100px; 478 } 479 /* .center{ 480 margin: auto; 481 } */ 482 </style>
by the way
1 // 版本管理 2 const queryVersion = resolve => require(['@/views/queryVersion/queryVersion'], resolve) 3 const newVersion = resolve => require(['@/views/queryVersion/newVersion'], resolve)//新建 and 编辑页面 4 5 6 7 8 { 9 path: 'newVersion', 10 name: 'newVersion', 11 component: newVersion// 12 }, 13 { 14 path: 'editVersion', 15 name: 'editVersion', 16 component: newVersion 17 }
