446 lines
10 KiB
Vue
446 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<view class="select_warp">
|
|
<view class="topbox">
|
|
<view class="tab_list">
|
|
<view
|
|
class="tab_li"
|
|
v-for="(item,index) in readList"
|
|
:key="index"
|
|
:class="{'tab_li_active': item.id == readIndex}"
|
|
@click="changeTab(item)"
|
|
>{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="searchbox">
|
|
<view class="searchtext" @click="toQuery">筛选<view class="iconfont icon-shaixuan"></view></view>
|
|
</view>
|
|
<uni-popup ref="screenpopup" type="top" background-color="#fff">
|
|
<view class="warpbox">
|
|
<scroll-view scroll-y class="scrollbox" style="height:600rpx;background:#fff;" >
|
|
<!--筛选模块 -->
|
|
<view class="screen_content" @tap.stop.prevent>
|
|
<view class="fir_li">
|
|
<view class="li_label">提交人</view>
|
|
<view class="li_box">
|
|
<view class="form_right" @click="toSelectStaff">
|
|
<view :class="staffObj ? 'valueActive' : '' ">{{staffObj ? staffObj.name : '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fir_li">
|
|
<view class="li_label">报告类型</view>
|
|
<picker @change="changeWorkType" :value="workIndex" :range="workList">
|
|
<view class="li_box">
|
|
<view class="form_right">
|
|
<view :class="workList[workIndex] ? 'valueActive' : '' ">{{workList[workIndex] ? workList[workIndex] : '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="fir_li">
|
|
<view class="li_label">时间筛选</view>
|
|
<view class="li_box" style="display: flex;">
|
|
<picker @change="changeStartTime" mode="date" :end="end_time"
|
|
style="width:50%;border-right:1rpx solid #CCCCCC">
|
|
<view class="form_right">
|
|
<view style="flex:1;text-align: center;"
|
|
:class="start_time ? 'valueactive' : '' ">
|
|
{{start_time ? start_time : '开始时间'}}</view>
|
|
</view>
|
|
</picker>
|
|
<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
|
|
<view class="form_right">
|
|
<view style="flex:1;text-align: center;"
|
|
:class="end_time ? 'valueactive' : '' ">{{end_time ? end_time : '结束时间'}}
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="button_bottom">
|
|
<view @tap.stop="reset">重置</view>
|
|
<view @tap.stop="sureQuery">确定</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<view>
|
|
<view class="work_li" v-for="(item,index) in list" :key="index" @click="jumpDetail(item)">
|
|
<view class="li_key" v-if="item.is_read != 1"></view>
|
|
<view class="li_left">
|
|
<image :src="item.staff.img ? item.staff.img : BASE_IMG_URL+'img/headImg.png'" class="li_img" mode=""></image>
|
|
<view class="">
|
|
<view class="li_name">{{item.staff.name}} <text style="font-size:24rpx;color:#999;margin-left:15rpx">{{item.staff.post?item.staff.post:''}}</text> </view>
|
|
<view class="li_post">{{item.createtime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="li_right">
|
|
<view class="tatus firbg" v-if="item.type == '日报'">日报</view>
|
|
<view class="tatus secbg" v-if="item.type == '周报'">周报</view>
|
|
<view class="tatus thrbg" v-if="item.type == '月报'">月报</view>
|
|
<view class="tatus forbg" v-if="item.type == '季报'">季报</view>
|
|
<view class="tatus fivbg" v-if="item.type == '年报'">年报</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore v-if="list.length == 0" status="nomore"></u-loadmore>
|
|
</view>
|
|
|
|
<!-- 创建用户图标 -->
|
|
<view class="icon_creat" @click="createWork">
|
|
<image :src="BASE_IMG_URL+'1.png'"></image>
|
|
</view>
|
|
|
|
<select-staff ref="staffChild" @sureStaff="sureStaff"></select-staff>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { netWorkreportList } from '@/api/index.js'
|
|
import { netSelect, netSearchStaffList } from '@/api/kehu.js'
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
import selectStaff from '@/components/selectStaff.vue'
|
|
|
|
export default{
|
|
components:{
|
|
selectStaff
|
|
},
|
|
data(){
|
|
return{
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
list:[],
|
|
page:1,
|
|
totalPage:1,
|
|
workList:[],
|
|
workIndex:null,
|
|
readList:[{id:0,name:'全部'},{id:1,name:'已读'},{id:2,name:'未读'}],
|
|
readIndex:0,
|
|
staffObj:null, //提交人
|
|
permission:{}, //权限
|
|
start_time:'',
|
|
end_time:'',
|
|
}
|
|
},
|
|
onShow() {
|
|
this.list = []
|
|
this.page = 1
|
|
this.getList()
|
|
//获取筛选条件
|
|
this.getSelect()
|
|
//获取 归属人
|
|
this.getPeopel()
|
|
|
|
this.permission = getApp().globalData.permission
|
|
},
|
|
onReachBottom() {
|
|
if(this.page >= this.totalPage){
|
|
return
|
|
}
|
|
this.page ++
|
|
this.getList()
|
|
},
|
|
methods:{
|
|
toSelectStaff() {
|
|
this.$refs.staffChild.init()
|
|
},
|
|
sureStaff(obj) {
|
|
this.staffObj = obj
|
|
},
|
|
toQuery() {
|
|
this.$refs.screenpopup.open()
|
|
},
|
|
changeStartTime(e) {
|
|
this.start_time = e.detail.value
|
|
if(!this.end_time){
|
|
this.end_time = e.detail.value
|
|
}
|
|
},
|
|
changeEndTime(e) {
|
|
this.end_time = e.detail.value
|
|
if(!this.start_time){
|
|
this.start_time = e.detail.value
|
|
}
|
|
},
|
|
init(){
|
|
this.page = 1
|
|
this.list = []
|
|
setTimeout(()=>{
|
|
this.getList()
|
|
},200)
|
|
},
|
|
changeTab(item) {
|
|
this.readIndex = item.id
|
|
this.init()
|
|
},
|
|
//获取归属人
|
|
getPeopel() {
|
|
netSearchStaffList().then(res=>{
|
|
this.typeList = res.data
|
|
})
|
|
},
|
|
//获取筛选条件
|
|
getSelect() {
|
|
netSelect().then(res=>{
|
|
this.workList = res.data['报告类型']
|
|
})
|
|
},
|
|
getList() {
|
|
let params = {
|
|
page:this.page,
|
|
is_read:this.readIndex,
|
|
staff_id:this.staffObj?this.staffObj.id:'',
|
|
type:(this.workList && this.workList[this.workIndex])?this.workList[this.workIndex]:'',
|
|
times:(this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
|
|
}
|
|
netWorkreportList(params).then(res=>{
|
|
this.list = this.list.concat(res.data.data)
|
|
this.totalPage = res.data.last_page
|
|
})
|
|
},
|
|
jumpDetail(item) {
|
|
uni.navigateTo({
|
|
url:'/pagesB/workreport/workDetail?id='+item.id
|
|
})
|
|
},
|
|
//修改 报告状态
|
|
changeRead(e) {
|
|
this.readIndex = e.detail.value
|
|
},
|
|
changeWorkType(e) {
|
|
this.workIndex = e.detail.value
|
|
},
|
|
//重置
|
|
reset() {
|
|
this.readIndex = null
|
|
this.workIndex = null
|
|
this.staffObj = null
|
|
this.start_time = ''
|
|
this.end_time = ''
|
|
},
|
|
sureQuery() {
|
|
this.$refs.screenpopup.close()
|
|
this.init()
|
|
},
|
|
//创建 工作报告
|
|
createWork() {
|
|
uni.navigateTo({
|
|
url:'/pagesB/workreport/addReports'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.topbox{
|
|
width:750rpx;
|
|
height:80rpx;
|
|
background:#fff;
|
|
.tab_list{
|
|
padding:0 24rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
.tab_li{
|
|
width:120rpx;
|
|
font-size:30rpx;
|
|
color:#666;
|
|
height:80rpx;
|
|
margin-right:40rpx;
|
|
line-height: 80rpx;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
}
|
|
.tab_li_active{
|
|
color:#000;
|
|
position: relative;
|
|
&::after{
|
|
content:'';
|
|
width:60rpx;
|
|
height:6rpx;
|
|
background:$uni-text-color;
|
|
position: absolute;
|
|
bottom:0;
|
|
left:50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.icon_creat {
|
|
position: fixed;
|
|
z-index: 1;
|
|
bottom: 100rpx;
|
|
right: 100rpx;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.firbg{
|
|
background:#AF99FE;
|
|
}
|
|
.secbg{
|
|
background:#FBB545;
|
|
}
|
|
.thrbg{
|
|
background:#4AD49D;
|
|
}
|
|
.forbg{
|
|
background:#FF6E7F;
|
|
}
|
|
.fivbg{
|
|
background:#54B1F7;
|
|
}
|
|
|
|
.valueactive{
|
|
color:#333;
|
|
}
|
|
.rediowarp{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
label{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-right:24rpx;
|
|
align-items: center;
|
|
}
|
|
radio{
|
|
transform: scale(0.7);
|
|
}
|
|
}
|
|
.work_li{
|
|
width:702rpx;
|
|
background:#fff;
|
|
border-radius: 10rpx;
|
|
padding:30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin:0 auto 24rpx;
|
|
position: relative;
|
|
.li_key{
|
|
position: absolute;
|
|
right:5rpx;
|
|
top:5rpx;
|
|
width:20rpx;
|
|
height:20rpx;
|
|
border-radius: 50%;
|
|
background:red;
|
|
}
|
|
.li_left{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size:26rpx;
|
|
color:#333;
|
|
.li_img{
|
|
width:80rpx;
|
|
height:80rpx;
|
|
border-radius: 50%;
|
|
margin-right:15rpx;
|
|
}
|
|
.li_name{
|
|
font-size:26rpx;
|
|
color:#333;
|
|
margin-bottom:15rpx;
|
|
}
|
|
}
|
|
.li_right{
|
|
.tatus{
|
|
font-size:24rpx;
|
|
color:#fff;
|
|
width:110rpx;
|
|
height:55rpx;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
line-height: 55rpx;
|
|
}
|
|
}
|
|
}
|
|
.select_warp{
|
|
z-index: 9;
|
|
}
|
|
.searchbox{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin:24rpx;
|
|
.searchtext{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size:24rpx;
|
|
color:$uni-text-color;
|
|
padding:5rpx 23rpx;
|
|
background:#fff;
|
|
border-radius: 5rpx;
|
|
box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
.warpbox{
|
|
width:750rpx;
|
|
z-index: 2;
|
|
background:rgba(0,0,0,0.7);
|
|
.screen_content {
|
|
width:702rpx;
|
|
z-index: 2;
|
|
border-top:1rpx solid #CCCCCC;
|
|
background-color: #fff;
|
|
padding:24rpx;
|
|
.fir_li{
|
|
margin-bottom:20rpx;
|
|
.li_label{
|
|
font-size:28rpx;
|
|
color:#333333;
|
|
margin-bottom:15rpx;
|
|
}
|
|
.li_box{
|
|
border-radius: 15rpx;
|
|
border:1rpx solid #CCCCCC;
|
|
height:60rpx;
|
|
padding:0 35rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
.form_right {
|
|
display: flex;
|
|
color: #999;
|
|
justify-content: space-between;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 28rpx 5rpx 0 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.button_bottom {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background-color: #fff;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
:first-child {
|
|
flex: 1;
|
|
color: $uni-text-color;
|
|
border-top:1rpx solid #CCCCCC;
|
|
}
|
|
:last-child {
|
|
flex: 1;
|
|
background-color: $uni-text-color;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|