我的文档

gaoshp

2024-05-18 d5ddc472e8ba519218ed2d64868ec3fb9a825614

我的文档

 src/views/dnc/document/index.vue

@@ -1,19 +1,158 @@
<!--
 * @Date: 2024-05-16 22:40:01
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-16 22:40:07
 * @LastEditTime: 2024-05-18 21:35:42
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/document/index.vue
-->
<template>
    <div>
        我的文档
    </div>
    <el-main style="height: 100%;">
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <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',
                            }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id">
                                <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 type="primary" round @click="addFolder">新增文件夹</el-button>
                        </el-footer> -->
                    </el-container>
                </el-aside>
                <el-container>
                    <el-header>
                        <el-button type="">返回上一级</el-button>
                        <el-dropdown style="margin-left: 8px;">
                            <el-button type="primary">
                                新建<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="addFolder">文件夹</el-dropdown-item>
                                    <el-dropdown-item>文件</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button type="primary" style="margin-left: 8px;">上传文件</el-button>
                        <el-dropdown style="margin-left: 8px;">
                            <el-button type="primary">
                                更多操作<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>复制</el-dropdown-item>
                                    <el-dropdown-item>移动</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button style="margin-left: 8px;" type="danger" plain>删除</el-button>
                        <el-button-group style="margin-left: auto;">
                            <el-button type="primary">
                                <el-icon>
                                    <el-icon-fold />
                                </el-icon>
                            </el-button>
                            <el-button type="primary">
                                <el-icon>
                                    <el-icon-grid />
                                </el-icon>
                            </el-button>
                        </el-button-group>
                        <el-input v-model="input3" style="margin-left: 8px;max-width: 240px" placeholder="请输入关键词"
                            class="input-with-select">
                            <template #append>
                                <el-button type="primary" class="header-search" @click="search">
                                    <el-icon>
                                        <el-icon-search />
                                    </el-icon>
                                </el-button>

                            </template>
                        </el-input>
                    </el-header>
                </el-container>
            </el-container>
        </el-card>
        <el-dialog v-model="visible" title="新建文件夹" width="500">
            <el-form :model="form" :rules="rules" ref="dialogForm" label-width="120px" label-position="center">
                <el-form-item label="文件夹名称" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="saveFolder">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </el-main>
</template>

<script>
export default {

    data() {
        return {
            treeData: [],
            selectNode: {},
            visible: false,
            form: {},
            rules: {
                name: [{
                    required: true, message: '必填'
                }]
            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.get(`/api/blade-dnc/folder/folder-tree`).then(res => {
                this.treeData = [{
                    group: true,
                    id: 0,
                    name: '我的文档',
                    children: res.data
                }]
                this.selectNode = {
                    group: true,
                    id: 0,
                    name: '我的文档',
                }
            })
        },
        nodeClick(node) {
            this.selectNode = node
        },
        search() {
            alert(1)
        },
        // 新增文件夹
        addFolder() {
            this.visible = true
            this.form = {}
        },
        saveFolder() {
            console.log(this.form)
            this.$HTTP
        }
    }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.header-search {
    cursor: pointer;
}
</style>