1
lzhe
2024-05-13 f5edc2904945f37b164a7874d502cf002fae024e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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>