paper-library-client/src/modules/login/views/Setting.vue

<template>
  <div class="setting login-body">
    <div class="login-form">
      <h2 class="login-form-title">服务器IP地址设置</h2>
      <el-form ref="setForm" :model="setModel" :rules="setRules" inline>
        <el-form-item prop="ipCont1">
          <el-input-number
            style="width:60px;"
            v-model="setModel.ipCont1"
            :min="0"
            :max="255"
            :step="1"
            step-strictly
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <span class="ip-split">—</span>
        <el-form-item prop="ipCont2">
          <el-input-number
            style="width:60px;"
            v-model="setModel.ipCont2"
            :min="0"
            :max="255"
            :step="1"
            step-strictly
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <span class="ip-split">—</span>
        <el-form-item prop="ipCont3">
          <el-input-number
            style="width:60px;"
            v-model="setModel.ipCont3"
            :min="0"
            :max="255"
            :step="1"
            step-strictly
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <span class="ip-split">—</span>
        <el-form-item prop="ipCont4">
          <el-input-number
            style="width:60px;"
            v-model="setModel.ipCont4"
            :min="0"
            :max="255"
            :step="1"
            step-strictly
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <span class="ip-split">:</span>
        <el-form-item prop="port">
          <el-input-number
            style="width:60px;"
            v-model="setModel.port"
            :min="1"
            :max="1000000"
            :step="1"
            step-strictly
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button
            type="primary"
            :disabled="loading"
            size="large"
            @click="submit"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import db from "@/plugins/db";

export default {
  name: "setting",
  data() {
    const ipValidator = [
      {
        required: true,
        message: " ",
        trigger: "change"
      }
    ];
    return {
      setModel: {
        ipCont1: undefined,
        ipCont2: undefined,
        ipCont3: undefined,
        ipCont4: undefined,
        port: undefined
      },
      setRules: {
        ipCont1: [...ipValidator],
        ipCont2: [...ipValidator],
        ipCont3: [...ipValidator],
        ipCont4: [...ipValidator],
        port: [...ipValidator]
      },
      loading: false
    };
  },
  computed: {
    domainEdited() {
      return `http://${this.setModel.ipCont1}.${this.setModel.ipCont2}.${this.setModel.ipCont3}.${this.setModel.ipCont4}:${this.setModel.port}`;
    },
    domain() {
      return this.$store.state.domain;
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      if (!this.domain) {
        this.setModel = {
          ipCont1: undefined,
          ipCont2: undefined,
          ipCont3: undefined,
          ipCont4: undefined,
          port: undefined
        };
        return;
      }

      const [ipCont1, ipCont2, ipCont3, ipCont4, port] = this.domain
        .replace("http://", "")
        .split(/(\.|:)/);
      this.setModel = {
        ipCont1: Number(ipCont1),
        ipCont2: Number(ipCont2),
        ipCont3: Number(ipCont3),
        ipCont4: Number(ipCont4),
        port: Number(port)
      };
    },
    async submit() {
      if (this.loading) return;
      this.loading = true;

      const valid = await this.$refs.setForm.validate().catch(() => {});
      if (!valid) {
        this.loading = false;
        return;
      }

      this.$store.commit("setDomain", this.domainEdited);
      const res = await db.setDict("domain", this.domainEdited).catch(() => {});
      if (res) {
        this.$ls.set("domain", this.domainEdited);
        this.$store.commit("setDomain", this.domainEdited);
        this.$message.success("设置成功！");
        this.$router.go(-1);
      } else {
        this.$message.error("保存失败！");
      }
    }
  }
};
</script>