update

gaoshp

2024-06-16 5be78f8d80e78ad76f5f322a0ea1f47105fffe6f

 src/views/dnc/document/index.vue

@@ -1,19 +1,426 @@
<!--
 * @Date: 2024-05-16 22:40:01
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-16 22:40:07
 * @LastEditTime: 2024-06-16 16:19:08
 * @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 :expand-on-click-node="false" default-expand-all ref="tree" 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="" @click="back">返回上一级</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 @click="addFile">文件</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-upload style="margin-left: 8px;" :show-file-list="false" class="upload"
                            action="/api/blade-resource/oss/endpoint/put-file">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                        <!-- <el-button type="primary" style="margin-left: 8px;">上传文件</el-button> -->
                        <el-dropdown style="margin-left: 8px;" :disabled="selection.length == 0">
                            <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="action(1)">复制</el-dropdown-item>
                                    <el-dropdown-item @click="action(2)">移动</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button style="margin-left: 8px;" type="danger" plain :disabled="selection.length == 0"
                            @click="del(selection)">删除</el-button>
                        <!-- <el-button-group style="margin-left: auto;">
                            <el-button :type="type === 'list' ? 'primary' : ''" @click="type = 'list'">
                                <el-icon>
                                    <el-icon-fold />
                                </el-icon>
                            </el-button>
                            <el-button :type="type !== 'list' ? 'primary' : ''" @click="type = 'card'">
                                <el-icon>
                                    <el-icon-grid />
                                </el-icon>
                            </el-button>
                        </el-button-group> -->
                        <el-input v-model="params.searchKey" style="margin-left: auto;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-main>
                        <scTable highlight-current-row @dataChange="dataChange" @row-click="rowClick" ref="table"
                            :params="params" :apiObj="apiObj" @selection-change="selectionChange" stripe>
                            <el-table-column type="selection" width="50"></el-table-column>
                            <el-table-column label="文件名称" prop="name">
                                <template #default="scope">
                                    <el-icon style="margin-right: 4px;">
                                        <el-icon-folder v-if="scope.row.fileType === 1" />
                                        <el-icon-document v-else />
                                    </el-icon>
                                    <a v-if="scope.row.fileType === 1" @click="goCurrent(scope.row)"
                                        style="color: var(--el-color-primary);cursor: pointer;">{{ scope.row.name }}</a>
                                    <a v-else @click="viewHis(scope.row)"
                                        style="color: var(--el-color-primary);cursor: pointer;">{{ scope.row.name }}</a>
                                </template>
                            </el-table-column>
                            <el-table-column label="文件路径" prop="allPathName"></el-table-column>
                            <el-table-column label="大小" prop="contentLength"></el-table-column>
                            <el-table-column label="文件类型" prop="suffix"></el-table-column>
                            <el-table-column label="更新时间" prop="updateTime"></el-table-column>
                            <el-table-column label="操作" fixed="right" align="right" width="160">
                                <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="del([scope.row], '0')">
                                            <template #reference>
                                                <el-button text type="primary" size="small">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                        <!-- <el-button text type="primary" size="small"
                                            @click="del([scope.row])">删除</el-button> -->
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </scTable>
                    </el-main>
                </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 v-if="form.fileType == 1 || !form.id" label="文件夹名称" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item v-else 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-dialog v-model="visibleFile" title="新建文件夹" width="500">
            <el-form :model="formFile" :rules="rulesFile" ref="dialogForm" label-width="120px" label-position="center">
                <el-form-item label="文件位置" prop="id">
                    <el-tree-select v-model="formFile.id" :props="{
                        label: 'name',
                    }" :data="treeData" filter style="width: 240px" @node-click="clickNode" node-key="id" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="saveFile">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <scDialog v-model="visible">
            <scForm ref="form" :config="config" :rules="rules1" v-model="form1" @submit="submit1">
            </scForm>
        </scDialog>
    </el-main>
</template>

<script>
export default {
    data() {
        return {
            visible: false,
            rules1: {
                name: [{
                    required: true, message: '必填'
                }],
                content: [{
                    required: true, message: '必填'
                }]
            },
            form1: {},
            config: {
                labelWidth: 120,
                formItems: [
                    {
                        component: 'input',
                        label: '文件名称',
                        name: 'name',
                        options: {
                            placeholder: '',
                            maxlength: 100,
                        }
                    },
                    {
                        component: 'input',
                        label: '文件内容',
                        type: 'textarea',
                        name: 'content',
                        options: {
                            multiple: false,
                            data: []
                        },
                        disabled: false
                    }
                ]
            },
            treeData: [],
            selectNode: {},
            visible: false,
            form: {},
            rules: {
                name: [{
                    required: true, message: '必填'
                }]
            },
            params: {
                searchKey: '',
            },
            apiObj: {
                get: async (data) => {
                    let params = {
                        ...data,
                        parent: this.selectNode.id,
                        ...this.params
                    }
                    return await this.$HTTP.get(`/api/blade-dnc/folder/page`, {}, { params }).then(res => {
                        return res
                    })
                }
            },
            selection: [],
            type: 'list',
            visibleFile: false,
            formFile: {},
            rulesFile: {
                id: [{
                    required: true, message: '必填'
                }]
            }
        }
    },
    watch: {
        'selectNode.id': function () {
            this.search()
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        addFile() {
            this.form1 = {}
            this.$refs?.form?.resetFields()
            this.visible = true
        },
        submit1() {
            // 创建文本内容
            const textContent = "这里是文本内容";

            // 创建Blob对象
            const blob = new Blob([this.form1.content], { type: 'text/plain' });
            // 创建File对象
            const file = new File([blob], this.form1.name, { type: 'text/plain', lastModified: new Date().getTime() });
            const data = new FormData()
            data.append("file", file);
            this.$HTTP.post(`/api/blade-resource/oss/endpoint/put-file`, data).then(res => {
                if (res.success) {
                    this.$HTTP.post(`/api/blade-dnc/file/batch-save`, [{
                        name: `${this.form1.name}.txt`,
                        targetId: this.selectNode.id,
                        ossFile: {
                            attachId: res.data.attachId,
                            domain: res.data.domain,
                            link: res.data.link,
                            name: res.data.name,
                            originalName: res.data.originalName
                        }
                    }]).then(res => {
                        if (res.success) {
                            this.visible = false
                            this.search()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        init() {
            this.selectNode = {
                id: ''
            }
            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
        },
        goCurrent(row) {
            this.selectNode = { id: row.id }
            console.log(row)
        },
        viewHis(row) {
            window.open(row.link)
            // this.$HTTP.get(`/api/blade-dnc/file/history?name=${row.name}&pid=${row.parentId}`)
        },
        back() {
            console.log(this.$refs.tree.getCurrentNode())
            this.selectNode = { id: this.$refs.tree.getCurrentNode().parentId }
        },
        search() {
            this.$refs?.table?.reload()
        },
        // 新增文件夹
        addFolder() {
            this.visible = true
            this.form = { fileType: 1 }
        },
        saveFolder() {
            if (this.form.id) {
                return this.$HTTP.put(`/api/blade-dnc/file/${this.form.id}/rename`, { fileType: this.form.fileType, newName: this.form.name, parentId: this.form.parentId }).then(res => {
                    this.visible = false
                    this.search()
                })
            }
            let data = {
                ...this.form,
                parent: this.selectNode.id
            }
            try {
                Reflect.deleteProperty(data, 'fileType')
            } catch (error) {

            }
            this.$HTTP.post(`/api/blade-dnc/folder`, data).then(res => {
                this.visible = false
                this.init()
            })
        },
        selectionChange(selection) {
            this.selection = selection
        },
        action(type) {
            this.visibleFile = true
            this.formFile.move = type
        },
        clickNode(node) {
            this.formFile.id = node.id
        },
        saveFile() {
            if (this.formFile.move === 1) {
                this.copy()
            } else {
                this.move()
            }
        },
        copy() {
            this.$HTTP.post(`/api/blade-dnc/file/copy`, { parentId: this.formFile.id, sourceIdList: this.selection.map(v => v.id) }).then(res => {
                this.visibleFile = false
            })
        },
        move() {
            this.$HTTP.put(`/api/blade-dnc/file/move`, { parentId: this.formFile.id, sourceIdList: this.selection.map(v => v.id) }).then(res => {
                this.visibleFile = false
            })
        },
        table_edit(row) {
            this.form = {
                id: row.id,
                name: row.name,
                fileType: row.fileType,
                parentId: row.parentId
            }
            this.visible = true
        },
        async del(selection) {
            let sourceIdList = selection.filter(v => v.fileType === 1).map(v => v.id)
            let tip = false
            let delFlag = true
            if (sourceIdList.length > 0) {
                tip = await this.$HTTP.post(`/api/blade-dnc/file/exists-file`, { sourceIdList }).then(res => {
                    if (res.data) {
                        return res.data
                    }
                })
            }

            if (tip) {
                delFlag = await this.$confirm(`此操作会将当前文件夹下的所有文件删除，是否继续??`, '提示', {
                    type: 'warning',
                }).then(() => {
                    return true
                }).catch(() => {
                    return false
                })
            }
            console.log(delFlag, '>>>>>')
            if (!delFlag) {
                return
            }
            console.log('------')
            // return
            this.$HTTP.delete(`/api/blade-dnc/file`, { sourceIdList: selection.map(v => v.id) }).then(res => {
                this.init()
            })
        }
    }
}
</script>

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