great_service/src/views/wxapp/priceConfiguration/dialog/calendarBox.vue

<!--
 * @Description: 新增/编辑弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: Sugar.
 * @LastEditTime: 2023-11-24 13:55:00
 * @FilePath: \cattle_webui\src\views\venue\schedulingMr\dialog\AddOrEditDialog.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    :visible.sync="open"
    width="70%"
    class="text-dia-log-class"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog" v-loading="loading">
      <el-calendar v-model="timeValue">
        <template
          slot="dateCell"
          slot-scope="{date, data}">
          <div>
            <span>{{ data.day.split('-').slice(1).join('-') }}</span>
            <div style="width: 100%; display: flex;flex-wrap: wrap;" >
              <div 
              :key="index"
              v-for="(item,index) in getPerFormList(data)"
              >
              {{ item.title }}：{{ item.money }}
              </div>
            </div>
            
          </div>
          
        </template>
      </el-calendar>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">返回</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getSelectById,getCalendarList } from "@/api/priceConfiguration/index";
export default {
  name: "addAndEdit",
  data() {
    return {
      title: "编辑",
      loading: false,
      model: "EDIT",
      open: false,
      loading: false,
      timeValue: null,
      perFormList: []
    };
  },
  created() {

  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
    async openDialog(title, obj, type) {
      this.open = true;
      this.getSelectByIdFun({priceId: obj.id})
    },
    /** 查询日期列表 */
    async getList(params) {
      try {
        this.loading = true;
        let res = await getCalendarList(params)
        if(res.code == 200) {
          this.perFormList = res.rows || []
          this.loading = false;
        }
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    /** 查询详情 */
    async getSelectByIdFun(params) {
      try {
        this.loading = true;
        let res = await getCalendarList(params)
        if(res.code == 200) {
          this.loading = false;
          if(res.rows && res.rows.length>0){
            let date = new Date(res.rows[0].priceDate)
            //this.timeValue = date
            this.getRange(date)
          }
        }
        this.loading = false;
      } catch (error) {
        this.loading = false;
        console.error("error===",error)
      }
    },
    getPerFormList(data) {
      let list = []
      this.perFormList.forEach((item,index)=>{
        if(item.priceDate && item.priceDate.indexOf(data.day) != -1) {
          list = [
            { title: '划线价', money: item.originalAmount + '元'  },
            { title: '销售价', money: item.saleAmount + '元' },
          ]
        }
      })
      return list
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.open = false;
    },
    // 获取日历显示时间范围
    getRange(date){
      // 日历第一天
      let firstDay = '';
      // 日历最后一天
      let lastDay = '';
      // 今天
      const today = date ? date : new Date()
      // 上月
      const m = today.getMonth()
      // 本月
      const cm = m + 1
      // 下月
      const lm = m + 2 > 12 ? 1 : m + 2
      // 要显示的本月
      const currentMonth = cm < 10 ? '0' + cm : cm
      // 要显示的本本年
      const currentYear = today.getFullYear()
      // 要显示的上个月的年份，m = 0 则当前1月，上月则是去年12月
      const prevYear = m == 0 ? currentYear - 1 : currentYear
      const prevMonth = m == 0 ? 12 : m < 10 ? '0' + m : m
      // 上个月天数
      const pmd = new Date(prevYear, m, 0).getDate()
      // 下个月的年份，当前12月，则需要加一年
      const lastYear = cm + 1 > 12 ? currentYear + 1 : currentYear
      const lastMonth = lm < 10 ? '0' + lm : lm
      // 1号是周几
      const firstWeek = new Date(today.setDate(1)).getDay()
      // 如果是周日，则不需要显示上个月
      if (firstWeek == 0) {
        firstDay = `${currentYear}-${currentMonth}-01`
      }
      // 其他周几，对应用上个月的天数往前推算
      else {
        firstDay = `${prevYear}-${prevMonth}-${pmd - (firstWeek - 1)}`
      }
      // 这个月天数
      const currentMonthDate = new Date(currentYear, cm, 0).getDate()
      // 最后一天是周几
      const lastWeek = new Date(today.setDate(currentMonthDate)).getDay()
      // 周六显示当月最后一天
      if (lastWeek == 6) {
        lastDay = `${currentYear}-${currentMonth}-${currentMonthDate}`
      }
      // 其他周几，对应往后推算
      else {
        const day = ['06', '05', '04', '03', '02', '01']
        lastDay = `${lastYear}-${lastMonth}-${day[lastWeek]}`
      }
      console.log('第一天', firstDay)
      console.log('最后一天', lastDay)
      this.getList({
        beginPriceDate: firstDay,
        endPriceDate: lastDay,
      });
    }
  },
  watch:{
    timeValue(newValue,oldValue){
      if (newValue.getFullYear() !== oldValue.getFullYear() || newValue.getMonth() !== oldValue.getMonth()) {
        this.getRange(newValue)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog {
  height: 70vh;
  overflow-y: auto;
}
.dialog {
  .upload-btn {
    width: 100px;
    height: 100px;
    background-color: #fbfdff;
    border: dashed 1px #c0ccda;
    border-radius: 5px;
    i {
      font-size: 30px;
      margin-top: 20px;
    }
    &-text {
      margin-top: -10px;
    }
  }
  .avatar {
    cursor: pointer;
  }
}
</style>