menduner/src/views/recruit/enterprise/positionManagement/components/item.vue

<template>
  <div>
    <div v-if="props.items.length" class="d-flex align-center mb-1">
      <v-checkbox v-model="selectAll" :label="!selectAll ? $t('common.selectAll') : `已选中${selectList.length}条`" hide-details color="primary" @update:model-value="handleChangeSelectAll"></v-checkbox>
      <div v-if="tab === 1" class="ml-8">
        <v-btn :disabled="!selectAll" color="primary" variant="tonal" size="small" @click="handleAction(2, 'batch', {})">{{ $t('common.refresh') }}</v-btn>
        <v-btn class="mx-3" :disabled="!selectAll" color="primary" variant="tonal" size="small" @click="handleAction(3, 'top', {})">{{ $t('common.topping') }}</v-btn>
        <v-btn :disabled="!selectAll" color="primary" variant="tonal" size="small" @click="handleAction(0, 'close', {})">{{ $t('common.close') }}</v-btn>
      </div>
      <v-btn v-if="tab === 2" class="ml-8" :disabled="!selectAll" color="primary" variant="tonal" size="small" @click="handleAction(1, 'activation', {})">{{ $t('common.activation') }}</v-btn>
    </div>
    <div v-for="val in items" :key="val.id" class="itemBox mb-3" :style="{'height': val?.hire ? '162px' : '134px'}">
      <div class="d-flex justify-space-between" style="padding: 10px 20px;">
        <div class="position">
          <div class="item-select">
            <v-checkbox v-model="val.select" hide-details color="primary" @update:model-value="handleChangeSelect"></v-checkbox>
          </div>
          <div class="ml-10 d-flex align-center">
            <span v-if="val.name.indexOf('style')" v-html="val.name" class="position-name" @click="handleDetails(val)"></span>
            <span v-else class="position-name" @click="handleDetails(val)">{{ val.name }}</span>
            <svg v-if="tab === 4" t="1719193613512" class="icon ml-3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7666" width="25" height="25"><path d="M592.331776 439.619584l10.840064-30.636032 49.16224 17.398784-10.842112 30.633984-49.160192-17.396736z m96.054272-115.116032l-10.840064 30.635008-49.156096-17.39776 10.842112-30.635008 49.154048 17.39776z m296.593408 363.10528L451.8912 498.937856l-27.737088 78.367744 57.70752 20.424704-55.916544 90.039296 230.827008 81.692672c-9.371648 28.745728-21.200896 34.97984-47.558656 25.652224-27.072512-9.581568-81.678336-29.704192-116.795392-43.738112-2.545664 34.371584-6.008832 66.813952-11.152384 99.465216 45.597696 16.137216 100.243456 33.875968 127.8208 42.0352 69.653504 20.640768 105.135104 1.93024 132.8128-60.423168 15.962112-36.032512 30.455808-70.188032 43.681792-100.77696L565.44256 653.766656l14.022656-21.492736 369.80224 130.878464c-87.150592 150.434816-249.872384 251.63776-436.237312 251.63776-87.114752 0-169.064448-22.115328-240.54784-61.032448l86.624256-244.754432c14.751744 3.617792 29.504512 7.236608 43.544576 10.602496 8.411136-28.286976 20.257792-61.770752 33.829888-97.855488-15.0016-2.906112-29.044736-6.270976-43.082752-9.636864l125.060096-353.362944 24.221696 8.572928 32.776192-92.613632-275.70688-97.577984-32.779264 92.61568 27.072512 9.57952-133.13024 376.160256c-7.324672-1.603584-87.942144-16.722944-151.430144-28.83072A511.248384 511.248384 0 0 1 9.216 510.977024C9.216 232.728576 234.78272 7.161856 513.030144 7.161856c95.85664 0 185.460736 26.7776 261.745664 73.250816l-58.9056 166.436864-135.359488-47.906816-100.349952 283.546624L843.498496 611.08224l100.350976-283.547648-136.786944-48.410624 48.638976-137.43104c99.104768 92.005376 161.142784 223.39072 161.142784 369.28512 0 62.150656-11.28448 121.66144-31.864832 176.630784zM732.680192 489.288704l10.84416-30.63296 49.156096 17.400832-10.842112 30.629888-49.158144-17.39776z m96.057344-115.11296l-10.845184 30.635008-49.155072-17.400832 10.840064-30.633984 49.160192 17.399808z m-575.744 204.278784l25.213952-71.240704 48.444416 17.144832-23.701504 66.967552c-16.89088-4.37248-33.068032-8.49408-49.956864-12.87168z m178.547712-350.462976l-23.954432 67.678208L359.1424 278.528l23.955456-67.680256 48.443392 17.143808zM306.69824 426.71104l23.953408-67.683328 48.44544 17.145856-23.952384 67.68128-48.446464-17.143808zM193.521664 900.518912c-80.457728-66.070528-140.06272-156.583936-167.51104-260.184064 92.57472 17.773568 208.65024 39.995392 242.648064 47.880192l-75.137024 212.303872z" fill="#FE6E5A" p-id="7667"></path></svg>
          </div>
          <div class="mt-3 other-info ellipsis ml-10">
            <span>{{ val.areaName }}</span>
            <span class="lines"></span>
            <span>{{ val.eduName }}</span>
            <span class="lines"></span>
            <span>{{ val.expName }}</span>
            <span class="lines"></span>
            <span>{{ val.payFrom }}-{{ val.payTo }}/{{ val.payName }}</span>
            <span class="lines"></span>
            <span>{{ val.positionName }}</span>
          </div>
          <div v-if="val?.hire" class="ml-10 mt-2">
            <v-chip v-if="val?.hirePrice && val.hirePrice > 0" class="mr-3" label color="primary" size="small">赏金：{{ commissionCalculation(val.hirePrice, 1) }}元</v-chip>
            <v-chip v-if="val?.hirePoint && val.hirePoint > 0" label color="primary" size="small">积分：{{ commissionCalculation(val.hirePoint, 1) }}点</v-chip>
          </div>
        </div>
        <div class="d-flex align-center">
          <div v-if="tab === 1">
            <v-btn color="primary" variant="tonal">{{ $t('position.talentSearch') }}</v-btn>
            <v-btn class="ml-3" color="primary" @click="handleAction(2, '', val)">{{ $t('common.refresh') + $t('common.position') }}</v-btn>
          </div>
          <div v-if="tab === 2">
            <v-btn color="primary" @click="handleAction(1, '', val)">{{ $t('common.activatePosition') }}</v-btn>
          </div>
        </div>
      </div>
      <div class="bottom pa-5 d-flex justify-space-between align-center">
        <div>{{ $t('position.refreshTime') }} ：{{ timesTampChange(val.updateTime, 'Y-M-D') }} {{ val.expireDay && Number(val.expireDay) >= 1 ? `（${ val.expireDay }天后到期）` : '' }}</div>
        <div class="d-flex">
          <div class="ml-10 d-flex">
            <div v-if="tab === 1">
              <span class="cursor-pointer" @click="handleAction(3, '', val)">{{ $t('common.topping') }}</span>
              <span class="lines"></span>
              <span class="cursor-pointer" @click="handleAction(0, '', val)">{{ $t('common.close') }}</span>
              <span class="lines"></span>
            </div>
            <span class="cursor-pointer" @click="handleToStatistics">{{ $t('position.recruitmentStatistics') }}</span>
            <div v-if="tab !== 3">
              <span class="lines"></span>
              <span class="cursor-pointer" @click="handleEdit(val)">{{ $t('common.edit') }}</span>
            </div>
            <div v-if="tab === 4">
              <span class="lines"></span>
              <span class="cursor-pointer">{{ $t('common.close') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { commissionCalculation } from '@/utils/position'
defineOptions({ name: 'enterprise-position-item'})
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { timesTampChange } from '@/utils/date'
import { useI18n } from '@/hooks/web/useI18n'
import { closeJobAdvertised, enableJobAdvertised, refreshJobAdvertised, topJobAdvertised } from '@/api/position'
import Snackbar from '@/plugins/snackbar'

const { t } = useI18n()
const emit = defineEmits(['refresh'])
const props = defineProps({
  tab: {
    type: Number,
    default: 1
  },
  items: Array
})

const selectAll = ref(false) // 全选
const selectList = ref([]) // 选中列表
const dealSelect = () => {
  selectList.value = props.items.filter(e => e.select).map(k => k.id)
}

// 全选
const handleChangeSelectAll = () => {
  props.items.map(k => {
    k.select = selectAll.value
    return k
  })
  dealSelect()
}
// 单选
const handleChangeSelect = () => {
  const length = props.items.filter(k => k.select).length
  selectAll.value = length > 0 ? true : false
  dealSelect()
}

// tab改变时清空选中的项
watch(
  () => props.tab,
  () => {
    props.items.map(e => e.select = false)
    selectList.value = []
    selectAll.value = false
  },
  { immediate: true }
)

// 分页选中回显
watch(
  () => props.items,
  (newVal) => {
    selectList.value.forEach(e => {
      const obj = newVal.find(k => k.id === e)
      if (obj) obj.select = true
    })
  },
  { immediate: true },
  { deep: true }
)

const apiList = [ closeJobAdvertised, enableJobAdvertised, refreshJobAdvertised, topJobAdvertised ]

// 职位关闭、激活、刷新、置顶
const handleAction = async (index, type, { id }) => {
  const ids = type ? props.items.filter(e => e.select).map(k => k.id) : [id]
  if (!ids.length && !index) return
  await apiList[index](ids)
  Snackbar.success(t('common.operationSuccessful'))
  // 清空选项
  selectList.value = []
  selectAll.value = false
  emit('refresh')
}

const router = useRouter()
// 职位编辑
const handleEdit = (val) => {
  router.push(`/recruit/enterprise/position/edit?id=${val.id}`)
}

// 职位详情
const handleDetails = (val) => {
  window.open(`/recruit/enterprise/position/details/${val.id}`)
}

// 跳转招聘统计
const handleToStatistics = () => {
  router.push('/recruit/enterprise/statistics/overallAnalysis')
}
</script>

<style scoped lang="scss">
.itemBox {
  position: relative;
  border: 1px solid #e5e6eb;
}
.position-name {
  color: var(--color-333);
  font-size: 19px;
  cursor: pointer;
  &:hover {
    color: var(--v-primary-base);
  }
}
.position {
  max-width: 46%;
  position: relative;
  .item-select {
    position: absolute;
    left: -8px;
    top: -13px;
  }
}
.lines {
  display: inline-block;
  width: 1px;
  height: 17px;
  vertical-align: middle;
  background-color: #e0e0e0;
  margin: 0 10px;
}
.other-info {
  font-size: 15px;
  color: var(--color-666);
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #f7f8fa;
  font-size: 14px;
  color: var(--color-888);
}
.resume {
  display: flex;
  font-size: 13px;
  flex-direction: column;
  align-items: center;
  color: var(--color-888);
  margin-right: 100px;
  cursor: pointer;
}
.resume-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-999);
}
</style>