<template>
|
<div class="book">
|
<div class="book-title">文种书类</div>
|
<div class="book-form">
|
<el-form ref="bookForm" label-width="120px" :model="book" :rules="bookRules" autoComplete="on">
|
<div class="book-item">
|
<!-- 文书种类 -->
|
<el-form-item label="文书种类:" prop="writType">
|
<el-select v-model="book.writType" placeholder="请输入文书种类">
|
<el-option v-for="item in kindList" :key="item.id" :label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 文书编号 -->
|
<el-form-item label="文书编号:" prop="writCode">
|
<el-input v-model="book.writCode" placeholder="请输入文书编号"></el-input>
|
</el-form-item>
|
</div>
|
<!-- 违法类型 -->
|
<el-form-item label="违法类型:" prop="illegalType" >
|
<el-input v-model="basecase" ></el-input>
|
</el-form-item>
|
<!-- 文书发放时间 -->
|
<el-form-item label="文书发放时间:" prop="sendTime">
|
<el-date-picker v-model="book.sendTime" type="datetime" placeholder="请选择年月日">
|
</el-date-picker>
|
</el-form-item>
|
<!-- 文书限定时间 -->
|
<el-form-item label="文书限定时间" prop="limitTime">
|
<el-date-picker v-model="book.limitTime" type="datetime" placeholder="请选择年月日">
|
</el-date-picker>
|
</el-form-item>
|
<!-- 文书发放内容 -->
|
<el-form-item label="文书发放内容:" prop="sendContent">
|
<el-input v-model="book.sendContent" placeholder="请输入文书发放内容"></el-input>
|
</el-form-item>
|
<!-- 实际整改时间 -->
|
<el-form-item label="实际整改时间:" prop="rectifyTime">
|
<el-date-picker v-model="book.rectifyTime" type="datetime" placeholder="请选择年月日">
|
</el-date-picker>
|
</el-form-item>
|
<!-- 整改情况 -->
|
<el-form-item label="整改情况:" prop="rectifySituation">
|
<el-input v-model="book.rectifySituation" placeholder="请输入整改情况"></el-input>
|
</el-form-item>
|
<!-- 备注 -->
|
<el-form-item label="备注:" prop="remark">
|
<el-input v-model="book.remark" placeholder="请输入备注"></el-input>
|
</el-form-item>
|
<!-- 文书照片上传 -->
|
<el-form-item label="文书照片上传:" prop="writPic">
|
<div class="upImg">
|
<!-- <div class="img-list" v-if="book.writPic.length!==0">
|
<div class="img" v-for="(item,index) in book.writPic" :key="index">
|
<img :src="item" alt="">
|
<i class="el-icon-close myicon" @click="handleRemove(index,1)"></i>
|
</div>
|
</div>
|
<div class="upload" v-if="book.writPic.length<4">
|
<el-upload :file-list="fileList" class="upload-demo"
|
action="/sccg/file/medias" multiple :show-file-list="false"
|
:limit="4" :on-success="handleSuccess1" :headers="getToken()">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div> -->
|
<MyUpload @setPictureUrl="writPic" @delPictureUrl="delWritPic"></MyUpload>
|
<div class="tip">{{book.writPic.length}} / 4</div>
|
</div>
|
</el-form-item>
|
<!-- 整改前照片 -->
|
<el-form-item label="整改前照片:" prop="originalPic">
|
<div class="upImg">
|
<!-- <div class="img-list" v-if="book.originalPic.length!==0">
|
<div class="img" v-for="(item,index) in book.originalPic" :key="index">
|
<img :src="item" alt="">
|
<i class="el-icon-close myicon" @click="handleRemove(index,2)"></i>
|
</div>
|
</div>
|
<div class="upload" v-if="book.originalPic.length<4">
|
<el-upload :file-list="fileList" class="upload-demo"
|
action="/sccg/file/medias" multiple :show-file-list="false"
|
:limit="4" :on-success="handleSuccess2" :headers="getToken()">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div> -->
|
<MyUpload @setPictureUrl="originalPic" @delPictureUrl="delOriginalPic"></MyUpload>
|
<div class="tip">{{book.originalPic.length}} / 4</div>
|
</div>
|
</el-form-item>
|
<!-- 整改后照片 -->
|
<el-form-item label="整改后照片:" prop="rectifiedPic">
|
<div class="upImg">
|
<!-- <div class="img-list" v-if="book.rectifiedPic.length!==0">
|
<div class="img" v-for="(item,index) in book.rectifiedPic" :key="index">
|
<img :src="item" alt="">
|
<i class="el-icon-close myicon" @click="handleRemove(index,3)"></i>
|
</div>
|
</div> -->
|
<!-- <div class="upload" v-if="book.rectifiedPic.length<4">
|
<el-upload :file-list="fileList" class="upload-demo"
|
action="/sccg/file/medias" multiple :show-file-list="false"
|
:limit="4" :on-success="handleSuccess3" :headers="getToken()">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div> -->
|
<MyUpload @setPictureUrl="rectifiedPic" @delPictureUrl="delRectifiedPic"></MyUpload>
|
<div class="tip">{{book.rectifiedPic.length}} / 4</div>
|
</div>
|
</el-form-item>
|
<!-- 其他照片 -->
|
<el-form-item label="其他:" prop="otherPic">
|
<div class="upImg">
|
<!-- <div class="img-list" v-if="book.otherPic.length!==0"> -->
|
<!-- <div class="img" v-for="(item,index) in book.otherPic" :key="index">
|
<img :src="item" alt="">
|
<i class="el-icon-close myicon" @click="handleRemove(index,4)"></i>
|
</div>
|
</div>
|
<div class="upload" v-if="book.otherPic.length<4">
|
<el-upload :file-list="fileList" class="upload-demo"
|
action="/sccg/file/medias" multiple :show-file-list="false"
|
:limit="4" :on-success="handleSuccess4" :headers="getToken()">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div> -->
|
<MyUpload @setPictureUrl="otherPic" @delPictureUrl="delOtherPic"></MyUpload>
|
<div class="tip">{{book.otherPic.length}} / 4</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {getCodeList} from '@/utils/helper'
|
import MyUpload from "@/components/myUpload"
|
export default {
|
components: {
|
MyUpload
|
},
|
data() {
|
const checkKind = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('文书种类不能为空'));
|
}
|
}
|
const checkId = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('文书编号不能为空'));
|
}
|
}
|
const checkGiveTime = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('发放时间不能为空'));
|
}
|
}
|
const checkUpTime = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('实际整改时间不能为空'));
|
}
|
}
|
const checkNote = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback();
|
}
|
}
|
const checkCondition = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('整改情况不能为空'));
|
}
|
}
|
const checkLimTime = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('限定时间不能为空'));
|
}
|
}
|
const checkVio = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('违法类型不能为空'));
|
}
|
}
|
const checkContent = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('发放内容不能为空'));
|
}
|
}
|
const checkRectPic = (rule, value, callback) => {
|
if (value.length!==0) {
|
callback();
|
} else {
|
callback(new Error('整改后照片不能为空'));
|
}
|
}
|
const checkWritPic = (rule, value, callback) => {
|
if (value.length!==0) {
|
callback();
|
} else {
|
callback(new Error('文书照片不能为空'));
|
}
|
}
|
const checkOrgPic = (rule, value, callback) => {
|
if (value.length !==0) {
|
callback();
|
} else {
|
callback(new Error('整改前照片不能为空'));
|
}
|
}
|
return {
|
book: {
|
writPic: [],
|
otherPic: [],
|
rectifiedPic: [],
|
originalPic: [],
|
},
|
bookRules: {
|
writType: [
|
{
|
trigger: 'change', validator: checkKind
|
}
|
],
|
writCode: [
|
{
|
trigger: 'blur', validator: checkId
|
}
|
],
|
// illegalType: [
|
// {
|
// trigger: 'blur', validator: checkVio
|
// }
|
// ],
|
sendTime: [
|
{
|
trigger: 'blur', validator: checkGiveTime
|
}
|
],
|
limitTime: [
|
{
|
trigger: 'blur', validator: checkLimTime
|
}
|
],
|
sendContent: [
|
{
|
trigger: 'blur', validator: checkContent
|
}
|
],
|
rectifyTime: [
|
{
|
trigger: 'blur', validator: checkUpTime
|
}
|
],
|
rectifySituation: [
|
{
|
trigger: 'blur', validator: checkCondition
|
}
|
],
|
noremark: [
|
{
|
trigger: 'blur', validator: checkNote
|
}
|
],
|
writPic: [{
|
trigger: 'blur', validator: checkWritPic
|
}],
|
rectifiedPic: [
|
{
|
trigger: 'blur', validator: checkRectPic
|
}
|
],
|
originalPic: [
|
{
|
trigger: 'blur', validator: checkOrgPic
|
}
|
],
|
},
|
fileList: [],
|
kindList: [
|
{
|
label: '书籍1',
|
value: 1,
|
},
|
{
|
label: '书籍2',
|
value: 2,
|
},
|
],
|
basecase:""
|
}
|
},
|
created() {
|
const {getBookType} = this
|
getBookType();
|
const {mycode}=this;
|
console.log(121,mycode)
|
this.getEventInfo(mycode)
|
},
|
props: ['caseId', 'closeDialog','mycode'],
|
methods: {
|
// 获取案件信息
|
async getEventInfo(mycode) {
|
await this.$axios({
|
method: 'get',
|
url: `sccg/base_case/baseCaseDetail/${mycode}`
|
})
|
.then(res => {
|
this.basecase = res.data.baseCase.illegalBuilding.categoryText;
|
this.book.illegalType=res.data.baseCase.illegalBuilding.categoryId;
|
})
|
},
|
|
handleSuccess1(res, file, filelist) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
if (this.book.writPic.length < 4) {
|
this.book.writPic.push(baseUrl + res.data.url1)
|
}
|
},
|
handleSuccess2(res, file, filelist) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
if (this.book.originalPic.length < 4) {
|
this.book.originalPic.push(baseUrl + res.data.url1)
|
}
|
},
|
handleSuccess3(res, file, filelist) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
if (this.book.rectifiedPic.length < 4) {
|
this.book.rectifiedPic.push(baseUrl + res.data.url1)
|
}
|
},
|
handleSuccess4(res, file, filelist) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
if (this.book.otherPic.length < 4) {
|
this.book.otherPic.push(baseUrl + res.data.url1)
|
}
|
},
|
getToken() {
|
const token = sessionStorage.getItem('token');
|
const tokenHead = sessionStorage.getItem('tokenHead');
|
if (token && tokenHead) {
|
return { Authorization: tokenHead + token }
|
}
|
},
|
|
// 设置上传成功之后的图片地址
|
writPic({ url }) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
if (this.book.originalPic.length < 4) {
|
this.book.writPic.push(baseUrl + url)
|
}
|
console.log(url);
|
},
|
//删除图片
|
delWritPic({url}){
|
const baseUrl = 'http://140.143.152.226:8410/';
|
console.log(url);
|
this.book.writPic.splice(this.book.writPic.indexOf(baseUrl + url),1);
|
},
|
|
// 设置上传成功之后的图片地址
|
otherPic({ url }) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
if (this.book.otherPic.length < 4) {
|
this.book.otherPic.push(baseUrl + url)
|
}
|
console.log(url);
|
},
|
//删除图片
|
delOtherPic({url}){
|
const baseUrl = 'http://140.143.152.226:8410/';
|
this.book.otherPic.splice(this.book.otherPic.indexOf(baseUrl + url),1);
|
},
|
|
// 设置上传成功之后的图片地址
|
rectifiedPic({ url }) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
if (this.book.otherPic.length < 4) {
|
this.book.rectifiedPic.push(baseUrl + url)
|
}
|
console.log(url);
|
},
|
//删除图片
|
delRectifiedPic({url}){
|
const baseUrl = 'http://140.143.152.226:8410/';
|
this.book.rectifiedPic.splice(this.book.rectifiedPic.indexOf(baseUrl + url),1);
|
},
|
// 设置上传成功之后的图片地址
|
originalPic({ url }) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
if (this.book.otherPic.length < 4) {
|
this.book.originalPic.push(baseUrl + url)
|
}
|
console.log(url);
|
},
|
//删除图片
|
delOriginalPic({url}){
|
const baseUrl = 'http://140.143.152.226:8410/';
|
this.book.originalPic.splice(this.book.originalPic.indexOf(baseUrl + url),1);
|
},
|
|
// 获取文书种类
|
async getBookType(){
|
let arr
|
arr = await getCodeList('15');
|
this.kindList = arr;
|
}
|
},
|
watch: {
|
'book.writPic.length': {
|
handler(newLen, oldLen) {
|
if (newLen !== 0) {
|
this.$refs.bookForm.validateField('writPic');
|
}
|
},
|
deep: true,
|
},
|
'book.rectifiedPic.length': {
|
handler(newLen, oldLen) {
|
if (newLen !== 0) {
|
this.$refs.bookForm.validateField('rectifiedPic');
|
}
|
},
|
deep: true,
|
},
|
'book.originalPic.length': {
|
handler(newLen, oldLen) {
|
if (newLen !== 0) {
|
this.$refs.bookForm.validateField('originalPic');
|
}
|
},
|
deep: true,
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.book-title {
|
line-height: 60px;
|
font-weight: 650;
|
font-size: 20px;
|
width: 160px;
|
padding-right: 12px;
|
text-align: right;
|
color: #4b9bb7;
|
}
|
|
.book-item {
|
display: flex;
|
width: 100%;
|
}
|
|
.upload {
|
width: 60px;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 20px;
|
background-color: #fbfdff;
|
border-radius: 4px;
|
}
|
|
.upImg {
|
display: flex;
|
|
.tip {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
}
|
|
.img-list {
|
height: 60px;
|
position: relative;
|
display: flex;
|
|
img {
|
width: 60px;
|
height: 60px;
|
}
|
|
.img {
|
height: 60px;
|
position: relative;
|
margin-right: 10px;
|
}
|
|
.myicon {
|
position: absolute;
|
top: 0px;
|
right: 0px;
|
color: #4b9bb7;
|
}
|
}
|
}
|
|
::v-deep .el-textarea__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
|
::v-deep .el-input__count {
|
background-color: #09152f;
|
}
|
|
::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
</style>
|
