<template>
|
<div>
|
<el-dialog
|
v-model="isShow"
|
title="编辑工艺路线"
|
width="800"
|
@close="closeModal"
|
>
|
<el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
|
<el-form-item
|
label="产品名称"
|
prop="productModelId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择产品',
|
trigger: 'change',
|
}
|
]"
|
>
|
<el-button type="primary" @click="showProductSelectDialog = true">
|
{{ formState.productName && formState.productModelName
|
? `${formState.productName} - ${formState.productModelName}`
|
: '选择产品' }}
|
</el-button>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="description">
|
<el-input v-model="formState.description" type="textarea" />
|
</el-form-item>
|
|
<!-- 工序配置 -->
|
<el-form-item label="工序配置" required>
|
<el-table :data="formState.processRouteItemList" border size="small" style="width: 100%">
|
<el-table-column label="部件" min-width="200">
|
<template #default="{ row }">
|
<el-select
|
v-model="row.processId"
|
placeholder="请选择部件"
|
clearable
|
filterable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="process in processOptions"
|
:key="process.id"
|
:label="formatProcessOptionLabel(process)"
|
:value="process.id"
|
/>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="质检" width="80" align="center">
|
<template #default="{ row }">
|
<el-switch v-model="row.isQuality" :active-value="true" inactive-value="false"/>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注" min-width="150">
|
<template #default="{ row }">
|
<el-input v-model="row.remark" placeholder="请输入备注" size="small"/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="60" align="center">
|
<template #default="{ $index }">
|
<el-button type="danger" link size="small" @click="removeProcessItem($index)">
|
<el-icon><Delete /></el-icon>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 8px;">
|
<el-button type="primary" link size="small" @click="addProcessItem">
|
<el-icon><Plus /></el-icon> 添加工序
|
</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
|
<!-- 产品选择弹窗 -->
|
<ProductSelectDialog
|
v-model="showProductSelectDialog"
|
@confirm="handleProductSelect"
|
single
|
/>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {ref, computed, getCurrentInstance, onMounted, nextTick, watch} from "vue";
|
import {update} from "@/api/productionManagement/processRoute.js";
|
import {processList} from "@/api/productionManagement/productionProcess.js";
|
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
|
record: {
|
type: Object,
|
required: true,
|
}
|
});
|
|
const emit = defineEmits(['update:visible', 'completed']);
|
|
// 响应式数据（替代选项式的 data）
|
const formState = ref({
|
productId: undefined,
|
productModelId: undefined,
|
productName: "",
|
productModelName: "",
|
description: '',
|
processRouteItemList: [],
|
});
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
const showProductSelectDialog = ref(false);
|
const processOptions = ref([]);
|
|
let { proxy } = getCurrentInstance()
|
|
// 获取工序列表
|
const getProcessOptions = async () => {
|
try {
|
const res = await processList();
|
processOptions.value = res.data || [];
|
} catch (error) {
|
console.error("获取工序列表失败", error);
|
processOptions.value = [];
|
}
|
};
|
|
// 格式化工序选项标签
|
const formatProcessOptionLabel = (process) => {
|
if (!process) return '';
|
const typeMap = {
|
1: '加工',
|
2: '刮板冷芯制作',
|
3: '管路组对',
|
4: '罐体连接及调试',
|
5: '测试打压',
|
6: '其他',
|
};
|
const typeText = typeMap[process.type] || '';
|
return `${process.name} ${process.no ? '(' + process.no + ')' : ''} ${typeText ? '[' + typeText + ']' : ''}`;
|
};
|
|
// 添加工序
|
const addProcessItem = () => {
|
formState.value.processRouteItemList.push({
|
processId: undefined,
|
isQuality: false,
|
remark: '',
|
});
|
};
|
|
// 移除工序
|
const removeProcessItem = (index) => {
|
formState.value.processRouteItemList.splice(index, 1);
|
};
|
|
const closeModal = () => {
|
isShow.value = false;
|
};
|
|
// 设置表单数据
|
const setFormData = () => {
|
if (props.record) {
|
formState.value = {
|
...props.record,
|
productId: props.record.productId,
|
productModelId: props.record.productModelId,
|
productName: props.record.productName || "",
|
// 注意：record中的字段是model，需要映射到productModelName
|
productModelName: props.record.model || props.record.productModelName || "",
|
description: props.record.description || '',
|
processRouteItemList: props.record.processRouteItemList || [],
|
};
|
}
|
}
|
|
// 产品选择处理
|
const handleProductSelect = async (products) => {
|
if (products && products.length > 0) {
|
const product = products[0];
|
formState.value.productModelId = product.id;
|
formState.value.productName = product.productName;
|
formState.value.productModelName = product.model;
|
showProductSelectDialog.value = false;
|
// 触发表单验证更新
|
proxy.$refs["formRef"]?.validateField('productModelId');
|
}
|
};
|
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
// 验证是否选择了产品
|
if (!formState.value.productModelId) {
|
proxy.$modal.msgError("请选择产品");
|
return;
|
}
|
// 验证是否配置了工序
|
if (!formState.value.processRouteItemList || formState.value.processRouteItemList.length === 0) {
|
proxy.$modal.msgError("请至少配置一个工序");
|
return;
|
}
|
// 验证所有工序是否选择了部件
|
const invalidItem = formState.value.processRouteItemList.find(item => !item.processId);
|
if (invalidItem) {
|
proxy.$modal.msgError("请选择所有工序的部件");
|
return;
|
}
|
update(formState.value).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit('completed');
|
proxy.$modal.msgSuccess("提交成功");
|
})
|
}
|
})
|
};
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
|
|
// 监听弹窗打开，初始化表单数据
|
watch(() => props.visible, (visible) => {
|
if (visible && props.record) {
|
nextTick(() => {
|
setFormData();
|
});
|
}
|
}, { immediate: true });
|
|
onMounted(() => {
|
getProcessOptions();
|
if (props.visible && props.record) {
|
setFormData();
|
}
|
});
|
</script>
|
