parent
20f28f2a55
commit
6e2f8da03f
@ -0,0 +1,45 @@ |
||||
import request from "@/utils/request"; |
||||
import { AxiosPromise } from "axios"; |
||||
import { Tr069VerForm, Tr069VerPageResult, Tr069Xml } from "@/api/tr069/types"; |
||||
|
||||
export function getTr069Page( |
||||
data: PageQuery |
||||
): AxiosPromise<Tr069VerPageResult> { |
||||
return request({ |
||||
url: "/api/tr069/v1/page", |
||||
method: "POST", |
||||
data, |
||||
}); |
||||
} |
||||
export function getTr069XmlTree(fileId?: number): AxiosPromise<Tr069Xml> { |
||||
return request({ |
||||
url: `/api/tr069/v1/tree/${fileId}`, |
||||
method: "get", |
||||
}); |
||||
} |
||||
export function getTr069XmlOption(): AxiosPromise<OptionType[]> { |
||||
return request({ |
||||
url: `/api/tr069/v1/tr069-model/option`, |
||||
method: "get", |
||||
}); |
||||
} |
||||
export function getTr069Form(tr069VerId: number): AxiosPromise<Tr069VerForm> { |
||||
return request({ |
||||
url: `/api/tr069/v1/${tr069VerId}`, |
||||
method: "get", |
||||
}); |
||||
} |
||||
export function editTr069(data: Tr069VerForm) { |
||||
return request({ |
||||
url: `/api/tr069/v1/edit`, |
||||
method: "POST", |
||||
data, |
||||
}); |
||||
} |
||||
export function addTr069(data: Tr069VerForm){ |
||||
return request({ |
||||
url: `/api/tr069/v1/add`, |
||||
method: "POST", |
||||
data, |
||||
}); |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
export interface Tr069VerVO { |
||||
tr069VerId?: number; |
||||
tr069VerName?: string; |
||||
tr069VerDesc?: string; |
||||
fileName?: string; |
||||
fileId?: number; |
||||
} |
||||
export type Tr069VerPageResult = PageResult<Tr069VerVO[]>; |
||||
export interface Tr069VerForm { |
||||
tr069VerId?: number; |
||||
tr069VerName?: string; |
||||
tr069VerDesc?: string; |
||||
fileId?: number; |
||||
} |
||||
|
||||
export interface Tr069Xml { |
||||
tagName?: string; |
||||
|
||||
read?: string; |
||||
|
||||
write?: string; |
||||
|
||||
type?: string; |
||||
|
||||
children?: Array<Tr069Xml>; |
||||
} |
||||
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,93 @@ |
||||
<template> |
||||
<el-dialog |
||||
class="com-dialog" |
||||
v-model="addDevTypeVerFlag" |
||||
title="新增设备类型软件版本信息" |
||||
> |
||||
<el-form |
||||
ref="addDevTypeVerFormRef" |
||||
:rules="rules" |
||||
:model="formData" |
||||
v-loading="loading" |
||||
label-position="top" |
||||
> |
||||
<el-form-item label="设备类型软件版本名称" prop="softVer"> |
||||
<el-input v-model="formData.softVer" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="TR069协议版本" prop="specVer"> |
||||
<el-input v-model="formData.specVer" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="适用流程" prop="provisionFlag"> |
||||
<dictionary |
||||
type-code="provision_flag" |
||||
v-model="formData.provisionFlag" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="设备类型软件版本描述" prop="provisionFlag"> |
||||
<el-input v-model="formData.devTypeVerDesc" type="textarea" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button type="primary" @click="submitForm(addDevTypeVerFormRef)" |
||||
>确认</el-button |
||||
> |
||||
<el-button>取消</el-button> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { DeviceTypeVerForm } from "@/api/device-type-ver/types"; |
||||
import { FormInstance, FormRules } from "element-plus"; |
||||
import { addTypeVer } from "@/api/device-type-ver"; |
||||
|
||||
const addDevTypeVerFlag = ref<boolean>(false); |
||||
const loading = ref<boolean>(false); |
||||
const devTypeId = ref<number>(0); |
||||
const open = (devTypeId_: number) => { |
||||
resetForm(addDevTypeVerFormRef.value); |
||||
devTypeId.value = devTypeId_; |
||||
formData.value = { provisionFlag: "0" }; |
||||
addDevTypeVerFlag.value = true; |
||||
}; |
||||
defineExpose({ open }); |
||||
|
||||
const formData = ref<DeviceTypeVerForm>({ |
||||
provisionFlag: "0", |
||||
}); |
||||
const addDevTypeVerFormRef = ref<FormInstance>(); |
||||
const rules = reactive<FormRules<DeviceTypeVerForm>>({ |
||||
softVer: [ |
||||
{ required: true, message: "请输入设备类型软件版本名称", trigger: "blur" }, |
||||
], |
||||
specVer: [ |
||||
{ required: true, message: "请输入TR069协议版本", trigger: "blur" }, |
||||
], |
||||
}); |
||||
const resetForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
formEl.resetFields(); |
||||
}; |
||||
const emit = defineEmits(["success"]); |
||||
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
loading.value = true; |
||||
addTypeVer(devTypeId.value, formData.value) |
||||
.then(() => { |
||||
emit("success"); |
||||
addDevTypeVerFlag.value = false; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
@ -0,0 +1,112 @@ |
||||
<template> |
||||
<el-dialog |
||||
class="com-dialog" |
||||
v-model="tr069XmlFlag" |
||||
align-center |
||||
:title="title" |
||||
> |
||||
<el-form |
||||
ref="addVendorProfileRef" |
||||
v-loading="loading" |
||||
:rules="rules" |
||||
:model="formData" |
||||
> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="文件名称" prop="fileName"> |
||||
<el-input v-model="formData.fileName" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="文件描述信息"> |
||||
<el-input v-model="formData.fileDesc" type="textarea" :rows="1" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-upload |
||||
drag |
||||
action="#" |
||||
:limit="1" |
||||
:auto-upload="false" |
||||
v-model:file-list="fileList" |
||||
accept=".xml" |
||||
> |
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
||||
<div class="el-upload__text">拖拽上传 或 <em>点击上传</em></div> |
||||
</el-upload> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button type="primary" @click="handleUpload(addVendorProfileRef)" |
||||
>保存</el-button |
||||
> |
||||
<el-button @click="tr069XmlFlag = false">取消</el-button> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { UploadFilled } from "@element-plus/icons-vue"; |
||||
import { Tr069XmlFileForm, VendorProfile } from "@/api/file/types"; |
||||
import { FormInstance, FormRules, UploadUserFile } from "element-plus"; |
||||
import { addTr069FileRecord, uploadApi } from "@/api/file"; |
||||
|
||||
const loading = ref<boolean>(false); |
||||
const tr069XmlFlag = ref<boolean>(false); |
||||
const addVendorProfileRef = ref(); |
||||
const fileList = ref<UploadUserFile[]>([]); |
||||
const formData = ref<Tr069XmlFileForm>({}); |
||||
const title = ref<string>(""); |
||||
const open = (fileType_?: string, title_?: string) => { |
||||
resetForm(addVendorProfileRef.value); |
||||
fileList.value = []; |
||||
formData.value = { |
||||
fileType: fileType_, |
||||
}; |
||||
if (title_ != null) { |
||||
title.value = title_; |
||||
} |
||||
tr069XmlFlag.value = true; |
||||
}; |
||||
defineExpose({ open }); |
||||
const rules = reactive<FormRules<VendorProfile>>({ |
||||
fileName: [{ required: true, message: "请填写文件名称", trigger: "blur" }], |
||||
}); |
||||
const resetForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
formEl.resetFields(); |
||||
}; |
||||
const handleUpload = async (formEl: FormInstance | undefined) => { |
||||
if (fileList.value.length === 0) { |
||||
ElMessage.error("请选择文件上传"); |
||||
return; |
||||
} |
||||
if (!formEl) return; |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
loading.value = true; |
||||
const file = fileList.value[0].raw; |
||||
const dotIndex: any = file?.name.lastIndexOf("."); |
||||
if (dotIndex === -1) { |
||||
ElMessage.error("文件没有后缀，无法上传"); |
||||
return; |
||||
} |
||||
const fileName = formData.value.fileName; |
||||
const fileType = formData.value.fileType; |
||||
formData.value.fileName = |
||||
fileName + "." + file?.name.substring(dotIndex + 1); |
||||
uploadApi(file, fileName, fileType) |
||||
.then(({ data }) => { |
||||
formData.value.fileUrl = data; |
||||
addTr069FileRecord(formData.value).then(() => { |
||||
tr069XmlFlag.value = false; |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
@ -0,0 +1,198 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<el-form |
||||
:model="formData" |
||||
:rules="rules" |
||||
v-loading="loadingForm" |
||||
ref="tr069FormRef" |
||||
> |
||||
<el-descriptions title="TR-069参数树模型" :column="2" border> |
||||
<template #extra> |
||||
<el-button type="primary" @click="submitForm(tr069FormRef)" |
||||
><el-icon><EditPen /></el-icon>保存</el-button |
||||
> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="TR-069数据模型版本" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item style="margin-bottom: 0" prop="fileId"> |
||||
<el-select v-model="formData.fileId"> |
||||
<el-option |
||||
v-for="item in tr069FileOption" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="TR-069数据模型版本名称" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="tr069VerName" style="margin-bottom: 0"> |
||||
<el-input v-model="formData.tr069VerName" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="TR-069描述" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="tr069VerDesc" style="margin-bottom: 0"> |
||||
<el-input type="textarea" v-model="formData.tr069VerDesc" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-form> |
||||
<div class="tree"> |
||||
<el-scrollbar max-height="300"> |
||||
<el-tree |
||||
ref="folderTreeRef" |
||||
v-loading="treeLoading" |
||||
:highlight-current="true" |
||||
:data="treeList" |
||||
:props="{ children: 'children', label: 'tagName', disabled: '' }" |
||||
:expand-on-click-node="false" |
||||
default-expand-all |
||||
> |
||||
<template #default="{ node }"> |
||||
<div class="custom-tree-node"> |
||||
<span> |
||||
<span> |
||||
<svg-icon class="mr-5px" icon-class="folder" /> |
||||
</span> |
||||
<span>{{ node.label }}</span> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
</el-tree> |
||||
</el-scrollbar> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Tr069VerForm, Tr069Xml } from "@/api/tr069/types"; |
||||
import { EditPen } from "@element-plus/icons-vue"; |
||||
import { |
||||
addTr069, |
||||
editTr069, |
||||
getTr069Form, |
||||
getTr069XmlOption, |
||||
getTr069XmlTree |
||||
} from "@/api/tr069"; |
||||
import { FormInstance, FormRules } from "element-plus"; |
||||
|
||||
const route = useRoute(); |
||||
let tr069VerId: number = parseInt(<string>route.params?.tr069VerId); |
||||
let fileId: number = parseInt(<string>route.params?.fileId); |
||||
const formData = ref<Tr069VerForm>({}); |
||||
const treeLoading = ref<boolean>(false); |
||||
const treeList = ref<Tr069Xml[]>([]); |
||||
const tr069FormRef = ref<FormInstance>(); |
||||
const rules = reactive<FormRules<Tr069VerForm>>({ |
||||
fileId: [{ required: true, message: "请选择tr069文件", trigger: "blur" }], |
||||
tr069VerName: [ |
||||
{ required: true, message: "请输入tr069名称", trigger: "blur" }, |
||||
], |
||||
}); |
||||
const loadTr069Xml = async () => { |
||||
treeLoading.value = true; |
||||
treeList.value = []; |
||||
await getTr069XmlTree(formData.value.fileId) |
||||
.then(({ data }) => { |
||||
treeList.value.push(data); |
||||
}) |
||||
.finally(() => { |
||||
treeLoading.value = false; |
||||
}); |
||||
}; |
||||
const tr069FileOption = ref<OptionType[]>([]); |
||||
const loadTr069FileOption = async () => { |
||||
await getTr069XmlOption().then(({ data }) => { |
||||
tr069FileOption.value = data; |
||||
}); |
||||
}; |
||||
const loadingForm = ref<boolean>(false); |
||||
const loadTr069FormData = async () => { |
||||
loadingForm.value = true; |
||||
await getTr069Form(tr069VerId) |
||||
.then(({ data }) => { |
||||
formData.value = data; |
||||
}) |
||||
.finally(() => { |
||||
loadingForm.value = false; |
||||
}); |
||||
}; |
||||
|
||||
const handleEdit = () => { |
||||
loadingForm.value = true; |
||||
editTr069(formData.value) |
||||
.then(() => { |
||||
ElMessage.success("操作成功"); |
||||
}) |
||||
.finally(() => { |
||||
loadingForm.value = false; |
||||
}); |
||||
}; |
||||
const handleAdd = () => { |
||||
loadingForm.value = true; |
||||
addTr069(formData.value) |
||||
.then(() => { |
||||
ElMessage.success("操作成功"); |
||||
}) |
||||
.finally(() => { |
||||
loadingForm.value = false; |
||||
}); |
||||
}; |
||||
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
if (tr069VerId !== -999) { |
||||
handleEdit(); |
||||
} else { |
||||
handleAdd(); |
||||
} |
||||
} |
||||
}); |
||||
}; |
||||
watch( |
||||
() => formData.value.fileId, |
||||
() => { |
||||
loadTr069Xml(); |
||||
} |
||||
); |
||||
onMounted(() => { |
||||
loadTr069FileOption(); |
||||
if (tr069VerId !== -999) { |
||||
formData.value.fileId = fileId; |
||||
loadTr069FormData(); |
||||
} |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
:deep(.my-label) { |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
.tree { |
||||
margin-top: 10px; |
||||
border: 1px solid var(--el-border-color-dark); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,115 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div style="display: flex; justify-content: flex-end"> |
||||
<div> |
||||
<el-button type="primary" plain @click="goto(-999, -999)" |
||||
><i-ep-plus />新增</el-button |
||||
> |
||||
<el-button type="primary" @click="openTr069FileForm" plain |
||||
><i-ep-plus />导入TR069文件</el-button |
||||
> |
||||
<el-button @click="loadTr069Page" plain><i-ep-refresh /></el-button> |
||||
<el-button type="danger" plain><i-ep-delete />删除</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<div class="any-table"> |
||||
<el-table :data="tableData" v-loading="loading"> |
||||
<el-table-column |
||||
label="TR-069数据模型版本名称" |
||||
align="center" |
||||
prop="tr069VerName" |
||||
> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
@click="goto(scope.row.tr069VerId, scope.row.fileId)" |
||||
link |
||||
>{{ scope.row.tr069VerName }}</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="TR-069数据模型版本文件名称" |
||||
align="center" |
||||
prop="fileName" |
||||
> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleDownload(scope.row.fileId)" |
||||
>{{ scope.row.fileName }} |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="TR-069数据模型版本描述" |
||||
align="center" |
||||
prop="tr069VerDesc" |
||||
/> |
||||
</el-table> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="query.pageNum" |
||||
v-model:limit="query.pageSize" |
||||
@pagination="loadTr069Page" |
||||
/> |
||||
</div> |
||||
</el-card> |
||||
<add-tr069-file ref="addTr069FileRef" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Tr069VerVO } from "@/api/tr069/types"; |
||||
import { getTr069Page } from "@/api/tr069"; |
||||
import { downloadFileApi } from "@/api/file"; |
||||
import { downloadHook } from "@/utils"; |
||||
import AddTr069File from "@/views/resources/tr069/components/AddTr069File.vue"; |
||||
defineOptions({ |
||||
name: "Tr069", |
||||
inheritAttrs: false, |
||||
}); |
||||
const loading = ref<boolean>(false); |
||||
const tableData = ref<Tr069VerVO[]>([]); |
||||
const query = ref<PageQuery>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const total = ref<number>(0); |
||||
const loadTr069Page = () => { |
||||
loading.value = true; |
||||
getTr069Page(query.value) |
||||
.then(({ data }) => { |
||||
total.value = data.total; |
||||
tableData.value = data.list; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const handleDownload = (fileId: number) => { |
||||
downloadFileApi(fileId).then((res) => { |
||||
downloadHook(res); |
||||
}); |
||||
}; |
||||
const router = useRouter(); |
||||
const goto = (tr069VerId?: number, fileId?: number) => { |
||||
router.push({ |
||||
path: `/resources/tr069-tree/${tr069VerId}/${fileId}`, |
||||
}); |
||||
}; |
||||
const addTr069FileRef = ref(); |
||||
const openTr069FileForm = () => { |
||||
addTr069FileRef.value.open("3", "新增TR-069数据模型文件"); |
||||
}; |
||||
onMounted(() => { |
||||
loadTr069Page(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
Loading…
Reference in new issue