outsource/odf_new
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

21
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
zpc 2026-04-04 11:59:50 +08:00
parent fdf2388b3a
commit 5b2e4c6e1a
1 changed files with 103 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
server/ZR.Vue/src/components/business/OdfRackForm.vue
View File

@ -4,12 +4,12 @@
* @Date: (2025-01-16)
-->
<template>
<el-dialog :title="title" :lock-scroll="false" v-model="dialogVisible" @close="handleClose">
<el-dialog :title="title" :lock-scroll="false" :close-on-click-modal="false" v-model="dialogVisible" @close="handleClose">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item label="机房" prop="roomId">
<el-select v-model="form.roomId" :disabled="isView" placeholder="请选择机房">
<el-select v-model="form.roomId" :disabled="isView || isEdit" placeholder="请选择机房">
<el-option
v-for="item in options.sql_odf_room"
:key="item.dictValue"
@ -31,26 +31,67 @@
</el-col>
<el-col :lg="12">
<el-form-item label="ODF名称" prop="rackName">
<el-input v-model="form.rackName" :disabled="isView" placeholder="请输入ODF名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="框数量（固定9框）" prop="frameCount">
<el-input v-model.number="form.frameCount" :disabled="isView" placeholder="请输入框数量（默认9框）" />
<el-form-item label="名称" prop="rackName">
<el-input v-model="form.rackName" :disabled="isView" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="机架类型" prop="rackType">
<el-select v-model="form.rackType" :disabled="isView" placeholder="请选择机架类型">
<el-select v-model="form.rackType" :disabled="isView || isEdit" placeholder="请选择机架类型" @change="handleRackTypeChange">
<el-option label="ODF机架" :value="0"></el-option>
<el-option label="光交箱" :value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- 高级信息（仅新增时显示） -->
<el-col v-if="isAdd" :lg="24">
<el-divider content-position="left">
<span style="color: #909399; font-size: 12px">高级信息</span>
</el-divider>
</el-col>
<el-col v-if="isAdd" :lg="12">
<el-form-item label="机框数量" prop="framesCount">
<el-input v-model.number="form.framesCount" :disabled="isView" placeholder="请输入机框数量" />
<div class="form-tip">每个机架中机框数量</div>
</el-form-item>
</el-col>
<el-col v-if="isAdd" :lg="12">
<el-form-item label="行数" prop="rowCount">
<el-input v-model.number="form.rowCount" :disabled="isView" placeholder="请输入行数" />
<div class="form-tip">每个机框中有多少行</div>
</el-form-item>
</el-col>
<el-col v-if="isAdd && form.rackType !== 1" :lg="12">
<el-form-item label="端口数" prop="portsCount">
<el-input v-model.number="form.portsCount" :disabled="isView" placeholder="请输入端口数" />
<div class="form-tip">每个机框中每行端口数量</div>
</el-form-item>
</el-col>
<el-col v-if="isAdd && form.rackType === 1" :lg="12">
<el-form-item label="左侧端口数" prop="leftPortsCount">
<el-input v-model.number="form.leftPortsCount" :disabled="isView" placeholder="请输入左侧端口数" />
<div class="form-tip">每行光交箱侧端子数量</div>
</el-form-item>
</el-col>
<el-col v-if="isAdd && form.rackType === 1" :lg="12">
<el-form-item label="右侧端口数" prop="rightPortsCount">
<el-input v-model.number="form.rightPortsCount" :disabled="isView" placeholder="请输入右侧端口数" />
<div class="form-tip">每行ODF侧端子数量</div>
</el-form-item>
</el-col>
<el-col v-if="isAdd" :lg="12">
<el-form-item label="默认连接状态" prop="defaultStatus">
<el-radio-group v-model="form.defaultStatus">
<el-radio v-for="item in options.odf_ports_status" :key="item.dictValue" :value="parseInt(item.dictValue)">
{{ item.dictLabel }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<!-- 查看模式下显示时间信息 -->
<template v-if="isView && isEdit">
<el-col :lg="12">
@ -79,7 +120,7 @@
</template>
<script setup name="odfRackForm">
import { addOdfRacks, updateOdfRacks, getOdfRacks } from '@/api/business/odfracks.js'
import { addOdfRacksExpert, updateOdfRacks, getOdfRacks } from '@/api/business/odfracks.js'
const props = defineProps({
visible: {
@ -92,7 +133,7 @@ const props = defineProps({
},
mode: {
type: String,
default: 'edit', // 'add', 'edit', 'view'
default: 'edit',
validator: (value) => ['add', 'edit', 'view'].includes(value)
}
})
@ -103,7 +144,6 @@ const { proxy } = getCurrentInstance()
const formRef = ref()
const submitLoading = ref(false)
// 计算属性
const dialogVisible = computed({
get: () => props.visible,
set: (value) => emit('update:visible', value)
@ -111,68 +151,83 @@ const dialogVisible = computed({
const isEdit = computed(() => !!props.id)
const isView = computed(() => props.mode === 'view')
const isAdd = computed(() => props.mode === 'add')
const title = computed(() => {
if (props.mode === 'view') return '查看机架'
return isEdit.value ? '修改机架' : '添加机架'
})
// 表单数据
const form = ref({
id: null,
roomId: null,
sequenceNumber: null,
rackName: null,
frameCount: 9, // 默认固定9框
rackType: 0, // 0=ODF机架, 1=光交箱
frameCount: 9,
rackType: 0,
createdAt: null,
updatedAt: null
updatedAt: null,
framesCount: 9,
rowCount: 6,
portsCount: 12,
leftPortsCount: 12,
rightPortsCount: 12,
defaultStatus: 0
})
// 表单验证规则
const rules = {
roomId: [{ required: true, message: '机房不能为空', trigger: 'change', type: 'number' }],
sequenceNumber: [{ required: true, message: '序号不能为空', trigger: 'blur', type: 'number' }],
rackName: [{ required: true, message: 'ODF名称不能为空', trigger: 'blur' }],
rackName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
rackType: [{ required: true, message: '机架类型不能为空', trigger: 'change', type: 'number' }]
}
// 字典选项
const options = reactive({
sql_odf_room: []
sql_odf_room: [],
odf_ports_status: []
})
// 获取字典数据
var dictParams = ['sql_odf_room']
var dictParams = ['sql_odf_room', 'odf_ports_status']
proxy.getDicts(dictParams).then((response) => {
response.data.forEach((element) => {
options[element.dictType] = element.list
})
})
// 重置表单
function handleRackTypeChange(val) {
if (val === 1) {
form.value.leftPortsCount = 12
form.value.rightPortsCount = 12
}
}
function resetForm() {
form.value = {
id: null,
roomId: null,
sequenceNumber: null,
rackName: null,
frameCount: 9, // 默认固定9框
rackType: 0, // 默认ODF机架
frameCount: 9,
rackType: 0,
createdAt: null,
updatedAt: null
updatedAt: null,
framesCount: 9,
rowCount: 6,
portsCount: 12,
leftPortsCount: 12,
rightPortsCount: 12,
defaultStatus: 0
}
nextTick(() => {
proxy.resetForm('formRef')
})
}
// 加载数据
function loadData() {
if (props.id) {
getOdfRacks(props.id).then((res) => {
const { code, data } = res
if (code == 200) {
form.value = { ...data }
form.value = { ...form.value, ...data }
}
})
} else {
@ -180,7 +235,6 @@ function loadData() {
}
}
// 提交表单
function submitForm() {
proxy.$refs['formRef'].validate((valid) => {
if (valid) {
@ -196,7 +250,7 @@ function submitForm() {
submitLoading.value = false
})
} else {
addOdfRacks(form.value)
addOdfRacksExpert(form.value)
.then((res) => {
proxy.$modal.msgSuccess('新增成功')
handleSuccess()
@ -209,19 +263,16 @@ function submitForm() {
})
}
// 成功处理
function handleSuccess() {
dialogVisible.value = false
emit('success')
}
// 关闭对话框
function handleClose() {
dialogVisible.value = false
resetForm()
}
// 监听对话框显示状态
watch(
() => props.visible,
(newVal) => {
@ -231,3 +282,20 @@ watch(
}
)
</script>
<style scoped>
.form-tip {
font-size: 12px;
color: #909399;
margin-top: 4px;
line-height: 1.4;
padding-left: 12px;
position: relative;
}
.form-tip::before {
content: '💡';
margin-right: 0px;
font-size: 10px;
}
</style>