<template>
|
<basic-container>
|
<div class="helpContainer">
|
<el-table
|
class="custom-table"
|
:data="helpData"
|
style="width: 100%"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column label="序号" type="index" width="100">
|
<template #default="{ $index }">
|
{{ $index + 1 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="levelOneType" label="一级类别" />
|
<el-table-column prop="levelTwoType" label="二级类别" />
|
<el-table-column prop="uploadUser" label="上传者" />
|
<el-table-column prop="createTime" label="上传时间" />
|
<el-table-column label="操作" width="150" align="center">
|
<template #default="scope">
|
<span class="look" @click="clickDetail(scope.row)" v-if="permission.helpCenterLook"
|
>查看</span
|
>
|
<el-upload
|
style="display: inline-block"
|
:show-file-list="false"
|
:before-upload="file => onUploadFileBefore(file, scope.row)"
|
:limit="1"
|
accept=".pdf"
|
>
|
<span class="uploads" v-if="permission.helpCenterUpload">上传</span>
|
</el-upload>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</basic-container>
|
</template>
|
|
<script setup>
|
import { uploadFileAPI, listDataAPI, updataDataAPI } from '@/api/helpCenter/helpCenter';
|
import { ElMessage } from 'element-plus';
|
import { computed, onMounted } from 'vue';
|
const helpData = ref([]);
|
|
import { useStore } from 'vuex';
|
const store = useStore();
|
const permission = computed(() => store.state.user.permission);
|
// 表格隔行变色
|
const tableRowClassName = ({ row, rowIndex }) => {
|
if (rowIndex % 2 === 1) {
|
return 'warning-row';
|
} else {
|
return 'success-row';
|
}
|
};
|
const getlistDataAPI = () => {
|
listDataAPI().then(res => {
|
helpData.value = res.data.data;
|
});
|
};
|
// 查看
|
// const clickDetail = row => {
|
// if (!row.filePath) {
|
// ElMessage.warning('没有可预览的文件');
|
// return;
|
// }
|
// fetch(row.filePath)
|
// .then(response => response.blob())
|
// .then(res => {
|
// let blob = new Blob([res], { type: 'application/pdf' });
|
// // pdfurl即转化后的结果
|
// let pdfurl = window.URL.createObjectURL(blob);
|
// // 新标签页打开，即可预览并下载
|
// window.open(pdfurl);
|
// });
|
// };
|
const clickDetail = val => {
|
const filePath = val.filePath;
|
if (!val.filePath) {
|
ElMessage.warning('没有可预览的文件');
|
return;
|
}
|
window.open(filePath, '_blank');
|
};
|
// 文件上传
|
const onUploadFileBefore = (file, row) => {
|
const fileFormat = file.name?.split('.')[1];
|
if (fileFormat !== 'pdf') return ElMessage.error('请上传pdf格式的文件');
|
const formData = new FormData();
|
formData.append('file', file, file.name);
|
|
uploadFileAPI(formData).then(res => {
|
if (res.data.code === 200) {
|
const params = {
|
id: row.id,
|
filePath: res.data.data.link,
|
};
|
ElMessage.success('上传成功');
|
updataDataAPI(params);
|
} else {
|
ElMessage.error('上传失败');
|
}
|
getlistDataAPI();
|
});
|
};
|
onMounted(() => {
|
getlistDataAPI();
|
});
|
</script>
|
<style lang="scss">
|
.helpContainer {
|
.el-table .success-row {
|
--el-table-tr-bg-color: #fff;
|
}
|
.el-table .warning-row {
|
--el-table-tr-bg-color: #f3f6ff;
|
}
|
}
|
</style>
|
<style scoped lang="scss">
|
/* 表头样式 */
|
.custom-table :deep(.el-table__header) th {
|
height: 70px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 14px;
|
color: #49556e;
|
background-color: #f3f6ff;
|
text-align: center;
|
}
|
|
/* 行样式 */
|
.custom-table :deep(.el-table__body) tr {
|
height: 70px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #363636;
|
text-align: center;
|
}
|
.custom-table :deep(.el-table__body) td.el-table__cell {
|
text-align: center;
|
}
|
.helpContainer {
|
height: 100%;
|
.look {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
color: #1c5cff;
|
cursor: pointer;
|
margin-right: 15px;
|
font-size: 14px;
|
}
|
.uploads {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #19876d;
|
cursor: pointer;
|
}
|
}
|
</style>
|
