dev/dcp-web-gate/src_old/views/NationalregionalCommissions/CommitteeCommentsAndSuggestionsDetail.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>
            </div>
          </div>
          <div class="content">
            <div class="title" style="text-align: center">
              <span>{{ this.viewsOnDetails.title }}</span>
            </div>
            <div class="nav" style="margin-top: 10px">
              <div class="navLeft">
                <span>{{ $t("common.proposer") }}:</span>
                <span style="margin-left: 10px">{{
                  this.viewsOnDetails.applyPeopleName
                }}</span>
              </div>
              <div class="navRight" style="margin-left: 50px">
                <span>{{ $t("common.releaseTime") }}:</span>
                <span style="margin-left: 10px">{{
                  this.viewsOnDetails.createDate
                }}</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="text">
              <p>
                {{ this.viewsOnDetails.abstractInfo }}
              </p>
            </div>
            <div class="attachment">
              <div class="contentFirst" style="margin-left: 59px">
                <div class="mainBody">
                  <span>{{ $t("common.text") }} :</span>
                </div>
                <div style="margin-left: 50px; margin-top: 20px">
                  <!-- <div class="img">
                    <img
                      style="display: inline-block; width: 20px; height: 20px"
                      src="@/assets/img/committeeWorkSpace/Frame@2x.png"
                      alt=""
                    />
                  </div> -->
                  <div
                    class="uploadContent"
                    style="margin-left: 25px; margin-top: -30px; width: 380px"
                  >
                    <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
                      :on-exceed="handleExceed"
                      :file-list="bodyTheList"
                    >
                    </el-upload>
                  </div>
                </div>
              </div>

              <div
                class="contentSecond"
                style="margin-top: 20px; margin-left: 59px"
              >
                <div class="mainBody">
                  <span>{{ $t("common.enclosure") }} :</span>
                </div>
                <div style="margin-left: 50px; margin-top: 20px">
                  <!-- <div class="img">
                    <img
                      style="display: inline-block; width: 20px; height: 20px"
                      src="@/assets/img/committeeWorkSpace/Frame@2x.png"
                      alt=""
                    />
                  </div> -->
                  <div
                    class="uploadContent"
                    style="margin-left: 25px; margin-top: -30px; width: 380px"
                  >
                    <el-upload
                      style="margin-left: 24px"
                      class="upload-demo"
                      disabled
                      action="/api/nationregioncomittee-service/nrc/nrcCommitteeDocumentAnnouncements/uploadFile"
                      :on-preview="handlePreview1"
                      :on-remove="handleRemove1"
                      :before-remove="beforeRemove1"
                      :before-upload="beforeUpload1"
                      :on-success="handleAvatarSuccessAnnex1"
                      multiple
                      :on-exceed="handleExceed1"
                      :file-list="abstractList"
                    >
                    </el-upload>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="top2">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="allApplication">
              <p>{{ $t("common.approval") }}</p>
            </div>
          </div>
          <div class="table">
            <el-table
              :data="approvalHistory"
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{
                textAlign: 'center',
                background: '#fafafa',
              }"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="handleCondition"
                :label="$i18n.locale === 'zh' ? '环节' : 'Link'"
                width="width"
              >
              </el-table-column>
              <el-table-column
                prop="handlerName"
                :label="$i18n.locale === 'zh' ? '人员' : 'Personnel'"
                width="width"
              >
              </el-table-column>
              <el-table-column
                prop="handleTime"
                :label="$i18n.locale === 'zh' ? '处理时间' : 'Process Time'"
                width="width"
              >
              </el-table-column>
              <el-table-column
                prop="handleResult"
                :label="$i18n.locale === 'zh' ? '处理结果' : 'Process Result'"
                width="width"
              >
              </el-table-column>
              <el-table-column
                prop="handleNode"
                :label="$i18n.locale === 'zh' ? '处理情况' : 'Process State'"
                width="width"
              >
              </el-table-column>
              <el-table-column
                prop="handleOpinion"
                :label="$i18n.locale === 'zh' ? '处理意见' : 'Process Opinion'"
                width="width"
              >
              </el-table-column>
            </el-table>
          </div>

          <div class="top3">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="allApplication">
              <p>{{ $t("common.reply") }}</p>
            </div>
          </div>

          <div class="replyInput">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              :placeholder="$t('common.pleaseInput')"
              maxlength="200"
              show-word-limit
              :autosize="{ minRows: 7, maxRows: 8 }"
              :clearable="true"
              ref="reply"
            ></el-input>
            <div class="lowerBotton">
              <el-button
                @click="commentsReply"
                style="width: 90px"
                type="primary"
                >{{ $t("common.submit") }}</el-button
              >
              <el-button style="width: 90px" @click="funClear">{{
                $t("common.reset")
              }}</el-button>
            </div>
          </div>

          <div style="display: flex" class="replyText">
            <div class="textImg">
              <img
                style="display: block; width: 15px; height: 15px"
                src="@/assets/img/committeeWorkSpace/tishi.png"
                alt=""
              />
            </div>
            <p>{{ $t("common.replyInput") }}</p>
          </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 {
  getOpinionTheSuggestionDetail,
  suggestionReply,
  uploadfile,
} from "@/api/committee/committeeWorkSpace";
export default {
  name: "CommitteeCommentsAndSuggestionsDetail",
  props: ["category", "detailID"],
  components: {
    Screen,
  },
  data() {
    return {
      textarea: "",
      titleIndex: 0,
      islogin: true,
      commentContent: "",
      search: "",
      screen1s: {
        value: "common.type",
        item: [],
      },
      screen1def: null,
      screen2Item: null,
      fileList: [],
      fileList1: [],
      viewsOnDetails: [],
      approvalHistory: [],
      bodyTheList: [],
      abstractList: [],
    };
  },
  watch: {
    "$i18n.locale"() {},
  },
  mounted() {
    window.scrollTo(0, 0);
    this.initData();
    console.log(this.detailID);
  },
  destroyed() {},
  methods: {
    initData() {
      this.forCommentsSuggestionsForDetails();
    },

    // 获取意见与建议详情接收
    forCommentsSuggestionsForDetails() {
      var params = this.detailID;
      getOpinionTheSuggestionDetail(params).then((res) => {
        this.viewsOnDetails = res.data.nrcApply;
        this.approvalHistory = res.data.nrcApprovalHistorys
          .reverse()
          .slice(0, 3);
        if (res.data.files) {
          res.data.files.forEach((item) => {
            if (item.type == "2") {
              let obj = {};
              obj.name = item.fileNameDisplay;
              obj.url = item.filePath;
              obj.type = item.type;
              this.bodyTheList.push(obj);
            }
            if (item.type == "3") {
              let obj = {};
              obj.name = item.fileNameDisplay;
              obj.url = item.filePath;
              obj.type = item.type;
              this.abstractList.push(obj);
            }
          });
        }
      });
    },
    // 意见回复
    commentsReply() {
      let params = {
        accepter: this.viewsOnDetails.accepter,
        accepterCommittee: this.viewsOnDetails.acceptCommittee,
        applyId: this.detailID,
        replyContent: this.textarea,
      };
      console.log(params);
      suggestionReply(params).then((res) => {
        if (res.data == "处理成功") {
          this.funClear();
          this.$message({
            message: "回复成功",
            type: "success",
          });
        }
      });
    },

    // 上传相关
    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("服务器繁忙");
        }
      });
    },

    // 上传相关
    handleRemove1(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);
    },

    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload1(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;
      }
    },

    handleAvatarSuccessAnnex1(res, file) {
      let obj = {};
      obj.fileNameDisplay = file.name;
      obj.filePath = res.data.filePath;
      obj.type = 2;
      this.filename.push(obj);
      console.log(this.filename);
    },
    handleExceed1(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handlePreview1(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("服务器繁忙");
        }
      });
    },

    funClear() {
      this.textarea = "";
    },
    close() {
      if (this.category === "2") {
        this.$emit("commentDetail", "comments");
      } else {
        var params = {
          name: "workspace",
          type: false,
        };
        this.$emit("applicationType", params);
      }
    },
    handleCurrentChange() {},

    back() {
      // this.$router.go(-1);
      this.$router.back();
    },
    screenBack() {},
    changeTitle(i) {
      this.titleIndex = i;
    },
  },
};
</script>
<style scoped>
::v-deep .el-upload-list__item-name {
  color: #4790f7;
  text-decoration: underline;
}
/* 去除文本框右下角斜杠 */
::v-deep .el-textarea__inner {
  resize: 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 {
  height: 300px;
  position: relative;
  top: 310px;
}
.attachment .mainBody {
  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: 441px;
}
.attachment .upload2 {
  position: absolute;
  left: 107px;
  top: 480px;
}

.attachment .mainBody1 {
  position: absolute;
  left: 59px;
  top: 411px;
  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: 1300px;
  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: 1167px;
  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>