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"
      top="1vh"
      class="addDialog showDialog"
    >
      <div class="showFileArea" style="height: 80vh">
        <!-- <vpdf v-if="/^\s*$/g.test(showFileUrl)&&showFileUrl.split('.')[showFileUrl.split('.').length-1]=='pdf'" :pdfUrl="showFileUrl"></vpdf> -->
        <div
          class="workd_media"
          style="width: 90%; height: 90%"
          v-if="videoDetail.sources"
        >
          <video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="videoDetail"
            @play="onPlayerPlay($event)"
            style="width: 90%; height: 90%; margin: 0 auto"
          ></video-player>
        </div>
        <vword
          style="width: 100%; height: 100%; overflow: auto"
          class="fullStyle"
          v-else-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-else-if="Wordss['type'] == 'pdf'"
        ></vpdf>
        <img
          :src="showFileUrl"
          alt="图片哦"
          v-else-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,
      },
      word: [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
        "XLSX",
        "XLS",
      ],
      pdf: ["PDF"],
      image: [
        "BMP",
        "PJP",
        "APNG",
        "PNG",
        "JPG",
        "GIF",
        "SVG",
        "JPEG",
        "JPG",
        "ICO",
        "PGPEG",
        "AVIF",
      ],
      vedio: [
        "AVI",
        "NAVI",
        "MPEG",
        "ASF",
        "MOV",
        "WMV",
        "3GP",
        "RM",
        "RMVB",
        "FLV",
        "F4V",
        "H.264",
        "H.265",
        "REAL VIDEO",
        "MKV",
        "WebM",
        "HDDVD",
        "MP4",
        "MPG",
        "M4V",
        "MGV",
        "OGV",
        "QTM",
        "STR",
        "AMC",
        "DVX",
        "EVO",
        "DAT",
        "OGG",
        "OGM",
      ],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
      videoDetail: {},
    };
  },
  methods: {
    DelFile(index) {
      this.$confirm("你确定要删除该文件吗?", "确定文件删除")
        .then((res) => {
          this.tableData.splice(index, 1);
          this.ajax
            .post(this.$store.state.api + "/updateEndAllFile", {
              uid: this.$store.state.userInfo.userid,
              pid: this.$route.query["pid"],
              file: encodeURIComponent(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.videoDetail = {};
      if (
        this.vedio.indexOf(
          url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        this.playerOptions.sources[0].src = url;
        this.videoDetail = this.playerOptions;
        this.showFile = true;
      } else {
        if (
          this.word.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1 &&
          this.pdf.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1 &&
          this.image.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1
        ) {
          this.downFile(url);
          return;
        }
        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 });
      }
    },
    //下载文件
    downFile(f) {
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      let url2 = f;
      let _url2 = "";
      if (
        url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      ) {
        _url2 = url2.split(
          "https://view.officeapps.live.com/op/view.aspx?src="
        )[1];
      } else {
        _url2 = url2;
      }
      var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
      let name = decodeURIComponent(
        _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
      );
      var params = {
        Bucket: "ccrb",
        Key: name,
      };
      s3.getObject(params, function (err, data) {
        if (err) console.log(err, err.stack); // an error occurred
        else {
          let url = window.URL.createObjectURL(new Blob([data.Body]));
          let a = document.createElement("a");
          a.name = name;
          a.href = url;
          a.download = name;
          a.click();
          console.log(data);
        } // sxuccessful response
      });

      return;
    },
    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: encodeURIComponent(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() {
      //获取基础信息
			if(this.loading)return;
      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) => {
            let data = res.data[0][0];
            console.log(data);
            let file = "";
            this.state = data.isupload;
            if (data["endFile"] != null && data["endFile"] != "") {
              console.log(111);
              file = JSON.parse(data["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");
    },
    onPlayerPlay() {},
  },
	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>