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

<template>
  <div>
    <CtForm ref="formPageRef" :items="items" style="width: 650px;">
      <!-- <template #explain>
        <div class="d-flex align-center font-size-13">
          <div style="color: var(--v-error-base); cursor: pointer; text-decoration: underline;" @click="handleViewRule">
            <v-icon size="20" color="error">mdi-help-circle-outline</v-icon>
            众聘岗位规则说明;
          </div>
          <div class=" ml-5" style="color: var(--v-error-base);">
            众聘岗位分配比例：推荐人占比{{ ratio.recommendRate }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 平台占比{{ ratio.headhuntRate }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 投递人占比{{ ratio.cvRate }}%
          </div>
        </div>
      </template> -->
      <template #numericalValue>
        <div class="font-size-14 color-error my-1">
          <div class="d-flex align-center font-size-13">
          <div style="color: var(--v-error-base); cursor: pointer; text-decoration: underline;" @click="handleViewRule">
            <v-icon size="20" color="error">mdi-help-circle-outline</v-icon>
            众聘岗位规则说明;
          </div>
          <div class=" ml-5" style="color: var(--v-error-base);">
            众聘岗位分配比例：推荐人占比{{ ratio.recommendRate }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 平台占比{{ ratio.headhuntRate }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 投递人占比{{ ratio.cvRate }}%
          </div>
        </div>
          <div class="d-flex">
            按众聘岗位分配比例计算后的赏金： 
            <span class="calculation ml-3">推荐人{{ calculation('hirePrice', 1, true) }}元</span>
            <span class="calculation">平台{{ calculation('hirePrice', 0, true) }}元</span>
            <span class="calculation">投递人{{ calculation('hirePrice', 2, true) }}元</span>
          </div>
          <!-- <div class="d-flex">
            按众聘岗位分配比例计算后的积分： 
            <span class="calculation ml-3">推荐人{{ calculation('hirePoint', 1) }}点</span>
            <span class="calculation">平台{{ calculation('hirePoint', 0) }}点</span>
            <span class="calculation">投递人{{ calculation('hirePoint', 2) }}点</span>
          </div> -->
        </div>
      </template>
      <template #positionId="{ item }">
        <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
          <template v-slot:activator="{  props }">
            <textUI
              :modelValue="item.value"
              :item="item"
              v-bind="props"
              style="position: relative;"
            ></textUI>
          </template>
          <jobTypeCard class="jobTypeCardBox" :select="[query.positionId].filter(Boolean)" :isSingle="true" @handleJobClick="handleJobClickItem"></jobTypeCard>
        </v-menu>
        <v-btn class="ml-3 half-button" color="primary" style="margin-top: 2px;" @click="useJobTemplate(item)">岗位模板</v-btn>
      </template>
    </CtForm>

    <CtDialog :visible="show" :widthType="1" titleClass="text-h6" title="众聘岗位规则说明" :footer="false" @close="show = false">
      <RulePage />
    </CtDialog>
  </div>
</template>

<script setup>
defineOptions({ name: 'position-add-baseInfo'})
import CtForm from '@/components/CtForm'
import { reactive, ref, watch } from 'vue'
import textUI from '@/components/FormUI/TextInput'
import jobTypeCard from '@/components/jobTypeCard'
import RulePage from './rule.vue'
import { commissionCalculation } from '@/utils/position'
import { getPublicRatio, getRecruitPositionDetails } from '@/api/recruit/enterprise/position'

const props = defineProps({
  itemData: Object
})

const show = ref(false)
const ratio = ref({})

// 按分配比例计算金额积分
const calculation = (key, type) => {
  const value = items.value.options.find(e => e.key === key).value
  return commissionCalculation(value, type)
}

const getValue = (key) => {
  return items.value.options.find(e => e.key === key)
}

// 是否众聘岗位
const handleChangePublic = (val) => {
  items.value.options.forEach(e => {
    if (!val && Object.prototype.hasOwnProperty.call(e, 'hide')) {
      e.hide = true
      e.value = null
      return
    }
    if (val && Object.prototype.hasOwnProperty.call(e, 'show')) {
      e.hide = false
      return
    }
    // if (e.slotName === 'explain') e.hide = val ? false : true
  })
}

const formPageRef = ref()
let query = reactive({})

const items = ref({
  options: [
    {
      type: 'ifRadio',
      key: 'hire',
      value: false,
      label: '众聘岗位 *',
      width: 90,
      disabled: false,
      hideDetails: true,
      items: [
        { label: '是', value: true },
        { label: '否', value: false }
      ],
      change: val => handleChangePublic(val)
    },
    // {
    //   slotName: 'explain',
    //   noParam: true,
    //   value: null,
    //   disabled: false,
    //   hide: true,
    //   flexStyle: 'mb-3'
    // },
    {
      type: 'number',
      key: 'hirePrice',
      value: null,
      label: '请填写点数 （1赏金=10点数，点数填入不得少于10且为10的倍数）',
      suffix: '点',
      // integer: true,
      hide: true,
      show: true,
      disabled: false,
      hideDetails: true,
      change: val => hirePriceChange(val, 'hirePrice')
      // col: 6,
      // flexStyle: 'mr-3'
    },
    // {
    //   type: 'number',
    //   key: 'hirePoint',
    //   value: null,
    //   label: '众聘奖励积分数',
    //   suffix: '点',
    //   hide: true,
    //   col: 6,
    //   disabled: false,
    //   hideDetails: true,
    //   show: false
    // },
    {
      slotName: 'numericalValue',
      noParam: true,
      show: true,
      hide: true
    },
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '职位名称 *',
      rules: [v => !!v || '请填写职位名称']
    },
    {
      slotName: 'positionId',
      key: 'positionId',
      value: '',
      labelKey: 'positionName',
      label: '职位类型 *',
      noParam: true,
      readonly: true,
      rules: [v => !!v || '请选择职位类型']
    },
    // {
    //   type: 'datePicker',
    //   key: 'expireTime',
    //   dateType: 'date', // 时间类型 year month date time
    //   value: null,
    //   label: '到期时间 *',
    //   outlined: true,
    //   rules: [v => !!v || '请选择到期时间']
    // },
    {
      type: 'wangEditor',
      key: 'content',
      value: '',
      label: '岗位职责 *',
    },
    {
      type: 'wangEditor',
      key: 'requirement',
      value: '',
      label: '岗位要求 *',
    },
    // {
    //   type: 'textarea',
    //   key: 'content',
    //   rows: 10,
    //   value: '',
    //   label: '岗位职责 *',
    //   counter: 5000,
    //   clearable: true,
    //   rules: [
    //     value => {
    //       if (value) return true
    //       return '请输入岗位职责'
    //     },
    //     value => {
    //       if (value?.length <= 5000) return true
    //       return '请输入2-5000个字符'
    //     }
    //   ]
    // },
    // {
    //   type: 'textarea',
    //   key: 'requirement',
    //   rows: 10,
    //   value: '',
    //   label: '岗位要求 *',
    //   counter: 5000,
    //   clearable: true,
    //   rules: [
    //     value => {
    //       if (value) return true
    //       return '请输入岗位要求'
    //     },
    //     value => {
    //       if (value?.length <= 5000) return true
    //       return '请输入2-5000个字符'
    //     }
    //   ]
    // }
  ]
})

// items.value.options.forEach(e => e.rules = []) // 测试使用

// 获取众聘分配比例
const getRatio = async () => {
  const data = await getPublicRatio()
  ratio.value = data
}
getRatio()

// 编辑回显
watch(
  () => props.itemData,
  (val) => {
    if (!Object.keys(val).length) return
    items.value.options.forEach(e => {
      if (Object.prototype.hasOwnProperty.call(e, 'disabled')) e.disabled = val.hire
      if (e.labelKey) {
        query[e.key] = val[e.key]
        e.value = val[e.labelKey]
        return
      }
      if (e.noParam) return
      e.value = val[e.key]
      e.change && e.change(e.value)
    })
  },
  { immediate: true },
  { deep: true }
)

// 职位类型
const handleJobClickItem = (list, name) => {
  const positionId = getValue('positionId')
  if (!list.length) {
    delete query.positionId
    positionId.value = ''
    return
  }
  query.positionId = list[0]
  positionId.value = name
}

// 岗位模板
import Snackbar from '@/plugins/snackbar'
const useJobTemplate = async () => {
  if (!query.positionId) return Snackbar.warning('请先选择职位类型')
  // 获取职位模板内容-赋值
  const res = await getRecruitPositionDetails(query.positionId)
  if (!res) return Snackbar.warning('此职位类型没有可使用的模板！')
  if (res.content || res.requirement) {
    items.value.options.forEach(e => {
      if (res.content && e.key === 'content') e.value = res.content
      if (res.requirement && e.key === 'requirement') e.value = res.requirement
    })
    Snackbar.success('模板填充完成！')
  }
}

// 众聘规则查看
const handleViewRule = () => {
  show.value = true
}

// 众聘规则查看
const hirePriceChange = (value, key) => {
  let calcCost = value-0
  if (calcCost < 10 ) calcCost = 10
  else {
    calcCost = parseInt(calcCost/10)*10
  }
  const obj = items.value.options.find(k => k.key === key)
  if (obj) {
    obj.value = calcCost
  }
}

const getQuery = async () => {
  const { valid } = await formPageRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  items.value.options.forEach(e => {
    if (e.noParam) return
    else obj[e.key] = e.value
  })
  // 不是众聘岗位的默认给0
  if (!obj.hire) {
    // obj.hirePoint = 0
    obj.hirePrice = 0
  }
  
  query = Object.assign(query, obj)
  return query
}

defineExpose({
  formPageRef,
  getQuery
})
</script>

<style scoped lang="scss">
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
.calculation {
  display: block;
  width: 120px;
}
</style>