cloudroam
2024-11-26 c7d180dfdd4c2910c771e9a61b0746a41179a414
src/components/equ-add-form.vue
@@ -10,21 +10,53 @@
      <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
            :disabled="nameDisabled"
          >
            <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
            :disabled="cabinetNameDisabled"
          >
            <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,8 +99,9 @@
          <select
            class="value select"
            placeholder="请选择厂区"
            disabled
            disabled clearable filterable
            v-model="selectcode"
            :disabled="areaCodeDisabled"
          >
            <!-- @change="updateDeviceList" -->
            <option disabled selected value>- 请选择厂区</option>
@@ -112,12 +145,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 +172,11 @@
      open: false,
      // selectswitchindex: "",
      cabinetList:[],
      switchList:[],
      nameDisabled: false,
      cabinetNameDisabled: false,
      areaCodeDisabled: false,
    };
  },
  mounted() {
@@ -145,8 +184,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("加载中");
@@ -160,6 +222,10 @@
    },
    async submit() {
      //todo 提交设备
      if (!this.isValidIP(this.ipAddress)) {
        this.$message.warning("请输入有效的IP地址");
        return;
      }
      if (!this.name || !this.selectcode || !this.cabinetName || !this.networkPort) {
        this.$message.warning("数据未填写完整");
        return;
@@ -194,6 +260,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);
@@ -202,6 +272,7 @@
        this.$message.success("创建成功");
        this.open = false;
        this.$emit("update", {});
        this.$emit("update-server-info", this.code,this.name);
      }
    },
    openform(locInfo = {}) {
@@ -220,7 +291,8 @@
        this.open = !this.open;
      }
    },
    openConfigform(code, cabinetName) {
    openConfigform(code, switchName,cabinetName,config) {
      console.log('openConfigform',code,switchName,cabinetName);
      if (this.open) {
        this.open = !this.open;
      } else {
@@ -228,14 +300,23 @@
        this.locInfo =  {};
        this.selectcode = code;
        console.log("this.locInfo", this.locInfo);
        this.name = cabinetName;
        this.name = switchName;
        this.cabinetName = cabinetName;
        this.port = this.locInfo.port || "";
        this.networkPort = this.locInfo.name || "";
        this.macAddress = this.locInfo.macAddress || "";
        this.ipAddress = this.locInfo.ipAddress || "";
        this.open = !this.open;
      }
      if (config === 1) {
        this.nameDisabled = true; // 将nameDisabled设置为禁用
        this.cabinetNameDisabled = true; // 将cabinetName设置为禁用
        this.areaCodeDisabled = true; // 将areaCode设置为不禁用
      }
    },
    isValidIP(ip) {
      const regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
      return regex.test(ip);
    },
  },
  watch: {
@@ -245,6 +326,7 @@
      }
    },
  },
};
</script>
<style lang="scss">