271 lines
9.7 KiB
Vue
271 lines
9.7 KiB
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>
|