应急处置 修改上传 以及部分样式

gassafetyprogress-web/src/views/system/eventInfo/index.vue

@@ -155,7 +155,7 @@
     />
 
     <!-- 添加或修改事件处置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
           <div class="division">
             <div style="width: 45%">
@@ -185,21 +185,7 @@
               <el-form-item label="事件地点" prop="eventLocation">
                 <el-input v-model="form.eventLocation" placeholder="请输入事件地点" :disabled="readonly"/>
               </el-form-item>
-              <el-form-item label="图片上传" prop="iconUrl">
-                <el-upload
-                  :action="uploadImgUrl"
-                  list-type="picture-card"
-                  :on-preview="handlePictureCardPreview"
-                  :on-success ="uploadsuccess"
-                  :on-remove="handleRemove"
-                  :file-list="fileList">
-                  <i class="el-icon-plus"></i>
-                </el-upload>
-                <el-dialog :visible.sync="dialogVisible">
-                  <img width="100%" :src="dialogImageUrl" alt="">
-                </el-dialog>
-                <!--<el-input v-model="form.iconUrl" type="textarea" placeholder="请输入内容" />-->
-              </el-form-item>
+
             </div>
             <div style="width: 50%">
               <el-form-item label="所属企业" prop="beyondEnterpriseId">
@@ -236,8 +222,27 @@
           <el-form-item label="事件评估信息" prop="eventAssessment" style="width: 60%">
             <el-input v-model="form.eventAssessment" type="textarea" placeholder="请输入事件评估信息" :disabled="readonly"/>
           </el-form-item>
-
-
+          <el-form-item label="事件附件" prop="iconUrl" :style="display" >
+            <FileUpload
+              listType="picture"
+              @resFun="getFileInfo"
+              @remove="listRemove"
+              :fileArr="fileList"
+              style="width: 70%"
+            />
+            <el-input v-show="false" disabled v-model="form.iconUrl"></el-input>
+            <!--<el-input v-model="form.iconUrl" type="textarea" placeholder="请输入内容" />-->
+          </el-form-item>
+          <el-form-item label="事件附件" prop="iconUrl" :style="display1">
+            <span
+              class="dbtn"
+              @click="checkFile(form.iconUrl)"
+              v-if="form.iconUrl != ''"
+            >
+                <i class="el-icon el-icon-view"></i>查看/下载
+              </span>
+            <span v-else>-</span>
+          </el-form-item>
             <!--<el-form-item label="所属企业名称" prop="beyondEnterpriseName">-->
               <!--<el-input v-model="form.beyondEnterpriseName" placeholder="请输入所属企业名称" />-->
             <!--</el-form-item>-->
@@ -255,10 +260,12 @@
 
 <script>
 import { listEventInfo, getEventInfo, delEventInfo, addEventInfo, updateEventInfo, exportEventInfo ,enterpriseList} from "@/api/system/eventInfo";
-
+import FileUpload from '@/components/FileUpload';
+let uploadfile = require("@/assets/uploadfile.png");
 export default {
   name: "EventInfo",
   components: {
+    FileUpload
   },
   data() {
     return {
@@ -284,10 +291,10 @@ export default {
       enterpriseList:[],
       // 弹出层标题
       title: "",
+      display:"",
+      display1:"display:none",
       // 是否显示弹出层
       open: false,
-      dialogImageUrl: '',
-      dialogVisible: false,
       fileList:[],
       // 事件类型：1.泄漏 2.火灾 3.爆炸字典
       eventTypeOptions: [],
@@ -356,20 +363,20 @@ export default {
     });
     },
     //上传
-    handleRemove(file, fileList) {
-      //console.log(file, fileList);
-      document.getElementsByClassName("el-upload")[0].style.display=""
+    getFileInfo(res){
+      //this.form.dealPlan = res.fileName;
+      this.form.iconUrl = res.url;
+      this.fileList.push({
+        name: res.fileName,
+        url: uploadfile,
+      });
     },
-    uploadsuccess(response){
-      this.form.iconUrl=response.url;
-      console.log(document.getElementsByClassName("el-upload")[0])
-      this.$nextTick(()=>{
-        document.getElementsByClassName("el-upload")[0].style.display="none"
-    })
+    listRemove(e) {
+      this.form.dealPlan = "";
+      this.fileList = [];
     },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+    checkFile(url) {
+      window.open(url,'_blank');
     },
     qiyechang(value){
       let obj = {};
@@ -440,9 +447,8 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加事件处置";
-      this.$nextTick(()=>{
-        document.getElementsByClassName("el-upload")[0].style.display=""
-    })
+      this.display="";
+      this.display1="display:none";
     },
     handleDtail(row){
       this.fileList = [];
@@ -454,9 +460,10 @@ export default {
         this.form = response.data;
         this.title = "修改事件处置";
         if(row.iconUrl!=null){
-          this.fileList = [{name: 'file', url: row.iconUrl}];
+          this.fileList = [{name: '附件', url: uploadfile}];
         }
-        document.getElementsByClassName("el-upload")[0].style.display="none"
+      this.display="display:none";
+      this.display1="";
       });
     },
     /** 修改按钮操作 */
@@ -470,11 +477,10 @@ export default {
         this.open = true;
         this.title = "修改事件处置";
         if(row.iconUrl!=null){
-          this.fileList = [{name: 'file', url: row.iconUrl}];
-          this.$nextTick(()=>{
-            document.getElementsByClassName("el-upload")[0].style.display="none"
-          })
+          this.fileList = [{name: '附件', url: uploadfile}];
         }
+      this.display="";
+      this.display1="display:none";
       });
     },
     /** 提交按钮 */
@@ -535,6 +541,17 @@ export default {
     flex-direction:row;
     justify-content:flex-start;
   }
+  .dbtn {
+    display: inline-block;
+    line-height: normal;
+    padding-left: 2px;
+    padding-right: 2px;
+    cursor: pointer;
+    border-radius: 3px;
+    border-style: solid;
+    border-width: 0;
+    color: rgb(48, 180, 107);
+  }
 </style>
 <style lang="scss" scoped>
   ::v-deep .el-select{

gassafetyprogress-web/src/views/system/planInfo/index.vue

@@ -147,6 +147,7 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <div class="division">
           <div style="width: 40%;">
+            <div class="titletitle">预案基本信息</div>
             <el-form-item label="预案标题" prop="planTitle" >
               <el-input v-model="form.planTitle" placeholder="请输入预案标题" :disabled="readonly"/>
             </el-form-item>
@@ -187,31 +188,37 @@
               <el-input v-model="form.remarks" placeholder="请输入备注" :disabled="readonly" />
             </el-form-item>
             <el-form-item label="预案附件" id="fujian" prop="iconUrl">
-              <el-upload
-                :action="uploadImgUrl"
-                list-type="picture-card"
-                :on-success ="uploadsuccess"
-                :on-remove="handleRemove"
-                :file-list="fileList">
-                <i class="el-icon-plus"></i>
-                <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
-              </el-upload>
+              <FileUpload
+                listType="picture"
+                @resFun="getFileInfo"
+                @remove="listRemove"
+                :fileArr="fileList"
+              />
+              <el-input v-show="false" disabled v-model="form.iconUrl"></el-input>
 
               <!--<el-dialog :visible.sync="dialogVisible">-->
               <!--<img width="100%" :src="dialogImageUrl" alt="">-->
               <!--</el-dialog>-->
             </el-form-item>
             <el-form-item label="预案附件" id="fujianxia" prop="iconUrl" style="display: none">
-              <a @click="downloadFile" style="color: blue">下载附件>></a>
+              <span
+                class="dbtn"
+                @click="checkFile(form.iconUrl)"
+                v-if="form.iconUrl != ''"
+              >
+                <i class="el-icon el-icon-view"></i>查看/下载
+              </span>
+              <span v-else>-</span>
               <!--<el-input v-model="fileurl" placeholder=""  />-->
             </el-form-item>
           </div>
-          <div style="width: 60%;">
-            <el-form-item label="应急方案" prop="planContents">
+          <div style="width: 58%;margin-left: 2%">
+            <div class="titletitle">方案内容</div>
+            <!--<el-form-item label="应急方案" prop="planContents">-->
               <!--<el-input v-model="form.planContents" placeholder="" />-->
               <editor  v-model="form.planContents" style="height: 300px;" :readOnly="readonly"/>
               <!--<textarea id="editorA" v-model="form.planContents" height="100%"></textarea>-->
-            </el-form-item>
+            <!--</el-form-item>-->
           </div>
         </div>
 
@@ -235,14 +242,15 @@
 <script>
 import { listPlanInfo, getPlanInfo, delPlanInfo, addPlanInfo, updatePlanInfo, exportPlanInfo,enterpriseList } from "@/api/system/planInfo";
 import Editor from '@/components/Editor';
+import FileUpload from '@/components/FileUpload';
+let uploadfile = require("@/assets/uploadfile.png");
 export default {
   name: "PlanInfo",
   components: {
-    Editor
+    Editor,FileUpload
   },
   data() {
     return {
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
       // 遮罩层
       loading: true,
       readonly: true,
@@ -334,19 +342,21 @@ export default {
        this.form.beyondEnterpriseName = obj.enterpriseName;
        this.form.beyondEnterpriseId = value;
     },
-    //上传图片
-    uploadsuccess(response){
-      this.form.iconUrl=response.url;
-      console.log(this.fileList)
-      //console.log(document.getElementsByClassName("el-upload--picture-card"))
-      document.getElementsByClassName("el-upload--picture-card")[0].style.display="none";
+    //上传
+    getFileInfo(res){
+      //this.form.dealPlan = res.fileName;
+      this.form.iconUrl = res.url;
+      this.fileList.push({
+        name: res.fileName,
+        url: uploadfile,
+      });
     },
-    handleRemove(file, fileList) {
-      document.getElementsByClassName("el-upload--picture-card")[0].style.display="";
+    listRemove(e) {
+      this.form.dealPlan = "";
+      this.fileList = [];
     },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+    checkFile(url) {
+      window.open(url,'_blank');
     },
     // 取消按钮
     cancel() {
@@ -434,7 +444,7 @@ export default {
         this.form = response.data;
 
         this.title = "应急预案详情";
-        this.fileList = [{name: 'file', url: row.iconUrl}];
+        this.fileList = [{name: 'file', url:uploadfile}];
         this.fileurl = row.iconUrl;
       document.getElementById("yesbutton").style.display="none" ;
       document.getElementById("fujian").style.display="none"
@@ -452,7 +462,7 @@ export default {
         this.open = true;
         this.title = "修改应急预案";
         if(row.iconUrl!=null||row.iconUrl==""){
-          this.fileList = [{name: 'file', url: row.iconUrl}];
+          this.fileList = [{name: 'file', url:uploadfile}];
           this.$nextTick(()=>{
             document.getElementsByClassName("el-upload--picture-card")[0].style.display="none"
           document.getElementById("yesbutton").style.display="" ;
@@ -530,6 +540,24 @@ export default {
     flex-direction:row;
     justify-content:flex-start;
   }
+  .dbtn {
+    display: inline-block;
+    line-height: normal;
+    padding-left: 2px;
+    padding-right: 2px;
+    cursor: pointer;
+    border-radius: 3px;
+    border-style: solid;
+    border-width: 0;
+    color: rgb(48, 180, 107);
+  }
+  .titletitle{
+    background: #1c84c6;
+    color: white;height:
+    20px;line-height:
+    20px;text-align: center;
+    margin-bottom: 10px;
+  }
 </style>
 <style lang="scss" scoped>
   ::v-deep .el-select{