盘点管理select筛选巷道逻辑完善

src/views/checkManage/index.vue

@@ -16,16 +16,16 @@
            </span>
         </div>
 
-        <div class="check-content" v-for="list in data" :key="list">
+        <div class="check-content" v-for="item in data" :key="item.id">
-            <div class="roadway-top">
+            <div class="roadway-top" v-if="item.name == select">
                 <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                     <div class="roadway-box">
-                        <div class="line" v-for="item in Number(list.leftColumn)" :key="item">
+                        <div class="line" v-for="(f,index) in Number(item.leftColumn)" :key="index">
                             <div
                                 class="ele"
-                                :style="{background:i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#bfbfbf':'#bfbfbf'}"
+                                :style="{background:i+'-'+f == '4-14'|| i+'-'+f=='8-18'?'#bfbfbf':'#bfbfbf'}"
-                                v-for="i in Number(list.leftRow)"
+                                v-for="(i,index) in Number(item.leftRow)"
-                                :key="i">{{i}}-{{item}}
+                                :key="index">{{i}}-{{f}}
                             </div>
                         </div>
                     </div>
@@ -39,19 +39,15 @@
                 <!--                   </a-radio-button>-->
                 <!--               </a-radio-group>-->
             </div>
-            <a-select :default-value="list.name" style="width: 180px">
+            <div class="roadway-buttom" v-if="item.name == select">
-                <a-select-option :value="list.name">
-                    {{list.name}}
-                </a-select-option>
-            </a-select>
-            <div class="roadway-buttom">
                 <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                     <div class="roadway-box">
-                        <div class="line" v-for="item in Number(list.rightColumn)" :key="item">
+                        <div class="line" v-for="f in Number(item.rightColumn)"
+                             :key="f.rightColumn">
                             <div class="ele"
-                                 :style="{background:i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#bfbfbf':'#bfbfbf'}"
+                                 :style="{background:i+'-'+f == '5-16'|| i+'-'+f=='9-17'||i+'-'+f=='11-15'?'#bfbfbf':'#bfbfbf'}"
-                                 v-for="i in Number(list.rightRow)"
+                                 v-for="i in Number(item.rightRow)"
-                                 :key="i">{{i}}-{{item}}
+                                 :key="i.rightRow">{{i}}-{{f}}
                             </div>
                         </div>
                     </div>
@@ -66,6 +62,12 @@
                 <!--               </a-radio-group>-->
             </div>
         </div>
+        <a-select v-if="data[0]" :default-value="data[0].name" style="width: 180px"
+                  @change="handleChange" class="select-roadway">
+            <a-select-option v-for="i in data" :key="i.name" :value="i.name">
+                {{i.name}}
+            </a-select-option>
+        </a-select>
     </div>
 </template>
 <script>
@@ -74,7 +76,8 @@ export default {
         return {
             size: 'small',
             size2: 'small',
-            data: '',
+            data: [],
+            select: ''
         };
     },
     mounted() {
@@ -89,16 +92,23 @@ export default {
                 }
             }).then(res => {
                 this.data = res.data.list;
+                this.select = res.data.list[0].name
             }).catch(err => {
 
             });
         },
+        handleChange(value) {
+            console.log(value)
+            this.select = value
+        }
     },
     components: {}
 };
 </script>
 <style lang="scss" scoped>
     .check-page {
+        position: relative;
+
         .title-info {
             display: flex;
             align-items: center;
@@ -130,13 +140,12 @@ export default {
         }
 
         .roadway-buttom {
-            padding: 20px 0;
+            padding: 50px 0 20px 0;
             width: 1000px;
         }
 
         .scroll-box {
             height: 270px;
-
             .roadway-box {
                 transform: rotateX(180deg);
                 padding: 10px 10px 0 0;
@@ -156,5 +165,10 @@ export default {
                 }
             }
         }
+
+        .select-roadway {
+            position: absolute;
+            top: 350px;
+        }
     }
 </style>

src/views/roadwayManage/model.vue

@@ -289,14 +289,21 @@ export default {
             setTimeout(() => {
                 this.form.validateFields((err, values) => {
                     console.log(values)
+                    values.leftColumn = Number(values.leftColumn)
+                    values.leftRow = Number(values.leftRow)
+                    values.leftType = Number(values.leftType)
+                    values.plcPort = Number(values.plcPort)
+                    values.rightColumn = Number(values.rightColumn)
+                    values.rightRow = Number(values.rightRow)
+                    values.rightType = Number(values.rightType)
                     if (!err) {
                         console.log(this.title)
-                        if(this.title=='新增巷道'){
+                        if (this.title == '新增巷道') {
                             this.$api.httpApi.addStreet({
-                                data:values
+                                data: values
                             }).then(res => {
-                                if(res.code==200){
+                                if (res.code == 200) {
-                                    this.$emit('sure',false)
+                                    this.$emit('sure', false)
                                     this.$message.success('新增巷道成功');
                                 }
                             }).catch(err => {