Ⅰ、Element-plus
提供的Select
选择器组件与想要目标情况的对比:
1、Element-plus
提供Select
组件情况:
其一、Element-ui
自提供的Select
代码情况为(示例的代码):
// Element-plus 提供的组件代码:
<template>
<div class="flex flex-wrap gap-4 items-center">
<el-select
v-model="value"
placeholder="Select"
size="large"
style="width: 240px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="value" placeholder="Select" style="width: 240px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="value"
placeholder="Select"
size="small"
style="width: 240px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref('')
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
]
</script>
代码地址:https://element-plus.org/zh-CN/component/select.html
其二、页面的显示情况为:
Ⅱ、在项目中使用 Select
组件遇到的问题:
1、在 table
表格中选中配置操作后,属性值(即:Rpl Port
)中的 Select
组件的 options
选项动态展示的操作:
其一、需求描述:
在 Select
组件的 options
选项中,需要根据不同的 环ID
值来展示不同的 Rpl Port
属性的选项值;
因此此时需要涉及两个接口的问题,第一个接口来获取本页面所要展示的属性值,另一个接口来获取对应 环ID
值来展示的 Rpl Port
属性的选项值;
Step1、分别获取两个接口所对应的数据值:
A、获取第一个接口数据的代码:
// 因为此时的代码设置了后台返回的数据值,因此看起来比较冗余,但其实就是个获取页面数据的 get 请求;
// 一进入该页面就需要调用接口来拿到数据值,而此时的 (start, limit) 参数,是因为分页组件的原因,后面会提到;
// 而此时的 get_eastandwest_port(start, limit) 方法,是获取第二个接口数据的方法;
// 获取页面数据操作
const get_erps_configuration = async (start, limit) => {
get_eastandwest_port(start, limit)
console.log('TODO: GET /api/erps/cfg')
//按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
// const resp = await axios.get('/api/erps/cfg', {
// params: {
// start: start,
// limit: limit,
// },
// })
const resp = {
"total": 15,
"data": [
{
"ring_id": "1",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "2",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "3",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "4",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "5",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "6",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "7",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "8",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "9",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "10",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
]
}
console.log(resp, 1111111)
console.log(resp.data, 222222)
console.log(resp.data.data, 33333333)
// if (resp?.status === 200 && resp?.data?.data) {
// tableData.value = resp.data.data
// Total.value = resp.data.total
// }
if (resp?.data) {
tableData.value = resp.data
Total.value = resp.total
}
}
B、获取第二个接口数据的代码:
// 此时会将第二个接口获得的数据放在页面已经定义的 eastAndWestData 变量中;
// 获取东向端口及西向端口的页面数据操作:
const get_eastandwest_port = async (start, limit) => {
console.log('TODO: GET /api/erps/ring/mgmt')
//按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
// const resp = await axios.get('/api/erps/ring/mgmt', {
// params: {
// start: start,
// limit: limit,
// },
// })
const resp = {
"total": 15,
"existing_rings": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
"data": [
{
"del": false,
"enable": false,
"ring_id": "1",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "2",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "3",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "4",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "5",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "6",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "7",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "8",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "9",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "10",
"eport": "GigabitEthernet0/4",
"wport": "GigabitEthernet0/5",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
]
}
console.log(resp, 4444444)
console.log(resp.data, 55555555)
console.log(resp.data.data, 666666666)
// if (resp?.status === 200 && resp?.data?.data) {
// eastAndWestData.value = resp.data.data
// }
if (resp?.data) {
eastAndWestData.value = resp.data
}
console.log(eastAndWestData.value, 7777777777) // eport、wport
console.log(eastAndWestData.value[0], 888888888) // eport、wport
console.log(eastAndWestData.value[0].eport, 88889999) // eport、wport
}
Step2、在点击配置操作后,动态获取 Rpl Port
属性的 options
值:
A、代码:
// 此时的 (index,row) 参数值是 table 表格中对应行的索引值和属性值;
// 此时的 allRplPortOptions 是在点击配置后,Rpl Port 可能存在的所有情况,以备下面做 Ring Type 属性与 Rpl Port 属性的联动操作;
// 此时的 rplPortOptions 值是 Rpl Port 属性的 options 的值,其会根据不同的 index 索引值来在 eastAndWestData(第二个接口获取的值) 中获取要展示的 options(即:rplPortOptions) 值;
// 此时也涉及联动的问题:在 Ring Type 属性值为 'non_rpl' 时,Rpl Port 属性默认展示为 0; 而在 Ring Type 属性值为其它时,Rpl Port 属性默认展示为从 eastAndWestData 值中拿到的要展示的 options(即:rplPortOptions) 值;
// 即:此时就能动态展示 Select 组件的 options 值的需求;
// 点击 table 表格中的配置所触发的操作:
const handleEdit = (index,row) => {
console.log(index,1122334);
console.log(row,5566778);
console.log(row.ring_id,7788991);
allRplPortOptions.value = [
{
value: '0',
label: '0',
},
{
value: eastAndWestData.value[index].eport,
label: eastAndWestData.value[index].eport,
},
{
value: eastAndWestData.value[index].wport,
label: eastAndWestData.value[index].wport,
}
]
if(row.ring_type === 'non_rpl') {
rplPortOptions.value = [{
value: '0',
label: '0',
},]
} else {
rplPortOptions.value = [
{
value: eastAndWestData.value[index].eport,
label: eastAndWestData.value[index].eport,
},
{
value: eastAndWestData.value[index].wport,
label: eastAndWestData.value[index].wport,
}
]
}
erpsCfgDialogForm.value.ring_id = row.ring_id,
erpsCfgDialogForm.value.revertive = row.revertive
erpsCfgDialogForm.value.tc_propgt = row.tc_propgt
erpsCfgDialogForm.value.version = row.version
erpsCfgDialogForm.value.ring_type = row.ring_type
erpsCfgDialogForm.value.rpl_port = row.rpl_port
erpsCfgDialogForm.value.holdoff_timer = row.holdoff_timer
erpsCfgDialogForm.value.guard_timer = row.guard_timer
erpsCfgDialogForm.value.wtr_timer = row.wtr_timer
erpsCfgDialogVisible.value = true
}
B、效果展示为:
// 此时点击配置后的,在 Ring Type
属性默认为 Non RPL
(即:'non_rpl'
)时,Rpl Port
属性的默认值为 0
;
2、Rpl Port
属性与 Ring Type
属性的 Select
组件之间的联动操作:
其一、需求描述:
想让 Ring Type
属性与 Rpl Port
属性之间存在联动关系:
A、在 Ring Type
属性值切换为 Non RPL
时,使得 Rpl Port
属性值仅显示为0
;
B、在 Ring Type
属性值切换为 RPL Owner
或 RPL Neighbour
时,使得 Rpl Port
属性值显示为从 eastAndWestData
值中拿到的要展示的 options
值;
Step1、由上述已知(即:上述的动态展示):
在 table
中点击每一行的配置后,已经根据 Ring Type
的值,使得 Rpl Port
属性的值显示为 0
,还是显示为从 eastAndWestData
值中拿到的要展示的 options
值;
Step2、Ring Type
属性的联动操作:
A、代码为:
// @change="handleChange" 是 Select 组件提供的 change 方法;
// 此时的 allRplPortOptions 值是在 table 中点击每一行的配置后,所获得的所有的 Rpl Port 属性可能存在的值;
// 在切换 Ring Type 属性值时,且就会触发 handleChange 函数,然后根据 Ring Type 的值是 'non_rpl' 就使 Rpl Port 属性值展示为 0; 若 Ring Type 的值不是 'non_rpl' ,那么就使 Rpl Port 属性值展示为从 eastAndWestData 值中拿到的要展示的 options 值(即:也就是 allRplPortOptions.value.slice(1, 3) 存储的值);
//切换 Ring Type 下拉框所触发的函数;
const handleChange = (val) => {
console.log(val, 112233)
if (val === 'non_rpl') {
erpsCfgDialogForm.value.rpl_port = 0
rplPortOptions.value = [
{
value: '0',
label: '0',
},
]
} else {
erpsCfgDialogForm.value.rpl_port = ''
rplPortOptions.value = allRplPortOptions.value.slice(1, 3)
}
}
B、效果展示为:
// 在 Ring Type
属性值为 'non_rpl'
时,Rpl Port
属性值为 0
;
// 在 Ring Type
属性值不是 'non_rpl'
时,Rpl Port
属性值为两个端口值(即:就是从 eastAndWestData
值中拿到的要展示的 options
值(即:也就是 allRplPortOptions.value.slice(1, 3)
存储的值));
3、Rpl Port
属性的 Select
组件不能为空的校验规则:
其一、需求描述:
在提交整个配置的 form
表单之前,需要所有的校验都通过后,才能调用下发参数的接口;
而对于 Rpl Port
属性值的需求是,不能为空,否则下发有问题,因此需要对 Rpl Port
属性进行防空校验;
Step1、校验规则:
A、代码为:
// 此时的 holdoff_timer 属性、guard_timer 属性、wtr_timer 属性是对其它的校验规则;
// 而 rpl_port 属性是对 Rpl Port 属性值的校验,且此时触发 rpl_port 属性的方式是 change(即:Rpl Port 属性值发生改变后就会触发校验),在 Rpl Port 属性值为空时就会有提示,且在校验不通过的情况下不能调用接口和下发参数;
// erpsCfg 的规则配置:
const erpsCfgRules = ref({
holdoff_timer: [
{ required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
{
pattern:
/^(([0-9])|([1-9][0-9])|([1-9][0-9][0-9]|[1-9][0-9][0-9][0-9]|10000))$/,
message: '请填写0~10000的值',
trigger: 'blur',
},
],
guard_timer: [
{ required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
{
pattern: /^([1-9][0-9]|([1-9][0-9][0-9]|1[0-9][0-9][0-9]|2000))$/,
message: '请填写10~2000的值',
trigger: 'blur',
},
],
wtr_timer: [
{ required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
{
pattern: /^([1-9]|(1[0-2]))$/,
message: '请填写1~12的值',
trigger: 'blur',
},
],
rpl_port: [
{ required: true, message: '此处不能为空', trigger: 'change' }, // 此时是防空判断
],
})
B、结果为:
// 在 Rpl Port
属性值为空时,校验报错;
Ⅲ、解决在项目中遇到的其它问题:
1、分页组件的使用过程:
其一、代码为:
// 此时页面使用的 el-pagination 组件情况,Total 是从后台获取的,来决定总共有多少页;
// 此时的 @current-change="handleCurrentChange" 函数是切换第几页后触发的函数;
<div class="project_bottom">
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="true" layout="prev, pager, next, jumper" :total="Total" @current-change="handleCurrentChange"/>
</div>
// 此时的 get_erps_configuration(pageSize.value * (currentPage.value - 1),pageSize.value) 中的两个参数,分别表示从哪个值开始(即:start 值),每次获取的值是多少条(即:limit);
onMounted(() => {
erps_configuration_refresh()
})
// 刷新页面:
const erps_configuration_refresh = () => {
get_erps_configuration(
pageSize.value * (currentPage.value - 1),
pageSize.value,
)
}
// 获取页面数据操作
const get_erps_configuration = async (start, limit) => {
get_eastandwest_port(start, limit)
console.log('TODO: GET /api/erps/cfg')
//按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
// const resp = await axios.get('/api/erps/cfg', {
// params: {
// start: start,
// limit: limit,
// },
// })
const resp = {
"total": 15,
"data": [
{
"ring_id": "1",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "2",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "3",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "4",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "5",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "6",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "7",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "8",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "9",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "10",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
]
}
console.log(resp, 1111111)
console.log(resp.data, 222222)
console.log(resp.data.data, 33333333)
// if (resp?.status === 200 && resp?.data?.data) {
// tableData.value = resp.data.data
// Total.value = resp.data.total
// }
if (resp?.data) {
tableData.value = resp.data
Total.value = resp.total
}
}
// 此时是调用 handleCurrentChange() 函数,且默认传值为 val,然后再调用想要页的数据值;
// 实现页面的分页效果;
const handleCurrentChange = (val) => {
get_erps_configuration(pageSize.value * (val - 1), pageSize.value)
}
其二、页面展示为:
2、去掉弹窗右上角的X
号样式的操作:
其一、代码为:
// 此时是修改 el-dialog 的样式代码;
//去掉 dialog 右侧的 X 标记;
::v-deep(.el-dialog) {
.el-dialog__header {
.el-dialog__headerbtn {
font-size: 30px;
// display: none;
.el-dialog__close {
color: red;
display: none;
}
}
// .el-dialog__close {
// color: red;
// display: none;
// }
}
// 修改操作按钮与整个 form 表单的距离;
.el-dialog__footer {
margin-top: -30px !important;
}
}
其二、页面展示为:
// 修改样式后,此时的配置弹窗右侧就不再有X
号的样式;
Ⅳ、整体代码的面貌:
其一、整体代码为:
<script setup>
import axios from 'axios'
import { ref, onMounted, inject } from 'vue'
const rootapi = inject('rootapi')
import { ElMessage } from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(10)
const Total = ref()
const tableData = ref([])
const eastAndWestData = ref([])
const erpsCfgDialogVisible = ref(false)
const erpsCfgDialogFormRef = ref(null)
const erpsCfgLabelWidth = '135px'
const versionOptions = ref([
{
value: 'v1',
label: 'V1',
},
{
value: 'v2',
label: 'V2',
},
])
const ringTypeOptions = ref([
{
value: 'non_rpl',
label: 'Non RPL',
},
{
value: 'rpl_owner',
label: 'RPL Owner',
},
{
value: 'rpl_neighbour',
label: 'RPL Neighbour',
},
])
const allRplPortOptions = ref([])
const rplPortOptions = ref([])
const erpsCfgDialogForm = ref({})
// 设置表格每一行的背景色;
const tableRowClassName = (val) => {
if (val.rowIndex % 2 === 0) {
return 'success-row'
} else {
return 'warning-row'
}
}
onMounted(() => {
erps_configuration_refresh()
})
// 刷新页面:
const erps_configuration_refresh = () => {
get_erps_configuration(
pageSize.value * (currentPage.value - 1),
pageSize.value,
)
}
// 实现页面的分页效果;
const handleCurrentChange = (val) => {
get_erps_configuration(pageSize.value * (val - 1), pageSize.value)
}
// 获取页面数据操作
const get_erps_configuration = async (start, limit) => {
get_eastandwest_port(start, limit)
console.log('TODO: GET /api/erps/cfg')
//按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
// const resp = await axios.get('/api/erps/cfg', {
// params: {
// start: start,
// limit: limit,
// },
// })
const resp = {
"total": 15,
"data": [
{
"ring_id": "1",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "2",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "3",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "4",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "5",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "6",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "7",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "8",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "9",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
,
{
"ring_id": "10",
"revertive": true,
"tc_propgt": false,
"version": "v2",
"holdoff_timer": "0",
"guard_timer": "500",
"wtr_timer": "5",
"ring_type": "non_rpl",
"rpl_port": "0"}
]
}
console.log(resp, 1111111)
console.log(resp.data, 222222)
console.log(resp.data.data, 33333333)
// if (resp?.status === 200 && resp?.data?.data) {
// tableData.value = resp.data.data
// Total.value = resp.data.total
// }
if (resp?.data) {
tableData.value = resp.data
Total.value = resp.total
}
}
// 获取东向端口及西向端口的页面数据操作:
const get_eastandwest_port = async (start, limit) => {
console.log('TODO: GET /api/erps/ring/mgmt')
//按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
// const resp = await axios.get('/api/erps/ring/mgmt', {
// params: {
// start: start,
// limit: limit,
// },
// })
const resp = {
"total": 15,
"existing_rings": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
"data": [
{
"del": false,
"enable": false,
"ring_id": "1",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "2",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "3",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "4",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "5",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "6",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "7",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "8",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "9",
"eport": "GigabitEthernet0/1",
"wport": "GigabitEthernet0/2",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
,
{
"del": false,
"enable": false,
"ring_id": "10",
"eport": "GigabitEthernet0/4",
"wport": "GigabitEthernet0/5",
"vlan": "1",
"ring_type": "major",
"sub_to_mjr": "0"}
]
}
console.log(resp, 4444444)
console.log(resp.data, 55555555)
console.log(resp.data.data, 666666666)
// if (resp?.status === 200 && resp?.data?.data) {
// eastAndWestData.value = resp.data.data
// }
if (resp?.data) {
eastAndWestData.value = resp.data
}
console.log(eastAndWestData.value, 7777777777) // eport、wport
console.log(eastAndWestData.value[0], 888888888) // eport、wport
console.log(eastAndWestData.value[0].eport, 88889999) // eport、wport
}
// 点击 table 表格中的配置所触发的操作:
const handleEdit = (index, row) => {
console.log(index, 1122334)
console.log(row, 5566778)
console.log(row.ring_id, 7788991)
allRplPortOptions.value = [
{
value: '0',
label: '0',
},
{
value: eastAndWestData.value[index].eport,
label: eastAndWestData.value[index].eport,
},
{
value: eastAndWestData.value[index].wport,
label: eastAndWestData.value[index].wport,
},
]
if (row.ring_type === 'non_rpl') {
rplPortOptions.value = [
{
value: '0',
label: '0',
},
]
} else {
rplPortOptions.value = [
{
value: eastAndWestData.value[index].eport,
label: eastAndWestData.value[index].eport,
},
{
value: eastAndWestData.value[index].wport,
label: eastAndWestData.value[index].wport,
},
]
}
;(erpsCfgDialogForm.value.ring_id = row.ring_id),
(erpsCfgDialogForm.value.revertive = row.revertive)
erpsCfgDialogForm.value.tc_propgt = row.tc_propgt
erpsCfgDialogForm.value.version = row.version
erpsCfgDialogForm.value.ring_type = row.ring_type
erpsCfgDialogForm.value.rpl_port = row.rpl_port
erpsCfgDialogForm.value.holdoff_timer = row.holdoff_timer
erpsCfgDialogForm.value.guard_timer = row.guard_timer
erpsCfgDialogForm.value.wtr_timer = row.wtr_timer
erpsCfgDialogVisible.value = true
}
// erpsCfg 的规则配置:
const erpsCfgRules = ref({
holdoff_timer: [
{ required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
{
pattern:
/^(([0-9])|([1-9][0-9])|([1-9][0-9][0-9]|[1-9][0-9][0-9][0-9]|10000))$/,
message: '请填写0~10000的值',
trigger: 'blur',
},
],
guard_timer: [
{ required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
{
pattern: /^([1-9][0-9]|([1-9][0-9][0-9]|1[0-9][0-9][0-9]|2000))$/,
message: '请填写10~2000的值',
trigger: 'blur',
},
],
wtr_timer: [
{ required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
{
pattern: /^([1-9]|(1[0-2]))$/,
message: '请填写1~12的值',
trigger: 'blur',
},
],
rpl_port: [
{ required: true, message: '此处不能为空', trigger: 'change' }, // 此时是防空判断
],
})
//切换 Ring Type 下拉框所触发的函数;
const handleChange = (val) => {
console.log(val, 112233)
if (val === 'non_rpl') {
erpsCfgDialogForm.value.rpl_port = 0
rplPortOptions.value = [
{
value: '0',
label: '0',
},
]
} else {
erpsCfgDialogForm.value.rpl_port = ''
rplPortOptions.value = allRplPortOptions.value.slice(1, 3)
}
}
// QOS-Storm-Control 配置的提交操作;
const erpsCfgonSubmit = async () => {
if (!erpsCfgDialogFormRef.value) return
erpsCfgDialogFormRef.value.validate(async (valid) => {
if (valid) {
try {
let url = '/api/erps/cfg'
let obj = erpsCfgDialogForm.value
const res = await axios.post(url, new URLSearchParams(obj))
if (res.status === 200) {
ElMessage({ message: '添加成功!', type: 'success' })
erpsCfgDialogVisible.value = false
// 更新 ERPS 配置配置表;
get_erps_configuration(
pageSize.value * (currentPage.value - 1),
pageSize.value,
)
erpsCfgCancle()
} else if (res.status === 400) {
ElMessage.error('添加失败!' + res.message)
erpsCfgDialogVisible.value = false
}
} catch (err) {
erpsCfgDialogVisible.value = false
if (err.response) {
let resp = err.response
rootapi.show_dialog(
'unexpected error for POST /api/erps/cfg:',
resp.data,
true,
)
} else {
rootapi.show_dialog('unexpected frontend error:', err.message, true)
}
}
}
})
}
// 表单的取消操作:
const erpsCfgCancle = () => {
erpsCfgDialogVisible.value = false
if (!erpsCfgDialogFormRef.value) return
erpsCfgDialogFormRef.value.resetFields()
}
</script>
<template>
<div class="erps_cfg_layout">
<div class="my_project">
<div class="project_title">ERPS配置</div>
<el-table
:data="tableData"
style="width: 100%"
min-height="439"
:row-class-name="tableRowClassName"
>
<el-table-column
prop="ring_id"
label="环ID"
align="center"
width="60"
></el-table-column>
<el-table-column prop="revertive" label="Revertive" align="center" min-width="120"/>
<el-table-column prop="tc_propgt" label="TC Propagation" align="center" min-width="150"/>
<el-table-column prop="version" label="协议版本" align="center" min-width="120"/>
<el-table-column prop="ring_type" label="Ring Type" align="center" min-width="150"/>
<el-table-column prop="rpl_port" label="Rpl Port" align="center" min-width="150"/>
<el-table-column prop="holdoff_timer" label="Holdoff定时器" align="center" min-width="150"/>
<el-table-column prop="guard_timer" label="Guard定时器" align="center" min-width="150"/>
<el-table-column prop="wtr_timer" label="WTR定时器" align="center" min-width="150"/>
<el-table-column prop="option" label="操作" align="center" min-width="150">
<template #default="scope">
<el-button size="small" type="primary" @click="handleEdit(scope.$index,scope.row)"><el-icon :size="20" style="margin-right: 5px;"><Edit /></el-icon>配置</el-button>
</template>
</el-table-column>
</el-table>
<div class="project_bottom">
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="true" layout="prev, pager, next, jumper" :total="Total" @current-change="handleCurrentChange"/>
</div>
</div>
<el-dialog v-model="erpsCfgDialogVisible" title="配置" width="30%" center :close-on-click-modal="false">
<el-form :model="erpsCfgDialogForm" ref="erpsCfgDialogFormRef" :rules="erpsCfgRules" class="demo-ruleForm" status-icon>
<el-form-item label="环ID:" prop="ring_id" :label-width="erpsCfgLabelWidth">
<el-input v-model="erpsCfgDialogForm.ring_id" disabled autocomplete="off"/>
</el-form-item>
<el-form-item label="Revertive:" prop="revertive" :label-width="erpsCfgLabelWidth">
<el-switch v-model="erpsCfgDialogForm.revertive"/>
</el-form-item>
<el-form-item label="TC Propagation:" prop="tc_propgt" :label-width="erpsCfgLabelWidth">
<el-switch v-model="erpsCfgDialogForm.tc_propgt"/>
</el-form-item>
<el-form-item label="协议版本:" prop="version" :label-width="erpsCfgLabelWidth">
<el-select v-model="erpsCfgDialogForm.version" class="m-2" placeholder="Select">
<el-option v-for="item in versionOptions" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="Ring Type:" prop="ring_type" :label-width="erpsCfgLabelWidth">
<el-select v-model="erpsCfgDialogForm.ring_type" class="m-2" placeholder="Select" @change="handleChange">
<el-option v-for="item in ringTypeOptions" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="Rpl Port:" prop="rpl_port" :label-width="erpsCfgLabelWidth">
<el-select v-model="erpsCfgDialogForm.rpl_port" class="m-2" placeholder="Select">
<el-option v-for="item in rplPortOptions" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="Holdoff定时器:" prop="holdoff_timer" :label-width="erpsCfgLabelWidth">
<el-input v-model="erpsCfgDialogForm.holdoff_timer" autocomplete="off"/>
</el-form-item>
<el-form-item label="Guard定时器:" prop="guard_timer" :label-width="erpsCfgLabelWidth">
<el-input v-model="erpsCfgDialogForm.guard_timer" autocomplete="off"/>
</el-form-item>
<el-form-item label="WTR定时器:" prop="wtr_timer" :label-width="erpsCfgLabelWidth">
<el-input v-model="erpsCfgDialogForm.wtr_timer" autocomplete="off"/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog_footer">
<el-button type="primary" @click="erpsCfgonSubmit"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>提交</el-button>
<el-button @click="erpsCfgCancle(erpsCfgDialogFormRef)">取消</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.erps_cfg_layout {
margin: 30px auto;
background-color: #e6f1f9;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
// 表格表头的背景色;
::v-deep(.el-table th) {
// 设置的表头的背景颜色;
// background-color: #96b6cc;
background-color: #e6f1f9;
}
//将表格的每一行悬停的背景色都设置为:transparent;
::v-deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
background-color: #afc4d3;
}
::v-deep(.el-table) {
// font-size: 12px; // 此时会设置整个 table 表格文字变得很小
}
// 表格表头的下边框;
::v-deep(.el-table th.is-leaf) {
border-bottom: 1px solid #557A95;
font-weight: 700;
// font-size: 14px; // 此时是设置表格头下边框的文字大小;
color: black;
}
// 设置隔行的背景色
::v-deep(.el-table .warning-row) {
background-color: #d6e6f5;
}
::v-deep(.el-table .success-row) {
background-color: #e6f1f9;
}
.my_project {
margin: 20px;
.project_title {
text-align: center;
font-weight: 700;
margin-bottom: 20px;
}
.project_bottom {
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
::v-deep(.el-pagination) {
.el-pager {
.number {
background-color: #e6f1f9;
}
.is-active {
background-color: #e6f1f9;
}
.more {
background-color: #e6f1f9;
}
}
.btn-next,
.btn-prev {
background-color: #e6f1f9;
}
}
}
}
}
//去掉 dialog 右侧的 X 标记;
::v-deep(.el-dialog) {
.el-dialog__header {
.el-dialog__headerbtn {
font-size: 30px;
// display: none;
.el-dialog__close {
color: red;
display: none;
}
}
// .el-dialog__close {
// color: red;
// display: none;
// }
}
// 修改操作按钮与整个 form 表单的距离;
.el-dialog__footer {
margin-top: -30px !important;
}
}
</style>
其二、整体页面的展示为:
Ⅴ、小结:
其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转
) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转
):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话,也可以多多关注这个专栏(Java)(直接点击下面 url 跳转
):https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482