element日历(Calendar)排班

修改展示



父组件内容

<template>
  <!--排班管理-->
  <div class="dutySchedule">
    <div class="dutySchedule-calendar">
      <el-calendar v-model="priceTime">
        <template slot="dateCell" slot-scope="{date, data}">
          <!--自定义内容-->
          <div class="calendar-day" @click="btn.add&&calendarClick(data,'新增')">
            <div style="text-align: center" @click="btn.add&&calendarClick(data,'新增')">
              {{ data.day.split('-').slice(2).join('-') }}
            </div>
            <div v-for="(item, index) in textContent(data.day)" :key="index">
              <div class="dutySchedule-content" @click.stop="btn.update&&calendarClick(data,'编辑',item)">
                {{item.classTitle}}
                <i class="icon el-tag__close el-icon-close" @click.stop="deleteDar(item)" v-show="btn.delete"></i></div>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" v-if="dialogVisible"
      :close-on-click-modal="false" @close="propClose('取消')">
      <add-duty-schedule @propClose="propClose" :single-data='singleData' :date-show='dateShow' />
    </el-dialog>
  </div>
</template>
<script>
  import AddDutySchedule from './add.vue'
  export default {
    data() {
      return {
        // 按钮权限
        btn: {
          add: true,
          update: true,
          delete: true
        },
        // 指定显示日期
        priceTime: '2022-03',
        // 弹框Title
        dialogTitle: "",
        // 弹框显示隐藏
        dialogVisible: false,
        // 传递子组件的点击日历时间
        dateShow: "",
        // 编辑显示内容
        singleData: "",
        // 显示页面数据---模拟后端数据
        calendarData: [{
            dutyDate: '2022-04-02',
            classTitle: '组一',
          },
          {
            dutyDate: '2022-04-03',
            classTitle: '组二'
          },
          {
            dutyDate: '2022-04-04',
            classTitle: '组三'
          }
        ],

      }
    },
    methods: {
      //  删除按钮
      deleteDar(content) {
        this.$confirm('此操将删除排班, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.calendarData.some((item, index) => {
            if (item.dutyDate == content.dutyDate) {
              this.calendarData.splice(index, 1)
              return true
            } else {
              return false
            }
          })
          //  this.calendarData.splice(1)
        }).catch(() => {});
      },
      // 弹框关闭
      propClose(content) {
        this.dialogVisible = false;
        this.examineShow = false
        if (content != "取消") {
          this.calendarData.push(content)
        }
      },
      // 点击日历内容
      calendarClick(content, text, data) {
        if (text == '新增') {
          this.dialogTitle = '添加'
          this.singleData = null
          this.dateShow = content.day
        } else {
          this.dialogTitle = '编辑'
          this.singleData = data
          this.dateShow = content.day
        }
        this.dialogVisible = true

      },
      // 文字显示
      textContent(date) {
        return this.calendarData.filter(item => {
          return date === item.dutyDate
        })
      },
    },
    components: {
      AddDutySchedule
    },
  }
</script>

<style lang="scss" scoped>
  .dutySchedule-content {
    color: #fff;
    background-color: #3a87ad;
    border-radius: 3px;
  }

  .dutySchedule-content:hover {
    background-color: #08a4f0
  }

  .calendar-day {
    height: 100%
  }

  .dutySchedule::v-deep {
    .el-calendar-table .el-calendar-day {
      height: 75px;
    }

    .el-calendar__body {
      padding-bottom: 20px;
    }

    .el-calendar-day {
      padding: 8px 0;
    }

    // 控制点击上个月或者下个月日期时间
    .el-calendar-table:not(.is-range) td.next,
    .el-calendar-table:not(.is-range) td.prev {
      pointer-events: none;
    }

    .icon {
      float: right;
      margin: 1px 7px 0 0;
    }

    .icon:hover {
      background-color: red;
      border-radius: 50%;
    }
  }
</style>

弹框内容

<template>
  <div class="addPrestudyRecord">
    <el-form :model="form" label-width="98px" ref="form" :rules="rules" :hide-required-asterisk="true"
      label-position="left">
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="名称" prop="classTitle">
            <el-input v-model.trim="form.classTitle" placeholder="请输名称" clearable maxlength="15" />
          </el-form-item>
        </el-col>
        <el-col align="right">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" class="btnbgc" @click="save('form')" :loading="loading">提交</el-button>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>
<script>
  export default {
    name: "addPrestudyRecord",
    data() {
      return {
        loading: false,
        form: {

        },
        rules: {
          classTitle: [{
            required: true,
            message: "请输名称",
            trigger: "blur"
          }],

        },
      };
    },
    methods: {
      save(formName) {
        this.loading = true;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.singleData) {
              this.form.dutyDate = this.dateShow
              this.$emit("propClose", '取消');
            } else {
              this.form.dutyDate = this.dateShow
              this.$emit("propClose", this.form);
            }
          } else {
            //console.log("error submit!!");
            this.loading = false;
            return false;
          }
        });
      },
      cancel() {
        this.$emit("propClose", '取消');
      },
      singleShow() {
        if (this.singleData) {
          this.form = this.singleData;
        }
      },
    },
    props: {
      singleData: {
        type: [Object || null]
      },
      dateShow: {
        type: String
      }

    },
    created() {
      this.singleShow();
    },



  };
</script>
<style lang="scss" scoped>
  .addPrestudyRecord::v-deep {
    .el-form-item {
      >label::after {
        content: "*";
        color: #f56c6c;
        margin-left: 4px;
      }
    }

    .addPrestudyRecord-nmust {
      .el-form-item {
        >label::after {
          content: "";
        }
      }
    }

    .el-form-item__label {
      color: #5a6066;
      font-size: 14px;
      font-weight: normal;
    }
  }

  .addPrestudyRecord {
    &-input {
      width: 100%;
    }
  }
</style>