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

<template>
  <view>
	<view v-if="datalist.length>0">
		<!-- 申报业务 v-if="listtype=='case'"-->
		<block v-if="type=='work'">
			<view class="lists" v-for="(ite,idx) in datalist" @click="getDetail(ite.loanApplicationId)">
				<view class="listtop">
					<view class="toptit over">{{ite.enterpriseName}}</view>
					<view class="statbox" v-if="ite.isNew=='Y'">专精特新<image :src="start"></image></view>
				</view>
				<view class="listsm">
					<view class="txt"><text class="tit">贷款编号</text><text class="line">|</text><text>{{ite.loanApplicationNumber}}</text></view>
					<view class="txt" v-if="ite.loanApplicationType!=1&&ite.loanApplicationType!=4"><text class="tit">审核状态</text><text class="line">|</text><text class="co28">{{kaType(ite.auditSchedule,shjdlist)}}
					</text></view>
					<view class="txt"><text class="tit">申报时间</text><text class="line">|</text><text>{{ite.applicationTime}}</text></view>
					<view class="txt"><text class="tit">归档时间</text><text class="line">|</text><text>{{ite.fileTime}}</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">申请额度</text><text class="line">|</text><text>{{ite.applicationAmount}}万元</text></view>
						<view class="txt"><text class="tit">使用期限</text><text class="line">|</text><text>{{ite.usagePeriod}}月</text></view>
						<view class="txt"><text class="tit">申贷银行</text><text class="line">|</text><text>{{kaType(ite.applicationBank,sdyhlist)}}</text></view>
						<view class="txt"><text class="tit">担保类型</text><text class="line">|</text><text>{{statusFormats(ite.guaranteeType,dblxlist)}}</text></view>
						<view class="txt"><text class="tit">资金用途</text><text class="line">|</text><text>{{ite.purposeFunds}}</text></view>
						<view class="txt"><text class="tit">还款来源</text><text class="line">|</text><text>{{ite.repaymentSource}}</text></view>
					</view>
				</view>
			</view>
		</block>
		<!-- 客户 -->
		<block v-if="type=='custom'">
			<view class="lists" v-for="(ite,idx) in datalist" @click="getDetail(ite.userId)">
				<view class="listtop">
					<view class="head">{{ite.realName.substring(0,1)}}</view>
					<view class="flex1">
						<view class="headt">{{ite.realName}}</view>
						<view class="headx">资料更新时间 | {{ite.updateTime||ite.createTime}}</view>
					</view>
				</view>
				<view class="listsm">
					<view class="txt"><text class="tit">身份证号</text><text class="line">|</text><text>{{ite.idCard}}</text>
						<view class="copyimg">
							<image :src="copy" ></image>
						</view>
					</view>
					<view class="txt"><text class="tit">居住地址</text><text class="line">|</text><text>{{ite.address}}</text></view>
					<view class="txt"><text class="tit">手机号码</text><text class="line">|</text><text>{{ite.phonenumber}}</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">关联企业</text><text class="line">|</text><text>{{ite.sysUserEnterpriseNum}}家</text></view>
						<view class="txt"><text class="tit">历史申贷记录</text><text class="line">|</text><text>{{ite.loanApplicationNum}}次</text></view>
					</view>
				</view>
			</view>
		</block>
		<!-- 企业 -->
		<block v-if="type=='qy'">
			<view class="lists qy" v-for="(ite,idx) in datalist" @click="getDetail"  >
				<view class="listtop">
					<view class="flexc">
						<view class="toptit over f20">{{ite.enterpriseName}}</view>
						<!-- <view class="statbox">专精特新<image :src="start"></image></view> -->
					</view>
					<view class="adr f12">企业地址 | {{ite.enterpriseAddress}}</view>
				</view>
				
				<view class="listsm">
					<view class="txt"><text class="tit">统一社会信用代码：</text><text>{{ite.creditCode}}</text></view>
					<view class="txt"><text class="tit">企业类型：</text><text>{{ite.enterpriseType}}</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">法人姓名：</text><text>{{ite.legalName}}</text></view>
						<view class="txt"><text class="tit">注册资金：</text><text>{{ite.registeredCapital}}</text></view>
					</view>
					<view class="txt"><text class="tit">成立日期：</text><text>{{ite.establishData}}</text></view>
					<view class="txt"><text class="tit">营业期限：</text><text>{{ite.businessTerm}}</text></view>
				</view>
			</view>
		</block>
		<block v-if="type=='qylist'">
			<view class="lists" v-for="(ite,idx) in datalist">
				<view class="listtop flexcj" >
					<view class="toptit over flex1">{{ite.enterpriseName}}</view>
					<view class="looktxt bga" v-if="checkPermi(['enterprise:enterprise:remove'])" @click="getDel(ite.enterpriseId)">删除</view>
					<view class="looktxt bgb" v-if="checkPermi(['enterprise:enterprise:edit'])" @click="getEdit(ite.enterpriseId)">修改</view>
				</view>
				<view class="listsm">
					<view class="txt"><text class="tit">统一社会信用代码：</text><text class="lh17">{{ite.creditCode}}</text></view>
					<view class="txt"><text class="tit">企业类型：</text><text>{{ite.enterpriseType}}</text></view>
					<view class="txt"><text class="tit">企业地址：</text><text>{{ite.enterpriseAddress}}</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">法人姓名：</text><text>{{ite.legalName}}</text></view>
						<view class="txt"><text class="tit">注册资金：</text><text>{{ite.registeredCapital}}</text></view>
					</view>
					<view class="txt"><text class="tit">成立日期：</text><text>{{ite.establishData}}</text></view>
					<view class="txt"><text class="tit">营业期限：</text><text>{{ite.businessTerm}}</text></view>
					<view class="txt"><text class="tit">经营范围：</text><text :class="zlist.indexOf(ite.enterpriseId)!=-1?'':'overtwo'">{{ite.businessScope}}</text>
						<text class="co0a ml4 flex0" @click="getZhan(ite.enterpriseId)">{{zlist.indexOf(ite.enterpriseId)!=-1?'折叠':'展开'}}</text>
					</view>

				</view>
			</view>
		</block>
		<!-- 历史申贷记录 -->
		<block v-if="type=='sdjl'">
			<view class="lists sdjl" v-for="(ite,idx) in datalist" @click="getDetail(ite.loanApplicationId)"  >
				<view class="listsm">
					<view class="txt"><text class="tit">申贷企业：</text><text>{{ite.enterpriseName}}</text>
						<view class="statbox"  v-if="ite.isNew=='Y'">专精特新<image :src="start"></image></view>
						<text class="flex1"></text>
						<view class="look flexc">查看<image :src="rimg"></image></view>
					</view>
					<view class="txt"><text class="tit">贷款编号：</text><text>{{ite.loanApplicationNumber}}</text></view>
					<view class="txt"><text class="tit">申报时间：</text><text>{{ite.applicationTime}}</text></view>
					<view class="txt"><text class="tit">归档时间：</text><text>{{ite.fileTime}}</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">申请额度：</text><text>{{ite.applicationAmount}}万元</text></view>
						<view class="txt"><text class="tit">使用期限：</text><text>{{ite.usagePeriod}}个月</text></view>
					</view>
					<view class="flexcw">
						<view class="txt"><text class="tit">申贷银行：</text><text>{{kaType(ite.applicationBank,sdyhlist)}}</text></view>
						<view class="txt"><text class="tit">担保类型：</text><text>{{statusFormats(ite.guaranteeType,dblxlist)}}</text></view>
					</view>
					<view class="flexcw">
						<view class="txt"><text class="tit">资金用途：</text><text>{{ite.purposeFunds}}</text></view>
						<view class="txt"><text class="tit">还款来源：</text><text>{{ite.repaymentSource}}</text></view>
					</view>
				</view>
			</view>
		</block>
		<!-- 文件 -->
		<block v-if="type=='file'">
			<view class="lists" v-for="(ite,idx) in datalist" @click="getDetail"  >
				<view class="listtop" >
					<view class="toptit over">安徽嘉欣医疗用品有限公司</view>
				</view>
				<view class="listsm">
					<view class="txt"><text class="tit">申贷次数</text><text class="line">|</text><text>2次</text></view>
					<view class="txt"><text class="tit">最近申贷时间</text><text class="line">|</text><text>2023年08月23日</text>
						<view class="flex1"></view>
						<view class="looktxt bgb">查看文件</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 文件详情列表 -->
		<block v-if="type=='filedet'">
			<view class="files" v-for="(ite,idx) in datalist" >
				<view class="fdtit">
					<image :src="titimg"></image>
					<view>2023年08月23日</view>
				</view>
				<view class="fdzbox">
					<image :src="filz"></image>
					<view>
						安徽嘉欣医疗用品有限公司230823文档.zip
					</view>
				</view>
				<view class="fdbtns flexcj mt18">
					<view class="lbtns flexc" @click="getDetail">
						<image :src="files"></image>文件详情列表
					</view>
					<view class="rbtns flexc">
						<image :src="fup"></image>保存至手机
					</view>
				</view>
			</view>
		</block>
		<!-- 新版文件列表详情 -->
		<block v-if="type=='nfiles'">
			<view class="lists" v-for="(ite,idx) in datalist">
				<view class="listtop" >
					<view class="toptit over">{{ite.enterpriseName}}</view>
				</view>
				<view class="listsm" v-for="(fite,fidx) in ite.loanApplicationFjList" :key="fite.fjId">
					<!-- <view class="fdtit">
						<image :src="titimg"></image>
						<view>{{ite.applicationTime}}</view>
					</view> -->
					<view class="fdzbox">
						<image :src="filz"></image>
						<view>{{fite.name}}</view>
					</view>
					<view class="fdbtns flexcj mt18">
						<!-- <view class="lbtns flexc">
							<image :src="files"></image>文件详情列表
						</view> -->
						<view class="flex1"></view>
						<view class="rbtns flexc" @click.stop="getXzFn(fite)">
							<image :src="fup"></image>保存至手机
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 台账表 -->
		<block v-if="type=='ledger'">
			<view class="lists" v-for="(ite,idx) in datalist" @click="getDetail"  >
				<view class="listtop" >
					<view class="toptit over">安徽嘉欣医疗用品有限公司</view>
				</view>
				<view class="listsm">
					<view class="txt"><text class="tit">债务人类别</text><text class="line">|</text><text>类别名称</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">债务人姓名</text><text class="line">|</text><text>刘安鑫</text></view>
						<view class="txt"><text class="tit">债务人证件类型</text><text class="line">|</text><text>身份证</text></view>
					</view>
					<view class="txt"><text class="tit">债务人证件号码</text><text class="line">|</text><text>34282419730618003X</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">法人姓名</text><text class="line">|</text><text>林振宇</text></view>
						<view class="txt"><text class="tit">法人证件类型</text><text class="line">|</text><text>身份证</text></view>
					</view>
					<view class="txt"><text class="tit">法人证件号码</text><text class="line">|</text><text>34282419811214002X</text></view>
				</view>
			</view>
		</block>
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</view>
	<block v-else>
		<no-data></no-data>
	</block>
  </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:{
		datalist: {
			type: Array,
			default () {
				return []
			}
		},
		sdyhlist: {
			type: Array,
			default () {
				return []
			}
		},
		dblxlist: {
			type: Array,
			default () {
				return []
			}
		},
		shjdlist:{
			type: Array,
			default () {
				return []
			}
		},
		wtdt:{
			type: String,
			default () {
				return ''
			}
		},
		type:{
			type: [String,Number],
			default () {
				return ''
			}
		},
	},
	components:{
		noData
	},
	data(){
		return{
			start:require('@/work/static/images/start.png'),
			copy:require('@/work/static/images/copy.png'),
			rimg:require('@/work/static/images/rimga.png'),
			files:require('@/work/static/images/files.png'),
			filz:require('@/work/static/images/filz.png'),
			titimg:require('@/work/static/images/infotit.png'),
			fup:require('@/work/static/images/fdown.png'),
			zlist:[]
		}
	},
	onLoad: function() {
	},
	methods:{
		checkPermi, checkRole,
		kaType(ite,list){
			return selectValue(list, ite);
		},
		getDetail(e){
			this.$emit('getDetail',e)
		},
		getXzFn(ite){
			this.$emit('getXzFn',ite)
		},
		getDel(e){
			this.$emit('getDel',e)
		},
		getEdit(e){
			this.$emit('getEdit',e)
		},
		statusFormats(ite,list,type){//多选匹配
			if(ite){
				var actions = [];
				list.forEach(s => {
					if(ite.indexOf(s.value)>-1){
						actions.push(s.label);
					}
				})
				return actions.join(',')
			}else{
				return ''
			}	
		},
		getZhan(id){
			var num=this.zlist.indexOf(id);
			if(num!=-1){
				this.zlist.splice(num,1)
			}else{
				this.zlist.push(id)
			}	
		},
		getTuiFn(ite,txt,sh){
			var that=this;
			// if(txt=='scfk'&&sh==0){
			// 	uni.showModal({
			// 		title: '确认立案',
			// 		content: "是否确认立案",
			// 		cancelText: '取消',
			// 		confirmText: '确认',
			// 		success: function(res) {
			// 			if (res.confirm) {
			// 				var obj={
			// 					id:ite.proposalId,
			// 					type:txt,
			// 					sh:sh,
			// 				}
			// 				that.$emit('getTuiFn',obj)
			// 			} else if (res.cancel) {
			// 				// console.log('用户点击取消');
			// 			}
			// 		}
			// 	});
			// }else 
			if(txt=='lmta'){
				var str='同意'
				if(sh==2){
					str='反对'
				}
				uni.showModal({
					title: '确认'+str+'联名',
					content: "是否确认"+str+"联名",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							var obj={
								id:ite.proposalId,
								type:txt,
								sh:sh,
							}
							that.$emit('getTuiFn',obj)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}else{
				var obj={
					id:ite.proposalId,
					type:txt,
					sh:sh,
					ite:ite
				}
				this.$emit('getTuiFn',obj)
			}
			
		},
		typeFn(data){
			if(data){
				var newArr=[]
				var astr=data.split('-')
				astr.forEach(ite=>{
					var a=ite.substring(0,5);
					newArr.push(a)
				})
				return newArr.join('-')
			}else{
				return ''
			}
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.lists{background: #FFFFFF;box-shadow: 0px 0px 10rpx 0px rgba(216,216,216,0.4);border-radius: 20rpx;padding: 0 20rpx;margin-bottom: 24rpx;
	&.qy{padding: 0 24rpx;
		.listtop{display: block;
			padding: 40rpx 14rpx 42rpx;
		}
		.listsm{padding: 40rpx 14rpx 2rpx 0;
			.txt{font-size: 30rpx;margin-bottom: 44rpx;padding-left: 14rpx;
				text{color: #666666;}
			}
		}
	}
	&.sdjl{
		.listsm{padding: 40rpx 10rpx 2rpx 0;
			.txt{font-size: 30rpx;margin-bottom: 44rpx;padding-left: 10rpx;align-items: flex-start;
				text{color: #666666;}
			}
		}
		.look{flex: 0 0 auto;display: inline-flex;margin-left: 16rpx;line-height: 40rpx;font-weight: 500;font-size: 26rpx;color: #28C529;
			image{width: 14rpx;height: 20rpx;margin-left: 14rpx;}
		}
	}
	.listtop{display: flex;align-items: center;overflow: hidden;border-bottom: 2rpx solid #E6E6E6;padding: 34rpx 12rpx;
		.toptit{font-weight: bold;font-size: 30rpx;color: #222327;}
		// .statbox{min-width: 140rpx;height: 36rpx;background-color: rgba(255,177,50,0.3);padding: 0 14rpx;box-sizing: border-box;font-weight: bold;font-size: 22rpx;color: #FF6924;display: flex;align-items: center;flex: 0 0 auto;border-radius: 10rpx;margin-left: 20rpx;
		// 	image{width: 22rpx;height: 22rpx;margin-left: 6rpx;}
		// }
		.head{width: 86rpx;height: 86rpx;background: #00A9F0;border-radius: 10rpx;font-weight: bold;margin-right: 36rpx;flex: 0 0 auto;
font-size: 40rpx;display: flex;align-items: center;justify-content: center;color: #FFFFFF;
		}
		.headt{font-weight: bold;font-size: 40rpx;color: #222327;margin-bottom: 10rpx;}
		.headx{font-weight: 500;font-size: 24rpx;color: #666666;}
	}
	.adr{font-weight: 500;font-size: 26rpx;color: #666666;margin-top: 12rpx;}
	.listsm{padding: 32rpx 10rpx 16rpx 0;
		.tit{font-weight: bold;margin-right: 8rpx;flex: 0 0 auto;}
		.line{margin-right: 8rpx;color: #aaaaaa;flex: 0 0 auto;}
		.txt{font-size: 26rpx;color: #222327;margin-bottom: 24rpx;display: flex;padding-left: 10rpx;}
		.copyimg{width: 30rpx;height: 30rpx;margin-left: 8rpx;display: flex;align-items: center;justify-content: center;
			image{width: 18rpx;height: 20rpx;}
		}
		.flexcw{
			display: flex;align-items: center;flex-wrap: wrap;
			.txt{min-width: 50%;}
		}
	}
	.looktxt{font-weight: 500;flex: 0 0 auto;font-size: 26rpx;margin-left: 20rpx;
		&.bga{color: #FF6969;}
		&.bgb{color: #00A9F0;}
	}
	.statbox{min-width: 140rpx;height: 36rpx;background-color: rgba(255,177,50,0.3);padding: 0 14rpx;box-sizing: border-box;font-weight: bold;font-size: 22rpx;color: #FF6924;display: flex;align-items: center;flex: 0 0 auto;border-radius: 10rpx;margin-left: 20rpx;
		image{width: 22rpx;height: 22rpx;margin-left: 6rpx;}
	}
}
// 文件
.files{padding:40rpx 36rpx 36rpx;border-bottom: 2rpx solid #E6E6E6;
	// .fdtit{display: flex;font-weight: bold;margin-bottom: 44rpx;
	// 	view{font-size: 30rpx;color: #00A9F0;}
	// 	image{width: 30rpx;height: 30rpx;margin-right: 14rpx;flex: 0 0 auto;margin-top: 5rpx;}
	// }
	// .fdzbox{width: 100%;padding: 24rpx 30rpx;box-sizing: border-box;display: flex;align-items: center;background: #E1F3FA;border-radius: 20rpx;
	// 	image{width: 62rpx;height: 74rpx;margin-right: 32rpx;flex: 0 0 auto;}
	// 	view{font-weight: bold;font-size: 26rpx;color: #00A9F0;}
	// }
	// .fdbtns{
	// 	.lbtns{font-weight: 500;font-size: 26rpx;color: #28C529;
	// 		image{width: 24rpx;height: 20rpx;margin-right: 14rpx;}
	// 	}
	// 	.rbtns{font-weight: 500;font-size: 26rpx;color: #00A9F0;
	// 		image{width: 22rpx;height: 24rpx;margin-right: 12rpx;transform: rotate(180deg);}
	// 	}
	// }
}

.fdzbox{width: 100%;padding: 24rpx 30rpx;box-sizing: border-box;display: flex;align-items: center;background: #E1F3FA;border-radius: 20rpx;
		image{width: 62rpx;height: 74rpx;margin-right: 32rpx;flex: 0 0 auto;}
		view{font-weight: bold;font-size: 26rpx;color: #00A9F0;}
	}
	.fdtit{display: flex;font-weight: bold;margin-bottom: 44rpx;
		view{font-size: 30rpx;color: #00A9F0;}
		image{width: 30rpx;height: 30rpx;margin-right: 14rpx;flex: 0 0 auto;margin-top: 5rpx;}
	}
	.fdbtns{margin-bottom: 20rpx;
		.lbtns{font-weight: 500;font-size: 26rpx;color: #28C529;
			image{width: 24rpx;height: 20rpx;margin-right: 14rpx;}
		}
		.rbtns{font-weight: 500;font-size: 26rpx;color: #00A9F0;
			image{width: 22rpx;height: 24rpx;margin-right: 12rpx;}
		}
	}
</style>