Vue_New/src/xt_pages/medicalScheduling/index.vue

<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs="crumbs"></bread-crumb>
            <div style="display:flex;align-items:center">
                <el-button type="primary">清除</el-button>
                <el-button type="primary">复制</el-button>
                <el-button type="primary" icon="el-icon-printer" @click="toPrint">打印</el-button>
            </div>
        </div>
        <div class="app-container">
            <div class="cell clearfix">
                <el-input
                size="small"
                style="width: 150px;"
                class="filter-item"
                v-model.trim="keywords"
                placeholder="请输入医护人员姓名"
                />
                <el-button
                size="small"
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="toSearch"
                >搜索</el-button
                >
                <el-select style="margin-left:10px;width:150px;" v-model="typeValue" placeholder="请选择" @change="changeOption">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
               <el-button @click="lastclick" type="text" style="margin:0 10px;">&lt;上一周({{ weekNum - 1 }})</el-button>
                <div class="dateBox">{{ weekDayArr[0] }}-{{ weekDayArr[6] }}({{ weekNum }})</div>
                <el-button @click="nextclick" type="text" style="margin:0 10px;">下一周({{ weekNum + 1 }})&gt;</el-button>
            </div>
            <div style="display:flex;justify-content: space-between;">
                <div style="width: 70%">
                    <el-table :data="tableData" border :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)', color: '#606266'}" :row-style="{ color: '#303133' }"  @cell-click="clickThis">
                        <el-table-column prop="name" label="医护姓名" style="width:16%" align="center">
                            <template slot-scope="scope">
                                 {{scope.row.user_name}}
                            </template>
                        </el-table-column>
                        <el-table-column label="周一" style="width:14%" align="center">
                            <template slot-scope="scope">
                                <div @click="hangdleClick(scope.row,scope.$index)">
                                    <el-dropdown trigger="click" @command="changeSchedule">
                                        <span class="el-dropdown-link">
                                       <span v-if="scope.row.class_index == 1">{{scope.row.class_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item  :command="item.id" icon="el-icon-plus" v-for="(item,index) in schedulelist" :key="index">{{item.class_name}}</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="周二" style="width:14%" align="center">
                             <template slot-scope="scope">
                                <div @click="hangdleClick(scope.row,scope.$index)">
                                    <el-dropdown trigger="click" @command="changeSchedule">
                                        <span class="el-dropdown-link">
                                       <span v-if="scope.row.class_index == 2">{{scope.row.class_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item  :command="item.id" icon="el-icon-plus" v-for="(item,index) in schedulelist" :key="index">{{item.class_name}}</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="周三" style="width:14%" align="center">
                             <template slot-scope="scope">
                                <div @click="hangdleClick(scope.row,scope.$index)">
                                    <el-dropdown trigger="click" @command="changeSchedule">
                                        <span class="el-dropdown-link">
                                        <span v-if="scope.row.class_index == 3">{{scope.row.class_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item  :command="item.id" icon="el-icon-plus" v-for="(item,index) in schedulelist" :key="index">{{item.class_name}}</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="周四" style="width:14%" align="center">
                             <template slot-scope="scope">
                                <div @click="hangdleClick(scope.row,scope.$index)">
                                    <el-dropdown trigger="click" @command="changeSchedule">
                                        <span class="el-dropdown-link">
                                        <span v-if="scope.row.class_index ==4">{{scope.row.class_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item  :command="item.id" icon="el-icon-plus" v-for="(item,index) in schedulelist" :key="index">{{item.class_name}}</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="周五" style="width:14%" align="center">
                             <template slot-scope="scope">
                                <div @click="hangdleClick(scope.row,scope.$index)">
                                    <el-dropdown trigger="click" @command="changeSchedule">
                                        <span class="el-dropdown-link">
                                        <span v-if="scope.row.class_index == 5">{{scope.row.class_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item  :command="item.id" icon="el-icon-plus" v-for="(item,index) in schedulelist" :key="index">{{item.class_name}}</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="周六" style="width:14%" align="center">
                             <template slot-scope="scope">
                                <div @click="hangdleClick(scope.row,scope.$index)">
                                    <el-dropdown trigger="click" @command="changeSchedule">
                                        <span class="el-dropdown-link">
                                        <span v-if="scope.row.class_index==6">{{scope.row.class_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item  :command="item.id" icon="el-icon-plus" v-for="(item,index) in schedulelist" :key="index">{{item.class_name}}</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="周日" style="width:14%" align="center">
                             <template slot-scope="scope">
                                <div @click="hangdleClick(scope.row,scope.$index)">
                                    <el-dropdown trigger="click" @command="changeSchedule">
                                        <span class="el-dropdown-link">
                                         <span v-if="scope.row.class_index == 0">{{scope.row.class_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item  :command="item.id" icon="el-icon-plus" v-for="(item,index) in schedulelist" :key="index">{{item.class_name}}</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="classBox">
                    <div class="classTitle">班种</div>
                    <div class="classMain">
                        <div v-for="(item,index) in schedulelist" :key="index">
                           <p>
                            {{item.class_name}}&nbsp;({{item.timeone_start}}~{{item.timeone_type}}{{item.timeone_end}} <span v-if="item.timetwo_start!=''">{{item.timetwo_start}}~{{item.timetwo_type}}{{item.timetwo_end}}</span> )
                           </p>
                        </div>
                        <el-checkbox style="text-align:center" v-model="isChecked">连续排班</el-checkbox>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import { getDoctorList,getScheduleList,addSchedule,getStaffScheduleList,getNextWeekList,getScheduleByDoctorId,toSearchScheduleList } from '@/api/doctorSchedule'
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
            crumbs: [
                { path: false, name: '医护排班' },
                { path: '/medicalScheduling/index', name: '医护排班' }
            ],
            keywords:'',
            options: [{
                value: '1',
                label: '全部'
            }, {
                value: '2',
                label: '医生'
            }, {
                value: '3',
                label: '护士'
            }],
            typeValue:'1',
            tableData: [],
            isChecked:true,
            schedulelist:[],
            weekNum:'',
            weekDayArr:[],
            todayDate:'',
            clen:7,
            nowYear: new Date().getFullYear(),
            schedule_week:0,
            docobj:{},
            class_name:"",
            doctorlist:[],
        }
    },
    methods:{
        search(){},
        toPrint(){
            this.$router.push({
                path: '/medicalScheduling/schedule/print',
                // query: { date: date }
            })
        },
      getDoctorList(){
        getDoctorList().then(response=>{
            if(response.data.state == 1){
                var list =  response.data.data.list
                console.log("医护列表",list)
                this.tableData = list
                this.doctorlist = list
                //获取班种列表
                this.getStaffScheduleList()
            }
        })
     },
     getScheduleList(){
       getScheduleList().then(response=>{
          if(response.data.state == 1){
             var schedulelist = response.data.data.scheduleList
             console.log("schedulelist",schedulelist)
             for(let i=0;i<schedulelist.length;i++){
                if(schedulelist[i].timeone_type == 1){
                    schedulelist[i].timeone_type = "当日"
                }
                if(schedulelist[i].timeone_type == 2){
                   schedulelist[i].timeone_type = "次日"
                }
               if(schedulelist[i].timetwo_type == 1){
                    schedulelist[i].timetwo_type = "当日"
                }
                if(schedulelist[i].timetwo_type == 2){
                   schedulelist[i].timetwo_type = "次日"
                }
             }
             this.schedulelist = schedulelist
          }
       }) 
     },
     hangdleClick(val,index){
      console.log("val=====",val)
      this.docobj = val
     },
     clickThis(row, column, cell, event){
        if(column.label == "周日"){
           this.schedule_week = 0
        }
        if(column.label == "周一"){
           this.schedule_week = 1
        }
        if(column.label=="周二"){
           this.schedule_week = 2
        }
        if(column.label=="周三"){
          this.schedule_week = 3
        }
        if(column.label=="周四"){
          this.schedule_week = 4
        }
        if(column.label == "周五"){
           this.schedule_week = 5
        }
        if(column.label == "周六"){
           this.schedule_week = 6
        }
     },
     changeSchedule(id){
         var class_name = ""
        for(let i=0;i<this.schedulelist.length;i++){
           if(id == this.schedulelist[i].id){
             class_name = this.schedulelist[i].class_name
           }
        }
        let arr = [...this.tableData]
        for(let i=0;i<arr.length;i++){
           if(this.docobj.id == arr[i].id){
              arr[i].class_name = class_name
              arr[i].class_index = this.schedule_week
           }
        }
        console.log("arr",arr)
        this.tableData = arr
        const params = {
          doctor_id:this.docobj.admin_user_id,
          doctor_type:this.docobj.user_type,
          schedule_type:id,
          schedule_week:this.schedule_week,
          start_time:this.getTimestamp(this.weekDayArr[0]),
          end_time:this.getTimestamp(this.weekDayArr[6])
        }
        console.log("params",params)
    //    return false
       addSchedule(params).then(response=>{
         if(response.data.state == 1){
             var schedule = response.data.data.schedule
             console.log("schedule",schedule)
             this.getStaffScheduleList()
           }
       })
     },
     formatDate(date){      
          var year = date.getFullYear()+'.'       
          var month = (date.getMonth()+1)+'.';
          var day = date.getDate();
          return year+month+day
        }, 
    formatDateTwo(date){      
          var year = date.getFullYear()+'.'       
          var month = (date.getMonth()+1)+'.';
          var day = date.getDate();
          return year+month+day
       }, 
     addDate(date,n){        
        date.setDate(date.getDate()+n);        
        return date;
      },  
        //
      setDate(date){           
        var week = date.getDay()-1;
        date = this.addDate(date,week*-1);
        this.currentFirstDate = new Date(date);
        for(var i = 0;i<this.clen; i++){     
            this.weekDayArr.push(this.formatDate(i==0 ? date : this.addDate(date,1)))
            
         }         
     },
        //上一周 
     lastclick(){
        this.weekDayArr=[]
        this.setDate(this.addDate(this.currentFirstDate,-7));   
        this.weekNum = this.weekNum - 1
       if(this.weekNum - 1 == 0){
         let year = this.nowYear - 1
         let month = 12
         let date = 31
         this.weekNum = this.getYearWeek(year,month,date)
         this.nowYear = this.nowYear - 1
        }
        this.getNextWeekList()
      },
        //下一周
     nextclick(){ 
        this.weekDayArr=[]                
        this.setDate(this.addDate(this.currentFirstDate,7));
        this.weekNum = this.weekNum + 1
        if(this.weekNum + 1 == 54){
         let year = this.nowYear + 1
         let month = 1
         let date = 1
         this.weekNum = this.getYearWeek(year,month,date)
         this.nowYear = this.nowYear + 1
       }
       this.getNextWeekList()
     },

    getYearWeek(year,month,date){
       /*  
        dateNow是当前日期 
        dateFirst是当年第一天  
        dataNumber是当前日期是今年第多少天  
        用dataNumber + 当前年的第一天的周差距的和在除以7就是本年第几周  
      */      
      let dateNow = new Date(year, parseInt(month) - 1, date);
      let dateFirst = new Date(year, 0, 1);
      let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000);
      return Math.ceil((dataNumber + ((dateFirst.getDay() + 1) - 1)) / 7);        
     },
     getTimestamp(time) { //把时间日期转成时间戳
        return (new Date(time)).getTime() / 1000
     },
     beforeHandleCommand(item,row){
        return {
            'command': item,
            'row': row
        }
    },

    //获取所有排班数据
    getStaffScheduleList(){
        const params = {
          start_time:this.getTimestamp(this.weekDayArr[0]),
          end_time:this.getTimestamp(this.weekDayArr[6])
        }
      getStaffScheduleList(params).then(response=>{
         if(response.data.state == 1){
           var staffList =  response.data.data.staffList
           for(let i=0;i<staffList.length;i++){
            if(staffList[i].schedule_week == 0){
               staffList[i].class_index = 0
            }
            if(staffList[i].schedule_week == 1){
               staffList[i].class_index = 1
            }
           if(staffList[i].schedule_week == 2){
               staffList[i].class_index = 2
            }
           if(staffList[i].schedule_week == 3){
               staffList[i].class_index = 3
            }
           if(staffList[i].schedule_week == 4){
               staffList[i].class_index = 4
            }
           if(staffList[i].schedule_week == 5){
               staffList[i].class_index = 5
            }
           if(staffList[i].schedule_week == 6){
               staffList[i].class_index = 6
            }
           }
           console.log("staffList--------",staffList)
           if(staffList.length == 0){
             this.tableData = this.doctorlist
           }else{
             this.tableData = []
             this.tableData = staffList
           }
           
         }
      })
    },
    
    //获取上一周下一周的排班数据
    getNextWeekList(){
      const params = {
         start_time:this.getTimestamp(this.weekDayArr[0]),
         end_time:this.getTimestamp(this.weekDayArr[6])
       }
      getNextWeekList(params).then(response=>{
        if(response.data.state == 1){
            var staffList = response.data.data.staffList
            console.log("上下周数据",staffList)
          }
      })
    },

    changeOption(id){
        const params = {
           start_time:this.getTimestamp(this.weekDayArr[0]),
           end_time:this.getTimestamp(this.weekDayArr[6]),
           doctor_id:id 
        }
       getScheduleByDoctorId(params).then(response=>{
           if(response.data.state == 1){
              var  staffList =  response.data.data.staffList
              console.log("staffList",staffList)

           }
       })
    },
    toSearch(){
      console.log("医护人员姓名",this.keywords)
      var id = 0
      for(let i = 0 ;i<this.doctorlist.length;i++){
         if(this.keywords == this.doctorlist[i].user_name){
            id = this.doctorlist[i].admin_user_id
         }
      }
      const params = {
        doctor_id:id,
        start_time:this.getTimestamp(this.weekDayArr[0]),
        end_time:this.getTimestamp(this.weekDayArr[6])
      }
      toSearchScheduleList(params).then(response=>{
          if(response.data.state == 1){
            var staffList =  response.data.data.staffList
            console.log("stafflist",staffList)
          }
      })
    }
   },
   created(){
    //获取医护人员
    this.getDoctorList()
    //获取班种
    this.getScheduleList()

    let year = new Date().getFullYear()
    let month = new Date().getMonth() + 1
    let date = new Date().getDate()
    this.weekNum = this.getYearWeek(year,month,date)
    this.todayDate=this.formatDate(new Date())
    this.setDate(new Date())
  }
}
</script>

<style lang="scss" scoped>
.dateBox{
    border: 1px solid #DCDFE6;
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 0 10px;
    border-radius: 4px;
}
.classBox{
    width:25%;
    height: 100%;
    border: 1px solid #EBEEF5;
    .classTitle{
        height: 42px;
        text-align: center;
        line-height: 42px;
        background-color: rgb(245, 247, 250);
        color: rgb(96, 98, 102);
        font-weight:bold;
        
    }
    .classMain{
        height: 400px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        >div>p{
            line-height: 30px;
        }
    }
}
</style>