policeSecurity/collect_information/src/subPages/projectManager/myProject/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">项目人员({{ total }})</view>
      <scroll-view :scroll-y="true" style="height: 80%;" @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 class="projectDetailsTableIndex">
                <view style="color: #3a6bbe" @click="detail(item)">详情</view>
                <view style="color: #ffa60d" @click="securityUserEdit(item)">编辑</view>
                <view style="color: red" @click="deleteUssrID(item.snowFlakeId)">删除</view>
              </view>
            </view>
          </view>

        </view>
      </scroll-view>
    </view>
    <view class="projectDetailsButton">
      <nut-button style="width: 45%" type="info" @click="formAdd">项目人员录入</nut-button>
      <nut-button style="width: 45%" type="info" @click="generateMiniProgramQRCode">二维码录入</nut-button>
    </view>
    <view>
      <nut-dialog
        content="是否确认删除该用户?"
        :onOk="dialogOk"
        v-model:visible="confirmVisible"
      />
    </view>
    <view>
      <nut-dialog no-cancel-btn content="详情" v-model:visible="detailVisible">
        <slot>
          <view style="margin-bottom: 5px">
            <view>籍贯：{{ securityUserDetail.nativePlace }}</view>
            <view>公司：{{ securityUserDetail.securityUnitName }}</view>
            <view>家庭地址：{{ securityUserDetail.homeAddress }}</view>
            <view>备注：{{ securityUserDetail.remark }}</view>
          </view>
        </slot>
      </nut-dialog>
    </view>
    <!-- 二维码-->
    <view>
      <nut-dialog no-cancel-btn content="二维码" v-model:visible="qrcodeVisible">
        <slot>
          <view class="qrcodeVisibleUrl" @click="showImage">
            <image style="width: 100%" show-menu-by-longpress='1' :lazy-load="true" :src="qrCodeImage"
                   mode="aspectFit"/>
          </view>
        </slot>
      </nut-dialog>
    </view>
    <nut-overlay v-model:visible="showOverlay">
      <view class="warp">
        <view class="warpItem">
          <movable-area :scale-area="true">
            <movable-view direction="all" style="width: 348px; height: 300px;" :scale="true" :scale-min="1"
                          :scale-max="4" :scale-value="1" :x="2" :y="10">
              <image class="rect" show-menu-by-longpress='1' :src="qrCodeImage" mode="widthFix"/>
            </movable-view>
          </movable-area>
        </view>
      </view>
    </nut-overlay>
  </view>
</template>
<script setup lang="ts">
import Taro, {useDidShow, 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";
import {SecurityUserFormParams} from "@/types/subPages/projectManager/securityUserForm";

const serviceProject = ref()
const enterprisesUnitName = ref('')
const securityUserList = ref<ServiceProjectSecurityUserPagerVo[]>([])

const securityUserDetail = ref<ServiceProjectSecurityUserPagerVo>({} as any)
// 控制模态框的显示状态
const confirmVisible = ref(false);
const detailVisible = ref(false)
const qrcodeVisible = ref(false)
const showOverlay = ref(false)

useLoad((options) => {
  enterprisesUnitName.value = options.enterprisesUnitName
  serviceProject.value = JSON.parse(options.serviceProject)
})
useDidShow(async () => {
  initServiceProjectSecurityUserList()
})
const projectDetailsTable = async () => {
  await 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 formAdd = () => {
  const params = {
    snowFlakeId: undefined,
    serviceProjectId: serviceProject.value.snowFlakeId,
    securityUnitId: serviceProject.value.securityUnitId,
    name: '',
    workPost: '',
    sex: 0,
    nativePlace: '',
    idCard: '',
    dateOfBirth: null,
    securityNumber: '',
    remark: '',
    homeAddress: '',
    telephone: ''
  } as SecurityUserFormParams
  Taro.navigateTo({url: `/subPages/projectManager/securityUserForm/securityUserForm?securityUser=${JSON.stringify(params)}&&type=formInput`})
}
const total = ref<any>(null)
const current = ref(1)
const isRefresher = ref(false)
const scrollTop = ref(0)
const toView = ref('demo2')
// 滚动到底部/右边时触发
const lower = () => {
  if (total.value === securityUserList.value.length) return
  if (total.value > securityUserList.value.length) {
    current.value = current.value + 1
    projectDetailsTable()
  }
}
const initServiceProjectSecurityUserList = () => {
  securityUserList.value = []
  total.value = null
  current.value = 1   //重置
  isRefresher.value = true
  projectDetailsTable()

}
// 自定义下拉刷新被触发
const onRefresherRefresh = () => {
  initServiceProjectSecurityUserList()
}

const securityUserId = ref<string>('')

// 删除
const deleteUssrID = (snowFlakeId: string) => {
  confirmVisible.value = true
  securityUserId.value = snowFlakeId
}
// 二次删除
const dialogOk = async () => {
  await api.delete(`/projectManageIndex/deleteSecurityUserByServiceProjectId`, {securityUserId: securityUserId.value})
  initServiceProjectSecurityUserList()
}
// 详情
const detail = (item: ServiceProjectSecurityUserPagerVo) => {
  detailVisible.value = true
  securityUserDetail.value = item
}
const securityUserEdit = (item: ServiceProjectSecurityUserPagerVo) => {
  const params = {...item, sex: item.sex.value}
  Taro.navigateTo({url: `/subPages/projectManager/securityUserForm/securityUserForm?securityUser=${JSON.stringify(params)}&type=formInput`})
}

const qrCodeImage = ref('')
const generateMiniProgramQRCode = async () => {
  const paramsData = {
    path: `/subPages/projectManager/securityUserForm/securityUserForm?uid=${serviceProject.value.securityUnitId}&pid=${serviceProject.value.snowFlakeId}&type=QcCodeInput`,
    width: 200,
  }
  qrcodeVisible.value = true
  const resp = await api.get('/projectManageIndex/shareForm_QR_Code', paramsData, {
    header: {
      "content-type": 'application/x-www-form-urlencoded'
    },
    responseType: 'arraybuffer'
  })
  qrCodeImage.value = 'data:image/jpeg;base64,' + Taro.arrayBufferToBase64(resp as unknown as ArrayBuffer);

}

const showImage = () => {
  showOverlay.value = true
  qrcodeVisible.value = false
}


</script>

<style scoped lang="scss">
</style>