feat(mes): 赋码管理绑定托盘支持未录入批次的袋码

liu

3 天以前 ee7ac8df8bce38add1f75baf876b49de94b9e00a

 src/views/_core/authentication/login.vue

@@ -1,31 +1,25 @@
<script lang="ts" setup>
import type { VbenFormSchema } from '../../../packages/effects/common-ui/src';
import type { VbenFormSchema } from '@vben/common-ui';

import type { AuthApi } from '#/api/core/auth';

import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { computed, ref } from 'vue';

import { AuthenticationLogin, Verification, z } from '../../../packages/effects/common-ui/src';
import { isCaptchaEnable, isTenantEnable } from '../../../packages/effects/hooks/src';
import { $t } from '../../../packages/locales/src';
import { useAccessStore } from '../../../packages/stores/src';
import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
import { isCaptchaEnable } from '@vben/hooks';
import { $t } from '@vben/locales';

import {
  checkCaptcha,
  getCaptcha,
  getTenantByWebsite,
  getTenantSimpleList,
  socialAuthRedirect,
} from '#/api/core/auth';
import { checkCaptcha, getCaptcha } from '#/api/core/auth';
import { useAuthStore } from '#/store';
import { selectTerminal, terminalType } from '#/mobile/terminal';
import { errorText } from '#/mobile/api';
import { useRoute } from 'vue-router';

defineOptions({ name: 'Login' });

const { query } = useRoute();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const tenantEnable = isTenantEnable();
const route = useRoute();
const loginError = ref(route.query.loadError ? '菜单加载失败，请重新登录后重试。' : '');
const captchaEnable = isCaptchaEnable();

const loginRef = ref();
@@ -33,117 +27,37 @@

const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'

/** 获取租户列表，并默认选中 */
const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
async function fetchTenantList() {
  if (!tenantEnable) {
    return;
  }
  try {
    // 获取租户列表、域名对应租户
    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
    tenantList.value = await getTenantSimpleList();

    // 选中租户：域名 > store 中的租户 > 首个租户
    let tenantId: null | number = null;
    const websiteTenant = await websiteTenantPromise;
    if (websiteTenant?.id) {
      tenantId = websiteTenant.id;
    }
    // 如果没有从域名获取到租户，尝试从 store 中获取
    if (!tenantId && accessStore.tenantId) {
      tenantId = accessStore.tenantId;
    }
    // 如果还是没有租户，使用列表中的第一个
    if (!tenantId && tenantList.value?.[0]?.id) {
      tenantId = tenantList.value[0].id;
    }

    // 设置选中的租户编号
    accessStore.setTenantId(tenantId);
    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId?.toString());
  } catch (error) {
    console.error('获取租户列表失败:', error);
  }
}

/** 处理登录 */
async function handleLogin(values: any) {
  // 如果开启验证码，则先验证验证码
async function handleLogin(values: AuthApi.LoginParams) {
  if (captchaEnable) {
    verifyRef.value.show();
    return;
  }
  // 无验证码，直接登录
  await authStore.authLogin('username', values);
  loginError.value = '';
  try { await authStore.authLogin('username', values); }
  catch (e) { loginError.value = errorText(e); }
}

/** 验证码通过，执行登录 */
async function handleVerifySuccess({ captchaVerification }: any) {
  try {
    await authStore.authLogin('username', {
      ...(await loginRef.value.getFormApi().getValues()),
      captchaVerification,
    });
  } catch (error) {
    console.error('Error in handleLogin:', error);
  }
async function handleVerifySuccess({
  captchaVerification,
}: {
  captchaVerification: string;
}) {
  loginError.value = '';
  try { await authStore.authLogin('username', {
    ...(await loginRef.value.getFormApi().getValues()),
    captchaVerification,
  }); } catch (e) { loginError.value = errorText(e); }
}

/** 处理第三方登录 */
const redirect = query?.redirect;
async function handleThirdLogin(type: number) {
  if (type <= 0) {
    return;
  }
  try {
    // 计算 redirectUri
    // tricky: type、redirect 需要先 encode 一次，否则钉钉回调会丢失。配合 social-login.vue#getUrlValue() 使用
    const redirectUri = `${
      location.origin
    }/auth/social-login?${encodeURIComponent(
      `type=${type}&redirect=${redirect || '/'}`,
    )}`;

    // 进行跳转
    window.location.href = await socialAuthRedirect(type, redirectUri);
  } catch (error) {
    console.error('第三方登录处理失败:', error);
  }
}

/** 组件挂载时获取租户信息 */
onMounted(() => {
  fetchTenantList();
});

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenSelect',
      componentProps: {
        options: tenantList.value.map((item) => ({
          label: item.name,
          value: item.id.toString(),
        })),
        placeholder: $t('authentication.tenantTip'),
      },
      fieldName: 'tenantId',
      label: $t('authentication.tenant'),
      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
      dependencies: {
        triggerFields: ['tenantId'],
        if: tenantEnable,
        trigger(values) {
          if (values.tenantId) {
            accessStore.setTenantId(Number(values.tenantId));
          }
        },
      },
    },
    {
      component: 'VbenInput',
      componentProps: {
        'aria-label': $t('authentication.username'),
        autocomplete: 'username',
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
@@ -156,6 +70,8 @@
    {
      component: 'VbenInputPassword',
      componentProps: {
        'aria-label': $t('authentication.password'),
        autocomplete: 'current-password',
        placeholder: $t('authentication.passwordTip'),
      },
      fieldName: 'password',
@@ -171,13 +87,37 @@

<template>
  <div>
    <fieldset class="terminal-selector">
      <legend>选择使用端</legend>
      <div class="terminal-options">
        <label :class="{ selected: terminalType === 'mobile' }">
          <input type="radio" name="terminal" value="mobile" :checked="terminalType === 'mobile'" :disabled="authStore.loginLoading" @change="selectTerminal('mobile')" />
          <span>移动端</span>
        </label>
        <label :class="{ selected: terminalType === 'pc' }">
          <input type="radio" name="terminal" value="pc" :checked="terminalType === 'pc'" :disabled="authStore.loginLoading" @change="selectTerminal('pc')" />
          <span>PC 端</span>
        </label>
      </div>
      <p>已按屏幕大小选择，可手动切换</p>
    </fieldset>
    <AuthenticationLogin
      ref="loginRef"
      :form-schema="formSchema"
      :loading="authStore.loginLoading"
      :show-field-labels="terminalType === 'mobile'"
      :submit-button-text="terminalType === 'mobile' ? '登录移动端' : '登录 PC 端'"
      title="欢迎回来"
      :sub-title="terminalType === 'mobile' ? '使用已有账号登录现场作业' : '登录种植业数字化平台，开启智慧种植'"
      :show-code-login="false"
      :show-qrcode-login="false"
      :show-third-party-login="false"
      :show-register="false"
      :show-forget-password="false"
      :show-doc-link="false"
      @submit="handleLogin"
      @third-login="handleThirdLogin"
    />
    <p v-if="loginError" class="login-error" role="alert">{{loginError}}</p>
    <Verification
      ref="verifyRef"
      v-if="captchaEnable"
@@ -190,3 +130,14 @@
    />
  </div>
</template>

<style scoped>
.terminal-selector { border: 0; margin: 0 0 24px; padding: 0; }
.login-error { padding:12px;color:#b91c1c;background:#fef2f2;border-radius:8px; }
.terminal-selector legend { font-size: 16px; margin-bottom: 8px; }
.terminal-options { display: flex; gap: 12px; }
.terminal-options label { display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:52px;border:1px solid #64748b;border-radius:8px;cursor:pointer; }
.terminal-options label.selected { border-color:#0369a1;color:#0369a1;background:#f0f9ff; }
.terminal-options label:focus-within { outline:2px solid #0369a1;outline-offset:2px; }
.terminal-selector p { margin-top:8px;color:#475569;font-size:14px; }
</style>