gdy_pc_8/src/point/views/attendance/attendance_dutynew.vue

<template>
  <div>
    <div style="padding:15px 0;">
      <div style="float:right;">
        <el-button type="primary" @click="get_excel_file">导出排班表</el-button>
        <el-button type="primary" @click="tolead_get_excel_file">导入排班表</el-button>
      </div>
      <div class="schedule_list">
        班次：
        <span :style="'background:' + color[item.id] + '; color:#fff;'" v-for="(item, index) in schedule_list" :key="index">{{ item.name }}</span>
        <div><el-date-picker value-format="yyyy-MM" v-model="month_val" type="month" format="yyyy-MM" placeholder="选择月份"></el-date-picker></div>
      </div>
      <div style="clear:both;"></div>
    </div>
    <el-scrollbar v-loading="loading" wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 500px;">
      <div style="">
        <!--    排班表头      -->
        <table id="schedule_table_header" style="width:100%;" class="schedule_table" cellspacing="0" cellpadding="0" @mouseleave="schedule_set_show = false">

          <tr>
            <td width="120" style="width:120px;">姓名</td>
            <td
              width="50"
              :style="'position: relative; width:' + td_width + 'px;'"
              @mouseenter="hover_head_index = schedule_index"
              @mouseleave="hover_head_index = -1"
              @contextmenu.prevent="show_schedule_set"
              v-for="(schedule, schedule_index) in table_header_list"
              :key="schedule_index"
            >
              <div>{{ schedule.name }}</div>
              <div style="font-size:12px;">{{ schedule.id }}</div>

              <el-card class="box-card" v-if="schedule_set_show && schedule_index == hover_head_index" style="position: absolute; width:200px; z-index:6; right:0;">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="选择班次" name="first">
                    <span
                      @click="set_schedule_one(item, -1, schedule_index)"
                      :style="'background:' + color[item.id] + '; cursor: pointer; color:#fff; display:block; margin:15px; padding:5px;'"
                      v-for="(item, index1) in schedule_list"
                      :key="index1"
                    >
                      {{ item.name }}
                    </span>

                    <span
                      @click="set_schedule_one({ id: 0, name: '休息' }, -1, schedule_index)"
                      style="background:#eee; cursor: pointer; color:#666; display:block; margin:15px; padding:5px;'"
                    >
                      休息
                    </span>
                  </el-tab-pane>


                  <el-tab-pane label="选择排班" name="second" v-if="false">
                    <div style="padding:15px 5px; text-align: left;" @click="set_schedule_list(work_date_list, -1, schedule_index)">
                      <div style="display: inline;" v-for="(item, index) in work_date_list" :key="index">
                        <span v-if="index > 0" style="padding:0px">-></span>
                        <span
                          :class="{ work_not: item.id == 0 }"
                          :style="'background:' + color[item.id] + '; cursor: pointer; color:#fff; display:inline-block; padding:2px 5px; margin-bottom:5px;'"
                        >
                          {{ item.name }}
                        </span>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </td>
          </tr>
        </table>
        <!-- 人员排班信息 -->
        <table class="schedule_table" cellspacing="0" cellpadding="0" @mouseleave="schedule_set_show = false">
          <tr v-for="(row, index) in tableData" :key="index">
            <td
              width="120"
              style="position: relative; width:120px;"
              @contextmenu.prevent="show_schedule_set"
              @mouseleave="
                schedule_set_show = false;
                hover_name_index = -1;
              "
              @mouseenter="hover_name_index = index"
            >
              {{ row.employee_name }}

              <el-card class="box-card" v-if="schedule_set_show && index == hover_name_index" style="position: absolute; width:200px; left:0; z-index:2;">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="选择班次" name="first">
                    <span
                      @click="set_schedule_one(item, index, -1)"
                      :style="'background:' + color[item.id] + '; cursor: pointer; color:#fff; display:block; margin:15px; padding:5px;'"
                      v-for="(item, index1) in schedule_list"
                      :key="index1"
                    >
                      {{ item.name }}
                    </span>

                    <span
                      @click="set_schedule_one({ id: 0, name: '休息' }, index, -1)"
                      style="background:#eee; cursor: pointer; color:#666; display:block; margin:15px; padding:5px;'"
                    >
                      休息
                    </span>
                  </el-tab-pane>
                  <el-tab-pane label="选择排班" name="second" v-if="false">
                    <div style="padding:15px 5px; text-align: left;" @click="set_schedule_list(work_date_list, index, -1)">
                      <div style="display: inline;" v-for="(item, index) in work_date_list" :key="index">
                        <span v-if="index > 0" style="padding:0px">-></span>
                        <span
                          :class="{ work_not: item.id == 0 }"
                          :style="'background:' + color[item.id] + '; cursor: pointer; color:#fff; display:inline-block; padding:2px 5px; margin-bottom:5px;'"
                        >
                          {{ item.name }}
                        </span>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </td>
            <td
              :data-count-key="'class-count-' + schedule.day + '-sid-' + schedule.id"
              style="position: relative;"
              @contextmenu.prevent="show_schedule_set"
              width="50"
              @mouseleave="table_hover = [-1, -1]"
              @mouseenter="td_hover(index, schedule_index)"
              :style="{width:td_width + 'px',background:color[schedule.id] ? color[schedule.id]:'#ccc',color:'#fff'}"
              :class="{ schedule_none: schedule.id == 0, td_hover: table_hover[0] == index || schedule_index == table_hover[1] }"
              v-for="(schedule, schedule_index) in row.schedule_list"
              :key="schedule_index"
            >
              <span v-if="schedule.name == 0">休息</span>
              <span v-else>{{ schedule.name }}</span>
              <el-card
                class="box-card"
                v-if="schedule_set_show && table_hover[0] == index && schedule_index == table_hover[1]"
                style="position: absolute; width:200px; right:0; z-index:2;"
              >
                <el-tabs v-model="activeName">
                  <el-tab-pane label="选择班次" name="first">
                    <span
                      @click="set_schedule_one(item, index, schedule_index)"
                      :style="'background:' + color[item.id] + '; cursor: pointer; color:#fff; display:block; margin:15px; padding:5px;'"
                      v-for="(item, index1) in schedule_list"
                      :key="index1"
                    >
                      {{ item.name }}
                    </span>

                    <span
                      @click="set_schedule_one({ id: 0, name: '休息' }, index, schedule_index)"
                      style="background:#eee; cursor: pointer; color:#666; display:block; margin:15px; padding:5px;'"
                    >
                      休息
                    </span>
                  </el-tab-pane>
                  <el-tab-pane label="选择排班" name="second">
                    <div style="padding:15px 5px; text-align: left;" @click="set_schedule_list(work_date_list, index, schedule_index)">
                      <div style="display: inline;" v-for="(item, index) in work_date_list" :key="index">
                        <span v-if="index > 0" style="padding:0px">-></span>
                        <span
                          :class="{ work_not: item.id == 0 }"
                          :style="'background:' + color[item.id] + '; cursor: pointer; color:#fff; display:inline-block; padding:2px 5px; margin-bottom:5px;'"
                        >
                          {{ item.name }}
                        </span>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </td>
          </tr>
        </table>

<!--    下面的班次表格    -->
        <div style="height: 46px;"></div>
        <table class="schedule_table" cellspacing="0" cellpadding="0">
          <tr>
            <td width="220">班次</td>
            <td width="80" v-for="(item, index) in table_header_list" :key="index">
              <div>{{ item.name }}</div>
              <div style="font-size:12px;">{{ item.id }}</div>
              <!-- <div style="font-size:12px;">{{item.week}}</div> -->
            </td>
          </tr>
          <tr v-for="(item, index) in schedule_count" :key="index">
            <td :style="'background:' + color[item.id] + '; color:#fff; padding:2px 5px;'">
              <span>{{ item.name }}</span>
            </td>
            <td v-for="(schedule, schedule_index) in item.count_list" :key="schedule_index">
              <span v-if="schedule.num == 0">休息</span>
              <span v-else>{{ schedule.num }}</span>
            </td>
          </tr>
        </table>
      </div>
    </el-scrollbar>

    <!-- 导入排班表 -->
    <el-dialog width="600px" title="Excel管理" append-to-body :visible.sync="dialogExcelVisible" :close-on-click-modal="false">
      <div style="padding:0 50px;">
        <div class="align-center" style="margin-bottom:20px;">
          <p>温馨提示：</p>
          <p>1、导入之前请点击“下载模板”按钮下载模板文件；</p>
          <p>2、填写排班信息到Excel电子表中；</p>
          <p>3、点击“Excel文件导入”上传填写好的电子表；</p>
          <p>4、支持上传大小500KB以内的Excel文件。</p>
          <p></p>
        </div>

        <div class="align-center" style="margin-bottom:20px; float:left; margin-left:10px;"><el-button type="primary" @click="downloadTemplate" plain>下载模板</el-button></div>
        <div class="align-center" style="margin-bottom:20px; float:left; margin-left:10px;">
          <el-upload
            :on-success="uploadFileEnd"
            :headers="{ 'J-Token': $getToken() }"
            :data="{ group_id: group_id }"
            list-type="text"
            name="file"
            :action="$serveAd + '/ad/group/import_schedule'"
            :show-file-list="false"
          >
            <el-button type="primary">Excel导入</el-button>
          </el-upload>
        </div>
        <div style="clear:both;"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: 'attendance_duty',
  watch: {
    month_val(n, o) {
      this.get_group_info(this.group_id);
    },
    table_hover(n, o) {
      this.schedule_set_show = false;
    }
  },
  data() {
    return {
      employId: '',
      listType: [],
      uplife: '',
      td_width: 0,
      dialogExcelVisible: false,
      save_duty_loading: false,
      table_header_list: [],
      hover_head_index: -1,
      hover_name_index: -1,
      work_date_list: [],
      schedule_set_show: false,
      activeName: 'first',
      loading: false,
      group_id: 0,
      month_val: moment().format('YYYY-MM'),
      color: [],
      table_hover: [-1, -1],
      schedule_list: [], // 班次列表

      schedule_count: [], // 班次下面的时间统计
      oldTabelData: [],

      tableData: [
        {
          employee_id: 113,
          employee_name: '张三',
          schedule_list: []
        }
      ]
    };
  },
  created() {
    (this.listType = []), this.aasd();
  },
  methods: {
    aasd() {},
    uploadFileEnd(response, file, fileList) {
      this.dialogExcelVisible = false;
      window.location.href;
      if (response.code == 1) {
        this.$message.success(response.msg);
      } else {
        this.$message.error(response.msg);
      }
    },
    // 下载模板  导出排班表
    downloadTemplate() {
      let self = this;
      var params = {
        group_id: self.group_id,
        month: self.month_val
      };
      this.$axiosKq('get', '/ad/group/export_schedule', params).then(res => {
        if (res.data.code == 1) {
          const url = res.data.data;
          window.location.href = url;
        }
      });
    },
    //导入排班表
    tolead_get_excel_file() {
      this.dialogExcelVisible = true;
    },
    // 导出排班表
    get_excel_file() {
      let self = this;
      var params = {
        group_id: self.group_id,
        month: self.month_val
      };
      this.$axiosKq('get', '/ad/group/export_schedule', params).then(res => {
        if (res.data.code == 1) {
          const url = res.data.data;
          window.location.href = url;
        }
      });
    },
    td_hover(i, o) {
      this.table_hover = [i, o];
    },
    // 更改全不数据
    set_schedule_list(item, row, col) {
      let j = 0;
      let self = this;
      let l = 0;
      let listType=[];
      if (row >= 0 && col >= 0) {
        let list=this.tableData[row].schedule_list
        let employId=this.tableData[row].employee_id
        for (let i in list) {
          if (i >= col) {
            listType.push({schedule_id: item[0].id, employee_id: employId, date: list[i].day})
            l++;
            list[i].name = item[j].name;
            list[i].id = item[j].id;
            if (j == item.length - 1) {
              j = 0;
            } else {
              j++;
            }
          }
        }
      }
      this.listType=listType;
      this.schedule_set_show = false;
      this.table_hover = [-1, -1];
      self.$nextTick(() => {
        self.set_schedule_count();
      });
      this.hover_name_index = -1;
      this.hover_head_index = -1;
    },

    // 保存修改
    send_schedule() {
      let self = this;
      this.$axiosKq('post', '/ad/group/update_schedule', { group_id: this.group_id, data: JSON.stringify(self.listType)}).then(res => {
          self.$emit('saved');
          if (res.data.code == 1) {
            self.listType = [];
            self.$message.success(res.data.msg);
          } else {
            self.$message.error(res.data.msg);
          }
      });
    },

    // 更改单条数据
    set_schedule_one(item, row, col) {
      let self = this;
      let date = '';
      if (row >= 0 && col >= 0) {
        this.tableData[row].schedule_list[col].name = item.name;
        this.tableData[row].schedule_list[col].id = item.id;
        this.employId = this.tableData[row].employee_id;
        date = this.tableData[row].schedule_list[col].day;
      }
      if (row == -1 && col >= 0) {
        for (let i in this.tableData) {
          this.tableData[i].schedule_list[col].name = item.name;
          this.tableData[i].schedule_list[col].id = item.id;
          this.employId = this.tableData[i].employee_id;
          date = this.tableData[i].schedule_list[col].day;
        }
      }
      if (row >= 0 && col == -1) {
        for (let i in this.tableData[row].schedule_list) {
          this.tableData[row].schedule_list[i].name = item.name;
          this.tableData[row].schedule_list[i].id = item.id;
          this.employId = this.tableData[row].employee_id;
          date = this.tableData[row].schedule_list[i].day;
        }
      }
      this.getnewList();
      this.schedule_set_show = false;
      this.table_hover = [-1, -1];
      self.$nextTick(() => {
        self.set_schedule_count();
      });
    },

    getnewList() {
      let self = this;
      this.$axiosKq('get', '/ad/group/schedule', { group_id: self.group_id, month: self.month_val }).then(res => {
        if (res.data.code == 1) {
          let { data = {} } = res.data;
          self.oldTabelData = data.table_data;
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].employee_id == self.oldTabelData[i].employee_id) {
              for (let k = 0; k < this.tableData[i].schedule_list.length; k++) {
                if (this.tableData[i].schedule_list[k].id == self.oldTabelData[i].schedule_list[k].id) {
                } else {
                  this.listType.push({
                    schedule_id: this.tableData[i].schedule_list[k].id,
                    employee_id: this.tableData[i].employee_id,
                    date: this.tableData[i].schedule_list[k].day
                  });
                }
              }
            }
          }
        }
      });
    },
    show_schedule_set() {
      this.activeName = 'first';
      this.schedule_set_show = true;
    },
    set_schedule_count() {
      const self = this;
      let count_list = [];
      this.schedule_count = [];
      let schedule = [];
      for (var i = 0; i < this.tableData.length; i++) {
        schedule.push({});
        schedule[i] = this.tableData[i].schedule_list;
      }
      for (let i in this.schedule_list) {
        // attendance_setting_ids
        count_list = [];
        for (let k in schedule[0]) {
          // table_header
          count_list.push({ num: document.querySelectorAll('[data-count-key=' + 'class-count-' + schedule[0][k].day + '-sid-' + this.schedule_list[i].id + ']').length });
        }
        this.schedule_count.push({
          id: this.schedule_list[i].id,
          name: this.schedule_list[i].name,
          count_list: count_list
        });
      }
    },

    // 加载排班表数据
    get_group_info(id) {
      let self = this;
      self.group_id = id;
      self.loading = true;
      this.$axiosKq('get', '/ad/group/schedule', { group_id: id, month: self.month_val }).then(res => {
        if (res.status == 200) {
          self.loading = false;
          let { data = {} } = res.data;
          self.oldTabelData = data.table_data;
          self.schedule_list = data.schedules; //班次信息  班次名称 打卡时间段
          self.work_date_list = data.schedules; // 选择排班
          let color = ['#1E90FF','#FF69B4','#FF5656','#8470FF','#3CB371','#FF9600','#0055FF','#7BC6FF','#FF08A0','#FFCC00'];
          for (let i in self.schedule_list) {
            self.color[self.schedule_list[i].id] = color[i % color.length];
          }
          self.color[0] = '#ffffff';
          self.tableData = data.table_data; // 表格主体 渲染排班表
          let week = [];
          for (var i = 0; i < data.week.length; i++) {
            week.push({});
            week[i].id = data.week[i];
            week[i].name = data.header[i].split('-')[2];
          }
          self.table_header_list = week; // 表头
          self.$nextTick(() => {
            self.set_schedule_count();
            self.td_width = (document.getElementById('schedule_table_header').offsetWidth - 120) / self.table_header_list.length;
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.schedule_list span {
  display: inline-block;
  margin: 5px;
  background-color: #ccc;
  padding: 2px 5px;
  border-radius: 3px;
}

.schedule_table {
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.schedule_table td {
  border-right: 1px solid #ccc;
  cursor: default;
  border-top: 1px solid #ccc;
  text-align: center;
  padding: 0;
  height: 50px;
  width: 46px;
}

.schedule_none {
  color: #666 !important;
}

.schedule_table td:hover {
  background-color: #8891f9 !important;
  color: #fff;
}

.td_hover {
  background-color: #c3d5f9 !important;
  color: #fff !important;
}

.work_not {
  color: #666 !important;
  background-color: #ccc !important;
}

.work_date_not {
  color: #f00;
}
</style>