ningxiaWeb/jnpf-app/pages/workFlow/components/RecordSummary.vue

<template>
	<view class="approve-v u-flex-col">
		<u-tabs :list="approve_list" :current="approveIndex" @change="approveChange" height="90" :show-bar="false"
			:active-item-style='activeItemStyle' font-size="28">
		</u-tabs>
		<view class="approve_list">
			<view v-if="list.length">
				<view class="u-flex approve_box" v-for="(item,index) in list" :key="index">
					<view class="tit">{{item.fullName}}</view>
					<view class="u-flex-col approve_box_right">
						<view v-for="(child,i) in item.list" :key="i" class="approve_box_right_inner">
							<view class="u-flex approve_item">
								<u-avatar size='mini' :src="baseURL+child.headIcon"></u-avatar>
								<view class="approve_box_right_list ">
									<view class="u-flex-col user_name marginBottom">
										<view class="name u-flex">{{child.userName}}
											<text
												class="dateTime">{{'于 '+$u.timeFormat(child.handleTime,'yyyy-mm-dd hh:MM')}}</text>
											<u-tag :text="child.txt" mode="light" :type="child.tagType" />
										</view>
										<text class="content_txt"
											v-if="child.handleOpinion && child.handleStatus!=2">{{child.handleOpinion}}</text>
										<view v-if="child.fileList.length && child.handleStatus!=2"
											v-for='(item,index) in child.fileList' :key="index"
											class="jnpf-file-item u-type-primary u-flex u-line-1" @tap='downLoad(item)'>
											<view class="jnpf-file-item-txt u-line-1">{{item.name}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="noContent" v-else>
				<img :src="nodataIcon" alt="" class="img">
				<view class="">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRecordList
	} from '@/api/workFlow/flowBefore'
	import {
		getDownloadUrl
	} from '@/api/common'
	import resources from '@/libs/resources.js'
	export default {
		name: "RecordSummary",
		props: {
			processId: {
				type: String,
				default: ''
			},
			summaryType: {
				default: "0"
			},
		},
		data() {
			return {
				approve_list: [{
					name: '按部门汇总',
					id: '1'
				}, {
					name: '按岗位汇总',
					id: '3'
				}],
				list: [],
				approveIndex: 0,
				tabI: 1,
				nodataIcon: resources.message.nodata,
				activeItemStyle: {
					'background-color': '#f0f2f6',
					'border-radius': '18rpx 18rpx 0 0',
				}
			}
		},
		created() {
			this.init()
		},
		computed: {
			baseURL() {
				return this.define.baseURL
			},
		},
		watch: {
			approveIndex(val) {
				this.init()
			}
		},
		methods: {
			init() {
				const query = {
					category: this.tabI,
					type: this.summaryType
				}
				getRecordList(this.processId, query).then(res => {
					this.list = res.data || []
					if (this.list.length) {
						this.list.forEach((o, i) => {
							o.list.forEach(j => {
								j.fileList = j.fileList ? JSON.parse(j.fileList) : []
							})
							o.list = o.list.map(i => ({
								txt: i.handleStatus == 0 ? '退回' : i.handleStatus == 1 ? '同意' :
									i.handleStatus == 2 ? '发起' : i.handleStatus == 3 ? '撤回' : i
									.handleStatus == 4 ? '终止' : i.handleStatus == 5 ? '指派' : i
									.handleStatus == 6 ? '后加签' : i.handleStatus == 10 ? '前加签' :
									i.handleStatus == 8 ? '变更' : '转审',
								tagType: i.handleStatus == 0 ? 'error' : i.handleStatus == 1 ?
									'success' : i.handleStatus == 3 || i.handleStatus == 4 || i
									.handleStatus == 8 ?
									'warning' : "primary",
								...i
							}))
						})
					}
				}).catch(() => {})
			},
			approveChange(index) {
				this.approveIndex = index;
				this.tabI = this.approve_list[index].id
			},
			//文件下载
			downLoad(item) {
				// #ifdef MP
				this.previewFile(item)
				// #endif
				// #ifndef MP
				getDownloadUrl('annex', item.fileId).then(res => {
					const fileUrl = this.baseURL + res.data.url;
					// #ifdef H5
					window.location.href = fileUrl;
					// #endif
					// #ifdef APP-PLUS
					this.downloadFile(res.data.url);
					// #endif
				})
				// #endif
			},
			downloadFile(url) {
				uni.downloadFile({
					url: this.baseURL + url,
					success: res => {
						if (res.statusCode === 200) {
							const filePath = res.tempFilePath;
							uni.openDocument({
								filePath: escape(filePath),
								success: ress => {},
								fail(err) {}
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.approve-v {
		.u-tabs {
			height: 90rpx !important;

			/deep/ .u-tab-item {
				margin-top: 20rpx;
				height: 74rpx !important;
				line-height: 73rpx !important;
			}
		}

		.approve_list {
			width: 100%;
			margin-top: 20rpx;
			padding: 0 20rpx;

			.approve_box {
				width: 100%;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				position: relative;

				&:before {
					position: absolute;
					content: "";
					width: 1px;
					height: 100%;
					top: 0;
					left: 58rpx;
					background: #e4e7ed;
				}

				.tit {
					padding: 20rpx 12rpx;
					text-align: center;
					/* 文本垂直方向自右而左的书写方式 */
					writing-mode: vertical-rl;
					letter-spacing: 4rpx;
				}

				.approve_box_right {
					height: 100%;
					width: 100%;
					flex: 1;
					padding: 20rpx 0rpx;

					.approve_box_right_inner {
						// padding: 20rpx 0rpx;

						&:nth-child(2n) {
							border-top: 1rpx solid #e4e7ed;
							padding-top: 20rpx;
						}

						&:first-child {
							padding-bottom: 20rpx;
						}

						.approve_item {
							align-items: flex-start;
							padding-left: 10rpx;

							.approve_box_right_list {
								flex: 1;
								font-size: 26rpx;

								.marginBottom {
									.name {
										font-weight: 700;
										justify-content: space-around;

										.dateTime {
											font-weight: 400;
										}
									}

									.content_txt {
										text-align: justify;
										text-justify: newspaper;
										word-break: break-all;
										padding: 20rpx 20rpx;
										color: #636569;
									}

									.jnpf-file-item {
										width: 100%;
										justify-content: space-between;
										flex-direction: row;
										padding: 10rpx 20rpx;

										.jnpf-file-item-txt {
											flex: 1;
										}

										.closeBox {
											height: 60rpx;
											justify-content: space-evenly;
											flex: 0.2;

											.closeTxt {
												width: 34rpx;
												height: 34rpx;
												border-radius: 50%;
												background-color: #909194;
												color: #FFFFFF;
												font-size: 22rpx;
												align-items: center;
												justify-content: center;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.noContent {
			text-align: center;
			padding: 58% 0;

			.img {
				width: 154px;
				height: 118px;
			}
		}
	}
</style>