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

<template>
  <div>
    <v-card class="card-box pa-5">
      <div class="d-flex justify-center mt-3">
        <TextUI :item="textItem" @enter="handleEnter" @appendInnerClick="handleEnter"></TextUI>
      </div>
      <div class="text-end">
        <v-btn class="btn" prepend-icon="mdi-plus" color="primary" @click="handleAdd">{{ $t('position.newPositionsAdded') }}</v-btn>
      </div>
      
      <div class="mt-3">
        <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
          <v-tab :value="1"> {{ $t('position.recruitmentInProgress') }}</v-tab>
          <v-tab :value="2"> {{ $t('position.closed') }}</v-tab>
          <v-tab :value="3"> {{ $t('position.expiredPosition') }}</v-tab>
        </v-tabs>
        <v-window v-model="tab" class="mt-1">
          <v-window-item :value="1">
            <PositionItem v-if="items.length" :tab="tab" :items="items" @refresh="getPositionList"></PositionItem>
          </v-window-item>
          <v-window-item :value="2">
            <PositionItem v-if="items.length" :tab="tab" :items="items" @refresh="getPositionList"></PositionItem>
          </v-window-item>
          <v-window-item :value="3">
            <PositionItem v-if="items.length" :tab="tab" :items="items"></PositionItem>
          </v-window-item>
        </v-window>
        <Empty v-if="!items.length" :message="tipsText" :elevation="false"></Empty>
        <CtPagination
          v-else
          :total="total"
          :page="query.pageNo"
          :limit="query.pageSize"
          @handleChange="handleChangePage"
        ></CtPagination>
      </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'
import { useRouter } from 'vue-router'
import { getJobAdvertisedList } from '@/api/position'
import { dealDictArrayData } from '@/views/recruit/position/components/dict'

const router = useRouter()
const tab = ref(1)
const total = ref(0)
const tipsText = ref('暂无数据')
const query = ref({
  pageSize: 10,
  pageNo: 1
})

const items = ref([])
const textItem = ref({
  type: 'text',
  width: 600,
  value: '',
  label: '请输入职位名称',
  appendInnerIcon: 'mdi-magnify'
})

const handleAdd = () => {
  router.push('/enterprise/position/add')
}

// 获取职位列表
const getPositionList = async () => {
  query.value.hasExpiredData = tab.value === 3 ? true : false
  if (tab.value === 2) query.value.status = 1
  else delete query.value.status
  const { list, total: number } = await getJobAdvertisedList(query.value)
  if (!list.length) {
    if (query.value.name) tipsText.value = '暂无数据，请更换关键词后再试'
  }
  total.value = number
  items.value = list.length ? dealDictArrayData([], list) : []
}
getPositionList()

const handleChangeTab = () => {
  query.value.pageNo = 1
  getPositionList()
}

const handleChangePage = (index) => {
  query.value.pageNo = index
  getPositionList()
}

// 职位名称检索
const handleEnter = (e) => {
  query.value.name = e
  query.value.pageNo = 1
  getPositionList()
}
</script>

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