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