menduner/src/views/enterprise/positionManagement/index.vue

<template>
  <div>
    <v-card class="card-box pa-5">
      <div class="text-end">
        <v-btn class="btn mr-3" prepend-icon="mdi-filter-outline" color="primary" variant="outlined">筛选</v-btn>
        <v-btn class="btn" prepend-icon="mdi-plus" color="primary">新增职位</v-btn>
      </div>
      <div class="d-flex justify-center mt-3">
        <TextUI :item="textItem"></TextUI>
      </div>
      <div>
        <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff">
          <v-tab :value="1">{{ $t('position.recruitmentInProgress') }}</v-tab>
          <v-tab :value="2">{{ $t('position.closed') }}</v-tab>
          <v-tab :value="3">{{ $t('position.pausePublishing') }}</v-tab>
          <v-tab :value="4">{{ $t('position.expiredPosition') }}</v-tab>
          <v-tab :value="5">{{ $t('position.recycleBin') }}</v-tab>
        </v-tabs>
        <v-window v-model="tab" class="mt-3">
          <v-window-item :value="1">
            <PositionItem></PositionItem>
          </v-window-item>
          <v-window-item :value="2">
            <PositionItem></PositionItem>
          </v-window-item>
          <v-window-item :value="3">
            <PositionItem></PositionItem>
          </v-window-item>
          <v-window-item :value="4">
            <PositionItem></PositionItem>
          </v-window-item>
          <v-window-item :value="5">
            <PositionItem></PositionItem>5
          </v-window-item>
        </v-window>
      </div>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({ name: 'enterprise-position-list'})
import { ref } from 'vue'
import TextUI from '@/components/FormUI/TextInput'
import PositionItem from './components/item.vue'

const tab = ref(1)
const textItem = ref({
  type: 'text',
  width: 600,
  value: '',
  label: '请输入职位名称',
  appendInnerIcon: 'mdi-magnify'
})
</script>

<style scoped lang="scss">
.card-box {
  width: 100%;
  height: 100%;
}
.btn {
  width: 116px;
}
</style>