crm-xcx/pages-approve/activity/list.vue

<template>
	<view>
		<van-sticky>
			<view class="top-wrap" v-show="['活动申请','活动审批'].includes(activity_type)">
				<van-tabs swipeable id="tabs" :active="status" title-active-color="#3385FF" color="#3385FF"
					@change="typeChange">
					<van-tab title="待处理" name="1"></van-tab>
					<van-tab title="已处理" name="2"></van-tab>
				</van-tabs>
			</view>
		</van-sticky>
		<van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0" />
		<view class="list-wrap" v-else>
			<!-- 活动 -->
			<block v-if="activity_type !== '事项'">
				<view class="item white-wrap" v-for="item in list" :key="item.RsCalendarResearcherId" @click="goDetail(item)">
					
					<!-- 路演 公开会议 -->
					<block v-if="['活动申请','活动审批'].includes(activity_type)">					
						<view class="title flex">
							<image src="../../static/man.png" mode="aspectFill" class="icon" v-if="item.ActivityType=='路演'">
							</image>
							<image style="width:16px;height:16px" src="../static/icon-1.png" mode="aspectFill" class="icon"
								v-else></image>
							<view>{{item.ActivityType=='路演'?item.CompanyName:item.Theme}}</view>
						</view>
						<view class="content">
								<view class="info">活动类型：{{item.RoadshowType}}{{item.ActivityType}}</view>
								<view class="info">{{activity_type === '活动申请' ? `研究员：${item.ResearcherName}` : `提交销售：${item.SysUserRealName}` }} </view>
								<view class="info">提交时间：{{item.CreateTime|formatTime}}</view>	
						</view>
						<view class="status approve-list-status-wait" v-if="item.Status=='1'">待审批</view>
						<view class="status approve-list-status-success" v-if="item.Status=='2'">已接受</view>
						<view class="status approve-list-status-fail" v-if="item.Status=='3'">已拒绝</view>
						<view class="status approve-list-status-cancel" v-if="item.Status=='4'">已删除</view>
						<view class="status approve-list-status-cancel" v-if="item.Status=='5'">已撤回</view>
						<view class="status approve-list-status-cancel" v-if="item.Status=='6'">已结束</view>
					</block>
					
					<!-- 其他 -->
					<block v-else-if="['内部会议','报告电话会'].includes(activity_type)">
						<view class="content">
								<view class="info">{{activity_type==='内部会议' ? '会议' : '活动'}}时间：
										{{item.StartDate}}({{item.StartWeek}})
										{{item.StartTime.substr(0,5)}}~{{item.EndTime.substr(0,5)}}
								</view>
								<view class="info" v-if="item.ActivityCategory">活动类别：{{item.ActivityCategory}} </view>
								<view class="info" v-if="['内部会议','报告电话会'].includes(activity_type)">参会人员：{{ item.ResearcherName }} </view>
								
								<view class="info">添加时间：{{item.CreateTime|formatTime}}</view>
								
								<view class="bot-btns" v-if="haveActiyityStart(item)">
										<van-button type="primary" plain color="#3385FF" class="btn" size="small" block round @click.stop="handleAction(item,'del')">删除</van-button>
										<van-button type="primary" color="#3385FF" class="btn" size="small" block round @click.stop="handleAction(item,'edit')">修改</van-button>
								</view>
						</view>
					</block>
				</view>
			</block>
			
			
			<!-- 事项 -->
			<block v-else>
				<view class="item white-wrap" v-for="item in list" :key="item.RsMattersId">
						<view class="content">
								<view class="info">{{activity_type==='内部会议' ? '会议' : '活动'}}时间：
									<block v-if="item.StartDate === item.EndDate">
										{{item.StartDate}}({{item.StartWeek}})
										{{item.StartTime.substr(0,5)}}~{{item.EndTime.substr(0,5)}}
									</block>
									<block v-else>
										{{item.StartDate}}({{item.StartWeek}}){{item.StartTime.substr(0,5)}}~{{item.EndDate}}({{item.EndWeek}}){{item.EndTime.substr(0,5)}}
									</block>
								</view>
								<view class="info" v-if="item.MatterContent">事项内容：{{item.MatterContent}} </view>
								
								<view class="info">添加时间：{{item.CreateTime|formatTime}}</view>
								<!-- <view class="info" v-if="item.EditReason" style="display: flex;">
									<view>最近修改记录：</view> 
									<view>
										<view>{{item.EditReason}}</view>
										<view style="color: #999;">{{item.ModifyTime|formatTime}}</view>
									</view>	
								</view> -->
								
								<view class="bot-btns">
										<van-button type="primary" plain color="#3385FF" class="btn" size="small" block round 
											v-if="!item.ButtonAuth.RemoveDisabled"
											@click.stop="handleAction(item,'del')">删除</van-button>
										<van-button type="primary" color="#3385FF" class="btn" size="small" block round 
											v-if="!item.ButtonAuth.EditDisabled"
											@click.stop="handleAction(item,'edit')">修改</van-button>
								</view>
						</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		apiRoadShowList
	} from '@/api/approve/activity.js'
	import {
		calendarTypeList,
		matterList,
		delMatter,
		delActivity
	} from '@/api/roadshow/index.js';
	import { getRole,editInfoBack } from './checkRole.js';
	import moment from '@/pages-roadshow/utils/_moment.js';
	export default {
		data() {
			return {
				activity_type: '',//活动类型
				status: '1',
				list: [],
				page: 1,
				finished: false,
			}
		},
		onLoad(options) {
			this.activity_type = options.type;
			// this.getList()
			uni.$on('activityApproveListUpdate', (e) => {
				console.log('activityApproveListUpdate' + e);
				this.list = this.list.filter(item => {
					return item.RsCalendarId != e.RsCalendarId && item.RsCalendarResearcherId != e
						.RsCalendarResearcherId
				})
				if (this.list.length === 0) {
					this.finished = true
				}
			})
		},
		onUnload() {
			uni.$off('activityApproveListUpdate')
		},
		onShow(options) {
			this.initState(this.activity_type);
			this.$nextTick(() => {
				this.selectComponent('#tabs').resize(); // 解决初始渲染 vant tab 底部条
			})
		},
		onPullDownRefresh() {
			this.page = 1
			this.finished = false
			this.list = []
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onReachBottom() {
			if (this.finished) return
			this.page++
			this.getList()
		},
		methods: {
			
			/* 默认tab 状态 */
			initState(title) {
				uni.setNavigationBarTitle({
					title
				})
				this.page = 1
				this.finished = false
				this.list = []
				this.getList()
			},
			
			typeChange(e) {
				this.status = e.detail.name
				this.page = 1
				this.finished = false
				this.list = []
				this.getList()
			},

			async getList() {
				
				const res = ['活动申请','活动审批'].includes(this.activity_type) 
				? await apiRoadShowList({
					PageSize: 20,
					CurrentIndex: this.page,
					Status: this.status
				})
				: ['内部会议','报告电话会'].includes(this.activity_type)
				? await calendarTypeList({
					PageSize: 20,
					CurrentIndex: this.page,
					CalendarType: this.activity_type==='内部会议' ? 1 : 2
				})
				: this.activity_type === '事项'
				? await matterList({
					PageSize: 20,
					CurrentIndex: this.page,
				})
				: null
				
				if (res.code === 200) {
					if (!res.data.List || res.data.List.length === 0) {
						this.finished = true
					} else {
						let arr = res.data.List || []
						this.list = [...this.list, ...arr]
					}
				}
			},

			goDetail(e) {
				if(!['活动申请','活动审批'].includes(this.activity_type)) return;
				
				uni.navigateTo({
					url: `/pages-approve/activity/detail?RsCalendarId=${e.RsCalendarId}&RsCalendarResearcherId=${e.RsCalendarResearcherId}`
				})
			},
			
			/* 操作 */
			handleAction(item,type) {
				console.log(item)
				type === 'del' ? this.delActivityHandle(item) : this.editActivityHandle(item);
			},
			
			/* 删除活动/事项 */
			delActivityHandle({RsCalendarId,RsCalendarResearcherId,RsMattersId}) {
				uni.showModal({
					content: '删除该活动后，将从日历中移除，确定继续吗？',
					showCancel: true,
					cancelColor: '#A9AFB8',
					confirmColor: '#3385FF',
					success: async ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							console.log('用户点击确定');
							const { code } = RsMattersId ? await delMatter({ RsMattersId }) : await delActivity({
								RsCalendarId,
								RsCalendarResearcherId
							})
							
							if(code !==200) return
							
							this.page = 1;
							this.list = [];
							this.getList();
							
						}
					}
				})
			},
			
			/* 修改 */
			editActivityHandle(item) {
				// console.log(item)
				const { RsCalendarId,RsCalendarResearcherId,RsMattersId,MatterContent,StartDate,StartTime,EndTime,EndDate } = item;
				//编辑活动
				if(!RsMattersId) {
					
					let form = editInfoBack(item,2),
							edit_id = RsCalendarId,
							edit_rs_id = RsCalendarResearcherId;
							
					// uni.navigateTo({
					// 	url:`/pages-roadshow/addActivity/index?form=${JSON.stringify(form)}&edit_id=${edit_id}&edit_rs_id=${edit_rs_id}`
					// });
					
					uni.navigateTo({
						url:`/pages-roadshow/addActivity/index`,
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('emitBackData', {
								form: JSON.stringify(form),
								edit_id,
								edit_rs_id
							})
						}
					});
				} else {
					//编辑事项
					this.editMatter({ RsMattersId,StartDate,StartTime,EndDate,EndTime,MatterContent });
				}
			},
			
			/* 编辑事项 */
			editMatter({ RsMattersId,StartDate,StartTime,EndDate,EndTime,MatterContent }) {
				let matter_form = {
							startTime: new Date(`${StartDate.replace(/-/g,'/')} ${StartTime}`).getTime(),
							endTime: new Date(`${EndDate.replace(/-/g,'/')} ${EndTime}`).getTime(),
							matterContent: MatterContent,
						},
						edit_matter_id = RsMattersId;
				
				// uni.navigateTo({
				// 	url:`/pages-roadshow/addMatter/index?form=${JSON.stringify(matter_form)}&edit_matter_id=${edit_matter_id}`
				// });	
				
				uni.navigateTo({
					url:`/pages-roadshow/addMatter/index`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('emitBackData', {
							form: JSON.stringify(matter_form),
							edit_matter_id
						})
					}
				});
			},
			
			/* 活动是否已开始 */
			haveActiyityStart({ StartDate,StartTime }) {
				return moment(`${StartDate} ${StartTime}`).valueOf() > new Date().getTime()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-wrap {
		padding: 20rpx;

		.item {
			padding: 30rpx;
			box-shadow: 0px 3px 12px rgba(175, 175, 175, 0.16);
			border-radius: 8px;
			margin-bottom: 20rpx;

			.title {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 30rpx;

				.icon {
					width: 31rpx;
					height: 34rpx;
					flex-shrink: 0;
					margin-right: 10rpx;
					position: relative;
					top: 4rpx;
				}
			}

			.content {
				font-size: 14px;
				color: #666;

				.info {
					margin-bottom: 16rpx;
					/* text-indent: -140rpx;
					margin-left: 140rpx; */
				}

				.info:last-child {
					margin-bottom: 0;
				}
			}

			.status {
				text-align: right;
			}
			.bot-btns {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.btn {
					width: 180rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>