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

<template>
  <el-dialog class="inspectionPlan-dialog-box"
             :title="addDialogTitle" :visible.sync="addDialogType" v-if="addDialogType"
             @close="addDialogOff" 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">
          <p v-for="(item,index) in quickSelectionList" :key="index" @click="checkTitle(item)">{{item}}</p>
        </div>
      </div>
      <div class="right-max-box scrollbar-box">
        <el-form  :model="dialogForm" :rules="rules" label-width="140px">
          <el-form-item label="计划标题:" prop="data1">
            <el-input :disabled="lookInfoType" v-model="dialogForm.data1" placeholder="请输入计划标题" maxLength="30" style="width:450px;"/>
          </el-form-item>
          <el-form-item label="检查类型:" prop="data2">
            <el-input v-model="dialogForm.data2" placeholder="请选择检查类型" maxLength="10" disabled style="width:450px;"/>
          </el-form-item>
          <el-form-item label="检查周期:" prop="data3">
            <div class="date-range-box">
              <div class="date-range-left-box">
                <el-date-picker
                  :disabled="lookInfoType"
                  :clearable="false"
                  v-model="dialogForm.data3"
                  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="data4">
            <div class="dialog-range-max-box">
              <div class="dialog-range-select-box">
                <el-select :disabled="lookInfoType" v-model="dialogForm.data4" 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" v-if="dialogForm.data4 == 2" @click="dialogClickType(2)">{{lookInfoType?'查看':'选择学院'}}</p>
                <p class="inquire-button-one button-p" v-if="dialogForm.data4 == 3" @click="dialogClickType(3)">{{lookInfoType?'查看':'选择实验室'}}</p>
                <p class="text-p" v-if="dialogForm.data4 == 2">已选择{{deptCheckNum}}个学院，共{{subCheckNum}}间实验室</p>
                <p class="text-p" v-if="dialogForm.data4 != 2">已选择{{subCheckNum}}间实验室</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="检查要求:" prop="data5">
            <el-input
              :disabled="lookInfoType"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4}"
              :placeholder="lookInfoType?'未输入':'请输入检查检查要点：'"
              v-model="dialogForm.data5"
              maxlength="100"
              resize="none"
              show-word-limit
              style="width:450px;">
            </el-input>
          </el-form-item>
          <el-form-item label="检查材料:" prop="data6">
            <div class="dialog-material-max-box">
              <div class="dialog-material-button-box" v-if="!lookInfoType">
                <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 dialogUpList" :key="index">
                  <img src="@/assets/ZDimages/safetyCheck/icon_dr_wj.png">
                  <p>{{item.name}}</p>
                  <p @click="dialogClickType(5,item)">查看</p>
                  <p @click="delUpData(index)" v-if="!lookInfoType">删除</p>
                  <p v-if="lookInfoType">下载</p>
                </div>
                <p class="dialog-material-list-null" v-if="!dialogUpList[0]">暂无数据</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="巡察组:" prop="data6">
            <div class="dialog-table-max-box">
              <div v-if="!lookInfoType">
                <el-select v-model="dialogForm.data6" placeholder="请选择">
                  <el-option
                    v-for="item in dialogOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </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="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="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 v-if="!lookInfoType" :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 class="el-icon-search" slot="append" @click="deptGetListLeft"></p>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-right:0;">
              <p class="inquire-button-one" @click="deptResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
            </el-form-item>
          </el-form>
          <el-table  border :data="deptTableListLeft" @selection-change="deptChange" :row-key="getRowKeys">
            <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/>
          </el-table>
        </div>
      </div>
      <div class="right-max-box">
        <div class="dept-table-title-box">
          <p>已选实验室15间</p>
          <p></p>
        </div>
        <div class="dept-table-max-box">
          <el-form v-if="!lookInfoType" :model="deptQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
            <el-form-item label="" prop="classType">
              <el-select v-model="deptQueryParamsRight.classType" clearable placeholder="选择分类" style="width: 120px">
                <el-option
                  v-for="item in classTypeList"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="classified">
              <el-select v-model="deptQueryParamsRight.classified" clearable placeholder="选择分级" style="width: 120px">
                <el-option
                  v-for="item in classifiedList"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key">
                </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 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="deptQueryParamsRight.searchValue"
                placeholder="实验室/房间号"
                clearable
                style="width: 190px">
                <p class="el-icon-search" slot="append" @click="deptHandleQueryRight"></p>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-right:0;">
              <p class="inquire-button-one" @click="deptResetQueryRight" 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="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="150"/>
            <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip width="140"/>
          </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
                      v-show="deptTotalRight>0"
                      :total="deptTotalRight"
                      :page.sync="deptTableListRight.pageNum"
                      :limit.sync="deptTableListRight.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="classType">
              <el-select v-model="subQueryParamsLeft.classType" clearable placeholder="选择分类" style="width: 110px">
                <el-option
                  v-for="item in classTypeList"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="classified">
              <el-select v-model="subQueryParamsLeft.classified" clearable placeholder="选择分级" style="width: 110px">
                <el-option
                  v-for="item in classifiedList"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key">
                </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.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="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  border :data="subTableListLeft" @selection-change="subChangeLeft" :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="120"/>
            <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip width="150"/>
          </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
                      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">{{subNumRight}}</p>
        </div>
        <div class="dept-table-max-box">
          <el-form v-if="!lookInfoType" :model="subQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
            <el-form-item label="" prop="classType">
              <el-select v-model="subQueryParamsRight.classType" clearable placeholder="选择分类" style="width: 110px">
                <el-option
                  v-for="item in classTypeList"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="classified">
              <el-select v-model="subQueryParamsRight.classified" clearable placeholder="选择分级" style="width: 110px">
                <el-option
                  v-for="item in classifiedList"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="deptId">
              <el-select v-model="subQueryParamsRight.deptId" clearable placeholder="学院" style="width: 80px">
                <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="subQueryParamsRight.searchValue"
                placeholder="实验室/房间号"
                clearable
                style="width: 140px">
                <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 border :data="subTableListRight" @selection-change="subChangeRight" :row-key="getRowKeys">
            <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/>
            <el-table-column label="分类分级" align="center" prop="deptName" show-overflow-tooltip width="120"/>
            <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip width="150"/>
          </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
                      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 classTypeList"
                  :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="inquire-button-one" @click="userResetQueryLeft" style="width:60px;margin-right:0;">重置</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="inquire-button-one" @click="userResetQueryRight" style="width:60px;margin-right:0;">重置</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 class="inspectionPlan-dialog-look-box" v-show="addDialogBoxType==5">

    </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>
  import { getToken } from "@/utils/auth";
  export default {
    name: 'addDialog',
    data(){
      return{
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        addDialogTitle:"",
        addDialogType:true,
        //弹窗内容状态
        addDialogBoxType:2,
        // 设置只能选择当前日期及之后的日期
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
          }
        },
        //标题快选数据
        quickSelectionList:['校级开学检查', '院级开学检查', '月度安全检查', '季度安全检查', '年度安全检查', '专项检查', '紧急检查','校级开学检查', '院级开学检查', '月度安全检查', '季度安全检查', '年度安全检查', '专项检查', '紧急检查','校级开学检查', '院级开学检查', '月度安全检查', '季度安全检查', '年度安全检查', '专项检查', '紧急检查',],
        //巡察组列表
        dialogOptions:[],
        //上传文件名称暂存
        upDataName:"",
        //上传文件列表
        dialogUpList:[{name:"我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容"},{name:"我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容"}],
        //选中巡查人员列表
        dialogTableList:[{userId:1},{userId:2},{userId:3},{userId:4},{userId:5},{userId:6},{userId:7},{userId:8},{userId:9},{userId:10}],
        //巡查范围列表
        dialogRangeOptions:[{label:"全校",value:"1"},{label:"学院",value:"2"},{label:"实验室",value:"3"}],
        //巡查院系数量
        deptCheckNum:0,
        //巡查院系列表
        deptList:[],
        //巡查实验室数量
        subCheckNum:0,
        //巡查实验室列表
        subList:[],
        //提交数据
        dialogForm:{
          data1:"",
          data2:"",
          data3:[],
          data4:"1",
          data5:"",
          data6:"",
        },
        // 表单校验
        rules: {
          data1: [
            { required: true, message: "请输入计划标题", trigger: "change" },
            { required: true, message: "请输入计划标题", validator: this.spaceJudgment, trigger: "change" },
          ],
          data3: [
            { required: true, message: "请选择检查周期", trigger: "change" },
          ],
          data4: [
            { required: true, message: "请选择检查范围", trigger: "change" },
          ],
        },
        classTypeList:[],
        classifiedList:[],
        deptSelectList:[],
        //查看状态
        lookInfoType:false,
        /*===================================学院选择相关===================================*/
        deptQueryParamsLeft:{
          searchValue:"",
        },
        deptTableListLeft:[{}],
        deptTotalLeft:0,
        deptNumLeft:0,
        deptIdsLeft:[],
        deptQueryParamsRight:{},
        deptTableListRight:[{}],
        deptTotalRight:0,
        /*===================================实验室选择相关===================================*/
        subQueryParamsLeft:{
          classType:"",
          classified:"",
          deptId:"",
          searchValue:"",
        },
        subTableListLeft:[{}],
        subTotalLeft:0,
        subNumLeft:0,
        subIdsLeft:[],
        subQueryParamsRight:{
          classType:"",
          classified:"",
          deptId:"",
          searchValue:"",
        },
        subTableListRight:[{}],
        subTotalRight:0,
        subNumRight:0,
        subIdsRight:[],
        /*===================================人员选择相关===================================*/
        userQueryParamsLeft:{
          deptId:"",
          searchValue:"",
        },
        userTableListLeft:[{}],
        userTotalLeft:0,
        userNumLeft:0,
        userIdsLeft:[],
        userQueryParamsRight:{
          deptId:"",
          searchValue:"",
        },
        userTableListRight:[{}],
        userTotalRight:0,
        userNumRight:0,
        userIdsRight:[],
        /*===================================弹窗相关结束===================================*/
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      /*===================================弹窗相关===================================*/
      //弹窗开启
      addDialogOpen(type,data){
        if(type==1){
          this.$set(this,'lookInfoType',false);
          this.$set(this,'addDialogTitle','创建巡查计划');
        }else if(type==2){
          this.$set(this,'lookInfoType',false);
          this.$set(this,'addDialogTitle','编辑巡查计划');
        }else{
          this.$set(this,'lookInfoType',true);
        }
        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);
      },
      //选中对应周期
      checkTime(type){
        let myDate = new Date();
        let year = myDate.getFullYear();
        let month = myDate.getMonth()+1;
        let day = myDate.getDate();
        let minTime = year + '-' + month + '-' + day
        if(type==1){
          let maxTime = this.getMonthFinalDay(year,month);
          this.$set(this.dialogForm,'data3',[minTime,maxTime]);
        }else if(type==2){
          if(month>0 && month<4){
            let maxTime = this.getMonthFinalDay(year,3);
            this.$set(this.dialogForm,'data3',[minTime,maxTime]);
          }else if(month>3 && month<7){
            let maxTime = this.getMonthFinalDay(year,6);
            this.$set(this.dialogForm,'data3',[minTime,maxTime]);
          }else if(month>6 && month<10){
            let maxTime = this.getMonthFinalDay(year,9);
            this.$set(this.dialogForm,'data3',[minTime,maxTime]);
          }else if(month>9 && month<13){
            let maxTime = this.getMonthFinalDay(year,12);
            this.$set(this.dialogForm,'data3',[minTime,maxTime]);
          }
        }else if(type==3){
          let maxTime = this.getMonthFinalDay(year,12);
          this.$set(this.dialogForm,'data3',[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.dialogUpList.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(val){
        this.$set(this.dialogForm,'data1',val);
      },
      /*===================================学院选择相关===================================*/
      //重置
      deptResetQueryLeft(){
        this.$set(this,'deptQueryParamsLeft',{ searchValue:"", });
        this.deptGetListLeft();
      },
      //查询接口
      deptGetListLeft(){

      },
      //查询
      deptHandleQueryRight(){
        this.$set(this.deptQueryParamsRight,'pageNum',1);
        this.deptGetListRight();
      },
      //重置
      deptResetQueryRight(){
        this.$set(this,'deptQueryParamsRight',{
          pageNum:1,
          pageSize:20,
          classType:"",
          classified:"",
          deptId:"",
          searchValue:"",
        });
        this.deptHandleQueryRight();
      },
      //查询接口
      deptGetListRight(){

      },
      /*===================================实验室选择相关===================================*/
      //查询
      subHandleQueryLeft(){
        this.$set(this.subQueryParamsLeft,'pageNum',1);
        this.subGetListLeft();
      },
      //重置
      subResetQueryLeft(){
        this.$set(this,'subQueryParamsLeft',{ searchValue:"", });
        this.subHandleQueryLeft();
      },
      //查询接口
      subGetListLeft(){

      },
      //查询
      subHandleQueryRight(){
        this.$set(this.subQueryParamsRight,'pageNum',1);
        this.subGetListRight();
      },
      //重置
      subResetQueryRight(){
        this.$set(this,'subQueryParamsRight',{
          pageNum:1,
          pageSize:20,
          classType:"",
          classified:"",
          deptId:"",
          searchValue:"",
        });
        this.subHandleQueryRight();
      },
      //查询接口
      subGetListRight(){

      },
      subArrowButton(type){
        if(type == 1){
          if(this.subIdsRight[0]){

          }
        }else if(type == 2){
          if(this.subIdsLeft[0]){

          }
        }
      },
      /*===================================人员选择相关===================================*/
      //查询
      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]){

          }
        }
      },
      /*===================================弹窗相关结束===================================*/
      /*==========上传相关==========*/
      handleAvatarSuccess(res) {
        if(this.dialogUpList.length>9){
          this.msgError('已到达上传数量上限')
          return
        }
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.$message.info('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let obj ={
          name:this.upDataName,
          url:res.data.url,
        };
        this.dialogUpList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        console.log('file',file)
        let type = false;
        if (file.type == 'application/pdf' || file.type == 'application/msword' || file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'|| file.type == 'application/vnd.ms-excel' || file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
          this.upDataName = file.name;
          type = true;
        }else{
          this.$message.error('只能上传doc/docx/xls/xlsx/pdf格式');
          type = false;
        }
        return type;
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.userId
      },
      deptChange(selection){
        this.deptNumLeft = selection.length;
        this.deptIdsLeft = selection.map(item => item.userId);
      },
      subChangeLeft(selection){
        this.subNumLeft = selection.length;
        this.subIdsLeft = selection.map(item => item.userId);
      },
      subChangeRight(selection){
        this.subNumRight = selection.length;
        this.subIdsRight = selection.map(item => item.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);
      },
    }
  }
</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;
      .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;
          p{
            width:230px;
            height:40px;
            line-height:40px;
            padding-left:32px;
            margin-top: 10px;
            cursor: pointer;
            font-size:16px;
            color:#333333;
          }
          p:hover{
            background: rgba(1,131,250,0.2);
            color:#0183FA;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
      }
      .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{
            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{
              text-align: center;
              color:#999;
              font-size:14px;
            }
          }
        }
        .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;
      .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;
      .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;
      .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;
        }
      }
    }
  }
</style>