manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet-workshop-h5/src/components/chooseSomeone.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">
      <!-- 单选 -->
      <van-radio-group v-model="radioVal" class="chooseSomeone_radio_group" v-if="newGroupView == 1">
        <van-radio :name="item.id" v-for="item, index in personnelList" :key="index">
          <div class="chooseSomeone_radio_group_item">
            <div>{{ item.name }}</div>
            <div class="textBeyondHiding">{{ item.workStation }}</div>
          </div>
        </van-radio>
      </van-radio-group>

      <!-- 复选 -->
      <van-checkbox-group v-model="groupVal" class="chooseSomeoneo_group" v-if="newGroupView == 2">
        <van-checkbox :name="item.id" v-for="item, index in personnelList" :key="index">
          <div class="chooseSomeone_group_item">
            <div>{{ item.name }}</div>
            <div class="textBeyondHiding">{{ item.jobNumber }}</div>
          </div>
        </van-checkbox>
      </van-checkbox-group>

      <!-- tree -->
      <div class="treeBox" v-show="newGroupView == 3">
        <div class="treeBox_tree_text" v-if="!newGroupViewBack && groupView"
          @click="newGroupViewBackCli(true, groupView)"><van-icon name="arrow-left" />返回</div>
        <div class="treeBox_tree">
          <el-tree ref="tree" v-model="treeVal" show-checkbox node-key="id" :data="personnelTree" :props="defaultProps"
            :filter-node-method="filterNode">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="chooseSomeone_btn" v-if="newGroupViewBack">
      <van-button round size="small" v-if="newGroupViewBack" @click="newGroupViewBackCli(false, 3)">从其他工位选择员工</van-button>
      <van-button round type="info" size="small" :loading="loadingBtn" @click="handClick()">确定</van-button>
    </div>
    <div class="chooseSomeone_btn" v-if="!newGroupViewBack">
      <van-button round type="info" size="small" style="width: 100%;" @click="treeHandClick()">确定</van-button>
    </div>
  </div>
</template>

<script>
/**
 * peopleList 数据格式要求
 * 传过来的数据必须包含 以下四个字段
 * id: 人员id
 * name: 人员姓名
 * phone: 人员电话
 * jobNumber: 人员工号
 */
export default {
  props: {
    groupView: {
      type: Number,
      default: () => 1 // 1单选 2复选 3tree
    },
    groupViewBack: {
      type: Boolean,
      default: () => false // 是否显示从其他工位选择员工
    },
    peopleList: {
      type: Array,
      default: () => []
    },
    peopleListId: { // 选中的Id
      type: Array,
      default: () => []
    },
  },
  components: {},
  data() {
    return {
      selectValue: '',
      radioVal: '',
      groupVal: [],
      treeVal: [],
      // 人员数组
      personnelList: [],
      personnelTree: [],
      newPersonnelTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      newGroupView: '', // 组件传过来的值
      newGroupViewBack: '', // 组件传过来的值

      loadingBtn: false // 确定按钮loading
    };
  },
  computed: {},
  watch: {
    selectValue(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() { },
  mounted() {
    this.newGroupView = JSON.parse(JSON.stringify(this.groupView))
    this.newGroupViewBack = JSON.parse(JSON.stringify(this.groupViewBack))
    this.personnelList = JSON.parse(JSON.stringify(this.peopleList))
    let newPpeopleListId = JSON.parse(JSON.stringify(this.peopleListId))
    if (newPpeopleListId.length > 0) {
      if (this.groupView == 1) {
        this.radioVal = newPpeopleListId[0]
      } else if (this.groupView == 2) {
        this.groupVal = newPpeopleListId
      } else if (this.groupView == 3) {
        // tree 额外处理
        console.log('tree 额外处理')
      }
    }
    console.log(this.groupVal)
    if (this.peopleList.length <= 0) {
      this.getPeople()
    }
    this.getDepartmentPersonnel()
  },
  methods: {
    onSearch() {
      if (!this.selectValue) {
        this.personnelList = JSON.parse(JSON.stringify(this.peopleList))
        return
      }
      if (this.groupView != 3) {
        this.personnelList = this.personnelList.filter(item => {
          return item.name.indexOf(this.selectValue) != -1 || item.jobNumber.indexOf(this.selectValue) != -1
        })
      }
      console.log(this.personnelList)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    newGroupViewBackCli(flg, i) {
      this.newGroupViewBack = flg
      this.newGroupView = i
      this.$refs.tree.setCheckedKeys(this.groupVal)
    },
    // 获取所有人员
    getPeople() {
      this.$axios.post('/user/getSimpleActiveUserList', {})
        .then(res => {
          if (res.code == "ok") {
            if (!this.peopleList) {
              this.peopleList = res.data.map(item => {
                return {
                  name: item.name,
                  id: item.id,
                  phone: item.phone,
                  jobNumber: item.jobNumber
                }
              })
            }
          } else {
            this.$toast.clear();
            this.$toast.fail(res.msg);
          }
        }).catch(err => { this.$toast.clear(); });
    },
    // 获取部门人员
    getDepartmentPersonnel() {
      this.$axios.post('/department/listAllMemb', {})
        .then(res => {
          if (res.code == "ok") {
            let list = res.data;
            this.setUserToDept(res.data)
            this.personnelTree = list
            this.newPersonnelTree = JSON.parse(JSON.stringify(list))
            console.log(this.personnelTree)
          } else {
            this.$toast.clear();
            this.$toast.fail(res.msg);
          }
        }).catch(err => { this.$toast.clear(); });
    },
    // 递归设置人员到部门
    setUserToDept(list) {
      for (var i in list) {
        if (list[i].children != null) {
          this.setUserToDept(list[i].children);
        }

        if (list[i].userList != null) {
          if (list[i].children == null) {
            list[i].children = [];
          }
          list[i].userList.forEach(element => {
            var obj = { id: element.id, label: element.name, parentId: element.departmentId, isUser: 1 };
            list[i].children.push(obj);
          });
        }
      }
    },
    // 单选和复选点击确定触发的事件
    handClick() {
      let arr = this.groupView == 1 ? [this.radioVal] : this.groupVal
      let newArr = this.personnelList.filter(item => {
        return arr.includes(item.id)
      })
      this.loadingBtn = true
      this.$emit('ChooseSomeoneChanhe', newArr)
    },
    treeHandClick() {
      console.log(this.treeVal)
      console.log(this.$refs.tree.getCheckedNodes())
      let arr = this.$refs.tree.getCheckedNodes()
      let newArr = arr.map(item => {
        return {
          id: item.id,
          name: item.label || '',
          phone: item.phone || '',
          jobNumber: item.jobNumber || ''
        }
      })
      this.loadingBtn = true
      this.$emit('ChooseSomeoneChanhe', newArr)
    }
  },
};
</script>

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

.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 {

      .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 {
        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>