v3-lab-xcx/pages_manage/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=='年管控'? '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}}</view>
							</view>
							<view class="list_li_b_t_b" style="display: flex;" v-if="infoList.status == 2"><label style="width:150rpx;">执行人：</label>{{infoList.nickName}}</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.carryTime}}</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="@/pages_manage/images/icon_pdf.png" v-if="item.type == 'pdf'"/>
									<img src="@/pages_manage/images/icon_word.png" v-if="item.type == 'doc' || 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 { gradingControlDetail,readByLoginUser } from '@/api/apiDemo/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 = [];

            },
            //去详情页
            goPageInfo(item){

                uni.navigateTo({
                    url:'/pages_manage/views/accessQualification/accessQualificationInfo?item='+encodeURIComponent(JSON.stringify(item))
                })
            },
            //滚动事件
            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 == 'doc' || item.type == 'docx'){
					uni.showLoading({
					    title: '下载中'
					});
					//下载文档
					wx.downloadFile({
						url: item.url,
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: function (res) {
							console.log("resresresresresres",res)
							const fileManager = wx.getFileSystemManager()
							const filePath = wx.env.USER_DATA_PATH + '/' + item.name + '.docx'
							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){
						this.infoList=data.data
						console.log(data.data.detail.imgName)
						console.log(data.data.detail.imgName.split(","))
						listName=data.data.detail.imgName.split(",")
						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);
								}
								/* 年管控 */
								.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>