数字督察一体化平台-前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

144 lines
4.4 KiB

<template>
<div class="container">
<header class="mb-20">
<el-form :label-width="114">
<el-row>
<el-col :span="6">
<el-form-item label="文件名">
<el-input
placeholder="文件名"
v-model="query.fileName"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="flex between">
<el-button type="primary" @click="handleShowAdd">
<template #icon>
<icon name="el-icon-Plus" />
</template>
上传知识</el-button
>
<div>
<el-button type="primary" @click="getList">
<template #icon>
<icon name="el-icon-Search" />
</template>
查询</el-button
>
<el-button @click="reset">重置</el-button>
</div>
</div>
</header>
<div class="table-container">
<el-table :data="users">
<el-table-column label="文件名" prop="fileName" />
<el-table-column label="文件路径" prop="filePath" />
<el-table-column
label="创建时间"
prop="createTime"
width="200"
/>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button
type="primary"
link
@click="download(row.filePath)"
v-perms="['user:edit']"
>下载文件</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex end mt-8">
<el-pagination
@size-change="getList"
@current-change="getList"
:page-sizes="[10, 20, 50]"
v-model:page-size="query.size"
v-model:current-page="query.current"
layout="total, sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
<el-dialog
title="上传知识"
v-model="show"
>
<el-upload
drag
:action="`${BASE_PATH}/book`"
:headers="{ Authorization: getToken() }"
multiple
v-model:file-list="fileList"
@success="handleSuccess"
accept="application/pdf,text/plain,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
class="mt-20"
>
<el-icon class="el-icon--upload"
><upload-filled
/></el-icon>
<div class="el-upload__text">
<p>点击或拖拽文件到此区域上传</p>
</div>
</el-upload>
<footer class="flex end mt-20">
<el-button @click="show = false" size="large">取消</el-button>
<el-button type="primary" size="large">确定</el-button>
</footer>
</el-dialog>
</template>
<script setup>
import { getToken } from "@/utils/token";
import { BASE_PATH } from "@/api/request";
import { listBook } from "@/api/mobileSupervision/book";
import feedback from "@/utils/feedback";
const users = ref([]);
const query = ref({
current: 1,
size: 10,
});
const total = ref(0);
function getList() {
listBook(query.value).then((data) => {
users.value = data.records;
total.value = data.total;
});
}
function reset() {
query.value = {
current: 1,
size: 10,
};
getList();
}
getList();
const show = ref(false);
function handleShowAdd() {
show.value = true;
}
const fileList = ref([])
function handleSuccess() {
getList()
}
function download(filePath) {
window.open(`${BASE_PATH}/file/stream/${filePath}`);
}
</script>
<style lang="scss" scoped>
</style>