<template>
|
<div>
|
<el-dialog
|
v-model="isShow"
|
title="工艺路线项目"
|
width="800"
|
@close="closeModal"
|
>
|
<el-button type="primary" @click="isShowProductSelectDialog = true" class="mb5">选择产品</el-button>
|
<el-table
|
ref="multipleTable"
|
v-loading="tableLoading"
|
border
|
:data="routeItems"
|
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
|
row-key="id"
|
tooltip-effect="dark"
|
class="lims-table"
|
>
|
<el-table-column align="center" label="序号" type="index" width="60" />
|
|
<el-table-column v-for="(item, index) in tableColumn" :key="index" :label="item.label" :width="item.width" show-overflow-tooltip>
|
<template #default="scope" v-if="item.dataType === 'action'">
|
<el-button
|
v-for="(op, opIndex) in item.operation"
|
:key="opIndex"
|
:type="op.type"
|
:link="op.link"
|
size="small"
|
@click="op.clickFun(scope.row)"
|
>
|
{{ op.name }}
|
</el-button>
|
</template>
|
|
<template #default="scope" v-else>
|
<template v-if="item.prop === 'processId'">
|
<el-select v-model="scope.row[item.prop]" style="width: 100%">
|
<el-option
|
v-for="process in processOptions"
|
:key="process.id"
|
:label="process.name"
|
:value="process.id"
|
/>
|
</el-select>
|
</template>
|
<template v-else>
|
{{ scope.row[item.prop] }}
|
</template>
|
</template>
|
|
</el-table-column>
|
</el-table>
|
|
<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>
|
|
<ProductSelectDialog v-if="isShowProductSelectDialog" v-model:model-value="isShowProductSelectDialog" @confirm="handelSelectProducts" />
|
</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";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
record: {
|
type: Object,
|
required: true,
|
}
|
});
|
|
const emit = defineEmits(['update:visible', 'completed']);
|
|
const processOptions = ref([]);
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
const tableColumn = ref([
|
{
|
label: "产品名称",
|
prop: "productName",
|
},
|
{
|
label: "规格名称",
|
prop: "model",
|
},
|
{
|
label: "单位",
|
prop: "unit",
|
},
|
{
|
label: "工序名称",
|
prop: "processId",
|
},
|
{
|
dataType: "action",
|
label: "操作",
|
align: "center",
|
fixed: "right",
|
operation: [
|
{
|
name: "删除",
|
type: "danger",
|
link: true,
|
clickFun: (row) => {
|
const index = routeItems.value.indexOf(row);
|
if (index !== -1) {
|
routeItems.value.splice(index, 1);
|
}
|
}
|
},
|
]
|
}
|
])
|
|
const tableLoading = ref(false);
|
|
const isShowProductSelectDialog = ref(false)
|
const routeItems = ref([])
|
|
let { proxy } = getCurrentInstance()
|
|
const closeModal = () => {
|
isShow.value = false;
|
};
|
|
const handelSelectProducts = (products) => {
|
const data = products.map(({ id, ...product }) => ({
|
...product,
|
productModelId: id,
|
routeId: props.record.id
|
}));
|
|
routeItems.value.push(...data);
|
}
|
|
const findProcessRouteItems = () => {
|
tableLoading.value = true;
|
|
findProcessRouteItemList({routeId: props.record.id}).then(res => {
|
tableLoading.value = false;
|
routeItems.value = res.data.map(item => ({
|
...item,
|
processId: item.processId === 0 ? undefined : item.processId
|
}))
|
}).catch(err => {
|
tableLoading.value = false;
|
})
|
};
|
|
const findProcessList = () => {
|
processList({}).then(res => {
|
processOptions.value = res.data
|
})
|
}
|
|
const handleSubmit = () => {
|
if (routeItems.value.length === 0) {
|
proxy.$modal.msgError("请添加路线项目");
|
return;
|
}
|
|
// 是否有未选择的工序
|
const hasUnselectedProcess = routeItems.value.some(item => !item.processId);
|
if (hasUnselectedProcess) {
|
proxy.$modal.msgError("请选择工序");
|
return;
|
}
|
|
addOrUpdateProcessRouteItem({routeId: props.record.id, processRouteItem: routeItems.value}).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit('completed');
|
proxy.$modal.msgSuccess("提交成功");
|
})
|
};
|
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
|
onMounted(() => {
|
findProcessRouteItems()
|
findProcessList()
|
})
|
</script>
|
