subject_gxj/xj_project_app_2024_2_18/pages/weekly/index.vue

<template>
  <view class="container">
    <page-title>周报查询</page-title>

    <view class="cards-list">
      <view class="card only-card">
        <!-- 开始周 -->
        <view class="card-item one-card-item">
          <view class="card-item-name">开始周</view>
          <view class="card-item-description" @click="showBeginTimeChoose()">
            <view>{{pageForm.startMonth}}</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 结束周 -->
        <view class="card-item one-card-item">
          <view class="card-item-name">结束周</view>
          <view class="card-item-description" @click="showEndTimeChoose()">
            <view>{{pageForm.endMonth}}</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 录入状态 -->
        <view class="card-item one-card-item" @click="statusShowChoose()">
          <view class="card-item-name">录入状态</view>
          <view class="card-item-description">
            <view v-if="pageForm.status">{{pageForm.status}}</view>
            <view v-else class="remind-text">请选择状态</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 行业分类 -->
        <view class="card-item one-card-item" @click="hyflShowChoose()">
          <view class="card-item-name">行业分类</view>
          <view class="card-item-description">
            <view v-if="pageForm.hyfl">{{pageForm.hyfl}}</view>
            <view v-else class="remind-text">请选择分类</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <view class="card-item one-card-item">
          <view class="card-item-name">项目名称</view>
          <input v-model="pageForm.subName" class="card-item-input center-input"
            placeholder="请填写项目名称&nbsp;&nbsp;&nbsp;&nbsp;" placeholder-style="color: #D8D8D8;text-align:right;"
            maxlength="20" />
        </view>
      </view>

      <view class="" style="display: flex;justify-content: center;">
        <view class="confirm-btn" @click="confirmParams()">确定</view>
      </view>
    </view>

    <!-- 开始时间 -->
    <u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
      v-model="startMonth" mode="date" closeOnClickOverlay></u-datetime-picker>
    <!-- 结束时间 -->
    <u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
      v-model="endMonth" mode="date" closeOnClickOverlay></u-datetime-picker>
    <!-- 录入状态选择 -->
    <u-picker :show="statusShow" :columns="statusColumns" @confirm="statusClose" @cancel="statusClose"
      @close="statusClose" closeOnClickOverlay></u-picker>
    <!-- 行业分类选择 -->
    <u-picker :show="hyflShow" :columns="hyflColumns" @confirm="hyflClose" @cancel="hyflClose" @close="hyflClose"
      closeOnClickOverlay></u-picker>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'

  import {
    onLoad
  } from "@dcloudio/uni-app"

  import {
    timeFormat
  } from "@/utils/timeFormatter.js"

  import {
    getWeeklyCondition
  } from "@/api/work/weeklyAndMonthly.js"

  function getCondition() {
    getWeeklyCondition().then(res => {
      hyflOrginal = res.data?.HYFL
      let hyflTemp = res.data?.HYFL.map(item => item.title)
      hyflTemp.unshift('请选择')
      hyflColumns.value.push(hyflTemp)
    })
  }

  let pageForm = ref({
    startMonth: null,
    endMonth: null,
    status: "所有",
    hyfl: null,
    subName: null,
  })

  // ====================================选择开始时间
  let startMonth = ref(null)
  let beginTimeShow = ref(false)

  function showBeginTimeChoose() {
    beginTimeShow.value = true
  }

  function beginTimeClose(e) {
    if (e) {
      let time = timeFormat(e.value)
      pageForm.value.startMonth = getMondayToSunday(time)
    }
    beginTimeShow.value = false
  }

  // ====================================选择结束时间
  let endMonth = ref(null)
  let endTimeShow = ref(false)

  function showEndTimeChoose() {
    endTimeShow.value = true
  }

  function endTimeClose(e) {
    if (e) {
      let time = timeFormat(e.value)
      pageForm.value.endMonth = getMondayToSunday(time)
    }
    endTimeShow.value = false
  }

  // 改变选择时间格式（周一至周天格式）
  function getMondayToSunday(date) {
    const chooseDay = new Date(date); // 选中的时间
    let nowTime = chooseDay.getTime(); // 选中的时间(时间戳化)
    let week = chooseDay.getDay() || 7; // 选中的是星期几
    let oneDayTime = 24 * 60 * 60 * 1000; // 一天的时间

    let mondayTime = nowTime - (week - 1) * oneDayTime; //周一
    let sundayTime = nowTime + (7 - week) * oneDayTime; //周日

    let mondayText = timeFormat(mondayTime); //周一文字化
    let sundayText = timeFormat(sundayTime); //周日文字化

    let mon1 = mondayText.replace("/", "-")
    let mon2 = mon1.replace("/", "-")

    let sun1 = sundayText.replace("/", "-")
    let sun2 = sun1.replace("/", "-")

    return mon2 + "至" + sun2
  }

  // ====================================选择录入状态
  let statusShow = ref(false)

  let statusColumns = ref([
    ["所有", "已录入", "未录入"]
  ])

  function statusShowChoose() {
    statusShow.value = true;
  }

  function statusClose(e) {
    if (e) pageForm.value.status = e.value[0];
    statusShow.value = false
  }

  // ====================================选择行业分类
  let hyflOrginal = []
  let hyflShow = ref(false)

  let hyflColumns = ref([])

  function hyflShowChoose() {
    hyflShow.value = true;
  }

  function hyflClose(e) {
    if (e) pageForm.value.hyfl = e.value[0];
    hyflShow.value = false
  }

  // 确认选择
  function confirmParams() {
    let sendParams = Object.assign({}, pageForm.value)

    sendParams.startMonth = sendParams.startMonth.substr(0, 10)
    sendParams.endMonth = sendParams.endMonth.substr(0, 10)
    let statusOrginal = {
      "所有": "0",
      "已录入": "1",
      "未录入": "2"
    }
    sendParams.status = statusOrginal[sendParams.status] ? statusOrginal[sendParams.status] : null
    let item = hyflOrginal.find(item => item.title === sendParams.hyfl)
    sendParams.hyfl = item ? item.id : null

    let url = "/pages/weekly/list/index?"
    for (let i in sendParams) {
      let item = null
      if (sendParams[i]) {
        item = `${i}=${sendParams[i]}&`
      } else {
        item = `${i}=&`
      }

      url = url += item
    }
    url = url.substr(0, url.length - 1);

    uni.navigateTo({
      url
    })
  }

  onLoad(() => {
    // 结束时间
    let now = new Date()
    let nowFormat = timeFormat(now)
    endMonth.value = nowFormat
    pageForm.value.endMonth = getMondayToSunday(nowFormat)

    // 开始时间
    let start = now - 1000 * 60 * 60 * 24 * 14
    let startFormat = timeFormat(start)
    startMonth.value = startFormat
    pageForm.value.startMonth = getMondayToSunday(startFormat)

    getCondition()
  })
</script>

<style lang="scss" scoped>
  .one-card-item {
    justify-content: space-between;
  }

  .card .card-item .card-item-description {
    font-size: 28rpx !important;
  }

  .card .card-item .card-item-name {
    white-space: nowrap;
  }

  .confirm-btn {
    width: 328rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: #002F69;
    border-radius: 38rpx;
    font-weight: 500;
    font-size: 36rpx;
    color: #FFFFFF;
  }
</style>