暂存

ZZJ

2021-11-19 ddb4dda6ed6069253afb8b1e05fe52b56c681f35

 src/pages/settings/components/MqttGateway.vue

@@ -6,7 +6,8 @@
      <el-form-item class="form-item">
             <switchBar
            :barName="`MOTT网关`"
            :value="accessible"
          :value="mqttForm.enable"
          @switchChange="switchChange('enable', arguments)"
          ></switchBar>
      </el-form-item>

@@ -24,10 +25,11 @@
        <el-form-item class="form-item">
              <div class="item-title">端口号</div>
              <div class="inputContain">
              <ipInput
                  :ip="mqttForm.port"
                  @on-blur="mqttForm.port = arguments[0]"
              ></ipInput>
            <el-input
              v-model="mqttForm.port"
              placeholder="请输入用户名"
              size="small"
            ></el-input>
              </div>
        </el-form-item>
      </div>
@@ -37,7 +39,7 @@
              <div class="item-title">名称</div>
              <div class="inputContain">
                <el-input
                  v-model="mqttForm.name"
              v-model="mqttForm.username"
                  placeholder="请输入用户名"
                  size="small"
                ></el-input>
@@ -61,42 +63,58 @@
      <div class="block">
        <el-form-item class="form-item">
          <switchBar
            :barName="`MOTT网关`"
            :value="accessible"
            :barName="`匿名用户`"
            :value="mqttForm.anonymousEnable"
            @switchChange="switchChange('anonymousEnable', arguments)"
          ></switchBar>
        </el-form-item>
      </div>
    </el-form>

    <div class="ok">保存</div>
    <div class="ok" @click="saveList">保存</div>
  </div>
</template>

<script>
import ipInput from "../components/IPInput";
import switchBar from "../components/switchBar";
import { getMqtt, saveMqtt } from "@/api/system";
export default {
  name:"mqttGateway",
  created() {
    this.getList();
  },
  data(){
    return {
      accessible: false,
      mqttForm:{
        ip:"",
        port:"",
        name:"",
        password:""
      }
    }
        enable: "",
        anonymousEnable: "",
      },
    };
  },
  components :{
        switchBar,
        ipInput
    }
}
    ipInput,
  },
  methods: {
    async getList() {
      const res = await getMqtt();
      this.mqttForm = { ...res.data };
    },
    async saveList() {
      const res = await saveMqtt(this.mqttForm);
      console.log(res);
    },
    switchChange(tar, arr) {
      this.mqttForm[tar] = arr[0];
    },
  },
};
</script>

<style scoped lang="scss">
@import '../asset/common.scss';
@import "../asset/common.scss";
  .mqtt-gateway {
      display: flex;
      flex-direction: column;