|
|
@@ -0,0 +1,368 @@
|
|
|
+<template>
|
|
|
+ <!-- 项目管理 项目结题附件 -->
|
|
|
+ <div class="ProjectManagement5" v-loading="loading">
|
|
|
+
|
|
|
+ <div class="pmInp">
|
|
|
+ <beUpload @getFile="getFile" v-show="state!==4" :navName="'上传文件'" :accept="accept" :progress="progress"></beUpload>
|
|
|
+ <el-button v-show="state==4" style="background: #ccc !important;cursor: no-drop;color: #fff !important;border: 0;font-size: 16px;">上传文件</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <el-progress v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>
|
|
|
+
|
|
|
+ <!-- 表格部分开始 -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ stripe
|
|
|
+ class="fontSize"
|
|
|
+ :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="projectTitle"
|
|
|
+ label="项目名称"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span>{{ title }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="fileName"
|
|
|
+ label="项目中期报告"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="size"
|
|
|
+ label="大小"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="uploadTime"
|
|
|
+ label="时间"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="operation"
|
|
|
+ align="center"
|
|
|
+ label="操作"
|
|
|
+ width="200"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="operations">
|
|
|
+ <el-button type="primary" size="mini" @click="checkFile(scope.row.url)" style="background: #477edd">明细查看</el-button>
|
|
|
+ <el-button type="primary" v-show="state!=4" size="mini" @click="DelFile(scope.$index)" style="background: #477edd">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 展示文档开始 -->
|
|
|
+ <el-dialog
|
|
|
+ title="展示文件"
|
|
|
+ :visible.sync="showFile"
|
|
|
+ width="80vw"
|
|
|
+ class="addDialog showDialog"
|
|
|
+ >
|
|
|
+
|
|
|
+ <div class="showFileArea">
|
|
|
+ <!-- <vpdf v-if="/^\s*$/g.test(showFileUrl)&&showFileUrl.split('.')[showFileUrl.split('.').length-1]=='pdf'" :pdfUrl="showFileUrl"></vpdf> -->
|
|
|
+ <vword
|
|
|
+ style="width: 100%; height: 100%; overflow: auto"
|
|
|
+ class="fullStyle"
|
|
|
+ v-if="Wordss['type']!='pdf' && Wordss['name']!='图片'"
|
|
|
+ :pdfUrl="'https://view.officeapps.live.com/op/view.aspx?src='+showFileUrl"
|
|
|
+ ></vword>
|
|
|
+ <vpdf
|
|
|
+ style="width: 100%; height: 100%; overflow: auto"
|
|
|
+ class="fullStyle"
|
|
|
+ :pdfUrl="showFileUrl"
|
|
|
+ v-if="Wordss['type']=='pdf'"
|
|
|
+ ></vpdf>
|
|
|
+ <img :src="showFileUrl" alt="图片哦" v-if="Wordss['name']=='图片'" style="width: auto;height: auto;max-width: 100%;max-height: 100%;">
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <!-- <el-pagination
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="table.currentPage"
|
|
|
+ :page-size="table.packageSize"
|
|
|
+ layout=" prev, pager, next"
|
|
|
+ background
|
|
|
+ class="paginations"
|
|
|
+ :total="table.total">
|
|
|
+ </el-pagination> -->
|
|
|
+ <!-- 分页结束 -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import beUpload from '@/components/tool/beUpload'
|
|
|
+ import vpdf from "@/components/vpdf.vue";
|
|
|
+ import vword from "@/components/vword.vue";
|
|
|
+ export default {
|
|
|
+ components: { beUpload, vpdf, vword },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ accept:"*",
|
|
|
+ // table:{ // 分页数据
|
|
|
+ // total:0,
|
|
|
+ // packageSize:8,
|
|
|
+ // currentPage:1
|
|
|
+ // },
|
|
|
+ loading:false,
|
|
|
+ state:0,
|
|
|
+ showFile:false,
|
|
|
+ showFileType: 0,
|
|
|
+ showFileUrl: "",
|
|
|
+ Wordss:{type:"",name:""},
|
|
|
+ canonical:{
|
|
|
+ Image:/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
|
|
|
+ File:/^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i
|
|
|
+ },
|
|
|
+ title:"",
|
|
|
+ tableData:[], //附件列表
|
|
|
+ file:'',
|
|
|
+ progress:{
|
|
|
+ value:0,
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ DelFile(index){
|
|
|
+ this.$confirm("你确定要删除该文件吗?",'确定文件删除').then(res=>{
|
|
|
+ this.tableData.splice(index,1);
|
|
|
+ this.ajax.post(this.$store.state.api+"/UpdateProjectEndFile",{
|
|
|
+ uid:this.$store.state.userInfo.userid,
|
|
|
+ pid:this.$route.query['pid'],
|
|
|
+ file:JSON.stringify(this.tableData)
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.data==1){
|
|
|
+ this.$message.success("删除文件成功")
|
|
|
+ }else{
|
|
|
+ this.$message.error("删除文件失败")
|
|
|
+ }
|
|
|
+ this.getData();
|
|
|
+ })
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log("取消删除文件")
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ProgressFormat(value){ //进度条
|
|
|
+ return value ==100?'100%':`${value}%`
|
|
|
+ },
|
|
|
+ //展示文件
|
|
|
+ checkFile(url) {
|
|
|
+ this.showFileUrl = url;
|
|
|
+ this.showFile = true;
|
|
|
+
|
|
|
+ if(typeof url=='undefined')return {type:"",name:""};
|
|
|
+ let urlSplit = url.split(".");
|
|
|
+ const type = urlSplit[urlSplit.length-1]
|
|
|
+ if(this.canonical.Image.test(url)){
|
|
|
+
|
|
|
+ this.Wordss={type:type,name:"图片"}
|
|
|
+ return console.log(this.Wordss);
|
|
|
+ }
|
|
|
+ if(this.canonical.File.test(url)){
|
|
|
+ this.Wordss={type:type,name:"文档"}
|
|
|
+ return console.log(this.Wordss);
|
|
|
+ }
|
|
|
+ else return this.Wordss={type:type,name:type}
|
|
|
+ },
|
|
|
+ getFile(val) { //上传文件
|
|
|
+ this.file = val;
|
|
|
+ // return console.log(val);
|
|
|
+ let oldData = [];
|
|
|
+ if (this.tableData!=null) {
|
|
|
+ this.tableData.forEach(item=>oldData.push(item))
|
|
|
+ oldData.push(val)
|
|
|
+ }else{
|
|
|
+ oldData.push(val)
|
|
|
+ }
|
|
|
+ let param={
|
|
|
+ uid:this.$store.state.userInfo.userid,
|
|
|
+ cid:this.$route.query['pid'],
|
|
|
+ projectFile:JSON.stringify(oldData)
|
|
|
+ }
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api+'/AddProjectFile',param)
|
|
|
+ .then(res=>{
|
|
|
+ if (res.data==1) {
|
|
|
+ this.getData()
|
|
|
+ this.$message.success('上传成功')
|
|
|
+ this.progress.show = false;
|
|
|
+ }else{
|
|
|
+ this.$message.error('上传失败')
|
|
|
+ }
|
|
|
+
|
|
|
+ },err=>{
|
|
|
+ console.log(err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getData(){ //获取基础信息
|
|
|
+ this.loading = true;
|
|
|
+ let param={
|
|
|
+ uid:this.$store.state.userInfo.userid,
|
|
|
+ pid:this.$route.query['pid'],
|
|
|
+ }
|
|
|
+ // console.log(param);
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api+'/SelectProjectFile',param)
|
|
|
+ .then(res=>{
|
|
|
+ // console.log(res);
|
|
|
+ let data=res.data[0][0]
|
|
|
+ console.log(data);
|
|
|
+ let file=''
|
|
|
+ this.state=data.isupload;
|
|
|
+ if (data['projectFile']!=null && data['projectFile']!='') {
|
|
|
+ console.log(111);
|
|
|
+ file = JSON.parse(data['projectFile']);
|
|
|
+ this.tableData=file
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ },err=>{
|
|
|
+ console.log(err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ back(){
|
|
|
+ this.$router.push('/ProjectManagement')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="less">
|
|
|
+ .ProjectManagement5{
|
|
|
+ .pagination{
|
|
|
+ float: right;
|
|
|
+ margin: 20px 55px 10px;
|
|
|
+ }
|
|
|
+ .addDialog {
|
|
|
+ font-size: 18px;
|
|
|
+ .el-dialog {
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .deleteContent {
|
|
|
+ width: 100%;
|
|
|
+ margin: 30px 0;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .addDialogLogo {
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 30px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ position: absolute;
|
|
|
+ left: 20px; top: 15px;
|
|
|
+ }
|
|
|
+ .el-dialog__header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background: #32455b;
|
|
|
+ }
|
|
|
+ .el-dialog__title {
|
|
|
+ color:#fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 18px;
|
|
|
+ position: relative;
|
|
|
+ top: -2px;
|
|
|
+ }
|
|
|
+ .addDialogMid {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 60px 0 10px;
|
|
|
+ .addDialogTit {
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ width: 80px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addDialogTit1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .addDialogTit2 {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+ .addDialogCon {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // .btn5 {
|
|
|
+ // font-size: 16px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pm5footer{
|
|
|
+ float: right;
|
|
|
+ margin-top: 30px;
|
|
|
+
|
|
|
+ .backBtn{
|
|
|
+ background: #169bd5;
|
|
|
+ float: right;
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pm1Tit{
|
|
|
+ display: flex;
|
|
|
+ margin-left: 20px;
|
|
|
+ div{
|
|
|
+ width: 130px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+ .pr1TitBass{
|
|
|
+ height: 2px;
|
|
|
+ width: 100%;
|
|
|
+ background: #3D67BC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pmInp{
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px 0 10px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ // .btn{
|
|
|
+ // width: 120px;
|
|
|
+ // font-size: 16px;
|
|
|
+ // border: none;
|
|
|
+
|
|
|
+ // // margin-left: 10px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </style>
|
yuanyiming