jcyjdt_applet/pagesBasic/all/basic/index.vue

<template>
	<view class="main">
		<view class="one">
			<view class="one_1">
				基本信息
			</view>
			<view class="one_2">
				<view class="label">
					<text class="title">批建时间：</text>
					<text class="content">{{info.build_time||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">实验室名称：</text>
					<text class="content">{{info.name||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">英文名称：</text>
					<text class="content">{{info.english_name||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">所属学科：</text>
					<text class="content">{{info.subject||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">所属专业：</text>
					<text class="content">{{info.major||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">实验室面积：</text>
					<text class="content">{{info.lab_acreage||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">依托单位名称：</text>
					<text class="content">{{info.unit_name||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">实验室地区：</text>
					<text class="content">{{info.zhRegion||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">实验室地址：</text>
					<text class="content">{{info.lab_address||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">实验室建设方案：</text>
					<text class="content" @tap.stop="toFile(info.plan)" v-if="info.plan&&info.plan.length>0">
						{{info.plan[0].name||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">实验室定位：</text>
					<text class="content">{{info.position||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">实验室简介：</text>
					<text class="content">{{info.brief||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">实验室标志性照片：</text>
					<view class="image">
						<view v-for="(item, index) in info.basic_file" :key="index">
							<image class="images" :src="item.url" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="one">
			<view class="one_1">
				实验室主任信息
			</view>
			<view class="one_2">
				<view class="label">
					<text class="title">姓名：</text>
					<text class="content">{{directorInfo.name||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">性别：</text>
					<text class="content">{{formatText(directorInfo.gender,genderList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">出生年月：</text>
					<text class="content">{{directorInfo.birth||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">证件类别：</text>
					<text class="content">{{formatText(directorInfo.cardtype,cardtypeList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">证件号码：</text>
					<text class="content">{{directorInfo.num||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">学历：</text>
					<text class="content">{{formatText(directorInfo.education,educationList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">学位：</text>
					<text class="content">{{formatText(directorInfo.degree,degreeList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">职称：</text>
					<text class="content">{{formatText(directorInfo.title,titleList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">研究领域：</text>
					<text class="content">{{directorInfo.field||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">工作单位：</text>
					<text class="content">{{directorInfo.unit||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">电子邮箱：</text>
					<text class="content">{{directorInfo.email||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">办公电话：</text>
					<text class="content">{{directorInfo.work_phone||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">手机号：</text>
					<text class="content">{{directorInfo.phone||'暂无'}}</text>
				</view>
			</view>
		</view>
		<view class="one" v-if="list.length>0">
			<view class="one_1">
				研究方向
			</view>
			<view class="one_2">
				<view class="list" v-for="(item, index) in list" :key="index">
					<view class="name textOver">{{item.name||'暂无'}}</view>
					<view class="other">
						<view class="other_1 textOne">
							方向带头人：{{getDict(item.person_id,'person_id')||'暂无'}}
						</view>
						<view class="other_1 textOver">
							核心成员：{{getDict(item.persons,'persons')||'暂无'}}
						</view>
						<view class="other_1 textOne" @tap.stop="toFile(item.file)"
							v-if="item.file&&item.file.length>0">
							附件：{{item.file[0].name||'暂无'}}
						</view>
						<view class="status textOne">
							是否启用：{{getDict(item.is_show,'is_show')||'暂无'}}
						</view>
					</view>
				</view>
				<view class="total">
					<uni-pagination :current="page" :pageSize="3" :total="total" @change="toPage" />
				</view>
			</view>
		</view>
		<view class="one">
			<view class="one_1">
				依托单位
			</view>
			<view class="one_2">
				<view class="label">
					<text class="title">名称：</text>
					<text class="content">{{unitInfo.name||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">通讯地址：</text>
					<text class="content">{{unitInfo.address||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">联系人：</text>
					<text class="content">{{unitInfo.contacts||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">联系电话：</text>
					<text class="content">{{unitInfo.phone||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">单位类别：</text>
					<text class="content">{{formatText(unitInfo.type,unittypeList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">是否为事业单位：</text>
					<text class="content">{{formatText(unitInfo.is_career,careerList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">隶属：</text>
					<text class="content">{{formatText(unitInfo.subjection,subjectionList)||'暂无'}}</text>
				</view>
			</view>
		</view>
		<view class="one">
			<view class="one_1">
				科研助理(日常联系人)
			</view>
			<view class="one_2">
				<view class="label">
					<text class="title">姓名：</text>
					<text class="content">{{assistantInfo.name||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">证件类别：</text>
					<text class="content">{{formatText(assistantInfo.cardtype,cardtypeList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">证件号码：</text>
					<text class="content">{{assistantInfo.num||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">工作单位：</text>
					<text class="content">{{assistantInfo.unit||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">电子邮箱：</text>
					<text class="content">{{assistantInfo.email||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">办公电话：</text>
					<text class="content">{{assistantInfo.work_phone||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">手机号：</text>
					<text class="content">{{assistantInfo.phone||'暂无'}}</text>
				</view>
			</view>
		</view>
		<view class="one">
			<view class="one_1">
				财务助理
			</view>
			<view class="one_2">
				<view class="label">
					<text class="title">是否同以上科研助理：</text>
					<text class="content">{{formatText(info.is_alike,alikeList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">姓名：</text>
					<text class="content">{{financeInfo.name||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">证件类别：</text>
					<text class="content">{{formatText(financeInfo.cardtype,cardtypeList)||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">证件号码：</text>
					<text class="content">{{financeInfo.num||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">工作单位：</text>
					<text class="content">{{financeInfo.unit||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">电子邮箱：</text>
					<text class="content">{{financeInfo.email||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">办公电话：</text>
					<text class="content">{{financeInfo.work_phone||'暂无'}}</text>
				</view>
				<view class="label">
					<text class="title">手机号：</text>
					<text class="content">{{financeInfo.phone||'暂无'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				user: {},
				info: {},
				// 实验室主任信息
				directorInfo: {},
				// 依托单位
				unitInfo: {},
				// 科研助理
				assistantInfo: {},
				// 财务助理
				financeInfo: {},
				list: [],
				total: 0,
				skip: 0,
				limit: 3,
				page: 1,
				// 字典表
				regionList: [],
				genderList: [],
				cardtypeList: [],
				educationList: [],
				degreeList: [],
				titleList: [],
				unittypeList: [],
				careerList: [],
				subjectionList: [],
				alikeList: [{
						dict_value: true,
						dict_label: '是'
					},
					{
						dict_value: false,
						dict_label: '否'
					},
				],
				userList: [],
				showList: []
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e && e.id || '');
			await that.searchOther();
			that.searchToken();
			await that.search();
			uni.hideLoading();
		},
		onPullDownRefresh: async function() {
			const that = this;
			await that.search();
			uni.stopPullDownRefresh();
		},
		methods: {
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						that.$set(that, `user`, user);
					} else {
						uni.navigateTo({
							url: `/pages/login/index`
						})
					}
				} catch (e) {
					uni.showToast({
						title: err.errmsg,
						icon: 'error',
						duration: 2000
					});
				}
			},
			async search() {
				const that = this;
				if (that.id) {
					const res = await that.$api(`/basic/${that.id}`, 'GET', {}, 'freeLabel')
					if (res.errcode == '0') {
						if (res.data.region) {
							for (let val of that.regionList) {
								const region = val.children.find(i => i.code == res.data.region)
								if (region) res.data.zhRegion = region.name
							}
						}
						that.$set(that, `info`, res.data)
						// 实验室主任信息
						const director = await that.$api(`/basicDirector`, 'GET', {
							lab_id: that.id
						}, 'freeLabel')
						if (director.errcode == '0' && director.total > 0) {
							that.$set(that, `directorInfo`, director.data[0]);
						}
						// 依托单位信息
						if (res.data.declare_unit) that.$set(that, `unitInfo`, res.data.declare_unit)
						// 科研助理
						if (res.data.assistant) that.$set(that, `assistantInfo`, res.data.assistant)
						// 财务助理
						if (res.data.finance) that.$set(that, `financeInfo`, res.data.finance)
						// 研究方向
						that.dirSearch();
					} else {
						uni.showToast({
							title: res.errmsg,
						});
					}
				}
			},
			// 研究方向
			async dirSearch() {
				const that = this;
				let info = {
					skip: that.skip,
					limit: that.limit,
					lab_id: that.id
				}
				const res = await that.$api(`/direction`, 'GET', {
					...info
				}, 'freeLabel')
				if (res.errcode == '0') {
					that.$set(that, `list`, res.data)
					that.$set(that, `total`, res.total)
				} else {
					uni.showToast({
						title: res.errmsg,
					});
				}
				uni.hideLoading();
			},
			// 查询字典表
			getDict(e, model) {
				const that = this;
				if (!e) return '暂无'
				if (model == 'person_id') {
					let data = that.userList.find((i) => i._id == e);
					if (data) return data.name;
					else return '暂无';
				} else if (model == 'persons') {
					let list = [];
					if (e.length > 0) {
						for (const val of e) {
							let data = that.userList.find((i) => i._id == val);
							if (data) list.push(data.name);
						}
						return list.join(',');
					}
				} else if (model == 'is_show') {
					let data = that.showList.find((i) => i.dict_value == e);
					if (data) return data.dict_label;
					else return '暂无';
				}
			},
			// 整理数据
			formatText(item, model) {
				const that = this;
				if (item) {
					let data = model.find((i) => i.dict_value == item);
					if (data) return data.dict_label;
					else return '暂无';
				}
			},
			// 查看文件
			toFile(item) {
				const that = this;
				let serverUrl = that.$config.serverFile;
				let url = item[0].url
				// 判断前面是否有http
				const http = url.lastIndexOf("http");
				if (http == -1) url = serverUrl + url
				//获取最后一个.的位置
				const arr = url.lastIndexOf(".");
				//获取后缀
				const typeName = url.substr(arr + 1);
				//支持预览的文件类型
				//微信小程序
				let fileType = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				//下载文件资源到本地
				uni.downloadFile({
					url: url,
					success: function(res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						if (!fileType.includes(typeName)) {
							return false;
						}
						uni.showLoading({
							title: '正在打开',
							mask: true
						})
						// 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
						uni.openDocument({
							filePath: filePath,
							fileType: typeName, // 文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx 
							success: res => {
								uni.hideLoading();
								console.log('打开文档成功', res);
							},
							fail: openError => {
								uni.hideLoading();
								console.log('fail:' + JSON.stringify(openError));
							}
						});
					},
					fail: function(err) {
						uni.hideLoading();
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			// 分页
			toPage(e) {
				const that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				that.$set(that, `page`, e.current);
				const page = e.current - 1;
				const skip = page * that.limit;
				that.$set(that, `skip`, skip)
				that.dirSearch();
			},
			async searchOther() {
				const that = this;
				let res;
				uni.showLoading({
					title: '正在加载请稍后',
					mask: true
				})
				//地区
				res = await that.$api('/region', 'GET', {
					code: '220000',
					status: '0'
				}, 'freeLabel')
				if (res.errcode == '0') that.$set(that, `regionList`, res.data);
				//性别
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'sys_user_sex',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `genderList`, res.data);
				//证件类别
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'leading_cadre_cardtype',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `cardtypeList`, res.data);
				//学历
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'education',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `educationList`, res.data);
				//学位
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'degree',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `degreeList`, res.data);
				//职称
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'title',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `titleList`, res.data);
				//单位类别
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'declare_unit_type',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `unittypeList`, res.data);
				//事业单位
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'declare_unit_career',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `careerList`, res.data);
				//隶属
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'declare_unit_subjection',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `subjectionList`, res.data);
				//是否启用
				res = await that.$api('/dictData', 'GET', {
					dict_type: 'info_show',
					status: '0'
				}, 'jcyjdtglpt')
				if (res.errcode == '0') that.$set(that, `showList`, res.data);
				// 固定/流动人员 作者
				let personList = [];
				res = await that.$api('/fixedpersonnel', 'GET', {
					status: '0'
				}, 'freeLabel')
				if (res.errcode == '0') personList = res.data;
				res = await that.$api('/flowpersonnel', 'GET', {
					status: '0'
				}, 'freeLabel')
				if (res.errcode == '0') personList.push(...res.data);
				that.$set(that, `userList`, personList);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: var(--f9Color);

		.one {
			padding: 2vw;

			.one_1 {
				padding: 2vw;
				font-size: var(--font16Size);
				font-weight: bold;
				margin: 0 0 2vw 0;
				border-bottom: 1px var(--fcColor) dashed;
			}

			.one_2 {
				background-color: var(--mainColor);
				padding: 2vw;
				margin: 0 0 2vw 0;
				border-radius: 5px;

				.label {
					margin: 0 0 1vw 0;

					.title {
						font-size: var(--font14Size);
						font-weight: bold;
					}

					.content {
						margin: 0 0 0 1vw;
						color: var(--f85Color);
						font-size: var(--font14Size);
					}

					.image {
						.images {
							width: 100%;
							margin: 0 0 1vw 0;
						}
					}
				}

				.list {
					background-color: var(--mainColor);
					border: 1px solid var(--f5Color);
					padding: 2vw;
					margin: 0 2vw 2vw 2vw;
					border-radius: 5px;

					.name {
						font-size: var(--font14Size);
						font-weight: bold;
					}

					.other {
						font-size: var(--font12Size);
						color: var(--f85Color);

						.other_1 {
							margin: 1vw 0 0 0;
						}
					}

					.status {
						padding: 1vw 0 0 0;
						font-size: var(--font12Size);
						color: var(--fF0Color);
					}
				}
			}
		}
	}
</style>