Browse Source

2025-12-09

实时库存管理-》增加"规格型号"的筛选
master
fengyuan_yang 4 months ago
parent
commit
4b132cf652
  1. 379
      src/views/modules/print/rePrintPoPart.vue

379
src/views/modules/print/rePrintPoPart.vue

@ -1,20 +1,58 @@
<template>
<div class="mod-config">
<el-form :inline="true" label-position="top" :model="searchData">
<!-- 条件查询 -->
<el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover">
<div slot="header" class="search-header">
<div class="header-left">
<i class="el-icon-search"></i>
<span class="header-title">Search</span>
</div>
<div class="header-right">
<el-button
type="text"
size="small"
@click="toggleSearchExpand"
class="collapse-btn">
<span>{{ searchExpanded ? '收起' : '展开' }}</span>
<i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
</el-button>
</div>
</div>
<el-form
:inline="true"
label-position="top"
:model="searchData"
class="search-form"
@keyup.enter.native="getMainData">
<!-- 所有查询条件 - 可展开/收起 -->
<template v-if="searchExpanded">
<!-- 第一行 -->
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="标签条码">
<el-input v-model="searchData.rollNo" clearable style="width: 120px">
</el-input>
<el-input v-model="searchData.rollNo" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="物料编码">
<el-input v-model="searchData.partNo" clearable style="width: 120px">
</el-input>
<el-input v-model="searchData.partNo" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="物料名称">
<el-input v-model="searchData.partDescription" clearable style="width: 200px">
</el-input>
<el-input v-model="searchData.partDescription" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="规格型号">
<el-input v-model="searchData.spec" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="仓库">
<el-select v-model="searchData.warehouseIdList" style="width: 200px" multiple collapse-tags clearable placeholder="请选择仓库">
<el-select v-model="searchData.warehouseIdList" multiple collapse-tags clearable placeholder="请选择">
<el-option
v-for="item in warehouseList"
:key="item.warehouseId"
@ -23,16 +61,24 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="库位号">
<el-input v-model="searchData.locationId" clearable style="width: 100px">
</el-input>
<el-input v-model="searchData.locationId" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="批次号">
<el-input v-model="searchData.batchNo" clearable style="width: 80px">
</el-input>
<el-input v-model="searchData.batchNo" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="状态">
<el-select v-model="searchData.statusList" style="width: 150px" multiple collapse-tags clearable placeholder="请选择状态">
<el-select v-model="searchData.statusList" multiple collapse-tags clearable placeholder="请选择">
<el-option label="待检" value="待检"></el-option>
<el-option label="待入" value="待入"></el-option>
<el-option label="在库" value="在库"></el-option>
@ -41,31 +87,72 @@
<el-option label="出库" value="出库"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" :model="searchData">
</el-col>
<el-col :span="4">
<el-form-item label="来源单据类型">
<el-input v-model="searchData.orderref0" clearable style="width: 200px">
</el-input>
<el-input v-model="searchData.orderref0" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="来源单据号">
<el-input v-model="searchData.orderref1" clearable style="width: 200px">
</el-input>
<el-input v-model="searchData.orderref1" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="备注说明">
<el-input v-model="searchData.remark" clearable style="width: 200px">
</el-input>
</el-form-item>
<el-form-item label="库存总数:">
<el-input v-model="totalQty" disabled style="width: 120px">
</el-input>
<el-input v-model="searchData.remark" placeholder="请输入" clearable></el-input>
</el-form-item>
<el-form-item style="margin-top: 5px;margin-top: 20px">
<el-button @click="getMainData()" type="primary">查询</el-button>
<el-button @click="printLabelModel()" type="primary">打印</el-button>
<el-button @click="openAttributeChangeDialog()" type="warning">属性变动</el-button>
<el-button @click="freezeStatus()" type="primary">冻结</el-button>
</el-col>
<el-col :span="4">
<el-form-item label="库存总数">
<el-input v-model="totalQty" disabled></el-input>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 操作按钮区域 -->
<el-row :gutter="16">
<el-col :span="24">
<div class="search-actions">
<div class="action-left">
<el-button
type="primary"
icon="el-icon-search"
@click="getMainData">
查询
</el-button>
<el-button
icon="el-icon-refresh-left"
@click="resetSearch">
重置
</el-button>
</div>
<div class="action-right">
<el-button
type="primary"
icon="el-icon-printer"
@click="printLabelModel">
打印
</el-button>
<el-button
type="warning"
icon="el-icon-edit"
@click="openAttributeChangeDialog">
属性变动
</el-button>
<el-button
type="primary"
icon="el-icon-lock"
@click="freezeStatus">
冻结
</el-button>
</div>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<el-table
:height="height"
@ -427,16 +514,20 @@ export default {
data() {
return {
height: 450,
searchExpanded: true,
searchData: {
userName: this.$store.state.user.name,
partNo:'',
partDescription:'',
spec:'',
warehouseIdList:[],
locationId:'',
rollNo:'',
statusList:['在库'],
orderref0:'',
orderref1:'',
batchNo:'',
remark:'',
page: 1,
limit: 10,
},
@ -887,7 +978,7 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.height = window.innerHeight - 200;
this.height = window.innerHeight - 240;
})
//
this.getWarehouseList();
@ -896,6 +987,32 @@ export default {
// this.getDataList()
},
methods: {
// /
toggleSearchExpand() {
this.searchExpanded = !this.searchExpanded;
},
//
resetSearch() {
this.searchData = {
userName: this.$store.state.user.name,
partNo: '',
partDescription: '',
spec: '',
warehouseIdList: [],
locationId: '',
rollNo: '',
statusList: ['在库'],
orderref0: '',
orderref1: '',
batchNo: '',
remark: '',
page: 1,
limit: 10,
};
this.pageIndex = 1;
this.getMainData();
},
//
printRoll(val) {
@ -1337,6 +1454,206 @@ export default {
float: right;
}
/* 搜索卡片样式 - 参考IPQC检验页面 */
.search-card {
margin-bottom: 16px;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
}
.search-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.search-card /deep/ .el-card__header {
padding: 5px 20px;
background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
border-bottom: none;
}
.search-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-left {
display: flex;
align-items: center;
color: #fff;
}
.header-left i {
font-size: 16px;
margin-right: 8px;
}
.header-title {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.header-right {
color: #fff;
}
.collapse-btn {
color: #fff;
font-weight: 500;
transition: all 0.3s ease;
}
.collapse-btn:hover {
opacity: 0.8;
}
.collapse-btn i {
margin-left: 4px;
}
.search-form {
padding: 6px 0;
min-height: 0;
}
/* 卡片主体样式 */
.search-card /deep/ .el-card__body {
padding: 10px;
transition: all 0.3s ease;
}
/* 收起时的样式 */
.search-card.collapsed /deep/ .el-card__body {
padding: 10px 20px;
}
.search-form /deep/ .el-form-item {
margin-bottom: 12px;
}
.search-form /deep/ .el-form-item__label {
font-weight: 500;
color: #606266;
padding-bottom: 4px;
}
.search-form /deep/ .el-input__inner,
.search-form /deep/ .el-textarea__inner {
border-radius: 6px;
border: 1px solid #DCDFE6;
transition: all 0.3s ease;
}
.search-form /deep/ .el-input__inner:focus,
.search-form /deep/ .el-textarea__inner:focus {
border-color: #9ac3d0;
box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
}
.search-form /deep/ .el-select {
width: 100%;
}
.search-form /deep/ .el-date-editor.el-input {
width: 100%;
}
/* 操作按钮区域 */
.search-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0 2px 0;
}
/* 展开时显示上边框 */
.search-card:not(.collapsed) .search-actions {
border-top: 1px solid #f0f0f0;
margin-top: 6px;
}
/* 收起时不显示上边框和上边距 */
.search-card.collapsed .search-actions {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.action-left,
.action-right {
display: flex;
gap: 8px;
}
.search-actions .el-button {
border-radius: 4px;
padding: 5px 10px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
}
.search-actions .el-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.search-actions .el-button--primary {
background: #60aeff;
border-color: #60aeff;
}
.search-actions .el-button--primary:hover {
background: #7dbdff;
border-color: #7dbdff;
}
.search-actions .el-button--success {
background: #67C23A;
border-color: #67C23A;
}
.search-actions .el-button--success:hover {
background: #85ce61;
border-color: #85ce61;
}
.search-actions .el-button--danger {
background: #F56C6C;
border-color: #F56C6C;
}
.search-actions .el-button--danger:hover {
background: #f78989;
border-color: #f78989;
}
.search-actions .el-button--warning {
background: #E6A23C;
border-color: #E6A23C;
}
.search-actions .el-button--warning:hover {
background: #ebb563;
border-color: #ebb563;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.search-actions {
flex-direction: column;
gap: 10px;
}
.action-left,
.action-right {
width: 100%;
justify-content: center;
}
}
/* 标签打印对话框样式 */
.print-dialog {
/deep/ .el-dialog__header {

Loading…
Cancel
Save