vue3+ts 导航条遍历与实现

导航条遍历与实现：
引用的方法可直接使用多个地方与多个项目

第一步： 导航条渲染

<el-dialog
v-model="dialogVisible"
:title="$swpT('field.softwareModule')"
destroy-on-close
width="1000"
@close="handleDialogClose"
>
<!--导航条-->
<div class="step-navigation">
<el-steps :active="currentStep" :space="300" align-center direction="horizontal">
<el-step v-for="(item,index) in stepOptions" :key="item.value">
<template v-slot:icon>
<el-button :class="{ active: currentStep === index + 1 }" :type="currentStep === index + 1? 'primary' : 'plain'" size="large">{{ item.label }}</el-button>
</template>
</el-step>
</el-steps>
</div>

<div style="overflow-y: scroll;height: 623px;">
<!--第一步骤：表单字段-->
<el-form
ref="ruleFormRef"
:model="formData"
:rules="rules"
class="form-panel"
label-width="150px"
>
<el-row v-if="currentStep === 1">
<el-col :span="11">
<el-form-item :label="$swpT('page.swModuleDetailPlan.project')" prop="project" required>
<el-select v-model="formData.project" clearable filterable @change="onProjectSelected">
<el-option v-for="item in projectList" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item :label="$swpT('page.swModuleDetailPlan.ecu')" prop="ecu" required>
<el-select v-model="formData.ecu" :remote-method="searchECU" clearable filterable remote>
<el-option v-for="item in ecuList" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>

<template #footer>
<div class="dialog-footer">
<el-button v-if="currentStep > 1" type="primary" @click="prevStep">{{ $swpT('common.previousStep') }}</el-button>
<el-button type="primary" @click="nextStep">{{ $swpT(currentStep === 4 ? 'common.confirm' : 'common.nextStep') }}</el-button>
<ConfirmStepChangeModal
ref="confirmStepChangeModalRef"
:buttons="modalButtons"
:tips="modalTips"
:title="modalTitle"
/>
</div>
</template>
</el-dialog>

<script lang="tsx" setup>

const currentStep = ref(1);
const stepOptions = [
{
label: $swpT('menu.projectECUInformation'),
value: '1'
}, {
label: $swpT('menu.selectionPlanReleaseInform'),
value: '2'
}, {
label: $swpT('menu.projectMilestonesChipDesc'),
value: '3'
},
{
label: $swpT('menu.creatingSelectionPlan'),
value: '4'
}
];
</script>

第二步： 点击按钮下一步进行操作：
// 下一步
const nextStep = () => {
if (currentStep.value < 4) {
// 对当前步骤进行校验表单数据
ruleFormRef.value.validate((valid: any) => {
if (valid) {
getTableData();
if (currentStep.value === 2) {
openStepChangeModel(); // 打开逻辑弹窗
} else {
console.log('下一步',currentStep.value);
// 其他步骤直接增加 currentStep.value
currentStep.value++;
}
}
});
} else {
// 跳转到创建页面 1.创建新方案
router.push({name: 'createSwModulePlan', query: route.query});
stepsFormStore.updateFormData(formData);
}
};

// 上一步
const prevStep = () => {
if (currentStep.value > 1) {
currentStep.value--;
}
};

第三步：对第一步中的校验进行封装：
<el-form
ref="ruleFormRef"
:model="formData"
:rules="rules"
class="form-panel"
label-width="150px"
>中的:rules="rules"
const rules = ref(ADD_SOFT_MODULE_STEP_SEARCH);
新建rule.ts中
import {CODE_NAME_REGEXP, RELATE_HOUR_REGEXP} from '@/settings/regexp.ts';
import {$swpT, fieldRequired} from '@/utils/packages/common';

/**
* 检测字段
*/
const checkValidator = (
{
name = '', // 字段名称
required = false, // 是否必填
length = 0, // 长度限制
minLength = 0, // 最小长度
maxLength = 0, // 最大长度
reg = new RegExp(''), // 正则
standard = '', // 其他校验标准
type = '' // 数据类型: 默认-字符串; array-数组
},
value: any,
next: any
) => {
// 为空判断
if (type === 'array') {
// [数组]
if (value.length === 0) {
if (required) {
return next(new Error(fieldRequired(name)));
}
return next();
}
} else {
// [字符串]
if (value === '' || value == null) {
if (required) {
return next(new Error(fieldRequired(name)));
}
return next();
}
}

const len = value.length;

// 长度超范围
if (length !== 0 && len !== length) {
return next(new Error($swpT('regexp.lengthError', {length: length})));
}

// 不到最小长度
if (minLength !== 0 && len < minLength) {
return next(new Error($swpT('regexp.minLength', {length: minLength})));
}

// 超过最大长度
if (maxLength !== 0 && len > maxLength) {
return next(new Error($swpT('regexp.maxLength', {length: maxLength})));
}

// 其他格式
if (reg && !reg.test(value)) {
return next(new Error($swpT('regexp.formatError') + ((standard && `，${standard}`) || '')));
}

return next();
};

const RULE = {
// ECU
ecu: {
name: 'ECU',
required: true,
trigger: 'change',
validator: checkValidator
},
codeRepositorySpaceName: {
name: $swpT('page.swModuleDetailPlan.packageAreaName'),
required: true,
trigger: 'change',
validator: checkValidator
},
type: {
name: $swpT('page.swModuleDetailPlan.type'), // 类型
required: true,
trigger: 'change',
validator: checkValidator
},
project: {
name: $swpT('page.swModuleDetailPlan.project'), // 项目
required: true,
trigger: 'change',
validator: checkValidator
},

chipRelationManHour: {
name: $swpT('page.swModuleDetailPlan.chipRelateTime'), // 芯片关联工时
required: true,
trigger: 'blur',
reg: RELATE_HOUR_REGEXP,
standard: $swpT('warning.onlyPositiveIntegers'), // 只能输入正整数
validator: checkValidator
}
};

// 添加软件模块导航条 - 查询
export const ADD_SOFT_MODULE_STEP_SEARCH = {
project: [RULE.project],
baseline: [RULE.baseline],
nodeReview: [RULE.node],
ecu: [RULE.ecu],
chip: [RULE.chip],
description: [RULE.description],
selfInnovateFlag: [RULE.selfInnovateFlag]
// orderCode: [RULE.orderCode]
};

引用的方法：
/**
* 必填字段格式化
*
* @param field {string}
* @returns {string}
*/
export const fieldRequired = (field: string = ''): string => {
return window.$swpT('warning.fieldIsRequired', {
field
});
};
/*
* 代码仓名称
* 规则: 只允许包含字母、数字或者下划线(_)、中划线(-)、英文句号(.)，必须以字母或数字开头，且长度为2~191个字符
*/
export const CODE_NAME_REGEXP = /^[a-zA-Z0-9][a-zA-Z0-9._-]{1,190}$/;

/*
* 关联工时
* 规则: 只允许输入正整数和0, 不能以0开头
*/
export const RELATE_HOUR_REGEXP = /^(0|[1-9][0-9]*)$/;