628 lines
13 KiB
Vue
628 lines
13 KiB
Vue
<template>
|
||
<view class="content">
|
||
|
||
<view class="content-middle">
|
||
|
||
|
||
<view class="content-middle-three">
|
||
<view class="middle-three">
|
||
|
||
|
||
<view class="middle-threeb">
|
||
<view class="middle-threeb-title">
|
||
<view class="title">
|
||
{{detail.title}}
|
||
</view>
|
||
<view class="title-status" @click="show5=true">
|
||
{{detail.flow_status==1?"待办的":detail.flow_status==2?"进行中":detail.flow_status==3?"已完成":detail.flow_status==4?"已拒绝":"已关闭"}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="middle-threeba">
|
||
<view class="middle-threeb-a">
|
||
|
||
<view class="threeb-a-b">
|
||
<view class="name">负责人：<text>{{detail.director_name}}</text></view>
|
||
<view class="name">协办人：<text>{{detail.assist_admin_names}}</text></view>
|
||
<!-- <view class="name">发布人：<text>{{detail.title}}</text></view> -->
|
||
<view class="name">工作性质：<text>{{detail.cate_name}}</text></view>
|
||
<view class="name">计划完成日期：<text>{{detail.end_time}}</text></view>
|
||
<!-- <view class="name">任务验收截止时间：<text>{{detail.project_name}}</text></view> -->
|
||
<view class="name">预估工时：<text>{{detail.plan_hours}}</text></view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="middle-three" style="margin-top: 30rpx;">
|
||
|
||
|
||
<view class="middle-threeb">
|
||
<view class="middle-threeb-title">
|
||
<view class="title">
|
||
任务描述
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="middle-threeba">
|
||
<view class="middle-threeb-a">
|
||
|
||
<view class="threeb-a-b1">
|
||
|
||
|
||
<!-- <text>{{detail.content}}</text> -->
|
||
|
||
<jyf-parser :html="detail.content" ref="article" :tag-style="tagStyle"></jyf-parser>
|
||
|
||
|
||
|
||
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="" style="background-color: #fff;">
|
||
<block v-for="(item, i) in fileArray" :key="i">
|
||
<view class="file flex_a_c_j_sb" style="z-index: 0;">
|
||
<view class="l_file">
|
||
<view class="file_name" @click="downloadFile(item)">{{ item.name }}</view>
|
||
<view class="file_size">{{ item.filesize }}</view>
|
||
<!-- -->
|
||
</view>
|
||
<u-icon @click="delImg(item,i)" name="close-circle" color="#333333" size="28"
|
||
style="z-index: 999;"></u-icon>
|
||
</view>
|
||
</block>
|
||
<view class="upload_box flex_a_c_j_sb">
|
||
<view>
|
||
<view class="title">选择文件并上传</view>
|
||
<view class="text">
|
||
上传前，请规范命名，最大只能上传100M的文件<br />
|
||
超过请压缩成多个文件上传。
|
||
</view>
|
||
</view>
|
||
<view class="" style="margin-top: 60rpx;">
|
||
<lsjUpload ref="lsjUpload" childId="upload1" :size="10" :option="fileOption" height="200rpx"
|
||
style="margin-top: 28rpx;" :debug="false"
|
||
:formats="'pdf,txt,zip,rar,jpg,png,mp3,avi,mov,mp4,gif'" :multiple="false" :count="3"
|
||
:instantly="true" @change="changeFile" @uploadEnd='onuploadEnd' @progress='onprogre'>
|
||
|
||
<u-icon name="plus-circle" color="#333333" size="28"></u-icon>
|
||
</lsjUpload>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-empty v-if="Object.keys(detail).length==0" text="没有信息" icon="/static/empty/data.png"></u-empty>
|
||
<u-action-sheet :show="show5" :actions="actions5" title="请选择任务状态" @close="show5 = false" @select="Select5">
|
||
</u-action-sheet>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import {
|
||
projecttaskview,
|
||
addprojecttask,
|
||
addfile,
|
||
deletefile
|
||
} from '@/api/oa.js'
|
||
import {
|
||
HTTP_REQUEST_URL
|
||
} from '@/config/app.js'
|
||
import {
|
||
Toast
|
||
} from '@/libs/uniApi.js'
|
||
import {
|
||
FILE_URL
|
||
} from '@/api/file.js'
|
||
import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue'
|
||
export default {
|
||
components: {
|
||
lsjUpload
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
show5: false,
|
||
type: '',
|
||
detail: {},
|
||
actions5: [{
|
||
name: '待办的',
|
||
id: '1',
|
||
}, {
|
||
name: '进行中',
|
||
id: '2',
|
||
}, {
|
||
name: '已完成',
|
||
id: '3'
|
||
}, {
|
||
name: '已拒绝',
|
||
id: '4'
|
||
}, {
|
||
name: '已关闭',
|
||
id: '5'
|
||
}],
|
||
fileArray: [],
|
||
fileOption: {},
|
||
tagStyle: {
|
||
img: 'width:100%;display:block;',
|
||
|
||
},
|
||
files: new Map(),
|
||
};
|
||
},
|
||
|
||
onLoad(data) {
|
||
this.fileOption = {
|
||
url: FILE_URL,
|
||
name: 'file',
|
||
header: {
|
||
token: this.$store.state.app.token
|
||
}
|
||
},
|
||
|
||
this.type = data.data
|
||
this.getDeatil(data.data)
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
async getDeatil(id) {
|
||
let res = await projecttaskview({
|
||
id: id
|
||
|
||
})
|
||
this.detail = res.data.detail
|
||
|
||
this.fileArray = res.data.file_array.map(function(obj) {
|
||
return {
|
||
name: obj.name,
|
||
filepath: obj.filepath,
|
||
fileext: obj.fileext,
|
||
filesize: obj.filesize,
|
||
id: obj.id
|
||
};
|
||
});
|
||
|
||
},
|
||
Select5(e) {
|
||
this.detail.flow_status = e.id
|
||
// con
|
||
this.zhuangtai()
|
||
},
|
||
downloadFile(item) {
|
||
uni.downloadFile({
|
||
url: HTTP_REQUEST_URL + item.filepath,
|
||
success: function(res) {
|
||
if (res.statusCode === 200) {
|
||
const tempFilePath = res.tempFilePath;
|
||
if (item.fileext == 'png'||item.fileext == 'jpg') {
|
||
uni.previewImage({
|
||
urls: [tempFilePath]
|
||
});
|
||
} else {
|
||
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '暂时不支持查看，请登录后台查看',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// console.log('用户点击确定');
|
||
} else if (res.cancel) {
|
||
// console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
async zhuangtai() {
|
||
let res = await addprojecttask({
|
||
id: this.type,
|
||
flow_status: this.detail.flow_status
|
||
})
|
||
if (res.code == 0) {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
Toast(res.msg)
|
||
},
|
||
async addfile1(val) {
|
||
|
||
let data = {
|
||
topic_id: this.detail.id,
|
||
file_id: val.id,
|
||
file_name: val.name,
|
||
module: 'task',
|
||
|
||
}
|
||
let res = await addfile(data)
|
||
|
||
if (res.code == 0) {
|
||
this.getDeatil(this.type)
|
||
}
|
||
Toast(res.msg)
|
||
// console.log(res)
|
||
},
|
||
/**
|
||
* 某文件上传结束回调(成功失败都回调)
|
||
* @param {Object} item 当前上传完成的文件
|
||
*/
|
||
onuploadEnd(item) {
|
||
console.log(`${item.name}已上传结束，上传状态=${item.type}`);
|
||
if (item['responseText']) {
|
||
this.files.get(item.name).responseText = JSON.parse(item.responseText);
|
||
}
|
||
// 更新当前窗口状态变化的文件
|
||
this.files.set(item.name, item);
|
||
let arr1 = this.files.get(item.name).responseText
|
||
|
||
this.fileArray.push(arr1.data)
|
||
|
||
this.addfile1(arr1.data)
|
||
|
||
// 强制更新视图
|
||
this.$forceUpdate();
|
||
},
|
||
/**
|
||
* 上传进度回调
|
||
* 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
|
||
* @param {Object} item 当前正在上传的文件
|
||
*/
|
||
onprogre(item) {
|
||
|
||
console.log('打印对象', JSON.stringify(this.files.get(item.name)));
|
||
// 更新当前状态变化的文件
|
||
this.files.set(item.name, item);
|
||
// 强制更新视图
|
||
this.$forceUpdate();
|
||
},
|
||
/**
|
||
* 文件选择回调
|
||
* @param {Object} files 已选择的所有文件Map集合
|
||
*/
|
||
changeFile(files) {
|
||
console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
|
||
// 更新选择的文件
|
||
this.files = files
|
||
console.log(files.values())
|
||
// 强制更新视图
|
||
this.$forceUpdate();
|
||
},
|
||
/**
|
||
* 指定上传某个文件
|
||
* @param {Object} name 带后缀名的文件名称
|
||
*/
|
||
resetUpload() {
|
||
this.$refs.lsjUpload.upload(name);
|
||
},
|
||
async delImg(item, i) {
|
||
console.log(item)
|
||
let res = await deletefile({
|
||
id: item.id
|
||
})
|
||
if (res.code == 0) {
|
||
this.fileArray.splice(i, 1)
|
||
}
|
||
Toast(res.msg)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
page {
|
||
padding: 0 28rpx;
|
||
}
|
||
|
||
// 附件
|
||
.upload_box {
|
||
padding: 17.54rpx;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
|
||
.title {
|
||
font-size: 28.07rpx;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 7.02rpx;
|
||
font-size: 21.05rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.file_name {
|
||
width: 526.32rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.file {
|
||
padding: 17.54rpx;
|
||
border-radius: 4px;
|
||
border: 1px solid #F2F2F2;
|
||
margin: 17.54rpx 0;
|
||
|
||
.file_size {
|
||
margin-top: 7.02rpx;
|
||
}
|
||
|
||
.file_size,
|
||
.upload_people {
|
||
font-size: 21.05rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.content-middle {
|
||
.content-middle-one {
|
||
.middle-one {
|
||
display: flex;
|
||
background-color: #FFFFFF;
|
||
padding: 28rpx 18rpx;
|
||
|
||
.search {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
width: 149rpx;
|
||
line-height: 63rpx;
|
||
height: 63rpx;
|
||
background: #FFFFFF;
|
||
text-align: center;
|
||
border-radius: 35rpx 35rpx;
|
||
border: 2rpx solid #E6E5E5;
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.content-middle-search {
|
||
display: flex;
|
||
width: 527rpx;
|
||
height: 63rpx;
|
||
line-height: 63rpx;
|
||
padding-left: 30rpx;
|
||
background: #F7F7F7;
|
||
border-radius: 35rpx 35rpx;
|
||
font-size: 25rpx;
|
||
|
||
input {
|
||
width: 527rpx;
|
||
height: 63rpx;
|
||
line-height: 63rpx;
|
||
padding-left: 30rpx;
|
||
}
|
||
|
||
.placeholder {
|
||
font-size: 25rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
padding-left: 30rpx;
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.content-middle-sai {
|
||
display: flex;
|
||
width: 149rpx;
|
||
height: 63rpx;
|
||
line-height: 63rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 35rpx 35rpx;
|
||
border: 2rpx solid #E6E5E5;
|
||
margin-left: 18rpx;
|
||
|
||
.content-middle-saia {
|
||
|
||
width: 29rpx;
|
||
height: 28rpx;
|
||
margin-left: 25rpx;
|
||
margin-right: 10rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.content-middle-saib {
|
||
font-size: 28rpx;
|
||
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-middle-search-detail {
|
||
background-color: #FFFFFF;
|
||
|
||
:nth-last-child(1) {
|
||
border: none !important;
|
||
}
|
||
|
||
.search-detail {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-right: 195rpx;
|
||
padding: 18rpx 53rpx;
|
||
border-bottom: 2rpx solid #E6E6E6;
|
||
;
|
||
|
||
|
||
.search-detail-one {}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
.content-middle-three {
|
||
margin-top: 26rpx;
|
||
|
||
|
||
.middle-three {
|
||
background-color: #FFFFFF;
|
||
padding: 28rpx 28rpx;
|
||
|
||
.middle-threea {
|
||
font-size: 35rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #3274F9;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.middle-threeb {
|
||
|
||
|
||
.middle-threeb-title {
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
|
||
|
||
|
||
.title {
|
||
width: 540rpx;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.title-status {
|
||
font-size: 25rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #3274F9;
|
||
background: #E4EDFF;
|
||
height: 42rpx;
|
||
line-height: 42rpx;
|
||
padding: 0 10rpx;
|
||
border-radius: 7rpx 7rpx;
|
||
}
|
||
}
|
||
|
||
.middle-threeba {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.middle-threeb-a {
|
||
|
||
.threeb-a-b {
|
||
|
||
|
||
|
||
.middle-edit {
|
||
width: 645rpx;
|
||
height: 63rpx;
|
||
line-height: 63rpx;
|
||
background: #e6e5d9;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #000;
|
||
margin-bottom: 20rpx;
|
||
|
||
}
|
||
|
||
.middle-delete {
|
||
width: 645rpx;
|
||
height: 63rpx;
|
||
line-height: 63rpx;
|
||
background: #F02828;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
color: #333333;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
}
|
||
|
||
.achor {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
|
||
}
|
||
}
|
||
|
||
|
||
.threeb-a-b1 {
|
||
width: 350px;
|
||
padding: 20rpx 20rpx;
|
||
word-wrap: break-word;
|
||
overflow: hidden;
|
||
}
|
||
|
||
}
|
||
|
||
.middle-threeb-b {
|
||
|
||
height: 80rpx;
|
||
|
||
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |