<template>
|
<view class="details_index">
|
<view class="details_top">
|
<view class="details_top_header">
|
<view class="details_top_title">{{topLists.secureName}}</view>
|
<view class="details_top_num"><span>已培训：</span>{{completes}}人</view>
|
</view>
|
<view class="details_top_main">
|
<view class="detail_top_contents">
|
<view class="detail_item_titles" style="font-size: 15px;">类型：</view>
|
<view class="detail_item_datas" style="color:#1977FF">{{topLists.dictName}}</view>
|
</view>
|
<view class="detail_top_contents">
|
<view class="detail_item_titles">培训日期：</view>
|
<view class="detail_item_datas">{{topLists.secureTime}}</view>
|
</view>
|
<view class="detail_top_contents">
|
<view class="detail_item_titles">应培训人数：</view>
|
<view class="detail_item_datas">{{totals}}人</view>
|
</view>
|
<view class="detail_top_contents">
|
<view class="detail_item_titles">培训岗位：</view>
|
<view class="detail_item_datas">{{dealJob(topLists.secureGroupDtos)}}</view>
|
</view>
|
<view class="detail_top_contents">
|
<view class="detail_item_titles">培训内容：</view>
|
<view class="detail_item_datas" style="color:#1977FF" @click="seeFile(topLists.securePathDtos[0].securePathVideo)">{{topLists.securePathDtos[0].securePathVideoName}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="details_line"></view>
|
<view class="details_bottom">
|
<view class="details_header_search">
|
<u--input placeholder="请输入姓名" v-model="realName" width="80%" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
|
<view style="width:80px">
|
<u-button type="primary" text="搜索" @click="getAllUserList(secureId)"></u-button>
|
</view>
|
</view>
|
<view class="details_bottom_lists">
|
<scroll-view
|
scroll-y="true"
|
class="details_index_scroll"
|
:scroll-top="scrollTop"
|
refresher-enabled="true"
|
refresher-background="#EAEAEA"
|
:refresher-triggered="triggered"
|
@refresherpulling="refresherrefresh"
|
@scrolltolower="scrolltoLower">
|
<view class="details_bottom_card" v-for="(userItem,userIndex) in trainData" :key="userIndex">
|
<view class="details_bottom_items">
|
<view class="details_bottom_text">姓名：</view>
|
<view class="details_bottom_data" style="color: #1977FF;">{{userItem.realName}}</view>
|
</view>
|
<view class="details_bottom_items">
|
<view class="details_bottom_text">班组：</view>
|
<view class="details_bottom_data">{{userItem.groupName ===null?'':userItem.groupName}}</view>
|
</view>
|
<view class="details_bottom_items">
|
<view class="details_bottom_text">手机号：</view>
|
<view class="details_bottom_data">{{userItem.phone}}</view>
|
</view>
|
<view class="details_bottom_items">
|
<view class="details_bottom_text">培训完成时间：</view>
|
<view class="details_bottom_data">{{userItem.createTime}}</view>
|
</view>
|
</view>
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
|
</scroll-view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { throttle } from '../../plugins/public.js';
|
export default{
|
data(){
|
return{
|
totals:0,//应培训人数
|
completes:0,//已培训
|
secureId:null,//id
|
realName:'',//查询条件名字
|
topLists:{//上半部分展示
|
},
|
pageNum: 1,
|
pageSize: 10,
|
loadPage: 0,
|
scrollTop: 0,
|
triggered: true,
|
status: 'loading',
|
loadText: {
|
loading: '努力加载中',
|
nomore: '没有更多数据了'
|
},
|
trainData:[]//人员信息
|
}
|
},
|
onLoad(options) {
|
this.totals = options.totals
|
this.completes = options.completes
|
this.secureId = options.secureId
|
this.getTrainsDetail(options.secureId)
|
this.getAllUserList(options.secureId)
|
},
|
methods:{
|
//处理岗位显示
|
dealJob(val){
|
let arrName = ''
|
val.map(item=>{
|
arrName+=item.groupName +','
|
})
|
return arrName
|
},
|
//获取人员查询列表
|
getAllUserList(val){
|
let params = {
|
secureId:val,
|
realName:this.realName,
|
pageNum: this.pageNum,
|
pageSize:this.pageSize,
|
}
|
this.$api.reboSystem.getAllUsersList(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.trainData = res.data.list
|
this.loadPage = res.data.pages;
|
this.triggered = false;
|
this.status = 'nomore';
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
}).catch((err) => {
|
uni.$u.toast('请检查网络服务或联系管理员！')
|
})
|
},
|
//自定义下拉刷新
|
refresherrefresh: throttle(function() {
|
this.status = 'loading';
|
this.pageNum = 1;
|
this.getAllUserList(this.secureId);
|
uni.$u.toast('刷新成功');
|
}, 500),
|
//触底刷新
|
scrolltoLower: throttle(function() {
|
this.status = 'loading';
|
if(this.pageNum >= this.loadPage) {
|
setTimeout(() => {
|
this.status = 'nomore'
|
uni.$u.toast('没有更多数据了');
|
},1000)
|
return
|
} else {
|
this.pageNum+=1
|
let params = {
|
pageNum: this.pageNum,
|
pageSize:this.pageSize,
|
secureId:this.secureId,
|
realName:this.realName,
|
}
|
this.$api.reboSystem.getAllUsersList(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.trainData.push(...res.data.list)
|
this.loadPage = res.data.pages;
|
this.triggered = false;
|
this.status = 'nomore';
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
}).catch((err) => {
|
uni.$u.toast('请检查网络服务或联系管理员！')
|
})
|
}
|
}, 1500),
|
//点击查看文件
|
seeFile(val){
|
uni.showLoading({
|
title: '加载中...',
|
mask: true
|
})
|
uni.downloadFile({
|
url: `https://szpipe.thhy-tj.com/${val}`,
|
success: function (res) {
|
var filePath = res.tempFilePath;
|
uni.hideLoading()
|
uni.openDocument({
|
filePath: filePath,
|
showMenu:true,
|
fileType:val.split('.')[1],
|
success: function (res) {
|
console.log('打开文档成功');
|
}
|
});
|
}
|
});
|
},
|
//获取上半部分详情
|
getTrainsDetail(val){
|
this.$api.reboSystem.getTrainingInfo({secureId:val}).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.topLists = res.data
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.details_index{
|
height:100vh;
|
overflow-y: hidden;
|
background-color: #FFFFFF;
|
padding: 0px 15px;
|
.details_top{
|
height: 35vh;
|
overflow: auto;
|
|
.details_top_header{
|
height: 8vh;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.details_top_title{
|
padding-left: 10px;
|
font-size: 17px;
|
color: #333333;
|
position: relative;
|
&::before{
|
width: 2px;
|
height: 17px;
|
content: "";
|
position: absolute;
|
top: 4px;
|
left: 0px;
|
background-color: #3C75FE;
|
}
|
}
|
.details_top_num{
|
font-size: 16px;
|
color: #1977FF;
|
span{
|
color: #999999;
|
}
|
}
|
}
|
.details_top_main{
|
display: flex;
|
flex-direction: column;
|
.detail_top_contents{
|
display: flex;
|
justify-content: row;
|
line-height: 30px;
|
.detail_item_titles{
|
width: 100px;
|
flex: none;
|
font-size: 16px;
|
color: #999999;
|
}
|
.detail_item_datas{
|
flex: 1;
|
color: #333333;
|
flex-wrap: wrap;
|
font-size: 16px;
|
}
|
}
|
}
|
}
|
.details_line{
|
height: 5px;
|
background-color: #F6F6F6;
|
}
|
.details_bottom{
|
height: calc(100% - 40vh);
|
.details_header_search{
|
padding: 10px 0px;
|
height: 40px;
|
display: flex;
|
}
|
.details_bottom_lists{
|
height: calc(100% - 40px);
|
overflow-y: auto;
|
|
.details_index_scroll{
|
height: 90%;
|
.details_bottom_card{
|
padding: 0px 10px;
|
border-radius: 4px;
|
border: 1px solid #FAFAFA;
|
margin-bottom: 10px;
|
.details_bottom_items{
|
display: flex;
|
line-height: 30px;
|
align-items: center;
|
justify-content: space-between;
|
.details_bottom_text{
|
font-size:16px ;
|
color: #999999;
|
}
|
.details_bottom_data{
|
font-size: 16px;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
