vue日历排班

带我的师傅说能自己写出这个就算是可以了，人家都是script标签里面的代码写得多，我是template里面写得多，哎，慢慢来吧。这个代码是带我的人写的，放出来算是记录一下复杂的心情

index.vue

<template>
  <div class="g-mn">
    <div class="m-sch">
      <el-row :gutter="15">
        <el-col :span="6">
          <el-input
            v-model="query.search['empNo_eq']"
            placeholder="请输入员工姓名/工号"
            @keyup.enter.native="keyDown($event)"
          >
            <template slot="prepend">工号/姓名</template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <div class="el-input el-input--medium el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">班组</div>
            <el-select
              @change="search"
              v-model="query.search['classId_eq']"
              style="100%"
              placeholder="请选择班组"
            >
              <el-option
                v-for="item in classInfos"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="el-input el-input--medium el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">排班年月</div>
            <el-date-picker
              style="100%"
              v-model="query.search['yearMonth_eq']"
              @change="changeTime"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <el-button-group>
            <el-button type="info" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <div class="m-bd-tp">
      <el-row class="u-btns">
        <el-col :span="10">
          <div>
            <el-button-group v-if="showBtn">
              <el-button
                v-for="(item,index) in frequencies"
                :key="index"
                type="info"
                icon="el-icon-alarm-clock"
                @click="setWork(item.bsInfo)"
              >{{ item.name }}({{ item.bsInfo }})</el-button>
              <el-button type="primary" icon="el-icon-plus" @click="save()">保存</el-button>
              <el-button type="warning" icon="el-icon-close" @click="cannelSelect()">取消选择</el-button>
            </el-button-group>
            <div v-else>.</div>
          </div>
        </el-col>
        <el-col :span="14" class="f-tar icon-btn">
          <el-button-group>
            <el-button type="primary" icon="el-icon-refresh" @click="cleanSearch()" />
          </el-button-group>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" class="m-db-tp">
          <div style="100%;background:#fff;display:flex">
            <div style>
              <div style="display:flex">
                <div class="u-table-tle" style="background:#EBEEF5 !important">工号</div>
                <div class="u-table-tle" style="background:#EBEEF5 !important">姓名</div>
              </div>
              <div v-for="(data,index) in tableData" :key="index" style="display:flex">
                <div class="u-table-tle">{{ data.no }}</div>
                <div class="u-table-tle">{{ data.name }}</div>
              </div>
            </div>
            <div style="calc(100vw - 510px);overflow-x:auto">
              <div style="display:flex;100%">
                <div
                  v-for="(item,index) in dayList"
                  :key="index"
                  class="u-day"
                  style="background:#EBEEF5 !important"
                  @click="selectColumn(index)"
                >
                  <div
                    style="100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer"
                  >
                    <div>{{ item.day }}</div>
                    <div style="margin-top:5px">{{ item.week }}</div>
                  </div>
                </div>
              </div>
              <div v-for="(data,dataIndex) in valueList" :key="dataIndex">
                <div style="display:flex;100%">
                  <div
                    v-for="(item,index) in data"
                    :ref="index+'-'+dataIndex"
                    :key="index"
                    class="u-day"
                    @mousedown="down(index,dataIndex,$event)"
                    @mousemove="move(index,dataIndex,$event)"
                    @mouseup="up(index,dataIndex)"
                  >
                    <div
                      style="cursor:pointer;100%;height:100%;display:flex;justify-content:center;align-items:center"
                    >{{ item.value }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <br />
          <div style="text-align:right">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="changeSize"
              @current-change="changePage"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <create
      v-if="isShowCreate"
      ref="addModel"
      :drawer.sync="isShowCreate"
      :select-id="selectedId"
      @close="closeModel"
    />
  </div>
</template>
<script>
import create from './create.vue'
import dataTable from '@/mixins/dataTable'
export default {
  components: {
    create: create
  },
  mixins: [dataTable],
  data () {
    return {
      frequencies: [],
      radio: '',
      valueList: [],
      dayList: [],
      isDown: false,
      starRow: -1,
      showBtn: true,
      starColumn: -1,
      row: -1,
      isInitData: false,
      value: '',
      classInfos: [],
      column: -1,
      url: 'freq/workforceManagements',
      query: { search: { 'classId_eq': '', 'yearMonth_eq': '', 'empNo_eq': '' } },
      input: '',
      loading: false,
      form: {},
      treeData: [],
      selectList: []
    }
  },
  created () {
    window.this = this
  },
  mounted () {

  },
  methods: {
    changeTime () {
      this.$http.get(this.url + '/getMonthInfo', {
        yearMonth: this.query.search['yearMonth_eq']
      }).then(data => {
        if (data.status === 200) {
          if (this.query.search['yearMonth_eq'] < new Date().getFullYear() + '-' + (new Date().getMonth() + 1)) {
            this.showBtn = false
          } else {
            this.showBtn = true
          }
          var weekList = data.content.weekList
          var dateList = data.content.dateList
          var list = []
          for (var i in weekList) {
            list = list.concat({
              day: new Date(dateList[i]).getDate(),
              week: weekList[i]
            })
          }
          this.dayList = list
          this.cannelSelect();
          this.search()
        }
      }).catch(res => { })
    },
    getOption () {
      this.$http.get(this.url + '/optionsData').then(data => {
        if (data.status === 200) {
          this.optionsData = data.content
          var weekList = this.optionsData.weekList
          var dateList = this.optionsData.dateList
          var list = []
          for (var i in weekList) {
            list = list.concat({
              day: new Date(dateList[i]).getDate(),
              week: weekList[i]
            })
          }
          this.dayList = list
          this.classInfos = this.optionsData.classInfos
          this.query.search['classId_eq'] = this.classInfos[0].id
          this.frequencies = this.optionsData.frequencies
          this.query.search['yearMonth_eq'] = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
          this.search()
        }
      })
    },
    getData () {
      this.tableLoading = true
      this.$http
        .get(this.url, {
          page: { pn: this.currentPage, size: this.pageSize },
          ...this.query
        })
        .then(data => {
          if (data.status === 200) {
            this.tableLoading = false
            this.total = data.content.total
            this.tableData = data.content.records
            var listOne = []
            for (var i in this.tableData) {
              var listTwo = []
              if (this.tableData[i].wmValue) {
                this.tableData[i].wmValue = this.tableData[i].wmValue.split(',')
              }
              for (var j in this.dayList) {
                listTwo = listTwo.concat({
                  id: this.tableData[i].employeeId,
                  row: i,
                  column: j,
                  value: this.tableData[i].wmValue ? this.tableData[i].wmValue[j] == '空' ? null : this.tableData[i].wmValue[j] : null,
                  select: false
                })
              }
              listOne.push(listTwo)
            }
            this.valueList = listOne
          }
        })
    },
    selectColumn (index) {
      this.row = index
      this.column = this.tableData.length - 1
      this.starRow = index
      this.starColumn = 0
      this.changStyle()
      this.getRed()
    },
    down (res, data, event) {
      this.starRow = res
      this.starColumn = data
      if (this.$refs[parseInt(res) + '-' + parseInt(data)][0].style.background === 'red') {
        this.$refs[parseInt(res) + '-' + parseInt(data)][0].style.background = 'white'
      } else {
        this.$refs[parseInt(res) + '-' + parseInt(data)][0].style.background = 'red'
      }
      this.isDown = true
    },
    move (res, data, event) {
      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
      if (!this.isDown) {
        return
      } else {
        if (this.row === res && this.column === data) {
          return
        } else {
          this.row = res
          this.column = data
          this.changStyle()
        }
      }
    },
    up (res, data) {
      this.isDown = false
      this.getRed()
    },
    getRed () {
      for (var i in this.tableData) {
        for (var j in this.dayList) {
          if (this.$refs[parseInt(j) + '-' + parseInt(i)][0].style.background === 'red') {
            this.valueList[i][j].select = true
          } else {
            this.valueList[i][j].select = false
          }
        }
      }
    },
    changStyle (type) {
      console.log('123')
      // eslint-disable-next-line no-unused-vars
      var a1 = 0
      // eslint-disable-next-line no-unused-vars
      var a2 = 0
      var s1 = 0
      var s2 = 0
      if (this.starColumn < this.column) {
        s1 = this.starColumn
        s2 = this.column
      } else {
        s1 = this.column
        s2 = this.starColumn
      }
      if (this.starRow < this.row) {
        a1 = this.starRow
        a2 = this.row
      } else {
        a1 = this.row
        a2 = this.starRow
      }
      for (var z in this.tableData) {
        for (var x in this.dayList) {
          this.$refs[parseInt(x) + '-' + parseInt(z)][0].style.background = 'white'
        }
      }
      for (var q in this.valueList) {
        for (var w in this.valueList[q]) {
          if (this.valueList[q][w].select) {
            this.$refs[parseInt(w) + '-' + parseInt(q)][0].style.background = 'red'
          }
        }
      }
      for (var i = a1; i <= a2; i++) {
        for (var j = s1; j <= s2; j++) {
          this.$refs[parseInt(i) + '-' + parseInt(j)][0].style.background = 'red'
        }
      }
    },
    cannelSelect () {
      for (var i in this.valueList) {
        for (var j in this.valueList[i]) {
          this.valueList[i][j].select = false
          this.$refs[parseInt(j) + '-' + parseInt(i)][0].style.background = 'white'
        }
      }
      this.starRow = -1
      this.starColumn = -1
      this.row = -1
      this.column = -1
    },
    setWork (name) {
      for (var i in this.tableData) {
        for (var j in this.dayList) {
          if (this.$refs[parseInt(j) + '-' + parseInt(i)][0].style.background === 'red') {
            this.valueList[i][j].value = name
          }
        }
      }
    },
    save () {
      console.log(this.valueList)
      var items = this.valueList.map(res => {
        var contValue = res.map(data => {
          if (data.value === null) {
            return '空'
          } else {
            return data.value
          }
        })
        var wmValue = contValue.join(',')
        return {
          employeeId: res[0].id,
          wmValue: wmValue
        }
      })
      console.log(items)
      this.$http.postJSON(this.url + '/savaWorkManagement', {
        classId: this.query.search['classId_eq'],
        wmDate: this.query.search['yearMonth_eq'],
        items: items
      }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
        }
      }).catch(res => { })
    },
    initData () {
      this.getTree()
      this.search()
    },
    handleNodeClick (res) {
      this.query.search['department_ids_like'] = '/' + res.id + '/'
      this.search()
    },
    newLabel (newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name
          newList[i].value = newList[i].id + ''
          if (newList[i].children) {
            this.newLabel(newList[i].children)
          }
          if (newList[i].children == null || newList[i].children.length === 0) {
            newList[i].children = null
          }
        }
      }
    },
    getTree () {
      this.$http
        .get('base/departmentInfos/getLevel')
        .then(data => {
          if (data.success) {
            var tree = data.content
            this.newLabel(tree)
            this.treeData = tree
          }
        })
        .catch(data => { })
    },
    cleanSearch () {
      this.query.search['no_like,name_like'] = ''
      this.query.search['department_ids_like'] = ''
      this.search()
    }
  }
}
</script>
<style scoped>
.u-table-tle {
  width: 130px;
  height: 50px;
  background: #fff;
  border: 1px solid #ddd;
  text-align: center;
  line-height: 50px;
}
.u-day {
  width: 100%;
  min-width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid #ddd;
}

::-webkit-scrollbar {
  width: 10px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ddd;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(100, 100, 100, 0.1);
  background: #fff;
  border-radius: 5px;
}
</style>

create.vue

<template>
  <div>
    <el-drawer
      ref="drawer"
      :title="selectId!=''?'编辑排班管理信息':'添加排班管理信息'"
      :visible.sync="drawer"
      size="500px"
      direction="rtl"
      :destroy-on-close="true"
      :show-close="false"
      :wrapper-closable="false"
      @open="initDom"
    >
      <div class="drawer__content formData">
        <div class="content-rolling">
          <el-form ref="modelForm" class="myForm" :model="modelForm" label-width="30px">
            <el-row>
              <el-col :span="24">
                <el-form-item label=" " prop="id">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">ID</div>
                    <el-input-number class="qy-w-100p" v-model="modelForm.id" :controls="false"></el-input-number>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="wmDate">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">时间月份</div>
                    <el-input class="qy-w-100p"  v-model="modelForm.wmDate" placeholder="请输入时间月份"></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="employeeId">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">人员id</div>
                    <el-input-number class="qy-w-100p" v-model="modelForm.employeeId" :controls="false"></el-input-number>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="employeeNo">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">人员编码</div>
                    <el-input class="qy-w-100p"  v-model="modelForm.employeeNo" placeholder="请输入人员编码"></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="employeeName">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">人员姓名</div>
                    <el-input class="qy-w-100p"  v-model="modelForm.employeeName" placeholder="请输入人员姓名"></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="departmentId">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">所属部门id</div>
                    <el-input-number class="qy-w-100p" v-model="modelForm.departmentId" :controls="false"></el-input-number>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="departmentNo">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">所属部门no</div>
                    <el-input class="qy-w-100p"  v-model="modelForm.departmentNo" placeholder="请输入所属部门no"></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="departmentName">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">所属部门</div>
                    <el-input class="qy-w-100p"  v-model="modelForm.departmentName" placeholder="请输入所属部门"></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="departmentIds">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">部门ids</div>
                    <el-input class="qy-w-100p"  v-model="modelForm.departmentIds" placeholder="请输入部门ids"></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="classId">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">所属班组id</div>
                    <el-input-number class="qy-w-100p" v-model="modelForm.classId" :controls="false"></el-input-number>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="className">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">班组名称</div>
                    <el-input class="qy-w-100p"  v-model="modelForm.className" placeholder="请输入班组名称"></el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label=" " prop="wmValue">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" tabIndex="-1">排班汇总</div>
                    <el-input class="qy-w-100p"  v-model="modelForm.wmValue" placeholder="请输入排班汇总"></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button-group v-if="selectId==''">
            <el-button type="primary" icon="el-icon-finished" :disabled="subLoading" @click="save('modelForm')">{{ subLoading ? '提交中 ...' : '保 存' }}</el-button>
            <el-button type="danger" icon="el-icon-finished" :disabled="subLoading" @click="save('modelForm',true)">{{ subLoading ? '提交中 ...' : '保存并退出' }}</el-button>
            <el-button type="warning" icon="el-icon-arrow-left" @click="clearData(true)">返回</el-button>
          </el-button-group>
          <el-button-group v-else>
            <el-button type="primary" icon="el-icon-finished" :disabled="subLoading" @click="save('modelForm',true)">{{ subLoading ? '提交中 ...' : '保 存' }}</el-button>
            <el-button type="warning" icon="el-icon-arrow-left" @click="clearData(true)">返回</el-button>
          </el-button-group>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
// 注意路径
import dataForm from '@/mixins/dataForm.js'
export default {
  mixins: [dataForm],
  props: {
    drawer: {
      type: Boolean
    },
    selectId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      url: 'freq/workforceManagements',
    }
  },
  methods: {

  }
}
</script>
<style scoped>

</style>

show.vue

<template>
  <div>
    <el-drawer
      ref="drawer"
      title="查看排班管理详情"
      :visible.sync="drawer"
      size="500px"
      direction="rtl"
      :destroy-on-close="true"
      :show-close="false"
      :wrapper-closable="false"
    >
      <div class="show-pd">
        <table style=" 100%;" border="0">
          <tr class="show-pd-tl">
            <th style="20%;text-align:center">序号</th>
            <th style="30%;text-align:center">属性</th>
            <th style="50%">值</th>
          </tr>
          <tr>
            <td style="20%;text-align:center">2</td>
            <td style="30%;text-align:center">ID</td>
            <td style="50%">{{ detail.id }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">3</td>
            <td style="30%;text-align:center">时间月份</td>
            <td style="50%">{{ detail.wmDate }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">4</td>
            <td style="30%;text-align:center">人员id</td>
            <td style="50%">{{ detail.employeeId }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">5</td>
            <td style="30%;text-align:center">人员编码</td>
            <td style="50%">{{ detail.employeeNo }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">6</td>
            <td style="30%;text-align:center">人员姓名</td>
            <td style="50%">{{ detail.employeeName }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">7</td>
            <td style="30%;text-align:center">所属部门id</td>
            <td style="50%">{{ detail.departmentId }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">8</td>
            <td style="30%;text-align:center">所属部门no</td>
            <td style="50%">{{ detail.departmentNo }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">9</td>
            <td style="30%;text-align:center">所属部门</td>
            <td style="50%">{{ detail.departmentName }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">10</td>
            <td style="30%;text-align:center">部门ids</td>
            <td style="50%">{{ detail.departmentIds }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">11</td>
            <td style="30%;text-align:center">所属班组id</td>
            <td style="50%">{{ detail.classId }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">12</td>
            <td style="30%;text-align:center">班组名称</td>
            <td style="50%">{{ detail.className }}</td>
          </tr>
          <tr>
            <td style="20%;text-align:center">13</td>
            <td style="30%;text-align:center">排班汇总</td>
            <td style="50%">{{ detail.wmValue }}</td>
          </tr>
        </table>
      </div>
      <div class="demo-drawer__footer">
        <el-button type="warning" icon="el-icon-arrow-left" @click="back()"
          >返回</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script>
// 注意路径
import dataDetail from "@/mixins/dataDetail.js";
export default {
  mixins: [dataDetail],
  props: {
    drawer: {
      type: Boolean
    },
    selectId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      url: "freq/workforceManagements"
    };
  }
};
</script>
<style scoped></style>