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

feat(组件): 重构产品和原材料选择器为卡片布局

Browse Source 
- 将产品和原材料选择器的表格布局替换为卡片布局，提升用户体验
- 添加卡片选中状态样式和交互逻辑
- 优化多选功能，使用复选框代替表格选择列
- 增加空数据提示和加载状态
- 移除未使用的分类数据初始化代码
This commit is contained in:
砂糖
2025-11-17 16:24:28 +08:00
parent 6af8dceb64
commit 0f92560e62
4 changed files with 381 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
klp-ui/src/App.vue
View File

@@ -15,8 +15,8 @@ export default {
// 应用启动时全局初始化分类数据
if (this.$store.getters.token) {
// this.$store.dispatch('category/getCategoryList');
this.$store.dispatch('category/getProductMap');
this.$store.dispatch('category/getRawMaterialMap');
// this.$store.dispatch('category/getProductMap');
// this.$store.dispatch('category/getRawMaterialMap');
// this.$store.dispatch('category/getBomMap');
// this.$store.dispatch('finance/getFinancialAccounts');
// this.$store.dispatch('craft/getProcessList');

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

@@ -20,7 +20,7 @@
:close-on-click-modal="false"
@close="handleClose"
>
<!-- 搜索区域 -->
<!-- 搜索区域（保持不变） -->
<el-form :inline="true" :model="queryParams" class="search-form" size="small">
<el-form-item label="产品编号">
<el-input
@@ -68,37 +68,54 @@
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="productList"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
:select-on-indeterminate="multiple"
highlight-current-row
height="400px"
style="width: 100%"
>
<el-table-column
type="selection"
width="55"
align="center"
v-if="multiple"
/>
<el-table-column type="index" width="50" align="center" label="序号" />
<el-table-column label="产品编号" align="center" prop="productCode" :show-overflow-tooltip="true" />
<el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true" width="180" />
<el-table-column label="负责人" align="center" prop="owner" width="100" />
<el-table-column label="规格" align="center" prop="specification" width="120" />
<el-table-column label="材质" align="center" prop="material" width="100" />
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<!-- 卡片布局（替换原表格） -->
<div v-loading="loading" class="card-container">
<div
v-for="(item, index) in productList"
:key="index + item.productId"
class="product-card"
:class="{ 'selected-card': isSelected(item.productId) }"
@click="handleRowClick(item)"
>
<!-- 多选勾选框 -->
<el-checkbox
v-if="multiple"
:checked="isSelected(item.productId)"
@change="(val) => handleCardSelection(val, item)"
class="card-checkbox"
/>
<!-- 卡片内容（包含所有原表格字段） -->
<div class="card-content">
<div class="card-title">
<span class="name">{{ item.productName }}</span>
<span class="code">[{{ item.productCode }}]</span>
</div>
<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.material || '-' }}</span></div>
</div>
<!-- 选择按钮 -->
<el-button
type="text"
size="small"
class="select-btn"
@click.stop="handleSelect(item)"
>
选择
</el-button>
</div>
</div>
<!-- 空数据提示 -->
<div class="empty-tip" v-if="productList.length === 0 && !loading">
暂无匹配的产品数据
</div>
</div>
<!-- 分页 -->
<!-- 分页（保持不变） -->
<pagination
v-show="total>0"
:total="total"
@@ -127,22 +144,18 @@ import { listProduct } from '@/api/wms/product';
export default {
name: 'ProductSelector',
props: {
// 双向绑定值
value: {
type: String,
default: ''
},
// 是否只读
readonly: {
type: Boolean,
default: false
},
// 是否允许多选
multiple: {
type: Boolean,
default: false
},
// 过滤条件
filters: {
type: Object,
default: () => ({})
@@ -166,24 +179,21 @@ export default {
surfaceTreatmentDesc: undefined,
zincLayer: undefined
},
// 内部选中的ID数组
selectedIds: [],
// 内部选中的行数据
selectedRows: []
};
},
computed: {
// 按钮显示文本
buttonText() {
if (this.multiple) {
return this.selectedIds.length > 0
? `已选 ${this.selectedIds.length} 项`
: '选择产品';
} else {
console.log(this.selectedRows);
return this.selectedRows[0]?.productName || '选择产品';
}
},
// 只读状态显示文本
displayText() {
if (this.multiple) {
return this.selectedIds.length > 0
@@ -195,28 +205,45 @@ export default {
}
},
watch: {
// 监听外部值变化，同步到内部选中状态
value: {
immediate: true,
handler(val) {
this.selectedIds = val ? val.split(',').filter(id => id) : [];
// 当列表已加载时，同步选中状态
if (this.productList.length > 0) {
this.syncTableSelection();
}
// this.syncSelectedRows();
this.$forceUpdate(); // 新增：强制刷新视图
}
},
// 监听对话框显示状态，加载数据
dialogVisible(val) {
if (val) {
this.getList().then(() => {
this.syncTableSelection();
});
this.getList();
}
}
},
methods: {
// 获取产品列表
// 判断卡片是否选中
isSelected(productId) {
return this.selectedIds.includes(productId);
},
// 同步选中行数据
// syncSelectedRows() {
// if (this.productList.length === 0) return;
// // this.selectedRows = this.productList.filter(item =>
// // this.selectedIds.includes(item.productId)
// // );
// },
// 卡片选择事件（多选）
handleCardSelection(checked, item) {
if (checked) {
!this.selectedIds.includes(item.productId) && this.selectedIds.push(item.productId);
} else {
this.selectedIds = this.selectedIds.filter(id => id !== item.productId);
}
// this.syncSelectedRows();
},
// 原有方法保持不变（仅修改同步选中状态逻辑）
async getList() {
try {
this.loading = true;
@@ -225,6 +252,7 @@ export default {
if (response.code === 200) {
this.productList = response.rows || [];
this.total = response.total || 0;
// this.syncSelectedRows(); // 加载数据后同步选中状态
}
return this.productList;
} catch (error) {
@@ -235,15 +263,11 @@ export default {
}
},
// 搜索
handleQuery() {
this.queryParams.pageNum = 1;
this.getList().then(() => {
this.syncTableSelection();
});
this.getList();
},
// 重置
resetQuery() {
this.queryParams = {
pageNum: 1,
@@ -257,12 +281,9 @@ export default {
surfaceTreatmentDesc: undefined,
zincLayer: undefined
};
this.getList().then(() => {
this.syncTableSelection();
});
this.getList();
},
// 行点击事件
handleRowClick(row) {
if (!this.multiple) {
this.selectedIds = [row.productId];
@@ -271,61 +292,30 @@ export default {
}
},
// 选择项变化（多选）
handleSelectionChange(rows) {
this.selectedRows = rows;
this.selectedIds = rows.map(row => row.productId);
},
// 单个选择按钮
handleSelect(row) {
if (this.multiple) {
// 多选模式下切换选中状态
const index = this.selectedIds.indexOf(row.productId);
if (index > -1) {
this.selectedIds.splice(index, 1);
this.selectedRows.splice(index, 1);
} else {
this.selectedIds.push(row.productId);
this.selectedRows.push(row);
}
this.syncTableSelection();
index > -1
? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1))
: (this.selectedIds.push(row.productId), this.selectedRows.push(row));
} else {
// 单选模式直接确认
this.selectedIds = [row.productId];
this.selectedRows = [row];
this.confirmSelection();
}
},
// 同步表格选中状态
syncTableSelection() {
this.$nextTick(() => {
if (this.multiple && this.$refs.table) {
this.productList.forEach(row => {
const isSelected = this.selectedIds.includes(row.productId);
if (isSelected) {
this.$refs.table.toggleRowSelection(row, true);
} else {
this.$refs.table.toggleRowSelection(row, false);
}
});
}
});
},
// 确认选择
confirmSelection() {
const emitValue = this.selectedIds.join(',');
this.$emit('input', emitValue);
this.$emit('change', emitValue, this.selectedRows);
this.dialogVisible = false;
this.$forceUpdate(); // 新增：强制刷新视图
},
// 关闭对话框
handleClose() {
// 关闭时重新同步选中状态（避免临时选择影响）
this.selectedIds = this.value ? this.value.split(',').filter(id => id) : [];
// this.syncSelectedRows();
this.dialogVisible = false;
}
}
@@ -358,4 +348,105 @@ export default {
margin-bottom: 15px;
margin-right: 15px;
}
/* 卡片容器样式 */
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
margin-bottom: 20px;
min-height: 400px;
padding: 10px;
}
/* 卡片样式 */
.product-card {
border: 1px solid #e6e6e6;
border-radius: 8px;
padding: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background: #fff;
&:hover {
border-color: #409eff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}
}
/* 选中卡片样式 */
.selected-card {
border-color: #409eff;
background-color: #f0f7ff;
}
/* 多选勾选框位置 */
.card-checkbox {
position: absolute;
top: 16px;
right: 16px;
}
/* 卡片内容样式 */
.card-content {
margin-right: 24px; /* 给多选框留空间 */
}
.card-title {
display: flex;
align-items: center;
margin-bottom: 16px;
font-weight: 500;
}
.name {
font-size: 16px;
color: #1989fa;
margin-right: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.code {
font-size: 14px;
color: #909399;
}
.card-info {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
color: #606266;
}
.info-item span {
color: #303133;
margin-left: 4px;
}
/* 选择按钮样式 */
.select-btn {
position: absolute;
bottom: 16px;
right: 16px;
color: #409eff;
&:hover {
color: #66b1ff;
}
}
/* 空数据提示 */
.empty-tip {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
height: 400px;
color: #909399;
font-size: 16px;
}
</style>

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

@@ -20,7 +20,7 @@
@close="handleClose"
append-to-body
>
<!-- 搜索区域（同步原料管理页面筛选字段） -->
<!-- 搜索区域（保持不变） -->
<el-form :inline="true" :model="queryParams" class="search-form" size="small">
<el-form-item label="原材料编号">
<el-input
@@ -84,40 +84,57 @@
</el-form-item>
</el-form>
<!-- 数据表格（同步原料管理页面核心字段） -->
<el-table
ref="table"
v-loading="loading"
:data="rawMaterialList"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
:select-on-indeterminate="multiple"
highlight-current-row
height="400px"
style="width: 100%"
>
<el-table-column
type="selection"
width="55"
align="center"
v-if="multiple"
/>
<el-table-column label="原材料编号" align="center" prop="rawMaterialCode" :show-overflow-tooltip="true" />
<el-table-column label="原材料名称" align="center" prop="rawMaterialName" :show-overflow-tooltip="true" width="180" />
<el-table-column label="规格" align="center" prop="specification" width="120" />
<el-table-column label="计量单位" align="center" prop="unit" width="100" />
<el-table-column label="材质" align="center" prop="material" />
<el-table-column label="厂家" align="center" prop="manufacturer" width="120" :show-overflow-tooltip="true" />
<el-table-column label="表面处理" align="center" prop="surfaceTreatmentDesc" />
<el-table-column label="锌层" align="center" prop="zincLayer" width="80" />
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<!-- 卡片布局（替换原表格） -->
<div v-loading="loading" class="card-container">
<div
v-for="(item, index) in rawMaterialList"
:key="index + item.rawMaterialId"
class="material-card"
:class="{ 'selected-card': isSelected(item.rawMaterialId) }"
@click="handleRowClick(item)"
>
<!-- 多选勾选框 -->
<el-checkbox
v-if="multiple"
:checked="isSelected(item.rawMaterialId)"
@change="(val) => handleCardSelection(val, item)"
class="card-checkbox"
/>
<!-- 卡片内容（包含所有原表格字段） -->
<div class="card-content">
<div class="card-title">
<span class="name">{{ item.rawMaterialName }}</span>
<span class="code">[{{ item.rawMaterialCode }}]</span>
</div>
<div class="card-info">
<div class="info-item">规格：<span>{{ item.specification || '-' }}</span></div>
<div class="info-item">单位：<span>{{ item.unit || '-' }}</span></div>
<div class="info-item">材质：<span>{{ item.material || '-' }}</span></div>
<div class="info-item">厂家：<span>{{ item.manufacturer || '-' }}</span></div>
<div class="info-item">表面处理：<span>{{ item.surfaceTreatmentDesc || '-' }}</span></div>
<div class="info-item">锌层：<span>{{ item.zincLayer || '-' }}</span></div>
</div>
<!-- 选择按钮 -->
<el-button
type="text"
size="small"
class="select-btn"
@click.stop="handleSelect(item)"
>
选择
</el-button>
</div>
</div>
<!-- 空数据提示 -->
<div class="empty-tip" v-if="rawMaterialList.length === 0 && !loading">
暂无匹配的原材料数据
</div>
</div>
<!-- 分页 -->
<!-- 分页（保持不变） -->
<pagination
v-show="total>0"
:total="total"
@@ -141,28 +158,23 @@
</template>
<script>
// 替换为原材料接口
import { listRawMaterial } from '@/api/wms/rawMaterial';
export default {
name: 'RawMaterialSelector',
props: {
// 双向绑定值（逗号分隔的rawMaterialId字符串）
value: {
type: String,
default: ''
},
// 是否只读
readonly: {
type: Boolean,
default: false
},
// 是否允许多选
multiple: {
type: Boolean,
default: false
},
// 过滤条件（继承原料管理页面筛选逻辑）
filters: {
type: Object,
default: () => ({})
@@ -172,9 +184,8 @@ export default {
return {
dialogVisible: false,
loading: false,
rawMaterialList: [], // 原材料列表数据
rawMaterialList: [],
total: 0,
// 查询参数（同步原料管理页面核心筛选字段）
queryParams: {
pageNum: 1,
pageSize: 10,
@@ -186,14 +197,11 @@ export default {
surfaceTreatmentDesc: undefined,
zincLayer: undefined
},
// 内部选中的原材料ID数组（关联rawMaterialId）
selectedIds: [],
// 内部选中的行数据
selectedRows: []
};
},
computed: {
// 按钮显示文本
buttonText() {
if (this.multiple) {
return this.selectedIds.length > 0
@@ -203,7 +211,6 @@ export default {
return this.selectedRows[0]?.rawMaterialName || '选择原材料';
}
},
// 只读状态显示文本
displayText() {
if (this.multiple) {
return this.selectedIds.length > 0
@@ -215,28 +222,45 @@ export default {
}
},
watch: {
// 监听外部值变化，同步到内部选中状态
value: {
immediate: true,
handler(val) {
this.selectedIds = val ? val.split(',').filter(id => id) : [];
// 列表已加载时同步表格选中状态
if (this.rawMaterialList.length > 0) {
this.syncTableSelection();
}
// this.syncSelectedRows();
this.$forceUpdate(); // 新增：强制刷新视图
}
},
// 监听对话框显示，加载原材料列表
dialogVisible(val) {
if (val) {
this.getList().then(() => {
this.syncTableSelection();
});
this.getList();
}
}
},
methods: {
// 获取原材料列表（调用原料接口）
// 判断卡片是否选中
isSelected(rawMaterialId) {
return this.selectedIds.includes(rawMaterialId);
},
// 同步选中行数据
// syncSelectedRows() {
// if (this.rawMaterialList.length === 0) return;
// this.selectedRows = this.rawMaterialList.filter(item =>
// this.selectedIds.includes(item.rawMaterialId)
// );
// },
// 卡片选择事件（多选）
handleCardSelection(checked, item) {
if (checked) {
!this.selectedIds.includes(item.rawMaterialId) && this.selectedIds.push(item.rawMaterialId);
} else {
this.selectedIds = this.selectedIds.filter(id => id !== item.rawMaterialId);
}
// this.syncSelectedRows();
},
// 原有方法保持不变（仅修改同步选中状态逻辑）
async getList() {
try {
this.loading = true;
@@ -245,6 +269,7 @@ export default {
if (response.code === 200) {
this.rawMaterialList = response.rows || [];
this.total = response.total || 0;
// this.syncSelectedRows(); // 加载数据后同步选中状态
}
return this.rawMaterialList;
} catch (error) {
@@ -255,15 +280,11 @@ export default {
}
},
// 搜索（逻辑不变，同步筛选参数）
handleQuery() {
this.queryParams.pageNum = 1;
this.getList().then(() => {
this.syncTableSelection();
});
this.getList();
},
// 重置（重置为原材料查询参数）
resetQuery() {
this.queryParams = {
pageNum: 1,
@@ -276,12 +297,9 @@ export default {
surfaceTreatmentDesc: undefined,
zincLayer: undefined
};
this.getList().then(() => {
this.syncTableSelection();
});
this.getList();
},
// 行点击事件（单选直接确认）
handleRowClick(row) {
if (!this.multiple) {
this.selectedIds = [row.rawMaterialId];
@@ -290,20 +308,12 @@ export default {
}
},
// 选择项变化（多选）
handleSelectionChange(rows) {
this.selectedRows = rows;
this.selectedIds = rows.map(row => row.rawMaterialId);
},
// 单个选择按钮（多选切换选中状态，单选直接确认）
handleSelect(row) {
if (this.multiple) {
const index = this.selectedIds.indexOf(row.rawMaterialId);
index > -1
? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1))
: (this.selectedIds.push(row.rawMaterialId), this.selectedRows.push(row));
this.syncTableSelection();
} else {
this.selectedIds = [row.rawMaterialId];
this.selectedRows = [row];
@@ -311,29 +321,17 @@ export default {
}
},
// 同步表格选中状态
syncTableSelection() {
this.$nextTick(() => {
if (this.multiple && this.$refs.table) {
this.rawMaterialList.forEach(row => {
const isSelected = this.selectedIds.includes(row.rawMaterialId);
this.$refs.table.toggleRowSelection(row, isSelected);
});
}
});
},
// 确认选择（触发v-model更新和change事件）
confirmSelection() {
const emitValue = this.selectedIds.join(',');
this.$emit('input', emitValue);
this.$emit('change', emitValue, this.selectedRows);
this.$forceUpdate(); // 新增：强制刷新视图
this.dialogVisible = false;
},
// 关闭对话框（恢复原始选中状态）
handleClose() {
this.selectedIds = this.value ? this.value.split(',').filter(id => id) : [];
// this.syncSelectedRows();
this.dialogVisible = false;
}
}
@@ -347,7 +345,7 @@ export default {
.search-form {
margin-bottom: 20px;
flex-wrap: wrap; // 适配多筛选字段换行
flex-wrap: wrap;
}
.readonly-text {
@@ -359,11 +357,117 @@ export default {
::v-deep .el-dialog__body {
padding: 20px;
overflow-x: auto; // 适配宽表格横向滚动
overflow-x: auto;
}
::v-deep .el-form-item {
margin-bottom: 15px;
margin-right: 15px;
}
/* 卡片容器样式 */
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 20px;
margin-bottom: 20px;
min-height: 400px;
padding: 10px;
}
/* 卡片样式 */
.material-card {
border: 1px solid #e6e6e6;
border-radius: 8px;
padding: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background: #fff;
&:hover {
border-color: #409eff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}
}
/* 选中卡片样式 */
.selected-card {
border-color: #409eff;
background-color: #f0f7ff;
}
/* 多选勾选框位置 */
.card-checkbox {
position: absolute;
top: 16px;
right: 16px;
}
/* 卡片内容样式 */
.card-content {
margin-right: 24px; /* 给多选框留空间 */
}
.card-title {
display: flex;
align-items: center;
margin-bottom: 12px;
font-weight: 500;
}
.name {
font-size: 16px;
color: #1989fa;
margin-right: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.code {
font-size: 14px;
color: #909399;
}
.card-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
font-size: 14px;
color: #606266;
}
.info-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-item span {
color: #303133;
}
/* 选择按钮样式 */
.select-btn {
position: absolute;
bottom: 16px;
right: 16px;
color: #409eff;
&:hover {
color: #66b1ff;
}
}
/* 空数据提示 */
.empty-tip {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
height: 400px;
color: #909399;
font-size: 16px;
}
</style>

4
klp-ui/src/views/login.vue
View File

@@ -145,8 +145,8 @@ export default {
}
this.$store.dispatch("Login", this.loginForm).then(() => {
// this.$store.dispatch('category/getCategoryList');
this.$store.dispatch('category/getProductMap');
this.$store.dispatch('category/getRawMaterialMap');
// this.$store.dispatch('category/getProductMap');
// this.$store.dispatch('category/getRawMaterialMap');
// this.$store.dispatch('category/getBomMap');
// this.$store.dispatch('finance/getFinancialAccounts');
// this.$store.dispatch('craft/getProcessList');