dvcp_v2_wxcp_app/src/pending/party/AppPartyOrganization/AppPartyOrganization.vue

<template>
  <div class="AppPartyOrganization">
    <div class="header"></div>
    <div class="content">
      <div class="party-org">
        <div class="title">所在组织</div>
        <p class="org-select" @click="selectShow = true">{{ detail.name || '请选择' }}<img
            src="https://cdn.cunwuyun.cn/img/down.svg"/></p>
      </div>
      <div class="org-info">
        <div class="title">组织信息</div>
        <div class="flex-row">
          <span class="color-666">组织类型</span>
          <span class="color-333">{{ $dict.getLabel("orgType", detail.orgType) }}</span>
        </div>
        <div class="flex-row">
          <span class="color-666">组织级别</span>
          <span class="color-333">{{ $dict.getLabel("orgPartyType", detail.partyType) }}</span>
        </div>
        <div class="flex-row">
          <span class="color-666">党员人数</span>
          <span class="color-333">{{ count }}人</span>
        </div>
      </div>
      <div class="org-info">
        <div class="flex-row">
          <span class="title">报到状态</span>
          <span :class="userInfo.reportOrgId ? 'status1' : 'status0'">{{ userInfo.reportOrgId ? '已报到' : '未报到' }}</span>
        </div>
      </div>
    </div>

    <u-select v-model="selectShow" :list="treeData" @confirm="confirm"></u-select>
    <u-popup v-model="dialog" mode="center" border-radius="8">
      <div class="estateNotice">
        <b>您已加入过党组织,是否变更？</b>
        <u-gap height="40"/>
        <div class="curEstate">
          <div class="flexRow">
            <b>当前党组织：</b>
            <span>{{ detail.name }}</span>
          </div>
          <div class="flexRow">
            <b>当前报到状态：</b>
            <span
                :class="userInfo.reportOrgId ? 'status1' : 'status0'">{{ userInfo.reportOrgId ? '已报到' : '未报到' }}</span>
          </div>
          <div class="flexRow">
            <b>变更党组织：</b>
            <span>{{ changeOrgInfo.label }}</span>
          </div>
        </div>
        <u-gap height="34"/>
        <div class="alert">变更党组织后需尽快前往新党组织报到</div>
        <u-gap height="62"/>
        <div class="flexRow footer">
          <div class="fill"/>
          <span @click="dialog=false">取消</span>
          <span @click="dialog=false,bindEstate()">确认</span>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: "AppPartyOrganization",
  appName: "党组织",
  data() {
    return {
      dialog: false,
      detail: {},
      treeData: [],
      selectShow: false,
      reportOrgName: '', //报到党组织名称
      reportOrgId: '',
      changeOrgInfo: {},
      userInfo: {},
      count: 0
    }
  },
  onLoad() {
    this.$dict.load("orgType", "orgPartyType").then(() => {
      this.getUserInfo()
    })

  },
  methods: {
    getUserInfo() {
      this.$http.post("/app/appparty/chanhudetail").then(res => {
        if (res?.data) {
          if (res.data.reportOrgId) {
            this.reportOrgName = res.data.reportOrgName
            this.reportOrgId = res.data.reportOrgId
          } else {
            this.reportOrgName = res.data.partyOrgName
            this.reportOrgId = res.data.partyOrgId
          }
          this.userInfo = res.data
          this.getDetail()
          this.getTree()
        }
      })
    },
    getTree() {
      this.$http.post(`/admin/partyOrganization/queryAllChildren?id=${this.userInfo.topOrgId}`).then(res => {
        if (res?.data) {
          res.data.map((item) => {
            item.label = item.name
            item.value = item.id
          })
          this.treeData = res.data
        }
      })
    },
    getDetail() {
      this.$http.post(`/admin/partyOrganization/detail?id=${this.userInfo.reportOrgId}`).then(res => {
        if (res?.data) {
          this.detail = res.data
          this.count = res.data.memberCount.one || 0
        }
      })
    },
    confirm(e) {
      this.treeData.map((item) => {
        if (item.id == e[0].value) {
          this.changeOrgInfo = item
        }
      })
      this.dialog = true
    },
    bindEstate() {
      this.$http.post("/app/apppartyreportorgchange/changeReportOrg", {
        orgId: this.changeOrgInfo.id,
        orgName: this.changeOrgInfo.name,
        partyId: this.userInfo.id,
      }).then(res => {
        if (res?.code == 0) {
          this.$toast('党组织变更成功')
          this.getUserInfo()
          this.$store.commit("getUserInfo")
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.AppPartyOrganization {
  height: 100%;
  padding-bottom: 112px;
  box-sizing: border-box;
  position: relative;

  .header {
    height: 160px;
    background: #E60012;
  }

  .content {
    width: 686px;
    position: absolute;
    top: 50px;
    left: 32px;

    .party-org {
      padding: 32px;
      margin-bottom: 16px;
      background: #FFFFFF;

      .title {
        font-size: 34px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 700;
        color: #333;
        line-height: 60px;
      }

      .org-select {
        font-size: 30px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666;
        line-height: 42px;

        img {
          width: 32px;
          height: 32px;
          vertical-align: middle;
          transform: rotate(270deg);
        }
      }
    }

    .org-info {
      padding: 0 32px;
      background: #FFFFFF;
      margin-bottom: 16px;

      div {
        line-height: 100px;
        font-size: 30px;
        border-bottom: 2px solid #eee;
        box-sizing: content-box;
      }

      div:nth-last-of-type(1) {
        border-bottom: 0;
      }

      .title {
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 700;
        color: #333;
      }

      .flex-row {
        display: flex;
        justify-content: space-between;

        .color-666 {
          color: #666;
        }

        .color-333 {
          color: #333;
        }
      }

      .status0 {
        color: #FF8822;
      }

      .status1 {
        color: #2EA222;
      }
    }

  }


  ::v-deep .estateNotice {
    width: 560px;
    background: #FFFFFF;
    padding: 48px;
    box-sizing: border-box;

    .status0 {
      color: #FF8822;
    }

    .status1 {
      color: #2EA222;
    }

    .curEstate {
      color: #666;
      font-size: 28px;

      b {
        color: #333
      }
    }

    .alert {
      font-size: 28px;
      font-weight: 400;
      color: #F14242;
    }

    .footer {
      span {
        width: 128px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #1365DD;
        font-size: 28px;
        transform: translateX(32px);

        & + span {
          margin-left: 16px;
        }
      }
    }
  }

  .bottomBtn {
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    height: 112px;
    line-height: 112px;
    background: #E60012;
    font-size: 32px;
    font-weight: 500;
    color: #FFFFFF;
  }
}
</style>