v3-lab-web/src/views/safetyCheck/components/projectAddPage.vue

<!--新增计划/编辑计划/计划详情-->
<template>
  <div class="page-container projectAddPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{lookInfoType?'计划详情':(propsData.planId?'编辑计划':'创建计划')}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-add-p" @click="submitForm" v-if="!lookInfoType">提交</p>
    </div>
    <div class="content-box">
      <div class="content-left-box" v-if="!lookInfoType">
        <div class="content-left-title-box">
          <span class="iconfont icon-a-gengduo4"></span>
          <p>计划标题快选</p>
        </div>
        <div class="content-left-for-max-box scrollbar-box">
          <div class="content-left-for-title-box" v-for="(item,index) in leftTitleList" :key="index">
            <p @click="titleFastSelect(item.planTitle)">{{item.planTitle}}</p>
            <p v-if="item.type" class="el-icon-circle-close" @click="delTitleFast(item)"></p>
          </div>
        </div>
      </div>
      <div class="content-right-box scrollbar-box">
        <!--校级角标-->
        <img class="corner-mark-img" v-if="schoolCollegeType == 'school'"
             src="@/assets/ZDimages/safetyCheck/icon_aqjc_xx@1x.png">
        <!--院级角标-->
        <img class="corner-mark-img"  v-if="schoolCollegeType == 'college'"
             src="@/assets/ZDimages/safetyCheck/icon_jcjh_xy@1x.png">
        <!--计划任务-->
        <el-form class="add-form-box" :model="dialogForm" ref="form" :rules="rules" label-width="180px">
          <div class="content-right-project-box">
            <p class="project-title-p">计划任务</p>
            <el-form-item label="计划标题" prop="planTitle" style="margin-top:20px;">
              <el-input v-model="dialogForm.planTitle" :disabled="lookInfoType" placeholder="请输入计划标题" maxLength="30" style="width:450px;"></el-input>
            </el-form-item>
            <div class="content-right-form-display">
              <el-form-item label="检查类型" prop="checkTypeValue">
                <el-select v-model="dialogForm.checkTypeValue" @change="checkTypeValueChange" :disabled="lookInfoType" placeholder="请选择检查类型" style="width: 450px">
                  <el-option
                    v-for="dict in inspectType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <div class="intersect-inspect-box" @click="intersectInspectCheck"
                   :class="dialogForm.crossCheck?'intersect-inspect-check-box':''">
                <p>交叉互检</p>
                <img v-if="dialogForm.crossCheck" src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
              </div>
            </div>
            <div class="content-right-form-display" v-if="!lookInfoType">
              <el-form-item label="检查范围" prop="checkRange">
                <el-radio-group v-model="dialogForm.checkRange" @change="checkRangeChange" :disabled="lookInfoType" style="min-width:90px;">
                  <el-radio :label="1" v-if="schoolCollegeType == 'school'">全校</el-radio>
                  <el-radio :label="3" style="margin-right:40px;">实验室</el-radio>
                </el-radio-group>
              </el-form-item>
              <div class="sub-button-box"
                   v-if="dialogForm.checkRange == 3">
                <p @click="subCheckButton(1)">待检查实验室</p>
              </div>
              <p class="sub-num-p">待检查实验室共{{dialogForm.subjectNum}}间</p>
            </div>
            <div class="content-right-form-display" v-if="lookInfoType">
              <el-form-item label="检查范围" prop="checkRange">
              </el-form-item>
              <p class="sub-num-p" v-if="dialogForm.checkRange == 1" style="margin-right:20px;">全校检查</p>
              <p class="sub-num-p" v-if="dialogForm.checkRange == 3" style="margin-right:20px;">实验室检查</p>
              <p class="sub-num-p" style="margin-right:20px;">待检查实验室共{{dialogForm.subjectNum}}间</p>
              <div class="sub-button-box" style="margin-left:0;" v-if="dialogForm.checkRange == 3">
                <p @click="subCheckButton(1)">查看实验室</p>
              </div>
            </div>
            <div class="content-right-form-display">
              <el-form-item label="计划周期" prop="dateRange">
                <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>
              </el-form-item>
              <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 label="检查组织" prop="checkGroupId">
              <el-select
                :disabled="lookInfoType"
                style="width:450px;"
                v-model="dialogForm.checkGroupId"
                filterable
                remote
                reserve-keyword
                @change="selectChange"
                placeholder="搜索选择督导组"
                :remote-method="securityCheckGroupFindGroupList">
                <el-option
                  v-for="item in supervisorOptions"
                  :key="item.groupId"
                  :label="item.groupName"
                  :value="item.groupId">
                </el-option>
              </el-select>
              <span class="user-button-span" v-if="dialogForm.checkGroupId" @click="lookMemberList">成员列表</span>
            </el-form-item>
            <el-form-item label="检查要求1:" prop="checkDemand">
              <el-input
                v-if="!lookInfoType"
                :disabled="lookInfoType"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入检查要求"
                v-model="dialogForm.checkDemand"
                maxlength="200"
                resize="none"
                show-word-limit
                style="width:450px;">
              </el-input>
              <p v-if="lookInfoType" class="checkDemand-textarea-p">{{dialogForm.checkDemand?dialogForm.checkDemand:'无'}}</p>
            </el-form-item>
            <el-form-item label="材料附件:">
              <div class="avatar-uploader-button-box" v-if="dialogForm.uploadDtoList.length<5&&!lookInfoType">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadFileUrl"
                  :show-file-list="false"
                  :on-success="(res)=>handleAvatarSuccess(res)"
                  :headers="headers"
                  :before-upload="beforeAvatarUpload">
                  <p class="avatar-uploader-button" style="width:120px;">+ 选择文件</p>
                </el-upload>
                <p class="avatar-uploader-text">支持docx/xlsx/pdf格式文件</p>
              </div>
              <div class="up-data-table-box">
                <el-table class="table-box table-null-img-10" border :data="dialogForm.uploadDtoList">
                  <el-table-column label="文件名" prop="fileName" show-overflow-tooltip/>
                  <el-table-column label="操作" width="300" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <div class="table-button-box">
                        <p class="table-button-null"></p>
                        <p class="table-button-p"
                           @click="lookUploadFile(scope.row)"
                        >查看</p>
                        <p class="table-button-p"
                           v-if="!lookInfoType"
                           @click="delUploadFile(scope.$index, scope.row)"
                        >删除</p>
                        <p class="table-button-p"
                           v-if="lookInfoType"
                           @click="downloadButton(scope.row)"
                        >下载</p>
                        <p class="table-button-null"></p>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
            <p class="project-title-p" style="margin-top:20px;border-top:1px solid #e0e0e0;">检查设置</p>
            <div class="inspect-for-max-big-box" v-for="(item,index) in dialogForm.checkPlanSetDtoList" :key="index">
              <p class="for-index-p">{{index+1}}</p>
              <img src="@/assets/ZDimages/safetyCheck/icon_jcsz_gb@1x.png" class="del-button" v-if="dialogForm.checkPlanSetDtoList[1]&&!lookInfoType" @click="delInspect(index)">
              <el-form-item label="检查名称" :prop="'checkPlanSetDtoList.'+index+'.checkName'" :rules="rules.checkName" style="margin-top:20px;">
                <el-input v-model="item.checkName" :disabled="lookInfoType" clearable placeholder="请输入检查名称" maxLength="20" style="width:450px;"></el-input>
              </el-form-item>
              <el-form-item label="检查开始日期" :prop="'checkPlanSetDtoList.'+index+'.checkStartTime'" :rules="rules.checkName">
                <el-date-picker
                  :disabled="lookInfoType"
                  style="width:450px;"
                  v-model="item.checkStartTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  :picker-options="pickerOptions"
                  placeholder="请选择检查开始日期">
                </el-date-picker>
              </el-form-item>
              <div class="content-right-form-display">
                <el-form-item label="整改期限" :prop="'checkPlanSetDtoList.'+index+'.rectifyDeadline'" :rules="rules.checkName">
                  <el-date-picker
                    :disabled="lookInfoType"
                    style="width:450px;"
                    v-model="item.rectifyDeadline"
                    value-format="yyyy-MM-dd"
                    type="date"
                    :picker-options="pickerOptions"
                    placeholder="请选整改期限">
                  </el-date-picker>
                </el-form-item>
                <div class="overdue-check-box" @click="overdueCheck(index)" v-if="!lookInfoType">
                  <div>
                    <p v-if="item.overdueUnrectify"></p>
                  </div>
                  <p class="overdue-p">逾期未完成整改关闭实验室</p>
                </div>
                <div class="overdue-check-box" v-if="lookInfoType&&item.overdueUnrectify">
                  <p class="overdue-p" style="margin-left:20px;">逾期未完成整改关闭实验室</p>
                </div>
              </div>
              <div class="content-right-form-display">
                <el-form-item label="检查项目来源"  :prop="'checkPlanSetDtoList.'+index+'.checkBasisIds'" :rules="rules.checkBasisIds">
                  <el-select v-model="item.checkBasisIds"
                             multiple
                             :collapse-tags="!lookInfoType"
                             :disabled="lookInfoType"
                             @change="(val)=>checkBasis(val,index)"
                             placeholder="请选择检查项目来源" style="width: 450px">
                    <el-option
                      v-for="dict in inspectSource"
                      :key="dict.basisId"
                      :label="dict.basisName"
                      :value="dict.basisId"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <p class="color-text" v-if="!lookInfoType">检查依据模版</p>
              </div>
            </div>
          </div>
          <p class="add-button-p" @click="addInspect" v-if="!lookInfoType">+</p>
        </el-form>
      </div>
    </div>

    <el-dialog class="memberData-dialog-box"
               :close-on-click-modal="false"
               title="成员列表" :visible.sync="lookMemberType" v-if="lookMemberType"
               width="600px" append-to-body>
      <p class="memberData-dialog-title-p">{{dialogForm.checkGroupName}}</p>
      <p class="memberData-dialog-user-p">督导组负责人：{{memberUserName}}</p>
      <div class="memberData-dialog-content-box">
        <el-table class="table-box" border :data="memberData">
          <el-table-column label="序号" type="index" width="50"/>
          <el-table-column label="姓名" prop="userName" show-overflow-tooltip/>
          <el-table-column label="工号" prop="account" width="150" show-overflow-tooltip/>
          <el-table-column label="所在部门" prop="deptName" width="200" show-overflow-tooltip/>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="memberTotal>0"
                    :total="memberTotal"
                    :page.sync="memberQueryParams.page"
                    :limit.sync="memberQueryParams.pageSize"
                    @pagination="getUserList"
        />
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-primary" @click="lookMemberList()">关闭</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
    <fullScreenFileLook ref="fullScreenFileLook"></fullScreenFileLook>
    <sub-dialog v-if="subCheckType" :subCheckData="subCheckData" :schoolCollegeType="schoolCollegeType"></sub-dialog>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import fullScreenFileLook from "@/components/fullScreenFileLook/fullScreenFileLook.vue";
  import subDialog from "@/views/safetyCheck/components/subDialog.vue";
  import {
    laboratorySubRelInfoGetAllSubNum,
    checkPlanGetHistoryPlanTitles,
    checkPlanHideHistoryPlanTitle,
    securityCheckBasisGetList,
    securityCheckGroupFindGroupList,
    securityCheckGroupMemberGroupMemberList,
    securityMemberPlanMemberList,
    securityCheckPlanAdd,
    securityCheckPlanUpdate,
    securityCheckPlanFindCheckPlan,
  } from '@/api/safetyCheck/index'
  export default {
    name: 'addPage',
    components: {
      fullScreenFileLook,
      subDialog,
    },
    props:{
      propsData:{},
    },
    data(){
      return{
        //查看详情状态
        lookInfoType:false,
        // 父级页面类型
        schoolCollegeType:null,//1.校级 2.院级
        uploadFileUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: getToken(),
        },
        //上传文件名称暂存
        upDataName:"",
        // 设置只能选择当前日期及之后的日期
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
          }
        },
        //检查类型
        inspectType:[],
        //检查项目来源
        inspectSource:[],
        //督导组
        supervisorOptions:[],
        dialogForm:{
          planTitle:"",
          checkTypeValue:null,
          checkTypeName:'',
          crossCheck:false,
          checkRange:null,
          subIds:[],
          subjectNum:0,
          dateRange:[],
          checkGroupId:null,
          checkGroupName:'',
          checkDemand:"",
          uploadDtoList:[],
          checkPlanSetDtoList:[
            {
              checkName:'第1次检查',
              checkStartTime:'',
              rectifyDeadline:'',
              checkBasisIds:null,
              overdueUnrectify:false,
            },
          ],
        },
        rules:{
          planTitle: [
            { required: true, message: "请输入计划标题", trigger: "blur" },
            { required: true, message: "请输入计划标题", validator: this.spaceJudgment, trigger: "blur" }
          ],
          checkTypeValue: [
            { required: true, message: "请选择检查类型", trigger: "blur" },
          ],
          checkRange: [
            { required: true, message: "请选择检查范围", trigger: "blur" },
          ],
          dateRange: [
            { required: true, message: "请选择计划周期", trigger: "blur" },
          ],
          checkGroupId: [
            { required: true, message: "搜索选择督导组", trigger: "blur" },
          ],
          checkName: [
            { required: true, message: "请输入检查名称", trigger: "blur" },
            { required: true, message: "请输入检查名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          checkStartTime: [
            { required: true, message: "请输入检查名称", trigger: "blur" },
          ],
          rectifyDeadline: [
            { required: true, message: "请选择检查开始日期", trigger: "blur" },
          ],
          checkBasisIds: [
            { required: true, message: "请选择检查项目来源", trigger: "blur" },
          ],
        },
        leftTitleList:[],
        //实验室选择
        subCheckType:false,
        subCheckData:[],
        //督导组成员
        lookMemberType:false,
        memberData:[],
        memberTotal:0,
        memberQueryParams:{
          page:1,
          pageSize:20,
        },
        memberUserName:'',
      }
    },
    created(){
      this.initialize();
      this.securityCheckGroupFindGroupList();
    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(){
        this.getDicts("check_type").then(response => {
          this.$set(this,'inspectType',response.data);
        });
        //检查依据-下拉列表
        this.securityCheckBasisGetList();
        if(this.propsData.rank == 'school'){
          //school学校
          this.$set(this,'schoolCollegeType','school');
        }else if (this.propsData.rank == 'college'){
          //college学院
          this.$set(this,'schoolCollegeType','college');
        }
        if(this.propsData.showType){
          //查看
          this.$set(this,'lookInfoType',true);
          //详情接口
          this.securityCheckPlanFindCheckPlan();
        }else{
          //查询历史标题列表
          this.checkPlanGetHistoryPlanTitles();
          this.$set(this,'lookInfoType',false);
          if (this.propsData.planId){
            //编辑
            //详情接口
            this.securityCheckPlanFindCheckPlan();
          } else {
            //新增
            if (this.propsData.rank == 'school'){
              this.$set(this.dialogForm,'checkRange',1);
              //查询全校实验室数量
              this.laboratorySubRelInfoGetAllSubNum();
            }else if(this.propsData.rank == 'college'){
              this.$set(this.dialogForm,'checkRange',3);
              this.$set(this.dialogForm,'subjectNum',this.dialogForm.subIds.length);
            }
          }
        }
      },
      //新增检查
      addInspect(){
        if(this.dialogForm.checkPlanSetDtoList[11]){
          this.msgError('最多支持12次检查');
          return
        }
        this.dialogForm.checkPlanSetDtoList.push({
          checkName:'第'+(this.dialogForm.checkPlanSetDtoList.length+1)+'次检查',
          checkStartTime:'',
          rectifyDeadline:'',
          checkBasisIds:null,
          overdueUnrectify:false,
        })
      },
      //删除检查
      delInspect(index){
        let self = this;
        self.$confirm('是否确认删除?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          //删除
          self.dialogForm.checkPlanSetDtoList.splice(index,1)
        }).then(() => {
        }).catch(() => {
        })
      },
      //选中检查类型
      checkTypeValueChange(val){
        let self = this;
        for(let i=0;i<self.inspectType.length;i++){
          if(val == self.inspectType[i].value){
            self.$set(self.dialogForm,'checkTypeName',self.inspectType[i].label);
          }
        }
      },
      //逾期关闭实验室操作
      overdueCheck(index){
        this.$set(this.dialogForm.checkPlanSetDtoList[index],'overdueUnrectify',!this.dialogForm.checkPlanSetDtoList[index].overdueUnrectify);
      },
      //懒加载督导组
      securityCheckGroupFindGroupList(e){
        securityCheckGroupFindGroupList({groupName:e}).then(response => {
          this.supervisorOptions = response.data;
        });
      },
      //督导组选择
      selectChange(e){
        let self = this;
        for(let i=0;i<self.supervisorOptions.length;i++){
          if(self.supervisorOptions[i].groupId == e){
            self.$set(self.dialogForm,"checkGroupId",self.supervisorOptions[i].groupId);
            self.$set(self.dialogForm,"checkGroupName",self.supervisorOptions[i].groupName);
          }
        }
      },
      //标题快选
      titleFastSelect(planTitle){
        this.$set(this.dialogForm,'planTitle',planTitle);
      },
      //删除快选标题
      delTitleFast(item){
        let self = this;
        self.$confirm('是否确认删除?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          //删除
          self.checkPlanHideHistoryPlanTitle(item);
        }).then(() => {
        }).catch(() => {
        })
      },
      //交叉检查选中
      intersectInspectCheck(){
        if(!this.lookInfoType){
          this.$set(this.dialogForm,'crossCheck',!this.dialogForm.crossCheck);
        }
      },
      //选中对应周期
      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[2]:timeListA[2])
        let timeListB = maxTime.split('-')
        maxTime = timeListB[0]+'-'+(timeListB[1]<10?'0'+timeListB[1]:timeListB[1])+'-'+(timeListB[2]<10?'0'+timeListB[2]: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;

      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(6);
      },
      /** 提交按钮 */
      submitForm() {
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            //实验室检测
            if(self.dialogForm.checkRange == 3 && this.dialogForm.subjectNum<1){
              self.msgError('请选择实验室')
              return
            }
            //计划周期检查
            if(self.dialogForm.dateRange[0] == self.dialogForm.dateRange[1]){
              self.msgError('计划周期的开始时间与结束时间不能相同')
              return
            }
            //交叉检查-督导组成员数量检测
            if(this.dialogForm.crossCheck){
              for(let i=0;i<self.supervisorOptions.length;i++){
                if(self.supervisorOptions[i].groupId == self.dialogForm.checkGroupId){
                  if(self.supervisorOptions[i].peopleNum < 2){
                    self.msgError('督导组成员不足两人,无法使用交叉互检')
                    return
                  }
                }
              }
            }
            //日期检测
            for(let i=0;i<self.dialogForm.checkPlanSetDtoList.length;i++){
              if(self.dialogForm.checkPlanSetDtoList[i].checkStartTime == self.dialogForm.checkPlanSetDtoList[i].rectifyDeadline){
                self.msgError('第'+(i+1)+'个检查的检查开始日期与整改期限不能相同')
                return
              }
              if(self.timeToTimestamp(self.dialogForm.checkPlanSetDtoList[i].checkStartTime)<self.timeToTimestamp(self.dialogForm.dateRange[0]) ||
                self.timeToTimestamp(self.dialogForm.checkPlanSetDtoList[i].checkStartTime)>self.timeToTimestamp(self.dialogForm.dateRange[1])){
                self.msgError('第'+(i+1)+'个检查的检查开始日期必须在计划周期内')
                return
              }
              if(self.timeToTimestamp(self.dialogForm.checkPlanSetDtoList[i].rectifyDeadline)<self.timeToTimestamp(self.dialogForm.dateRange[0]) ||
                self.timeToTimestamp(self.dialogForm.checkPlanSetDtoList[i].rectifyDeadline)>self.timeToTimestamp(self.dialogForm.dateRange[1])){
                self.msgError('第'+(i+1)+'个检查的整改期限必须在计划周期内')
                return
              }
            }
            let obj = JSON.parse(JSON.stringify(this.dialogForm))
            obj.checkPlanSetDtoList.forEach((item)=>{
              item.checkBasisIds = item.checkBasisIds+'';
            })
            let newData = {
              planTitle:obj.planTitle,
              checkTypeName:obj.checkTypeName,
              checkTypeValue:obj.checkTypeValue,
              crossCheck:obj.crossCheck,
              checkRange:obj.checkRange,
              subIds:obj.checkRange == 1 ? '' : obj.subIds + '',
              subjectNum:obj.subjectNum,
              cycleStartTime:obj.dateRange[0],
              cycleEndTime:obj.dateRange[1],
              checkGroupId:obj.checkGroupId,
              checkGroupName:obj.checkGroupName,
              checkDemand:obj.checkDemand,
              checkPlanSetDtoList:obj.checkPlanSetDtoList,
              uploadDtoList:obj.uploadDtoList,
            }
            if(obj.planId){
              newData.planId = obj.planId;
              securityCheckPlanUpdate(newData).then(response => {
                this.msgSuccess(response.message)
                this.$parent.tableButton(6);
              });
            }else{
              if(this.schoolCollegeType == 'school'){
                newData.checkCategory = 1;
              }else if(this.schoolCollegeType == 'college'){
                newData.checkCategory = 2;
              }
              securityCheckPlanAdd(newData).then(response => {
                this.msgSuccess(response.message)
                this.$parent.tableButton(6);
              });
            }
          }
        })
      },
      //计划详情
      securityCheckPlanFindCheckPlan(){
        securityCheckPlanFindCheckPlan({planId:this.propsData.planId}).then(response => {
          response.data.checkPlanSetDtoList.forEach((item)=>{
            item.checkBasisIds = item.checkBasisIds.split(',');
          })
          let obj = {
            planId:response.data.planId,
            planTitle:response.data.planTitle,
            checkCategory:response.data.checkCategory,
            checkTypeName:response.data.checkTypeName,
            checkTypeValue:response.data.checkTypeValue,
            crossCheck:response.data.crossCheck,
            checkRange:response.data.checkRange,
            subIds:response.data.checkRange == 1 ? [] : response.data.subIds.split(','),
            subjectNum:response.data.subjectNum,
            dateRange:[response.data.cycleStartTime,response.data.cycleEndTime],
            checkGroupId:response.data.checkGroupId,
            checkGroupName:response.data.checkGroupName,
            checkDemand:response.data.checkDemand,
            checkPlanSetDtoList:response.data.checkPlanSetDtoList,
            uploadDtoList:response.data.uploadDtoList,
          };
          this.$set(this,'supervisorOptions',[{groupId:response.data.checkGroupId,groupName:response.data.checkGroupName,}]);
          this.$set(this,'dialogForm',obj);
        });
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(res) {
        if(this.dialogForm.uploadDtoList.length>4){
          this.msgError('已到达上传数量上限')
          return
        }
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let obj ={
          fileName:this.upDataName,
          fileUrl:res.data.url,
          fileType:1,
          source:1,
        };
        this.dialogForm.uploadDtoList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        let num = 0;
        for(let i=0;i<file.name.length;i++){
          if(file.name[i] == '.'){
            num++
          }
        }
        if(num != 1){
          this.msgError('文件名称不能包含 " . "')
          return false
        }
        if (file.type == 'application/pdf' || file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'|| file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
          if(file.size> 5250000){
            this.msgError('上传大小不能超过5M')
            return false
          }
          this.upDataName = file.name;
          type = true;
        }else{
          this.msgError('只能上传docx/xlsx/pdf格式')
          type = false;
        }
        return type;
      },
      //删除已上传文件
      delUploadFile(index,row){
        let self = this;
        self.$confirm('是否确认删除 '+row.fileName+' ?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          //删除
          self.dialogForm.uploadDtoList.splice(index,1)
        }).then(() => {
        }).catch(() => {
        })
      },
      // 单个下载按钮
      downloadButton(item){
        this.downloadUrl(item.fileUrl,item.fileName);
      },
      //预览文件
      lookUploadFile(item){
        //判断类型
        let type = '';
        if(item.fileUrl.split('.')[1] == 'docx'){
          type = 'docx'
        }else if(item.fileUrl.split('.')[1] == 'xlsx'){
          type = 'excel'
        }else if(item.fileUrl.split('.')[1] == 'pdf'){
          type = 'pdf'
        }
        let url = localStorage.getItem('fileBrowseEnvironment')+item.fileUrl;
        this.$refs['fullScreenFileLook'].initialize(item.fileName,url,type);
      },
      //检查范围切换
      checkRangeChange(val){
        if(val == 1){
          this.laboratorySubRelInfoGetAllSubNum();
        }else if(val == 3){
          this.$set(this.dialogForm,'subjectNum',this.dialogForm.subIds.length);
        }
      },
      //实验室选择相关
      subCheckButton(type,obj){
        if(type == 1){
          //新增-编辑
          if(this.lookInfoType){
            //查看
            this.$set(this,'subCheckData',{
              subIds:this.dialogForm.subIds,
              showType:true,
            });
          }else{
            //编辑
            this.$set(this,'subCheckData',{
              subIds:this.dialogForm.subIds,
              showType:false,
            });
          }
          this.$set(this,'subCheckType',true);
        }else if(type == 3){
          //提交
          this.$set(this.dialogForm,'subIds',obj);
          this.$set(this.dialogForm,'subjectNum',obj.length);
          this.$set(this,'subCheckType',false);
          this.$set(this,'subCheckData',{});
        }else if(type == 4){
          //关闭
          this.$set(this,'subCheckType',false);
          this.$set(this,'subCheckData',{});
        }
      },
      //查询全校实验室数量
      laboratorySubRelInfoGetAllSubNum(){
        laboratorySubRelInfoGetAllSubNum({}).then(response => {
          this.$set(this.dialogForm,'subjectNum',response.data.subCount);
        });
      },
      //查询历史标题列表
      checkPlanGetHistoryPlanTitles(){
        checkPlanGetHistoryPlanTitles({}).then(response => {
          let list = [
            {planTitle:"春季开学实验室安全检查",type:false,},
            {planTitle:"实验室安全交叉互检",type:false,},
            {planTitle:"重点学院实验室安全检查",type:false,},
            {planTitle:"实验室安全检查与专项整治集中检查",type:false,},
            {planTitle:"实验室危化品隐患专项排查",type:false,},
            {planTitle:"暑假前实验室安全检查",type:false,},
            {planTitle:"秋季学期末实验室安全检查",type:false,},
          ];
          for(let i=0;i<response.data.length;i++){
            list.push({planTitle:response.data[i].planTitle,type:true,planId:response.data[i].planId});
          }
          this.$set(this,'leftTitleList',list);
        });
      },
      //历史标题删除
      checkPlanHideHistoryPlanTitle(item){
        checkPlanHideHistoryPlanTitle({checkPlanId:item.planId}).then(response => {
          this.msgSuccess(response.message)
          this.checkPlanGetHistoryPlanTitles();
        });
      },
      //检查依据-下拉列表
      securityCheckBasisGetList(){
        securityCheckBasisGetList({}).then(response => {
          response.data.unshift({
            basisName:'全部检查项目',
            basisId:'0',
          })
          this.$set(this,'inspectSource',response.data);
        });
      },
      //选中检查依据
      checkBasis(val,index){
        if(val[val.length-1] == '0'){
          this.$set(this.dialogForm.checkPlanSetDtoList[index],'checkBasisIds',['0']);
        }else if (val[4]){
          val.splice(0,1)
        }else{
          let type = false;
          val.forEach((item)=>{
            if(item == 0){
              type = true;
            }
          })
          if(type){
            this.$set(this.dialogForm.checkPlanSetDtoList[index],'checkBasisIds',[val[val.length-1]]);
          }
        }
      },
      //查看成员列表
      lookMemberList(){
        if(this.lookMemberType){
          this.$set(this,'lookMemberType',false);
        }else{
          this.$set(this,'memberQueryParams',{
            page:1,
            pageSize:20,
          });
          this.$set(this,'lookMemberType',true);
          if (this.dialogForm.planId){
            this.securityMemberPlanMemberList();
          }else{
            this.securityCheckGroupMemberGroupMemberList();
          }
        }
      },
      getUserList(){
        if (this.dialogForm.planId){
          this.securityMemberPlanMemberList();
        }else{
          this.securityCheckGroupMemberGroupMemberList();
        }
      },
      //督导组成员查询
      securityCheckGroupMemberGroupMemberList(){
        let obj = JSON.parse(JSON.stringify(this.memberQueryParams))
        obj.checkGroupId = this.dialogForm.checkGroupId
        securityCheckGroupMemberGroupMemberList(obj).then(response => {
          response.data.records.forEach((item)=>{
            if(item.isAdmin){
              this.$set(this,'memberUserName',item.userName)
            }
          });
          this.$set(this,'memberData',response.data.records);
          this.$set(this,'memberTotal',response.data.total);
        });
      },
      //计划内督导组成员查询
      securityMemberPlanMemberList(){
        let obj = JSON.parse(JSON.stringify(this.memberQueryParams))
        obj.planId = this.dialogForm.planId
        securityMemberPlanMemberList(obj).then(response => {
          response.data.records.forEach((item)=>{
            if(item.isAdmin){
              this.$set(this,'memberUserName',item.userName)
            }
          });
          this.$set(this,'memberData',response.data.records);
          this.$set(this,'memberTotal',response.data.total);
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .projectAddPage{
    .content-box{
      flex:1;
      display: flex;
      overflow: hidden;
      .content-left-box{
        width:306px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .content-left-title-box{
          margin:0 35px 0 21px;
          display: flex;
          border-bottom:1px solid #E0E0E0;
          .iconfont{
            display: block;
            width:14px;
            height:11px;
            margin:30px 18px 0 20px;
            color:#0183FA;
            font-size:16px;
          }
          p{
            line-height:73px;
            color:#0183FA;
            font-size:16px;
          }
        }
        .content-left-for-max-box{
          padding:10px 0;
          .content-left-for-title-box{
            display: flex;
            margin:0 10px 10px 10px;
            padding:0 10px 0 10px;
            cursor: pointer;
            p:nth-child(1){
              height:40px;
              line-height: 40px;
              font-size:16px;
              flex:1;
              /*单行省略号*/
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            p:nth-child(2){
              width:18px;
              height:18px;
              font-size:18px;
              margin:11px 0 0 10px;
              font-weight:700;
              color:#0183FA;
            }
          }
          .content-left-for-title-box:hover{
            background: rgba(1,131,250,0.2);
            color:#0183FA;
          }
        }
      }
      .content-right-box{
        flex:1;
        display: flex;
        flex-direction: column;
        border-left: 1px dashed #D8D8D8;
        padding:20px 60px 20px 70px;
        position: relative;
        .corner-mark-img{
          position: absolute;
          top:0;
          left:0;
          width:80px;
          height:80px;
        }
        .content-right-project-box{
          border:1px solid #E0E0E0;
          border-bottom:none;
          .project-title-p{
            height:40px;
            line-height:40px;
            padding:0 0 0 23px;
            font-size:16px;
            background: #F5F5F5;
            border-bottom:1px solid #E0E0E0;
          }
          .content-right-form-display{
            display: flex;
            .intersect-inspect-box{
              display: inline-block;
              width:100px;
              height:40px;
              border: 1px solid #E0E0E0;
              margin-left:20px;
              border-radius:6px;
              position: relative;
              cursor: pointer;
              p{
                text-align: center;
                line-height:40px;
                font-size:14px;
              }
              img{
                position: absolute;
                bottom:0;
                right:0;
                width:20px;
                height:20px;
              }
            }
            .intersect-inspect-check-box{
              border: 1px solid #0183FA;
              p{
                color:#0183FA;
              }
            }
            .sub-button-box{
              margin:0 20px 0 0;
              display: inline-block;
              border-radius:6px;
              cursor: pointer;
              width:100px;
              height:40px;
              border: 1px solid #0183FA;
              p{
                text-align: center;
                line-height:40px;
                font-size:14px;
                color:#0183FA;
              }
            }
            .sub-num-p{
              display: inline-block;
              font-size:14px;
              line-height:40px;
              color:#0183FA;
            }
            .date-range-right-box{
              display: flex;
              border-radius:4px;
              overflow: hidden;
              border:1px solid #E0E0E0;
              height:40px;
              margin-left:20px;
              p{
                width: 70px;
                height:40px;
                line-height:40px;
                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;
              }
            }
            ::v-deep .el-range-editor--medium.el-input__inner{
              height:40px;
            }
            .color-text{
              color:#999;
              line-height:40px;
              margin-left:34px;
              font-size:14px;
            }
            .overdue-check-box{
              display: flex;
              cursor: pointer;
              div{
                width:16px;
                height:16px;
                border-radius:50%;
                border:1px solid #FF6200;
                margin:12px 12px 12px 34px;
                p{
                  width:10px;
                  height:10px;
                  border-radius:50%;
                  background-color: #FF6200;
                  margin:2px;
                }
              }
              .overdue-p{
                line-height:40px;
                font-size:14px;
                color:#FF6200;
              }
            }
          }
          .avatar-uploader-button-box{
            display: flex;
            margin-bottom:20px;
            .avatar-uploader-button{
              width: 120px;
              height: 40px;
              line-height:40px;
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #0045AF;
              color:#0045AF;
            }
            .avatar-uploader-text{
              line-height:40px;
              font-size:14px;
              color:#999999;
              margin-left:30px;
            }
          }
          .up-data-table-box{
            width:820px;
            height:161px;
            display: flex;
            overflow: hidden;
          }
          .inspect-for-max-big-box{
            position: relative;
            overflow: hidden;
            border-bottom:1px solid #e0e0e0;
            .for-index-p{
              position: absolute;
              top:0;
              left:0;
              width:40px;
              height:30px;
              line-height:30px;
              text-align: center;
              font-size:16px;
              color:#fff;
              background-color: #0183FA;
              border-bottom-right-radius: 6px;
            }
            .del-button{
              cursor: pointer;
              position: absolute;
              right:0;
              bottom:0;
              width:40px;
              height:40px;
            }
          }
        }
        .add-button-p{
          cursor: pointer;
          border-radius:6px;
          display: block;
          border: 1px dashed #0183FA;
          color:#0183FA;
          width:450px;
          text-align: center;
          height:40px;
          line-height:36px;
          font-size:22px;
          font-weight:700;
          margin:20px auto;

        }
      }
      .user-button-span{
        display: inline-block;
        color:#0183FA;
        width:90px;
        border:1px solid #0183FA;
        border-radius:4px;
        line-height:38px;
        text-align: center;
        margin-left:20px;
        cursor: pointer;
      }
      .user-button-span:hover{
        color:#fff;
        background-color:#0183FA;
      }
      .checkDemand-textarea-p{
        line-height:20px;
        color:#333;
        background-color: #F5F5F5;
        border:1px solid #E0E0E0;
        border-radius:4px;
        width:450px;
        padding:10px 15px;
        font-size:14px;
        word-break: break-all;
      }
      ::v-deep .el-input.is-disabled .el-input__inner{
        background-color: #f5f5f5;
        border: 1px solid #E0E0E0;
        color:#333;
        cursor: auto;
      }
      ::v-deep .el-range-editor.is-disabled{
        background-color: #f5f5f5;
        border: 1px solid #E0E0E0;
        color:#333;
        cursor: auto;
      }
      ::v-deep .el-range-editor.is-disabled input{
        background-color: #f5f5f5;
        color:#333;
        cursor: auto;
      }
      ::v-deep .el-textarea.is-disabled .el-textarea__inner{
        background-color: #f5f5f5;
        border: 1px solid #E0E0E0;
        color:#333;
        cursor: auto;
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner{
        border-color: #1890ff;
        background: #1890ff;
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
        background: #fff;
      }
    }
  }
</style>
<style lang="scss">
  .memberData-dialog-box{
    .el-dialog__body{
      padding:20px 20px;
      .memberData-dialog-title-p{
        line-height:20px;
        font-size:14px;
        font-weight:700;
      }
      .memberData-dialog-user-p{
        line-height:20px;
        font-size:14px;
        margin:10px 0 20px;
      }
      .memberData-dialog-content-box{
        height:441px;
        display: flex;
        flex-direction:column;
        overflow: hidden;
      }
    }
  }
</style>