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

<template>
  <div>
    <CtForm ref="formPageRef" :items="items" style="width: 600px;">
      <template #enterpriseName="{ item }">
        <div class="mb-4">
          <span style="color: #777;">公司：</span>
          <span style="color: #555">{{ item.value }}</span>
        </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>
        </template>
    </CtForm>
  </div>
</template>

<script setup>
defineOptions({ name: 'position-add-baseInfo'})
import CtForm from '@/components/CtForm'
import { reactive, ref, defineExpose } from 'vue'
import textUI from '@/components/FormUI/TextInput'
import jobTypeCard from '@/components/jobTypeCard'

const formPageRef = ref()
const query = reactive({})
const items = ref({
  options: [
    {
      type: 'text',
      key: 'enterpriseName',
      disabled: true,
      value: '辞图科技·计算机软件·广州辞图科技有限公司',
      label: '公司名称 *'
    },
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '职位名称 *',
      rules: [v => !!v || '请选择职位名称']
    },
    {
      slotName: 'positionId',
      key: 'positionId',
      value: '',
      label: '职位类型 *',
      rules: [v => !!v || '请选择职位类型']
    },
    {
      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个字符'
        }
      ]
    }
  ]
})

const setValue = (key, value) => {
  items.value.options.find(e => e.key === key).value = value
}

// 期望职位
const handleJobClickItem = (list, name) => {
  if (!list.length) return
  query.positionId = list[0]
  setValue('positionId', name)
}

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

<style scoped lang="scss">
.enterpriseName {
  color: #777;
}
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
</style>