oaPhone/src/view/finance/components/staffCost.vue

<template>
  <van-row style="margin-top: 20px" @click="dateScreenShow = true">
    <van-col :span="24">
      <van-cell-group>
        <van-cell size="large" class="checkCell" title-class="projectTitle">
          <template #title>
            <van-text-ellipsis content="筛选条件"/>
          </template>
          <template #value>
            <van-row justify="end">
              <van-col class="resetDetailCell" @click.stop="resetStaffCost">
                <van-icon name="replay" />
                <van-text-ellipsis content="重置" />
              </van-col>
            </van-row>
          </template>
        </van-cell>
      </van-cell-group>
    </van-col>
  </van-row>
  <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="20"
      finished-text="没有更多了"
      @load="onLoad"
  >
    <van-collapse v-model="activeNames" class="collapseBox">
      <van-collapse-item title="标题1" name="1">
        代码是写出来给人看的，附带能在机器上运行。
      </van-collapse-item>
      <van-collapse-item title="标题2" name="2">
        技术无非就是那些开发它的人的共同灵魂。
      </van-collapse-item>
      <van-collapse-item title="标题3" name="3">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
    </van-collapse>
  </van-list>
  <van-popup
      v-model:show="dateScreenShow"
      position="bottom"
      class="popupBox"
      closeable
      close-icon-position="top-right"
  >
    <van-row class="popupRow">
      <van-col :span="22" :offset="1">
        <el-form label-width="90" label-position="left">
          <el-form-item label="时间类型：" size="large">
            <el-select
                placeholder="请选择日期选择器类型"
                v-model="timeType"
                @change="changeTimeType"
            >
              <el-option
                  v-for="item in timeTypeList"
                  :key="item.id"
                  :label="item.text"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
              v-if="timeType === 'day'"
              label="日期："
              size="large">
            <el-date-picker
                v-model="condition.dayTime"
                type="date"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                clearable
                @clear="condition.dayTime = ''"
            />
          </el-form-item>
          <el-form-item
              v-if="timeType === 'month'"
              label="月份:"
              size="large"
          >
            <el-date-picker
                v-model="condition.monthTime"
                type="month"
                placeholder="请选择月份"
                format="YYYY-MM"
                value-format="YYYY-MM"
                clearable
                @clear="condition.monthTime = ''"
            />
          </el-form-item>
          <el-form-item
              v-if="timeType === 'year'"
              label="年份:"
              size="large"
          >
            <el-date-picker
                v-model="condition.yearTime"
                type="year"
                placeholder="请选择年份"
                format="YYYY"
                value-format="YYYY"
                clearable
                @clear="condition.yearTime = ''"
            />
          </el-form-item>
          <el-form-item
              label="类型:"
              size="large"
          >
            <el-select
                v-model="condition.genre"
                placeholder="请选择费用类型"
                clearable
                @clear="condition.genre = 0"
            >
              <el-option
                  v-for="item in useFinance.costTypeList"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
              />
            </el-select>
          </el-form-item>
          <el-form-item
              label="人员："
              size="large"
          >
            <el-select
                v-model="condition.reimburser"
                placeholder="请选择费用类型"
                clearable
                @clear="condition.reimburser = 0"
            >
              <el-option
                  v-for="item in useFinance.allUser"
                  :key="item.ID"
                  :label="item.nickName"
                  :value="item.ID"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <van-row class="popupCheck">
          <van-col :span="24">
            <van-button type="primary" @click="getStaffCostList" size="large">查询</van-button>
          </van-col>
        </van-row>
      </van-col>
    </van-row>
  </van-popup>
</template>

<script setup>
import { useFinanceStore } from "@/pinia/finance/finance";
import { peopleCost } from "@/api/firmCost"
const useFinance = useFinanceStore()
defineOptions({
  name: 'costDetail',
})
const dateScreenShow = ref(false)
const resetStaffCost = () => {}

// 时间类型
const timeType = ref('day')
const timeTypeList = [
  { id:0, text: '按日期选择', value: "day" },
  { id:1, text: '按月份选择', value: "month" },
  { id:2, text: '按年份选择', value: "year" }
]

const changeTimeType = (val) => {
  if (val === 'day') {
    condition.monthTime = ''
    condition.yearTime = ''
  } else if (val === 'month') {
    condition.dayTime = ''
    condition.yearTime = ''
  } else {
    condition.dayTime = ''
    condition.monthTime = ''
  }
}

const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 10
  },
  reimburser: 0,
  projectId: 0,
  genre: 0,
  dayTime: '',
  monthTime: '',
  yearTime: ''
})

onMounted(() => {
  getStaffCostList()
})
// 查询人员费用
const staffCostPage = ref(0)
const staffCostList = reactive([])
const getStaffCostList = () => {
  peopleCost(condition).then(res => {
    if (res.code === 0) {
      const list = res.data.list
      const total = res.data.total
      console.log(total)
      const divisor = Math.floor(total / 10)
      const remainder = total % 10
      console.log("整数：", divisor)
      console.log("余数：",remainder)
      staffCostPage.value = remainder > 0 ? divisor + 1 : divisor
      console.log("staffCostPage", staffCostPage.value)
      console.log("page",condition.pageInfo.page)
      // finished.value = staffCostPage.value === condition.pageInfo.page
      // console.log("初次确认", finished.value)
      // staffCostList.length = 0
      // staffCostList.push(...list)
      // dateScreenShow.value = false
    }
  })
}

// 人员费用列表
const activeNames = ref(['1'])
// 上拉加载
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  setTimeout(() => {
    loading.value = true
    condition.pageInfo.page += 1
    peopleCost(condition).then(res => {
      console.log('res',res)
      if (res.code === 0) {
        const list = res.data.list
        if (list !== null) {
          staffCostList.push(...list)
          finished.value = staffCostPage.value === condition.pageInfo.page
        }
        loading.value = false
      }
    })
  },500)
}
</script>

<style scoped lang="less">
.checkCell{
  height: 45px;
  font-size: 16px;
  .projectTitle{
    width: 200px;
  }
  .resetDetailCell {
    display: flex;
    align-items: center;
  }
}

.popupBox{
  height: 500px;
  .popupRow{
    margin-top: 50px;
  }
  .popupCheck{
    margin-top: 30px;
  }
}

.collapseBox{
  margin-top: 20px;
}
</style>