QT_cadreData_DP/pages/leadership/leadership.vue

<template>
	<view class="leadership">
		<nav>
			<view class="pull-down" @click="animation2 = !animation2">
				领导干部<span>{{organization}}</span><uni-icons type="bottom" size="25" color="#fff"></uni-icons>
			</view>
			<view class="operation">
				<view class="search" @click="animation = true,animation1 = false">
					<image src="../../static/images/sousuo.png" mode="" class="img"></image>
				</view>
				<view class="arrange" @click="switchover">
					<image src="../../static/images/suolue.png" v-show="arrange" mode="" class="img"></image>
					<image src="../../static/images/liebiao.png" v-show="!arrange" mode="" class="img"></image>
				</view>
			</view>
			<view class="searchInp" :class="{kai: animation,guan : animation1}">
				<image src="../../static/images/fanhui.png" class="img" mode=""
					@click="animation = false,animation1 = true"></image>
				<u-search :clearabled="true" :showAction="false" shape="square" bgColor="#fff" v-model="value"
					@input="associate" @search="searchData"></u-search>
				<!-- <u-input @blur="blur" confirm-type="search" @input="associate" v-model="value" type="text" /> -->
			</view>

			<view class="lianxiang" v-if="lianxiangShow">
				<view class="li" v-for="(v,i) in lianxiangData" :key="i" @click="lianxiangSearch(v)">
					<span>{{v.a}}</span> <span>{{v.b}}</span>
				</view>
			</view>
		</nav>
		<main>
			<view v-show="animation2" class="treeMod" @click="animation2 = !animation2">
				<view class="treeBox" :class="{kai: animation2,guan : !animation2}">
					<ly-tree :tree-data="treeData" node-key="id" @node-click="handleNodeClick">
					</ly-tree>
				</view>
			</view>
			<scroll-view v-if="tableData.length != 0" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
				@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
				<view class="calBox" v-show="arrange">
					<view class="scroll-view-item" v-for="(v,i) in tableData" :key="i" @click="details(v)">
						<view class="content">
							<p style="margin-bottom: 10rpx;"><span class="name">{{v.S_Name}}</span><span
									class="age">{{v.S_Sex}}</span><span class="dizhi">({{v.S_Birthplace}})</span>
							</p>
							<p>{{v.S_BirthDate}} 出生 ({{getAge(v.S_BirthDate)}}岁)</p>
							<p>{{v.S_JoinPartyTime}} {{v.Party}}</p>
							<p>{{v.S_WorkDate}} 参加工作</p>
							<p>{{v.S_MaxEdu}}{{v.S_MaxDeg? '、':''}}{{v.S_MaxDeg}}</p>
							<p class="zhiwu">现任职务: {{v.S_FullPost}}</p>
						</view>
						<view class="touxiang">
							<image class="img" :src="v.txSrc" mode="aspectFit"></image>
							</image>
						</view>
					</view>
				</view>
				<view class="tableBox" v-show="!arrange">
					<table normal="normal">
						<thead>
							<tr>
								<td>姓名</td>
								<td>现任职务</td>
								<td>性别</td>
								<td>民族</td>
								<td>出生年月</td>
								<td>籍贯</td>
								<td>参加工作时间</td>
								<td>入党时间</td>
								<td>学历学位</td>
								<td>职称</td>
								<td>任现职时间</td>
								<td>任现职级时间</td>
								<td>备注</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(v,i) in tableData" :key="i" @click="details(v)">
								<td>{{v.S_Name}}</td>
								<td class="twoTd">
									{{v.S_FullPost}}
								</td>
								<td>{{v.S_Sex}}</td>
								<td>{{v.S_Nation}}</td>
								<td>{{v.S_BirthDate}}</td>
								<td>{{v.S_NativePlace}}</td>
								<td>{{v.S_WorkDate}}</td>
								<td>{{v.S_JoinPartyTime}}</td>
								<td>
									<p>{{v.S_MaxEdu}}</p>
									<p>{{v.S_MaxDeg}}</p>
								</td>
								<td>{{v.S_Profession}}</td>
								<td>{{v.S_MaxAppointDate}}</td>
								<td>{{v.S_MaxAppointLevelDate}}</td>
								<td></td>
							</tr>
						</tbody>
					</table>
				</view>
				<u-loadmore :status="status" />
			</scroll-view>
			<view class="noData" v-else>
				<image src="../../static/imgs/background.png" class="img" mode=""></image>
			</view>
		</main>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	import sqlLite from '../../utils/sqllite-utils.js';
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				// 排列
				arrange: true,
				// 搜索
				value: '',
				// 搜索开
				animation: false,
				// 搜索关
				animation1: false,
				animation2: false,
				// 机构
				organization: '',
				ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
				treeData: [],
				// 树配置
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				// 滚动视图配置
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 上拉加载更多
				status: 'loadmore',
				resData: [],
				allData: [],
				tableData: [],
				total: 0,
				page: 1,
				size: 0,
				time: null,
				treeAllData: [],
				treeArrData: [],
				// 树查询数据
				treeSearchData: [],
				// 搜索联想显示
				lianxiangShow: false,
				// 联想数据
				lianxiangData: []
			};
		},
		created() {

			this.getData()
			this.getTree()
		},
		mounted() {},
		methods: {
			// 处理树结构
			setTree(data) {
				data.map(v => {
					v.children = []
					v.label = v.O_ShortName
					// v.rganizeId = v.OrganizeId
					if (!v.O_Code) {
						v.id = '0'
						v.pid = null
					} else if (v.O_Code.length == 8 || v.O_Code.length == 3) {
						v.id = v.O_Code
						v.pid = '0'
					} else if (v.O_Code.length == 16) {
						v.id = v.O_Code
						v.pid = "0"
						// data[v.pid].children.push(v)
					} else if (v.O_Code.length == 24) {
						v.id = v.O_Code
						v.pid = v.O_Code.slice(0, 16)
					} else if (v.O_Code.length == 32) {
						v.id = v.O_Code
						v.pid = v.O_Code.slice(0, 24)
					} else if (v.O_Code.length == 40) {
						v.id = v.O_Code
						v.pid = v.O_Code.slice(0, 32)
					}
				})
				return data
			},
			arrayToTreeRec(nodes, pid = null) {
				return nodes
					.filter((node) => node.pid === pid)
					.map((node) => ({
						...node,
						children: this.arrayToTreeRec(nodes, node.id)
					}));
			},
			// 切换排列方式
			switchover() {
				this.arrange = !this.arrange
			},
			// 年龄
			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 ''
				}
			},
			// 机构树
			handleNodeClick(obj) {
				this.treeSearchData = []
				this.organization = obj.label
				if (obj.data.OrganizeId == 0) {
					this.getData()
				} else {
					sqlLite.selectFromTable(
							`select min(PostID),* from Biz_Staff c, Biz_Organize b, Biz_Post a where a.OrganizeId = b.OrganizeId and a.StaffId = c.StaffId and b.O_Code like '${obj.data.O_Code}%' GROUP BY a.StaffId ORDER BY b.O_Order asc,b.O_ParentOrganizeId asc,a.P_staffOrder asc`
						).then((date) => {
							this.resData = date
							this.allData = this.resData
							this.pageData()
						})
						.catch((e) => {
							uni.showToast({
								title: '查询失败',
								icon: 'none'
							})
						})
				}
			},
			// 顶部刷新
			upper: function(e) {
				// this.getData()
			},
			// 触底事件
			lower: function(e) {
				this.status = 'loading'
				this.pageData()
			},
			// 滚动事件
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},

			// 获取列表数据
			getData() {
				sqlLite.selectFromTable(
						'select min(PostID),* from Biz_Staff c, Biz_Organize b, Biz_Post a where a.OrganizeId = b.OrganizeId and a.StaffId = c.StaffId GROUP BY a.StaffId ORDER BY b.O_Order asc,b.O_ParentOrganizeId asc,a.P_staffOrder asc'
					).then((date) => {
						this.resData = date
						this.allData = this.resData
						this.pageData()
					})
					.catch((e) => {
						uni.showToast({
							title: '查询失败',
							icon: 'none'
						})
					})
			},
			// 分页
			pageData() {
				this.size = this.size + 12
				this.tableData = this.allData.slice(0, this.size);
				this.tableData.map(v => {
					if (v.S_Photo) {
						v.txSrc = 'file:///storage/emulated/0/QingTianGB_X/Photo/' + v.S_Photo
					} else {
						if (v.S_Sex == '男') {
							v.txSrc = '../../static/imgs/group3.png'
						} else {
							v.txSrc = '../../static/imgs/group4.png'
						}
					}
					if (v.S_JoinPartyTime.includes(".")) {
						v.Party = '中共党员'
					} else {
						v.Party = v.S_JoinPartyTime
					}
				})
				if (this.tableData.length == this.allData.length) {
					this.status = 'nomore'
				}
				this.total = this.allData.length
			},
			// 获取机构树
			getTree() {
				sqlLite.selectFromTable(
						'select O_Code,O_ShortName from Biz_Organize ORDER BY O_Order'
					).then((res) => {
						this.treeAllData = res
						this.treeArrData = this.setTree(this.treeAllData)
						this.treeData = this.arrayToTreeRec(this.treeArrData, null)
						// this.treeData[0].children.reverse()
					})
					.catch((err) => {
						uni.showToast({
							title: '查询失败',
							icon: 'none'
						})
					})
			},
			// 搜索联想
			associate() {
				this.lianxiangData = []
				if (this.value) {
					let pattern = new RegExp("[\u4E00-\u9FA5]+");

					if (pattern.test(this.value)) {
						sqlLite.selectFromTable(
								`select * from Biz_Staff a, Biz_Party b where a.StaffId = b.StaffId and a.S_Name like "${this.value}%"`
							).then((date) => {
								date.forEach(v => {
									this.lianxiangData.push({
										a: v.S_Name,
										b: v.S_NameSpell
									})
								})
								// this.searchData()
							})
							.catch((e) => {
								uni.showToast({
									title: '查询失败',
									icon: 'none'
								})
							})

					} else {
						sqlLite.selectFromTable(
								`select * from Biz_Staff a, Biz_Party b where a.StaffId = b.StaffId and a.S_NameSpell like "${this.value}%"`
							).then((date) => {
								date.forEach(v => {
									this.lianxiangData.push({
										a: v.S_NameSpell,
										b: v.S_Name,
									})
								})
							})
							.catch((e) => {
								uni.showToast({
									title: '查询失败',
									icon: 'none'
								})
							})
					}
					this.lianxiangShow = true
				} else {
					this.lianxiangShow = false
				}
			},
			lianxiangSearch(data) {
				let pattern = new RegExp("[\u4E00-\u9FA5]+");
				if (pattern.test(data.a)) {
					this.value = data.a
				} else {
					this.value = data.b
				}
				this.searchData()
			},

			// 搜索
			searchData() {
				if (this.value) {
					let pattern = new RegExp("[\u4E00-\u9FA5]+");
					this.allData = []
					this.size = 0

					if (pattern.test(this.value)) {
						sqlLite.selectFromTable(
								`select  min(PostID),* from Biz_Staff c, Biz_Organize b, Biz_Post a where a.OrganizeId = b.OrganizeId and a.StaffId = c.StaffId and c.S_Name like "%${this.value}%" GROUP BY a.StaffId ORDER BY b.O_Order asc,b.O_ParentOrganizeId asc,a.P_staffOrder asc`
							).then((date) => {
								this.allData = date
								this.pageData()
								this.lianxiangShow = false
							})
							.catch((e) => {
								uni.showToast({
									title: '查询失败',
									icon: 'none'
								})
							})

					} else {
						sqlLite.selectFromTable(
								`select  min(PostID),* from Biz_Staff c, Biz_Organize b, Biz_Post a where a.OrganizeId = b.OrganizeId and a.StaffId = c.StaffId and c.S_NameSpell like "%${this.value}%" GROUP BY a.StaffId ORDER BY b.O_Order asc,b.O_ParentOrganizeId asc,a.P_staffOrder asc`
							).then((date) => {
								this.allData = date
								this.pageData()
								this.lianxiangShow = false
							})
							.catch((e) => {
								uni.showToast({
									title: '查询失败',
									icon: 'none'
								})
							})
					}

					this.animation1 = true

					// this.resData.map(item => {
					// 	if (item.S_FullPost.indexOf(text) !== -1 || item.S_Name.indexOf(text) !== -1 || item
					// 		.S_MaxEduKey
					// 		.indexOf(text) !== -1) {
					// 		this.allData.push(item);
					// 	}
					// });
					this.pageData()
				} else {
					this.allData = []
					this.size = 0
					this.allData = this.resData
					this.animation1 = true
					this.pageData()
				}
			},
			// 树查询
			treeSearch(text) {
				this.allData = []
				this.size = 0
				this.resData.map(item => {
					text.forEach(v => {
						if (item.S_StatisticsOrganize == v) {
							this.allData.push(item);
						}
					})
				});
				this.pageData()
			},
			// 详情
			details(data) {
				uni.setStorage({
					key: 'det',
					data: data
				})
				uni.navigateTo({
					url: '/pages/leadership/userDetails',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.leadership {
		width: 100%;
		height: 100%;
		background-color: #fafafa;
		font-size: 24rpx;

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

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

				span {
					margin: 0 20rpx;
				}
			}

			.operation {
				display: flex;

				.search {
					margin-right: 50rpx;
				}

				.img {
					width: 50rpx;
					height: 50rpx;

				}
			}

			@keyframes myfirst {
				0% {
					width: 0rpx;
				}

				100% {
					width: 100%;
				}
			}

			@keyframes myfirst1 {
				0% {
					width: 100%;
				}

				100% {
					width: 0rpx;
				}
			}

			.kai {
				animation: myfirst 0.5s;
				animation-fill-mode: forwards;
			}

			.guan {
				animation: myfirst1 0.3s;
				animation-fill-mode: forwards;
			}

			.searchInp {
				width: 0;
				height: 70%;
				background-color: #fff;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				overflow: hidden;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin: 0 30rpx;
				}
			}

			.lianxiang {
				position: absolute;
				z-index: 200;
				top: 90%;
				left: 0;
				width: 100%;
				max-height: 800rpx;
				overflow-y: scroll;
				background-color: #fff;

				.li {
					padding-left: 130rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: #333;
					border-bottom: 1px solid #dcdcdc;

					span {
						margin-right: 20rpx;
						font-size: 30rpx;
					}
				}
			}
		}

		main {
			width: 100%;
			height: 90%;
			position: relative;

			@keyframes myfirst2 {
				0% {
					width: 0;
				}

				100% {
					width: 30%;
				}
			}

			@keyframes myfirst3 {
				0% {
					width: 30%;
				}

				100% {
					width: 0;
				}
			}

			.kai {
				animation: myfirst2 0.4s;
				animation-fill-mode: forwards;
			}

			.guan {
				animation: myfirst3 0.2s;
				animation-fill-mode: forwards;
				overflow: hidden;
			}

			.treeMod {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 1;
			}

			.treeBox {
				width: 0;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				overflow: scroll;
			}

			.scroll-Y {
				height: 100%;
				padding-bottom: 20rpx;

				.calBox {
					width: 100%;
					display: flex;
					padding: 0 20rpx;
					flex-wrap: wrap;
					// justify-content: space-between;

					.scroll-view-item {
						overflow: hidden;
						width: 32%;
						// height: 28vh;
						background-color: #fff;
						margin-top: 30rpx;
						border-radius: 6rpx;
						box-shadow: 1px 1px 3px 1px #ccc;
						padding: 30rpx;
						display: flex;
						margin-right: 32rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}

						.content {
							flex: 1;
							line-height: 44rpx;
							letter-spacing: 0rpx;

							p {
								color: #737373;
								font-size: 36rpx;

								.name {
									font-size: 46rpx;
									color: #41a7d4;
									font-weight: 600;
								}

								.age {
									color: #333;
									margin-left: 30rpx;
									margin-right: 15rpx;
									font-weight: 600;
									font-size: 40rpx;
								}

								.dizhi {
									color: #333;
									font-weight: 600;
								}
							}

							.zhiwu {
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								display: -webkit-box;
								-webkit-box-orient: vertical;
							}
						}

						.touxiang {
							width: 35%;
							max-width: 200rpx;
							height: 80%;
							max-height: 280rpx;
							background-color: #e6e6e7;
							// border: 1px solid #dededf;

							.img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.tableBox {
					width: 100%;
					padding: 0 10rpx;

					table {
						width: 100%;
						border-collapse: collapse;
						text-align: center;
						// white-space: nowrap;

						thead {
							position: sticky;
							top: 0;
							background-color: white;

							tr {
								border: 1px solid #999;

								td {
									border: 1px solid #999;

								}
							}
						}

						tbody {
							tr {
								.twoTd {
									max-width: 300rpx;
									width: 300rpx;
									word-wrap: break-word;
									word-break: break-all;
								}

							}
						}

						th,
						td {
							border: 1px solid #999;
							text-align: center;
							padding: 20px 0;
							word-wrap: break-word;
							word-break: break-all;
						}
					}
				}
			}

			.noData {
				width: 100%;
				height: 100%;

				.img {
					width: 100%;
					height: 100%;
				}
			}

		}
	}
</style>