vue+element的表格（el-table）排班情况，增删查改等简单功能

代码：

<template>
  <!-- 表格 -->
  <div class="sedules">
    <el-header>
      <el-date-picker
        v-model="monthValue2"
        type="month"
        placeholder="选择月"
        value-format="yyyy-M"
        @change="changeMonth"
      >
      </el-date-picker>
      <el-date-picker
        style="margin-left: 10px;"
        v-model="weekValue1"
        type="week"
        format="第 WW 周"
        placeholder="选择周"
        @change="changeWeek"
      >
      </el-date-picker>
    </el-header>
    <div class="table-content">
      <el-table
        v-loading="loading"
        class="sedules-table"
        :data="persons"
        border
        height="300"
      >
        <el-table-column
          prop="name"
          width="150"
          align="center"
          label="姓名/日期"
          fixed
        >
          <template slot-scope="{row}">
            <span :class="row.name === '+'?'cur':''" @click="clicksName(row)">{{ row.name }}</span>
          </template>
        </el-table-column>
        <template v-for="(col,i) in nowMonthDays">
          <el-table-column
            :show-overflow-tooltip="true"
            :label="col.date"
            :key="col.date"
            width="100"
            align="center"
          >
            <template slot-scope="{row}">
            <span v-if="filed(col, row).show" class="row-tag" @click="showLog(filed(col, row))">
              <i class="el-icon-close" @click.stop="handleCloseTag(filed(col, row))"></i>
              <el-tag v-if="filed(col, row).typeId === 0"> 白班 </el-tag>
              <el-tag v-else-if="filed(col, row).typeId === 1" type="success"> 中班 </el-tag>
              <el-tag v-else-if="filed(col, row).typeId === 2" type="danger"> 晚班 </el-tag>
              <span v-else> </span>
            </span>
              <i class="icon-plus row-tag" v-else @click="showLog(filed(col, row))">&ensp;</i>
            </template>
          </el-table-column>
        </template>
      </el-table>

    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="30%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="姓名" prop="name">
          <el-input style="width: 220px;" v-model="form.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="day">
          <el-date-picker
            v-model="form.day"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
            clearable
          />
        </el-form-item>

        <el-form-item label="排班情况" prop="typeName">
          <el-select v-model="form.typeName" clearable placeholder="请选择" @change="$forceUpdate()">
            <el-option
              v-for="dict in sys_day_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              @click.native="getTypeName(dict)"
            />
          </el-select>
        </el-form-item>

        <!--        <el-form-item label="备注" v-show="false">-->
        <!--          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import calendar from '@/utils/js-calendar-converter.js'

export default {
  name: 'paiban',
  data() {

    return {
      insDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
      weekValue1: '',
      monthValue2: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
      loading: false,
      title: '排班',
      form: {},
      // 是否显示弹出层
      open: false,
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
      nowMonthDays: [],
      persons: [
        {
          'id': this.$uuid(),
          'name': '刘旺',
          'list': [
            { day: '2024-5-2', typeName: '白班', typeId: 0 },
            { day: '2024-5-6', typeName: '晚班', typeId: 2 },
            { day: '2024-5-7', typeName: '晚班', typeId: 2 },
            { day: '2024-5-9', typeName: '晚班', typeId: 2 }]
        },
        {
          'id': this.$uuid(),
          'name': '王安',
          'list': [
            { day: '2024-5-2', typeName: '白班', typeId: 0 },
            { day: '2024-5-6', typeName: '中班', typeId: 1 },
            { day: '2024-5-12', typeName: '中班', typeId: 1 }
          ]
        },
        {
          'id': this.$uuid(),
          'name': '王二麻子',
          'list': [
            { day: '2024-5-2', typeName: '白班', typeId: 0 },
            { day: '2024-5-6', typeName: '中班', typeId: 2 },
            { day: '2024-5-7', typeName: '中班', typeId: 2 }
          ]
        },
        {
          'id': this.$uuid(),
          'name': '张三',
          'list': [
            { day: '2024-5-2', typeName: '白班', typeId: 0 },  // 白班
            { day: '2024-5-6', typeName: '白班', typeId: 1 },   // 白班
            { day: '2024-5-7', typeName: '中班', typeId: 1 },  // 中班
            { day: '2024-5-8', typeName: '晚班', typeId: 2 }]   // 晚班
        },
        {
          'id': this.$uuid(),
          'name': '李四',
          'list': [
            { day: '2024-5-2', typeName: '白班', typeId: 0 },
            { day: '2024-5-6', typeName: '晚班', typeId: 2 },
            { day: '2024-5-7', typeName: '晚班', typeId: 2 },
            { day: '2024-5-9', typeName: '晚班', typeId: 2 }]
        },
        {
          'id': this.$uuid(),
          'name': '王二麻子',
          'list': [
            { day: '2024-5-2', typeName: '白班', typeId: 0 },
            { day: '2024-5-6', typeName: '中班', typeId: 2 },
            { day: '2024-5-7', typeName: '中班', typeId: 2 }
          ]
        }
      ],
      sys_day_type: [
        { value: 0, label: '白班' },
        { value: 1, label: '中班' },
        { value: 2, label: '晚班' }
      ],
      // 表单校验
      rules: {
        day: [
          { required: true, message: '日期不能为空', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '排班情况不能为空', trigger: 'blur' }
        ]
      },
      timeRange: []
    }
  },
  computed: {},
  mounted() {
    this.persons = this.persons.map((two) => {
      two.list.unshift({})
      return two
    })
    this.persons.push({
      id: this.$uuid(),
      name: '+',
      list: []
    })
    this.getNowMonthDays(this.year, this.month)
  },
  methods: {
    clicksName(val) {
      debugger
      this.open = true
      this.title = "新增排班"

    },
    changeWeek(val) {
      this.timeRange = []
      if (val) {
        // 时间选择器按周
        const { year, month, day } = this.getMonday('s', 0, val)
        const { year: year1, month: month1, day: day1 } = this.getMonday('e', 0, val)
        for (let i = 0; i < 7; i++) {
          this.timeRange.push(day + i)
        }
        this.monthValue2 = ''
        this.getNowMonthDays(this.year, this.month, this.timeRange)
      } else {
        this.monthValue2 = this.insDate
        this.getNowMonthDays(this.year, this.month)
      }

    },
    changeMonth(val) {
      const [yy, mm] = val.split('-')
      this.getNowMonthDays((yy - 0), (mm - 0))
      this.weekValue1 = ''
    },
    /*
    方法：得到本周、上周、下周的起始、结束日期
    参数：type为字符串类型，有两种选择，"s"代表开始,"e"代表结束，
    dates为数字类型，不传或0代表本周，-1代表上
    currentTime：当前时间Mon Apr 01 2024 00:00:00 GMT+0800 (GMT+08:00)
    使用方法： console.log('本周结束日期',getDateFn.getMonday('e'));
         console.log('上周开始日期',getDateFn.getMonday('s',-1))
    */
    getMonday(type, dates, currentTime) {
      var now = currentTime || new Date()
      var nowTime = now.getTime()
      var day = now.getDay()
      var longTime = 24 * 60 * 60 * 1000
      var n = longTime * 7 * (dates || 0)
      if (type == 's') {
        var dd = nowTime - (day - 1) * longTime + n
      }

      if (type == 'e') {
        var dd = nowTime + (7 - day) * longTime + n
      }

      dd = new Date(dd)
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1
      var d = dd.getDate()
      console.log(dd)
      // m = m < 10 ? '0' + m : m
      // d = d < 10 ? '0' + d : d
      // var day = y + '-' + m + '-' + d
      return { day: d - 1, year: y, month: m }
    },
    handleCloseTag(col) {
      const that = this
      this.$confirm('此操作删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.persons = that.persons.map((person) => {
          if (person.name === col.name) {
            person.list = person.list.filter((per) => {
              if (per.day !== col.day) {
                return per
              }
            })
          }
          return person
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
      })

    },
    getTypeName(item) {
      this.form.typeId = item.value
      this.form.typeName = item.label
    },
    filed(col, row) {
      let rows = row.list.find((one) => {
        if (one.day === col.day) {
          return one
        }
      })
      if (rows) {
        const rt1 = { show: true, ...rows, ...col, ...row }
        return rt1
      } else {
        const rt2 = { show: false, ...col, ...row }
        return rt2
      }
    },
    showLog(col) {
      console.log(col)
      this.open = true
      this.form = col
      this.title = '排班'

    },
    submit() {
      const that = this
      that.persons = that.persons.map((person) => {
        if (person.name === that.form.name) {
          const one = person.list.find((per) => {
            if (per.day === that.form.day) {
              return per
            }
          })
          if (one) {
            one.typeId = that.form.typeId
            one.typeName = that.form.typeName
          } else {
            person.list.push(
              {
                day: that.form.day,
                typeId: that.form.typeId,
                typeName: that.form.typeName
              }
            )
          }
        }
        return person
      })

      this.getNowMonthDays(this.year, this.month, this.timeRange)
      that.open = false
    },
    cancel() {
      this.open = false
    },
    // 获取当月天数
    getThisMonthDays(year, month) {
      return new Date(year, month, 0).getDate()
    },
    /** 获取当月日期 */
    getNowMonthDays(year, month, week) {
      let that = this
      const nowMonthDays = []
      that.loading = true
      that.year = year
      that.month = month
      setTimeout(() => {
        if (week && week.length) {
          for (let i in week) {
            const times = `${year + '-' + month + '-' + week[i]}` // 2023-3-3
            const lunar = calendar.solar2lunar(year, month, week[i])
            nowMonthDays.push({
              id: this.$uuid(),
              date: week[i] + '号', // 几号
              week: this.weeksArr[new Date(year, month - 1, week[i]).getDay()], // 星期几
              day: times,
              lunar: lunar.IMonthCn + lunar.IDayCn
            })
          }
        } else {
          let days = that.getThisMonthDays(year, month) // 获取当月的天数
          for (let i = 1; i <= days; i++) {
            const d = new Date(year, month - 1, i)
            const years = d.getFullYear()
            const months = d.getMonth() + 1
            const day2 = d.getDate()
            const times = `${years + '-' + months + '-' + day2}` // 2023-3-3
            const lunar = calendar.solar2lunar(years, months, day2)
            // var holidays = ['2024-5-1', '2024-5-2', '2024-5-3', '2024-5-4', '2024-5-5']
            nowMonthDays.push({
              id: that.$uuid(),
              date: i + '号', // 几号
              week: that.weeksArr[new Date(year, month - 1, i).getDay()], // 星期几
              day: times,
              lunar: lunar.IMonthCn + lunar.IDayCn
            })
          }
        }

        that.nowMonthDays = nowMonthDays
        that.loading = false
      }, 500)
    },
    // 默认显示当前年度
    getdatatime() {
      this.value1 = new Date()
    }
  }
}
</script>
<style lang="scss" scoped>
.sedules {
  height: 90%;

  .el-header {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
  }

  .table-content {
    position: relative;
    width: 100%;
    height: calc(100% - 40px);

  }

  ::v-deep.sedules-table.el-table {
    height: 100% !important;
    overflow: auto;

    & .el-table__cell.is-hidden > * {
      visibility: visible;
    }

    .el-table__fixed-body-wrapper {
      top: 44px !important;
    }

    .el-table__body-wrapper {
      height: calc(100% - 45px) !important;
    }

    .cur {
      cursor: pointer;
    }

    .el-table .cell {
      padding: 0;

      &.el-tooltip {
        white-space: nowrap;
        min-width: 50px;
        height: 100%;
        display: block;
        padding: 0;
      }
    }

    .row-tag {
      position: relative;
      display: inline-block;
      height: 100%;
      min-height: 20px;
      cursor: pointer;
      width: calc(100% - 10px);
      padding: 0;

      i.el-icon-close {
        position: absolute;
        right: 0;
        color: transparent;
      }

      &:hover {
        i.el-icon-close {
          color: #a7a7a7;
        }
      }

      .el-tag {
        width: 100%;
      }
    }
  }

}
</style>