menduner/src/views/recruit/enterprise/interviewManagement/index.vue

<template>
  <v-card class="pa-5" style="height: calc(100vh - 130px);font-size: 14px;">
    <div class="d-flex justify-space-between">
      <div class="d-flex mb-3">
        <Autocomplete class="mr-3" v-model="query.jobId" :item="jobItem"></Autocomplete>
        <Autocomplete v-model="query.status" :item="statusItem"></Autocomplete>
        <v-btn color="primary" class="half-button ml-3" @click="handleSearch">查 询</v-btn>
        <v-btn class="half-button ml-3" variant="outlined" color="primary" @click="handleReset">重 置</v-btn>
      </div>
    </div>
    <v-divider class="mb-3"></v-divider>
    <div class="d-flex" style="height: calc(100vh - 228px);">
      <div>
        <div class="d-flex justify-space-between px-5">
          <div v-if="selectDateValue">
            <span>{{ timesTampChange(selectDateValue, 'Y-M-D') }}</span>
            <span class="ml-2" style="cursor: pointer; color: var(--v-primary-base);" @click="handleClear">{{ $t('common.cleanUp') }}</span>
          </div>
          <div v-else class="color-999">{{ $t('interview.noDateSelected') }}</div>
          <v-btn color="primary" variant="text" size="small" @click="selectDateValue = new Date(); handleChangeDate()">{{ $t('interview.today') }}</v-btn>
        </div>
        <VueDatePicker 
          class="mr-5"
          v-model="selectDateValue"
          inline auto-apply
          locale="zh-CN"
          :enable-time-picker="false"
          :day-names="['一', '二', '三', '四', '五', '六', '七']"
          :markers="markers"
          hide-offset-dates
          @update:model-value="handleChangeDate"
        >
          <template #marker>
            <span class="custom-marker"></span>
          </template>
      </VueDatePicker>
      </div>
      <v-divider style="height: auto;" class="mr-5" vertical></v-divider>
      <div style="flex: 1;">
        <div v-if="items.length">
          <div style="height: calc(100vh - 318px);overflow: auto;padding-right: 12px;">
            <itemPage :items="items" :statusList="statusList" :positionItems="positionItems" @refresh="handleRefresh"></itemPage>
          </div>
          <CtPagination
            v-if="total > 0"
            :total="total"
            :page="query.pageNo"
            :limit="query.pageSize"
            @handleChange="handleChangePage"
          ></CtPagination>
        </div>
        <Empty v-else :elevation="false"></Empty>
      </div>
    </div>
  </v-card>
</template>

<script setup>
defineOptions({ name: 'enterprise-interview'})
import { ref } from 'vue'
import { getInterviewInvitePage, getEnterpriseInterviewCountByTime } from '@/api/recruit/enterprise/interview'
import { getDict } from '@/hooks/web/useDictionaries'
import { getJobAdvertised } from '@/api/enterprise'
import { dealDictArrayData } from '@/utils/position'
import { timesTampChange, getStartAndEndOfDay } from '@/utils/date'
import itemPage from './components/item.vue'

const items = ref([])
const statusList = ref()
const total = ref(0)
const query = ref({
  pageSize: 20,
  pageNo: 1,
  status: null,
  jobId: null,
  time: []
})
const positionItems = ref([])

const jobItem = ref({ width: 300, items: positionItems, clearable: true, hireDetails: true, label: '职位' })
const statusItem = ref({ width: 300, items: statusList, clearable: true, hireDetails: true, label: '面试状态' })

// 获取有面试的日期列表
const markers = ref([])
const getCountByTime = async () => {
  const data = await getEnterpriseInterviewCountByTime()
  if (!data || !data.length) return
  markers.value = data.map(e => {
    return { date: e.key, type: 'dot' }
  })
}
getCountByTime()

// 状态字典
const getStatusList = async () => {
  const { data } = await getDict('menduner_interview_invite_status')
  statusList.value = data
}
getStatusList()

// 列表
const getData = async () => {
  const { list, total: number } = await getInterviewInvitePage(query.value)
  items.value = list
  total.value = number
}
getData()

const handleRefresh = () => {
  query.value.pageNo = 1
  getData()
}

// 分页
const handleChangePage = (e) => {
  query.value.pageNo = e
  getData()
}

// 日期选择
const selectDateValue = ref(null)
const handleChangeDate = () => {
  const time = getStartAndEndOfDay(selectDateValue.value)
  if (!time || !time.length) return delete query.value.time
  query.value.time = time
  query.value.pageNo = 1
  getData()
}
// 清除
const handleClear = () => {
  query.value.pageNo = 1
  selectDateValue.value = null
  delete query.value.time 
  getData()
}

const handleSearch = () => {
  query.value.pageNo = 1
  getData()
}

const handleReset = () => {
  query.value = {
    pageSize: 10,
    pageNo: 1,
    status: null,
    jobId: null,
    time: []
  }
  selectDateValue.value = null
  getData()
}

// 职位
const getPositionList = async () => {
  const data = await getJobAdvertised()
  if (!data.length) return
  const list = dealDictArrayData([], data)
  positionItems.value = list.map(e => {
    return { label: `${e.name}${e.areaName ? '_' + e.areaName : ''} ${e.payFrom ? e.payFrom + '-' : ''}${e.payTo}${e.payName ? '/' + e.payName : ''}`, value: e.id }
  })
}
getPositionList()
</script>

<style scoped lang="scss">
:deep(.dp__menu) {
  border: none !important;
}
.custom-marker {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  height: 8px;
  width: 8px;
  border-radius: 100%;
  background-color: var(--v-primary-base);
}
/* 滚动条样式 */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 4px;
  height: 0px;
}
/* 滚动条内的轨道 */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}
/* 滚动条内的滑块 */
::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.15);
  transition: color 0.2s ease;
}
</style>