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

<template>
  <div class="project">
    <MenuPage cur-key="project" />

    <div class="project-list">
      <el-table :data="list">
        <el-table-column label="序号" width="60" header-align="center" align="center" class-name="index-column">
          <template slot-scope="{ $index }">
            {{ cur_page_begin_index + $index }}
          </template>
        </el-table-column>
        <el-table-column prop="sn" label="编号" width="140" header-align="center" />
        <el-table-column prop="name" label="名称" width="240" header-align="center" />
        <el-table-column prop="create_time" label="创建时间" width="180" header-align="center" />
        <el-table-column prop="leader_name_desc" label="项目组长" width="260" header-align="center" />
        <el-table-column prop="member_name_desc" label="项目成员" header-align="center" />

        <el-table-column label="操作" fixed="right" width="340" header-align="center">
          <template slot-scope="{ row }">
            <span class="link" @click="projectInfoManage(row.id, true)">项目信息管理</span>
            <span class="link" @click="productionResourceManage(row.id)">项目资源管理</span>
            <span class="link" @click="productionEditorialManage(row.id)">制作与审校管理</span>
            <span class="link danger">删除</span>
          </template>
        </el-table-column>
      </el-table>

      <PaginationPage ref="pagination" :total="total" @getList="queryMyProjectList_Leader" />
    </div>
  </div>
</template>

<script>
import MenuPage from '../common/menu.vue';
import PaginationPage from '@/components/PaginationPage.vue';

import { PageQueryMyProjectList_Leader } from '@/api/list.js';

export default {
  name: 'ProjectPage',
  components: {
    MenuPage,
    PaginationPage,
  },
  data() {
    return {
      list: [],
      total: 0,
      cur_page_begin_index: 0,
    };
  },
  methods: {
    queryMyProjectList_Leader(data) {
      PageQueryMyProjectList_Leader(data).then(({ total_count, cur_page_begin_index, project_list }) => {
        this.total = total_count;
        this.list = project_list;
        this.cur_page_begin_index = cur_page_begin_index;
      });
    },
    /**
     * 项目信息管理或查看
     * @param {string} id - 项目ID
     * @param {boolean} isManage - 是否为管理模式
     */
    projectInfoManage(id, isManage = false) {
      this.$router.push({ path: `/personal_workbench/project_info/${id}`, query: { isManage } });
    },
    /**
     * 制作与审校管理
     * @param {string} id - 项目ID
     */
    productionEditorialManage(id) {
      this.$router.push({ path: `/personal_workbench/production_editorial/${id}` });
    },
    /**
     * 项目资源管理
     * @param {string} id - 项目ID
     */
    productionResourceManage(id) {
      this.$router.push({ path: `/personal_workbench/production_resource/${id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.project {
  @include page-base;
  @include table-list;
}
</style>