kd-aiot-frontend-ehs/src/views/safetyTraining/offlineTrainingRecords/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 - 350px)"
            @columns-change="handleColumnChange"
          >
            <template v-slot:toolbar>
              <div class="toolbar-left">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-plus"
                  v-if="$hasPermission('ehs:offlineTraining:save')"
                  @click="handleAdd"
                  >添加记录</el-button
                >
              </div>
            </template>
            <template v-slot:action="{ row }">
              <div class="action-links">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleView(row)"
                  >查看</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  v-if="$hasPermission('ehs:offlineTraining:update')"
                  @click="handleEdit(row)"
                  >编辑</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  v-if="$hasPermission('ehs:offlineTraining:update')"
                  @click="handleSummary(row)"
                  >培训总结</el-link
                >
                <el-link
                  type="danger"
                  :underline="false"
                  v-if="$hasPermission('ehs:offlineTraining:delete')"
                  @click="handleDelete(row)"
                  >删除</el-link
                >
              </div>
            </template>
          </ele-pro-table>
        </div>

        <!-- 新增/编辑/查看弹窗 -->
        <add ref="dialogRef" @reload="handleReload" />
        <!-- 培训总结 -->
        <summary-dialog ref="summaryRef" @reload="handleReload" />
      </div>
    </el-card>
  </div>
</template>

<script>
  import add from './add.vue';
  import summaryDialog from './summary.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import { getPage, remove } from '@/api/offlineTraining/index.js';
  import { TRAINING_TYPE_OPTIONS, getOptionLabel } from '../constants';

  export default {
    components: {
      add,
      summaryDialog
    },
    mixins: [tabMixins],
    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            prop: 'trainingProject',
            label: '培训项目',
            align: 'center',
            minWidth: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'organizationName',
            label: '组织单位',
            align: 'center',
            minWidth: 140,
            showOverflowTooltip: true
          },
          {
            prop: 'trainingUnitName',
            label: '培训单位',
            align: 'center',
            minWidth: 140,
            showOverflowTooltip: true
          },
          {
            prop: 'trainingLecturer',
            label: '培训讲师',
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'location',
            label: '地点',
            align: 'center',
            minWidth: 130,
            showOverflowTooltip: true
          },
          {
            prop: 'trainingType',
            label: '培训类型',
            align: 'center',
            minWidth: 110,
            formatter: (row) =>
              getOptionLabel(TRAINING_TYPE_OPTIONS, row.trainingType)
          },
          {
            prop: 'startTime',
            label: '开始时间',
            align: 'center',
            minWidth: 160
          },
          {
            prop: 'endTime',
            label: '结束时间',
            align: 'center',
            minWidth: 160
          },
          {
            prop: 'plannedCount',
            label: '计划人数',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'actualCount',
            label: '实到人数',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            minWidth: 160
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            slot: 'action'
          }
        ],
        cacheKeyUrl: 'ehs-offlineTrainingRecords-list'
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '培训项目：',
            value: 'trainingProject',
            type: 'input',
            width: 220,
            placeholder: '请输入培训项目'
          },
          {
            label: '地点：',
            value: 'location',
            type: 'input',
            width: 220,
            placeholder: '请输入地点'
          },
          {
            label: '培训类型：',
            value: 'trainingType',
            type: 'select',
            width: 220,
            placeholder: '请选择培训类型',
            planList: TRAINING_TYPE_OPTIONS
          }
        ];
      }
    },
    methods: {
      // 新增
      handleAdd() {
        this.$refs.dialogRef.open();
      },
      // 编辑
      handleEdit(row) {
        this.$refs.dialogRef.open(row, 'edit');
      },
      // 查看
      handleView(row) {
        this.$refs.dialogRef.open(row, 'view');
      },
      // 培训总结
      handleSummary(row) {
        this.$refs.summaryRef.open(row);
      },
      // 删除
      handleDelete(row) {
        this.$confirm('确认删除该培训记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => remove([row.id]))
          .then((message) => {
            this.$message.success(message || '删除成功');
            this.$refs.table.reload();
          })
          .catch(() => {});
      },
      // 搜索
      handleSearch(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      handleReload() {
        this.$refs.table.reload();
      },
      // 表格数据源
      datasource({ page, limit, where }) {
        const body = {
          ...where,
          pageNum: page,
          size: limit
        };
        Object.keys(body).forEach((key) => {
          if (body[key] === '' || body[key] === null) {
            delete body[key];
          }
        });
        return getPage(body);
      }
    }
  };
</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>