workApp/pages/teacherHonor/myHonor/uploadEditMyHonor.vue

<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="96" :title="state.title" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
		<view :class="['page_content',{'view':state.type=='view'}]">
			<uni-forms ref="valiForm" :class="['forms_style',{'view':state.type=='view'}]" :rules="rules" :model="state.formData" border labelWidth="160rpx" label-align="right">
				<uni-forms-item label="荣誉类型：" required name="honorTypeValue">
					<template v-if="state.type=='view'">{{state.formData.honorTypeValue}}</template>
					<uni-data-select v-else v-model="state.formData.honorTypeValue" :clear="false" placeholder="请选择荣誉类型" :disabled="state.type=='upload'?false:true" :localdata="state.honorTypeData" style="width: 400rpx;" @change="ChangeDataSelect"></uni-data-select>
				</uni-forms-item>
				<template v-for="item in state.dynamicFormData">
					<uni-forms-item :label="`${item.dictName}：`" required :name="`input_${item.id}`">
						<template v-if="state.type=='view'">
							<template v-if="item.dictType == 1 || item.dictType == 2">{{state.formData[`${item.dictShowType}_${item.id}`]}}</template>
							<uni-dateformat v-else :date="state.formData[`${item.dictShowType}_${item.id}`]" format="yyyy-MM-dd"></uni-dateformat>
						</template>
						<template v-else>
							<uni-easyinput v-if="item.dictType == 1" v-model="state.formData[`${item.dictShowType}_${item.id}`]" :disabled="item.onlyRead == 1" :maxlength="100" :placeholder="`请输入${item.dictName}`" :style="{width: item.dictName=='获奖人'?'400rpx':''}" />
							<uni-data-select v-else-if="item.dictType == 2" v-model="state.formData[`${item.dictShowType}_${item.id}`]" :clear="false" :placeholder="`请选择${item.dictName}`" :localdata="item.dictList" style="width: 400rpx;"></uni-data-select>
							<uni-datetime-picker v-else type="date" :end="todayStr" :clear-icon="false" v-model="state.formData[`${item.dictShowType}_${item.id}`]" placeholder=" " style="width: 400rpx;" />
						</template>
					</uni-forms-item>
				</template>
				<uni-forms-item label="荣誉证书：" required name="certPicDatas">
					<uv-upload :maxCount="state.type=='view'?state?.formData?.certPicDatas?.length:50" :deletable="state.type!='view'" :fileList="state.formData.certPicDatas" width="240rpx" height="140rpx" multiple :previewFullImage="true" @AfterRead="AfterRead" @delete="DeletePic">
						<view class="upload_btn" v-if="state.type!='view'">
							<uni-icons class="upload_btn_icon" type="plusempty"></uni-icons>
							<view class="upload_btn_text">上传荣誉证书</view>
						</view>
					</uv-upload>
				</uni-forms-item>
				<uni-forms-item label="佐证材料：">
					<template v-if="state.type=='view'">
						<view class="upload_file_list_item" v-for="item in state.formData.docDatas" :key="item.createdAt">
							<image class="list_item_icon" src="/static/image/icon/file.png"></image>
							<view class="list_item_content">
								<view class="item_content_title">{{item.documentName}}</view>
								<view class="item_content_info">
									<view class="size">{{item.fileSize}}</view>
									<view class="time">{{item.createdAt}}</view>
								</view>
							</view>
							<view class="list_item_preview" @click="PreviewFile(item)">预览</view>
						</view>
					</template>
					<template v-else>
						<!-- maxSize：单文件上限 MB；0 表示不限制 maxCount：列表最多文件数 -->
						<kex-file-uploader ref="fileUploader" mode="headless" :max-count="20" :maxSize="100"></kex-file-uploader>
						<view class="upload_file_btn" @click="ChooseUploadFile">
							<uni-icons class="upload_file_btn_icon" type="plusempty"></uni-icons>
							<view class="upload_file_btn_text">上传佐证材料</view>
						</view>
						<view class="upload_file_list_item" v-for="item in state.formData.docDatas" :key="item.createdAt" @click="PreviewFile(item)">
							<image class="list_item_icon" src="/static/image/icon/file.png"></image>
							<view class="list_item_content">
								<view class="item_content_title">{{item.documentName}}</view>
								<view class="item_content_info">
									<view class="size">{{item.fileSize}}</view>
									<view class="time">{{item.createdAt}}</view>
								</view>
							</view>
							<uni-icons class="list_item_close" type="close" @click.stop="state.formData.docDatas.splice(i, 1)"></uni-icons>
						</view>
					</template>
				</uni-forms-item>
				<uni-forms-item label="驳回原因 ：" v-if="state.formData.overruleContent">
					{{state.formData.overruleContent}}
				</uni-forms-item>
				<uni-forms-item label="审核人：" v-if="state.type=='view'">
					{{state.formData.reviewTeacherName}}
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="page_foot" v-if="state.type!='view'"><button class="btn_submit" type="primary" :loading="state.loading" @click="honorTypeConfirm">确认</button></view>
	</view>
	<!-- 提示框 -->
	<popupPreviewFile ref="popupDialogRef" :filePath="state.previewPopup.filePath"></popupPreviewFile>
	<!-- 文件、图片下载 -->
	<ss-download ref="ssdownload"></ss-download>
</template>

<script setup>
	import navBar from '@/components/navBar.vue';
	import uniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
	import uniFormsItem from '@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue';
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import uniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue';
	import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';
	import uniDateformat from '@/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue';
	import uvUpload from '@/uni_modules/uv-upload/components/uv-upload/uv-upload.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import ssDownload from '@/uni_modules/ss-download/components/ss-download/ss-download.vue';
	import popupPreviewFile from '@/components/popupPreviewFile.vue';
	import {queryHonorTypeDictList,queryHonorDataDetailById,addHonorCertData,updateHonorCertData} from '@/reqApi/teacherHonor.js';
	import { unioformDateTransform,fileSizeConvert } from '@/common/common.js';
	import config from '@/config.js'; // 引入配置文件
	import {
		reactive,
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const state = reactive({
		id:'',//荣誉类型id
		title:'',//标题
		type:'',
		formData: {
			honorTypeValue: '',//荣誉类型id
			certPicDatas:[],//荣誉证书
			docDatas:[],//佐证材料
			overruleContent:'',//驳回原因
			reviewTeacherName:''//审核人
		},
		honorTypeData:[],//荣誉类型下拉
		dynamicFormData:[],//动态表单
		dictDatas:[],//动态表单传参
		loading:false,
		previewPopup:{
			filePath:''
		}
	})
	const todayStr = ref(new Date().toISOString().split('T')[0]);
	const rules = ref({
		honorTypeValue: { rules: [{ required: true, errorMessage: '请选择荣誉类型' }] },
		certPicDatas: { rules: [{ required: true, errorMessage: '请上传荣誉证书' }] },
	});
	const fileUploader = ref(null);
	const popupDialogRef = ref(null);
	const ssdownload = ref(null);
	const token = ref(uni.getStorageSync('token'));
	const apiBaseUrl = ref('');
	onLoad(async(option) => {
		state.id = option.id;
		state.type = option.type;
		getApiBaseUrl();
		uni.setStorageSync('isLoadMyHonorList', false);//返回列表页是否重新加载我的荣誉列表
		await GetHonorTypeDictList(option.type);//查询荣誉类型下拉数据
		if(option.type == 'upload'){
			state.title = '上传荣誉';
		}else{
			if(option.type == 'edit'){
				state.title = '修改荣誉';
			}else {
				state.title = decodeURIComponent(option.honorName);
			}
			GetHonorDataDetailById();
		}
	})
	//上传接口地址
	const getApiBaseUrl = () => {
		if (process.env.NODE_ENV === 'development') {//本地开发环境
		  const SYSTEM_INFO = uni.getSystemInfoSync();//获取系统信息的同步接口
		  apiBaseUrl.value = SYSTEM_INFO.uniPlatform === 'web' ? config.proxyBaseUrl:config.apiBaseUrl;//读取配置文件的apiBaseUrl变量
		} else {//生产/测试环境
		  apiBaseUrl.value = config.apiBaseUrl
		}
	}
	//查询荣誉类型下拉数据
	const GetHonorTypeDictList = async (type) => {
		await queryHonorTypeDictList().then(res=>{
			if(res.code == 200){
				const honorTypeData = res?.data?.honorTypeDictBOS || [];
				honorTypeData.forEach(item=>{
					item.value = item.id;
					item.text = item.honorTypeName;
					const honorTypeDictData = item?.honorTypeDictBOS || [];
					honorTypeDictData.forEach(itemList=>{
						if(itemList.dictType == 2){//单选
							itemList.dictShowType = 'radio';
							const dictList = itemList?.dictList || [];
							dictList.forEach(dic=>{
								dic.text = dic.dictName;
								dic.value = dic.id
							})
						}else if(itemList.dictType == 1){//输入框
							itemList.dictShowType = 'input';
						}else{//日期
							itemList.dictShowType = 'datetime';
						}
					})
				})
				state.honorTypeData = honorTypeData;//荣誉类型下拉数据;
				if(type == 'upload'){//荣誉类型默认值
					state.formData.honorTypeValue = honorTypeData?.[0].value || '';//荣誉类型默认值
					const honorTypeDictData = honorTypeData?.[0]?.honorTypeDictBOS || [];
					SetDynamicFormData(honorTypeDictData);//设置动态表单
				}
			}else{
				state.honorTypeData = [];
			}
		})
	}
	//设置动态表单的值
	const SetDynamicFormData = (honorTypeDictData) => {
		honorTypeDictData.forEach(item=>{
			if(item.dictType == 2){//单选
				state.formData[`${item.dictShowType}_${item.id}`] = '';
				rules.value[`${item.dictShowType}_${item.id}`] = { rules: [{ required: true, errorMessage: `请选择${item.dictName}` }] };
			}else {//输入框 日期
				const value = item?.dictList?.[0]?.dictName || '';
				state.formData[`${item.dictShowType}_${item.id}`] = value;
				const placeholder = item.dictType == 1 ? '请输入' : '请选择';
				rules.value[`${item.dictShowType}_${item.id}`] = { rules: [{ required: true, errorMessage: `${placeholder}${item.dictName}` }] };
			}
		})
		state.dynamicFormData = honorTypeDictData;//动态表单
	}
	//改变荣誉类型
	const ChangeDataSelect = (val) => {
		const selectedHonorType = state.honorTypeData.find(item=>item.id == val);
		const honorTypeDictData = selectedHonorType?.honorTypeDictBOS || [];
		SetDynamicFormData(honorTypeDictData)
	}
	//查看荣誉详情接口
	const GetHonorDataDetailById = () => {
		queryHonorDataDetailById(state.id).then(res=>{
			if(res.code == 200){
				const honorTypeId = res?.data?.honorTypeId || '';
				const honorTypeName = res?.data?.honorTypeName || '';
				state.formData.honorTypeValue = state.type=='view'?honorTypeName:honorTypeId;//荣誉类型默认值
				//给动态表单设置值
				const selectedHonorType = state.honorTypeData.find(item=>item.id == honorTypeId);
				const honorTypeDictData = selectedHonorType?.honorTypeDictBOS || [];
				state.dynamicFormData = honorTypeDictData;//动态表单
				const honorDataList = res?.data?.honorDataList || '';
				honorDataList.forEach(item=>{
					if(item.dictType == 2){//单选
						state.formData[`radio_${item.honorDictLibNameId}`] = state.type!='view'?item.honorDictLibValueId:item.honorDictLibValue;
					}else {//输入框 日期
						const type = item.dictType == 1 ? 'input' : 'datetime';
						state.formData[`${type}_${item.honorDictLibNameId}`] = item.honorDictLibValue;
					}
				})
				const honorDataCertList = res?.data?.honorDataCertList || [];//荣誉证书
				state.formData.certPicDatas = honorDataCertList.map(item=>({
					...item,
					url:item.picUrl
				}));//荣誉证书
				state.formData.docDatas = res?.data?.supportDocumentList || [];//佐证材料
				state.formData.overruleContent = res?.data?.overruleContent || '';//驳回原因
				state.formData.reviewTeacherName = res?.data?.reviewTeacherName || '';//审核人
			}
		})
	}
	//提交
	const honorTypeConfirm = () => {
		for (const key in rules.value) {
			if (state.formData?.[key] === "" || state.formData?.[key] === null || state.formData?.[key]&&state.formData?.[key]?.length === 0) {
				const errorMessage = rules.value[key].rules[0].errorMessage;
				uni.showToast({
					title: errorMessage,
					icon: 'none'
				})
				return false
			}
		}
		state.loading = true;
		const certPicDatas = state.formData.certPicDatas.map(item=>({
			name:item.picName,
			url:item.url,
			fileSize:item?.fileSize || '',
			time:item?.time || '',
		}))
		const docDatas = state.formData.docDatas.map(item=>({
			name:item.documentName,
			url:item.documentUrl,
			fileSize:item.fileSize,
			time:item.createdAt,
		}))
		const dictDatas = [];
		state.dynamicFormData.forEach(item=>{
			if(item.dictType == 2){//单选
				const valueData = state.formData[`${item.dictShowType}_${item.id}`];
				const dictList = item?.dictList || [];
				const valueName = dictList.find(dic=>dic.id == valueData);
				dictDatas.push({
					keyId: item.id,
					keyName: item.dictName,
					valueId: valueData,
					valueName: valueName?.dictName || ''
				})
			}else{
				let valueData = state.formData[`${item.dictShowType}_${item.id}`];
				if(state.type == 'upload' && Number(item.dictType) === 0){
					valueData = valueData + ' 00:00:00'
				}
				const dictList = item?.dictList || []; 
				dictDatas.push({
					keyId: item.id,
					keyName: item.dictName,
					valueId: dictList?.[0]?.id,
					valueName: valueData
				})
			}
		})
		let params =  {
			certPicDatas: certPicDatas,
			dictDatas: dictDatas,
			docDatas:docDatas,
			honorTypeId: state.formData.honorTypeValue
		}
		
		if(state.id){
			params.id = state.id;
			updateHonorCertData(params).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title: '修改成功！',
						icon: 'none'
					})
					uni.setStorageSync('isLoadMyHonorList', true);//返回列表页是否重新加载我的荣誉列表
					GoBack();
				}
			}).finally(()=>{
				state.loading = false;
			})
		}else{//新建
			addHonorCertData(params).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title: '上传成功！',
						icon: 'none'
					})
					uni.setStorageSync('isLoadMyHonorList', true);//返回列表页是否重新加载我的荣誉列表
					GoBack();
				}
			}).finally(()=>{
				state.loading = false;
			})
		}
	}
	// 删除图片
	const DeletePic = (event) => {
		state.formData.certPicDatas.splice(event.index, 1);
	}
	// 新增图片
	const AfterRead = async(event) => {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = state.formData.certPicDatas.length;
		lists.map((item) => {
			state.formData.certPicDatas.push({
				...item,
				status: 'uploading',
				message: '上传中1'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			if(result.code == 200){
				let item = state.formData.certPicDatas[fileListLen]
				state.formData.certPicDatas.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					picName: result?.data?.fileName,
					url:result?.data?.url,
					fileSize:fileSizeConvert(lists?.[i]?.size || 0),
					time:unioformDateTransform(new Date())
				}))
				fileListLen++
			}
			
		}
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: `${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_filesSele`,
				filePath: url,
				name: 'file',
				header:{
					Authorization:token.value
				},
				success: (res) => {
					const resdata = JSON.parse(res.data);
					resolve(resdata)
				}
			});
		})
	}
	//上传 图片 视频 文档
	const ChooseUploadFile = () => {
		fileUploader.value.chooseFile({//选择上传文件
			count: 1,
			success: (files) => {
				fileUploader.value.upload({//上传单个文件
					url:`${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_filesSele`,
					file: files[0],
					name: 'file',
					header: {Authorization: token.value},
					method: 'POST',
					withCredentials: true, // iOS 本地测远程且要带 cookie
					success: (res) => {
						const result = JSON.parse(res.result);
						state.formData.docDatas.push({
							documentName:result.data.fileName,
							documentUrl:result.data.url,
							fileSize:fileSizeConvert(files?.[0]?.size || 0),
							createdAt:unioformDateTransform(new Date())
						})
					}
				});
			}
		})
	}
	//预览
	const PreviewFile = (item) => {
		const fileType = item?.documentName?.split('.')?.[1] || '';
		if(IsImageExts(fileType)){//图片预览
			state.previewPopup.filePath = item.documentUrl;
			popupDialogRef.value.OpenDialog();
		}else{//文件预览
			ToDownloadFile(item)
		}
	}
	//判断是否是图片
	const IsImageExts = (fileType) => {
		const type = fileType?.toLowerCase();
		const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp','svg', 'tiff', 'tif', 'ico', 'avif', 'heic', 'heif'];
		return imageExts.includes(type)
	}
	//判断是不是视频
	const IsVideoExts = (fileType) => {
		const type = fileType?.toLowerCase();
		const videoExts = [
		    'mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 
		    'webm', 'm4v', '3gp', 'mpeg', 'mpg', 'mts', 
		    'm2ts', 'ts', 'vob', 'ogv', 'ogg', 'rm', 'rmvb'
		];
		return videoExts.includes(type)
	}
	//下载
	const ToDownloadFile = (item) => {
		const fileType = item?.documentName?.split('.')?.[1] || '';
		let type = '';
		if(IsImageExts(fileType)){
			type = '1';//1:图片 2 文档 3 视频
		}else if(IsVideoExts(fileType)){
			type = '3';
		}else{
			type = '2';
		}
		ssdownload?.value?.toDownload({
			type:fileType,
			src:item.documentUrl,
			fileName:item.documentName
		});
	}
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.page_body{
		height: 100%;
		min-height: auto;
		overflow: hidden;
	}
	.page_content{
		height: calc(100% - 250rpx);
		overflow: auto;
		&.view{
			height: calc(100% - 96rpx);
		}
	}
	.forms_style{
		&.view{
			:deep(.uni-forms-item){
				&.uni-forms-item--border{
					.uni-forms-item__label{
						padding-top: 0rpx;
					}
				}
			}	
		}
		:deep(.uni-forms-item){
			&.uni-forms-item--border{
				border-top: 0;
				border-bottom: 2rpx solid #F3F3F3;
				.uni-forms-item__label{
					align-items: flex-start;
					padding-top: 16rpx;
				}
			}
			.uv-upload__wrap{
				// flex-direction: row-reverse;
				gap: 24rpx 32rpx;
				.uv-upload__wrap__preview{
					background-color: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #CED1D8;
					box-sizing: border-box;
					margin: 0;
					.uv-upload__deletable{
						top:10rpx;
						right: 10rpx;
						background-color: transparent;
						height: 32rpx;
						width: 32rpx;
						border: 2rpx solid #999999;
						border-radius: 50%;
						.uvicon-close{
							color:#999999 !important;
							font-size: 11rpx !important;
						}
					}
					.uv-upload__deletable__icon{
						transform: scale(1);
						top:50%;
						right: 50%;
						transform: translate(50%, -50%);
					}
					.uv-upload__success{
						border-width: 20rpx;
					}
				}
				.upload_btn{
					width: 240rpx;
					height: 140rpx;
					background-color: #FAFBFF;
					border-radius: 20rpx;
					border: 2rpx solid #CCCED4;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.upload_btn_icon{
						font-size: 40rpx !important;
						color: #CCCED4 !important;
					}
					.upload_btn_text{
						margin-top: 16rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #CCCED4;
					}
				}
			}
			.upload_file_btn{
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				background-color: #FAFBFF;
				border-radius: 20rpx;
				border: 2rpx dashed #CCCED4;
				.upload_file_btn_icon{
					font-size: 40rpx !important;
					color: #CCCED4 !important;
				}
				.upload_file_btn_text{
					font-weight: 400;
					font-size: 24rpx;
					color: #CCCED4;
					margin-top: 8rpx;
				}
			}
			.upload_file_list_item{
				display: flex;
				align-items: center;
				width: 100%;
				min-height: 120rpx;
				padding: 20rpx 24rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #EBEEF5;
				box-sizing: border-box;
				margin-top: 24rpx;

				.list_item_icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.list_item_content {
					flex: 1;
					// width: 0;
					// overflow: hidden;

					.item_content_title {
						width: 100%;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						word-break: break-all;
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// word-break: keep-all; /* ✅ 防止意外换行 */
					}

					.item_content_info {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						gap: 4rpx 20rpx;
						margin-top: 8rpx;

						.size {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							flex-shrink: 0;
						}
						.time {
							font-size: 24rpx;
							color: #999999;
							flex-shrink: 0;
						}
					}
				}
				.list_item_close {
					flex-shrink: 0;
					color: #999999 !important;
					font-size: 48rpx !important;
				}
				.list_item_preview{
					flex-shrink: 0;
					font-weight: 400;
					font-size: 28rpx;
					color: #2E64FA;
				}
			}
		}
	}
	.page_foot{
		position: fixed;
		left:0;
		right: 0;
		bottom: 0;
		padding: 20rpx 24rpx;
		background-color:#FFFFFF;
		.btn_submit{
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #2E64FA !important;
			border-radius: 20rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
</style>