<template>
|
<div class="photosevidence-form">
|
<el-dialog
|
title="现场照片证据"
|
:visible.sync="visible">
|
<div class="photose-form-box">
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
|
<el-form-item label="案件" prop="processAjApprovalId">
|
<el-select v-model="dataForm.processAjApprovalName" placeholder="请选择" @change="causeChange">
|
<el-option
|
v-for="item in processAjApprovalList"
|
:key="item.id"
|
:label="item.processAjCoverName"
|
:value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="现场证据照片" prop="photosAddr">
|
<el-upload
|
:headers="headers"
|
action="/admin/sys-file/upload"
|
list-type="picture-card"
|
:file-list="fileList"
|
:on-preview="handlePictureCardPreview"
|
:before-upload="handleBefore"
|
:on-success="handleSuccess"
|
:on-remove="handleRemove">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisible">
|
<img width="100%" :src="dialogImageUrl" alt="">
|
</el-dialog>
|
</el-form-item>
|
<div class="photose-main-box">
|
<el-form-item label="照片编号" prop="code">
|
<el-input v-model="dataForm.code" placeholder="照片编号"></el-input>
|
</el-form-item>
|
<div class="photose-main-table">
|
<table class="process-table" align="center" border="1" cellpadding="0" cellspacing="0">
|
<tr>
|
<th>
|
<el-form-item label="证明事项:" prop="description">
|
<el-input v-model="dataForm.description" type="textarea"></el-input>
|
</el-form-item>
|
</th>
|
<td rowspan="5">
|
<!--<el-form-item label="当事人签字照片" prop="clientSignImg" label-width="120px">
|
<el-input v-model="dataForm.clientSignImg" placeholder="当事人签字照片"></el-input>
|
</el-form-item>-->
|
<div class="qianzi-box">
|
<h1>当事人签字照片</h1>
|
<img class="qianziImg" :src="autograph" alt="">
|
<el-button @click="handleUploadAvatar" class="qianzi-name" type="primary">签字</el-button>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<th>
|
<el-form-item label="拍摄时间:" prop="takeTime">
|
<el-date-picker
|
v-model="dataForm.takeTime"
|
type="datetime"
|
placeholder="拍摄时间">
|
</el-date-picker>
|
</el-form-item>
|
</th>
|
</tr>
|
<tr>
|
<th>
|
<el-form-item label="拍摄地点:" prop="takeAddr">
|
<el-input v-model="dataForm.takeAddr"></el-input>
|
</el-form-item>
|
</th>
|
</tr>
|
<tr>
|
<th>
|
<el-form-item label="拍摄人:" prop="takePerson">
|
<el-input v-model="dataForm.takePerson"></el-input>
|
</el-form-item>
|
</th>
|
</tr>
|
<tr>
|
<th>
|
<div class="zhifa-box" v-for="(item,i) in dataForm.officerArry" :key="i">
|
<el-form-item label="执法人员:" prop="officerName" >
|
<el-input v-model="item.name"></el-input>
|
</el-form-item>
|
<el-form-item label="执法证号:" prop="officerIdNumber">
|
<el-input v-model="item.idNumber"></el-input>
|
</el-form-item>
|
</div>
|
</th>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</el-form>
|
<div class="footer-box">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
</div>
|
</div>
|
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {getObj, addObj, putObj} from '@/api/process/photosevidence'
|
import {findAll} from '@/api/process/processajapproval'
|
import store from "@/store";
|
import {mapState} from 'vuex'
|
export default {
|
name: "photosevidence-form",
|
data() {
|
return {
|
visible: false,
|
dialogImageUrl: '',
|
dialogVisible: false,
|
headers: {
|
Authorization: "Bearer " + store.getters.access_token,
|
},
|
fileList:[],//照片墙数组,删除和新上传后都重新赋值
|
processAjApprovalList:[],//案件列表
|
dataForm: {
|
id: 0,
|
processAjApprovalId: '',
|
processAjApprovalName: '',
|
subjectType: '',
|
code: '',
|
description: '',
|
takeTime: '',//拍摄时间
|
takeAddr: '',//拍摄地点
|
takePerson:'', //拍摄人
|
officer: '',
|
// officerName:'',//临时数据
|
// officerIdNumber:'',//临时数据
|
officerArry:[
|
{
|
name:'',//临时数据
|
idNumber:'',//临时数据
|
},
|
{
|
name:'',//临时数据
|
idNumber:'',//临时数据
|
}
|
],
|
clientSignImg: '/admin/sys_file/22af231205254f6faa99bd9851ae932c.JPG',//签名地址
|
photosAddr: ''//照片地址
|
},
|
dataRule: {
|
processAjApprovalId: [
|
{ required: true, message: '案件表id不能为空', trigger: 'blur' }
|
],
|
code: [
|
{ required: true, message: '照片编号不能为空', trigger: 'blur' }
|
],
|
'officerArry.name': [
|
{ required: true, message: '执法人员姓名不能为空', trigger: 'blur' }
|
],
|
'officerArry.idNumber': [
|
{ required: true, message: '执法人员证件号不能为空', trigger: 'blur' }
|
],
|
description: [
|
{ required: true, message: '证明事项说明不能为空', trigger: 'blur' }
|
],
|
takeTime: [
|
{ required: true, message: '拍摄时间不能为空', trigger: 'blur' }
|
],
|
takeAddr: [
|
{ required: true, message: '拍摄地点不能为空', trigger: 'blur' }
|
],
|
clientSignImg: [
|
{ required: true, message: '当时人签字照片不能为空', trigger: 'blur' }
|
],
|
photosAddr: [
|
{ required: true, message: '照片地址，多个逗号分隔不能为空', trigger: 'blur' }
|
]
|
},
|
autograph:'', //签字img回显
|
}
|
},
|
computed: {
|
...mapState({
|
userInfo:(state) => state.user.userInfo
|
})
|
},
|
methods: {
|
init (id) {
|
this.dataForm.id = id || 0
|
this.visible = true
|
this.$nextTick(() => {
|
this.$refs['dataForm'].resetFields()
|
if (this.dataForm.id) {
|
getObj(this.dataForm.id).then(response => {
|
this.dataForm = response.data.data
|
console.log(response.data.data.officer)
|
this.dataForm.officerArry = JSON.parse(this.dataForm.officer)
|
})
|
}
|
})
|
|
//获取所有案件
|
this.findAllProcessAj();
|
},
|
|
//查询所有案件
|
findAllProcessAj(){
|
findAll().then(res => {
|
console.log(res.data.data)
|
this.processAjApprovalList = res.data.data
|
});
|
},
|
|
//选择案件改变
|
causeChange(item){
|
console.log(item);
|
this.dataForm.processAjApprovalId = item.id
|
this.dataForm.processAjApprovalName = item.processAjCoverName
|
if(item.citizenIdcard){
|
this.dataForm.subjectType = "自然人"
|
this.dataForm.subjectName = item.citizenName
|
}else{
|
this.dataForm.subjectType = "公司或组织"
|
this.dataForm.subjectName = item.unitName
|
}
|
console.log(this.dataForm)
|
},
|
|
// 表单提交
|
dataFormSubmit () {
|
this.dataForm.takeTime = this.moment(this.dataForm.takeTime).format('YYYY-MM-DD HH:mm:ss')
|
// this.dataForm.officer = "[{'name':'张三','idNumber':'001'},{'name':'李四','idNumber':'002'}]"
|
// let arr = [];
|
// arr.push({"name":this.dataForm.officerName,"idNumber":this.dataForm.officerIdNumber})
|
// this.officerArry =
|
console.log(this.dataForm.officerArry)
|
this.dataForm.officer = JSON.stringify(this.dataForm.officerArry);
|
console.log(this.dataForm,"提交dataForm")
|
this.$refs['dataForm'].validate((valid) => {
|
if (valid) {
|
if (this.dataForm.id) {
|
putObj(this.dataForm).then(data => {
|
this.$message.success('修改成功')
|
this.visible = false
|
this.$emit('refreshDataList')
|
});
|
} else {
|
addObj(this.dataForm).then(data => {
|
this.$message.success('添加成功')
|
this.visible = false
|
this.$emit('refreshDataList')
|
})
|
}
|
}
|
})
|
},
|
handleUploadAvatar() {
|
this.autograph = this.userInfo.autograph
|
},
|
/******************************************以下是图片方法**************************************/
|
handleBefore(file){
|
// const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
|
const isJPG = (file.name.indexOf(".png") != -1 || file.name.indexOf(".jpg") != -1);
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
if (!isJPG) {
|
this.$message.error('上传头像图片只能是png或jpg 格式!');
|
}
|
if (!isLt5M) {
|
this.$message.error('上传头像图片大小不能超过 5MB!');
|
}
|
return isJPG && isLt5M;
|
},
|
handleSuccess(response, file, fileList){
|
console.log(fileList)
|
fileList.forEach(item=>{
|
this.dataForm.photosAddr += item.response.data.url + ","
|
})
|
this.dataForm.photosAddr = this.dataForm.photosAddr.substring(0, this.dataForm.photosAddr.length-1)
|
},
|
handleRemove(file, fileList) {
|
if(fileList.length == 0){
|
this.dataForm.photosAddr = ""
|
}else{
|
fileList.forEach(item=>{
|
this.dataForm.photosAddr += item.response.data.url + ","
|
})
|
this.dataForm.photosAddr = this.dataForm.photosAddr.substring(0, this.dataForm.photosAddr.length-1)
|
}
|
},
|
handlePictureCardPreview(file) {
|
this.dialogImageUrl = file.url;
|
this.dialogVisible = true;
|
},
|
|
}
|
}
|
</script>
|
|
<style>
|
.photose-main-box .el-textarea__inner{
|
border:none;
|
height: 100%;
|
}
|
.photose-main-box .el-input__inner{
|
border:none;
|
height: 100%;
|
}
|
.photose-main-box .el-date-editor.el-input,.photose-main-box .el-date-editor.el-input__inner{
|
width: 100%;
|
}
|
|
</style>
|
<style scoped>
|
.photose-form-box{
|
padding:20px 40px;
|
}
|
.process-table {
|
/*table-layout: fixed;*/
|
width: 100%;
|
margin: 0 auto;
|
min-width: 600px;
|
position: relative;
|
}
|
.zhifa-box{
|
height: 100%;
|
}
|
.qianzi-name{
|
position: absolute;
|
right: 10px;
|
bottom: 10px;
|
}
|
.qianziImg{
|
width: 120px;
|
margin:0 auto;
|
}
|
.qianzi-box{
|
width: 130px;
|
}
|
.footer-box{
|
display: flex;
|
justify-content: center;
|
margin-top: 20px;
|
}
|
.zhifa-box{
|
display: flex;
|
}
|
</style>
|
