<template>
|
<div class="app-container">
|
<PageHeader content="产品结构详情">
|
<template #right-button>
|
<el-button v-if="dataValue.isEdit"
|
type="primary"
|
@click="addItem">添加
|
</el-button>
|
<el-button v-if="!dataValue.isEdit"
|
type="primary"
|
@click="dataValue.isEdit = true">编辑
|
</el-button>
|
<el-button v-if="dataValue.isEdit"
|
type="primary"
|
@click="cancelEdit">取消
|
</el-button>
|
<el-button type="primary"
|
:loading="dataValue.loading"
|
@click="submit"
|
:disabled="!dataValue.isEdit">确认
|
</el-button>
|
</template>
|
</PageHeader>
|
<el-table
|
:data="tableData"
|
border
|
:preserve-expanded-content="false"
|
:default-expand-all="true"
|
style="width: 100%"
|
>
|
<el-table-column type="expand">
|
<template #default="props">
|
<el-form ref="form"
|
:model="dataValue">
|
<el-table :data="dataValue.dataList"
|
style="width: 100%">
|
<el-table-column prop="productName"
|
label="产品"/>
|
<el-table-column prop="model"
|
label="规格">
|
<template #default="{ row, $index }">
|
<el-form-item v-if="dataValue.isEdit"
|
:prop="`dataList.${$index}.model`"
|
:rules="[{ required: true, message: '请选择规格', trigger: ['blur','change'] }]"
|
style="margin: 0">
|
<el-select v-model="row.model"
|
placeholder="请选择规格"
|
clearable
|
:disabled="!dataValue.isEdit"
|
style="width: 100%"
|
@visible-change="(v) => { if (v) openDialog($index) }">
|
<el-option v-if="row.model"
|
:label="row.model"
|
:value="row.model" />
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="processId"
|
label="消耗工序">
|
<template #default="{ row, $index }">
|
<el-form-item :prop="`dataList.${$index}.processId`"
|
:rules="[{ required: true, message: '请选择消耗工序', trigger: 'change' }]"
|
style="margin: 0">
|
<el-select v-model="row.processId"
|
placeholder="请选择"
|
filterable
|
clearable
|
style="width: 100%"
|
:disabled="!dataValue.isEdit">
|
<el-option v-for="item in dataValue.processOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="unitQuantity"
|
label="单位产出所需数量">
|
<template #default="{ row, $index }">
|
<el-form-item :prop="`dataList.${$index}.unitQuantity`"
|
:rules="[{ required: true, message: '请输入单位产出所需数量', trigger: ['blur','change'] }]"
|
style="margin: 0">
|
<el-input-number v-model="row.unitQuantity"
|
:min="0"
|
:precision="2"
|
:step="1"
|
controls-position="right"
|
style="width: 100%"
|
:disabled="!dataValue.isEdit" />
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="demandedQuantity"
|
label="需求总量">
|
<template #default="{ row, $index }">
|
<el-form-item :prop="`dataList.${$index}.demandedQuantity`"
|
:rules="[{ required: true, message: '请输入需求总量', trigger: ['blur','change'] }]"
|
style="margin: 0">
|
<el-input-number v-model="row.demandedQuantity"
|
:min="0"
|
:precision="2"
|
:step="1"
|
controls-position="right"
|
style="width: 100%"
|
:disabled="!dataValue.isEdit" />
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="unit"
|
label="单位">
|
<template #default="{ row, $index }">
|
<el-form-item :prop="`dataList.${$index}.unit`"
|
:rules="[{ required: true, message: '请输入单位', trigger: ['blur','change'] }]"
|
style="margin: 0">
|
<el-input v-model="row.unit"
|
placeholder="请输入单位"
|
clearable
|
:disabled="!dataValue.isEdit" />
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" width="100">
|
<template #default="{ row, $index }">
|
<el-button type="danger"
|
text
|
@click="dataValue.dataList.splice($index, 1)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
</template>
|
</el-table-column>
|
<el-table-column label="BOM编号" prop="bomNo" />
|
<el-table-column label="产品名称" prop="productName" />
|
<el-table-column label="规格型号" prop="model" />
|
</el-table>
|
|
<product-select-dialog v-if="dataValue.showProductDialog"
|
v-model:model-value="dataValue.showProductDialog"
|
@confirm="handleProduct" />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {
|
computed,
|
defineAsyncComponent,
|
defineComponent,
|
onMounted,
|
reactive,
|
ref,
|
} from "vue";
|
import { queryList, add } from "@/api/productionManagement/productStructure.js";
|
import { list } from "@/api/productionManagement/productionProcess";
|
import { ElMessage } from "element-plus";
|
import {useRoute, useRouter} from "vue-router";
|
|
defineComponent({
|
name: "StructureEdit",
|
});
|
|
const ProductSelectDialog = defineAsyncComponent(
|
() => import("@/views/basicData/product/ProductSelectDialog.vue")
|
);
|
const form = ref();
|
|
const route = useRoute()
|
const router = useRouter()
|
const routeId = computed({
|
get() {
|
return route.query.id;
|
},
|
|
set(val) {
|
emit('update:router', val)
|
}
|
});
|
|
// 从路由参数获取产品信息
|
const routeBomNo = computed(() => route.query.bomNo || '');
|
const routeProductName = computed(() => route.query.productName || '');
|
const routeProductModelName = computed(() => route.query.productModelName || '');
|
|
const dataValue = reactive({
|
dataList: [],
|
productOptions: [],
|
processOptions: [],
|
showProductDialog: false,
|
currentRowIndex: null,
|
loading: false,
|
isEdit: false,
|
});
|
|
const tableData = reactive([
|
{
|
productName: "",
|
model: "",
|
bomNo: "",
|
}
|
])
|
|
const openDialog = index => {
|
dataValue.currentRowIndex = index;
|
dataValue.showProductDialog = true;
|
};
|
|
const fetchData = async () => {
|
const { data } = await queryList(routeId.value);
|
// 产品信息从路由参数获取，优先使用路由参数
|
dataValue.dataList = data || [];
|
};
|
|
const fetchProcessOptions = async () => {
|
const { data } = await list(routeId.value);
|
dataValue.processOptions = data;
|
};
|
|
const handleProduct = row => {
|
if (row?.length > 1) {
|
ElMessage.error("只能选择一个产品");
|
}
|
dataValue.dataList[dataValue.currentRowIndex].productName =
|
row[0].productName;
|
dataValue.dataList[dataValue.currentRowIndex].model = row[0].model;
|
dataValue.dataList[dataValue.currentRowIndex].productModelId = row[0].id;
|
dataValue.dataList[dataValue.currentRowIndex].unit = row[0].unit || "";
|
dataValue.showProductDialog = false;
|
};
|
|
const submit = () => {
|
form.value
|
.validate(valid => {
|
dataValue.loading = true;
|
if (valid) {
|
add({
|
bomId: routeId.value,
|
productStructureList: dataValue.dataList || [],
|
}).then(res => {
|
router.push({
|
path: '/productionManagement/productionManagement/productStructure/index',
|
})
|
ElMessage.success("保存成功");
|
dataValue.loading = false;
|
});
|
}
|
})
|
.finally(() => {
|
dataValue.loading = false;
|
});
|
};
|
|
const addItem = () => {
|
dataValue.dataList.push({
|
productName: "",
|
productId: "",
|
model: undefined,
|
productModelId: undefined,
|
processId: "",
|
unitQuantity: 0,
|
demandedQuantity: 0,
|
unit: "",
|
});
|
};
|
|
const cancelEdit = () => {
|
dataValue.isEdit = false;
|
dataValue.dataList = dataValue.dataList.filter(item => item.id !== undefined);
|
};
|
|
onMounted(() => {
|
// 从路由参数回显数据
|
tableData[0].productName = routeProductName.value;
|
tableData[0].model = routeProductModelName.value;
|
tableData[0].bomNo = routeBomNo.value;
|
|
fetchData();
|
fetchProcessOptions();
|
});
|
</script>
|
