feat : 隧道管理新增/修改框添加新字段输入框

src/views/tunnel-manage/index.vue

@@ -102,6 +102,25 @@
         <el-form-item label="施工长度" prop="constructionLength">
           <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
         </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间" prop="upTime">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率"/>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间" prop="dropTime">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率"/>
+          </el-form-item>
+        </div>
         <el-form-item label="是否默认">
           <el-radio-group v-model="form.isDefault">
             <el-radio :label="true">是</el-radio>
@@ -156,7 +175,12 @@ const formRules = ref({
     {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
   ],
   totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
-  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}]
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+  referenceFrequency: [{required: true, message: '请输入基准频率', trigger: ['blur', 'change']}],
+  upTime: [{required: true, message: '请选择升频时间', trigger: ['blur', 'change']}],
+  upFrequency: [{required: true, message: '请输入升频率', trigger: ['blur', 'change']}],
+  dropTime: [{required: true, message: '请选择降频时间', trigger: ['blur', 'change']}],
+  dropFrequency: [{required: true, message: '请输入降频率', trigger: ['blur', 'change']}]
 })
 const clickModel = ref(1)
 const showFirst = ref(true)
@@ -235,6 +259,11 @@ const form = ref({
   tunnelAlias: '',
   serialNumber: '',
   totalLength: '',
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
   remarks: '',
   isDefault: false
 });
@@ -305,6 +334,7 @@ const handleCurrentChange = (val) => {
   getList()
 }
 const handleSubmit = (instance) => {
+  console.log('form.value', form.value)
   if (!instance) return
   instance.validate(async (valid) => {
     if (!valid) return
@@ -373,6 +403,11 @@ const restFrom = () => {
     tunnelAlias: '',
     serialNumber: '',
     totalLength: '',
+    referenceFrequency: '',
+    upTime: '',
+    upFrequency: '',
+    dropTime: '',
+    dropFrequency: '',
     remarks: '',
     isDefault: false
   }
@@ -381,6 +416,10 @@ const handleAdd = () => {
   restFrom()
   title.value = '新增隧道'
   isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
 }
 const getImageUrl = (name) => {
   return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
@@ -433,6 +472,23 @@ const handleMoreDelete = () => {
   font-size: 35px;
 }
 
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
 .site-name {
   position: absolute;
   left: 250px;
@@ -521,7 +577,7 @@ const handleMoreDelete = () => {
   border-radius: 20px;
   padding: 30px 40px;
   box-sizing: border-box;
-  margin: 458px auto 0 auto;
+  //margin: 458px auto 0 auto;
 
   .el-dialog__header {
     padding: 0;