修改详情页，增加选择组织组件

<template>

  <div style="width:100%">

    <LHeader :text="text"></LHeader>

    <!-- 搜索 -->

    <div class="content-wrap">

      <!-- <div class="search-wrap">

        <van-search v-model="searchVal" placeholder="搜索" />

      </div> -->

      <div class="upStep" v-show="showPre">

        <van-cell-group>

          <div class="upStep-content">{{ deptName }}</div>

          <div class="upStep-btn"><span @click="goBack">返回上级</span></div>

        </van-cell-group>

      </div>

      <!-- 部门列表 -->

      <div class="dept-list-wrap">

        <van-cell-group>

          <van-radio-group v-model="result" @change="changeRadio">

            <van-cell

              style="display:flex"

              v-for="item in deptList"

              clickable

              :key="item.deptId"

            >

              <van-radio :name="item.deptId" @click="selectDept(item)">

                <span>{{ item.deptName }}</span>

              </van-radio>

              <template #right-icon>

                <van-icon

                  name="arrow"

                  class="arrow-icon"

                  @click="nextDept(item)"

                />

              </template>

            </van-cell>

          </van-radio-group>

        </van-cell-group>

      </div>

    </div>

    <!-- 底部信息 -->

    <footer class="footer">

      <van-cell-group>

        <div class="selected">

          <span class="selected-title">已选择 ({{ result ? 1 : 0 }}) :</span>

          <label>{{ resultName }}</label>

        </div>

        <!-- <div class="operate">

          <van-button

            size="small"

            ttype="info"

            plain

            native-type="button"

            style="border-radius: 5px; background-color: #f0f1f5;"

            @click.native="cancel"

            >取消

          </van-button>

          <van-button

            size="small"

            type="info"

            native-type="button"

            style="margin:0 10px 0 20px;border-radius: 5px;"

            @click.native="save"

            >保存

          </van-button>

        </div> -->

      </van-cell-group>

    </footer>

  </div>

</template>

<script>

import LHeader from "@/components/header.vue";

import { getFun, postFun } from "@/service/table";

import { getUserInfo } from "@/utils/userInfo";

import { debounce } from "@/utils/common.js";

import { Toast } from "vant";

export default {

  name: "select-people",

  components: {

    LHeader

  },

  created() {

    this.getInsideUser(getUserInfo().secondaryUnit);

  },

  data() {

    return {

      text: "选择组织",

      personName: "",

      deptId: 0, // 部门id

      storageList: [], // 存储上级部门

      deptName: "",

      showPre: false,

      result: "",

      resultName: "",

      dutyList: [],

      searchVal: "",

      deptList: [], // 部门

      allDeptList: [], // 部门

      isFirstSearch: true

    };

  },

  methods: {

    changeRadio() {

      this.resultName = this.allDeptList.find(

        item => item.deptId == this.result

      ).deptName;

    },

    // 查询内部人员

    getInsideUser(id, val) {

      this.$toast.loading({

        message: "加载中...",

        forbidClick: true,

        loadingType: "spinner",

        duration: 0

      });

      getFun("/risk/plan/dept/list").then(res => {

        this.allDeptList = res.data;

        this.deptList = this.allDeptList.filter(item => item.parentId == 0);

        console.log(res.data);

      });

    },

    // // 待搜索框内容发生变化

    // onInput: debounce(function() {

    //   if (this.isFirstSearch) {

    //     this.getInsideUser(getUserInfo().secondaryUnit, this.searchVal);

    //   } else {

    //     this.getInsideUser(this.deptId, this.searchVal);

    //   }

    // }, 500),

    nextDept(data) {

      var depts = this.allDeptList.filter(item => item.parentId == data.deptId);

      if (!depts || depts.length <= 0) {

        Toast({

          message: "组织下暂无数据",

          position: "top"

        });

        return;

      }

      this.deptList = depts;

      if (data.deptId != 0) this.showPre = true;

      else this.showPre = false;

      this.deptName = data.deptName;

      this.deptId = data.deptId;

      console.log(this.deptList);

      //   this.deptId = data.deptId;

      //   this.searchVal = "";

      //   this.deptName = data.deptName;

      //   this.isFirstSearch = false; // 如果点击过部门，则不必再用死deptId了

      //   this.storageList.push({ deptId: data.parentId, deptName: data.deptName });

      //   this.getInsideUser(this.deptId);

    },

    goBack() {

      var parentId = this.allDeptList.find(item => item.deptId == this.deptId)

        .parentId;

      console.log(parentId);

      if (parentId != 0) {

        this.showPre = true;

        var dept = this.allDeptList.find(item => item.deptId == parentId);

        this.nextDept(dept);

      } else {

        this.deptList = this.allDeptList.filter(item => item.parentId == 0);

        this.showPre = false;

      }

    },

    selectDept(data) {

      // 先把数组清空 然后再放

      this.dutyList = [];

      this.dutyList.push({ userId: data.userId, userName: data.userName });

    },

    save() {

      // 把数据存到 session 的内部人员数组中

      // 先取出session中的值

      let obj = JSON.parse(sessionStorage.getItem("personObj"));

      obj.user = this.dutyList;

      // 再次存到session中

      sessionStorage.setItem("personObj", JSON.stringify(obj));

      // 可以见一个公共的字段  存储以后需要的人的信息

      history.go(-1);

    },

    cancel() {

      this.$router.go(-1);

    }

  }

};

</script>

<style lang="less" scoped>

/* @import url(); 引入css类 */

// 搜索

.content-wrap {

  padding-bottom: 2.666667rem;

  background-color: #f0f1f5;

  width: 100%;

}

.search-wrap {

  margin: 0.26667rem;

  .van-search {

    border-radius: 5px;

    padding: 5px 12px;

  }

  .van-search__content {

    background-color: #ffffff;

  }

}

.upStep {

  .van-cell-group {

    display: flex;

    height: 1.2rem;

    align-items: center;

    .upStep-btn {

      width: 25%;

      text-align: center;

      span {

        width: 1.866667rem;

        background-color: #1989fa;

        text-align: center;

        display: inline-block;

        color: white;

        height: 0.8rem;

        line-height: 0.8rem;

        font-size: 0.346667rem;

        border-radius: 0.08rem;

      }

    }

    .upStep-content {

      width: 75%;

      height: 0.8rem;

      line-height: 0.8rem;

      padding-left: 0.42667rem;

      box-sizing: border-box;

      font-size: 14px;

      overflow: hidden;

      text-overflow: ellipsis;

      white-space: nowrap;

    }

  }

}

.dept-list-wrap {

  margin-top: 0.266667rem;

}

.people-wrap {

  margin-top: 0.266667rem;

  /deep/ .van-radio__label {

    display: flex;

    align-items: center;

  }

  .dept-name {

    margin-left: 10px;

    font-size: 12px;

    color: #a3a4a6;

    margin-top: 1px;

  }

}

.footer {

  width: 100%;

  height: 2.4rem;

  z-index: 9;

  position: fixed;

  bottom: 0px;

  box-shadow: 0px 8px 15px #000;

  .van-cell-group {

    height: 100%;

    .selected {

      height: 1.066667rem;

      display: flex;

      align-items: center;

      padding-left: 10px;

      border-bottom: 1px solid #cacbcb;

      .selected-title {

        color: #4187f7;

      }

      .selected-content {

        width: 80%;

        padding-left: 10px;

        box-sizing: border-box;

      }

    }

    .operate {

      height: 1.333333rem;

      display: flex;

      justify-content: flex-end;

      align-items: center;

      .van-button {

        width: 1.6rem;

      }

    }

  }

}

</style>