cxc-szcx-uniapp/pages/views/renliziyuan/renyuanxinxi/detail.vue

<template>
	<view>
		<scroll-view :scroll-x="true" :scroll-y="true">
			<view style="padding: 10px 10px 10px 10px">
				<uni-title title="基本信息" type="h1" color="blue"></uni-title>
				<uni-row>
					<uni-col :span="18"><yjly-row-cell :cellData="cellData" :rowDataCount="2"></yjly-row-cell></uni-col>
					<uni-col :span="6">
						<view class="img">
							<image mode="aspectFit"
								:src="'https://36.112.48.190/jeecg-boot/sys/common/static/' + imgUrl"></image>
						</view>
					</uni-col>
				</uni-row>

				<yjly-row-cell :cellData="cellData1" :rowDataCount="3"></yjly-row-cell>
				<view v-if="roleDetail">
					<uni-title title="年度绩效考核" type="h1" color="blue"></uni-title>
					<uni-row>
						<uni-col :span="4">
							<view class="titleStyle">序号</view>
						</uni-col>
						<uni-col :span="10">
							<view class="titleStyle">绩效考核年份</view>
						</uni-col>
						<uni-col :span="10">
							<view class="titleStyle">绩效考核成绩</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<view v-for="(item, index) in jxkhxxList">
							<uni-col :span="4">
								<view class="dataStyle1">
									{{ index + 1 }}
								</view>
							</uni-col>
							<uni-col :span="10">
								<view class="dataStyle1">
									{{ item.nf }}
								</view>
							</uni-col>
							<uni-col :span="10">
								<view class="dataStyle1">
									{{ item.khcj + '---' + item.khcj_dictText }}
								</view>
							</uni-col>
						</view>
					</uni-row>
				</view>
				<uni-title title="工作简历" type="h1" color="blue"></uni-title>
				<uni-row>
					<uni-col :span="4">
						<view class="titleStyle">起始时间</view>
					</uni-col>
					<uni-col :span="4">
						<view class="titleStyle">终止时间</view>
					</uni-col>
					<uni-col :span="11">
						<view class="titleStyle">工作职务</view>
					</uni-col>
					<uni-col :span="5">
						<view class="titleStyle">岗位职务</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<view v-for="(item, index) in gzjlList">
						<uni-col :span="4">
							<view class="dataStyle1">
								{{ item.kssj }}
							</view>
						</uni-col>
						<uni-col :span="4">
							<view class="dataStyle1">
								{{ item.jssj }}
							</view>
						</uni-col>
						<uni-col :span="11">
							<view class="dataStyle2" ref="dataView">
								{{ item.jlms }}
							</view>
						</uni-col>
						<uni-col :span="5">
							<view class="dataStyle1">
								{{ item.jlms2 }}
							</view>
						</uni-col>
					</view>
				</uni-row>
				<!-- <uni-segmented-control></uni-segmented-control> -->
				<view>
					<uni-title title="学历信息" type="h1" color="blue"></uni-title>
					<uni-row>
						<uni-col :span="4">
							<view class="titleStyle">类别</view>
						</uni-col>
						<uni-col :span="4">
							<view class="titleStyle">毕业院校</view>
						</uni-col>
						<uni-col :span="4">
							<view class="titleStyle">所学专业</view>
						</uni-col>
						<uni-col :span="4">
							<view class="titleStyle">学历</view>
						</uni-col>
						<uni-col :span="4">
							<view class="titleStyle">学位</view>
						</uni-col>
						<uni-col :span="4">
							<view class="titleStyle">毕业时间</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<view v-for="(item, index) in xlxxList">
							<uni-col :span="4">
								<view class="dataStyle1">
									{{ item.xllb }}
								</view>
							</uni-col>
							<uni-col :span="4">
								<view class="dataStyle2">
									{{ item.byyx }}
								</view>
							</uni-col>
							<uni-col :span="4">
								<view class="dataStyle2" ref="dataView">
									{{ item.sxzy }}
								</view>
							</uni-col>
							<uni-col :span="4">
								<view class="dataStyle2">
									{{ item.qdxl }}
								</view>
							</uni-col>
							<uni-col :span="4">
								<view class="dataStyle2">
									{{ item.qdxw }}
								</view>
							</uni-col>
							<uni-col :span="4">
								<view class="dataStyle2">
									{{ item.bytime }}
								</view>
							</uni-col>
						</view>
					</uni-row>
				</view>
				<uni-title title="取证信息" type="h1" color="blue"></uni-title>
				<uni-row>
					<uni-col :span="6">
						<view class="titleStyle">证书名称</view>
					</uni-col>
					<uni-col :span="5">
						<view class="titleStyle">证书等级</view>
					</uni-col>
					<uni-col :span="5">
						<view class="titleStyle">取证时间</view>
					</uni-col>
					<uni-col :span="5">
						<view class="titleStyle">复审时间</view>
					</uni-col>
					<uni-col :span="3">
						<view class="titleStyle">备注</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<view v-for="(item, index) in zjtzList">
						<uni-col :span="6">
							<view class="dataStyle2" ref="dataView">
								{{ item.zjmc }}
							</view>
						</uni-col>
						<uni-col :span="5">
							<view class="dataStyle1">
								{{ item.zsdj }}
							</view>
						</uni-col>
						<uni-col :span="5">
							<view class="dataStyle1">
								{{ item.fzrq }}
							</view>
						</uni-col>
						<uni-col :span="5">
							<view class="dataStyle1">
								{{ item.fssj }}
							</view>
						</uni-col>
						<uni-col :span="3">
							<view class="dataStyle1">
								{{ item.bz }}
							</view>
						</uni-col>
					</view>
				</uni-row>
				<view v-if="roleDetail">
					<uni-title title="家庭信息" type="h1" color="blue"></uni-title>
					<uni-row>
						<uni-col :span="4">
							<view class="titleStyle">称谓</view>
						</uni-col>
						<uni-col :span="3">
							<view class="titleStyle">姓名</view>
						</uni-col>
						<uni-col :span="6">
							<view class="titleStyle">出生年月</view>
						</uni-col>
						<uni-col :span="4">
							<view class="titleStyle">政治面貌</view>
						</uni-col>
						<uni-col :span="7">
							<view class="titleStyle">工作单位及职务</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<view v-for="(item, index) in zyjtcyList">
							<uni-col :span="4">
								<view class="dataStyle2">
									{{ item.ybrgx }}
								</view>
							</uni-col>
							<uni-col :span="3">
								<view class="dataStyle1">
									{{ item.gxname }}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="dataStyle1">
									{{ item.cstime }}
								</view>
							</uni-col>
							<uni-col :span="4">
								<view class="dataStyle1">
									{{ item.cyzzmm }}
								</view>
							</uni-col>
							<uni-col :span="7">
								<view class="dataStyle2" ref="dataView">
									{{ item.cygzdw }}
								</view>
							</uni-col>
						</view>
					</uni-row>
				</view>

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

<script setup>
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		queryGzjlByRyLdhth,
		queryQzqkByRyLdhth,
		queryJtzycyByRyLdhth,
		queryXlxxByRyLdhth,
		queryGbxxByRyLdhth,
		queryZyzgdjByRyLdhth,
		queryJxkhByRyLdhth
	} from '@/api/renyuan.js';
	import {
		useStore
	} from '@/store';

	const store = useStore();

	const tempCellData = ref({
		title: '',
		value: '',
		titleSpan: 4,
		valueSpan: 4
	});

	const roleDetail = ref(store.userinfo.realname === '廖德云' || store.userinfo.realname === '马敬朝')

	const ldhth = ref('');
	const imgUrl = ref('');
	const renyuanData = ref({});
	const cellData = ref([]);
	const cellData1 = ref([]);

	const gzjlList = ref([]); // 人员其他子表信息-工作经历
	const zjtzList = ref([]); // 人员其他子表信息-证件台账
	const zyjtcyList = ref([]); // 人员其他子表信息-主要家庭成员
	const xlxxList = ref([]); // 人员其他子表信息-学历证书
	const gbxxList = ref([]); // 人员其他子表信息-干部信息
	const zyzgdjList = ref([]); // 人员其他子表信息-职业资格等级
	const jxkhxxList = ref([]); // 人员其他子表信息-绩效考核信息

	function getChildTable() {
		console.log(ldhth.value);

		queryJxkhByRyLdhth({
				ldhth: ldhth.value
			})
			.then((res) => {
				// console.log(res);
				jxkhxxList.value = res.result.records;
				// console.log(jxkhxxList.value)
			})
			.catch((err) => {
				console.log(err);
			});

		queryGbxxByRyLdhth({
				ldhth: ldhth.value
			})
			.then((res) => {
				// console.log(res);
				gbxxList.value = res;
				// console.log(gbxxList.value)
			})
			.catch((err) => {
				console.log(err);
			});
		queryZyzgdjByRyLdhth({
				ldhth: ldhth.value
			})
			.then((res) => {
				// console.log(res);
				zyzgdjList.value = res;
				// console.log(zyzgdjList.value)
			})
			.catch((err) => {
				console.log(err);
			});
		queryGzjlByRyLdhth({
				ldhth: ldhth.value
			})
			.then((res) => {
				// console.log(res);
				if (res.length > 0) {
					gzjlList.value = res;
				}
			})
			.catch((err) => {
				console.log(err);
			});
		queryQzqkByRyLdhth({
				ldhth: ldhth.value
			})
			.then((res) => {
				// console.log(res);
				if (res.length > 0) {
					zjtzList.value = res;
				}
			})
			.catch((err) => {
				console.log(err);
			});
		queryJtzycyByRyLdhth({
				ldhth: ldhth.value
			})
			.then((res) => {
				// console.log(res);
				if (res.length > 0) {
					zyjtcyList.value = res;
				}
			})
			.catch((err) => {
				console.log(err);
			});
		queryXlxxByRyLdhth({
				ldhth: ldhth.value
			})
			.then((res) => {
				if (res.success) {
					xlxxList.value = [];
					if (res.result.records.length > 0) {
						var rress = res.result.records;
						// console.log(rress);
						for (let i = 0; i < rress.length; i++) {
							if ((rress[i].onexl == 1) & (rress[i].zgxl == 1)) {
								rress[i].xllb = '第一学历';
								xlxxList.value.push(JSON.parse(JSON.stringify(rress[i])));
								// console.log(xlxxList.value)
								rress[i].xllb = '最高学历';
								xlxxList.value.push(JSON.parse(JSON.stringify(rress[i])));
								// console.log(xlxxList.value)
							}
							if ((rress[i].onexl == 1) & (rress[i].zgxl != 1)) {
								rress[i].xllb = '第一学历';
								xlxxList.value.push(rress[i]);
							}
							if ((rress[i].onexl != 1) & (rress[i].zgxl == 1)) {
								rress[i].xllb = '最高学历';
								xlxxList.value.push(rress[i]);
							}
						}
					}
				}

				// adjustFontSize()
			})
			.catch((err) => {
				console.log(err);
			});
	}

	function getJbxx() {
		cellData.value.push({
			title: '姓名',
			value: renyuanData.value.xm,
			titleSpan: 6,
			valueSpan: 6,
			class: 'dataStyle'
		});
		cellData.value.push({
			title: '性别',
			value: renyuanData.value.xb_dictText,
			titleSpan: 6,
			valueSpan: 6,
			class: 'dataStyle'
		});

		cellData.value.push({
			title: '出生年月',
			value: renyuanData.value.cssj,
			titleSpan: 6,
			valueSpan: 6,
			class: 'dataStyle'
		});
		cellData.value.push({
			title: '民族',
			value: renyuanData.value.mz,
			titleSpan: 6,
			valueSpan: 6,
			class: 'dataStyle'
		});
		cellData.value.push({
			title: '籍贯',
			value: renyuanData.value.jg,
			titleSpan: 6,
			valueSpan: 6,
			class: 'dataStyle'
		});
		cellData.value.push({
			title: '出生地',
			value: renyuanData.value.csd,
			titleSpan: 6,
			valueSpan: 6,
			class: 'dataStyle'
		});
		cellData.value.push({
			title: '工作时间',
			value: renyuanData.value.cjgzsj,
			titleSpan: 6,
			valueSpan: 6,
			class: 'dataStyle'
		});

		cellData.value.push({
			title: '现专业',
			value: '',
			titleSpan: 6,
			valueSpan: 6,
			class: 'dataStyle1'
		});
		cellData.value.push({
			title: '政治面貌',
			value: renyuanData.value.zzmm === '群众' ? renyuanData.value.zzmm : renyuanData.value.zzmm + renyuanData
				.value.jrsj,
			titleSpan: 5,
			valueSpan: 7,
			class: 'dataStyle1'
		});
		cellData.value.push({
			title: '用工形式',
			value: renyuanData.value.rylb1_dictText,
			titleSpan: 5,
			valueSpan: 7,
			class: 'dataStyle1'
		});

		cellData1.value.push({
			title: '所在单位',
			value: renyuanData.value.orgCode_dictText,
			titleSpan: 5,
			valueSpan: 7,
			class: 'dataStyle1'
		});
		cellData1.value.push({
			title: '专业技术资格',
			value: gbxxList.value.zc === 0 ? '/' : gbxxList.value.zc + gbxxList.value.zcsj,
			titleSpan: 5,
			valueSpan: 7,
			class: 'dataStyle1'
		});
		cellData1.value.push({
			title: '',
			value: '',
			titleSpan: 0,
			valueSpan: 0,
			class: 'dataStyle'
		});

		cellData1.value.push({
			title: '职业资格等级',
			value: zyzgdjList.value.ztgz === '0' ? '/' : zyzgdjList.value.ztgz + zyzgdjList.value.ztgzdj,
			titleSpan: 4,
			valueSpan: 4,
			class: 'dataStyle1'
		});
		cellData1.value.push({
			title: '职务(岗位)',
			value: gbxxList.value.zw,
			titleSpan: 4,
			valueSpan: 4,
			class: 'dataStyle1'
		});

		cellData1.value.push({
			title: '职位级别',
			value: gbxxList.value.zwcj,
			titleSpan: 4,
			valueSpan: 4,
			class: 'dataStyle'
		});
	}

	onLoad((e) => {
		console.log(store.userinfo)
		renyuanData.value = JSON.parse(decodeURIComponent(e.data));
		imgUrl.value = renyuanData.value.zplj;
		console.log(imgUrl.value, renyuanData.value);
		ldhth.value = renyuanData.value.ldhth;
		getChildTable();
		setTimeout(function() {
			getJbxx();
		}, 500);
	});
</script>

<style scoped>
	.renyuanInfo {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		height: 98vh;
		width: 900px;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		flex-direction: row;
		font-size: 18px;
		color: #fff;
	}

	.titleStyle {
		font-size: 12px;
		color: #747474;
		line-height: 35px;
		height: 35px;
		background: #f2f9fc;
		text-align: center;
		vertical-align: middle;
		border-left: 1px solid #919191;
		border-bottom: 1px solid #919191;
	}

	/* 内容样式 */
	.dataStyle {
		font-size: 14px;
		color: #00007f;
		line-height: 25px;
		height: 50px;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid #919191;
		border-left: 1px solid #919191;
		text-align: center;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* 内容样式 */
	.dataStyle1 {
		font-size: 14px;
		color: #00007f;
		line-height: 30px;
		height: 30px;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid #919191;
		border-left: 1px solid #919191;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* 内容样式 */
	.dataStyle2 {
		font-size: 12px;
		color: #00007f;
		line-height: 15px;
		height: 30px;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid #919191;
		border-left: 1px solid #919191;
		text-align: center;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.img {
		height: 154px;
		border: 1px solid #ccc;
		/* 仅用于展示容器范围，可根据需要移除 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		overflow: hidden;
		/* 防止图片溢出容器 */
	}
</style>