subject_gxj/xj_project_app/pages/important/detail/index.vue

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad,
	} from "@dcloudio/uni-app";

	import {
		getImportantDetail,
	} from "@/api/work/important.js";

	let detail = ref({});
	const getDeatil = function(id) {
		getImportantDetail({
			id
		}).then(res => {
			detail.value = res.data;
			conbineFileList(res.data.files)
		})
	}

	// 组合附件数据
	function conbineFileList(list) {
		// 添加上传成功标识
		const statusList = list.map(item => {
			let orginal = {
				...item
			}

			return Object.assign(
				orginal, {
					status: 'success'
				})
		})

		// 照片附件
		let listPhoto = statusList.filter(item => ['101', '102', '103', '104', '105'].includes(item.fileType))
		uploadListPhoto.value = listPhoto

		// 视频附件
		let listVideo = statusList.filter(item => ['202', '203'].includes(item.fileType));
		uploadListVideo.value = listVideo;

		// 其他附件
		let exceptPhotoList = statusList.filter(item => !listPhoto.includes(item));
		uploadListFile.value = exceptPhotoList.filter(item => !listVideo.includes(item));
		console.log(uploadListFile.value);

		// 上传数据
		const dataList = list.map(item => {
			let orginal = {
				...item
			}
			return {
				id: orginal.id,
				fileName: orginal.fileName,
				fileType: orginal.fileType,
				fileAddre: orginal.fileAddre
			}
		})

		// 备份初始数据
		listFileOrginal = dataList
	}


	// ====================附件上传
	let listFileOrginal = [] //原始数据--备份比较用
	let uploadListPhoto = ref([]) //上传列表--图片
	let uploadListVideo = ref([]) //上传列表--视频
	let uploadListFile = ref([]) //上传列表--文件

	// 播放文件--视频
	function videoClick(event) {
		showFile(event.fileType, event.url)
	}

	// 文件预览
	function showFile(type, filePath) {
		uni.navigateTo({
			url: `/pages/projectInfo/media/index?type=${type}&filePath=${filePath}`
		})
	}

	onLoad(options => {
		getDeatil(options.id)
	})
</script>

<template>
	<view class="container">
		<page-title>详情</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<view class="card-item first-card-item">
					<view class="card-item-name">主持人</view>
					<view class="card-item-content">{{detail.host || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">会议地点</view>
					<view class="card-item-content">{{detail.host || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">会议类型</view>
					<view class="card-item-content">{{detail.kindName || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">日期</view>
					<view class="card-item-content">{{detail.meetingDate || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">参会人员</view>
				</view>
				<view class="item-textarea">{{detail.joinPerson}}</view>
			</view>

			<view class="card only-card">
				<view class="card-item first-card-item">
					<view class="card-item-name">会议主题</view>
					<view class="card-item-content">{{detail.meetingTitle || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">会议内容</view>
				</view>
				<view class="item-textarea">{{detail.content}}</view>

				<view class="card-item">
					<view class="card-item-name">解决问题</view>
				</view>
				<view class="item-textarea">{{detail.solveProblem}}</view>
			</view>

			<view class="card only-card">
				<view class="card-item first-card-item">
					<view class="card-item-name">工作计划</view>
				</view>

				<view style="height: 20rpx; width: 100%;"></view>

				<uni-table stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">负责人</uni-th>
						<uni-th align="center">完成内容</uni-th>
						<uni-th align="center">完成日期</uni-th>
					</uni-tr>

					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in detail.plans" :key="index">
						<uni-td align="center">{{item.mainPerson}}</uni-td>
						<uni-td align="center">{{item.planContent}}</uni-td>
						<uni-td align="center">{{item.endDate}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<view class="card only-card">
				<view class="card-item first-card-item">
					<view class="card-item-name">附件信息</view>
				</view>

				<view style="height: 20rpx; width: 100%;"></view>

				<!-- 附件（照片） -->
				<view class="card-item flex-align-start">
					<view class="card-item-name" style="min-width: 156rpx;">图片附件</view>
					<u-upload :fileList="uploadListPhoto" uploadIcon="plus"></u-upload>
				</view>

				<!-- 附件（视频） -->
				<view class="card-item flex-align-start">
					<view class="card-item-name" style="min-width: 156rpx;">视频附件</view>
					<u-upload :fileList="uploadListVideo" @onVideoClick="videoClick" name="file" uploadIcon="plus"
						accept="video"></u-upload>
				</view>

				<!-- 附件（文件） -->
				<view class="card-item flex-align-start">
					<view class="card-item-name" style="min-width: 156rpx;">其他附件</view>
					<view class="upload-file-area">
						<view class="upload-file-name" v-for="(item,index) in uploadListFile" :key="index"
							@click="showFile('pdf',item.url)">
							{{item.fileId}}
						</view>
					</view>
				</view>
			</view>
			<view style="height: 50rpx; width: 100%;"></view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.item-textarea {
		width: 100%;
		min-height: 168rpx;
		padding: 20rpx;
		margin-top: 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		border: 2rpx solid #D0D9E7;
	}

	::v-deep .uni-table {

		// 改表头字体样式
		.uni-table-th,
		.uni-table-th-content {
			background-color: #DCE8FD;
			color: #343437;
			font-size: 26rpx;
			font-weight: normal;
		}

		.uni-table-tr:nth-of-type(2n + 1) {
			background-color: #F5F9FF !important;
		}

		.uni-table-tr {
			background-color: #fff !important;
		}
	}
</style>