refactor(components): 提取 WMS 表格为独立组件并优化逻辑
将 EnamellingMachineStatus.vue 中的 WMS 表格逻辑提取为独立组件 WmsTable 优化数据加载和修改逻辑，减少重复代码 添加组件 props 和 emits 实现更好的封装和复用master
parent
826d3dec99
commit
78d422f3f7
@ -0,0 +1,233 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div v-if="loading" v-loading="true" :style="{ height: loadingHeight + 'px', marginBottom: '20px' }"></div>
|
||||||
|
<el-table
|
||||||
|
v-else-if="data.length > 0"
|
||||||
|
:data="data"
|
||||||
|
border
|
||||||
|
style="width: 100%; margin-bottom: 20px;"
|
||||||
|
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
|
||||||
|
:max-height="maxHeight"
|
||||||
|
>
|
||||||
|
<el-table-column prop="model" label="型号" width="120" />
|
||||||
|
<el-table-column prop="specification" label="规格" width="120" />
|
||||||
|
<el-table-column prop="wire_disc" label="线盘" width="120" />
|
||||||
|
<el-table-column prop="total_number" label="总箱数" width="100" />
|
||||||
|
<el-table-column label="最小箱数" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input
|
||||||
|
v-model="scope.row.warning_number_min"
|
||||||
|
type="number"
|
||||||
|
size="small"
|
||||||
|
@input="onValueChange(scope.$index)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="最大箱数" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input
|
||||||
|
v-model="scope.row.warning_number_max"
|
||||||
|
type="number"
|
||||||
|
size="small"
|
||||||
|
@input="onValueChange(scope.$index)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="total_gross_weight" label="总毛重(kg)" width="120" />
|
||||||
|
<el-table-column v-if="showAction" label="操作" width="100" fixed="right">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
size="small"
|
||||||
|
:disabled="!modifiedFlags[scope.$index]"
|
||||||
|
@click="handleSubmit(scope.$index)"
|
||||||
|
>
|
||||||
|
提交修改
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div v-else class="no-data" :style="{ height: loadingHeight + 'px' }">
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, watch } from 'vue'
|
||||||
|
import { API_CONFIG } from "@/config/api"
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
model: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
specification: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
loadingHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 200
|
||||||
|
},
|
||||||
|
maxHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 300
|
||||||
|
},
|
||||||
|
showAction: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['data-loaded', 'modified'])
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const data = ref([])
|
||||||
|
const modifiedFlags = ref({})
|
||||||
|
const originalData = ref({})
|
||||||
|
|
||||||
|
const buildKey = (item) => {
|
||||||
|
return `${item.model}_${item.specification}_${item.wire_disc || 'null'}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const recordOriginalData = () => {
|
||||||
|
originalData.value = {}
|
||||||
|
modifiedFlags.value = {}
|
||||||
|
data.value.forEach((item, index) => {
|
||||||
|
const key = buildKey(item)
|
||||||
|
originalData.value[key] = {
|
||||||
|
warning_number_min: item.warning_number_min,
|
||||||
|
warning_number_max: item.warning_number_max
|
||||||
|
}
|
||||||
|
modifiedFlags.value[index] = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (!props.model || !props.specification) {
|
||||||
|
data.value = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
const apiUrl = `${API_CONFIG.BASE_URL}/api/wms/records/model-spec?model=${encodeURIComponent(props.model)}&specification=${encodeURIComponent(props.specification)}`
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(apiUrl)
|
||||||
|
const result = await response.json()
|
||||||
|
|
||||||
|
if (result.code === 200 && result.data && result.data.records) {
|
||||||
|
data.value = result.data.records
|
||||||
|
recordOriginalData()
|
||||||
|
emit('data-loaded', data.value)
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
|
emit('data-loaded', [])
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('WMS数据API调用失败:', error)
|
||||||
|
data.value = []
|
||||||
|
emit('data-loaded', [])
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.model && props.specification) {
|
||||||
|
fetchData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const onValueChange = (index) => {
|
||||||
|
const item = data.value[index]
|
||||||
|
if (!item) return
|
||||||
|
|
||||||
|
const key = buildKey(item)
|
||||||
|
const original = originalData.value[key]
|
||||||
|
|
||||||
|
if (original) {
|
||||||
|
const isModified = item.warning_number_min !== original.warning_number_min ||
|
||||||
|
item.warning_number_max !== original.warning_number_max
|
||||||
|
modifiedFlags.value[index] = isModified
|
||||||
|
emit('modified', { index, modified: isModified, item })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (index) => {
|
||||||
|
const item = data.value[index]
|
||||||
|
if (!item) return
|
||||||
|
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
model: item.model,
|
||||||
|
specification: item.specification,
|
||||||
|
warning_number_min: item.warning_number_min || 0,
|
||||||
|
warning_number_max: item.warning_number_max || 300
|
||||||
|
})
|
||||||
|
|
||||||
|
if (item.wire_disc) {
|
||||||
|
params.append('wire_disc', item.wire_disc)
|
||||||
|
}
|
||||||
|
|
||||||
|
const apiUrl = `${API_CONFIG.BASE_URL}/api/wms/warning/upsert?${params.toString()}`
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const result = await response.json()
|
||||||
|
|
||||||
|
if (result.code === 200) {
|
||||||
|
const key = buildKey(item)
|
||||||
|
originalData.value[key] = {
|
||||||
|
warning_number_min: item.warning_number_min,
|
||||||
|
warning_number_max: item.warning_number_max
|
||||||
|
}
|
||||||
|
modifiedFlags.value[index] = false
|
||||||
|
console.log('WMS修改成功')
|
||||||
|
} else {
|
||||||
|
console.error('WMS修改失败:', result.message)
|
||||||
|
item.warning_number_min = originalData.value[key]?.warning_number_min
|
||||||
|
item.warning_number_max = originalData.value[key]?.warning_number_max
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('WMS修改API调用失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isModified = (index) => {
|
||||||
|
return modifiedFlags.value[index] || false
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.model, props.specification],
|
||||||
|
([newModel, newSpecification]) => {
|
||||||
|
if (newModel && newSpecification) {
|
||||||
|
fetchData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
fetchData,
|
||||||
|
isModified,
|
||||||
|
data
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.no-data {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #909399;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue