<!--
|
* @Date: 2024-05-16 22:40:01
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-06-17 23:43:44
|
* @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 :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-upload style="margin-left: 8px;" :show-file-list="false" class="upload"
|
:http-request="request">
|
<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: {
|
request(options) {
|
const formData = new FormData()
|
formData.append('file', options.file)
|
console.log(options)
|
this.$HTTP.post(`/api/blade-resource/oss/endpoint/put-file`, formData).then(resFile => {
|
if (resFile.success) {
|
this.$HTTP.post(`/api/blade-dnc/file/batch-save`, [{
|
name: options.file.name,
|
targetId: this.selectNode.id,
|
ossFile: {
|
attachId: resFile.data.attachId,
|
domain: resFile.data.domain,
|
link: resFile.data.link,
|
name: resFile.data.name,
|
originalName: resFile.data.originalName
|
}
|
}]).then(res => {
|
if (res.success) {
|
this.visible = false
|
this.search()
|
} else {
|
this.$message.error(res.msg)
|
}
|
})
|
} else {
|
this.$message.error(res.msg)
|
}
|
|
})
|
},
|
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>
|
.header-search {
|
cursor: pointer;
|
}
|
</style>
|
