fengyuan_yang
3 days ago
4 changed files with 1383 additions and 0 deletions
-
14src/api/report/inboundNotificationReport.js
-
14src/api/report/outboundNotificationReport.js
-
670src/views/modules/report/inboundNotificationReport.vue
-
685src/views/modules/report/outboundNotificationReport.vue
@ -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'); |
||||
@ -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'); |
||||
@ -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> |
||||
@ -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
Reference in new issue