learning-system-portal/src/components/Course/TopCourseSorter.vue

<template>
  <el-dialog
    title="置顶排序"
    :visible.sync="dialogVisible"
    custom-class="g-dialog top-course-sorter-dialog"
    width="820px"
    :close-on-click-modal="false"
    @closed="handleClosed"
    append-to-body
  >
    <div class="top-course-sorter" v-loading="loading">
      <div class="top-course-sorter__table" v-if="topList.length">
        <div class="sorter-header">
          <div class="header-cell header-cell--handle"></div>
          <div class="header-cell header-cell--order">排序</div>
          <div class="header-cell header-cell--name">课程名称</div>
          <div class="header-cell header-cell--teacher">授课教师</div>
        </div>
        <div
          class="sorter-row"
          v-for="(item, index) in topList"
          :key="item.id"
          draggable="true"
          @dragstart="handleDragStart(index, $event)"
          @dragover.prevent
          @drop="handleDrop(index)"
          @dragend="handleDragEnd"
          :class="{ 'is-dragging': draggingIndex === index }"
        >
          <div class="row-cell row-cell--handle">
            <i class="el-icon-s-operation"></i>
          </div>
          <div class="row-cell row-cell--order">{{ index + 1 }}</div>
          <div class="row-cell row-cell--name" :title="item.name">{{ item.name }}</div>
          <div class="row-cell row-cell--teacher" :title="item.teacherName || '-'">
            {{ item.teacherName || '-' }}
          </div>
        </div>
      </div>
      <el-empty v-else-if="!loading" description="暂无置顶课程"></el-empty>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" :disabled="!topList.length" :loading="saving" @click="handleSave">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import apiCourse from '@/api/modules/course.js';

export default {
  name: 'TopCourseSorter',
  data() {
    return {
      dialogVisible: false,
      loading: false,
      saving: false,
      topList: [],
      draggingIndex: null,
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.fetchTopList();
    },
    async fetchTopList() {
      this.loading = true;
      try {
        const res = await apiCourse.fetchTopCourseList();
        if (res.status === 200) {
          this.topList = Array.isArray(res.result) ? [...res.result] : [];
        } else {
          this.$message.error(res.message || '获取置顶课程失败');
          this.topList = [];
        }
      } catch (error) {
        this.$message.error(error.message || '获取置顶课程失败');
        this.topList = [];
      } finally {
        this.loading = false;
      }
    },
    handleDragStart(index, event) {
      this.draggingIndex = index;
      if (event && event.dataTransfer) {
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/plain', index);
      }
    },
    handleDrop(targetIndex) {
      if (this.draggingIndex === null || this.draggingIndex === targetIndex) {
        return;
      }
      const movingItem = this.topList.splice(this.draggingIndex, 1)[0];
      this.topList.splice(targetIndex, 0, movingItem);
      this.draggingIndex = targetIndex;
    },
    handleDragEnd() {
      this.draggingIndex = null;
    },
    async handleSave() {
      if (!this.topList.length) {
        this.$message.warning('暂无需要保存的排序');
        return;
      }
      const payload = this.topList.map((item, index) => ({
        id: item.id,
        sortWeight: index,
      }));
      this.saving = true;
      try {
        const res = await apiCourse.updateTopCourseSort(payload);
        if (res.status === 200) {
          this.$message.success('排序更新成功');
          this.$emit('sorted');
          this.dialogVisible = false;
        } else {
          throw new Error(res.message || '排序更新失败');
        }
      } catch (error) {
        this.$message.error(error.message || '排序更新失败');
      } finally {
        this.saving = false;
      }
    },
    handleClosed() {
      this.topList = [];
      this.draggingIndex = null;
      this.loading = false;
      this.saving = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.top-course-sorter {
  min-height: 200px;
  padding-top: 8px;
}

.top-course-sorter__table {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
}

.sorter-header,
.sorter-row {
  display: grid;
  grid-template-columns: 60px 80px 1fr 160px;
  align-items: center;
}

.sorter-header {
  background-color: #f5f7fa;
  height: 48px;
  font-weight: 600;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
}

.sorter-row {
  min-height: 56px;
  border-bottom: 1px solid #f2f6fc;
  cursor: move;
  transition: background-color 0.2s ease;
}

.sorter-row:last-child {
  border-bottom: none;
}

.sorter-row:hover {
  background-color: #f9fbff;
}

.sorter-row.is-dragging {
  opacity: 0.7;
  background-color: #ecf5ff;
}

.header-cell,
.row-cell {
  padding: 0 16px;
  display: flex;
  align-items: center;
}

.header-cell--handle,
.row-cell--handle {
  justify-content: center;
}

.header-cell--order,
.row-cell--order {
  justify-content: flex-start;
}

.row-cell--name,
.row-cell--teacher {
  color: #303133;
}

.row-cell--name {
  font-weight: 500;
}

.row-cell--teacher {
  color: #666;
}

.row-cell--handle i {
  font-size: 20px;
  color: #c0c4cc;
}

.dialog-footer {
  text-align: right;
}
</style>