From 25e035214a42e0037bacfa59d6903ccaf0a37cc0 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期六, 24 八月 2024 12:14:13 +0800 Subject: [PATCH] 左侧菜单阴影优化 --- src/views/system/report/index.vue | 316 +++++++++++++++++++++++++++++++++------------------- 1 files changed, 199 insertions(+), 117 deletions(-) diff --git a/src/views/system/report/index.vue b/src/views/system/report/index.vue index 9bacea8..23cd7f8 100644 --- a/src/views/system/report/index.vue +++ b/src/views/system/report/index.vue @@ -1,21 +1,22 @@ <template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> - <el-form-item label="杩愮淮浜哄憳" prop="peopleId"> - <el-input v-model="queryParams.peopleId" placeholder="杩愮淮浜哄憳濮撳悕" clearable @keyup.enter.native="handleQuery" /> - </el-form-item> - <el-form-item label="鐐逛綅" prop="pointId"> - <el-input v-model="queryParams.pointId" placeholder="鐐逛綅" clearable @keyup.enter.native="handleQuery" /> + <el-form-item label="鍏抽敭瀛�" prop="peopleId"> + <el-input v-model="queryParams.keyword" placeholder="璇疯緭鍏ュ叧閿瓧" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="鎶ュ绫诲瀷" prop="reportType"> - <el-select v-model="queryParams.reportType" placeholder="鎶ュ绫诲瀷" clearable> + <el-select v-model="queryParams.reportType" @change="handleQuery" placeholder="鎶ュ绫诲瀷" clearable> <el-option label="浜嬪墠鎶ュ" value="浜嬪墠鎶ュ" /> <el-option label="浜嬪悗鎶ュ" value="浜嬪悗鎶ュ" /> </el-select> </el-form-item> - <el-form-item label="鎶ュ鏃堕棿"> - <el-date-picker v-model="daterangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" - range-separator="-" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡"></el-date-picker> + <el-form-item label="瀹℃牳鐘舵��"> + <el-select v-model="queryParams.status" @change="handleQuery" placeholder="瀹℃牳鐘舵��" clearable> + <el-option label="鍏ㄩ儴" value="" /> + <el-option label="瀹℃牳涓�" :value="0" /> + <el-option label="瀹℃牳鏈�氳繃" :value="2" /> + <el-option label="瀹℃牳閫氳繃" :value="1" /> + </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">鎼滅储</el-button> @@ -28,16 +29,9 @@ <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:report:add']">鏂板</el-button> </el-col> - <!-- <el-col :span="1.5">--> - <!-- <el-button--> - <!-- type="success"--> - <!-- plain--> - <!-- icon="el-icon-edit"--> - <!-- size="mini"--> - <!-- :disabled="single"--> - <!-- @click="handleUpdate"--> - <!-- >淇敼</el-button>--> - <!-- </el-col>--> + <el-col :span="1.5"> + <el-button type="success" plain icon="el-icon-upload" size="mini" @click="handleImport">瀵煎叆</el-button> + </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:report:remove']">鍒犻櫎</el-button> @@ -73,37 +67,21 @@ </template> </el-table-column> <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="杩愮淮鍗曚綅" align="center" prop="unitName" /> + <el-table-column label="杩愮淮鍗曚綅" width="200" align="center" prop="unitName" /> <el-table-column label="鎶ュ浜哄憳" align="center" prop="peopleName" /> - <el-table-column label="鐐逛綅" align="center" prop="pointName" /> + <el-table-column label="鐐逛綅" width="250" align="center" prop="pointName" /> <el-table-column label="鎶ュ绫诲瀷" align="center" prop="reportType" /> - <!-- <el-table-column label="鎶ュ鍐呭" align="center" prop="reportContent" show-overflow-tooltip="true" /> - <el-table-column label="涓婃姤鏉愭枡" align="center" prop="reportMaterials" show-overflow-tooltip="true"> - <template slot-scope="scope"> - <div v-for="(item, index) in scope.row.reportMaterials.split(',')" :key="index">{{ - item.substring(item.lastIndexOf("/") + 1) }}</div> - </template> - </el-table-column> --> + <el-table-column label="涓婃姤鏃堕棿" width="200" align="center" prop="createTime" /> <el-table-column label="鏁呴殰绫诲瀷" align="center" prop="errorType" /> - <el-table-column label="瀹℃牳缁撴灉" align="center" prop="status" :formatter="formatStatus"/> - <el-table-column label="瀹℃牳鏃堕棿" align="center" prop="auditingTime" width="180"> + <el-table-column label="瀹℃牳缁撴灉" align="center" prop="status" :formatter="formatStatus" /> + <el-table-column label="鎿嶄綔" fixed="right" width="250" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> - <span>{{ parseTime(scope.row.auditingTime, '{y}-{m}-{d}') }}</span> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> - <template slot-scope="scope"> - <!-- <el-button--> - <!-- size="mini"--> - <!-- type="text"--> - <!-- icon="el-icon-edit"--> - <!-- @click="handleUpdate(scope.row)"--> - <!-- v-hasPermi="['system:report:edit']"--> - <!-- >淇敼</el-button>--> + <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" + v-hasPermi="['system:report:edit']" v-if="scope.row.status === 2 || scope.row.status === 0">淇敼</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleAuditing(scope.row)" v-hasPermi="['system:report:edit']" v-if="scope.row.status === 0">瀹℃牳</el-button> <el-button size="mini" type="text" icon="el-icon-s-check" @click="handleAuditingRecord(scope.row.id)" - v-hasPermi="['system:report:record']">瀹℃牳璁板綍</el-button> + v-hasPermi="['system:report:record']">瀹℃牳璁板綍</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:report:remove']">鍒犻櫎</el-button> </template> @@ -116,12 +94,25 @@ <!-- 娣诲姞鎴栦慨鏀规姤澶囧璇濇 --> <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> - <el-form-item label="鐐逛綅" prop="pointId"> + <el-form-item label="鐐逛綅" prop="pointId" v-if="addOrImport === 'add'"> <el-select v-model="form.pointId" filterable remote reserve-keyword placeholder="璇烽�夋嫨鐐逛綅" :remote-method="remoteGetPoints" :loading="selectLoading"> <el-option v-for="item in pointList" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> + </el-form-item> + <el-form-item label="鐐逛綅瀵煎叆" v-if="addOrImport === 'import'"> + <el-upload accept=".xlsx, .xls" :limit="1" :action="url" drag :before-upload="beforeUpload" :file-list="fileList"> + <i class="el-icon-upload"></i> + <div class="el-upload__text"> + 灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em> + </div> + <div class="el-upload__tip" slot="tip"> + <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span> + <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" + @click="importTemplate">涓嬭浇妯℃澘</el-link> + </div> + </el-upload> </el-form-item> <el-form-item label="鎶ュ绫诲瀷" prop="reportType"> <el-select v-model="form.reportType"> @@ -130,14 +121,12 @@ </el-select> </el-form-item> <el-form-item label="鏁呴殰绫诲瀷" prop="errorType"> - <el-select v-model="form.errorType"> - <el-option label="甯傛斂鏂藉伐" value="甯傛斂鏂藉伐" /> - <el-option label="璁惧鏁呴殰" value="璁惧鏁呴殰" /> - <el-option label="璁惧閬楀け" value="璁惧閬楀け" /> + <el-select v-model="form.errorType" multiple> + <el-option v-for="dict in dict.type.error_type" :value="dict.value" :key="dict.value" :label="dict.label" /> </el-select> </el-form-item> - <el-form-item label="鎶ュ鏃堕棿" prop="expirTime"> - <el-date-picker v-model="form.expirTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" + <el-form-item label="鎶ュ鏃堕棿"> + <el-date-picker v-model="daterangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" @change="handleExpirTimeChange"></el-date-picker> </el-form-item> @@ -149,58 +138,98 @@ </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> <el-button @click="cancel">鍙� 娑�</el-button> + <el-button type="primary" @click="submitForm">鎻愪氦瀹℃牳</el-button> </div> </el-dialog> + <!-- 鏌ョ湅瀹℃牳璁板綍 --> + <el-dialog title="鎶ュ瀹℃牳璁板綍" :visible.sync="recordOpen" width="900px"> + <div slot="footer" class="dialog-footer" style="max-height: 500px;overflow-y: auto;"> + <el-timeline v-for="record in auditingRecordList" :key="record.id"> + <el-timeline-item :timestamp="record.createTime" placement="top"> + <el-card> + <el-descriptions title="鎻愪氦鏁版嵁" :column="3" border> + <el-descriptions-item label="鐐逛綅" label-class-name="my-label" content-class-name="my-content">{{ + record.pointName }}</el-descriptions-item> + <el-descriptions-item label="鎶ュ绫诲瀷">{{ record.reportType }}</el-descriptions-item> + <el-descriptions-item label="鏁呴殰绫诲瀷">{{ record.errorType }}</el-descriptions-item> + <el-descriptions-item label="瀹℃牳缁撴灉">{{ formatStatus(record) }}</el-descriptions-item> + <el-descriptions-item label="瀹℃牳鎰忚">{{ record.auditOpinion }}</el-descriptions-item> + <el-descriptions-item label="瀹℃牳鏃堕棿">{{ record.auditingTime }}</el-descriptions-item> + <el-descriptions-item label="鎶ュ鍐呭"> + <div class="content" v-html="getHtmlContent(record.reportContent)"></div> + </el-descriptions-item> + <el-descriptions-item label="涓婃姤鏉愭枡"> + <el-link + v-for="item in record.reportMaterials != null ? record.reportMaterials.split(',') : record.reportMaterials" + :underline="false" type="primary" :key="item" @click="handleDownload(item)"> + {{ item.substring(item.lastIndexOf("/") + 1) }} + </el-link> + </el-descriptions-item> + </el-descriptions> + </el-card> + </el-timeline-item> + </el-timeline> + <el-button type="primary" @click="recordOpen = false">鍏抽棴</el-button> + </div> + </el-dialog> <!-- 瀹℃牳鎶ュ --> - <el-dialog title="鎶ュ瀹℃牳" :visible.sync="auditingOpen" width="500px" append-to-body> - <el-form ref="form" :model="auditingForm" :rules="auditingRules" label-width="80px"> - <el-form-item label="鐐逛綅"> - <el-input v-model="auditingForm.pointName" disabled /> - </el-form-item> - <el-form-item label="杩愮淮鍗曚綅"> - <el-input v-model="auditingForm.unitName" disabled /> - </el-form-item> - <el-form-item label="鎶ュ浜哄憳"> - <el-input v-model="auditingForm.peopleName" disabled /> - </el-form-item> - <el-form-item label="鎶ュ绫诲瀷"> - <el-input v-model="auditingForm.reportType" disabled /> - </el-form-item> - <el-form-item label="鏁呴殰绫诲瀷"> - <el-input v-model="auditingForm.errorType" disabled /> - </el-form-item> - <el-form-item label="鐢熸晥鏃堕棿"> - <el-date-picker v-model="auditingForm.beginCreateTime" disabled /> - </el-form-item> - <el-form-item label="澶辨晥鏃堕棿"> - <el-date-picker v-model="auditingForm.endCreateTime" disabled /> - </el-form-item> - <el-form-item label="鎶ュ鍐呭"> - <span v-html="auditingForm.reportContent"></span> - </el-form-item> - <el-form-item label="涓婃姤鏉愭枡"> - <el-link - v-for="item in auditingForm.reportMaterials != null ? auditingForm.reportMaterials.split(',') : auditingForm.reportMaterials" - :underline="false" :key="item" @click="handleDownload(item)">{{ item.substring(item.lastIndexOf("/") + 1) - }}</el-link> - </el-form-item> - <el-form-item label="瀹℃牳缁撴灉"> - <el-radio-group v-model="auditingForm.auditingResult"> - <el-radio :label="true">閫氳繃</el-radio> - <el-radio :label="false">椹冲洖</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item label="瀹℃牳鎰忚" prop="auditOpinion"> - <el-input v-model="auditingForm.auditOpinion" /> - </el-form-item> - </el-form> + <el-dialog title="鎶ュ瀹℃牳" :visible.sync="auditingOpen" width="800px" append-to-body> + <div style="display: flex;flex-direction: row"> + <div style="flex: 6; border-right: 1px solid #d2d1d1; padding-right: 20px"> + <el-form ref="form" :model="auditingForm" :rules="auditingRules" label-width="80px"> + <el-form-item label="鐐逛綅"> + <el-input v-model="auditingForm.pointName" disabled /> + </el-form-item> + <el-form-item label="杩愮淮鍗曚綅"> + <el-input v-model="auditingForm.unitName" disabled /> + </el-form-item> + <el-form-item label="鎶ュ浜哄憳"> + <el-input v-model="auditingForm.peopleName" disabled /> + </el-form-item> + <el-form-item label="鎶ュ绫诲瀷"> + <el-input v-model="auditingForm.reportType" disabled /> + </el-form-item> + <el-form-item label="鏁呴殰绫诲瀷"> + <el-input v-model="auditingForm.errorType" disabled /> + </el-form-item> + <el-form-item label="鐢熸晥鏃堕棿"> + <el-date-picker v-model="auditingForm.beginCreateTime" disabled /> + </el-form-item> + <el-form-item label="澶辨晥鏃堕棿"> + <el-date-picker v-model="auditingForm.endCreateTime" disabled /> + </el-form-item> + <el-form-item label="瀹℃牳缁撴灉"> + <el-radio-group v-model="auditingForm.auditingResult"> + <el-radio :label="true">閫氳繃</el-radio> + <el-radio :label="false">椹冲洖</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="瀹℃牳鎰忚" prop="auditOpinion"> + <el-input v-model="auditingForm.auditOpinion" /> + </el-form-item> + </el-form> + </div> + <div style="flex: 5; padding-left: 20px"> + <el-form> + <el-form-item label="鎶ュ鍐呭"> + <span v-html="auditingForm.reportContent"></span> + </el-form-item> + <el-form-item label="涓婃姤鏉愭枡"> + <el-link + v-for="item in auditingForm.reportMaterials != null ? auditingForm.reportMaterials.split(',') : auditingForm.reportMaterials" + :underline="false" type="primary" :key="item" @click="handleDownload(item)">{{ item.substring(item.lastIndexOf("/") + 1) + }}</el-link> + </el-form-item> + </el-form> + </div> + </div> + <div slot="footer" class="dialog-footer"> - <el-button type="primary" @click="auditingSubmit">纭� 瀹�</el-button> <el-button @click="auditingCancel">鍙� 娑�</el-button> + <el-button type="primary" @click="auditingSubmit">纭� 瀹�</el-button> </div> </el-dialog> @@ -208,15 +237,19 @@ </template> <script> -import { listReport, getReport, delReport, addReport, updateReport, auditing } from "@/api/platform/report"; +import { listReport, getReport, delReport, addReport, updateReport, auditing, audit, importReport } from "@/api/platform/report"; import { pointSelectData } from "@/api/platform/point"; export default { + dicts: ['error_type'], name: "Report", data() { return { + fileList: [], + url: process.env.VUE_APP_BASE_API + '/report/import', + addOrImport: 'add', fileType: ["doc", "xls", "xlsx", "ppt", "txt", "pdf", "png", "jpg"], - + auditingRecordList: [], // 鐐逛綅list pointList: [], // 閬僵灞� @@ -239,6 +272,7 @@ title: "", // 鏄惁鏄剧ず寮瑰嚭灞� open: false, + recordOpen: false, // 鎶ュ鏃堕棿鑼冨洿 daterangeCreateTime: [], expirTime: [], @@ -261,12 +295,10 @@ queryParams: { pageNum: 1, pageSize: 10, - unitId: null, - peopleId: null, - pointId: null, - createTime: null, - auditingTime: null, - errorType: null + keyword: null, + errorType: null, + status: 0, + reportType: null }, // 琛ㄥ崟鍙傛暟 form: {}, @@ -302,13 +334,20 @@ this.getList(); }, methods: { + getHtmlContent(content) { + if (content) { + return content + } else { + return "鏃�" + } + }, formatStatus(item) { if (item.status === 0) { - return '寰呭鏍�' + return '瀹℃牳涓�' } else if (item.status === 1) { return '瀹℃牳閫氳繃' } else if (item.status === 2) { - return '鏈�氳繃瀹℃牳' + return '瀹℃牳鏈�氳繃' } }, auditingCancel() { @@ -316,7 +355,10 @@ }, // 鑾峰彇瀹℃牳璁板綍 handleAuditingRecord(reportId) { - + auditing(reportId).then(res => { + this.auditingRecordList = res.data; + this.recordOpen = true + }) }, handleAuditing(row) { this.auditingOpen = true; @@ -408,15 +450,29 @@ /** 鏂板鎸夐挳鎿嶄綔 */ handleAdd() { this.reset(); + this.addOrImport = 'add' this.open = true; this.title = "娣诲姞鎶ュ"; + }, + /** 瀵煎叆鎸夐挳鎿嶄綔 */ + handleImport() { + this.reset(); + this.addOrImport = 'import' + this.open = true; + this.title = "瀵煎叆鎶ュ"; + }, + beforeUpload(file) { + this.fileList = [file]; + return false; }, /** 淇敼鎸夐挳鎿嶄綔 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getReport(id).then(response => { + this.daterangeCreateTime = [response.data.beginCreateTime, response.data.endCreateTime] this.form = response.data; + this.form.errorType = this.form.errorType.split(','); this.open = true; this.title = "淇敼鎶ュ"; }); @@ -429,7 +485,7 @@ auditOpinion: this.auditingForm.auditOpinion, auditingResult: this.auditingForm.auditingResult } - auditing(this.auditingForm).then(response => { + audit(this.auditingForm).then(response => { this.$modal.msgSuccess("瀹℃牳鎴愬姛"); this.auditingOpen = false this.getList(); @@ -444,26 +500,46 @@ }, /** 鎻愪氦鎸夐挳 */ submitForm() { - - // todo 鍒ゆ柇鏄簨鍓嶆姤澶� - this.$refs["form"].validate(valid => { if (valid) { - if (this.form.id != null) { - updateReport(this.form).then(response => { - this.$modal.msgSuccess("淇敼鎴愬姛"); + this.form.beginCreateTime = this.daterangeCreateTime[0] + this.form.endCreateTime = this.daterangeCreateTime[1] + if (this.addOrImport === 'import') { + let formData = new FormData(); + formData.append("importPointId", this.fileList[0]); + formData.append("pointId", this.form.importPointId); + formData.append("reportType", this.form.reportType); + formData.append("errorType", this.form.errorType); + formData.append("reportContent", this.form.reportContent); + formData.append("reportMaterials", this.form.reportMaterials); + formData.append("expirTime", this.form.expirTime); + importReport(formData).then(() => { + this.$modal.msgSuccess("鎴愬姛瀵煎叆鎶ュ"); this.open = false; this.getList(); }); } else { - addReport(this.form).then(response => { - this.$modal.msgSuccess("鎴愬姛鎻愪氦鎶ュ"); - this.open = false; - this.getList(); - }); + this.form.errorType = this.form.errorType.join(','); + if (this.form.id != null) { + updateReport(this.form).then(() => { + this.$modal.msgSuccess("淇敼鎴愬姛"); + this.open = false; + this.getList(); + }); + } else { + addReport(this.form).then(() => { + this.$modal.msgSuccess("鎴愬姛鎻愪氦鎶ュ"); + this.open = false; + this.getList(); + }); + } } } }); + }, + /** 涓嬭浇妯℃澘鎿嶄綔 */ + importTemplate() { + this.download("report/importTemplate", {}, `鎶ュ-鐐逛綅瀵煎叆妯℃澘.xlsx`); }, /** 鍒犻櫎鎸夐挳鎿嶄綔 */ handleDelete(row) { @@ -498,6 +574,12 @@ </script> <style lang="scss" scoped> +.content { + height: 100px; + max-height: 300px; + overflow-y: auto; +} + .info-container { width: 100%; max-height: 400px; -- Gitblit v1.8.0