From fcb6cfdbdb5fbce7d02d8513719237e65a72f474 Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期四, 09 三月 2023 16:45:20 +0800 Subject: [PATCH] 修改报案人材料图片 --- src/views/common/Audit.vue | 341 +++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 272 insertions(+), 69 deletions(-) diff --git a/src/views/common/Audit.vue b/src/views/common/Audit.vue index dbac5e6..871ebd2 100644 --- a/src/views/common/Audit.vue +++ b/src/views/common/Audit.vue @@ -28,12 +28,19 @@ <el-button type="primary" @click="addAduitDialogOpen">娣诲姞</el-button> </el-form-item> <el-form-item> - <el-button type="primary" @click="exportExcel">瀵煎叆</el-button> + <el-upload name="multipartFile" class="upload-demo" action="/api/report/reporterUpload" + :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="reporterRespond" :limit="1"> +<!-- <el-button type="primary">瀵煎叆</el-button>--> + </el-upload> </el-form-item> </el-form> </template> <el-table :data="list"> - <el-table-column prop="id" label="搴忓彿" width="60"></el-table-column> + <el-table-column label="搴忓彿" type="index" width="180" align="center"> + <template slot-scope="scope"> + <span>{{ (current - 1) * size + scope.$index + 1 }}</span> + </template> + </el-table-column> <el-table-column width="80" prop="pic" label="澶村儚"> <template slot-scope="scope"> <img :src="scope.row.pic" style="width: 40px;height: 40px; border-radius: 50%;"> @@ -66,14 +73,13 @@ <el-table-column label="鎿嶄綔"> <template slot-scope="scope"> <el-button type="text" size="small" @click="details(scope.row.id)" style="font-size:14px">璇︽儏</el-button> - <el-button type="text" size="small" @click="audit(scope.row.id)" style="font-size:14px;color: red">瀹℃牳 + <el-button type="text" size="small" @click="check(scope.row.id)" style="font-size:14px;color: red">瀹℃牳 </el-button> </template> </el-table-column> </el-table> - <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.current" - :page-size="queryInfo.size" layout="prev, pager, next" - :total="total"></el-pagination> + <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.current" :page-size="queryInfo.size" + layout="prev, pager, next" :total="total"></el-pagination> </el-card> <!--娣诲姞浜哄憳寮圭獥--> <el-dialog title="娣诲姞浜哄憳" :visible.sync="addAduitDialogVisible" width="50%" :before-close="addAduitClose"> @@ -82,7 +88,7 @@ <el-col :span="12"> <el-form-item label="澶村儚" prop="pic" required> <el-upload ref="pic" action="/api/minio/upload" :show-file-list="false" :on-success="handleAvatarSuccess" - list-type="picture-card" accept="image/*"> + list-type="picture-card" accept="image/*"> <img v-if="picShow" :src="picShow" style="width: 145px;height: 145px"> <i v-else class="el-icon-plus"></i> </el-upload> @@ -90,63 +96,64 @@ </el-col> <el-col :span="12"> <el-form-item label="鎶ユ浜� " prop="reporterName"> - <el-input v-model="auditFrom.reporterName" placeholder="璇疯緭鍏ユ姤妗堜汉 " clearable - :style="{width: '100%'}"></el-input> + <el-input v-model="auditFrom.reporterName" placeholder="璇疯緭鍏ユ姤妗堜汉 " clearable :style="{ width: '100%' }"> + </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鎵嬫満鍙风爜" prop="mobile"> - <el-input v-model="auditFrom.mobile" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" clearable :style="{width: '100%'}"> + <el-input v-model="auditFrom.mobile" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" clearable :style="{ width: '100%' }"> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="韬唤璇佸彿" prop="idcard"> - <el-input v-model="auditFrom.idcard" placeholder="璇疯緭鍏ヨ韩浠借瘉鍙�" clearable :style="{width: '100%'}"> + <el-input v-model="auditFrom.idcard" placeholder="璇疯緭鍏ヨ韩浠借瘉鍙�" clearable :style="{ width: '100%' }"> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="琚獥鏃堕棿" prop="cheatTime"> - <el-date-picker v-model="auditFrom.tmpTime" type="datetime" placeholder="閫夋嫨鏃ユ湡鏃堕棿" - :style="{width: '100%'}" format="yyyy-MM-dd HH:mm:ss" - :value-format="auditFrom.cheatTime"></el-date-picker> + <el-date-picker v-model="auditFrom.cheatTime" type="datetime" placeholder="閫夋嫨鏃ユ湡鏃堕棿" + :style="{ width: '100%' }" format="yyyy-MM-dd HH:mm:ss" + value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="娑夋閲戦" prop="amountInvolved"> - <el-input v-model="auditFrom.amountInvolved" placeholder="璇疯緭鍏ユ秹妗堥噾棰�" clearable - :style="{width: '100%'}"></el-input> + <el-input v-model="auditFrom.amountInvolved" placeholder="璇疯緭鍏ユ秹妗堥噾棰�" clearable :style="{ width: '100%' }"> + </el-input> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="妗堜欢鎻忚堪" prop="reportDescription"> <el-input v-model="auditFrom.reportDescription" placeholder="璇疯緭鍏ユ浠舵弿杩�" clearable - :style="{width: '100%'}"></el-input> + :style="{ width: '100%' }"> + </el-input> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="琛ュ厖淇℃伅" prop="information"> <el-input v-model="auditFrom.information" type="textarea" placeholder="璇疯緭鍏ヨˉ鍏呬俊鎭�" - :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input> + :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input> </el-form-item> </el-col> <el-col :span="24"> - <el-form-item label="涓婁紶" prop="fileList" required> - <el-upload ref="reportMaterials" :file-list="auditFrom.fileList" - action="/api/minio/upload" list-type="picture" :on-success="handleMaterialSuccess"> + <el-form-item label="涓婁紶" prop="fileList"> + <el-upload ref="reportMaterials" :file-list="auditFrom.fileList" action="/api/minio/upload" + list-type="picture" :on-success="handleMaterialSuccess"> <el-button size="small" type="primary" icon="el-icon-upload">鐐瑰嚮涓婁紶</el-button> </el-upload> </el-form-item> </el-col> - <el-col :span="24"> + <!-- <el-col :span="24"> <el-form-item label="鍏宠仈妗堜欢" prop="causeId"> <el-select v-model="auditFrom.causeId" placeholder="璇烽�夋嫨涓嬫媺閫夋嫨" clearable :style="{width: '50%'}"> <el-option v-for="item in causeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> - </el-col> + </el-col> --> </el-form> </el-row> <span slot="footer" class="dialog-footer"> @@ -154,74 +161,154 @@ <el-button type="primary" @click="addAduit">纭� 瀹�</el-button> </span> </el-dialog> - <!--鏌ョ湅璇︽儏寮圭獥--> - <el-dialog title="妗堜欢璇︽儏" :visible.sync="infoAduitDialogVisible" width="50%" :before-close="infoAduitClose"> + + <!--瀹℃牳寮圭獥--> + <el-dialog title="瀹℃牳" :visible.sync="checkVisible" width="50%" :before-close="infoAduitClose"> <el-row :gutter="15"> - <el-form ref="infoAduitForm" :model="auditInfo" size="medium" label-width="100px"> + <el-form ref="infoAduitForm" :rules="rules2" :model="auditInfo" size="medium" label-width="100px"> <el-col :span="12"> <el-form-item label="澶村儚" prop="pic" required> - <el-image style="width: 145px; height: 145px" :src="picShow" :preview-src-list="new Array(picShow)"></el-image> + <el-upload ref="pic" action="/api/minio/upload" :show-file-list="false" :on-success="handleAvatarSuccess" + list-type="picture-card" accept="image/*" disabled> + <el-image style="width: 145px; height: 145px" :src="picShow" :preview-src-list="new Array(picShow)"> + </el-image> + </el-upload> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鎶ユ浜� "> - <el-input v-model="auditInfo.reporterName" disabled - :style="{width: '100%'}"></el-input> + <el-input v-model="auditInfo.reporterName" disabled :style="{ width: '100%' }"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鎵嬫満鍙风爜"> - <el-input v-model="auditInfo.mobile" disabled :style="{width: '100%'}"> + <el-input v-model="auditInfo.mobile" disabled :style="{ width: '100%' }"> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="韬唤璇佸彿"> - <el-input v-model="auditInfo.idcard" disabled :style="{width: '100%'}"> + <el-input v-model="auditInfo.idcard" disabled :style="{ width: '100%' }"> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="琚獥鏃堕棿"> <el-date-picker v-model="auditInfo.tmpTime" type="datetime" placeholder="閫夋嫨鏃ユ湡鏃堕棿" - :style="{width: '100%'}" format="yyyy-MM-dd HH:mm:ss" - :value-format="auditFrom.cheatTime" disabled></el-date-picker> + :style="{ width: '100%' }" format="yyyy-MM-dd HH:mm:ss" :value-format="auditFrom.cheatTime" + disabled></el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="娑夋閲戦"> - <el-input v-model="auditInfo.amountInvolved" placeholder="璇疯緭鍏ユ秹妗堥噾棰�" - :style="{width: '100%'}" disabled></el-input> + <el-input v-model="auditInfo.amountInvolved" placeholder="璇疯緭鍏ユ秹妗堥噾棰�" :style="{ width: '100%' }" disabled> + </el-input> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="妗堜欢鎻忚堪"> - <el-input v-model="auditInfo.reportDescription" placeholder="璇疯緭鍏ユ浠舵弿杩�" - :style="{width: '100%'}" disabled></el-input> + <el-input v-model="auditInfo.reportDescription" placeholder="璇疯緭鍏ユ浠舵弿杩�" :style="{ width: '100%' }" disabled> + </el-input> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="琛ュ厖淇℃伅"> <el-input v-model="auditInfo.information" type="textarea" placeholder="璇疯緭鍏ヨˉ鍏呬俊鎭�" - :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" disabled></el-input> + :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" disabled></el-input> </el-form-item> </el-col> <el-col :span="24"> - <el-form-item label="涓婁紶" required> - <el-upload ref="reportMaterials" :file-list="auditInfo.fileList" - action="/api/minio/upload" list-type="picture" :on-success="handleMaterialSuccess"> - <el-button size="small" type="primary" icon="el-icon-upload">鐐瑰嚮涓婁紶</el-button> - </el-upload> + <el-form-item label="鏉愭枡"> + <div class="metalL"> + <el-image v-for="(img, index) in reportData" :src="img" style="height: 200px;width: 200px;"></el-image> + </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="鍏宠仈妗堜欢" prop="causeId"> - <el-select v-model="auditFrom.causeId" placeholder="璇烽�夋嫨涓嬫媺閫夋嫨" clearable :style="{width: '50%'}" disabled> - <el-option v-for="item in causeOptions" :key="item.id" :label="item.name" - :value="item.id"></el-option> + <el-select v-model="auditInfo.causeId" placeholder="璇烽�夋嫨涓嬫媺閫夋嫨" clearable :style="{ width: '50%' }"> + <el-option v-for="item in causeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> </el-col> + </el-form> + </el-row> + <span slot="footer" class="dialog-footer"> + <el-button @click="checkVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="checkAdd">纭� 瀹�</el-button> + </span> + </el-dialog> + + + <!--鏌ョ湅璇︽儏寮圭獥--> + <el-dialog title="妗堜欢璇︽儏" :visible.sync="infoAduitDialogVisible" width="50%" :before-close="detailsClose"> + <el-row :gutter="15"> + <el-form ref="infoAduitForm" :model="auditInfo" size="medium" label-width="100px"> + <el-col :span="12"> + <el-form-item label="澶村儚" prop="pic" required> + <el-upload ref="pic" action="/api/minio/upload" :show-file-list="false" :on-success="handleAvatarSuccess" + list-type="picture-card" accept="image/*" disabled> + <el-image style="width: 145px; height: 145px" :src="picShow" :preview-src-list="new Array(picShow)"> + </el-image> + </el-upload> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鎶ユ浜� "> + <el-input v-model="auditInfo.reporterName" disabled :style="{ width: '100%' }"></el-input> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鎵嬫満鍙风爜"> + <el-input v-model="auditInfo.mobile" disabled :style="{ width: '100%' }"> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="韬唤璇佸彿"> + <el-input v-model="auditInfo.idcard" disabled :style="{ width: '100%' }"> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="琚獥鏃堕棿"> + <el-date-picker v-model="auditInfo.tmpTime" type="datetime" placeholder="閫夋嫨鏃ユ湡鏃堕棿" + :style="{ width: '100%' }" format="yyyy-MM-dd HH:mm:ss" :value-format="auditFrom.cheatTime" + disabled></el-date-picker> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="娑夋閲戦"> + <el-input v-model="auditInfo.amountInvolved" placeholder="璇疯緭鍏ユ秹妗堥噾棰�" :style="{ width: '100%' }" disabled> + </el-input> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="妗堜欢鎻忚堪"> + <el-input v-model="auditInfo.reportDescription" placeholder="璇疯緭鍏ユ浠舵弿杩�" :style="{ width: '100%' }" disabled> + </el-input> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="琛ュ厖淇℃伅"> + <el-input v-model="auditInfo.information" type="textarea" placeholder="璇疯緭鍏ヨˉ鍏呬俊鎭�" + :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" disabled></el-input> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="鏉愭枡"> + <div class="metalL"> + <el-image v-for="(img, index) in reportData" :src="img" style="height: 200px;width: 200px;"></el-image> + </div> + </el-form-item> + </el-col> + <!-- <el-col :span="24"> + <el-form-item label="鍏宠仈妗堜欢" prop="causeId"> + <el-select v-model="auditFrom.causeId" placeholder="璇烽�夋嫨涓嬫媺閫夋嫨" clearable :style="{ width: '50%' }" disabled> + <el-option v-for="item in causeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option> + </el-select> + </el-form-item> + </el-col> --> </el-form> </el-row> </el-dialog> @@ -229,18 +316,20 @@ </template> <script> -import {getAuditList, getImgUrl, getReportById, report} from '@/api/common' +import { getAuditList, getImgUrl, getReportById, report, checkPass } from '@/api/common' export default { name: "Audit", data() { return { + current: null, + size: null, queryInfo: { people: '', phoneNumber: '', - isInGroup: '5', + isInGroup: null, current: 1, - HavaMaterial: '5', + HavaMaterial: null, size: 10, }, auditFrom: { @@ -258,10 +347,12 @@ tmpTime: '', }, auditInfo: {}, + picShow: "", + reportData: [], optionsGroup: [ { - value: '5', + value: null, label: '鍏ㄩ儴' }, { @@ -275,7 +366,7 @@ ], optionsMate: [ { - value: '5', + value: null, label: '鍏ㄩ儴' }, { @@ -291,6 +382,7 @@ list: [], addAduitDialogVisible: false, infoAduitDialogVisible: false, + checkVisible: false, causeOptions: [], rules: { reporterName: [{ @@ -298,17 +390,25 @@ message: '璇疯緭鍏ユ姤妗堜汉 ', trigger: 'blur' }], - mobile: [{ + mobile: + [{ required: true, message: '璇疯緭鍏ユ墜鏈哄彿鐮�', trigger: 'blur' }, + { + validator: function (rule, value, callback) { + if (/^1[34578]\d{9}$/.test(value) == false) { + callback(new Error("璇疯緭鍏ユ纭殑鎵嬫満鍙�")); + } else { + callback(); + } + }, trigger: 'blur' + }], + idcard: [{ required: true, message: '璇疯緭鍏ヨ韩浠借瘉ID', trigger: 'blur' }, + { pattern: /(^\d{15}$)|(^\d{19}$)|(^\d{17}(\d|X|x)$)/, message: '浣犵殑韬唤璇佹牸寮忎笉姝g‘' }], + cheatTime: [{ required: true, - message: '璇疯緭鍏ユ墜鏈哄彿鐮�', + message: '璇疯緭鍏ヨ楠楁椂闂�', trigger: 'blur' }], - idcard: [{ - required: true, - message: '璇疯緭鍏ヨ韩浠借瘉鍙�', - trigger: 'blur' - }], - tmpTime: [{ + cheatTime: [{ required: true, message: '璇疯緭鍏ヨ楠楁椂闂�', trigger: 'blur' @@ -334,16 +434,101 @@ trigger: 'change' }], }, + rules2:{ + causeId: [ + { required: true, message: '璇烽�夋嫨娲诲姩鍖哄煙', trigger: 'change' } + ] + } } }, created() { this.getList() this.getCauseOptions() }, + methods: { + //妗堜欢浜哄憳瀵煎叆鎴愬姛鍚� + reporterRespond(res) { + if (res.code == 200) { + this.$message({ + message: '涓婁紶鎴愬姛', + type: 'success' + } + ) + } else { + this.$message({ + message: res.msg, + type: 'error' + }) + } + this.getList() + }, + beforeAvatarUpload(file) { + let Xls = file.name.split('.'); + if (Xls[1] === 'xls' || Xls[1] === 'xlsx') { + return file + } else { + this.$message.error('涓婁紶鏂囦欢鍙兘鏄� xls/xlsx 鏍煎紡!') + return false + } + }, + //瀹℃牳纭畾 + checkAdd() { + let form = null; + form = this.auditInfo; + this.$refs.infoAduitForm.validate((valid)=>{ + if(valid){ + checkPass(form).then(res => { + this.$message.success('鎻愪氦鎴愬姛') + this.getList() + this.checkVisible = false; + }) + }else{ + return false; + } + + }) + + }, + //瀹℃牳 + check(val) { + getReportById(val).then(res => { + this.auditInfo = res + if (res.pic === '' || res.pic === null) { + this.picShow = './logo.jpg'; + } else { + getImgUrl(res.pic).then(res => { + this.picShow = res + }) + } + if (res.reportMaterials) { + var addressList = res.reportMaterials.split(",") + for (let item of addressList) { + if (item === '' || item === null) { + // this.reportData.push('./logo.jpg'); + } else { + this.reportData=[]; + getImgUrl(item).then(res => { + this.reportData.push(res); + }) + } + } + } + + this.checkVisible = true + }) + }, infoAduitClose() { + this.checkVisible = false + this.$refs.infoAduitForm.resetFields() + this.reportData = [] + this.picShow = "" + }, + detailsClose() { this.infoAduitDialogVisible = false this.$refs.infoAduitForm.resetFields() + this.reportData = [] + this.picShow = "" }, addAduit() { this.$refs.addAduitForm.validate(async (vaild) => { @@ -351,6 +536,7 @@ this.auditFrom.reportMaterials = this.auditFrom.fileList.map(i => i.data).join(',') report(this.auditFrom).then(res => { this.$message.success('鎻愪氦鎴愬姛') + this.auditFrom = {} this.addAduitDialogVisible = false this.getList() }).catch(err => { @@ -359,12 +545,11 @@ }) }, async getCauseOptions() { - const {data: data} = await this.$http.get('/api/cause/getCauseIdAndName'); + const { data: data } = await this.$http.get('/api/cause/getCauseIdAndName'); this.causeOptions = data.data; }, handleAvatarSuccess(res, file) { this.auditFrom.pic = res.data - console.log(res.data) getImgUrl(res.data).then(res => { this.picShow = res }) @@ -378,8 +563,8 @@ }, addAduitClose() { this.addAduitDialogVisible = false - this.$refs.addAduitForm.resetFields() this.picShow = "" + this.$refs.addAduitForm.resetFields() }, getList() { let param = {} @@ -387,14 +572,16 @@ param.phoneNumber = this.queryInfo.phoneNumber param.current = this.queryInfo.current param.size = this.queryInfo.size - param.isInGroup = this.queryInfo.isInGroup !== '5' ? this.queryInfo.isInGroup : '' - param.HavaMaterial = this.queryInfo.HavaMaterial !== '5' ? this.queryInfo.HavaMaterial : '' + param.isInGroup = this.queryInfo.isInGroup + param.HavaMaterial = this.queryInfo.HavaMaterial getAuditList(param).then(res => { this.total = res.total this.list = res.records + this.size = res.size + this.current = res.current this.list.forEach(x => { if (x.pic === '' || x.pic === null) { - x.pic = './logo.png'; + x.pic = './logo.jpg'; } else { getImgUrl(x.pic).then(res => { x.pic = res @@ -418,9 +605,26 @@ details(id) { getReportById(id).then(res => { this.auditInfo = res - getImgUrl(res.pic).then(res => { - this.picShow = res - }) + if (res.pic === '' || res.pic === null) { + this.picShow = './logo.jpg'; + } else { + getImgUrl(res.pic).then(res => { + this.picShow = res + }) + } + if (res.reportMaterials) { + var addressList = res.reportMaterials.split(",") + for (let item of addressList) { + if (item === '' || item === null) { + // this.reportData.push('./logo.jpg'); + } else { + getImgUrl(item).then(res => { + this.reportData.push(res); + }) + } + } + } + this.infoAduitDialogVisible = true }) }, @@ -443,5 +647,4 @@ .el-form-item { margin-top: 20px; } - </style> -- Gitblit v1.8.0