<template>
|
<div class="container">
|
<Breadcrumb :items="['menu.profile', 'menu.profile.basic']" />
|
<a-space direction="vertical" :size="16" fill>
|
<a-card class="general-card" :title="$t('basicProfile.title.form')">
|
<template #extra>
|
<a-space>
|
<a-button>{{ $t('basicProfile.cancel') }}</a-button>
|
<a-button type="primary">
|
{{ $t('basicProfile.goBack') }}
|
</a-button>
|
</a-space>
|
</template>
|
<a-steps v-model:current="step" line-less class="steps">
|
<a-step>{{ $t('basicProfile.steps.commit') }}</a-step>
|
<a-step>{{ $t('basicProfile.steps.approval') }}</a-step>
|
<a-step>{{ $t('basicProfile.steps.finish') }}</a-step>
|
</a-steps>
|
</a-card>
|
<a-card class="general-card">
|
<ProfileItem :loading="loading" :render-data="currentData" />
|
</a-card>
|
<a-card class="general-card">
|
<ProfileItem :loading="preLoading" type="pre" :render-data="preData" />
|
</a-card>
|
<OperationLog />
|
</a-space>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from 'vue';
|
import useLoading from '@/hooks/loading';
|
import { queryProfileBasic, ProfileBasicRes } from '@/api/profile';
|
import ProfileItem from './components/profile-item.vue';
|
import OperationLog from './components/operation-log.vue';
|
|
const { loading, setLoading } = useLoading(true);
|
const { loading: preLoading, setLoading: preSetLoading } = useLoading(true);
|
const currentData = ref<ProfileBasicRes>({} as ProfileBasicRes);
|
const preData = ref<ProfileBasicRes>({} as ProfileBasicRes);
|
const step = ref(1);
|
const fetchCurrentData = async () => {
|
try {
|
const { data } = await queryProfileBasic();
|
currentData.value = data;
|
step.value = 2;
|
} catch (err) {
|
// you can report use errorHandler or other
|
} finally {
|
setLoading(false);
|
}
|
};
|
const fetchPreData = async () => {
|
try {
|
const { data } = await queryProfileBasic();
|
preData.value = data;
|
} catch (err) {
|
// you can report use errorHandler or other
|
} finally {
|
preSetLoading(false);
|
}
|
};
|
fetchCurrentData();
|
fetchPreData();
|
</script>
|
|
<script lang="ts">
|
export default {
|
name: 'Basic',
|
};
|
</script>
|
|
<style scoped lang="less">
|
.container {
|
padding: 0 20px 20px 20px;
|
}
|
|
.steps {
|
max-width: 548px;
|
margin: 0 auto 10px;
|
}
|
</style>
|
