gaoshp
2024-06-02 4f8513a18fd7cc6f0568cd2d9f94135ef861adc1
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!--
 * @Date: 2024-05-26 22:26:35
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-02 19:17:45
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/setting/FTP.vue
-->
<template>
    <el-container>
        <el-header>
            <el-button type="primary" @click="addFtp">创建FTP目录</el-button>
            <el-tree-select v-model="params.workstationIds" clearable :data="treeData" multiple
                :render-after-expand="false" style="width: 240px;margin-left: auto;" :props="{
                    label: 'title',
 
                }" node-key="id">
                <template #prefix>工位目录</template>
            </el-tree-select>
            <el-input v-model="params.name" style="width: 240px;margin-left: 8px;" placeholder="" clearable>
                <template #prefix>目录名称</template>
            </el-input>
            <el-button style="margin-left: 8px;" @click="search" type="primary" icon="el-icon-search"></el-button>
        </el-header>
        <el-main>
            <el-row :gutter="20" style="width: 100%;">
                <el-col :span="12">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column label="目录名称" prop="name" width=""></el-table-column>
                        <el-table-column label="关联工位" prop="" width="">
                            <template #default="scope">
                                <span class="">{{ scope.row.workstationDTOS.map(v => v.name).join(';') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" prop="" width="">
                            <template #default="scope">
                                <el-button-group>
                                    <el-button text type="primary" size="small"
                                        @click="table_edit(scope.row, scope.$index)">关联工位</el-button>
                                    <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="table_del(scope.row)">
                                        <template #reference>
                                            <el-button text type="primary" size="small">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12">
                    <h2>FTP目录</h2>
                    <div>509</div>
                </el-col>
            </el-row>
        </el-main>
        <scDialog v-model="showAdd">
            <scForm :config="config" :rules="rules" v-model="form" @submit="submit">
 
            </scForm>
        </scDialog>
    </el-container>
</template>
 
<script>
 
export default {
    data() {
        return {
            tableData: [],
            showAdd: false,
            treeData: [],
            params: {
                workstationIds: [],
                name: ''
            },
            form: {
 
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名' }
                ]
            },
            config: {
                labelWidth: 120,
 
                formItems: [
                    {
                        component: 'input',
                        label: '名称',
                        name: 'name',
                        options: {
                            placeholder: '',
                            maxlength: 100,
                        }
                    },
                    {
                        component: 'el-tree-select',
                        label: '关联工位',
                        name: 'workstationIds',
                        options: {
                            multiple: false,
                            data: []
                        }
                    }
                ]
            }
        }
    },
    created() {
        this.search()
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.post(`/api/blade-cps/group/groupWorkstation`, { groupCategory: 1, groupType: 'group_workstation' }).then(res => {
                this.treeData = this.formatData(res.data)
 
            })
        },
        formatData(data, current, flag) {
            let newData = []
            if (!current) {
                newData = data.filter(item => item.parentId == 0).map(v => {
                    v.children = this.formatData(data, v, flag).sort((a, b) => {
                        return b.sort - a.sort
                    })
                    flag && (v.disabled = !v.isWorkstation)
                    return v
                })
            } else {
                let res = data.filter(v => v.parentId == current.id)
                res = res.map(item => {
                    item.children = this.formatData(data, item, flag).sort((a, b) => {
                        return b.sort - a.sort
                    })
                    flag && (item.disabled = !item.isWorkstation)
                    return item
                })
                return res
            }
            return newData
        },
        search() {
            this.$HTTP.post(`/api/blade-dnc/ftp-director/ftp-workstation-list`, this.params).then(res => {
                this.tableData = res.data
            })
        },
        addFtp() {
            this.form = {}
            this.getAddList().then(res => {
                this.config.formItems[1] = {
                    component: 'el-tree-select',
                    label: '关联工位',
                    name: 'workstationIds',
                    options: {
                        multiple: true,
                        data: res,
                        props: {
                            disabled: 'disabled'
                        }
                    }
                }
                this.showAdd = true
            })
        },
        getAddList(transferDirectorId) {
            return this.$HTTP.post(`/api/blade-cps/group/groupFtpDirectory/ftp`, { groupCategory: 1, groupType: 'group_workstation', transferDirectorId }).then(res => {
                this.addTreeData = this.formatData(res.data, null, 'disabled')
                return this.addTreeData
            })
        },
        submit(form) {
            console.log(form)
            if (form.id) {
                return this.$HTTP.post(`/api/blade-dnc/ftp-director/update-director`, {
                    directorId: form.id,
                    directorName: form.name,
                    newWorkstationIds: form.workstationIds,
                    oldWorkstationIds: form.oldWorkstationIds
                }).then(res => {
                    this.showAdd = false
                    this.search()
                })
            }
            this.$HTTP.post(`/api/blade-dnc/ftp-director/create-director`, form).then(res => {
                this.showAdd = false
                this.search()
            })
        },
        table_edit(row) {
            this.getAddList(row.id).then(res => {
                this.config.formItems[1] = {
                    component: 'el-tree-select',
                    label: '关联工位',
                    name: 'workstationIds',
                    options: {
                        multiple: true,
                        data: res,
                        props: {
                            disabled: 'disabled'
                        }
                    }
                }
                this.form = {
                    id: row.id,
                    name: row.name,
                    oldWorkstationIds: row?.workstationDTOS?.map(v => v.id) || [],
                    workstationIds: row?.workstationDTOS?.map(v => v.id) || []
                }
                this.showAdd = true
            })
            console.log(row)
        },
        table_del(row) {
            this.$HTTP.get(`/api/blade-dnc/ftp-director/del-director?id=${row.id}`).then(res => {
                this.search()
            })
        }
    },
}
</script>
 
<style lang="scss" scoped></style>