feat(wms): 新增发货相关功能及优化钢卷选择逻辑
- 新增发货计划钢卷操作记录页面 - 新增发货分级管理页面 - 新增我的钢卷管理页面 - 在钢卷发货页面增加质量状态校验 - 在基础面板组件中增加质量状态选择功能 - 优化钢卷选择器筛选参数
This commit is contained in:
砂糖
370
klp-ui/src/views/wms/delivery/mycoil/index.vue
Normal file
370
klp-ui/src/views/wms/delivery/mycoil/index.vue
Normal file
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div class="coil-selector-container">
|
||||
<el-form :inline="true" :model="queryParams" class="search-form">
|
||||
<el-form-item label="卷号">
|
||||
<el-input v-model="queryParams.currentCoilNo" placeholder="请输入卷号" clearable size="small"
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料">
|
||||
<muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格">
|
||||
<memo-input storageKey="coilSpec" v-model="queryParams.specification" placeholder="请输入规格" clearable size="small"
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="材质">
|
||||
<muti-select v-model="queryParams.itemMaterial" :options="dict.type.coil_material" placeholder="请选择材质"
|
||||
clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="厂家">
|
||||
<muti-select v-model="queryParams.itemManufacturer" :options="dict.type.coil_manufacturer" placeholder="请选择厂家"
|
||||
clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 增加 row-class-name 绑定，动态设置行样式 -->
|
||||
<el-table v-loading="loading" :data="coilList" highlight-current-row height="400px"
|
||||
style="width: 100%" :row-class-name="tableRowClassName"> <!-- 新增行类名绑定 -->
|
||||
<!-- 自定义列 -->
|
||||
<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>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listMaterialCoil } from '@/api/wms/coil';
|
||||
import MemoInput from '@/components/MemoInput/index.vue';
|
||||
import MutiSelect from '@/components/MutiSelect/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'CoilSelector',
|
||||
components: {
|
||||
MemoInput,
|
||||
MutiSelect
|
||||
},
|
||||
dicts: ['coil_itemname', 'coil_material', 'coil_manufacturer'],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
coilList: [],
|
||||
total: 0,
|
||||
// 内部显隐控制变量（触发器模式下使用）
|
||||
innerVisible: false,
|
||||
// 选中的钢卷数据
|
||||
selectedCoil: null,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
currentCoilNo: null,
|
||||
grade: null,
|
||||
materialType: '成品',
|
||||
selectType: 'raw_material',
|
||||
dataType: 1 // 只查询当前数据，不查询历史数据
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: '卷号',
|
||||
align: 'center',
|
||||
prop: 'currentCoilNo',
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{ label: '质量状态', prop: 'qualityStatus' },
|
||||
{ label: '打包状态', prop: 'packingStatus' },
|
||||
// 对应edgeType
|
||||
{ label: '切边要求', prop: 'edgeRequirement' },
|
||||
// 对应packaging
|
||||
{ label: '包装要求', prop: 'packagingRequirement' },
|
||||
{
|
||||
label: '存储位置',
|
||||
align: 'center',
|
||||
prop: 'actualWarehouseName',
|
||||
width: '120',
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: '物料',
|
||||
align: 'center',
|
||||
prop: 'itemName',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
label: '规格',
|
||||
align: 'center',
|
||||
prop: 'specification',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
label: '材质',
|
||||
align: 'center',
|
||||
prop: 'material',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
label: '厂家',
|
||||
align: 'center',
|
||||
prop: 'manufacturer',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
label: '重量(t)',
|
||||
align: 'center',
|
||||
prop: 'netWeight',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
label: '库区',
|
||||
align: 'center',
|
||||
prop: 'warehouseName',
|
||||
width: '120',
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 根据模式决定对话框显隐逻辑
|
||||
dialogVisible: {
|
||||
get() {
|
||||
// 触发器模式：使用内部变量
|
||||
if (this.useTrigger) {
|
||||
return this.innerVisible;
|
||||
}
|
||||
// 非触发器模式：使用外部传入的visible属性
|
||||
return this.visible;
|
||||
},
|
||||
set(val) {
|
||||
if (this.useTrigger) {
|
||||
// 触发器模式：更新内部变量
|
||||
this.innerVisible = val;
|
||||
} else {
|
||||
// 非触发器模式：通知父组件更新
|
||||
this.$emit('update:visible', val);
|
||||
}
|
||||
}
|
||||
},
|
||||
currentUserId() {
|
||||
return this.$store.getters.id;
|
||||
},
|
||||
renderColumns() {
|
||||
// 如果有自定义列配置，使用它；否则使用默认列
|
||||
return this.coilColumn.length;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 表格行类名动态生成 - 核心：区分权限行/禁用行
|
||||
tableRowClassName({ row }) {
|
||||
// 销售受限模式下，判断当前行是否有权限
|
||||
if (this.salesRestricted && row.saleId !== this.currentUserId) {
|
||||
return 'disabled-coil-row'; // 禁用行类名
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
// 获取钢卷列表
|
||||
async getList() {
|
||||
// 如果是范围模式，直接使用传入数据
|
||||
if (this.rangeMode) {
|
||||
this.coilList = this.rangeData || [];
|
||||
this.total = this.coilList.length;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
this.loading = true;
|
||||
// 设置筛选条件
|
||||
const queryPayload = {
|
||||
...this.queryParams,
|
||||
...this.filters,
|
||||
};
|
||||
// 处于销售视角，且my视图时，只查询当前用户的钢卷
|
||||
console.log('this.salesRestricted', this.salesRestricted, this.currentTab, this.currentUserId);
|
||||
if (this.salesRestricted && this.currentTab === 'my') {
|
||||
queryPayload.saleId = this.currentUserId;
|
||||
}
|
||||
const response = await listMaterialCoil(queryPayload);
|
||||
if (response.code === 200) {
|
||||
this.coilList = response.rows || [];
|
||||
this.total = response.total || 0;
|
||||
// 如果有初始coilId，尝试匹配数据
|
||||
if (this.value && !this.selectedCoil) {
|
||||
this.matchCoilById(this.value);
|
||||
}
|
||||
} else {
|
||||
this.$message.warning(`获取钢卷列表失败：${response.msg || '未知错误'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取钢卷列表异常', error);
|
||||
this.$message.error('获取钢卷列表失败，请重试');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 搜索
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
// 重置搜索条件
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
currentCoilNo: null,
|
||||
grade: null,
|
||||
dataType: 1,
|
||||
selectType: 'raw_material',
|
||||
};
|
||||
this.getList();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coil-selector-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trigger-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// 未选择状态样式
|
||||
.no-selection {
|
||||
padding: 8px 12px;
|
||||
border: 1px dashed #dcdcdc;
|
||||
border-radius: 4px;
|
||||
color: #999;
|
||||
background-color: #f9f9f9;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
// 已选择状态样式
|
||||
.selected-coil-info {
|
||||
padding: 12px;
|
||||
border: 1px solid #e6f7ff;
|
||||
border-radius: 6px;
|
||||
background-color: #f0f9ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px 24px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-selection {
|
||||
color: #f56c6c;
|
||||
margin-left: 12px;
|
||||
padding: 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: #ff4d4f;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择按钮样式
|
||||
.select-button {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 20px;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
--el-table-row-hover-bg-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
::v-deep .el-table__row.current-row {
|
||||
background-color: var(--el-color-primary-light-8) !important;
|
||||
}
|
||||
|
||||
// 核心：禁用行样式（销售权限受限）
|
||||
::v-deep .el-table .disabled-coil-row {
|
||||
background-color: #f8f8f8 !important;
|
||||
color: #c0c4cc !important;
|
||||
cursor: not-allowed !important;
|
||||
|
||||
// 覆盖hover高亮
|
||||
&:hover>td {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
|
||||
// 覆盖当前行高亮
|
||||
&.current-row {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
|
||||
// 禁止单元格交互
|
||||
td {
|
||||
pointer-events: none;
|
||||
user-select: none; // 禁止文本选中
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// 响应式调整
|
||||
@media (max-width: 768px) {
|
||||
.selected-coil-info {
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 1 1 calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user