|
|
@ -80,38 +80,42 @@
|
|
|
|
</a-form-model-item>
|
|
|
|
</a-form-model-item>
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="12">
|
|
|
|
<a-col :span="12">
|
|
|
|
身份证徽面照
|
|
|
|
身份证头像照
|
|
|
|
|
|
|
|
<!-- head -->
|
|
|
|
<a-upload
|
|
|
|
<a-upload
|
|
|
|
name="avatar"
|
|
|
|
|
|
|
|
list-type="picture-card"
|
|
|
|
list-type="picture-card"
|
|
|
|
class="avatar-uploader"
|
|
|
|
:action="`${$upload}`"
|
|
|
|
:show-upload-list="false"
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
|
accept='.jpg,.JPG,.png,.PNG,.jpeg,.JPEG'
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
@preview="handlePreview"
|
|
|
|
@change="handleChange"
|
|
|
|
@change="headChange"
|
|
|
|
|
|
|
|
:file-list="headList"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
|
|
|
<div v-if="headList.length < 1">
|
|
|
|
<div v-else>
|
|
|
|
<a-icon type="plus" />
|
|
|
|
<a-icon :type="loading ? 'loading' : 'plus'" />
|
|
|
|
<div class="ant-upload-text">
|
|
|
|
<div class="ant-upload-text"></div>
|
|
|
|
上传照片
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a-upload>
|
|
|
|
</a-upload>
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="12">
|
|
|
|
<a-col :span="12">
|
|
|
|
身份证头像照
|
|
|
|
身份证徽面照
|
|
|
|
|
|
|
|
<!-- back -->
|
|
|
|
<a-upload
|
|
|
|
<a-upload
|
|
|
|
name="avatar"
|
|
|
|
|
|
|
|
list-type="picture-card"
|
|
|
|
list-type="picture-card"
|
|
|
|
class="avatar-uploader"
|
|
|
|
:action="`${$upload}`"
|
|
|
|
:show-upload-list="false"
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
|
accept='.jpg,.JPG,.png,.PNG,.jpeg,.JPEG'
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
@preview="handlePreview"
|
|
|
|
@change="handleChange"
|
|
|
|
@change="backChange"
|
|
|
|
|
|
|
|
:file-list="backList"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
|
|
|
<div v-if="backList.length < 1">
|
|
|
|
<div v-else>
|
|
|
|
<a-icon type="plus" />
|
|
|
|
<a-icon :type="loading ? 'loading' : 'plus'" />
|
|
|
|
<div class="ant-upload-text">
|
|
|
|
<div class="ant-upload-text"></div>
|
|
|
|
上传照片
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a-upload>
|
|
|
|
</a-upload>
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
@ -207,14 +211,17 @@
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="24">
|
|
|
|
<a-col :span="24">
|
|
|
|
住户照片
|
|
|
|
住户照片
|
|
|
|
|
|
|
|
<!-- pic -->
|
|
|
|
<a-upload
|
|
|
|
<a-upload
|
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
|
|
|
|
|
list-type="picture-card"
|
|
|
|
list-type="picture-card"
|
|
|
|
:file-list="fileList"
|
|
|
|
:action="`${$upload}`"
|
|
|
|
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
|
|
|
|
accept='.jpg,.JPG,.png,.PNG,.jpeg,.JPEG'
|
|
|
|
@preview="handlePreview"
|
|
|
|
@preview="handlePreview"
|
|
|
|
@change="handleChange"
|
|
|
|
@change="picChange"
|
|
|
|
|
|
|
|
:file-list="picList"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div v-if="fileList.length < 4">
|
|
|
|
<div v-if="picList.length < 4">
|
|
|
|
<a-icon type="plus" />
|
|
|
|
<a-icon type="plus" />
|
|
|
|
<div class="ant-upload-text">
|
|
|
|
<div class="ant-upload-text">
|
|
|
|
上传照片
|
|
|
|
上传照片
|
|
|
@ -240,11 +247,14 @@
|
|
|
|
<a-button type="primary" @click="submit"> 提交 </a-button>
|
|
|
|
<a-button type="primary" @click="submit"> 提交 </a-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a-drawer>
|
|
|
|
</a-drawer>
|
|
|
|
|
|
|
|
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
|
|
|
|
|
|
|
<img alt="example" style="width: 100%" :src="previewImage" />
|
|
|
|
|
|
|
|
</a-modal>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { form, rules, options } from "./form.js"
|
|
|
|
import { form, rules, options, uploadHeaders } from "./form.js"
|
|
|
|
import { estate } from '@/api/basic/estate'
|
|
|
|
import { estate } from '@/api/basic/estate'
|
|
|
|
import { residentInsert, residentUpdate, residentInfo } from '@/api/basic/resident'
|
|
|
|
import { residentInsert, residentUpdate, residentInfo } from '@/api/basic/resident'
|
|
|
|
function getBase64(file) {
|
|
|
|
function getBase64(file) {
|
|
|
@ -269,11 +279,15 @@ export default {
|
|
|
|
rules,
|
|
|
|
rules,
|
|
|
|
options,
|
|
|
|
options,
|
|
|
|
loading: false,
|
|
|
|
loading: false,
|
|
|
|
imageUrl: '',
|
|
|
|
|
|
|
|
estateArr:[],
|
|
|
|
estateArr:[],
|
|
|
|
estateData:[],
|
|
|
|
estateData:[],
|
|
|
|
title:'新增住户',
|
|
|
|
title:'新增住户',
|
|
|
|
fileList: [],
|
|
|
|
previewVisible:false,
|
|
|
|
|
|
|
|
uploadHeaders,
|
|
|
|
|
|
|
|
previewImage:'',
|
|
|
|
|
|
|
|
headList: [],
|
|
|
|
|
|
|
|
backList: [],
|
|
|
|
|
|
|
|
picList: [],
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
@ -297,6 +311,43 @@ export default {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
submit(){
|
|
|
|
submit(){
|
|
|
|
|
|
|
|
// 照片
|
|
|
|
|
|
|
|
// 头像
|
|
|
|
|
|
|
|
let head = []
|
|
|
|
|
|
|
|
for(let item of this.headList){
|
|
|
|
|
|
|
|
// 新增的照片
|
|
|
|
|
|
|
|
if(item.response){
|
|
|
|
|
|
|
|
head.push(item.response.data)
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
// 已添加的照片
|
|
|
|
|
|
|
|
head.push(item.url.split('/')[item.url.split('/').length-1])
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.form.idCardFrontImgUrls = head
|
|
|
|
|
|
|
|
// 徽面
|
|
|
|
|
|
|
|
let back = []
|
|
|
|
|
|
|
|
for(let item of this.backList){
|
|
|
|
|
|
|
|
// 新增的照片
|
|
|
|
|
|
|
|
if(item.response){
|
|
|
|
|
|
|
|
back.push(item.response.data)
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
// 已添加的照片
|
|
|
|
|
|
|
|
back.push(item.url.split('/')[item.url.split('/').length-1])
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.form.idCardBackImgUrls = back
|
|
|
|
|
|
|
|
// 照片
|
|
|
|
|
|
|
|
let pic = []
|
|
|
|
|
|
|
|
for(let item of this.picList){
|
|
|
|
|
|
|
|
// 新增的照片
|
|
|
|
|
|
|
|
if(item.response){
|
|
|
|
|
|
|
|
pic.push(item.response.data)
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
// 已添加的照片
|
|
|
|
|
|
|
|
pic.push(item.url.split('/')[item.url.split('/').length-1])
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.form.residentImgUrls = pic
|
|
|
|
this.$refs.ruleForm.validate(async valid => {
|
|
|
|
this.$refs.ruleForm.validate(async valid => {
|
|
|
|
if(valid){
|
|
|
|
if(valid){
|
|
|
|
if(this.title === '新增住户'){
|
|
|
|
if(this.title === '新增住户'){
|
|
|
@ -325,6 +376,9 @@ export default {
|
|
|
|
this.$refs.ruleForm.resetFields();
|
|
|
|
this.$refs.ruleForm.resetFields();
|
|
|
|
this.$emit('close')
|
|
|
|
this.$emit('close')
|
|
|
|
this.estateArr = []
|
|
|
|
this.estateArr = []
|
|
|
|
|
|
|
|
this.headList = []
|
|
|
|
|
|
|
|
this.backList = []
|
|
|
|
|
|
|
|
this.picList = []
|
|
|
|
},
|
|
|
|
},
|
|
|
|
success(){
|
|
|
|
success(){
|
|
|
|
this.$emit('success')
|
|
|
|
this.$emit('success')
|
|
|
@ -336,8 +390,17 @@ export default {
|
|
|
|
this.previewImage = file.url || file.preview;
|
|
|
|
this.previewImage = file.url || file.preview;
|
|
|
|
this.previewVisible = true;
|
|
|
|
this.previewVisible = true;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleChange(info){
|
|
|
|
headChange(info){
|
|
|
|
console.log(info);
|
|
|
|
this.headList = info.fileList
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
backChange(info){
|
|
|
|
|
|
|
|
this.backList = info.fileList
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
picChange(info){
|
|
|
|
|
|
|
|
this.picList = info.fileList
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
handleCancel() {
|
|
|
|
|
|
|
|
this.previewVisible = false;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
beforeUpload(file) {
|
|
|
|
beforeUpload(file) {
|
|
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
|
@ -385,6 +448,42 @@ export default {
|
|
|
|
// idCardFrontImgUrls
|
|
|
|
// idCardFrontImgUrls
|
|
|
|
// idCardBackImgUrls
|
|
|
|
// idCardBackImgUrls
|
|
|
|
// residentImgUrls
|
|
|
|
// residentImgUrls
|
|
|
|
|
|
|
|
const head = []
|
|
|
|
|
|
|
|
for(let item of res.data.idCardFrontImgUrls){
|
|
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
|
|
name:item.url.split('_')[0] +'.'+ item.url.split('.')[1],
|
|
|
|
|
|
|
|
url: this.$ImgUrl(item.url),
|
|
|
|
|
|
|
|
uid:item.url.split('_')[1],
|
|
|
|
|
|
|
|
status:'done',
|
|
|
|
|
|
|
|
thumbUrl: this.$ImgUrl(item.url),
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
head.push(obj)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.headList = head
|
|
|
|
|
|
|
|
const back = []
|
|
|
|
|
|
|
|
for(let item of res.data.idCardBackImgUrls){
|
|
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
|
|
name:item.url.split('_')[0] +'.'+ item.url.split('.')[1],
|
|
|
|
|
|
|
|
url: this.$ImgUrl(item.url),
|
|
|
|
|
|
|
|
uid:item.url.split('_')[1],
|
|
|
|
|
|
|
|
status:'done',
|
|
|
|
|
|
|
|
thumbUrl: this.$ImgUrl(item.url),
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
back.push(obj)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.backList = back
|
|
|
|
|
|
|
|
const pic = []
|
|
|
|
|
|
|
|
for(let item of res.data.residentImgUrls){
|
|
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
|
|
name:item.url.split('_')[0] +'.'+ item.url.split('.')[1],
|
|
|
|
|
|
|
|
url: this.$ImgUrl(item.url),
|
|
|
|
|
|
|
|
uid:item.url.split('_')[1],
|
|
|
|
|
|
|
|
status:'done',
|
|
|
|
|
|
|
|
thumbUrl: this.$ImgUrl(item.url),
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
pic.push(obj)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.picList = pic
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}else{
|
|
|
|
}else{
|
|
|
|
this.form.id = null
|
|
|
|
this.form.id = null
|
|
|
@ -394,6 +493,6 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|