FE-V2-PC/src/views/safetyCheck/schoolInspection/inspectionPlan/addDialog.vue

<template>
  <el-dialog class="inspectionPlan-dialog-box"
             v-loading="loading"
             :title="addDialogTitle" :visible.sync="addDialogType" v-if="addDialogType"
             @close="addDialogAllOff" width="1303px" append-to-body>
    <div class="inspectionPlan-dialog-add-box" v-show="addDialogBoxType==1">
      <div class="left-max-box" v-if="!lookInfoType">
        <div class="left-max-title-box">
          <img src="@/assets/ZDimages/safetyCheck/icon_jhbt.png">
          <p>计划标题快选</p>
        </div>
        <div class="left-max-list-box scrollbar-box">
          <div v-for="(item,index) in quickSelectionList" :key="index" @click="checkTitle(item)">
            <p class="left-max-list-for-p">{{item.title}}</p>
            <p v-if="item.type" class="el-icon-error left-max-list-for-icon" @click="delTitleObj(item)"></p>
          </div>
        </div>
      </div>
      <div class="right-max-box scrollbar-box">
        <el-form ref="addDialogForm" :model="dialogForm" :rules="rules" label-width="140px">
          <el-form-item label="计划标题:" prop="title">
            <el-input :disabled="lookInfoType" v-model="dialogForm.title" placeholder="请输入计划标题" maxLength="30" style="width:450px;"/>
          </el-form-item>
          <el-form-item label="检查类型:">
            <p style="width:450px;background:#f5f5f5;border-radius:4px;padding:0 15px;">校院巡查</p>
          </el-form-item>
          <el-form-item label="计划周期:" prop="dateRange">
            <div class="date-range-box">
              <div class="date-range-left-box">
                <el-date-picker
                  :disabled="lookInfoType"
                  :clearable="false"
                  v-model="dialogForm.dateRange"
                  style="width:450px;"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  :picker-options="pickerOptions"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
              <div class="date-range-right-box" v-if="!lookInfoType">
                <p @click="checkTime(1)">本月</p>
                <p @click="checkTime(2)">本季度</p>
                <p @click="checkTime(3)">全年</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="检查范围:" prop="checkRange">
            <div class="dialog-range-max-box">
              <div class="dialog-range-select-box">
                <el-select :disabled="lookInfoType" @change="rangeChange"
                           v-model="dialogForm.checkRange" placeholder="请选择检查范围" style="width:450px;">
                  <el-option
                    v-for="item in dialogRangeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="dialog-range-text-box">
                <p class="inquire-button-one button-p" :style="lookInfoType?'background:#0183FA;border:1px solid #0183FA;':''" v-if="dialogForm.checkRange == 2" @click="dialogClickType(2)">{{lookInfoType?'查看':'选择学院'}}</p>
                <p class="inquire-button-one button-p" :style="lookInfoType?'background:#0183FA;border:1px solid #0183FA;':''" v-if="dialogForm.checkRange == 3" @click="dialogClickType(3)">{{lookInfoType?'查看':'选择实验室'}}</p>
                <p class="text-p" v-if="dialogForm.checkRange ==1 && dialogForm.schoolSubCheckNum>0">已选择{{dialogForm.schoolSubCheckNum}}间实验室</p>
                <p class="text-p" v-if="dialogForm.checkRange == 2 && dialogForm.collegeNum>0">已选择{{dialogForm.collegeNum}}个学院，共{{dialogForm.collegeSubNum}}间实验室</p>
                <p class="text-p" v-if="dialogForm.checkRange ==3 && dialogForm.subCheckNum>0">已选择{{dialogForm.subCheckNum}}间实验室</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="检查要求:" prop="checkDemand">
            <el-input
              :disabled="lookInfoType"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4}"
              :placeholder="lookInfoType?'未输入':'请输入检查要求：'"
              v-model="dialogForm.checkDemand"
              maxlength="100"
              resize="none"
              show-word-limit
              :style="!lookInfoType?'width:450px;':'width:1040px;'">
            </el-input>
          </el-form-item>
          <el-form-item label="材料附件:">
            <div class="dialog-material-max-box">
              <div class="dialog-material-button-box" v-if="!lookInfoType&&dialogForm.uploadDtoList.length<10">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadImgUrl"
                  :show-file-list="false"
                  :on-success="(res)=>handleAvatarSuccess(res)"
                  :headers="headers"
                  :before-upload="beforeAvatarUpload">
                  <p class="add-button-one-120">+  选择文件</p>
                </el-upload>
                <p class="dialog-material-text">支持doc/docx/xls/xlsx/pdf格式文件</p>
              </div>
              <div class="dialog-material-list-box">
                <div v-for="(item,index) in dialogForm.uploadDtoList" :key="index">
                  <img src="@/assets/ZDimages/safetyCheck/icon_dr_wj.png">
                  <p>{{item.fileName}}</p>
                  <p @click="dialogClickType(5,item)">查看</p>
                  <p @click="delUpData(index)" v-if="!lookInfoType">删除</p>
                  <p v-if="lookInfoType" @click="downloadButton(item)">下载</p>
                </div>
                <p class="dialog-material-list-null" v-if="!dialogForm.uploadDtoList[0]">未上传</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="巡察组:">
            <div class="dialog-table-max-box" :class="lookInfoType?'dialog-table-max-box-look':''">
              <div v-if="!lookInfoType">
                <el-select v-model="groupData" placeholder="请选择" @change="groupChange">
                  <el-option
                    v-for="item in dialogOptions"
                    :key="item.id"
                    :label="item.groupName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <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(4)">+ 添加</p>
                </div>
                <el-table border :data="dialogTableList">
                  <el-table-column label="序号" align="center"  type="index" width="140"/>
                  <el-table-column label="工号" align="center" prop="jobNum" show-overflow-tooltip/>
                  <el-table-column label="姓名" align="center" prop="name" show-overflow-tooltip width="150"/>
                  <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="150"/>
                  <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>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="inspectionPlan-dialog-dept-box" v-show="addDialogBoxType==2">
      <div class="left-max-box">
        <div class="dept-table-title-box">
          <p>已选学院</p>
          <p v-if="!lookInfoType">{{deptNumLeft}}/{{deptTotalLeft}}</p>
          <p v-if="lookInfoType">{{deptNumLeft}}</p>
        </div>
        <div class="dept-table-max-box">
          <el-form :model="deptQueryParamsLeft" class="form-box" ref="queryForm" :inline="true" label-width="50px">
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="30"
                v-model="deptQueryParamsLeft.searchValue"
                placeholder="搜索学院"
                clearable
                style="width: 240px">
                <p v-if="!lookInfoType" class="el-icon-search" slot="append" @click="deptGetListLeft"></p>
                <p v-if="lookInfoType" class="el-icon-search" slot="append" @click="lookDeptLeftSearch"></p>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-right:0;">
              <p v-if="!lookInfoType" class="inquire-button-one" @click="deptResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
              <p v-if="lookInfoType" class="inquire-button-one" @click="lookDeptLeftReset" style="width:60px;margin-right:0;">重置</p>
            </el-form-item>
          </el-form>
          <el-table ref="leftDeptTable" border :data="deptTableListLeft" @select-all="deptChange" @select="deptChange" :row-key="getDeptRowKeys">
            <el-table-column v-if="!lookInfoType" type="selection" width="50" :reserve-selection="true" align="center"/>
            <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip>
              <template slot-scope="scope">
                <div style="display: flex;">
                  <p style="flex:1;">{{scope.row.deptName}}</p>
                  <p style="width:80px;text-align: center">共{{scope.row.subNum}}间</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="right-max-box">
        <div class="dept-table-title-box">
          <p>已选实验室{{deptCheckData.subNum}}间</p>
          <p></p>
        </div>
        <div class="dept-table-max-box">
          <el-form :model="deptQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
            <el-form-item label="" prop="typeId">
              <el-select v-model="deptQueryParamsRight.typeId" clearable placeholder="选择分类" style="width: 120px">
                <el-option
                  v-for="item in classTypeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="level">
              <el-select v-model="deptQueryParamsRight.level" clearable placeholder="选择分级" style="width: 120px">
                <el-option
                  v-for="item in classifiedList"
                  :key="item.id"
                  :label="item.classifiedName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="deptId">
              <el-select v-model="deptQueryParamsRight.deptId" clearable placeholder="选择学院" style="width: 120px">
                <el-option
                  v-for="item in changeDeptSelectList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="30"
                v-model="deptQueryParamsRight.searchValue"
                placeholder="实验室/房间号"
                clearable
                style="width: 190px">
                <p v-if="!lookInfoType" class="el-icon-search" slot="append" @click="deptHandleQueryRight"></p>
                <p v-if="lookInfoType" class="el-icon-search" slot="append" @click="lookDeptRightSearch"></p>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-right:0;">
              <p v-if="!lookInfoType" class="inquire-button-one" @click="deptResetQueryRight" style="width:60px;margin-right:0;">重置</p>
              <p v-if="lookInfoType" class="inquire-button-one" @click="lookDeptRightReset" style="width:60px;margin-right:0;">重置</p>
            </el-form-item>
          </el-form>
          <el-table  border :data="deptTableListRight">
            <el-table-column label="序号" align="center"  type="index" width="60"/>
            <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip/>
            <el-table-column label="楼栋楼层" align="center" prop="buildName" show-overflow-tooltip width="150"/>
            <el-table-column label="分类分级" align="center" prop="deptName" show-overflow-tooltip width="150">
              <template slot-scope="scope">
                <span v-for="item in classTypeList" v-if="item.id == scope.row.typeId">{{item.typeName}}</span>
                <span style="border-right:1px solid #E0E0E0;margin:0 10px;"></span>
                <span v-for="item in classifiedList" v-if="item.id == scope.row.level" :style="'color:'+item.classifiedColor+';'">{{item.classifiedName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="center" prop="collegeName" show-overflow-tooltip width="140"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="deptTotalRight>0"
                      :total="deptTotalRight"
                      :page.sync="deptQueryParamsRight.pageNum"
                      :limit.sync="deptQueryParamsRight.pageSize"
                      @pagination="deptGetListRight"
          />
        </div>
      </div>
    </div>
    <div class="inspectionPlan-dialog-sub-box" v-show="addDialogBoxType==3">
      <div v-if="!lookInfoType" class="left-max-box">
        <div class="dept-table-title-box">
          <p>待选实验室</p>
          <p>{{subNumLeft}}/{{subTotalLeft}}</p>
        </div>
        <div class="dept-table-max-box">
          <el-form :model="subQueryParamsLeft" class="form-box" ref="queryForm" :inline="true" label-width="50px">
            <el-form-item label="" prop="typeId">
              <el-select v-model="subQueryParamsLeft.typeId" clearable placeholder="选择分类" style="width: 110px">
                <el-option
                  v-for="item in classTypeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="level">
              <el-select v-model="subQueryParamsLeft.level" clearable placeholder="选择分级" style="width: 110px">
                <el-option
                  v-for="item in classifiedList"
                  :key="item.id"
                  :label="item.classifiedName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="deptId">
              <el-select v-model="subQueryParamsLeft.deptId" clearable placeholder="学院" style="width: 80px">
                <el-option
                  v-for="item in deptSelectList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="30"
                v-model="subQueryParamsLeft.searchValue"
                placeholder="实验室/房间号"
                clearable
                style="width: 140px">
                <p class="el-icon-search" slot="append" @click="subHandleQueryLeft"></p>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-right:0;">
              <p class="inquire-button-one" @click="subResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
            </el-form-item>
          </el-form>
          <el-table ref="leftSubTable" border :data="subTableListLeft" @selection-change="subChangeLeft" :row-key="getSubRowKeys">
            <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
            <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip/>
            <el-table-column label="分类分级" align="center" prop="deptName" show-overflow-tooltip width="140">
              <template slot-scope="scope">
                <span v-for="item in classTypeList" v-if="item.id == scope.row.typeId">{{item.typeName}}</span>
                <span style="border-right:1px solid #E0E0E0;margin:0 10px;"></span>
                <span v-for="item in classifiedList" v-if="item.id == scope.row.level" :style="'color:'+item.classifiedColor+';'">{{item.classifiedName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="center" prop="collegeName" show-overflow-tooltip width="150"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="subTotalLeft>0"
                      :total="subTotalLeft"
                      :page.sync="subQueryParamsLeft.pageNum"
                      :limit.sync="subQueryParamsLeft.pageSize"
                      @pagination="subGetListLeft"/>
        </div>
      </div>
      <div v-if="!lookInfoType" class="center-box">
        <p class="el-icon-arrow-left" @click="subArrowButton(1)"></p>
        <p class="el-icon-arrow-right" @click="subArrowButton(2)"></p>
      </div>
      <div class="right-max-box">
        <div class="dept-table-title-box">
          <p>已选实验室</p>
          <p v-if="!lookInfoType">{{subNumRight}}/{{subTotalRight}}</p>
          <p v-if="lookInfoType">{{subTotalRight}}</p>
        </div>
        <div class="dept-table-max-box">
          <el-form :model="subQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
            <el-form-item label="" prop="typeId">
              <el-select v-model="subQueryParamsRight.typeId" clearable placeholder="选择分类" :style="!lookInfoType?'width:110px':'width:140px'">
                <el-option
                  v-for="item in classTypeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="level">
              <el-select v-model="subQueryParamsRight.level" clearable placeholder="选择分级" :style="!lookInfoType?'width:110px':'width:140px'">
                <el-option
                  v-for="item in classifiedList"
                  :key="item.id"
                  :label="item.classifiedName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="deptId">
              <el-select v-model="subQueryParamsRight.deptId" clearable placeholder="学院" :style="!lookInfoType?'width:80px':'width:180px'">
                <el-option
                  v-for="item in deptSelectList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="30"
                v-model="subQueryParamsRight.searchValue"
                placeholder="实验室/房间号"
                clearable
                :style="!lookInfoType?'width:140px':'width:180px'">
                <p class="el-icon-search" slot="append" @click="subHandleQueryRight"></p>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-right:0;">
              <p class="inquire-button-one" @click="subResetQueryRight" style="width:60px;margin-right:0;">重置</p>
            </el-form-item>
          </el-form>
          <el-table ref="rightSubTable" border :data="subTableListRight" @selection-change="subChangeRight" :row-key="getSubRowKeys">
            <el-table-column v-if="!lookInfoType" type="selection" width="50" :reserve-selection="true" align="center"/>
            <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip/>
            <el-table-column label="分类分级" align="center" prop="deptName" show-overflow-tooltip width="140">
              <template slot-scope="scope">
                <span v-for="item in classTypeList" v-if="item.id == scope.row.typeId">{{item.typeName}}</span>
                <span style="border-right:1px solid #E0E0E0;margin:0 10px;"></span>
                <span v-for="item in classifiedList" v-if="item.id == scope.row.level" :style="'color:'+item.classifiedColor+';'">{{item.classifiedName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="center" prop="collegeName" show-overflow-tooltip width="150"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="subTotalRight>0"
                      :total="subTotalRight"
                      :page.sync="subQueryParamsRight.pageNum"
                      :limit.sync="subQueryParamsRight.pageSize"
                      @pagination="subGetListRight"/>
        </div>
      </div>
    </div>
    <div class="inspectionPlan-dialog-user-box" v-show="addDialogBoxType==4">
      <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.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="20"
                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 ref="leftUserTable" 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="nickName" show-overflow-tooltip/>
            <el-table-column label="工号" align="center" prop="userName" show-overflow-tooltip width="150"/>
            <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="168"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="userTotalLeft>0"
                      :total="userTotalLeft"
                      :pager-count="5"
                      :page.sync="userQueryParamsLeft.pageNum"
                      :limit.sync="userQueryParamsLeft.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.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="20"
                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 ref="rightUserTable" 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="nickName" show-overflow-tooltip/>
            <el-table-column label="工号" align="center" prop="userName" show-overflow-tooltip width="150"/>
            <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="168"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="userTotalRight>0"
                      :total="userTotalRight"
                      :pager-count="5"
                      :page.sync="userQueryParamsRight.pageNum"
                      :limit.sync="userQueryParamsRight.pageSize"
                      @pagination="userGetListRight"/>
        </div>
      </div>
    </div>
    <div class="inspectionPlan-dialog-look-box" v-if="addDialogBoxType==5">
      <iframe
        class="iframe-box"
        :src="iframeSrc" scrolling="auto" frameborder="0">
      </iframe>
    </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" @click="addUserButton">确定</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { listDepartments } from "@/api/system/dept";
  import { listClassifiedAll } from "@/api/laboratory/classified";
  import { listClasstypeAll } from "@/api/laboratory/classtype";
  import { getHistoryPlanTitles,findGroupList,checkGroupFind,findUserList,
           getAllSubNum,isSCollege,conditionCollegeInfo,findSubInfoByDeptIds,
           checkPlanAdd,conditionSubjectInfo,findCheckPlan,checkPlanUpdate,
           hideHistoryPlanTitle } from '@/api/safetyCheck/index'
  export default {
    name: 'addDialog',
    props:{
      addDialogData:{},
    },
    data(){
      return{
        loading:false,
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        addDialogTitle:"",
        addDialogType:true,
        //弹窗内容状态
        addDialogBoxType:1,
        // 设置只能选择当前日期及之后的日期
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
          }
        },
        //标题快选数据
        quickSelectionList:[],
        //巡察组列表
        dialogOptions:[],
        //上传文件名称暂存
        upDataName:"",
        //巡察组
        groupData:"",
        //巡察组状态 院级/校级
        groupDataType:"",
        //选中巡查人员列表
        dialogTableList:[],
        //巡查范围列表
        dialogRangeOptions:[],
        //学院数量
        collegeNum:0,
        //学院实验室数量
        collegeSubNum:0,
        //学院选择页面已选数据
        deptCheckData:{
          deptIds:[],
          deptNum:0,
          subNum:0
        },
        //实验室选择页面已选数据
        subCheckData:{
          subIds:[]
        },
        //巡查院系列表
        deptList:[],
        //巡查实验室列表
        subList:[],
        //提交数据
        dialogForm:{
          title:"",//奥体
          checkType:"1",//检查类型
          dateRange:[],//时间
          checkRange:"",//检查范围
          checkDemand:"",//检查要点
          schoolSubCheckNum:0,//学校实验室数量
          collegeNum:0,//学院数量
          collegeSubNum:0,//学院实验室数量
          subCheckNum:0,//实验室数量
          subjectNum:0,
          collegeIds:[],
          uploadDtoList:[],
        },
        // 表单校验
        rules: {
          title: [
            { required: true, message: "请输入计划标题", trigger: "change" },
            { required: true, message: "请输入计划标题", validator: this.spaceJudgment, trigger: "change" },
          ],
          dateRange: [
            { required: true, message: "请选择计划周期", trigger: "change" },
          ],
          checkRange: [
            { required: true, message: "请选择检查范围", trigger: "change" },
          ],
        },
        classTypeList:[],
        classifiedList:[],
        deptSelectList:[],
        //查看状态
        lookInfoType:false,
        /*===================================学院选择相关===================================*/
        changeDeptSelectList:[],
        deptQueryParamsLeft:{
          searchValue:"",
        },
        deptTableListLeft:[],
        deptTotalLeft:0,
        deptNumLeft:0,
        deptIdsLeft:[],
        deptQueryParamsRight:{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
          deptIds:"",
          level:"",
          typeId:"",
        },
        deptTableListRight:[],
        deptTotalRight:0,
        /*===================================实验室选择相关===================================*/
        subQueryParamsLeft:{
          pageNum:1,
          pageSize:20,
          typeId:"",
          level:"",
          deptId:"",
          searchValue:"",
          filtType:1
        },
        subTableListLeft:[],
        subTotalLeft:0,
        subNumLeft:0,
        subIdsLeft:[],
        subQueryParamsRight:{
          pageNum:1,
          pageSize:20,
          typeId:"",
          level:"",
          deptId:"",
          searchValue:"",
          filtType:2
        },
        subTableListRight:[],
        subTotalRight:0,
        subNumRight:0,
        subIdsRight:[],
        dialogTableSubList:[],
        dialogTableSubDataList:[],
        /*===================================人员选择相关===================================*/
        userQueryParamsLeft:{
          pageNum: 1,
          pageSize: 20,
          deptId:"",
          searchValue:"",
          filtType:1
        },
        userTableListLeft:[],
        userTotalLeft:0,
        userNumLeft:0,
        userIdsLeft:[],
        userQueryParamsRight:{
          pageNum: 1,
          pageSize: 20,
          deptId:"",
          searchValue:"",
          filtType:2
        },
        userTableListRight:[],
        userTotalRight:0,
        userNumRight:0,
        userIdsRight:[],
        dialogTableDataList:[],
        /*===================================文档预览===================================*/
        iframeSrc:"",
        /*===================================弹窗相关结束===================================*/
      }
    },
    created(){
      this.$set(this,'addDialogTitle',this.addDialogData.title);
      this.$set(this,'lookInfoType',this.addDialogData.lookInfoType);
    },
    mounted(){
      this.initializationInterface();
    },
    methods:{
      //初始化接口
      initializationInterface(){
        //获取历史标题
        this.getHistoryPlanTitles();
        //获取学院列表
        listDepartments().then(response => {
          this.deptSelectList = response.data;
        });
        /**获取分级*/
        listClassifiedAll().then(response=>{
          this.classifiedList = response.data
        })
        /**获取分类*/
        listClasstypeAll().then(response=>{
          this.classTypeList = response.data;
        });
        //查询当前用户是否是院级
        isSCollege().then(response=>{
          if(response.data.userFlg){
            // 院级
            this.$set(this,'dialogRangeOptions',[{label:"学院",value:2},{label:"实验室",value:3}]);
            this.$set(this,'groupDataType',2);
          }else{
            // 校级
            this.$set(this,'dialogRangeOptions',[{label:"全校",value:1},{label:"学院",value:2},{label:"实验室",value:3}]);
            this.$set(this,'groupDataType',0);
          }
          //获取巡察组 checkLevel: 0全部 1校级 2院级
          findGroupList({checkLevel:this.groupDataType}).then(response => {
            this.$set(this,'dialogOptions',response.data);
          });
        });
        if(!this.addDialogData.addType){
          //编辑-详情查询
          findCheckPlan({id:this.addDialogData.id}).then(response => {
            //处理基础数据
            let obj = {
              id:response.data.id,
              title:response.data.title,
              checkType:response.data.checkType,
              dateRange:[response.data.cycleStartTime,response.data.cycleEndTime],
              checkRange:response.data.checkRange,
              schoolSubCheckNum:response.data.checkRange == 1?response.data.subjectNum:0,
              collegeSubNum:response.data.checkRange == 2?response.data.subjectNum:0,
              collegeNum:response.data.checkRange == 2?response.data.collegeNum:0,
              subCheckNum:response.data.checkRange == 3?response.data.subjectNum:0,
              collegeIds:response.data.collegeIds?response.data.collegeIds.split(','):[],
              checkDemand:response.data.checkDemand,
              uploadDtoList:response.data.uploadDtoList,
              checkMemberDtoList:response.data.checkMemberDtoList,
            }
            this.$set(this,'dialogForm',obj);
            //处理人员数据
            let userData = [];
            for(let i=0;i<response.data.checkMemberDtoList.length;i++){
              userData.push({
                userId:response.data.checkMemberDtoList[i].userId,
                name:response.data.checkMemberDtoList[i].name,
                jobNum:response.data.checkMemberDtoList[i].jobNum,
                deptName:response.data.checkMemberDtoList[i].deptName,
                deptId:response.data.checkMemberDtoList[i].deptId,
                userType:response.data.checkMemberDtoList[i].userType,
                enable:response.data.checkMemberDtoList[i].enable,
              })
            }
            this.$set(this,'dialogTableList',userData);
            //处理实验室数据
            let subList = response.data.subIds?response.data.subIds.split(','):[];
            let subDataList = [];
            for(let i=0;i<subList.length;i++){
              subList[i] = parseInt(subList[i]);
              let obj = {
                subId:subList[i],
              }
              subDataList.push(obj);
            }
            this.$set(this,'dialogTableSubList',subDataList);
            this.$set(this.subCheckData,'subIds',subList);
          });
        }
      },
      //选中检查范围
      rangeChange(val){
        if(val == 1){
          //全校
          getAllSubNum().then(response => {
            this.$set(this.dialogForm,'schoolSubCheckNum',response.data.subCount);
          })
        }
      },
      //选中巡察组
      groupChange(val){
        checkGroupFind({id:val,selectEnable:1}).then(response => {
          this.$set(this,'dialogTableList',response.data.checkGroupMemberList);
        });
      },
      //确定按钮
      addUserButton(){
        let self = this;
        if(this.addDialogBoxType == 1){
          //提交
          this.$refs["addDialogForm"].validate(valid => {
            if (valid) {
              //检查范围内是否选择实验室获学院
              if(this.dialogForm.checkRange == 2){
                if(!this.dialogForm.collegeIds[0]){
                  this.msgError('请选择学院')
                  return
                }
              }else if(this.dialogForm.checkRange == 3){
                if(!this.subCheckData.subIds[0]){
                  this.msgError('请选择实验室')
                  return
                }
              }
              if(!this.dialogTableList[0]){
                this.msgError('请添加至少一名巡查成员')
                return
              }
              let obj = {
                title:this.dialogForm.title,
                checkType:this.dialogForm.checkType,
                cycleStartTime:this.dialogForm.dateRange[0],
                cycleEndTime:this.dialogForm.dateRange[1],
                checkRange:this.dialogForm.checkRange,//检查范围
                subjectNum:this.dialogForm.checkRange == 1?this.dialogForm.schoolSubCheckNum:(
                           this.dialogForm.checkRange == 2?this.dialogForm.collegeSubNum:(
                           this.dialogForm.checkRange == 3?this.dialogForm.subCheckNum:0)),//实验室数量
                collegeIds:this.dialogForm.checkRange==2?this.dialogForm.collegeIds+'':'',//学院ID转换字符串
                collegeNum:this.dialogForm.checkRange==2?this.dialogForm.collegeNum:0,//学院数量
                subIds:this.dialogForm.checkRange == 3?this.subCheckData.subIds+'':'',//实验室ID
                checkDemand:this.dialogForm.checkDemand,//检查要求
                uploadDtoList:this.dialogForm.uploadDtoList,//检查要求
                checkMemberDtoList:[],//成员
              };
              let userList = [];
              //过滤多余字段
              for(let i=0;i<self.dialogTableList.length;i++){
                let obj = {
                  deptId: self.dialogTableList[i].deptId,
                  deptName: self.dialogTableList[i].deptName,
                  enable: self.dialogTableList[i].enable,
                  jobNum: self.dialogTableList[i].jobNum,
                  name: self.dialogTableList[i].name,
                  userId: self.dialogTableList[i].userId,
                  userType: self.dialogTableList[i].userType,
                };
                //编辑时需要带上父类ID
                if(this.addDialogData.id){
                  obj.checkPlanId = this.addDialogData.id
                }
                userList.push(obj);
              }
              obj.checkMemberDtoList = userList
              if(this.addDialogData.id){
                //编辑
                for(let i=0;i<obj.uploadDtoList.length;i++){
                  obj.uploadDtoList[i].keyId = this.addDialogData.id;
                }
                obj.id = this.addDialogData.id;
                checkPlanUpdate(obj).then(response => {
                  this.msgSuccess(response.msg)
                  this.$parent.addDialogOpen(5)
                })
              }else{
                //新增
                checkPlanAdd(obj).then(response => {
                  this.msgSuccess(response.msg)
                  this.$parent.addDialogOpen(5)
                })
              }
            }
          })
        }else if(this.addDialogBoxType == 2){
          // 学院选择页面确定
          this.$set(this.dialogForm,'collegeNum',this.deptCheckData.deptNum);
          this.$set(this.dialogForm,'collegeSubNum',this.deptCheckData.subNum);
          this.$set(this.dialogForm,'collegeIds',this.deptCheckData.deptIds);
          this.dialogClickType(1);
        }else if(this.addDialogBoxType == 3){
          //实验室选择页面确定
          let list = [];
          let ids = [];
          for(let o=0;o<self.dialogTableSubDataList.length;o++){
            ids.push(self.dialogTableSubDataList[o].subId)
            let obj = {
              subId:self.dialogTableSubDataList[o].subId,
              subjectName:self.dialogTableSubDataList[o].subjectName,
              typeId:self.dialogTableSubDataList[o].typeId,
              level:self.dialogTableSubDataList[o].level,
              collegeName:self.dialogTableSubDataList[o].collegeName,
            };
            list.push(obj)
          }
          this.$set(this.subCheckData,'subIds',ids);
          this.$set(this.dialogForm,'subCheckNum',list.length);
          this.$set(this,'dialogTableSubList',list);
          this.dialogClickType(1);
        }else if(this.addDialogBoxType == 4){
          //人员选择页面确定
          let list = [];
          for(let o=0;o<self.dialogTableDataList.length;o++){
            let obj = {
              userId:self.dialogTableDataList[o].userId,
              name:self.dialogTableDataList[o].name,
              jobNum:self.dialogTableDataList[o].jobNum,
              deptName:self.dialogTableDataList[o].deptName,
              deptId:self.dialogTableDataList[o].deptId,
              userType:self.dialogTableDataList[o].userType,
              enable:1,
            };
            list.push(obj)
          }
          this.$set(this,'dialogTableList',list);
          this.dialogClickType(1);
        }
      },
      /*===================================弹窗相关===================================*/
      //弹窗关闭
      addDialogAllOff(){
        this.$parent.addDialogOpen(4)
      },
      addDialogOff(){
        if(this.addDialogBoxType == 1){
          this.$parent.addDialogOpen(4)
        }else{
          this.dialogClickType(1);
        }
      },
      //弹窗状态切换
      dialogClickType(type,item){
        let self = this;
        if(type == 5){
          console.log('item',item);
          this.$set(this,'iframeSrc',this.urlJudge(item.fileUrl));
          this.$set(this,'addDialogBoxType',type);
        }else if(type == 4){
          //添加成员
          this.$set(self,'dialogTableDataList',JSON.parse(JSON.stringify(this.dialogTableList)));
          this.userResetQueryLeft();
          this.userResetQueryRight();
          this.$set(this,'addDialogBoxType',type);
        }else if(type == 2){
          //选择学院
          this.$set(this,'addDialogBoxType',type);
          this.deptResetQueryLeft();
          if(this.dialogForm.collegeIds[0]){
            this.$nextTick(() => {
              this.$set(this,'deptQueryParamsLeft',{ searchValue:"", });
              conditionCollegeInfo(self.deptQueryParamsLeft).then(response => {
                if(this.lookInfoType){
                  //查看时
                  let list = [];
                  for(let i=0;i<response.data.length;i++){
                    let num = 0;
                    for(let o=0;o<self.dialogForm.collegeIds.length;o++){
                      if(response.data[i].deptId == self.dialogForm.collegeIds[o]){
                        num++
                      }
                    }
                    if(num == 0){
                      response.data.splice(i,1);
                      i--
                    }
                  }
                  self.$set(self,'deptTableListLeft',response.data);
                  self.$set(self,'deptTotalLeft',response.data.length);
                  self.$set(self,'changeDeptSelectList',response.data);
                  this.$set(this,'deptQueryParamsRight',{
                    pageNum:1,
                    pageSize:20,
                    searchValue:"",
                    deptId:"",
                    level:"",
                    typeId:"",
                  });
                  let obj = JSON.parse(JSON.stringify(this.deptQueryParamsRight));
                  obj.deptIds = self.dialogForm.collegeIds;
                  findSubInfoByDeptIds(obj).then(response => {
                    this.deptTotalRight = response.total;
                    this.deptTableListRight = response.rows;
                    this.$set(this.deptCheckData,'subNum',response.total);
                    this.$set(this,'deptNumLeft',self.dialogForm.collegeIds.length);
                  });
                }else{
                  //新增-编辑时
                  self.$set(self,'deptTableListLeft',response.data);
                  self.$set(self,'deptTotalLeft',response.data.length);
                  let list = [];
                  for(let i=0;i<self.dialogForm.collegeIds.length;i++){
                    for(let o=0;o<self.deptTableListLeft.length;o++){
                      if(self.dialogForm.collegeIds[i] == self.deptTableListLeft[o].deptId){
                        list.push(self.deptTableListLeft[o])
                        self.$refs.leftDeptTable.toggleRowSelection(self.deptTableListLeft[o]);
                      }
                    }
                  }
                  self.deptChange(list);
                }
              })
            })
          }
        }else if(type == 3){
          //选择实验室
          this.$set(self,'dialogTableSubDataList',JSON.parse(JSON.stringify(this.dialogTableSubList)));
          this.subResetQueryLeft();
          this.subResetQueryRight();
          this.$set(this,'addDialogBoxType',type);
        }else{
          this.$set(this,'addDialogBoxType',type);
        }
      },
      //选中对应周期
      checkTime(type){
        let myDate = new Date();
        let year = myDate.getFullYear();
        let month = myDate.getMonth()+1;
        let day = myDate.getDate();
        let minTime = year + '-' + month + '-' + day
        let maxTime = '';
        if(type==1){
          maxTime = this.getMonthFinalDay(year,month);
        }else if(type==2){
          if(month>0 && month<4){
            maxTime = this.getMonthFinalDay(year,3);
          }else if(month>3 && month<7){
            maxTime = this.getMonthFinalDay(year,6);
          }else if(month>6 && month<10){
            maxTime = this.getMonthFinalDay(year,9);
          }else if(month>9 && month<13){
            maxTime = this.getMonthFinalDay(year,12);
          }
        }else if(type==3){
          maxTime = this.getMonthFinalDay(year,12);
        }
        let timeListA = minTime.split('-')
        minTime = timeListA[0]+'-'+(timeListA[1]<10?'0'+timeListA[1]:timeListA[1])+'-'+(timeListA[2]<10?'0'+timeListA[1]:timeListA[2])
        let timeListB = maxTime.split('-')
        maxTime = timeListB[0]+'-'+(timeListB[1]<10?'0'+timeListB[1]:timeListB[1])+'-'+(timeListB[2]<10?'0'+timeListB[1]:timeListB[2])
        this.$set(this.dialogForm,'dateRange',[minTime,maxTime]);
      },
      //返回指定月份最后一天
      getMonthFinalDay(year,month){
        var day='';
        if(year==null || year==undefined || year==''){
          year = new Date().getFullYear();
        }
        if(month==null ||  month==undefined || month==''){
          month = new Date().getMonth()+1;
        }
        day = new Date(new Date(year,month).setDate(0)).getDate();
        return year+"-"+month+"-"+day;

      },
      //删除弹窗上传文件
      delUpData(index){
        this.dialogForm.uploadDtoList.splice(index,1)
      },
      //删除弹窗列表
      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)
          }
        }
      },
      //快捷选中标题
      checkTitle(item){
        this.$set(this.dialogForm,'title',item.title);
      },
      /*===================================学院选择相关===================================*/
      //重置
      deptResetQueryLeft(){
        this.$set(this,'deptQueryParamsLeft',{ searchValue:"", });
        this.$set(this,'deptNumLeft',0);
        this.$set(this,'deptIdsLeft',[]);
        this.$refs.leftDeptTable.clearSelection();
        this.deptGetListLeft();
      },
      //查询接口
      deptGetListLeft(){
        conditionCollegeInfo(this.deptQueryParamsLeft).then(response => {
          this.$set(this,'deptTableListLeft',response.data);
          this.$set(this,'deptTotalLeft',response.data.length);
        })
      },
      //查询
      deptHandleQueryRight(){
        this.deptGetListRight();
      },
      //重置
      deptResetQueryRight(){
        this.$set(this,'deptQueryParamsRight',{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
          deptIds:"",
          level:"",
          typeId:"",
        });
        this.deptHandleQueryRight();
      },
      //查询接口
      deptGetListRight(){
        let obj = JSON.parse(JSON.stringify(this.deptQueryParamsRight));
        if(this.lookInfoType){
          obj.deptIds = this.dialogForm.collegeIds;
        }else{
          obj.deptIds = this.deptIdsLeft;
        }
        findSubInfoByDeptIds(obj).then(response => {
          this.deptTotalRight = response.total;
          this.deptTableListRight = response.rows;
        });
      },
      /*===================================实验室选择相关===================================*/
      //查询
      subHandleQueryLeft(){
        this.$set(this.subQueryParamsLeft,'pageNum',1);
        this.subGetListLeft();
      },
      //重置
      subResetQueryLeft(){
        this.$set(this,'subQueryParamsLeft',{
          pageNum:1,
          pageSize:20,
          typeId:"",
          level:"",
          deptId:"",
          searchValue:"",
          filtType:1
        });
        this.subHandleQueryLeft();
      },
      //查询接口
      subGetListLeft(){
        let self = this;
        let leftObj = JSON.parse(JSON.stringify(this.subQueryParamsLeft));
        leftObj.selectedSubIds = [];
        for(let i=0;i<self.dialogTableSubDataList.length;i++){
          leftObj.selectedSubIds.push(self.dialogTableSubDataList[i].subId);
        }
        conditionSubjectInfo(leftObj).then(response => {
          this.subTotalLeft = response.total;
          this.subTableListLeft = response.rows;
        });
      },
      //查询
      subHandleQueryRight(){
        this.$set(this.subQueryParamsRight,'pageNum',1);
        this.subGetListRight();
      },
      //重置
      subResetQueryRight(){
        this.$set(this,'subQueryParamsRight',{
          pageNum:1,
          pageSize:20,
          typeId:"",
          level:"",
          deptId:"",
          searchValue:"",
          filtType:2
        });
        this.subHandleQueryRight();
      },
      //查询接口
      subGetListRight(){
        let self = this;
        let rightObj = JSON.parse(JSON.stringify(this.subQueryParamsRight));
        rightObj.subIds = [];
        for(let i=0;i<self.dialogTableSubDataList.length;i++){
          rightObj.subIds.push(self.dialogTableSubDataList[i].subId);
        }
        conditionSubjectInfo(rightObj).then(response => {
          this.subTotalRight = response.total;
          this.subTableListRight = response.rows;
        });
      },
      //实验室穿梭按钮
      subArrowButton(type){
        if(type == 1){
          if(this.$refs.rightSubTable.selection[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableSubDataList));
            let subIdsRight = JSON.parse(JSON.stringify(this.$refs.rightSubTable.selection))
            for(let i=0;i<subIdsRight.length;i++){
              for(let s=0;s<list.length;s++){
                if(subIdsRight[i].subId == list[s].subId){
                  list.splice(s,1);
                  s--
                }
              }
            }
            this.$set(this,'dialogTableSubDataList',list);
            this.$refs.rightSubTable.clearSelection();
            this.subHandleQueryLeft();
            this.subHandleQueryRight();
          }else{
            this.msgError('请先勾选右侧列表')
          }
        }else if(type == 2){
          if(this.$refs.leftSubTable.selection[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableSubDataList));
            let subIdsLeft = JSON.parse(JSON.stringify(this.$refs.leftSubTable.selection))
            for(let i=0;i<subIdsLeft.length;i++){
              let obj = {
                subId:subIdsLeft[i].subId,
                subjectName:subIdsLeft[i].subjectName,
                typeId:subIdsLeft[i].typeId,
                level:subIdsLeft[i].level,
                collegeName:subIdsLeft[i].collegeName,
              }
              list.push(obj);
            }
            this.$set(this,'dialogTableSubDataList',list);
            this.$refs.leftSubTable.clearSelection();
            this.subHandleQueryLeft();
            this.subHandleQueryRight();
          }else{
            this.msgError('请先勾选左侧列表')
          }
        }
      },
      /*===================================人员选择相关===================================*/
      //查询
      userHandleQueryLeft(){
        this.$set(this.userQueryParamsLeft,'pageNum',1);
        this.$set(this,'userNumLeft',0);
        this.$set(this,'userIdsLeft',[]);
        this.$refs.leftUserTable.clearSelection();
        this.userGetListLeft();
      },
      //重置
      userResetQueryLeft(){
        this.$set(this,'userQueryParamsLeft',{
          pageNum: 1,
          pageSize: 20,
          deptId:"",
          searchValue:"",
          filtType:1
        });
        this.userHandleQueryLeft();
      },
      //查询接口
      userGetListLeft(){
        let self = this;
        let leftObj = JSON.parse(JSON.stringify(this.userQueryParamsLeft));
        leftObj.selectedUserIds = [];
        for(let i=0;i<self.dialogTableDataList.length;i++){
          leftObj.selectedUserIds.push(self.dialogTableDataList[i].userId);
        }
        findUserList(leftObj).then(response => {
          this.userTotalLeft = response.total;
          this.userTableListLeft = response.rows;
        });
      },
      //查询
      userHandleQueryRight(){
        this.$set(this.userQueryParamsRight,'pageNum',1);
        this.$set(this,'userNumRight',0);
        this.$set(this,'userIdsRight',[]);
        this.$refs.rightUserTable.clearSelection();
        this.userGetListRight();
      },
      //重置
      userResetQueryRight(){
        this.$set(this,'userQueryParamsRight',{
          pageNum: 1,
          pageSize: 20,
          deptId:"",
          searchValue:"",
          filtType:2
        });
        this.userHandleQueryRight();
      },
      //查询接口
      userGetListRight(){
        let self = this;
        let rightObj = JSON.parse(JSON.stringify(this.userQueryParamsRight));
        rightObj.userIds = [];
        for(let i=0;i<self.dialogTableDataList.length;i++){
          rightObj.userIds.push(self.dialogTableDataList[i].userId);
        }
        findUserList(rightObj).then(response => {
          this.userTotalRight = response.total;
          this.userTableListRight = response.rows;
        });
      },
      //人员穿梭按钮
      userArrowButton(type){
        let self = this;
        if(type == 1){
          //右至左
          if(this.$refs.rightUserTable.selection[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableDataList));
            let userIdsRight = JSON.parse(JSON.stringify(this.$refs.rightUserTable.selection))
            for(let i=0;i<userIdsRight.length;i++){
              for(let s=0;s<list.length;s++){
                if(userIdsRight[i].userId == list[s].userId){
                  list.splice(s,1);
                  s--
                }
              }
            }
            this.$set(this,'dialogTableDataList',list);
            this.$refs.rightUserTable.clearSelection();
            this.userHandleQueryLeft();
            this.userHandleQueryRight();
          }else{
            this.msgError('请先勾选右侧列表')
          }
        }else if(type == 2){
          //左至右
          if(this.userIdsLeft[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableDataList));
            let userIdsLeft = JSON.parse(JSON.stringify(this.$refs.leftUserTable.selection))
            for(let i=0;i<userIdsLeft.length;i++){
              let obj = {
                userId:userIdsLeft[i].userId,
                name:userIdsLeft[i].nickName,
                jobNum:userIdsLeft[i].userName,
                deptName:userIdsLeft[i].deptName,
                deptId:userIdsLeft[i].deptId,
                userType:userIdsLeft[i].userType,
              }
              list.push(obj);
            }
            if(list.length>50){
              this.msgError('巡查成员最多50人')
              return
            }
            this.$set(this,'dialogTableDataList',list);
            this.$refs.leftUserTable.clearSelection();
            this.userHandleQueryLeft();
            this.userHandleQueryRight();
          }else{
            this.msgError('请先勾选左侧列表')
          }
        }
      },
      /*===================================弹窗相关结束===================================*/
      // 单个下载按钮
      downloadButton(item){
        this.downloadUrl(item.fileUrl,item.fileName);
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(res) {
        this.$set(this,'loading',false);
        if(this.dialogForm.uploadDtoList.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 ={
          fileName:this.upDataName,
          fileUrl:res.data.url,
          fileType:1,
          source:1,
        };
        this.dialogForm.uploadDtoList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(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') {
          if(file.size> 5250000){
            this.msgError('上传大小不能超过5M')
            return false
          }
          this.$set(this,'loading',true);
          this.upDataName = file.name;
          type = true;
        }else{
          this.$message.error('只能上传doc/docx/xls/xlsx/pdf格式');
          type = false;
        }
        return type;
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.userId
      },
      getDeptRowKeys(row) {
        return row.deptId
      },
      getSubRowKeys(row) {
        return row.subId
      },
      deptChange(selection){
        let self = this;
        this.deptNumLeft = selection.length;
        this.deptIdsLeft = selection.map(item => item.deptId);
        let num = 0;
        let list = [];
        for(let i=0;i<self.deptIdsLeft.length;i++){
          for(let o=0;o<self.deptTableListLeft.length;o++){
            if(self.deptIdsLeft[i] == self.deptTableListLeft[o].deptId){
              num = self.accAdd(num,self.deptTableListLeft[o].subNum)
              let obj = {
                deptId:self.deptTableListLeft[o].deptId,
                deptName:self.deptTableListLeft[o].deptName,
              }
              list.push(obj)
            }
          }
        }
        this.$set(this,'changeDeptSelectList',list);
        this.$set(this.subQueryParamsRight,'deptId','');
        let obj = {
          deptIds:this.deptIdsLeft,
          deptNum:this.deptNumLeft,
          subNum:num
        }
        this.$set(this,'deptCheckData',JSON.parse(JSON.stringify(obj)));
        this.deptResetQueryRight();
      },
      subChangeLeft(selection){
        this.subNumLeft = selection.length;
        this.subIdsLeft = selection.map(item => item.subId);
      },
      subChangeRight(selection){
        this.subNumRight = selection.length;
        this.subIdsRight = selection.map(item => item.subId);
      },
      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);
      },
      //加法
      accAdd(arg1,arg2){
        var r1,r2,m;
        try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
        try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
        m=Math.pow(10,Math.max(r1,r2))
        return ((arg1*m+arg2*m)/m).toFixed(0);
      },
      //获取历史标题
      getHistoryPlanTitles(){
        getHistoryPlanTitles().then(response => {
          let list = [
            {title:"校院春季开学检查",type:false,},
            {title:"校院秋季开学检查",type:false,},
            {title:"日常安全检查",type:false,},
            {title:"年度安全检查",type:false,},
            {title:"季度安全检查",type:false,},
            {title:"月度安全检查",type:false,},
            {title:"专项检查",type:false,},
          ];
          for(let i=0;i<response.data.length;i++){
            list.push({title:response.data[i].title,type:true,id:response.data[i].id});
          }
          this.$set(this,'quickSelectionList',list);
        });
      },
      //删除历史标题
      delTitleObj(item){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          hideHistoryPlanTitle({checkPlanId:item.id}).then(response => {
            self.msgSuccess(response.msg)
            self.getHistoryPlanTitles();
          });
        }).then(() => {
        }).catch(() => {});
      },
      //查看时学院左侧搜索
      lookDeptLeftSearch(){
        let self = this;
        conditionCollegeInfo(self.deptQueryParamsLeft).then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            for(let o=0;o<self.dialogForm.collegeIds.length;o++){
              if(response.data[i].deptId == self.dialogForm.collegeIds[o]  && response.data[i].deptName.indexOf(this.deptQueryParamsLeft.searchValue)!= -1){
                list.push(response.data[i]);
              }
            }
          }
          self.$set(self,'deptTableListLeft',list);
          self.$set(self,'deptTotalLeft',list.length);
          self.$set(self,'changeDeptSelectList',list);
          this.$set(this,'deptQueryParamsRight',{
            pageNum:1,
            pageSize:20,
            searchValue:"",
            deptId:"",
            level:"",
            typeId:"",
          });
          let obj = JSON.parse(JSON.stringify(this.deptQueryParamsRight));
          let ids = [];
          for(let o=0;o<list.length;o++){
            ids.push(list[o].deptId)
          }
          obj.deptIds = ids;
          findSubInfoByDeptIds(obj).then(response => {
            this.deptTotalRight = response.total;
            this.deptTableListRight = response.rows;
            this.$set(this.deptCheckData,'subNum',response.total);
            this.$set(this,'deptNumLeft',self.dialogForm.collegeIds.length);
          });
        })
      },
      //查看时学院左侧重置
      lookDeptLeftReset(){
        let self = this;
        this.$set(this,'deptQueryParamsLeft',{ searchValue:"", });
        conditionCollegeInfo(self.deptQueryParamsLeft).then(response => {
            //查看时
            for(let i=0;i<response.data.length;i++){
              let num = 0;
              for(let o=0;o<self.dialogForm.collegeIds.length;o++){
                if(response.data[i].deptId == self.dialogForm.collegeIds[o]){
                  num++
                }
              }
              if(num == 0){
                response.data.splice(i,1);
                i--
              }
            }
            self.$set(self,'deptTableListLeft',response.data);
            self.$set(self,'deptTotalLeft',response.data.length);
            self.$set(self,'changeDeptSelectList',response.data);
            this.$set(this,'deptQueryParamsRight',{
              pageNum:1,
              pageSize:20,
              searchValue:"",
              deptId:"",
              level:"",
              typeId:"",
            });
            let obj = JSON.parse(JSON.stringify(this.deptQueryParamsRight));
            obj.deptIds = self.dialogForm.collegeIds;
            findSubInfoByDeptIds(obj).then(response => {
              this.deptTotalRight = response.total;
              this.deptTableListRight = response.rows;
              this.$set(this.deptCheckData,'subNum',response.total);
              this.$set(this,'deptNumLeft',self.dialogForm.collegeIds.length);
            });
        })
      },
      //查看时学院右侧搜索
      lookDeptRightSearch(){
        let self = this;
        let obj = JSON.parse(JSON.stringify(this.deptQueryParamsRight));
        let ids = [];
        for(let o=0;o<self.deptTableListLeft.length;o++){
          ids.push(self.deptTableListLeft[o].deptId)
        }
        obj.deptIds = ids;
        findSubInfoByDeptIds(obj).then(response => {
          this.deptTotalRight = response.total;
          this.deptTableListRight = response.rows;
        });
      },
      //查看时学院右侧重置
      lookDeptRightReset(){
        let self = this;
        this.$set(this,'deptQueryParamsRight',{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
          level:"",
          typeId:"",
        });
        let obj = JSON.parse(JSON.stringify(this.deptQueryParamsRight));
        let ids = [];
        for(let o=0;o<self.deptTableListLeft.length;o++){
          ids.push(self.deptTableListLeft[o].deptId)
        }
        obj.deptIds = ids;
        findSubInfoByDeptIds(obj).then(response => {
          this.deptTotalRight = response.total;
          this.deptTableListRight = response.rows;
        });
      },
    }
  }
</script>

<style lang="scss">
  .inspectionPlan-dialog-box{
    .el-dialog__body{
      padding:20px 0 20px 30px;
    }
    .is-disabled{
      background-color: #f5f5f5;
      color: #333;
      border-color: #f5f5f5;
      cursor:auto;
      border-radius: 4px;
      .el-input__icon{
        display: none;
      }
      .el-input__inner{
        background-color: #f5f5f5;
        color: #333;
        border-color: #f5f5f5;
        cursor:auto!important;
        border-radius: 4px;
      }
      .el-range-input{
        background-color: #f5f5f5;
        color: #333;
        border-color: #f5f5f5;
        cursor:auto;
        border-radius: 4px;
      }
      .el-textarea__inner{
        background-color: #f5f5f5;
        color: #333;
        border-color: #f5f5f5;
        cursor:auto;
        border-radius: 4px;
      }
    }
    .inspectionPlan-dialog-add-box{
      display: flex;
      overflow: hidden;
      height:610px;
      .el-table__empty-text{
        background-size: 20%!important;
      }
      .left-max-box{
        width:270px;
        border-right:1px dashed #D8D8D8;
        display: flex;
        flex-direction: column;
        .left-max-title-box{
          width:230px;
          display: flex;
          border-bottom:1px solid #E0E0E0;
          img{
            width:14px;
            height:11px;
            margin:33px 18px 33px 0;
          }
          p{
            line-height:78px;
            color:#0183FA;
            font-size:16px;
          }
        }
        .left-max-list-box{
          flex:1;
          width:230px;
          overflow-x: hidden;
          div{
            width:230px;
            height:40px;
            line-height:40px;
            padding:0 10px;
            margin-top: 10px;
            cursor: pointer;
            font-size:16px;
            color:#333333;
            overflow:hidden;
            display: flex;
            .left-max-list-for-p{
              flex:1;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .left-max-list-for-icon{
              color:#999;
              width:32px;
              line-height: 40px;
              text-align: center;
              font-size:16px;
            }
          }
          div:hover{
            background: rgba(1,131,250,0.2);
            color:#0183FA;
            .left-max-list-for-icon{
              color:#0183FA!important;
            }
          }
        }
      }
      .right-max-box{
        flex:1;
        padding-right:10px;
        .date-range-box{
          display: flex;
          .date-range-left-box{
            margin-right:15px;
          }
          .date-range-right-box{
            display: flex;
            border-radius:4px;
            overflow: hidden;
            border:1px solid #E0E0E0;
            p{
              width: 70px;
              height:34px;
              line-height:34px;
              color:#333;
              font-size:14px;
              text-align: center;
              cursor: pointer;
            }
            p:hover{
              color:#fff;
              background: #0045AF;
            }
            p:nth-child(2){
              border-left:1px solid #E0E0E0;
              border-right:1px solid #E0E0E0;
            }
          }
        }
        .dialog-range-max-box{
          display: flex;
          .dialog-range-select-box{

          }
          .dialog-range-text-box{
            display: flex;
            .button-p{
              margin-left:15px;
              width:100px;
              margin-right:0;
            }
            .text-p{
              line-height:40px;
              color:#0183FA;
              font-size:14px;
              margin-left:15px;
            }
          }
        }
        .dialog-material-max-box{
          .dialog-material-button-box{
            display: flex;
            .dialog-material-text{
              margin-left:20px;
              color:#333333;
              font-size:14px;
              line-height:40px;
            }
          }
          .dialog-material-list-box:nth-child(1){
            margin-top:0;
          }
          .dialog-material-list-box{
            margin-top:20px;
            div{
              height:40px;
              width:550px;
              display: flex;
              img{
                width:16px;
                height:14px;
                margin:11px 23px 13px 0;
              }
              p:nth-child(2){
                flex:1;
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              p:nth-child(3){
                color:#0183FA;
                font-size:14px;
                cursor: pointer;
                margin-left:40px;
              }
              p:nth-child(4){
                color:#0183FA;
                font-size:14px;
                cursor: pointer;
                margin-left:40px;
              }
            }
            .dialog-material-list-null{
              width:450px;
              text-align: center;
              color:#999;
              font-size:14px;
            }
          }
        }
        .dialog-table-max-box-look{
          width:1040px!important;
        }
        .dialog-table-max-box{
          width:747px;
          height:357px;
          display: flex;
          flex-direction: column;
          flex:1;
          /*background: #A11DDF;*/
          overflow: hidden;
          .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-dept-box{
      display: flex;
      overflow: hidden;
      height:610px;
      margin-right:30px;
      .el-table__empty-text{
        background-size: 24%!important;
      }
      .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:475px;
        margin-right:20px;
      }
      .right-max-box{
        height:610px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width:755px;
      }
    }
    .inspectionPlan-dialog-sub-box{
      display: flex;
      overflow: hidden;
      height:610px;
      margin-right:30px;
      .el-table__empty-text{
        background-size: 30%!important;
      }
      .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;
        }
      }
    }
    .inspectionPlan-dialog-user-box{
      display: flex;
      overflow: hidden;
      height:610px;
      margin-right:30px;
      .el-table__empty-text{
        background-size: 30%!important;
      }
      .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;
        }
      }
    }
    .inspectionPlan-dialog-look-box{
      display: flex;
      overflow: hidden;
      height:610px;
      margin-right:30px;
      .iframe-box{
        flex:1;
      }
    }
  }
</style>