feat:事件工单滚动条

张含笑

2025-08-05 c832bf2e80ac465e71b7a1c1f7a59d4252030989

 src/views/system/helpCenter.vue

@@ -2,24 +2,34 @@
  <basic-container>
    <div class="helpContainer">
      <el-table
      class="custom-table"
        :data="tableData"
        class="custom-table"
        :data="helpData"
        style="width: 100%"
        :row-class-name="tableRowClassName"  
        :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="jibie1" label="一级类别" />
        <el-table-column prop="jibie2" label="二级类别" />
        <el-table-column prop="name" label="上传者" />
        <el-table-column prop="date" label="上传时间" />
        <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">查看</span>
            <span class="uploads">上传</span>
            <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>
@@ -28,33 +38,14 @@
</template>

<script setup>
const helpData = ref([{}]);
const tableData = [
  {
    jibie1: '入门指南',
    jibie2: '指挥调度平台',
    name: 'cdsfsdf',
    date: '2025/05/03 14:10',
  },
  {
    jibie1: '入门指南',
    jibie2: '综合管理平台',
    name: 'cdsfsdf',
    date: '2025/05/03 14:10',
  },
  {
    jibie1: '入门指南',
    jibie2: 'AISKY算法平台',
    name: 'cdsfsdf',
    date: '2025/05/03 14:10',
  },
  {
    jibie1: '一级类别',
    jibie2: '7.6.35版本更新',
    name: 'cdsfsdf',
    date: '2025/05/03 14:10',
  },
];
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) {
@@ -63,27 +54,78 @@
    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 .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 +133,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%;