| | |
| | | <basic-container> |
| | | <div class="helpContainer"> |
| | | <el-table |
| | | class="custom-table" |
| | | class="custom-table" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | :row-class-name="tableRowClassName" |
| | | :row-class-name="tableRowClassName" |
| | | > |
| | | <el-table-column label="序号" type="index" width="100"> |
| | | <template #default="{ $index }"> |
| | |
| | | <el-table-column label="操作" width="150" align="center"> |
| | | <template #default="scope"> |
| | | <span class="look">查看</span> |
| | | <span class="uploads">上传</span> |
| | | <el-upload |
| | | style="display: inline-block" |
| | | :show-file-list="false" |
| | | :before-upload="onUploadFileBefore" |
| | | :limit="1" |
| | | > |
| | | <span class="uploads">上传</span> |
| | | </el-upload> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { uploadFileAPI } from '@/api/helpCenter/helpCenter'; |
| | | import { ElMessage } from 'element-plus'; |
| | | const helpData = ref([{}]); |
| | | const tableData = [ |
| | | { |
| | |
| | | return 'success-row'; |
| | | } |
| | | }; |
| | | const onUploadFileBefore = file => { |
| | | 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) return ElMessage.error('上传失败') |
| | | ElMessage.success('上传成功') |
| | | |
| | | }) |
| | | }; |
| | | </script> |
| | | <style lang="scss"> |
| | | .helpContainer { |
| | | .el-table .success-row { |
| | | --el-table-tr-bg-color: #fff; |
| | | } |
| | | .el-table .warning-row { |
| | | |
| | | .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; |
| | | 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; |
| | | 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; |
| | | .custom-table :deep(.el-table__body) td.el-table__cell { |
| | | text-align: center; |
| | | } |
| | | .helpContainer { |
| | | height: 100%; |