From 948cca39e334dde8a3ef04c030f8d691edf30bf8 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期三, 08 三月 2023 09:24:58 +0800
Subject: [PATCH] 身份证正反面调整
---
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue | 449 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 404 insertions(+), 45 deletions(-)
diff --git a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue
index a4903eb..0198d0c 100644
--- a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue
+++ b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue
@@ -2,77 +2,385 @@
<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.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="vioKind">
- <el-input v-model="book.vioKind"></el-input>
+ <el-form-item label="杩濇硶绫诲瀷:" prop="illegalType" >
+ <el-input v-model="basecase" ></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" value-format="yyyy-MM-dd HH:mm:ss" 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" value-format="yyyy-MM-dd HH:mm:ss" 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" value-format="yyyy-MM-dd HH:mm:ss" 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">
+ <MyUpload @setPictureUrl="writPic" @delPictureUrl="delWritPic" :picture-list="book.writPic"></MyUpload>
+ <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">
+ <MyUpload @setPictureUrl="originalPic" @delPictureUrl="delOriginalPic" :picture-list="book.originalPic"></MyUpload>
+ <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">
+ <MyUpload @setPictureUrl="rectifiedPic" @delPictureUrl="delRectifiedPic" :picture-list="book.rectifiedPic"></MyUpload>
+ <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">
+ <MyUpload @setPictureUrl="otherPic" @delPictureUrl="delOtherPic" :picture-list="book.otherPic"></MyUpload>
+ <div class="tip">{{book.otherPic.length}} / 4</div>
+ </div>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
- export default{
- data(){
- return{
- book:{},
- bookRules:{
-
- }
+import {deepClone, 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
+ }
+ ],
+ 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() {
+ this.getBookType();
+ this.basecase = this.illegalType;
+ if (this.writ) {
+ this.book = deepClone(this.writ);
+ this.book.originalPic = this.writ.originalPic.split(',');
+ this.book.writPic = this.writ.writPic.split(',');
+ this.book.otherPic = this.writ.otherPic.split(',');
+ this.book.rectifiedPic = this.writ.rectifiedPic.split(',');
+ }
+ },
+ props: ['caseId', 'closeDialog','mycode', 'writ', 'illegalType'],
+ methods: {
+ 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)
+ }
+ },
+ //鍒犻櫎鍥剧墖
+ delWritPic({url}){
+ const baseUrl = 'http://140.143.152.226:8410/';
+ 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)
+ }
+ },
+ //鍒犻櫎鍥剧墖
+ 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)
+ }
+ },
+ //鍒犻櫎鍥剧墖
+ 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)
+ }
+ },
+ //鍒犻櫎鍥剧墖
+ 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{
+.book-title {
line-height: 60px;
font-weight: 650;
font-size: 20px;
@@ -81,16 +389,67 @@
text-align: right;
color: #4b9bb7;
}
-::v-deep .el-textarea__inner {
- background-color: #09152f;
- border: 1px solid #17324c;
+
+.book-item {
+ display: flex;
+ width: 100%;
}
-::v-deep .el-input__count {
- background-color: #09152f;
+.upload {
+ width: 60px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ background-color: #fbfdff;
+ border-radius: 4px;
}
-::v-deep .el-form-item__label {
- color: #4b9bb7;
+.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>
\ No newline at end of file
--
Gitblit v1.8.0