Cold_offline_web/src/login/index.vue

<template>
  <div
    class="absolute top-0 right-0 bottom-0 left-0 bg-[#2d3a4b] flex justify-center items-center overflow-auto"
  >
    <n-config-provider :theme="darkTheme">
      <n-card class="w-[500px] bg-transparent" :bordered="false">
        <template #header>
          <h2 class="text-center">冷链验证报告生成系统</h2>
        </template>
        <n-form
          ref="formRef"
          :rules="rules"
          :model="formValue"
          size="large"
          label-placement="left"
        >
          <n-form-item path="username">
            <n-input v-model:value="formValue.username" :maxlength="8">
              <template #prefix>
                <n-icon :component="UserOutlined" />
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="password">
            <n-input
              v-model:value="formValue.password"
              type="password"
              show-password-on="click"
              :maxlength="20"
            >
              <template #prefix>
                <n-icon :component="LockOutlined" />
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="role">
            <n-select
              v-model:value="formValue.role"
              :options="generalOptions"
            />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" block @click="handleLogin"
              ><span class="text-white">立即登录</span></n-button
            >
          </n-form-item>
        </n-form>
      </n-card>
    </n-config-provider>
    
  </div>
</template>

<script setup>
import { UserOutlined, LockOutlined } from '@vicons/antd';
import { login } from '@/api';
import md5 from 'md5';
import { setToken } from '@/utils/storage/sessionToken';
import { darkTheme } from 'naive-ui';
import { openWay } from "@/constant/openWay";


const formRef = ref(null);

const router = useRouter();

const message = useMessage();

const notification = useNotification();

//先判断本地能否走通
const openWayApi = async ()=>{
  const resIt = await openWay({})
  if(resIt.data.Code==200){//本地能走通用本地
    localStorage.setItem('ping',true)
  }else{//本地不能走通用线上
    localStorage.setItem('ping',false)
  }
  console.log('11',resIt)
}



// 验证表项的规则
const rules = {
  username: { required: true, message: '不能为空', trigger: 'blur' },
  password: { required: true, message: '不能为空', trigger: 'blur' },
  role: { required: true, message: '不能为空', trigger: ['blur', 'change'] },
};

// 登录表单
const formValue = reactive({
  username: '',
  password: '',
  role: '管理员',
});

// 角色列表
const generalOptions = ['管理员', '用户'].map((v) => ({
  label: v,
  value: v,
}));

// 登录
const handleLogin = async () => {
  formRef.value.validate(async (errors) => {
    if (!errors) {
      const { data: res } = await login(
        {
          bzd_username: formValue.username,
          bzd_password: md5(formValue.password),
        },
        formValue.role
      );
      if (res.Code === 200) {
        openWayApi()
        router.replace('/');
        localStorage.setItem('keepAlive',JSON.stringify({T_name:'',page:1}))//需要调用的页码
        notification.success({
          content: `你好，${formValue.username}`,
          title: '登录成功',
          duration: 2500,
          keepAliveOnHover: true,
        });
        setToken(res.Data);
        window.sessionStorage.setItem('username', formValue.username);
      }
    } else {
      message.error('验证失败');
    }
  });
};
</script>

<style lang="scss" scoped></style>