| | |
| | | <div class="book"> |
| | | <div class="book-title">文种书类</div> |
| | | <div class="book-form"> |
| | | <el-form ref="bookForm" label-width="160px" :model="book" :rules="bookRules" autoComplete="on"> |
| | | <!-- 文书种类 --> |
| | | <el-form-item label="文书种类:" prop="kind"> |
| | | <el-input v-model="book.kind"></el-input> |
| | | </el-form-item> |
| | | <!-- 文书编号 --> |
| | | <el-form-item label="文书编号:" prop="id"> |
| | | <el-input v-model="book.id"></el-input> |
| | | </el-form-item> |
| | | <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="vioKind"> |
| | | <el-input v-model="book.vioKind"></el-input> |
| | | <el-form-item label="违法类型:" prop="illegalType" placeholder="请输入违法类型"> |
| | | <el-input v-model="book.illegalType" placeholder="请输入违法类型"></el-input> |
| | | </el-form-item> |
| | | <!-- 文书发放时间 --> |
| | | <el-form-item label="文书发放时间:" prop="giveTime"> |
| | | <el-input v-model="book.giveTime"></el-input> |
| | | <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-input v-model="book.limitTime"></el-input> |
| | | <el-date-picker v-model="book.limitTime" type="datetime" placeholder="请选择年月日"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <!-- 文书发放内容 --> |
| | | <el-form-item label="文书发放内容:" prop="content"> |
| | | <el-input v-model="book.content"></el-input> |
| | | <el-form-item label="文书发放内容:" prop="sendContent"> |
| | | <el-input v-model="book.sendContent" placeholder="请输入文书发放内容"></el-input> |
| | | </el-form-item> |
| | | <!-- 实际整改时间 --> |
| | | <el-form-item label="实际整改时间:" prop="updateTime"> |
| | | <el-input v-model="book.updateTime"></el-input> |
| | | <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="condition"> |
| | | <el-input v-model="book.condition"></el-input> |
| | | <el-form-item label="整改情况:" prop="rectifySituation"> |
| | | <el-input v-model="book.rectifySituation" placeholder="请输入整改情况"></el-input> |
| | | </el-form-item> |
| | | <!-- 备注 --> |
| | | <el-form-item label="备注:" prop="note"> |
| | | <el-input v-model="book.note"></el-input> |
| | | <el-form-item label="备注:" prop="remark"> |
| | | <el-input v-model="book.remark" placeholder="请输入备注"></el-input> |
| | | </el-form-item> |
| | | <!-- 文书照片上传 --> |
| | | <el-form-item label="文书照片上传:" prop="bookPhoto"> |
| | | <el-input v-model="book.bookPhoto"></el-input> |
| | | <el-form-item label="文书照片上传:" prop="writPic"> |
| | | <div class="upImg"> |
| | | <div class="img-list"> |
| | | <img :src="item" alt="" v-for="(item,index) in book.writPic" :key="index"> |
| | | </div> |
| | | <div class="upload" v-if="book.writPic.length<4"> |
| | | <el-upload :file-list="fileList" class="upload-demo" |
| | | action="http://42.193.1.25:8082/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="beforeUpdate"> |
| | | <el-input v-model="book.beforeUpdate"></el-input> |
| | | <el-form-item label="整改前照片:" prop="originalPic"> |
| | | <div class="upImg"> |
| | | <div class="img-list"> |
| | | <img :src="item" alt="" v-for="(item,index) in book.originalPic" :key="index"> |
| | | </div> |
| | | <div class="upload" v-if="book.originalPic.length<4"> |
| | | <el-upload :file-list="fileList" class="upload-demo" |
| | | action="http://42.193.1.25:8082/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="afterUpdate"> |
| | | <el-input v-model="book.afterUpdate"></el-input> |
| | | <el-form-item label="整改后照片:" prop="rectifiedPic"> |
| | | <div class="upImg"> |
| | | <div class="img-list"> |
| | | <img :src="item" alt="" v-for="(item,index) in book.rectifiedPic" :key="index"> |
| | | </div> |
| | | <div class="upload" v-if="book.rectifiedPic.length<4"> |
| | | <el-upload :file-list="fileList" class="upload-demo" |
| | | action="http://42.193.1.25:8082/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="other"> |
| | | <el-input v-model="book.other"></el-input> |
| | | <el-form-item label="其他:" prop="otherPic"> |
| | | <div class="upImg"> |
| | | <div class="img-list"> |
| | | <img :src="item" alt="" v-for="(item,index) in book.otherPic" :key="index"> |
| | | </div> |
| | | <div class="upload" v-if="book.otherPic.length<4"> |
| | | <el-upload :file-list="fileList" class="upload-demo" |
| | | action="http://42.193.1.25:8082/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(){ |
| | | return{ |
| | | book:{}, |
| | | bookRules:{ |
| | | |
| | | } |
| | | 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('发放内容不能为空')); |
| | | } |
| | | } |
| | | return { |
| | | book: { |
| | | writPic: [], |
| | | otherPic: [], |
| | | rectifiedPic: [], |
| | | originalPic: [], |
| | | }, |
| | | bookRules: { |
| | | writType: [ |
| | | { |
| | | trigger: 'blur', validator: checkKind |
| | | } |
| | | ], |
| | | idwritCode: [ |
| | | { |
| | | 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 |
| | | } |
| | | ], |
| | | }, |
| | | 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 } |
| | | } |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .book-title{ |
| | | .book-title { |
| | | line-height: 60px; |
| | | font-weight: 650; |
| | | font-size: 20px; |
| | |
| | | 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: 80px; |
| | | position: relative; |
| | | |
| | | img { |
| | | width: 60px; |
| | | height: 60px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-textarea__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |