<template>
|
<div class="app-container">
|
<PageHeader content="工艺路线项目">
|
<template #right-button>
|
<el-button type="primary" @click="handleAdd">新增</el-button>
|
</template>
|
</PageHeader>
|
|
<el-table
|
v-loading="tableLoading"
|
border
|
:data="tableData"
|
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
|
row-key="id"
|
tooltip-effect="dark"
|
class="lims-table"
|
>
|
<el-table-column align="center" label="序号" width="60" type="index" />
|
<el-table-column label="工序名称" prop="processId" width="200">
|
<template #default="scope">
|
{{ getProcessName(scope.row.processId) || '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="产品名称" prop="productName" min-width="160" />
|
<el-table-column label="规格名称" prop="model" min-width="140" />
|
<el-table-column label="单位" prop="unit" width="100" />
|
<el-table-column label="操作" align="center" fixed="right" width="150">
|
<template #default="scope">
|
<el-button type="primary" link size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button type="danger" link size="small" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 新增/编辑弹窗 -->
|
<el-dialog
|
v-model="dialogVisible"
|
:title="operationType === 'add' ? '新增工艺路线项目' : '编辑工艺路线项目'"
|
width="500px"
|
@close="closeDialog"
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="120px"
|
>
|
<el-form-item label="工序" prop="processId">
|
<el-select
|
v-model="form.processId"
|
placeholder="请选择工序"
|
clearable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="process in processOptions"
|
:key="process.id"
|
:label="process.name"
|
:value="process.id"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="产品名称" prop="productModelId">
|
<el-button type="primary" @click="showProductSelectDialog = true">
|
{{ form.productName && form.model
|
? `${form.productName} - ${form.model}`
|
: '选择产品' }}
|
</el-button>
|
</el-form-item>
|
|
<el-form-item label="单位" prop="unit">
|
<el-input
|
v-model="form.unit"
|
:placeholder="form.productModelId ? '根据选择的产品自动带出' : '请先选择产品'"
|
clearable
|
:disabled="true"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<el-button @click="closeDialog">取消</el-button>
|
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 产品选择对话框 -->
|
<ProductSelectDialog
|
v-model="showProductSelectDialog"
|
@confirm="handleProductSelect"
|
single
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, getCurrentInstance, onMounted } from "vue";
|
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
|
import { findProcessRouteItemList, addOrUpdateProcessRouteItem } from "@/api/productionManagement/processRouteItem.js";
|
import { processList } from "@/api/productionManagement/productionProcess.js";
|
import { useRoute } from 'vue-router'
|
import { ElMessageBox } from 'element-plus'
|
|
const route = useRoute()
|
const { proxy } = getCurrentInstance() || {};
|
|
const routeId = computed(() => route.query.id);
|
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const dialogVisible = ref(false);
|
const operationType = ref('add'); // add | edit
|
const formRef = ref(null);
|
const submitLoading = ref(false);
|
|
const processOptions = ref([]);
|
const showProductSelectDialog = ref(false);
|
|
const form = ref({
|
id: undefined,
|
routeId: routeId.value,
|
processId: undefined,
|
productModelId: undefined,
|
productName: "",
|
model: "",
|
unit: "",
|
});
|
|
const rules = {
|
processId: [{ required: true, message: '请选择工序', trigger: 'change' }],
|
productModelId: [{ required: true, message: '请选择产品', trigger: 'change' }],
|
};
|
|
// 根据工序ID获取工序名称
|
const getProcessName = (processId) => {
|
if (!processId) return '';
|
const process = processOptions.value.find(p => p.id === processId);
|
return process ? process.name : '';
|
};
|
|
// 获取列表
|
const getList = () => {
|
tableLoading.value = true;
|
findProcessRouteItemList({ routeId: routeId.value })
|
.then(res => {
|
tableData.value = res.data || [];
|
tableLoading.value = false;
|
})
|
.catch(err => {
|
tableLoading.value = false;
|
console.error("获取列表失败：", err);
|
proxy?.$modal?.msgError("获取列表失败");
|
});
|
};
|
|
// 获取工序列表
|
const getProcessList = () => {
|
processList({})
|
.then(res => {
|
processOptions.value = res.data || [];
|
})
|
.catch(err => {
|
console.error("获取工序失败：", err);
|
});
|
};
|
|
// 新增
|
const handleAdd = () => {
|
operationType.value = 'add';
|
resetForm();
|
dialogVisible.value = true;
|
};
|
|
// 编辑
|
const handleEdit = (row) => {
|
operationType.value = 'edit';
|
form.value = {
|
id: row.id,
|
routeId: routeId.value,
|
processId: row.processId,
|
productModelId: row.productModelId,
|
productName: row.productName || "",
|
model: row.model || "",
|
unit: row.unit || "",
|
};
|
dialogVisible.value = true;
|
};
|
|
// 删除
|
const handleDelete = (row) => {
|
ElMessageBox.confirm('确认删除该工艺路线项目？', '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
// 调用删除接口，传单个对象（包含id）
|
addOrUpdateProcessRouteItem({
|
id: row.id,
|
routeId: routeId.value,
|
})
|
.then(() => {
|
proxy?.$modal?.msgSuccess('删除成功');
|
getList();
|
})
|
.catch(() => {
|
proxy?.$modal?.msgError('删除失败');
|
});
|
})
|
.catch(() => {});
|
};
|
|
// 产品选择
|
const handleProductSelect = (products) => {
|
if (products && products.length > 0) {
|
const product = products[0];
|
form.value.productModelId = product.id;
|
form.value.productName = product.productName;
|
form.value.model = product.model;
|
form.value.unit = product.unit || "";
|
showProductSelectDialog.value = false;
|
// 触发表单验证
|
formRef.value?.validateField('productModelId');
|
}
|
};
|
|
// 提交
|
const handleSubmit = () => {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
submitLoading.value = true;
|
|
// 构建提交数据对象（单个对象形式）
|
const submitData = {
|
routeId: routeId.value,
|
processId: form.value.processId,
|
productModelId: form.value.productModelId,
|
};
|
|
if (operationType.value === 'add') {
|
// 新增：传单个对象
|
addOrUpdateProcessRouteItem(submitData)
|
.then(() => {
|
proxy?.$modal?.msgSuccess('新增成功');
|
closeDialog();
|
getList();
|
})
|
.catch(() => {
|
proxy?.$modal?.msgError('新增失败');
|
})
|
.finally(() => {
|
submitLoading.value = false;
|
});
|
} else {
|
// 编辑：传单个对象，包含id
|
addOrUpdateProcessRouteItem({
|
...submitData,
|
id: form.value.id,
|
})
|
.then(() => {
|
proxy?.$modal?.msgSuccess('修改成功');
|
closeDialog();
|
getList();
|
})
|
.catch(() => {
|
proxy?.$modal?.msgError('修改失败');
|
})
|
.finally(() => {
|
submitLoading.value = false;
|
});
|
}
|
}
|
});
|
};
|
|
// 重置表单
|
const resetForm = () => {
|
form.value = {
|
id: undefined,
|
routeId: routeId.value,
|
processId: undefined,
|
productModelId: undefined,
|
productName: "",
|
model: "",
|
unit: "",
|
};
|
formRef.value?.resetFields();
|
};
|
|
// 关闭弹窗
|
const closeDialog = () => {
|
dialogVisible.value = false;
|
resetForm();
|
};
|
|
onMounted(() => {
|
getList();
|
getProcessList();
|
});
|
</script>
|
|
<style scoped>
|
:deep(.el-table__row) {
|
transition: background-color 0.2s;
|
}
|
|
:deep(.el-table__row:hover) {
|
background-color: #f9fafc !important;
|
}
|
</style>
|
