关于前端:vue-如何通过组织范围来选择组织

需要：抉择本组织只获取单选的住址数据；如果是抉择 本组织及子组织，就抉择该组织下所有节点数据蕴含父节点。

<template>
  <div class="dialog-user-role">
    <div class="row-box">
      <div class="col-left">
        <div class="item-con">
          <span class="choice-organ"> 抉择组织 </span>
          <div class="organ-con">
            <div class="tree-filter">
              <fin-input
                placeholder="输出关键字查问"
                v-model="filterText"
                prefix-icon="fin-icon-search"
                clearable
                style="width: 170px"
              >
              </fin-input>
            </div>
            <div class="choise-radio">
              <span class="organ-fw"> 组织范畴：</span>
              <fin-radio v-model="radio" label="0" @change="onParentNode"> 仅本组织 </fin-radio>
              <fin-radio v-model="radio" label="1" @change="onParentAndChildNode"
                > 本组织及子组织 </fin-radio
              >
            </div>
            <div class="organ-tree">
              <div class="tree-list">
                <fin-tree
                  ref="organTree"
                  :data="treeData"
                  :props="treeProps"
                  node-key="id"
                  :expand-on-click-node="false"
                  :default-expand-all="true"
                  :filter-node-method="filterNode"
                >
                  <span slot-scope="{node, data}">
                    <fin-radio v-model="radioNode" :label="data.id" @change="change(data)">
                      {{node.label}}
                    </fin-radio>
                  </span>
                </fin-tree>
              </div>
            </div>
          </div>
        </div>
      </div>
      
  </div>
</template>
<script>
export default {data() {
    return {params: {},
      checkedList: [],
      checkedRoleIds: [],
      checkedOrganRoleList: [],
      roleIds: [],
      hideBtns: true,
      showPage: true,
      filterText: '',
      tooltipEffect: 'light',
      radio: '0',
      radioNode: '',
      scope: 'SELF',
      formsRole: [
        {
          label: '角色名称',
          prop: 'name',
          style: 'width:100%',
        },
        {
          label: '利用名称',
          prop: 'appName',
          style: 'width:100%',
        },
      ],
      treeData: [],
      treeProps: {
        children: 'child',
        label: 'name',
      },
    };
  },
  components: {
    AppTable,
    FormSearch,
  },
  methods: {filterNode(value, data) {if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 单选组织
    change(data) {
      this.checkedList.length = 0;
      // this.scope = 'SELF';
      // this.checkedList[0] = data;
      console.log('单选组织 ---', data);
      if (this.scope == 'CHILD') {this.checkedList = data.map((item) => ({
          organId: item.id,
          organName: item.name,
        }));
        console.log('duo 选组织 ---', this.checkedList);
      } else {this.checkedList[0] = data;
      }
    },
    // 本组织
    onParentNode() {this.scope = 'SELF';},
    // 本组织及子组织
    onParentAndChildNode() {
      this.scope = 'CHILD';
      // this.checkedList.map((item) => {//   if (item.child && item.child.length > 0) {//     this.checkedList = this.checkedList.concat(item.child);
      //     console.log('this.checkedList---', this.checkedList);
      //   } else {//     item.child = [];
      //   }
      // });
    },
    goBack() {this.$router.go(-1);
    },
    formatStatus(row, column, cellValue) {
      var statusTxt = '';
      statusTxt =
        cellValue == 'CHILD' ? '本组织及子组织' : cellValue === 'SELF' ? '仅本组织' : '状态谬误';
      return statusTxt;
    },
    handleParams(params) {
      return {
        ...params,
        ...this.params,
      };
    },
  },
};
</script>