
<template>
    <layout-form>
        <el-form :model="form" :loading="loading" :rules="rules" size='small' label-width='100px' ref="form">
            <el-row>
                <Field label="所属物料ID" prop="materiaId" v-model="form.materiaId" />
                <Field label="所属产品ID" prop="productId" v-model="form.productId" />
                <Field label="BOM版本" prop="version" v-model="form.version" />
                <Field label="BOM分类" prop="useType" v-model="form.useType" :enumData='dict.useType' type='select' />
                <Field label="bom状态" prop="status" v-model="form.status" :enumData='dict.status' type='select' />
                <Field label="bom备注" span="24" prop="remark" v-model="form.remark" />
            </el-row>
            <form-buttons @submit='submitForm' />
        </el-form>
        <!-- 物料明细-->
        <div v-if="pageInfo.type != 'add'">
            <el-button type="success" @click='handleAddItem' size='small'>新增</el-button>
            <el-table :data="bomItems" border style="width: 100%" highlight-current-row>
                <el-table-column fixed prop="code" label="物料代码" width="150">
                </el-table-column>
                <el-table-column prop="name" label="物料名称" width="120">
                </el-table-column>
                <el-table-column prop="specModel" label="规格/型号" width="120" />
                <el-table-column prop="mainPicUrl" label="图片" width="120" />
                <el-table-column prop="useNum" label="用量" width="120" />
                <el-table-column prop="unitOfMeasure" label="计量单位" width="120" />
                <el-table-column prop="lossRate" label="损耗率" width="300" />
                <el-table-column prop="supplyType" label="补给方式" width="120" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </layout-form>
</template>

<script>
import form from "@/assets/mixins/form";
export default {
    mixins: [form],
    methods: {
        beforeRender(data) {
            return data;
        },
        afterRender({ result }) {
            this.getBomItems();
        },
        //添加点击事件
        async getMateriaListDefault() {
            await this.getMateriaListByQuery({});
        },
        //异步加载bom项列表
        async getBomItems() {
            this.$post("/product/bom/item/list", {
                "query.bomId": this.form.id,
                "pageInfo.prePageResult": -1,
            })
                .then((res) => {
                    if (res.data) {
                        this.bomItems = res.data.result;
                    } else {
                        this.$message.success("获取BOM物料项失败");
                    }
                })
                .catch((error) => {
                    this.$message.error(error.message);
                });
        },
    },
    data() {
        return {
            materiaQueryList: [{ code: "sss", name: "nnnnnn" }],
            bomItems: [],
            currItem: {},
            toString: ["useType", "status"],
            rules: {
                materiaId: [
                    {
                        required: true,
                        message: "请输入所属物料ID",
                        trigger: "blur",
                    },
                ],
                version: [
                    {
                        required: true,
                        message: "请输入版本",
                        trigger: "blur",
                    },
                ],
                useType: [
                    {
                        required: true,
                        message: "请选择BOM分类",
                        trigger: "blur",
                    },
                ],
                status: [
                    {
                        required: true,
                        message: "请选择bom状态",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
};
</script>
