style: 优化UDM用户数据操作排版布局

This commit is contained in:
TsMask
2023-11-07 19:49:38 +08:00
parent 21c702ce9b
commit 8e467b95a2
2 changed files with 245 additions and 255 deletions

View File

@@ -739,7 +739,7 @@ function fnLoadData() {
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if(pageNum){
if (pageNum) {
queryParams.pageNum = pageNum;
}
listSub(toRaw(queryParams)).then(res => {
@@ -1066,7 +1066,8 @@ onMounted(() => {
<!-- 新增框或修改框 -->
<a-modal
width="1000px"
width="800px"
:body-style="{ height: '650px', 'overflow-y': 'scroll' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1128,8 +1129,10 @@ onMounted(() => {
</a-col>
</a-row>
<a-divider orientation="left">5G</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="5G Subscribed UE AMBR template"
name="ambr"
@@ -1139,7 +1142,7 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="5G Subscribed SNSSAIs template"
name="nssai"
@@ -1152,12 +1155,22 @@ onMounted(() => {
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="5G UE Usage Type" name="ueType">
<a-input value="1" allow-clear> </a-input>
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="5G Subscribed SMF Selection Data template"
name="smfSel"
>
<a-input v-model:value="modalState.from.smfSel" allow-clear>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title> 参数最大长度为16 </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G Forbidden Areas template" name="arfb">
<a-input v-model:value="modalState.from.arfb" allow-clear>
<template #prefix>
@@ -1174,7 +1187,7 @@ onMounted(() => {
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="5G Service Area Restriction template"
name="sar"
@@ -1194,7 +1207,20 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G MICO mode" name="mico">
<a-tooltip title="签约的MICO业务标志位">
<a-select value="1">
<a-select-option value="1">Enable</a-select-option>
<a-select-option value="0">Disable</a-select-option>
</a-select>
</a-tooltip>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G RFSP Index" name="rfsp">
<a-input value="1" allow-clear>
<template #prefix>
@@ -1208,37 +1234,15 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="5G MICO mode" name="mico">
<a-tooltip title="签约的MICO业务标志位">
<a-select value="1">
<a-select-option value="1">Enable</a-select-option>
<a-select-option value="0">Disable</a-select-option>
</a-select>
</a-tooltip>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="5G Subscribed SMF Selection Data template"
name="smfSel"
>
<a-input v-model:value="modalState.from.smfSel" allow-clear>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title> 参数最大长度为16 </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G UE Usage Type" name="ueType">
<a-input value="1" allow-clear> </a-input>
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left">4G</a-divider>
<a-row :gutter="16" v-if="!modalState.from.id">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
@@ -1293,6 +1297,67 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="4G EPS User Template Name"
name="epstpl"
v-bind="modalStateFrom.validateInfos.epstpl"
>
<a-tooltip title="参数最大长度为16">
<a-input
v-model:value="modalState.from.epstpl"
allow-clear
placeholder="请输入4G EPS User Template Name"
>
</a-input>
</a-tooltip>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="4G Context ID"
name="contextId"
v-bind="modalStateFrom.validateInfos.contextId"
>
<a-tooltip title="签约APN 上下文ID,必须从APN Context list 中选择">
<a-input
v-model:value="modalState.from.contextId"
allow-clear
placeholder="请输入4G Context ID"
>
</a-input>
</a-tooltip>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="4G Static IP"
v-bind="modalStateFrom.validateInfos.staticIp"
name="staticIp"
>
<a-input
v-model:value="modalState.from.staticIp"
allow-clear
placeholder="静态IP地址"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
指定手机用户上网时使用的静态IP地址,"-"时表示使用动态IP地址
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-form-item
label="4G EPS ODB"
name="epsOdb"
@@ -1353,71 +1418,13 @@ onMounted(() => {
</a-select>
</a-tooltip>
</a-form-item>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="4G EPS User Template Name"
name="epstpl"
v-bind="modalStateFrom.validateInfos.epstpl"
>
<a-tooltip title="参数最大长度为16">
<a-input
v-model:value="modalState.from.epstpl"
allow-clear
placeholder="请输入4G EPS User Template Name"
>
</a-input>
</a-tooltip>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="4G Context ID"
name="contextId"
v-bind="modalStateFrom.validateInfos.contextId"
>
<a-tooltip title="签约APN 上下文ID,必须从APN Context list 中选择">
<a-input
v-model:value="modalState.from.contextId"
allow-clear
placeholder="请输入4G Context ID"
>
</a-input>
</a-tooltip>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="4G Static IP"
v-bind="modalStateFrom.validateInfos.staticIp"
name="staticIp"
>
<a-input
v-model:value="modalState.from.staticIp"
allow-clear
placeholder="静态IP地址"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
指定手机用户上网时使用的静态IP地址,"-"时表示使用动态IP地址
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
<!-- 批量增加框 -->
<a-modal
width="1000px"
width="800px"
:body-style="{ height: '650px', 'overflow-y': 'scroll' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByBatch"
@@ -1439,11 +1446,11 @@ onMounted(() => {
name="num"
v-bind="modalStateBatchFrom.validateInfos.num"
>
<a-input
<a-input-number
v-model:value="modalState.BatchForm.num"
allow-clear
placeholder="请输入放号数"
></a-input>
style="width: 100%"
></a-input-number>
</a-form-item>
</a-col>
</a-row>
@@ -1472,19 +1479,6 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<!-- <a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="cn"
name="cn"
v-bind="modalStateBatchFrom.validateInfos.cn"
>
<a-input
v-model:value="modalState.from.cn"
allow-clear
placeholder="请输入cn"
></a-input>
</a-form-item>
</a-col> -->
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="MSISDN"
@@ -1507,14 +1501,16 @@ onMounted(() => {
</a-col>
</a-row>
<a-divider orientation="left">5G</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G Subscribed UE AMBR template" name="ambr">
<a-input v-model:value="modalState.BatchForm.ambr" allow-clear>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="5G Subscribed SNSSAIs template"
name="nssai"
@@ -1527,12 +1523,23 @@ onMounted(() => {
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="5G UE Usage Type" name="ueType">
<a-input value="1" allow-clear> </a-input>
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="5G Subscribed SMF Selection Data template"
name="smfSel"
>
<a-input v-model:value="modalState.BatchForm.smfSel" allow-clear>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title> 参数最大长度为16 </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G Forbidden Areas template" name="arfb">
<a-input v-model:value="modalState.BatchForm.arfb" allow-clear>
<template #prefix>
@@ -1549,7 +1556,7 @@ onMounted(() => {
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="5G Service Area Restriction template"
name="sar"
@@ -1569,7 +1576,7 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G RFSP Index" name="rfsp">
<a-input value="1" allow-clear>
<template #prefix>
@@ -1586,7 +1593,7 @@ onMounted(() => {
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G MICO mode" name="mico">
<a-tooltip title="签约的MICO业务标志位">
<a-select value="1">
@@ -1596,24 +1603,15 @@ onMounted(() => {
</a-tooltip>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="5G Subscribed SMF Selection Data template"
name="smfSel"
>
<a-input v-model:value="modalState.BatchForm.smfSel" allow-clear>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title> 参数最大长度为16 </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
<a-col :lg="24" :md="24" :xs="24">
<a-form-item label="5G UE Usage Type" name="ueType">
<a-input value="1" allow-clear> </a-input>
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left">4G</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
@@ -1644,6 +1642,57 @@ onMounted(() => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="4G EPS User Template Name" name="epstpl">
<a-tooltip title="参数最大长度为16">
<a-input
v-model:value="modalState.BatchForm.epstpl"
allow-clear
placeholder="请输入4G EPS User Template Name"
>
</a-input>
</a-tooltip>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="4G Context ID" name="contextId">
<a-tooltip title="签约APN 上下文ID,必须从APN Context list 中选择">
<a-input
v-model:value="modalState.BatchForm.contextId"
allow-clear
placeholder="请输入4G Context ID"
>
</a-input>
</a-tooltip>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="4G Static IP"
name="staticIp"
v-bind="modalStateBatchFrom.validateInfos.staticIp"
>
<a-input
v-model:value="modalState.BatchForm.staticIp"
allow-clear
placeholder="静态IP地址"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
指定手机用户上网时使用的静态IP地址,"-"时表示使用动态IP地址
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-form-item label="4G EPS ODB" name="epsOdb">
<a-tooltip
title="ODB(Operator-Determined Barring)运营商决定的闭锁,即用户接入EPS网络的业务能力由运营商决定.选中 ---对应服务被允许 未选 --- 对应服务被禁止"
@@ -1692,63 +1741,12 @@ onMounted(() => {
</a-select>
</a-tooltip>
</a-form-item>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="4G EPS User Template Name" name="epstpl">
<a-tooltip title="参数最大长度为16">
<a-input
v-model:value="modalState.BatchForm.epstpl"
allow-clear
placeholder="请输入4G EPS User Template Name"
>
</a-input>
</a-tooltip>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="4G Context ID" name="contextId">
<a-tooltip title="签约APN 上下文ID,必须从APN Context list 中选择">
<a-input
v-model:value="modalState.BatchForm.contextId"
allow-clear
placeholder="请输入4G Context ID"
>
</a-input>
</a-tooltip>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="4G Static IP"
name="staticIp"
v-bind="modalStateBatchFrom.validateInfos.staticIp"
>
<a-input
v-model:value="modalState.BatchForm.staticIp"
allow-clear
placeholder="静态IP地址"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
指定手机用户上网时使用的静态IP地址,"-"时表示使用动态IP地址
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
<!-- 批量删除框 -->
<a-modal
width="1000px"
width="500px"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByBatchDel"
@@ -1764,21 +1762,7 @@ onMounted(() => {
:labelWrap="true"
>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.neUser.sub.num')"
name="num"
v-bind="modalStateBatchDelFrom.validateInfos.num"
>
<a-input
v-model:value="modalState.BatchDelForm.num"
allow-clear
placeholder="请输入放号数"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
:label="t('views.neUser.sub.startIMSI')"
name="imsi"
@@ -1802,6 +1786,19 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
:label="t('views.neUser.sub.num')"
name="num"
v-bind="modalStateBatchDelFrom.validateInfos.num"
>
<a-input-number
v-model:value="modalState.BatchDelForm.num"
placeholder="请输入删号个数"
style="width: 100%"
></a-input-number>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>