h5-dangjian/src/pages/relationshipTransfer/Index.vue

<template>
  <div id="relationshipTransfer">
    <van-sticky :offset-top="0">
      <van-nav-bar title="党支部" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
    <van-tree-select
      height="90vh"
      :items="partyList"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
    />
    <!-- </van-pull-refresh> -->
    <!-- <div class="funcBtn">
      <van-button type="danger" @click="apply" round block>
        申请转移
      </van-button>
    </div> -->
  </div>
</template>

<script>
import {
  // PullRefresh as vanPullRefresh,
  NavBar as vanNavBar,
  // Button as vanButton,
  Sticky as vanSticky,
  TreeSelect as vanTreeSelect
} from "vant";
// import "vant/lib/pull-refresh/style";
import "vant/lib/button/style";
import "vant/lib/sticky/style";
import "vant/lib/nav-bar/style";
import "vant/lib/tree-select/style";
import { list } from "@/api/party/party.js";
import { toTree } from "@/utils/common.js";

export default {
  name: "app",
  data: function() {
    return {
      isLoading: false,
      activeIndex: "",
      activeId: "",
      partyList: []
    };
  },
  methods: {
    onRefresh() {
      list().then(res => {
        let list = (res || []).map(v => {
          return {
            id: v.id,
            text: v.name,
            parentId: v.parentId,
            disabled: true
          };
        });
        this.partyList = toTree(list, {
          pidKey: "parentId",
          idKey: "id",
          disabled: true,
          rootId: "1"
        });
        this.isLoading = false;
      });
    },
    apply() {
      location.href = "./relationshipTransferFrom.html";
    },
    onClickLeft() {
      history.go(-1);
    }
  },
  mounted() {
    list().then(res => {
      let list = (res || []).map(v => {
        return {
          id: v.id,
          text: v.name,
          parentId: v.parentId
        };
      });
      this.partyList = toTree(list, {
        pidKey: "parentId",
        idKey: "id",
        disabled: true,
        rootId: "1"
      });
      console.log(this.partyList);
    });
  },
  beforeDestroy: function() {},
  components: { vanSticky, vanNavBar, vanTreeSelect }
};
</script>
<style lang="scss">
#relationshipTransfer {
  height: 100%;
  .funcBtn {
    position: fixed;
    width: 90%;
    left: 5%;
    bottom: 0.5em;
  }
  .van-tree-select {
    .van-sidebar {
      .van-sidebar-item--disabled {
        color: #323233;
      }
    }
  }

  .van-tree-select__item--disabled {
    color: #000;
  }
}
</style>