使用ant design vue的日歷組件，實現一個簡單交易日與非交易日的切換

需求：

1. 日歷區分交易日、非交易日
2. 可以切換面板查看整年交易日信息
3. 可以在手動調整交易日、非交易日

演示實例

序——使用軟件及框架版本

1. vue 2.6.11
2. ant-design-vue 1.7.1
3. moment.js（日期轉換依賴）

設計思路

1. 使用組件庫的a-calendar標簽可以實現一個日歷的基本框架
2. 每日模塊實現交易日、非交易日的區分顯示
3. 以及過期和當日的日期灰色顯示，且不能切換交易狀態
4. 將來的日期可以點擊使用a-popconfirm標簽來切換交易狀態，或者使用右鍵點擊切換

具體代碼過程

1. template模板區域

<template>
  <div style="margin: 0 auto">
    <h1 style="text-align: center">日歷組件</h1>
    <a-row class="calendarContent" style="margin: 0 auto; width: 100%">
      <div class="calendarBox">
        <a-calendar :value="value" @panelChange="panelChange" @select="selectDate">
          <ul slot="dateCellRender" slot-scope="value" class="events">
            <li v-for="item in getListData(value)" :key="item.date">
              <a-tooltip
                v-if="item.date<nowDate || item.date == nowDate"
              >
                <template slot="title">
                  <span>只能在下個交易日才可設置</span>
                </template>
                <div class="cellBlockOld" v-if="item.date < nowDate">
                  <span v-if="item.workFlag=='0'">交易日</span>
                  <span v-if="item.workFlag=='1' && item.date !=next">非交易日</span>
                </div>
                <div class="cellBlockNow" v-if="item.date == nowDate">
                  <span v-if="item.workFlag=='0' && item.date == nowDate">交易日</span>
                  <span v-if="item.workFlag=='1' && item.date == nowDate">非交易日</span>
                </div>
              </a-tooltip>
              <a-popconfirm
                v-if="item.workFlag == '1' && item.date>nowDate"
                title="設為交易日"
                @confirm="setDate(0)"
                @cancel="cancel"
              >
                <div class="cellBlockNext1">
                <span v-if="item.workFlag== '1'">非交易日
                </span>
                </div>
              </a-popconfirm>
              <a-popconfirm
                v-if="item.workFlag == '0' && item.date>nowDate"
                title="設為非交易日"
                @confirm="setDate(1)"
                @cancel="cancel"
              >
                <div class="cellBlockNext0">
                  <span v-if="item.workFlag== '0' && item.date != next">交易日</span>
                  <span v-if="item.workFlag== '0' && item.date == next">下一交易日
                </span>
                </div>
              </a-popconfirm>
            </li>
          </ul>
        </a-calendar>
      </div>
    </a-row>
  </div>
</template>

注意事項與難點：

1. a-calendar標簽的數據綁定，與數據遍歷邏輯，這里數據綁定在a- calendar標簽上，日期面板的切換和選中日期的事件都在綁定在此；內層嵌套插槽渲染以一周7天渲染日期，綁定數據幾乎不用變化，可以直接拿來用。

    <a-calendar :value="value" @panelChange="panelChange" @select="selectDate">
             <ul slot="dateCellRender" slot-scope="value" class="events">
               <li v-for="item in getListData(value)" :key="item.date">
               </li>
      </ul>
   </a-calendar>
   

2. 交易狀態與樣式的控制，在模板區域添加多個判斷條件區分

3. 嵌入a-popconfirm來通過氣泡事件修改交易狀態

2. js區域

<script>
import moment from 'moment'

export default {
  name: '',
  components: {},
  watch: {},
  data () {
    return {
      value: moment(new Date()),
      dataList: [
        {
          date: '20210228',
          workFlag: '1'
        },
        {
          date: '20210301',
          workFlag: '0'
        }
        // 此處省略造的數據，大家可以使用mock或者在data中造一些數據，此案例簡單造了一個月的數據用與演示
      ],
      now: new Date(),
      selectDateValue: ''
    }
  },
  methods: {
    moment,
    panelChange (value) {
      console.log('面板中點擊、切換事件')
      console.log(value)
      this.value = value
    },
    selectDate (value) {
      console.log('選中日期事件')
      console.log(value)
      this.selectDateValue = value.format('YYYYMMDD')
    },
    // 切換交易日與非交易日方法，切換交易狀態的同時面板交易狀態改變，同時向后台發送請求（自行添加請求）
    setDate (val) {
      console.log(val)
      var newDataList = []
      // 此處大家可以思考一下，forEach和map兩種方法對數組的操作
      this.dataList.forEach(e => {
        if (e.date === this.selectDateValue) {
          e.workFlag = val
          newDataList.push(e)
        } else {
          newDataList.push(e)
        }
      })
      this.dataList = newDataList
      console.log(this.dataList)
    },
    cancel () {

    },
    getListData (value) {
      var listData = []
      // 注意事項1：通過比對日期確定將每日的交易狀態與日歷日期匹配
      this.dataList.forEach(e => {
        // 讓數組與日歷日期匹配
        if (e.date === value.format('YYYYMMDD')) {
          listData.push(e)
        }
      })
      return listData
    }
  },
  computed: {
    nowDate: function () {
      const nowDate = moment(this.now).format('YYYYMMDD')
      return nowDate
    },
    next: function () {
      var next
      var nextDate = new Date(this.now - 0 + 86400000)
      next = moment(nextDate).format('YYYYMMDD')
      return next
    }
  },
  created () {
  },
  mounted () {
  }
}
</script>

注意事項與難點：

1. 通過比對日期確定每日的交易狀態與日歷日期匹配
2. 修改交易狀態的方法

總結

一個簡單的日歷組件就算搭建這樣就基本完成了，具體代碼可以到下面gitee里面看，如果有錯誤和改進的地方，歡迎大家指正交流。

Find me

Gitee：https://gitee.com/heyhaiyon/ant-vue-admin.git

微信公眾號：heyhaiyang

掘金：heyhaiyang

博客園：heyhaiyang

頭條號：heyhaiyang