manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet-workshop-h5/src/components/departmentSelection.vue

<template>
  <div class="chooseSomeone">
    <div class="chooseSomeone_selsect">
      <van-search v-model.trim="selectValue" shape="round" background="#F4F4F4" placeholder="请输入" @search="onSearch"
        @input="onSearch"></van-search>
    </div>
    <div class="chooseSomeone_Con contentRoll">
      <div class="treeBox">
        <div class="treeBox_tree">
          <el-tree ref="tree" v-model="treeVal" show-checkbox node-key="id" :data="personnelTree" :props="defaultProps" check-strictly @check-change="treeHandChange"
            :filter-node-method="filterNode">
            <span class="custom-tree-node" slot-scope="{ node }">
              <span>
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="chooseSomeone_btn">
      <van-button round type="info" size="small" style="width: 100%;" :loading="loadingBtn"
        @click="treeHandClick()">确定</van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isAdd: {
      type: Number,
      default: () => 1
    },
  },
  components: {},
  data() {
    return {
      selectValue: '',
      radioVal: '',
      groupVal: [],
      treeVal: [],
      // 人员数组
      personnelList: [],
      personnelTree: [],
      newPersonnelTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      loadingBtn: false, // 确定按钮loading
    };
  },
  computed: {},
  watch: {
    selectValue(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() { },
  mounted() {
    this.getDepartmentPersonnel()
  },
  methods: {
    onSearch() {
      if (!this.selectValue) {
        return
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    newGroupViewBackCli(flg, i) {
      this.newGroupViewBack = flg
      if (this.type != 1) {
        this.newGroupView = i
        this.$refs.tree.setCheckedKeys(this.groupVal)
      } else {
        this.getPeople()
      }

    },
    // 获取部门人员
    getDepartmentPersonnel() {
      this.$axios.post('/department/listAllMemb', {})
        .then(res => {
          if (res.code == "ok") {
            let list = res.data;
            this.personnelTree = list
            this.newPersonnelTree = JSON.parse(JSON.stringify(list))
          } else {
            this.$toast.clear();
            this.$toast.fail(res.msg);
          }
        }).catch(err => { this.$toast.clear(); });
    },
    treeHandChange(val, flag) {
      const { id } = val
      if(flag) {
        this.$refs.tree.setCheckedKeys([]);
        this.$refs.tree.setCheckedKeys([id]);
      }
    },
    treeHandClick() {
      let arr = this.$refs.tree.getCheckedNodes()
      if (arr.length <= 0) {
        this.$toast('请选择部门');
        return
      }
      let newArr = arr.map(item => {
        return {
          value: item.id,
          label: item.label || '',
        }
      })
      this.$emit('changeDepartmentSelection', newArr)
    }
  },
};
</script>

<style scoped lang="less">
* {
  box-sizing: border-box;
}

.textDepartmentName {
  color: #999;
  font-size: 14px;
}

.chooseSomeone {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px 15px 0px 15px;

  .chooseSomeone_selsect {
    .van-search__content {
      background-color: #fff;
    }
  }

  .treeBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .treeBox_tree {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
    }

    .treeBox_tree_text {
      font-size: 14px;
      color: #999;
      display: flex;
      align-items: center;
      padding: 8px;

      .van-icon {
        margin-right: 6px;
      }
    }

    // 调整组件的默认样式
    .el-tree-node__content {
      height: 30px;
    }
  }

  .chooseSomeone_Con {
    flex: 1;
    background-color: #fff;
    border-radius: 10px;
    overflow-y: auto;
    padding: 10px;

    .chooseSomeoneo_group,
    .chooseSomeone_radio_group {

      .van-radio,
      .van-checkbox {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        color: #333;
        border-bottom: 1px solid #F4F4F4;

        .van-radio__label {
          flex: 1 !important;
        }

        .van-checkbox__label {
          flex: 1 !important;
        }
      }

      .chooseSomeone_group_item,
      .chooseSomeone_radio_group_item {
        display: flex;
        justify-content: space-between;

        div:last-child {
          font-size: 12px;
          color: #999;
          width: 50%;
          text-align: right;
        }
      }
    }
  }

  .chooseSomeone_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;

    .van-button {
      width: 48%;
    }
  }
}
</style>