dev/dcp-web-gate/src_old/views/NationalregionalCommissions/CommitteeCommentsAndSuggestionsDetailSubmit.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">
                  <!-- <ul>
                    <li v-for="(item, index) in bodyTheList" :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="margin-left: 25px; margin-top: -30px; width: 380px"
                  >
                    <!-- /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
                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">
                  <!-- <ul>
                    <li v-for="(item, index) in abstractList" :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="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="filesList1"
                    >
                    </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.recipientReply") }}</p>
            </div>
          </div>

          <div v-if="showContent" class="replyResult">
            <ul>
              <li
                style="margin-top: 10px"
                v-for="(item, index) in replyList"
                :key="item.id"
              >
                <span
                  style="
                    font-weight: 500;
                    font-size: 14px;
                    font-family: 'Noto Sans SC';
                    font-weight: 700;
                    color: rgba(0, 0, 0, 0.85);
                  "
                  >{{ item.accepter }}</span
                >&nbsp;&nbsp;
                <span
                  style="
                    font-weight: 500;
                    font-size: 14px;
                    font-family: 'Noto Sans SC';
                    font-weight: 700;
                    margin: 0 10px 0 10px;
                    color: rgba(0, 0, 0, 0.85);
                  "
                  >{{ item.accepterCommittee }}</span
                >
                <span
                  style="
                    font-weight: 500;
                    font-size: 14px;
                    font-family: 'Noto Sans SC';
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.65);
                  "
                  >{{ $t("common.recipient") }}：</span
                >
                <p style="color: rgba(0, 0, 0, 0.85)">
                  {{ item.replyContent }}
                </p>
                <p
                  style="
                    color: rgba(0, 0, 0, 0.65);
                    font-size: 12px;
                    font-family: 'Noto Sans SC';
                    font-style: normal;
                    font-weight: 400;
                  "
                >
                  {{ item.updateDate }}
                </p>
                <div
                  style="
                    border: 1px solid rgba(0, 0, 0, 0.15);
                    margin-top: 20px;
                  "
                ></div>
              </li>
            </ul>
          </div>
          <div v-else class="replyResult">
            <el-empty :description="$t('common.noData')"></el-empty>
          </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,
  uploadfile,
} from "@/api/committee/committeeWorkSpace";
import Screen from "@/components/screen";
export default {
  name: "CommitteeCommentsAndSuggestionsDetailSubmit",
  props: ["category", "detailID"],
  components: {
    Screen,
  },
  data() {
    return {
      data: [
        { title: "真不错1", id: 1, time: "2021-10-31", type: "公文" },
        { title: "真不错2", id: 2, time: "2021-10-31", type: "公文" },
        // { title: "真不错3", id: 3, time: "2021-10-31", type: "公文" },
        // { title: "真不错4", id: 4, time: "2021-10-31", type: "公文" },
        // { title: "真不错5", id: 5, time: "2021-10-31", type: "公文" },
      ],
      //   dataFrom: {},
      textarea: "",
      titleIndex: 0,
      islogin: true,
      commentContent: "",
      search: "",
      screen1s: {
        value: "common.type",
        item: [],
      },
      screen1def: null,
      screen2Item: null,
      fileList: [],
      fileList1: [],
      viewsOnDetails: [],
      approvalHistory: [],
      replyList: [],
      filesList: [],
      filesList1: [],
      bodyTheList: [],
      abstractList: [],
      showContent: null,
    };
  },
  watch: {
    "$i18n.locale"() {},
  },
  mounted() {
    window.scrollTo(0, 0);
    this.initData();
  },
  destroyed() {},
  methods: {
    initData() {
      this.toObtainOpinionsProposal();
    },

    // 获取意见与建议提交
    toObtainOpinionsProposal() {
      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.filesList.push(obj);
            }
            if (item.type == "3") {
              let obj = {};
              obj.name = item.fileNameDisplay;
              obj.url = item.filePath;
              obj.type = item.type;
              this.filesList1.push(obj);
            }
          });
        }
        var data = res.data.nrcAccepterReplys;
        if (JSON.stringify(data) !== "{}") {
          if(res.data.nrcAccepterReplys){
            this.replyList = res.data.nrcAccepterReplys.reverse().slice(0, 2);
          }
          this.showContent = true;
        } else {
          this.showContent = false;
        }
      });
    },
    close() {
      if (this.category === "3") {
        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;
    },

    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);
    },
    handleAvatarSuccessAnnex1(res, file) {
      let obj = {};
      obj.fileNameDisplay = file.name;
      obj.filePath = res.data.filePath;
      obj.type = 3;
      this.filename1.push(obj);
      console.log(this.filename1);
    },
    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;
      }
    },
    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;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.filename.forEach((item, index) => {
        if (file.name == item.fileNameDisplay) {
          this.filename.splice(index, 1);
        }
      });
      this.fileList.forEach((item, index) => {
        if (file.name == item.name) {
          this.fileList.splice(index, 1);
        }
      });
    },
    handleRemove1(file, fileList) {
      this.filename1.forEach((item, index) => {
        if (file.name == item.fileNameDisplay) {
          this.filename1.splice(index, 1);
        }
      });
      this.fileList1.forEach((item, index) => {
        if (file.name == item.name) {
          this.fileList1.splice(index, 1);
        }
      });

      console.log(file, fileList);
    },
    handlePreview(file, fileList) {
      console.log(file, fileList);
      let param = {
        fileName: file.name,
        filePath: file.url,
      };
      uploadfile(param).then((res) => {
        console.log(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("服务器繁忙");
        }
      });
    },
    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("服务器繁忙");
        }
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handleExceed1(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style scoped>
::v-deep .el-upload-list__item-name {
  color: #4790f7;
  text-decoration: underline;
}
.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 {
  /* 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: 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;
  /* height: 100%; */
  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: 180px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #375586;
}
/*  */
.replyResult {
  width: 1123px;
  height: 292px;
  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: 1250px;
  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>