|
@@ -6,18 +6,18 @@
|
|
<ProgressBar
|
|
<ProgressBar
|
|
label="企业信息填写完成度:"
|
|
label="企业信息填写完成度:"
|
|
:num="completeNum"
|
|
:num="completeNum"
|
|
- :total="tabList?.length"
|
|
|
|
|
|
+ :total="status?.length"
|
|
:fontSize="14"
|
|
:fontSize="14"
|
|
:inlineDisplay="true"
|
|
:inlineDisplay="true"
|
|
style="width: 350px;"
|
|
style="width: 350px;"
|
|
></ProgressBar>
|
|
></ProgressBar>
|
|
</div>
|
|
</div>
|
|
<v-card class="card-box pa-5" style="min-height: 500px">
|
|
<v-card class="card-box pa-5" style="min-height: 500px">
|
|
- <v-tabs v-model="tab" @update:model-value="handleTabClick" align-tabs="start" color="primary" bg-color="#f7f8fa">
|
|
|
|
|
|
+ <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" >
|
|
<v-tab v-for="val in tabList" :key="val.value" :value="val.value" >
|
|
{{ val.label }}
|
|
{{ val.label }}
|
|
<template v-slot:append>
|
|
<template v-slot:append>
|
|
- <template v-if="val.status === false">
|
|
|
|
|
|
+ <template v-if="status.find(e => e.id === val.id).status === false">
|
|
<v-icon color="orange">mdi-information-outline</v-icon>
|
|
<v-icon color="orange">mdi-information-outline</v-icon>
|
|
<v-tooltip activator="parent" location="top">请完善{{ val.label }}</v-tooltip>
|
|
<v-tooltip activator="parent" location="top">请完善{{ val.label }}</v-tooltip>
|
|
</template>
|
|
</template>
|
|
@@ -28,20 +28,12 @@
|
|
<template v-for="item in tabList" :key="item.id">
|
|
<template v-for="item in tabList" :key="item.id">
|
|
<div v-show="item.value === tab">
|
|
<div v-show="item.value === tab">
|
|
<component
|
|
<component
|
|
- ref="tabRef"
|
|
|
|
- class="mb-3"
|
|
|
|
:is="item.path"
|
|
:is="item.path"
|
|
- @complete="complete"
|
|
|
|
- @change="val => tab = val"
|
|
|
|
|
|
+ @complete="handleComplete"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
- <!-- <v-window v-model="tab" class="mt-3">
|
|
|
|
- <v-window-item :value="val.value" v-for="val in tabList" :key="val.value">
|
|
|
|
- <component :is="val.path" ref="tabRef"></component>
|
|
|
|
- </v-window-item>
|
|
|
|
- </v-window> -->
|
|
|
|
</v-card>
|
|
</v-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -54,54 +46,45 @@ import enterpriseAlbum from './informationSettingsComponents/enterpriseAlbum.vue
|
|
import welfareLabel from './informationSettingsComponents/welfareLabel.vue'
|
|
import welfareLabel from './informationSettingsComponents/welfareLabel.vue'
|
|
import enterpriseLabel from './informationSettingsComponents/enterpriseLabel.vue'
|
|
import enterpriseLabel from './informationSettingsComponents/enterpriseLabel.vue'
|
|
import businessInformation from './informationSettingsComponents/businessInformation.vue'
|
|
import businessInformation from './informationSettingsComponents/businessInformation.vue'
|
|
-// import authentication from './informationSettingsComponents/authentication.vue'
|
|
|
|
import ProgressBar from '@/components/ProgressBar'
|
|
import ProgressBar from '@/components/ProgressBar'
|
|
-import { ref, shallowRef, watch } from 'vue'
|
|
|
|
|
|
+import { ref, watch } from 'vue'
|
|
import {
|
|
import {
|
|
useRoute,
|
|
useRoute,
|
|
- // useRouter
|
|
|
|
} from 'vue-router'
|
|
} from 'vue-router'
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
|
|
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
-// const router = useRouter()
|
|
|
|
const { t } = useI18n()
|
|
const { t } = useI18n()
|
|
// tab
|
|
// tab
|
|
-const tabRef = shallowRef()
|
|
|
|
const tab = ref(1)
|
|
const tab = ref(1)
|
|
-const tabList = ref([
|
|
|
|
|
|
+const tabList = [
|
|
{ label: t('enterprise.infoSetting.basicInfo'), value: 1, path: basicInfo, id: 'basicInfo' },
|
|
{ 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.enterpriseLogo'), value: 2, path: enterpriseLogo, id: 'enterpriseLogo' },
|
|
{ label: t('enterprise.infoSetting.enterpriseAlbum'), value: 3, path: enterpriseAlbum, id: 'enterpriseAlbum' },
|
|
{ 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.welfareLabel'), value: 4, path: welfareLabel, id: 'welfareLabel' },
|
|
{ label: t('enterprise.infoSetting.enterpriseLabel'), value: 7, path: enterpriseLabel, id: 'enterpriseLabel' },
|
|
{ label: t('enterprise.infoSetting.enterpriseLabel'), value: 7, path: enterpriseLabel, id: 'enterpriseLabel' },
|
|
{ label: t('enterprise.infoSetting.businessInformation'), value: 5, path: businessInformation, id: 'businessInformation' },
|
|
{ label: t('enterprise.infoSetting.businessInformation'), value: 5, path: businessInformation, id: 'businessInformation' },
|
|
- // { label: t('setting.realNameAuthentication'), value: 6, path: authentication, id: 'authentication' },
|
|
|
|
|
|
+]
|
|
|
|
+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) => { // newQuery, oldQuery
|
|
|
|
|
|
+watch(() => route?.query?.tabKey, (newVal) => {
|
|
if (newVal) tab.value = newVal - 0
|
|
if (newVal) tab.value = newVal - 0
|
|
}, { deep: true, immediate: true })
|
|
}, { deep: true, immediate: true })
|
|
|
|
|
|
-const handleTabClick = () => {
|
|
|
|
- // 基本信息-获取企业管理员实名认证信息
|
|
|
|
- // if (tab.value === 1) {
|
|
|
|
- // tabRef.value[0].getAuthInfo()
|
|
|
|
- // }
|
|
|
|
- // router.push(`${route.path}?tabKey=${tab.value.toString()}`)
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
const completeNum = ref(0)
|
|
const completeNum = ref(0)
|
|
-const complete = (val) => {
|
|
|
|
|
|
+const handleComplete = (val) => {
|
|
if (!val?.id) return
|
|
if (!val?.id) return
|
|
completeNum.value = 0
|
|
completeNum.value = 0
|
|
- tabList.value.forEach(e => {
|
|
|
|
- if (e.id === val.id) {
|
|
|
|
- e.status = val.status || false
|
|
|
|
- }
|
|
|
|
- if (e.status) {
|
|
|
|
- completeNum.value++
|
|
|
|
- }
|
|
|
|
|
|
+ status.value.forEach(e => {
|
|
|
|
+ if (e.id === val.id) e.status = val.status || false
|
|
|
|
+ if (e.status) completeNum.value++
|
|
})
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|