yos_meida/src/components/selectMenber/index.vue

<template>
  <div>
    <el-input v-model="value.name" readonly placeholder="选择对象人员" suffix-icon="el-icon-arrow-down" autocomplete="off" @focus="dialogTableVisible = true"></el-input>
    <el-dialog title="选择人员" append-to-body :visible.sync="dialogTableVisible" width="80%">
      <div class="flex">
        <dep-list ref="list" style="width:200px" @onClick="onClick">
        </dep-list>
        <div style="width:600px;flex:1 0 auto">
          <staffList :depInfo="depInfo" ref="staff">
            <template v-slot:detail="scope">
              <div class="inline-16">
                <el-button  type="text" size="mini" @click="selectMenber(scope.data)">选 择</el-button>
              </div>
            </template>
          </staffList>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import depList from './modules/dep_list.vue'
import staffList from './staff/list/list.vue'
export default {
  props:['reporthrname'],
  components:{
    depList,
    staffList,
  },
  data () {
    return {
      dialogTableVisible:false,
      depInfo:{
        data:null,
        parent:{
          data:{}
        }
      },
      value:{
        name:'',
        hrid:''
      }
    }
  },
  methods:{
    onClick (data) {
      this.depInfo = data
      this.$refs.staff.listData(this.depInfo.data.departmentid)
    },
    selectMenber (data) {
      this.value = data
      this.$emit('selectMenber',data)
      this.dialogTableVisible = false
    },
    onStaffSuccess () {
      this.$refs.staff.listData(this.depInfo.data.departmentid)
    },
  },
  watch:{
    reporthrname (val) {
      this.value.name = val
    }
  }
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
}
</style>