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

<template>
  <view>
	<view class="boxt" v-for="(ite,idx) in wjcjlist" :key="idx">
		<view class="txt">
			<view class="flex1 flexc">{{ite.label}}
			<view class="editf" @click="getfjEdit(ite.val)">
				<image :src="editf"></image>
				<view>上传</view>
			</view>
			</view>
			<!-- v-if="ite.qflag" -->
			<view class="edit" v-if="ite.val=='psyjqpb'||ite.val=='gdhyjy'||ite.val=='wtdbht'">
				<image :src="edit"></image>
				<view>在线签名</view>
			</view>
			<!-- <view class="flex1"></view>
			<text class="txta" @click="getDown(ite.val)">预览</text> -->
		</view>
		<!-- <text class="txta" @click="getDown(fite.url)">预览</text> -->
				
		<view class="mt18" v-if="fileFj[ite.val]&&fileFj[ite.val].length">
			<view class="fjlists"  v-for="(fite,fidx) in fileFj[ite.val]" :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 class="delimg flex0" @click.stop="getDelwjFj(fite.fjId)">
					<image :src="fdelimg"></image>
				</view>
				<text class="txta" @click="getDown(fite.url)">预览</text>
			</view>
		</view>
	</view>
	<!-- 其他附件 -->
	<view class="boxt" >
		<view class="txt">
			<view class="flex1 flexc">其他附件
			</view>
		</view>
		<!-- <text class="txta" @click="getDown(fite.url)">预览</text> -->
				<!-- <view class="delimg flex0" @click.stop="getDelFj(idx)">
					<image :src="fdelimg"></image>
				</view> -->
		<view class="mt18" v-if="datainfo.otherFj&&datainfo.otherFj.length">
			<view class="fjlists"  v-for="(fite,fidx) in datainfo.otherFj" :key='fidx'>
				<view class="flext" @click="getDown(fite.url)">
					<view class="imgl"><image :src="filico" ></image></view>
					<view class="tit">{{fite.url}}</view>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import { selectValue } from '@/utils/common.js';
	import noData from "@/components/nodata/nodata.vue"
  export default {
	props:{
		datainfo: {
			type: Object,
			default () {
				return {}
			}
		},
		fileFj:{
			type: Object,
			default () {
				return {}
			}
		},
		wjcjlist:{
			type: Array,
			default () {
				return []
			}
		}
	},
	components:{
		noData
	},
	data(){
		return{
			upimg: require('@/work/static/images/up.png'),
			fupimg:require('@/work/static/images/fup.png'),
			filico:require('@/work/static/images/filico.png'),
			edit:require('@/work/static/images/edit.png'),
			editf:require('@/work/static/images/editfile.png'),
			fdelimg:require('@/work/static/images/del.png'),
			gdfilelist:[{name:'123'}],
			zheList:[{zheflag:true}],
			fileList:[
				
				// {tit:'担保意向函',files:[{url:"",name:'安徽嘉欣医疗用品有限公司0403担保意向函.doc'}]},
				// {tit:'材料合规表',files:[]},
				// {tit:'尽职调查报告',files:[]},
				// {tit:'担保项目合法合规表',files:[]},
				// {tit:'评审意见签批表',qflag:true,files:[]},
				// {tit:'股东会决议',qflag:true,files:[]},
				// {tit:'委托保证合同',qflag:true,files:[]},
				// {tit:'其他附件',files:[{url:"",name:'安徽嘉欣医疗用品有限公司0403担保意向函.doc'},{url:"",name:'安徽嘉欣医疗用品有限公司0403担保意向函.doc'}]},
				]
		}
	},
	onLoad: function() {
	},
	methods:{
		checkPermi, checkRole,
		kaType(ite){
			return selectValue(this.tajdlist, ite);
		},
		getZheFn(idx){
			this.zheList[idx].zheflag=!this.zheList[idx].zheflag
		},
		getfjEdit(val){
			this.$emit('getfjEdit',val)
		},
		getDown(url){
			this.$emit('getDown',url)
		},
		getPreview(url){
			this.$emit('getPreview',url)
		},
		getDelwjFj(id){
			this.$emit('getDelwjFj',id)
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.boxt{padding:44rpx 36rpx 40rpx;border-top: 2rpx solid #E6E6E6;}
.txt{display: flex;align-items: flex-start;
	view{font-weight: bold;font-size: 30rpx;color: #222327;}
	text{color: #28C529;font-weight: 500;line-height: 40rpx;flex: 0 0 auto;margin-left: 46rpx;padding: 0 6rpx;}
	.upimg{width:40rpx;height: 40rpx;margin-left: 18rpx;display: flex;align-items: center;justify-content: center;
		image{width: 30rpx;height: 28rpx;}
	}
}
.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;}
}
.upbox{display: flex;flex-direction: column;align-items: center;padding: 56rpx 0 40rpx;border-top: 2rpx solid #E6E6E6;
	image{width: 30rpx;height: 26rpx;margin-bottom: 18rpx;transform: rotate(180deg);}
	view{font-weight: 500;font-size: 26rpx;color: #666666;}
}
.editf{flex:0 0 auto;display: flex;align-items: center;margin-left: 24rpx;
	view{font-weight: 500;font-size: 26rpx;color: #00A9F0;}
	image{width: 22rpx;height: 24rpx;margin-right:8rpx;}
}
.edit{flex:0 0 auto;display: flex;align-items: center;
	view{font-weight: 500;font-size: 26rpx;color: #00A9F0;}
	image{width: 20rpx;height: 24rpx;margin-right: 2rpx;}
}
</style>