1

lzhe

2024-05-23 6a983f2c1de101450fdf543c2fb9acd7037eabf0

1

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,112 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
        <el-form :model="addRouteForm" :rules="addRouteRules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工艺路线" prop="name">
                        <el-input v-model="addRouteForm.name" placeholder="工艺路线" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="产品编号">
                        <el-select v-model="addRouteForm.productId" style="width: 100%" placeholder="产品编号">
                            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="addRouteForm.description" placeholder="备注" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="routeSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                productList: [],
                value1: true,
                mode: "add",
                titleMap: {
                    add: '新增',
                    edit: '编辑',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                addRouteForm: {
                    name: "",
                    productId: "",
                    description: "",

                },
                //验证规则
                addRouteRules: {
                    name:[{required: true, message: '请输入工艺路线'}],
                },
                //所需数据选项
                groups: [],
                groupsProps: {
                    value: "id",
                    multiple: true,
                    checkStrictly: true
                },
                depts: [],
                deptsProps: {
                    value: "id",
                    checkStrictly: true
                }
            }
        },
        mounted() {
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //表单提交方法
            routeSubmit(){
                var obj = Object.assign({},this.addRouteForm);
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        this.$HTTP.put("/api/blade-cps/craft-routing/update",obj).then(res=> {
                            this.isSaveing = false;
                            if(res.code == 200) {
                                this.$emit('success', this.addRouteForm, this.mode);
                                this.visible = false;
                                this.$message.success("操作成功");
                            }else {
                                this.$alert(res.message, "提示", {type: 'error'});
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data,res){
                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                this.productList = res;
                Object.assign(this.addRouteForm, data);
            }
        }
    }
</script>

<style>
</style>

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

@@ -1,40 +1,59 @@
<template>
    <div class="processPage">
        <div class="roleContainer">
            <div>+新建工艺路线</div>
            <div class="addRoute">+新建工艺路线</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>
                    <div>{{item.name}}</div>
                    <div>关联产品【{{item.productCode}}】{{item.productName}}</div>
                    <div>{{item.description}}</div>
                    <el-dropdown class="fix-btn">
                        <span class="el-dropdown-link">...</span>
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="table_edit(item, index)">编辑</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </li>
            </ul>
        </div>
        <div class="process-main-tabs">
            <div class="process-main-header">
                <div class="main-header-label">工艺路线</div>
                <div class="main-header-label">工艺路线<span>{{leftData[0].name}}</span></div>
                <div style="padding: 20px;border-bottom: 1px solid #dee;">
                    <div class="main-info">
                        <div class="main-info-title">工艺路线版本</div>
                        <div class="info-top-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: #f8ab00"></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 class="btn-box vistion-button">
                            <span class="vistion-button-round"></span>
                            <span class="vistion-button-name">V001</span>
                            <el-icon class="vistion-button-icon"><DocumentCopy /></el-icon>
                            <el-icon class="vistion-button-icon"><Delete /></el-icon>
                        </div>
                        <div class="btn-box most-vision">更多版本...</div>
                        <el-button>+ æ·»åŠ æ–°ç‰ˆæœ¬</el-button>
                    </div>
                </div>
            </div>
            <div>关联产线<span>-</span></div>
            <div class="correlation-product-line">关联产线<span>千文科技</span></div>
            <div class="process-main-content">
                <div class="main-content-left">
                    <div class="main-info-title">工艺路线</div>
                    <div>
                    <div class="info-top-title">工艺路线</div>
                    <div style="margin-bottom: 12px;">
                        <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 ref="multipleTableRef0" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="HandleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <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>
@@ -76,12 +95,19 @@
            </template>
        </el-dialog> -->
    </div>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="addRouteSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
    import saveDialog from './addRoute'
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        name: 'BOM',
        components: {},
        name: 'route',
        components: {...ElementPlusIconsVue,saveDialog},
        data() {
            return {
                testList: [],
@@ -96,17 +122,34 @@
                visible: false,
                leftData: [],
                dialog: {
                    save: false,
                    permission: false
                    save: false
                },
                info: {},
                tableData: []
                tableData: [],
                selection: []
            }
        },
        mounted(){
            //this.getLeftTree();
            this.getLeftTree();
        },
        methods: {
            table_edit(row){
                this.dialog.save = true
                this.$HTTP.get(`/api/blade-cps/craft-routing/not-band-craft?craftId=${row.id}`).then(res=> {
                    if(res.code == 200) {
                        this.dialog.save = true;
                        this.$nextTick(() => {
                            this.$refs.saveDialog.open('edit').setData(row,res.data);
                        })
                    }
                })
            },
            addRouteSuccess() {
                this.getLeftTree();
            },
            HandleSelectionChange(selection) {
                this.selection = selection;
            },
            routeSubmit() {
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
@@ -126,9 +169,6 @@
                })
            },
            searchBtn() {},
            addVis() {
                this.visible = true;
            },
            changeTabaleLi(index) {
                this.leftData.forEach(item=> {
                    item.active = false;
@@ -137,7 +177,12 @@
                this.info = this.leftData[index];
            },
            getLeftTree() {
                this.$HTTP.get("/api/blade-cps/product/tree").then(res=> {
                var params = [{
                    key: "name_like",value: ""
                },{
                    key: "0",value: ""
                }]
                this.$HTTP.post("/api/blade-cps/craft-routing/list",{params}).then(res=> {
                    if(res.code == 200) {
                        this.leftData = res.data;
                    }
@@ -177,22 +222,42 @@
}
.left-ul {
    margin-top: 12px;
    padding-left:30px;
    padding-right:30px;
}
.left-ul li {
    padding: 6px 6px;
    padding-left:30px;
    padding-right:30px;
    padding-top: 8px;
    padding-bottom: 0px;
    list-style: none;
    cursor: pointer;
    margin-bottom: 6px;
    border: 1px solid #7ab3ee;
    width: 100%;
    position: relative;
}
.fix-btn {
    position: absolute;
    top: 8px;
    right: 2px;
    width: 30px;
    height: 20px;
    background-color: #ebeaea;
    text-align: center;
}
.el-dropdown-link {
    text-align: center;
    display: inline-block;
    width: 100%;
}
.left-ul .active {
    background-color: #7ab3ee;
    display: inline-block;
    width: 100%;
}
.left-ul li:hover {
    background-color: #eff4f9;
}
.left-ul li > div {
    margin-bottom: 12px;
    font-size: 14px;
}
.main-info {
    display: flex;
@@ -203,13 +268,27 @@
    text-align: left;
    color: #333;
    height: 52px;
    line-height: 52px;
    font-weight: bold;
    border-bottom: 1px solid #dee;
    padding: 0 16px;
}
.main-header-label span {
    margin-left: 12px;
}
.main-info-title {
    font-size: 14px;
    padding-left: 8px;
    border-left: 2px solid #7ab3ee;
}
.info-top-title {
    padding-left: 8px;
    border-left: 4px solid #86bffa;
    line-height: 18px;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 16px;
    color: #333;
}
.main-info-tooltip {
    display: flex;
@@ -257,4 +336,50 @@
.main-content-right ul li span {
    margin-left:12px;
}
.addRoute {
    color: #409eff;
    padding: 12px 6px;
    font-size: 14px;
    cursor: pointer;
}
.btn-box {
    display: inline-block;
    margin-right: 20px;
}
.most-vision {
    border-bottom: 1px solid #86bffa;
    font-size: 14px;
    font-weight: 700;
}
.vistion-button {
    border: 1px solid #86bffa;
    padding: 8px 12px;
}
.vistion-button-name {
    vertical-align: middle;
}
.vistion-button-round {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    display: inline-block;
    background-color: #f8ab00;
    vertical-align: middle;
}
.vistion-button-icon {
    margin-left: 8px;
    font-size: 14px;
    vertical-align: middle;
    cursor: pointer;
}
.correlation-product-line {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    font-size: 14px;
}
.correlation-product-line span {
    margin-left: 20px;
}
</style>