QT_cadreData_DP/pages/leadership/userDetails.vue

<template>
	<view class="details">
		<nav>
			<view class="pull-down">
				<!-- <u-icon @click="$goBack(1, 1)" name="arrow-leftward" size="20" color="#fff"></u-icon> -->
				<uni-icons @click="$goBack(1, 1)" type="arrow-left" size="30" color="#fff"></uni-icons>
				<text class="text">青田干部信息管理系统</text>
			</view>
		</nav>
		<view class="tableBox">
			<table cellspacing="0" cellpadding="0" bordercolor="black">
				<tr>
					<td class="title">姓 名</td>
					<td>{{data.S_Name}}</td>
					<td class="title">性 别</td>
					<td>{{data.S_Sex}}</td>
					<td class="title">出生年月<br />(岁)</td>
					<td>{{data.S_BirthDate}}<br />({{getAge(data.S_BirthDate)}}岁)</td>
					<td rowspan="4">
						<image class="img" :src="data.txSrc" mode="widthFix"></image>
					</td>
				</tr>
				<tr>
					<td class="title">民 族</td>
					<td>{{data.S_Nation}}</td>
					<td class="title">籍 贯</td>
					<td>{{data.S_NativePlace}}</td>
					<td class="title">出生地</td>
					<td>{{data.S_Birthplace}}</td>

				</tr>
				<tr>
					<td class="title">入 党<br />时 间</td>
					<td>{{data.S_JoinPartyTime}}</td>
					<td class="title">参加工<br />作时间</td>
					<td>{{data.S_WorkDate}}</td>
					<td class="title">健康状况</td>
					<td>{{data.S_Health}}</td>
				</tr>
				<tr>
					<td class="title">专业技<br />术职务</td>
					<td colspan="2">{{data.S_Profession}}</td>
					<td class="title">熟悉专业<br />有何特长</td>
					<td colspan="2">{{data.S_Speciality}}</td>

				</tr>
				<tr>
					<td class="title" rowspan="2">学 历<br />学 位</td>
					<td class="title">全日制<br />教 育</td>
					<td colspan="2">{{data.S_FullTimeEducation}}<br />{{data.S_FullTimeDegree}}</td>
					<td class="title">毕业院校<br />系及专业</td>
					<td colspan="2">{{data.S_FullTimeSchool}}<br />{{data.S_FullTimeAcademy}}</td>
				</tr>
				<tr>
					<td class="title">在 职<br />教 育</td>
					<td colspan="2">{{data.S_MaxEdu}}<br />{{data.S_MaxDeg}}</td>
					<td class="title">毕业院校<br />系及专业</td>
					<td colspan="2">{{data.S_JobSchool}}<br />{{data.S_JobAcademy}}</td>
				</tr>
				<tr>
					<td class="title" colspan="2">现任职务</td>
					<td colspan="5" class="left">{{data.S_FullPost}}</td>

				</tr>
				<tr>
					<td class="title">简<br />历</td>
					<td colspan="6" class="left">
						<view class="li" v-for="(v,i) in data.S_Resume" :key="i">
							<view class="time">{{v.a}}</view>
							<view>{{v.b}}</view>

						</view>
					</td>
				</tr>
				<tr>
					<td class="title">奖 惩<br />情 况</td>
					<td colspan="6" class="left" style="line-height: 60rpx;">{{data.S_Rewards}}</td>
				</tr>
				<tr>
					<td class="title">年 度<br />考 核<br />结 果</td>
					<td colspan="6">{{data.S_Assess}}</td>
				</tr>
				<tr>
					<td class="title" rowspan="12">家 庭<br />主 要<br />成 员<br />及<br />重 要<br />社 会<br />关 系</td>
					<td class="title">称谓</td>
					<td class="title">姓名</td>
					<td class="title">出生年月</td>
					<td class="title">政治面貌</td>
					<td class="title" colspan="2">工作单位及职务</td>
				</tr>
				<tr v-for="(v,i) in relation" :key="i">
					<td>{{v.F_Relation}}</td>
					<td>{{v.F_Name}}</td>
					<td>{{v.F_BirthDate}}</td>
					<td>{{v.F_PoliticsStatus}}</td>
					<td colspan="2">{{v.F_UnitAndPost}}</td>
				</tr>
			</table>
		</view>
	</view>
</template>

<script>
	import sqlLite from '../../utils/sqllite-utils.js';
	export default {
		data() {
			return {
				data: {},
				// 家属
				relationAll: [],
				// 当前家属
				relation: []
			};
		},
		created() {
			// this.relationAll = res
			uni.getStorage({
				key: 'det',
				success: (res) => {
					res.data.S_Resume = this.f4(res.data.S_Resume)
					this.data = res.data
					this.getRelationData()
					// -------------------------------
					// this.getRelation()
					uni.removeStorage({
						key: 'det',
					});
				}
			});
		},
		methods: {
			// 年龄
			getAge(val) {
				if (val) {
					let currentYear = new Date().getFullYear() //当前的年份
					let calculationYear = new Date(val).getFullYear() //计算的年份
					const wholeTime = currentYear + val.substring(4) //周岁时间
					const calculationAge = currentYear - calculationYear //按照年份计算的年龄
					//判断是否过了生日
					if (new Date().getTime() > new Date(wholeTime).getTime()) {
						return calculationAge
					} else {
						return calculationAge - 1
					}
				} else {
					return ''
				}
			},
			// 获取家属
			getRelationData() {
				sqlLite.selectFromTable(
						'SELECT F_Name,F_Relation,F_BirthDate,F_PoliticsStatus,F_UnitAndPost FROM Biz_Family WHERE StaffId = ' +
						this.data.StaffId + ' ORDER BY F_Order ASC'
					).then((date) => {
						this.relation = date
					})
					.catch((e) => {
						uni.showToast({
							title: '查询失败',
							icon: 'none'
						})
					})
			},
			// 获取当前家属
			getRelation() {
				this.relation = this.relationAll.filter(v => {
					return v.StaffId == this.data.StaffId
				})
			},
			f4(data) {
				let arr = data.split("\r\n");
				let strArr = [];
				arr.forEach((v, i) => {
					strArr[i] = {
						a: v.slice(0, 16),
						b: v.slice(16)
					}
				})
				return strArr
				// console.log(strArr);
			}
		}

	}
</script>

<style lang="scss" scoped>
	.details {
		width: 100%;
		height: 100%;

		nav {
			width: 100%;
			height: 10%;
			background-color: #6dbeeb;
			color: #fff;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pull-down {
				font-size: 30rpx;
				display: flex;
				align-items: center;

				.text {
					margin-left: 40rpx;
					font-size: 36rpx;
				}
			}
		}
	}

	.tableBox {
		padding: 20rpx;
		// margin: 30rpx;
		// border: 1px solid #707070;
		height: 90%;
		overflow-y: scroll;
	}

	table {
		width: 100%;
		border: 1px solid #707070;
		table-layout: fixed;


		tr {

			td {
				border: 1px solid #cacaca;
				width: 14%;
				height: 80rpx;
				text-align: center;
				font-size: 38rpx;
				white-space: pre-line;

				.img {
					width: 90%;
					height: 75%;
				}
			}

			.left {
				text-align: left;
				padding: 20rpx;
				overflow: hidden;

				.li {
					display: flex;
					line-height: 60rpx;

					.time {
						min-width: 350rpx;
					}
				}
			}

			.title {
				background-color: #f5f5f5;
			}
		}
	}
</style>