dev/dcp-web-gate/src_old/views/NationalregionalCommissions/CommitteeNoticeListDetail.vue

<!-- 委员会通知公告详情 -->
<template>
  <div class="autoBox box1" style="position: relative; background: #f5f5f5">
    <div class="center" style="margin-top: -20px">
      <div class="left">
        <div class="centerLeft1">
          <div class="top">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="allApplication">
              <!-- <span>{{ $t("common.commentsDetail") }}</span> -->
              <!--<span>{{ $t("common.noticeDetail") }}</span>-->
            </div>
          </div>
          <div class="content">
            <div class="title" style="text-align: center">
              <span>{{ this.documentListForDetails.title }}</span>
            </div>
            <div class="nav" style=" margin-top: 10px">
              <div class="navLeft">
                <span>{{ $t("common.releasePeople") }}:</span>
                <span style="margin-left: 10px">{{
                  this.documentListForDetails.releasePeopleName
                }}</span>
              </div>
              <div class="navRight" style="margin-left:50px">
                <span>{{ $t("common.releaseTime") }}:</span>
                <span style="margin-left: 10px">{{
                  this.documentListForDetails.releaseTime
                }}</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="text">
              <p :title="this.documentListForDetails.content">
                {{ this.documentListForDetails.content }}
<!--                <span v-if="this.documentListForDetails.content.length > 500">...</span>-->
              </p>
            </div>
            <div class="attachment">
              <div class="mainBody1">
                <span>{{ $t("common.enclosure") }} :</span>
              </div>
              <div class="upload1" style="dispaly: flex">
                <!-- <ul>
                  <li v-for="(item, index) in documentList" :key="item.id">
                    <div>
                      <img
                        style="display: inline-block; width: 20px; height: 20px"
                        src="@/assets/img/committeeWorkSpace/Frame@2x.png"
                        alt=""
                      />
                      <span
                        style="
                          color: #569af8;
                          text-decoration: underline;
                          cursor: pointer;
                        "
                        >{{ item.fileNameDisplay }}</span
                      >
                    </div>
                  </li>
                </ul> -->

                <div
                  class="uploadContent"
                  style=""
                >
                  <!-- /api/nationregioncomittee-service/nrc/nrcApplys/uploadFile -->
                  <el-upload
                    style="margin-left: 24px"
                    class="upload-demo"
                    disabled
                    action="/api/nationregioncomittee-service/nrc/nrcCommitteeDocumentAnnouncements/uploadFile"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :before-upload="beforeUpload"
                    :on-success="handleAvatarSuccessAnnex"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="filesList"
                  >
                  </el-upload>
                </div>
              </div>
            </div>
          </div>
          <div class="close">
            <el-button
              @click="close"
              style="width: 120px; height: 40px"
              type="primary"
              >{{ $t("common.close") }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getNotificationDetail,
  uploadfile,
} from "@/api/committee/committeeWorkSpace";
import Screen from "@/components/screen";
export default {
  name: "CommitteeNoticeListDetail",
  props: ["detailID", "category"],
  components: {
    Screen,
  },
  data() {
    return {
      documentListForDetails: [],
      documentList: [],
      fileList: [],
      showContent: null,
      filesList: [],
    };
  },
  watch: {
    "$i18n.locale"() {},
  },
  mounted() {
    window.scrollTo(0, 0);
    this.initData();
  },
  destroyed() {},
  methods: {
    // 上传相关
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.filename.forEach((item, index) => {
        if (file.name == item.fileNameDisplay) {
          this.filename.splice(index, 1);
        }
      });
      console.log(this.filename);
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");
      if (
        ["zip", "pdf", "doc", "docx", "excel", "xls", "xlsx"].indexOf(
          FileExt.toLowerCase()
        ) === -1
      ) {
        this.$message({
          type: "warning",
          message: "请上传zip,pdf,word,excel的附件！",
        });
        this.fileList.splice(this.fileList.indexOf(file), 1);
        return false;
      }
      this.isLt2k = file.size / 1024 / 1024 < 10 ? "1" : "0";
      if (this.isLt2k === "0") {
        if (this.$i18n.locale.toUpperCase() == "ZH") {
          this.$message({
            message: "上传文件大小不能超过10M!",
            type: "error",
          });
        } else {
          this.$message({
            message: "Upload file size cannot exceed 10m!",
            type: "error",
          });
        }
        return false;
      }
    },

    handleAvatarSuccessAnnex(res, file) {
      let obj = {};
      obj.fileNameDisplay = file.name;
      obj.filePath = res.data.filePath;
      obj.type = 2;
      this.filename.push(obj);
      console.log(this.filename);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    initData() {
      this.accessToDocumentsNoticeDetails();
    },

    // 获取公文通知详情
    accessToDocumentsNoticeDetails() {
      var params = this.detailID;
      getNotificationDetail(params).then((res) => {
        console.log(res);
        this.documentListForDetails = res.data.nrcCommitteeDocumentAnnouncement;
        this.documentListForDetails.releaseTime = this.documentListForDetails.releaseTime.substr(0,10);
        res.data.files.forEach((item) => {
          let obj = {};
          obj.name = item.fileNameDisplay;
          obj.url = item.filePath;
          obj.type = item.type;
          this.filesList.push(obj);
        });
      });
    },

    funClear() {
      this.textarea = "";
    },
    close() {
      if (this.category === "1") {
        this.$emit("noticeDetail", "documentList");
      } else if (this.category === "2") {
        this.$emit("noticeDetail", "noticeList");
      } else {
        var params = {
          name: "workspace",
          type: true,
        };
        this.$emit("applicationType", params);
      }
    },
    handleCurrentChange() {},

    back() {
      this.$router.back();
    },
    screenBack() {},
    changeTitle(i) {
      this.titleIndex = i;
    },

    // 上传相关
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.filename.forEach((item, index) => {
        if (file.name == item.fileNameDisplay) {
          this.filename.splice(index, 1);
        }
      });
      console.log(this.filename);
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");
      if (
        ["zip", "pdf", "doc", "docx", "excel", "xls", "xlsx"].indexOf(
          FileExt.toLowerCase()
        ) === -1
      ) {
        this.$message({
          type: "warning",
          message: "请上传zip,pdf,word,excel的附件！",
        });
        this.fileList.splice(this.fileList.indexOf(file), 1);
        return false;
      }
      this.isLt2k = file.size / 1024 / 1024 < 10 ? "1" : "0";
      if (this.isLt2k === "0") {
        if (this.$i18n.locale.toUpperCase() == "ZH") {
          this.$message({
            message: "上传文件大小不能超过10M!",
            type: "error",
          });
        } else {
          this.$message({
            message: "Upload file size cannot exceed 10m!",
            type: "error",
          });
        }
        return false;
      }
    },

    handleAvatarSuccessAnnex(res, file) {
      let obj = {};
      obj.fileNameDisplay = file.name;
      obj.filePath = res.data.filePath;
      obj.type = 2;
      this.filename.push(obj);
      console.log(this.filename);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handlePreview(file, fileList) {
      console.log(file, fileList);
      let param = {
        fileName: file.name,
        filePath: file.url,
      };
      uploadfile(param).then((res) => {
        const content = res;
        if (content) {
          const blob = new Blob([content]); //构造一个blob对象来处理数据
          const fileName = decodeURIComponent(res.fileName);
          //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          //IE10以上支持blob但是依然不支持download
          if ("download" in document.createElement("a")) {
            //支持a标签download的浏览器
            const link = document.createElement("a"); //创建a标签
            link.download = file.name; //a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); //执行下载
            URL.revokeObjectURL(link.href); //释放url
            document.body.removeChild(link); //释放标签
          } else {
            //其他浏览器
            navigator.msSaveBlob(blob, fileName);
          }
        } else {
          this.$message.error("服务器繁忙");
        }
      });
    },
  },
};
</script>
<style scoped>
::v-deep .el-upload-list__item-name {
  color: #4790f7;
  text-decoration: underline;
}
/* ::v-deep .el-upload-list__item-name i {
  display: none;
} */
.content .title {
  width: 600px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  left: 290px;
  top: 100px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
  font-feature-settings: "tnum" on, "lnum" on;
  color: rgba(0, 0, 0, 0.85);
}
.content .nav {
  width: 1180px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  font-feature-settings: "tnum" on, "lnum" on;
  color: rgba(0, 0, 0, 0.65);
}
.content .line {
  position: absolute;
  left: 20px;
  top: 196px;
  width: 1159px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.content .text {
  position: absolute;
  left: 59px;
  top: 209px;
  width: 1087px;
  text-indent: 2em;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  font-feature-settings: "tnum" on, "lnum" on;
  color: rgba(0, 0, 0, 0.65);
}
.attachment .mainBody {
  position: absolute;
  left: 59px;
  top: 318px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 0px;
  display: flex;
  align-items: center;
  text-indent: 30px;
  font-feature-settings: "tnum" on, "lnum" on;
  color: rgba(0, 0, 0, 0.95);
}
.attachment .upload {
  position: absolute;
  left: 107px;
  top: 350px;
}
.attachment .upload1 {
  position: absolute;
  left: 107px;
  top: 400px;
}
.attachment .upload2 {
  position: absolute;
  left: 107px;
  top: 380px;
}

.attachment .mainBody1 {
  position: absolute;
  left: 59px;
  top: 410px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 0px;
  display: flex;
  align-items: center;
  text-indent: 30px;
  font-feature-settings: "tnum" on, "lnum" on;
  color: rgba(0, 0, 0, 0.95);
}
.top2 {
  position: absolute;
  top: 603px;
}
.top3 {
  position: absolute;
  top: 896px;
}
.table {
  width: 1123px;
  background: #ddd;
  position: absolute;
  left: 33px;
  top: 680px;
}
.box1 {
  padding: 0 0 20px 0;
  position: absolute;
}
.center {
  display: flex;
}
.topImg img {
  display: inline-block;
  width: 1200px;
  height: 324px;
}
.centerLeft1 {
  height: 650px;
  width: 1200px;
  border-radius: 0px;
  background: #fff;
}
.centerLeft1 .tab {
  position: absolute;
  right: 100px;
  top: 70px;
  display: flex;
  align-items: center;
}
.centerLeft1 .nav {
  position: absolute;
  top: 139px;
  left: 19px;
}
.list .title {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
  font-feature-settings: "tnum" on, "lnum" on;
}
.list .center {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  text-indent: 2em;
}
.left {
  position: relative;
}
.top .top1 {
  position: absolute;
  width: 5.5px;
  height: 10.5px;
  left: 20px;
  top: 35px;
  background: #376ac7;
  z-index: 1;
}
.top .top2 {
  position: absolute;
  width: 5.5px;
  height: 15px;
  left: 20px;
  top: 35px;
  background: #83bd50;
}
.top .allApplication {
  position: absolute;
  height: 22px;
  left: 34px;
  top: 31px;
}

.top2 .top1 {
  position: absolute;
  width: 5.5px;
  height: 10.5px;
  left: 20px;
  top: 35px;
  background: #376ac7;
  z-index: 1;
}
.top2 .top2 {
  position: absolute;
  width: 5.5px;
  height: 15px;
  left: 20px;
  top: 35px;
  background: #83bd50;
}
.top2 .allApplication {
  position: absolute;
  height: 22px;
  left: 34px;
  top: 15px;
}
.top2 .allApplication p {
  width: 180px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #375586;
}

/*  */
.top3 .top1 {
  position: absolute;
  width: 5.5px;
  height: 10.5px;
  left: 20px;
  top: 35px;
  background: #376ac7;
  z-index: 1;
}
.top3 .top2 {
  position: absolute;
  width: 5.5px;
  height: 15px;
  left: 20px;
  top: 35px;
  background: #83bd50;
}
.top3 .allApplication {
  position: absolute;
  height: 22px;
  left: 34px;
  top: 15px;
}
.top3 .allApplication p {
  width: 80px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #375586;
}
/*  */
.replyInput {
  width: 1123px;
  height: 146px;
  position: absolute;
  top: 970px;
  left: 33px;
  /* background: #ddd; */
}
.replyText {
  position: absolute;
  left: 67px;
  top: 1115px;
}
.replyText .textImg {
  /* position: absolute;
    left: 49px;
    top: 1115px; */
  margin-top: 17px;
  margin-right: 5px;
}
.replyText p {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  font-feature-settings: "tnum" on, "lnum" on;
  color: rgba(0, 0, 0, 0.45);
}
.close {
  position: absolute;
  top: 567px;
  left: 535px;
}

.top .allApplication span {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #375586;
}
.top .notice {
  position: absolute;
  height: 22px;
  left: 160px;
  top: 32px;
}
.top .notice span {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: rgba(10, 10, 10, 0.85);
}
.top .more span {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #4790f7;
}

/* ::v-deep .el-input__inner {
  height: 146px;
} */
.lowerBotton {
  position: absolute;
  bottom: 0;
  right: 70px;
}
</style>