<!--
|
* @Date: 2024-05-16 22:40:01
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-05-18 21:35:42
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/document/index.vue
|
-->
|
<template>
|
<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>
|
.header-search {
|
cursor: pointer;
|
}
|
</style>
|
