<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.value" :label="item.label"
|
:value="item.value">
|
</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" placeholder="请输入违法类型">
|
<el-input v-model="book.illegalType" placeholder="请输入违法类型"></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>
|
<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="http:///sccg/file/medias" multiple :show-file-list="false"
|
:limit="4" :on-success="handleSuccess2" :headers="getToken()">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div>
|
<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="http:///sccg/file/medias" multiple :show-file-list="false"
|
:limit="4" :on-success="handleSuccess3" :headers="getToken()">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div>
|
<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="http:///sccg/file/medias" multiple :show-file-list="false"
|
:limit="4" :on-success="handleSuccess4" :headers="getToken()">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div>
|
<div class="tip">{{book.otherPic.length}} / 4</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
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,
|
},
|
]
|
}
|
},
|
created() {
|
console.log(this.book.writPic)
|
},
|
props: ['caseId', 'closeDialog'],
|
methods: {
|
handleSuccess1(res, file, filelist) {
|
const baseUrl = 'http://140.143.152.226:8410/';
|
console.log(res);
|
// this.$set(this.book, 'writPic', baseUrl + res.data.url1);
|
// console.log(this.book.writPic);
|
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/';
|
console.log(res);
|
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/';
|
console.log(res);
|
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/';
|
console.log(res);
|
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 }
|
}
|
},
|
// 删除图片
|
handleRemove(index, flag) {
|
if (flag === 1) {
|
this.book.writPic.splice(index, 1);
|
} else if (flag === 2) {
|
this.book.originalPic.splice(index, 1);
|
} else if (flag === 3) {
|
this.book.rectifiedPic.splice(index, 1);
|
} else {
|
this.book.otherPic.splice(index, 1);
|
}
|
|
}
|
},
|
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;
|
}
|
|
.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>
|
