vue+elementUI表單和圖片上傳及驗證
阿新 • • 發佈：2019-01-14
<template>
<div class="add-keyperson-dialog">
<el-form :inline="true"
ref="addKeyPersonForm"
:model="addKeyPersonForm"
class="demo-form-inline"
label-width="1.4rem"
:rules="rules">
<el-form-item
<el-input style="width:1rem;" v-model="addKeyPersonForm.name" placeholder="請輸入姓名"></el-input>
</el-form-item>
<el-form-item label="性別：" label-width="0.64rem" prop="sex">
<el-select style="width:0.65rem;" v-model="
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="年齡：" label-width="0.64rem" prop="age"
<el-input style="width:0.65rem;" v-model="addKeyPersonForm.age" placeholder="請輸入"></el-input>
</el-form-item>
<el-form-item prop="file" class="upload-img-form" ref="uploadElement">
<el-upload class="upload-img"
:style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"
ref="uploadxls"
action="aaa"
::limit="1"
:show-file-list="false"
:on-change="handlePictureCardPreview"
:before-upload="beforeupload"
accept="image/png,image/gif,image/jpg,image/jpeg">
<i v-show="!dialogImageUrl" class="el-icon-upload avatar-uploader-icon"></i>
<div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上傳照片</div>
</el-upload>
</el-form-item>
<!--<img :src="dialogImageUrl"/>-->
<el-form-item label="身份證號：" prop="idCard">
<el-input style="width:1.7rem;" v-model="addKeyPersonForm.idCard" placeholder="請輸入身份證號"></el-input>
</el-form-item>
<el-form-item label="國籍：" label-width="0.64rem" prop="nationlity">
<el-select style="width:1.37rem;" v-model="addKeyPersonForm.nationlity" placeholder="請選擇">
<el-option label="中國" value="中國"></el-option>
</el-select>
</el-form-item>
<el-form-item label="車牌號：" prop="plateNumber">
<el-input style="width:1.7rem;" v-model="addKeyPersonForm.plateNumber" placeholder="請輸入車牌號"></el-input>
</el-form-item>
<el-form-item label="類別：" label-width="0.64rem" prop="userType">
<!--<el-select style="width:1.37rem;" v-model="addKeyPersonForm.userType" placeholder="請選擇">
<el-option label="精神病人" value="0"></el-option>
<el-option label="涉毒" value="1"></el-option>
</el-select>-->
<el-select style="width:1.37rem;" v-model="addKeyPersonForm.userType" placeholder="請選擇">
<el-option
v-for="item in keyPersonType"
:key="item.id"
:label="item.dataValue"
:value="item.dataKey">
{{item.dataValue}}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="戶籍地：" prop="registered">
<!-- <el-select style="width:1.3rem;" v-model="addKeyPersonForm.huji" placeholder="請選擇">
<el-option label="青島市" value="0"></el-option>
<el-option label="北京市" value="1"></el-option>
</el-select>-->
<el-cascader style="width:1.3rem;"
:options="options"
placeholder="請選擇"
v-model="addKeyPersonForm.registered"
:rules="{type: 'array'}"
@change="handleChange"
:separator="' '">
</el-cascader>
</el-form-item>
<el-form-item prop="registeredDetails">
<el-input style="width:3.55rem;" v-model="addKeyPersonForm.registeredDetails" placeholder="請輸入詳細地址"></el-input>
</el-form-item>
<el-form-item label="居住地：" prop="domicile">
<!--<el-select style="width:1.3rem;" v-model="addKeyPersonForm.juzhu" placeholder="請選擇">
<el-option label="青島市" value="0"></el-option>
<el-option label="北京市" value="1"></el-option>
</el-select>-->
<el-cascader style="width:1.3rem;"
:options="options"
placeholder="請選擇"
:rules="{type: 'array'}"
v-model="addKeyPersonForm.domicile"
@change="handleChange"
:separator="' '">
</el-cascader>
</el-form-item>
<el-form-item prop="domicileDetails">
<el-input style="width:3.55rem;" v-model="addKeyPersonForm.domicileDetails" placeholder="請輸入詳細地址"></el-input>
</el-form-item>
<el-form-item label="經緯度：">
<el-input style="width:5rem;" v-model="position" placeholder="請選擇經緯度" @click.native="showPosition=true"></el-input>
</el-form-item>
<!--<el-form-item label="所屬人員庫：">
<el-select style="width:4.75rem;" v-model="addKeyPersonForm.library" placeholder="請選擇">
<el-option label="全國重點人員庫1" value="0"></el-option>
<el-option label="全國重點人員庫2" value="1"></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="問題及現實表現：" prop="problem">
<el-input style="width:5rem;" v-model="addKeyPersonForm.problem" placeholder="請輸入問題及現實表現"></el-input>
</el-form-item>
<el-form-item label="採取措施：" prop="measure">
<el-input style="width:5rem;" v-model="addKeyPersonForm.measure" placeholder="請輸入措施"></el-input>
</el-form-item>
<el-form-item label="控制人員：" prop="controller">
<el-table
:data="addKeyPersonForm.controller"
stripe
height="1rem"
style="width: 5rem;">
<el-table-column
prop="name"
label="姓名"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="sex"
label="性別"
width="60">
</el-table-column>
<el-table-column
prop="birth"
show-overflow-tooltip
label="出生日期">
</el-table-column>
<el-table-column
prop="post"
show-overflow-tooltip
label="職務">
</el-table-column>
<el-table-column
prop="phone"
show-overflow-tooltip
label="聯絡電話">
</el-table-column>
<el-table-column
label="操作"
width="60">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="text" icon="el-icon-plus" @click="innerVisible = true">繼續新增</el-button>
</el-form-item>
<el-form-item label="備註：" prop="remark">
<el-input style="width:5rem;" type="textarea" rows="1" v-model="addKeyPersonForm.remark" placeholder="請輸入備註"></el-input>
</el-form-item>
<el-form-item label="最後更新時間：" v-if="addKeyPersonForm.updateTime">
<p style="width:4.7rem;">{{addKeyPersonForm.updateTime}}</p>
</el-form-item>
<el-form-item style="text-align:center;display:block;">
<el-button type="primary" @click="onSubmit" :disabled="doSubmitFlag">儲存</el-button>
</el-form-item>
</el-form>
<!--新增控制人員彈框------------------開始-->
<el-dialog
width="4.2rem"
title="新增控制人員"
v-if="innerVisible"
:visible.sync="innerVisible"
append-to-body
:before-close="closeFun">
<personnel-control-add @add-person="addPerson" ref="addForm"></personnel-control-add>
</el-dialog>
<!--新增控制人員彈框------------------結束-->
<!--選擇經緯度彈框------------------開始-->
<el-dialog
width="5.1rem"
title="選擇經緯度"
v-if="showPosition"
:visible.sync="showPosition"
append-to-body
:before-close="closePosition">
<personnel-add-position ref="addPosition" @add-position="addPosition" :position-form1="positionForm"></personnel-add-position>
</el-dialog>
<!--選擇經緯度彈框------------------結束-->
</div>
</template>
<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] + '/' + arrSplit[3] + '/' + 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] + '/' + arrSplit[3] + '/' + 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
<div class="add-keyperson-dialog">
<el-form :inline="true"
ref="addKeyPersonForm"
:model="addKeyPersonForm"
class="demo-form-inline"
label-width="1.4rem"
:rules="rules">
<el-form-item
<el-input style="width:1rem;" v-model="addKeyPersonForm.name" placeholder="請輸入姓名"></el-input>
</el-form-item>
<el-form-item label="性別：" label-width="0.64rem" prop="sex">
<el-select style="width:0.65rem;" v-model="
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="年齡：" label-width="0.64rem" prop="age"
<el-input style="width:0.65rem;" v-model="addKeyPersonForm.age" placeholder="請輸入"></el-input>
</el-form-item>
<el-form-item prop="file" class="upload-img-form" ref="uploadElement">
<el-upload class="upload-img"
:style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"
ref="uploadxls"
action="aaa"
::limit="1"
:show-file-list="false"
:on-change="handlePictureCardPreview"
:before-upload="beforeupload"
accept="image/png,image/gif,image/jpg,image/jpeg">
<i v-show="!dialogImageUrl" class="el-icon-upload avatar-uploader-icon"></i>
<div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上傳照片</div>
</el-upload>
</el-form-item>
<!--<img :src="dialogImageUrl"/>-->
<el-form-item label="身份證號：" prop="idCard">
<el-input style="width:1.7rem;" v-model="addKeyPersonForm.idCard" placeholder="請輸入身份證號"></el-input>
</el-form-item>
<el-form-item label="國籍：" label-width="0.64rem" prop="nationlity">
<el-select style="width:1.37rem;" v-model="addKeyPersonForm.nationlity" placeholder="請選擇">
<el-option label="中國" value="中國"></el-option>
</el-select>
</el-form-item>
<el-form-item label="車牌號：" prop="plateNumber">
<el-input style="width:1.7rem;" v-model="addKeyPersonForm.plateNumber" placeholder="請輸入車牌號"></el-input>
</el-form-item>
<el-form-item label="類別：" label-width="0.64rem" prop="userType">
<!--<el-select style="width:1.37rem;" v-model="addKeyPersonForm.userType" placeholder="請選擇">
<el-option label="精神病人" value="0"></el-option>
<el-option label="涉毒" value="1"></el-option>
</el-select>-->
<el-select style="width:1.37rem;" v-model="addKeyPersonForm.userType" placeholder="請選擇">
<el-option
v-for="item in keyPersonType"
:key="item.id"
:label="item.dataValue"
:value="item.dataKey">
{{item.dataValue}}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="戶籍地：" prop="registered">
<!-- <el-select style="width:1.3rem;" v-model="addKeyPersonForm.huji" placeholder="請選擇">
<el-option label="青島市" value="0"></el-option>
<el-option label="北京市" value="1"></el-option>
</el-select>-->
<el-cascader style="width:1.3rem;"
:options="options"
placeholder="請選擇"
v-model="addKeyPersonForm.registered"
:rules="{type: 'array'}"
@change="handleChange"
:separator="' '">
</el-cascader>
</el-form-item>
<el-form-item prop="registeredDetails">
<el-input style="width:3.55rem;" v-model="addKeyPersonForm.registeredDetails" placeholder="請輸入詳細地址"></el-input>
</el-form-item>
<el-form-item label="居住地：" prop="domicile">
<!--<el-select style="width:1.3rem;" v-model="addKeyPersonForm.juzhu" placeholder="請選擇">
<el-option label="青島市" value="0"></el-option>
<el-option label="北京市" value="1"></el-option>
</el-select>-->
<el-cascader style="width:1.3rem;"
:options="options"
placeholder="請選擇"
:rules="{type: 'array'}"
v-model="addKeyPersonForm.domicile"
@change="handleChange"
:separator="' '">
</el-cascader>
</el-form-item>
<el-form-item prop="domicileDetails">
<el-input style="width:3.55rem;" v-model="addKeyPersonForm.domicileDetails" placeholder="請輸入詳細地址"></el-input>
</el-form-item>
<el-form-item label="經緯度：">
<el-input style="width:5rem;" v-model="position" placeholder="請選擇經緯度" @click.native="showPosition=true"></el-input>
</el-form-item>
<!--<el-form-item label="所屬人員庫：">
<el-select style="width:4.75rem;" v-model="addKeyPersonForm.library" placeholder="請選擇">
<el-option label="全國重點人員庫1" value="0"></el-option>
<el-option label="全國重點人員庫2" value="1"></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="問題及現實表現：" prop="problem">
<el-input style="width:5rem;" v-model="addKeyPersonForm.problem" placeholder="請輸入問題及現實表現"></el-input>
</el-form-item>
<el-form-item label="採取措施：" prop="measure">
<el-input style="width:5rem;" v-model="addKeyPersonForm.measure" placeholder="請輸入措施"></el-input>
</el-form-item>
<el-form-item label="控制人員：" prop="controller">
<el-table
:data="addKeyPersonForm.controller"
stripe
height="1rem"
style="width: 5rem;">
<el-table-column
prop="name"
label="姓名"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="sex"
label="性別"
width="60">
</el-table-column>
<el-table-column
prop="birth"
show-overflow-tooltip
label="出生日期">
</el-table-column>
<el-table-column
prop="post"
show-overflow-tooltip
label="職務">
</el-table-column>
<el-table-column
prop="phone"
show-overflow-tooltip
label="聯絡電話">
</el-table-column>
<el-table-column
label="操作"
width="60">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="text" icon="el-icon-plus" @click="innerVisible = true">繼續新增</el-button>
</el-form-item>
<el-form-item label="備註：" prop="remark">
<el-input style="width:5rem;" type="textarea" rows="1" v-model="addKeyPersonForm.remark" placeholder="請輸入備註"></el-input>
</el-form-item>
<el-form-item label="最後更新時間：" v-if="addKeyPersonForm.updateTime">
<p style="width:4.7rem;">{{addKeyPersonForm.updateTime}}</p>
</el-form-item>
<el-form-item style="text-align:center;display:block;">
<el-button type="primary" @click="onSubmit" :disabled="doSubmitFlag">儲存</el-button>
</el-form-item>
</el-form>
<!--新增控制人員彈框------------------開始-->
<el-dialog
width="4.2rem"
title="新增控制人員"
v-if="innerVisible"
:visible.sync="innerVisible"
append-to-body
:before-close="closeFun">
<personnel-control-add @add-person="addPerson" ref="addForm"></personnel-control-add>
</el-dialog>
<!--新增控制人員彈框------------------結束-->
<!--選擇經緯度彈框------------------開始-->
<el-dialog
width="5.1rem"
title="選擇經緯度"
v-if="showPosition"
:visible.sync="showPosition"
append-to-body
:before-close="closePosition">
<personnel-add-position ref="addPosition" @add-position="addPosition" :position-form1="positionForm"></personnel-add-position>
</el-dialog>
<!--選擇經緯度彈框------------------結束-->
</div>
</template>
<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] + '/' + arrSplit[3] + '/' + 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] + '/' + arrSplit[3] + '/' + 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