OfficeApp/subpkg/otherTask/otherTask.vue
2023-09-16 17:47:48 +08:00

395 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view style="padding-top: 28rpx;padding-bottom: 160rpx;">
<view class="card">
<view class="title">任务名称: {{task_info.title}}</view>
<u-line style="margin: 14rpx 0;"></u-line>
<!-- <view class="text">阶段类型: 单次</view> -->
<view class="text" style="color: #FF7C32;">任务金额: {{task_info.money}}</view>
</view>
<view class="card">
<view class="title">任务描述</view>
<u-line style="margin: 14rpx 0;"></u-line>
<view class="text">{{task_info.content}}</view>
</view>
<view class="card" v-if="approve_status==3">
<view class="title" style="color: #FF7C32;">驳回提示</view>
<u-line style="margin: 14rpx 0;"></u-line>
<view class="text" style="color: #FF7C32;">{{deny_notes}}</view>
<button v-if="other.is_commit==1" class="btn" @click="toUpdate">去修改</button>
</view>
<view class="card">
<view class="title">详情描述</view>
<u-line style="margin: 14rpx 0;"></u-line>
<u--textarea :disabled="other.is_commit==1" v-model="note" placeholder="请输入内容"
placeholderStyle="font-size: 22rpx;" style="font-size: 28rpx;background-color: #eee;min-height: 100px;"
autoHeight maxlength="-1"></u--textarea>
<view class="title" style="margin-top: 16rpx;">添加附件</view>
<u-tabs :current="current" :list="list1" @click="clickTabs" lineColor='#0122c7' :itemStyle="{height: '80rpx'}"
lineWidth='20' inactiveStyle='color:#666' activeStyle="color:#0122c7"
style="margin-bottom: 16rpx;font-size: 28rpx;"></u-tabs>
<!-- 图片 -->
<view class="file" v-show="current==0">
<view class="file_item" v-for="(item, index) in fileList" :key="'file'+index">
<image class="image" :src="item" @click="priview(index)"></image>
<image v-if="!other.is_commit" class="del" src="/static/icons/delete.png" @click.stop="deleteFile(index)">
</image>
</view>
<view v-if="!other.is_commit" class="file_btn" @click="chooseFile">
<image src="/static/icons/plus.png"></image>
</view>
<view class="file_empty" v-for="k in placeholderLength" :key="'empty'+k"></view>
</view>
<!-- 视频 -->
<view class="file" v-show="current==1">
<view class="file_item" v-for="(item, index) in videoList" :key="'file_v'+index">
<image class="image" src="/static/img/task/video_bg.png" @click="videoshow(item)"></image>
<image v-if="!other.is_commit" class="del" src="/static/icons/delete.png"
@click.stop="deleteFile(index, 'video')">
</image>
</view>
<view v-if="!other.is_commit" class="file_btn" @click="chooseVideo">
<image src="/static/icons/plus.png"></image>
</view>
<view class="file_empty" v-for="k in placeholderLengthVideo" :key="'empty_v'+k"></view>
</view>
</view>
<!-- <mybtn text="确认提交" @click="$u.throttle(submit, 1500)"></mybtn> -->
<mybtn v-if="!other.is_commit" text="确认提交" @click="$u.throttle(submit, 1500)"></mybtn>
<mybtn v-else-if="task_info.status==3" text="已完成" :my_btn_disabled="true" @click="showToast('任务已完成')"></mybtn>
<mybtn v-else-if="task_info.status==5" text="已关闭" :my_btn_disabled="true" @click="showToast('任务已关闭!')"></mybtn>
<mybtn v-else-if="approve_status==3" text="已驳回,请重新提交" @click="toUpdate"></mybtn>
<mybtn v-else text="已提交,请等待审核" :my_btn_disabled="true" @click="showToast('请耐心等待审核结果')"></mybtn>
<!--视频预览弹窗-->
<view v-if="show_video" class="video-count">
<video id="myVideo" class="videoLink" autoplay loop muted show-mute-btn enable-play-gesture
vslide-gesture-in-fullscreen :src="video_src"></video>
</view>
<view class='mask' catchtouchmove="true" :hidden='show_video==false' @tap="show_video=false"></view>
</view>
</template>
<script>
import {
upLoadImage,
VIDEO_URL
} from "@/api/file.js"
import {
taskOtherTaskDetail,
taskOtherTaskCommit
} from "@/api/task.js"
import { Toast } from "../../libs/uniApi";
export default {
data() {
return {
task_id: -1,
task_info: {},
approve_status: 0, // 审核状态: 1待审核2已通过3已驳回
deny_notes: '', // 驳回提示
other: {
annex: [], // 图片列表
is_commit: 0, // 是否提交
note: "", // 详情描述
video_annex: [] // 视频列表
},
list1: [{
name: '图片',
}, {
name: '视频',
}],
current: 0,
note: '',
fileList: [],
videoList: [],
video_src: '',
show_video: false
};
},
onLoad(options) {
this.task_id = options.task_id;
this.initDetail();
},
computed: {
// 占位长度
placeholderLength() {
if (this.other.is_commit == 1) return this.fileList.length % 3 == 0 ? 0 : 3 - this.fileList.length % 3;
return (this.fileList.length + 1) % 3 == 0 ? 0 : 3 - (this.fileList.length + 1) % 3;
},
placeholderLengthVideo() {
if (this.other.is_commit == 1) return this.videoList.length % 3 == 0 ? 0 : 3 - this.videoList.length % 3;
return (this.videoList.length + 1) % 3 == 0 ? 0 : 3 - (this.videoList.length + 1) % 3;
},
},
methods: {
// 初始化
initDetail() {
taskOtherTaskDetail({ id: this.task_id }).then((res) => {
this.task_info = res.data;
this.other = JSON.parse(JSON.stringify(res.data?.extend?.other)); // 深拷贝
this.approve_status = res.data?.approve_status;
this.deny_notes = res.data?.deny_notes;
res.data?.extend?.other?.note ? this.note = res.data?.extend?.other?.note : null;
res.data?.extend?.other?.annex ? this.fileList = res.data?.extend?.other?.annex : null;
res.data?.extend?.other?.video_annex ? this.videoList = res.data?.extend?.other?.video_annex : null;
// this.other.is_commit = 0;
})
},
// 被驳回时点击重新修改
toUpdate() {
this.other.is_commit = 0;
},
// 判断内容是否更改, 返回true代表更改
isReject(){
if (this.approve_status == 3) { // 被驳回,重新提交需要修改内容后方可提交
let other = {
note: this.note,
annex: this.fileList,
video_annex: this.videoList
}
let flag = true;
if(JSON.stringify(other)==JSON.stringify({
note: this.other.note,
annex: this.other.annex,
video_annex: this.other.video_annex
})) flag = false;
if (!flag) {
Toast('未检测到您的修改,请修改后提交')
}
return flag;
}
else return true;
},
// 提交
async submit() {
if(!this.isReject())return; // 判断是否进行更改
if (this.other.note.trim() == '') return Toast('详情描述不能为空');
await taskOtherTaskCommit({
id: this.task_id,
note: this.note,
annex: this.fileList,
video_annex: this.videoList
});
this.other.is_commit = 1;
this.approve_status = 1;
Toast('提交成功');
},
clickTabs(item) {
this.current = item.index;
},
showToast(str) {
Toast(str)
},
chooseFile() {
uni.chooseImage({
sizeType: ['compressed'],
success: async (res) => {
for (let item of res.tempFiles) {
let ul = await upLoadImage({
filePath: item.path,
name: 'file'
});
this.fileList.push(ul.data.uri);
}
}
});
},
chooseVideo() {
uni.chooseVideo({
sourceType: ['album', 'camera'], // 视频选择的来源,可以是相册或摄像头
maxDuration: 60, // 视频最大时长,单位秒
success: (res) => {
const video = res.tempFilePath;
let timer;
let title = '上传中';
timer = setInterval(() => {
uni.showLoading({
title: title
})
}, 1000)
// 上传视频文件
let uploadTask = uni.uploadFile({
url: VIDEO_URL,
filePath: video,
name: 'file',
header: {
token: this.$store.state.app.token
},
success: (uploadFileRes) => {
clearInterval(timer);
uni.hideLoading();
uploadFileRes.data = JSON.parse(uploadFileRes.data)
if (uploadFileRes.data.code == 1) {
this.videoList.push(uploadFileRes.data.data.uri)
} else Toast('网络错误')
},
fail: (err) => {
clearInterval(timer);
uni.hideLoading();
Toast('网络错误')
}
})
uploadTask.onProgressUpdate((fileRes) => {
title = `上传中...${fileRes.progress}%`;
})
},
fail() {
Toast('用户取消上传')
}
});
},
priview(index) {
uni.previewImage({
urls: this.fileList,
current: index,
longPressActions: {
itemList: ['删除'],
itemColor: '#ff0000',
success(e) {
if (e.tapIndex == 0) this.deleteFile(e.index);
}
},
})
},
/*查看视频*/
videoshow(src) {
this.video_src = src;
this.show_video = true;
this.$nextTick(() => {
this.videoContext = uni.createVideoContext('myVideo', this);
this.videoContext.play();
})
},
// 删除已上传文件
deleteFile(index, type = 'image') {
if (type == 'image') this.fileList.splice(index, 1);
else if (type == 'video') this.videoList.splice(index, 1);
},
navTo(url) {
if (url) {
uni.showLoading({
title: '加载中',
mask: true
});
uni.navigateTo({
url: url,
success() {
uni.hideLoading()
}
})
} else Toast('暂未开放')
},
}
}
</script>
<style lang="scss">
::v-deep .u-tabs__wrapper__nav__item__text {
font-size: 28rpx !important;
}
.video-count {
position: fixed;
width: 600rpx;
height: 500rpx;
top: 50%;
left: 50%;
margin-left: -300rpx;
margin-top: -250rpx;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
.videoLink {
width: 600rpx;
height: 500rpx;
}
}
.card {
margin: 0 auto;
margin-bottom: 28rpx;
width: 694rpx;
background: #FFFFFF;
border-radius: 14rpx;
padding: 28rpx;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.text {
line-height: 50rpx;
}
.btn {
background-color: $theme-oa-color;
color: #FFFFFF;
font-size: 28rpx;
height: 60rpx;
line-height: 60rpx;
margin-top: 16rpx;
}
.file {
display: flex;
justify-content: left;
flex-wrap: wrap;
&_item {
flex-shrink: 0;
width: 200rpx;
height: 200rpx;
margin: 0 auto;
margin-bottom: 16rpx;
border: 2px solid #ccc;
border-radius: 10rpx;
overflow: hidden;
position: relative;
.image {
width: 100%;
height: 100%;
}
.del {
position: absolute;
height: 40rpx;
width: 40rpx;
top: 10rpx;
right: 10rpx;
}
}
&_btn {
flex-shrink: 0;
width: 200rpx;
height: 200rpx;
margin: 0 auto;
margin-bottom: 16rpx;
border: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 10rpx;
image {
width: 100rpx;
height: 100rpx;
}
}
&_empty {
flex-shrink: 0;
width: 200rpx;
height: 200rpx;
margin: 0 auto;
margin-bottom: 16rpx;
border: 2px solid transparent;
}
}
}
</style>