From c6b68c458af980e71c4a331ccd589d45c3652d93 Mon Sep 17 00:00:00 2001 From: lyfO_o <764716047@qq.com> Date: 星期一, 09 五月 2022 09:30:12 +0800 Subject: [PATCH] 风险部分搜索功能 --- src/views/contingencyplan/index.vue | 148 ++++++++++++++++++++++++++++++++++++------------- 1 files changed, 109 insertions(+), 39 deletions(-) diff --git a/src/views/contingencyplan/index.vue b/src/views/contingencyplan/index.vue index 9e07de8..ae5a316 100644 --- a/src/views/contingencyplan/index.vue +++ b/src/views/contingencyplan/index.vue @@ -7,7 +7,7 @@ <el-input v-model="listQuery.filter.name"></el-input> </el-form-item> </el-col> - <el-col :span="4" style="text-align: center"> + <el-col :span="5" style="text-align: center"> <el-button type="primary" class="btns" icon="el-icon-search" @click="find()" >搜索</el-button > @@ -18,13 +18,40 @@ class="btns" >新增</el-button > + <el-button + type="primary" + class="btns" + @click="reset()" + >重置</el-button + > </el-col> </el-row> </el-form> <el-table :data="list" border style="width: 100%"> <el-table-column prop="name" align="center" label="预案名称" width="150"> </el-table-column> - <el-table-column prop="name" align="center" label="文件链接"> </el-table-column> + <el-table-column prop="fileType" align="center" label="文件类型"> + <template slot-scope="scope"> + <span v-if="scope.row.fileType==0">图片</span> + <span v-if="scope.row.fileType==1">文件</span> + </template> + </el-table-column> + <el-table-column align="center" label="附件"> + <template slot-scope="scope"> + <div v-if="scope.row.fileType==0"> + <img :src="envUrl+scope.row.fileList[0].fileUrl" @click="showViewer=true" style="max-width: 100px;height: auto"/> + <el-image-viewer + v-if="showViewer" + :on-close="()=>showViewer=false" + :url-list="scope.row.viewerList" + /> + </div> + <div v-if="scope.row.fileType==1"> + <span @click="downLoadFile(scope.row.fileList[0].fileUrl)" style="color: #3A71A8 ; cursor: pointer;">{{ scope.row.fileList[0].fileName }}</span> + </div> + </template> + </el-table-column> + <el-table-column prop="remark" align="center" label="备注"> </el-table-column> <el-table-column prop="createTime" align="center" label="创建时间"> </el-table-column> <el-table-column prop="updateTime" align="center" label="更新时间"> </el-table-column> @@ -54,9 +81,10 @@ :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="recordTotal" + style="text-align: right;margin-top: 20px;" > </el-pagination> - <el-dialog :title="title" :visible.sync="dialogVisible" width="40%"> + <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%"> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="预案名称" prop="name"> <el-input v-model="form.name"></el-input> @@ -79,7 +107,7 @@ </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" class="btns" @click="addemergencyPlan()">确 定</el-button> - <el-button @click="dialogVisible = false">取 消</el-button> + <el-button @click="cancel()">取 消</el-button> </span> </el-dialog> </div> @@ -87,6 +115,7 @@ <script> import uploadImg from "@/views/contingencyplan/uploadImg.vue"; import uploadFile from "@/views/contingencyplan/uploadFile.vue"; +import elImageViewer from "element-ui/packages/image/src/image-viewer"; import { emergencyPlanList, emergencyPlanAdd, @@ -94,12 +123,13 @@ emergencyPlanDel, } from "@/api/emergencyplan.js"; export default { - components: { uploadImg , uploadFile}, + components: { uploadImg , uploadFile ,elImageViewer}, data() { return { uploadDisabled:false, dialogVisible: false, + title: "", pageSize: 10, recordTotal: 0, @@ -125,16 +155,37 @@ name: [ { required: true, message: "预案名称不能为空", trigger: "change" }, ], - remark: [ - { required: true, message: "责任人不能为空", trigger: "blur" }, - ], }, + + showViewer:false, + viewerList:[], + envUrl:process.env.IMG_API }; }, created() { this.emergencyPlan(); }, methods: { + + reset(){ + this.listQuery.filter={} + this.listQuery.pageIndex=1 + this.listQuery.pageSize=10 + this.emergencyPlan(); + }, + + downLoadFile(fileUrl){ + return this.$confirm(`确定下载该文件?`,'提示',{ + confirmButtonText:'确定', + cancelButtonText:'取消', + type:'warning', + }).then(() =>{ + let a = document.createElement('a') + a.href = process.env.BASE_API + '/upload/'+fileUrl + a.click(); + }) + }, + changeFileType(){ this.fileUrl="" this.fileName="" @@ -149,7 +200,8 @@ uploadImgSuccess(res){ let file = { fileUrl : res.fileUrl, - fileName : res.fileName + fileName : res.fileName, + url:res.url } this.fileList.push(file) }, @@ -165,6 +217,15 @@ this.recordTotal = res.data.result.total this.pageSize=res.data.result.size; this.currentPage = res.data.result.current + for (let i = 0 ; i < this.list.length ; i++){ + if (this.list[i].fileList!=null && this.list[i].fileList.length>0){ + let viewerList = [] + for (let j = 0 ; j<this.list[i].fileList.length ; j++){ + viewerList.push(this.envUrl+this.list[i].fileList[j].fileUrl) + } + this.list[i].viewerList=viewerList + } + } } }, emergencyPlanC(value, type) { @@ -174,15 +235,13 @@ }); if (type === "新增") { this.title = "新增"; - this.form = { - name: "", - fileType: 0, - fileList: [], - remark: "", - }; + this.form = {}; + this.fileUrl=""; + this.fileName=""; + this.fileList=[] } else { this.title = "编辑"; - this.form = value; + this.form=JSON.parse(JSON.stringify(value)); if (this.form.fileType==0){ this.fileList=value.fileList } else{ @@ -198,11 +257,15 @@ this.form.fileList=this.fileList } if (this.form.fileType==1){ - let file={ - fileUrl:this.fileUrl, - fileName:this.fileName + let fileList = [] + if (this.fileUrl!=""){ + let file={ + fileUrl:this.fileUrl, + fileName:this.fileName + } + fileList.push(file) } - this.form.fileList=[file] + this.form.fileList=fileList } if (this.title === "新增") { emergencyPlanAdd(this.form).then((res) => { @@ -215,11 +278,8 @@ message: "新增成功", title: "成功", }); - } else { - this.$message({ - type: "warning", - message: res.data.message, - }); + }else{ + this.$message.error(res.data.message); } }); } @@ -234,11 +294,8 @@ message: "编辑成功", title: "成功", }); - } else { - this.$message({ - type: "warning", - message: res.data.message, - }); + }else{ + this.$message.error(res.data.message); } }); } @@ -246,16 +303,29 @@ }); }, deleteById(val) { - emergencyPlanDel({ id: val }).then(() => { - this.emergencyPlan(); - this.$notify({ - title: "成功", - message: "删除成功", - type: "success", - duration: 2000, - }); - }); + this.$confirm('确认删除吗','提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning' + }) + .then(()=>{ + emergencyPlanDel({ id: val }).then(() => { + this.emergencyPlan(); + this.$notify({ + title: "成功", + message: "删除成功", + type: "success", + duration: 2000, + }); + }); + }) + .catch(error =>{ + }); }, + cancel(){ + this.emergencyPlan(); + this.dialogVisible = false; + }, find() { this.emergencyPlan(); }, -- Gitblit v1.9.2