259 lines
8.2 KiB
Vue
259 lines
8.2 KiB
Vue
<template>
|
||
<div>
|
||
<div class="flex flex-center flex-justify-between">
|
||
<div class="flex flex-center flex-justify-start padding">
|
||
<div class="flex flex-center">
|
||
<div>搜索文件：</div>
|
||
<a-input
|
||
style="width: 420px"
|
||
placeholder="请输入文件关键词"
|
||
v-model="name"
|
||
@press-enter="fetchList"
|
||
allow-clear
|
||
@clear="fetchList"
|
||
></a-input>
|
||
</div>
|
||
<a-button class="ml-20" type="primary" @click="fetchList"
|
||
>搜索
|
||
</a-button>
|
||
</div>
|
||
<div class="flex flex-center flex-justify-start">
|
||
<a-button-group>
|
||
<a-button type="outline" size="small" @click="goHome">
|
||
<template #icon>
|
||
<icon-home />
|
||
</template>
|
||
<template #default> 首页</template>
|
||
</a-button>
|
||
<a-button type="outline" size="small" @click="goBack">
|
||
<template #icon>
|
||
<icon-nav />
|
||
</template>
|
||
<template #default> 上一级</template>
|
||
</a-button>
|
||
<upload @ok="upload" v-if="pid !== '0'" />
|
||
<add-folder
|
||
:project-id="this.projectId"
|
||
:query-id="queryId"
|
||
:type="type"
|
||
:pid="this.pid"
|
||
@ok="fetchList"
|
||
/>
|
||
</a-button-group>
|
||
</div>
|
||
</div>
|
||
<a-table
|
||
:columns="columns"
|
||
:data="list"
|
||
:loading="loading"
|
||
:pagination="page"
|
||
size="small"
|
||
@page-change="pageChange"
|
||
>
|
||
<template #fileName="{ record }">
|
||
<div class="flex flex-center flex-justify-start">
|
||
<img
|
||
v-if="record.isFolder === 1"
|
||
src="https://res.wutongshucloud.com/res/2024/12/04/202412041635423.svg"
|
||
style="width: 30px; height: 30px"
|
||
/>
|
||
<img
|
||
v-else
|
||
src="https://res.wutongshucloud.com/res/2024/12/04/202412041641902.svg"
|
||
style="width: 20px; height: 20px; padding-left: 5px"
|
||
/>
|
||
<div class="ml-10">{{ record.name }}</div>
|
||
</div>
|
||
</template>
|
||
<template #user="{record}">
|
||
<div>
|
||
{{record.user.name}}
|
||
</div>
|
||
</template>
|
||
<template #menu="{ record }">
|
||
<div class="flex flex-center">
|
||
|
||
<a-button
|
||
v-if="record.isFolder === 1"
|
||
type="text"
|
||
size="small"
|
||
@click="fetchFolder(record.id)"
|
||
>查看
|
||
</a-button>
|
||
<preview
|
||
v-else
|
||
:file-id="record.fileId"
|
||
:attach-id="record.id"
|
||
/>
|
||
|
||
<file-rename :id="record.id" :name="record.name" @ok="fetchList"></file-rename>
|
||
<a-button type="text" size="small" @click="remove(record)"
|
||
>删除
|
||
</a-button>
|
||
</div>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import upload from '@/components/upload/index.vue'
|
||
import preview from '@/components/preview/index.vue'
|
||
import addFolder from '@/views/project/components/attach/add-folder.vue'
|
||
import fileRename from "@/views/project/components/attach/file-rename.vue";
|
||
|
||
export default {
|
||
props: {
|
||
projectId: {
|
||
required: true,
|
||
type: String,
|
||
default: ''
|
||
},
|
||
queryId:{
|
||
required: true,
|
||
type: String,
|
||
default: ''
|
||
},
|
||
type :{
|
||
required:true,
|
||
type:Number,
|
||
default: 0
|
||
},
|
||
folder:{
|
||
required:true,
|
||
type:String,
|
||
default:''
|
||
}
|
||
|
||
},
|
||
components: {
|
||
upload,
|
||
preview,
|
||
addFolder,
|
||
fileRename
|
||
},
|
||
data() {
|
||
return {
|
||
name: '',
|
||
loading: true,
|
||
history: ['0'],
|
||
page: {
|
||
page: 0,
|
||
pageSize: 10,
|
||
total: 0
|
||
},
|
||
list: [],
|
||
pid: '0',
|
||
columns: [
|
||
{
|
||
title: '名称',
|
||
slotName: 'fileName'
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'createdAt'
|
||
},
|
||
{
|
||
title: '创建人',
|
||
slotName: 'user'
|
||
},
|
||
{
|
||
title: '操作',
|
||
slotName: 'menu'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
this.fetchInit()
|
||
},
|
||
methods: {
|
||
goHome() {
|
||
this.history = ['0']
|
||
this.pid = '0'
|
||
this.fetchList()
|
||
},
|
||
goBack() {
|
||
var size = this.history.length
|
||
if (size > 1) {
|
||
this.history = this.history.slice(0, size - 1)
|
||
this.pid = this.history[this.history.length - 1]
|
||
this.fetchList()
|
||
} else {
|
||
this.$notification.info('已经回到首页')
|
||
}
|
||
},
|
||
fetchFolder(id) {
|
||
this.pid = id
|
||
this.history.push(id)
|
||
this.fetchList()
|
||
},
|
||
pageChange(page) {
|
||
this.page.page = page
|
||
this.fetchList()
|
||
},
|
||
fetchInit() {
|
||
this.$api.sys.dict({ code: this.folder }).then(res => {
|
||
if (res.code === 200) {
|
||
var folder = res.data.map(e => e.label)
|
||
this.$api.projectFile
|
||
.initFolder({
|
||
projectId: this.projectId,
|
||
folders: folder.join(','),
|
||
type: this.type,
|
||
queryId: this.queryId
|
||
})
|
||
.then(() => {
|
||
this.fetchList()
|
||
this.loading = false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
fetchList() {
|
||
const data = {
|
||
name: this.name,
|
||
projectId: this.projectId,
|
||
pid: this.pid,
|
||
type: this.type,
|
||
queryId: this.queryId,
|
||
...this.page
|
||
}
|
||
this.$api.projectFile.page(data).then(res => {
|
||
if (res.code === 200) {
|
||
this.list = res.data.records
|
||
this.page.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
upload(file) {
|
||
const data = { projectId: this.projectId, pid: this.pid, name: file.fileName, type: this.type, fileId: file.id,queryId: this.queryId }
|
||
this.$api.projectFile.submit(data).then(res => {
|
||
if (res.code === 200) {
|
||
this.fetchList()
|
||
this.$notification.success(res.msg)
|
||
} else {
|
||
this.$notification.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
remove(file) {
|
||
if (file.pid === '0') {
|
||
this.$notification.error('当前内容不支持删除')
|
||
return
|
||
}
|
||
this.$api.projectFile.remove({ id: file.id }).then(res => {
|
||
if (res.code === 200) {
|
||
this.$notification.success(res.msg)
|
||
this.fetchList()
|
||
} else {
|
||
this.$notification.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|