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

<!-- 基本信息 -->
<template>
  <div>
    <div class="topTip">丰富详尽的企业介绍能提高求职者对贵企业的关注和了解，有助于达到更好的招聘效果</div>
    <CtForm ref="CtFormRef" :items="formItems" style="width: 900px;margin: 0 auto">
      <template #name="{ item }">
        <div v-show="!item.show" class="text-right" style="width: 80px; line-height: 40px;">
          <v-icon color="primary" size="20">mdi-shield-check</v-icon> <!-- mdi-shield-remove -->
          <span style="color: var(--v-primary-base);font-size: 14px;">已认证</span>
        </div>
      </template>
      <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>
    </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'

const { t } = useI18n()
const CtFormRef = ref()
const query = reactive({})
const formItems = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '企业全称 *',
      slotName: 'name',
      rules: [v => !!v || '请输入企业全称']
    },
    {
      type: 'text',
      key: 'anotherName',
      value: '',
      col: 6,
      flexStyle: 'mr-3',
      label: '企业别名 *',
      rules: [v => !!v || '请输入企业别名']
    },
    {
      type: 'text',
      key: 'website',
      value: '',
      col: 6,
      label: '企业官网'
    },
    {
      type: 'text',
      key: 'contact',
      value: '',
      col: 6,
      flexStyle: 'mr-3',
      label: '联系人'
    },
    {
      type: 'text',
      key: 'phone',
      value: '',
      col: 6,
      label: '联系电话'
    },
    {
      slotName: 'industryId',
      key: 'industryId',
      value: null,
      label: '所在行业 *',
      outlined: true,
      clearable: false,
      itemText: 'label',
      itemValue: 'value',
      col: 6,
      noParam: true,
      flexStyle: 'mr-3',
      rules: [v => !!v || '请选择所在行业']
    },
    {
      type: 'autocomplete',
      key: 'financingStatus',
      value: null,
      label: '融资阶段 *',
      outlined: true,
      clearable: false,
      itemText: 'label',
      itemValue: 'value',
      col: 6,
      dictTypeName: 'menduner_financing_status',
      rules: [v => !!v || '请选择融资阶段'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'scale',
      value: null,
      label: '企业规模 *',
      outlined: true,
      clearable: false,
      itemText: 'label',
      itemValue: 'value',
      col: 6,
      flexStyle: 'mr-3',
      dictTypeName: 'menduner_scale',
      rules: [v => !!v || '请选择企业规模'],
      items: []
    },
    {
      type: 'text',
      key: 'workTime',
      value: null,
      col: 6,
      class: 'mb-3',
      label: '上班时间(示例：上午09:00 - 下午17:00) *',
      rules: [v => !!v || '请填写上班时间']
    },
    {
      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 () => {
  const data = await getEnterpriseBaseInfo()
  if (!data) return
  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 item.value = data[item.key]
  })
}
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'))
  getBaseInfo()
}
</script>
<style lang="scss" scoped>
.topTip {
  background-color: #f7f8fa;
  color: #2f3640;
  padding: 12px 20px;
  margin: 10px 0 40px;
  font-size: 14px;
}
</style>