554 lines
15 KiB
Vue
554 lines
15 KiB
Vue
<template>
|
||
<div class="page">
|
||
<div v-if="isShow" style="height:100%;">
|
||
<div class="fixed-top" style="width:100%;">
|
||
<!-- 头部搜索样式 -->
|
||
<div class="search-box">
|
||
<div class="search-input flex-row" @click="changeSearchBox">
|
||
<image src="https://cdn.cunwuyun.cn/img/search-red.svg"></image>
|
||
<span>{{ inputValue }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 选择时间和类型 -->
|
||
<div class='slect flex-row'>
|
||
<!-- 类型选择 -->
|
||
<div class="uni-list type-slect">
|
||
<div class="uni-list-cell">
|
||
<div class="uni-list-cell-db">
|
||
<picker @change="bindPickerChange" :range="array" range-key="dictName">
|
||
<div class="uni-input">{{ meetTypespan }}</div>
|
||
<image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
|
||
</picker>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 时间选择 -->
|
||
<div class="uni-list type-slect">
|
||
<div class="uni-list-cell">
|
||
<div class="uni-list-cell-db">
|
||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"
|
||
fields='month'>
|
||
<div class="uni-input">{{ day }}</div>
|
||
<image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
|
||
</picker>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="session-list">
|
||
<div class="session-item" v-for="(item, index) in meetList" :key="index">
|
||
<div class="item-top" @click="toSessionDetail(item.meetingId, item.status)">
|
||
<div class="item-title mar-b12">{{ item.meetingAgenda }}</div>
|
||
<div class="item-info">
|
||
<span class="info-label">会议状态：</span>
|
||
<span :class="'item-status'+item.postStatus" class="info-value">
|
||
{{ $dict.getLabel('postStatus', item.postStatus) }}
|
||
</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<span class="info-label">开始时间：</span>
|
||
<span class="info-value">{{ item.startTime || '-' }}</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<span class="info-label">会议地点：</span>
|
||
<span class="info-value">{{ item.meetingAddress || '-' }}</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<span class="info-label">主持人员：</span>
|
||
<span class="info-value">{{ item.hostName || '-' }}</span>
|
||
</div>
|
||
<div class="item-info mar-b12">
|
||
<span class="info-label">会议类型：</span>
|
||
<span class="info-value">{{ item.meetingClassification || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item-bottom">
|
||
<span class="item-btn border-E1E1E1" v-if="item.status == 3">已请假</span>
|
||
<span class="item-btn border-1365DD" v-if="item.status == 0" @click="signMeeting(item.meetingId)">签到</span>
|
||
<span class="item-btn border-E1E1E1" v-if="item.status == 1">已签到</span>
|
||
<span class="item-btn border-E1E1E1" v-if="item.status == 4">不签到</span>
|
||
</div>
|
||
<div class="item-status" :class="'item-status'+item.postStatus">
|
||
{{ $dict.getLabel('postStatus', item.postStatus) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<AiEmpty v-if="meetList.length == 0"/>
|
||
</div>
|
||
<div v-if="!isShow" class="search-input">
|
||
<div class="input-box flex-row">
|
||
<input class="input" placeholder="请输入会议标题" focus="false" v-model="searchValue" @blur="onBlur"/>
|
||
<image class="sousuo" src="https://cdn.cunwuyun.cn/img/search-active.svg"></image>
|
||
<image v-if="searchValue" @tap="clearInput" class="clear"
|
||
src="https://cdn.cunwuyun.cn/img/empty-Input.svg"></image>
|
||
<div class="search-word" @click="search">搜索</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {mapState} from 'vuex'
|
||
|
||
export default {
|
||
name:"AppThreeSessions",
|
||
appName: "三会一课",
|
||
data() {
|
||
const currentDate = this.getDate({
|
||
format: true
|
||
})
|
||
return {
|
||
inputValue: "请输入会议标题",
|
||
isShow: true,
|
||
array: [],
|
||
meetType: "",
|
||
meetTypespan: "会议类型",
|
||
index: 0,
|
||
date: currentDate,
|
||
day: "会议时间",
|
||
createDate: "",//创建时间
|
||
meetList: [],
|
||
searchValue: "",//搜索框输入值
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
pages: 2,
|
||
userId: '',
|
||
partyId: '',
|
||
meetTypeIndex: '',
|
||
};
|
||
},
|
||
computed: {
|
||
startDate() {
|
||
return this.getDate('start');
|
||
},
|
||
endDate() {
|
||
return this.getDate('end');
|
||
},
|
||
...mapState(['user']),
|
||
},
|
||
onLoad() {
|
||
this.partyId = this.user.id
|
||
this.$dict.load('postStatus', 'meetingClassification')
|
||
this.array = this.$dict.getDict('meetingClassification')
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
signMeeting(id) {
|
||
this.$http.post(`/app/appthreemeetinguser/signByMeetingIdAndUserIdForWX?meetingId=${id}&userId=${this.user.id}`, null, {}).then(res => {
|
||
if (res.code == 0) {
|
||
this.$toast('签到成功')
|
||
this.pageNum = 1;
|
||
this.pages = 2;
|
||
this.getList()
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err,
|
||
duration: 2000
|
||
});
|
||
})
|
||
},
|
||
btnClick(span) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: span,
|
||
duration: 2000
|
||
});
|
||
},
|
||
bindPickerChange(e) {
|
||
this.array.map((item, index) => {
|
||
if (e.detail.value == item.dictValue) {
|
||
this.meetTypespan = this.array[index].dictName
|
||
}
|
||
})
|
||
this.meetTypeIndex = e.detail.value
|
||
this.pageNum = 1;
|
||
this.pages = 2;
|
||
this.pageSize = 10;
|
||
this.getList()
|
||
},
|
||
bindDateChange: function (e) {
|
||
this.day = e.target.value;
|
||
this.createDate = e.target.value + '-' + "01"
|
||
this.pageNum = 1;
|
||
this.pages = 2;
|
||
this.pageSize = 10;
|
||
this.getList()
|
||
},
|
||
getDate(type) {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
|
||
if (type === 'start') {
|
||
year = year - 60;
|
||
} else if (type === 'end') {
|
||
year = year + 2;
|
||
}
|
||
month = month > 9 ? month : '0' + month;
|
||
day = day > 9 ? day : '0' + day;
|
||
|
||
return `${year}-${month}-08 00:00:00 `;
|
||
},
|
||
changeSearchBox() {
|
||
this.isShow = false;
|
||
},
|
||
onBlur(e) {
|
||
this.searchValue = e.target.value;
|
||
if (this.searchValue) {
|
||
this.inputValue = this.searchValue;
|
||
} else {
|
||
this.inputValue = "请输入会议标题";
|
||
}
|
||
},
|
||
search() {
|
||
this.isShow = true;
|
||
this.pageNum = 1;
|
||
this.pageSize = 10;
|
||
this.pages = 2;
|
||
this.getList()
|
||
},
|
||
clearInput() {
|
||
this.searchValue = ''
|
||
this.inputValue = "请输入会议标题";
|
||
},
|
||
getList() {
|
||
if (this.pageNum > this.pages) return
|
||
// var searchYMD = ''
|
||
// if(this.createDate) {
|
||
// searchYMD = this.createDate + '-01'
|
||
// }
|
||
this.$http.post(`/app/appthreemeetinguser/listForWX?meetingUserId=${this.user.id}&meetingAgenda=${this.searchValue}&meetingClassification=${this.meetTypeIndex}&searchYMD=${this.createDate}¤t=${this.pageNum}&size=${this.pageSize}`
|
||
).then(res => {
|
||
if (res.code == 0) {
|
||
const meetList = this.pageNum > 1 ? [...this.meetList, ...res.data.records] : res.data.records
|
||
meetList.map(item => {
|
||
if (item.meetingClassification.length == 1) {
|
||
item.meetingClassification = this.$dict.getLabel('meetingClassification', item.meetingClassification)
|
||
} else {
|
||
var typeList = item.meetingClassification.split(',')
|
||
typeList.map((items, index) => {
|
||
if (index == 0) {
|
||
item.meetingClassification = this.$dict.getLabel('meetingClassification', items)
|
||
} else {
|
||
item.meetingClassification = item.meetingClassification + ',' + this.$dict.getLabel('meetingClassification', items)
|
||
}
|
||
return item.meetingClassification
|
||
})
|
||
return item.meetingClassification
|
||
}
|
||
return item
|
||
})
|
||
this.pages = Math.ceil(res.data.total / 10)
|
||
this.meetList = meetList
|
||
}
|
||
})
|
||
},
|
||
toSessionDetail(id, signStatus) {
|
||
uni.navigateTo({
|
||
url: `../threeSessions/threeSessionsDetail?id=${id}&signStatus=${signStatus}&token=${uni.getStorageSync("token")}`
|
||
})
|
||
},
|
||
leave() {
|
||
uni.showModal({
|
||
title: '如需请假，请联系签到负责人',
|
||
confirmspan: "确认",
|
||
confirmColor: "#135AB8",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
} else if (res.cancel) {
|
||
}
|
||
}
|
||
});
|
||
},
|
||
changeStatus(id, signStatus, joinStatus, signMethod, absence, meetingUserId, meetingId, successspan) {
|
||
let signTime = new Date().getFullYear() + '-' + this.isDate(new Date().getMonth() + 1) + '-' + this.isDate(new Date().getDate()) + ' ' + this.isDate(new Date().getHours()) + ':' + this.isDate(new Date().getMinutes()) + ':' + this.isDate(new Date().getSeconds())
|
||
var params = {
|
||
id,
|
||
signStatus,
|
||
joinStatus,
|
||
signMethod,
|
||
absence,
|
||
signUserId: this.user.id,
|
||
signUserName: this.user.realName,
|
||
signTime,
|
||
meetingUserId,
|
||
meetingId
|
||
}
|
||
this.$http.post(`/app/appthreemeetinguser/addOrUpdate`, null, {
|
||
data: params
|
||
}).then(res => {
|
||
if (res?.code == 0) {
|
||
uni.showToast({
|
||
title: successspan + '成功！',
|
||
duration: 2000
|
||
});
|
||
this.pageNum = 1;
|
||
this.pages = 2;
|
||
this.getList()
|
||
}
|
||
})
|
||
},
|
||
isDate(num) {
|
||
if (num < 10) {
|
||
num = '0' + num
|
||
}
|
||
return num
|
||
},
|
||
},
|
||
onReachBottom() {
|
||
this.pageNum = this.pageNum + 1
|
||
this.getList()
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scope>
|
||
@import "../../../common/common.css";
|
||
|
||
.page {
|
||
.search-box {
|
||
width: 100%;
|
||
height: 112px;
|
||
background-color: #e60012;
|
||
padding: 24px 32px;
|
||
box-sizing: border-box;
|
||
|
||
.search-input {
|
||
line-height: 64px;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #CE0010;
|
||
border-radius: 32px;
|
||
color: #F0CBCD;
|
||
font-size: 26px;
|
||
|
||
image {
|
||
width: 34px;
|
||
height: 34px;
|
||
margin: 8px 8px 8px 24px;
|
||
position: relative;
|
||
top: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.slect {
|
||
width: 100%;
|
||
height: 96px;
|
||
background-color: #fff;
|
||
color: #666;
|
||
|
||
.type-slect {
|
||
width: 50%;
|
||
border-right: 1px solid #F7F7F7;
|
||
margin: 30px 0;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
font-size: 26px;
|
||
|
||
.uni-input {
|
||
display: inline-block;
|
||
}
|
||
|
||
image {
|
||
width: 32px;
|
||
height: 32px;
|
||
display: inline-block;
|
||
position: relative;
|
||
top: 6px;
|
||
margin-left: 8 srpx;
|
||
}
|
||
}
|
||
|
||
.type-slect:nth-child(2) {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.search-input {
|
||
.input-box {
|
||
width: 100%;
|
||
height: 112px;
|
||
background-color: #fff;
|
||
padding: 24px 32px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.sousuo {
|
||
position: absolute;
|
||
top: 35px;
|
||
left: 60px;
|
||
width: 34px;
|
||
height: 34px;
|
||
}
|
||
|
||
.input {
|
||
background-color: #F3F3F3;
|
||
width: 598px;
|
||
height: 64px;
|
||
color: #999999;
|
||
font-size: 26px;
|
||
margin-left: 8px;
|
||
border-radius: 32px;
|
||
padding-left: 70px;
|
||
padding-right: 60px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.clear {
|
||
width: 32px;
|
||
height: 32px;
|
||
position: absolute;
|
||
top: 40px;
|
||
right: 130px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.search-word {
|
||
font-size: 28px;
|
||
color: #135AB8;
|
||
line-height: 60px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.session-list {
|
||
padding-top: 224px;
|
||
|
||
.session-item {
|
||
width: 686px;
|
||
margin: 0 auto 32px auto;
|
||
background-color: #fff;
|
||
// height: 462rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.item-top {
|
||
padding: 32px 32px 0 32px;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333;
|
||
line-height: 44px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.item-info {
|
||
line-height: 42px;
|
||
font-size: 28px;
|
||
margin-bottom: 8px;
|
||
|
||
.info-label {
|
||
color: #999;
|
||
}
|
||
|
||
}
|
||
|
||
.item-bottom {
|
||
border-top: 2px solid #EEE;
|
||
text-align: right;
|
||
padding-right: 64px;
|
||
box-sizing: border-box;
|
||
line-height: 96px;
|
||
|
||
.item-btn {
|
||
display: inline-block;
|
||
width: 152px;
|
||
height: 52px;
|
||
line-height: 52px;
|
||
border-radius: 28px;
|
||
text-align: center;
|
||
font-size: 28px;
|
||
margin-left: 32px;
|
||
border: 2px solid #E1E1E1;
|
||
}
|
||
}
|
||
|
||
.info-value {
|
||
color: #343D65;
|
||
background-color: #fff !important;
|
||
}
|
||
|
||
.item-status {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: -36rpx;
|
||
width: 140px;
|
||
text-align: center;
|
||
line-height: 44px;
|
||
font-size: 24px;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.item-status1 {
|
||
color: #FF9B2B;
|
||
background-color: #FFF3E8;
|
||
}
|
||
|
||
.item-status0 {
|
||
color: #2EA222;
|
||
background-color: #EAF5E8;
|
||
}
|
||
|
||
.item-status3 {
|
||
color: #999;
|
||
background-color: #F2F2F2;
|
||
}
|
||
|
||
.item-status2 {
|
||
color: #5A98F2;
|
||
background-color: #F1F6FF;
|
||
}
|
||
|
||
.color-1365DD {
|
||
color: #1365DD;
|
||
}
|
||
|
||
.color-FF4466 {
|
||
color: #FF4466;
|
||
}
|
||
|
||
.color-333333 {
|
||
color: #333;
|
||
}
|
||
|
||
.color-606060 {
|
||
color: #606060;
|
||
}
|
||
|
||
.border-1365DD {
|
||
border-color: #1365DD !important;
|
||
color: #1365DD !important;
|
||
}
|
||
|
||
.border-E1E1E1 {
|
||
border-color: #E1E1E1 !important;
|
||
color: #606060;
|
||
}
|
||
|
||
.border-E1E1E1 {
|
||
border-color: #E1E1E1 !important;
|
||
}
|
||
|
||
.mar-b12 {
|
||
margin-bottom: 26px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-affairs {
|
||
width: 100%;
|
||
height: calc(100% - 210rpx);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|