<template>
|
<div class="pallet-operation-page">
|
<el-card shadow="hover">
|
<template #header>
|
<span>组盘/拆盘操作</span>
|
</template>
|
|
<el-form :model="formData" ref="formRef" label-width="100px" style="max-width: 600px">
|
<el-form-item label="操作类型" prop="action" required>
|
<el-select v-model="formData.action" placeholder="请选择操作类型" @change="onActionChange">
|
<el-option label="组盘" value="组盘" />
|
<el-option label="拆盘" value="拆盘" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="托盘号" prop="palletCode" required>
|
<el-input v-model="formData.palletCode" placeholder="请输入托盘号" />
|
</el-form-item>
|
|
<el-form-item label="线体编号" prop="lineId" required>
|
<el-input v-model="formData.lineId" placeholder="请输入线体编号" />
|
</el-form-item>
|
|
<el-form-item label="机械手名称" prop="robotName" required>
|
<el-input v-model="formData.robotName" placeholder="请输入机械手名称" />
|
</el-form-item>
|
|
<el-form-item label="仓库编号" prop="warehouseCode" required>
|
<el-input v-model="formData.warehouseCode" placeholder="请输入仓库编号" />
|
</el-form-item>
|
|
<el-form-item label="优先级" prop="grade">
|
<el-input-number v-model="formData.grade" :min="1" :max="99" />
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 电芯列表（组盘时显示） -->
|
<el-card v-if="formData.action === '组盘'" shadow="hover" style="margin-top: 16px">
|
<template #header>
|
<div class="cell-header">
|
<span>电芯列表</span>
|
<el-button type="primary" size="small" @click="addCellRow">添加行</el-button>
|
</div>
|
</template>
|
|
<el-table :data="formData.cells" border style="width: 100%" max-height="400">
|
<el-table-column label="序号" width="60" align="center">
|
<template v-slot="{ $index }">{{ $index + 1 }}</template>
|
</el-table-column>
|
<el-table-column label="电芯码" min-width="200">
|
<template v-slot="{ row }">
|
<el-input v-model="row.sfcCode" size="small" placeholder="请输入电芯码" />
|
</template>
|
</el-table-column>
|
<el-table-column label="通道号" width="160">
|
<template v-slot="{ row }">
|
<el-input v-model="row.channel" size="small" placeholder="请输入通道号" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80" align="center">
|
<template v-slot="{ $index }">
|
<el-button type="danger" size="small" link @click="removeCellRow($index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<div style="margin-top: 16px; text-align: center">
|
<el-button type="primary" @click="submitForm" :loading="submitting">提交</el-button>
|
<el-button @click="resetForm">重置</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, getCurrentInstance } from "vue";
|
|
export default {
|
name: "PalletOperation",
|
setup() {
|
const { proxy } = getCurrentInstance();
|
const formRef = ref(null);
|
const submitting = ref(false);
|
|
const defaultFormData = () => ({
|
action: "",
|
palletCode: "",
|
lineId: "",
|
robotName: "",
|
warehouseCode: "",
|
grade: 1,
|
cells: [],
|
});
|
|
const formData = reactive(defaultFormData());
|
|
/// 操作类型变更时，组盘初始化一条空行，拆盘清空列表
|
const onActionChange = (val) => {
|
if (val === "组盘") {
|
formData.cells = [{ sfcCode: "", channel: "" }];
|
} else {
|
formData.cells = [];
|
}
|
};
|
|
/// 添加电芯行
|
const addCellRow = () => {
|
formData.cells.push({ sfcCode: "", channel: "" });
|
};
|
|
/// 移除电芯行
|
const removeCellRow = (index) => {
|
formData.cells.splice(index, 1);
|
};
|
|
/// 提交表单
|
const submitForm = () => {
|
if (!formData.action) return proxy.$message.error("请选择操作类型");
|
if (!formData.palletCode) return proxy.$message.error("请输入托盘号");
|
if (!formData.lineId) return proxy.$message.error("请输入线体编号");
|
if (!formData.robotName) return proxy.$message.error("请输入机械手名称");
|
if (!formData.warehouseCode) return proxy.$message.error("请输入仓库编号");
|
|
if (formData.action === "组盘") {
|
if (formData.cells.length === 0) return proxy.$message.error("组盘时至少需要一个电芯");
|
for (let i = 0; i < formData.cells.length; i++) {
|
if (!formData.cells[i].sfcCode) return proxy.$message.error(`第${i + 1}行电芯码不能为空`);
|
if (!formData.cells[i].channel) return proxy.$message.error(`第${i + 1}行通道号不能为空`);
|
}
|
}
|
|
const payload = {
|
action: formData.action,
|
palletCode: formData.palletCode,
|
lineId: formData.lineId,
|
robotName: formData.robotName,
|
warehouseCode: formData.warehouseCode,
|
grade: formData.grade,
|
cells: formData.action === "组盘" ? formData.cells : null,
|
};
|
|
submitting.value = true;
|
proxy.http
|
.post("/api/Task/PalletOperation", payload, "提交中...")
|
.then((res) => {
|
submitting.value = false;
|
if (!res.status) return proxy.$message.error(res.message);
|
proxy.$message.success(res.message || "操作成功");
|
})
|
.catch(() => {
|
submitting.value = false;
|
});
|
};
|
|
/// 重置表单
|
const resetForm = () => {
|
Object.assign(formData, defaultFormData());
|
};
|
|
return {
|
formRef,
|
formData,
|
submitting,
|
onActionChange,
|
addCellRow,
|
removeCellRow,
|
submitForm,
|
resetForm,
|
};
|
},
|
};
|
</script>
|
|
<style scoped>
|
.pallet-operation-page {
|
padding: 20px;
|
}
|
|
.cell-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
</style>
|
