| | |
| | | <div class="evidence"> |
| | | <div class="evidence-title">调查取证</div> |
| | | <div class="evidence-form"> |
| | | <el-form ref="evidenceForm" label-width="160px" :model="evidence" :rules="evidenceRules" autoComplete="on"> |
| | | <el-form |
| | | ref="evidenceForm" |
| | | label-width="160px" |
| | | :model="evidence" |
| | | :rules="evidenceRules" |
| | | autoComplete="on" |
| | | > |
| | | <div class="evidence-item"> |
| | | <!-- 承办队员 --> |
| | | <el-form-item label="承办队员:" prop="undertaker"> |
| | | <el-input v-model="evidence.undertaker" placeholder="请输入姓名"></el-input> |
| | | <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 |
| | | 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" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择时间"> |
| | | <el-date-picker |
| | | v-model="evidence.investigationTime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="datetime" |
| | | placeholder="选择时间" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <!-- 地址 --> |
| | | <el-form-item label="地址:" prop="address"> |
| | | <el-input v-model="evidence.address" placeholder="请输入地址"></el-input> |
| | | <el-input |
| | | v-model="evidence.address" |
| | | placeholder="请输入地址" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <!-- 案由 --> |
| | | <el-form-item label="案由:" prop="caseAction"> |
| | | <el-input v-model="evidence.caseAction" placeholder="请输入案由"></el-input> |
| | | <el-input |
| | | v-model="evidence.caseAction" |
| | | placeholder="请输入案由" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <!-- 当事人信息 --> |
| | | <el-form-item label="当事人信息:" prop="userInfo" class="sp-user-info"> |
| | | <el-input suffix-icon="el-icon-s-order" v-model="evidence.userInfo" @focus="openDialog"></el-input> |
| | | <el-form-item |
| | | label="当事人信息:" |
| | | prop="userInfo" |
| | | class="sp-user-info" |
| | | > |
| | | <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"> |
| | | <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="200" show-word-limit |
| | | v-model="evidence.description" placeholder="请输入处置结果,限制200字以内"></el-input> |
| | | <el-input |
| | | type="textarea" |
| | | :autosize="{ minRows: 2, maxRows: 4 }" |
| | | maxlength="200" |
| | | show-word-limit |
| | | v-model="evidence.description" |
| | | placeholder="请输入处置结果,限制200字以内" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <!-- 照片附件 --> |
| | | <el-form-item label="照片附件:" prop="pic"> |
| | | <div class="upImg"> |
| | | <MyUpload :picture-list="evidence.pic" @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload> |
| | | <div class="tip">{{evidence.pic.length}} / 4</div> |
| | | <MyUpload |
| | | :picture-list="evidence.pic" |
| | | @setPictureUrl="setPicUrl" |
| | | @delPictureUrl="delPicUrl" |
| | | ></MyUpload> |
| | | <div class="tip">{{ evidence.pic.length }} / 4</div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | <i class="el-icon-close" @click="closeUserForm"></i> |
| | | </div> |
| | | <div class="user-form-content"> |
| | | <el-form ref="userForm" label-width="120px" :model="user" :rules="userRules" autoComplete="on"> |
| | | <el-form |
| | | ref="userForm" |
| | | label-width="120px" |
| | | :model="user" |
| | | :rules="userRules" |
| | | autoComplete="on" |
| | | > |
| | | <!-- 类型 --> |
| | | <el-form-item label="类型:" prop="illegalType" :disabled="true"> |
| | | <el-form-item |
| | | label="类型:" |
| | | prop="illegalType" |
| | | :disabled="true" |
| | | > |
| | | <el-input v-model="user.illegalType"></el-input> |
| | | </el-form-item> |
| | | <!-- 姓名、手机号 --> |
| | |
| | | <!-- 证件 --> |
| | | <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.id" :label="item.name" |
| | | :value="item.id"> |
| | | <el-select |
| | | v-model="user.certificateType" |
| | | placeholder="请选择" |
| | | > |
| | | <el-option |
| | | v-for="item in cardOptions" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | <div class="user-item"> |
| | | <!-- 文化程度 --> |
| | | <el-form-item label="文化程度:" prop="educationDegree"> |
| | | <el-select v-model="user.educationDegree" placeholder="请选择"> |
| | | <el-option v-for="item in degreeOptions" :key="item.id" :label="item.name" |
| | | :value="item.id"> |
| | | <el-select |
| | | v-model="user.educationDegree" |
| | | placeholder="请选择" |
| | | > |
| | | <el-option |
| | | v-for="item in degreeOptions" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | <div class="user-item"> |
| | | <!-- 民族 --> |
| | | <el-form-item label="民族:" prop="nation"> |
| | | <el-select v-model="user.nation" placeholder="请选择"> |
| | | <el-option v-for="item in nationOptions" :key="item.id" :label="item.name" |
| | | :value="item.id"> |
| | | <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-form-item> |
| | |
| | | import { deepClone, getTypeList } from '@/utils/helper' |
| | | import { validateName, validatePhone, validateCardId } from '@/utils/validate' |
| | | import MyUpload from "@/components/myUpload" |
| | | import { FILE_ORIGINAL_URL } from "@/utils"; |
| | | import { FILE_ORIGINAL_PATH } from "@/utils"; |
| | | export default { |
| | | components: { |
| | | MyUpload |
| | |
| | | }, |
| | | userRules: { |
| | | illegalType: [{ trigger: ['change', 'blur'], message: '案件类型不能为空', required: true }], |
| | | name: [{ required: true,trigger: ['change', 'blur'], validator: checkUserName }], |
| | | phoneCode: [{ required: true,trigger: ['change', 'blur'], validator: checkPhone }], |
| | | name: [{ required: true, trigger: ['change', 'blur'], validator: checkUserName }], |
| | | phoneCode: [{ required: true, trigger: ['change', 'blur'], validator: checkPhone }], |
| | | certificateType: [{ trigger: ['change', 'blur'], validator: checkCard }], |
| | | certificateCode: [{ required: true,trigger: ['change', 'blur'], validator: checkCode }], |
| | | certificateCode: [{ required: true, trigger: ['change', 'blur'], validator: checkCode }], |
| | | educationDegree: [{ required: true, trigger: ['change', 'blur'], message: '文化程度不能为空' }], |
| | | nation: [{ required: true, trigger: ['change', 'blur'], message: '民族不能为空' }], |
| | | liveAddress: [{ required: true, trigger: ['change', 'blur'], message: '现住址不能为空' }], |
| | |
| | | } |
| | | }, |
| | | async created() { |
| | | await this.getCardTypeList(); |
| | | await this.getSchoolList(); |
| | | await this.getNationList(); |
| | | this.$set(this.user, 'illegalType', this.illegalType); |
| | | if (this.evidenceData) { |
| | | this.evidence = deepClone(this.evidenceData); |
| | | this.evidence.pic = this.evidenceData.pic.split(','); |
| | | this.user = this.evidence.partyInfo; |
| | | this.evidence.userInfo = this.evidence.partyInfo.name; |
| | | await this.getCardTypeList(); |
| | | await this.getSchoolList(); |
| | | await this.getNationList(); |
| | | this.$set(this.user, 'illegalType', this.illegalType); |
| | | if (this.evidenceData) { |
| | | this.evidence = deepClone(this.evidenceData); |
| | | this.evidence.pic = this.evidenceData.pic.split(','); |
| | | this.user = this.evidence.partyInfo; |
| | | this.evidence.userInfo = this.evidence.partyInfo.name; |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | checkUser() { |
| | | this.$refs.userForm.validate((valid) => { |
| | | if (valid) { |
| | | this.evidence.userInfo = this.user.name + '...'; |
| | | this.userFlag = false; |
| | | this.evidence.userInfo = this.user.name + '...'; |
| | | this.userFlag = false; |
| | | } else { |
| | | this.evidence.userInfo = null; |
| | | this.$message.warning('请检查必填项'); |
| | |
| | | async getNationList() { |
| | | this.nationOptions = await getTypeList(1, '05'); |
| | | }, |
| | | // 设置上传成功之后的图片地址 |
| | | setPicUrl({ url }) { |
| | | // 设置上传成功之后的图片地址 |
| | | setPicUrl({ url }) { |
| | | const baseUrl = ''; |
| | | if (this.evidence.pic.length < 4) { |
| | | |
| | | url = url.replace("http://111.1.140.92:28081/sccg/API/img?fileUrl=","") |
| | | this.evidence.pic.push(`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${url}`) |
| | | |
| | | this.evidence.pic.push(FILE_ORIGINAL_PATH + url) |
| | | } |
| | | }, |
| | | //删除图片 |
| | | delPicUrl({url}){ |
| | | delPicUrl({ url }) { |
| | | const baseUrl = ''; |
| | | this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url),1); |
| | | this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url), 1); |
| | | } |
| | | }, |
| | | props:['evidenceData', 'illegalType'] |
| | | props: ['evidenceData', 'illegalType'] |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .evidence { |
| | | line-height: 60px; |
| | | position: relative; |
| | | .evidence-item{ |
| | | .evidence-item { |
| | | display: flex; |
| | | } |
| | | .evidence-title { |
| | |
| | | |
| | | padding-bottom: 60px; |
| | | } |
| | | .sp-user-info{ |
| | | ::v-deep .el-input{ |
| | | .sp-user-info { |
| | | ::v-deep .el-input { |
| | | width: 200px; |
| | | } |
| | | } |
| | |
| | | .el-select { |
| | | flex: 1; |
| | | |
| | | :deep(.el-input__inner){ |
| | | :deep(.el-input__inner) { |
| | | padding: 0px 15px; |
| | | } |
| | | } |