v3-h5-web/pages_basics/views/gradingControl/gradingControlDetail.vue

<!-- 分级管控记录详情 -->
<template>
	<view id="accessQualification">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="list">
				<view class="list_li">
					<view class="list_li_t">
						<view class="list_li_t_l"
							:style="'color:'+infoList.fiedColor+';border-color:'+infoList.fiedColor">
							{{infoList.levelName}}
						</view>
						<view class="list_li_t_c">{{infoList.subName}}</view>
						<view class="list_li_t_r">{{infoList.typeName}}</view>
					</view>
					<view class="list_li_b">
						<view class="list_li_b_t">
							<view class="list_li_b_t_t">
								<view class="list_li_b_t_t_n">
									<view class="list_li_b_t_t_l" :class="[infoList.ruleType== '日管控' ? 'purple': '', infoList.ruleType=='周管控'? 'blue': '',infoList.ruleType=='月管控'? 'orange': '',infoList.ruleType=='季度管控'? 'lightBlue ': '',infoList.ruleType=='半年管控'? 'deepPurple  ': '',
infoList.ruleType=='年管控'? 'green': '',]">
										{{infoList.ruleType}}
									</view>
									<view class="list_li_b_t_t_c">{{infoList.ruleName}}</view>
								</view>
								<view class="list_li_b_t_t_n_r">{{infoList.endDate}}</view>
							</view>
							<view class="list_li_b_t_b" style="display: flex;"><label
									style="width:150rpx;">执行方式：</label>{{infoList.isAll==1?'多人执行':'单人执行'}}</view>
							<view class="list_li_b_t_b" style="display: flex;"><label
									style="width:150rpx;">规则描述：</label>{{infoList.ruleRemark}}</view>
							<view class="list_li_b_t_b" style="display: flex;" v-if="infoList.status == 0">
								<label style="width:200rpx;">指定执行人员：</label>
								<view style="flex:1;word-wrap:break-word;word-break:break-all;overflow: hidden;">
									{{infoList.allUserName?infoList.allUserName:''}}
								</view>
							</view>
							<view class="list_li_b_t_b" style="display: flex;" v-if="infoList.status == 2"><label
									style="width:150rpx;">执行人：</label>{{infoList.detail.createName}}</view>
							<view class="list_li_b_t_b" style="display: flex;" v-if="infoList.status == 2"><label
									style="width:150rpx;">身份：</label>{{infoList.userPosition}}</view>
							<view class="list_li_b_t_b" style="display: flex;" v-if="infoList.status == 2"><label
									style="width:150rpx;">执行时间：</label>{{infoList.detail.createTime}}</view>
							<view class="list_li_b_t_b" style="display: flex;" v-if="infoList.status == 2">
								<label style="width:150rpx;">执行描述：</label>
								<view style="flex:1;word-wrap:break-word;word-break:break-all;overflow: hidden;">
									{{infoList.detail.remark}}
								</view>
							</view>
						</view>
						<view class="list_li_b_b4" v-if="infoList.status == 2">
							<label>执行材料：</label>
							<view class="list_li_b_b4_n">
								<view class="list_li_b_b4_r" v-for="(item,index) in upList" :key="index"
									@click="lookItem(item)">
									<img :src="imagesUrl('commonality/icon_pdf.png')" v-if="item.type == 'pdf'" />
									<img :src="imagesUrl('commonality/icon_word.png')"
										v-if="item.type == 'docx'" />
									<img :src="item.url"
										v-if="item.type == 'png' || item.type == 'jpg' || item.type == 'jpeg' || item.type == 'gif'" />
									<view class="list_li_b_b4_r_r">{{item.name}}</view>
								</view>
							</view>
						</view>


					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		gradingControlDetail,
		readByLoginUser
	} from '@/pages_basics/api/index.js'
	import {
		config
	} from '@/api/request/config.js'
	export default {
		data() {
			return {

				infoList: {},
				id: '',
				upList: [],
			}
		},
		onLoad(option) {
			if (option.item) {
				let item = JSON.parse(decodeURIComponent(option.item));
				console.log(item)
				this.id = item.recordId;
				if (item.messageUserId) {
					this.readByLoginUser(item.messageUserId);
				}
			} else {

			}
		},
		onShow() {
			this.clearData();
			this.getList();
		},
		methods: {

			//清除
			clearData() {
				this.infoList = [];
				this.upList = [];

			},
			//滚动事件
			scrollGet() {
				//this.getList();
			},
			lookItem(item) {
				console.log("item", item)
				if (item.type == 'png' || item.type == 'jpg' || item.type == 'jpeg' || item.type == 'gif') {
					//查看图片
					wx.previewImage({
						urls: [item.url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: '', // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else if (item.type == 'pdf' || item.type == 'xlsx' || item.type == 'docx') {
					uni.showLoading({
						title: '下载中'
					});
					//下载文档
					wx.downloadFile({
						url:item.url,
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: function(res) {
							const fileManager = wx.getFileSystemManager()
							const filePath = wx.env.USER_DATA_PATH + '/' + item.name
							fileManager.saveFile({
								tempFilePath: res.tempFilePath,
								filePath,
								success: () => {
									uni.hideLoading();
									wx.openDocument({
										filePath: filePath,
										showMenu: true,
										fileType: item.type
									})
								},
								fail: function(res) {
									uni.hideLoading();
									uni.showToast({
										title: '下载失败',
										icon: "none",
										mask: true,
										duration: 2000
									});
								}
							})
						},
						fail: function(res) {
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					})
				}
			},
			//查看图片
			lockImg(list) {
				console.log(list)
				/* if(!list[0]){
					return
				} */
				let url = list.split(',')
				wx.previewImage({
					urls: url, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			async readByLoginUser(id) {
				let obj = {
					id: id
				}
				const {
					data
				} = await readByLoginUser(obj)
			},
			//获取列表数据
			async getList() {
				let _this = this;
				let listUrl = [];
				let listName = [];

				const {
					data
				} = await gradingControlDetail(this.id)
				if (data.code == 200) {
					if(data.data.endDate){
						data.data.endDate = parseTime(data.data.endDate, "{y}-{m}-{d} {h}:{i}:{s}");
					}
					
					if(data.data.detail){
						data.data.detail.createTime = parseTime(data.data.detail.createTime, "{y}-{m}-{d} {h}:{i}:{s}");
					}
					this.infoList = data.data
					if(data.data.detail){
						if(data.data.detail.imgName){
							listName = data.data.detail.imgName.split(",")
						}
					}
					if(data.data.detail){
						if(data.data.detail.imgUrl){
							listUrl = data.data.detail.imgUrl.split(",")
						}
					}
					for (var i = 0; i < listName.length; i++) {
						if (listName[i]) {
							let type = listName[i].split(".")[1];
							this.upList.push({
								'name': listName[i],
								'url': config.base_url + listUrl[i],
								'type': type,
							})
						}
					}

					console.log(this.upList)


				}

			},
		}
	}
</script>

<style lang="stylus" scoped>
	#accessQualification {
		height: 100%;

		display flex;
		flex-direction column;

		.info-max-box {
			flex: 1;

			overflow: scroll;

			.for-big-box:last-child {
				margin-bottom: 180rpx;
			}

			/* 列表 */
			.list {
				padding 0 20rpx;
				box-sizing border-box;

				.list_li {
					height 450rpx;

					.list_li_t {
						height: 80rpx;
						display flex;
						justify-content flex-start;
						align-items: center;

						.list_li_t_l {
							width: 80rpx;
							height: 30rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #EE3A3A;
							line-height: 30rpx;
							border: 2rpx solid #EE3A3A;
							border-radius: 6rpx;
							text-align center;
						}

						.list_li_t_c {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 30rpx;
							margin 0 32rpx 0 16rpx;
						}

						.list_li_t_r {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 30rpx;
						}
					}

					.list_li_b {
						width 710rpx;
						height auto;
						background: #FFFFFF;
						border-radius: 20rpx;
						padding: 0 14rpx;
						box-sizing: border-box;

						overflow hidden;

						.list_li_b_t {
							overflow: hidden;

							.list_li_b_t_t {
								display flex;
								justify-content flex-start;
								margin: 24rpx 0 18rpx 0;

								.list_li_b_t_t_n {
									flex: 1;
									display flex;
									justify-content flex-start;

									.list_li_b_t_t_l {
										width: 100rpx;
										height: 30rpx;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										/* color: #0183FA; */
										line-height: 30rpx;
										/* background: rgba(1,131,250,0.2); */
										border-radius: 6rpx;
										text-align: center;
									}

									.list_li_b_t_t_c {
										flex: 1;
										font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #333333;
										line-height: 28rpx;
										margin: 0 16rpx 0 12rpx;
									}

									.list_li_b_t_t_r {
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #EE3A3A;
										line-height: 24rpx;
									}
								}

								.list_li_b_t_t_n_r {
									font-size: 24rpx;
									line-height: 30rpx;
									color: #999;
								}

								/* 日管控 */
								.purple {
									color: #AC20E0;
									background: rgba(172, 32, 224, 0.2);
								}

								/* 周管控 */
								.blue {
									color: #0183FA;
									background: rgba(1, 131, 250, 0.2);
								}

								/* 月管控 */
								.orange {
									color: #FA8801;
									background: rgba(250, 136, 1, 0.2);
								}

								/* 季管控 */
								.lightBlue {
									color: #81d3f8;
									background: rgba(129, 211, 248, 0.2);
								}

								/* 半年管控 */
								.deepPurple {
									color: #6565f1;
									background: rgba(101, 101, 241, 0.2);
								}

								/* 年管控 */
								.green {
									color: #11BA25;
									background: rgba(17, 186, 37, 0.2);
								}

								>img {
									width: 12rpx;
									height: 24rpx;
								}
							}

							.list_li_b_t_b {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 48rpx;
								margin-bottom: 14rpx;

								>label {
									color: #333333;
								}
							}
						}

						.list_li_b_b {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 28rpx;

							>label {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 28rpx;
							}
						}

						.list_li_b_b2 {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 48rpx;
							margin-top: 32rpx;

							>label {
								color: #333333;
							}
						}

						.list_li_b_b4 {
							width: 100%;
							margin-top: 10rpx;
							margin-bottom 20rpx;
							display: flex;
							justify-content: flex-start;

							>label {
								display: inline-block;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 28rpx;
								width: 150rpx;
							}

							.list_li_b_b4_n {
								width: 560rpx;

								.list_li_b_b4_r {
									height: 60rpx;
									width: 100%;
									margin-bottom: 20rpx;
									display: flex;
									justify-content: flex-start;
									align-items: center;

									img {
										height: 60rpx;
										width: 60rpx;
										margin-right: 10rpx;
									}

									.list_li_b_b4_r_r {
										height: 50rpx;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
										width: 100%;
										font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #999999;
										line-height: 50rpx;
									}
								}
							}

						}

					}
				}
			}

			/*暂无数据*/
			.get-null-box {
				height: 100rpx;
				line-height: 100rpx;
				color: #999;
				text-align center
			}
		}

		.bottom-button-box {
			border-radius: 20rpx;
			margin: 20rpx 50rpx;
			width: 650rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #0183FA;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align center;
		}
	}
</style>