<template>
|
<view class="container">
|
<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="productionTask">
|
<block slot="backText">返回</block>
|
<block slot="content">热处理入库</block>
|
<block slot="right">
|
<!-- 搜索按钮 -->
|
<view @click="search" class="nav-btn">
|
<image src="/static/icon/sear.png" style="width: 25px; height: 25px;" alt="搜索" />
|
</view>
|
</block>
|
</cu-custom>
|
|
<!-- 筛选弹窗 -->
|
<view style="width: 100%;">
|
<uni-popup ref="popup" background-color="#fff" :type="type">
|
<view class="popupView">
|
<!-- 基础表单校验 -->
|
<uni-forms ref="form" :modelValue="formData" validate-trigger="bind" err-show-type="undertext">
|
<uni-group title="" top="0">
|
<uni-forms-item name="type" :labelWidth="80" label="入库类型:">
|
<uni-data-select v-model="formData.type" :localdata="typeList" @change="changetypeList"
|
placeholder="请选择入库类型" />
|
</uni-forms-item>
|
<uni-forms-item name="materialNumber" :labelWidth="80" label="物料编码:">
|
<view class="input-with-scan">
|
<uni-easyinput v-model="formData.materialNumber" placeholder="请输入物料编码" />
|
</view>
|
</uni-forms-item>
|
</uni-group>
|
<uni-forms-item>
|
<view class="flex">
|
<view
|
class="cuIcon-search flex-sub bg-blue radius padding-sm margin-xs margin-left-lg margin-right-lg text-sm text-center"
|
@click="getSera">查询
|
</view>
|
<view
|
class="cuIcon-refresh flex-sub bg-white solids padding-sm margin-xs radius text-sm text-center margin-left-lg margin-right-lg"
|
@click="resetTask">重置</view>
|
</view>
|
</uni-forms-item>
|
</uni-forms>
|
</view>
|
</uni-popup>
|
</view>
|
|
|
|
<!-- 列表顶部：批量操作+状态筛选 -->
|
<view class="industrial-list-header" style="margin-top: 10px;">
|
<!-- 批量选择 -->
|
<!-- 状态快捷筛选 -->
|
<view class="status-filter">
|
<view
|
class="filter-item"
|
:class="{active: currentFilterStatus === ''}"
|
@click="filterByStatus('')"
|
>
|
全部
|
</view>
|
<view
|
class="filter-item"
|
:class="{active: currentFilterStatus === 'MATERIAL_TRANSFER_REQUEST'}"
|
@click="filterByStatus('MATERIAL_TRANSFER_REQUEST')"
|
>
|
物料拉动
|
</view>
|
<view
|
class="filter-item"
|
:class="{active: currentFilterStatus === 'PRODUCTION_INBOUND'}"
|
@click="filterByStatus('PRODUCTION_INBOUND')"
|
>
|
生产下线
|
</view>
|
<view
|
class="filter-item"
|
:class="{active: currentFilterStatus === 'HEAT_TREATMENT_INBOUND'}"
|
@click="filterByStatus('HEAT_TREATMENT_INBOUND')"
|
>
|
热处理
|
</view>
|
|
<view
|
class="filter-item"
|
:class="{active: currentFilterStatus === 'SMALL_INNER_RING'}"
|
@click="filterByStatus('SMALL_INNER_RING')"
|
>
|
小内圈
|
</view>
|
<view
|
class="filter-item"
|
:class="{active: currentFilterStatus === 'MATERIAL_INNER_TRANSFER'}"
|
@click="filterByStatus('MATERIAL_INNER_TRANSFER')"
|
>
|
内部调拨
|
</view>
|
|
<view
|
class="filter-item"
|
:class="{active: currentFilterStatus === 'PRODUCTION_UNLOADING'}"
|
@click="filterByStatus('PRODUCTION_UNLOADING')"
|
>
|
下料
|
</view>
|
</view>
|
</view>
|
|
<!-- 列表内容 -->
|
<view class="container">
|
<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="upCallback">
|
<!-- 列表信息开始 -->
|
<view class="content">
|
<uni-card
|
margin="10px"
|
spacing="1px"
|
v-for="(item,index) in msgList"
|
:key="index"
|
class="industrial-card"
|
@click="onClickProductionTask(item)"
|
>
|
<!-- 核心信息区（默认展示） -->
|
<view class="core-info">
|
<!-- 物料编码+名称 -->
|
<view class="material-info">
|
<text class="label">物料：</text>
|
<text class="code">{{ item.materialNumber }}</text>
|
<text class="name">{{ item.materialName }}</text>
|
</view>
|
|
<!-- 批次号+入库数量 -->
|
<view class="batch-qty">
|
<text class="label">批次：</text>
|
<text class="batch">{{ item.batchNumber }}</text>
|
<text class="label qty-label">数量：</text>
|
<text class="qty">{{ item.quantity }}</text>
|
</view>
|
</view>
|
|
<!-- 次要信息区（折叠展开） -->
|
<view class="expand-info" @click.stop="item.showExpand = !item.showExpand">
|
<text class="expand-btn">{{ item.showExpand ? '收起详情' : '展开详情' }}</text>
|
<uni-icons
|
:type="item.showExpand ? 'up' : 'down'"
|
size="14"
|
class="expand-icon"
|
/>
|
</view>
|
<view class="detail-info" v-if="item.showExpand">
|
<view class="detail-row">
|
<text class="detail-label">来源编码：</text>
|
<text class="detail-value">{{ item.originalCode }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">来源名称：</text>
|
<text class="detail-value">{{ item.originalName }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">线边库：</text>
|
<text class="detail-value">{{ item.warehouseId_dictText }}</text>
|
</view>
|
<view class="detail-row" >
|
<text class="detail-label">入库类型：</text>
|
<text class="detail-value">{{ item.inboundCategory_dictText }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">入库人：</text>
|
<text class="detail-value">{{ item.receiver_dictText }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">入库时间：</text>
|
<text class="detail-value">{{ formatTime(item.receiveTime) }}</text>
|
</view>
|
</view>
|
</uni-card>
|
</view>
|
</mescroll-uni>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
import { mapGetters } from "vuex";
|
|
export default {
|
mixins: [MescrollMixin], // 使用mixin
|
data() {
|
return {
|
type: 'top',
|
showAddMenu: false, // 新增下拉菜单显示状态
|
selectAll: false, // 全选状态
|
currentFilterStatus: '', // 当前筛选的状态
|
scrollLeft: 0,
|
formData: {
|
materialNumber: '',
|
type: ''
|
},
|
NavBarColor: this.NavBarColor,
|
activeColor: '#5277A6',
|
url: {
|
inboundTypeDict: "/sys/dict/getDictItems/base_line_side_warehouse,warehouse_name,id,del_flag=0%20and%20warehouse_status='1'",
|
heatTreatmentInboundList: "/lsw/materialInbound/list",
|
exportInbound: "/lsw/materialInbound/export"
|
},
|
|
upOption: {
|
page: {
|
num: 1, // 当前页码,从1开始
|
size: 10 // 每页数据的数量
|
},
|
noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据
|
empty: {
|
tip: '~ 暂无热处理入库记录 ~', // 提示
|
},
|
loading: '',
|
text: '全部',
|
isShowNoMore: false,
|
textNoMore: '已加载全部数据'
|
},
|
styles: {
|
color: '#2979FF',
|
borderColor: '#2979FF'
|
},
|
typeList: [],
|
msgList: [], // 列表数据
|
currentFilter: { // 当前筛选条件
|
type: '',
|
materialNumber: '',
|
status: ''
|
},
|
announcement1: [],
|
msg1Count: 0,
|
msg2Count: 0,
|
msg1Title: ""
|
}
|
},
|
computed: {
|
...mapGetters(["currentLineName", "username", "currentLineId"]),
|
top() {
|
return this.CustomBar * 2 + 180
|
},
|
style() {
|
var StatusBar = this.StatusBar;
|
var CustomBar = this.CustomBar;
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
return style
|
},
|
},
|
|
|
onShow() {
|
if (this.mescroll) {
|
this.mescroll.resetUpScroll()
|
}
|
},
|
|
created() {
|
this.getTypeList()
|
},
|
methods: {
|
/**
|
* 流程分类列表事件
|
*/
|
getTypeList() {
|
this.$http.get(this.url.inboundTypeDict).then(res => {
|
// 设置列表数据
|
if (res.data.success) {
|
// 确保返回格式为[{value: '编码', text: '名称'}]
|
this.typeList = res.data.result.map(item => ({
|
value: item.value,
|
text: item.text
|
}));
|
}
|
}).catch(err => {
|
console.error('获取入库类型失败：', err);
|
uni.showToast({
|
title: '获取入库类型失败',
|
icon: 'none',
|
duration: 2000
|
});
|
})
|
},
|
|
// 处理入库类型选择变化
|
changetypeList(e) {
|
this.formData.type = e;
|
},
|
|
|
|
/**
|
* 查看入库详情
|
*/
|
onClickProductionTask(item) {
|
uni.navigateTo({
|
url: `/pages/heatTreatmentInbound/detailInbound?id=${item.id}`
|
});
|
},
|
|
// 打开搜索弹窗
|
search() {
|
this.$refs.popup.open();
|
},
|
|
// 上拉加载回调
|
upCallback(page) {
|
// 携带当前筛选条件和分页参数
|
const params = {
|
pageNo: page.num,
|
pageSize: page.size,
|
order: 'desc',
|
column: 'createTime',
|
warehouseId: this.formData.type,
|
materialNumber: this.currentFilter.materialNumber,
|
inboundCategory: this.currentFilter.status
|
};
|
|
this.$http.get(this.url.heatTreatmentInboundList, { params })
|
.then(res => {
|
if (res.data.success) {
|
const newData = res.data.result.records || [];
|
// 为每条数据添加选中状态和展开状态
|
const formattedData = newData.map(item => ({
|
...item,
|
selected: false,
|
showExpand: false
|
}));
|
|
// 分页逻辑：第一页覆盖数据，后续页追加
|
if (page.num === 1) {
|
this.msgList = formattedData;
|
} else {
|
this.msgList = this.msgList.concat(formattedData);
|
}
|
|
// 告诉mescroll加载结果
|
this.mescroll.endSuccess(formattedData.length, res.data.result.total);
|
// 更新统计信息
|
this.msg1Count = res.data.result.total;
|
this.msg1Title = `通知(${this.msg1Count})`;
|
} else {
|
uni.showToast({
|
title: res.data.message || '获取数据失败',
|
icon: 'none',
|
duration: 2000
|
});
|
this.mescroll.endErr();
|
}
|
})
|
.catch(err => {
|
console.error('分页加载失败：', err);
|
uni.showToast({
|
title: '加载失败，请重试',
|
icon: 'none',
|
duration: 2000
|
});
|
this.mescroll.endErr();
|
});
|
},
|
|
// 下拉刷新回调
|
downCallback() {
|
// 重置页码并重新加载数据
|
this.mescroll.resetUpScroll();
|
},
|
|
// 重置筛选条件
|
resetTask() {
|
this.formData = {
|
materialNumber: '',
|
type: ''
|
};
|
this.currentFilter = {
|
type: '',
|
materialNumber: '',
|
inboundCategory: this.currentFilterStatus // 保留状态筛选
|
};
|
this.$refs.popup.close();
|
this.mescroll.resetUpScroll();
|
},
|
|
// 执行筛选
|
getSera() {
|
this.$refs.popup.close();
|
// 保存当前筛选条件
|
this.currentFilter = {
|
...this.currentFilter,
|
warehouseId: this.formData.type,
|
materialNumber: this.formData.materialNumber
|
};
|
// 重置列表到第一页
|
this.mescroll.resetUpScroll();
|
},
|
|
// 按状态筛选
|
filterByStatus(status) {
|
this.currentFilterStatus = status;
|
// 同步筛选条件
|
this.currentFilter = {
|
...this.currentFilter,
|
status: status
|
};
|
// 重置列表并加载数据
|
this.mescroll.resetUpScroll();
|
},
|
// 初始化mescroll
|
mescrollInit(mescroll) {
|
console.log('mescroll初始化完成');
|
this.mescroll = mescroll;
|
},
|
|
// 格式化时间
|
formatTime(timeStr) {
|
if (!timeStr) return '';
|
// 简单的时间格式化示例，可根据实际需求调整
|
const date = new Date(timeStr);
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
},
|
|
// 状态样式映射（工业标准色）
|
getStatusClass(status) {
|
const statusMap = {
|
'HEAT_TREATMENT_INBOUND': 'status-completed', // 深绿：正常完成
|
'SMALL_INNER_RING': 'status-pending', // 黄色：待审核
|
'MATERIAL_INNER_TRANSFER': 'status-rework', // 橙色：返工
|
'PRODUCTION_UNLOADING': 'status-abnormal' // 红色：异常
|
};
|
return statusMap[status] || 'status-default';
|
}
|
},
|
}
|
</script>
|
|
<style>
|
.is-hover {
|
color: rgba(255, 255, 255, 0.6);
|
background-color: #55aaff;
|
border-color: #55aaff;
|
}
|
|
.content {
|
margin-top: 5px;
|
}
|
|
.content scroll-view {
|
scrollIndicator: "none"
|
}
|
|
.popupView {
|
margin-top: 45px;
|
height: auto;
|
}
|
|
/* 新增按钮下拉菜单样式 */
|
.industrial-add-menu {
|
background: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
padding: 8px 0;
|
}
|
.menu-item {
|
display: flex;
|
align-items: center;
|
padding: 10px 16px;
|
font-size: 14px;
|
color: #333;
|
}
|
.menu-item uni-icons {
|
margin-right: 8px;
|
}
|
.menu-item:active {
|
background: #f5f7fa;
|
}
|
|
/* 列表上方操作栏 */
|
.industrial-operation-bar {
|
display: flex;
|
align-items: center;
|
background: #fff;
|
border-radius: 4px;
|
padding: 8px 16px;
|
margin: 10px;
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
}
|
.operation-btn {
|
display: flex;
|
align-items: center;
|
margin-right: 20px;
|
color: #333;
|
font-size: 13px;
|
}
|
.operation-btn uni-icons {
|
margin-right: 4px;
|
}
|
.operation-btn:active {
|
color: #009688; /* 工业场景常用主色（深绿，代表生产/合格） */
|
}
|
|
/* 导航栏按钮间距 */
|
.nav-btn {
|
margin-left: 15px;
|
}
|
.add-icon-down {
|
margin-left: 3px;
|
}
|
|
/* 列表顶部样式 */
|
.industrial-list-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 10px;
|
margin-bottom: 10px;
|
}
|
.batch-select {
|
display: flex;
|
align-items: center;
|
color: #333;
|
font-size: 13px;
|
}
|
.batch-text {
|
margin-left: 5px;
|
}
|
.status-filter {
|
display: flex;
|
align-items: center;
|
overflow-x: auto;
|
padding: 5px 0;
|
}
|
.filter-item {
|
padding: 4px 10px;
|
margin-left: 8px;
|
font-size: 10px;
|
border-radius: 12px;
|
background: #f5f5f5;
|
color: #666;
|
white-space: nowrap;
|
}
|
.filter-item:first-child {
|
margin-left: 0;
|
}
|
.filter-item.active {
|
background: #009688;
|
color: #fff;
|
}
|
.filter-item:active {
|
opacity: 0.8;
|
}
|
|
/* 列表卡片样式（工业风：简洁、硬朗） */
|
.industrial-card {
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
border-radius: 4px;
|
border: none;
|
}
|
|
/* 状态标签样式（工业标准色） */
|
.status-tag {
|
display: inline-block;
|
padding: 2px 8px;
|
border-radius: 2px;
|
font-size: 12px;
|
color: #fff;
|
margin-right: 10px;
|
}
|
.status-completed {
|
background: #009688; /* 工业合格色：深绿 */
|
}
|
.status-pending {
|
background: #FFC107; /* 待处理色：黄色 */
|
color: #333; /* 黄色背景配深色文字，提升可读性 */
|
}
|
.status-rework {
|
background: #FF9800; /* 返工色：橙色 */
|
}
|
.status-abnormal {
|
background: #F44336; /* 异常色：红色 */
|
}
|
.status-default {
|
background: #9E9E9E; /* 默认色：灰色 */
|
}
|
|
/* 核心信息区布局 */
|
.core-info {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
padding: 10px 0;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
.item-checkbox {
|
margin-right: 10px;
|
}
|
.material-info {
|
flex: 1;
|
min-width: 200px;
|
margin: 5px 0;
|
}
|
.label {
|
font-size: 12px;
|
color: #666;
|
margin-right: 4px;
|
}
|
.code {
|
font-weight: bold;
|
color: #333;
|
margin-right: 8px;
|
}
|
.name {
|
font-size: 13px;
|
color: #333;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 150px;
|
}
|
.batch-qty {
|
flex: 1;
|
min-width: 200px;
|
margin: 5px 0;
|
display: flex;
|
align-items: center;
|
}
|
.batch {
|
font-size: 13px;
|
color: #333;
|
margin-right: 15px;
|
}
|
.qty-label {
|
margin-left: 10px;
|
}
|
.qty {
|
font-weight: bold;
|
color: #009688; /* 数量用主色突出 */
|
font-size: 14px;
|
}
|
|
/* 快捷操作区 */
|
.quick-ops {
|
display: flex;
|
align-items: center;
|
margin-left: auto;
|
}
|
.op-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-left: 15px;
|
font-size: 12px;
|
color: #666;
|
}
|
.op-btn uni-icons {
|
margin-bottom: 2px;
|
}
|
.op-btn:active {
|
color: #009688;
|
}
|
|
/* 展开详情区 */
|
.expand-info {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 8px 0;
|
color: #009688;
|
font-size: 12px;
|
cursor: pointer;
|
}
|
.expand-btn {
|
margin-right: 5px;
|
}
|
.detail-info {
|
padding: 10px 15px;
|
background: #fafafa;
|
border-radius: 4px;
|
margin-top: 8px;
|
}
|
.detail-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 6px;
|
font-size: 12px;
|
}
|
.detail-label {
|
width: 80px;
|
color: #666;
|
}
|
.detail-value {
|
color: #333;
|
flex: 1;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
/* 带扫码图标的输入框 */
|
.input-with-scan {
|
position: relative;
|
}
|
.scan-icon {
|
position: absolute;
|
right: 10px;
|
top: 50%;
|
transform: translateY(-50%);
|
color: #666;
|
}
|
</style>
|
