kd-aiot-frontend-ehs/src/views/safetyTraining/myTraining/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div>
        <!-- 搜索区域 -->
        <div class="search-area">
          <seek-page
            :seekList="seekList"
            @search="handleSearch"
            :formLength="4"
          />
        </div>

        <!-- 列表视图 -->
        <div class="list-view">
          <ele-pro-table
            ref="table"
            row-key="id"
            :columns="columns"
            :datasource="datasource"
            :cache-key="cacheKeyUrl"
            height="calc(100vh - 340px)"
            @columns-change="handleColumnChange"
          >
            <template v-slot:action="{ row }">
              <div class="action-links">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleStart(row)"
                  >开始学习</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleDetail(row)"
                  >查看详情</el-link
                >
              </div>
            </template>
          </ele-pro-table>
        </div>

        <!-- 详情弹窗 -->
        <detail ref="detailRef" />
      </div>
    </el-card>
  </div>
</template>

<script>
  import detail from './detail.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';
  export default {
    components: {
      detail
    },
    mixins: [tabMixins],

    data() {
      return {
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            prop: 'name',
            label: '培训名称',
            align: 'center',
            minWidth: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'responsibleUserName',
            label: '责任人',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'creator',
            label: '制定人',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'startTime',
            label: '开始时间',
            align: 'center',
            minWidth: 160
          },
          {
            prop: 'content',
            label: '培训内容',
            align: 'center',
            minWidth: 200,
            showOverflowTooltip: true
          },
          {
            prop: 'assigner',
            label: '下达人',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'assignTime',
            label: '下达时间',
            align: 'center',
            minWidth: 160
          },
          {
            prop: 'requiredFinishTime',
            label: '要求完成时间',
            align: 'center',
            minWidth: 160
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 160,
            align: 'center',
            slot: 'action'
          }
        ],
        cacheKeyUrl: 'ehs-myTraining-list'
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '培训名称：',
            value: 'name',
            type: 'input',
            width: 220,
            placeholder: '请输入培训名称'
          },
          {
            label: '制定人：',
            value: 'creator',
            type: 'input',
            width: 220,
            placeholder: '请输入制定人'
          },
          {
            label: '开始时间：',
            value: 'startTime',
            type: 'date',
            width: 220,
            placeholder: '请选择开始时间'
          }
        ];
      }
    },
    methods: {
      // 开始学习
      handleStart(row) {
        // TODO: 开始培训逻辑
        console.log('开始学习', row);
      },
      // 查看详情
      handleDetail(row) {
        this.$refs.detailRef.open(row);
      },
      // 搜索
      handleSearch(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      // 表格数据源
      datasource({ page, limit, where, order }) {
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit
        };
        return [{}];
      }
    }
  };
</script>

<style lang="scss" scoped>
  .search-area {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
  }

  .list-view {
    ::v-deep .ele-pro-table {
      .el-table {
        border: 1px solid #ebeef5;
        border-radius: 4px;
      }
    }
  }

  .action-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

    .el-link {
      font-size: 12px;
    }
  }
</style>