feat:帮助中心文件上传

张含笑

2025-06-28 38196f101433c36e500110e82a90c7847302f2f3

 src/views/system/helpCenter.vue

@@ -2,10 +2,10 @@
  <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 }">
@@ -19,7 +19,14 @@
        <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>
@@ -28,6 +35,8 @@
</template>

<script setup>
import { uploadFileAPI } from '@/api/helpCenter/helpCenter';
import { ElMessage } from 'element-plus';
const helpData = ref([{}]);
const tableData = [
  {
@@ -63,27 +72,37 @@
    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;
}
@@ -91,14 +110,14 @@
/* 行样式 */
.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%;