gaoshp
2024-06-23 fbee7228e2f6e43b417d4c3f03020704831261cd
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!--
 * @Date: 2024-04-27 20:02:44
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-27 22:21:36
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/tpm/MachineGroup.vue
-->
<template>
    <el-container>
        <el-aside width="200px" v-loading="showGrouploading">
            <el-container>
                <el-main class="nopadding">
                    <el-tree ref="group" node-key="id" :data="group" :current-node-key="form.id"
                        :highlight-current="true" :expand-on-click-node="false" default-expand-all
                        @node-click="groupClick"></el-tree>
                </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header>
                <div class="left-panel">
                    <el-button @click="addChild" type="primary" plain>新增下级</el-button>
                    <el-button :disabled="!form.id" @click="del" type="danger" plain>删除</el-button>
                </div>
            </el-header>
            <el-main class="">
                <el-form :model="form" :rules="rules" ref="dialogForm" label-width="200px" label-position="left">
                    <el-form-item label="上级目录" prop="parentName">
                        <el-input disabled style="width: 240px" v-model="form.parentName"></el-input>
                    </el-form-item>
                    <el-form-item label="机器组名称" prop="name">
                        <el-input :disabled="(form.id === '102' || form.id === '2')" style="width: 240px"
                            v-model="form.name" clearable></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="save" v-show="!(form.id === '102' || form.id === '2')" style="width: 100px"
                    type="primary" plain>保存</el-button>
            </el-main>
        </el-container>
    </el-container>
</template>
 
<script>
export default {
    data() {
        return {
            group: [],
            form: {
                code: '',
                name: '',
                id: '',
                groupType: '',
                groupCategory: '',
                parentName: '',
                parentId: '',
            },
            disabled: false,
        }
    },
    created() {
        this.getTreeData()
    },
    methods: {
        getTreeData() {
            this.$HTTP.get('/api/blade-cps/group/tree?groupCategory=1&groupType=group_machine').then(res => {
                if (res.code === 200) {
                    this.group = res.data
                    this.groupClick(res.data[0])
                }
            })
        },
        groupClick(node, node1) {
            console.log(node, node1?.parent?.data?.name)
            this.disabled = false
            Object.keys(this.form).forEach(item => {
                this.form[item] = node[item]
            })
            if (node1?.parent?.data?.name) {
                this.form.parentName = node1?.parent?.data?.name
            }
            if (node.id === '102' || node.id === '2') {
                this.form.parentName = node.name
                this.disabled = true
            }
        },
        addChild() {
            if (!this.form.id) {
                return
            }
            let { name, id, groupType, groupCategory } = this.form
            this.form.id = ''
            this.form.name = ''
            this.form.code = ''
            this.form.groupType = groupType
            this.form.groupCategory = groupCategory
            this.form.parentName = name
            this.form.parentId = id
        },
        del() {
            this.$confirm(
                '确认删除该机器组?',
                {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                }
            )
                .then(() => {
                    this.$HTTP.delete('/api/blade-cps/group/deleteGroup', {}, { params: { groupId: this.form.id } }).then(res => {
                        if (res.code === 200) {
                            this.$message.success("操作成功");
                            this.getTreeData()
                        }
                    })
                }).catch(() => {
                    this.$message.success("取消操作");
                })
 
        },
        save() {
            this.group = []
            this.$HTTP.post('/api/blade-cps/group', this.form).then(res => {
                if (res.code === 200) {
                    this.getTreeData()
                }
            })
        }
    }
}
</script>
 
<style lang="scss" scoped></style>