parent
cedd31e556
commit
b662e5fd19
@ -0,0 +1,13 @@ |
||||
import { AxiosPromise } from "axios"; |
||||
import { EquipmentTableResult } from "@/api/resources-equipment/types"; |
||||
import request from "@/utils/request"; |
||||
|
||||
export function getEquipmentPage( |
||||
data: SelectForm |
||||
): AxiosPromise<EquipmentTableResult> { |
||||
return request({ |
||||
url: "/api/equipment/v1/resource-page", |
||||
method: "POST", |
||||
data, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
|
||||
export interface EquipmentTableVO { |
||||
devId?: number; |
||||
devSno?: string; |
||||
devAdNo?: string; |
||||
devPppoe?: string; |
||||
devStatus?: string; |
||||
softVer?: string; |
||||
devTypeId?: number; |
||||
devVendorName?: string; |
||||
devVendorOui?: string; |
||||
devTypeName?: string; |
||||
devHardVer?: string; |
||||
devTypeNameNew?: string; |
||||
devOnline?: string; |
||||
devOnlineTime?: string; |
||||
} |
||||
export type EquipmentTableResult = PageResult<EquipmentTableVO[]>; |
||||
@ -0,0 +1,229 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="search-container"> |
||||
<el-form :model="queryForm" :inline="true"> |
||||
<el-row> |
||||
<el-col :span="6"> |
||||
<el-form-item label="查询条件"> |
||||
<el-select |
||||
v-model="queryForm.selectName" |
||||
placeholder="请选择" |
||||
style="width: 240px" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="item in options" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6" v-if="queryForm.selectName != undefined"> |
||||
<el-input |
||||
v-model="queryForm.selectValue" |
||||
placeholder="请输入" |
||||
style="width: 300px" |
||||
/> |
||||
</el-col> |
||||
<el-col :span="buttonColSpan"> |
||||
<el-form-item> |
||||
<el-button type="primary" :icon="Search" @click="getData" |
||||
>搜索</el-button |
||||
> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
</div> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div class="table-head-parent"> |
||||
<div> |
||||
<el-button type="primary" plain><i-ep-plus />新增</el-button> |
||||
<el-button type="danger" plain><i-ep-delete />删除</el-button> |
||||
</div> |
||||
<table-bar :columns="columns" @change-columns="changeColumns" /> |
||||
</div> |
||||
</template> |
||||
<div class="any-table"> |
||||
<el-table :data="tableData" v-loading="loading"> |
||||
<el-table-column |
||||
label="设备标识" |
||||
align="center" |
||||
width="240" |
||||
show-overflow-tooltip |
||||
v-if="columns[0].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-button type="primary" link |
||||
>{{ scope.row.devVendorOui }}-{{ scope.row.devSno }}</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="AD编号" |
||||
align="center" |
||||
show-overflow-tooltip |
||||
prop="devAdNo" |
||||
v-if="columns[1].show" |
||||
/> |
||||
<el-table-column |
||||
label="宽带账号" |
||||
align="center" |
||||
prop="devPppoe" |
||||
show-overflow-tooltip |
||||
v-if="columns[2].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备类型" |
||||
align="center" |
||||
show-overflow-tooltip |
||||
v-if="columns[3].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="redirect(scope.row.devTypeId)" |
||||
> |
||||
{{ scope.row.devVendorName }} {{ |
||||
scope.row.devTypeName |
||||
}} {{ scope.row.devHardVer }} |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="软件版本" |
||||
align="center" |
||||
prop="softVer" |
||||
v-if="columns[4].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备上行方式" |
||||
align="center" |
||||
v-if="columns[5].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备在线时间" |
||||
align="center" |
||||
prop="devOnlineTime" |
||||
v-if="columns[6].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备状态" |
||||
align="center" |
||||
prop="devStatus" |
||||
v-if="columns[7].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-tag>{{ scope.row.devStatus }}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="是否合法" |
||||
align="center" |
||||
v-if="columns[8].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-tag v-if="scope.row.devStatus === '未注册'">非法</el-tag> |
||||
<el-tag v-else>正常</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="在线状态" |
||||
align="center" |
||||
prop="devOnline" |
||||
v-if="columns[9].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-tag>{{ scope.row.devOnline }}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="网元类型" |
||||
align="center" |
||||
prop="devTypeNameNew" |
||||
v-if="columns[10].show" |
||||
/> |
||||
</el-table> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="queryForm.pageNum" |
||||
v-model:limit="queryForm.pageSize" |
||||
@pagination="getData" |
||||
/> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Search } from "@element-plus/icons-vue"; |
||||
import { EquipmentTableVO } from "@/api/resources-equipment/types"; |
||||
import { getEquipmentPage } from "@/api/resources-equipment"; |
||||
|
||||
defineOptions({ |
||||
name: "Equipment", |
||||
inheritAttrs: false, |
||||
}); |
||||
const queryForm = ref<SelectForm>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const loading = ref<boolean>(false); |
||||
const options = ref<OptionType[]>([{ label: "AD编号", value: "devAdNo" }]); |
||||
const buttonColSpan = computed(() => { |
||||
return queryForm.value.selectName === undefined ? 18 : 12; |
||||
}); |
||||
const total = ref<number>(0); |
||||
const tableData = ref<EquipmentTableVO[]>([]); |
||||
const columns = ref<TableColumns[]>([ |
||||
{ name: "设备标识", show: true }, |
||||
{ name: "AD编号", show: true }, |
||||
{ name: "宽带账号", show: true }, |
||||
{ name: "设备类型", show: true }, |
||||
{ name: "软件版本", show: true }, |
||||
{ name: "设备上行方式", show: false }, |
||||
{ name: "设备在线时间", show: false }, |
||||
{ name: "设备状态", show: true }, |
||||
{ name: "是否合法", show: true }, |
||||
{ name: "在线状态", show: true }, |
||||
{ name: "网元类型", show: true }, |
||||
]); |
||||
const changeColumns = (newColumns: TableColumns[]) => { |
||||
columns.value = newColumns; |
||||
}; |
||||
const router = useRouter(); |
||||
const redirect = (devTypeId: number) => { |
||||
router.push({ |
||||
path: `/resources/device_type_to_ver/${devTypeId}`, |
||||
}); |
||||
}; |
||||
const getData = () => { |
||||
if ( |
||||
queryForm.value.selectName === undefined || |
||||
queryForm.value.selectValue === undefined |
||||
) { |
||||
ElMessage({ |
||||
message: "查询条件不能为空", |
||||
type: "error", |
||||
duration: 1000, |
||||
}); |
||||
return; |
||||
} |
||||
loading.value = true; |
||||
getEquipmentPage(queryForm.value) |
||||
.then(({ data }) => { |
||||
tableData.value = data.list; |
||||
total.value = data.total; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
Loading…
Reference in new issue