From a598d935a61fea27312fc57becd80e23bf09f788 Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期五, 21 十月 2022 18:04:19 +0800 Subject: [PATCH] 修改bug --- src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue | 278 +++++++++++++++++++++++++++++++++++------------------- 1 files changed, 179 insertions(+), 99 deletions(-) diff --git a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue index d6606bb..7d70c90 100644 --- a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue +++ b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue @@ -3,14 +3,16 @@ <div class="evidence-title">璋冩煡鍙栬瘉</div> <div class="evidence-form"> <el-form ref="evidenceForm" label-width="160px" :model="evidence" :rules="evidenceRules" autoComplete="on"> - <!-- 鎵垮姙闃熷憳 --> - <el-form-item label="鎵垮姙闃熷憳:" prop="undertaker"> - <el-input v-model="evidence.undertaker" placeholder="璇疯緭鍏ュ鍚�"></el-input> - </el-form-item> - <!-- 鍗忓姙闃熷憳 --> - <el-form-item label="鍗忓姙闃熷憳:" prop="assistant"> - <el-input v-model="evidence.assistant" placeholder="璇疯緭鍏ュ鍚�"></el-input> - </el-form-item> + <div class="evidence-item"> + <!-- 鎵垮姙闃熷憳 --> + <el-form-item label="鎵垮姙闃熷憳:" prop="undertaker"> + <el-input v-model="evidence.undertaker" placeholder="璇疯緭鍏ュ鍚�"></el-input> + </el-form-item> + <!-- 鍗忓姙闃熷憳 --> + <el-form-item label="鍗忓姙闃熷憳:" label-width="100px" prop="assistant"> + <el-input v-model="evidence.assistant" placeholder="璇疯緭鍏ュ鍚�"></el-input> + </el-form-item> + </div> <!-- 鏃堕棿 --> <el-form-item label="鏃堕棿:" prop="investigationTime"> <el-date-picker v-model="evidence.investigationTime" type="datetime" placeholder="閫夋嫨鏃堕棿"> @@ -26,7 +28,7 @@ </el-form-item> <!-- 褰撲簨浜轰俊鎭� --> <el-form-item label="褰撲簨浜轰俊鎭�:" prop="userInfo"> - <el-input suffix-icon="el-icon-s-order" @focus="openDialog"></el-input> + <el-input suffix-icon="el-icon-s-order" v-model="evidence.userInfo" @focus="openDialog"></el-input> </el-form-item> <!-- 鎯呭喌鎻忚堪 --> <el-form-item label="鎯呭喌鎻忚堪:" prop="description"> @@ -34,14 +36,17 @@ v-model="evidence.description" placeholder="璇疯緭鍏ユ儏鍐垫弿杩�,闄愬埗200瀛椾互鍐�"></el-input> </el-form-item> <!-- 鐓х墖闄勪欢 --> - <el-form-item label="鐓х墖闄勪欢:" prop="photo"> + <el-form-item label="鐓х墖闄勪欢:" prop="pic"> <div class="upImg"> - <div class="img-list"> - <img :src="item" alt="" v-for="(item,index) in evidence.pic" :key="index"> + <div class="img-list" v-if="evidence.pic.length!==0"> + <div class="img" v-for="(item,index) in evidence.pic" :key="index"> + <img :src="item" alt=""> + <i class="el-icon-close myicon" @click="handleRemove(index)"></i> + </div> </div> <div class="upload" v-if="evidence.pic.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" + action="/sccg/file/medias" multiple :show-file-list="false" :limit="4" :on-success="handleSuccess2" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> @@ -58,7 +63,7 @@ </div> <div class="user-form-content"> <el-form ref="userForm" label-width="120px" :model="user" :rules="userRules" autoComplete="on"> - <!-- 杩濇硶绫诲瀷 --> + <!-- 绫诲瀷 --> <el-form-item label="绫诲瀷:" prop="illegalType"> <el-select v-model="user.illegalType" placeholder="璇烽�夋嫨"> <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" @@ -81,8 +86,8 @@ <div class="user-item"> <el-form-item label="璇佷欢绫诲瀷:" prop="certificateType"> <el-select v-model="user.certificateType" placeholder="璇烽�夋嫨"> - <el-option v-for="item in cardOptions" :key="item.value" :label="item.label" - :value="item.value"> + <el-option v-for="item in cardOptions" :key="item.id" :label="item.name" + :value="item.id"> </el-option> </el-select> </el-form-item> @@ -95,8 +100,8 @@ <!-- 鏂囧寲绋嬪害 --> <el-form-item label="鏂囧寲绋嬪害:" prop="educationDegree"> <el-select v-model="user.educationDegree" placeholder="璇烽�夋嫨"> - <el-option v-for="item in degreeOptions" :key="item.value" :label="item.label" - :value="item.value"> + <el-option v-for="item in degreeOptions" :key="item.id" :label="item.name" + :value="item.id"> </el-option> </el-select> </el-form-item> @@ -113,7 +118,13 @@ <div class="user-item"> <!-- 姘戞棌 --> <el-form-item label="姘戞棌:" prop="nation"> - <el-input v-model="user.nation"></el-input> + <!-- <el-select v-model="user.nation" placeholder="璇烽�夋嫨姘戞棌"> --> + <el-select v-model="user.nation" placeholder="璇烽�夋嫨"> + <el-option v-for="item in nationOptions" :key="item.id" :label="item.name" + :value="item.id"> + </el-option> + </el-select> + <!-- <el-input v-model="user.nation"></el-input> --> </el-form-item> <!-- 绫嶈疮 --> <el-form-item label="绫嶈疮:" prop="nativePlace"> @@ -138,6 +149,8 @@ </div> </template> <script> +import { getTypeList } from '@/utils/helper' +import {validateName,validatePhone,validateCardId} from '@/utils/validate' export default { data() { const checkName = (rule, value, callback) => { @@ -183,10 +196,10 @@ } } const checkPic = (rule, value, callback) => { - if (value) { + if (value.length !== 0) { callback() } else { - callback(); + callback(new Error('璇蜂笂浼犵収鐗囬檮浠�')); } } const checkIll = (rule, value, callback) => { @@ -198,14 +211,14 @@ } const checkName3 = (rule, value, callback) => { if (value) { - callback() + validateName(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑濮撳悕')) } else { callback(new Error('褰撲簨浜哄鍚嶄笉鑳戒负绌�')); } } const checkPhone = (rule, value, callback) => { if (value) { - callback() + validatePhone(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑鎵嬫満鍙风爜')) } else { callback(new Error('鎵嬫満鍙风爜涓嶈兘涓虹┖')); } @@ -219,7 +232,7 @@ } const checkCode = (rule, value, callback) => { if (value) { - callback() + validateCardId(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑璇佷欢鍙风爜')) } else { callback(new Error('璇佷欢鍙风爜涓嶈兘涓虹┖')); } @@ -231,20 +244,20 @@ callback(new Error('鏂囧寲绋嬪害涓嶈兘涓虹┖')); } } - const checkCareer = (rule, value, callback) => { - if (value) { - callback() - } else { - callback(new Error('鑱屼笟涓嶈兘涓虹┖')); - } - } - const checkWork = (rule, value, callback) => { - if (value) { - callback() - } else { - callback(new Error('宸ヤ綔鍗曚綅鍙婅亴鍔′笉鑳戒负绌�')); - } - } + // const checkCareer = (rule, value, callback) => { + // if (value) { + // callback() + // } else { + // callback(); + // } + // } + // const checkWork = (rule, value, callback) => { + // if (value) { + // callback() + // } else { + // callback(new Error('宸ヤ綔鍗曚綅鍙婅亴鍔′笉鑳戒负绌�')); + // } + // } const checkNation = (rule, value, callback) => { if (value) { callback() @@ -252,13 +265,13 @@ callback(new Error('姘戞棌涓嶈兘涓虹┖')); } } - const checkNaP = (rule, value, callback) => { - if (value) { - callback() - } else { - callback(new Error('绫嶈疮涓嶈兘涓虹┖')); - } - } + // const checkNaP = (rule, value, callback) => { + // if (value) { + // callback() + // } else { + // callback(new Error('绫嶈疮涓嶈兘涓虹┖')); + // } + // } const checkLiveAdd = (rule, value, callback) => { if (value) { callback() @@ -266,13 +279,13 @@ callback(new Error('鐜颁綇鍧�涓嶈兘涓虹┖')); } } - const checkRegAdd = (rule, value, callback) => { - if (value) { - callback() - } else { - callback(new Error('鎴风睄鎵�鍦ㄥ湴涓嶈兘涓虹┖')); - } - } + // const checkRegAdd = (rule, value, callback) => { + // if (value) { + // callback() + // } else { + // callback(new Error('鎴风睄鎵�鍦ㄥ湴涓嶈兘涓虹┖')); + // } + // } const checkFlag = (rule, value, callback) => { if (value) { callback(); @@ -283,7 +296,7 @@ return { evidence: { pic: [], - userInfo: false, + userInfo: '', }, evidenceRules: { userInfo: [ @@ -330,7 +343,7 @@ illegalType: '', name: '', phoneCode: '', - certificateType: '', + certificateType: 703, certificateCode: '', educationDegree: '', career: '', @@ -348,12 +361,12 @@ ], name: [ { - trigger: 'blur', validator: checkName3 + required:true,trigger: 'blur', validator: checkName3 } ], phoneCode: [ { - trigger: 'blur', validator: checkPhone + required:true,trigger: 'blur', validator: checkPhone } ], certificateType: [ @@ -363,7 +376,7 @@ ], certificateCode: [ { - trigger: 'blur', validator: checkCode + required:true,trigger: 'blur', validator: checkCode } ], educationDegree: [ @@ -371,36 +384,36 @@ trigger: 'change', validator: checkWh } ], - career: [ - { - trigger: 'blur', validator: checkCareer - } - ], - work: [ - { - trigger: 'blur', validator: checkWork - } - ], + // career: [ + // { + // trigger: 'blur', validator: checkCareer + // } + // ], + // work: [ + // { + // trigger: 'blur', validator: checkWork + // } + // ], nation: [ { - trigger: 'blur', validator: checkNation + trigger: 'change', validator: checkNation } ], - nativePlace: [ - { - trigger: 'blur', validator: checkNaP - } - ], + // nativePlace: [ + // { + // trigger: 'blur', validator: checkNaP + // } + // ], liveAddress: [ { - trigger: 'blur', validator: checkLiveAdd + required:true,trigger: 'blur', validator: checkLiveAdd } ], - registerAddress: [ - { - trigger: 'blur', validator: checkRegAdd - } - ], + // registerAddress: [ + // { + // trigger: 'blur', validator: checkRegAdd + // } + // ], }, userFlag: false, typeOptions: [ @@ -413,6 +426,7 @@ value: 2 } ], + nationOptions: [], cardOptions: [ { label: '韬唤璇�', @@ -423,27 +437,33 @@ value: 2 } ], - degreeOptions:[ + degreeOptions: [ { - label:'灏忓', - value:1 + label: '灏忓', + value: 1 }, { - label:'鍒濅腑', - value:2 + label: '鍒濅腑', + value: 2 }, { - label:'楂樹腑', - value:3 + label: '楂樹腑', + value: 3 }, { - label:'澶у鍙婁互涓�', - value:4 + label: '澶у鍙婁互涓�', + value: 4 }, ] } }, - props:['getEvidence'], + created() { + this.getCardTypeList(); + this.getSchoolList(); + this.getNationList(); + console.log(this.mytype); + this.user.illegalType = JSON.parse(JSON.stringify(this.mytype)); + }, methods: { handleSuccess2(res, file, filelist) { const baseUrl = 'http://140.143.152.226:8410/'; @@ -470,7 +490,7 @@ this.$refs.userForm.validate((valid) => { console.log(valid); if (valid) { - this.evidence.userInfo = true; + this.evidence.userInfo = this.user.name; this.userFlag = false; } else { this.evidence.userInfo = false; @@ -479,21 +499,55 @@ }) }, // 鍏抽棴褰撲簨浜轰俊鎭晫闈� - closeUserForm(){ + closeUserForm() { this.userFlag = false; }, // 杩斿洖褰撳墠evidence鍜寀ser瀵硅薄 - backData(){ - const {user,evidence} = this; - this.$emit('getEvidence',{user,evidence}); + backData() { + const { user, evidence } = this; + this.$emit('getEvidence', { user, evidence }); + }, + // 鍒犻櫎鍥剧墖 + handleRemove(index) { + this.evidence.pic.splice(index, 1); + }, + // 鑾峰彇璇佷欢绫诲瀷 + async getCardTypeList() { + this.cardOptions = await getTypeList(1, '03'); + }, + // 鑾峰彇瀛﹀巻 + async getSchoolList() { + this.degreeOptions = await getTypeList(1, '04'); + }, + // 鑾峰彇姘戞棌鍒楄〃 + async getNationList() { + this.nationOptions = await getTypeList(1, '05'); } - } + }, + watch: { + 'evidence.pic.length': { + handler(newLen, oldLen) { + if (newLen !== 0) { + this.$refs.evidenceForm.validate((valid) => { + if (valid) { + + } else { return false } + }) + } + }, + deep: true, + } + }, + props:['mytype'] } </script> <style lang="scss" scoped> .evidence { line-height: 60px; position: relative; + .evidence-item{ + display: flex; + } .evidence-title { line-height: 60px; font-weight: 650; @@ -515,12 +569,25 @@ } .img-list { - height: 80px; + 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; } } } @@ -535,12 +602,14 @@ background-color: #fbfdff; border-radius: 4px; } -.user-form{ + +.user-form { position: absolute; top: 0; z-index: 3000; background-color: #06122c; - .user-form-header{ + + .user-form-header { background-color: #fff; color: #4b9bb7; display: flex; @@ -548,17 +617,28 @@ align-items: center; padding: 0 20px; } + padding-bottom: 60px; } + .user-form-content { - padding-top:20px; + padding-top: 20px; .user-item { display: flex; + justify-content: flex-start; .el-input { flex: 1; } + + .el-select { + flex: 1; + + :deep(.el-input__inner){ + padding: 0px 15px; + } + } } ::v-deep .el-textarea__inner { -- Gitblit v1.8.0