stmms-proxy/src/features/Login/Login.vue

<template>
  <div class="login-flex">
    <div class="login">
      <div class="logo"><img src="img/logo_blue.png" /></div>
      <a-form @submit="loginAction">
        <div class="form-item">
          <!-- <a-select
            style="width: 100%; text-align: left; padding: 0"
            mode="SECRET_COMBOBOX_MODE_DO_NOT_USE"
            v-model:value="server"
            :options="servers"
            placeholder="请选择服务地址(如 http://192.168.10.225:8000)"
          >
          </a-select> -->
          <a-select
            style="width: 100%; text-align: left"
            v-model:value="server"
            :options="servers"
            placeholder="请选择服务地址"
          >
          </a-select>
        </div>
        <div class="form-item">
          <a-input
            style="width: 100%"
            v-model:value="loginName"
            id="loginName-input"
            type="text"
            placeholder="请输入账号"
          />
        </div>
        <div class="form-item">
          <a-input
            style="width: 100%"
            v-model:value="password"
            id="password-input"
            type="password"
            placeholder="请输入密码"
            @press-enter="loginAction"
          />
        </div>
        <div class="form-item">
          <a href="##" id="login-button" @click="loginAction">登录</a>
        </div>
      </a-form>
    </div>
    <div class="ft">
      Copyright © 2011-2021 www.qmth.com.cn, All Rights Reserved
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { store } from "@/store";
import { login } from "@/api/api";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { Store } from "@/types";
const router = useRouter();

store.pageInputs = {} as Store["pageInputs"];

let server = ref("");
const servers = store.config.servers.map((v) => {
  return { label: v.name, value: v.host };
});
// const servers = ref([
//   { label: "线上环境", value: "https://www.markingcloud.com" },
// ]);

let loginName = ref("");
let password = ref("");

// FIXME: restore original state
// onMounted(() => {
//   window.localStorage.clear();
// });
// server.value = "http://192.168.10.224:80";
// loginName.value = "admin-test";
// password.value = "123456";
// server.value = "https://www.markingcloud.com";
// loginName.value = "admin-wdsx";
// password.value = "wdsx!@#";
// server.value = "http://192.168.10.221:80";
// loginName.value = "admin-test";
// password.value = "123456";

// const loginAction = () => {
//   if (!server.value.startsWith("http")) {
//     server.value = `http://${server.value}`;
//   }
//   let curServer = servers.value.find((v: any) => v.host === server.value) || {
//     host: server.value,
//     name: "自定义环境",
//   };
//   Object.assign(store.env, {
//     server:
//       servers.value.find((v: any) => v.host === server.value) || curServer,
//     loginName: loginName.value,
//     password: password.value,
//   });
//   if (!server.value) {
//     message.info("请选择服务地址");
//     return;
//   }
//   if (!loginName.value) {
//     message.info("请输入账号");
//     return;
//   }
//   if (!password.value) {
//     message.info("请输入密码");
//     return;
//   }
//   login()
//     .then((res) => {
//       Object.assign(store.env.user, res.data);
//       router.push("/exam-list");
//     })
//     .catch((err) => {
//       if (!err.toString().includes("404")) {
//         message.error("登录失败，用户名或密码错误");
//       }
//     });
// };

const loginAction = () => {
  Object.assign(store.env, {
    server: store.config.servers.find((v) => v.host === server.value),
    loginName: loginName.value,
    password: password.value,
  });
  if (!server.value) {
    message.info("请选择服务地址");
    return;
  }
  if (!loginName.value) {
    message.info("请输入账号");
    return;
  }
  if (!password.value) {
    message.info("请输入密码");
    return;
  }
  login()
    .then((res) => {
      Object.assign(store.env.user, res.data);
      router.push("/exam-list");
    })
    .catch((err) => {
      console.log(err);
      message.error("登陆失败，用户名或密码错误");
    });
};
</script>