opms_wechat/pages/schedule/manage.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-13 16:47:26
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-16 15:37:22
 * @Description: file content
 * @FilePath: \oms\pages\schedule\components\manage.vue
-->
<template>
  <view class="manage-container">
    <view class="calendar-container" id="calendar">
      <!-- 显示日历 -->
      <custom-calendar v-if="calendarVisible" @clickDate="clickDate"></custom-calendar>
      <!-- 当前一周的日历 -->
      <view v-else class="calendar-box">
        <view class="calendar-header">
          <view class="today">{{ currentDay }}</view>
          <view class="more-btn" @click="toMore">更多</view>
        </view>
        <view class="week-wrap">
          <view
            class="week-item"
            :class="{ isActived: currentDay == calendarList[i] }"
            @click="selectDate(calendarList[i])"
            v-for="(v, i) in weekList"
            :key="i">
            <view class="week">{{ v }}</view>
            <view class="date" v-if="calendarList[i]">{{ parseInt(calendarList[i].split('-')[2]) }}</view>
            <view class="date2" :class="{ festival: lunarDate.festival }">
              {{ lunarDate(calendarList[i])['IDayCn'] || '' }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 日程待办列表 -->
    <view class="todo-wrap" v-if="todoData">
      <view class="todo-item" v-for="(v, i) in todoData" :key="i">
        <u-row>
          <u-col span="12">
            <view class="header">
              <u-row>
                <u-col span="12">
                  <view class="flex_l">
                    <view class="circle green"></view>
                    <text class="tit-txt text-ellipsis">
                      {{ v.schTitle }}
                    </text>
                  </view>
                </u-col>
              </u-row>
              <u-row>
                <u-col span="5">
                  <view class="circle"></view>
                  <view class="date" v-if="v.schType == 20">全天</view>
                  <view class="date" v-else>
                    {{ parseTime(v.schDate, '{h}:{i}') }}-{{ parseTime(v.schDateEnd, '{h}:{i}') }}
                  </view>
                </u-col>
              </u-row>
              <!-- <view class="content flex">
                <text class="content-txt text-ellipsis">
                  {{ v.schContent }}
                </text>
              </view> -->
            </view>
          </u-col>
        </u-row>
      </view>
    </view>
    <u-empty v-else mode="list" text="暂无待办"></u-empty>
    <!-- 新增按钮 -->
    <view v-if="false" class="fixed-btn center" @click="openAdd()">
      <u-icon name="plus" color="#fff" size="20"></u-icon>
    </view>
    <!-- 新增待办 -->
    <add :addVisible.sync="addVisible"></add>
  </view>
</template>

<script>
  import to from 'await-to-js'
  import CustomCalendar from '@/components/calendar'
  import calendar from '@/utils/date'
  import add from './components/add'
  import scheduleApi from '@/api/schedule'
  export default {
    name: 'omsManage',
    components: {
      CustomCalendar,
      add,
    },
    data() {
      return {
        todoData: null,
        calendarVisible: false, //日历
        calendarList: [], // 用于遍历显示
        weekList: ['一', '二', '三', '四', '五', '六', '日'], // 周
        currentDay: 0,
        addVisible: false, //新增待办
      }
    },
    computed: {
      lunarDate() {
        return (date) => {
          if (!date) return {}
          const year = date.split('-')[0]
          const month = date.split('-')[1]
          const day = date.split('-')[2]
          return calendar.solar2lunar(year, month, day)
        }
      },
    },
    mounted() {
      this.getWeek()
      this.getTodoData()
    },
    watch: {
      async addVisible(val) {
        if (!val) {
          this.getTodoData()
        }
      },
      async calendarVisible(val) {
        this.$emit('setBackVisible', val)
      },
    },
    methods: {
      // 打开新增
      openAdd() {
        this.addVisible = true
      },
      // 获取周
      getWeek() {
        const dateOfToday = Date.now()
        const dayOfToday = (new Date().getDay() + 7 - 1) % 7
        const daysOfThisWeek = Array.from(new Array(7)).map((_, i) => {
          const date = new Date(dateOfToday + (i - dayOfToday) * 1000 * 60 * 60 * 24)
          return (
            date.getFullYear() +
            '-' +
            String(date.getMonth() + 1).padStart(2, '0') +
            '-' +
            String(date.getDate()).padStart(2, '0')
          )
        })
        // 当前周的全部日期
        this.calendarList = daysOfThisWeek
        //   当前日期
        this.currentDay = daysOfThisWeek[dayOfToday]
      },
      async getTodoData(date = null) {
        const params = { schDate: date || this.currentDay, dataType: '10', pageNum: 1, pageSize: 999 }
        const [err, res] = await to(scheduleApi.getList(params))
        if (err) return
        if (res && res.code == 200) {
          this.todoData = res.data.list
        }
      },
      // 选择日期
      selectDate(date) {
        this.currentDay = date
        this.getTodoData()
      },
      // 选择日历
      clickDate(date) {
        this.getTodoData(date)
      },
      // 跳转日历
      toMore() {
        this.calendarVisible = true
      },
      // 从日历返回
      back() {
        this.calendarVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .manage-container {
    width: 100%;
    height: calc(100vh - 346rpx);
    overflow: auto;
    .calendar-container {
      padding-bottom: 56rpx;
    }
    .calendar-box {
      padding-top: 42rpx;

      .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;

        .today {
          font-size: 32rpx;
          font-weight: bold;
          color: #323232;
        }

        .more-btn {
          width: 77rpx;
          height: 46rpx;
          border-radius: 25rpx;
          border: 2rpx solid #3e7ef8;
          font-size: 24rpx;
          color: #3e7ef8;
          text-align: center;
          line-height: 42rpx;
        }
      }

      .week-wrap {
        display: flex;
        justify-content: space-between;

        .week-item {
          padding: 14rpx 26rpx;
          font-size: 28rpx;
          text-align: center;

          .week {
            color: #969696;
            margin-bottom: 14rpx;
          }

          .date {
            color: #323232;
          }

          .date2 {
            font-size: 20rpx;
            color: #646464;
          }

          .festival {
            color: #f84141;
          }
        }

        .isActived {
          background: #3e7ef8;
          border-radius: 38rpx;

          .week {
            color: #fff;
          }

          .date {
            color: #fff;
          }

          .date2 {
            color: #fff;
          }
        }
      }
    }
    .todo-wrap {
      .todo-item {
        padding: 12rpx 32rpx 12rpx 46rpx;
        background: #f2f3f5;
        border-radius: 15rpx;
        margin-bottom: 32rpx;
        .tit-txt {
          font-size: 28rpx;
          font-weight: bold;
          color: #323232;
        }
        .content-txt {
          font-size: 28rpx;
          color: #646464;
        }
        .header {
          .circle {
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            margin-right: 12rpx;
          }
          .green {
            background: #19be6b;
          }
          .date {
            font-size: 24rpx;
            color: #969696;
          }
        }
        .content {
          padding: 12rpx 0 24rpx 40rpx;
          font-size: 28rpx;
          color: #646464;
        }
      }
    }
    .fixed-btn {
      position: fixed;
      width: 90rpx;
      height: 90rpx;
      bottom: 50rpx;
      right: 50rpx;
      background: #3e7ef8;
      border-radius: 50%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
</style>