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