parent
8dffb3fe8f
commit
be5dd88986
|
After Width: | Height: | Size: 863 B |
|
After Width: | Height: | Size: 963 B |
|
After Width: | Height: | Size: 587 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,312 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-card shadow="never"> |
||||||
|
<template #header> |
||||||
|
<div style="display: flex; align-items: center"> |
||||||
|
<el-icon size="15"><Grid /></el-icon> <span |
||||||
|
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||||
|
>新增设备类型信息</span |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<el-form |
||||||
|
v-loading="loading" |
||||||
|
:model="formData" |
||||||
|
ref="addDeviceTypeRef" |
||||||
|
:rules="rules" |
||||||
|
> |
||||||
|
<el-descriptions :column="2" border> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备供应商" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devVendorName"> |
||||||
|
<el-input |
||||||
|
v-model="formData.devVendorName" |
||||||
|
style="width: 200px; margin-right: 10px" |
||||||
|
/> |
||||||
|
<el-select |
||||||
|
v-model="formData.devVendorName" |
||||||
|
clearable |
||||||
|
filterable |
||||||
|
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-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备OUI" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devVendorOui"> |
||||||
|
<el-input |
||||||
|
v-model="formData.devVendorOui" |
||||||
|
style="width: 200px; margin-right: 10px" |
||||||
|
/> |
||||||
|
<el-select |
||||||
|
v-model="formData.devVendorOui" |
||||||
|
clearable |
||||||
|
filterable |
||||||
|
placeholder="请选择设备OUI" |
||||||
|
style="width: 180px" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in vendorOuiOption" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备型号" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devTypeName"> |
||||||
|
<el-input |
||||||
|
v-model="formData.devTypeName" |
||||||
|
style="width: 200px; margin-right: 10px" |
||||||
|
/> |
||||||
|
<el-select |
||||||
|
v-model="formData.devTypeName" |
||||||
|
clearable |
||||||
|
filterable |
||||||
|
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-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备硬件版本" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devHardVer"> |
||||||
|
<el-input |
||||||
|
v-model="formData.devHardVer" |
||||||
|
style="width: 200px; margin-right: 10px" |
||||||
|
/> |
||||||
|
<el-select |
||||||
|
v-model="formData.devHardVer" |
||||||
|
clearable |
||||||
|
filterable |
||||||
|
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-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="设备类型描述" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="150px" |
||||||
|
> |
||||||
|
<el-form-item prop="devTypeDesc"> |
||||||
|
<el-input v-model="formData.devTypeDesc" type="textarea" /> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
</el-descriptions> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<div class="flex justify-end"> |
||||||
|
<el-button type="primary" @click="submitForm(addDeviceTypeRef)" |
||||||
|
>保存</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { Grid } from "@element-plus/icons-vue"; |
||||||
|
import { DeviceTypeForm } from "@/api/device-type/types"; |
||||||
|
import { |
||||||
|
addDeviceType, |
||||||
|
getHardVerOption, |
||||||
|
getTypeNameOption, |
||||||
|
getVendorNameOption, |
||||||
|
getVendorOuiOption, |
||||||
|
} from "@/api/device-type"; |
||||||
|
import { FormInstance, FormRules } from "element-plus"; |
||||||
|
import { confirm } from "@/utils/confirm"; |
||||||
|
const formData = ref<DeviceTypeForm>({ |
||||||
|
devTypeName: "", |
||||||
|
devVendorOui: "", |
||||||
|
devHardVer: "", |
||||||
|
devVendorName: "", |
||||||
|
}); |
||||||
|
const loading = ref<boolean>(false); |
||||||
|
const addDeviceTypeRef = ref<FormInstance>(); |
||||||
|
const vendorNameOption = ref<OptionType[]>([]); |
||||||
|
const vendorOuiOption = ref<OptionType[]>([]); |
||||||
|
const typeNameOption = ref<OptionType[]>([]); |
||||||
|
const hardVerOption = ref<OptionType[]>([]); |
||||||
|
const rules = reactive<FormRules<DeviceTypeForm>>({ |
||||||
|
devVendorName: [ |
||||||
|
{ required: true, message: "请选择或输入设备供应商", trigger: "blur" }, |
||||||
|
{ |
||||||
|
min: 3, |
||||||
|
max: 64, |
||||||
|
message: "设备供应商长度大于最小64字符长度", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
devTypeName: [ |
||||||
|
{ required: true, message: "请选择或输入设备型号", trigger: "blur" }, |
||||||
|
{ |
||||||
|
min: 3, |
||||||
|
max: 64, |
||||||
|
message: "设备型号长度大于最小64字符长度", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
devHardVer: [ |
||||||
|
{ required: true, message: "请选择或输入设备硬件版本", trigger: "blur" }, |
||||||
|
{ |
||||||
|
min: 3, |
||||||
|
max: 64, |
||||||
|
message: "设备硬件版本长度大于最小64字符长度", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
devVendorOui: [ |
||||||
|
{ required: true, message: "请选择或输入设备OUI", trigger: "blur" }, |
||||||
|
{ |
||||||
|
min: 3, |
||||||
|
max: 64, |
||||||
|
message: "设备OUI本长度大于最小64字符长度", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
watch( |
||||||
|
() => formData.value.devVendorName, |
||||||
|
() => { |
||||||
|
if (formData.value.devVendorName === undefined) { |
||||||
|
return; |
||||||
|
} |
||||||
|
loadVendorOuiOption(); |
||||||
|
} |
||||||
|
); |
||||||
|
watch( |
||||||
|
() => formData.value.devVendorOui, |
||||||
|
() => { |
||||||
|
if (formData.value.devVendorOui === undefined) { |
||||||
|
return; |
||||||
|
} |
||||||
|
loadTypeNameOption(); |
||||||
|
} |
||||||
|
); |
||||||
|
watch( |
||||||
|
() => formData.value.devTypeName, |
||||||
|
() => { |
||||||
|
if (formData.value.devTypeName === undefined) { |
||||||
|
return; |
||||||
|
} |
||||||
|
loadHardVerOption(); |
||||||
|
} |
||||||
|
); |
||||||
|
const loadVendorNameOption = async () => { |
||||||
|
await getVendorNameOption().then(({ data }) => { |
||||||
|
vendorNameOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const loadVendorOuiOption = async () => { |
||||||
|
await getVendorOuiOption(formData.value.devVendorName).then(({ data }) => { |
||||||
|
vendorOuiOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadTypeNameOption = async () => { |
||||||
|
await getTypeNameOption(formData.value.devVendorOui).then(({ data }) => { |
||||||
|
typeNameOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadHardVerOption = async () => { |
||||||
|
await getHardVerOption(formData.value.devTypeName).then(({ data }) => { |
||||||
|
hardVerOption.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const submitForm = async (formEl: FormInstance | undefined) => { |
||||||
|
if (!formEl) return; |
||||||
|
await formEl.validate((valid, fields) => { |
||||||
|
if (valid) { |
||||||
|
confirm("确定新增设备类型吗", () => { |
||||||
|
loading.value = true; |
||||||
|
addDeviceType(formData.value) |
||||||
|
.then(() => { |
||||||
|
ElMessage({ |
||||||
|
message: "操作成功", |
||||||
|
duration: 1000, |
||||||
|
type: "success", |
||||||
|
}); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
console.log("error submit!", fields); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
loadVendorNameOption(); |
||||||
|
loadVendorOuiOption(); |
||||||
|
loadTypeNameOption(); |
||||||
|
loadHardVerOption(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
:deep(.my-label) { |
||||||
|
width: 100px !important; |
||||||
|
background: var(--el-color-white) !important; |
||||||
|
} |
||||||
|
:deep(.el-card__body) { |
||||||
|
padding: 10px 5px; |
||||||
|
} |
||||||
|
:deep(.el-form-item--default) { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue