<template>
|
<div>
|
<el-drawer
|
title=""
|
:modal-append-to-body="false"
|
:before-close="close"
|
:modal="false"
|
:visible.sync="nodeShow">
|
<div class="node-info">
|
<div class="font-18 color-333 font-bold m-b-15">节点进度</div>
|
<div class="com-c-box" style="padding-left: 5px">
|
<el-timeline>
|
<!-- recList-->
|
<el-timeline-item
|
v-for="(cs, index) in 2"
|
:key="index"
|
size="large"
|
:hide-timestamp="false">
|
<div class="info-item">
|
<div class="font-14 m-b-15">
|
完成了<span class="color-0D9">立项/可研</span>阶段的审查节点
|
</div>
|
<div class="info-box">
|
<div class="f-r f-r-between m-b-15">
|
<div class="font-14 color-333">周星星</div>
|
<div class="font-12 color-999">2023-09-04 12:31</div>
|
</div>
|
<!-- 图片-->
|
<div class="f-r">
|
<el-image
|
v-for="(iItem,iIndex) in cs.imgs"
|
class="info-img"
|
:src="iItem"
|
:preview-src-list="imgList">
|
</el-image>
|
</div>
|
<!-- 附件 -->
|
<div class="m-b-15" v-if="cs.files && cs.files.length>0">
|
<div class="font-14 color-666">附件</div>
|
<div class="f-r f-r-between file-item" v-for="(file,fIndex) in cs.files">
|
<div class="f-r f-1">
|
<img :src="getFileIcon(file.fileName)" alt="下载" class="file-icon"/>
|
<div class="file-name" @click="downLoadFile(file.url)">
|
{{ file.fileName }}
|
</div>
|
</div>
|
<div class="down-enter">查看</div>
|
</div>
|
</div>
|
<!-- 当前项目进度 -->
|
<div>
|
<div class="font-14 color-666">当前项目进度</div>
|
<div class="font-14 color-333 m-t-5 line-24">
|
在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
<div class="f-r f-r-center btn-bot">
|
<my-button name="取消" site="form" @click="close"/>
|
<my-button name="上报" site="form" @click="toSubmit"/>
|
</div>
|
<node-submit v-if="submitShow" :nodeId="nodeId" @close="submitShow=false"></node-submit>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import nodeSubmit from "@/views/projectManage/information/nodeSubmit";
|
import myButton from '@/components/myButton/myButton'
|
import {getDownUrl} from "@/utils/base";
|
export default {
|
name: "nodeProgress",
|
components: {nodeSubmit,myButton},
|
props: {
|
nodeId: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
nodeShow:true,
|
submitShow:false,
|
}
|
},
|
methods:{
|
// 下载文件
|
downLoadFile(item) {
|
const loadingInstance = this.$loading({
|
lock: true,
|
text: '正在下载...',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)',
|
});
|
let info = JSON.parse(item)[0];
|
if (info.url.indexOf('http') !== 0) {
|
info.url = getDownUrl() + info.url;
|
}
|
// window.open(decodeURI(info.url))
|
var doc = document.createElement('a');
|
doc.href = info.url;
|
doc.download = info.fileName;
|
doc.target = '_blank';
|
doc.click();
|
loadingInstance.close();
|
},
|
getFileIcon(item) {
|
const arr = item.split('.');
|
if (arr[arr.length - 1] === 'doc' || arr[arr.length - 1] === 'docx') {
|
return require('@/assets/images/project/word.png');
|
} else if (arr[arr.length - 1] === 'pdf') {
|
return require('@/assets/images/project/pdf.png');
|
} else if (arr[arr.length - 1] === 'txt') {
|
return require('@/assets/images/project/txt.png');
|
} else if (arr[arr.length - 1] === 'xls' || arr[arr.length - 1] === 'xlsx') {
|
return require('@/assets/images/project/xls.png');
|
} else if (arr[arr.length - 1] === 'ppt' || arr[arr.length - 1] === 'pptx') {
|
return require('@/assets/images/project/ppt.png');
|
} else {
|
return require('@/assets/images/project/no-file.png');
|
}
|
},
|
close(){
|
this.$emit('close')
|
},
|
toSubmit(){
|
this.submitShow = true
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.com-c-box{
|
overflow-y: auto;
|
max-height: calc(100vh - 240px);
|
}
|
>>>.com-c-box::-webkit-scrollbar {
|
display: none;
|
}
|
.node-info{
|
padding:15px;
|
}
|
.btn-bot{
|
position: absolute;
|
left: 0;
|
bottom: 120px;
|
width: 100%;
|
padding:15px 0;
|
background-color: #FFFFFF;
|
border-top:1px solid #eeeeee;
|
z-index: 11;
|
}
|
>>>.el-drawer__container{
|
top:120px;
|
bottom: 0;
|
}
|
>>> .el-drawer__body{
|
position: relative;
|
}
|
>>>.el-drawer__header{
|
display: none;
|
}
|
.m-t-10 {
|
margin-top: 10px;
|
}
|
|
.m-t-5 {
|
margin-top: 5px;
|
}
|
|
.m-b-15 {
|
margin-bottom: 15px;
|
}
|
.color-0D9 {
|
color: #0D997C;
|
}
|
|
.info-item {
|
padding-top: 5px;
|
}
|
|
.info-box {
|
padding: 8px;
|
border-radius: 4px;
|
background: #f8faf9;
|
}
|
|
.info-img {
|
width: 92px;
|
height: 92px;
|
border-radius: 4px;
|
margin-right: 10px;
|
}
|
|
.file-item {
|
padding: 10px 0;
|
}
|
.file-icon{
|
width: 16px;
|
height: 16px;
|
margin-right: 5px;
|
}
|
.file-name{
|
font-size: 14px;
|
color: #333333;
|
}
|
.file-name:hover{
|
cursor: pointer;
|
color: #0d997c;
|
}
|
.down-enter{
|
cursor: pointer;
|
color: #1890ff;
|
font-size: 14px;
|
text-decoration: underline;
|
}
|
</style>
|
