ssti-CollegeManage/src/views/projectManage/components/ProjectManagementEndProjectFile.vue

<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;
            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+'/AddProjectManageFile',param)
                  .then(res=>{
                    if (res.data==1) {
                      this.getData()
                      this.$message.success('上传成功')
                      this.progress.show = false;
                    }else{
                      this.$message.error('上传失败')
                    }
                   
                  },err=>{
                    console.log(err);
                  })
          },
          // handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          //   // console.log(`当前页: ${val}`);
          //   this.table.currentPage=val
          //   this.getData()
          // },
          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+'/SelectProjectManageFile',param)
                    .then(res=>{
                      console.log(res);
                      
                      this.state=res.data[0][0].isupload;
                      let file = JSON.parse(res.data[0][0]['endFile']);
                      this.tableData=file
                      this.loading = false;
                    },err=>{
                      console.log(err);
                    })
          },
          // content(){
          //   this.$router.push('/ProjectManagement1')
          // },
          // remark(){
          //   this.$router.push('/ProjectManagement2')
          // },
          // remark2(){
          //   this.$router.push('/ProjectManagement3')
          // },
          // remark4(){
          //   this.$router.push('/ProjectManagement4')
          // },
          // remark5(){
          //   this.$router.push('/ProjectManagement5')
          // },
          
          // backBtn2(){
          //   this.$router.push('/ProjectManagement1')
          // },
          // detail(){

          // },
          back(){
            this.$router.push('/ProjectManagement')
          },
        },
        mounted(){
          this.getData()
          console.log(111);
        }
      }
  </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>