rongzidanbao-ui/work/components/business/fshxx.vue

<template>
	<view>
		<view class="time" >
			<!-- <view class="time_t"  @click="getLook(lidx)" :class="lite.check?'act':''">
				<view>{{lite.ayear}}年<text>{{lite.amonth}}月</text></view>
				<image :src="timeup" class="timeup"></image>
			 </view> -->
			 <view v-if="datalist&&datalist.length">
				<view class="timebox" v-for="(ite,idx) in datalist" :key="idx">
					<view class="list">
						<image :src="stepa" class="timel"></image>
						<view class="listr">
							<view class="listrt">
							{{kaType(ite.auditSchedule,shjdlist)}}
							</view>
							<view class="listrx flext">
								<view class="ltit">审核人：</view>
								<view class="ltxt">{{ite.createBy}}</view>
							</view>
							<view class="listrx flext">
								<view class="ltit">审核状态：</view>
								<view class="ltxt">{{ite.auditType=='3'?'未通过':'通过'}}</view>
							</view>
							<view class="listrx flext">
								<view class="ltit">审核意见：</view>
								<view class="ltxt">{{ite.auditView}}</view>
							</view>
							<view class="listrx flext " v-if="ite.imageUrl&&ite.imageUrl.length">
								<view class="ltit">图片信息：</view>
								<view class="ltxt">
									<view class="limgs">
										<block v-for="(pit,pid) in ite.imageUrl" :key="pid">
											<image :src="baseUrl+pit"  @click.stop="getPreimg(ite.imageUrl,pid)"></image>
										</block>
									</view>
								</view>
							</view>
							<view class="listrx flext" v-if="ite.fjUrl&&ite.fjUrl.length">
								<view class="ltit">附件信息：</view>
								<view class="ltxt">
									<view class="fjlists"  v-for="(fite,fidx) in ite.fjUrl" :key='fidx'>
										<view class="flext" @click="getDown(fite.url)">
											<view class="imgl"><image :src="filico" ></image></view>
											<view class="tit">{{fite.name}}</view>
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="limg flexc mt15">
								<view class="limgs flex1 flexc" >
									<block v-for="(pit,pid) in ite.imageUrl" :key="pid">
										<image :src="baseUrl+pit"  @click.stop="getPreimg(ite.imageUrl,pid)"></image>
									</block>
									<image :src="upimg"  @click.stop="getPreimg(ite.urls,pid)"></image>
								</view>
								<block v-if="ite.urls.length>3">
									<view class="tit" @click="getPreimg(ite.urls,3)">查看更多</view>
									<image :src="morimg" class="rimg"></image>
								</block>
							</view> -->
						</view>
					</view>
				</view> 
			 </view>
			 <block v-else>
				 <no-data notxt='暂无审核信息'></no-data>
			 </block>
		</view>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import { selectValue } from '@/utils/common.js';
	import noData from "@/components/nodata/nodata.vue"
	import config from '@/config'
	const baseUrl = config.baseUrl
  export default {
	props:{
		shjdlist: {
			type: Array,
			default () {
				return []
			}
		},
		datalist:{
			type: Array,
			default () {
				return []
			}
		},

	},
	components:{
		noData
	},
	data(){
		return{
			stepa:require('@/work/static/images/busin/stepa.png'),
			stepb:require('@/work/static/images/busin/stepb.png'),
			stepc:require('@/work/static/images/busin/stepc.png'),
			baseUrl:'',
			filico:require('@/work/static/images/filico.png'),
		}
	},
	mounted: function() {
		this.baseUrl=baseUrl;
	},
	methods:{
		checkPermi, checkRole,
		kaType(ite,list){
			return selectValue(list, ite);
		},
		getPreimg(arr,idx){
			var newArr=[];
			arr.forEach(ite=>{
				var ds=this.baseUrl+ite
				newArr.push(ds)
			})
			uni.previewImage({
				urls: newArr,
				current:idx,
				success: function(data) {
					
				},
				fail: function(err) {
					
				}
			});
		},
		getZheFn(idx){
			this.zheList[idx].zheflag=!this.zheList[idx].zheflag
		},
		getEdit(url){
			this.$emit('getEdit',url)
		},
		getDown(url){
			this.$emit('getDown',url)
		},
		getPreview(url){
			this.$emit('getPreview',url)
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.time{padding: 0 16rpx;
	.time_t{padding: 24rpx 0;display: flex;align-items: center;
		view{font-weight: bold;color: #4775EA;font-size: 32rpx;}
		text{margin-left:12rpx;}
		.timeup{width: 26rpx;height: 24rpx;margin-left: 30rpx;transition: all 0.3s; }
		&.act .timeup{transform: rotate(-180deg);}
	}
	// .timebox{display: none;}
	.list{display: flex;align-items: flex-start;padding-left: 10rpx;padding-bottom: 36rpx;position: relative;
	
		&::before{width: 2rpx;content: "";position: absolute;top: 44rpx;bottom: 14rpx;left: 26rpx;
background: #DADADA;}
		.timel{width: 32rpx;height: 32rpx;margin-right: 20rpx;position: relative;flex: 0 0 auto;}
		.listr{flex:1;
			.listrt{line-height: 32rpx;font-size: 30rpx;font-weight: bold;color: #161616;margin-bottom: 16rpx;display: flex;align-items: center;
				.type{height: 30rpx;border-radius: 10rpx;margin-left: 20rpx;font-size: 24rpx;color: #FFFFFF;padding:2rpx 8rpx;
					&.bg1{background: #AABCE9;}
					&.bg2{background: #8CD5B3;}
				}
			}
			.listrx{padding: 6rpx 0;
				.ltit{flex:0 0 auto;font-size: 28rpx;color: #AAAAAA;}
				.ltxt{font-weight: 500;color: #161616;flex:1;font-size: 28rpx;}
			}
			// 图片
			.limgs{display: flex;flex: 1;flex-wrap: wrap;
				image{width: 100rpx;height: 100rpx;margin-right: 20rpx;margin-bottom: 20rpx;}
			}
			// .limg{
				
			// 	.tit{font-size: 28rpx;font-weight: 500;color: #AAAAAA;margin-right: 12rpx;flex:0 0 auto;width: 60rpx;}
			// 	.rimg{width: 14rpx;height: 24rpx; flex:0 0 auto;}
			// }
		}
	}
	&.act .timebox{display: block;}
	// 附件
	.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 20rpx;
		&:last-child{margin-bottom: 0;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;flex: 0 0 auto;
			image{width: 26rpx;height: 24rpx;}
		}
		.tit{font-size: 26rpx;color: #222327;font-weight: 500;margin-top: 4rpx;}
		.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;
			image{width: 24rpx;height: 24rpx;}
		}
		.txta{color: #28C529;font-weight: 500;line-height: 40rpx;flex: 0 0 auto;margin-left: 18rpx;padding: 0 6rpx;}
	}
}
</style>