zc

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

@@ -0,0 +1,489 @@
+<template>
+  <el-dialog class="inspectionPlan-dialog-box"
+             :title="addDialogTitle" :visible.sync="addDialogType" v-if="addDialogType"
+             @close="addDialogOff" width="1303px" append-to-body>
+    <div class="add-max-box" v-if="addDialogBoxType == 1">
+      <el-form  :model="dialogForm" :rules="rules" label-width="100px">
+        <el-form-item label="是否启用:" prop="data1">
+          <el-switch
+            :disabled="lookInfoType"
+            @click.native="changeIsNeedCaptcha(dialogForm.data1)"
+            class="switch captcha-img"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#0183FA"
+            inactive-color="#999"
+            v-model="dialogForm.data1"
+            active-text="启用"
+            inactive-text="停用"
+          ></el-switch>
+        </el-form-item>
+        <el-form-item label="巡查组名称:" prop="data2">
+          <el-input :disabled="lookInfoType" v-model="dialogForm.data2" placeholder="未选择指标" maxLength="10" style="width:450px;"/>
+        </el-form-item>
+        <el-form-item label="巡查层级:" prop="data3">
+          <el-select :disabled="lookInfoType" v-model="dialogForm.data3" placeholder="请选择检查范围" style="width:450px;">
+            <el-option
+              v-for="item in dialogRangeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-table-box">
+        <div class="dialog-table-title-box">
+          <img src="@/assets/ZDimages/safetyCheck/icon_xyxc_cy.png">
+          <p class="dialog-table-title-p">巡查成员</p>
+          <p v-if="!lookInfoType" class="inquire-button-one dialog-table-title-button" @click="dialogClickType(2)">+ 添加</p>
+        </div>
+        <el-table border :data="dialogTableList">
+          <el-table-column label="序号" align="center"  type="index" width="140"/>
+          <el-table-column label="工号" align="center" prop="deptName" show-overflow-tooltip/>
+          <el-table-column label="姓名" align="center" prop="deptName" show-overflow-tooltip/>
+          <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip/>
+          <el-table-column label="操作" align="center" prop="deptName" width="150" v-if="!lookInfoType">
+            <template slot-scope="scope">
+              <div class="table-button-box">
+                <p class="table-button-null"></p>
+                <p class="table-button-p" @click="delTable(scope.row)">删除</p>
+                <p class="table-button-null"></p>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="inspectionPlan-dialog-user-box" v-show="addDialogBoxType == 2">
+      <div class="left-max-box">
+        <div class="dept-table-title-box">
+          <p>待选人员</p>
+          <p>{{userNumLeft}}/{{userTotalLeft}}</p>
+        </div>
+        <div class="dept-table-max-box">
+          <el-form :model="userQueryParamsLeft" class="form-box" ref="queryForm" :inline="true" label-width="50px">
+            <el-form-item label="" prop="deptId">
+              <el-select v-model="userQueryParamsLeft.deptId" clearable placeholder="选择部门" style="width: 110px">
+                <el-option
+                  v-for="item in deptSelectList"
+                  :key="item.key"
+                  :label="item.label"
+                  :value="item.key">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="" prop="searchValue" class="form-index">
+              <el-input
+                maxLength="30"
+                v-model="userQueryParamsLeft.searchValue"
+                placeholder="搜索姓名/工号"
+                clearable
+                style="width: 240px">
+                <p class="el-icon-search" slot="append" @click="userHandleQueryLeft"></p>
+              </el-input>
+            </el-form-item>
+            <el-form-item style="margin-right:0;">
+              <p class="reset-button-one" @click="userResetQueryLeft" style="width:60px;">重置</p>
+            </el-form-item>
+          </el-form>
+          <el-table  border :data="userTableListLeft" @selection-change="userChangeLeft" :row-key="getRowKeys">
+            <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
+            <el-table-column label="姓名" align="center" prop="deptName" show-overflow-tooltip/>
+            <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="168"/>
+          </el-table>
+          <pagination :page-sizes="[20, 30, 40, 50]"
+                      v-show="userTotalLeft>0"
+                      :total="userTotalLeft"
+                      :page.sync="userTableListLeft.pageNum"
+                      :limit.sync="userTableListLeft.pageSize"
+                      @pagination="userGetListLeft"/>
+        </div>
+      </div>
+      <div class="center-box">
+        <p class="el-icon-arrow-left" @click="userArrowButton(1)"></p>
+        <p class="el-icon-arrow-right" @click="userArrowButton(2)"></p>
+      </div>
+      <div class="right-max-box">
+        <div class="dept-table-title-box">
+          <p>已选成员</p>
+          <p>{{userNumRight}}/{{userTotalRight}}</p>
+        </div>
+        <div class="dept-table-max-box">
+          <el-form :model="userQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
+            <el-form-item label="" prop="deptId">
+              <el-select v-model="userQueryParamsRight.deptId" clearable placeholder="选择部门" style="width: 110px">
+                <el-option
+                  v-for="item in deptSelectList"
+                  :key="item.key"
+                  :label="item.label"
+                  :value="item.key">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="" prop="searchValue" class="form-index">
+              <el-input
+                maxLength="30"
+                v-model="userQueryParamsRight.searchValue"
+                placeholder="搜索姓名/工号"
+                clearable
+                style="width: 240px">
+                <p class="el-icon-search" slot="append" @click="userHandleQueryRight"></p>
+              </el-input>
+            </el-form-item>
+            <el-form-item style="margin-right:0;">
+              <p class="reset-button-one" @click="userResetQueryRight" style="width:60px;">重置</p>
+            </el-form-item>
+          </el-form>
+          <el-table  border :data="userTableListRight" @selection-change="userChangeRight" :row-key="getRowKeys">
+            <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
+            <el-table-column label="姓名" align="center" prop="deptName" show-overflow-tooltip/>
+            <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="168"/>
+          </el-table>
+          <pagination :page-sizes="[20, 30, 40, 50]"
+                      v-show="userTotalRight>0"
+                      :total="userTotalRight"
+                      :page.sync="userTableListRight.pageNum"
+                      :limit.sync="userTableListRight.pageSize"
+                      @pagination="userGetListRight"/>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
+      <p class="dialog-footer-button-null"></p>
+      <p class="dialog-footer-button-info" @click="addDialogOff">{{addDialogBoxType==1?'取消':'返回'}}</p>
+      <p class="dialog-footer-button-primary" v-if="!lookInfoType">确定</p>
+      <p class="dialog-footer-button-null"></p>
+    </div>
+
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'addDialog',
+    data(){
+      return{
+        addDialogTitle:"",
+        addDialogType:true,
+        addDialogBoxType:1,
+        lookInfoType:false,
+        dialogForm:{},
+        dialogRangeOptions:[],
+        //层级
+        deptSelectList:[],
+        //选中巡查人员列表
+        dialogTableList:[{userId:1},{userId:2},{userId:3},{userId:4},{userId:5},{userId:6},{userId:7},{userId:8},{userId:9},{userId:10}],
+
+        //弹窗内容状态
+        userQueryParamsLeft:{
+          deptId:"",
+          searchValue:"",
+        },
+        userTableListLeft:[{}],
+        userTotalLeft:0,
+        userNumLeft:0,
+        userIdsLeft:[],
+        userQueryParamsRight:{
+          deptId:"",
+          searchValue:"",
+        },
+        userTableListRight:[{}],
+        userTotalRight:0,
+        userNumRight:0,
+        userIdsRight:[],
+        // 表单校验
+        rules: {
+          data1: [
+            { required: true, message: "请选择是否启用", trigger: "change" },
+          ],
+          data2: [
+            { required: true, message: "请输入巡查组名称", trigger: "change" },
+            { required: true, message: "请输入巡查组名称", validator: this.spaceJudgment, trigger: "change" },
+          ],
+          data4: [
+            { required: true, message: "请选择巡查层级", trigger: "change" },
+          ],
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //弹窗开启
+      addDialogOpen(type,data){
+        if(type==1){
+          this.$set(this,'addDialogTitle','创建巡查计划');
+        }else{
+          this.$set(this,'addDialogTitle','编辑巡查计划');
+        }
+        this.$set(this,'addDialogType',true);
+      },
+      //弹窗关闭
+      addDialogOff(){
+        if(this.addDialogBoxType == 1){
+          this.$set(this,'addDialogType',false);
+        }else{
+          this.dialogClickType(1);
+        }
+      },
+      //弹窗状态切换
+      dialogClickType(type,item){
+        this.$set(this,'addDialogBoxType',type);
+      },
+      //删除弹窗列表
+      delTable(row){
+        let self = this;
+        for(let i=0;i<self.dialogTableList.length;i++){
+          if(row.userId == self.dialogTableList[i].userId){
+            this.dialogTableList.splice(i,1)
+          }
+        }
+      },
+      /*===================================人员选择相关===================================*/
+      //查询
+      userHandleQueryLeft(){
+        this.$set(this.userQueryParamsLeft,'pageNum',1);
+        this.userGetListLeft();
+      },
+      //重置
+      userResetQueryLeft(){
+        this.$set(this,'userQueryParamsLeft',{ searchValue:"", });
+        this.userHandleQueryLeft();
+      },
+      //查询接口
+      userGetListLeft(){
+
+      },
+      //查询
+      userHandleQueryRight(){
+        this.$set(this.userQueryParamsRight,'pageNum',1);
+        this.userGetListRight();
+      },
+      //重置
+      userResetQueryRight(){
+        this.$set(this,'userQueryParamsRight',{
+          pageNum:1,
+          pageSize:20,
+          classType:"",
+          classified:"",
+          deptId:"",
+          searchValue:"",
+        });
+        this.userHandleQueryRight();
+      },
+      //查询接口
+      userGetListRight(){
+
+      },
+      userArrowButton(type){
+        if(type == 1){
+          if(this.userIdsRight[0]){
+
+          }
+        }else if(type == 2){
+          if(this.userIdsLeft[0]){
+
+          }
+        }
+      },
+      /*===记录勾选数据===
+        需要再el-table 添加  :row-key="getRowKeys"
+        需要在selection 添加 :reserve-selection="true"
+      */
+      getRowKeys(row) {
+        return row.userId
+      },
+      userChangeLeft(selection){
+        this.userNumLeft = selection.length;
+        this.userIdsLeft = selection.map(item => item.userId);
+      },
+      userChangeRight(selection){
+        this.userNumRight = selection.length;
+        this.userIdsRight = selection.map(item => item.userId);
+      },
+      changeIsNeedCaptcha(){
+        if(this.lookInfoType){
+          return
+        }
+        this.dialogForm.data1 = this.dialogForm.data1 == 1?0:1;
+        console.log("row.deviceStatus",row);
+      },
+    }
+  }
+</script>
+
+<style lang="scss">
+  .inspectionPlan-dialog-box{
+    .el-dialog__body{
+      padding:20px 30px 20px 30px;
+    }
+    .add-max-box{
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height:610px;
+      .dialog-table-box{
+        margin-top:20px;
+        display: flex;
+        flex-direction: column;
+        flex:1;
+        overflow: hidden;
+        .dialog-table-title-box{
+          display: flex;
+          border:1px solid #e0e0e0;
+          border-bottom:none;
+          img{
+            width:14px;
+            height:14px;
+            margin:18px 12px 18px 12px;
+          }
+          .dialog-table-title-p{
+            line-height:50px;
+            flex:1;
+            font-size:16px;
+          }
+          .dialog-table-title-button{
+            width:70px;
+            height:30px;
+            line-height:28px;
+            margin:10px 26px;
+          }
+        }
+      }
+    }
+    .inspectionPlan-dialog-user-box{
+      display: flex;
+      overflow: hidden;
+      height:610px;
+      .dept-table-title-box{
+        display: flex;
+        padding:0 20px;
+        background: rgba(1,131,250,0.1);
+        p{
+          flex:1;
+          color:#0183FA;
+          font-size:16px;
+          line-height:40px;
+        }
+        p:nth-child(1){
+          text-align: left;
+        }
+        p:nth-child(2){
+          text-align: right;
+        }
+      }
+      .dept-table-max-box{
+        border: 1px solid #e0e0e0;
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding:20px;
+        .form-index{
+          .el-input__inner{
+            border-right:none;
+            padding-right:0;
+          }
+          .el-input-group__append{
+            background: #fff;
+            cursor: pointer;
+            padding:0 10px;
+          }
+        }
+        input{
+          border: 1px solid #DCDFE6;
+        }
+      }
+      .left-max-box{
+        height:610px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width:588px;
+      }
+      .right-max-box{
+        height:610px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width:588px;
+        flex:1;
+      }
+      .center-box{
+        width:68px;
+        p{
+          display: block;
+          border-radius:50%;
+          width:30px;
+          height:30px;
+          line-height:30px;
+          text-align: center;
+          background: rgba(245,245,245,1);
+          color:rgba(62,62,62,1);
+          cursor: pointer;
+          font-size:16px;
+        }
+        p:nth-child(1){
+          margin:270px 19px 0;
+        }
+        p:nth-child(2){
+          margin:14px 19px 0;
+        }
+        p:hover{
+          color:#fff;
+          background: #0183fa;
+        }
+      }
+    }
+
+    .switch .el-switch__label {
+      position: absolute;
+      display: none;
+      color: #fff !important;
+    }
+    .switch .el-switch__label--right {
+      z-index: 1;
+    }
+    .switch .el-switch__label--right span{
+      margin-left: 10px;
+      margin-top: 8px;
+    }
+    .switch .el-switch__label--left {
+      z-index: 1;
+    }
+    .switch .el-switch__label--left span{
+      margin-top: 8px;
+      margin-left: 30px;
+    }
+    .switch .el-switch__label.is-active {
+      display: block;
+    }
+    .el-switch__core:after{
+      width:20px;
+      height:20px;
+      top:4px;
+      margin-left: 4px;
+    }
+    .el-switch.is-checked .el-switch__core::after{
+      width:20px;
+      height:20px;
+      top:4px;
+      margin-left: -24px;
+
+    }
+    .switch.el-switch .el-switch__core,
+    .el-switch .el-switch__label {
+      width: 70px !important;
+      height:30px !important;
+      border-radius: 50px 50px 50px 50px;
+      margin: 0;
+    }
+  }
+</style>

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

@@ -40,6 +40,7 @@
           <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>
@@ -72,12 +73,15 @@
         <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="250"/>
         <el-table-column label="操作" align="center" prop="deptName" width="200">
-          <div class="table-button-box">
-            <p class="table-button-null"></p>
-            <p class="table-button-p">编辑</p>
-            <p class="table-button-p">删除</p>
-            <p class="table-button-null"></p>
-          </div>
+          <template slot-scope="scope">
+            <div class="table-button-box">
+              <p class="table-button-null"></p>
+              <p class="table-button-p" @click="addDialogOpen(2,scope.row)">详情</p>
+              <p class="table-button-p" @click="addDialogOpen(2,scope.row)">编辑</p>
+              <p class="table-button-p">删除</p>
+              <p class="table-button-null"></p>
+            </div>
+          </template>
         </el-table-column>
       </el-table>
       <pagination :page-sizes="[20, 30, 40, 50]"
@@ -88,12 +92,17 @@
                   @pagination="getList"
       />
     </div>
+    <addDialog ref="addDialog"></addDialog>
   </div>
 </template>
 
 <script>
+  import addDialog from './addDialog.vue'
   export default {
     name: 'index',
+    components: {
+      addDialog,
+    },
     data(){
       return{
         queryParams:{},
@@ -110,6 +119,14 @@
 
     },
     methods:{
+      //弹窗开启
+      addDialogOpen(type,data){
+        if(type==1){
+          this.$refs.addDialog.addDialogOpen(type);
+        }else{
+          this.$refs.addDialog.addDialogOpen(type,data);
+        }
+      },
       // 开关
       switchClick(){
 
@@ -162,3 +179,4 @@
     }
   }
 </style>
+

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

@@ -1,113 +1,121 @@
 <!--巡查管理-->-
 <template>
   <div class="app-container inspectionManagement">
-    <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="inspectionManagement-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: 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>
-        <div class="form-button-max-big-box">
-          <div class="form-button-big-box">
-            <div :class="queryParams.myType==1?'checkDiv':''" style="width:100px;" @click="topRightClickType">
-              <p class="text-p">本人发起</p>
-              <p class="el-icon-check icon-p" v-if="queryParams.myType==1"></p>
+          <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>
+          <div class="form-button-max-big-box">
+            <div class="form-button-big-box">
+              <div :class="queryParams.myType==1?'checkDiv':''" style="width:100px;" @click="topRightClickType">
+                <p class="text-p">本人发起</p>
+                <p class="el-icon-check icon-p" v-if="queryParams.myType==1"></p>
+              </div>
             </div>
           </div>
-        </div>
-      </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">详情</p>
-            <p class="table-button-p">开始检查</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"
-      />
+        </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">详情</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>
   </div>
 </template>
 
 <script>
+  import addPage from './addPage.vue'
   export default {
     name: 'index',
+    components: {
+      addPage,
+    },
     data(){
       return{
+        pageType:1,
         queryParams:{
           pageNum:1,
           pageSize:20,
@@ -118,7 +126,7 @@
           data1:""
         },
         dateRange:[],
-        tableList:[],
+        tableList:[{}],
         total:0,
         optionsOne:[{key:1,label:"校级"},{key:2,label:"院级"}],
         optionsTwo:[{key:1,label:"启用"},{key:0,label:"停用"}],
@@ -131,6 +139,10 @@
 
     },
     methods:{
+      //开始检查
+      goAddPage(type){
+        this.$set(this,'pageType',type);
+      },
       //时间排序方法
       sortChange(val){
         //ascending 上    descending 下    null  无
@@ -185,52 +197,58 @@
     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;
+    .inspectionManagement-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;
-              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>