parent
6e2f8da03f
commit
3e5e016eb1
@ -0,0 +1,168 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<div class="search-container"> |
||||||
|
<el-form :model="searchForm" :inline="true"> |
||||||
|
<el-form-item label="设备供应商"> |
||||||
|
<el-select |
||||||
|
v-model="searchForm.devVendorName" |
||||||
|
clearable |
||||||
|
placeholder="请选择设备供应商" |
||||||
|
style="width: 180px" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in vendorNameOption" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="设备型号"> |
||||||
|
<el-select |
||||||
|
v-model="searchForm.devTypeName" |
||||||
|
clearable |
||||||
|
placeholder="请选择设备型号" |
||||||
|
style="width: 180px" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in typeNameOption" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="设备硬件版本"> |
||||||
|
<el-select |
||||||
|
v-model="searchForm.devHardVer" |
||||||
|
clearable |
||||||
|
placeholder="设备硬件版本" |
||||||
|
style="width: 180px" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in hardVerOption" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="loadTr069DevTypePage"> |
||||||
|
<i-ep-search /> |
||||||
|
搜索 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-card shadow="never"> |
||||||
|
<div class="any-table"> |
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
v-loading="loading" |
||||||
|
highlight-current-row |
||||||
|
max-height="450" |
||||||
|
@selection-change="handleSelectionChange" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="55" /> |
||||||
|
<el-table-column label="设备类型" prop="devType" align="center"> |
||||||
|
<template #default="scope"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
link |
||||||
|
@click="redirect(scope.row.devTypeId)" |
||||||
|
>{{ scope.row.devType }}</el-button |
||||||
|
> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
label="设备类型软件版本名称" |
||||||
|
prop="devTypeSoftVer" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="审核标志" |
||||||
|
prop="devTypeVerStatus" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
<pagination |
||||||
|
v-if="total > 0" |
||||||
|
v-model:total="total" |
||||||
|
v-model:page="searchForm.pageNum" |
||||||
|
v-model:limit="searchForm.pageSize" |
||||||
|
@pagination="loadTr069DevTypePage" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { |
||||||
|
getHardVerOption, |
||||||
|
getTypeNameOption, |
||||||
|
getVendorNameOption, |
||||||
|
tr069BindingDevTypePage, |
||||||
|
} from "@/api/device-type"; |
||||||
|
import { Tr069DevTypeQuery, Tr069DevTypeVO } from "@/api/tr069/types"; |
||||||
|
import { ElTable } from "element-plus"; |
||||||
|
const multiples = ref<Tr069DevTypeVO[]>([]); |
||||||
|
const searchForm = ref<Tr069DevTypeQuery>({ |
||||||
|
devTypeName: "", |
||||||
|
devHardVer: "", |
||||||
|
devVendorName: "", |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
}); |
||||||
|
const vendorNameOption = ref<OptionType[]>([]); |
||||||
|
const typeNameOption = ref<OptionType[]>([]); |
||||||
|
const hardVerOption = ref<OptionType[]>([]); |
||||||
|
const tableData = ref<Tr069DevTypeVO[]>([]); |
||||||
|
const total = ref<number>(0); |
||||||
|
const loading = ref<boolean>(false); |
||||||
|
const router = useRouter(); |
||||||
|
const loadVendorNameOption = async () => { |
||||||
|
await getVendorNameOption().then(({ data }) => { |
||||||
|
vendorNameOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadTypeNameOption = async () => { |
||||||
|
await getTypeNameOption(searchForm.value.devVendorName).then(({ data }) => { |
||||||
|
typeNameOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadHardVerOption = async () => { |
||||||
|
await getHardVerOption(searchForm.value.devTypeName).then(({ data }) => { |
||||||
|
hardVerOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const handleSelectionChange = (val: Tr069DevTypeVO[]) => { |
||||||
|
multiples.value = val; |
||||||
|
}; |
||||||
|
const loadTr069DevTypePage = () => { |
||||||
|
loading.value = true; |
||||||
|
tr069BindingDevTypePage(searchForm.value) |
||||||
|
.then(({ data }) => { |
||||||
|
tableData.value = data.list; |
||||||
|
total.value = data.total; |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const redirect = (devTypeId: number) => { |
||||||
|
router.push({ |
||||||
|
path: `/resources/device_type_to_ver/${devTypeId}`, |
||||||
|
}); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
loadVendorNameOption(); |
||||||
|
loadTypeNameOption(); |
||||||
|
loadHardVerOption(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-card shadow="never"> |
||||||
|
<div class="mb-4"> |
||||||
|
<div style="display: flex; justify-content: space-between"> |
||||||
|
<div style="font-weight: 700">设备类型对应的设备软件版本列表</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" @click="skipBindingDevType"> |
||||||
|
<i-ep-plus /> |
||||||
|
新增 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="any-table"> |
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
v-loading="loading" |
||||||
|
highlight-current-row |
||||||
|
max-height="450" |
||||||
|
> |
||||||
|
<el-table-column label="设备类型" prop="devType" align="center" /> |
||||||
|
<el-table-column |
||||||
|
label="设备类型软件版本名称" |
||||||
|
prop="devTypeSoftVer" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="审核标志" |
||||||
|
prop="devTypeVerStatus" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
<pagination |
||||||
|
v-if="total > 0" |
||||||
|
v-model:total="total" |
||||||
|
v-model:page="query.pageNum" |
||||||
|
v-model:limit="query.pageSize" |
||||||
|
@pagination="loadTr069DevTypePage" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { Tr069DevTypeQuery, Tr069DevTypeVO } from "@/api/tr069/types"; |
||||||
|
import { tr069BindingDevTypePage } from "@/api/device-type"; |
||||||
|
|
||||||
|
const route = useRoute(); |
||||||
|
const router = useRouter(); |
||||||
|
let tr069VerId: number = parseInt(<string>route.params.tr069VerId); |
||||||
|
const tableData = ref<Tr069DevTypeVO[]>([]); |
||||||
|
const total = ref<number>(0); |
||||||
|
const loading = ref<boolean>(false); |
||||||
|
const query = ref<Tr069DevTypeQuery>({ |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
tr069VerId: tr069VerId, |
||||||
|
}); |
||||||
|
const loadTr069DevTypePage = () => { |
||||||
|
loading.value = true; |
||||||
|
tr069BindingDevTypePage(query.value) |
||||||
|
.then(({ data }) => { |
||||||
|
tableData.value = data.list; |
||||||
|
total.value = data.total; |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const skipBindingDevType = () => { |
||||||
|
router.push({ path: `/resources/tr069-binding-dev-type/${tr069VerId}` }); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
loadTr069DevTypePage(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
Loading…
Reference in new issue