dev/dcp-web-gate/src_old/views/NationalregionalCommissions/CommitteeApplicationList.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 v-if="!isDistinguish">{{
                $t("common.allApplicationList")
              }}</span>
              <span v-else>{{ $t("common.myApplication") }}</span>
            </div>
            <div @click="back" class="more">
              <span>{{ "<" }}{{ $t("common.return") }}</span>
            </div>
          </div>
          <div class="area">
            <Screen
              v-bind:screen1="screen1s"
              :screen1def="screen1def"
              :screen2Item="screen2Item"
              @screenBack="screenBack"
            ></Screen>
            <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="searchTitle"
                style="margin-left: 20px; width: 90px"
                type="primary"
                >{{ $t("common.query") }}</el-button
              >
              <el-button @click="reset" style="width: 90px">{{
                $t("common.reset")
              }}</el-button>
            </div>
          </div>
          <div v-if="showContent" class="content">
            <div @click="toCreate" class="content1">
              <el-button icon="el-icon-plus" type="text">{{
                $t("common.createApplication")
              }}</el-button>
            </div>

            <div
              class="content2"
              v-for="(item, index) in allApplicationList"
              :key="item.id"
            >
              <div class="topText">
                <p class="title">{{ item.title }}</p>
                <p class="type">{{ item.applyTime }}</p>
                <div
                  class="test"
                  style="
                    width: 270px;
                    height: 20px;
                  "
                >
                  <!--<span
                    class="document"
                    style="
                      display: inline-block;
                      width: 90px;
                      margin-right: 46px;
                    "
                    >{{ showList[item.applyType] }}</span
                  >-->
                  <span
                          v-if="showList[item.applyType] === '公文'"
                          class="document"
                          style="display: inline-block;width: 90px;margin-right: 46px;"
                  >{{ $i18n.locale == "zh" ? "公文" : "Document" }}</span
                  >
                  <span
                          v-if="showList[item.applyType] === '活动方案'"
                          class="document"
                          style="display: inline-block;width: 90px;margin-right: 46px;"
                  >{{ $i18n.locale == "zh" ? "活动方案" : "Activity Plan" }}</span
                  >
                  <span
                          v-if="showList[item.applyType] === '意见与建议'"
                          class="document"
                          style="width: 90px;margin-right: 46px;"
                  >{{ $i18n.locale == "zh" ? "意见与建议" : "Comments And Suggestions" }}</span
                  >
                  <span
                          v-if="showList[item.applyType] === '活动方案'"
                          class="document"
                          style="width: 90px;margin-right: 46px;"
                  >{{ $i18n.locale == "zh" ? "活动方案" : "Activity、 release" }}</span
                  >
                  <span
                          v-if="showList[item.applyType] === '工作计划/总结'"
                          class="document"
                          style="width: 90px;margin-right: 46px;"
                  >{{ $i18n.locale == "zh" ? "工作计划/总结" : "Work Plan/ Conclusion" }}</span
                  >
                  <span
                          v-if="showList[item.applyType] === '委员会资料发布'"
                          class="document"
                          style="width: 90px;margin-right: 46px;"
                  >{{ $i18n.locale == "zh" ? "委员会资料发布" : "Committee Information Releases" }}</span
                  >
                  <!--<span
                    style="
                      display: inline-block;
                      width: 100px;
                      margin-right: 10px;
                      color: #f01834;
                    "
                    class="statu"
                    v-if="item.reserveThree === '驳回'"
                    >{{ $i18n.locale == "zh" ? "驳回" : "Reject" }}</span
                  >
                  <span
                    style="
                      display: inline-block;
                      width: 100px;
                      margin-right: 10px;
                      color: #58c52a;
                    "
                    class="statu"
                    v-if="item.reserveThree === '通过'"
                    >{{ $i18n.locale == "zh" ? "通过" : "Pass" }}</span
                  >
                  <span
                    style="
                      display: inline-block;
                      width: 100px;
                      margin-right: 10px;
                      color: #ef992a;
                    "
                    class="statu"
                    v-if="item.reserveThree === '审批中'"
                    >{{ $i18n.locale == "zh" ? "审批中" : "Auditing" }}</span
                  >
                  <span
                    style="
                      display: inline-block;
                      width: 100px;
                      margin-right: 10px;
                      color: #f01834;
                    "
                    class="statu"
                    v-if="item.reserveThree === '撤回'"
                    >{{ $i18n.locale == "zh" ? "撤回" : "Recall" }}</span
                  >-->
                </div>
                <div>
                  <img
                    v-if="item.reserveThree === '驳回'"
                    style="margin-top: -110px; margin-left: 150px"
                    :src="require($i18n.locale == 'zh' ? '@/assets/img/committeeWorkSpace/驳回.png' :'@/assets/img/committeeWorkSpace/_Reject.png' )"
                    alt=""
                  />
                  <img
                    v-if="item.reserveThree === '通过'"
                    style="margin-top: -110px; margin-left: 150px"
                    :src="require($i18n.locale == 'zh' ? '@/assets/img/committeeWorkSpace/已完成.png' :'@/assets/img/committeeWorkSpace/_Pass.png')"
                    alt=""
                  />
                  <img
                    v-if="item.reserveThree === '审批中'"
                    style="margin-top: -110px; margin-left: 150px"
                    :src="require($i18n.locale == 'zh' ? '@/assets/img/committeeWorkSpace/待审批.png' :'@/assets/img/committeeWorkSpace/_Auditing.png')"
                    alt=""
                  />
                  <img
                    v-if="item.reserveThree === '撤回'"
                    style="margin-top: -110px; margin-left: 150px"
                    :src="require($i18n.locale == 'zh' ? '@/assets/img/committeeWorkSpace/撤回.png' :'@/assets/img/committeeWorkSpace/_Recall.png' )"
                    alt=""
                  />
                </div>
              </div>
              <div :class="isZh ? 'bottom' : 'bottom1'">
                <div style="margin-left: 45px; padding-top: 8px">
                  <span
                    class="toProgress"
                    style="cursor: pointer"
                    @click="seeprogress(item)"
                    >{{ $t("common.viewProgress") }}</span
                  >
                </div>
                <div style="margin-left: 100px; margin-top: -21px">
                  <span
                    :class="isZh ? 'toView' : 'toView1'"
                    style="cursor: pointer; margin-left: 70px"
                    @click="seedetail(item)"
                    >{{ $t("common.checkDetails") }}</span
                  >
                </div>
              </div>
            </div>
          </div>

          <div v-else class="content">
            <div style="margin: 0 auto">
              <el-empty :description="$t('common.noData')"></el-empty>
            </div>
          </div>
          <!-- 分页 -->
          <div v-if="showContent" class="pag">
            <el-pagination
              type="index"
              background
              :prev-text= "prevText"
              :next-text="nextText"
              layout="prev, pager, next, sizes, total"
              :page-sizes="[7, 20, 50, 100, 200]"
              :total="total - 0"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCommitteeAllApplication,
  getCommitteeMySubmitApplication,
  getApplicationDicts,
} from "@/api/committee/committeeWorkSpace";
import Screen from "@/components/screen";
export default {
  name: "CommitteeApplicationList",
  props: ["isDistinguish"],
  components: {
    Screen,
  },
  data() {
    return {
      search: "",
      screen1s: {
        value: "common.type",
        item: [],
      },
      showContent: false,
      screen1def: null,
      screen2Item: null,
      allApplicationList: [],
      defineType: "",
      total: "",
      pageNo: "",
      pageSize:undefined,
      query: "",
      prevText:"上一页",
      nextText:"下一页",
      through: null,
      toWithdraw: null,
      Approval: null,
      reject: null,
      imgUrl: "",
      isZh: true,
      logo:undefined,
	    showList:{
		    1:"活动方案",
		    2:"意见与建议",
		    3:"活动方案",
		    4:"工作计划/总结",
		    5:"公文",
		    6:"委员会资料发布",
	    }
    };
  },
  watch: {
    "$i18n.locale"() {
      this.queryApplication();
      // handler: function () {
        this.isZh = !this.isZh;
      if(this.$i18n.locale != 'en'){
          this.prevText="上一页";
          this.nextText="下一页";
        }else{
          this.prevText="Previous";
          this.nextText="Next";
        }
      // },
      deep: true
    },
  },
  mounted() {
    window.scrollTo(0, 0);
    this.accessToAllApplications();
    this.queryApplication();
    if(this.$i18n.locale != 'en'){
      this.prevText="上一页";
      this.nextText="下一页";
    }else{
      this.prevText="Previous";
      this.nextText="Next";
    }
  },
  destroyed() {},
  methods: {
    //查看进度
    seeprogress(param) {
      if(this.isDistinguish){
        this.logo = "my";
      }else {
        this.logo = "all";
      }
      var params = {
        name: "approvals",
        type: false,
        detailids: param.id,
        logo:this.logo,
      };
      this.$emit("applicationType", params);
    },
    //查看详情
    seedetail(param) {
      if(this.isDistinguish){
        this.logo = "my";
      }else {
        this.logo = "all";
      }
      if (param.reserveTwo == 2) {
        var params = {
          name: "approvalfinish",
          type: false,
          detailids: param.id,
          flag: 2,
          logo:this.logo,
        };
        this.$emit("applicationType", params);
      }
      if (param.reserveTwo == 5) {
        var params = {
          name: "withdrawdetail",
          type: false,
          detailids: param.id,
          flag: 2,
          logo:this.logo,
        };
        this.$emit("applicationType", params);
      }
      if (
        param.reserveTwo == 6 ||
        param.reserveTwo == 7 ||
        param.reserveTwo == 10 ||
        param.reserveTwo == 11
      ) {
        var params = {
          name: "approvaldetail",
          type: false,
          detailids: param.id,
          flag: 2,
          logo:this.logo,
        };
        this.$emit("applicationType", params);
      }
      if (param.reserveTwo == 8 || param.reserveTwo == 9) {
        var params = {
          name: "nopassdetail",
          type: false,
          detailids: param.id,
          flag: 2,
          logo:this.logo,
        };
        this.$emit("applicationType", params);
      }
    },
    // 获取全部申请或我提交的申请
    accessToAllApplications() {
      if (this.isDistinguish) {
        console.log("我提交的");
        var params = this.pageNo ? this.pageNo : "1";
        var pageSize = this.pageSize ? this.pageSize : "7";
        var query = this.query ? this.query : "";
        var queryConditions = this.search ? this.search : "";
        getCommitteeMySubmitApplication(params, pageSize, query, queryConditions).then(
          (res) => {
            var data = res.data;
            console.log(data);
            if (JSON.stringify(data) !== "{}") {
              this.showContent = true;
              this.allApplicationList = res.data.nrcApplyQuerys;
              this.total = res.data.page.totalCount;
            } else {
              this.showContent = false;
            }
          }
        );
      } else {
        var params = this.pageNo ? this.pageNo : "1";
        var pageSize = this.pageSize ? this.pageSize : "7";
        var query = this.query ? this.query : "";
        var queryConditions = this.search ? this.search : "";
        getCommitteeAllApplication(params, pageSize, query, queryConditions).then(
          (res) => {
            var data = res.data;
            if (JSON.stringify(data) !== "{}") {
              this.showContent = true;
              this.allApplicationList = res.data.nrcApplyQuerys;
              this.total = res.data.page.totalCount;
            } else {
              this.showContent = false;
            }
          }
        );
      }
    },

    // 查询申请
    queryApplication() {
        getApplicationDicts().then((res) => {
          var data = res.data[0];
          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 = res.data[0] || [];
            let labelmsg = "全部"
            if(this.$i18n.locale == 'en'){
              labelmsg = "All";
            }
            let both = {
              label: labelmsg,
              value: null,
            };
            this.screen1s.item.unshift(both);
          }
        });
    },

    // 创建申请
    toCreate() {
      var params = {
        name: "submitapplication",
        type: false,
        flag: 2,
        /*      category: "3",*/
      };
      this.$emit("applicationType", params);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.accessToAllApplications();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      console.log(this.pageNo);
      this.accessToAllApplications();
    },
    // 查询
    searchTitle() {
      this.accessToAllApplications();
    },

    // 清空
    reset() {
      this.search = "";
      this.accessToAllApplications();
    },
    // 返回
    back() {
      var params = {
        name: "workspace",
        type: false,
      };
      this.$emit("applicationType", params);
    },
    screenBack(data) {
      this.query = data.click1;
      this.accessToAllApplications();
    },
  },
};
</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: 700px;
  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;
}
.content {
  width: 1200px;
  height: 400px;
  position: absolute;
  top: 250px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}
.content .content1 {
  box-sizing: border-box;
  margin: 10px 0 0 18px;
  width: 275px;
  height: 169px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content .content2 {
  margin: 10px 0 0 18px;
  box-sizing: border-box;
  width: 275px;
  height: 169px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0 18px 0 18px;
}
.topText {
  position: relative;
}
.content .title {
  width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.85);
}
.content .time {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.65);
}
.content .type {
  /* position: absolute; */
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.85);
}
.content .test {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.85);
}
.test::after {
  content: "";
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
.content .bottom {
  width: 273px;
  height: 38px;
  background: #f7f7f7;
  margin-left: -18px;
  margin-top: 5px;
}
.content .bottom1 {
  width: 273px;
  height: 38px;
  background: #f7f7f7;
  margin-left: -18px;
  margin-top: 8px;
}
.progress {
  height: 34px;
  width: 246px;
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail {
  height: 34px;
  width: 246px;
  border-radius: 0px;
  background: rgba(217, 217, 217, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .toView {
  margin-left: 100px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #274e92;
}
.content .toView1 {
  margin-left: 100px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #274e92;
  display: block;
  margin-top: 5px;
}
.content .toProgress {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #274e92;
  margin-top: 10px;
}
.centerLeft2 {
  position: relative;
  margin-top: 20px;
  height: 177px;
  width: 850px;
  border-radius: 0px;
  background: #fff;
}
.content .audit {
  position: absolute;
  right: 5%;
}
.area {
  position: absolute;
  top: 100px;
}
.pag {
  position: absolute;
  bottom: 0;
  right: 0;
}
img{
  width: 103px;
}
</style>