ssti-CollegeManage/src/views/projectSettlement/components/projectSettlementDetailComment.vue

<template>
  <!-- 项目结项 结项评语 -->
    <div class="projectSettlement2" v-loading="loading">
      <!-- 上传文件以及表格开始 -->
      <div class="pmInp">
          <beUpload @getFile="getFile" :progress="progress" :navName="'上传文件'" :accept="accept"></beUpload>
        </div>
      <!-- 表格部分开始 -->
      <el-progress v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>

        <el-table
        :data="file"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
        <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="操作"
          >
          <template #default="scope">
              <div class="operations">
                      <el-button type="primary"  size="mini" @click="checkFile(scope.row.url)" style="background: #477edd">明细查看</el-button>
              </div>
          </template>
        </el-table-column>
        </el-table>

      <!-- 多行文本框区域开始 -->
      <!-- <div class="PS2tabTit0">
        结项评价
      </div>
      <div class="tabTit">
            <div><p>科研办</p></div>
      </div>
      <hr>
      <div class="ps1textArea">
        <el-input
          type="textarea"
          :rows="6"
          resize="none"
          class="textArea"
          placeholder="请输入内容"
          v-model="AllRemark.kRem">
        </el-input>
      </div>
      <div class="tabTit">
            <div><p>学术委员会</p></div>
      </div>
      <hr>
      <div class="ps1textArea">
        <el-input
          type="textarea"
          class="textArea"
          :rows="6"
          resize="none"
          placeholder="请输入内容"
          v-model="AllRemark.xRem">
        </el-input>
      </div>
      <div class="tabTit">
            <div><p>部门审核评语</p></div>
      </div>
      <hr>
      <div class="ps1textArea">
        <el-input
          type="textarea"
          :rows="6"
          resize="none"
          class="textArea"
          placeholder="请输入内容"
          v-model="AllRemark.bRem">
        </el-input>
      </div> -->
      <!-- 多行文本框区域结束 -->
      <div class="baseBtn">
        <div class="blockWidth">
          <el-button type="primary" class="backBtn" @click="submitRemark">提交</el-button>
        </div>
      </div>

    <!-- 提交对话框开始 -->
    <el-dialog
          title="提示"
          :visible.sync="dialogVisible1"
          width="600px"
          class="submitDialog">
          <div class="addDialogLogo">LOGO</div>
          <span class="deleteContent">确定提交?</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmSubmit" class="AllDialogBtn">确认提交</el-button>
            <el-button @click="dialogVisible1=false" class="AllDialogBtn">取消</el-button>
          </span>
        </el-dialog>
    <!-- 提交对话框结束-->
    <!-- 展示文档开始 -->
    <el-dialog
            title="展示文件"
            :visible.sync="showFile"
            width="80vw"
            class="addDialog showDialog"
          >
      <div class="addDialogLogo">LOGO</div>
      <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>

    </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:"*",
            dialogVisible1:false,
            loading:false,
            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
            },
            // tableData:[],
            file:[],
            progress:{     //进度条
              value:0,
              show:false
            },
            AllRemark:{
              kRem:'',
              xRem:'',
              bRem:''
            }
          }
        },
        methods:{
          ProgressFormat(value){        //进度条
            return value ==100?'100%':`${value}%`
          },
          //展示文件
          checkFile(url) {
              // console.log(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}
          },
            confirmSubmit(){    //确定提交
                let param={
                  uid:this.$store.state.userInfo.userid,
                  pid:this.$route.query['pid'],
                  file:JSON.stringify(this.file),
                  remark:JSON.stringify(this.AllRemark)
                }
                this.ajax
                    .post(this.$store.state.api+'/UpdateSettlementRemark',param)
                    .then(res=>{
                      console.log(res);
                      this.dialogVisible1=false
                      this.$message.success('提交成功')
                    },err=>{
                      console.log(err);
                    })
            },
            submitRemark(){      //显示提交对话框
              this.dialogVisible1=true;
            },
            getFile(val) {    //上传文件
              let param={
                  uid:this.$store.state.userInfo.userid,
                  pid:this.$route.query['pid'],
                  file:JSON.stringify([...this.file,val]),
                  remark:JSON.stringify(this.AllRemark)
                }
                this.ajax
                    .post(this.$store.state.api+'/UpdateSettlementRemark',param)
                    .then(res=>{
                      if(res.data==1){
                        this.$message.success('提交成功')
                      }else{
                        this.$message.error("提交失败")
                      }
                      this.getData();
                      this.progress.show = false;
                      
                    },err=>{
                      console.log(err);
                    })
            },

            getData(){       //获取基础信息
              this.loading = true;
              let param={
                uid:this.$store.state.userInfo.userid,
                pid:this.$route.query['pid'],
              }
              this.ajax
                    .get(this.$store.state.api+'/SelectSettlementRemark',param)
                    .then(res=>{
                      console.log(res);
                      let data=res.data[0];
                      console.log(data);
                      this.file=JSON.parse(data[0].endFile)
                      if(JSON.parse(data[0].endProjectRemark)!=null){
                        this.AllRemark=JSON.parse(data[0].endProjectRemark)
                      }
                      this.loading = false;
                    },err=>{
                      console.log(err);
                    })
          },        
        },
       mounted(){
        this.getData()
       }
      }
  </script>
  
  <style lang="less">
  .projectSettlement2{

    .pmInp{
      width: 100%;
      margin: 10px 0 10px 0;
      display: flex;  
      justify-content: flex-end;
      .btn{
        height: 30px;
        width: 100px;
        font-size: 16px;
        background: #477edd;
        // margin-left: 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;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          line-height: 30px;
          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;
          }
        }
        
      }


    .submitDialog{
      font-size: 18px;
      .el-dialog{
        border-radius: 5px;
        overflow: hidden;
      }
      .deleteContent{
        font-size: 22px;
        color: #000;
      }
      .el-dialog__body{
          display: flex;
          justify-content: center;
        }
      .addDialogLogo{
        width: 60px;
        height: 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
      }
      .el-dialog__header{
      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;
          text-align: left;
          line-height: 1.7em;
        }
        .addDialogCon{
          margin-top: 20px;
        }
        
      }
      .dialog-footer {
          display: flex;
          justify-content: center;
          box-sizing: border-box;
          // .btn5 {
          //   font-size: 16px;
          // }
        }
    }


    .PS2tabTit0{
      width: 100%;
      text-align: left;
      margin: 20px 15px 20px 0px;
      color: #ccc;
      font-size: 22px;
    }

  }

  </style>