From c562fa2e66f4972ae23fa57ef7412da6e18991ed Mon Sep 17 00:00:00 2001 From: lyfO_o <764716047@qq.com> Date: 星期二, 12 七月 2022 14:31:51 +0800 Subject: [PATCH] Merge remote-tracking branch 'remotes/origin/shf' into master --- src/views/contingencyplan/index.vue | 694 ++++++++++++++++++++++++++++++-------------------------- 1 files changed, 371 insertions(+), 323 deletions(-) diff --git a/src/views/contingencyplan/index.vue b/src/views/contingencyplan/index.vue index ae5a316..ebe079d 100644 --- a/src/views/contingencyplan/index.vue +++ b/src/views/contingencyplan/index.vue @@ -1,348 +1,396 @@ <template> - <div class="app-container"> - <el-form ref="form" :model="form" label-width="80px"> - <el-row> - <el-col :span="5"> - <el-form-item label="预案名称"> - <el-input v-model="listQuery.filter.name"></el-input> - </el-form-item> - </el-col> - <el-col :span="5" style="text-align: center"> - <el-button type="primary" class="btns" icon="el-icon-search" @click="find()" - >搜索</el-button - > - <el-button - type="primary" - icon="el-icon-plus" - @click="emergencyPlanC('', '新增')" - 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="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> + <div class="app-container"> + <el-form ref="form" :model="form" label-width="80px"> + <el-row> + <el-col :span="5"> + <el-form-item label="预案名称"> + <el-input v-model="listQuery.filter.name"></el-input> + </el-form-item> + </el-col> + <el-col :span="5" style="text-align: center"> + <el-button type="primary" class="btns" icon="el-icon-search" @click="find()" + >搜索 + </el-button + > + <el-button + type="primary" + icon="el-icon-plus" + @click="emergencyPlanC('', '新增')" + 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="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> - <el-table-column align="center" label="操作"> - <template slot-scope="scope"> - <el-button - @click="emergencyPlanC(scope.row, '编辑')" - type="text" - size="small" - >编辑</el-button - > - <el-button - type="text" - size="small" - @click="deleteById(scope.row.id)" - style="color: red" - >删除</el-button - > - </template> - </el-table-column> - </el-table> - <el-pagination - v-show="recordTotal>0" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage" - :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" :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> - </el-form-item> - <el-form-item label="文件类型"> - <el-radio-group v-model="form.fileType" @change="changeFileType"> - <el-radio :label=0 >图片</el-radio> - <el-radio :label=1 >文件</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item v-if="form.fileType==0" label="图片上传"> - <upload-img :imgList="fileList" @uploadImgSuccess="uploadImgSuccess" @removeImgSuccess="removeImgSuccess"></upload-img> - </el-form-item> - <el-form-item label="文件链接" v-if="form.fileType==1"> - <upload-file v-bind:url="fileUrl" v-bind:name="fileName" @uploadFileSuccess="uploadFileSuccess" ></upload-file> - </el-form-item> - <el-form-item label="备注" prop="remark"> - <el-input v-model="form.remark" :rows="5" type="textarea"></el-input> - </el-form-item> - </el-form> - <span slot="footer" class="dialog-footer"> + <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> + <el-table-column align="center" label="操作"> + <template slot-scope="scope"> + <el-button + @click="emergencyPlanC(scope.row, '编辑')" + type="text" + size="small" + >编辑 + </el-button + > + <el-button + type="text" + size="small" + @click="deleteById(scope.row.id)" + style="color: red" + >删除 + </el-button + > + </template> + </el-table-column> + </el-table> + <el-pagination + v-show="recordTotal>0" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="currentPage" + :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" :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> + </el-form-item> + <el-form-item label="文件类型"> + <el-radio-group v-model="form.fileType" @change="changeFileType"> + <el-radio :label=0>图片</el-radio> + <el-radio :label=1>文件</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item v-if="form.fileType==0" label="图片上传"> + <upload-img :imgList="fileList" @uploadImgSuccess="uploadImgSuccess" + @removeImgSuccess="removeImgSuccess"></upload-img> + </el-form-item> + + <el-form-item label="文件链接" v-if="form.fileType==1" class="multiFile" v-for="(items,index) in files " + :key="index"> + <upload-file v-bind:url="items.fileUrl" v-bind:name="items.fileName" + @uploadFileSuccess="uploadFileSuccess($event,items)" + @fileNameChange="fileNameChange($event,items)"></upload-file> + </el-form-item> + + <el-form-item label="" v-if="form.fileType==1" class="multiFile"> + <el-button @click="addFile">添加文件</el-button> + </el-form-item> + + <el-form-item label="备注" prop="remark"> + <el-input v-model="form.remark" :rows="5" type="textarea"></el-input> + </el-form-item> + </el-form> + <span slot="footer" class="dialog-footer"> <el-button type="primary" class="btns" @click="addemergencyPlan()">确 定</el-button> <el-button @click="cancel()">取 消</el-button> </span> - </el-dialog> - </div> + </el-dialog> + </div> </template> <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, - emergencyPlanMod, - emergencyPlanDel, + emergencyPlanList, + emergencyPlanAdd, + emergencyPlanMod, + emergencyPlanDel, } from "@/api/emergencyplan.js"; + export default { - components: { uploadImg , uploadFile ,elImageViewer}, - data() { - return { - uploadDisabled:false, + components: {uploadImg, uploadFile, elImageViewer}, + data() { + return { + uploadDisabled: false, - dialogVisible: false, + dialogVisible: false, - title: "", - pageSize: 10, - recordTotal: 0, - currentPage: 1, - form: { - name: "", - fileType: 0, - fileList: [], - remark: "", - }, - listQuery: { - pageIndex: 1, - pageSize: 10, - filter: { - name: "", - }, - }, - fileName:"", - fileUrl:"", - fileList:[], - list: [], - rules: { - name: [ - { required: true, message: "预案名称不能为空", trigger: "change" }, - ], - }, - - 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="" - this.fileList=[] - }, - - uploadFileSuccess(res){ - this.fileName=res.fileName - this.fileUrl=res.fileUrl - }, - - uploadImgSuccess(res){ - let file = { - fileUrl : res.fileUrl, - fileName : res.fileName, - url:res.url - } - this.fileList.push(file) - }, - - removeImgSuccess(res){ - this.fileList=res.fileList - }, - - async emergencyPlan() { - var res = await emergencyPlanList(this.listQuery); - if (res.data.code === "200") { - this.list = res.data.result.records; - 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) { - this.dialogVisible = true; - this.$nextTick(() => { - this.$refs["form"].clearValidate(); - }); - if (type === "新增") { - this.title = "新增"; - this.form = {}; - this.fileUrl=""; - this.fileName=""; - this.fileList=[] - } else { - this.title = "编辑"; - this.form=JSON.parse(JSON.stringify(value)); - if (this.form.fileType==0){ - this.fileList=value.fileList - } else{ - this.fileUrl=value.fileList[0].fileUrl; - this.fileName=value.fileList[0].fileName - } - } - }, - addemergencyPlan() { - this.$refs["form"].validate((valid) => { - if (valid) { - if (this.form.fileType==0){ - this.form.fileList=this.fileList - } - if (this.form.fileType==1){ - let fileList = [] - if (this.fileUrl!=""){ - let file={ - fileUrl:this.fileUrl, - fileName:this.fileName - } - fileList.push(file) + title: "", + pageSize: 10, + recordTotal: 0, + currentPage: 1, + form: { + name: "", + fileType: 0, + fileList: [], + remark: "", + }, + listQuery: { + pageIndex: 1, + pageSize: 10, + filter: { + name: "", + }, + }, + fileName: "", + fileUrl: "", + fileList: [], + list: [], + fileIndex: 1, + files: [ + { + fileName: "", + fileUrl: "" } - this.form.fileList=fileList - } - if (this.title === "新增") { - emergencyPlanAdd(this.form).then((res) => { - if (res.data.code === "200") { - this.dialogVisible = false; - this.emergencyPlan(); - this.$notify({ - type: "success", - duration: 2000, - message: "新增成功", - title: "成功", - }); - }else{ - this.$message.error(res.data.message); - } - }); - } - else { - emergencyPlanMod(this.form).then((res) => { - if (res.data.code === "200") { - this.dialogVisible = false; - this.emergencyPlan(); - this.$notify({ - type: "success", - duration: 2000, - message: "编辑成功", - title: "成功", - }); - }else{ - this.$message.error(res.data.message); - } - }); - } - } - }); + ], + rules: { + name: [ + {required: true, message: "预案名称不能为空", trigger: "change"}, + ], + }, + + showViewer: false, + viewerList: [], + envUrl: process.env.IMG_API + }; }, - deleteById(val) { - this.$confirm('确认删除吗','提示', { - confirmButtonText: '确认', - cancelButtonText: '取消', - type: 'warning' - }) - .then(()=>{ - emergencyPlanDel({ id: val }).then(() => { - this.emergencyPlan(); - this.$notify({ - title: "成功", - message: "删除成功", - type: "success", - duration: 2000, - }); - }); + 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(); }) - .catch(error =>{ + }, + + changeFileType() { + this.fileUrl = "" + this.fileName = "" + this.fileList = [] + }, + + uploadFileSuccess(res, item) { + if (res.fileUrl == null || res.fileUrl == '') { + this.files = this.files.filter(n=>n.id != item.id); + } else { + item.fileName = res.fileName + item.fileUrl = res.fileUrl + } + }, + + fileNameChange(res, item) { + item.fileName = res; + }, + + uploadImgSuccess(res) { + let file = { + fileUrl: res.fileUrl, + fileName: res.fileName, + url: res.url + } + this.fileList.push(file) + }, + + removeImgSuccess(res) { + this.fileList = res.fileList + }, + + async emergencyPlan() { + var res = await emergencyPlanList(this.listQuery); + if (res.data.code === "200") { + this.list = res.data.result.records; + 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) { + this.dialogVisible = true; + this.$nextTick(() => { + this.$refs["form"].clearValidate(); }); + if (type === "新增") { + this.title = "新增"; + this.form = {}; + this.fileUrl = ""; + this.fileName = ""; + this.files = [] + this.fileList = [] + } else { + this.title = "编辑"; + this.form = JSON.parse(JSON.stringify(value)); + this.files = this.form.fileList; + if (this.form.fileType == 0) { + this.fileList = value.fileList + } else { + this.fileUrl = value.fileList[0].fileUrl; + this.fileName = value.fileList[0].fileName + } + } + }, + addemergencyPlan() { + console.log(this.files); + // return ; + this.$refs["form"].validate((valid) => { + if (valid) { + if (this.form.fileType == 0) { + this.form.fileList = this.fileList + } + if (this.form.fileType == 1) { + // let fileList = [] + // if (this.fileUrl != "") { + // let file = { + // fileUrl: this.fileUrl, + // fileName: this.fileName + // } + // fileList.push(file) + // } + this.form.fileList = this.files.filter(n => { + return n.fileUrl != null && n.fileUrl != '' && n.fileName != null && n.fileName != ''; + }) + } + if (this.title === "新增") { + emergencyPlanAdd(this.form).then((res) => { + if (res.data.code === "200") { + this.dialogVisible = false; + this.emergencyPlan(); + this.$notify({ + type: "success", + duration: 2000, + message: "新增成功", + title: "成功", + }); + } else { + this.$message.error(res.data.message); + } + }); + } else { + emergencyPlanMod(this.form).then((res) => { + if (res.data.code === "200") { + this.dialogVisible = false; + this.emergencyPlan(); + this.$notify({ + type: "success", + duration: 2000, + message: "编辑成功", + title: "成功", + }); + } else { + this.$message.error(res.data.message); + } + }); + } + } + }); + }, + deleteById(val) { + 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(); + }, + handleSizeChange(val) { + this.listQuery.pageSize = val + this.emergencyPlan(); + }, + addFile() { + this.files.push({ + fileUrl: "", + fileName: "" + }) + }, + handleCurrentChange(val) { + this.listQuery.pageIndex = val + this.emergencyPlan(); + }, }, - cancel(){ - this.emergencyPlan(); - this.dialogVisible = false; - }, - find() { - this.emergencyPlan(); - }, - handleSizeChange(val){ - this.listQuery.pageSize = val - this.emergencyPlan(); - }, - handleCurrentChange(val){ - this.listQuery.pageIndex = val - this.emergencyPlan(); - }, - }, }; </script> <style scoped> -.btns{ - background-color: #034EA2; - border: 1px solid #034EA2; +.btns { + background-color: #034EA2; + border: 1px solid #034EA2; +} + +>>> .el-input.is-disabled .el-input__inner { + background-color: white; } </style> -- Gitblit v1.9.2