eep_page/src/views/personal_workbench/courseware_project/index.vue

<!-- 教材管理列表 -->
<template>
  <CoursewareList
    :status-list="statusList"
    :current-status.sync="activeStatus"
    :total="total"
    @getList="queryMyProjectList_Leader"
  >
    <template #card>
      <div v-for="item in list" :key="item.id" class="prod-card">
        <div class="card-cover">
          <img v-if="item.cover_iamge_file_url.length > 0" :src="item.cover_iamge_file_url" alt="封面" />
        </div>
        <div class="card-right" @click="jumpToDetail(item.id)">
          <div class="card-name" :title="item.name">{{ item.name || '-' }}</div>
          <div class="card-meta">
            <div class="meta-row">
              <span class="meta-label">项目组长：</span>
              <div class="avatar-group">
                <div
                  v-for="(name, idx) in splitMembers(item.leader_name_desc)"
                  :key="`${item.id}-leader-${idx}`"
                  class="mini-avatar"
                >
                  {{ getFirstChar(name) }}
                </div>
              </div>
            </div>
            <div class="meta-row">
              <span class="meta-label">项目成员：</span>
              <div class="avatar-group">
                <div
                  v-for="(name, idx) in splitMembers(item.member_name_desc)"
                  :key="`${item.id}-member-${idx}`"
                  class="mini-avatar"
                >
                  {{ getFirstChar(name) }}
                </div>
              </div>
            </div>
            <div class="card-time">计划完成日期：{{ item.plan_publish_date || '-' }}</div>
          </div>

          <div class="card-bottom">
            <div class="progress-bar">
              <div class="fill" :style="{ width: `${item.progress_percent || 0}%` }"></div>
            </div>
            <span class="progress-text">{{ item.progress_percent || 0 }}%</span>
            <button class="status-btn" :class="statusClass(item)" type="button" @click.stop>
              {{ item.status_name || '-' }}
            </button>
          </div>
        </div>
      </div>
    </template>
  </CoursewareList>
</template>

<script>
import CoursewareList from '@/components/CoursewareList.vue';
import { PageQueryMyProjectList_Leader } from '@/api/list';

export default {
  name: 'CoursewareProjectPage',
  components: {
    CoursewareList,
  },
  data() {
    return {
      list: [],
      page_capacity: 9,
      cur_page: 1,
      total: 0,
      activeStatus: 'all',
      statusList: [
        { key: 'all', label: '全部', status: -1 },
        { key: 'producing', label: '制作中', status: 0 },
        { key: 'reviewing', label: '审核中', status: 1 },
        { key: 'done', label: '已终审', status: 2 },
        { key: 'published', label: '已上架', status: 3 },
      ],
    };
  },
  created() {
    this.queryMyProjectList_Leader();
  },
  methods: {
    queryMyProjectList_Leader(data) {
      const params = {
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
        status: this.statusList.find((s) => s.key === this.activeStatus)?.status,
      };
      PageQueryMyProjectList_Leader({ ...params, ...data }).then(({ project_list, cur_page, total_count }) => {
        this.list = project_list || [];
        this.cur_page = cur_page || 1;
        this.total = total_count || 0;
      });
    },
    /**
     * 分割成员字符串为数组
     * @param {string} memberDesc - 成员描述字符串，格式为 "name1;name2;name3"
     * @returns {Array} 成员名称数组
     */
    splitMembers(memberDesc = '') {
      return memberDesc
        .split(';')
        .map((v) => v.trim())
        .filter(Boolean);
    },
    getFirstChar(name = '') {
      return name ? name.trim().slice(0, 1) : '-';
    },
    statusClass(item) {
      const n = Number(item.status);
      if (n === 0) return 'building';
      if (n === 1) return 'reviewing';
      if (n === 2) return 'done';
      return 'published';
    },
    jumpToDetail(id) {
      this.$router.push({ name: 'CoursewareDetail', params: { id }, query: { type: 'manage' } });
    },
  },
};
</script>

<style lang="scss" scoped></style>