Jelajahi Sumber

测试 后面好像没有用

xiaocao 7 bulan lalu
induk
melakukan
da64fd74f4

+ 1 - 0
src/api/oa/daily.js

@@ -0,0 +1 @@
+ 

+ 50 - 0
src/components/imageWithVideo/ima.vue

@@ -0,0 +1,50 @@
+<template>
+    <view class="demo-container">
+        <view class="demo-section">
+            <text class="section-title">图片视频上传测试</text>
+            <ImageWithVideo :multiple="true" :max-count="9" :max-size="10 * 1024 * 1024" @upload="handleUpload"
+                @error="handleError" />
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import ImageWithVideo from './imageWithVideo.vue';
+
+const handleUpload = (previews) => {
+    console.log('上传的文件:', previews);
+    console.log('文件数量:', previews.length);
+};
+
+const handleError = (error) => {
+    console.error('上传错误:', error);
+    uni.showToast({
+        title: error,
+        icon: 'none',
+        duration: 2000
+    });
+};
+</script>
+
+<style scoped>
+.demo-container {
+    padding: 20px;
+}
+
+.demo-section {
+    margin-bottom: 40px;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    background-color: white;
+}
+
+.section-title {
+    display: block;
+    margin-bottom: 20px;
+    color: #333;
+    font-size: 18px;
+    font-weight: bold;
+}
+</style>

+ 628 - 0
src/pages/work/uploadProjectImage(1).vue

@@ -0,0 +1,628 @@
+<template>
+	<view class="upload-container">
+		<uni-forms ref="formRef" :model="formData" :rules="rules">
+			<uni-forms-item label="任务主题" name="projectName" required>
+				<uni-easyinput v-model="formData.projectName" placeholder="请输入任务主题" />
+			</uni-forms-item>
+
+			<uni-forms-item label="工作类型" name="projectType" required>
+				<uni-data-select v-model="formData.projectType" :localdata="sys_work_type" placeholder="请选择工作类型" />
+			</uni-forms-item>
+
+			<uni-forms-item label="协作人员" name="collaborator" required>
+				<uni-easyinput v-model="formData.collaborator" placeholder="请输入协作人员" />
+			</uni-forms-item>
+
+			<uni-forms-item label="任务时间" name="projectTime">
+				<uni-datetime-picker v-model="formData.projectTime" end-placeholder="请选择结束时间" rangeSeparator="至"
+					start-placeholder="请选择开始时间" type="datetimerange" />
+			</uni-forms-item>
+
+			<uni-forms-item label="优先级" name="projectGrade" required>
+				<uni-data-checkbox v-model="formData.projectGrade" :localdata="sys_sort_grade" />
+			</uni-forms-item>
+
+			<uni-forms-item label="详细描述" name="content">
+				<uni-easyinput v-model="formData.content" :autoHeight="true" placeholder="请输入详细描述" type="textarea" />
+			</uni-forms-item>
+
+			<!-- 	<uni-forms-item label="照片上传" name="accessory1">
+				<uni-file-picker v-model="imageValue" :limit="5" file-extname="png,jpg,mp4" file-mediatype="image"
+					mode="grid" @fail="fail" @progress="progress" @select="select" @success="success" />
+			</uni-forms-item> -->
+
+			<uni-forms-item label="图片上传" name="accessory2">
+				<!-- <uni-file-picker v-model="imageValue" :limit="5" file-extname="mp4" file-mediatype="video" mode="grid"
+					@fail="fail" @progress="progress" @select="select" @success="success" /> -->
+
+
+				<image-with-video v-model="mediaList" :maxCount="5" media="true" mediaType="all" :uploadUrl="uploadUrl"
+					:token="token" @change="handleMediaChange" @backendData="handleBackendData" />
+
+			</uni-forms-item>
+
+
+			<uni-forms-item label="备注" name="remark">
+				<uni-easyinput v-model="formData.remark" :autoHeight="true" placeholder="请输入内容" type="textarea" />
+			</uni-forms-item>
+
+
+		</uni-forms>
+
+		<view class="dialog-footer" style="text-align: center;">
+			<button :loading="buttonLoading" type="primary" @click="submitTaskForm">保存</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		computed
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		useDict
+	} from '@/common/useDict'
+	import {
+		getTaskByDictType,
+		uploadFile,
+		addTask
+	} from '@/api/oa/task'
+	import ImageWithVideo from '@/components/imageWithVideo/imageWithVideo.vue'
+
+	import config from '@/config.js';
+	import useUserStore from '@/store/modules/user';
+	const {
+		sys_work_type: originalWorkTypes,
+		sys_sort_grade: originalSortGrades
+	} = useDict('sys_work_type', 'sys_sort_grade')
+
+	const imageUrl = config.baseUrl
+	const uploadUrl = config.baseUrl + config.apiPrefix + '/common/upload'
+	const token = useUserStore().token
+
+
+	// 将 label 转换为 text
+	const sys_work_type = computed(() => {
+		return originalWorkTypes.value.map(item => ({
+			...item,
+			text: item.label // 将 label 赋值给 text
+		}))
+	})
+
+	const sys_sort_grade = computed(() => {
+		return originalSortGrades.value.map(item => ({
+			...item,
+			text: item.label // 将 label 赋值给 text
+		}))
+	})
+
+	// 项目状态数据
+	const projectStatus = ref(null)
+	const imageValue = ref([])
+	const fileList5 = ref([])
+	const mediaList = ref([]) // 媒体文件列表
+
+	onLoad((options) => {
+
+		console.log("接收到的参数:", options)
+		//获取项目状态
+		if (options.projectId) {
+			getProjectStatus(options.projectId)
+		}
+		formData.projectId = options.projectId
+		formData.projectGrade = sys_sort_grade.value[2].value
+	})
+
+	async function getProjectStatus(projectId) {
+		try {
+			const res = await getTaskByDictType(projectId)
+			console.log("项目状态数据:", res)
+
+			if (res && res.data) {
+
+				// 根据返回的数据设置默认工作类型
+				// 找到当前活跃的任务类型(active字段对应的索引)
+				const activeIndex = res.data.active || 0
+				const taskList = res.data.taskList || []
+
+				if (taskList.length > 0 && taskList[activeIndex]) {
+					const activeTaskType = taskList[activeIndex].dictValue
+					console.log("设置默认工作类型:", activeTaskType)
+					formData.projectType = activeTaskType
+				}
+			}
+		} catch (error) {
+			console.error("获取项目状态失败:", error)
+			uni.showToast({
+				title: '获取项目状态失败',
+				icon: 'none'
+			})
+		}
+	}
+
+	// 不要再写 const sysWorkType = [...] 这些静态数据! 
+
+	// 获取今天的开始和结束时间
+	const getTodayTimeRange = () => {
+		const today = new Date()
+		const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0) // 00:00
+		const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59) // 23:59
+
+		return [
+			startTime.toISOString().slice(0, 19).replace('T', ' '), // 格式化为 YYYY-MM-DD HH:mm:ss
+			endTime.toISOString().slice(0, 19).replace('T', ' ')
+		]
+	}
+
+	const formData = reactive({
+		projectName: '',
+		projectType: '',
+		collaborator: '',
+		// projectTime: getTodayTimeRange(), // 默认设置为今天的工作时间
+		projectGrade: '',
+		content: '',
+		remark: '',
+		accessory: '' // 改为字符串类型
+	})
+
+	const rules = {
+		projectName: {
+			required: true,
+			errorMessage: '请输入任务主题',
+			validateFunction: function(rule, value, data, callback) {
+				if (!value || value.trim() === '') {
+					callback('请输入任务主题')
+				}
+				return true
+			}
+		},
+		projectType: {
+			required: true,
+			errorMessage: '请选择工作类型',
+			validateFunction: function(rule, value, data, callback) {
+				if (!value || value === '') {
+					callback('请选择工作类型')
+				}
+				return true
+			}
+		},
+		collaborator: {
+			required: true,
+			errorMessage: '请输入协作人员',
+			validateFunction: function(rule, value, data, callback) {
+				if (!value || value.trim() === '') {
+					callback('请输入协作人员')
+				}
+				return true
+			}
+		},
+		projectGrade: {
+			required: true,
+			errorMessage: '请选择优先级',
+			validateFunction: function(rule, value, data, callback) {
+				if (!value || value === '') {
+					callback('请选择优先级')
+				}
+				return true
+			}
+		}
+	}
+
+	const buttonLoading = ref(false)
+	const formRef = ref(null)
+
+	// 手动验证表单数据
+	const validateFormData = () => {
+		const errors = []
+
+		// 验证任务主题
+		if (!formData.projectName || formData.projectName.trim() === '') {
+			errors.push('请输入任务主题')
+		}
+
+		// 验证工作类型
+		if (!formData.projectType || formData.projectType === '') {
+			errors.push('请选择工作类型')
+		}
+
+		// 验证协作人员
+		if (!formData.collaborator || formData.collaborator.trim() === '') {
+			errors.push('请输入协作人员')
+		}
+
+		// 验证优先级
+		if (!formData.projectGrade || formData.projectGrade === '') {
+			errors.push('请选择优先级')
+		}
+
+		return errors
+	}
+
+	const submitTaskForm = async () => {
+		try {
+			buttonLoading.value = true
+
+			// 手动验证表单数据
+			const validationErrors = validateFormData()
+			if (validationErrors.length > 0) {
+				uni.showToast({
+					title: validationErrors[0],
+					icon: 'none'
+				})
+				return
+			}
+
+			// 表单验证
+			try {
+				await formRef.value.validate()
+			} catch (validateError) {
+				// 验证失败
+				console.log('表单验证失败:', validateError)
+				uni.showToast({
+					title: '请完善必填项信息',
+					icon: 'none'
+				})
+				return
+			}
+
+			console.log('表单数据:', formData)
+			console.log('媒体文件:', mediaList.value)
+
+			// 准备提交的数据
+			const submitData = {
+				...formData,
+				accessory: formData.accessory || ''
+			}
+
+			console.log('最终提交的数据:', submitData)
+			console.log('accessory字段:', submitData.accessory)
+
+			// 这里可以调用addTask API提交数据
+			const result = await addTask(submitData)
+
+			uni.showToast({
+				title: '提交成功',
+				icon: 'success'
+			})
+
+			// 提交成功后可以返回上一页
+			setTimeout(() => {
+				uni.navigateBack()
+			}, 1500)
+
+		} catch (err) {
+			console.log('提交失败:', err)
+			uni.showToast({
+				title: err.message || '提交失败',
+				icon: 'none'
+			})
+		} finally {
+			buttonLoading.value = false
+		}
+	}
+
+	// 处理媒体文件变化
+	const handleMediaChange = (files) => {
+		console.log('媒体文件变化:', files)
+		mediaList.value = files
+
+		const backendUrls = files.map(item => {
+			if (item.backendData && item.backendData.fileName) {
+				return item.backendData.fileName
+			}
+			return item.url
+		}).filter(url => url !== '')
+
+		formData.accessory = backendUrls.join(',')
+
+		if (files.length > 0) {
+			uni.showToast({
+				title: `已选择 ${files.length} 个文件`,
+				icon: 'success',
+				duration: 2000
+			})
+		}
+
+		console.log('当前accessory数据:', formData.accessory)
+	}
+
+	// 处理后端数据事件
+	const handleBackendData = (backendDataList) => {
+		console.log('后端数据:', backendDataList)
+
+		// 提取后端返回的URL
+		const backendUrls = backendDataList.map(item => {
+			if (item && item.fileName) {
+				return item.fileName
+			}
+			return ''
+		}).filter(url => url !== '')
+
+		if (backendUrls.length > 0) {
+			const currentAccessory = formData.accessory || ''
+
+			// 将新的URL添加到现有字符串中
+
+			formData.accessory = backendUrls.join(',')
+
+			console.log('新增后端URL:', backendUrls)
+			console.log('更新后的accessory:', formData.accessory)
+		}
+	}
+
+	// 文件上传相关方法
+	const select = (e) => {
+		console.log('选择文件:', e)
+	}
+
+	const progress = (e) => {
+		console.log('上传进度:', e)
+	}
+
+	const success = (e) => {
+		console.log('上传成功:', e)
+	}
+
+	const fail = (e) => {
+		console.log('上传失败:', e)
+	}
+</script>
+
+<style scoped>
+	.upload-container {
+		padding: 20rpx;
+		background-color: #f5f5f5;
+		min-height: 100vh;
+	}
+
+	/* 表单样式优化 */
+	:deep(.uni-forms) {
+		background: white;
+		border-radius: 12rpx;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.header {
+		text-align: center;
+		margin-bottom: 40rpx;
+	}
+
+	.title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333;
+	}
+
+	.section-title {
+		font-size: 28rpx;
+		color: #666;
+		margin-bottom: 20rpx;
+		display: block;
+	}
+
+	.type-selector {
+		background: white;
+		padding: 30rpx;
+		border-radius: 12rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.type-buttons {
+		display: flex;
+		gap: 20rpx;
+	}
+
+	.type-btn {
+		flex: 1;
+		height: 80rpx;
+		border: 2rpx solid #e0e0e0;
+		background: white;
+		color: #666;
+		border-radius: 8rpx;
+		font-size: 28rpx;
+		transition: all 0.3s;
+	}
+
+	.type-btn.active {
+		background: #007aff;
+		color: white;
+		border-color: #007aff;
+	}
+
+	.upload-options {
+		background: white;
+		padding: 30rpx;
+		border-radius: 12rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.option-buttons {
+		display: flex;
+		gap: 20rpx;
+	}
+
+	.option-btn {
+		flex: 1;
+		height: 120rpx;
+		background: #f8f9fa;
+		border: 2rpx solid #e0e0e0;
+		border-radius: 12rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.3s;
+	}
+
+	.option-btn:active {
+		background: #e9ecef;
+		transform: scale(0.98);
+	}
+
+	.btn-icon {
+		font-size: 40rpx;
+		margin-bottom: 10rpx;
+	}
+
+	.btn-text {
+		font-size: 24rpx;
+		color: #666;
+	}
+
+	.preview-section {
+		background: white;
+		padding: 30rpx;
+		border-radius: 12rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.preview-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20rpx;
+	}
+
+	.preview-item {
+		position: relative;
+		width: 200rpx;
+		height: 200rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+		background: #f8f9fa;
+	}
+
+	.preview-image,
+	.preview-video {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.delete-btn {
+		position: absolute;
+		top: 10rpx;
+		right: 10rpx;
+		width: 40rpx;
+		height: 40rpx;
+		background: rgba(0, 0, 0, 0.6);
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.delete-icon {
+		color: white;
+		font-size: 24rpx;
+		font-weight: bold;
+	}
+
+	.file-info {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.7);
+		padding: 10rpx;
+	}
+
+	.file-name {
+		color: white;
+		font-size: 20rpx;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.file-size {
+		color: #ccc;
+		font-size: 18rpx;
+		display: block;
+	}
+
+	.upload-section {
+		background: white;
+		padding: 30rpx;
+		border-radius: 12rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.upload-btn {
+		width: 100%;
+		height: 80rpx;
+		background: #007aff;
+		color: white;
+		border-radius: 8rpx;
+		font-size: 28rpx;
+		border: none;
+	}
+
+	.upload-btn:disabled {
+		background: #ccc;
+	}
+
+	.progress-section {
+		background: white;
+		padding: 30rpx;
+		border-radius: 12rpx;
+	}
+
+	.progress-bar {
+		width: 100%;
+		height: 20rpx;
+		background: #e0e0e0;
+		border-radius: 10rpx;
+		overflow: hidden;
+		margin-bottom: 20rpx;
+	}
+
+	.progress-fill {
+		height: 100%;
+		background: #007aff;
+		transition: width 0.3s;
+	}
+
+	.progress-text {
+		text-align: center;
+		font-size: 24rpx;
+		color: #666;
+	}
+
+	/* 必填项红色星号样式 */
+	:deep(.uni-forms-item__label) {
+		position: relative;
+	}
+
+	:deep(.uni-forms-item__label.required::before) {
+		content: '*';
+		color: #ff0000;
+		margin-right: 4rpx;
+	}
+
+	/* 调整表单标签宽度,防止文字换行 */
+	:deep(.uni-forms-item) {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	:deep(.uni-forms-item__label) {
+		min-width: 180rpx !important;
+		width: 180rpx !important;
+		flex-shrink: 0;
+		white-space: nowrap;
+		text-align: left;
+		padding-right: 20rpx;
+	}
+
+	:deep(.uni-forms-item__content) {
+		flex: 1;
+		min-width: 0;
+	}
+</style>