优化称重页面

This commit is contained in:
zc
2026-03-03 17:59:37 +08:00
parent cbd73d4312
commit 85dd8102a3
8 changed files with 235 additions and 112 deletions

View File

@@ -25,6 +25,11 @@ export function socialLogin(req: any) {
return http.post<T.LoginResp>(`${BASE_URL}/login`, req)
}
/** @desc 三方账号登录 */
export function cardLogin(req: any) {
return http.post<T.LoginResp>(`${BASE_URL}/login`, req)
}
/** @desc 三方账号登录授权 */
export function socialAuth(source: string) {
return http.get<T.SocialAuthAuthorizeResp>(`${BASE_URL}/${source}`)

View File

@@ -42,13 +42,14 @@ export interface RouteItem {
}
/** 认证类型 */
export type AuthType = 'ACCOUNT' | 'PHONE' | 'EMAIL' | 'SOCIAL'
export type AuthType = 'ACCOUNT' | 'PHONE' | 'EMAIL' | 'SOCIAL' | 'CARD'
export const AuthTypeConstants = {
ACCOUNT: 'ACCOUNT',
PHONE: 'PHONE',
EMAIL: 'EMAIL',
SOCIAL: 'SOCIAL',
CARD: 'CARD',
} as const
/** 基础认证请求接口 */
@@ -77,6 +78,16 @@ export interface EmailLoginReq extends AuthReq {
captcha: string
}
/** 刷卡登录请求参数 */
export interface CardLoginReq extends AuthReq {
cardNumber: string
}
/** 邮箱登录请求参数 */
export interface CardLoginReq extends AuthReq {
card: string
}
/** 登录响应类型 */
export interface LoginResp {
token: string
@@ -85,4 +96,4 @@ export interface LoginResp {
/** 第三方登录授权类型 */
export interface SocialAuthAuthorizeResp {
authorizeUrl: string
}
}

View File

@@ -4,21 +4,21 @@ const BASE_URL = '/weighManage/material'
export interface WeighManageResp {
id: string
materialCode: string
encoding: string
materialName: string
materialSpec: string
weight: number
imageUrl: string
unitWeight: number
photoUrl: string
matchResult: string
}
export interface WeighManageQuery {
materialCode: string
encoding: string
}
/** @desc 查询物料信息 */
export function getMaterialDetail(query: WeighManageQuery) {
return http.get<WeighManageResp>(`${BASE_URL}/detail`, query)
export function getMaterialDetail(code: string) {
return http.get<WeighManageResp>(`/admin/materialInfo/code/${code}`)
}
/** @desc 新增人员管理 */

View File

@@ -4,10 +4,12 @@ import { resetRouter } from '@/router'
import {
type AccountLoginReq,
AuthTypeConstants,
type CardLoginReq,
type EmailLoginReq,
type PhoneLoginReq,
type UserInfo,
accountLogin as accountLoginApi,
cardLogin as cardLoginApi,
emailLogin as emailLoginApi,
getUserInfo as getUserInfoApi,
logout as logoutApi,
@@ -70,6 +72,13 @@ const storeSetup = () => {
token.value = res.data.token
}
// 刷卡登录
const cardLogin = async (req: CardLoginReq) => {
const res = await cardLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.CARD })
setToken(res.data.token)
token.value = res.data.token
}
// 三方账号登录
const socialLogin = async (source: string, req: any) => {
const res = await socialLoginApi({ ...req, source, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.SOCIAL })
@@ -120,6 +129,7 @@ const storeSetup = () => {
accountLogin,
emailLogin,
phoneLogin,
cardLogin,
socialLogin,
logout,
logoutCallBack,
@@ -130,4 +140,4 @@ const storeSetup = () => {
export const useUserStore = defineStore('user', storeSetup, {
persist: { paths: ['token', 'roles', 'permissions', 'pwdExpiredShow'], storage: localStorage },
})
})

View File

@@ -13,6 +13,7 @@ declare module 'vue' {
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
AButton: typeof import('@arco-design/web-vue')['Button']
ACard: typeof import('@arco-design/web-vue')['Card']
ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
ACol: typeof import('@arco-design/web-vue')['Col']
AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
@@ -25,28 +26,48 @@ declare module 'vue' {
AEmpty: typeof import('@arco-design/web-vue')['Empty']
AForm: typeof import('@arco-design/web-vue')['Form']
AFormItem: typeof import('@arco-design/web-vue')['FormItem']
AGrid: typeof import('@arco-design/web-vue')['Grid']
AGridItem: typeof import('@arco-design/web-vue')['GridItem']
AIcon: typeof import('@arco-design/web-vue')['Icon']
AImage: typeof import('@arco-design/web-vue')['Image']
AInput: typeof import('@arco-design/web-vue')['Input']
AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
ALayout: typeof import('@arco-design/web-vue')['Layout']
ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
ALink: typeof import('@arco-design/web-vue')['Link']
AMenu: typeof import('@arco-design/web-vue')['Menu']
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
AModal: typeof import('@arco-design/web-vue')['Modal']
AOption: typeof import('@arco-design/web-vue')['Option']
AOverflowList: typeof import('@arco-design/web-vue')['OverflowList']
APagination: typeof import('@arco-design/web-vue')['Pagination']
APopconfirm: typeof import('@arco-design/web-vue')['Popconfirm']
APopover: typeof import('@arco-design/web-vue')['Popover']
AProgress: typeof import('@arco-design/web-vue')['Progress']
ARadio: typeof import('@arco-design/web-vue')['Radio']
ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
ARangePicker: typeof import('@arco-design/web-vue')['RangePicker']
ARow: typeof import('@arco-design/web-vue')['Row']
AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
ASelect: typeof import('@arco-design/web-vue')['Select']
ASpace: typeof import('@arco-design/web-vue')['Space']
AStatistic: typeof import('@arco-design/web-vue')['Statistic']
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
ASwitch: typeof import('@arco-design/web-vue')['Switch']
ATable: typeof import('@arco-design/web-vue')['Table']
ATabPane: typeof import('@arco-design/web-vue')['TabPane']
ATabs: typeof import('@arco-design/web-vue')['Tabs']
ATag: typeof import('@arco-design/web-vue')['Tag']
ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
ATree: typeof import('@arco-design/web-vue')['Tree']
ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect']
ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph']
ATypographyTitle: typeof import('@arco-design/web-vue')['TypographyTitle']
AUpload: typeof import('@arco-design/web-vue')['Upload']
Avatar: typeof import('./../components/Avatar/index.vue')['default']
AWatermark: typeof import('@arco-design/web-vue')['Watermark']
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']

View File

@@ -0,0 +1,118 @@
<template>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col-style="{ display: 'none' }"
:wrapper-col-style="{ flex: 1 }"
size="large"
@submit="handleLogin"
>
<a-form-item field="cardNumber" hide-label>
<a-input v-model="form.cardNumber" placeholder="请刷卡" allow-clear @keyup.enter="handleLogin" />
</a-form-item>
<a-form-item>
<a-space direction="vertical" fill class="w-full">
<a-button type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
</a-space>
</a-form-item>
</a-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { type FormInstance, Message } from '@arco-design/web-vue'
import { useTabsStore, useUserStore } from '@/stores'
const formRef = ref<FormInstance>()
const form = reactive({
cardNumber: '',
})
const rules: FormInstance['rules'] = {
cardNumber: [
{ required: true, message: '请刷卡或输入卡号' },
],
}
const userStore = useUserStore()
const tabsStore = useTabsStore()
const router = useRouter()
const loading = ref(false)
// 登录
const handleLogin = async () => {
const isInvalid = await formRef.value?.validate()
if (isInvalid) return
try {
loading.value = true
// 调用后端接口校验卡号
await userStore.cardLogin(form)
tabsStore.reset()
const { redirect, ...othersQuery } = router.currentRoute.value.query
await router.push({
path: (redirect as string) || '/',
query: {
...othersQuery,
},
})
Message.success('欢迎使用')
} catch (error) {
// 登录失败处理
} finally {
loading.value = false
}
}
// 监听键盘输入,实现自动识别卡号
onMounted(() => {
// 监听全局键盘事件,用于识别刷卡输入
document.addEventListener('keydown', (e) => {
// 刷卡器通常会快速输入卡号并以Enter键结束
if (e.key === 'Enter') {
// 遇到Enter键尝试登录
if (form.cardNumber.trim()) {
handleLogin()
}
} else if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
// 只捕获单个字符的按键,忽略控制键和功能键
form.cardNumber += e.key
} else if (e.key === 'Backspace') {
// 处理退格键
form.cardNumber = form.cardNumber.slice(0, -1)
}
})
})
</script>
<style scoped lang="scss">
.arco-input-wrapper,
:deep(.arco-select-view-single) {
height: 40px;
border-radius: 4px;
font-size: 13px;
}
.arco-input-wrapper.arco-input-error {
background-color: rgb(var(--danger-1));
border-color: rgb(var(--danger-3));
}
.arco-input-wrapper.arco-input-error:hover {
background-color: rgb(var(--danger-1));
border-color: rgb(var(--danger-6));
}
.arco-input-wrapper :deep(.arco-input) {
font-size: 13px;
color: var(--color-text-1);
}
.arco-input-wrapper:hover {
border-color: rgb(var(--arcoblue-6));
}
.btn {
height: 40px;
}
</style>

View File

@@ -15,28 +15,14 @@
<a-col :xs="24" :sm="12" :md="11">
<div class="login-right">
<h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
<EmailLogin v-if="isEmailLogin" />
<a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
<a-tab-pane key="1" title="账号登录">
<component :is="AccountLogin" v-if="activeTab === '1'" />
</a-tab-pane>
<a-tab-pane key="2" title="手机号登录">
<component :is="PhoneLogin" v-if="activeTab === '2'" />
</a-tab-pane>
<a-tab-pane key="2" title="刷卡">
<component :is="CardLogin" v-if="activeTab === '2'" />
</a-tab-pane>
</a-tabs>
<!-- <div class="login-right__oauth">
<a-divider orientation="center">其他登录方式</a-divider>
<div class="list">
<div v-if="isEmailLogin" class="mode item" @click="toggleLoginMode"><icon-user /> 账号/手机号登录</div>
<div v-else class="mode item" @click="toggleLoginMode"><icon-email /> 邮箱登录</div>
<a class="item" title="使用 Gitee 账号登录" @click="onOauth('gitee')">
<GiSvgIcon name="gitee" :size="24" />
</a>
<a class="item" title="使用 GitHub 账号登录" @click="onOauth('github')">
<GiSvgIcon name="github" :size="24" />
</a>
</div>
</div>-->
</div>
</a-col>
</a-row>
@@ -51,51 +37,13 @@
<Background />
</div>
<div v-else class="login h5">
<div class="login-logo">
<img v-if="logo" :src="logo" alt="logo" />
<img v-else src="/logo.svg" alt="logo" />
<span>{{ title }}</span>
</div>
<a-row align="stretch" class="login-box">
<a-col :xs="24" :sm="12" :md="11">
<div class="login-right">
<h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
<EmailLogin v-if="isEmailLogin" />
<a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
<a-tab-pane key="1" title="账号登录">
<component :is="AccountLogin" v-if="activeTab === '1'" />
</a-tab-pane>
<a-tab-pane key="2" title="手机号登录">
<component :is="PhoneLogin" v-if="activeTab === '2'" />
</a-tab-pane>
</a-tabs>
</div>
</a-col>
</a-row>
<div class="login-right__oauth">
<a-divider orientation="center">其他登录方式</a-divider>
<div class="list">
<div v-if="isEmailLogin" class="mode item" @click="toggleLoginMode"><icon-user /> 账号/手机号登录</div>
<div v-else class="mode item" @click="toggleLoginMode"><icon-email /> 邮箱登录</div>
<a class="item" title="使用 Gitee 账号登录" @click="onOauth('gitee')">
<GiSvgIcon name="gitee" :size="24" />
</a>
<a class="item" title="使用 GitHub 账号登录" @click="onOauth('github')">
<GiSvgIcon name="github" :size="24" />
</a>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import Background from './components/background/index.vue'
import AccountLogin from './components/account/index.vue'
import PhoneLogin from './components/phone/index.vue'
import EmailLogin from './components/email/index.vue'
import { socialAuth } from '@/apis/auth'
import CardLogin from './components/card/index.vue'
import { useAppStore } from '@/stores'
import { useDevice } from '@/hooks'
@@ -109,16 +57,6 @@ const logo = computed(() => appStore.getLogo())
const isEmailLogin = ref(false)
const activeTab = ref('1')
// 切换登录模式
const toggleLoginMode = () => {
isEmailLogin.value = !isEmailLogin.value
}
// 第三方登录授权
const onOauth = async (source: string) => {
const { data } = await socialAuth(source)
window.location.href = data.authorizeUrl
}
</script>
<style scoped lang="scss">
@@ -515,4 +453,4 @@ const onOauth = async (source: string) => {
}
}
}
</style>
</style>

View File

@@ -25,8 +25,8 @@
<div class="main-content">
<!-- 左侧表单 -->
<div class="left-section">
<a-image v-if="!formData.imageUrl" :src="formData.imageUrl"/>
<img v-else :src="formData.imageUrl" class="sample-image square-image" alt="样图">
<a-image v-if="!formData.photoUrl" :src="formData.photoUrl"/>
<img v-else :src="formData.photoUrl" class="sample-image square-image" alt="样图">
<a-form :model="formData" layout="vertical">
<div class="form-row">
@@ -44,12 +44,12 @@
<div class="form-row">
<div class="form-item">
<a-form-item label="物料编码">
<a-input v-model="formData.materialCode" placeholder="物料编码" disabled />
<a-input v-model="formData.encoding" placeholder="物料编码" disabled />
</a-form-item>
</div>
<div class="form-item">
<a-form-item label="重量">
<a-input v-model="formData.weight" placeholder="Kg" disabled />
<a-input v-model="formData.unitWeight" placeholder="Kg" disabled />
</a-form-item>
</div>
</div>
@@ -83,7 +83,7 @@
</div>
<div class="info-item">
<span class="label">物料编码:</span>
<span class="value">{{ formData.materialCode || '-' }}</span>
<span class="value">{{ formData.encoding || '-' }}</span>
</div>
</div>
@@ -123,19 +123,19 @@
<div class="form-row">
<div class="form-item">
<label>输入数量:</label>
<a-input v-model="inputQuantity" placeholder="请输入数量" />
<a-input v-model="inputQuantity" placeholder="请输入数量" @change="calculateWeight" />
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>计算重量:</label>
<a-input v-model="calculatedWeight" placeholder="-" disabled />
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>对应重量:</label>
<a-input v-model="inputWeight" placeholder="请输入重量" />
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>称重次数:</label>
<a-input v-model="weighingCount" placeholder="称重次数" disabled />
<a-input v-model="inputWeight" placeholder="-" disabled/>
</div>
</div>
<div class="image-placeholder large-image">实时画面</div>
@@ -185,7 +185,7 @@
</div>
<div class="info-item">
<span class="label">物料编码:</span>
<span class="value">{{ formData.materialCode }}</span>
<span class="value">{{ formData.encoding }}</span>
</div>
<div class="info-item">
<span class="label">物料规格:</span>
@@ -193,7 +193,7 @@
</div>
<div class="info-item">
<span class="label">重量:</span>
<span class="value">{{ formData.weight }}</span>
<span class="value">{{ formData.unitWeight }}</span>
</div>
</div>
<div class="completion-actions">
@@ -211,10 +211,11 @@
>
上一步
</a-button>
<a-button
v-if="activeStep < 3"
type="primary"
<a-button
v-if="activeStep < 3"
type="primary"
@click="handleNext"
:disabled="activeStep === 1 && formData.matchResult !== 'success'"
class="next-button"
>
{{ activeStep === 2 ? '完成' : '下一步' }}
@@ -226,8 +227,8 @@
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { Modal, Icon } from '@arco-design/web-vue'
import {getMaterialDetail, type WeighManageQuery} from "@/apis/weightManage/weightManage";
import { Modal } from '@arco-design/web-vue'
import { getMaterialDetail } from "@/apis/weightManage/weightManage";
// 当前步骤
const activeStep = ref(1)
@@ -235,17 +236,18 @@ const activeStep = ref(1)
// 表单数据
const formData = reactive({
inputMaterialCode: '', // 输入的物料编码
materialCode: '', // 物料编码
encoding: '', // 物料编码
materialName: '', // 物料名称
materialSpec: '', // 物料规格
weight: 0, // 重量
imageUrl: '', // 样图URL
unitWeight: 0, // 重量
photoUrl: '', // 样图URL
matchResult: '' // 比对结果
})
// 称重登记页面数据
const inputQuantity = ref('')
const inputWeight = ref('')
const calculatedWeight = ref('')
const weighingCount = ref(1)
// 称重列表数据
@@ -257,7 +259,7 @@ const weighingList = ref([
const taskId = computed(() => {
const date = new Date().toISOString().slice(0, 10).replace(/-/g, '')
const random = Math.floor(1000 + Math.random() * 9000)
return `${date}${formData.materialCode}${random}`
return `${date}${formData.encoding}${random}`
})
// 称重表格列
@@ -279,6 +281,12 @@ const columns = [
key: 'weight',
className: 'green-bg'
},
{
title: '计算重量',
dataIndex: 'calculatedWeight',
key: 'calculatedWeight',
className: 'green-bg'
},
{
title: '抓拍图片',
dataIndex: 'image',
@@ -304,29 +312,25 @@ const handleMaterialCodeChange = async () => {
console.error('获取物料数据失败:', error)
}
} else {
formData.materialCode = "";
formData.encoding = "";
formData.materialName = "";
formData.materialSpec = "";
formData.weight = 0;
formData.imageUrl = "";
formData.unitWeight = 0;
formData.photoUrl = "";
formData.matchResult = "";
}
};
// 模拟调用后端接口
const fetchMaterialData = async (code: string) => {
const query: WeighManageQuery = {
materialCode: code
}
getMaterialDetail(query).then(res => {
getMaterialDetail(code).then(res => {
if (res.code == '0') {
// 更新表单数据
formData.materialCode = res.data.materialCode
formData.encoding = res.data.encoding
formData.materialName = res.data.materialName
formData.materialSpec = res.data.materialSpec
formData.weight = res.data.weight
// formData.imageUrl = res.data.imageUrl
formData.imageUrl = "https://menjing.hzjj.cn/uploadPath/2024/01/20/XMT-Q3_20240120171349A257.jpg"
formData.unitWeight = res.data.unitWeight
formData.photoUrl = res.data.photoUrl
// 假设后端返回比对结果
// formData.matchResult = res.data.matchResult || 'failed' // 这里根据实际接口返回调整
formData.matchResult = res.data.matchResult || 'success' // 这里根据实际接口返回调整
@@ -365,6 +369,19 @@ const handleBackToFirst = () => {
activeStep.value = 1
}
// 计算重量
const calculateWeight = () => {
if (inputQuantity.value && formData.unitWeight) {
const singleWeight = parseFloat(formData.unitWeight.toString())
const quantity = parseFloat(inputQuantity.value)
if (!isNaN(singleWeight) && !isNaN(quantity)) {
calculatedWeight.value = (singleWeight * quantity).toFixed(2) + 'g'
}
} else {
calculatedWeight.value = ''
}
}
// 处理确定
@@ -375,7 +392,8 @@ const handleConfirm = () => {
count: weighingCount.value,
name: formData.materialName,
quantity: inputQuantity.value,
weight: inputWeight.value,
unitWeight: inputWeight.value,
calculatedWeight: calculatedWeight.value,
image: '图片'
}
// 添加到列表
@@ -383,6 +401,7 @@ const handleConfirm = () => {
// 重置输入
inputQuantity.value = ''
inputWeight.value = ''
calculatedWeight.value = ''
// 称重次数累加
weighingCount.value = weighingList.value.length + 1
}
@@ -391,6 +410,7 @@ const handleConfirm = () => {
const handleReset = () => {
inputQuantity.value = ''
inputWeight.value = ''
calculatedWeight.value = ''
}
// 处理删除