1

李喆(开发组)

2025-03-18 c978996d3e0390c0050479be4684af895cfb72cd

 src/views/dnc/setting/FTP.vue

@@ -1,38 +1,390 @@
<!--
 * @Date: 2024-05-26 22:26:35
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-26 22:31:46
 * @LastEditTime: 2024-06-16 16:19:27
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/setting/FTP.vue
-->
<template>
    <el-container>
        <el-header>
            <el-button type="primary">创建FTP目录</el-button>
            <el-button type="primary">关联工位</el-button>
            <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><span style="margin-right: 6px;">工位目录</span></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="" width=""></el-table-column>
                        <el-table-column label="关联工位" prop="" width=""></el-table-column>
                        <el-table-column label="操作" prop="" width=""></el-table-column>
                    <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
                        <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.stop="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>
                    <h2 style="background-color: var(--el-color-primary);color: #fff;padding: 4px 20px;">FTP目录</h2>
                    <div class="directorName">
                        <span>{{ directorName }}</span>
                        <div class="hover">
                            <el-icon>
                                <el-icon-plus @click="addDirect" />
                            </el-icon>
                            <!-- <el-icon>
                                <el-icon-edit />
                            </el-icon>
                            <el-icon>
                                <el-icon-delete />
                            </el-icon> -->
                        </div>
                    </div>
                    <el-tree :expand-on-click-node="false" v-if="rootNodeId && showTree" ref="group" node-key="id"
                        :props="{
                            label: 'name',
                            hasChildren: 'id'
                        }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id" :load="loadNode"
                        lazy>
                        <template #default="{ node, data }">
                            <div class="custom-tree-node">
                                <span>{{
                                    node.label }}</span>
                                <el-icon style="margin-left: 100px;">
                                    <el-icon-plus @click="addDirect(node)" />
                                </el-icon>
                                <el-icon>
                                    <el-icon-edit @click="editDirect(node)" />
                                </el-icon>
                                <el-icon>
                                    <el-icon-delete @click="delDirect(node)" />
                                </el-icon>
                            </div>
                        </template>
                    </el-tree>
                </el-col>
            </el-row>

        </el-main>
        <scDialog v-model="showAdd" style="width: 600px">
            <scForm :config="config" :rules="rules" v-model="form" @submit="submit">
            </scForm>
        </scDialog>
        <scDialog v-model="showdireactor" style="width: 600px">
            <scForm :config="config1" :rules="rules1" v-model="form1" @submit="submit1">
            </scForm>
        </scDialog>
    </el-container>
</template>

<script>
export default {

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: []
                        }
                    }
                ]
            },
            workstationId: '',
            rootNodeId: '',
            selectNode: {},
            showTree: false,
            showdireactor: false,
            form1: {

            },
            rules1: {
                name: [
                    { required: true, message: '请输入姓名' }
                ]
            },
            config1: {
                labelWidth: 120,
                formItems: [
                    {
                        component: 'input',
                        label: '名称',
                        name: 'name',
                        options: {
                            placeholder: '',
                            maxlength: 100,
                        }
                    },
                ]
            },
            parentId: ''
        }
    },
    created() {
        this.search()
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.post(`/api/smis/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
                if (res?.data?.[0]) {
                    this.rowClick(res.data[0])
                }
            })
        },
        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/smis/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()
            })
        },
        rowClick(row) {
            this.showTree = false
            this.directoryId = row.id
            this.$HTTP.get(`/api/blade-dnc/dnc-fixed-space/tree-root-id?workstationId=${row.workstationDTOS[0].id}`).then(res => {
                this.rootNodeId = res.data.rootNodeId
                this.directorName = res.data.name
                this.workstationId = row.workstationDTOS[0].id
                this.showTree = true
            })
        },
        loadNode(node, resolve) {
            console.log(node)
            if (!this.rootNodeId) return
            let nodeId = node.level === 0 ? this.rootNodeId : node.data.id
            this.$HTTP.get(`/api/blade-dnc/dnc-fixed-space/tree-fix-space?nodeId=${nodeId}&workstationId=${this.workstationId}`).then(res => {
                if (node.level === 0) {
                    this.showTree = res.data.length > 0
                    // // this.$nextTick(() => {
                    // this.nodeClick(res.data[0])
                    // // })
                }
                resolve(res.data)
            })
        },
        nodeClick(node) {
            this.selectNode = node
        },
        addDirect(node) {
            this.form1 = {}
            this.parentId = node?.data?.id || this.rootNodeId
            this.showdireactor = true
        },
        submit1(form) {
            if (form.id) {
                return this.$HTTP.post(`/api/blade-dnc/dnc-fixed-space/update-fix-space`, { directoryId: this.directoryId, name: form.name, id: form.id }).then(res => {
                    this.showdireactor = false
                    this.rowClick(this.tableData.find(v => v.id === this.directoryId))
                })
            }
            this.$HTTP.post(`/api/blade-dnc/dnc-fixed-space/add-fix-space`, { directoryId: this.directoryId, name: form.name, parentId: this.parentId }).then(res => {
                this.showdireactor = false
                this.rowClick(this.tableData.find(v => v.id === this.directoryId))
            })
        },
        editDirect(node) {
            this.form1 = {
                id: node.data.id,
                name: node.data.name
            }
            this.parentId = node?.data?.id || this.rootNodeId
            this.showdireactor = true
        },
        delDirect(node) {
            console.log(node)
            this.$HTTP.get(`/api/blade-dnc/dnc-fixed-space/del-fix-space?id=${node.data.id}`).then(res => {
                this.rowClick(this.tableData.find(v => v.id === this.directoryId))
            })
        },
    },
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.directorName {
    margin-top: 10px;
    background-color: var(--el-color-primary);
    color: #fff;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;

    .hover {
        // visibility: hidden;
        display: flex;

        .el-icon {
            margin: 0 4px;
            cursor: pointer;
        }
    }
}

.directorName:hover {
    .hover {
        visibility: visible;
    }
}

.custom-tree-node {
    display: flex;
    align-items: center;

    .el-icon {
        margin: 0 10px;
        visibility: hidden;
    }
}

.custom-tree-node:hover {
    .el-icon {
        visibility: visible;
    }
}
</style>