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

<template>
  <div class="chooseSomeone">
    <div class="chooseSomeone_selsect">
      <van-search v-model="selectValue" shape="round" background="#F4F4F4" placeholder="请输入姓名"
        @search="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.workStation }}</div>
          </div>
        </van-checkbox>
      </van-checkbox-group>

      <!-- tree -->
      <div class="treeBox" v-if="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 v-model="treeVal" show-checkbox node-key="id" :data="personnelTree" :props="defaultProps"></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">确定</van-button>
    </div>
    <div class="chooseSomeone_btn" v-if="!newGroupViewBack">
      <van-button round type="info" size="small" style="width: 100%;">确定</van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    groupView: {
      type: Number,
      default: () => 1 // 1单选 2复选 3tree
    },
    groupViewBack: {
      type: Boolean,
      default: () => false // 是否显示从其他工位选择员工
    } 
  },
  components: {},
  data() {
    return {
      selectValue: '',
      radioVal: '',
      groupVal: [],
      treeVal: [],
      // 人员数组
      personnelList: [
        { id: 1, name: '张山', workNumber: '123', workStation: '工位1' },
        { id: 2, name: '李四', workNumber: '123', workStation: '工位2' },
        { id: 3, name: '王五', workNumber: '123', workStation: '工位3' },
        { id: 4, name: '赵六', workNumber: '123', workStation: '工位4' },
        { id: 5, name: '张山', workNumber: '123', workStation: '工位5' },
        { id: 6, name: '李四', workNumber: '123', workStation: '工位6' },
        { id: 7, name: '王五', workNumber: '123', workStation: '工位7' },
        { id: 8, name: '赵六', workNumber: '123', workStation: '工位8' },
        { id: 9, name: '张山', workNumber: '123', workStation: '工位9' },
        { id: 10, name: '李四', workNumber: '123', workStation: '工位10' },
        { id: 11, name: '王五', workNumber: '123', workStation: '工位11' },
        { id: 12, name: '赵六', workNumber: '123', workStation: '工位12' },
        { id: 13, name: '张山', workNumber: '123', workStation: '工位13' },
        { id: 14, name: '李四', workNumber: '123', workStation: '工位14' },
      ],
      personnelTree: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      newGroupView: '', // 组件传过来的值
      newGroupViewBack: '', // 组件传过来的值
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { 
    this.newGroupView = JSON.parse(JSON.stringify(this.groupView)) 
    this.newGroupViewBack = JSON.parse(JSON.stringify(this.groupViewBack))
   },
  methods: {
    onSearch() {
      console.log('搜索', this.selectValue)
    },
    newGroupViewBackCli(flg, i) {
      this.newGroupViewBack = flg
      this.newGroupView = i
    }
  },
};
</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>