policeSecurity/collect_information/src/subPages/police/myEnterprisesUnit/projectDetails/projectDetails.vue

<template>
  <view class="projectDetails">
    <view class="projectDetailsItem" style="line-height: 50rpx">
      <view>
        <view style="display: flex;justify-content: space-between">
          <text style="font-size: 18px">{{ enterprisesUnitName }}-----{{ serviceProject?.name }}项目</text>
          <!--          <text>进行中</text>-->
        </view>
        <view>
          <view style="float: left;width: 50%;" class="content">
            经理名称:{{ serviceProject?.projectManagerMiniProgramUserInfo.name }}
          </view>
          <view class="content">手机号:{{ serviceProject?.projectManagerMiniProgramUserInfo.telephone }}</view>
        </view>
      </view>
    </view>
    <view class="projectDetailsItem">
      <view class="projectDetailsIndex">
        <nut-row>
          <nut-col :span="24">
            <view class="content">保安证件号：{{ serviceProject?.idNumber }}</view>
          </nut-col>
        </nut-row>
        <nut-row>
          <nut-col :span="12">
            <view class="content">工作人员数量:{{ serviceProject?.staffTotal }}</view>
          </nut-col>
          <nut-col :span="12">
            <view class="content">保安人员数量:{{ serviceProject?.securityUserTotal }}</view>
          </nut-col>
        </nut-row>
        <nut-row>
          <nut-col :span="12">
            <view class="content">服务区域面积:{{ serviceProject?.serviceArea }}</view>
          </nut-col>
          <nut-col :span="12">
            <view class="content">楼栋数量:{{ serviceProject?.buildingTotal }}</view>
          </nut-col>
        </nut-row>
        <nut-row>
          <nut-col :span="4">
            <view class="content">户数:{{ serviceProject?.houseTotal }}</view>
          </nut-col>
        </nut-row>
      </view>
    </view>
    <!--表格-->
    <view class="projectDetailsTableDrop">
      <view style="padding: 0 12px">项目人员</view>
      <scroll-view :scroll-y="true" style="height: 80%;" @scrolltoupper="upper" @scrolltolower="lower"
                   :scroll-into-view="toView" :scroll-top="scrollTop" :refresherEnabled="true"
                   @refresherrefresh="onRefresherRefresh" :refresher-triggered="isRefresher"
      >
        <view class="projectDetailsTable" v-for="(item,index) in securityUserList" :key="index">
          <view>
            <view class="projectDetailsTableItem">
              <view>
                <view style="display: flex;justify-content: space-between">
                  <text>姓名:{{ item?.name ? item?.name : '创建者' }}</text>
                  <text>性别:{{ item.sex?.label ? item.sex?.label : ' 隐藏' }}</text>
                  <text>职位:{{ item.workPost ? item.workPost : '创建者' }}</text>
                </view>
                <view style="display: flex;justify-content: space-between">
                  <text>保安证件:{{ item.securityNumber ? item.securityNumber : '无' }}</text>
                  <text>出生年月:{{ dayjs(item.dateOfBirth).format('YYYY-MM-DD') }}</text>
                </view>
                <view style="display: flex;justify-content: space-between">
                  <text>创建时间:{{ item.createTime }}</text>
                  <text>身份证:{{ item.idCard }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

  </view>
</template>
<script setup lang="ts">
import Taro, {useLoad} from "@tarojs/taro";
import './projectDetails.scss'
import {ref} from "vue";
import api from "@/request/index";
import dayjs from 'dayjs'
import {ServiceProjectSecurityUserPagerVo} from "@/types/subPages/projectManager/myProject";

const serviceProject = ref()
const enterprisesUnitName = ref('')
const securityUserList = ref<ServiceProjectSecurityUserPagerVo[]>([])
useLoad(async (options) => {
  enterprisesUnitName.value = options.enterprisesUnitName
  serviceProject.value = JSON.parse(options.serviceProject)
  console.log(serviceProject.value);
  await projectDetailsTable()
})
const projectDetailsTable = async () => {
  Taro.showLoading({
    title: '加载中',
  })
  const queryParams = {
    params: {
      serviceProjectId: serviceProject.value.snowFlakeId,
    },
    page: {
      size: 4,
      current: current.value
    }
  }
  const resp = await api.post<PagerVo<ServiceProjectSecurityUserPagerVo>>('/miniProgramUser/securityUserPager', queryParams)
  securityUserList.value = [...securityUserList.value, ...resp.data!.records]
  total.value = resp.data!.total
  isRefresher.value = false
  Taro.hideLoading()
}

const total = ref<any>(null)
const current = ref(1)
const isRefresher = ref(false)
const scrollTop = ref(0)
const toView = ref('demo2')
const upper = (e) => {
  console.log('到顶了:', e)
}
// 滚动到底部/右边时触发
const lower = () => {
  if (total.value === securityUserList.value.length) return
  if (total.value > securityUserList.value.length) {
    current.value = current.value + 1
    projectDetailsTable()
  }
}
// 自定义下拉刷新被触发
const onRefresherRefresh = (e) => {
  securityUserList.value = []
  total.value = null
  current.value = 1   //重置
  isRefresher.value = true
  console.log('自定义下拉刷新被触发:', e)
  projectDetailsTable()
}
</script>