fengyuan_yang
/
boying-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2026-01-09 

新增收货入库任务、拣货出库任务
master
fengyuan_yang 3 days ago
parent
606fd68d10
commit
371ef0252a
4 changed files with 1383 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/api/report/inboundNotificationReport.js
  2. 14
      src/api/report/outboundNotificationReport.js
  3. 670
      src/views/modules/report/inboundNotificationReport.vue
  4. 685
      src/views/modules/report/outboundNotificationReport.vue

14
src/api/report/inboundNotificationReport.js
View File

@ -0,0 +1,14 @@
import { createAPI } from "@/utils/httpRequest.js";
// -------------收货入库任务报表--------------
/**
* 查询收货入库任务报表数据（分页）
* @param {Object} data 查询条件
*/
export const searchInboundNotificationReport = data => createAPI(`/report/inboundNotificationReport/list`, 'post', data);
/**
* 获取用户可访问的site列表
*/
export const getSiteList = () => createAPI(`/report/inboundNotificationReport/getSiteList`, 'get');

14
src/api/report/outboundNotificationReport.js
View File

@ -0,0 +1,14 @@
import { createAPI } from "@/utils/httpRequest.js";
// -------------拣货出库任务报表--------------
/**
* 查询拣货出库任务报表数据（分页）
* @param {Object} data 查询条件
*/
export const searchOutboundNotificationReport = data => createAPI(`/report/outboundNotificationReport/list`, 'post', data);
/**
* 获取用户可访问的site列表
*/
export const getSiteList = () => createAPI(`/report/outboundNotificationReport/getSiteList`, 'get');

670
src/views/modules/report/inboundNotificationReport.vue
View File

@ -0,0 +1,670 @@
<template>
<div class="mod-config">
<!-- 条件查询 -->
<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">收货入库任务</span>
</div>
<div class="header-right">
<el-button
type="text"
size="small"
@click="toggleSearchExpand"
class="collapse-btn">
<i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
{{ searchExpanded ? '收起' : '展开' }}
</el-button>
</div>
</div>
<el-form
:inline="true"
label-position="top"
:model="searchData"
class="search-form"
@keyup.enter.native="getData">
<!-- 所有查询条件 - 可展开/收起 -->
<template v-if="searchExpanded">
<!-- 第一行 -->
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="工厂编码">
<el-select v-model="searchData.site" placeholder="请选择工厂" clearable filterable style="width: 100%">
<el-option
v-for="item in siteList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="入库单号">
<el-input v-model="searchData.orderNo" placeholder="请输入入库单号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="单据类型">
<el-select v-model="searchData.orderType" placeholder="请选择单据类型" clearable style="width: 100%">
<el-option label="全部" value=""></el-option>
<el-option label="采购入库" value="采购入库"></el-option>
<el-option label="生产入库" value="生产入库"></el-option>
<el-option label="其他入库" value="其他入库"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="单据状态">
<el-select v-model="searchData.orderStatus" placeholder="请选择单据状态" clearable style="width: 100%">
<el-option label="全部" value=""></el-option>
<el-option label="草稿" value="草稿"></el-option>
<el-option label="编辑中" value="编辑中"></el-option>
<el-option label="待入库" value="待入库"></el-option>
<el-option label="已入库" value="已入库"></el-option>
<el-option label="已关闭" value="已关闭"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="供应商编码">
<el-input v-model="searchData.supplierId" placeholder="请输入供应商编码" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="供应商名称">
<el-input v-model="searchData.supplierName" 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.partNo" placeholder="请输入物料编码" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="物料名称">
<el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="要求入库日期(起)">
<el-date-picker
v-model="searchData.startDate"
type="date"
placeholder="开始日期"
value-format="yyyy-MM-dd"
style="width: 100%">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="要求入库日期(止)">
<el-date-picker
v-model="searchData.endDate"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
style="width: 100%">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="关联单号">
<el-input v-model="searchData.queryRelatedOrderNo" placeholder="请输入关联单号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="关联单行号">
<el-input v-model="searchData.queryRelatedOrderLineNo" placeholder="请输入关联单行号" clearable></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"
:loading="searchLoading"
@click="getData">
查询
</el-button>
<el-button
icon="el-icon-refresh-left"
@click="resetSearch">
重置
</el-button>
<download-excel
:fields="exportFields"
:data="dataList"
type="xls"
name="收货入库任务"
worksheet="数据"
class="el-button el-button--success el-button--medium">
<i class="el-icon-download"></i> 导出
</download-excel>
</div>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 数据列表 -->
<div class="section-title-bar">
<i class="el-icon-document"></i>
<span>收货入库任务列表</span>
<span class="total-count">（共 {{ totalPage }} 条）</span>
</div>
<el-table
ref="dataTable"
:height="tableHeight"
:data="dataList"
border
v-loading="dataListLoading"
style="width: 100%;">
<el-table-column
type="index"
header-align="center"
align="center"
width="60"
label="序号">
</el-table-column>
<el-table-column
v-for="(item, index) in columnList"
:key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:header-align="item.headerAlign"
:show-overflow-tooltip="item.columnProp !== 'completionRate'"
:align="item.align"
:min-width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<!-- 完成率列使用进度条显示 -->
<template v-if="item.columnProp === 'completionRate'">
<el-progress
:percentage="parseCompletionRate(scope.row.completionRate)"
:color="getProgressColor(parseCompletionRate(scope.row.completionRate))"
:stroke-width="16"
:text-inside="true"
style="width: 100%;">
</el-progress>
</template>
<!-- 其他列正常显示 -->
<template v-else>
<span
:class="{
'status-pending': scope.row[item.columnProp] === '待入库',
'status-done': scope.row[item.columnProp] === '已入库',
'status-closed': scope.row[item.columnProp] === '已关闭',
'status-draft': scope.row[item.columnProp] === '草稿' || scope.row[item.columnProp] === '编辑中'
}">
{{ scope.row[item.columnProp] }}
</span>
</template>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top: 0px"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[20, 50, 100, 200, 500]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
import { searchInboundNotificationReport, getSiteList } from "@/api/report/inboundNotificationReport.js";
export default {
name: "inboundNotificationReport",
data() {
return {
// 搜索条件
searchData: {
site: '',
orderNo: '',
orderType: '',
orderStatus: '待入库',
supplierId: '',
supplierName: '',
partNo: '',
partDesc: '',
startDate: '',
endDate: '',
queryRelatedOrderNo: '',
queryRelatedOrderLineNo: ''
},
// Site列表
siteList: [],
// 搜索展开状态
searchExpanded: true,
// 加载状态
searchLoading: false,
dataListLoading: false,
// 数据列表
dataList: [],
// 分页
pageIndex: 1,
pageSize: 50,
totalPage: 0,
// 表格高度
tableHeight: 400,
// 列定义
columnList: [
{ columnProp: 'orderNo', columnLabel: '入库单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'orderType', columnLabel: '单据类型', columnWidth: '100', headerAlign: 'center', align: 'center' },
{ columnProp: 'orderStatus', columnLabel: '单据状态', columnWidth: '100', headerAlign: 'center', align: 'center' },
{ columnProp: 'completionRate', columnLabel: '完成率', columnWidth: '120', headerAlign: 'center', align: 'center' },
{ columnProp: 'supplierId', columnLabel: '供应商编码', columnWidth: '120', headerAlign: 'center', align: 'left' },
{ columnProp: 'supplierName', columnLabel: '供应商名称', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'requiredInboundDate', columnLabel: '要求入库日期', columnWidth: '120', headerAlign: 'center', align: 'center' },
{ columnProp: 'detailRelatedOrderNo', columnLabel: '关联单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'detailRelatedOrderLineNo', columnLabel: '关联单行号', columnWidth: '100', headerAlign: 'center', align: 'left' },
{ columnProp: 'inWarehouseName', columnLabel: '入库仓库', columnWidth: '100', headerAlign: 'center', align: 'center' },
{ columnProp: 'detailPartNo', columnLabel: '物料编码', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'detailPartDesc', columnLabel: '物料名称', columnWidth: '200', headerAlign: 'center', align: 'left' },
{ columnProp: 'umName', columnLabel: '单位', columnWidth: '80', headerAlign: 'center', align: 'center' },
{ columnProp: 'requiredQty', columnLabel: '要求数量', columnWidth: '100', headerAlign: 'center', align: 'right' },
{ columnProp: 'actualInQty', columnLabel: '实际入库数量', columnWidth: '120', headerAlign: 'center', align: 'right' },
{ columnProp: 'rollNo', columnLabel: '卷标签', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'inBatchNo', columnLabel: '批次号', columnWidth: '120', headerAlign: 'center', align: 'left' },
{ columnProp: 'detailInWarehouseName', columnLabel: '明细入库仓库', columnWidth: '120', headerAlign: 'center', align: 'center' },
{ columnProp: 'createdBy', columnLabel: '创建人', columnWidth: '100', headerAlign: 'center', align: 'center' },
{ columnProp: 'createdDate', columnLabel: '创建时间', columnWidth: '150', headerAlign: 'center', align: 'center' },
{ columnProp: 'remarks', columnLabel: '备注', columnWidth: '200', headerAlign: 'center', align: 'left' }
],
// 导出字段
exportFields: {
'入库单号': 'orderNo',
'单据类型': 'orderType',
'单据状态': 'orderStatus',
'完成率': 'completionRate',
'供应商编码': 'supplierId',
'供应商名称': 'supplierName',
'要求入库日期': 'requiredInboundDate',
'关联单号': 'relatedOrderNo',
'入库仓库': 'inWarehouseName',
'物料编码': 'detailPartNo',
'物料名称': 'detailPartDesc',
'单位': 'umName',
'要求数量': 'requiredQty',
'实际入库数量': 'actualInQty',
'卷标签': 'rollNo',
'批次号': 'inBatchNo',
'明细入库仓库': 'detailInWarehouseName',
'创建人': 'createdBy',
'创建时间': 'createdDate',
'备注': 'remarks'
}
};
},
created() {
this.getSiteList();
this.calculateTableHeight();
window.addEventListener('resize', this.calculateTableHeight);
},
beforeDestroy() {
window.removeEventListener('resize', this.calculateTableHeight);
},
methods: {
// 计算表格高度
calculateTableHeight() {
this.$nextTick(() => {
const windowHeight = window.innerHeight;
// 根据搜索条件展开状态动态计算
const headerHeight = this.searchExpanded ? 308 : 186;
this.tableHeight = windowHeight - headerHeight - 105;
});
},
// 切换搜索展开/收起
toggleSearchExpand() {
this.searchExpanded = !this.searchExpanded;
this.calculateTableHeight();
},
// 获取Site列表
getSiteList() {
getSiteList().then(({ data }) => {
if (data && data.code === 0) {
this.siteList = data.siteList || [];
// 如果有权限的site，默认选择第一个
if (this.siteList.length > 0) {
this.searchData.site = this.siteList[0];
}
}
}).catch(err => {
console.error('获取Site列表失败:', err);
});
},
// 查询数据
getData() {
this.searchLoading = true;
this.dataListLoading = true;
const params = {
...this.searchData,
page: this.pageIndex,
limit: this.pageSize
};
searchInboundNotificationReport(params).then(({ data }) => {
this.searchLoading = false;
this.dataListLoading = false;
if (data && data.code === 0) {
this.dataList = data.page.list || [];
this.totalPage = data.page.totalCount || 0;
} else {
this.dataList = [];
this.totalPage = 0;
this.$message.error(data.msg || '查询失败');
}
}).catch(err => {
console.error(err);
this.searchLoading = false;
this.dataListLoading = false;
this.$message.error('查询异常：' + err.message);
});
},
// 重置搜索条件
resetSearch() {
this.searchData = {
site: this.siteList.length > 0 ? this.siteList[0] : '',
orderNo: '',
orderType: '',
orderStatus: '待入库',
supplierId: '',
supplierName: '',
partNo: '',
partDesc: '',
startDate: '',
endDate: '',
queryRelatedOrderNo: '',
queryRelatedOrderLineNo: ''
};
this.pageIndex = 1;
},
// 分页处理
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getData();
},
currentChangeHandle(val) {
this.pageIndex = val;
this.getData();
},
// 解析完成率字符串为数字
parseCompletionRate(rateStr) {
if (!rateStr) return 0;
const num = parseFloat(rateStr.replace('%', ''));
return isNaN(num) ? 0 : Math.min(num, 100);
},
// 根据完成率获取进度条颜色
getProgressColor(percentage) {
if (percentage >= 100) {
return '#67C23A'; // 绿色 - 已完成
} else if (percentage >= 80) {
return '#409EFF'; // 蓝色 - 接近完成
} else if (percentage >= 50) {
return '#E6A23C'; // 橙色 - 进行中
} else {
return '#F56C6C'; // 红色 - 刚开始
}
}
}
};
</script>
<style scoped>
/* 搜索卡片样式 */
.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 {
color: #f0f0f0;
transform: translateY(-1px);
}
.collapse-btn i {
transition: transform 0.3s ease;
}
/* 搜索表单样式 */
.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-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 {
display: flex;
gap: 8px;
align-items: center;
}
.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;
}
/* 区域标题栏样式 */
.section-title-bar {
display: flex;
align-items: center;
padding: 8px 12px;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
border-radius: 4px;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #303133;
}
.section-title-bar i {
font-size: 16px;
margin-right: 8px;
color: #409eff;
}
.section-title-bar .total-count {
margin-left: 10px;
font-size: 12px;
font-weight: normal;
color: #909399;
}
/* 状态样式 */
.status-pending {
color: #E6A23C;
font-weight: 600;
}
.status-done {
color: #67C23A;
font-weight: 600;
}
.status-closed {
color: #909399;
font-weight: 600;
}
.status-draft {
color: #409EFF;
font-weight: 600;
}
/* 表格样式 */
/deep/ .el-table th {
background-color: #f5f7fa;
color: #303133;
font-weight: 600;
}
/deep/ .el-table tr:hover > td {
background-color: #f5f7fa !important;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.search-actions {
flex-direction: column;
gap: 10px;
}
.action-left {
width: 100%;
justify-content: center;
}
}
</style>

685
src/views/modules/report/outboundNotificationReport.vue
View File

@ -0,0 +1,685 @@
<template>
<div class="mod-config">
<!-- 条件查询 -->
<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">拣货出库任务</span>
</div>
<div class="header-right">
<el-button
type="text"
size="small"
@click="toggleSearchExpand"
class="collapse-btn">
<i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
{{ searchExpanded ? '收起' : '展开' }}
</el-button>
</div>
</div>
<el-form
:inline="true"
label-position="top"
:model="searchData"
class="search-form"
@keyup.enter.native="getData">
<!-- 所有查询条件 - 可展开/收起 -->
<template v-if="searchExpanded">
<!-- 第一行 -->
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="工厂编码">
<el-select v-model="searchData.site" placeholder="请选择工厂" clearable filterable style="width: 100%">
<el-option
v-for="item in siteList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="出库单号">
<el-input v-model="searchData.orderNo" placeholder="请输入出库单号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="单据类型">
<el-select v-model="searchData.orderType" placeholder="请选择单据类型" clearable style="width: 100%">
<el-option label="全部" value=""></el-option>
<el-option label="销售出库" value="销售出库"></el-option>
<el-option label="生产领料" value="生产领料"></el-option>
<el-option label="其他出库" value="其他出库"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="单据状态">
<el-select v-model="searchData.orderStatus" placeholder="请选择单据状态" clearable style="width: 100%">
<el-option label="全部" value=""></el-option>
<el-option label="草稿" value="草稿"></el-option>
<el-option label="编辑中" value="编辑中"></el-option>
<el-option label="待出库" value="待出库"></el-option>
<el-option label="已出库" value="已出库"></el-option>
<el-option label="已关闭" value="已关闭"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="客户编码">
<el-input v-model="searchData.customerId" placeholder="请输入客户编码" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="客户名称">
<el-input v-model="searchData.customerName" 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.partNo" placeholder="请输入物料编码" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="物料名称">
<el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="要求出库日期(起)">
<el-date-picker
v-model="searchData.startDate"
type="date"
placeholder="开始日期"
value-format="yyyy-MM-dd"
style="width: 100%">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="要求出库日期(止)">
<el-date-picker
v-model="searchData.endDate"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
style="width: 100%">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="关联单号">
<el-input v-model="searchData.queryRelatedOrderNo" placeholder="请输入关联单号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="关联单行号">
<el-input v-model="searchData.queryRelatedOrderLineNo" 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.queryOutBatchNo" placeholder="请输入合约号码" clearable></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"
:loading="searchLoading"
@click="getData">
查询
</el-button>
<el-button
icon="el-icon-refresh-left"
@click="resetSearch">
重置
</el-button>
<download-excel
:fields="exportFields"
:data="dataList"
type="xls"
name="拣货出库任务"
worksheet="数据"
class="el-button el-button--success el-button--medium">
<i class="el-icon-download"></i> 导出
</download-excel>
</div>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 数据列表 -->
<div class="section-title-bar">
<i class="el-icon-document"></i>
<span>拣货出库任务列表</span>
<span class="total-count">（共 {{ totalPage }} 条）</span>
</div>
<el-table
ref="dataTable"
:height="tableHeight"
:data="dataList"
border
v-loading="dataListLoading"
style="width: 100%;">
<el-table-column
type="index"
header-align="center"
align="center"
width="60"
label="序号">
</el-table-column>
<el-table-column
v-for="(item, index) in columnList"
:key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:header-align="item.headerAlign"
:show-overflow-tooltip="item.columnProp !== 'completionRate'"
:align="item.align"
:min-width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<!-- 完成率列使用进度条显示 -->
<template v-if="item.columnProp === 'completionRate'">
<el-progress
:percentage="parseCompletionRate(scope.row.completionRate)"
:color="getProgressColor(parseCompletionRate(scope.row.completionRate))"
:stroke-width="16"
:text-inside="true"
style="width: 100%;">
</el-progress>
</template>
<!-- 其他列正常显示 -->
<template v-else>
<span
:class="{
'status-pending': scope.row[item.columnProp] === '待出库',
'status-done': scope.row[item.columnProp] === '已出库',
'status-closed': scope.row[item.columnProp] === '已关闭',
'status-draft': scope.row[item.columnProp] === '草稿' || scope.row[item.columnProp] === '编辑中'
}">
{{ scope.row[item.columnProp] }}
</span>
</template>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top: 0px"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[20, 50, 100, 200, 500]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
import { searchOutboundNotificationReport, getSiteList } from "@/api/report/outboundNotificationReport.js";
export default {
name: "outboundNotificationReport",
data() {
return {
// 搜索条件
searchData: {
site: '',
orderNo: '',
orderType: '',
orderStatus: '待出库',
customerId: '',
customerName: '',
partNo: '',
partDesc: '',
startDate: '',
endDate: '',
queryRelatedOrderNo: '',
queryRelatedOrderLineNo: '',
queryOutBatchNo: ''
},
// Site列表
siteList: [],
// 搜索展开状态
searchExpanded: true,
// 加载状态
searchLoading: false,
dataListLoading: false,
// 数据列表
dataList: [],
// 分页
pageIndex: 1,
pageSize: 50,
totalPage: 0,
// 表格高度
tableHeight: 400,
// 列定义
columnList: [
{ columnProp: 'orderNo', columnLabel: '出库单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'orderType', columnLabel: '单据类型', columnWidth: '100', headerAlign: 'center', align: 'center' },
{ columnProp: 'orderStatus', columnLabel: '单据状态', columnWidth: '100', headerAlign: 'center', align: 'center' },
{ columnProp: 'completionRate', columnLabel: '完成率', columnWidth: '120', headerAlign: 'center', align: 'center' },
{ columnProp: 'customerId', columnLabel: '客户编码', columnWidth: '120', headerAlign: 'center', align: 'left' },
{ columnProp: 'customerName', columnLabel: '客户名称', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'customerAbb', columnLabel: '客户简称', columnWidth: '100', headerAlign: 'center', align: 'left' },
{ columnProp: 'requiredOutboundDate', columnLabel: '要求出库日期', columnWidth: '120', headerAlign: 'center', align: 'center' },
{ columnProp: 'detailRelatedOrderNo', columnLabel: '关联单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'detailRelatedOrderLineNo', columnLabel: '关联单行号', columnWidth: '100', headerAlign: 'center', align: 'left' },
{ columnProp: 'customerOrderNo', columnLabel: '客户订单号', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'outWarehouseName', columnLabel: '出库仓库', columnWidth: '100', headerAlign: 'center', align: 'center' },
{ columnProp: 'detailPartNo', columnLabel: '物料编码', columnWidth: '150', headerAlign: 'center', align: 'left' },
{ columnProp: 'detailPartDesc', columnLabel: '物料名称', columnWidth: '200', headerAlign: 'center', align: 'left' },
{ columnProp: 'umName', columnLabel: '单位', columnWidth: '80', headerAlign: 'center', align: 'center' },
{ columnProp: 'requiredQty', columnLabel: '要求数量', columnWidth: '100', headerAlign: 'center', align: 'right' },
{ columnProp: 'actualOutQty', columnLabel: '实际出库数量', columnWidth: '120', headerAlign: 'center', align: 'right' },
{ columnProp: 'outBatchNo', columnLabel: '合约号', columnWidth: '120', headerAlign: 'center', align: 'left' },
{ columnProp: 'detailOutWarehouseName', columnLabel: '明细出库仓库', columnWidth: '120', headerAlign: 'center', align: 'center' },
{ columnProp: 'inspectionFlag', columnLabel: '送检标志', columnWidth: '80', headerAlign: 'center', align: 'center' },
{ columnProp: 'createdBy', columnLabel: '创建人', columnWidth: '100', headerAlign: 'center', align: 'center' },
{ columnProp: 'createdDate', columnLabel: '创建时间', columnWidth: '150', headerAlign: 'center', align: 'center' },
{ columnProp: 'remarks', columnLabel: '备注', columnWidth: '200', headerAlign: 'center', align: 'left' }
],
// 导出字段
exportFields: {
'出库单号': 'orderNo',
'单据类型': 'orderType',
'单据状态': 'orderStatus',
'完成率': 'completionRate',
'客户编码': 'customerId',
'客户名称': 'customerName',
'客户简称': 'customerAbb',
'要求出库日期': 'requiredOutboundDate',
'关联单号': 'relatedOrderNo',
'客户订单号': 'customerOrderNo',
'出库仓库': 'outWarehouseName',
'物料编码': 'detailPartNo',
'物料名称': 'detailPartDesc',
'单位': 'umName',
'要求数量': 'requiredQty',
'实际出库数量': 'actualOutQty',
'合约号': 'outBatchNo',
'明细出库仓库': 'detailOutWarehouseName',
'送检标志': 'inspectionFlag',
'创建人': 'createdBy',
'创建时间': 'createdDate',
'备注': 'remarks'
}
};
},
created() {
this.getSiteList();
this.calculateTableHeight();
window.addEventListener('resize', this.calculateTableHeight);
},
beforeDestroy() {
window.removeEventListener('resize', this.calculateTableHeight);
},
methods: {
// 计算表格高度
calculateTableHeight() {
this.$nextTick(() => {
const windowHeight = window.innerHeight;
// 根据搜索条件展开状态动态计算
const headerHeight = this.searchExpanded ? 360 : 186;
this.tableHeight = windowHeight - headerHeight - 105;
});
},
// 切换搜索展开/收起
toggleSearchExpand() {
this.searchExpanded = !this.searchExpanded;
this.calculateTableHeight();
},
// 获取Site列表
getSiteList() {
getSiteList().then(({ data }) => {
if (data && data.code === 0) {
this.siteList = data.siteList || [];
// 如果有权限的site，默认选择第一个
if (this.siteList.length > 0) {
this.searchData.site = this.siteList[0];
}
}
}).catch(err => {
console.error('获取Site列表失败:', err);
});
},
// 查询数据
getData() {
this.searchLoading = true;
this.dataListLoading = true;
const params = {
...this.searchData,
page: this.pageIndex,
limit: this.pageSize
};
searchOutboundNotificationReport(params).then(({ data }) => {
this.searchLoading = false;
this.dataListLoading = false;
if (data && data.code === 0) {
this.dataList = data.page.list || [];
this.totalPage = data.page.totalCount || 0;
} else {
this.dataList = [];
this.totalPage = 0;
this.$message.error(data.msg || '查询失败');
}
}).catch(err => {
console.error(err);
this.searchLoading = false;
this.dataListLoading = false;
this.$message.error('查询异常：' + err.message);
});
},
// 重置搜索条件
resetSearch() {
this.searchData = {
site: this.siteList.length > 0 ? this.siteList[0] : '',
orderNo: '',
orderType: '',
orderStatus: '待出库',
customerId: '',
customerName: '',
partNo: '',
partDesc: '',
startDate: '',
endDate: '',
queryRelatedOrderNo: '',
queryRelatedOrderLineNo: '',
queryOutBatchNo: ''
};
this.pageIndex = 1;
},
// 分页处理
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getData();
},
currentChangeHandle(val) {
this.pageIndex = val;
this.getData();
},
// 解析完成率字符串为数字
parseCompletionRate(rateStr) {
if (!rateStr) return 0;
const num = parseFloat(rateStr.replace('%', ''));
return isNaN(num) ? 0 : Math.min(num, 100);
},
// 根据完成率获取进度条颜色
getProgressColor(percentage) {
if (percentage >= 100) {
return '#67C23A'; // 绿色 - 已完成
} else if (percentage >= 80) {
return '#409EFF'; // 蓝色 - 接近完成
} else if (percentage >= 50) {
return '#E6A23C'; // 橙色 - 进行中
} else {
return '#F56C6C'; // 红色 - 刚开始
}
}
}
};
</script>
<style scoped>
/* 搜索卡片样式 */
.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 {
color: #f0f0f0;
transform: translateY(-1px);
}
.collapse-btn i {
transition: transform 0.3s ease;
}
/* 搜索表单样式 */
.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-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 {
display: flex;
gap: 8px;
align-items: center;
}
.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;
}
/* 区域标题栏样式 */
.section-title-bar {
display: flex;
align-items: center;
padding: 8px 12px;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
border-radius: 4px;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #303133;
}
.section-title-bar i {
font-size: 16px;
margin-right: 8px;
color: #409eff;
}
.section-title-bar .total-count {
margin-left: 10px;
font-size: 12px;
font-weight: normal;
color: #909399;
}
/* 状态样式 */
.status-pending {
color: #E6A23C;
font-weight: 600;
}
.status-done {
color: #67C23A;
font-weight: 600;
}
.status-closed {
color: #909399;
font-weight: 600;
}
.status-draft {
color: #409EFF;
font-weight: 600;
}
/* 表格样式 */
/deep/ .el-table th {
background-color: #f5f7fa;
color: #303133;
font-weight: 600;
}
/deep/ .el-table tr:hover > td {
background-color: #f5f7fa !important;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.search-actions {
flex-direction: column;
gap: 10px;
}
.action-left {
width: 100%;
justify-content: center;
}
}
</style>
Write Preview
Loading…
Cancel
Save