1

lzhe

2024-05-23 b67171800ece6f3bbd9b15874c49e8532ae32702

1

 src/views/console/bom-list/index.vue

@@ -1,47 +1,50 @@
<template>
    <div class="rolePage">
    <div class="bomPage">
        <div class="roleContainer">
            <div class="roleContainer-title">产品列表</div>
            <el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="输入搜索内容" clearable @keyup.enter="searchBtn"></el-input>
            <ul>
                <li v-for="(item,index) in leftData" @click="changeTabaleLi(item,index)">
                    <span :class="{active: item.active}">{{item.roleName}}</span>
            <div class="bomContainer-title">产品列表</div>
            <el-input v-model="keyword" size="small" prefix-icon="el-icon-search" placeholder="输入搜索内容" clearable @keyup.enter="searchBtn"></el-input>
            <ul class="left-ul">
                <li v-for="(item,index) in leftData" :class="{active: item.active}" @click="changeTabaleLi(index)">
                    <span>【{{item.code}}】{{item.name}}</span>
                </li>
            </ul>
        </div>
        <div class="role-main-tabs">
            <div class="role-main-header">
                <div class="roleContainer-title">BOM清单</div>
                <div>
                    <div>BOM版本</div>
                    <div>
                        <span>产品名称</span>
                        <span>产品编号</span>
        <div class="bom-main-tabs">
            <div class="bom-main-header">
                <div class="bomContainer-title">BOM清单</div>
                <div style="padding: 20px;border-bottom: 1px solid #dee;">
                    <div class="main-info">
                        <div class="main-info-title">BOM ç‰ˆæœ¬</div>
                        <div class="main-info-tooltip">
                            <div class="main-info-item"><span style="background-color: yellow"></span><span>未定版</span></div>
                            <div class="main-info-item"><span style="background-color: #b7c9f3"></span><span>已定版</span></div>
                        </div>
                    </div>
                    <div class="main-info-conent">
                        <span>产品名称<span>{{info.name}}</span></span>
                        <span>产品编号<span>{{info.code}}</span></span>
                    </div>
                    <div>
                        <span>未定版</span>
                        <span>已定版</span>
                    </div>
                    <div>
                        æ·»åŠ æ–°ç‰ˆæœ¬
                        <el-button type="primary" @click="addVis">添加新版本</el-button>
                    </div>
                </div>
            </div>
            <el-tabs tab-position="top">
                <div>
                    <div>BOM清单列表</div>
            <div class="bom-main-content">
                <div class="main-content-left">
                    <div class="bomContainer-title">BOM清单列表</div>
                    <div></div>
                </div>
                <div>
                <div class="main-content-right">
                    <ul>
                        <li>物料编号</li>
                        <li>物料名称</li>
                        <li>规格</li>
                        <li>计量单位</li>
                        <li>物料类型</li>
                        <li>物料属性</li>
                        <li>是否必检</li>
                        <li>额定库存</li>
                        <li>安全库存</li>
                        <li>物料编号<span>-</span></li>
                        <li>物料名称<span>-</span></li>
                        <li>规格<span>-</span></li>
                        <li>计量单位<span>-</span></li>
                        <li>物料类型<span>-</span></li>
                        <li>物料属性<span>-</span></li>
                        <li>是否必检<span>-</span></li>
                        <li>额定库存<span>-</span></li>
                        <li>安全库存<span>-</span></li>
                    </ul>
                    <el-table ref="multipleTableRef0" :data="tableData" border style="width: 100%" class="multipleTableRef">
                        <el-table-column prop="name" label="工序编号"></el-table-column>
@@ -51,44 +54,205 @@
                        <el-table-column prop="standardModel" label="固定耗损"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="200px">
                            <template #default="scope">
                                <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                <!-- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">刷新</el-button>
                                <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">删除</el-button>
                                <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">删除</el-button> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tabs>
            </div>
        </div>
        <el-dialog title="" v-model="visible" :width="360" class="visible-model">
            <el-form :model="routeForm" :rules="routeRules" ref="dialogForm" label-width="120px"
                label-position="center">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="工艺路线版本" prop="test">
                            <el-select v-model="routeForm.test" style="width: 100%" placeholder="请选择">
                                <el-option v-for="item in testList" :key="item.id" :label="item.title" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" :loading="isSaveing" @click="routeSubmit">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'BOM',
        components: {
			
        },
        components: {},
        data() {
            return {
                testList: [],
                routeForm: {
                    test: ""
                },
                routeRules: {
                    test: [
                        { required: true, message: "请选择工艺路线版本" }
                    ]
                },
                visible: false,
                leftData: [],
                dialog: {
                    save: false,
                    permission: false
                },
                info: {},
                tableData: []
            }
        },
        mounted(){

            this.getLeftTree();
        },
        methods: {
            routeSubmit() {
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        // this.$HTTP.post("/api/blade-system/data-scope/submit",obj).then(res=> {
                        //     this.isSaveing = false;
                        //     if(res.code == 200) {
                        //         this.$emit('success', this.addDictForm, this.mode);
                        //         this.visible = false;
                        //         this.$message.success("操作成功");
                        //     }else {
                        //         this.$alert(res.message, "提示", {type: 'error'});
                        //     }
                        // })
                    }else{
                        return false;
                    }
                })
            },
            searchBtn() {},
			
            addVis() {
                this.visible = true;
            },
            changeTabaleLi(index) {
                this.leftData.forEach(item=> {
                    item.active = false;
                })
                this.leftData[index].active = true;
                this.info = this.leftData[index];
            },
            getLeftTree() {
                this.$HTTP.get("/api/blade-cps/product/tree").then(res=> {
                    if(res.code == 200) {
                        this.leftData = res.data;
                    }
                })
            }
        }
    }
</script>

<style scoped>

.bomPage {
    display: flex;
    min-height: 100%;
    margin: 8px;
}
.bomContainer-title {
    font-size: 16px;
    text-align: center;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #e2e2e2;
    background-color: #409eff;
    color: #fff;
    border-radius: 2px 2px 0 0;
    margin-bottom: 12px;
}
.roleContainer {
    width: 240px;
    margin-right: 8px;
    padding: 4px;
    background-color: #fff;
}
.bom-main-tabs {
    flex: 1;
    padding: 8px;
    background-color: #fff;
}
.left-ul {
    margin-top: 12px;
    padding-left:30px;
    padding-right:30px;
}
.left-ul li {
    padding: 6px 6px;
    list-style: none;
    cursor: pointer;
    margin-bottom: 6px;
}
.left-ul .active {
    background-color: #7ab3ee;
    display: inline-block;
    width: 100%;
}
.left-ul li:hover {
    background-color: #eff4f9;
}
.main-info {
    display: flex;
    justify-content: space-between;
}
.main-info-title {
    font-size: 14px;
    padding-left: 8px;
    border-left: 2px solid #7ab3ee;
}
.main-info-tooltip {
    display: flex;
    font-size: 12px;
}
.main-info-item {
    margin-right: 8px;
}
.main-info-item span:nth-child(1) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    display: inline-block;
}
.main-info-conent {
    display: flex;
    margin: 8px 0px 12px;
}
.main-info-conent > span {
    margin-right: 12px;
    font-size: 14px;
}
.main-info-conent > span span {
    margin-left:12px;
}
.bom-main-content {
    display: flex;
}
.main-content-left {
    width: 320px;
}
.main-content-right {
    flex: 1;
}
.main-content-right ul {
    padding: 12px 30px;
}
.main-content-right ul li {
    width: 50%;
    float: left;
    list-style: none;
    margin-bottom:12px;
}
.main-content-right ul li span {
    margin-left:12px;
}
</style>

 src/views/console/product-process/process-route.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,260 @@
<template>
    <div class="processPage">
        <div class="roleContainer">
            <div>+新建工艺路线</div>
            <el-input v-model="keyword" size="small" prefix-icon="el-icon-search" placeholder="请输入名称" clearable @keyup.enter="searchBtn"></el-input>
            <ul class="left-ul">
                <li v-for="(item,index) in leftData" :class="{active: item.active}" @click="changeTabaleLi(index)">
                    <span>【{{item.code}}】{{item.name}}</span>
                </li>
            </ul>
        </div>
        <div class="process-main-tabs">
            <div class="process-main-header">
                <div class="main-header-label">工艺路线</div>
                <div style="padding: 20px;border-bottom: 1px solid #dee;">
                    <div class="main-info">
                        <div class="main-info-title">工艺路线版本</div>
                        <div class="main-info-tooltip">
                            <div class="main-info-item"><span style="background-color: yellow"></span><span>未定版</span></div>
                            <div class="main-info-item"><span style="background-color: #b7c9f3"></span><span>已定版</span></div>
                        </div>
                    </div>
                    <div>
                        <el-button type="primary" @click="addVis" disabled>添加新版本</el-button>
                    </div>
                </div>
            </div>
            <div>关联产线<span>-</span></div>
            <div class="process-main-content">
                <div class="main-content-left">
                    <div class="main-info-title">工艺路线</div>
                    <div>
                        <el-button type="primary">新增</el-button>
                        <el-button type="primary">定版</el-button>
                        <el-button disabled>并序</el-button>
                    </div>
                    <el-table ref="multipleTableRef0" :data="tableData" border style="width: 100%" class="multipleTableRef">
                        <el-table-column prop="name" label="工序顺序"></el-table-column>
                        <el-table-column prop="code" label="工序编号"></el-table-column>
                        <el-table-column prop="typeName" label="工序名称"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="200px">
                            <template #default="scope">
                                <!-- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">刷新</el-button>
                                <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">删除</el-button> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="main-content-right">
                    <div class="main-info-title">工序信息</div>
                    <ul>
                        <li>工序编号<span>-</span></li>
                        <li>工序名称<span>-</span></li>
                        <li>工序顺序<span>-</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- <el-dialog title="" v-model="visible" :width="360" class="visible-model">
            <el-form :model="routeForm" :rules="routeRules" ref="dialogForm" label-width="120px"
                label-position="center">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="工艺路线版本" prop="test">
                            <el-select v-model="routeForm.test" style="width: 100%" placeholder="请选择">
                                <el-option v-for="item in testList" :key="item.id" :label="item.title" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" :loading="isSaveing" @click="routeSubmit">确定</el-button>
            </template>
        </el-dialog> -->
    </div>
</template>

<script>
    export default {
        name: 'BOM',
        components: {},
        data() {
            return {
                testList: [],
                routeForm: {
                    test: ""
                },
                routeRules: {
                    test: [
                        { required: true, message: "请选择工艺路线版本" }
                    ]
                },
                visible: false,
                leftData: [],
                dialog: {
                    save: false,
                    permission: false
                },
                info: {},
                tableData: []
            }
        },
        mounted(){
            //this.getLeftTree();
        },
        methods: {
            routeSubmit() {
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        // this.$HTTP.post("/api/blade-system/data-scope/submit",obj).then(res=> {
                        //     this.isSaveing = false;
                        //     if(res.code == 200) {
                        //         this.$emit('success', this.addDictForm, this.mode);
                        //         this.visible = false;
                        //         this.$message.success("操作成功");
                        //     }else {
                        //         this.$alert(res.message, "提示", {type: 'error'});
                        //     }
                        // })
                    }else{
                        return false;
                    }
                })
            },
            searchBtn() {},
            addVis() {
                this.visible = true;
            },
            changeTabaleLi(index) {
                this.leftData.forEach(item=> {
                    item.active = false;
                })
                this.leftData[index].active = true;
                this.info = this.leftData[index];
            },
            getLeftTree() {
                this.$HTTP.get("/api/blade-cps/product/tree").then(res=> {
                    if(res.code == 200) {
                        this.leftData = res.data;
                    }
                })
            }
        }
    }
</script>

<style scoped>
.processPage {
    display: flex;
    min-height: 100%;
    margin: 8px;
}
.processContainer-title {
    font-size: 16px;
    text-align: center;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #e2e2e2;
    background-color: #409eff;
    color: #fff;
    border-radius: 2px 2px 0 0;
    margin-bottom: 12px;
}
.roleContainer {
    width: 240px;
    margin-right: 8px;
    padding: 4px;
    background-color: #fff;
}
.process-main-tabs {
    flex: 1;
    padding: 8px;
    background-color: #fff;
}
.left-ul {
    margin-top: 12px;
    padding-left:30px;
    padding-right:30px;
}
.left-ul li {
    padding: 6px 6px;
    list-style: none;
    cursor: pointer;
    margin-bottom: 6px;
}
.left-ul .active {
    background-color: #7ab3ee;
    display: inline-block;
    width: 100%;
}
.left-ul li:hover {
    background-color: #eff4f9;
}
.main-info {
    display: flex;
    justify-content: space-between;
}
.main-header-label {
    font-size: 14px;
    text-align: left;
    color: #333;
    height: 52px;
    border-bottom: 1px solid #dee;
    padding: 0 16px;
}
.main-info-title {
    font-size: 14px;
    padding-left: 8px;
    border-left: 2px solid #7ab3ee;
}
.main-info-tooltip {
    display: flex;
    font-size: 12px;
}
.main-info-item {
    margin-right: 8px;
}
.main-info-item span:nth-child(1) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    display: inline-block;
}
.main-info-conent {
    display: flex;
    margin: 8px 0px 12px;
}
.main-info-conent > span {
    margin-right: 12px;
    font-size: 14px;
}
.main-info-conent > span span {
    margin-left:12px;
}
.process-main-content {
    display: flex;
}
.main-content-left {
    width: 70%;
}
.main-content-right {
    flex: 1;
}
.main-content-right ul {
    padding: 12px 30px;
}
.main-content-right ul li {
    width: 50%;
    float: left;
    list-style: none;
    margin-bottom:12px;
}
.main-content-right ul li span {
    margin-left:12px;
}
</style>