前端页面优化
This commit is contained in:
parent
61631de3e7
commit
d3e77e1375
|
|
@ -90,6 +90,15 @@ export const requestInventory = (params) => {
|
|||
data: params
|
||||
})
|
||||
}
|
||||
|
||||
export const batchRequestInventory = (params) => {
|
||||
return request({
|
||||
url: '/task/batchRequestInventory',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取盘点信息
|
||||
export const getInventoryConfirm = (params) => {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import axios from 'axios'
|
||||
|
||||
const request = axios.create({
|
||||
//baseURL: 'http://172.18.222.253:12315/wms',
|
||||
baseURL: 'http://localhost:12315/wms',
|
||||
baseURL: 'http://172.18.222.253:12315/wms',
|
||||
//baseURL: 'http://localhost:12315/wms',
|
||||
timeout: 5000
|
||||
})
|
||||
// 172.18.222.253
|
||||
|
|
|
|||
|
|
@ -69,9 +69,22 @@
|
|||
:max-height="maxHeight" highlight-current-row @row-click="getCurrentRow" :row-style="rowStyle"
|
||||
:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
|
||||
@sort-change="handleSortChange">
|
||||
<!-- 添加多选框列 -->
|
||||
<el-table-column width="65px" fixed="left">
|
||||
<template #header>
|
||||
<el-checkbox
|
||||
v-model="isSelectAll"
|
||||
@change="handleSelectAllChange">
|
||||
|
||||
</el-checkbox>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<el-radio :label="scope.row.stockId" v-model="stockId"> </el-radio>
|
||||
<el-checkbox
|
||||
:label="scope.row.stockId"
|
||||
v-model="scope.row.checked"
|
||||
@change="handleSelectionChange(scope.row)">
|
||||
|
||||
</el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="stockId" label="库存编号" fixed="left" min-width="120px" sortable="custom"-->
|
||||
|
|
@ -117,6 +130,55 @@
|
|||
@current-change="search" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="baseTableQuery.total" />
|
||||
</div>
|
||||
<!-- 批量盘点确认对话框 -->
|
||||
<el-dialog
|
||||
v-model="showBatchInventoryDialog"
|
||||
title="确认批量盘点"
|
||||
width="500px"
|
||||
draggable
|
||||
center>
|
||||
<div class="dialog-content">
|
||||
<el-alert
|
||||
:title="`您确定要对以下 ${selectedRows.length} 条数据进行盘点操作吗？`"
|
||||
type="warning"
|
||||
show-icon
|
||||
:closable="false" style="margin-bottom: 20px;">
|
||||
</el-alert>
|
||||
|
||||
<div class="selected-summary">
|
||||
<h4>选中数据概览：</h4>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">料号种类：</span>
|
||||
<span>{{ [...new Set(selectedRows.map(item => item.goodsId))].length }} 种</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">箱号数量：</span>
|
||||
<span>{{ selectedRows.length }} 个</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="selected-list">
|
||||
<h4>选中数据详情：</h4>
|
||||
<el-table
|
||||
:data="selectedRows.slice(0, 50)"
|
||||
max-height="250"
|
||||
size="small"
|
||||
border>
|
||||
<el-table-column prop="goodsId" label="料号" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="vehicleId" label="箱号" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="locationId" label="库位" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="specialStock" label="特殊库存" width="100" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showBatchInventoryDialog = false" size="default">取消</el-button>
|
||||
<el-button type="primary" @click="confirmBatchInventory" size="default">确认盘点</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- <el-dialog v-model="dialogVisible" title="库存信息" width="40%" draggable :show-close="false">
|
||||
<el-form ref="stockFormRef" :model="stockFormEntity" :label-position="labelPosition"
|
||||
label-width="100px" style="max-width: 100%" :rules="rules" status-icon>
|
||||
|
|
@ -242,12 +304,18 @@ import { ElMessage } from 'element-plus'
|
|||
import { genTableRequest, addAllOptionOfOptions } from '@/utils/generator.js'
|
||||
import { labelPosition, shortcuts } from '@/constant/form'
|
||||
import { stockStatusOptions, goodsStatusOptions } from '@/constant/options'
|
||||
import {batchRequestInventory} from "@/api/task";
|
||||
/**
|
||||
* 常量定义
|
||||
*/
|
||||
/**
|
||||
* 变量定义
|
||||
*/
|
||||
// 添加新的响应式变量
|
||||
let selectedRows = ref([]) // 存储选中的行
|
||||
let isSelectAll = ref(false) // 全选状态
|
||||
let showBatchInventoryDialog = ref(false) // 控制批量盘点对话框显示
|
||||
|
||||
let maxHeight = ref(window.innerHeight * 0.55)
|
||||
let tableLoading = ref(false)
|
||||
let displayStocks = ref([])
|
||||
|
|
@ -294,6 +362,84 @@ const resizeHeight = () => {
|
|||
/**
|
||||
* 自定义方法
|
||||
*/
|
||||
// 处理选择变化
|
||||
const handleSelectionChange = (row) => {
|
||||
if (row.checked) {
|
||||
// 如果选中且不在列表中，则添加
|
||||
if (!selectedRows.value.some(item => item.stockId === row.stockId)) {
|
||||
selectedRows.value.push(row)
|
||||
}
|
||||
} else {
|
||||
// 如果取消选中，则从列表中移除
|
||||
selectedRows.value = selectedRows.value.filter(item => item.stockId !== row.stockId)
|
||||
// 取消全选状态
|
||||
isSelectAll.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理全选变化
|
||||
const handleSelectAllChange = (val) => {
|
||||
displayStocks.value.forEach(row => {
|
||||
row.checked = val
|
||||
})
|
||||
|
||||
if (val) {
|
||||
// 全选
|
||||
selectedRows.value = [...displayStocks.value]
|
||||
} else {
|
||||
// 取消全选
|
||||
selectedRows.value = []
|
||||
}
|
||||
}
|
||||
// 处理批量盘点按钮点击
|
||||
const handleBatchInventory = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
ElMessage.warning('请至少选择一条记录')
|
||||
return
|
||||
}
|
||||
showBatchInventoryDialog.value = true
|
||||
}
|
||||
|
||||
// 确认批量盘点操作
|
||||
const confirmBatchInventory = () => {
|
||||
// 构造发送到后端的数据，按照指定格式
|
||||
const requestData = {
|
||||
invUser: store.getters.getUserName, // 使用当前用户名
|
||||
invStand: store.getters.getStandId, // 使用当前站点ID
|
||||
items: selectedRows.value.map(row => ({
|
||||
goodsId: row.goodsId,
|
||||
vehicleId: row.vehicleId,
|
||||
specialStock: row.specialStock,
|
||||
specialStockNo: row.specialStockNo,
|
||||
specialStockItemNo: row.specialStockItemNo,
|
||||
batchNo: row.batchNo
|
||||
}))
|
||||
};
|
||||
|
||||
console.log('批量盘点数据:', requestData);
|
||||
|
||||
// 调用后端接口
|
||||
batchRequestInventory(requestData).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
ElMessage.success('批量盘点成功');
|
||||
showBatchInventoryDialog.value = false;
|
||||
search(); // 刷新表格数据
|
||||
|
||||
// 清空选择
|
||||
selectedRows.value.forEach(row => {
|
||||
row.checked = false;
|
||||
});
|
||||
selectedRows.value = [];
|
||||
isSelectAll.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.data.message);
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessage.error('批量盘点失败');
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 查询
|
||||
const search = () => {
|
||||
tableLoading.value = true
|
||||
|
|
@ -594,4 +740,45 @@ const submitStockInfo = () => {
|
|||
.my-autocomplete li .goods_name {
|
||||
color: cornflowerblue;
|
||||
}
|
||||
/* 新增的弹窗样式 */
|
||||
.dialog-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.selected-summary {
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.selected-list h4 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.more-info {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
.dialog-footer .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,6 +29,7 @@ const routes = [
|
|||
{path: '/pickTask', component: () => import('@/layout/pickTaskMonitor.vue')},// 拣选任务
|
||||
{path: '/outsMonitor', component: () => import('@/layout/OutsMonitor.vue')},// 任务表单
|
||||
{path: '/clcKanban', component: () => import('@/layout/clcKanban.vue')},// 需求看板
|
||||
{path: '/batchInventory', component: () => import('@/layout/batchInventory.vue')},// 批量盘点
|
||||
{path: '/stockCompare', component: () => import('@/layout/stockCompare.vue')},
|
||||
{path: '/stockUpdateRecord', component: () => import('@/layout/stockUpdateRecord.vue')},// 库存更新记录
|
||||
{path: '/roleUser', component: () => import('@/layout/role_user.vue')},// 角色——用户列表
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user