ssti-CollegeManage/src/views/firm.vue

<template>
  <!-- 创业公司登记 -->
  <div class="firm" v-loading="loading">
    <!-- <div class="pAHeader"> -->
    <!-- <div class="pAHeader1">创业公司登记</div> -->
    <!-- </div> -->
    <div class="pAHeader">
      <div class="pAHeader1">创业公司登记</div>
    </div>
    <hr />

    <div class="twoSelectInp">
      <div class="selectTwo">
        <div class="selectsBlock">
          <el-input
            v-model="input"
            style="width: 200px"
            @change="getData"
            placeholder="请输入"
          ></el-input>
          <el-button type="primary" class="btn2" @click="getData"
            >查询</el-button
          >
        </div>
      </div>
      <div class="upFile">
        <el-progress
          v-if="progress.show"
          style="width: 300px; margin-top: 10px"
          :percentage="progress.value"
          :format="ProgressFormat"
        ></el-progress>
        <beUpload
          @getFile="getFile"
          v-show="!progress.show"
          :navName="'上传文件'"
          :accept="accept"
          :progress="progress"
        ></beUpload>
      </div>
    </div>

    <div class="projectBlock">
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2', color: '#000' }"
      >
        <el-table-column
          prop="startFile.fileName"
          label="文件名称"
          align="center"
          min-width="25%"
        >
        </el-table-column>

        <el-table-column
          prop="create_at"
          label="上传时间"
          align="center"
          min-width="25%"
        >
        </el-table-column>

        <el-table-column
          prop="startFile.size"
          label="文件大小"
          align="center"
          min-width="20%"
        >
        </el-table-column>

        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          width="200"
        >
          <template #default="scope">
            <div class="operations">
              <el-button
                type="primary"
                class="bt1"
                size="mini"
                @click="checkFileType(scope.row.startFile.url)"
                >查看信息</el-button
              >
              <el-button
                type="primary"
                class="bt1"
                size="mini"
                @click="del(scope.row.startupId)"
                style="width: 85px"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination
      background
      @current-change="changePage"
      layout="prev, pager, next"
      :page-size="Page.lim"
      :total="Page.total"
      class="paginations"
    >
    </el-pagination>

    <!-- 删除通知开始 -->
    <el-dialog
      title="删除文件"
      :visible.sync="dialogVisible1"
      width="600px"
      class="addDialog"
    >
      <span class="deleteContent">确定删除文件?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitDel" class="AllDialogBtn"
          >确认删除</el-button
        >
        <el-button @click="dialogVisible1 = false" class="AllDialogBtn"
          >取消</el-button
        >
      </span>
    </el-dialog>
    <!-- 删除通知结束-->

    <!-- 展示文档开始 -->
    <el-dialog
      title="展示文件"
      :visible.sync="showFile"
      top="50px"
      width="70vw"
      :fullscreen="fullShow"
      class="addDialog showDialog"
    >
      <template slot="title">
        <div class="DialogBox">
          <div class="DialogTitle">展示文件</div>
          <span
            v-if="Wordss['name'] != '视频'"
            class="changeFull el-icon-zoom-in"
            @click="fullShow = !fullShow"
          ></span>
        </div>
      </template>
      <!-- <el-button type="primary" style="margin-bottom: 20px;" @click="fullShow=!fullShow">全屏查看</el-button> -->
      <div class="showFileArea">
        <video-player
          class="video-player vjs-custom-skin"
          :playsinline="true"
          :options="videoDetail"
          @play="onPlayerPlay($event)"
          style="width: 100%; height: 100%"
          v-if="Wordss['name'] == '视频'"
        ></video-player>
        <vword
          style="width: 100%; height: 100%; overflow: auto"
          class="fullStyle"
          v-if="
            Wordss['type'] != 'pdf' &&
            Wordss['name'] != '图片' &&
            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.vue";
import vpdf from "@/components/vpdf.vue";
import vword from "@/components/vword.vue";
import full from "core-js/full";
// import { Header } from 'element-ui';
export default {
  components: { beUpload, vpdf, vword },
  data() {
    return {
      fullShow: false,
      accept: "*",
      // showFileType: 0,
      dialogVisible1: false,
      loading: false,
      delId: "",
      input: "",
      tableData: [],
      Page: {
        nowPage: 1,
        total: 0,
        lim: 8,
      },
      progress: {
        value: 50,
        show: false,
      },
      // ProjectEndLookFile:{url:"",type:""},
      showFile: false,
      showFileUrl: "",
      Wordss: { type: "", name: "" },
      canonical: {
        Image:
          /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
        File: /^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i,
        video:
          /^https?:\/\/(.+\/)+.+(\.(avi|wmv|mpg|mpeg|mov|rm|ram|mp4|swf|flv))$/i,
      },
      videoDetail: {},
      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: {},
    };
  },
  methods: {
    //展示文件
    checkFileType(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);
      }
      if (this.canonical.video.test(url)) {
        this.Wordss = { type: type, name: "视频" };
        this.videoDetail = {};
        this.playerOptions.sources[0].src = url;
        this.videoDetail = this.playerOptions;
        return console.log(this.Wordss);
      } else return (this.Wordss = { type: type, name: type });
    },
    switchVideo(media) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() {},
    del(Id) {
      this.delId = Id;
      this.dialogVisible1 = true;
    },
    commitDel() {
      this.ajax
        .post(this.$store.state.api + "/UpdateFirmFileState", {
          uid: this.$store.state.userInfo.userid,
          sid: this.delId,
          st: 1,
        })
        .then((res) => {
          if (res.data == 1) {
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
          this.getData();
          this.dialogVisible1 = false;
          this.delId = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changePage(newPage) {
      this.Page.nowPage = newPage;
      this.getData();
    },
    getFile(val) {
      console.log(val);
      this.ajax
        .post(this.$store.state.api + "/UploadFirmFile", {
          uid: this.$store.state.userInfo.userid,
          file: JSON.stringify(val),
        })
        .then((res) => {
          if (res.data == 1) {
            this.$message.success("上传成功");
          } else {
            this.$message.error("上传失败");
          }
          this.getData();
        });
    },
    getData() {
      this.loading = true;
      this.tableData = [];
      this.ajax
        .get(this.$store.state.api + "/GetFirmFile", {
          uid: this.$store.state.userInfo.userid,
          tit: this.input,
          page: this.Page.nowPage,
          lim: this.Page.lim,
        })
        .then((res) => {
          res.data[0].forEach((item) => {
            item["startFile"] = JSON.parse(item["startFile"]);
            this.tableData.push(item);
          });
          this.Page.total = res.data[1][0]["total"];
          this.progress.show = false;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    ProgressFormat(value) {
      return value == 100 ? "100%" : `${value}%`;
    },
  },
  watch: {
    input: {
      handler() {
        immediate: true;
        deep: true;
        this.getData();
      },
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
  
  <style lang="less">
.firm {
  width: 100%;
  height: 100%;
  position: relative;

  .addDialog {
    .el-dialog {
      border-radius: 5px;
      overflow: hidden;
    }
    .el-dialog__body {
      text-align: center;
    }
    .deleteContent {
      width: 100%;
      margin: 30px 0;
      font-size: 22px;
      color: #000;
    }
    .addDialogLogo {
      width: 60px;
      height: 30px;
      display: flex;
      justify-content: center;
      border-radius: 5px;
      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;
      }
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      // .btn5 {
      //   font-size: 16px;
      // }
    }
  }

  .btn {
    //上传文件
    width: 100px;
    height: 35px;
    font-size: 16px;
    background: #477edd;
  }
}
.upFile {
  height: 40px !important;
  width: auto;
}

/deep/ .video-player > .video-js {
  height: 100%;
}
// #footerPage {
//   width: 100%;
//   position: absolute;
//   bottom: 0;
//   display: flex;
//   justify-content: flex-end;
// }
</style>