138 lines
4.5 KiB
Vue
138 lines
4.5 KiB
Vue
<template>
|
|
<div class="book_file">
|
|
<!-- 添加或修改公司对话框 -->
|
|
<el-dialog v-model="isShowDialog" width="80vw" custom-class="book_file_loading" :close-on-click-modal="false" :destroy-on-close="true">
|
|
<template #header>
|
|
<div v-drag="['.book_file .el-dialog', '.book_file .el-dialog__header']">查看资料文件</div>
|
|
</template>
|
|
<el-form ref="queryRef" :inline="true" label-width="100px">
|
|
<el-row>
|
|
<el-col :span="8" class="colBlock">
|
|
<el-form-item label="文件名称" prop="fileName">
|
|
<el-input v-model="formData.fileName" placeholder="请输入文件名称搜索" clearable @keyup.enter.native="getDataFileQuery" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getDataFileQuery">
|
|
<el-icon><Search /></el-icon>搜索
|
|
</el-button>
|
|
<el-button @click="resetQuery" type="danger">
|
|
<el-icon><Refresh /></el-icon>清空
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div class="content">
|
|
<div class="left_box" :style="treeList.length ? 'width: 70%' : 'width: 100%'">
|
|
<el-table v-loading="loading" :data="tableData" border height="63vh" :empty-text="emptyText">
|
|
<el-table-column label="序号" align="center" type="index" width="80px" />
|
|
<el-table-column label="文件名称" align="center" prop="fileName" min-width="100px" />
|
|
<el-table-column label="文件类型" align="center" prop="fileSuffix" width="100px" />
|
|
|
|
<el-table-column label="文件路径" align="center" min-width="100px">
|
|
<template #default="scope">
|
|
<span>{{ filterfilenPath(scope.row.filePath) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" class-name="small-padding" width="250px" fixed="right">
|
|
<template #default="scope">
|
|
<el-button type="success" link @click="onExport(scope.row)">
|
|
<el-icon><Download /></el-icon>下载
|
|
</el-button>
|
|
<el-button type="primary" link @click="onBook(scope.row)">
|
|
<el-icon><View /></el-icon>查看
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination :total="total" v-model:page="formData.pageNum" v-model:limit="formData.pageSize" @pagination="getDataFileQuery" />
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { listKnowledgeDocument } from '@/api/safety/knowledgeDocument';
|
|
import { useUserStoreHook } from '@/store/modules/user';
|
|
|
|
const emit = defineEmits(['onExport', 'onExportView', 'onBook']);
|
|
const stores = useUserStoreHook();
|
|
const loading = ref(false);
|
|
const tableData = ref<any[]>([]);
|
|
const isShowDialog = ref(false);
|
|
const formData = reactive({
|
|
fileName: '',
|
|
projectId: stores.selectedProject.id,
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
});
|
|
const total = ref(0);
|
|
const emptyText = ref('暂无数据');
|
|
const treeList = ref<any[]>([]);
|
|
|
|
const openDialog = () => {
|
|
isShowDialog.value = true;
|
|
getDataFileQuery();
|
|
emptyText.value = '请输入文件名称进行搜索！';
|
|
resetForm();
|
|
};
|
|
|
|
const resetForm = () => {
|
|
tableData.value = [];
|
|
formData.fileName = '';
|
|
treeList.value = [];
|
|
emptyText.value = '暂无数据';
|
|
};
|
|
|
|
const getDataFileQuery = () => {
|
|
loading.value = true;
|
|
emptyText.value = '数据加载中……';
|
|
listKnowledgeDocument(formData).then((res: any) => {
|
|
loading.value = false;
|
|
tableData.value = [];
|
|
if (res.code == 200 && res.rows?.length) {
|
|
tableData.value = res.rows;
|
|
total.value = res.total;
|
|
} else {
|
|
emptyText.value = '没有查询到数据，请重新输入搜索';
|
|
}
|
|
});
|
|
};
|
|
|
|
const onBook = (row: any) => {
|
|
emit('onBook', row);
|
|
};
|
|
|
|
const onExport = (row: any) => {
|
|
emit('onExportView', row);
|
|
};
|
|
|
|
const resetQuery = () => {
|
|
tableData.value = [];
|
|
formData.fileName = '';
|
|
loading.value = false;
|
|
emptyText.value = '暂无数据';
|
|
};
|
|
|
|
const filterfilenPath = (val: string): string => {
|
|
return val.replace(/^.*?知识库\//, '知识库/');
|
|
};
|
|
|
|
defineExpose({ openDialog });
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.book_file {
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
</style>
|