ElementUI中使用el-calendar實現基於日歷的節假日的增刪改查

場景

前端使用ElementUI的el-calendar組件實現可視化的節假日的增刪改查。

主頁面顯示效果如下

 

 

 

點擊日歷組件上的某天進行新增節假日時

 

 

 

點擊已經存在的節假日編輯時

 

 

 

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先el-calendar是支持自定義內容的，官方文檔地址：

https://element.eleme.cn/#/zh-CN/component/calendar

官方示例文檔：

通過設置名為 dateCell 的 scoped-slot 來自定義日歷單元格中顯示的內容。在 scoped-slot 可以獲取到 date（當前單元格的日期）, data（包括 type，isSelected，day 屬性）。詳情解釋參考下方的 API 文檔。

 

 

 

 

官方示例代碼

<el-calendar>
  <!-- 這里使用的是 2.5 slot 語法，對於新項目請使用 2.6 slot 語法-->
  <template
    slot="dateCell"
    slot-scope="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    </p>
  </template>
</el-calendar>
<style>
  .is-selected {
    color: #1989FA;
  }
</style>

仿照官方代碼，這里新增一個自定義內容的el-calendar

      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <p :class="rqi.indexOf(data.day) > -1 ? 'is-selected' : ''" @click="handleBianJi(data.day)">
          {{ data.day.split('-').slice(1).join('-') }} {{ rqi.indexOf(data.day) > -1 ? rqineirong[data.day].jqmc : ''}}
        </p>
      </template>
    </el-calendar>

注意：

1.為了首先已經設置過節假日的日期顏色為綠色，所以這里綁定class使用的是選擇表達式

rqi.indexOf(data.day) > -1 ? 'is-selected' : ''"

其中rei是一個用來查詢所有的假期的索引數組，索引值為獲取的日期

通過判斷當前日期是否在假期的索引數組中來綁定is-selected樣式。

所以需要提前聲明數組rqi

  data() {
    return {
      rqi:[],

以及定義樣式is-selected

<style lang="scss" scoped>
  .is-selected {
    color: white;
    background: green;
  }
</style>

2.然后綁定了單擊事件

@click="handleBianJi(data.day)"

用於對新增和編輯假期的觸發。

3.具體顯示的內容模板通過

{{ data.day.split('-').slice(1).join('-') }} {{ rqi.indexOf(data.day) > -1 ? rqineirong[data.day].jqmc : ''}}

根據文檔，通過data.day獲取的日期格式為yyyy-MM-dd，這里只取月和日，然后后面是選擇表達式，

如果當前日期的索引存在，則在后面加上假期的名稱。

其中rqineirong是一個鍵值對的對象，鍵是節假日中的日期，值是所屬節假日的相關信息。

所以需要提前聲明此對象。

  data() {
    return {
      rqi:[],
      rqineirong:{},

然后就是在頁面剛加載完之后查詢出所有的假期並構造出這種前端所需要的鍵值對對象的格式。

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

在查詢所有假期的請求數據的方法中

  methods: {
    /** 查詢節假日管理 - 法定節假日列表 */
    getList() {
      this.loading = true;
      listFdjjr(this.queryParams).then(response => {
        this.rqi = [];
        this.rqineirong = {};
        for(let i=0;i<response.length;i++){
          for(var key in response[i]){
            this.rqi.push(key)
            this.rqineirong[key] = response[i][key]
          }
        }
      });
    },

 

其中調用請求后台數據的方法，將后台數據構造成索引的數組和一個鍵值對的對象。

 

 

 

請求后台數據的js方法

// 查詢節假日管理 - 法定節假日列表
export function listFdjjr(query) {
  return request({
    url: 'jjrgl/fdjjr/fdjjrList',
    method: 'get',
    params: query
  })
}

就是向后台發送get請求，來到后台數據部分。

首先需要設計數據庫

 

 

 

 

使用代碼生成工具生成后台代碼，來到Controller層

 

   @GetMapping("/fdjjrList")
    public List<Map<String, Object>> fdjjrList() {
        List<Map<String, Object>> resultList = new ArrayList<>();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        //保存日期集合
        List<String> dateList = new ArrayList<String>();
        List<Fdjjr> list = fdjjrService.selectFdjjrList(null);
        for (int i = 0; i < list.size(); i++) {
            Fdjjr fdjjr = list.get(i);
            Date date_start = fdjjr.getKssj();
            Date date_end = fdjjr.getJssj();
            Date date = date_start;
            //用Calendar 進行日期比較判斷
            Calendar cd = Calendar.getInstance();
            while (date.getTime() <= date_end.getTime()) {
                cd.setTime(date);
                Map<String, Object> map = new HashMap<>();
                map.put(sdf.format(date), fdjjr);
                resultList.add(map);
                //增加一天 放入集合
                cd.add(Calendar.DATE, 1);
                date = cd.getTime();
            }
        }
        return resultList;
    }

 

最終后台構造成的數據結構為

 

 

 

最終要將數據庫中每個節假日的開始到結束日期每一天構造成一個鍵值對，鍵是日期，值是日期所屬的假期對象。

這樣就完成了 已有節假日的顯示，若要再實現點擊某天進行新增或者編輯節假日，上面已經添加了點擊事件

@click="handleBianJi(data.day)"

在點擊事件里

    /** 編輯日期操作 */
    handleBianJi(day) {
      if(this.rqineirong[day]){
        console.log(this.rqineirong[day])
        this.form = this.rqineirong[day];
        this.title = '編輯節假日';
      }else{
        let obj = {};
        obj.kssj = day.valueOf();
        obj.jssj = day.valueOf();
        this.form = obj;
        this.form = obj;
        this.title = '新增節假日';
      }
      this.open = true;
    },

進行打開新增或者編輯頁面的操作，判斷條件是

if(this.rqineirong[day])

前面已經在頁面初始化后將查詢結果查詢並存放在this.rqineirong里面，在點擊事件中獲取當前日期，並判斷是否是節假日，如果是則顯示編輯，否則顯示新增

新增和編輯頁面的代碼

    <!-- 添加或修改節假日管理 - 法定節假日對話框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="假期名稱" prop="jqmc">
          <el-input v-model="form.jqmc" placeholder="請輸入假期名稱" />
        </el-form-item>
        <el-form-item label="開始時間" prop="kssj">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.kssj"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="選擇開始時間">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="結束時間" prop="jssj">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.jssj"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="選擇結束時間">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="類型" prop="lx">
          <el-select v-model="form.lx" placeholder="請選擇類型" clearable :style="{ width: '200px' }">
            <el-option
              v-for="dict in jjrlxOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">確 定</el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="title == '編輯節假日'" @click="deleteForm" :style="{ background: 'red',color:'white'}">刪除</el-button>
      </div>
    </el-dialog>

如果是編輯的話會將對應的日期key獲取到的節假日的內容賦值給this.form，並已經與顯示的控件進行雙向綁定。

相應的對節假日進行編輯和刪除只要調用接口實現即可。

index.vue完整代碼

<template>
  <div class="app-container">
    <el-calendar>
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <p :class="rqi.indexOf(data.day) > -1 ? 'is-selected' : ''" @click="handleBianJi(data.day)">
          {{ data.day.split('-').slice(1).join('-') }} {{ rqi.indexOf(data.day) > -1 ? rqineirong[data.day].jqmc : ''}}
        </p>
      </template>
    </el-calendar>

    <!-- 添加或修改節假日管理 - 法定節假日對話框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="假期名稱" prop="jqmc">
          <el-input v-model="form.jqmc" placeholder="請輸入假期名稱" />
        </el-form-item>
        <el-form-item label="開始時間" prop="kssj">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.kssj"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="選擇開始時間">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="結束時間" prop="jssj">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.jssj"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="選擇結束時間">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="類型" prop="lx">
          <el-select v-model="form.lx" placeholder="請選擇類型" clearable :style="{ width: '200px' }">
            <el-option
              v-for="dict in jjrlxOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">確 定</el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="title == '編輯節假日'" @click="deleteForm" :style="{ background: 'red',color:'white'}">刪除</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listFdjjr, delFdjjr, addFdjjr, updateFdjjr } from "@/api/jjrgl/fdjjr";

export default {
  jqmc: "Fdjjr",
  data() {
    return {
      rqi:[],
      rqineirong:{},
      // 遮罩層
      loading: true,
      // 彈出層標題
      title: "",
      // 是否顯示彈出層
      open: false,
      // 表單參數
      form: {},
      // 表單校驗
      rules: {
        jqmc: [
          { required: true, message: "假期名稱不能為空", trigger: "blur" }
        ],
        kssj: [
          { required: true, message: "開始時間不能為空", trigger: "blur" }
        ],
        jssj: [
          { required: true, message: "結束時間不能為空", trigger: "blur" }
        ],
        lx: [
          { required: true, message: "假期類型不能為空", trigger: "change" }
        ],
      },
      // 節假日類型
      jjrlxOptions: [],
    };
  },
  created() {
    this.getList();
    this.getDicts("jjr_fdjjr_lx").then(response => {
      this.jjrlxOptions = response.data;
    });
  },
  methods: {
    /** 查詢節假日管理 - 法定節假日列表 */
    getList() {
      this.loading = true;
      listFdjjr(this.queryParams).then(response => {
        this.rqi = [];
        this.rqineirong = {};
        for(let i=0;i<response.length;i++){
          for(var key in response[i]){
            this.rqi.push(key)
            this.rqineirong[key] = response[i][key]
          }
        }
      });
    },
    // 取消按鈕
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表單重置
    reset() {
      this.form = {
        jqmc: undefined,
        kssj: undefined,
        jssj: undefined,
        lx: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按鈕操作 */
    handleQuery(day) {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 提交按鈕 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateFdjjr(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.reset();
                this.getList();
              }
            });
          } else {
            addFdjjr(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.reset();
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 編輯日期操作 */
    handleBianJi(day) {
      if(this.rqineirong[day]){
        console.log(this.rqineirong[day])
        this.form = this.rqineirong[day];
        this.title = '編輯節假日';
      }else{
        let obj = {};
        obj.kssj = day.valueOf();
        obj.jssj = day.valueOf();
        this.form = obj;
        this.form = obj;
        this.title = '新增節假日';
      }
      this.open = true;
    },
    deleteForm(){
      let ids = [];
      ids.push(this.form.id)
      delFdjjr(ids).then(response => {
        if (response.code === 200) {
          this.msgSuccess("刪除成功");
          this.open = false;
          this.reset();
          this.getList();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
  .is-selected {
    color: white;
    background: green;
  }
</style>

調用接口的js完整代碼

import request from '@/utils/request'
// 查詢節假日管理 - 法定節假日列表
export function listFdjjr(query) {
  return request({
    url: 'jjrgl/fdjjr/fdjjrList',
    method: 'get',
    params: query
  })
}


// 新增節假日管理 - 法定節假日
export function addFdjjr(data) {
  return request({
    url: '/jjrgl/fdjjr',
    method: 'post',
    data: data
  })
}

// 修改節假日管理 - 法定節假日
export function updateFdjjr(data) {
  return request({
    url: '/jjrgl/fdjjr',
    method: 'put',
    data: data
  })
}

// 刪除節假日管理 - 法定節假日
export function delFdjjr(id) {
  return request({
    url: '/jjrgl/fdjjr/' + id,
    method: 'delete'
  })
}

 

后台Controller完整代碼

 

@RestController
@RequestMapping("/jjrgl/fdjjr")
@Api(tags = "節假日管理")
public class FdjjrController extends BaseController {
    @Autowired
    private IFdjjrService fdjjrService;


    /**
     * 新增節假日管理 - 法定節假日
     */
    @ApiOperation("法定節假日新增")
    @PreAuthorize("@ss.hasPermi('jjrgl:fdjjr:add')")
    @Log(title = "節假日管理 - 法定節假日", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody Fdjjr fdjjr) {
        return toAjax(fdjjrService.insertFdjjr(fdjjr));
    }


    /**
     * 刪除節假日管理 - 法定節假日
     */
    @PreAuthorize("@ss.hasPermi('jjrgl:fdjjr:remove')")
    @Log(title = "節假日管理 - 法定節假日", businessType = BusinessType.DELETE)
    @DeleteMapping("/{ids}")
    @ApiOperation("刪除法定節假日")
    public AjaxResult remove(@PathVariable Long[] ids) {
        return toAjax(fdjjrService.deleteFdjjrByIds(ids));
    }

    @ApiOperation("法定節假日列表-日歷")
    @GetMapping("/fdjjrList")
    public List<Map<String, Object>> fdjjrList() {
        List<Map<String, Object>> resultList = new ArrayList<>();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        //保存日期集合
        List<String> dateList = new ArrayList<String>();
        List<Fdjjr> list = fdjjrService.selectFdjjrList(null);
        for (int i = 0; i < list.size(); i++) {
            Fdjjr fdjjr = list.get(i);
            Date date_start = fdjjr.getKssj();
            Date date_end = fdjjr.getJssj();
            Date date = date_start;
            //用Calendar 進行日期比較判斷
            Calendar cd = Calendar.getInstance();
            while (date.getTime() <= date_end.getTime()) {
                cd.setTime(date);
                Map<String, Object> map = new HashMap<>();
                map.put(sdf.format(date), fdjjr);
                resultList.add(map);
                //增加一天 放入集合
                cd.add(Calendar.DATE, 1);
                date = cd.getTime();
            }
        }
        return resultList;
    }
    @ApiOperation("法定節假日列表-下拉")
    @GetMapping("/typeList")
    public List<Fdjjr> typeList() {
        List<Fdjjr> list = fdjjrService.selectFdjjrList(null);
        return list;
    }


    /**
     * 修改節假日管理 - 法定節假日
     */
    @PreAuthorize("@ss.hasPermi('jjrgl:fdjjr:edit')")
    @Log(title = "節假日管理 - 法定節假日", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody Fdjjr fdjjr) {
        return toAjax(fdjjrService.updateFdjjr(fdjjr));
    }

}