393 lines
10 KiB
Vue
393 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>
|