vue+elementUI实现表单和图片上传及验证功能示例(2)

<script> import options from '../../../static/js/country-data.js' import PersonnelControlAdd from './PersonnelControlAdd.vue' import axiosMap from './../../api/map' import axiosControl from './../../api/control' import PersonnelAddPosition from './PersonnelAddPosition.vue' export default { components: { PersonnelAddPosition, PersonnelControlAdd}, name: 'add-keyperson-dialog', props: { dialogType: { type: String }, keypersonList: { type: Object } }, computed: { position: { // 经纬度 // getter get: function () { let str = '' if (this.addKeyPersonForm.longitude !== '' && this.addKeyPersonForm.latitude !== '' && this.addKeyPersonForm.longitude !== null && this.addKeyPersonForm.latitude !== null) { str = this.addKeyPersonForm.longitude + ',' + this.addKeyPersonForm.latitude } return str }, // setter set: function (newValue) { } } }, /* watch: { keypersonList: { // 深度监听，可监听到对象、数组的变化 handler (newQuestion, oldQuestion) { this.addKeyPersonForm = Object.assign({}, this.keypersonList) this.dialogImageUrl = Object.assign({}, this.keypersonList).iconUrl }, deep: true } }, */ data () { var checkNumber = (rule, value, callback) => { let regEn = /^[1-9]\d*$/ if (!regEn.test(value)) { callback(new Error('正整数')) } else { callback() } } var checkIdCard = (rule, value, callback) => { let regEn = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ if (!regEn.test(value)) { callback(new Error('请输入正确身份证')) } else { // 校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10 // 下面分别分析出生日期和校验位 let num = value.toUpperCase() let len, re len = num.length if (len === 15) { re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/) let arrSplit = num.match(re) // 检查生日日期是否正确 let dtmBirth = new Date('19' + arrSplit[2] + 'https://www.jb51.net/' + arrSplit[3] + 'https://www.jb51.net/' + arrSplit[4]) let bGoodDay bGoodDay = (dtmBirth.getYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4])) if (!bGoodDay) { callback(new Error('请输入正确身份证')) } else { // 将15位身份证转成18位 //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10 let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2] let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'] var nTemp = 0, i num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6) for (i = 0; i < 17; i++) { nTemp += num.substr(i, 1) * arrInt[i] } num += arrCh[nTemp % 11] callback() } } if (len === 18) { re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/) let arrSplit = num.match(re) // 检查生日日期是否正确 let dtmBirth = new Date(arrSplit[2] + 'https://www.jb51.net/' + arrSplit[3] + 'https://www.jb51.net/' + arrSplit[4]) let bGoodDay bGoodDay = (dtmBirth.getFullYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4])) if (!bGoodDay) { callback(new Error('请输入正确身份证')) } else { // 检验18位身份证的校验码是否正确。 //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10 let valnum let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2] let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'] var nTemp = 0, i for (i = 0; i < 17; i++) { nTemp += num.substr(i, 1) * arrInt[i] } valnum = arrCh[nTemp % 11] if (!isNaN(num.substr(17, 1))) { callback() } if (valnum !== num.substr(17, 1)) { callback(new Error('请输入正确身份证')) } } } } } var checkPlateNum = (rule, value, callback) => { if (value && value !== '') { let regEn = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/ if (!regEn.test(value)) { callback(new Error('请输入正确车牌号')) } else { callback() } } else { callback() } } return { doSubmitFlag: false, showPosition: false, doUpload: false, keyPersonType: [], // 重点人员类型列表 addKeyPersonForm: Object.assign({}, this.keypersonList), positionForm: { longtitude: this.keypersonList.longitude, latitude: this.keypersonList.latitude }, options: options, // 存放城市数据, innerVisible: false, // 继续添加弹框 dialogImageUrl: Object.assign({}, this.keypersonList).iconUrl, // 图片 formData: new FormData(), rules: { // 表单验证 name: [ { required: true, message: '必填项', trigger: 'blur' } ], age: [ { required: true, message: '必填项', trigger: 'blur' }, { validator: checkNumber, trigger: 'blur' } ], sex: [ { required: true, message: '必填项', trigger: ['blur', 'change'] } ], nationlity: [ { required: true, message: '必填项', trigger: ['blur', 'change'] } ], userType: [ { required: true, message: '必填项', trigger: ['blur', 'change'] } ], idCard: [ { required: true, message: '必填项', trigger: 'blur' }, { validator: checkIdCard, trigger: 'blur' } ], registered: [ { required: true, type: 'array', message: '必填项', trigger: ['blur', 'change'] } ], registeredDetails: [ { required: true, message: '必填项', trigger: 'blur' } ], domicile: [ { required: true, type: 'array', message: '必填项', trigger: ['blur', 'change'] } ], domicileDetails: [ { required: true, message: '必填项', trigger: 'blur' } ], file: [ { required: true, message: '请上传图片' } ], plateNumber: [ { validator: checkPlateNum, trigger: 'change' } ] } } }, created () { this.getKeyPersonType() }, methods: { handleChange (value) { }, // 获取重点人员类型 getKeyPersonType: function () { let that = this let param = { typeCodes: 'userType' } axiosMap.getKeyPersonType(param) .then(res => { if (res.data.code === 200) { that.keyPersonType = res.data.rows['0'].userType that.keyPersonType.forEach(function (item) { if (that.addKeyPersonForm.userType === item.dataValue) { that.addKeyPersonForm.userType = item.dataKey } }) // that.keyPersonType.unshift({dataValue: '全部', dataKey: ''}) } else { that.$message.error({ message: res.data.message }) } }) }, // 添加控制人员 addPerson (person) { this.addKeyPersonForm.controller.push(person) }, // 添加经纬度 addPosition (position) { this.addKeyPersonForm.longitude = position[0] this.addKeyPersonForm.latitude = position[1] this.showPosition = false }, // 删除某个控制人员 deleteRow (index) { this.addKeyPersonForm.controller.splice(this.addKeyPersonForm.controller[index], 1) }, // 关闭新增控制人员 closeFun () { this.$refs.addForm.$refs.controlForm.resetFields() this.innerVisible = false }, // 关闭经纬度 closePosition () { // this.$refs.addPosition.$refs.addPosition.resetFields() this.showPosition = false }, // 图片预览 handlePictureCardPreview (file) { this.dialogImageUrl = file.url this.addKeyPersonForm.file = file.url this.doUpload = true this.$refs['addKeyPersonForm'].validateField('file') }, // 阻止upload的自己上传，进行再操作 beforeupload (file) { this.formData.append('file', file) return false }, // 上传重点人员信息 onSubmit: function () { let that = this that.formData = new FormData() that.rules.file = [{ required: true, message: '请上传图片' }] if (that.dialogType !== 'add' && !this.doUpload) { that.rules.file = [] that.$refs['uploadElement'].clearValidate() } that.$refs['addKeyPersonForm'].validate((valid) => { if (valid) { that.formData.append('name', that.addKeyPersonForm.name) if (that.addKeyPersonForm.sex === '男') { that.addKeyPersonForm.sex = 1 } else if (that.addKeyPersonForm.sex === '女') { that.addKeyPersonForm.sex = 2 } that.formData.append('sex', that.addKeyPersonForm.sex) that.formData.append('age', that.addKeyPersonForm.age) that.formData.append('idCard', that.addKeyPersonForm.idCard) that.formData.append('nationlity', that.addKeyPersonForm.nationlity) that.formData.append('plateNumber', that.addKeyPersonForm.plateNumber) that.formData.append('userType', that.addKeyPersonForm.userType) that.formData.append('longitude', that.addKeyPersonForm.longitude) that.formData.append('latitude', that.addKeyPersonForm.latitude) that.formData.append('registered', that.addKeyPersonForm.registered.join('-')) that.formData.append('registeredDetails', that.addKeyPersonForm.registeredDetails) that.formData.append('domicile', that.addKeyPersonForm.domicile.join('-')) that.formData.append('domicileDetails', that.addKeyPersonForm.domicileDetails) that.formData.append('problem', that.addKeyPersonForm.problem) that.formData.append('measure', that.addKeyPersonForm.measure) that.formData.append('controller', JSON.stringify(that.addKeyPersonForm.controller)) that.formData.append('remark', that.addKeyPersonForm.remark) if (that.dialogType === 'add') { that.$refs.uploadxls.submit() // 提交时触发了before-upload函数 that.doSubmitFlag = true axiosControl.saveNewKeyPerson(that.formData) .then(res => { that.doSubmitFlag = false if (res.data.code === 200) { that.$message({ type: 'success', message: '添加成功' }) that.$refs.addKeyPersonForm.dialogImageUrl = 'none' that.$refs.uploadxls.clearFiles() that.$refs.addKeyPersonForm.resetFields() that.fileName = '' that.uploadForm = new FormData() that.$emit('savePersonSuccess') } else { that.$message.error({ message: res.data.message }) } }) /* .catch(err => { that.$message.error({ message: err }) }) */ } else { if (!that.doUpload) { that.formData.append('iconUrl', that.addKeyPersonForm.iconUrl) } // 还要传id that.formData.append('id', that.addKeyPersonForm.id) that.doSubmitFlag = true axiosControl.saveEditKeyPerson(that.formData) .then(res => { that.doSubmitFlag = false if (res.data.code === 200) { that.$message({ type: 'success', message: '添加成功' }) that.$refs.addKeyPersonForm.dialogImageUrl = 'none' that.$refs.uploadxls.clearFiles() that.$refs.addKeyPersonForm.resetFields() that.fileName = '' that.uploadForm = new FormData() that.$emit('savePersonSuccess') } else { that.$message.error({ message: res.data.message }) } }) } } else { this.$message({ type: 'warning', message: '请填写正确格式' }) return false } }) } } } </script>