OfficeApp/subpkg/townTask/marketTask10.vue
2023-10-25 15:15:08 +08:00

337 lines
11 KiB
Vue

<template>
<view class="task_page">
<u-skeleton v-if="skeleton" :class="{'loading': skeleton}" :animate="true" title rows="5" rows-width="92%"
rowsHeight="56">
</u-skeleton>
<block v-else>
<view class="card">
<view class="c_title">{{`任务名称: ${taskInfo.title||''}`}}</view>
<view>{{taskInfo.content||''}}</view>
</view>
<view class="card" v-if="taskInfo.approve_status==3">
<view class="c_title" style="color: #FF7C32;">驳回提示</view>
<u-line style="margin: 14rpx 0;"></u-line>
<view class="text" style="color: #FF7C32;">{{taskInfo.deny_notes}}</view>
<button v-if="other.is_commit==1" class="btn" @click="toUpdate">去修改</button>
</view>
<view class="card">
<view class="c_title">任务完成证明</view>
<view class="file">
<view class="file_item" v-for="(item, index) in imgList" :key="'file'+index">
<image class="image" :src="item" @click="priview(index)"></image>
<image v-if="taskInfo.status==2 && other.is_commit==0" class="del" src="/static/icons/delete.png" @click.stop="deleteFile(index)">
</image>
</view>
<view v-if="taskInfo.status==2 && other.is_commit==0" 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>
<view class="card" style="margin-bottom: 160rpx;">
<view class="c_title">补充说明</view>
<u--textarea :disabled="taskInfo.status!=2 || other.is_commit==1" v-model="remark" placeholder="请输入内容"
placeholderStyle="font-size: 22rpx;" count maxlength="500" autoHeight
style="font-size: 28rpx;background-color: #eee;min-height: 100px;padding-bottom: 50rpx;"></u--textarea>
</view>
<mybtn v-if="taskInfo.status==2&&other.is_commit==0" text="确认提交" @click="$u.throttle(submit, 1500)"></mybtn>
<mybtn v-else-if="taskInfo.status==3" text="已完成" :my_btn_disabled="true" @click="showToast('任务已完成!')"></mybtn>
<mybtn v-else-if="taskInfo.status==5" text="已关闭" :my_btn_disabled="true" @click="showToast('任务已关闭!')"></mybtn>
<mybtn v-else-if="taskInfo.approve_status==3" text="已驳回,请重新提交" @click="toUpdate"></mybtn>
<mybtn v-else text="已提交,请等待审核" :my_btn_disabled="true" @click="showToast('请耐心等待审核结果')"></mybtn>
</block>
</view>
</template>
<script>
import {
upLoadImage,
} from "@/api/file.js";
import { Toast } from "../../libs/uniApi";
import { marketTask10Detail, marketTask10Commit } from "@/api/task.js"
export default {
data() {
return {
skeleton: true,
other: {
annex: [], // 图片列表
is_commit: 0, // 是否提交
note: "", // 详情描述
video_annex: [] // 视频列表
},
taskInfo: {
id: '',
title: '',
content: '',
extend: {},
status: 0
},
sign_in_table: '',
remark: '',
imgList: [], // 上传的图片列表
stage: 1, // 任务进行的状态
stage1: {},
stage2: {},
stage3: {},
stage4: {},
}
},
onLoad(options) {
options.task_id ? this.taskInfo.id = options.task_id : null;
options.stage ? this.stage = +options.stage : null;
this.initTask();
},
onShow() {},
computed: {
// 占位长度
placeholderLength() {
if (this.taskInfo.status != 2||this.other.is_commit==1) return this.imgList.length % 3 == 0 ? 0 : 3 - this.imgList.length % 3;
return (this.imgList.length + 1) % 3 == 0 ? 0 : 3 - (this.imgList.length + 1) % 3;
},
},
methods: {
async initTask() {
this.skeleton = true;
let res = await marketTask10Detail({
id: this.taskInfo.id
});
// approve_status 状态 0待审核,1审核中,2审核通过,3审核不通过,4撤销审核
this.taskInfo = res.data;
if(!this.taskInfo.approve_status)this.taskInfo.approve_status=0;
if(this.taskInfo?.extend?.stage){
// 判断该任务是否提交过
if(this.taskInfo.extend.stage4?.is_commit==1)this.other.is_commit = 1;
else if(this.taskInfo.extend.stage3?.is_commit==1)this.other.is_commit = 1;
else if(this.taskInfo.extend.stage2?.is_commit==1)this.other.is_commit = 1;
else if(this.taskInfo.extend.stage1?.is_commit==1)this.other.is_commit = 1;
else this.other.is_commit = 0;
let task;
switch(+this.taskInfo?.extend?.stage){
case 1: task = this.taskInfo.extend.stage1;break;
case 2: task = this.taskInfo.extend.stage2;break;
case 3: task = this.taskInfo.extend.stage3;break;
case 4: task = this.taskInfo.extend.stage4;break;
}
this.imgList = task?.file||[];
this.remark = task?.remark;
}
// this.sign_in_table = this.taskInfo?.extend?.town_task_type_4?.sign_in_table;
// this.remark = this.taskInfo?.extend?.town_task_type_4?.remark;
// this.imgList = JSON.parse(JSON.stringify(this.taskInfo?.extend?.town_task_type_4?.imgList || []));
this.skeleton = false;
},
// 被驳回时点击重新修改
toUpdate() {
this.other.is_commit = 0;
},
// 判断内容是否更改, 返回true代表更改
isReject(){
if (this.taskInfo.approve_status == 3) { // 被驳回,重新提交需要修改内容后方可提交
let other = {
file: this.imgList,
remark: this.remark
}
let flag = true;
if(JSON.stringify(other)==JSON.stringify({
file: this.taskInfo.extend.file,
remark: this.taskInfo.extend.remark
})) flag = false;
if (!flag) {
Toast('未检测到您的修改,请修改后提交')
}
return flag;
}
else return true;
},
// 提交
async submit() {
if (this.imgList.length < 1) return Toast('证明数量不得小于1');
if(!this.isReject()) return;
let that = this;
switch (that.stage) {
case 1:
that.stage1 = { file: that.imgList, remark: that.remark };
break;
case 2:
that.stage2 = { file: that.imgList, remark: that.remark };
break;
case 3:
that.stage3 = { file: that.imgList, remark: that.remark };
break;
case 4:
that.stage4 = { file: that.imgList, remark: that.remark };
break;
}
await marketTask10Commit({
id: this.taskInfo.id,
stage: this.stage,
stage1: this.stage1,
stage2: this.stage2,
stage3: this.stage3,
stage4: this.stage4,
});
this.other.is_commit = 1;
this.taskInfo.approve_status = 1;
Toast('提交成功');
this.$u.sleep(500).then(()=>{
uni.navigateBack()
})
},
showToast(str) {
Toast(str)
},
chooseFile() {
uni.chooseImage({
count: 9,
sizeType: ['compressed'],
success: async (res) => {
for (let item of res.tempFiles) {
let ul = await upLoadImage({
filePath: item.path,
name: 'file'
});
this.imgList.push(ul.data.uri);
}
}
});
},
priview(index) {
uni.previewImage({
urls: this.imgList,
current: index,
longPressActions: {
itemList: ['删除'],
itemColor: '#ff0000',
success(e) {
if (e.tapIndex == 0) this.deleteFile(e.index);
}
},
})
},
chooseOneFile() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
success: async (res) => {
let ul = await upLoadImage({
filePath: res.tempFilePaths[0],
name: 'file'
});
this.sign_in_table = ul.data.uri;
}
});
},
priviewOne(index) {
uni.previewImage({
urls: [this.sign_in_table],
current: index,
longPressActions: {
itemList: ['删除'],
itemColor: '#ff0000',
success(e) {
if (e.tapIndex == 0) this.sign_in_table = '';
}
},
})
},
// 删除已上传文件
deleteFile(index) {
this.imgList.splice(index, 1);
},
},
}
</script>
<style lang="scss">
.task_page {
padding-top: 30rpx;
.card {
margin: 0 auto;
margin-bottom: 28rpx;
width: 694rpx;
background-color: #fff;
border-radius: 26rpx;
padding: 28rpx;
.c_title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 20rpx;
}
.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;
}
}
}
.loading {
padding: 28rpx;
}
}
</style>