<template>
|
<el-dialog
|
:title="!dataForm.id ? '新增' : '修改'"
|
:close-on-click-modal="false"
|
:visible.sync="visible">
|
<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
|
<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.name"
|
:value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="案件被执行主体：公司组织或个人" prop="subjectType">
|
<el-input v-model="dataForm.subjectType" placeholder="案件被执行主体：公司组织或个人"></el-input>
|
</el-form-item>
|
-->
|
<el-form-item label="照片编号" prop="code">
|
<el-input v-model="dataForm.code" placeholder="照片编号"></el-input>
|
</el-form-item>
|
<el-form-item label="拍摄时间" prop="takeTime">
|
<!-- <el-input v-model="dataForm.takeTime" placeholder="拍摄时间"></el-input>-->
|
<el-date-picker
|
v-model="dataForm.takeTime"
|
type="datetime"
|
placeholder="拍摄时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="拍摄地点" prop="takeAddr">
|
<el-input v-model="dataForm.takeAddr" placeholder="拍摄地点"></el-input>
|
</el-form-item>
|
<el-form-item label="执法人员姓名" prop="officerName" >
|
<el-input v-model="dataForm.officerName" placeholder="执法人员"></el-input>
|
</el-form-item>
|
<el-form-item label="执法证号" prop="officerIdNumber">
|
<el-input v-model="dataForm.officerIdNumber" placeholder="执法证号"></el-input>
|
</el-form-item>
|
<el-form-item label="证明事项说明" prop="description">
|
<el-input v-model="dataForm.description" type="textarea" placeholder="证明事项说明"></el-input>
|
</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>
|
<el-form-item label="当事人签字照片" prop="clientSignImg">
|
<el-input v-model="dataForm.clientSignImg" placeholder="当事人签字照片"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {getObj, addObj, putObj} from '@/api/process/photosevidence'
|
import {findAll} from '@/api/process/processajapproval'
|
import store from "@/store";
|
|
export default {
|
data () {
|
return {
|
visible: false,
|
dialogImageUrl: '',
|
dialogVisible: false,
|
headers: {
|
Authorization: "Bearer " + store.getters.access_token,
|
},
|
fileList:[],//照片墙数组,删除和新上传后都重新赋值
|
processAjApprovalList:[
|
{id:1,name:"案件1",subjectType:"公司或组织",subjectId:"1",subjectName:"太华科技"},
|
{id:2,name:"案件2",subjectType:"公司或组织",subjectId:"2",subjectName:"方正集团"},
|
{id:3,name:"案件3",subjectType:"个人",subjectId:"1",subjectName:"张三"},
|
{id:4,name:"案件4",subjectType:"个人",subjectId:"2",subjectName:"李四"}
|
],//案件列表
|
dataForm: {
|
id: 0,
|
processAjApprovalId: '',
|
processAjApprovalName: '',
|
subjectType: '',
|
code: '',
|
description: '',
|
takeTime: '',//拍摄时间
|
takeAddr: '',//拍摄地点
|
officer: '',
|
officerName:'',//临时数据
|
officerIdNumber:'',//临时数据
|
clientSignImg: '/admin/sys_file/22af231205254f6faa99bd9851ae932c.JPG',//签名地址
|
photosAddr: ''//照片地址
|
},
|
dataRule: {
|
processAjApprovalId: [
|
{ required: true, message: '案件表id不能为空', trigger: 'blur' }
|
],
|
code: [
|
{ required: true, message: '照片编号不能为空', trigger: 'blur' }
|
],
|
officerName: [
|
{ required: true, message: '执法人员姓名不能为空', trigger: 'blur' }
|
],
|
officerIdNumber: [
|
{ 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' }
|
]
|
}
|
}
|
},
|
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
|
})
|
}
|
})
|
|
//获取所有案件
|
this.findAllProcessAj();
|
},
|
|
//查询所有案件
|
findAllProcessAj(){
|
findAll().then(res => {
|
console.log(res.data.data)
|
this.processAjApprovalList = res.data.data
|
console.log("ssss")
|
});
|
},
|
|
//选择案件改变
|
causeChange(item){
|
console.log(item);
|
this.dataForm.processAjApprovalId = item.id
|
this.dataForm.processAjApprovalName = item.name
|
this.dataForm.subjectType = item.subjectType
|
this.dataForm.subjectName = item.subjectName
|
},
|
|
// 表单提交
|
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.dataForm.officer = JSON.stringify(arr);
|
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')
|
})
|
}
|
}
|
})
|
},
|
|
/******************************************以下是图片方法**************************************/
|
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>
|
