zc

src/assets/styles/ZDcolorClass.scss

@@ -277,7 +277,7 @@
   .dialog-footer-button-info{
     width:70px;
     height:30px;
-    line-height:29px;
+    line-height:30px;
     text-align: center;
     border:1px solid #E0E0E0;
     background:#E0E0E0;
@@ -295,7 +295,7 @@
   .dialog-footer-button-primary{
     width:70px;
     height:30px;
-    line-height:29px;
+    line-height:30px;
     text-align: center;
     border:1px solid #0045AF;
     color:#fff;
@@ -310,6 +310,24 @@
     color:#fff;
     background:#409eff;
   }
+  .dialog-footer-button-border{
+    width:70px;
+    height:30px;
+    line-height:30px;
+    text-align: center;
+    border:1px solid #0045AF;
+    color:#0045AF;
+    background:#fff;
+    cursor: pointer;
+    font-size:12px;
+    margin:0 10px;
+    border-radius:6px;
+  }
+  .dialog-footer-button-border:hover{
+    border:1px solid #409eff;
+    color:#fff;
+    background:#409eff;
+  }
 }
 //===========================表格内按钮===========================
 .table-button-box{

src/views/safetyCheck/laboratorySelfTest/selfInspectionManagement/infoDialog.vue

@@ -12,6 +12,10 @@
         <p>{{item.name}}</p>
         <p></p>
       </div>
+      <div class="info-dialog-for-title-box" v-if="addFormType == 1 || addFormType == 2" @click="checkTitleButton('add')" :class="infoDialogCheckIndex == 'add'?'info-dialog-for-check':''">
+        <p>{{addFormTitle}}</p>
+        <p></p>
+      </div>
     </div>
     <div class="info-dialog-content-box scrollbar-box">
       <div class="info-dialog-content-info" v-if="infoDialogCheckIndex == 'info'">
@@ -138,6 +142,118 @@
           </div>
         </div>
       </div>
+      <div class="info-dialog-content-type" v-for="(item,index) in infoDialogList" :key="index" v-if="infoDialogCheckIndex == index">
+        <!--已整改-->
+        <div class="has-rectification" v-if="item.rectificationType == 1">
+          <div class="button-box">
+            <p>整改结果</p>
+            <p>{{item.dataA}}</p>
+          </div>
+          <div class="text-box">
+            <p>整改措施</p>
+            <p>{{item.dataB}}</p>
+          </div>
+          <div class="img-box">
+            <p>整改照片</p>
+            <div>
+              <img :src="imgItem.url" @click="lookImg(item.lookImgList,imgIndex)"
+                   v-for="(imgItem,imgIndex) in item.lookImgList" :key="imgIndex">
+            </div>
+          </div>
+          <div class="text-box-two">
+            <div>
+              <p>整改人</p>
+              <p>{{item.dataC}}</p>
+            </div>
+            <div style="margin-left:26px;">
+              <p>整改时间</p>
+              <p>{{item.dataD}}</p>
+            </div>
+          </div>
+        </div>
+        <!--已审核-->
+        <div class="has-inspection" v-if="item.rectificationType == 2">
+          <div class="type-box">
+            <p>审核结果</p>
+            <img v-if="item.dataE == 1" src="@/assets/ZDimages/safetyCheck/icon_zcgl_cg.png">
+            <img v-else src="@/assets/ZDimages/safetyCheck/icon_zcgl_sb.png">
+          </div>
+          <div class="text-box">
+            <p>审核意见</p>
+            <p>{{item.dataF}}</p>
+          </div>
+          <div class="text-box-two">
+            <div>
+              <p>审核人</p>
+              <p>{{item.dataG}}</p>
+            </div>
+            <div style="margin-left:26px;">
+              <p>审核时间</p>
+              <p>{{item.dataH}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="info-dialog-content-add" v-if="infoDialogCheckIndex == 'add'">
+        <el-form  :model="addForm" :rules="rules" label-width="90px">
+          <!--待整改-->
+          <div class="stay-rectification" v-if="addFormType == 1">
+            <el-form-item label="整改结果" prop="dataZ">
+              <el-radio-group v-model="addForm.dataZ">
+                <el-radio :label="0">已整改</el-radio>
+                <el-radio :label="1">暂无法整改</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="原因描述" prop="dataX">
+              <el-input
+                type="textarea"
+                :autosize="{ minRows: 4, maxRows: 4}"
+                placeholder="请输入原因描述"
+                resize="none"
+                maxlength="100"
+                show-word-limit
+                v-model="addForm.dataX">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="上传照片" prop="upImgList">
+              <div class="for-img-box" v-for="(img,imgIndex) in addForm.upImgList" :key="imgIndex">
+                <img class="for-img" :src="img.url"  @click="lookImg(addForm.upImgList,imgIndex)">
+                <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
+              </div>
+              <el-upload
+                style="display: inline-block;overflow: hidden"
+                class="avatar-uploader"
+                :action="uploadImgUrl"
+                :show-file-list="false"
+                :on-success="(res)=>handleAvatarSuccess(res,addForm)"
+                :headers="headers"
+                :before-upload="(res)=>beforeAvatarUpload(res,addForm)">
+                <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
+              </el-upload>
+            </el-form-item>
+            <p style="margin-left:80px;">支持jpg/png/bmp/gif格式，且不超过2M，最多上传5张</p>
+          </div>
+          <!--待审核-->
+          <div class="stay-inspection" v-if="addFormType == 2">
+            <el-form-item label="审核意见" prop="dataY">
+              <el-input
+                type="textarea"
+                :autosize="{ minRows: 4, maxRows: 4}"
+                placeholder="请输入审核意见"
+                resize="none"
+                maxlength="100"
+                show-word-limit
+                v-model="addForm.dataY">
+              </el-input>
+            </el-form-item>
+            <div class="quick-selection-box">
+              <p class="quick-selection-title">快捷输入</p>
+              <p class="quick-selection-for" @click="stayInspectionClick(item)"
+                 v-for="(item,index) in quickSelection" :key="index">{{item}}</p>
+            </div>
+          </div>
+        </el-form>
+      </div>
       <div class="info-dialog-content-img" v-if="infoDialogCheckIndex == 'img'">
         <img :src="imgList[imgIndex].url">
         <p class="el-icon-arrow-left left-button-p" @click="infoLeftButton"></p>
@@ -153,14 +269,28 @@
         <p class="out-button" @click="outLook">返回</p>
       </div>
     </div>
+    <div class="bottom-button-box dialog-footer-box" v-if="infoDialogCheckIndex == 'add'">
+      <p class="dialog-footer-button-null"></p>
+      <p class="dialog-footer-button-info" @click="outDialog">取消</p>
+      <p class="dialog-footer-button-primary" v-if="addFormType==1">提交</p>
+      <p class="dialog-footer-button-border" v-if="addFormType==2">驳回</p>
+      <p class="dialog-footer-button-primary" v-if="addFormType==2">通过</p>
+      <p class="dialog-footer-button-null"></p>
+    </div>
   </el-dialog>
 </template>
 
 <script>
+  import { getToken } from "@/utils/auth";
   export default {
     name: 'infoDialog',
     data(){
       return{
+        upDataName:"",
+        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+        headers: {
+          Authorization: "Bearer " + getToken(),
+        },
         infoDialogTitle:"编辑",
         infoDialogType:true,
         infoDialogCheckIndex:'info',
@@ -192,23 +322,57 @@
         infoDialogList:[
           {
             name:"隐患整改",
-
+            rectificationType:1,
+            dataA:"已整改",
+            dataB:"已更换电源",
+            dataC:"李腾腾",
+            dataD:"2023-03-26  14:00",
+            lookImgList:[
+              {name:"1",url:'https://img2.baidu.com/it/u=3219906533,2982923681&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
+              {name:"2",url:'https://img1.baidu.com/it/u=567782244,1695500002&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500'},
+              {name:"3",url:'https://img1.baidu.com/it/u=2995157981,91041597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'},
+              {name:"4",url:'https://img0.baidu.com/it/u=561734853,2461096286&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'},
+              {name:"5",url:'https://img2.baidu.com/it/u=567357414,4240886412&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
+            ],
           },
           {
             name:"整改复核",
-          },
-          {
-            name:"二次整改",
-          },
-          {
-            name:"二次复核",
+            rectificationType:2,
+            dataE:"1",
+            dataF:"请补充照片",
+            dataG:"李腾腾",
+            dataH:"2023-03-26  14:00",
           },
         ],
         //图片
         imgList:[],
         imgIndex:0,
+        saveIndex:0,
         //文档地址
         iframeSrc:"",
+        // 提交数据
+        addFormType:"2",//1整改 2审核
+        addFormTitle:"二次整改",
+        addForm:{
+          dataZ:1,
+          dataX:"已更换电源",
+          dataY:"",
+          upImgList:[],
+        },
+        rules: {
+          dataZ: [
+            { required: true, message: "请选择隐患等级", trigger: "change" },
+          ],
+          dataX: [
+            { required: true, message: "请选择检查项目", trigger: "change" },
+            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "change" },
+          ],
+          dataY: [
+            { required: true, message: "请输入隐患描述", trigger: "change" },
+          ],
+        },
+        //快速选择
+        quickSelection:['复核驳回','未解决','驳回再整改','请补充材料','请补充描述',],
       }
     },
     created(){
@@ -225,6 +389,10 @@
           this.$set(this,'infoDialogCheckIndex',index);
         }
       },
+      //快速选择内容
+      stayInspectionClick(val){
+        this.$set(this.addForm,'dataY',val);
+      },
       //点击查看文档
       lookDocument(url){
         url = 'http://192.168.1.43/labSystem/statics/bigFile/2023042514/96ca9fcb-bb8e-4e90-a74a-5e94abea3816.pdf'
@@ -235,10 +403,11 @@
       lookImg(list,index){
         this.$set(this,'imgList',list)
         this.$set(this,'imgIndex',index)
+        this.$set(this,'saveIndex',this.infoDialogCheckIndex);
         this.$set(this,'infoDialogCheckIndex','img');
       },
       outLook(){
-        this.$set(this,'infoDialogCheckIndex','info');
+        this.$set(this,'infoDialogCheckIndex',this.saveIndex);
       },
       //图片左右按键
       infoLeftButton(){
@@ -255,6 +424,52 @@
           this.imgIndex++
         }
       },
+      /*==========上传相关==========*/
+      handleAvatarSuccess(res,item) {
+        if(item.upImgList.length>4){
+          this.msgError('最多只可上传5张')
+          return
+        }
+        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
+        //判断文件名中是否有逗号和分号
+        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
+        }else{
+          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
+          return
+        }
+        let obj ={
+          name:this.upDataName,
+          url:res.data.url,
+        };
+        item.upImgList.push(obj);
+        this.$forceUpdate()
+      },
+      beforeAvatarUpload(file,item) {
+        if(item.upImgList.length>4){
+          this.msgError('最多只可上传5张')
+          return false
+        }
+        let type = false;
+        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
+          if(file.size> 2000000){
+            this.msgError('上传图片大小不能超过2M')
+            return false
+          }
+          this.upDataName = file.name;
+          type = true;
+        }else{
+          this.msgError('png/jpeg/gif格式')
+          type = false;
+        }
+        return type;
+      },
+      // 删除图片
+      delImg(imgIndex){
+        this.addForm.upImgList.splice(imgIndex,1);
+      },
+      outDialog(){
+        this.$set(this,'infoDialogType',false);
+      },
     },
   }
 </script>
@@ -264,6 +479,9 @@
     ::v-deep .el-dialog__body{
       padding:0 0 30px 0;
     }
+    ::v-deep .el-form-item__label{
+      font-size:16px;
+    }
     .info-dialog-title-box{
       border-bottom:1px solid #E0E0E0;
       padding:0 30px;
@@ -301,7 +519,7 @@
     }
     .info-dialog-content-box{
       padding:30px 70px 0;
-      height:700px;
+      height:600px;
       .info-dialog-content-info{
         .text-box-box{
           display: flex;
@@ -487,6 +705,222 @@
           }
         }
       }
+      .info-dialog-content-type{
+        .has-rectification{
+          .button-box{
+            display: flex;
+            p:nth-child(1){
+              height:40px;
+              line-height:40px;
+              width:80px;
+              font-size:16px;
+              color:#333;
+            }
+            p:nth-child(2){
+              text-align: center;
+              width:80px;
+              height:30px;
+              margin-top:5px;
+              line-height:30px;
+              font-size:14px;
+              color:#0183FA;
+            }
+          }
+          .text-box{
+            margin-top:20px;
+            display: flex;
+            p:nth-child(1){
+              height:40px;
+              line-height:40px;
+              width:80px;
+              font-size:16px;
+              color:#333;
+            }
+            p:nth-child(2){
+              font-size:14px;
+              line-height:20px;
+              min-height: 70px;
+              padding:15px 20px;
+              flex:1;
+              background-color: #F5F5F5;
+              border-radius:4px;
+            }
+          }
+          .img-box{
+            margin-top:20px;
+            display: flex;
+            p{
+              height:40px;
+              line-height:40px;
+              width:80px;
+              font-size:16px;
+              color:#333;
+            }
+            img{
+              cursor: pointer;
+              width:80px;
+              height:80px;
+              margin-right:10px;
+              border-radius:4px;
+            }
+
+          }
+          .text-box-two{
+            margin-top:20px;
+            display: flex;
+            div{
+              display: flex;
+              p:nth-child(1){
+                height:40px;
+                line-height:40px;
+                width:80px;
+                font-size:16px;
+                color:#333;
+              }
+              p:nth-child(2){
+                width:430px;
+                height:40px;
+                font-size:14px;
+                line-height:40px;
+                padding:0 20px;
+                background-color: #F5F5F5;
+                border-radius:4px;
+              }
+            }
+
+          }
+        }
+        .has-inspection{
+          .type-box{
+            display: flex;
+            p:nth-child(1){
+              height:40px;
+              line-height:40px;
+              width:80px;
+              font-size:16px;
+              color:#333;
+            }
+            img{
+              width:60px;
+              height:52px;
+            }
+          }
+          .text-box{
+            margin-top:20px;
+            display: flex;
+            p:nth-child(1){
+              height:40px;
+              line-height:40px;
+              width:80px;
+              font-size:16px;
+              color:#333;
+            }
+            p:nth-child(2){
+              font-size:14px;
+              line-height:20px;
+              min-height: 70px;
+              padding:15px 20px;
+              flex:1;
+              background-color: #F5F5F5;
+              border-radius:4px;
+            }
+          }
+          .text-box-two{
+            margin-top:20px;
+            display: flex;
+            div{
+              display: flex;
+              p:nth-child(1){
+                height:40px;
+                line-height:40px;
+                width:80px;
+                font-size:16px;
+                color:#333;
+              }
+              p:nth-child(2){
+                width:430px;
+                height:40px;
+                font-size:14px;
+                line-height:40px;
+                padding:0 20px;
+                background-color: #F5F5F5;
+                border-radius:4px;
+              }
+            }
+
+          }
+        }
+      }
+      .info-dialog-content-add{
+        .stay-rectification{
+          .up-img-p{
+            height:80px;
+            width:80px;
+            line-height:80px;
+            text-align: center;
+            font-size:16px;
+            border-radius:4px;
+            border:1px dashed #E0E0E0;
+          }
+          .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;
+            }
+          }
+        }
+        .stay-inspection{
+          .quick-selection-box{
+            display: flex;
+            margin-top:20px;
+            .quick-selection-title{
+              margin-left:90px;
+              height:40px;
+              line-height:40px;
+              font-size:14px;
+              margin-right:23px;
+            }
+            .quick-selection-for{
+              width:100px;
+              height:40px;
+              font-size:14px;
+              text-align: center;
+              line-height:40px;
+              margin-right:10px;
+              color:#333;
+              background-color: #F5F5F5;
+              border-radius:4px;
+              cursor: pointer;
+            }
+            .quick-selection-for:hover{
+              background: rgba(1,131,250,0.2);
+              color:#0183FA ;
+            }
+          }
+        }
+      }
       .info-dialog-content-img{
         img{
           width:1040px;
@@ -570,5 +1004,14 @@
         }
       }
     }
+    .bottom-button-box{
+      height:60px;
+      width:1184px;
+      position: absolute;
+      bottom:0;
+      padding-top:15px;
+      border-top:1px solid #D8D8D8;
+      display: flex;
+    }
   }
 </style>

src/views/safetyCheck/laboratorySelfTest/selfInspectionTask/index.vue

@@ -1,16 +1,124 @@
 <!--自查任务-->
 <template>
   <div class="selfInspectionTask">
-
+    <div class="selfInspectionTask-page" v-if="pageType == 1">
+      <div class="title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
+          <div class="form-button-max-big-box">
+            <div class="form-button-big-box" style="margin-left:10px;">
+              <div :class="queryParams.buttonType==1?'checkDiv':''" @click="topLeftClickType(1)">
+                <p class="text-p">全部</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==1"></p>
+              </div>
+              <div :class="queryParams.buttonType==2?'checkDiv':''" @click="topLeftClickType(2)">
+                <p class="text-p">待检查</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==2"></p>
+              </div>
+              <div :class="queryParams.buttonType==3?'checkDiv':''" @click="topLeftClickType(3)">
+                <p class="text-p">检查中</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==3"></p>
+              </div>
+              <div :class="queryParams.buttonType==4?'checkDiv':''" @click="topLeftClickType(4)">
+                <p class="text-p">已检查</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==4"></p>
+              </div>
+            </div>
+          </div>
+          <el-form-item label="关键字" prop="searchValue">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.searchValue"
+              placeholder="计划标题/创建人"
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="检查周期" prop="dateRange" style="margin-left:10px;" label-width="70px">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>
+          <el-form-item style="float: right;">
+            <el-col :span="1.5">
+              <p class="inquire-button-one"
+                 style="width:130px;"
+                 @click="addDialogOpen(1)"
+              ><i class="el-icon-plus"></i> 创建自查任务</p>
+            </el-col>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="content-box">
+        <el-table  border :data="tableList" ref="multipleTable" @sort-change="sortChange">
+          <el-table-column label="序号" align="center"  type="index" width="60" />
+          <el-table-column label="计划标题" align="center" prop="deptName" show-overflow-tooltip/>
+          <el-table-column label="检查范围" align="center" prop="deptName" show-overflow-tooltip width="120"/>
+          <el-table-column label="检查周期" align="center" prop="deptName" show-overflow-tooltip width="280"/>
+          <el-table-column label="检查状态" align="center" prop="deptName" show-overflow-tooltip width="130"/>
+          <el-table-column label="检查进度" align="center" prop="deptName" show-overflow-tooltip width="220"/>
+          <el-table-column label="创建人" align="center" prop="deptName" show-overflow-tooltip width="130"/>
+          <el-table-column label="创建时间" sortable align="center" prop="deptName" show-overflow-tooltip width="157"/>
+          <el-table-column label="操作" align="center" prop="deptName" width="200">
+            <template slot-scope="scope">
+              <div class="table-button-box">
+                <p class="table-button-p" @click="addDialogOpen(2,scope.row)">编辑</p>
+                <p class="table-button-p">删除</p>
+                <p class="table-button-p" @click="addDialogOpen(3,scope.row)">详情</p>
+                <p class="table-button-p" @click="goPage(2,scope.row)">自查管理</p>
+                <!--<p class="table-button-p">查看附件</p>-->
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
+    </div>
+    <add-dialog ref="addDialog"></add-dialog>
+    <list-page v-if="pageType == 2"></list-page>
   </div>
 </template>
 
 <script>
+  import addDialog from './addDialog.vue'
+  import listPage from './listPage.vue'
   export default {
     name: 'index',
+    components: {
+      addDialog,
+      listPage
+    },
     data(){
       return{
-
+        pageType:1,
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+          buttonType:1,
+          timeType:0,
+          searchValue:"",
+          data1:""
+        },
+        dateRange:[],
+        tableList:[{}],
+        total:0,
       }
     },
     created(){
@@ -19,14 +127,157 @@
     mounted(){
 
     },
-    methods(){
+    methods:{
+      goPage(type){
+        if(this.pageType != type){
+          this.$set(this,'pageType',type);
+        }
+      },
+      //弹窗开启
+      addDialogOpen(type,data){
+        if(type==1){
+          this.$refs.addDialog.addDialogOpen(type);
+        }else if(type==2){
+          this.$refs.addDialog.addDialogOpen(type,data);
+        }else{
+          this.$refs.addDialog.addDialogOpen(type,data);
+        }
+      },
+      //范围选择
+      topLeftClickType(type){
+        if(this.queryParams.buttonType != type){
+          this.$set(this.queryParams,'buttonType',type);
+          this.getList();
+        }
+      },
+      //时间排序方法
+      sortChange(val){
+        //ascending 上    descending 下    null  无
+        console.log('val',val.order)
+        this.$set(this.queryParams,'timeType',val.order=='ascending'?1:(val.order=='descending'?2:''));
+      },
+      //获取数据列表
+      getList(){
+        // this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        // this.queryParamsData.type = 'RFID_RECOGNIZER';
+        // listHardware(this.queryParamsData).then(response => {
+        //   this.total = response.total;
+        //   this.tableList = response.rows;
+        // });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.$set(this.queryParams,'pageNum',1);
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'dateRange',[]);
+        this.$set(this,'queryParams',{
+          pageNum:1,
+          pageSize:20,
+          buttonType:1,
+          timeType:0,
+          searchValue:"",
+          data1:""
+        });
+        this.handleQuery();
+      },
+      /*==========上传相关==========*/
 
-    },
+      handleAvatarSuccess(res) {
+        if(this.dialogUpList.length>9){
+          this.msgError('已到达上传数量上限')
+          return
+        }
+        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
+        //判断文件名中是否有逗号和分号
+        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
+        }else{
+          this.$message.info('文件名里包含逗号或分号，请修改后重新上传！')
+          return
+        }
+        let obj ={
+          name:this.upDataName,
+          url:res.data.url,
+        };
+        this.dialogUpList.push(obj);
+        this.$forceUpdate()
+      },
+      beforeAvatarUpload(file) {
+        console.log('file',file)
+        let type = false;
+        if (file.type == 'application/pdf' || file.type == 'application/msword' || file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'|| file.type == 'application/vnd.ms-excel' || file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+          this.upDataName = file.name;
+          type = true;
+        }else{
+          this.$message.error('只能上传png/jpeg/gif/doc/docx格式');
+          type = false;
+        }
+        return type;
+      },
+    }
   }
 </script>
 
 <style scoped lang="scss">
   .selfInspectionTask{
-
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    overflow: hidden;
+    .selfInspectionTask-page{
+      flex: 1;
+      display: flex !important;
+      flex-direction: column;
+      overflow: hidden;
+      .title-box{
+        padding-top:20px;
+        border-bottom:1px solid #dedede;
+        .form-button-max-big-box{
+          display: inline-block;
+          .form-button-big-box{
+            display: flex;
+            div{
+              position: relative;
+              height:40px;
+              width:80px;
+              line-height: 40px;
+              text-align: center;
+              color:#999;
+              font-size:14px;
+              border:1px solid #999;
+              border-radius:4px;
+              margin-left:10px;
+              font-weight:500;
+              cursor: pointer;
+              .icon-p{
+                width:15px;
+                height:15px;
+                line-height:15px;
+                text-align: center;
+                position: absolute;
+                right:0;
+                bottom:0;
+                color:#fff;
+                background: #0183fa;
+                border-top-left-radius:4px;
+              }
+            }
+            .checkDiv{
+              color:#0183FA;
+              border:1px solid #0183FA;
+            }
+          }
+        }
+      }
+      .content-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding:20px;
+        overflow: hidden;
+      }
+    }
   }
 </style>

src/views/safetyCheck/laboratorySelfTest/selfInspectionTask/listPage.vue

@@ -0,0 +1,253 @@
+<!--自查子项管理-->
+<template>
+  <div class="selfInspectionManagement">
+    <div class="selfInspectionManagement-page" v-if="pageType == 1">
+      <div class="title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
+          <div class="form-button-max-big-box">
+            <div class="form-button-big-box" style="margin-left:10px;">
+              <div :class="queryParams.buttonType==1?'checkDiv':''" @click="topLeftClickType(1)">
+                <p class="text-p">全部</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==1"></p>
+              </div>
+              <div :class="queryParams.buttonType==2?'checkDiv':''" @click="topLeftClickType(2)">
+                <p class="text-p">待检查</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==2"></p>
+              </div>
+              <div :class="queryParams.buttonType==3?'checkDiv':''" @click="topLeftClickType(3)">
+                <p class="text-p">检查中</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==3"></p>
+              </div>
+              <div :class="queryParams.buttonType==4?'checkDiv':''" @click="topLeftClickType(4)">
+                <p class="text-p">已检查</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==4"></p>
+              </div>
+            </div>
+          </div>
+          <el-form-item label="关键字" prop="searchValue">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.searchValue"
+              placeholder="计划标题/实验室/房间号/检查者"
+              clearable
+              style="width: 250px"
+            />
+          </el-form-item>
+          <el-form-item label="学院" prop="data1" label-width="50px">
+            <el-select v-model="queryParams.data1" clearable placeholder="请选择学院" style="width: 150px">
+              <el-option
+                v-for="item in optionsOne"
+                :key="item.key"
+                :label="item.label"
+                :value="item.key">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="检查时间" prop="dateRange" style="margin-left:10px;" label-width="70px">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>
+          <el-form-item style="float: right">
+            <p class="add-button-one-90" style="width:80px;" @click="outButton">返回</p>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="content-box">
+        <el-table  border :data="tableList" ref="multipleTable" @sort-change="sortChange">
+          <el-table-column label="序号" align="center"  type="index" width="60" />
+          <el-table-column label="计划标题" align="center" prop="hardwareNum" show-overflow-tooltip width="250"/>
+          <el-table-column label="实验室" align="center" prop="deptName" show-overflow-tooltip width="220"/>
+          <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip width="150"/>
+          <el-table-column label="检查状态" align="center" prop="deptName" show-overflow-tooltip width="90"/>
+          <el-table-column label="检查者" align="center" prop="deptName" show-overflow-tooltip width="100"/>
+          <el-table-column label="检查结果" align="center" prop="deptName" show-overflow-tooltip width="80"/>
+          <el-table-column label="隐患数" align="center" prop="deptName" show-overflow-tooltip width="80"/>
+          <el-table-column label="整改进度" align="center" prop="deptName" show-overflow-tooltip width="200"/>
+          <el-table-column label="任务周期" align="center" prop="deptName" show-overflow-tooltip width="270"/>
+          <el-table-column label="检查时间" sortable align="center" prop="deptName" show-overflow-tooltip width="157"/>
+          <el-table-column label="操作" align="center" prop="deptName" width="230">
+            <div class="table-button-box">
+              <p class="table-button-p" @click="goAddPage(3)">详情</p>
+              <p class="table-button-p" @click="goAddPage(2)">开始检查</p>
+              <!--<p class="table-button-p">编辑</p>-->
+              <!--<p class="table-button-p">整改报告</p>-->
+              <!--<p class="table-button-p">查看附件</p>-->
+            </div>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
+    </div>
+    <addPage v-if="pageType==2"></addPage>
+    <infoPage v-if="pageType==3"></infoPage>
+  </div>
+</template>
+
+<script>
+  import addPage from './addPage.vue'
+  import infoPage from './infoPage.vue'
+  export default {
+    name: 'index',
+    components: {
+      addPage,
+      infoPage
+    },
+    data(){
+      return{
+        pageType:3,
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+          buttonType:1,
+          myType:0,
+          timeType:0,
+          searchValue:"",
+          data1:""
+        },
+        dateRange:[],
+        tableList:[{}],
+        total:0,
+        optionsOne:[{key:1,label:"校级"},{key:2,label:"院级"}],
+        optionsTwo:[{key:1,label:"启用"},{key:0,label:"停用"}],
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //返回按钮
+      outButton(){
+        this.$parent.goPage(1);
+      },
+      //开始检查
+      goAddPage(type){
+        this.$set(this,'pageType',type);
+      },
+      //时间排序方法
+      sortChange(val){
+        //ascending 上    descending 下    null  无
+        console.log('val',val.order)
+        this.$set(this.queryParams,'timeType',val.order=='ascending'?1:(val.order=='descending'?2:''));
+      },
+      //范围选择
+      topLeftClickType(type){
+        if(this.queryParams.buttonType != type){
+          this.$set(this.queryParams,'buttonType',type);
+          this.getList();
+        }
+      },
+      //获取数据列表
+      getList(){
+        // this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        // this.queryParamsData.type = 'RFID_RECOGNIZER';
+        // listHardware(this.queryParamsData).then(response => {
+        //   this.total = response.total;
+        //   this.tableList = response.rows;
+        // });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.$set(this.queryParams,'pageNum',1);
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'dateRange',[]);
+        this.$set(this,'queryParams',{
+          pageNum:1,
+          pageSize:20,
+          buttonType:1,
+          timeType:0,
+          myType:0,
+          searchValue:"",
+          data1:""
+        });
+        this.handleQuery();
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .selfInspectionManagement{
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    overflow: hidden;
+    .selfInspectionManagement-page{
+      flex: 1;
+      display: flex !important;
+      flex-direction: column;
+      overflow: hidden;
+      .title-box{
+        padding-top:20px;
+        border-bottom:1px solid #dedede;
+        .form-button-max-big-box{
+          display: inline-block;
+          .form-button-big-box{
+            display: flex;
+            div{
+              position: relative;
+              height:40px;
+              width:80px;
+              line-height: 40px;
+              text-align: center;
+              color:#999;
+              font-size:14px;
+              border:1px solid #999;
+              border-radius:4px;
+              margin-left:10px;
+              font-weight:500;
+              cursor: pointer;
+              .icon-p{
+                width:15px;
+                height:15px;
+                line-height:15px;
+                text-align: center;
+                position: absolute;
+                right:0;
+                bottom:0;
+                color:#fff;
+                background: #0183fa;
+                border-top-left-radius:4px;
+              }
+            }
+            .checkDiv{
+              color:#0183FA;
+              border:1px solid #0183FA;
+            }
+          }
+        }
+      }
+      .content-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding:20px;
+        overflow: hidden;
+      }
+    }
+  }
+</style>

src/views/safetyCheck/schoolInspection/inspectionManagement/index.vue

@@ -85,7 +85,7 @@
           <el-table-column label="检查时间" sortable align="center" prop="deptName" show-overflow-tooltip width="157"/>
           <el-table-column label="操作" align="center" prop="deptName" width="230">
             <div class="table-button-box">
-              <p class="table-button-p">详情</p>
+              <p class="table-button-p" @click="goAddPage(3)">详情</p>
               <p class="table-button-p" @click="goAddPage(2)">开始检查</p>
               <!--<p class="table-button-p">编辑</p>-->
               <!--<p class="table-button-p">整改报告</p>-->
@@ -103,15 +103,18 @@
       </div>
     </div>
     <addPage v-if="pageType==2"></addPage>
+    <infoPage v-if="pageType==3"></infoPage>
   </div>
 </template>
 
 <script>
   import addPage from './addPage.vue'
+  import infoPage from './infoPage.vue'
   export default {
     name: 'index',
     components: {
       addPage,
+      infoPage
     },
     data(){
       return{

src/views/safetyCheck/schoolInspection/inspectionPlan/addDialog.vue

@@ -613,9 +613,13 @@
       //弹窗开启
       addDialogOpen(type,data){
         if(type==1){
+          this.$set(this,'lookInfoType',false);
           this.$set(this,'addDialogTitle','创建巡查计划');
-        }else{
+        }else if(type==2){
+          this.$set(this,'lookInfoType',false);
           this.$set(this,'addDialogTitle','编辑巡查计划');
+        }else{
+          this.$set(this,'lookInfoType',true);
         }
         this.$set(this,'addDialogType',true);
       },

src/views/safetyCheck/schoolInspection/inspectionPlan/index.vue

@@ -1,106 +1,113 @@
 <!--巡查计划-->
 <template>
   <div class="app-container inspectionPlan">
-    <div class="title-box">
-      <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
-        <div class="form-button-max-big-box">
-          <div class="form-button-big-box" style="margin-left:10px;">
-            <div :class="queryParams.buttonType==1?'checkDiv':''" @click="topLeftClickType(1)">
-              <p class="text-p">全部</p>
-              <p class="el-icon-check icon-p" v-if="queryParams.buttonType==1"></p>
-            </div>
-            <div :class="queryParams.buttonType==2?'checkDiv':''" @click="topLeftClickType(2)">
-              <p class="text-p">待检查</p>
-              <p class="el-icon-check icon-p" v-if="queryParams.buttonType==2"></p>
-            </div>
-            <div :class="queryParams.buttonType==3?'checkDiv':''" @click="topLeftClickType(3)">
-              <p class="text-p">检查中</p>
-              <p class="el-icon-check icon-p" v-if="queryParams.buttonType==3"></p>
-            </div>
-            <div :class="queryParams.buttonType==4?'checkDiv':''" @click="topLeftClickType(4)">
-              <p class="text-p">已检查</p>
-              <p class="el-icon-check icon-p" v-if="queryParams.buttonType==4"></p>
+    <div class="inspectionPlan-page" v-if="pageType == 1">
+      <div class="title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
+          <div class="form-button-max-big-box">
+            <div class="form-button-big-box" style="margin-left:10px;">
+              <div :class="queryParams.buttonType==1?'checkDiv':''" @click="topLeftClickType(1)">
+                <p class="text-p">全部</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==1"></p>
+              </div>
+              <div :class="queryParams.buttonType==2?'checkDiv':''" @click="topLeftClickType(2)">
+                <p class="text-p">待检查</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==2"></p>
+              </div>
+              <div :class="queryParams.buttonType==3?'checkDiv':''" @click="topLeftClickType(3)">
+                <p class="text-p">检查中</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==3"></p>
+              </div>
+              <div :class="queryParams.buttonType==4?'checkDiv':''" @click="topLeftClickType(4)">
+                <p class="text-p">已检查</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==4"></p>
+              </div>
             </div>
           </div>
-        </div>
-        <el-form-item label="关键字" prop="searchValue">
-          <el-input
-            maxLength="30"
-            v-model="queryParams.searchValue"
-            placeholder="计划标题/创建人"
-            clearable
-            style="width: 200px"
-          />
-        </el-form-item>
-        <el-form-item label="检查周期" prop="dateRange" style="margin-left:10px;" label-width="70px">
-          <el-date-picker
-            :clearable="false"
-            v-model="dateRange"
-            size="small"
-            style="width: 240px"
-            value-format="yyyy-MM-dd"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
-          <p class="reset-button-one" @click="resetQuery">重置</p>
-        </el-form-item>
-        <el-form-item style="float: right;">
-          <el-col :span="1.5">
-            <p class="inquire-button-one"
-               style="width:130px;"
-               @click="addDialogOpen(1)"
-            ><i class="el-icon-plus"></i>创建巡查计划</p>
-          </el-col>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="content-box">
-      <el-table  border :data="tableList" ref="multipleTable" @sort-change="sortChange">
-        <el-table-column label="序号" align="center"  type="index" width="60" />
-        <el-table-column label="计划标题" align="center" prop="deptName" show-overflow-tooltip/>
-        <el-table-column label="检查范围" align="center" prop="deptName" show-overflow-tooltip width="120"/>
-        <el-table-column label="检查周期" align="center" prop="deptName" show-overflow-tooltip width="280"/>
-        <el-table-column label="检查状态" align="center" prop="deptName" show-overflow-tooltip width="130"/>
-        <el-table-column label="检查进度" align="center" prop="deptName" show-overflow-tooltip width="220"/>
-        <el-table-column label="创建人" align="center" prop="deptName" show-overflow-tooltip width="130"/>
-        <el-table-column label="创建时间" sortable align="center" prop="deptName" show-overflow-tooltip width="157"/>
-        <el-table-column label="操作" align="center" prop="deptName" width="200">
-          <template slot-scope="scope">
-            <div class="table-button-box">
-              <p class="table-button-p" @click="addDialogOpen(2,scope.row)">编辑</p>
-              <p class="table-button-p">删除</p>
-              <!--<p class="table-button-p">巡查管理</p>-->
-              <!--<p class="table-button-p">查看附件</p>-->
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination :page-sizes="[20, 30, 40, 50]"
-                  v-show="total>0"
-                  :total="total"
-                  :page.sync="queryParams.pageNum"
-                  :limit.sync="queryParams.pageSize"
-                  @pagination="getList"
-      />
+          <el-form-item label="关键字" prop="searchValue">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.searchValue"
+              placeholder="计划标题/创建人"
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="检查周期" prop="dateRange" style="margin-left:10px;" label-width="70px">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>
+          <el-form-item style="float: right;">
+            <el-col :span="1.5">
+              <p class="inquire-button-one"
+                 style="width:130px;"
+                 @click="addDialogOpen(1)"
+              ><i class="el-icon-plus"></i> 创建巡查计划</p>
+            </el-col>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="content-box">
+        <el-table  border :data="tableList" ref="multipleTable" @sort-change="sortChange">
+          <el-table-column label="序号" align="center"  type="index" width="60" />
+          <el-table-column label="计划标题" align="center" prop="deptName" show-overflow-tooltip/>
+          <el-table-column label="检查范围" align="center" prop="deptName" show-overflow-tooltip width="120"/>
+          <el-table-column label="检查周期" align="center" prop="deptName" show-overflow-tooltip width="280"/>
+          <el-table-column label="检查状态" align="center" prop="deptName" show-overflow-tooltip width="130"/>
+          <el-table-column label="检查进度" align="center" prop="deptName" show-overflow-tooltip width="220"/>
+          <el-table-column label="创建人" align="center" prop="deptName" show-overflow-tooltip width="130"/>
+          <el-table-column label="创建时间" sortable align="center" prop="deptName" show-overflow-tooltip width="157"/>
+          <el-table-column label="操作" align="center" prop="deptName" width="200">
+            <template slot-scope="scope">
+              <div class="table-button-box">
+                <p class="table-button-p" @click="addDialogOpen(2,scope.row)">编辑</p>
+                <p class="table-button-p">删除</p>
+                <p class="table-button-p" @click="addDialogOpen(3,scope.row)">详情</p>
+                <p class="table-button-p" @click="goPage(2,scope.row)">巡查管理</p>
+                <!--<p class="table-button-p">查看附件</p>-->
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
     </div>
     <add-dialog ref="addDialog"></add-dialog>
+    <list-page v-if="pageType == 2"></list-page>
   </div>
 </template>
 
 <script>
   import addDialog from './addDialog.vue'
+  import listPage from './listPage.vue'
   export default {
     name: 'index',
     components: {
       addDialog,
+      listPage
     },
     data(){
       return{
+        pageType:2,
         queryParams:{
           pageNum:1,
           pageSize:20,
@@ -110,7 +117,7 @@
           data1:""
         },
         dateRange:[],
-        tableList:[],
+        tableList:[{}],
         total:0,
       }
     },
@@ -121,10 +128,18 @@
 
     },
     methods:{
+      //切换页面
+      goPage(type){
+        if(this.pageType != type){
+          this.$set(this,'pageType',type);
+        }
+      },
       //弹窗开启
       addDialogOpen(type,data){
         if(type==1){
           this.$refs.addDialog.addDialogOpen(type);
+        }else if(type==2){
+          this.$refs.addDialog.addDialogOpen(type,data);
         }else{
           this.$refs.addDialog.addDialogOpen(type,data);
         }
@@ -212,52 +227,54 @@
     display: flex !important;
     flex-direction: column;
     overflow: hidden;
-    .title-box{
-      padding-top:20px;
-      border-bottom:1px solid #dedede;
-      .form-button-max-big-box{
-        display: inline-block;
-        .form-button-big-box{
-          display: flex;
-          div{
-            position: relative;
-            height:40px;
-            width:80px;
-            line-height: 40px;
-            text-align: center;
-            color:#999;
-            font-size:14px;
-            border:1px solid #999;
-            border-radius:4px;
-            margin-left:10px;
-            font-weight:500;
-            cursor: pointer;
-            .icon-p{
-              width:15px;
-              height:15px;
-              line-height:15px;
+    .inspectionPlan-page{
+      .title-box{
+        padding-top:20px;
+        border-bottom:1px solid #dedede;
+        .form-button-max-big-box{
+          display: inline-block;
+          .form-button-big-box{
+            display: flex;
+            div{
+              position: relative;
+              height:40px;
+              width:80px;
+              line-height: 40px;
               text-align: center;
-              position: absolute;
-              right:0;
-              bottom:0;
-              color:#fff;
-              background: #0183fa;
-              border-top-left-radius:4px;
+              color:#999;
+              font-size:14px;
+              border:1px solid #999;
+              border-radius:4px;
+              margin-left:10px;
+              font-weight:500;
+              cursor: pointer;
+              .icon-p{
+                width:15px;
+                height:15px;
+                line-height:15px;
+                text-align: center;
+                position: absolute;
+                right:0;
+                bottom:0;
+                color:#fff;
+                background: #0183fa;
+                border-top-left-radius:4px;
+              }
+            }
+            .checkDiv{
+              color:#0183FA;
+              border:1px solid #0183FA;
             }
-          }
-          .checkDiv{
-            color:#0183FA;
-            border:1px solid #0183FA;
           }
         }
       }
-    }
-    .content-box{
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      padding:20px;
-      overflow: hidden;
+      .content-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding:20px;
+        overflow: hidden;
+      }
     }
   }
 </style>

src/views/safetyCheck/schoolInspection/inspectionPlan/listPage.vue

@@ -0,0 +1,253 @@
+<!--巡查子项管理-->
+<template>
+  <div class="selfInspectionManagement">
+    <div class="selfInspectionManagement-page" v-if="pageType == 1">
+      <div class="title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
+          <div class="form-button-max-big-box">
+            <div class="form-button-big-box" style="margin-left:10px;">
+              <div :class="queryParams.buttonType==1?'checkDiv':''" @click="topLeftClickType(1)">
+                <p class="text-p">全部</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==1"></p>
+              </div>
+              <div :class="queryParams.buttonType==2?'checkDiv':''" @click="topLeftClickType(2)">
+                <p class="text-p">待检查</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==2"></p>
+              </div>
+              <div :class="queryParams.buttonType==3?'checkDiv':''" @click="topLeftClickType(3)">
+                <p class="text-p">检查中</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==3"></p>
+              </div>
+              <div :class="queryParams.buttonType==4?'checkDiv':''" @click="topLeftClickType(4)">
+                <p class="text-p">已检查</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.buttonType==4"></p>
+              </div>
+            </div>
+          </div>
+          <el-form-item label="关键字" prop="searchValue">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.searchValue"
+              placeholder="计划标题/实验室/房间号/检查者"
+              clearable
+              style="width: 250px"
+            />
+          </el-form-item>
+          <el-form-item label="学院" prop="data1" label-width="50px">
+            <el-select v-model="queryParams.data1" clearable placeholder="请选择学院" style="width: 150px">
+              <el-option
+                v-for="item in optionsOne"
+                :key="item.key"
+                :label="item.label"
+                :value="item.key">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="检查时间" prop="dateRange" style="margin-left:10px;" label-width="70px">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>
+          <el-form-item style="float: right">
+            <p class="add-button-one-90" style="width:80px;" @click="outButton">返回</p>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="content-box">
+        <el-table  border :data="tableList" ref="multipleTable" @sort-change="sortChange">
+          <el-table-column label="序号" align="center"  type="index" width="60" />
+          <el-table-column label="计划标题" align="center" prop="hardwareNum" show-overflow-tooltip width="250"/>
+          <el-table-column label="实验室" align="center" prop="deptName" show-overflow-tooltip width="220"/>
+          <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip width="150"/>
+          <el-table-column label="检查状态" align="center" prop="deptName" show-overflow-tooltip width="90"/>
+          <el-table-column label="检查者" align="center" prop="deptName" show-overflow-tooltip width="100"/>
+          <el-table-column label="检查结果" align="center" prop="deptName" show-overflow-tooltip width="80"/>
+          <el-table-column label="隐患数" align="center" prop="deptName" show-overflow-tooltip width="80"/>
+          <el-table-column label="整改进度" align="center" prop="deptName" show-overflow-tooltip width="200"/>
+          <el-table-column label="任务周期" align="center" prop="deptName" show-overflow-tooltip width="270"/>
+          <el-table-column label="检查时间" sortable align="center" prop="deptName" show-overflow-tooltip width="157"/>
+          <el-table-column label="操作" align="center" prop="deptName" width="230">
+            <div class="table-button-box">
+              <p class="table-button-p" @click="goAddPage(3)">详情</p>
+              <p class="table-button-p" @click="goAddPage(2)">开始检查</p>
+              <!--<p class="table-button-p">编辑</p>-->
+              <!--<p class="table-button-p">整改报告</p>-->
+              <!--<p class="table-button-p">查看附件</p>-->
+            </div>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
+    </div>
+    <addPage v-if="pageType==2"></addPage>
+    <infoPage v-if="pageType==3"></infoPage>
+  </div>
+</template>
+
+<script>
+  import addPage from './addPage.vue'
+  import infoPage from './infoPage.vue'
+  export default {
+    name: 'index',
+    components: {
+      addPage,
+      infoPage
+    },
+    data(){
+      return{
+        pageType:3,
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+          buttonType:1,
+          myType:0,
+          timeType:0,
+          searchValue:"",
+          data1:""
+        },
+        dateRange:[],
+        tableList:[{}],
+        total:0,
+        optionsOne:[{key:1,label:"校级"},{key:2,label:"院级"}],
+        optionsTwo:[{key:1,label:"启用"},{key:0,label:"停用"}],
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //返回按钮
+      outButton(){
+        this.$parent.goPage(1);
+      },
+      //开始检查
+      goAddPage(type){
+        this.$set(this,'pageType',type);
+      },
+      //时间排序方法
+      sortChange(val){
+        //ascending 上    descending 下    null  无
+        console.log('val',val.order)
+        this.$set(this.queryParams,'timeType',val.order=='ascending'?1:(val.order=='descending'?2:''));
+      },
+      //范围选择
+      topLeftClickType(type){
+        if(this.queryParams.buttonType != type){
+          this.$set(this.queryParams,'buttonType',type);
+          this.getList();
+        }
+      },
+      //获取数据列表
+      getList(){
+        // this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        // this.queryParamsData.type = 'RFID_RECOGNIZER';
+        // listHardware(this.queryParamsData).then(response => {
+        //   this.total = response.total;
+        //   this.tableList = response.rows;
+        // });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.$set(this.queryParams,'pageNum',1);
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'dateRange',[]);
+        this.$set(this,'queryParams',{
+          pageNum:1,
+          pageSize:20,
+          buttonType:1,
+          timeType:0,
+          myType:0,
+          searchValue:"",
+          data1:""
+        });
+        this.handleQuery();
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .selfInspectionManagement{
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    overflow: hidden;
+    .selfInspectionManagement-page{
+      flex: 1;
+      display: flex !important;
+      flex-direction: column;
+      overflow: hidden;
+      .title-box{
+        padding-top:20px;
+        border-bottom:1px solid #dedede;
+        .form-button-max-big-box{
+          display: inline-block;
+          .form-button-big-box{
+            display: flex;
+            div{
+              position: relative;
+              height:40px;
+              width:80px;
+              line-height: 40px;
+              text-align: center;
+              color:#999;
+              font-size:14px;
+              border:1px solid #999;
+              border-radius:4px;
+              margin-left:10px;
+              font-weight:500;
+              cursor: pointer;
+              .icon-p{
+                width:15px;
+                height:15px;
+                line-height:15px;
+                text-align: center;
+                position: absolute;
+                right:0;
+                bottom:0;
+                color:#fff;
+                background: #0183fa;
+                border-top-left-radius:4px;
+              }
+            }
+            .checkDiv{
+              color:#0183FA;
+              border:1px solid #0183FA;
+            }
+          }
+        }
+      }
+      .content-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding:20px;
+        overflow: hidden;
+      }
+    }
+  }
+</style>