ocr-web/src/views/login/index1.vue

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import captcha from './captcha.vue'
import { PageEnum } from '@/enums/pageEnum'
import { useUserStore } from '@/store/modules/user'
import { ResultEnum } from '@/enums/httpEnum'
import { getFilter, setFilter } from '@/api/home/filter'
import { getConfig } from '@/api/system/user'
import { asideMap } from '@/config/aside'

interface FormState {
  enterprisecode?: string
  username: string
  password: string
  captcha: string
}

const formRef = ref()
const message = useMessage()
const loading = ref(false)
const autoLogin = ref(true)
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

const formInline: FormState = reactive({
  enterprisecode: '三方系统标识8',
  username: '13311111111',
  password: '123456',
  captcha: '',
})

const rules = {
  enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
  username: { required: true, message: '请输入用户名', trigger: 'blur' },
  password: { required: true, message: '请输入密码', trigger: 'blur' },
  captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
}

function handleSubmit(e) {
  e.preventDefault()
  formRef.value.validate(async (errors) => {
    if (!errors) {
      const { username, password, enterprisecode, captcha } = formInline
      message.loading('登录中...')
      loading.value = true

      const params = {
        logincode: captcha,
        username,
        password,
        codetoken: userStore.getCapToken,
        agentcode: enterprisecode,
      }

      try {
        const { code, message: msg } = await userStore.login(params)
        await userStore.getInformation()
        const response = await getFilter()

        // 添加个默认显示配置
        if (response.data === null) {
          const systemConfig = await getConfig()
          const onList: string[] = []
          Object.keys(systemConfig.data).forEach((key) => {
            // 系统配置开启且个人配置开启
            if (key.startsWith('iz') && systemConfig.data[key] === 'Y' && asideMap[key]?.isDefaultFilter)
              onList.push(key)
          })
          await setFilter({ searchcount: onList.join(',') })
        }

        message.destroyAll()
        if (code === ResultEnum.SUCCESS) {
          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
          message.success('登录成功，即将进入系统')
          if (route.name === LOGIN_NAME)
            router.replace('/')
          else router.replace(toPath)
        }
        else {
          message.info(msg || '登录失败')
        }
      }
      finally {
        loading.value = false
      }
    }
    else {
      message.error('请填写完整信息，并且进行验证码校验')
    }
  })
}
</script>

<template>
  <div class="view-account">
    <div class="view-account-container">
      <div class="view-account-form">
        <n-tabs>
          <n-tab-pane name="pwdsignin" tab="密码登录">
            <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
              <n-form-item path="enterprisecode">
                <n-input v-model:value="formInline.enterprisecode" placeholder="请输入企业编码">
                  <template #prefix>
                    <svg-icon size="20" name="enterprise" />
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item path="username">
                <n-input v-model:value="formInline.username" placeholder="请输入用户名">
                  <template #prefix>
                    <svg-icon size="20" name="account" />
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item path="password">
                <n-input v-model:value="formInline.password" type="password" show-password-on="click" placeholder="请输入密码">
                  <template #prefix>
                    <svg-icon size="20" name="password" />
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item path="captcha">
                <n-grid x-gap="12" :cols="4">
                  <n-gi span="3">
                    <n-input v-model:value="formInline.captcha" placeholder="请输入验证码">
                      <template #prefix>
                        <svg-icon size="20" name="captcha" />
                      </template>
                    </n-input>
                  </n-gi>
                  <n-gi>
                    <captcha />
                  </n-gi>
                </n-grid>
              </n-form-item>
              <n-form-item>
                <n-button type="primary" size="large" :loading="loading" block @click="handleSubmit">
                  登录
                </n-button>
              </n-form-item>
              <n-form-item class="default-color">
                <div class="w-full flex justify-between">
                  <div class="flex-initial">
                    <n-checkbox v-model:checked="autoLogin">
                      记住账号
                    </n-checkbox>
                  </div>
                  <div class="flex-initial order-last">
                    <a href="javascript:">忘记密码</a>
                  </div>
                </div>
              </n-form-item>
            </n-form>
          </n-tab-pane>
          <n-tab-pane name="msgsignin" tab="短信登陆">
            <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
              <n-form-item path="username">
                <n-input v-model:value="formInline.username" placeholder="请输入用户名">
                  <template #prefix>
                    <svg-icon size="20" name="account" />
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item path="password">
                <n-input v-model:value="formInline.password" type="password" placeholder="请输入密码">
                  <template #prefix>
                    <svg-icon size="20" name="password" />
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item>
                <n-button type="primary" size="large" :loading="loading" block @click="handleSubmit">
                  登录
                </n-button>
              </n-form-item>
              <n-form-item class="default-color">
                <div class="w-full flex justify-between">
                  <div class="flex-initial">
                    <n-checkbox v-model:checked="autoLogin">
                      记住账号
                    </n-checkbox>
                  </div>
                  <div class="flex-initial order-last">
                    <a href="javascript:">忘记密码</a>
                  </div>
                </div>
              </n-form-item>
            </n-form>
          </n-tab-pane>
        </n-tabs>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.view-account {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;

  &-container {
    flex: 1;
    max-width: 384px;
    min-width: 420px;
    margin: 0 auto;
    padding-top: 230px;
  }

  &-form {
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid #ffffff;
    border-radius: 6px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(9px);
    padding: 50px 30px;
  }

  &-other {
    width: 100%;
  }

  .default-color {
    color: #515a6e;

    .ant-checkbox-wrapper {
      color: #515a6e;
    }
  }
}

.view-account {
  background-image: url('../../assets/images/login.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.page-account-container {
  padding: 32px 0 24px 0;
}

::v-deep(.n-input .n-input__suffix) {
  display: none;
}
</style>