vue中使用element日曆元件的示例程式碼

阿新 • • 發佈：2021-09-30

先看下效果圖：

在這裡插入圖片描述

完整程式碼附上

<template>
  <div class="newSeeds" id="famerCalendar">
    <div class="title-bottom">
      <el-date-picker
        :clearable="false"
        prefix-icon="timeFilter"
        v-model="value2"
        type="month"
        placeholder="選擇月"
        value-format="yyyy-MM"
        @change="changeDate"
      >
      </el-date-picker>
    </div>
    <div class="calendarBody">
      <el-calendar v-model="value">
        <template slot="dateCell" slot-scope="{ date,data }">
          <div
            @click="chooseDay(data)"
            class="cellInfo"
            :class="data.isSelected == true ? 'shadowBox' : ''"
          >
            <ul class="cellInfoUl">
              <li v-for="(item,index) in activeList" :key="index">
                <p v-if="data.day == item.time" class="cellInfoUlP">
                  {{ item.name }}
                </p>
              </li>
            </ul>
            <div
              v-for="(val,keys,i) in reverseMessage"
              :key="i"
              :class="data.day == keys ? 'tipMsg' : ''"
            >
              <span v-if="data.day == keys" class="tipMsged">{{ val }}</span>
            </div>
            <div class="cellInfoBox">
              <p>{{ data.day.split("-")[2] }}</p>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <!-- 抽屜 -->
    <el-drawer
      :title="timeChoose"
      :visible.sync="drawer"
      :direction="direction"
    >
      <div class="modeEach" v-if="listNormal[0]">
        <div class="modeEachs" v-for="(item,index) in listNormal" :key="index">
          <i class="setI el-icon-delete" @click="delTips(item)"></i>
          <i
            class="setI setIs el-icon-edit-outline"
            @click="addTips(1,item)"
          ></i>
          <p>
            <span>開始時間:</span> <span>{{ item.time }}</span>
          </p>
          <p>
            <span>農事活動名稱:</span> <span>{{ item.name }}</span>
          </p>
          <p>
            <span>負責人:</span> <span>{{ item.userName }}</span>
          </p>
          <p>
            <span>參與人數:</span> <span>{{ item.people }}</span>
          </p>
          <p>
            <span>目標規格:</span> <span>{{ item.content }}</span>
          </p>
        </div>
      </div>
      <div class="modeEach modeEached" v-else>
        <div class="emptyState">
          <img src="../../../assets/leftScreen/math17.png" alt="中使用element日曆元件的示例程式碼" />
        </div>
        <p>當前日期暫無農事活動安排，</p>
        <p>點選右下角“新增農事活動”按鈕新增吧！</p>
      </div>
      <div class="footBox">
        <el-button type="primary" @click="addTips(0)">新增農事活動</el-button>
      </div>
    </el-drawer>
    <!--新增修改 -->
    <el-dialog
      title=""
      :visible.sync="updateForm"
      width="31vw"
      class="addAlameBox"
    >
      <div slot="title" class="header-title" style="position: relative">
        <span class="title-name"></span>
        <span class="title-age">{{ boxPrompt }}</span>
        <span
          style="
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0px;
            font-size: 2.22vh;
          "
        >
        </span>
      </div>
      <div class="addA 
laForm">
        <el-form
          ref="upTableData"
          :rules="rules"
          :model="upTableData"
          label-width="10vw"
        >
          <!-- <el-form-item label="開始時間" prop="time">
            <div class="block">
              <el-date-picker
                v-model="upTableData.time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="選擇日期時間"
              >
              </el-date-picker>
            </div>
          </el-form-item> -->
          <el-form-item label="農事活動名稱" prop="name">
            <el-input v-model="upTableData.name"></el-input>
          </el-form-item>
          <el-form-item label="負責人" prop="userName">
            <el-input v-model="upTableData.userName"></el-input>
          </el-form-item>
          <el-form-item label="參與人數" prop="people">
            <el-input v-model="upTableData.people"></el-input>
          </el-form-item>
          <el-form-item label="目標規格" prop="content">
            <el-input v-model="upTableData.content"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button
              class="saveBtn"
              type="primary"
              @click="saveForm('upTableData')"
              >儲存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dateFormat from "../../../components/dealTime.";
export default {
  data() {
    return {
      timeChoose: "7-26",sixs: [],num: 0,activeday: 0,timeRex: "",listParams: {
        page: 1,size: "",where: "",time: "",},ids: 0,listNormal: [],activeList: [
        {
          data1: "2021/08/17 15:30",data2: "1#地塊澆水灌溉",data3: "孫國棟",data4: "16",data5: "土壤水分達到40%",{
          data1: "2021/08/17 15:30",],updateForm: false,boxPrompt: "新建",upTableData: {
        id: 0,name: "",//操作名稱
        time: "",//計劃時間
        userName: "",//負責人
        people: "",//人數
        content: "",//內容
      },rules: {
        data1: [
          { required: true,message: "時間",trigger: ["blur","change"] },data2: [
          {
            required: true,message: "產品名稱不可為空","change"],data3: {
          required: true,message: "產品型別不可為空",data4: {
          required: true,message: "規格不可為空",data5: {
          required: true,message: "運送數量不可為空",// 抽屜
      drawer: false,direction: "rtl",// 日期
      value2: "",value: new Date(),loading: false,logisticsForm: {
        name: "",region: -1,};
  },mounted() {
    this.requrstLists();
    this.getNowDate();
    // this.getActivityCalendar;
  },watch: {
    activeList(newVal) {
      this.activeList = newVal;
    },computed: {
    reverseMessage() {
      var arrs = [];
      var countArrs = [];
      this.activeList.forEach((val) => {
        arrs.push(val.time);
      });
      return arrs.reduce(function (prev,next) {
        prev[next] = prev[next] + 1 || 1;
        countArrs.push({ prev });
        return prev;
      },{});
      // };
    },methods: {
    // 獲取當前時間
    getNowDate(){
      var date = new Date();
      this.value2 = dateFormat('YYYY-mm',date)
    },// 獲取列表介面
    async requrstLists() {
      const {
        data: { datas },} = await this.$post("product/getProductPlayList",{
        page: 1,});
      datas.forEach((val) => {
        if (val.time.indexOf(":")) {
          console.log("發現空格");
          val.time = val.time.split(" ")[0];
        }
      });
      this.activeList = datas;
      // this.sortArr()
    },async requrstList() {
      const {
        data: { datas },this.listParams);
      this.listNormal = datas;
    },//   新增
    addTips(val,item) {
      this.updateForm = true;
      if (val === 0) {
        this.boxPrompt = "新建";
        this.upTableData = {
          id: 0,//操作名稱
          time: "",//計劃時間
          userName: "",//負責人
          people: "",//人數
          content: "",//內容
        };
      } else if (val === 1) {
        this.boxPrompt = "編輯";
        this.ids = item.id;
        this.$nextTick(() => {
          this.upTableData = JSON.parse(JSON.stringify(item));
        });
      }
    },//儲存
    saveForm() {
      let url = "/product/editProductPlay";
      if (this.boxPrompt == "新建") {
        this.upTableData.id = 0;
      } else if (this.boxPrompt == "編輯") {
        this.upTableData.id = this.ids;
      }
      this.upTablSgfzX 
eData.time = this.timeChoose + " 00:00:00";
      this.$refs["upTableData"].validate((valid) => {
        if (valid) {
          this.$get(url,this.upTableData).then((res) => {
            this.updateForm = false;
            if (res.data.state == "success") {
              this.requrstList();
              this.requrstLists();
              this.$message.success("操作成功");
            } else {
              this.$message.error("操作失敗！請稍後重試！");
            }
          })www.cppcns.com 
;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },chooseDay(data) {
      this.$nextTick(() => {
        if (data.type === "current-month") {
          this.drawer = true;
          this.listParams.time = data.day;
          this.timeChoose = data.day;
          this.requrstList();
        } else if (data.type === "prev-month") {
          this.prevBtn.click();
        } else if (data.type === "next-month") {
          this.nextBtn.click();
        }
      });
    },//   抽屜
    handleClose(done) {
      this.$confirm("確認關閉？")
        .then((res) => {
          done();
          this.requrstLists();
  客棧      })
        .catch((err) => {});
    },// 刪除
    delTips(val) {
      console.log(val);
      this.$confirm("此操作將永久刪除該檔案,是否繼續?","提示",{
        confirmButtonText: "確定",cancelButtonText: "取消",type: "warning",})
        .then(() => {
          this.$post("/product/deteleProductPlay",{ id: val.id }).then(
            (res) => {
              if (res.data.state == "success") {
                this.$message.success("刪除成功");
                this.requrstList();
                this.requrstLists();
              } else {
                this.$message(res.data.msg);
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",message: "已取消刪除",});
        });
    },//時間選擇
    changeDate(val) {
      this.value = val;
    },//重新整理
    refresh() {
      this.loading = true;
      //   this.requrstList();
    },//搜尋
    search() {
      let name = this.logisticsForm.name;
      let level = this.logisticsForm.region;
      if (level == -1) level = "";
      this.loading = true;
      //   this.requrstList(name,level);
    },//重置
    removeForm() {
      this.logisticsForm.name = "";
      this.logisticsForm.region = -1;
      //   this.requrstList();
    },};
</script>

<style scoped lang="less">
@import "../../../style/backTable.less";
</style>
  <style scoped lang="less">
#famerCalendar /deep/ .el-calendar-table {
  width: 100%;
  height: 100%;
  &:not(.is-range) {
    //使不是本月的日期不可點選，不會跳轉到其他月份
    td.next {
      pointer-events: none;
    }
    td.prev {
      pointer-events: none;
    }
  }
}

.calendarBody {
  width: 100%;
  height: 81vh;
}
#famerCalendar .newSeeds {
  height: 90vh;
}
#famerCalendar /deep/ .el-calendar__header {
  justify-content: space-between;
  padding: 12px 20px;
  border: none;
  text-align: center;
  background: #00284d;
  display: block;
}
#famerCalendar /deep/ .el-button-group {
  display: none;
}
#famerCalendar /deep/ .el-calendar__title {
  color: #fff;
  align-self: center;
  line-height: 3vh;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n) {
  background: #5c768d;
  color: #fff;
  padding: 1vh 0;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n + 1) {
  background: #335371;
  color: #fff;
  padding: 1vh 0;
}
#famerCalendar /deep/ .el-calendar__body {
  padding: 0;
}
#famerCalendar .title-bottom /deep/ .el-input--prefix .el-input__inner {
  padding-left: 3vw;
  width: 75%;
  /* height: 4vh;
    line-height: 4vh; */
}
#famerCalendar /deep/ .el-date-editor.el-input,.el-date-editor.el-input__inner {
  width: 10vw;
}
#famerCalendar .timeFilter {
  position: relative;
}
#famerCalendar /deep/ .el-calendar-table td {
  text-align: right;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  // padding: 1vh;
  padding: 0;
  height: 11.5vh;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day > p {
  box-sizing: border-box;
  padding: 1vh;
}
#famerCalendar /deep/ .timeFilter:after {
  min-width: 2vw;
  white-space: nowrap;
  content: "日期";
  border-right: 1px solid #c0c4cc;
  padding: 0 0.2vw;
  box-sizing: border-box;
  /* line-height: 4vh; */
}
#famerCalendar /deep/ .el-drawer__open .el-drawer.rtl:focus-visible {
  border: none;
}
#famerCalendar /deep/ .el-drawer__header:focus-visible {
  border: none;
}
.cellInfoUl {
  width: 80%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
.cellInfoUl::-webkit-scrollbar {
  display: none;
}
.cellInfo {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1vh;
  box-sizing: border-box;
}
.tipMsg {
  position: absolute;
  display: flex;
  right: 0vh;
  bottom: 0vh;
  width: 2vw;
  height: 2vw;
  color: #fff;
}
.tipMsged {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-10%,-20%);
}
.tipMsg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0px;
  width: 0px;
  http://www.cppcns.comborder-top: solid 2vw transparent;
  border-left: solid 2vw #3999e6;
  transform: rotateZ(-90deg);
}
.cellInfoUl li {
  width: 100%;
  line-height: 2.5vh;
  color: #fff;
  background: #61adeb;
  margin-bottom: 1vh;
  padding: 0 0.5vw;
  box-sizing: border-box;
  border-radius: 16px;
  text-align: center;
}
.cellInfoBox {
  text-align: center;
  /* color: #; */
}
.modeEach {
  width: 100%;
  padding: 2vh 1vw;
  box-sizing: border-box;
  height: 78vh;
  overflow: hidden;
  overflow-y: scroll;
}
.modeEach::-webkit-scrollbar {
  display: none;
}
.footBox {
  width: 100%;
  padding: 2vh 1vw;
  box-sizing: border-box;
}
.modeEachs {
  width: 100%;
  min-height: 18vh;
  background: #3999e6;
  border-radius: 6px;
  padding: 2vh 1vw;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 1vh;
}
.setI {
  position: absolute;
  top: 1vh;
  right: 0.5vw;
  background: #fff;
  width: 2.5vh;
  height: 2.5vh;
  border-radius: 50%;
  text-align: center;
  line-height: 2.5vh;
  color: red;
}
.setIs {
  top: 1vh;
  right: 2vw;
  color: #3999e6;
}
.modeEachs span {
  font-size: 1.3vh;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 2.78vh;
}
.modeEachs span:nth-of-type(1) {
  min-width: 3vw;
  display: inline-block;
}
.footBox {
  text-align: right;
}
.emptyState {
  width: 100%;
  height: 60%;
  text-align: center;
}
.emptyState img {
  width: 80%;
  min-height: 100%;
}
.modeEached {
  text-align: center;
}
.modeEached p {
  font-size: 1.67vh;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  line-height: 2.78vh;
}
.shadowBox {
  box-shadow: 0px 0px 15px 3px rgba(0,0.15);
  padding: 1vh;
  box-sizing: border-box;
}
</style>

到此這篇關於vue中使用element的日曆元件的示例程式碼的文章就介紹到這了,更多相關vue element日曆元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！