feat(i18n): 实现多语言支持并更新相关组件

refactor: 重构组件以使用i18n动态文本
style: 调整代码格式和结构
docs: 更新多语言翻译文件
This commit is contained in:
砂糖
2025-12-29 11:16:35 +08:00
parent 4fa6a1f59a
commit fa37b697e6
20 changed files with 1645 additions and 619 deletions

View File

@@ -46,7 +46,7 @@
</view>
</view>
</uni-popup>
<uni-popup ref='receivePopup'>
<!-- 表单区域 -->
<view class="form-card" v-if="form.coilId">
@@ -54,75 +54,197 @@
<text class="title-dot"></text>
<text class="title-text">录入信息</text>
</view>
<!-- 当前钢卷号 -->
<view class="form-item">
<text class="form-label">当前钢卷号</text>
<input v-model="form.currentCoilNo" placeholder="请输入当前钢卷号" class="form-input" />
</view>
<!-- 班组 -->
<view class="form-item">
<text class="form-label">班组</text>
<input v-model="form.team" placeholder="请输入班组名称" class="form-input" :disabled="form.dataType === 0"
:class="{ 'form-input-disabled': form.dataType === 0 }" />
</view>
<!-- 库区选择 -->
<view class="form-item form-item-optional">
<text class="form-label-optional">目标库位</text>
<klp-warehouse-picker v-model="form.warehouseId" :disabled="form.dataType === 0" placeholder="请选择目标库区" />
</view>
<!-- <view class="form-item form-item-optional">
<!-- <view class="form-item form-item-optional">
<text class="form-label-optional">真实库区</text>
<klp-warehouse-picker v-model="form.actualWarehouseId" :disabled="form.dataType === 0"
placeholder="请选择目标库区" ware-type="actual" />
</view> -->
<!-- 物品类型产品原材料选择使用封装组件 -->
<klp-material-picker
:item-type.sync="form.itemType"
:item-id.sync="form.itemId"
:disabled="form.dataType === 0"
:page-size="2000"
/>
<klp-material-picker :item-type.sync="form.itemType" :item-id.sync="form.itemId" :disabled="form.dataType === 0"
:page-size="2000" />
<!-- 毛重 -->
<view class="form-item form-item-optional">
<text class="form-label-optional">毛重 ()</text>
<input v-model="form.grossWeight" type="digit" placeholder="请输入毛重(选填)" class="form-input"
:disabled="form.dataType === 0" :class="{ 'form-input-disabled': form.dataType === 0 }" />
</view>
<!-- 净重 -->
<view class="form-item form-item-optional">
<text class="form-label-optional">净重 ()</text>
<input v-model="form.netWeight" type="digit" placeholder="请输入净重(选填)" class="form-input"
:disabled="form.dataType === 0" :class="{ 'form-input-disabled': form.dataType === 0 }" />
</view>
<!-- 操作者信息 -->
<view class="operator-info">
<text class="operator-label">操作人</text>
<text class="operator-name">{{ operatorName }}</text>
</view>
<!-- 操作按钮 -->
<view class="action-buttons">
<button v-if="form.dataType === 1" class="btn btn-primary" @click="confirmReceive" :disabled="loading">
<button v-if="form.dataType == 10" class="btn btn-primary" @click="confirmReceive" :disabled="loading">
{{ loading ? '提交中...' : '确认收货' }}
</button>
</view>
</view>
</uni-popup>
<uni-popup ref='viewPopup' type="bottom" :mask-click="true" height="70%">
<view class="popup-container">
<!-- 弹窗头部标题+关闭按钮 -->
<view class="popup-header">
<text class="popup-title">钢卷详情信息</text>
<uni-icons type="close" size="20" @click="closeViewPopup"></uni-icons>
</view>
<!-- 详情内容区域滚动布局适配多内容 -->
<scroll-view class="detail-scroll" scroll-y>
<view class="form-card" v-if="form.coilId">
<!-- 基础信息网格 -->
<view class="info-grid">
<view class="info-item">
<text class="item-label">入场钢卷号</text>
<text class="item-value">{{ form.enterCoilNo || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">钢卷号</text>
<text class="item-value">{{ form.currentCoilNo || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">班组</text>
<text class="item-value">{{ form.team || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">数据类型</text>
<text
class="item-value">{{ form.dataType === 0 ? '默认数据' : form.dataType === 10 ? '待收货数据' : '-' }}</text>
</view>
<view class="info-item full-width">
<text class="item-label">目标库位</text>
<text class="item-value">{{ form.warehouseName || (form.warehouseId ? '已选库位(未获取名称)' : '-') }}</text>
</view>
<view class="info-item full-width" v-if="form.actualWarehouseId">
<text class="item-label">真实库区</text>
<text class="item-value">{{ form.actualWarehouseName || '已选库位(未获取名称)' }}</text>
</view>
</view>
<!-- 物料信息 -->
<view class="card-title" style="margin-top: 30rpx;">
<text class="title-dot"></text>
<text class="title-text">物料信息</text>
</view>
<view class="info-grid">
<!-- <view class="info-item">
<text class="item-label">物品类型</text>
<text class="item-value">{{ form.itemType || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">物品ID</text>
<text class="item-value">{{ form.itemId || '-' }}</text>
</view>
<view class="info-item full-width">
<text class="item-label">物料名称</text>
<text class="item-value">{{ form.itemName || '-' }}</text>
</view> -->
<view class="info-item">
<text class="item-label">物品名称</text>
<text class="item-value">{{ form.rawMaterial.rawMaterialName || form.product.productName || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">规格</text>
<text class="item-value">{{ form.rawMaterial.specification || form.product.specification || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">材质</text>
<text class="item-value">{{ form.rawMaterial.material || form.product.material || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">厂家</text>
<text class="item-value">{{ form.rawMaterial.manufacturer || form.product.manufacturer || '-' }}</text>
</view>
</view>
<!-- 重量信息 -->
<view class="card-title" style="margin-top: 30rpx;">
<text class="title-dot"></text>
<text class="title-text">重量信息</text>
</view>
<view class="info-grid">
<view class="info-item">
<text class="item-label">毛重</text>
<text class="item-value">{{ form.grossWeight || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">净重</text>
<text class="item-value">{{ form.netWeight || '-' }}</text>
</view>
</view>
<!-- 操作信息 -->
<view class="card-title" style="margin-top: 30rpx;">
<text class="title-dot"></text>
<text class="title-text">操作信息</text>
</view>
<view class="info-grid">
<view class="info-item">
<text class="item-label">操作人</text>
<text class="item-value">{{ operatorName }}</text>
</view>
<view class="info-item">
<text class="item-label">更新时间</text>
<text class="item-value">{{ currentAction.updateTime || '-' }}</text>
</view>
<view class="info-item full-width">
<text class="item-label">操作状态</text>
<text
class="item-value">{{ currentAction.actionStatus === 0 ? '未开始' : currentAction.actionStatus === 2 ? '已完成' : '-' }}</text>
</view>
</view>
</view>
<!-- 空数据提示 -->
<view class="empty-tip" v-else>
暂无钢卷详情数据
</view>
</scroll-view>
</view>
</uni-popup>
<!-- 主列表区域 -->
<view class="main-list">
<scroll-view class="list-scroll" scroll-y>
<uni-list v-if="list.length">
<uni-list-item clickable v-for="(item, index) in list" :key="index" @click="openReceivePopup(item)"
<uni-list-item v-for="(item, index) in list" :key="index" @click=""
:title="`钢卷号:${item.currentCoilNo || '-'}`" :note="`操作时间:${item.updateTime || '-'}`">
<template v-slot:footer>
<button style="margin-right: 10rpx;" size="mini" type="primary" plain="true" @click="openViewPopup(item)">查看</button>
<button size="mini" type="primary" plain="true" @click="openReceivePopup(item)">收货</button>
</template>
</uni-list-item>
</uni-list>
<view class="empty-tip" v-else>暂无待操作数据</view>
@@ -177,6 +299,7 @@
form: {},
loading: false,
currentAction: {},
loadingDetail: false,
};
},
computed: {
@@ -294,12 +417,42 @@
*/
openReceivePopup(row) {
this.$refs.receivePopup.open('bottom')
// this.loadingDetail = false;
uni.showLoading({
title: '正在加载收货详情'
})
getMaterialCoil(row.coilId).then(res => {
this.form = res.data;
this.currentAction = row;
// this.loadingDetail = true
uni.hideLoading()
})
},
openViewPopup(row) {
this.$refs.viewPopup.open('bottom')
// this.loadingDetail = false;
uni.showLoading({
title: '正在加载收货详情'
})
getMaterialCoil(row.coilId).then(res => {
this.form = res.data;
this.currentAction = row;
uni.hideLoading()
// this.loadingDetail = true
})
},
/**
* 关闭钢卷详情弹窗
*/
closeViewPopup() {
this.$refs.viewPopup.close();
// 可选:清空表单临时数据(根据业务需求决定是否保留)
this.form = {};
this.currentAction = {};
},
/**
* 确认收货
*/
@@ -491,7 +644,7 @@
.uni-load-more {
margin: 20rpx 0;
}
.form-card {
background: #fff;
border-radius: 16rpx;
@@ -500,7 +653,7 @@
height: 70vh;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.card-title {
display: flex;
align-items: center;
@@ -508,7 +661,7 @@
margin-bottom: 25rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #f0f0f0;
.title-dot {
width: 8rpx;
height: 28rpx;
@@ -516,31 +669,31 @@
border-radius: 4rpx;
margin-right: 12rpx;
}
.title-text {
flex: 1;
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.status-badge {
font-size: 22rpx;
padding: 4rpx 12rpx;
border-radius: 12rpx;
margin-right: 10rpx;
&.status-1 {
background: #d1f2eb;
color: #0c6957;
}
&.status-0 {
background: #f8d7da;
color: #721c24;
}
}
.more-btn {
display: flex;
align-items: center;
@@ -549,43 +702,43 @@
background: #f0f7ff;
border-radius: 20rpx;
border: 1rpx solid #007aff;
.icon-more {
font-size: 24rpx;
color: #007aff;
}
.more-text {
font-size: 24rpx;
color: #007aff;
}
}
}
/* 信息网格 */
.info-grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.info-item {
flex: 1;
min-width: 45%;
background: #f8f9fa;
padding: 20rpx;
border-radius: 12rpx;
&.full-width {
flex: 0 0 100%;
}
.item-label {
display: block;
font-size: 24rpx;
color: #999;
margin-bottom: 10rpx;
}
.item-value {
display: block;
font-size: 28rpx;
@@ -594,29 +747,29 @@
}
}
}
/* 表单项 */
.form-item {
margin-bottom: 30rpx;
&:last-of-type {
margin-bottom: 0;
}
.form-label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 15rpx;
font-weight: 500;
&::before {
content: '*';
color: #ff4d4f;
margin-right: 6rpx;
}
}
.form-label-optional {
display: block;
font-size: 28rpx;
@@ -624,7 +777,7 @@
margin-bottom: 15rpx;
font-weight: 500;
}
.form-input {
width: 100%;
height: 88rpx;
@@ -636,12 +789,12 @@
color: #333;
box-sizing: border-box;
transition: all 0.3s;
&:focus {
background: #fff;
border-color: #007aff;
}
&.form-input-disabled {
background: #f5f5f5;
color: #999;
@@ -649,7 +802,7 @@
}
}
}
/* 操作者信息 */
.operator-info {
display: flex;
@@ -657,25 +810,25 @@
justify-content: center;
padding: 20rpx 0;
margin-top: 20rpx;
.operator-label {
font-size: 26rpx;
color: #999;
}
.operator-name {
font-size: 26rpx;
color: #007aff;
font-weight: 500;
}
}
/* 操作按钮 */
.action-buttons {
display: flex;
gap: 20rpx;
margin-top: 30rpx;
.btn {
flex: 1;
height: 88rpx;
@@ -684,21 +837,21 @@
font-weight: 500;
border: none;
transition: all 0.2s;
&:active {
transform: scale(0.98);
}
&[disabled] {
opacity: 0.6;
}
}
.btn-secondary {
background: #f5f5f5;
color: #666;
}
.btn-primary {
background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
color: #fff;