<template>
  <div class="totalBox">
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="详情费用列表"
        name="detail"
      >
        <DetailList />
      </el-tab-pane>
      <el-tab-pane
        label="人员费用列表"
        name="people"
      >
        <PeopleList />
      </el-tab-pane>
      <el-tab-pane
        label="部门费用列表"
        name="department"
      >
        <DepartmentList />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DetailList from './components/detailList.vue'
import PeopleList from './components/peopleList.vue'
import DepartmentList from './components/departmentList.vue'
defineOptions({
  name: 'CostManage'
})
const activeName = ref('detail')
const handleClick = () => {}
</script>

<style scoped>
.totalBox{
  width: 100%;
  height: 800px;
  background-color: #ffffff;
}
</style>
