企业完成度展示： 表单长度充当分母，完成项为分子计算百分比

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

@@ -5,8 +5,8 @@
     <div class="white-bgc mb-3">
       <ProgressBar
         label="企业信息填写完成度："
-        :num="completeNum"
-        :total="status?.length"
+        :num="completeCount"
+        :total="totalCount"
         :fontSize="14"
         :inlineDisplay="true"
         style="width: 350px;"
@@ -78,14 +78,34 @@ watch(() => route?.query?.tabKey, (newVal) => {
   if (newVal) tab.value = newVal - 0
 }, { deep: true, immediate: true })
 
-const completeNum = ref(0)
-const handleComplete = (val) => {
-  if (!val?.id) return
-  completeNum.value = 0
+// 完成度计算
+const completeCount = ref(0) // 总完成数
+const totalCount = ref(0) // 总数
+const calcCompletion = () => {
+  let complete = 0
+  let total = 0
   status.value.forEach(e => {
-    if (e.id === val.id) e.status = val.status || false
-    if (e.status) completeNum.value++
+    if (!e.totalCount) return
+    //
+    total = total + e.totalCount
+    //
+    if (e.completeCount) {
+      complete = complete + e.completeCount
+      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()
 }
 </script>
 

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

@@ -195,13 +195,12 @@ getDict('menduner_industry_type', {}, 'industryList').then(({ data }) => {
 //   return obj
 // })
 
-let completeStatus = false
 // 获取基本信息
 const getBaseInfo = async () => {
+  let completeCount = 0
   const data = await getEnterpriseBaseInfo()
   if (!data) return
   query.id = data.id
-  completeStatus = true
   formItems.value.options.forEach(item => {
     if (item.dictTypeName) {
       getDict(item.dictTypeName).then(({ data }) => {
@@ -216,10 +215,11 @@ const getBaseInfo = async () => {
       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 === '')) completeStatus = false
+    if (item.rules && (item.value === undefined || item.value === null || item.value === '')) completeCount++
   })
   // 完成度展示
-  emit('complete', { status: completeStatus, id: 'basicInfo' })
+  const totalCount = formItems.value.options?.length || 0
+  emit('complete', { totalCount, completeCount, id: 'basicInfo' })
 }
 getBaseInfo()
 

src/views/recruit/enterprise/entInfoSetting/informationSettingsComponents/businessInformation.vue

@@ -160,26 +160,31 @@ const handleSave = async () => {
   getBaseInfo()
 }
 
-let completeStatus = false
+// 完成度展示
+const completeFun = (completeCount = 0) => {
+  const totalCount = formItems.value.options?.length || 0
+  emit('complete', { totalCount, completeCount, id: 'businessInformation' })
+}
+
 // 获取基本信息
 const getBaseInfo = async () => {
+  let completeCount = 0
   try {
     const data = await getEnterpriseBusiness()
-    emit('complete', { status: data && Object.keys(data).length ? true : false, id: 'businessInformation' })
+    if (data && Object.keys(data).length) completeFun(completeCount)
     if (!data) return
     query.id = data.id
-    completeStatus = true
     formItems.value.options.forEach(item => {
       item.value = data[item.key]
       // 完成度展示
       if (item.key !== 'formerName') {
-        if (item.value === undefined || item.value === null || item.value === '') completeStatus = false
+        if (item.value === undefined || item.value === null || item.value === '') completeCount++
       }
     })
     // 完成度展示
-    emit('complete', { status: completeStatus, id: 'businessInformation' })
+    completeFun(completeCount)
   } catch (error) {
-    emit('complete', { status: completeStatus, id: 'businessInformation' })
+    completeFun(completeCount)
   }
 }
 getBaseInfo()

src/views/recruit/enterprise/entInfoSetting/informationSettingsComponents/enterpriseAlbum.vue

@@ -55,7 +55,12 @@ const imgList = ref([])
 const getInfo = async () => {
   const data = await getEnterpriseBaseInfo()
   // 完成度展示
-  emit('complete', { status: Boolean(data?.albumList?.length), id: 'enterpriseAlbum' })
+  emit('complete', {
+    totalCount: 1,
+    completeCount: data?.albumList?.length ? 1 : 0,
+    id: 'enterpriseAlbum'
+  })
+
   if (!data || !data.albumList) return
   imgList.value = data.albumList
 }

src/views/recruit/enterprise/entInfoSetting/informationSettingsComponents/enterpriseLabel.vue

@@ -104,7 +104,11 @@ const getData = async () => {
   const data = await getEnterpriseBaseInfo()
   chosen.value = data?.tagList || []
   // 完成度展示
-  emit('complete', { status: Boolean(chosen.value?.length), id: 'enterpriseLabel' })
+  emit('complete', {
+    totalCount: 1,
+    completeCount: chosen.value?.length ? 1 : 0,
+    id: 'enterpriseLabel'
+  })
 }
 getData()
 const textItem = ref({

src/views/recruit/enterprise/entInfoSetting/informationSettingsComponents/enterpriseLogo.vue

@@ -63,7 +63,11 @@ const getInfo = async () => {
     // 完成度展示
     await userStore.getEnterpriseInfo() // 更新当前登录的企业用户信息
   }
-  emit('complete', { status: Boolean(squareImageUrl.value), id: 'enterpriseLogo' })
+  emit('complete', {
+    totalCount: 1,
+    completeCount: squareImageUrl?.value ? 1 : 0,
+    id: 'enterpriseLogo'
+  })
 }
 getInfo()
 

src/views/recruit/enterprise/entInfoSetting/informationSettingsComponents/welfareLabel.vue

@@ -104,7 +104,11 @@ const getData = async () => {
   const data = await getEnterpriseBaseInfo()
   chosen.value = data?.welfareList || []
   // 完成度展示
-  emit('complete', { status: Boolean(chosen.value?.length), id: 'welfareLabel' })
+  emit('complete', {
+    totalCount: 1,
+    completeCount: chosen.value?.length ? 1 : 0,
+    id: 'welfareLabel'
+  })
 }
 getData()
 const textItem = ref({