menduner/src/views/recruit/enterprise/entInfoSetting/index.vue

<!-- 企业信息设置 -->
<template>
  <div>
    <!-- v-if="completeNum !== tabList?.length"  -->
    <div class="white-bgc mb-3">
      <ProgressBar
        label="企业信息填写完成度："
        :num="completeCount"
        :total="totalCount"
        :fontSize="14"
        :inlineDisplay="true"
        style="width: 350px;"
      ></ProgressBar>
    </div>
    <v-card class="card-box pa-5" style="min-height: 500px">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
        <v-tab v-for="val in tabList" :key="val.value" :value="val.value" >
          {{ val.label }}
          <template v-slot:append>
            <template v-if="status.find(e => e.id === val.id).status === false">
              <v-icon color="orange">mdi-information-outline</v-icon>
              <v-tooltip activator="parent" location="top">请完善{{ val.label }}</v-tooltip>
            </template>
          </template>
        </v-tab>
      </v-tabs>
      <div class="mt-3">
        <template v-for="item in tabList" :key="item.id">
          <div v-show="item.value === tab">
            <component
              ref="componentRef"
              :is="item.path"
              @complete="handleComplete"
            />
          </div>
        </template>
      </div>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({ name: 'enterprise-system-management-information-settings'})
import basicInfo from './informationSettingsComponents/basicInfo.vue'
import enterpriseLogo from './informationSettingsComponents/enterpriseLogo.vue'
import enterpriseAlbum from './informationSettingsComponents/enterpriseAlbum.vue'
import welfareLabel from './informationSettingsComponents/welfareLabel.vue'
import enterpriseLabel from './informationSettingsComponents/enterpriseLabel.vue'
import businessInformation from './informationSettingsComponents/businessInformation.vue'
import ProgressBar from '@/components/ProgressBar'
import { ref, watch } from 'vue'
import { 
  useRoute, 
} from 'vue-router'
import { useI18n } from '@/hooks/web/useI18n'

const componentRef = ref()

const route = useRoute()
const { t } = useI18n()
// tab
const tab = ref(1)
const tabList = [
  { label: t('enterprise.infoSetting.basicInfo'), value: 1, path: basicInfo, id: 'basicInfo' },
  { label: t('enterprise.infoSetting.enterpriseLogo'), value: 2, path: enterpriseLogo, id: 'enterpriseLogo' },
  { label: t('enterprise.infoSetting.enterpriseAlbum'), value: 3, path: enterpriseAlbum, id: 'enterpriseAlbum' },
  { label: t('enterprise.infoSetting.welfareLabel'), value: 4, path: welfareLabel, id: 'welfareLabel' },
  { label: t('enterprise.infoSetting.enterpriseLabel'), value: 7, path: enterpriseLabel, id: 'enterpriseLabel' },
  { label: t('enterprise.infoSetting.businessInformation'), value: 5, path: businessInformation, id: 'businessInformation' },
]
const status = ref([
  { id: 'basicInfo', status: false },
  { id: 'enterpriseLogo', status: false },
  { id: 'enterpriseAlbum', status: false },
  { id: 'welfareLabel', status: false },
  { id: 'enterpriseLabel', status: false },
  { id: 'businessInformation', status: false }
])

watch(() => route?.query?.tabKey, (newVal) => {
  if (newVal) tab.value = newVal - 0
}, { deep: true, immediate: true })

// 完成度计算
const completeCount = ref(0) // 总完成数
const totalCount = ref(0) // 总数
const calcCompletion = () => {
  let complete = 0
  let total = 0
  status.value.forEach(e => {
    if (!e.totalCount) return
    //
    total = total + e.totalCount
    complete = complete + (e.completeCount || 0)
    e.status = e.completeCount === e.totalCount
  })
  completeCount.value = complete
  totalCount.value = total
}

// 企业信息填写完成度
const handleComplete = (val) => { // completeNum: tab内完成数, totalNum: tab内总数。
  if (!val || !val.id) return
  const item = status.value.find(e => e.id === val.id)
  if (item) {
    item.completeCount = val.completeCount || 0
    item.totalCount = val.totalCount || 0
  }
  calcCompletion()
  // 目前 基础信息里面的企业名称 和工商信息里面的企业名称 没有要求需要一致
  // if (val.isUpdate && val.id === 'businessInformation') {
  //   // 工商信息更改同时更新基本信息
  //   if (componentRef.value?.length) {
  //     componentRef.value[0].getBaseInfo()
  //   }
  // }
}
</script>

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