wisdomisitezwfront-web/src/views/login/CompanyLogon/index.vue

<template>
	<div class="basic-information flx-column">
		<div class="header-lf">
			<div class="logo">
				<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
				<!-- <img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" /> -->
				<span>乳山工程建筑管理服务平台</span>
				<span class="middle">|</span>
				<span>企业注册</span>
			</div>
			<div class="header-rt" @click="router.push('/login')">
				<span>已有帐号</span>
				<span class="middle">|</span>
				<span style="margin-right: 30px">马上登录</span>
			</div>
		</div>
		<div class="container">
			<Setps :datas="datas" :active="active" />

			<keep-alive>
				<component :ref="setRef" :is="components[active]" @next="next" @prev="prev" />
			</keep-alive>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import Setps from "@/components/Steps/setps.vue";
import BasicForm from "./basic-form.vue";
import Entrepreneur from "./entrepreneur.vue";
import Registered from "./registered.vue";
import { datas as values } from "@/enums/company/SetpsEnum";
import { addCompany } from "@/api/modules/jxjview";
import type { RuleFormData } from "./basic-form.vue";
import type { EnterpriseMains } from "./entrepreneur.vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const datas = reactive(values);
const active = ref(0);
const requestData = ref({});
const onReset = ref<[typeof BasicForm | undefined]>([undefined]);
const components = [BasicForm, Entrepreneur, Registered];

const setRef = (el: any) => {
	if (el && el.reset) {
		onReset.value = [el];
	}
};

const next = (e: RuleFormData | { enterpriseMains: EnterpriseMains[] }) => {
	if (active.value >= datas.length - 1)
		throw Error(
			`if you operate again, active will be greater than the number of setps components.
			error in views/companyview/basicinformation/index.vue, function name: next, line: 28`
		);

	requestData.value = Object.assign({}, requestData.value, e);
	if (active.value === 1) {
		return onSubmit();
	}
	active.value++;
};

const prev = () => {
	if (active.value <= 0)
		throw Error(`no last one. error in views/companyview/basicinformation/index.vue, function name: prve, line: 37`);

	active.value--;
};

const onSubmit = async () => {
	try {
		// @ts-expect-error
		await addCompany(requestData.value);
		active.value++;
		requestData.value = {};
		// debugger;
		onReset.value[0]?.reset();
	} catch (err: any) {
		// ElMessage.error(err);
		// active.value++;
		// router.replace("/login");
	}
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>