FE-V2-PC/src/views/comprehensive/personnel/onDutyConfiguration/index.vue

<template>
  <div class="app-container onDutyConfiguration">
    <div class="onDutyConfigurationPage" v-show="pageType === 1">
      <div class="left-page-max-big-box">
        <el-tree
          style="margin-right:10px;"
          :data="deptOptions"
          :props="defaultProps"
          icon-class=""
          node-key="id"
          :highlight-current="true"
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          @node-click="handleNodeClick"
        />
      </div>
      <p class="center-border-p"></p>
      <div class="right-page-max-big-box">
        <div class="top-button-max-box">
          <div class="yearMonthButtonBox">
            <p @click="yearMonthSwitchButton(1)" :class="yearMonthType===1?'left-button-one':'left-button-tow'">月度</p>
            <p @click="yearMonthSwitchButton(2)" :class="yearMonthType===2?'right-button-one':'right-button-tow'">年度</p>
          </div>
          <div class="year-month-data-button-box">
            <p class="year-month-subtract-button" @click="subtractDate"><</p>
            <p class="year-month-text-p" v-show="yearMonthType===1">{{yearMonthData.year}}-{{yearMonthData.month}}</p>
            <p class="year-month-text-p" v-show="yearMonthType===2">{{yearMonthData.year}}</p>
            <p class="year-month-add-button" @click="addDate">></p>
          </div>
          <p class="return-year-month-button inquire-button-one" v-show="yearMonthType===1" @click="returnPresent">回到本月</p>
          <p class="flex-p"></p>
          <p class="all-button add-button-one-90" @click="allButton">{{allButtonType?'取消全选':'全选'}}</p>
          <p class="add-button inquire-button-one" @click="addButton"
             v-hasPermi="['laboratory:duty:add']">+ 新增</p>
        </div>
        <div class="month-max-big-box scrollbar-box" v-if="yearMonthType === 1">
          <div class="month-week-box">
            <p class="for-week-box" v-for="item of weekList" :key="item.key">{{ item.value }}</p>
          </div>
          <div class="month-big-box">
            <div v-for="(year,index) in yearDate" v-if="year.year == yearMonthData.year && year.month == yearMonthData.month">
              <div class="for-month-max-big-box" v-for="(item,index) in year.list" :key="item.key"
                   :class="!item.disable&&!item.expire?'for-pointer':''" @click.stop="monthCheck(item)">
                <p class="for-month-top-big-box" :class="item.disable?'for-month-top-big-box-color':''">{{item.date}}</p>
                <div class="for-month-bottom-big-box" v-if="item.subSum>0&&!item.disable" @click.stop="goPage('info',item)">
                  <div class="for-month-bottom-left-min-box">
                    <p>已配置实验室：{{item.subSum}}</p>
                    <p>已配置人员：{{item.userSum}}</p>
                  </div>
                  <div class="for-month-bottom-right-min-box el-icon-arrow-right"></div>
                </div>
                <div class="position-img-box" v-if="!item.disable&&!item.expire">
                  <img src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png" v-if="item.checkType">
                  <img src="@/assets/ZDimages/personnelManagement/icon_xzqx_zc.png" v-else>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="year-max-big-box scrollbar-box" v-if="yearMonthType === 2">
          <div class="for-year-max-big-box" v-for="(year,index) in yearDate" :key="year.key" v-if="year.year == yearMonthData.year">
            <p class="year-name-p">{{year.month==1?'一月':(year.month===2?'二月':(year.month===3?'三月':(year.month===4?'四月':(
              year.month===5?'五月':(year.month===6?'六月':(year.month===7?'七月':(year.month===8?'八月':(year.month===9?'九月':(
              year.month===10?'十月':(year.month===11?'十一月':(year.month===12?'十二月':'')))))))))))}}</p>
            <div class="year-week-box">
              <p class="for-week-box" v-for="item of weekList" :key="item.key">{{ item.value }}</p>
            </div>
            <div class="year-big-box">
              <div class="for-year-big-box" v-for="(item,index) in year.list" :key="item.key"
                   :class="!item.disable&&!item.expire?'for-pointer':''" @click.stop="monthCheck(item)">
                <p class="for-year-top-big-box" :class="item.disable?'for-year-top-big-box-color':''">{{item.date}}</p>
                <div class="for-year-bottom-big-box" v-if="item.subSum>0&&!item.disable" @click.stop="goPage('info',item)">{{item.userSum}}人</div>
                <div class="position-img-box">
                  <img src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png" v-if="!item.disable&&!item.expire&&item.checkType">
                  <img src="@/assets/ZDimages/personnelManagement/icon_xzqx_zc.png" v-if="!item.disable&&!item.expire&&!item.checkType">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <info-page v-if="pageType === 2" :propsData="propsData"></info-page>
    <el-dialog title="值班配置" :visible.sync="addPageType" v-if="addPageType"
               width="1500px" append-to-body id="onDutyConfiguration-dialog-box">
      <div class="top-title-select-box">
        <div class="top-title-num-box">
          <p>日期：</p>
          <p>已选择{{checkList.length}}天</p>
        </div>
        <el-form :model="formData" ref="upForm" :rules="rules">
          <el-form-item label="实验室：" prop="subCheckList" class="form-item" label-width="80px">
            <el-cascader
              ref="subCascader"
              v-model="formData.subCheckList"
              :options="options"
              :props="{ multiple: true,
                        expandTrigger: 'hover',
                        value: 'id',
                        label: 'label'
                       }"
              collapse-tags
              clearable></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottom-dialog-max-big-box">
        <div class="bottom-dialog-left-max-big-box">
          <p class="bottom-dialog-left-title-p">值班人员配置</p>
          <div class="bottom-dialog-left-big-box">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
              <el-form-item label="关键字" prop="nickName" >
                <el-input
                  maxlength="10"
                  v-model="queryParams.nickName"
                  placeholder="姓名"
                  clearable
                />
              </el-form-item>
              <el-form-item label="类别" prop="userType">
                <el-select v-model="queryParams.userType" placeholder="请选择" clearable >
                  <el-option
                    v-for="dict in classOptions"
                    :key="dict.key"
                    :label="dict.value"
                    :value="dict.key"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <p class="inquire-button-one" @click="handleQuery">查询</p>
                <p class="reset-button-one" @click="resetQuery">重置</p>
              </el-form-item>
            </el-form>
            <el-table v-loading="loading" border :data="dataList">
              <el-table-column label="姓名" align="left" prop="nickName" show-overflow-tooltip/>
              <el-table-column label="类别" align="left" prop="userType" width="124" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.userType ==11?'教职工':(scope.row.userType ==22?'学生':'未定义')}}</span>
                </template>
              </el-table-column>
              <el-table-column label="电话" align="left" prop="phonenumber" width="227" show-overflow-tooltip/>
              <el-table-column label="部门" align="left" prop="deptName" width="200" show-overflow-tooltip/>
              <el-table-column label="" align="left" prop="createTime" width="130" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="button-box">
                    <p class="table-min-button" @click="addDataButton(scope.row)"
                       :class="scope.row.userCheckType?'no-check-button':''" style="margin-left:0!important;">{{scope.row.userCheckType?'已添加':'添加'}}</p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
        <div class="bottom-dialog-right-max-big-box">
          <p class="bottom-dialog-right-title-p">已选择人员({{userCheckList.length}}人)</p>
          <div class="bottom-dialog-right-for-max-box scrollbar-box">
            <div class="bottom-dialog-right-for-box" v-for="(item,index) in userCheckList" :key="index">
              <p>{{item.nickName}}({{item.userType==11?'教职工':(item.userType==22?'学生':'未定义')}})</p>
              <p class="el-icon-delete" @click="deleteDataButton(item,index)"></p>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: center;">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getListYmd,addXxpDuty,treeDeptSubSel,getUserDutyList } from '@/api/laboratory/onDutyConfiguration'
  import { treeselect } from "@/api/system/user_teacher";
  import infoPage from "./infoPage.vue";
  export default {
    name: 'index',
    components: {
      infoPage
    },
    data() {
      return {
        //页面状态切换
        pageType:1,
        //树状结构
        treeList:[],
        deptOptions:[],
        defaultProps: {
          children: "children",
          label: "label"
        },
        checkTreeId:null,
        //年月状态切换 1.月度  2.年度
        yearMonthType:1,
        //全选按钮状态
        allButtonType:false,
        //年月数据切换
        yearMonthData:{
          presentYear:null,
          presentMonth:null,
          presentDate:null,
          year:null,
          month:null,
        },
        //计算用日期
        shareDate: new Date(),
        newKey:0,
        weekList: [
          {
            key:"1",
            value:"周一",
          },
          {
            key:"2",
            value:"周二",
          },
          {
            key:"3",
            value:"周三",
          },
          {
            key:"4",
            value:"周四",
          },
          {
            key:"5",
            value:"周五",
          },
          {
            key:"6",
            value:"周六",
          },
          {
            key:"7",
            value:"周日",
          },
        ],
        //年日历
        yearDate:[],
        //已勾选数据
        checkList:[],
        //子页面传参数据
        propsData:{},
        //新增页面状态
        addPageType:false,
        //******************************选择实验室数据
        //新增数据
        formData:{
          subCheckList:[],
        },
        rules:{
          subCheckList: [
            { required: true, message: "请选择实验室", trigger: "change" },
            { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "change" },
          ],
        },
        props: { multiple: true },
        options: [],
        //已选择人员数据
        userCheckList:[],
        showSearch:true,
        loading:false,
        total:0,
        classOptions:[
          {key:'22',value:'学生'},
          {key:'11',value:'教职工'},
        ],
        queryParams:{
          pageNum: 1,
          pageSize:10,
          nickName:"",
          userType:"",
        },
        //列表数据
        dataList:[],
      }
    },
    created() {
      this.getTreeselect();
    },
    mounted() {

    },
    methods: {
      //查询
      handleQuery(){
        this.queryParams.pageNum = 1;
        this.getList();
      },
      //重置
      resetQuery(){
        this.$set(this,'queryParams',{
          pageNum:1,
          pageSize:20,
          nickName:"",
          userType:"",
        });
        this.handleQuery();
      },
      getList(){
        let self = this;
        this.loading = true;
        getUserDutyList(this.queryParams).then( response => {
          for(let i=0;i<response.rows.length;i++){
            let num = 0;
            for(let o=0;o<self.userCheckList.length;o++){
              if(response.rows[i].userId == self.userCheckList[o].userId){
                num++
              }
            }
            response.rows[i].userCheckType = num != 0;
          }
          this.$set(this,'dataList',response.rows);
          this.total =  response.total;
          this.loading = false;
        });
      },
      //获取树状实验室列表
      treeDeptSubSel(){
        treeDeptSubSel().then( response => {
          this.options = response.data;
          this.listForDel(this.options);
        })
      },
      listForDel(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(list[i].children){
            if(list[i].children[0]){
              if(list[i].subOrDept == 1){
                self.listForDel(list[i].children);
                if(!list[i].children[0]){
                  list.splice(i,1)
                  i--
                }
              }
            }else{
              if(list[i].subOrDept == 1){
                list.splice(i,1)
                i--
              }
            }
          }else{
            if(list[i].subOrDept == 1){
              list.splice(i,1)
              i--
            }
          }
        }
      },
      submitForm(){
        let self = this;
        this.$refs["upForm"].validate((valid) => {
          if (valid) {
            if(!this.userCheckList[0]){
              this.msgError('请选择值班人员')
              return
            }
            let obj = {
              dateList:this.checkList,
              subjectList:[],
              sysUserList:this.userCheckList,
            };
            let subList = this.$refs.subCascader.getCheckedNodes()
            subList.forEach(item=>{
              console.log('item',item);
              if(!item.children[0]){
                obj.subjectList.push({
                  id:item.data.subOrDeptId,
                  deptId:item.data.parentId,
                  deptName:item.data.parentName,
                  name:item.label
                })
              }
            })
            addXxpDuty(obj).then( response => {
              this.msgSuccess(response.msg);
              this.addPageType = false;
              this.initializationDate();
            })
          }
        })
      },
      cancel(){
        this.addPageType = false;
      },
      addDataButton(row){
        if(!row.userCheckType){
          row.userCheckType = true;
          this.userCheckList.push(row);
        }
      },
      deleteDataButton(item,index){
        let self = this;
        for(let i=0;i<self.dataList.length;i++){
          if(item.userId == self.dataList[i].userId){
            self.dataList[i].userCheckType = false;
          }
        }
        this.userCheckList.splice(index,1);
      },
      /************************日历页面**************************/
      //查询值班列表
      getListYmd(){
        let self = this;
        let obj = {
          deptId:this.checkTreeId,
          // beginTime:this.yearDate[0].list[0].value,
          beginTime:"",
          // endTime:this.yearDate[this.yearDate.length-1].list[this.yearDate[this.yearDate.length-1].list.length-1].value,
          endTime:"",
        };
        if(this.yearMonthType == 1){
          for(let i=0;i<self.yearDate.length;i++){
            if(self.yearDate[i].year == self.yearMonthData.year &&
               self.yearDate[i].month == self.yearMonthData.month){
              obj.beginTime = self.yearDate[i].list[0].value;
              obj.endTime = self.yearDate[i].list[self.yearDate[i].list.length-1].value;
            }
          }
        }else if(this.yearMonthType == 2){
          let list = [];
          for(let i=0;i<self.yearDate.length;i++){
            if(self.yearDate[i].year == self.yearMonthData.year){
              list.push(self.yearDate[i]);
            }
          }
          obj.beginTime = list[0].list[0].value;
          obj.endTime = list[list.length-1].list[list[list.length-1].list.length-1].value;
        }
        getListYmd(obj).then(response => {
          for(let o=0;o<self.yearDate.length;o++){
            for(let x=0;x<self.yearDate[o].list.length;x++){
              let subSum = 0;
              let userSum = 0;
              for(let i=0;i<response.rows.length;i++){
                if(self.yearDate[o].list[x].value == response.rows[i].dutyTime){
                  subSum = response.rows[i].subSum
                  userSum = response.rows[i].userSum
                }
              }
              self.yearDate[o].list[x].subSum = subSum
              self.yearDate[o].list[x].userSum = userSum
            }
          }


          // for(let i=0;i<response.rows.length;i++){
          //   let year = parseInt(response.rows[i].dutyTime.split('-')[0]);
          //   let month = parseInt(response.rows[i].dutyTime.split('-')[1]);
          //   for(let o=0;o<self.yearDate.length;o++){
          //     if(self.yearDate[o].year == year && self.yearDate[o].month == month){
          //       for(let x=0;x<self.yearDate[o].list.length;x++){
          //         if(self.yearDate[o].list[x].value == response.rows[i].dutyTime){
          //           self.yearDate[o].list[x].subSum = response.rows[i].subSum
          //           self.yearDate[o].list[x].userSum = response.rows[i].userSum
          //         }
          //       }
          //     }
          //   }
          // }
        });
      },
      //时间初始化
      initializationDate(){
        let myDate = new Date();
        let obj = {
          presentYear:myDate.getFullYear(),
          presentMonth:myDate.getMonth()+1,
          presentDate:parseInt(this.stringify(myDate.getFullYear(),myDate.getMonth(), myDate.getDate()).replace(/-/g,"")),
          year:myDate.getFullYear(),
          month:myDate.getMonth()+1,
        };
        this.$set(this,'yearMonthData',obj);
        this.$set(this,'yearDate',[]);
        this.$set(this,'checkList',[]);
        if(this.generateDate()){
          //后端数据回填
          this.allCheckJudgment();
          this.getListYmd();
        }
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        let self = this;
        treeselect({}).then(response => {
          this.deptOptions = response.data;
          this.$nextTick(function(){
            if(response.data[0]){
              self.$refs.tree.setCurrentKey(response.data[0].id);
              self.$set(self,'checkTreeId',response.data[0].id);
              self.initializationDate();
            }
          })
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        if(data.id != this.checkTreeId){
          this.$set(this,'checkTreeId',data.id);
          this.initializationDate();
        }
      },
      //页面切换
      goPage(type,item){
        if(type == 'get'){
          this.getListYmd();
          this.$set(this,'pageType',1)
        }else if(type=='info'){
          if(!this.hasPermiDom(['laboratory:duty:query'])){
            this.msgError('您没有相关权限,无法查看.')
            return
          }
          let obj = {
            checkTreeId:this.checkTreeId,
            time:item.value,
            type:item.disable,
          }
          this.$set(this,'propsData',obj)
          this.$set(this,'pageType',2)
        }
      },
      //勾选
      monthCheck(item){
        if(!item.disable&&!item.expire){
          item.checkType = !item.checkType;
          this.allCheckJudgment();
        }
      },
      //全选方法
      allButton(){
        let self = this;
        if(this.yearMonthType === 1){
          for(let i=0;i<self.yearDate.length;i++){
            if(self.yearDate[i].year == self.yearMonthData.year&&
              self.yearDate[i].month == self.yearMonthData.month){
              for(let o=0;o<self.yearDate[i].list.length;o++){
                if (!self.yearDate[i].list[o].disable) {
                  self.yearDate[i].list[o].checkType = !self.allButtonType;
                }
              }
            }
          }
          self.allButtonType = !self.allButtonType;
        }else{
          for(let i=0;i<self.yearDate.length;i++){
            if(self.yearDate[i].year == self.yearMonthData.year){
              for(let o=0;o<self.yearDate[i].list.length;o++){
                if (!self.yearDate[i].list[o].disable) {
                  self.yearDate[i].list[o].checkType = !self.allButtonType;
                }
              }
            }
          }
          self.allButtonType = !self.allButtonType;
        }
      },
      //全选状态判定
      allCheckJudgment(){
        let self = this;
        let age = 0;
        let num = 0;
        if(this.yearMonthType == 1){
          for(let i=0;i<self.yearDate.length;i++){
            if(self.yearDate[i].year == self.yearMonthData.year&&
              self.yearDate[i].month == self.yearMonthData.month){
              for(let o=0;o<self.yearDate[i].list.length;o++){
                if (!self.yearDate[i].list[o].disable) {
                  age++
                  if(self.yearDate[i].list[o].checkType){
                    num++
                  }
                }
              }
            }
          }
        }else{
          for(let i=0;i<self.yearDate.length;i++){
            if(self.yearDate[i].year == self.yearMonthData.year){
              for(let o=0;o<self.yearDate[i].list.length;o++){
                if (!self.yearDate[i].list[o].disable) {
                  age++
                  if(self.yearDate[i].list[o].checkType){
                    num++
                  }
                }
              }
            }
          }
        }
        if(age == num){
          this.$set(this,'allButtonType',true)
        }else{
          this.$set(this,'allButtonType',false)
        }
      },
      //新增方法
      addButton(){
        let self = this;
        let list = [];
        for(let i=0;i<self.yearDate.length;i++){
          for(let o=0;o<self.yearDate[i].list.length;o++){
            if (!self.yearDate[i].list[o].disable&&self.yearDate[i].list[o].checkType) {
              list.push(self.yearDate[i].list[o].value)
            }
          }
        }
        if(!list[0]){
          this.msgError('请选择日期')
        }else{
          this.$set(this,'checkList',list);
          this.$set(this,'userCheckList',[]);
          this.$set(this.formData,'subCheckList',[]);
          this.resetQuery();
          this.treeDeptSubSel();
          this.$set(this,'addPageType',true);
        }
      },
      //返回当前时间
      returnPresent(){
        this.$set(this.yearMonthData,'year',this.yearMonthData.presentYear);
        this.$set(this.yearMonthData,'month',this.yearMonthData.presentMonth);
        this.getListYmd();
      },
      //年或月增加
      addDate(){
        if(this.yearMonthType == 1){
          if(this.yearMonthData.month<12){
            this.yearMonthData.month++
          }else{
            if(this.yearMonthData.year>=this.yearMonthData.presentYear+1){
              return
            }
            this.yearMonthData.year++
            this.$set(this.yearMonthData,'month',1);
          }
        }else if(this.yearMonthType == 2){
          if(this.yearMonthData.year>=this.yearMonthData.presentYear+1){
            return
          }
          this.yearMonthData.year++
        }
        this.allCheckJudgment();
        this.getListYmd();
      },
      //年或月减少
      subtractDate(){
        if(this.yearMonthType == 1){
          if(this.yearMonthData.month>1){
            this.yearMonthData.month--
          }else{
            if(this.yearMonthData.year==this.yearMonthData.presentYear){
              return
            }
            this.yearMonthData.year--
            this.$set(this.yearMonthData,'month',12);
          }
        }else if(this.yearMonthType == 2){
          if(this.yearMonthData.year==this.yearMonthData.presentYear){
            return
          }
          this.yearMonthData.year--
        }
        this.allCheckJudgment();
        this.getListYmd();
      },
      //年月展示切换按钮
      yearMonthSwitchButton(type){
        if(this.yearMonthType != type){
          this.$set(this,'yearMonthType',type);
          this.allCheckJudgment();
          this.getListYmd();
        }
      },
      // 生成日历
      generateDate() {
        let self = this;
        let myDate = new Date();
        let year = myDate.getFullYear();
        let newTimeList = [];
        self.newKey = 0;
        for(let o=0;o<2;o++){
          for(let i=0;i<12;i++){
            self.newKey++
            newTimeList.push(self.setCurrentYearMonth(year,i))
          }
          year++
        }
        this.$set(this,'yearDate',newTimeList);
        return true;
      },
      // 设置日历显示的日期（年-月）
      setCurrentYearMonth(year,month) {
        let showYearMonth = {
          year,
          month,
        };
        return this.createCalendar(showYearMonth);
      },
      // 创建当前月对应日历的日期数据
      createCalendar(showYearMonth) {
        const oneDayMS = 24 * 60 * 60 * 1000;
        let { year, month } = showYearMonth;
        let obj = {
          key:this.newKey,
          time:year+'-'+(month+1),
          year:year,
          month:month+1,
          list:[],
        }
        let firstDay = this.getFirstDayByMonths(year, month);
        let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
        let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;
        let lastDay = this.getLastDayByMonth(year, month);
        let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
        let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
        while (begin <= end) {
          this.shareDate.setTime(begin);
          let year = this.shareDate.getFullYear();
          let curMonth = this.shareDate.getMonth();
          let date = this.shareDate.getDate();
          let time = this.stringify(year, curMonth, date).replace(/-/g,"");
          obj.list.push({
            year: year,
            month: curMonth + 1,
            date: date,
            weeks:this.calculationWeeks(year, curMonth, date),
            value: this.stringify(year, curMonth, date),
            key:this.newKey+''+time,
            time:time,
            // disable: parseInt(time) < this.yearMonthData.presentDate?true:(curMonth !== month),
            disable: curMonth !== month,
            expire:parseInt(time) < this.yearMonthData.presentDate ? true : false,
            checkType:false,
            subSum:0,
            userSum:0,
          });
          begin += oneDayMS;
        }
        return obj;
      },
      //计算当前是周几
      calculationWeeks(year, curMonth, date){
        let now = new Date(this.stringify(year, curMonth, date));
        let day = now.getDay();
        let weeks = new Array(
          "7",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6"
        );
        return weeks[day];
      },
      // 格式化时间
      stringify(year, month, date) {
        return [year, this.pad(month + 1), this.pad(date)].join("-");
      },
      // 对小于 10 的数字，前面补 0
      pad(str) {
        return str < 10 ? `0${str}` : str;
      },
      // 当前月的第一天是星期几
      getFirstDayByMonths(year, month) {
        return new Date(year, month, 1).getDay();
      },
      // 当前月的最后一天是星期几
      getLastDayByMonth(year, month) {
        return new Date(year, month + 1, 0).getDay();
      },
    }
  }
</script>

<style scoped lang="scss">
.onDutyConfiguration{
  display: flex;
  flex-direction: column;
  font-weight:500;
  *{
    margin:0;
    padding:0;
  }
  .onDutyConfigurationPage{
    flex:1;
    display: flex;
    overflow: hidden;
    .left-page-max-big-box{
      width:250px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding:36px 0 36px 10px;
      .tree-box {
        flex: 1;
        .terr-max-box:nth-child(1){
          margin:0;
        }
        .terr-max-box {
          margin-top: 20px;
          .max-name-box {
            display: flex;
            margin-right: 20px;
            margin-bottom: 10px;
            color: #D8D8D8;
            font-size: 20px;
            .max-name {
              flex: 1;
              margin-right: 19px;
              color: #333;
              font-size: 16px;
              line-height: 16px;
              margin-top: 3px;
              cursor: pointer;
              overflow: hidden;
            }
          }
          .terr-big-box {
            margin-left: 30px;
            .big-name-box {
              cursor: pointer;
              height: 40px;
              line-height: 40px;
              display: flex;
              font-size: 16px;
              color: #333;
              img {
                width: 16px;
                height: 16px;
                margin-top: 12px;
                margin-right: 4px;
              }
              .name-p {
                flex: 1;
                overflow: hidden;
              }
            }
            .terr-min-box {
              margin-left: 30px;
              .min-name {
                cursor: pointer;
                height: 40px;
                line-height: 40px;
                display: flex;
                font-size: 16px;
                color: #333;
                overflow: hidden;
              }
            }
          }
          .check-color {
            color: #0183FA !important;
          }
        }
      }
      .tree-null-p {
        text-align: center;
        line-height: 100px;
        flex: 1;
        color: #999;
      }
    }
    .center-border-p{
      border-right:1px dashed #A2A2A2;
      margin:36px 35px 36px 0;
    }
    .right-page-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      .top-button-max-box{
        height:87px;
        padding:21px 0 26px 0;
        display: flex;
        border-bottom:1px solid #E0E0E0;
        font-size:14px;
        .yearMonthButtonBox{
          width:200px;
          height:40px;
          display: flex;
          p{
            text-align: center;
            line-height:38px;
            width:100px;
            cursor: pointer;
          }
          p:nth-child(1){
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
          }
          p:nth-child(2){
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
          }
          .left-button-one{
            background: #0183FA;
            border:1px solid #0183FA;
            color:#fff;
          }
          .left-button-tow{
            color:#333333;
            border:1px solid #E0E0E0;
            border-right:none;
          }
          .right-button-one{
            background: #0183FA;
            border:1px solid #0183FA;
            color:#fff;
          }
          .right-button-tow{
            color:#333333;
            border:1px solid #E0E0E0;
            border-left:none;
          }
        }
        .year-month-data-button-box{
          display: flex;
          margin:0 33px 0 39px;
          p{
            line-height:38px;
            text-align: center;
          }
          .year-month-subtract-button{
            border:1px solid #E0E0E0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            width:38px;
            cursor: pointer;
          }
          .year-month-text-p{
            border-top:1px solid #E0E0E0;
            border-bottom:1px solid #E0E0E0;
            width:150px;
          }
          .year-month-add-button{
            border:1px solid #E0E0E0;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            width:38px;
            cursor: pointer;
          }
        }
        .return-year-month-button{
          width:100px;
          height:40px;
          line-height:38px;
        }
        .flex-p{
          flex:1;
        }
        .all-button{
          width:80px;
          height:40px;
          margin-right:8px;
          line-height:38px;
        }
        .add-button{
          width:80px;
          height:40px;
          margin-right:23px;
          line-height:38px;
        }
      }
      .month-max-big-box{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        flex:1;
        padding:10px 0 30px;
        .month-week-box{
          display: flex;
          overflow: hidden;
          font-size:0;
          .for-week-box{
            font-size:14px;
            width:180px;
            text-align: center;
            line-height:60px;
            border-bottom:1px solid #E0E0E0;
          }
        }
        .month-big-box{
          border-left:1px solid #E0E0E0;
          font-size:0;
          .for-month-max-big-box{
            overflow: hidden;
            font-size:16px;
            width:180px;
            height:110px;
            display: inline-block;
            border-right:1px solid #E0E0E0;
            border-bottom:1px solid #E0E0E0;
            position: relative;
            .for-month-top-big-box{
              width:180px;
              height:50px;
              line-height:50px;
              text-align: center;
              font-size:16px;
              color:#333;
            }
            .for-month-top-big-box-color{
              color:#E0E0E0;
            }
            .for-month-bottom-big-box{
              height:60px;
              background: rgba(1,131,250,0.2);
              color:#0183FA;
              display: flex;
              cursor: pointer;
              .for-month-bottom-left-min-box{
                flex: 1;
                font-size:14px;
                padding:10px 0 0 10px;
                p{
                  line-height:20px;
                }
              }
              .for-month-bottom-right-min-box{
                width:24px;
                text-align: center;
                line-height:60px;
                font-size:12px;
                font-weight:900;
              }
            }
            .position-img-box{
              position: absolute;
              left:0;
              top:0;
              width:50px;
              height:50px;
              img{
                width:14px;
                height:14px;
                margin: 18px;
              }
            }
          }
        }
      }
      .year-max-big-box{
        flex:1;
        padding:30px 0;
        .for-year-max-big-box{
          vertical-align:top;
          width:596px;
          display: inline-block;
          margin:0 42px 40px 0;
          overflow: hidden;
          .year-name-p{
            text-align: center;
            font-size:16px;
            background: #CCE6FE;
            color:#0183FA;
            line-height:40px;
            border-top-left-radius:4px;
            border-top-right-radius:4px;
          }
          .year-week-box{
            overflow: hidden;
            font-size:0;
            background: rgba(224,224,224,0.2);
            .for-week-box{
              width:85px;
              line-height:40px;
              text-align: center;
              display: inline-block;
              font-size:12px;
            }
          }
          .year-big-box{
            border-top:1px solid #E0E0E0;
            border-left:1px solid #E0E0E0;
            overflow: hidden;
            font-size:0;
            .for-year-big-box{
              display: inline-block;
              overflow: hidden;
              width:85px;
              height:60px;
              border-right:1px solid #E0E0E0;
              border-bottom:1px solid #E0E0E0;
              position: relative;
              .for-year-top-big-box{
                flex:1;
                font-size:12px;
                color:#333;
                line-height:30px;
                text-align: center;
              }
              .for-year-top-big-box-color{
                color:#E0E0E0;
              }
              .for-year-bottom-big-box{
                line-height:30px;
                font-size:14px;
                text-align: center;
                background: #CCE6FE;
                color:#0183FA;
                cursor: pointer;
              }
              .position-img-box{
                position: absolute;
                top:0;
                left:0;
                width:30px;
                height:30px;
                img{
                  width:14px;
                  height:14px;
                  margin:8px;
                }
              }
            }
          }
        }
      }
      .for-pointer{
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="scss">
  #onDutyConfiguration-dialog-box{
    .top-title-select-box{
      display: flex;
      border-bottom: 1px dashed #D8D8D8;
      .top-title-num-box{
        display: flex;
        margin-left:30px;
        p{
          font-size:14px;
          line-height: 40px;
          color:#333;
          margin-right:10px;
        }
        p:nth-child(2){
          width:250px;
          height:40px;
          background: #F5F5F5;
          padding-left:22px;
          border-radius:4px;
        }
      }
    }
    .bottom-dialog-max-big-box{
      display: flex;
      width:1460px;
      height:430px;
      .bottom-dialog-left-max-big-box{
        width:920px;
        height:430px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-right:47px;
        .bottom-dialog-left-title-p{
          line-height:72px;
          color:#043581;
          font-size:18px;
        }
        .bottom-dialog-left-big-box{
          overflow: hidden;
          flex:1;
          display: flex;
          flex-direction: column;
          padding-left:30px;
        }
        .no-check-button{
          color:#666!important;
        }
      }
      .bottom-dialog-right-max-big-box{
        margin-top:30px;
        width:540px;
        height:400px;
        border-left: 1px dashed #D8D8D8;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .bottom-dialog-right-title-p{
          height:40px;
          line-height:40px;
          margin-left:47px;
          width:445px;
          background: rgba(1,131,250,0.1);
          color: #0183FA;
          font-size:16px;
          padding-left:19px;
        }
        .bottom-dialog-right-for-max-box{
          height:360px;
          .bottom-dialog-right-for-box{
            display: flex;
            width:445px;
            margin-left:47px;
            p:nth-child(1){
              font-size:14px;
              line-height:40px;
              padding-left:19px;
              overflow: hidden;
              flex:1;
            }
            p:nth-child(2){
              width:40px;
              margin-right:20px;
              line-height:40px;
              text-align: center;
              font-size:14px;
              color:#666;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .onDutyConfiguration{
    .el-tree-node__label{
      font-size:16px;
    }
    .el-tree-node__content{
      height:30px;
      line-height: 30px;
    }
    .el-tree-node__expand-icon{
      color:#333;
      font-size:16px;
      padding:0;
      margin-right:3px;
    }
    .el-tree-node__expand-icon.is-leaf{
      color: transparent;
    }
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
      background-color:#ffffff;
      color:#0183FA;
    }
  }
</style>