21

server/ZR.Vue/src/components/business/OdfRackForm.vue

@@ -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-form-item label="名称" prop="rackName">
-            <el-input v-model="form.rackName" :disabled="isView" placeholder="请输入ODF名称" />
+            <el-input v-model="form.rackName" :disabled="isView" placeholder="请输入名称" />
-          </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>
         </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框
+  frameCount: 9,
-  rackType: 0, // 0=ODF机架, 1=光交箱
+  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', 'odf_ports_status']
-var dictParams = ['sql_odf_room']
 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框
+    frameCount: 9,
-    rackType: 0, // 默认ODF机架
+    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>