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