index.vue 1.53 KB
<template>
  <div class="people-container">
    <el-transfer @left-check-change="handleLeftChange" @right-check-change="handleRightChange" v-loading="loading"
      :filterable="true" :titles="['未加入考勤人员', '已加入考勤人员']" v-model="childrenItemValue" :data="data" />
  </div>
</template>

<script name="peopleAdd" setup>
import { getPeopleInfo } from '@/api/attendance/attendance';
import { onMounted } from 'vue';
const loading = ref(false)
const props = defineProps({
  peopleNowValue: {
    require: false
  }
})


const generateValue = (val) => {
  let value = [];
  val.forEach(element => {
    value.push(element.jobCode + "," + element.name + "," + element.posts)
  });
  return value;
}


const data = ref([])
const childrenItemValue = ref([])

const generateData = (val) => {
  let data = [];
  val.forEach(element => {
    data.push({
      key: element.jobCode + "," + element.name + "," + element.posts,
      label: element.jobCode + '/' + element.name
    })
  });
  return data
}




const handleLeftChange = (val) => {
  // console.log(val);
}

const handleRightChange = (val) => {
  // console.log(val);
}

onMounted(() => {
  loading.value = true;
  // 获取人员信息
  getPeopleInfo({ id: null }).then((res) => {
    loading.value = false;
    data.value = generateData(res.data);
    childrenItemValue.value = generateValue(props.peopleNowValue)
  })
})

defineExpose({
  childrenItemValue
});

</script>
<style scoped>
.people-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>