<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-input">{{pageForm.subName || "--"}}</view> </view> <!-- 主体单位 --> <view class="card-item"> <view class="card-item-name">主体单位</view> <view class="card-item-input">{{pageForm.UnitName || "--"}}</view> </view> <!-- 录入周期 --> <view class="card-item"> <view class="card-item-name">录入周期</view> <view class="card-item-input">{{editTime || "--"}}</view> </view> <!-- 当前阶段 --> <!-- <view class="card-item"> <view class="card-item-name">当前阶段</view> <view class="card-item-name flex" @click="subPlanOpen()"> <view v-if="pageForm.subPlanId" class="card-item-input">{{pageForm.subPlanId}}</view> <view v-else class="remind-text">请选择阶段</view> <u-icon name="arrow-right" color="#343437" size="16" customStyle="margin:auto 0 auto 10rpx"></u-icon> </view> </view> --> <!-- 当前阶段内容 --> <!-- <view class="card-item"> <view class="card-item-name">当前阶段内容</view> </view> <view class="card-item"> <u--textarea class="card-item-textarea" v-model="pageForm.content" disabled></u--textarea> </view> --> <!-- 项目进展情况 --> <view class="card-item"> <view class="card-item-name">项目进展情况<span class="must-input">*</span></view> </view> <view class="card-item"> <u--textarea class="card-item-textarea" v-model="pageForm.content" :disabled="banSubmit"></u--textarea> </view> <!-- 项目延期原因 --> <view class="card-item"> <view class="card-item-name">项目延期原因</view> </view> <view class="card-item"> <u--textarea class="card-item-textarea" v-model="pageForm.reason" :disabled="banSubmit"></u--textarea> </view> <!-- 进度 --> <view class="card-item"> <view class="card-item-name">进度<span class="must-input">*</span></view> <view class="card-item-name flex"> <input type="number" v-model="pageForm.numBl" class="card-item-input" placeholder="填写进度" placeholder-style="color: #D8D8D8" maxlength="20" :disabled="banSubmit" /> <view class="card-item-unit">%</view> </view> </view> <!-- 附件(照片) --> <view class="card-item flex-align-start"> <view class="card-item-name" style="min-width: 156rpx;">图片附件</view> <u-upload :fileList="uploadListPhoto" @afterRead="afterReadPhoto" @delete="delFilePhoto" 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" @afterRead="afterReadVideo" @delete="delFileVideo" @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.fileName}} </view> </view> </view> </view> <view class="confirm-btn" :class="banSubmit?'ban-submit':''" @click="confirmParams()">确定</view> </view> <!-- 当前阶段 --> <u-picker :show="subPlanShow" :columns="subPlanList" @confirm="subPlanClose" @cancel="subPlanClose" @close="subPlanClose" closeOnClickOverlay></u-picker> </view> </template> <script setup> import config from '@/config.js' import { ref } from 'vue' import { onLoad } from "@dcloudio/uni-app" import { uploadFilePromise } from "@/utils/request_new.js" import { getWeeklyById, saveWeekly } from "@/api/work/weeklyAndMonthly.js" let editTime = ref(null) let pageForm = ref({ year: null, beginDate: null, endDate: null, subId: null, subName: null, UnitName: null, subPlanId: null, content: null, reason: null, numBl: null, listFile: [], }) let fileTypeCode = { 0: "dir", 1: "txt", 2: "doc", 3: "docx", 4: "xls", 5: "xlsx", 6: "ppt", 7: "pptx", 8: "pdf", 9: "swf", 101: "jpg", 102: "image", 103: "jpeg", 104: "bmp", 105: "gif", 201: "avi", 202: "wmv", 202: "flv", 203: "video" } // 当前阶段 let subPlanShow = ref(false) let subPlanList = ref([]) let subPlanContentList = ref([]) function subPlanOpen() { subPlanShow.value = true } function subPlanClose(e) { if (e) { pageForm.value.subPlanId = e.value[0] pageForm.value.content = subPlanContentList.value.find(item => item.time === e.value[0]).content } subPlanShow.value = false } function parseDate(date, year) { pageForm.value.year = year; const index = date.indexOf("至") pageForm.value.beginDate = date.substring(0, index) pageForm.value.endDate = date.substring(index + 1) } // 获取数据 function getWeeklyDetail(sendParams) { let params = { subId: sendParams.subId, startDate: sendParams.startDate, year: sendParams.year } getWeeklyById(params).then(res => { pageForm.value.subName = res.data.subName; pageForm.value.UnitName = res.data.UnitName; pageForm.value.subId = res.data.subId; pageForm.value.numBl = res.data.weekInfo.numBl; pageForm.value.content = res.data.weekInfo.content; pageForm.value.reason = res.data.weekInfo.reason; // combinePlanList(res.data.subPlanList) // showHavingData(sendParams) conbineFileList(res.data.listFile) }) } function combinePlanList(list) { let subPlanListItem = [] let subPlanContentListTemp = [] for (let i in list) { let showName = `${list[i].beginDate}至${list[i].endDate}`; let content = list[i].content; let id = list[i].id; subPlanListItem.push(showName) subPlanContentListTemp.push({ id, content, time: showName, }) } subPlanList.value.push(subPlanListItem) subPlanContentList.value = subPlanContentListTemp } // 展示已有数据 function showHavingData(data) { // pageForm.value.numBl = data.num_bl if (data.sub_plan_id) { let statuItem = subPlanContentList.value.find(item => item.id === data.sub_plan_id) if (statuItem) { pageForm.value.content = statuItem.content; pageForm.value.subPlanId = statuItem.time } } } // 组合附件数据 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)); // 上传数据 const dataList = list.map(item => { let orginal = { ...item } return { id: orginal.id, fileName: orginal.fileName, fileType: orginal.fileType, fileAddre: orginal.fileAddre } }) pageForm.value.listFile = dataList // 备份初始数据 listFileOrginal = dataList } // ====================附件上传 let listFileOrginal = [] //原始数据--备份比较用 let uploadListPhoto = ref([]) //上传列表--图片 let uploadListVideo = ref([]) //上传列表--视频 let uploadListFile = ref([]) //上传列表--文件 // 上传文件操作 async function afterReadPhoto(event) { if (banSubmit.value) return let lists = [].concat(event.file); //文件内容 let fileListLen = uploadListPhoto.value.length; //数量 lists.map((item) => { uploadListPhoto.value.push({ ...item, status: 'uploading', message: '上传中' }) }) for (let i = 0; i < lists.length; i++) { const resultObj = await uploadFilePromise(lists[i].url); // console.log(resultObj); let fileItem = { fileName: resultObj.data.resultList[0].name, fileType: resultObj.data.resultList[0].ftype, fileAddre: resultObj.data.resultList[0].id } pageForm.value.listFile.push(fileItem) // 上传地址 const serverAddress = uni.getStorageSync("serverAddress"); const baseUrlIp = serverAddress ? serverAddress : config.baseUrl; const preViewUrl = baseUrlIp + "/projects//static/file/"; // =================取消上传中状态 // 文件 let item = uploadListPhoto.value[fileListLen] // 文件类型 let type = fileTypeCode[resultObj.data.resultList[0].ftype] uploadListPhoto.value.splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: preViewUrl + resultObj.data.resultList[0].id + "/showfile", id: resultObj.data.resultList[0].id, preView: preViewUrl + resultObj.data.resultList[0].id + "/showfile", // type })) fileListLen++ } } // 删除文件 function delFilePhoto(event) { if (banSubmit.value) return // 从渲染列表里移除 uploadListPhoto.value.splice(event.index, 1); // 从文件里删除或标记 let delFileIndex = pageForm.value.listFile.findIndex(item => item.fileAddre === event.file.fileAddre || item .fileAddre === event.file.id); let delFile = pageForm.value.listFile[delFileIndex]; // 是否是已经上传的文件 if (delFile && delFile.id) { // 已保存 delFile.logicDeleteFlag = 1 } else { pageForm.value.listFile.splice(delFileIndex, 1) } } function waterMarkShow(event) { return uni.navigateTo({ url: `/pages/weekly/media/index?url=${event.url}&time=${event.createTime}` }) } // 上传文件操作--视频 async function afterReadVideo(event) { if (banSubmit.value) return let lists = [].concat(event.file); //文件内容 let fileListLen = uploadListVideo.value.length; //数量 lists.map((item) => { uploadListVideo.value.push({ ...item, status: 'uploading', message: '上传中' }) }) for (let i = 0; i < lists.length; i++) { const resultObj = await uploadFilePromise(lists[i].url); let fileItem = { fileName: resultObj.data.resultList[0].name, fileType: resultObj.data.resultList[0].ftype, fileAddre: resultObj.data.resultList[0].id } pageForm.value.listFile.push(fileItem) // 上传地址 const serverAddress = uni.getStorageSync("serverAddress"); const baseUrlIp = serverAddress ? serverAddress : config.baseUrl; const preViewUrl = baseUrlIp + "/projects//static/file/"; // =================取消上传中状态 // 文件 let item = uploadListVideo.value[fileListLen] // 文件类型 let type = fileTypeCode[resultObj.data.resultList[0].ftype] uploadListVideo.value.splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: preViewUrl + resultObj.data.resultList[0].id + "/showfile", id: resultObj.data.resultList[0].id, preView: preViewUrl + resultObj.data.resultList[0].id + "/showfile", // type })) fileListLen++ } } // 删除文件--视频 function delFileVideo(event) { if (banSubmit.value) return uploadListVideo.value.splice(event.index, 1); // 从文件里删除或标记 let delFileIndex = pageForm.value.listFile.findIndex(item => item.fileAddre === event.file.fileAddre || item .fileAddre === event.file.id); let delFile = pageForm.value.listFile[delFileIndex]; // 是否是已经上传的文件 if (delFile && delFile.id) { // 已保存 delFile.logicDeleteFlag = 1 } else { pageForm.value.listFile.splice(delFileIndex, 1) } } // 播放文件--视频 function videoClick(event) { showFile(event.fileType, event.url) } // 文件预览 function showFile(type, filePath) { uni.navigateTo({ url: `/pages/projectInfo/media/index?type=${type}&filePath=${filePath}` }) } //====================提交数据 let banSubmit = ref(false); let isSubmit = ref(false); // 提交操作 function confirmParams() { // 禁止提交 if (banSubmit.value || isSubmit.value) return; // 检查必填项 if (((pageForm.value.content ?? '') === '') || ((pageForm.value.numBl ?? '') === '')) { return uni.showModal({ title: '请检查', content: '进度与项目进展情况为必填项。', showCancel: false }) } // 确认提交 uni.showModal({ title: "保存确认", content: "确定要保存该周报录入吗?", success: function(res) { if (res.confirm) { let params = Object.assign({}, pageForm.value) delete(params.UnitName) delete(params.subName) let subPlanIdItem = subPlanContentList.value.find(item => item.time === params.subPlanId) params.subPlanId = subPlanIdItem ? subPlanIdItem.id : null isSubmit.value = true; saveWeekly(params).then(res => { if (res.code === 200) { isSubmit.value = false; banSubmit.value = true; uni.showToast({ title: "保存成功", icon: "success", duration: 2000 }) } }).catch(() => { isSubmit.value = false; uni.showToast({ title: "保存失败", icon: "error", duration: 2000 }) }) } else if (res.cancel) { uni.showToast({ title: "取消保存", icon: "none", duration: 2000, }) } }, }) } onLoad((options) => { editTime.value = options.kj_month parseDate(options.kj_month, options.year) getWeeklyDetail(options) }) </script> <style lang="scss" scoped> .must-input { color: #f00; } </style>