748 lines
26 KiB
Vue
748 lines
26 KiB
Vue
<template>
|
|
<el-config-provider :locale="zhCn">
|
|
<el-container class="content">
|
|
<div class="work-area">
|
|
<fieldset class="main-area">
|
|
<legend>入库单信息</legend>
|
|
<el-form ref="orderInFormRef" :model="orderInForm" :rules="rules" label-width="100px"
|
|
:label-position="labelPosition" status-icon>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="6" :lg="5">
|
|
<el-form-item label="料箱号" prop="vehicleNo">
|
|
<el-input v-model="orderInForm.vehicleNo" clearable @keyup.enter="handleEnter('vehicleSize')"
|
|
ref="vehicleNoRef"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="6" :lg="5">
|
|
<el-form-item label="料箱尺寸" prop="vehicleSize">
|
|
<el-input v-model="orderInForm.vehicleSize" clearable @keyup.enter="handleEnter('inStand')"
|
|
ref="vehicleSizeRef"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="6" :lg="5">
|
|
<el-form-item label="入库站台" prop="inStand">
|
|
<el-input v-model="orderInForm.inStand" clearable @keyup.enter="handleEnter('clientId')"
|
|
ref="inStandRef"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</fieldset>
|
|
|
|
<fieldset class="goods-detail-area">
|
|
<legend>物料明细</legend>
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
|
|
<div>
|
|
<el-button type="primary" @click="addGoodsDetail">添加物料</el-button>
|
|
<el-button type="danger" @click="clearGoodsDetail">清空物料</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button type="success" @click="submitOrderIn">提交入库单</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-area">
|
|
<el-table :data="orderInForm.goodsDetail" border stripe :max-height="maxHeight"
|
|
:header-cell-style="{ 'text-align': 'center' }"
|
|
:cell-style="{ 'text-align': 'center', 'padding': '12px 0' }"
|
|
class="table-class" width="100%" :row-style="{ height: '60px' }">
|
|
<el-table-column prop="goodsId" label="物料编号" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.goodsId" placeholder="请输入物料编号" size="small"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="goodsName" label="物料名称" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.goodsName" placeholder="请输入物料名称" size="small"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="batch" label="批次" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.batch" placeholder="请输入批次" size="small"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="goodsType" label="物料类型" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.goodsType" placeholder="请输入物料类型" size="small"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="specification" label="规格" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.specification" placeholder="请输入规格" size="small"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="quantity" label="数量" min-width="120">
|
|
<template #default="scope">
|
|
<el-input-number v-model="scope.row.quantity" :min="1" :controls="false" size="small"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="goodsDesc" label="物料描述" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.goodsDesc" placeholder="请输入物料描述" size="small"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="80" fixed="right">
|
|
<template #default="scope">
|
|
<el-button type="danger" size="small" @click="removeGoodsDetail(scope.$index)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- 查询区域 -->
|
|
<fieldset class="query-area">
|
|
<legend>入库单查询</legend>
|
|
<el-form ref="queryFormRef" :model="queryForm" :label-position="labelPosition" label-width="120px"
|
|
status-icon>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="5" :lg="4">
|
|
<el-form-item label="料箱号">
|
|
<el-input v-model="queryForm.vehicleNo" clearable/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="5" :lg="4">
|
|
<el-form-item label="料箱尺寸">
|
|
<el-input v-model="queryForm.vehicleSize" clearable/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="5" :lg="4">
|
|
<el-form-item label="入库站台">
|
|
<el-input v-model="queryForm.inStand" clearable/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="5" :lg="4">
|
|
<el-form-item label="订单状态">
|
|
<el-select v-model="queryForm.orderStatus" clearable placeholder="请选择订单状态">
|
|
<el-option label="全部" value=""/>
|
|
<el-option label="创建" :value="0"/>
|
|
<el-option label="运行中" :value="1"/>
|
|
<el-option label="完成" :value="2"/>
|
|
<el-option label="取消" :value="3"/>
|
|
<el-option label="错误" :value="4"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="4" :lg="4" style="display: flex; align-items: flex-end;">
|
|
<el-form-item>
|
|
<el-button type="primary" @click="queryOrderIns">查询入库单</el-button>
|
|
<el-button type="warning" @click="resetQueryForm">重置查询</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</fieldset>
|
|
|
|
<!-- 查询结果表格 -->
|
|
<fieldset class="query-result-area">
|
|
<legend>入库单列表</legend>
|
|
<div class="query-table-container">
|
|
<el-table :data="orderInsList"
|
|
border stripe
|
|
:max-height="maxHeight * 0.8"
|
|
:header-cell-style="{ 'text-align': 'center' }"
|
|
:cell-style="{ 'text-align': 'center' }"
|
|
highlight-current-row
|
|
class="query-result-table"
|
|
style="width: 100%; min-width: 2000px;"
|
|
:row-style="{ height: '60px' }"
|
|
:empty-text="'暂无查询数据，请在上方输入查询条件并点击查询按钮'">
|
|
<el-table-column type="index" width="60" fixed="left" label="序号"/>
|
|
<el-table-column prop="recordId" label="记录ID" min-width="180" fixed="left" show-overflow-tooltip/>
|
|
<el-table-column prop="orderId" label="订单ID" min-width="150" fixed="left" show-overflow-tooltip/>
|
|
<el-table-column prop="vehicleNo" label="料箱号" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="vehicleSize" label="料箱尺寸" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="inStand" label="入库站台" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="destination" label="目的地" min-width="150" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.destination || '暂无' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="clientId" label="客户端ID" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="goodsId" label="物料编号" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="goodsName" label="物料名称" min-width="200" show-overflow-tooltip/>
|
|
<el-table-column prop="batch" label="批次" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="goodsType" label="物料类型" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="specification" label="规格" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="quantity" label="数量" min-width="120" show-overflow-tooltip/>
|
|
<el-table-column prop="goodsDesc" label="物料描述" min-width="200" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.goodsDesc || '暂无' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="orderStatus" label="订单状态" min-width="120" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<el-tag
|
|
:type="scope.row.orderStatus === 0 ? 'success' : scope.row.orderStatus === 1 ? 'warning' : 'danger'">
|
|
{{ scope.row.orderStatus === 0 ? '正常' : scope.row.orderStatus === 1 ? '处理中' : '异常' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" min-width="180" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ formatDateTime(scope.row.createTime) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="更新时间" min-width="180" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ formatDateTime(scope.row.updateTime) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="完成时间" min-width="180" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ formatDateTime(scope.row.completeTime) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.remark || '暂无' }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 修改后 -->
|
|
<el-table-column label="操作" width="180" fixed="right">
|
|
<template #default="scope">
|
|
<div class="action-buttons">
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
@click="viewOrderInDetail(scope.row)"
|
|
class="btn-view"
|
|
>详情</el-button>
|
|
<el-button
|
|
type="warning"
|
|
size="small"
|
|
@click="openEditDialog(scope.row)"
|
|
class="btn-edit"
|
|
>编辑</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<el-dialog v-model="responseDialogVisible" title="请求结果" width="500px">
|
|
<pre>{{ responseResult }}</pre>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button type="primary" @click="responseDialogVisible = false">确定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 入库单详情对话框 -->
|
|
<el-dialog v-model="orderInDetailDialogVisible" title="入库单详情" width="70%">
|
|
<div v-if="currentOrderIn">
|
|
<h4>基本信息</h4>
|
|
<el-descriptions :column="3" border>
|
|
<el-descriptions-item label="记录ID">{{ currentOrderIn.recordId }}</el-descriptions-item>
|
|
<el-descriptions-item label="订单ID">{{ currentOrderIn.orderId }}</el-descriptions-item>
|
|
<el-descriptions-item label="料箱号">{{ currentOrderIn.vehicleNo }}</el-descriptions-item>
|
|
<el-descriptions-item label="料箱尺寸">{{ currentOrderIn.vehicleSize }}</el-descriptions-item>
|
|
<el-descriptions-item label="入库站台">{{ currentOrderIn.inStand }}</el-descriptions-item>
|
|
<el-descriptions-item label="目的地">{{ currentOrderIn.destination }}</el-descriptions-item>
|
|
<el-descriptions-item label="客户端ID">{{ currentOrderIn.clientId }}</el-descriptions-item>
|
|
<el-descriptions-item label="物料编号">{{ currentOrderIn.goodsId }}</el-descriptions-item>
|
|
<el-descriptions-item label="物料名称">{{ currentOrderIn.goodsName }}</el-descriptions-item>
|
|
<el-descriptions-item label="订单状态">
|
|
<el-tag
|
|
:type="currentOrderIn.orderStatus === 0 ? 'success' : currentOrderIn.orderStatus === 1 ? 'warning' : 'danger'">
|
|
{{ currentOrderIn.orderStatus === 0 ? '正常' : currentOrderIn.orderStatus === 1 ? '处理中' : '异常' }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ currentOrderIn.createTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="更新时间">{{ currentOrderIn.updateTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="完成时间">{{ currentOrderIn.completeTime }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 添加编辑状态对话框 -->
|
|
<el-dialog v-model="editDialogVisible" title="编辑入库单状态" width="30%">
|
|
<el-form :model="currentEditOrder" label-width="100px">
|
|
<el-form-item label="订单状态">
|
|
<el-select
|
|
v-model="currentEditOrder.orderStatus"
|
|
placeholder="请选择订单状态"
|
|
clearable
|
|
>
|
|
<el-option label="全部" value=""/>
|
|
<el-option label="创建" :value="0"/>
|
|
<el-option label="运行中" :value="1"/>
|
|
<el-option label="完成" :value="2"/>
|
|
<el-option label="取消" :value="3"/>
|
|
<el-option label="错误" :value="4"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="editDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="saveOrderStatus">保存</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</el-container>
|
|
</el-config-provider>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {reactive, ref, onMounted, nextTick, onBeforeUnmount} from 'vue'
|
|
import {ElMessage} from 'element-plus'
|
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
|
import {loading} from '@/utils/loading.js'
|
|
import {errorBox} from '@/utils/myMessageBox.js'
|
|
import {labelPosition} from '@/constant/form'
|
|
import {submitOrderInForm, getOrderIns, updateOrderIn} from '@/api/orderIn.js'
|
|
|
|
// 生成订单号方法
|
|
const generateOrderId = () => {
|
|
const now = new Date()
|
|
const year = now.getFullYear()
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
const hours = String(now.getHours()).padStart(2, '0')
|
|
const minutes = String(now.getMinutes()).padStart(2, '0')
|
|
const seconds = String(now.getSeconds()).padStart(2, '0')
|
|
const milliseconds = String(now.getMilliseconds()).padStart(3, '0')
|
|
return `baokai${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`
|
|
}
|
|
|
|
// 表单数据
|
|
const orderInFormRef = ref()
|
|
const orderInForm = reactive({
|
|
orderId: generateOrderId(),
|
|
vehicleNo: '',
|
|
vehicleSize: '',
|
|
inStand: '',
|
|
clientId: 'WMS',
|
|
goodsDetail: []
|
|
})
|
|
|
|
// 添加响应式变量
|
|
const editDialogVisible = ref(false)
|
|
const currentEditOrder = ref(null)
|
|
|
|
// 打开编辑对话框
|
|
const openEditDialog = (row) => {
|
|
currentEditOrder.value = { ...row }
|
|
editDialogVisible.value = true
|
|
}
|
|
|
|
// 查询表单数据
|
|
const queryFormRef = ref()
|
|
const queryForm = reactive({
|
|
vehicleNo: '',
|
|
vehicleSize: '',
|
|
inStand: '',
|
|
orderStatus: ''
|
|
})
|
|
|
|
// 表单规则
|
|
const rules = reactive({
|
|
vehicleNo: [{required: true, message: '请输入料箱号', trigger: 'blur'}],
|
|
vehicleSize: [{required: true, message: '请输入料箱尺寸', trigger: 'blur'}],
|
|
inStand: [{required: true, message: '请输入入库站台', trigger: 'blur'}],
|
|
})
|
|
|
|
// 引用DOM元素
|
|
const vehicleNoRef = ref()
|
|
const vehicleSizeRef = ref()
|
|
const inStandRef = ref()
|
|
|
|
// 响应结果对话框
|
|
const responseDialogVisible = ref(false)
|
|
const responseResult = ref({})
|
|
|
|
// 表格高度控制
|
|
let maxHeight = ref(window.innerHeight * 0.4)
|
|
|
|
// 查询结果相关
|
|
const orderInsList = ref([])
|
|
const orderInDetailDialogVisible = ref(false)
|
|
const currentOrderIn = ref(null)
|
|
|
|
// 初始化时聚焦第一个输入框
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
vehicleNoRef.value.focus()
|
|
window.addEventListener('resize', resizeHeight)
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', resizeHeight)
|
|
})
|
|
|
|
// 调整表格高度
|
|
const resizeHeight = () => {
|
|
maxHeight.value = window.innerHeight * 0.4
|
|
}
|
|
|
|
// 处理回车事件
|
|
const handleEnter = (nextField) => {
|
|
const refMap = {
|
|
'vehicleNo': vehicleNoRef,
|
|
'vehicleSize': vehicleSizeRef,
|
|
'inStand': inStandRef
|
|
}
|
|
|
|
if (refMap[nextField]) {
|
|
refMap[nextField].value.focus()
|
|
}
|
|
}
|
|
|
|
// 添加物料明细
|
|
const addGoodsDetail = () => {
|
|
orderInForm.goodsDetail.push({
|
|
goodsId: '',
|
|
goodsName: '',
|
|
batch: '',
|
|
goodsType: '',
|
|
specification: '',
|
|
quantity: 1,
|
|
goodsDesc: ''
|
|
})
|
|
}
|
|
|
|
// 移除物料明细
|
|
const removeGoodsDetail = (index) => {
|
|
orderInForm.goodsDetail.splice(index, 1)
|
|
}
|
|
|
|
// 清空物料明细
|
|
const clearGoodsDetail = () => {
|
|
orderInForm.goodsDetail = []
|
|
}
|
|
|
|
// 重置表单（添加重置表单的方法，包括重新生成订单号）
|
|
const resetOrderInForm = () => {
|
|
orderInForm.orderId = generateOrderId()
|
|
orderInForm.vehicleNo = ''
|
|
orderInForm.vehicleSize = ''
|
|
orderInForm.inStand = ''
|
|
orderInForm.goodsDetail = []
|
|
}
|
|
|
|
// 提交入库单
|
|
const submitOrderIn = () => {
|
|
orderInFormRef.value.validate((valid) => {
|
|
if (valid) {
|
|
if (orderInForm.goodsDetail.length === 0) {
|
|
errorBox('请至少添加一条物料明细')
|
|
return
|
|
}
|
|
|
|
// 检查所有物料明细是否填写完整
|
|
for (let i = 0; i < orderInForm.goodsDetail.length; i++) {
|
|
const item = orderInForm.goodsDetail[i]
|
|
if (!item.goodsId || !item.goodsName || !item.batch || !item.goodsType || !item.specification || !item.quantity) {
|
|
errorBox(`第${i + 1}行物料明细填写不完整，请检查`)
|
|
return
|
|
}
|
|
}
|
|
|
|
// 发送请求
|
|
loading.open()
|
|
submitOrderInForm(orderInForm)
|
|
.then(res => {
|
|
responseResult.value = res.data
|
|
responseDialogVisible.value = true
|
|
|
|
if (res.data.code === 0) {
|
|
ElMessage.success('入库单提交成功')
|
|
// 提交成功后重置表单，生成新的订单号
|
|
resetOrderInForm()
|
|
} else {
|
|
errorBox(`入库单提交失败: ${res.data.message}`)
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err)
|
|
errorBox('提交入库单时发生错误')
|
|
})
|
|
.finally(() => {
|
|
loading.close()
|
|
})
|
|
} else {
|
|
errorBox('请填写完整的入库单信息')
|
|
}
|
|
})
|
|
}
|
|
|
|
// 格式化日期时间
|
|
const formatDateTime = (dateTime) => {
|
|
if (!dateTime) return '暂无';
|
|
try {
|
|
const date = new Date(dateTime);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
} catch (error) {
|
|
console.error('日期格式化错误:', error);
|
|
return dateTime;
|
|
}
|
|
}
|
|
|
|
// 查询入库单
|
|
const queryOrderIns = () => {
|
|
const queryParams = {
|
|
vehicleNo: queryForm.vehicleNo,
|
|
vehicleSize: queryForm.vehicleSize,
|
|
inStand: queryForm.inStand,
|
|
orderStatus: queryForm.orderStatus
|
|
}
|
|
|
|
loading.open('查询中...')
|
|
getOrderIns(queryParams)
|
|
.then(res => {
|
|
console.log(JSON.stringify(res));
|
|
console.log(JSON.stringify(res.data));
|
|
if (res.status === 200) {
|
|
orderInsList.value = res.data || [];
|
|
if (orderInsList.value.length === 0) {
|
|
ElMessage.info('未查询到相关入库单')
|
|
}
|
|
} else {
|
|
errorBox(`查询失败: ${res.data.message}`)
|
|
orderInsList.value = []
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err)
|
|
errorBox('查询入库单时发生错误')
|
|
orderInsList.value = []
|
|
})
|
|
.finally(() => {
|
|
loading.close()
|
|
})
|
|
}
|
|
|
|
// 重置查询表单
|
|
const resetQueryForm = () => {
|
|
queryForm.vehicleNo = ''
|
|
queryForm.vehicleSize = ''
|
|
queryForm.inStand = ''
|
|
queryForm.orderStatus = ''
|
|
orderInsList.value = []
|
|
}
|
|
|
|
// 查看入库单详情
|
|
const viewOrderInDetail = (row) => {
|
|
currentOrderIn.value = row
|
|
orderInDetailDialogVisible.value = true
|
|
}
|
|
|
|
// 保存状态修改
|
|
const saveOrderStatus = () => {
|
|
if (currentEditOrder.value.orderStatus === undefined || currentEditOrder.value.orderStatus === null) {
|
|
errorBox('请选择订单状态')
|
|
return
|
|
}
|
|
|
|
loading.open('保存中...')
|
|
updateOrderIn(currentEditOrder.value.recordId, currentEditOrder.value.orderStatus).then(res => {
|
|
if (res.data.code === 0) {
|
|
ElMessage.success('状态更新成功')
|
|
// 更新本地数据
|
|
const index = orderInsList.value.findIndex(
|
|
item => item.orderId === currentEditOrder.value.orderId
|
|
)
|
|
if (index > -1) {
|
|
orderInsList.value[index].orderStatus = currentEditOrder.value.orderStatus
|
|
}
|
|
editDialogVisible.value = false
|
|
} else {
|
|
errorBox(`状态更新失败: ${res.data.message}`)
|
|
}
|
|
}).catch(err => {
|
|
console.error(err)
|
|
errorBox('状态更新失败')
|
|
}).finally(() => {
|
|
loading.close()
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
display: flex;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.work-area {
|
|
width: 100%;
|
|
height: calc(100vh - 160px);
|
|
padding: 15px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.main-area, .goods-detail-area, .query-area, .query-result-area {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 物料明细表格样式 */
|
|
.table-area {
|
|
width: 100%;
|
|
min-height: fit-content;
|
|
margin-bottom: 10px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.table-class {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* 修改查询表格容器样式 */
|
|
.query-table-container {
|
|
overflow-x: hidden; /* 修改前为auto */
|
|
position: relative;
|
|
}
|
|
|
|
/* 调整表格宽度设置 */
|
|
.query-result-table {
|
|
min-width: 100% !important; /* 修改前为2000px */
|
|
}
|
|
|
|
|
|
:deep(.query-result-table) {
|
|
width: 100%;
|
|
margin: 5px;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
|
|
/* 增加表格内部滚动控制 */
|
|
:deep(.query-result-table .el-table__body-wrapper) {
|
|
overflow-x: auto !important;
|
|
max-width: 100vw; /* 防止溢出视口 */
|
|
}
|
|
|
|
:deep(.query-result-table.el-table--scrollable-x .el-table__body-wrapper) {
|
|
overflow-x: scroll !important;
|
|
}
|
|
|
|
/* 同步滚动条样式 */
|
|
:deep(.query-result-table .el-table__header-wrapper) {
|
|
overflow-x: hidden !important;
|
|
margin-bottom: -17px !important; /* 隐藏原生滚动条 */
|
|
}
|
|
|
|
/* 调整Element UI表格的显示方式 */
|
|
:deep(.query-result-table.el-table) {
|
|
display: table; /* 保持表格布局 */
|
|
}
|
|
|
|
:deep(.el-input),
|
|
:deep(.el-select) {
|
|
width: 100%;
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
height: 36px;
|
|
}
|
|
|
|
:deep(.el-table .cell) {
|
|
word-break: break-all;
|
|
white-space: normal;
|
|
line-height: 1.5;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 调整操作列样式 */
|
|
.query-result-table .el-table-column--fixed-right {
|
|
position: sticky !important;
|
|
right: 0;
|
|
z-index: 2;
|
|
background: white;
|
|
}
|
|
|
|
/* 列宽优化 */
|
|
.query-result-table .el-table__cell {
|
|
min-width: 120px !important;
|
|
max-width: 200px;
|
|
}
|
|
|
|
/* 固定表头列宽 */
|
|
.query-result-table .el-table-column--fixed-left {
|
|
position: sticky !important;
|
|
left: 0;
|
|
z-index: 2;
|
|
background: white;
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
.query-table-container::-webkit-scrollbar {
|
|
height: 8px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.query-table-container::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 固定列样式修正 */
|
|
:deep(.el-table__fixed-right) {
|
|
height: 100% !important;
|
|
background: #fff;
|
|
box-shadow: -5px 0 15px -5px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* 操作按钮容器 */
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 5px;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/* 按钮最小宽度 */
|
|
.action-buttons .el-button {
|
|
flex-shrink: 0;
|
|
min-width: 60px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
}
|
|
.action-buttons .el-button {
|
|
width: 100%;
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
legend {
|
|
padding: 0 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
background-color: #f8f8f8;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style> |