dev/dcp-web-gate/src_old/views/NationalregionalCommissions/CommitteeInformationList.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.allInformationList") }}</span>
            </div>
            <div @click="back" class="more">
              <span>{{ "<" }}{{ $t("common.return") }}</span>
            </div>
          </div>
          <div class="area">
            <Screen
              v-bind:screen1="screen1s"
              :screen2="screen2s"
              :screen1def="screen1def"
              :screen2Item="screen2Item"
              @screenBack="screenBack"
            ></Screen>
            <div class="choice">
              <el-select
                clearable
                @clear="reset1"
                v-model="regionalNationalCommission"
                style="width: 150px; height: 20px"
                :placeholder="$t('common.select')"
              >
                <el-option
                  v-for="item in regionalNationalCommissionList"
                  :key="item.id"
                  :label="$i18n.locale === 'en' ? item.committeeNameEn : item.committeeName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="search" style="margin-top: 10px">
              <span
                style="
                  margin-right: 20px;
                  font-size: 14px;
                  margin-left: 40px;
                  font-weight: 700;
                  color: rgb(0, 0, 0);
                "
                >{{ $t("common.keyWord") }}&nbsp;:</span
              >
              <el-input
                style="width: 200px"
                v-model="search"
                :placeholder="$t('common.pleaseEnter')"
              ></el-input>
              <el-button
                @click="searchCommittee"
                style="margin-left: 20px"
                type="primary"
                >{{ $t("common.query") }}</el-button
              >
              <el-button @click="reset">{{ $t("common.reset") }}</el-button>
            </div>
          </div>
          <div v-if="showContent" style="width: 100%" :class="$i18n.locale=='zh'?'content':'contentEn'">
            <ul>
              <li
                v-for="(item, index) in allInformation"
                style="margin-left: 25px; margin-right: 15px; float: left"
                @click="toDetail(item)"
              >
                <el-card>
                  <img
                    style="width: 208px; height: 288px; display: block"
                    :src="'data:image/jpeg;base64,'+item.coverBase64"
                    alt=""
                  />
                </el-card>
                <div class="title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                  <span :title="item.title">{{ item.title }}</span>
                </div>
                <!--<div class="committee">
                  <span>{{ item.title }}</span>
                </div>-->
                <div class="committee" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                  <span :title="item.reserveFour">{{ item.reserveFour }}</span>
                </div>
                <div class="Time">
                  <span>{{
                    item.createDate | time("YYYY-MM-DD HH:mm:ss")
                  }}</span>
                </div>
              </li>
            </ul>
          </div>
          <div v-else :class="$i18n.locale=='zh'?'content':'contentEn'">
            <div style="margin-left: 550px">
              <el-empty :description="$t('common.noData')"></el-empty>
            </div>
          </div>
          <!-- 分页 -->
          <div class="pag">
            <el-pagination
              type="index"
              background
              :prev-text= "prevText"
              :next-text="nextText"
              layout="prev, pager, next, total"
              :page-sizes="[8, 20, 50, 100, 200]"
              :total="total - 0"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            ></el-pagination>
          </div>
          <!--<div class="pag">
            <el-pagination
                    type="index"
                    background
                    layout="prev, pager, next"
                    :page-size="8"
                    :total="total - 0"
                    @current-change="handleCurrentChange"
            ></el-pagination>
          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import {
  toObtainListAllInformation,
  allDataQuery,
  queryNationalCommittee,
} from "@/api/committee/committeeWorkSpace";
import Screen from "@/components/screen";
export default {
  name: "CommitteeInformationList",
  props: ["isDistinguish"],
  components: {
    Screen,
  },
  data() {
    return {
      prevText:"上一页",
      nextText:"下一页",
      data: [
        {
          url: "https://img0.baidu.com/it/u=1612726526,4275795108&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500",
          id: 1,
          time: "2021-10-31",
          type: "哥伦比亚互联网研究",
        },
        {
          url: "https://img0.baidu.com/it/u=1612726526,4275795108&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500",
          id: 2,
          time: "2021-10-31",
          type: "全球能源互联网解决无电、贫困、健康问题行动计划",
        },
        {
          url: "https://img0.baidu.com/it/u=1612726526,4275795108&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500",
          id: 3,
          time: "2021-10-31",
          type: "公文",
        },
        {
          url: "https://img0.baidu.com/it/u=1612726526,4275795108&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500",
          id: 4,
          time: "2021-10-31",
          type: "公文",
        },
        {
          url: "https://img0.baidu.com/it/u=1612726526,4275795108&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500",
          id: 5,
          time: "2021-10-31",
          type: "公文",
        },
        {
          url: "https://img0.baidu.com/it/u=1612726526,4275795108&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500",
          id: 6,
          time: "2021-10-31",
          type: "公文",
        },
        {
          url: "https://img0.baidu.com/it/u=1612726526,4275795108&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500",
          id: 7,
          time: "2021-10-31",
          type: "公文",
        },
      ],
      pageSize:undefined,
      search: "",
      screen1s: {
        value: "common.regionalCommissions",
        item: [],
      },
      screen2s: {
        value: "common.Byletter",
        item: [
          {
            value: null,
            ifValue: true,
            label: "common.All",
          },
          {
            ifValue: false,
            value: "A",
            label: "A",
          },
          {
            ifValue: false,
            value: "B",
            label: "B",
          },
          {
            ifValue: false,
            value: "C",
            label: "C",
          },
          {
            ifValue: false,
            value: "D",
            label: "D",
          },
          {
            ifValue: false,
            value: "E",
            label: "E",
          },
          {
            ifValue: false,
            value: "F",
            label: "F",
          },
          {
            ifValue: false,
            value: "G",
            label: "G",
          },
          {
            ifValue: false,
            value: "H",
            label: "H",
          },
          {
            ifValue: false,
            value: "I",
            label: "I",
          },
          {
            ifValue: false,
            value: "J",
            label: "J",
          },
          {
            ifValue: false,
            value: "K",
            label: "K",
          },
          {
            ifValue: false,
            value: "L",
            label: "L",
          },
          {
            ifValue: false,
            value: "M",
            label: "M",
          },
          {
            ifValue: false,
            value: "N",
            label: "N",
          },
          {
            ifValue: false,
            value: "O",
            label: "O",
          },
          {
            ifValue: false,
            value: "P",
            label: "P",
          },
          {
            ifValue: false,
            value: "Q",
            label: "Q",
          },
          {
            ifValue: false,
            value: "R",
            label: "R",
          },
          {
            ifValue: false,
            value: "S",
            label: "S",
          },
          {
            ifValue: false,
            value: "T",
            label: "T",
          },
          {
            ifValue: false,
            value: "U",
            label: "U",
          },
          {
            ifValue: false,
            value: "V",
            label: "V",
          },
          {
            ifValue: false,
            value: "W",
            label: "W",
          },
          {
            ifValue: false,
            value: "X",
            label: "X",
          },
          {
            ifValue: false,
            value: "Y",
            label: "Y",
          },
          {
            ifValue: false,
            value: "Z",
            label: "Z",
          },
        ],
      },
      screen1def: null,
      screen2Item: null,
      allInformation: [],
      regionalNationalCommission: "",
      regionalNationalCommissionList: [],
      regionalNationalCommissionListFull: [],
      total: "",
      pageNo: "",
      committee: "",
      letter: "",
      showContent: true,
    };
  },
  watch: {
    "$i18n.locale"() {
      this.accessToNationalCommittee();
      this.queryNationalCommittee();
      this.toObtainListAllInformation();
      if(this.$i18n.locale != 'en'){
        this.prevText="上一页";
        this.nextText="下一页";
      }else{
        this.prevText="Previous";
        this.nextText="Next";
      }

      this.regionalNationalCommissionList = new Array();
      if(this.$i18n.locale == "en"){
        for(let i=0;i<this.regionalNationalCommissionListFull.length;i++){
          if(this.regionalNationalCommissionListFull[i].committeeNameEn!="" && this.regionalNationalCommissionListFull[i].committeeNameEn!=null && this.regionalNationalCommissionListFull[i].committeeNameEn!=undefined){
            this.regionalNationalCommissionList.push(this.regionalNationalCommissionListFull[i]);
          }
        }
      }else{
        this.regionalNationalCommissionList = this.regionalNationalCommissionListFull;
      }
    },
    regionalNationalCommission: {
      handler() {
        this.committee = this.regionalNationalCommission;
        this.toObtainListAllInformation();
      },
      deep: true,
    },
  },
  filters: {
    time(date, type) {
      return moment(date).format(type);
    },
  },
  mounted() {
    window.scrollTo(0, 0);
    this.initData();
    if(this.$i18n.locale != 'en'){
      this.prevText="上一页";
      this.nextText="下一页";
    }else{
      this.prevText="Previous";
      this.nextText="Next";
    }
  },
  destroyed() {},
  methods: {
    initData() {
      this.toObtainListAllInformation();
      this.accessToNationalCommittee();
      this.queryNationalCommittee();
    },
    // 查询条件
    queryNationalCommittee() {
      allDataQuery().then((res) => {
        var data = res.data;
        if(this.$i18n.locale == 'en'){
          for (let i = 0; i < data.length; i++) {
            data[i].label = data[i].label2
          }
        }
        console.log(data);
        if (data) {
          this.screen1s.item = data || [];
          let labelmsg = "";
          if(this.$i18n.locale == "en"){
            labelmsg = "All";
          }else{
            labelmsg = "全部";
          }
          let both = {
            label: labelmsg,
            value: null,
          };
          this.screen1s.item.unshift(both);
        }
      });
    },
    // 获取国家委员会
    accessToNationalCommittee() {
      var id = this.committee ? this.committee : "";
      queryNationalCommittee(id).then((res) => {
        this.regionalNationalCommissionListFull = res.data;
        // this.regionalNationalCommissionList = res.data;
        console.log(res.data);
        if(this.$i18n.locale == "en"){
          for(let i=0;i<this.regionalNationalCommissionListFull.length;i++){
            if(this.regionalNationalCommissionListFull[i].committeeNameEn!="" && this.regionalNationalCommissionListFull[i].committeeNameEn!=null && this.regionalNationalCommissionListFull[i].committeeNameEn!=undefined){
              this.regionalNationalCommissionList.push(this.regionalNationalCommissionListFull[i]);
            }
          }
        }else{
          this.regionalNationalCommissionList = this.regionalNationalCommissionListFull;
        }
      });
    },
    // 获取全部资料列表
    toObtainListAllInformation() {
      var params = this.pageNo ? this.pageNo : "1";
      var pageSize = this.pageSize ? this.pageSize : "8";
      var query = this.committee ? this.committee : "";
      var query1 = this.letter ? this.letter : "";
      var queryConditions = this.search ? this.search : "";
      toObtainListAllInformation(params, pageSize, query, query1, queryConditions).then(
        (res) => {
          var data = res.data;
          if (JSON.stringify(data) !== "{}") {
            this.showContent = true;
            this.allInformation = res.data.nrcMaterialStorehouses;
            if(this.$i18n.locale == 'en'){
              for (let i = 0; i < this.allInformation.length; i++) {
                this.allInformation[i].reserveFour = this.allInformation[i].belongCommitteeEn
              }
            }
            this.total = res.data.page.totalCount;
            console.log(res);
          } else {
            this.showContent = false;
          }
        }
      );
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.toObtainListAllInformation();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.toObtainListAllInformation();
      window.scrollTo(0, 0);
    },
    toDetail(item) {
      this.$router.push({
        name: "CommitteeInformationListDetail",
        params: { id: item.id },
      });
    },
    searchCommittee() {
      this.toObtainListAllInformation();
    },
    reset() {
      this.search = "";
      this.toObtainListAllInformation();
    },
    // 清空选择框
    reset1() {
      this.toObtainListAllInformation();
    },
    back() {
      var params = {
        name: "workspace",
        type: false,
      };
      this.$emit("applicationType", params);
    },
    screenBack(data) {
      this.committee = data.click1;
      this.letter = data.click2;
      this.regionalNationalCommission = "";
      this.toObtainListAllInformation();
      this.accessToNationalCommittee();
    },
  },
};
</script>
<style scoped>
.box1 {
  padding: 0 0 20px 0;
  position: absolute;
}
.center {
  display: flex;
}
.topImg img {
  display: inline-block;
  width: 1200px;
  height: 324px;
}
.centerLeft1 {
  height: 1400px;
  width: 1200px;
  border-radius: 0px;
  background: #fff;
}
.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;
}
.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 {
  position: absolute;
  height: 16px;
  right: 21px;
  top: 31px;
}
.top .more span {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #4790f7;
}
.area {
  position: absolute;
  top: 100px;
}
.choice {
  position: absolute;
  right: 0;
  top: 55px;
}
.content {
  display: flex;
  overflow: auto;
  position: absolute;
  top: 300px;
  height: 63%;
}
.contentEn {
  display: flex;
  overflow: auto;
  position: absolute;
  top: 400px;
  height: 63%;
}
.contentEn .title {
  width: 208px;
  height: 30px;
  text-align: center;
  /*text-overflow: -o-ellipsis-lastline;*/
  overflow: hidden;
  text-overflow: ellipsis;
  /*display: -webkit-box;*/
  /*-webkit-line-clamp: 2;*/
  /*line-clamp: 2;*/
  -webkit-box-orient: vertical;
  margin-left: 15px;
  margin-top: 5px;
}
.contentEn .committee {
  height: 30px;
  max-width: 230px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  font-feature-settings: "tnum" on, "lnum" on;
}
.contentEn .Time {
  /* width: 208px; */
  height: 44px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  font-feature-settings: "tnum" on, "lnum" on;
}
.contentEn .title span {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.85);
}
.content .title {
  width: 208px;
  height: 30px;
  text-align: center;
  /*text-overflow: -o-ellipsis-lastline;*/
  overflow: hidden;
  text-overflow: ellipsis;
  /*display: -webkit-box;*/
  /*-webkit-line-clamp: 2;*/
  /*line-clamp: 2;*/
  -webkit-box-orient: vertical;
  margin-left: 15px;
  margin-top: 5px;
}
.content .committee {
  height: 30px;
  max-width: 230px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  font-feature-settings: "tnum" on, "lnum" on;
}
.content .Time {
  /* width: 208px; */
  height: 44px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  font-feature-settings: "tnum" on, "lnum" on;
}
.content .title span {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.85);
}
.pag {
  position: absolute;
  bottom: 0;
  right: 30%;
}
</style>