eep_page/src/views/project_manage/org/project/index.vue

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

    <div id="query-form">
      <el-form inline>
        <el-form-item prop="name" label="名称">
          <el-input v-model="queryForm.name" clearable @change="pageQueryProjectList_OrgManager()" />
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-select v-model="queryForm.status" @change="pageQueryProjectList_OrgManager()">
            <el-option label="全部" :value="-1" />
            <el-option label="制作中" :value="0" />
            <el-option label="审核中" :value="1" />
            <el-option label="已终审" :value="2" />
            <el-option label="已上架" :value="3" />
            <el-option label="已下架" :value="4" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="project-list">
      <el-table :data="list">
        <el-table-column label="序号" width="60" align="center" header-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="260" header-align="center" />
        <el-table-column prop="version" label="版本" width="100" header-align="center" />
        <el-table-column prop="org_name" label="所属机构" width="120" header-align="center" />
        <el-table-column prop="leader_name_desc" label="项目组长" width="140" header-align="center" />
        <el-table-column prop="create_time" label="创建时间" width="180" header-align="center" />
        <el-table-column prop="content_count_SJ" label="教材页面数" width="100" header-align="center" />
        <el-table-column prop="status_name" label="状态" align="center" width="120" header-align="center" />
        <el-table-column prop="request_status_name" label="申请状态" align="center" header-align="center" />

        <el-table-column fixed="right" label="操作" width="350" align="center" header-align="center">
          <template slot-scope="{ row }">
            <span
              class="link"
              @click="
                $router.push({
                  path: `/personal_workbench/project_info/${row.id}`,
                  query: { isManage: false, backPath: '/project_manage/org/project' },
                })
              "
              >查看信息</span
            >
            <span class="link" @click="previewProject(row.id)">预览项目</span>
            <template v-if="isTrue(row.is_can_audit)">
              <span class="link" @click="projectAuditOperate(row.id, 'true', row.request_status)"> 审核通过 </span>
              <span class="link" @click="projectAuditOperate(row.id, 'false', row.request_status)">审核拒绝</span>
            </template>
            <span v-if="isTrue(row.is_can_shangjia)" class="link" @click="shangjiaProject(row.id)">上架</span>
            <span v-if="isTrue(row.is_can_xiajia)" class="link" @click="xiajiaProject(row.id)">下架</span>
          </template>
        </el-table-column>
      </el-table>

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

<script>
import PaginationPage from '@/components/PaginationPage.vue';
import ProjectMenu from '@/views/project_manage/common/ProjectMenu.vue';

import { PageQueryProjectList_OrgManager } from '@/api/list';
import { isTrue } from '@/utils/validate';
import { ProjectAuditOperate, ShangjiaBook, XiajiaBook } from '@/api/project';

export default {
  name: 'OrgProjectPage',
  components: {
    PaginationPage,
    ProjectMenu,
  },
  data() {
    return {
      list: [],
      total: 0,
      cur_page_begin_index: 0,
      isTrue,
      queryForm: {
        name: '',
        status: -1,
      },
    };
  },
  methods: {
    /**
     * 项目审核操作
     * @param {number} project_id 项目id
     * @param {string} is_pass 是否审核通过，true-审核通过，false-审核拒绝
     * @param {string} request_status 申请状态
     */
    projectAuditOperate(project_id, is_pass, request_status) {
      this.$confirm(`确定要执行${is_pass === 'true' ? '审核通过' : '审核拒绝'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          let loading = null;
          if (request_status === 3) {
            loading = this.$loading({
              text: '正在生成新的修订项目，请等待...',
            });
          }
          ProjectAuditOperate({ project_id, is_pass })
            .then(() => {
              this.$message.success('操作成功');
              this.$refs.pagination.getList();
            })
            .catch(() => {})
            .finally(() => {
              if (loading) {
                loading.close();
              }
            });
        })
        .catch(() => {});
    },
    pageQueryProjectList_OrgManager(data) {
      const _data = {
        page_capacity: 10,
        cur_page: 1,
        ...data,
        ...this.queryForm,
      };
      PageQueryProjectList_OrgManager(_data)
        .then(({ total_count, cur_page_begin_index, project_list }) => {
          this.total = total_count;
          this.cur_page_begin_index = cur_page_begin_index;
          this.list = project_list;
        })
        .catch(() => {});
    },
    previewProject(projectId) {
      this.$router.push({ path: `/project_manage/org/project/preview/${projectId}` });
    },
    shangjiaProject(project_id) {
      this.$confirm('确定要上架该教材吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          ShangjiaBook({ project_id })
            .then(() => {
              this.$message.success('操作成功');
              this.$refs.pagination.getList();
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    xiajiaProject(project_id) {
      this.$confirm('确定要下架该教材吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          XiajiaBook({ project_id })
            .then(() => {
              this.$message.success('操作成功');
              this.$refs.pagination.getList();
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

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

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