1.画板布局

陶杰

2024-11-24 79e942ec0ab33b0e6b6590bdc51d005dfef8dadb

 src/components/equ-add-form.vue

@@ -10,21 +10,51 @@
      <div class="equ-form-container">
        <div class="flex">
          <div class="label require">交换机:</div>
          <input
          <!-- <input
            class="value input"
            v-model="name"
            placeholder="请输入交换机名称"
            placeholder-class="value input"
          />
          /> -->
          <select
            class="value select"
            placeholder="请选择交换机"
            v-model="name"
            clearable filterable 
          >
            <option disabled selected value >请选择交换机</option>
            <option  v-for="item in switchList"
               :key="item.id"
                :label="item.name"
                :value="item.id"
            >
              
            </option>
          </select>
        </div>
        <div class="flex m-t-2rem">
          <div class="label require">交换机柜:</div>
          <input
          <!-- <input
            class="value input"
            v-model="cabinetName"
            placeholder="请输入交换机柜名称"
            placeholder-class="value input"
          />
          /> -->
          <select
            class="value select"
            placeholder="请选择交换机柜"
            v-model="cabinetName"
            clearable filterable 
          >
            <option disabled selected value >请选择交换机柜</option>
            <option  v-for="item in cabinetList"
               :key="item.id"
                :label="item.name"
                :value="item.id"
            >
              
            </option>
          </select>
        </div>
        <div class="flex m-t-2rem">
          <div class="label require">网桥:</div>
@@ -67,7 +97,7 @@
          <select
            class="value select"
            placeholder="请选择厂区"
            disabled
            disabled clearable filterable
            v-model="selectcode"
          >
            <!-- @change="updateDeviceList" -->
@@ -112,12 +142,13 @@
</template>

<script>
import { addDeviceInfo, getDeviceList } from "@/api/area";
import { addDeviceInfo, getDeviceList,getSwitchBord,getAllSwitch } from "@/api/area";
export default {
  props: {
    code: "",
    areas: [],
    init_device_list: [],
    cur_item: {},
  },
  data() {
    return {
@@ -138,6 +169,8 @@
      open: false,

      // selectswitchindex: "",
      cabinetList:[],
      switchList:[],
    };
  },
  mounted() {
@@ -145,8 +178,31 @@
      this.selectcode = this.code;
      this.device_list = this.init_device_list || [];
    }

    // 获取所有交换机柜
    this.getSwitchBord()

    // 获取所有交换柜
    this.getAllSwitch()
    
    
  },
  methods: {

    getSwitchBord(){
        getSwitchBord().then((res) => {
        this.cabinetList = res.cabinetList || [];
      });
    },

    getAllSwitch(){
      getAllSwitch().then((res) => {
        this.switchList = res.cabinetList || [];
      });
    },

    

    async updateDeviceList() {
      if (this.selectcode) {
        this.$modal.loading("加载中");
@@ -194,6 +250,10 @@
          cabinetName: this.cabinetName || "",
          areaCode: this.selectcode,
          switchName: this.name,
          
          areaRow:this.cur_item?.row,
          areaCell:this.cur_item?.cell,

        },
      };
      const re = await addDeviceInfo(dto);
@@ -245,6 +305,7 @@
      }
    },
  },
  
};
</script>
<style lang="scss">