394 lines
10 KiB
Vue
394 lines
10 KiB
Vue
<template>
|
||
<view class="task_details">
|
||
<view class="content_card">
|
||
<!-- 头部 -->
|
||
<view class="cont_header flex_a_c_j_sb">
|
||
<view class="task_name">{{ detail.title }}</view>
|
||
<view class="is_matter">{{ detail.priority_name }}</view>
|
||
</view>
|
||
<!-- 内容 -->
|
||
<view class="cont_details">
|
||
<text class="">任务人：{{ detail.director_name }}</text>
|
||
<text class="">协办人：{{ detail.assist_admin_names }}</text>
|
||
<text class="">发布人：{{ detail.admin_name }}</text>
|
||
<text class="">工作性质：{{ detail.is_bug }}</text>
|
||
<text class="">计划完成日期：{{ detail.end_time }}</text>
|
||
<text class="">任务状态：{{ detail.flow_name }}</text>
|
||
<text class="">任务验收截止时间：{{ detail.initial_end_time }}</text>
|
||
<text class="finish_time">初始完成日期：{{ detail.end_time }}</text>
|
||
<text class="finish_time">实际完成日期：{{ detail.over_time }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content_card">
|
||
<!-- 头部 -->
|
||
<view class="cont_header flex_a_c">任务描述</view>
|
||
<!-- 内容 -->
|
||
<view class="cont_details">
|
||
{{ detail.content}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content_card">
|
||
<!-- 头部 -->
|
||
<view class="cont_header flex_a_c">文件附件</view>
|
||
<!-- 内容 -->
|
||
<view class="cont_details">
|
||
<block v-for="(item, i) in fileArray" :key="i">
|
||
<view class="file flex_a_c_j_sb">
|
||
<view class="l_file">
|
||
<view class="file_name">{{ item.name }}</view>
|
||
<view class="file_size">{{ item.filesize | formatBytes }}</view>
|
||
<!-- <view class="upload_people">上传人：{{ item.admin_name }}</view> -->
|
||
</view>
|
||
<u-icon @click="delImg(i)" name="close-circle" color="#333333" size="28"></u-icon>
|
||
</view>
|
||
</block>
|
||
<view class="upload_box flex_a_c_j_sb" @click="seleckImage">
|
||
<view>
|
||
<view class="title">选择文件并上传</view>
|
||
<view class="text">
|
||
上传前，请规范命名，最大只能上传100M的文件<br />
|
||
超过请压缩成多个文件上传。
|
||
</view>
|
||
</view>
|
||
<u-icon name="plus-circle" color="#333333" size="28"></u-icon>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content_card">
|
||
<!-- 头部 -->
|
||
<view class="cont_header">
|
||
<view class="flex_a_c_j_sb">
|
||
<view class="approver">当前审批人：张三</view>
|
||
<view class="audit_store">审核状态：<text>已通过</text> </view>
|
||
</view>
|
||
<view class="make_copy">抄送人：李四</view>
|
||
</view>
|
||
<!-- 内容 -->
|
||
<view class="cont_details">
|
||
<view class="examine">审批流程</view>
|
||
<view class="flow_path">
|
||
<block v-if="flowNodes[0].user_id_info.length>0">
|
||
<block v-for="(item, i) in flowNodes[0].user_id_info">
|
||
<view class="flex_a_c">
|
||
<u-icon name="plus-circle" color="#34A853" size="20"></u-icon>
|
||
<view class="name">{{ item.name }}</view>
|
||
<view class="status_tag">创建</view>
|
||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
<view class="examine">审批记录</view>
|
||
<block v-if="flowNodes[0].check_list.length>0">
|
||
<block v-for="(item,i) in flowNodes[0].check_list" :key="i">
|
||
<view class="record flex">
|
||
<view class="circle"></view>
|
||
<text class="text">
|
||
<text>{{ item.check_time_str }}</text>
|
||
<text>{{ item.name }}</text>
|
||
2023-03-24 :09:40 张三 提交 了此申请。操作意见：
|
||
<text>{{ item.content }}</text>
|
||
</text>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="bott_btn flex_a_c">
|
||
<view class="icons flex_a_c">
|
||
<u-icon name="chat" size="28"></u-icon>
|
||
<u-icon name="order" size="28"></u-icon>
|
||
</view>
|
||
<view class="turn_down">驳回记录（{{detail.count_bohui > 0 ? detail.count_bohui:0 }}）</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { Toast } from '@/libs/uniApi.js'
|
||
import { oaUploads, uploads } from '@/api/upload'
|
||
import { getTaskDetailsAPI } from '@/api/oaApi.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
taskId: '',
|
||
attachment: [],
|
||
loading: false,
|
||
detail: {},
|
||
fileArray: [], // 附件
|
||
flowNodes: [{
|
||
check_list: [],
|
||
user_id_info: []
|
||
}] // 流程
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.taskId = e.id
|
||
this.getTaskDetails()
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
async getTaskDetails() {
|
||
const { detail, file_array, flow_nodes } = await getTaskDetailsAPI({ id: this.taskId })
|
||
this.detail = detail
|
||
this.fileArray = file_array
|
||
flow_nodes.length > 0 ? this.flowNodes = flow_nodes : ''
|
||
},
|
||
seleckImage(i) {
|
||
let that = this
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: function(res) {
|
||
that.loading = true
|
||
let objImg = {}
|
||
objImg.name = res.tempFiles[0].name
|
||
objImg.filesize = res.tempFiles[0].size
|
||
objImg.admin_name = '马开明'
|
||
oaUploads(res.tempFilePaths[0], 'img').then(res => {
|
||
that.fileArray.push(res)
|
||
that.loading = false
|
||
Toast('上传成功')
|
||
}).catch(err => {
|
||
Toast('上传失败')
|
||
that.loading = false
|
||
console.log('上传失败', err)
|
||
})
|
||
},
|
||
fail: function(err) {
|
||
Toast('添加失败')
|
||
console.log('失败', err)
|
||
}
|
||
});
|
||
},
|
||
delImg(i) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '删除图片',
|
||
content: '确定删除图片?',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
that.fileArray.splice(i, 1)
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
filters: {
|
||
// 数字转MB
|
||
formatBytes(bytes, decimals = 2) {
|
||
if (bytes === 0) return '0 MB';
|
||
const k = 1024;
|
||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.task_details {
|
||
position: relative;
|
||
padding: 26.32rpx 0 100rpx 0;
|
||
}
|
||
|
||
.content_card {
|
||
width: 695rpx;
|
||
margin: 0 auto;
|
||
margin-bottom: 24.56rpx;
|
||
padding: 0 28.07rpx;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
|
||
.cont_header {
|
||
padding: 21.05rpx 0;
|
||
font-size: 31.58rpx;
|
||
min-height: 82.46rpx;
|
||
width: 100%;
|
||
border-bottom: 1px solid rgba(204, 204, 204, 0.5);
|
||
|
||
.task_name {
|
||
width: 526.32rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.is_matter {
|
||
font-size: 24.56rpx;
|
||
border-radius: 4px;
|
||
padding: 3.51rpx 17.54rpx;
|
||
color: $theme-oa-color;
|
||
background-color: #E4EDFF;
|
||
}
|
||
|
||
// 审批人
|
||
.approver {
|
||
font-size: 28.07rpx;
|
||
}
|
||
|
||
.audit_store {
|
||
font-size: 31.58rpx;
|
||
}
|
||
|
||
.make_copy {
|
||
color: #999;
|
||
margin-top: 14.04rpx;
|
||
font-size: 24.56rpx;
|
||
}
|
||
}
|
||
|
||
.cont_details {
|
||
padding: 24.56rpx 0;
|
||
font-size: 28.07rpx;
|
||
|
||
// 时间
|
||
.finish_time {
|
||
font-size: 24.56rpx;
|
||
color: #999;
|
||
}
|
||
|
||
text {
|
||
display: block;
|
||
margin-bottom: 7.02rpx;
|
||
}
|
||
|
||
.upload_box {
|
||
padding: 17.54rpx;
|
||
background-color: #F7F7F7;
|
||
border-radius: 4px;
|
||
|
||
.title {
|
||
font-size: 28.07rpx;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 7.02rpx;
|
||
font-size: 21.05rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.file {
|
||
padding: 17.54rpx;
|
||
border-radius: 4px;
|
||
border: 1px solid #F2F2F2;
|
||
margin-bottom: 17.54rpx;
|
||
|
||
.file_size {
|
||
margin-top: 7.02rpx;
|
||
}
|
||
|
||
.file_name {
|
||
width: 525.7rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.file_size,
|
||
.upload_people {
|
||
font-size: 21.05rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
// 审批
|
||
.examine {
|
||
margin-bottom: 17.54rpx;
|
||
}
|
||
|
||
.flow_path {
|
||
margin-bottom: 14.04rpx;
|
||
|
||
.name {
|
||
margin: 0 14.04rpx 0 8.77rpx;
|
||
}
|
||
|
||
.status_tag {
|
||
color: #999;
|
||
margin-right: 8.77rpx;
|
||
}
|
||
}
|
||
|
||
.record {
|
||
position: relative;
|
||
margin-bottom: 14.04rpx;
|
||
|
||
.circle {
|
||
width: 31.58rpx;
|
||
height: 31.58rpx;
|
||
background-color: #fff;
|
||
border: 2px solid #34A853;
|
||
border-radius: 50%;
|
||
margin: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
&::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
clear: both;
|
||
width: 1px;
|
||
height: 100%;
|
||
background-color: rgba(204, 204, 204, 0.5);
|
||
margin: 31.58rpx;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
flex: 1;
|
||
margin-left: 7.02rpx;
|
||
}
|
||
}
|
||
|
||
:last-child {
|
||
.circle {
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bott_btn {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 87.72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icons {
|
||
flex: 1;
|
||
justify-content: space-around;
|
||
height: 87.72rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.turn_down {
|
||
width: 421.05rpx;
|
||
height: 87.72rpx;
|
||
text-align: center;
|
||
line-height: 87.72rpx;
|
||
background: #3274F9;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style>
|