zc

src/views/safetyCheck/components/checkItem.vue

@@ -130,7 +130,7 @@
   //import { getDicts } from "@/api/commonality/noPermission";
   //import { systemUserSelect } from "@/api/commonality/permission";
   //import { getInfo } from "@/api/basicsModules/index";
-  import initiateInspect from "@/views/safetyCheck/components/initiateInspect.vue";
+  import initiateInspect from "@/views/safetyCheck/components/initiateInspect/initiateInspect.vue";
   export default {
     name: 'checkItem',
     components: {

src/views/safetyCheck/components/initiateInspect/historyRecordsComponent.vue

@@ -0,0 +1,225 @@
+<!--历史记录-->
+<template>
+  <div class="page-container initiateInspect-historyRecordsComponent">
+    <!--详情/整改展示/复核展示-->
+    <div v-for="(item,index) in dataList" :key="index">
+      <p class="content-right-title-min-p">
+        {{item.dataList1Data1 == 1?'隐患信息':(item.dataList1Data1 == 2?'隐患整改':(item.dataList1Data1 == 3?'复查验证':''))}}
+        <span :class="item.itemShowType?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(index)"></span>
+      </p>
+      <div v-if="item.itemShowType" style="margin-top:20px;">
+        <div class="right-text-box" v-if="item.dataList1Data1 == 2 || item.dataList1Data1 == 3">
+          <p class="right-text-name-p">{{item.dataList1Data1 == 2?'整改结果':(item.dataList1Data1 == 3?'复查结果':'')}}</p>
+          <div class="right-check-box">
+            <div class="right-min-check-title-box">
+              <p></p>
+            </div>
+            <p class="right-check-title-p" v-if="item.dataList1Data1 == 2">{{newData.rectifyStatus == 1?'已整改':'暂无法整改'}}</p>
+            <p class="right-check-title-p" v-if="item.dataList1Data1 == 3">{{newData.rectifyStatus == 1?'复查完毕':'退回整改'}}</p>
+          </div>
+        </div>
+        <div class="right-text-box">
+          <p class="right-text-name-p">{{item.dataList1Data1 == 1?'隐患描述':(item.dataList1Data1 == 2?'整改措施':(item.dataList1Data1 == 3?'验证情况':''))}}</p>
+          <div class="right-text-text-box" style="width:704px;">
+            <p style="min-height:80px;">{{item.dataList1Data2}}</p>
+          </div>
+        </div>
+        <div class="right-text-box">
+          <p class="right-text-name-p">现场照片</p>
+          <img :src="imgItem" @click="fullScreenViewClick(item.dataList1Data3,imgIndex)"
+               v-for="(imgItem,imgIndex) in item.dataList1Data3" :key="imgIndex">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'historyRecordsComponent',
+    props:{
+      historyRecordsComponentPropsData:{},
+    },
+    data(){
+      return{
+        newData:{
+          rectifyStatus:1,
+        },
+        dataList:[
+          {
+            dataList1Data1:'1',
+            dataList1Data2:'现场隐患信息描述内容',
+            dataList1Data3:[
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+            ],
+            itemShowType:true,
+          },
+          {
+            dataList1Data1:'2',
+            dataList1Data2:'整改措施整改措施整改措施整改措施',
+            dataList1Data3:[
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+            ],
+            itemShowType:true,
+          },
+          {
+            dataList1Data1:'3',
+            dataList1Data2:'验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况',
+            dataList1Data3:[
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+              'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
+            ],
+            itemShowType:true,
+          },
+        ],
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //子项展开隐藏按钮
+      itemShowButton(index){
+        this.$set(this.dataList[index],'itemShowType',!this.dataList[index].itemShowType);
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .initiateInspect-historyRecordsComponent{
+    border:1px solid #E0E0E0;
+    border-top:none;
+    .content-right-title-min-p{
+      line-height:40px;
+      background: #F5F5F5;
+      padding-left:23px;
+      border-top:1px solid #E0E0E0;
+      border-bottom:1px solid #E0E0E0;
+      span{
+        float: right;
+        font-size:20px;
+        line-height:40px;
+        margin-right:20px;
+        cursor: pointer;
+      }
+    }
+    .right-text-box{
+      display: flex;
+      margin-bottom:20px;
+      .right-text-name-p{
+        width:90px;
+        line-height:40px;
+        text-align: right;
+        margin-right:14px;
+        font-size:16px;
+      }
+      .right-text-title-box{
+        font-size:14px;
+        width:300px;
+        padding:10px 20px;
+        background-color: #f5f5f5;
+        border: 1px solid #E0E0E0;
+        border-radius: 4px 4px 4px 4px;
+        p{
+          line-height:20px;
+          /*单行省略号*/
+          display:block;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
+        }
+      }
+      .right-text-text-box{
+        font-size:14px;
+        width:300px;
+        padding:10px 20px;
+        background-color: #f5f5f5;
+        border: 1px solid #E0E0E0;
+        border-radius: 4px 4px 4px 4px;
+        p{
+          line-height:20px;
+        }
+      }
+      .right-no-check-box{
+        height:40px;
+        margin-right:20px;
+        overflow: hidden;
+        display: flex;
+        cursor: pointer;
+        div{
+          margin:13px 0 0;
+          width:16px;
+          height:16px;
+          border:1px solid #999;
+          border-radius:50%;
+          p{
+            height:10px;
+            width:10px;
+            margin:2px;
+            border-radius:50%;
+          }
+        }
+        .right-no-check-title-p{
+          margin-left:8px;
+          height:40px;
+          line-height:40px;
+          color:#333;
+          font-size:16px;
+        }
+      }
+      .right-check-box{
+        height:40px;
+        margin-right:20px;
+        overflow: hidden;
+        display: flex;
+        cursor: pointer;
+        div{
+          margin:13px 0 0;
+          width:16px;
+          height:16px;
+          border:1px solid #0183FA;
+          border-radius:50%;
+          p{
+            height:10px;
+            width:10px;
+            margin:2px;
+            border-radius:50%;
+            background-color: #0183FA;
+          }
+        }
+        .right-check-title-p{
+          margin-left:8px;
+          height:40px;
+          line-height:40px;
+          color:#0183FA;
+          font-size:16px;
+        }
+      }
+      img{
+        cursor: pointer;
+        display: block;
+        width:100px;
+        height:100px;
+        margin-right:20px;
+      }
+    }
+  }
+</style>

src/views/safetyCheck/components/initiateInspect.vue

@@ -7,6 +7,7 @@
       <p class="page-top-title-edit-p" @click="submitForm">继续检查</p>
       <p class="page-top-title-add-p" @click="submitForm">提交查看</p>
       <p class="page-top-title-out-p" @click="backPage">返回</p>
+      <p class="page-top-title-add-p" @click="submitForm">提交</p>
     </div>
     <div class="content-box">
         <!--校级角标-->
@@ -82,207 +83,111 @@
           </div>
         </div>
         <div class="content-right-box scrollbar-box">
-          <p class="content-right-title-p">基本信息</p>
-          <div class="content-right-flex-border-box" style="padding-top:20px;">
-            <div class="right-text-box">
-              <p class="right-text-name-p">实验室</p>
-              <div class="right-text-title-box">
-                <p>{{newData.data9}}</p>
+          <p class="content-right-title-p">基本信息
+            <span :class="itemShowType_1?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(1)"></span>
+          </p>
+          <div v-if="itemShowType_1">
+            <div class="content-right-flex-border-box" style="padding-top:20px;">
+              <div class="right-text-box">
+                <p class="right-text-name-p">实验室</p>
+                <div class="right-text-title-box">
+                  <p>{{newData.data9}}</p>
+                </div>
               </div>
-            </div>
-            <div class="right-text-box">
-              <p class="right-text-name-p" style="width:138px;">分级分类</p>
-              <div class="right-text-title-box">
-                <p>{{newData.data10}}</p>
+              <div class="right-text-box">
+                <p class="right-text-name-p" style="width:138px;">分级分类</p>
+                <div class="right-text-title-box">
+                  <p>{{newData.data10}}</p>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="content-right-flex-border-box">
-            <div class="right-text-box">
-              <p class="right-text-name-p">学院单位</p>
-              <div class="right-text-title-box">
-                <p>{{newData.data11}}</p>
+            <div class="content-right-flex-border-box">
+              <div class="right-text-box">
+                <p class="right-text-name-p">学院单位</p>
+                <div class="right-text-title-box">
+                  <p>{{newData.data11}}</p>
+                </div>
               </div>
-            </div>
-            <div class="right-text-box">
-              <p class="right-text-name-p" style="width:138px;">楼栋楼层</p>
-              <div class="right-text-title-box">
-                <p>{{newData.data12}}</p>
+              <div class="right-text-box">
+                <p class="right-text-name-p" style="width:138px;">楼栋楼层</p>
+                <div class="right-text-title-box">
+                  <p>{{newData.data12}}</p>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="content-right-flex-border-box">
-            <div class="right-text-box">
-              <p class="right-text-name-p">检查人</p>
-              <div class="right-text-title-box">
-                <p>{{newData.data13}}</p>
+            <div class="content-right-flex-border-box">
+              <div class="right-text-box">
+                <p class="right-text-name-p">检查人</p>
+                <div class="right-text-title-box">
+                  <p>{{newData.data13}}</p>
+                </div>
               </div>
-            </div>
-            <div class="right-text-box">
-              <p class="right-text-name-p" style="width:138px;">检查时间</p>
-              <div class="right-text-title-box">
-                <p>{{newData.data14}}</p>
+              <div class="right-text-box">
+                <p class="right-text-name-p" style="width:138px;">检查时间</p>
+                <div class="right-text-title-box">
+                  <p>{{newData.data14}}</p>
+                </div>
               </div>
             </div>
           </div>
           <el-form class="add-form-box" :model="addForm" ref="addForm" :rules="lookInfoType?rulesNo:rules" label-width="110px">
-            <p class="content-right-title-min-p">检查内容</p>
-            <el-form-item label="检查项目" prop="formData1">
-              <el-select v-model="addForm.formData1" :disabled="lookInfoType||!checkItem" placeholder="请选择检查项目" style="width:700px;">
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <p class="dangers-num-p">此检查项在当前实验室累计出现 <span>{{dangersNum}}</span> 次隐患</p>
-            <el-form-item label="检查要点" prop="formData2">
-              <el-input v-model="addForm.formData2" disabled placeholder="请选择检查项目" style="width:700px;"></el-input>
-            </el-form-item>
-            <div style="display: flex;">
-              <el-form-item label="隐患等级" prop="formData3">
-                <el-select v-model="addForm.formData3" disabled placeholder="请选择检查项目" style="width:160px;">
+            <p class="content-right-title-min-p">
+              检查内容
+              <span :class="itemShowType_2?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(2)"></span>
+            </p>
+            <div v-if="itemShowType_2" style="margin-top:20px;">
+              <el-form-item label="检查项目" prop="formData1">
+                <el-select v-model="addForm.formData1" :disabled="lookInfoType||!checkItem" placeholder="请选择检查项目" style="width:700px;">
                   <el-option
-                    v-for="item in dangerLevel"
+                    v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item label="检查结果" prop="formData4" label-width="253px" v-if="!lookInfoType">
-                <div class="check-button-box">
-                  <div :class="addForm.formData4 == 1?'check-button-border':''" @click="checkButton(1)">
-                    <p>不符合</p>
-                    <img v-if="addForm.formData4 == 1" src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
-                  </div>
-                  <div :class="addForm.formData4 == 2?'check-button-border':''" @click="checkButton(2)">
-                    <p>符合</p>
-                    <img v-if="addForm.formData4 == 2" src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
-                  </div>
-                </div>
-              </el-form-item>
-              <el-form-item label="检查结果" prop="formData4" label-width="253px" v-if="lookInfoType">
-                <div class="check-button-border-box">
-                  <p>{{addForm.formData4?'不符合':'符合'}}</p>
-                  <img src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
-                </div>
-              </el-form-item>
-            </div>
-            <!--开展检查/草稿-->
-            <div v-if="addForm.formData4 == 1">
-              <p class="content-right-title-min-p">隐患信息</p>
-              <el-form-item label="隐患描述" prop="formData5">
-                <el-input placeholder="请输入隐患描述" maxLength='200' type="textarea" style="width:704px;"
-                          resize="none" v-model="addForm.formData5" show-word-limit :rows="3"></el-input>
+              <p class="dangers-num-p">此检查项在当前实验室累计出现 <span>{{dangersNum}}</span> 次隐患</p>
+              <el-form-item label="检查要点" prop="formData2">
+                <el-input v-model="addForm.formData2" disabled placeholder="请选择检查项目" style="width:700px;"></el-input>
               </el-form-item>
-              <el-form-item label="现场照片" prop="imgDtoList">
-                <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.imgDtoList" :key="imgIndex">
-                  <img class="for-img" :src="img.fileUrl" @click="fullScreenViewClick(addForm.imgDtoList,imgIndex)">
-                  <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
-                </div>
-                <el-upload
-                  v-if="addForm.imgDtoList.length<6"
-                  style="display: inline-block;overflow: hidden"
-                  class="avatar-uploader"
-                  :action="uploadImgUrl"
-                  :show-file-list="false"
-                  :on-success="(res)=>handleAvatarSuccess(res)"
-                  :headers="headers"
-                  :before-upload="(res)=>beforeAvatarUpload(res)">
-                  <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
-                </el-upload>
-                <p class="up-img-text">支持jpg/png/bmp/gif格式，且不超过2M，最多上传6张</p>
-              </el-form-item>
-            </div>
-            <!--详情/整改展示/复核展示-->
-            <div v-for="(item,index) in newData.dataList1" :key="index">
-              <p class="content-right-title-min-p">{{item.dataList1Data1 == 1?'隐患信息':(item.dataList1Data1 == 2?'隐患整改':(item.dataList1Data1 == 3?'复查验证':''))}}</p>
-              <div class="right-text-box" v-if="item.dataList1Data1 == 2 || item.dataList1Data1 == 3">
-                <p class="right-text-name-p">{{item.dataList1Data1 == 2?'整改结果':(item.dataList1Data1 == 3?'复查结果':'')}}</p>
-                <div class="right-check-box">
-                  <div class="right-min-check-title-box">
-                    <p></p>
+              <div style="display: flex;">
+                <el-form-item label="隐患等级" prop="formData3">
+                  <el-select v-model="addForm.formData3" disabled placeholder="请选择检查项目" style="width:160px;">
+                    <el-option
+                      v-for="item in dangerLevel"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="检查结果" prop="formData4" label-width="253px" v-if="!lookInfoType">
+                  <div class="check-button-box">
+                    <div :class="addForm.formData4 == 1?'check-button-border':''" @click="checkButton(1)">
+                      <p>不符合</p>
+                      <img v-if="addForm.formData4 == 1" src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
+                    </div>
+                    <div :class="addForm.formData4 == 2?'check-button-border':''" @click="checkButton(2)">
+                      <p>符合</p>
+                      <img v-if="addForm.formData4 == 2" src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
+                    </div>
                   </div>
-                  <p class="right-check-title-p" v-if="item.dataList1Data1 == 2">{{newData.rectifyStatus == 1?'已整改':'暂无法整改'}}</p>
-                  <p class="right-check-title-p" v-if="item.dataList1Data1 == 3">{{newData.rectifyStatus == 1?'复查完毕':'退回整改'}}</p>
-                </div>
-              </div>
-              <div class="right-text-box">
-                <p class="right-text-name-p">{{item.dataList1Data1 == 1?'隐患描述':(item.dataList1Data1 == 2?'整改措施':(item.dataList1Data1 == 3?'验证情况':''))}}</p>
-                <div class="right-text-text-box" style="width:704px;">
-                  <p style="min-height:80px;">{{item.dataList1Data2}}</p>
-                </div>
-              </div>
-              <div class="right-text-box">
-                <p class="right-text-name-p">现场照片</p>
-                <img :src="imgItem" @click="fullScreenViewClick(item.dataList1Data3,imgIndex)"
-                     v-for="(imgItem,imgIndex) in item.dataList1Data3" :key="imgIndex">
-              </div>
-            </div>
-            <!--当前整改-->
-            <div>
-              <p class="content-right-title-min-p">隐患整改</p>
-              <div class="right-text-box">
-                <p class="right-text-name-p">整改结果</p>
-                <div :class="addForm.formData6 == 1?'right-check-box':'right-no-check-box'">
-                  <div>
-                    <p></p>
-                  </div>
-                  <p class="right-no-check-title-p">已整改</p>
-                </div>
-                <div :class="addForm.formData6 == 2?'right-check-box':'right-no-check-box'">
-                  <div>
-                    <p></p>
+                </el-form-item>
+                <el-form-item label="检查结果" prop="formData4" label-width="253px" v-if="lookInfoType">
+                  <div class="check-button-border-box">
+                    <p>{{addForm.formData4?'不符合':'符合'}}</p>
+                    <img src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
                   </div>
-                  <p class="right-no-check-title-p">暂无法整改</p>
-                </div>
+                </el-form-item>
               </div>
-              <el-form-item label="整改措施" prop="formData5">
-                <el-input placeholder="请输入整改措施" maxLength='200' type="textarea" style="width:704px;"
-                          resize="none" v-model="addForm.formData5" show-word-limit :rows="3"></el-input>
-              </el-form-item>
-              <el-form-item label="现场照片" prop="imgDtoList">
-                <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.imgDtoList" :key="imgIndex">
-                  <img class="for-img" :src="img.fileUrl" @click="fullScreenViewClick(addForm.imgDtoList,imgIndex)">
-                  <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
-                </div>
-                <el-upload
-                  v-if="addForm.imgDtoList.length<6"
-                  style="display: inline-block;overflow: hidden"
-                  class="avatar-uploader"
-                  :action="uploadImgUrl"
-                  :show-file-list="false"
-                  :on-success="(res)=>handleAvatarSuccess(res)"
-                  :headers="headers"
-                  :before-upload="(res)=>beforeAvatarUpload(res)">
-                  <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
-                </el-upload>
-                <p class="up-img-text">支持jpg/png/bmp/gif格式，且不超过2M，最多上传6张</p>
-              </el-form-item>
             </div>
-            <!--当前审核-->
-            <div>
-              <p class="content-right-title-min-p">复查验证</p>
-              <div class="right-text-box">
-                <p class="right-text-name-p">复查结果</p>
-                <div :class="addForm.formData7 == 1?'right-check-box':'right-no-check-box'">
-                  <div>
-                    <p></p>
-                  </div>
-                  <p class="right-no-check-title-p">复查完毕</p>
-                </div>
-                <div :class="addForm.formData7 == 2?'right-check-box':'right-no-check-box'">
-                  <div>
-                    <p></p>
-                  </div>
-                  <p class="right-no-check-title-p">退回整改</p>
-                </div>
-              </div>
-              <el-form-item label="验证情况" prop="formData5">
-                <el-input placeholder="请输入验证情况" maxLength='200' type="textarea" style="width:704px;"
+            <p class="content-right-title-min-p">
+              隐患信息
+              <span :class="itemShowType_3?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(3)"></span>
+            </p>
+            <div v-if="itemShowType_3" style="margin-top:20px;">
+              <el-form-item label="隐患描述" prop="formData5">
+                <el-input placeholder="请输入隐患描述" maxLength='200' type="textarea" style="width:704px;"
                           resize="none" v-model="addForm.formData5" show-word-limit :rows="3"></el-input>
               </el-form-item>
               <el-form-item label="现场照片" prop="imgDtoList">
@@ -305,6 +210,12 @@
               </el-form-item>
             </div>
           </el-form>
+          <!--历史记录-->
+          <history-records-component ref="historyRecordsComponent" :historyRecordsComponentPropsData="historyRecordsComponentPropsData"></history-records-component>
+          <!--整改-->
+          <rectification-component ref="rectificationComponent" :recheckComponentPropsData="recheckComponentPropsData"></rectification-component>
+          <!--复核-->
+          <recheck-component ref="recheckComponent" :rectificationComponentPropsData="rectificationComponentPropsData"></recheck-component>
         </div>
     </div>
     <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
@@ -316,6 +227,9 @@
   import { getToken } from "@/utils/auth";
   import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
   import fullScreenFileLook from "@/components/fullScreenFileLook/fullScreenFileLook.vue";
+  import historyRecordsComponent from "./historyRecordsComponent.vue";
+  import recheckComponent from "./recheckComponent.vue";
+  import rectificationComponent from "./rectificationComponent.vue";
   //import { getDicts } from "@/api/commonality/noPermission";
   //import { systemUserSelect } from "@/api/commonality/permission";
   //import { getInfo } from "@/api/basicsModules/index";
@@ -324,6 +238,9 @@
     components: {
       fullScreenView,
       fullScreenFileLook,
+      historyRecordsComponent,
+      recheckComponent,
+      rectificationComponent,
     },
     props:{
       propsData:{},
@@ -362,44 +279,6 @@
           data12:'楼栋名称',
           data13:'姓名-工号',
           data14:'2024-09-06',
-          dataList1:[
-            {
-              dataList1Data1:'1',
-              dataList1Data2:'现场隐患信息描述内容',
-              dataList1Data3:[
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-              ],
-            },
-            {
-              dataList1Data1:'2',
-              dataList1Data2:'整改措施整改措施整改措施整改措施',
-              dataList1Data3:[
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-              ],
-            },
-            {
-              dataList1Data1:'3',
-              dataList1Data2:'验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况验证情况',
-              dataList1Data3:[
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-                'https://inews.gtimg.com/news_bt/ObxBXJWswEC7oTRhEqLPmyZOq_o2q_HYFD0L4tt-vzEFYAA/641',
-              ],
-            },
-          ],
           dataFileList1:[
             {
               fileName:'文件名称',
@@ -412,9 +291,11 @@
           ],
         },
         options:[],
-        dangerLevel:[
-
-        ],
+        dangerLevel:[],
+        //子项展开状态
+        itemShowType_1:true,
+        itemShowType_2:true,
+        itemShowType_3:true,
         //隐患次数
         dangersNum:0,
         addForm:{
@@ -445,10 +326,18 @@
             { required: true, message: "请上传现场照片", trigger: "blur" },
           ],
         },
+        //历史记录组件数据
+        historyRecordsComponentPropsData:{},
+        //开始检查组件数据
+        inspectComponentPropsData:{},
+        //整改组件数据
+        rectificationComponentPropsData:{},
+        //复核组件数据
+        recheckComponentPropsData:{},
       }
     },
     created(){
-      this.initialize();
+      // this.initialize();
     },
     mounted(){
 
@@ -485,6 +374,16 @@
           }
         })
       },
+      //子项展开隐藏按钮
+      itemShowButton(type){
+        if(type == 1){
+          this.$set(this,'itemShowType_1',!this.itemShowType_1);
+        }else if(type == 2){
+          this.$set(this,'itemShowType_2',!this.itemShowType_2);
+        }else if(type == 3){
+          this.$set(this,'itemShowType_3',!this.itemShowType_3);
+        }
+      },
       //检查结果勾选
       checkButton(type){
         if(this.addForm.formData4 != type){
@@ -690,6 +589,13 @@
           background: #F5F5F5;
           border: 1px solid #E0E0E0;
           padding-left:23px;
+          span{
+            float: right;
+            font-size:20px;
+            line-height:40px;
+            margin-right:20px;
+            cursor: pointer;
+          }
         }
         .content-right-flex-border-box{
           display: flex;
@@ -700,12 +606,18 @@
           border:1px solid #E0E0E0;
           border-top:none;
           .content-right-title-min-p{
-            margin-bottom:20px;
             line-height:40px;
             background: #F5F5F5;
             padding-left:23px;
             border-top:1px solid #E0E0E0;
             border-bottom:1px solid #E0E0E0;
+            span{
+              float: right;
+              font-size:20px;
+              line-height:40px;
+              margin-right:20px;
+              cursor: pointer;
+            }
           }
           ::v-deep .snapshotManagement-for-img-box{
             width:80px;

src/views/safetyCheck/components/initiateInspect/recheckComponent.vue

@@ -0,0 +1,327 @@
+<!--复核-->
+<template>
+  <div class="page-container initiateInspect-recheckComponent">
+    <!--当前审核-->
+    <el-form class="add-form-box" :model="addForm" ref="addForm" :rules="rules" label-width="110px">
+      <p class="content-right-title-min-p">
+        复查验证
+        <span :class="itemShowType?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton()"></span>
+      </p>
+      <div v-if="itemShowType" style="margin-top:20px;">
+        <div class="right-text-box">
+          <p class="right-text-name-p">复查结果</p>
+          <div :class="addForm.formData7 == 1?'right-check-box':'right-no-check-box'">
+            <div>
+              <p></p>
+            </div>
+            <p class="right-no-check-title-p">复查完毕</p>
+          </div>
+          <div :class="addForm.formData7 == 2?'right-check-box':'right-no-check-box'">
+            <div>
+              <p></p>
+            </div>
+            <p class="right-no-check-title-p">退回整改</p>
+          </div>
+        </div>
+        <el-form-item label="验证情况" prop="formData5">
+          <el-input placeholder="请输入验证情况" maxLength='200' type="textarea" style="width:704px;"
+                    resize="none" v-model="addForm.formData5" show-word-limit :rows="3"></el-input>
+        </el-form-item>
+        <el-form-item label="现场照片" prop="imgDtoList">
+          <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.imgDtoList" :key="imgIndex">
+            <img class="for-img" :src="img.fileUrl" @click="fullScreenViewClick(addForm.imgDtoList,imgIndex)">
+            <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
+          </div>
+          <el-upload
+            v-if="addForm.imgDtoList.length<6"
+            style="display: inline-block;overflow: hidden"
+            class="avatar-uploader"
+            :action="uploadImgUrl"
+            :show-file-list="false"
+            :on-success="(res)=>handleAvatarSuccess(res)"
+            :headers="headers"
+            :before-upload="(res)=>beforeAvatarUpload(res)">
+            <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
+          </el-upload>
+          <p class="up-img-text">支持jpg/png/bmp/gif格式，且不超过2M，最多上传6张</p>
+        </el-form-item>
+      </div>
+    </el-form>
+    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
+  </div>
+</template>
+
+<script>
+  import { getToken } from "@/utils/auth";
+  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
+  export default {
+    name: 'recheckComponent',
+    components: {
+      fullScreenView,
+    },
+    props:{
+      recheckComponentPropsData:{},
+    },
+    data(){
+      return{
+        //上传相关
+        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+        headers: {
+          Authorization:getToken(),
+        },
+        //图片组件数据
+        fullScreenViewProps:[],
+        itemShowType:true,
+        addForm:{
+          imgDtoList:[],
+        },
+        rules:{
+          formData1: [
+            { required: true, message: "请选择检查项目", trigger: "blur" },
+            { required: true, message: "请选择检查项目", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          formData4: [
+            { required: true, message: "请选择检查结果", trigger: "blur" },
+            { required: true, message: "请选择检查结果", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          formData5: [
+            { required: true, message: "请输入隐患描述", trigger: "blur" },
+            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          imgDtoList: [
+            { required: true, message: "请上传现场照片", trigger: "blur" },
+          ],
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //子项展开隐藏按钮
+      itemShowButton(){
+        this.$set(this,'itemShowType',!this.itemShowType);
+      },
+      /*==========上传相关==========*/
+      handleAvatarSuccess(res) {
+        this.$set(this,'loading',false);
+        if(this.addForm.imgDtoList.length>5){
+          this.msgError('最多只可上传6张')
+          return
+        }
+        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
+        //判断文件名中是否有逗号和分号
+        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
+        }else{
+          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
+          return
+        }
+        let obj ={
+          fileName:this.upDataName,
+          fileUrl:res.data.url,
+        };
+        this.addForm.imgDtoList.push(obj);
+        this.$forceUpdate()
+      },
+      beforeAvatarUpload(file) {
+        if(this.addForm.imgDtoList.length>5){
+          this.msgError('最多只可上传6张')
+          return false
+        }
+        let type = false;
+        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif' || file.type == 'image/bmp') {
+          if(file.size> 2100000){
+            this.msgError('上传图片大小不能超过2M')
+            return false
+          }
+          this.$set(this,'loading',true);
+          this.upDataName = file.name;
+          type = true;
+        }else{
+          this.msgError('仅支持jpeg/jpg/png/bmp/gif格式')
+          type = false;
+        }
+        return type;
+      },
+      //删除照片
+      delImg(imgIndex){
+        this.addForm.imgDtoList.splice(imgIndex,1);
+      },
+      //照片预览
+      fullScreenViewClick(list,index){
+        this.$set(this,'fullScreenViewProps',list);
+        this.$refs['fullScreenView'].initialize(index);
+      },
+
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .initiateInspect-recheckComponent{
+    .add-form-box{
+      border:1px solid #E0E0E0;
+      border-top:none;
+      .content-right-title-min-p{
+        line-height:40px;
+        background: #F5F5F5;
+        padding-left:23px;
+        border-top:1px solid #E0E0E0;
+        border-bottom:1px solid #E0E0E0;
+        span{
+          float: right;
+          font-size:20px;
+          line-height:40px;
+          margin-right:20px;
+          cursor: pointer;
+        }
+      }
+      .right-text-box{
+        display: flex;
+        margin-bottom:20px;
+        .right-text-name-p{
+          width:90px;
+          line-height:40px;
+          text-align: right;
+          margin-right:14px;
+          font-size:16px;
+        }
+        .right-text-title-box{
+          font-size:14px;
+          width:300px;
+          padding:10px 20px;
+          background-color: #f5f5f5;
+          border: 1px solid #E0E0E0;
+          border-radius: 4px 4px 4px 4px;
+          p{
+            line-height:20px;
+            /*单行省略号*/
+            display:block;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+        }
+        .right-text-text-box{
+          font-size:14px;
+          width:300px;
+          padding:10px 20px;
+          background-color: #f5f5f5;
+          border: 1px solid #E0E0E0;
+          border-radius: 4px 4px 4px 4px;
+          p{
+            line-height:20px;
+          }
+        }
+        .right-no-check-box{
+          height:40px;
+          margin-right:20px;
+          overflow: hidden;
+          display: flex;
+          cursor: pointer;
+          div{
+            margin:13px 0 0;
+            width:16px;
+            height:16px;
+            border:1px solid #999;
+            border-radius:50%;
+            p{
+              height:10px;
+              width:10px;
+              margin:2px;
+              border-radius:50%;
+            }
+          }
+          .right-no-check-title-p{
+            margin-left:8px;
+            height:40px;
+            line-height:40px;
+            color:#333;
+            font-size:16px;
+          }
+        }
+        .right-check-box{
+          height:40px;
+          margin-right:20px;
+          overflow: hidden;
+          display: flex;
+          cursor: pointer;
+          div{
+            margin:13px 0 0;
+            width:16px;
+            height:16px;
+            border:1px solid #0183FA;
+            border-radius:50%;
+            p{
+              height:10px;
+              width:10px;
+              margin:2px;
+              border-radius:50%;
+              background-color: #0183FA;
+            }
+          }
+          .right-check-title-p{
+            margin-left:8px;
+            height:40px;
+            line-height:40px;
+            color:#0183FA;
+            font-size:16px;
+          }
+        }
+        img{
+          cursor: pointer;
+          display: block;
+          width:100px;
+          height:100px;
+          margin-right:20px;
+        }
+      }
+      ::v-deep .snapshotManagement-for-img-box{
+        width:80px;
+        height:80px;
+        border-radius:4px;
+        display: inline-block;
+        overflow: hidden;
+        margin-right:20px;
+        position: relative;
+        .for-img{
+          width:80px;
+          height:80px;
+          display: inline-block;
+          overflow: hidden;
+        }
+        .for-del-button{
+          background: rgba(0,0,0,0.7);
+          width:20px;
+          height:20px;
+          line-height: 20px;
+          text-align: center;
+          color:#fff;
+          border-bottom-left-radius:4px;
+          cursor: pointer;
+          position: absolute;
+          top:0;
+          right:0;
+        }
+      }
+      ::v-deep .up-img-p{
+        height:80px;
+        width:80px;
+        line-height:80px;
+        text-align: center;
+        font-size:16px;
+        border-radius:4px;
+        border:1px dashed #E0E0E0;
+      }
+      .up-img-text{
+        line-height:40px;
+        margin-bottom:20px;
+        font-size:14px;
+        color:#999;
+      }
+    }
+  }
+</style>

src/views/safetyCheck/components/initiateInspect/rectificationComponent.vue

@@ -0,0 +1,326 @@
+<!--整改-->
+<template>
+  <div class="page-container initiateInspect-rectificationComponent">
+    <!--当前整改-->
+    <el-form class="add-form-box" :model="addForm" ref="addForm" :rules="rules" label-width="110px">
+      <p class="content-right-title-min-p">
+        隐患整改
+        <span :class="itemShowType?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton()"></span>
+      </p>
+      <div v-if="itemShowType" style="margin-top:20px;">
+        <div class="right-text-box">
+          <p class="right-text-name-p">整改结果</p>
+          <div :class="addForm.formData6 == 1?'right-check-box':'right-no-check-box'">
+            <div>
+              <p></p>
+            </div>
+            <p class="right-no-check-title-p">已整改</p>
+          </div>
+          <div :class="addForm.formData6 == 2?'right-check-box':'right-no-check-box'">
+            <div>
+              <p></p>
+            </div>
+            <p class="right-no-check-title-p">暂无法整改</p>
+          </div>
+        </div>
+        <el-form-item label="整改措施" prop="formData5">
+          <el-input placeholder="请输入整改措施" maxLength='200' type="textarea" style="width:704px;"
+                    resize="none" v-model="addForm.formData5" show-word-limit :rows="3"></el-input>
+        </el-form-item>
+        <el-form-item label="现场照片" prop="imgDtoList">
+          <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.imgDtoList" :key="imgIndex">
+            <img class="for-img" :src="img.fileUrl" @click="fullScreenViewClick(addForm.imgDtoList,imgIndex)">
+            <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
+          </div>
+          <el-upload
+            v-if="addForm.imgDtoList.length<6"
+            style="display: inline-block;overflow: hidden"
+            class="avatar-uploader"
+            :action="uploadImgUrl"
+            :show-file-list="false"
+            :on-success="(res)=>handleAvatarSuccess(res)"
+            :headers="headers"
+            :before-upload="(res)=>beforeAvatarUpload(res)">
+            <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
+          </el-upload>
+          <p class="up-img-text">支持jpg/png/bmp/gif格式，且不超过2M，最多上传6张</p>
+        </el-form-item>
+      </div>
+    </el-form>
+    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
+  </div>
+</template>
+
+<script>
+  import { getToken } from "@/utils/auth";
+  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
+  export default {
+    name: 'rectificationComponent',
+    components: {
+      fullScreenView,
+    },
+    props:{
+      rectificationComponentPropsData:{},
+    },
+    data(){
+      return{
+        //上传相关
+        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+        headers: {
+          Authorization:getToken(),
+        },
+        //图片组件数据
+        fullScreenViewProps:[],
+        itemShowType:true,
+        addForm:{
+          imgDtoList:[],
+        },
+        rules:{
+          formData1: [
+            { required: true, message: "请选择检查项目", trigger: "blur" },
+            { required: true, message: "请选择检查项目", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          formData4: [
+            { required: true, message: "请选择检查结果", trigger: "blur" },
+            { required: true, message: "请选择检查结果", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          formData5: [
+            { required: true, message: "请输入隐患描述", trigger: "blur" },
+            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          imgDtoList: [
+            { required: true, message: "请上传现场照片", trigger: "blur" },
+          ],
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //子项展开隐藏按钮
+      itemShowButton(){
+        this.$set(this,'itemShowType',!this.itemShowType);
+      },
+      /*==========上传相关==========*/
+      handleAvatarSuccess(res) {
+        this.$set(this,'loading',false);
+        if(this.addForm.imgDtoList.length>5){
+          this.msgError('最多只可上传6张')
+          return
+        }
+        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
+        //判断文件名中是否有逗号和分号
+        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
+        }else{
+          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
+          return
+        }
+        let obj ={
+          fileName:this.upDataName,
+          fileUrl:res.data.url,
+        };
+        this.addForm.imgDtoList.push(obj);
+        this.$forceUpdate()
+      },
+      beforeAvatarUpload(file) {
+        if(this.addForm.imgDtoList.length>5){
+          this.msgError('最多只可上传6张')
+          return false
+        }
+        let type = false;
+        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif' || file.type == 'image/bmp') {
+          if(file.size> 2100000){
+            this.msgError('上传图片大小不能超过2M')
+            return false
+          }
+          this.$set(this,'loading',true);
+          this.upDataName = file.name;
+          type = true;
+        }else{
+          this.msgError('仅支持jpeg/jpg/png/bmp/gif格式')
+          type = false;
+        }
+        return type;
+      },
+      //删除照片
+      delImg(imgIndex){
+        this.addForm.imgDtoList.splice(imgIndex,1);
+      },
+      //照片预览
+      fullScreenViewClick(list,index){
+        this.$set(this,'fullScreenViewProps',list);
+        this.$refs['fullScreenView'].initialize(index);
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .initiateInspect-rectificationComponent{
+    .add-form-box{
+      border:1px solid #E0E0E0;
+      border-top:none;
+      .content-right-title-min-p{
+        line-height:40px;
+        background: #F5F5F5;
+        padding-left:23px;
+        border-top:1px solid #E0E0E0;
+        border-bottom:1px solid #E0E0E0;
+        span{
+          float: right;
+          font-size:20px;
+          line-height:40px;
+          margin-right:20px;
+          cursor: pointer;
+        }
+      }
+      .right-text-box{
+        display: flex;
+        margin-bottom:20px;
+        .right-text-name-p{
+          width:90px;
+          line-height:40px;
+          text-align: right;
+          margin-right:14px;
+          font-size:16px;
+        }
+        .right-text-title-box{
+          font-size:14px;
+          width:300px;
+          padding:10px 20px;
+          background-color: #f5f5f5;
+          border: 1px solid #E0E0E0;
+          border-radius: 4px 4px 4px 4px;
+          p{
+            line-height:20px;
+            /*单行省略号*/
+            display:block;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+        }
+        .right-text-text-box{
+          font-size:14px;
+          width:300px;
+          padding:10px 20px;
+          background-color: #f5f5f5;
+          border: 1px solid #E0E0E0;
+          border-radius: 4px 4px 4px 4px;
+          p{
+            line-height:20px;
+          }
+        }
+        .right-no-check-box{
+          height:40px;
+          margin-right:20px;
+          overflow: hidden;
+          display: flex;
+          cursor: pointer;
+          div{
+            margin:13px 0 0;
+            width:16px;
+            height:16px;
+            border:1px solid #999;
+            border-radius:50%;
+            p{
+              height:10px;
+              width:10px;
+              margin:2px;
+              border-radius:50%;
+            }
+          }
+          .right-no-check-title-p{
+            margin-left:8px;
+            height:40px;
+            line-height:40px;
+            color:#333;
+            font-size:16px;
+          }
+        }
+        .right-check-box{
+          height:40px;
+          margin-right:20px;
+          overflow: hidden;
+          display: flex;
+          cursor: pointer;
+          div{
+            margin:13px 0 0;
+            width:16px;
+            height:16px;
+            border:1px solid #0183FA;
+            border-radius:50%;
+            p{
+              height:10px;
+              width:10px;
+              margin:2px;
+              border-radius:50%;
+              background-color: #0183FA;
+            }
+          }
+          .right-check-title-p{
+            margin-left:8px;
+            height:40px;
+            line-height:40px;
+            color:#0183FA;
+            font-size:16px;
+          }
+        }
+        img{
+          cursor: pointer;
+          display: block;
+          width:100px;
+          height:100px;
+          margin-right:20px;
+        }
+      }
+      ::v-deep .snapshotManagement-for-img-box{
+        width:80px;
+        height:80px;
+        border-radius:4px;
+        display: inline-block;
+        overflow: hidden;
+        margin-right:20px;
+        position: relative;
+        .for-img{
+          width:80px;
+          height:80px;
+          display: inline-block;
+          overflow: hidden;
+        }
+        .for-del-button{
+          background: rgba(0,0,0,0.7);
+          width:20px;
+          height:20px;
+          line-height: 20px;
+          text-align: center;
+          color:#fff;
+          border-bottom-left-radius:4px;
+          cursor: pointer;
+          position: absolute;
+          top:0;
+          right:0;
+        }
+      }
+      ::v-deep .up-img-p{
+        height:80px;
+        width:80px;
+        line-height:80px;
+        text-align: center;
+        font-size:16px;
+        border-radius:4px;
+        border:1px dashed #E0E0E0;
+      }
+      .up-img-text{
+        line-height:40px;
+        margin-bottom:20px;
+        font-size:14px;
+        color:#999;
+      }
+    }
+  }
+</style>

src/views/safetyCheck/components/projectAddPage.vue

@@ -29,7 +29,7 @@
         <!--计划任务-->
         <el-form class="add-form-box" :model="dialogForm" ref="form" :rules="rules" label-width="180px">
           <div class="content-right-project-box">
-            <p class="project-title-p">计划任务<span class=""></span></p>
+            <p class="project-title-p">计划任务</p>
             <el-form-item label="计划标题" prop="data1" style="margin-top:20px;">
               <el-input v-model="dialogForm.data1" :disabled="lookInfoType" placeholder="请输入计划标题" maxLength="30" style="width:450px;"></el-input>
             </el-form-item>
@@ -901,6 +901,36 @@
 
         }
       }
+      ::v-deep .el-input.is-disabled .el-input__inner{
+        background-color: #f5f5f5;
+        border: 1px solid #E0E0E0;
+        color:#333;
+        cursor: auto;
+      }
+      ::v-deep .el-range-editor.is-disabled{
+        background-color: #f5f5f5;
+        border: 1px solid #E0E0E0;
+        color:#333;
+        cursor: auto;
+      }
+      ::v-deep .el-range-editor.is-disabled input{
+        background-color: #f5f5f5;
+        color:#333;
+        cursor: auto;
+      }
+      ::v-deep .el-textarea.is-disabled .el-textarea__inner{
+        background-color: #f5f5f5;
+        border: 1px solid #E0E0E0;
+        color:#333;
+        cursor: auto;
+      }
+      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner{
+        border-color: #1890ff;
+        background: #1890ff;
+      }
+      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
+        background: #fff;
+      }
     }
   }
 </style>

src/views/safetyCheck/components/snapshotInfo.vue

@@ -0,0 +1,716 @@
+<template>
+  <div class="page-container snapshot-snapshotInfo">
+    <div class="page-top-title-box">
+      <p class="page-top-title-name-p">{{addForm.id?'编辑':'新增'}}</p>
+      <p class="page-top-title-out-p" @click="backPage">返回</p>
+      <p class="page-top-title-add-p" @click="submitForm">提交</p>
+    </div>
+    <div class="content-box scrollbar-box">
+      <el-form class="add-form-box" :model="addForm" ref="form" :rules="rules" label-width="104px">
+        <p class="content-right-title-p">
+          基本信息
+          <span :class="itemShowType_1?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(1)"></span>
+        </p>
+        <div v-if="itemShowType_1" class="show-box">
+          <div class="content-flex-box">
+            <el-form-item label="实验室" prop="data1">
+              <el-select
+                :disabled="lookInfoType"
+                style="width:300px;"
+                v-model="addForm.data1"
+                filterable
+                remote
+                clearable
+                reserve-keyword
+                @change="selectChange"
+                @clear="selectClear"
+                placeholder="搜索选择实验室"
+                :remote-method="subjectList">
+                <el-option
+                  v-for="item in subOptions"
+                  :key="item.subId"
+                  :label="item.subName"
+                  :value="item.subId">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <div class="right-text-box">
+              <p class="right-text-name-p" style="width:138px;">分级分类</p>
+              <div class="right-text-title-box">
+                <p>{{addForm.data2}}</p>
+              </div>
+            </div>
+            <div class="right-text-box">
+              <p class="right-text-name-p" style="width:138px;">学院单位</p>
+              <div class="right-text-title-box">
+                <p>{{addForm.data3}}</p>
+              </div>
+            </div>
+          </div>
+          <div class="content-flex-box">
+            <div class="right-text-box">
+              <p class="right-text-name-p">学院单位</p>
+              <div class="right-text-title-box">
+                <p>{{addForm.data4}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <p class="content-right-title-p">
+          检查内容
+          <span :class="itemShowType_2?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(2)"></span>
+        </p>
+        <div v-if="itemShowType_2" class="show-box">
+          <el-form-item label="名称" prop="data3">
+            <el-cascader
+              style="width:704px;"
+              v-model="addForm.data3"
+              :options="options"
+              @change="handleChange"></el-cascader>
+          </el-form-item>
+          <div class="right-text-box">
+            <p class="right-text-name-p">检查要点</p>
+            <div class="right-text-title-box" style="min-height: 80px;width:704px;">
+              <p>{{addForm.data4}}</p>
+            </div>
+          </div>
+          <div class="right-text-box">
+            <p class="right-text-name-p">隐患等级</p>
+            <div class="right-text-title-box" style="width:301px;">
+              <p>{{addForm.data5}}</p>
+            </div>
+          </div>
+        </div>
+        <p class="content-right-title-p">
+          隐患信息
+          <span :class="itemShowType_3?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(3)"></span>
+        </p>
+        <div v-if="itemShowType_3" class="show-box">
+          <el-form-item label="隐患描述" prop="formData5">
+            <el-input placeholder="请输入隐患描述" maxLength='200' type="textarea" style="width:704px;"
+                      resize="none" v-model="addForm.formData5" show-word-limit :rows="3"></el-input>
+          </el-form-item>
+          <el-form-item label="现场照片" prop="imgDtoList">
+            <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.imgDtoList" :key="imgIndex">
+              <img class="for-img" :src="img.fileUrl" @click="fullScreenViewClick(addForm.imgDtoList,imgIndex)">
+              <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
+            </div>
+            <el-upload
+              v-if="addForm.imgDtoList.length<6"
+              style="display: inline-block;overflow: hidden"
+              class="avatar-uploader"
+              :action="uploadImgUrl"
+              :show-file-list="false"
+              :on-success="(res)=>handleAvatarSuccess(res)"
+              :headers="headers"
+              :before-upload="(res)=>beforeAvatarUpload(res)">
+              <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
+            </el-upload>
+            <p class="up-img-text">支持jpg/png/bmp/gif格式，且不超过2M，最多上传6张</p>
+          </el-form-item>
+        </div><!--历史记录-->
+        <history-records-component ref="historyRecordsComponent" :historyRecordsComponentPropsData="historyRecordsComponentPropsData"></history-records-component>
+        <!--整改-->
+        <rectification-component ref="rectificationComponent" :recheckComponentPropsData="recheckComponentPropsData"></rectification-component>
+      </el-form>
+    </div>
+    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
+  </div>
+</template>
+
+<script>
+  import { getToken } from "@/utils/auth";
+  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
+  import historyRecordsComponent from "./initiateInspect/historyRecordsComponent.vue";
+  import rectificationComponent from "./initiateInspect/rectificationComponent.vue";
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  //import { getInfo } from "@/api/basicsModules/index";
+  export default {
+    name: 'snapshotInfo',
+    components: {
+      fullScreenView,
+      historyRecordsComponent,
+      rectificationComponent,
+    },
+    props:{
+      propsData:{},
+    },
+    data(){
+      return{
+        //上传相关
+        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+        headers: {
+          Authorization:getToken(),
+        },
+        //图片组件数据
+        fullScreenViewProps:[],
+        //详情模式
+        lookInfoType:false,
+        //实验室列表
+        subOptions:[],
+        //学院列表
+        deptOptions:[],
+        //楼栋列表
+        buildOptions:[],
+        //分类
+        typeOptions: [],
+        //分级
+        levelOptions: [],
+        //提交表单
+        addForm:{
+          data1Id:'',
+          data1Name:'',
+          imgDtoList:[],
+        },
+        rules:{
+          formData1: [
+            { required: true, message: "请选择检查项目", trigger: "blur" },
+            { required: true, message: "请选择检查项目", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          formData4: [
+            { required: true, message: "请选择检查结果", trigger: "blur" },
+            { required: true, message: "请选择检查结果", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          formData5: [
+            { required: true, message: "请输入隐患描述", trigger: "blur" },
+            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          imgDtoList: [
+            { required: true, message: "请上传现场照片", trigger: "blur" },
+          ],
+        },
+        //子项展开状态
+        itemShowType_1:true,
+        itemShowType_2:true,
+        itemShowType_3:true,
+        options:[
+          {
+            value: 'zhinan',
+            label: '指南',
+            children: [{
+              value: 'shejiyuanze',
+              label: '设计原则',
+              children: [{
+                value: 'yizhi',
+                label: '一致'
+              }, {
+                value: 'fankui',
+                label: '反馈'
+              }, {
+                value: 'xiaolv',
+                label: '效率'
+              }, {
+                value: 'kekong',
+                label: '可控'
+              }]
+            }, {
+              value: 'daohang',
+              label: '导航',
+              children: [{
+                value: 'cexiangdaohang',
+                label: '侧向导航'
+              }, {
+                value: 'dingbudaohang',
+                label: '顶部导航'
+              }]
+            }]
+          }, {
+            value: 'zujian',
+            label: '组件',
+            children: [{
+              value: 'basic',
+              label: 'Basic',
+              children: [{
+                value: 'layout',
+                label: 'Layout 布局'
+              }, {
+                value: 'color',
+                label: 'Color 色彩'
+              }, {
+                value: 'typography',
+                label: 'Typography 字体'
+              }, {
+                value: 'icon',
+                label: 'Icon 图标'
+              }, {
+                value: 'button',
+                label: 'Button 按钮'
+              }]
+            }, {
+              value: 'form',
+              label: 'Form',
+              children: [{
+                value: 'radio',
+                label: 'Radio 单选框'
+              }, {
+                value: 'checkbox',
+                label: 'Checkbox 多选框'
+              }, {
+                value: 'input',
+                label: 'Input 输入框'
+              }, {
+                value: 'input-number',
+                label: 'InputNumber 计数器'
+              }, {
+                value: 'select',
+                label: 'Select 选择器'
+              }, {
+                value: 'cascader',
+                label: 'Cascader 级联选择器'
+              }, {
+                value: 'switch',
+                label: 'Switch 开关'
+              }, {
+                value: 'slider',
+                label: 'Slider 滑块'
+              }, {
+                value: 'time-picker',
+                label: 'TimePicker 时间选择器'
+              }, {
+                value: 'date-picker',
+                label: 'DatePicker 日期选择器'
+              }, {
+                value: 'datetime-picker',
+                label: 'DateTimePicker 日期时间选择器'
+              }, {
+                value: 'upload',
+                label: 'Upload 上传'
+              }, {
+                value: 'rate',
+                label: 'Rate 评分'
+              }, {
+                value: 'form',
+                label: 'Form 表单'
+              }]
+            }, {
+              value: 'data',
+              label: 'Data',
+              children: [{
+                value: 'table',
+                label: 'Table 表格'
+              }, {
+                value: 'tag',
+                label: 'Tag 标签'
+              }, {
+                value: 'progress',
+                label: 'Progress 进度条'
+              }, {
+                value: 'tree',
+                label: 'Tree 树形控件'
+              }, {
+                value: 'pagination',
+                label: 'Pagination 分页'
+              }, {
+                value: 'badge',
+                label: 'Badge 标记'
+              }]
+            }, {
+              value: 'notice',
+              label: 'Notice',
+              children: [{
+                value: 'alert',
+                label: 'Alert 警告'
+              }, {
+                value: 'loading',
+                label: 'Loading 加载'
+              }, {
+                value: 'message',
+                label: 'Message 消息提示'
+              }, {
+                value: 'message-box',
+                label: 'MessageBox 弹框'
+              }, {
+                value: 'notification',
+                label: 'Notification 通知'
+              }]
+            }, {
+              value: 'navigation',
+              label: 'Navigation',
+              children: [{
+                value: 'menu',
+                label: 'NavMenu 导航菜单'
+              }, {
+                value: 'tabs',
+                label: 'Tabs 标签页'
+              }, {
+                value: 'breadcrumb',
+                label: 'Breadcrumb 面包屑'
+              }, {
+                value: 'dropdown',
+                label: 'Dropdown 下拉菜单'
+              }, {
+                value: 'steps',
+                label: 'Steps 步骤条'
+              }]
+            }, {
+              value: 'others',
+              label: 'Others',
+              children: [{
+                value: 'dialog',
+                label: 'Dialog 对话框'
+              }, {
+                value: 'tooltip',
+                label: 'Tooltip 文字提示'
+              }, {
+                value: 'popover',
+                label: 'Popover 弹出框'
+              }, {
+                value: 'card',
+                label: 'Card 卡片'
+              }, {
+                value: 'carousel',
+                label: 'Carousel 走马灯'
+              }, {
+                value: 'collapse',
+                label: 'Collapse 折叠面板'
+              }]
+            }]
+          }, {
+            value: 'ziyuan',
+            label: '资源',
+            children: [{
+              value: 'axure',
+              label: 'Axure Components'
+            }, {
+              value: 'sketch',
+              label: 'Sketch Templates'
+            }, {
+              value: 'jiaohu',
+              label: '组件交互文档'
+            }]
+          }
+        ],
+        //历史记录组件数据
+        historyRecordsComponentPropsData:{},
+        rectificationComponentPropsData:{},
+
+      }
+    },
+    created(){
+      // this.initialize();
+    },
+    mounted(){
+
+    },
+    methods:{
+      // 返回按钮
+      backPage(){
+        this.$parent.tableButton(6);
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      handleChange(value) {
+        console.log(value);
+      },
+      //子项展开隐藏按钮
+      itemShowButton(type){
+        if(type == 1){
+          this.$set(this,'itemShowType_1',!this.itemShowType_1);
+        }else if(type == 2){
+          this.$set(this,'itemShowType_2',!this.itemShowType_2);
+        }else if(type == 3){
+          this.$set(this,'itemShowType_3',!this.itemShowType_3);
+        }
+      },
+      //懒加载实验室
+      subjectList(e){
+        subjectList({subName:e}).then(response => {
+          this.subOptions = response.data;
+        });
+      },
+      //实验室选择
+      selectChange(e){
+        let self = this;
+        for(let i=0;i<self.subOptions.length;i++){
+          if(self.subOptions[i].subId == e){
+            self.$set(self.addForm,"data1Id",self.subOptions[i].subId);
+            self.$set(self.addForm,"data1Name",self.subOptions[i].subName);
+          }
+        }
+      },
+      //实验室清除
+      selectClear(){
+        this.$set(this.addForm,"data1Id",'');
+        this.$set(this.addForm,"data1Name",'');
+      },
+      /*==========上传相关==========*/
+      handleAvatarSuccess(res) {
+        this.$set(this,'loading',false);
+        if(this.addForm.imgDtoList.length>5){
+          this.msgError('最多只可上传6张')
+          return
+        }
+        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
+        //判断文件名中是否有逗号和分号
+        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
+        }else{
+          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
+          return
+        }
+        let obj ={
+          fileName:this.upDataName,
+          fileUrl:res.data.url,
+        };
+        this.addForm.imgDtoList.push(obj);
+        this.$forceUpdate()
+      },
+      beforeAvatarUpload(file) {
+        if(this.addForm.imgDtoList.length>5){
+          this.msgError('最多只可上传6张')
+          return false
+        }
+        let type = false;
+        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif' || file.type == 'image/bmp') {
+          if(file.size> 2100000){
+            this.msgError('上传图片大小不能超过2M')
+            return false
+          }
+          this.$set(this,'loading',true);
+          this.upDataName = file.name;
+          type = true;
+        }else{
+          this.msgError('仅支持jpeg/jpg/png/bmp/gif格式')
+          type = false;
+        }
+        return type;
+      },
+      //删除照片
+      delImg(imgIndex){
+        this.addForm.imgDtoList.splice(imgIndex,1);
+      },
+      //照片预览
+      fullScreenViewClick(list,index){
+        this.$set(this,'fullScreenViewProps',list);
+        this.$refs['fullScreenView'].initialize(index);
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .snapshot-snapshotInfo{
+    padding-bottom:20px;
+    :v-deep .el-cascader-menu{
+      width:470px;
+    }
+    .content-box{
+      flex:1;
+      display: flex;
+      padding:20px;
+      .flex-null{
+        flex:1;
+      }
+      .add-form-box{
+        flex:1;
+        .show-box{
+          border:1px solid #E0E0E0;
+          border-top:none;
+          padding-top:20px;
+        }
+      }
+      .content-flex-box{
+        display: flex;
+      }
+      .content-right-title-p:nth-child(1){
+        border-top: 1px solid #E0E0E0;
+      }
+      .content-right-title-p{
+        line-height:40px;
+        background: #F5F5F5;
+        border: 1px solid #E0E0E0;
+        border-top:none;
+        padding-left:23px;
+        span{
+          float: right;
+          font-size:20px;
+          line-height:40px;
+          margin-right:20px;
+          cursor: pointer;
+        }
+      }
+      .right-text-box{
+        display: flex;
+        margin-bottom:20px;
+        .right-text-name-p{
+          width:90px;
+          line-height:40px;
+          text-align: right;
+          margin-right:14px;
+          font-size:16px;
+        }
+        .right-text-title-box{
+          font-size:14px;
+          width:300px;
+          padding:10px 20px;
+          background-color: #f5f5f5;
+          border: 1px solid #E0E0E0;
+          border-radius: 4px 4px 4px 4px;
+          p{
+            line-height:20px;
+            /*单行省略号*/
+            display:block;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+        }
+        .right-text-text-box{
+          font-size:14px;
+          width:300px;
+          padding:10px 20px;
+          background-color: #f5f5f5;
+          border: 1px solid #E0E0E0;
+          border-radius: 4px 4px 4px 4px;
+          p{
+            line-height:20px;
+          }
+        }
+        .right-no-check-box{
+          height:40px;
+          margin-right:20px;
+          overflow: hidden;
+          display: flex;
+          cursor: pointer;
+          div{
+            margin:13px 0 0;
+            width:16px;
+            height:16px;
+            border:1px solid #999;
+            border-radius:50%;
+            p{
+              height:10px;
+              width:10px;
+              margin:2px;
+              border-radius:50%;
+            }
+          }
+          .right-no-check-title-p{
+            margin-left:8px;
+            height:40px;
+            line-height:40px;
+            color:#333;
+            font-size:16px;
+          }
+        }
+        .right-check-box{
+          height:40px;
+          margin-right:20px;
+          overflow: hidden;
+          display: flex;
+          cursor: pointer;
+          div{
+            margin:13px 0 0;
+            width:16px;
+            height:16px;
+            border:1px solid #0183FA;
+            border-radius:50%;
+            p{
+              height:10px;
+              width:10px;
+              margin:2px;
+              border-radius:50%;
+              background-color: #0183FA;
+            }
+          }
+          .right-check-title-p{
+            margin-left:8px;
+            height:40px;
+            line-height:40px;
+            color:#0183FA;
+            font-size:16px;
+          }
+        }
+        img{
+          cursor: pointer;
+          display: block;
+          width:100px;
+          height:100px;
+          margin-right:20px;
+        }
+      }
+      ::v-deep .el-form-item--medium .el-form-item__label{
+        font-size:16px;
+      }
+      ::v-deep .el-input.is-disabled .el-input__inner{
+        background-color: #f5f5f5;
+        border: 1px solid #E0E0E0;
+        color:#333;
+        cursor: auto;
+      }
+      ::v-deep .el-range-editor.is-disabled{
+        background-color: #f5f5f5;
+        border: 1px solid #E0E0E0;
+        color:#333;
+        cursor: auto;
+      }
+      ::v-deep .el-range-editor.is-disabled input{
+        background-color: #f5f5f5;
+        color:#333;
+        cursor: auto;
+      }
+      ::v-deep .el-textarea.is-disabled .el-textarea__inner{
+        background-color: #f5f5f5;
+        border: 1px solid #E0E0E0;
+        color:#333;
+        cursor: auto;
+      }
+      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner{
+        border-color: #1890ff;
+        background: #1890ff;
+      }
+      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
+        background: #fff;
+      }
+      ::v-deep .snapshotManagement-for-img-box{
+        width:80px;
+        height:80px;
+        border-radius:4px;
+        display: inline-block;
+        overflow: hidden;
+        margin-right:20px;
+        position: relative;
+        .for-img{
+          width:80px;
+          height:80px;
+          display: inline-block;
+          overflow: hidden;
+        }
+        .for-del-button{
+          background: rgba(0,0,0,0.7);
+          width:20px;
+          height:20px;
+          line-height: 20px;
+          text-align: center;
+          color:#fff;
+          border-bottom-left-radius:4px;
+          cursor: pointer;
+          position: absolute;
+          top:0;
+          right:0;
+        }
+      }
+      ::v-deep .up-img-p{
+        height:80px;
+        width:80px;
+        line-height:80px;
+        text-align: center;
+        font-size:16px;
+        border-radius:4px;
+        border:1px dashed #E0E0E0;
+      }
+      .up-img-text{
+        line-height:40px;
+        margin-bottom:20px;
+        font-size:14px;
+        color:#999;
+      }
+    }
+  }
+</style>

src/views/safetyCheck/snapshot/index.vue

@@ -107,7 +107,7 @@
   //import { getDicts } from "@/api/commonality/noPermission";
   //import { systemUserSelect } from "@/api/commonality/permission";
   //import { getInfo } from "@/api/basicsModules/index";
-  import snapshotInfo from "./snapshotInfo.vue";
+  import snapshotInfo from "@/views/safetyCheck/components/snapshotInfo.vue";
   export default {
     name: 'index',
     components: {

src/views/safetyCheck/snapshot/snapshotInfo.vue

@@ -1,273 +0,0 @@
-<template>
-  <div class="page-container snapshot-snapshotInfo">
-    <div class="page-top-title-box">
-      <p class="page-top-title-name-p">{{dataForm.id?'编辑':'新增'}}</p>
-      <p class="page-top-title-out-p" @click="backPage">返回</p>
-      <p class="page-top-title-add-p" @click="submitForm">提交</p>
-    </div>
-    <div class="content-box scrollbar-box">
-      <el-form class="add-form-box" :model="dataForm" ref="form" :rules="rules" label-width="104px">
-        <p class="content-right-title-p">基本信息</p>
-        <div class="content-flex-box">
-          <el-form-item label="实验室" prop="data1">
-            <el-select
-              :disabled="lookInfoType"
-              style="width:300px;"
-              v-model="dataForm.data1"
-              filterable
-              remote
-              clearable
-              reserve-keyword
-              @change="selectChange"
-              @clear="selectClear"
-              placeholder="搜索选择实验室"
-              :remote-method="subjectList">
-              <el-option
-                v-for="item in subOptions"
-                :key="item.subId"
-                :label="item.subName"
-                :value="item.subId">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <div class="right-text-box">
-            <p class="right-text-name-p">分级分类</p>
-            <div class="right-text-title-box">
-              <p>{{dataForm.data2}}</p>
-            </div>
-          </div>
-        </div>
-        <div class="content-flex-box">
-          <div class="right-text-box">
-            <p class="right-text-name-p">学院单位</p>
-            <div class="right-text-title-box">
-              <p>{{dataForm.data3}}</p>
-            </div>
-          </div>
-          <div class="right-text-box">
-            <p class="right-text-name-p">学院单位</p>
-            <div class="right-text-title-box">
-              <p>{{dataForm.data4}}</p>
-            </div>
-          </div>
-        </div>
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="dataForm.name" placeholder="请输入名称" maxLength="20" style="width:300px;"></el-input>
-        </el-form-item>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-  //import { getDicts } from "@/api/commonality/noPermission";
-  //import { systemUserSelect } from "@/api/commonality/permission";
-  //import { getInfo } from "@/api/basicsModules/index";
-  export default {
-    name: 'snapshotInfo',
-    props:{
-      propsData:{},
-    },
-    data(){
-      return{
-        //详情模式
-        lookInfoType:false,
-        //实验室列表
-        subOptions:[],
-        //学院列表
-        deptOptions:[],
-        //楼栋列表
-        buildOptions:[],
-        //分类
-        typeOptions: [],
-        //分级
-        levelOptions: [],
-        //提交表单
-        dataForm:{
-          data1Id:'',
-          data1Name:'',
-        },
-      }
-    },
-    created(){
-      this.initialize();
-    },
-    mounted(){
-
-    },
-    methods:{
-      // 返回按钮
-      backPage(){
-        this.$parent.tableButton(6);
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-
-          }
-        })
-      },
-
-      //懒加载实验室
-      subjectList(e){
-        subjectList({subName:e}).then(response => {
-          this.subOptions = response.data;
-        });
-      },
-      //实验室选择
-      selectChange(e){
-        let self = this;
-        for(let i=0;i<self.subOptions.length;i++){
-          if(self.subOptions[i].subId == e){
-            self.$set(self.addForm,"data1Id",self.subOptions[i].subId);
-            self.$set(self.addForm,"data1Name",self.subOptions[i].subName);
-          }
-        }
-      },
-      //实验室清除
-      selectClear(){
-        this.$set(this.addForm,"data1Id",'');
-        this.$set(this.addForm,"data1Name",'');
-      },
-    },
-  }
-</script>
-
-<style scoped lang="scss">
-  .snapshot-snapshotInfo{
-    .content-box{
-      flex:1;
-      display: flex;
-      padding:20px;
-      .flex-null{
-        flex:1;
-      }
-      .add-form-box{
-        width:976px;
-        border:1px solid #E0E0E0;
-        border-top:none;
-      }
-      .content-flex-box{
-        display: flex;
-      }
-      .content-right-title-p{
-        line-height:40px;
-        background: #F5F5F5;
-        border-top: 1px solid #E0E0E0;
-        border-bottom: 1px solid #E0E0E0;
-        padding-left:23px;
-        margin-bottom:20px;
-      }
-      .right-text-box{
-        display: flex;
-        margin-bottom:20px;
-        .right-text-name-p{
-          width:90px;
-          line-height:40px;
-          text-align: right;
-          margin-right:14px;
-          font-size:16px;
-        }
-        .right-text-title-box{
-          font-size:14px;
-          width:300px;
-          padding:10px 20px;
-          background-color: #f5f5f5;
-          border: 1px solid #E0E0E0;
-          border-radius: 4px 4px 4px 4px;
-          p{
-            line-height:20px;
-            /*单行省略号*/
-            display:block;
-            overflow:hidden;
-            text-overflow:ellipsis;
-            white-space:nowrap;
-          }
-        }
-        .right-text-text-box{
-          font-size:14px;
-          width:300px;
-          padding:10px 20px;
-          background-color: #f5f5f5;
-          border: 1px solid #E0E0E0;
-          border-radius: 4px 4px 4px 4px;
-          p{
-            line-height:20px;
-          }
-        }
-        .right-no-check-box{
-          height:40px;
-          margin-right:20px;
-          overflow: hidden;
-          display: flex;
-          cursor: pointer;
-          div{
-            margin:13px 0 0;
-            width:16px;
-            height:16px;
-            border:1px solid #999;
-            border-radius:50%;
-            p{
-              height:10px;
-              width:10px;
-              margin:2px;
-              border-radius:50%;
-            }
-          }
-          .right-no-check-title-p{
-            margin-left:8px;
-            height:40px;
-            line-height:40px;
-            color:#333;
-            font-size:16px;
-          }
-        }
-        .right-check-box{
-          height:40px;
-          margin-right:20px;
-          overflow: hidden;
-          display: flex;
-          cursor: pointer;
-          div{
-            margin:13px 0 0;
-            width:16px;
-            height:16px;
-            border:1px solid #0183FA;
-            border-radius:50%;
-            p{
-              height:10px;
-              width:10px;
-              margin:2px;
-              border-radius:50%;
-              background-color: #0183FA;
-            }
-          }
-          .right-check-title-p{
-            margin-left:8px;
-            height:40px;
-            line-height:40px;
-            color:#0183FA;
-            font-size:16px;
-          }
-        }
-        img{
-          cursor: pointer;
-          display: block;
-          width:100px;
-          height:100px;
-          margin-right:20px;
-        }
-      }
-      ::v-deep .el-form-item--medium .el-form-item__label{
-        font-size:16px;
-      }
-      ::v-deep .el-input.is-disabled .el-input__inner{
-        background-color: #f5f5f5;
-        border: 1px solid #E0E0E0;
-        color:#333;
-        cursor: auto;
-      }
-    }
-  }
-</style>