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

feat(发货单): 添加批量新增发货单明细功能

Browse Source 
- 新增批量新增发货单明细API接口
- 在发货单明细表格中添加批量新增按钮
- 改造CoilSelector组件支持多选功能
- 将表单中的输入框改为下拉选择框提升用户体验
This commit is contained in:
砂糖
2026-01-29 10:16:36 +08:00
parent 353cfd0089
commit c1cfcfdeca
3 changed files with 162 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
klp-ui/src/components/CoilSelector/index.vue
View File

@@ -2,23 +2,25 @@
<div class="coil-selector-container">
<div v-if="useTrigger" class="trigger-container">
<!-- 选择按钮 -->
<slot>
<el-button type="primary" size="small" @click="handleOpen" class="select-button">
<i class="el-icon-search"></i>
<span v-if="selectedCoil">
<span>{{ selectedCoil.currentCoilNo }}</span>
<span>({{ selectedCoil.itemName }})</span>
<span>[{{ selectedCoil.netWeight }}t]</span>
</span>
<span v-else>{{ placeholder }}</span>
</el-button>
</slot>
<div @click="handleOpen">
<slot>
<el-button type="primary" size="small" class="select-button">
<i class="el-icon-search"></i>
<span v-if="selectedCoil">
<span>{{ selectedCoil.currentCoilNo }}</span>
<span>({{ selectedCoil.itemName }})</span>
<span>[{{ selectedCoil.netWeight }}t]</span>
</span>
<span v-else>{{ placeholder }}</span>
</el-button>
</slot>
</div>
</div>
<el-dialog title="选择钢卷" :visible.sync="dialogVisible" :width="dialogWidth" :close-on-click-modal="false"
@close="handleClose" append-to-body>
<!-- 搜索区域 -->
<el-form v-if="!rangeMode" :inline="true" :model="queryParams" class="search-form">
<el-form v-if="!rangeMode" :model="queryParams" class="search-form">
<!-- <el-form-item label="类型">
<el-select v-model="queryParams.selectType" placeholder="请选择类型" size="small">
<el-option label="成品" value="product" />
@@ -46,7 +48,8 @@
clearable />
</el-form-item>
<el-form-item label="实际库区" v-if="orderBy">
<actual-warehouse-select v-model="queryParams.actualWarehouseId" placeholder="请选择实际库区" canSelectLevel2 canSelectDisabled />
<actual-warehouse-select v-model="queryParams.actualWarehouseId" placeholder="请选择实际库区" canSelectLevel2
canSelectDisabled />
</el-form-item>
<el-form-item>
@@ -56,8 +59,7 @@
</el-form>
<!-- 数据表格 -->
<el-table v-if="!salesRestricted" v-loading="loading" :data="coilList" @row-click="handleRowClick"
highlight-current-row height="400px" style="width: 100%">
<el-table v-if="!salesRestricted" v-loading="loading" :data="coilList" @row-click="handleRowClick" height="400px" style="width: 100%" :row-class-name="getRowClassName">
<!-- 自定义列 -->
<el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
:width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
@@ -70,9 +72,8 @@
</el-tabs>
<!-- 增加 row-class-name 绑定，动态设置行样式 -->
<el-table v-loading="loading" :data="coilList" @row-click="handleRowClick"
highlight-current-row height="400px" style="width: 100%"
:row-class-name="tableRowClassName"> <!-- 新增行类名绑定 -->
<el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" height="400px"
style="width: 100%" :row-class-name="getRowClassName">
<!-- 自定义列 -->
<el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align"
:prop="column.prop" :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
@@ -83,7 +84,19 @@
<pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
<el-table v-if="multiple && selectedCoils.length > 0" :data="selectedCoils">
<el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
:width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-button size="mini" @click="handleRemove(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleConfirm">确认选择</el-button>
<el-button @click="handleClose">取消</el-button>
</div>
</el-dialog>
@@ -162,6 +175,10 @@ export default {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
}
},
data() {
return {
@@ -187,6 +204,7 @@ export default {
},
columns: defaultColumns,
currentTab: 'my',
selectedCoils: [],
};
},
computed: {
@@ -216,6 +234,14 @@ export default {
renderColumns() {
// 如果有自定义列配置，使用它；否则使用默认列
return this.coilColumn.length > 0 ? this.coilColumn : this.columns;
},
// 已选钢卷ID集合（用于快速判断）
selectedCoilIds() {
if (this.multiple) {
return new Set(this.selectedCoils.map(item => item.coilId));
} else {
return this.selectedCoil ? new Set([this.selectedCoil.coilId]) : new Set();
}
}
},
watch: {
@@ -262,13 +288,31 @@ export default {
}
},
methods: {
// 表格行类名动态生成 - 核心：区分权限行/禁用行
tableRowClassName({ row }) {
// 动态生成表格行类名 - 综合处理选中、禁用等状态
getRowClassName({ row }) {
const classNames = [];
// 检查是否为已选中的钢卷
if (this.selectedCoilIds.has(row.coilId)) {
classNames.push('selected-coil-row');
}
// 销售受限模式下，判断当前行是否有权限
if (this.salesRestricted && row.saleId !== this.currentUserId) {
return 'disabled-coil-row'; // 禁用行类名
classNames.push('disabled-coil-row'); // 禁用行类名
}
return '';
return classNames.join(' ');
},
handleRemove(row) {
this.selectedCoils = this.selectedCoils.filter(item => item.coilId !== row.coilId);
},
handleConfirm() {
this.$emit('confirm', this.selectedCoils);
this.selectedCoils = [];
this.handleClose();
},
// 获取钢卷列表
@@ -362,8 +406,19 @@ export default {
this.$message.warning('您没有权限选择此钢卷');
return;
}
// 存储选中的钢卷数据
this.selectedCoil = row;
if (this.multiple) {
// 检查是否已经选择
if (this.selectedCoils.some(item => item.coilId === row.coilId)) {
// 再次点击删除
this.handleRemove(row);
return;
}
this.selectedCoils.push(row);
return;
// return;
} else {
this.selectedCoil = row;
}
// 触发自定义事件，通知父组件选中结果（返回完整行数据）
this.$emit('select', row);
// 触发器模式下，支持v-model双向绑定
@@ -378,6 +433,7 @@ export default {
// 清除选中状态
handleClearSelection() {
this.selectedCoil = null;
this.selectedCoils = []; // 清空多选数据
this.$emit('input', '');
this.$emit('change', '');
this.$emit('clear', true); // 触发清除事件
@@ -486,6 +542,20 @@ export default {
background-color: var(--el-color-primary-light-8) !important;
}
// 核心：已选钢卷样式（黄色背景）
::v-deep .el-table .selected-coil-row {
background-color: #fffbe6 !important; /* 浅黄色背景 */
&:hover > td {
background-color: #fff8d9 !important; /* hover时稍深一点的黄色 */
}
// 当同时是当前行时
&.current-row {
background-color: #fff8d9 !important;
}
}
// 核心：禁用行样式（销售权限受限）
::v-deep .el-table .disabled-coil-row {
background-color: #f8f8f8 !important;
@@ -507,6 +577,15 @@ export default {
pointer-events: none;
user-select: none; // 禁止文本选中
}
// 当同时是已选行时（优先级：禁用 > 已选）
&.selected-coil-row {
background-color: #f5f5f5 !important;
&:hover > td {
background-color: #f5f5f5 !important;
}
}
}
.dialog-footer {