parent
b43a99e711
commit
7b95025d8c
@ -0,0 +1,26 @@ |
|||||||
|
export interface EquipmentAdvanceQuery { |
||||||
|
devSno?: string; |
||||||
|
devMac?: string; |
||||||
|
devAdNo?: string; |
||||||
|
devPppoe?: string; |
||||||
|
logicId?: string; |
||||||
|
startTime?: string; |
||||||
|
endTime?: string; |
||||||
|
regionAreaId?: number; |
||||||
|
|
||||||
|
devVendorName?: string; |
||||||
|
devTypeName?: string; |
||||||
|
devHardVer?: string; |
||||||
|
softVer?: string; |
||||||
|
devAccessType?: string; |
||||||
|
devType?: string; |
||||||
|
|
||||||
|
devOnline?: string; |
||||||
|
devStatus?: string; |
||||||
|
devIp?: string; |
||||||
|
|
||||||
|
service?: string; |
||||||
|
voipPhone?: string; |
||||||
|
sortColumn?: string; |
||||||
|
sortRules?: string; |
||||||
|
} |
||||||
@ -0,0 +1,585 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-form :model="formData"> |
||||||
|
<el-descriptions :column="3" border> |
||||||
|
<template #title> |
||||||
|
<div |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-left: 3px; |
||||||
|
margin-top: 5px; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-icon size="15"> <Grid /> </el-icon> <span |
||||||
|
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||||
|
>设备基本信息</span |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template #extra> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
style="margin-top: 5px; margin-right: 10px" |
||||||
|
:icon="Search" |
||||||
|
@click="skipIndex" |
||||||
|
>搜索</el-button |
||||||
|
> |
||||||
|
</template> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备序列号" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devSno"> |
||||||
|
<el-input |
||||||
|
v-model="formData.devSno" |
||||||
|
placeholder="请输入设备序列号" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备MAC地址" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devMac"> |
||||||
|
<el-input |
||||||
|
v-model="formData.devMac" |
||||||
|
placeholder="请输入设备MAC地址" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="逻辑ID" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="logicId"> |
||||||
|
<el-input v-model="formData.logicId" placeholder="请输入逻辑ID" /> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备PPPOE" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devPppoe"> |
||||||
|
<el-input |
||||||
|
v-model="formData.devPppoe" |
||||||
|
placeholder="请输入PPPOE账号" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="AD编号" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devAdNo"> |
||||||
|
<el-input v-model="formData.devAdNo" placeholder="请输入AD编号" /> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备系统管理域" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="regionAreaId"> |
||||||
|
<el-tree-select |
||||||
|
v-model="formData.regionAreaId" |
||||||
|
placeholder="请选择所属管理域" |
||||||
|
:data="domainOptions" |
||||||
|
filterable |
||||||
|
check-strictly |
||||||
|
:render-after-expand="false" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="开始时间" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="startTime"> |
||||||
|
<el-date-picker |
||||||
|
v-model="formData.startTime" |
||||||
|
type="datetime" |
||||||
|
style="width: 100%" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
placeholder="请选择开始时间" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="结束时间" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="endTime"> |
||||||
|
<el-date-picker |
||||||
|
v-model="formData.endTime" |
||||||
|
type="datetime" |
||||||
|
style="width: 100%" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
placeholder="请选择结束时间" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
/> |
||||||
|
</el-descriptions> |
||||||
|
<el-descriptions :column="3" border> |
||||||
|
<template #title> |
||||||
|
<div |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-left: 3px; |
||||||
|
margin-top: 5px; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-icon size="15"> <Grid /> </el-icon> <span |
||||||
|
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||||
|
>设备类型信息</span |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备供应商" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devVendorName"> |
||||||
|
<el-select |
||||||
|
v-model="formData.devVendorName" |
||||||
|
clearable |
||||||
|
placeholder="请选择设备供应商" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in vendorNameOption" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备型号" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devTypeName"> |
||||||
|
<el-select |
||||||
|
v-model="formData.devTypeName" |
||||||
|
clearable |
||||||
|
placeholder="请选择设备型号" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in typeNameOption" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备硬件版本" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devHardVer"> |
||||||
|
<el-select |
||||||
|
v-model="formData.devHardVer" |
||||||
|
clearable |
||||||
|
placeholder="设备硬件版本" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in hardVerOption" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备软件版本" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="softVer"> |
||||||
|
<el-select |
||||||
|
v-model="formData.softVer" |
||||||
|
filterable |
||||||
|
placeholder="请选择软件版本" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in softVerOption" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
:key="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备网络侧接口" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item style="margin-bottom: 0" prop="devAccessType"> |
||||||
|
<dictionary |
||||||
|
v-model="formData.devAccessType" |
||||||
|
type-code="dev_access_type" |
||||||
|
placeholder="请选择设备网络侧接口" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备类型" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item style="margin-bottom: 0" prop="devType"> |
||||||
|
<dictionary |
||||||
|
v-model="formData.devType" |
||||||
|
placeholder="请选择设备类型" |
||||||
|
type-code="dev_type_name" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
</el-descriptions> |
||||||
|
<el-descriptions :column="3" border> |
||||||
|
<template #title> |
||||||
|
<div |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-left: 3px; |
||||||
|
margin-top: 5px; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-icon size="15"> <Grid /> </el-icon> <span |
||||||
|
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||||
|
>设备状态信息</span |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备在线状态" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devOnline"> |
||||||
|
<dictionary |
||||||
|
type-code="dev_online" |
||||||
|
v-model="formData.devOnline" |
||||||
|
placeholder="请选择设备在线状态" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="IP地址" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item prop="devIp"> |
||||||
|
<ip-address v-model="formData.devIp" /> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备状态" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devIp"> |
||||||
|
<dictionary |
||||||
|
placeholder="请选择设备状态" |
||||||
|
type-code="dev_status" |
||||||
|
v-model="formData.devStatus" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
</el-descriptions> |
||||||
|
<el-descriptions :column="3" border> |
||||||
|
<template #title> |
||||||
|
<div |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-left: 3px; |
||||||
|
margin-top: 5px; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-icon size="15"> <Grid /> </el-icon> <span |
||||||
|
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||||
|
>设备相关资源信息</span |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<el-descriptions-item |
||||||
|
label="已开通的业务" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="service"> |
||||||
|
<el-select |
||||||
|
v-model="formData.service" |
||||||
|
placeholder="请选择已开通的业务" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in serviceList" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
:key="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="VOIP电话号码" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="voipPhone"> |
||||||
|
<el-input |
||||||
|
v-model="formData.voipPhone" |
||||||
|
placeholder="请输入VOIP电话号码" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="" |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
/> |
||||||
|
</el-descriptions> |
||||||
|
<el-descriptions :column="1" border> |
||||||
|
<template #title> |
||||||
|
<div |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-left: 3px; |
||||||
|
margin-top: 5px; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-icon size="15"> <Grid /> </el-icon> <span |
||||||
|
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||||
|
>排序信息</span |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<el-descriptions-item |
||||||
|
label-align="center" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label2" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<div class="flex justify-center"> |
||||||
|
<span style="text-align: center; line-height: 32px">依照</span> |
||||||
|
<el-form-item prop="sortColumn" ml-2> |
||||||
|
<el-select |
||||||
|
style="width: 200px" |
||||||
|
v-model="formData.sortColumn" |
||||||
|
placeholder="请选择排序字段" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in sortColumn" |
||||||
|
:value="item.value" |
||||||
|
:label="item.label" |
||||||
|
:key="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="sortRules" class="ml-2 mr-2"> |
||||||
|
<el-select |
||||||
|
style="width: 150px" |
||||||
|
v-model="formData.sortRules" |
||||||
|
placeholder="请选择排序规则" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in sortRules" |
||||||
|
:value="item.value" |
||||||
|
:label="item.label" |
||||||
|
:key="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<span style="text-align: center; line-height: 32px">排序</span> |
||||||
|
</div> |
||||||
|
</el-descriptions-item> |
||||||
|
</el-descriptions> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { EquipmentAdvanceQuery } from "@/api/advance-query/types"; |
||||||
|
import { Grid, Search } from "@element-plus/icons-vue"; |
||||||
|
import { getDomainOptions } from "@/api/domain"; |
||||||
|
import { |
||||||
|
getHardVerOption, |
||||||
|
getTypeNameOption, |
||||||
|
getVendorNameOption, |
||||||
|
} from "@/api/device-type"; |
||||||
|
import { getMergeSoftVerOption } from "@/api/device-type-ver"; |
||||||
|
import IpAddress from "@/views/resources/equipment/components/IpAddress.vue"; |
||||||
|
import { serviceOption } from "@/api/service"; |
||||||
|
|
||||||
|
const formData = ref<EquipmentAdvanceQuery>({}); |
||||||
|
const router = useRouter(); |
||||||
|
const domainOptions = ref<OptionType[]>([]); |
||||||
|
const vendorNameOption = ref<OptionType[]>([]); |
||||||
|
const typeNameOption = ref<OptionType[]>([]); |
||||||
|
const hardVerOption = ref<OptionType[]>([]); |
||||||
|
const softVerOption = ref<OptionType[]>([]); |
||||||
|
const sortColumn = ref<OptionType[]>([ |
||||||
|
{ label: "AD编号", value: "DEV_AD_NO" }, |
||||||
|
{ label: "设备在线时间", value: "DEV_ONLINE_TIME" }, |
||||||
|
{ label: "设备标识", value: "DEV_SNO" }, |
||||||
|
{ label: "系统管理域", value: "REGION_AREA_ID" }, |
||||||
|
]); |
||||||
|
const sortRules = ref<OptionType[]>([ |
||||||
|
{ label: "升序", value: "ASC" }, |
||||||
|
{ label: "降序", value: "DESC" }, |
||||||
|
]); |
||||||
|
const serviceList = ref<OptionType[]>([]); |
||||||
|
function loadDomainOptions() { |
||||||
|
getDomainOptions().then(({ data }) => { |
||||||
|
domainOptions.value = data; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
const loadVendorNameOption = () => { |
||||||
|
getVendorNameOption().then(({ data }) => { |
||||||
|
vendorNameOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadTypeNameOption = () => { |
||||||
|
getTypeNameOption("").then(({ data }) => { |
||||||
|
typeNameOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadHardVerOption = () => { |
||||||
|
getHardVerOption("").then(({ data }) => { |
||||||
|
hardVerOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadSoftVerOption = () => { |
||||||
|
getMergeSoftVerOption().then(({ data }) => { |
||||||
|
softVerOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadServiceOptionOption = () => { |
||||||
|
serviceOption().then(({ data }) => { |
||||||
|
serviceList.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const skipIndex = () => { |
||||||
|
let obj = JSON.stringify(formData.value); |
||||||
|
let values = Object.values(formData.value); |
||||||
|
if (values.length === 0) { |
||||||
|
ElMessage.error({ message: "请至少选择一个参数", duration: 2000 }); |
||||||
|
return; |
||||||
|
} |
||||||
|
router.push({ |
||||||
|
path: `/resources/equipment`, |
||||||
|
query: { item: obj }, |
||||||
|
}); |
||||||
|
}; |
||||||
|
onMounted(async () => { |
||||||
|
await loadDomainOptions(); |
||||||
|
await loadVendorNameOption(); |
||||||
|
await loadTypeNameOption(); |
||||||
|
await loadHardVerOption(); |
||||||
|
await loadSoftVerOption(); |
||||||
|
await loadServiceOptionOption(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
:deep(.my-label) { |
||||||
|
background: var(--el-color-white) !important; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.el-form-item--default) { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.my-label2) { |
||||||
|
width: 0 !important; |
||||||
|
display: none !important; |
||||||
|
background: var(--el-color-white) !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
<template> |
||||||
|
<div class="my_ip_address_input"> |
||||||
|
<template v-for="index in indexes" :key="index"> |
||||||
|
<el-input |
||||||
|
v-model="ipAddress[index]" |
||||||
|
@keyup="handleChange" |
||||||
|
oninput="value=value.replace(/[^\d]/g,'')&&value>255?255:value" |
||||||
|
/> |
||||||
|
<span v-if="index !== 3">.</span> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
const indexes = [0, 1, 2, 3]; |
||||||
|
const ipAddress = ref<string[]>([]); |
||||||
|
const emits = defineEmits(["update:modelValue"]); |
||||||
|
function handleChange() { |
||||||
|
emits("update:modelValue", ipAddress.value.join(".")); |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.my_ip_address_input { |
||||||
|
border-radius: 4px; |
||||||
|
width: 100%; |
||||||
|
display: block; |
||||||
|
|
||||||
|
.el-input { |
||||||
|
width: 22%; |
||||||
|
} |
||||||
|
} |
||||||
|
:deep(.el-input__inner) { |
||||||
|
border: none !important; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue