工装

gaoshp

2024-05-12 556d4ca1f9055fcc66133781d95314d254bbf4c3

工装

 src/views/console/tooling/Tray.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,197 @@
<!--
 * @Date: 2024-05-12 20:02:31
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-12 21:34:13
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/tooling/Tray.vue
-->
<template>
    <el-container>
        <el-aside width="200px">
            <el-container>
                <el-main>
                    <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="{
                        label: 'name',
                        disabled: 'isGroup'
                    }" @node-click="nodeClick">
                        <template #default="{ node, data }">
                            <span :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
                                <span>{{
                                    node.label || data.code }}</span>
                            </span>
                        </template>
                    </el-tree>
                </el-main>
                <el-footer>
                    <el-button>添加托盘组</el-button>
                </el-footer>
            </el-container>
        </el-aside>
        <!-- <el-main> -->
        <el-container v-if="selectNode.id">
            <el-header>
                <el-button @click="table_add" type="primary" icon="el-icon-plus"></el-button>
                <import-table style="margin:0 8px" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table>
                <el-button type="danger" plain icon="el-icon-delete" @click="batchDel"></el-button>
                <el-input v-model="params.keyWord" style="width: 240px;margin-left: auto;" placeholder="请输入检索内容"
                    clearable></el-input>
                <el-button @click="search" type="primary" icon="el-icon-search"></el-button>
            </el-header>
            <el-main>
                <el-row>
                    <el-col :span="10">
                        <scTable highlight-current-row @dataChange="dataChange" @row-click="rowClick" ref="table"
                            :params="params" :apiObj="apiObj" @selection-change="selectionChange" stripe>
                            <el-table-column type="selection" width="50"></el-table-column>
                            <el-table-column label="托盘编号" prop="code" width="120"></el-table-column>
                            <el-table-column label="托盘名称" prop="name" width="120"></el-table-column>
                            <el-table-column label="可用状态" prop="type" width="120"></el-table-column>
                            <el-table-column label="操作" fixed="right" align="right" width="160">
                                <template #default="scope">
                                    <el-button-group>
                                        <el-button text type="primary" size="small"
                                            @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                        <el-popconfirm title="确定删除吗？" @confirm="table_del([scope.row], '0')">
                                            <template #reference>
                                                <el-button text type="primary" size="small">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </scTable>
                    </el-col>
                    <el-col :span="14">
                        <h2>托盘信息</h2>
                        <el-container>
                            <el-main>
                                <div class="tuopan-info">
                                    <div>
                                        tup
                                    </div>
                                    <el-row>
                                        <el-col :span="12">
                                            æ‰˜ç›˜é¢æ•°: {{ }}
                                        </el-col>
                                        <el-col :span="12">
                                            æ‰˜ç›˜é¢æ•°: {{ }}
                                        </el-col>
                                        <el-col :span="12">
                                            æ‰˜ç›˜é¢æ•°: {{ }}
                                        </el-col>
                                        <el-col :span="12">
                                            æ‰˜ç›˜é¢æ•°: {{ }}
                                        </el-col>
                                        <el-col :span="12">
                                            æ‰˜ç›˜é¢æ•°: {{ }}
                                        </el-col>
                                        <el-col :span="12">
                                            æ‰˜ç›˜é¢æ•°: {{ }}
                                        </el-col>
                                        <el-col :span="12">
                                            æ‰˜ç›˜é¢æ•°: {{ }}
                                        </el-col>
                                        <el-col :span="12">
                                            æ‰˜ç›˜é¢æ•°: {{ }}
                                        </el-col>
                                    </el-row>
                                </div>

                            </el-main>
                        </el-container>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
        <!-- </el-main> -->
    </el-container>
</template>

<script>
import importTable from '@/layout/components/importTable.vue'
export default {
    components: {
        importTable
    },
    data() {
        return {
            treeData: [],
            params: {
                keyword: ''
            },
            info: {},
            selectNode: {},
            apiObj: {
                get: async (data) => {
                    let params = {
                        ...data
                    }
                    return await this.$HTTP.get(`/api/blade-cps/tray/page/${this.selectNode.id}`, { keyword: this.params.keyword }, { params }).then(res => {
                        return res
                    })
                }
            },
        }
    },
    watch: {
        'selectNode.id': {
            handler(val) {
                if (val) {
                    this.queryInfo()
                } else {
                    this.info = {}
                }
            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.post(`/api/blade-cps/tray/tooling-tree`, {
                groupCategory: 1,
                groupType: "group_tray"
            }).then(res => {
                this.treeData = res.data
                this.selectNode = res.data[0]
            })
        },
        queryInfo() {
            if (!this.selectNode.id) return
            this.$refs?.table?.reload()
            // this.$HTTP.get(`/api/blade-cps/tray/${this.selectNode.id}`).then(res => {
            //     this.info = res.data
            // })
            // this.$HTTP.get(`/api/blade-cps/tray-surface/list/${this.selectNode.id}`).then(res => {
            //     this.info = res.data
            // })
        },
        queryChildInfo() {
            if (!this.selectNode.id) return
            this.$HTTP.get(`/api/blade-cps/tray/${this.selectNode.id}`).then(res => {
                this.info = res.data
            })
            this.$HTTP.get(`/api/blade-cps/tray-surface/list/${this.selectNode.id}`).then(res => {
                this.info = res.data
            })
        },
        nodeClick(node) {
            this.selectNode = node
        }
    }
}
</script>

<style lang="scss" scoped>
.custom-tree-node.active {
    color: #ccc;
}

.empty {
    justify-content: center;
}

.tuopan-info {
    display: flex;
}
</style>

 src/views/console/tooling/fixture.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
    <div>

    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped></style>

 src/views/console/tooling/tray-fixture.vue

@@ -1,18 +1,42 @@
<!--
 * @Date: 2024-05-07 22:48:00
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-07 22:48:29
 * @LastEditTime: 2024-05-12 21:28:07
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/tooling/tray-fixture.vue
-->
<template>
    <div>
        æ‰˜ç›˜å¤¹å…·
    </div>
    <el-main style="height: 100%;">
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <el-tabs tab-position="top" class="custom-tabs" v-model="activeName">
                <el-tab-pane label="托盘-夹具" name="1">
                    <trayFixturePreviewVue style="height: 100%" v-if="activeName === '1'"></trayFixturePreviewVue>
                </el-tab-pane>
                <el-tab-pane label="托盘" name="2">
                    <Tray style="height: 100%" v-if="activeName === '2'" />
                </el-tab-pane>
                <el-tab-pane label="夹具" name="3">
                    <Fixture style="height: 100%" v-if="activeName === '3'" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </el-main>
</template>

<script>
import trayFixturePreviewVue from './tray-fixturePreview.vue'
import Tray from './Tray.vue'
import Fixture from './fixture.vue'
export default {

    components: {
        trayFixturePreviewVue,
        Tray,
        Fixture
    },
    data() {
        return {
            activeName: '2'
        }
    },
}
</script>


 src/views/console/tooling/tray-fixturePreview.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,117 @@
<!--
 * @Date: 2024-05-12 20:02:31
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-12 20:53:16
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/tooling/tray-fixturePreview.vue
-->
<template>
    <el-container>
        <el-aside width="200px">
            <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="{
                label: 'name',
                disabled: 'isGroup'
            }" @node-click="nodeClick">
                <template #default="{ node, data }">
                    <span :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
                        <span>{{
                            node.label || data.code }}</span>
                    </span>
                </template>
            </el-tree>
        </el-aside>
        <!-- <el-main> -->
        <el-container>
            <el-header>
                <import-table style="margin:0 8px" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table>
            </el-header>
            <el-main v-if="selectNode.id">
                <el-row>
                    <el-col style="margin-bottom: 8px">
                        <h2>托盘信息</h2>
                    </el-col>
                    <el-col :span="4">
                        æ‰˜ç›˜ç¼–号: {{ info?.code || '-' }}
                    </el-col>
                    <el-col :span="4">
                        æ‰˜ç›˜åç§°: {{ info?.name || '-' }}
                    </el-col>
                    <el-col :span="4">
                        æ‰˜ç›˜è§„æ ¼: {{ info?.standardModel || '-' }}
                    </el-col>
                    <el-col :span="4">
                        æ‰˜ç›˜çŠ¶æ€: {{ info?.trayStatus ? '空载' : '负载' }}
                    </el-col>
                    <el-col :span="4">
                        å¯ç”¨çŠ¶æ€: {{ info?.availability ? '激活' : '冻结' }}
                        <!-- 1-激活 0-冻结 -->
                    </el-col>
                    <el-col :span="4">
                        æ‰˜ç›˜æè¿°: {{ info?.description || '-' }}
                    </el-col>
                </el-row>
            </el-main>
            <el-main class="empty" v-else>
                <el-empty></el-empty>
            </el-main>
        </el-container>
        <!-- </el-main> -->
    </el-container>
</template>

<script>
import importTable from '@/layout/components/importTable.vue'
export default {
    components: {
        importTable
    },
    data() {
        return {
            treeData: [],
            info: {},
            selectNode: {},
        }
    },
    watch: {
        'selectNode.id': {
            handler(val) {
                if (val) {
                    this.queryInfo()
                } else {
                    this.info = {}
                }
            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.post(`/api/blade-cps/tray/tray-tree`, {
                groupCategory: 1,
                groupType: "group_tray"
            }).then(res => {
                this.treeData = res.data
            })
        },
        queryInfo() {
            this.$HTTP.get(`/api/blade-cps/tray/${this.selectNode.id}`).then(res => {
                this.info = res.data
            })
        },
        nodeClick(node) {
            if (!node.isGroup) this.selectNode = node
        }
    }
}
</script>

<style lang="scss" scoped>
.custom-tree-node.active {
    color: #ccc;
}

.empty {
    justify-content: center;
}
</style>