menduner/src/views/recruit/enterprise/entInfoSetting/informationSettingsComponents/basicInfo.vue

<!-- 基本信息 -->
<template>
  <div>
    <div class="topTip">丰富详尽的企业介绍能提高求职者对贵企业的关注和了解，有助于达到更好的招聘效果</div>
    <CtForm ref="CtFormRef" :items="formItems" style="width: 900px;margin: 0 auto">
      <template #industryId="{ item }">
        <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs" :close-on-content-click="true">
          <template v-slot:activator="{  props }">
            <TextInput
              v-model="item.value"
              :item="item"
              v-bind="props"
            ></TextInput>
          </template>
          <industryTypeCard :limit="1" :select="[query.industryId].filter(Boolean)" @handleClickIndustry="handleIndustry"></industryTypeCard>
        </v-menu>
      </template>
      <template #prepare="{ item }">
        <v-checkbox v-model="item.value" label="筹备中（如果贵企业正在筹备，请勾选）" color="primary"></v-checkbox>
      </template>
    </CtForm>
    <div class="text-center">
      <v-btn color="primary" class="buttons mt-3 mb-10" @click.stop="handleSave">{{ $t('common.save') }}</v-btn>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'informationSettingsComponents-basicInfo'})
import { ref, reactive } from 'vue'
import { getEnterpriseBaseInfo, updateEnterpriseBaseInfo } from '@/api/enterprise'
import { getDict } from '@/hooks/web/useDictionaries'
import { useI18n } from '@/hooks/web/useI18n'
import industryTypeCard from '@/components/industryTypeCard'
import Snackbar from '@/plugins/snackbar'
import { useUserStore } from '@/store/user'
const emit = defineEmits(['complete', 'preview'])

const { t } = useI18n()
const CtFormRef = ref()
const query = reactive({})
const user = useUserStore()
const formItems = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: '',
      col: 6,
      label: '企业全称 *',
      flexStyle: 'mr-3',
      slotName: 'name',
      rules: [v => !!v || '请输入企业全称']
    },
    {
      type: 'text',
      key: 'anotherName',
      value: '',
      col: 6,
      label: '企业展示名称 *',
      rules: [v => !!v || '请输入企业展示名称']
    },
    {
      type: 'text',
      key: 'website',
      value: '',
      col: 6,
      flexStyle: 'mr-3',
      label: '企业官网'
    },
    {
      type: 'text',
      key: 'contact',
      value: '',
      col: 6,
      label: '联系人'
    },
    {
      type: 'phoneNumber',
      key: 'phone',
      value: '',
      col: 6,
      flexStyle: 'mr-3',
      label: '联系电话'
    },
    {
      slotName: 'industryId',
      key: 'industryId',
      value: null,
      label: '所在行业 *',
      outlined: true,
      clearable: false,
      itemText: 'label',
      itemValue: 'value',
      col: 6,
      noParam: true,
      rules: [v => !!v || '请选择所在行业']
    },
    {
      type: 'autocomplete',
      key: 'scale',
      value: null,
      label: '企业规模 *',
      outlined: true,
      clearable: false,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_scale',
      rules: [v => !!v || '请选择企业规模'],
      items: []
    },
    {
      type: 'datePicker',
      mode: 'month',
      key: 'openTime',
      value: null,
      format: 'YYYY-MM',
      disabledDate: true,
      label: '开业时间',
      labelWidth: 120,
      col: 6,
      flexStyle: 'mr-3',
    },
    {
      slotName: 'prepare',
      key: 'prepare',
      value: true,
      col: 6
    },
    {
      type: 'textarea',
      key: 'introduce',
      value: null,
      counter: 2000,
      rows: 6,
      label: '企业介绍 *',
      outlined: true,
      rules: [v => !!v || '请输入企业介绍']
    },
  ]
})

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

// 行业列表
const industryList = ref([])
getDict('menduner_industry_type', {}, 'industryList').then(({ data }) => {
  data = data?.length && data || []
  industryList.value = data
})

// 获取基本信息
const getBaseInfo = async () => {
  let completeCount = 0
  const totalCount = formItems.value.options?.length || 0
  const data = await getEnterpriseBaseInfo()
  if (!data || !Object.keys(data).length) return emit('complete', { totalCount, completeCount, id: 'basicInfo' }) // 完成度展示
  query.id = data.id
  formItems.value.options.forEach(item => {
    if (item.dictTypeName) {
      getDict(item.dictTypeName).then(({ data }) => {
        data = data?.length && data || []
        item.items = data
      })
    }
    query.industryId = data.industryId
    if (item.key === 'industryId') {
      item.value = industryList.value.find(e => e.id === data[item.key])?.nameCn
    } else if (item.key === 'openTime') {
      item.value = data[item.key] ? data[item.key] : item.default
    } else item.value = data[item.key]
    // 完成度展示
    if (!item.rules || (item.value !== undefined && item.value !== null && item.value !== '')) completeCount++
  })
  // 完成度展示
  emit('complete', { totalCount, completeCount, id: 'basicInfo' })
}
getBaseInfo()

// 所在行业
const handleIndustry = (list, arr) => {
  if (!list.length) return
  query.industryId = list[0]
  const str = arr.map(e => e.nameCn).join('、')
  setValue('industryId', str)
}

const handleSave = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  formItems.value.options.forEach(e => {
    if (e.noParam) return
    query[e.key] = e.value
  })
  await updateEnterpriseBaseInfo(query)
  Snackbar.success(t('common.saveMsg'))
  await user.getEnterpriseInfo()
  getBaseInfo()
}
</script>

<style lang="scss" scoped>
.topTip {
  background-color: #f7f8fa;
  color: #2f3640;
  padding: 12px 20px;
  margin: 10px 0 40px;
  font-size: 14px;
}
</style>