subject_gxj/xj_project_app_2024_2_18/pages/monthly/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="year-month" closeOnClickOverlay></u-datetime-picker>
    <!-- 结束时间 -->
    <u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
      v-model="endMonth" mode="year-month" 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)
      time = time.substring(0, 7)
      pageForm.value.startMonth = 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)
      time = time.substring(0, 7)
      pageForm.value.endMonth = time
    }
    endTimeShow.value = false
  }


  // ====================================选择录入状态
  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() {
    const params = Object.assign({}, pageForm.value)
    let start01 = params.startMonth.replace('/', '-')
    let start02 = start01.replace('/', '-') + '-01'
    params.startMonth = start02

    let end01 = params.endMonth.replace('/', '-')
    let end02 = end01.replace('/', '-') + '-01'
    params.endMonth = end02

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

    let url = "/pages/monthly/list/index?"

    for (let i in params) {
      let item = null
      if (params[i]) {
        item = `${i}=${params[i]}&`
      } else {
        item = `${i}=&`
      }

      url = url += item
    }

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

    uni.navigateTo({
      url
    })
  }

  onLoad(async () => {
    // 结束时间
    let now = new Date();
    let year = now.getFullYear();
    let nowmonth = now.getMonth()
    let lastTime = new Date(now - 1000 * 60 * 60 * 24 * 30)
    let lastYear = lastTime.getFullYear()
    let lastMonth = lastTime.getMonth()
    if (nowmonth > 8) {
      nowmonth = nowmonth + 1
    } else {
      nowmonth = `0${nowmonth +1}`
    }
    if (lastMonth > 8) {
      lastMonth = lastMonth + 1
    } else {
      lastMonth = `0${lastMonth +1}`
    }
    // let nowFormat = timeFormat(now).substring(0, 7)
    let nowFormat = year + `/${nowmonth}`;
    endMonth.value = nowFormat
    pageForm.value.endMonth = nowFormat

    // 开始时间
    // let start = now - 1000 * 60 * 60 * 24 * 120
    // let startFormat = timeFormat(start).substring(0, 7)
    let startFormat = lastYear + `/${lastMonth}`;
    startMonth.value = startFormat
    pageForm.value.startMonth = 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>