DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(UI组件): 重构产品与原材料选择组件样式和交互

Browse Source 
优化产品选择(ProductSelect)和原材料选择(RawMaterialSelect)组件的UI样式和交互逻辑：
1. 将触发按钮改为输入框样式，提升视觉一致性
2. 简化卡片布局，移除冗余的选择按钮
3. 优化选中状态显示，增加规格和材质信息
4. 调整表单样式，减小字体大小和间距
5. 更新空状态提示文案为"暂无发货记录"和"暂无入库记录"
6. 在package.json中添加volta配置指定node版本
This commit is contained in:
砂糖
2025-11-20 11:27:47 +08:00
parent 90f88bc36c
commit f2b754126c
7 changed files with 101 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
klp-ui/package.json
View File

@@ -107,5 +107,8 @@
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
"last 2 versions" "last 2 versions"
] ],
"volta": {
"node": "16.20.2"
}
} }

15
klp-ui/src/assets/styles/element-ui.scss
View File

@@ -590,14 +590,15 @@ body {
// ---------------------- 3.3 表单/输入（金属内阴影 + 统一高度）---------------------- // ---------------------- 3.3 表单/输入（金属内阴影 + 统一高度）----------------------
// 表单项布局 // 表单项布局
.el-form-item { .el-form-item {
margin-bottom: $--form-item-margin !important; margin-bottom: 0 !important;
font-size: 13px; margin-right: 4px;
font-size: 12px;
// 标签样式 // 标签样式
.el-form-item__label { .el-form-item__label {
color: $--color-text-secondary; color: $--color-text-secondary;
padding-right: $--spacing-base; padding-right: $--spacing-base;
font-size: 13px; font-size: 12px;
} }
// 搜索表单 inline 布局 // 搜索表单 inline 布局
@@ -606,6 +607,14 @@ body {
margin-right: $--spacing-base; margin-right: $--spacing-base;
vertical-align: middle; vertical-align: middle;
} }
.el-form-item__error {
font-size: 12px;
top: 50%;
transform: translateY(-50%);
right: 6px;
left: auto;
}
} }
// 输入框（统一高度 + 金属内阴影） // 输入框（统一高度 + 金属内阴影）

148
klp-ui/src/components/KLPService/ProductSelect/index.vue
View File

@@ -1,66 +1,33 @@
<template> <template>
<div class="product-selector"> <div class="product-selector">
<!-- 触发器按钮 --> <!-- 触发器按钮 -->
<el-button <div class="el-input" v-if="!readonly" type="text" @click="dialogVisible = true">
v-if="!readonly" <div class="el-input__inner">
type="text" <el-icon class="el-icon-search"></el-icon>
:icon="multiple ? 'el-icon-checks' : 'el-icon-check'" {{ buttonText }}
@click="dialogVisible = true" </div>
> </div>
{{ buttonText }}
</el-button>
<span v-else class="readonly-text">{{ displayText }}</span> <span v-else class="readonly-text">{{ displayText }}</span>
<!-- 选择对话框 --> <!-- 选择对话框 -->
<el-dialog <el-dialog append-to-body title="选择产品" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
append-to-body @close="handleClose">
title="选择产品"
:visible.sync="dialogVisible"
width="1200px"
:close-on-click-modal="false"
@close="handleClose"
>
<!-- 搜索区域（保持不变） --> <!-- 搜索区域（保持不变） -->
<el-form :inline="true" :model="queryParams" class="search-form" size="small"> <el-form :inline="true" :model="queryParams" class="search-form" size="small">
<el-form-item label="产品编号"> <el-form-item label="产品编号">
<el-input <el-input v-model="queryParams.productCode" placeholder="请输入产品编号" clearable
v-model="queryParams.productCode" @keyup.enter.native="handleQuery" />
placeholder="请输入产品编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="产品名称"> <el-form-item label="产品名称">
<el-input <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable
v-model="queryParams.productName" @keyup.enter.native="handleQuery" />
placeholder="请输入产品名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="负责人">
<el-input
v-model="queryParams.owner"
placeholder="请填写负责人"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="规格"> <el-form-item label="规格">
<el-input <el-input v-model="queryParams.specification" placeholder="请输入规格" clearable
v-model="queryParams.specification" @keyup.enter.native="handleQuery" />
placeholder="请输入规格"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="材质"> <el-form-item label="材质">
<el-input <el-input v-model="queryParams.material" placeholder="请输入材质" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.material"
placeholder="请输入材质"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@@ -70,21 +37,12 @@
<!-- 卡片布局（替换原表格） --> <!-- 卡片布局（替换原表格） -->
<div v-loading="loading" class="card-container"> <div v-loading="loading" class="card-container">
<div <div v-for="(item, index) in productList" :key="index + item.productId" class="product-card"
v-for="(item, index) in productList" :class="{ 'selected-card': isSelected(item.productId) }" @click="handleRowClick(item)">
:key="index + item.productId"
class="product-card"
:class="{ 'selected-card': isSelected(item.productId) }"
@click="handleRowClick(item)"
>
<!-- 多选勾选框 --> <!-- 多选勾选框 -->
<el-checkbox <el-checkbox v-if="multiple" :checked="isSelected(item.productId)"
v-if="multiple" @change="(val) => handleCardSelection(val, item)" class="card-checkbox" />
:checked="isSelected(item.productId)"
@change="(val) => handleCardSelection(val, item)"
class="card-checkbox"
/>
<!-- 卡片内容（包含所有原表格字段） --> <!-- 卡片内容（包含所有原表格字段） -->
<div class="card-content"> <div class="card-content">
<div class="card-title"> <div class="card-title">
@@ -92,23 +50,12 @@
<span class="code">[{{ item.productCode }}]</span> <span class="code">[{{ item.productCode }}]</span>
</div> </div>
<div class="card-info"> <div class="card-info">
<div class="info-item">负责人：<span>{{ item.owner || '-' }}</span></div>
<div class="info-item">规格：<span>{{ item.specification || '-' }}</span></div> <div class="info-item">规格：<span>{{ item.specification || '-' }}</span></div>
<div class="info-item">材质：<span>{{ item.material || '-' }}</span></div> <div class="info-item">材质：<span>{{ item.material || '-' }}</span></div>
</div> </div>
<!-- 选择按钮 -->
<el-button
type="text"
size="small"
class="select-btn"
@click.stop="handleSelect(item)"
>
选择
</el-button>
</div> </div>
</div> </div>
<!-- 空数据提示 --> <!-- 空数据提示 -->
<div class="empty-tip" v-if="productList.length === 0 && !loading"> <div class="empty-tip" v-if="productList.length === 0 && !loading">
暂无匹配的产品数据 暂无匹配的产品数据
@@ -116,21 +63,12 @@
</div> </div>
<!-- 分页（保持不变） --> <!-- 分页（保持不变） -->
<pagination <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
v-show="total>0" @pagination="getList" />
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button <el-button type="primary" @click="confirmSelection" v-if="multiple">
type="primary"
@click="confirmSelection"
v-if="multiple"
>
确认选择 确认选择
</el-button> </el-button>
</div> </div>
@@ -185,19 +123,22 @@ export default {
}, },
computed: { computed: {
buttonText() { buttonText() {
// 如果为选中任何产品，显示选择产品
// 如果为选中多个产品，显示已选 X 项
// 如果为选中单个产品，显示产品名称
if (this.selectedIds.length === 0) {
return '请选择产品';
}
if (this.multiple) { if (this.multiple) {
return this.selectedIds.length > 0 return `已选 ${this.selectedIds.length} 项`;
? `已选 ${this.selectedIds.length} 项`
: '选择产品';
} else { } else {
console.log(this.selectedRows); return `${this.selectedRows[0]?.productName}[${this.selectedRows[0]?.specification || '-'}] (${this.selectedRows[0]?.material || '-'})`;
return this.selectedRows[0]?.productName || '选择产品';
} }
}, },
displayText() { displayText() {
if (this.multiple) { if (this.multiple) {
return this.selectedIds.length > 0 return this.selectedIds.length > 0
? `已选 ${this.selectedIds.length} 项` ? `已选 ${this.selectedIds.length} 项`
: '未选择'; : '未选择';
} else { } else {
return this.selectedRows[0]?.productName || '未选择'; return this.selectedRows[0]?.productName || '未选择';
@@ -295,7 +236,7 @@ export default {
handleSelect(row) { handleSelect(row) {
if (this.multiple) { if (this.multiple) {
const index = this.selectedIds.indexOf(row.productId); const index = this.selectedIds.indexOf(row.productId);
index > -1 index > -1
? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1)) ? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1))
: (this.selectedIds.push(row.productId), this.selectedRows.push(row)); : (this.selectedIds.push(row.productId), this.selectedRows.push(row));
} else { } else {
@@ -362,8 +303,8 @@ export default {
/* 卡片样式 */ /* 卡片样式 */
.product-card { .product-card {
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
border-radius: 8px; border-radius: 0px;
padding: 16px; padding: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
position: relative; position: relative;
@@ -390,7 +331,8 @@ export default {
/* 卡片内容样式 */ /* 卡片内容样式 */
.card-content { .card-content {
margin-right: 24px; /* 给多选框留空间 */ margin-right: 24px;
/* 给多选框留空间 */
} }
.card-title { .card-title {
@@ -427,18 +369,6 @@ export default {
margin-left: 4px; margin-left: 4px;
} }
/* 选择按钮样式 */
.select-btn {
position: absolute;
bottom: 16px;
right: 16px;
color: #409eff;
&:hover {
color: #66b1ff;
}
}
/* 空数据提示 */ /* 空数据提示 */
.empty-tip { .empty-tip {
grid-column: 1 / -1; grid-column: 1 / -1;

166
klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
View File

@@ -1,82 +1,33 @@
<template> <template>
<div class="raw-material-selector"> <div class="raw-material-selector">
<!-- 触发器按钮 --> <!-- 触发器按钮 -->
<el-button <div class="el-input" v-if="!readonly" type="text" @click="dialogVisible = true">
v-if="!readonly" <div class="el-input__inner">
type="text" <el-icon class="el-icon-search"></el-icon>
:icon="multiple ? 'el-icon-checks' : 'el-icon-check'" {{ buttonText }}
@click="dialogVisible = true" </div>
> </div>
{{ buttonText }}
</el-button>
<span v-else class="readonly-text">{{ displayText }}</span> <span v-else class="readonly-text">{{ displayText }}</span>
<!-- 选择对话框 --> <!-- 选择对话框 -->
<el-dialog <el-dialog title="选择原材料" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
title="选择原材料" @close="handleClose" append-to-body>
:visible.sync="dialogVisible"
width="1200px"
:close-on-click-modal="false"
@close="handleClose"
append-to-body
>
<!-- 搜索区域（保持不变） --> <!-- 搜索区域（保持不变） -->
<el-form :inline="true" :model="queryParams" class="search-form" size="small"> <el-form :inline="true" :model="queryParams" class="search-form" size="small">
<el-form-item label="原材料编号"> <el-form-item label="编号">
<el-input <el-input v-model="queryParams.rawMaterialCode" placeholder="请输入原材料编号" clearable
v-model="queryParams.rawMaterialCode" @keyup.enter.native="handleQuery" />
placeholder="请输入原材料编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="原材料名称"> <el-form-item label="名称">
<el-input <el-input v-model="queryParams.rawMaterialName" placeholder="请输入原材料名称" clearable
v-model="queryParams.rawMaterialName" @keyup.enter.native="handleQuery" />
placeholder="请输入原材料名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="规格"> <el-form-item label="规格">
<el-input <el-input v-model="queryParams.specification" placeholder="请输入规格" clearable
v-model="queryParams.specification" @keyup.enter.native="handleQuery" />
placeholder="请输入规格"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="材质"> <el-form-item label="材质">
<el-input <el-input v-model="queryParams.material" placeholder="请输入材质" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.material"
placeholder="请输入材质"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="厂家">
<el-input
v-model="queryParams.manufacturer"
placeholder="请输入厂家"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="表面处理">
<el-input
v-model="queryParams.surfaceTreatmentDesc"
placeholder="请输入表面处理"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="锌层">
<el-input
v-model="queryParams.zincLayer"
placeholder="请输入锌层"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@@ -86,21 +37,12 @@
<!-- 卡片布局（替换原表格） --> <!-- 卡片布局（替换原表格） -->
<div v-loading="loading" class="card-container"> <div v-loading="loading" class="card-container">
<div <div v-for="(item, index) in rawMaterialList" :key="index + item.rawMaterialId" class="material-card"
v-for="(item, index) in rawMaterialList" :class="{ 'selected-card': isSelected(item.rawMaterialId) }" @click="handleRowClick(item)">
:key="index + item.rawMaterialId"
class="material-card"
:class="{ 'selected-card': isSelected(item.rawMaterialId) }"
@click="handleRowClick(item)"
>
<!-- 多选勾选框 --> <!-- 多选勾选框 -->
<el-checkbox <el-checkbox v-if="multiple" :checked="isSelected(item.rawMaterialId)"
v-if="multiple" @change="(val) => handleCardSelection(val, item)" class="card-checkbox" />
:checked="isSelected(item.rawMaterialId)"
@change="(val) => handleCardSelection(val, item)"
class="card-checkbox"
/>
<!-- 卡片内容（包含所有原表格字段） --> <!-- 卡片内容（包含所有原表格字段） -->
<div class="card-content"> <div class="card-content">
<div class="card-title"> <div class="card-title">
@@ -115,19 +57,9 @@
<div class="info-item">表面处理：<span>{{ item.surfaceTreatmentDesc || '-' }}</span></div> <div class="info-item">表面处理：<span>{{ item.surfaceTreatmentDesc || '-' }}</span></div>
<div class="info-item">锌层：<span>{{ item.zincLayer || '-' }}</span></div> <div class="info-item">锌层：<span>{{ item.zincLayer || '-' }}</span></div>
</div> </div>
<!-- 选择按钮 -->
<el-button
type="text"
size="small"
class="select-btn"
@click.stop="handleSelect(item)"
>
选择
</el-button>
</div> </div>
</div> </div>
<!-- 空数据提示 --> <!-- 空数据提示 -->
<div class="empty-tip" v-if="rawMaterialList.length === 0 && !loading"> <div class="empty-tip" v-if="rawMaterialList.length === 0 && !loading">
暂无匹配的原材料数据 暂无匹配的原材料数据
@@ -135,21 +67,12 @@
</div> </div>
<!-- 分页（保持不变） --> <!-- 分页（保持不变） -->
<pagination <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
v-show="total>0" @pagination="getList" />
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button <el-button type="primary" @click="confirmSelection" v-if="multiple">
type="primary"
@click="confirmSelection"
v-if="multiple"
>
确认选择 确认选择
</el-button> </el-button>
</div> </div>
@@ -203,18 +126,22 @@ export default {
}, },
computed: { computed: {
buttonText() { buttonText() {
// 如果为选中任何原材料，显示选择原材料
// 如果为选中多个原材料，显示已选 X 项
// 如果为选中单个原材料，显示原材料名称
if (this.selectedIds.length === 0) {
return '请选择原材料';
}
if (this.multiple) { if (this.multiple) {
return this.selectedIds.length > 0 return `已选 ${this.selectedIds.length} 项`;
? `已选 ${this.selectedIds.length} 项`
: '选择原材料';
} else { } else {
return this.selectedRows[0]?.rawMaterialName || '选择原材料'; return `${this.selectedRows[0]?.rawMaterialName}[${this.selectedRows[0]?.specification || '-'}] (${this.selectedRows[0]?.material || '-'})`;
} }
}, },
displayText() { displayText() {
if (this.multiple) { if (this.multiple) {
return this.selectedIds.length > 0 return this.selectedIds.length > 0
? `已选 ${this.selectedIds.length} 项` ? `已选 ${this.selectedIds.length} 项`
: '未选择'; : '未选择';
} else { } else {
return this.selectedRows[0]?.rawMaterialName || '未选择'; return this.selectedRows[0]?.rawMaterialName || '未选择';
@@ -311,7 +238,7 @@ export default {
handleSelect(row) { handleSelect(row) {
if (this.multiple) { if (this.multiple) {
const index = this.selectedIds.indexOf(row.rawMaterialId); const index = this.selectedIds.indexOf(row.rawMaterialId);
index > -1 index > -1
? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1)) ? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1))
: (this.selectedIds.push(row.rawMaterialId), this.selectedRows.push(row)); : (this.selectedIds.push(row.rawMaterialId), this.selectedRows.push(row));
} else { } else {
@@ -378,8 +305,8 @@ export default {
/* 卡片样式 */ /* 卡片样式 */
.material-card { .material-card {
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
border-radius: 8px; border-radius: 0px;
padding: 16px; padding: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
position: relative; position: relative;
@@ -406,7 +333,8 @@ export default {
/* 卡片内容样式 */ /* 卡片内容样式 */
.card-content { .card-content {
margin-right: 24px; /* 给多选框留空间 */ margin-right: 24px;
/* 给多选框留空间 */
} }
.card-title { .card-title {
@@ -448,18 +376,6 @@ export default {
color: #303133; color: #303133;
} }
/* 选择按钮样式 */
.select-btn {
position: absolute;
bottom: 16px;
right: 16px;
color: #409eff;
&:hover {
color: #66b1ff;
}
}
/* 空数据提示 */ /* 空数据提示 */
.empty-tip { .empty-tip {
grid-column: 1 / -1; grid-column: 1 / -1;

2
klp-ui/src/views/wms/coil/do/ship.vue
View File

@@ -150,7 +150,7 @@
<div v-loading="actionLoading" class="card-grid-container"> <div v-loading="actionLoading" class="card-grid-container">
<div v-if="pendingActions.length === 0" class="empty-state"> <div v-if="pendingActions.length === 0" class="empty-state">
<i class="el-icon-document"></i> <i class="el-icon-document"></i>
<p>暂无待操作任务</p> <p>暂无发货记录</p>
</div> </div>
<div <div
v-for="(item, index) in pendingActions" v-for="(item, index) in pendingActions"

8
klp-ui/src/views/wms/coil/do/warehousing.vue
View File

@@ -58,10 +58,8 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item :label="getItemLabel" prop="itemId" v-if="!form.coilId"> <el-form-item :label="getItemLabel" prop="itemId" v-if="!form.coilId">
<product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品" <product-select v-if="form.itemType == 'product'" v-model="form.itemId" clearable />
style="width: 100%;" clearable /> <raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId" clearable />
<raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId"
placeholder="请选择原料" style="width: 100%;" clearable />
<div v-else>请先选择材料类型</div> <div v-else>请先选择材料类型</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -140,7 +138,7 @@
<div v-loading="actionLoading" class="card-grid-container"> <div v-loading="actionLoading" class="card-grid-container">
<div v-if="pendingActions.length === 0" class="empty-state"> <div v-if="pendingActions.length === 0" class="empty-state">
<i class="el-icon-document"></i> <i class="el-icon-document"></i>
<p>暂无待操作任务</p> <p>暂无入库记录</p>
</div> </div>
<div <div
v-for="(item, index) in pendingActions" v-for="(item, index) in pendingActions"

2
klp-ui/src/views/wms/product/index.vue
View File

@@ -70,7 +70,7 @@
<BomInfoMini :bomId="scope.row.bomId" /> <BomInfoMini :bomId="scope.row.bomId" />
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>