|
|
@@ -3,7 +3,7 @@
|
|
|
<div class="courseware-detail">
|
|
|
<div class="page-header">
|
|
|
<span v-if="normalizedType !== 'launch'" class="header-back" @click="goBack">
|
|
|
- <SvgIcon icon-class="courseware-undo" size="16" />
|
|
|
+ <i class="el-icon-back"></i>
|
|
|
</span>
|
|
|
</div>
|
|
|
<main class="courseware-detail__main">
|
|
|
@@ -28,24 +28,30 @@
|
|
|
<span class="value">{{ project.editor || '-' }}</span>
|
|
|
</div>
|
|
|
<div class="info-item">
|
|
|
+ <span class="label">项目组长：</span>
|
|
|
+ <span class="value">{{ project.leader_name_desc || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
<span class="label">出版单位：</span>
|
|
|
<span class="value">{{ project.publisher || '-' }}</span>
|
|
|
</div>
|
|
|
<div class="info-item">
|
|
|
- <span class="label">计划完成日期：</span>
|
|
|
+ <span class="label">计划出版日期：</span>
|
|
|
<span class="value">{{ project.plan_publish_date || '-' }}</span>
|
|
|
</div>
|
|
|
- <div class="info-item">
|
|
|
- <span class="label">适用年龄：</span>
|
|
|
- <span class="value">{{ '-' }}</span>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <span class="label">语言水平：</span>
|
|
|
- <span class="value">{{ '-' }}</span>
|
|
|
+ <div class="info-item info-item--full">
|
|
|
+ <span class="label">ISBN：</span>
|
|
|
+ <span class="value">{{ project.isbn || '-' }}</span>
|
|
|
</div>
|
|
|
- <div class="info-item">
|
|
|
- <span class="label">语种：</span>
|
|
|
- <span class="value">{{ project.language || '-' }}</span>
|
|
|
+ <div class="info-item info-item--full">
|
|
|
+ <span class="label">标签：</span>
|
|
|
+ <span class="value">
|
|
|
+ <div class="label-list">
|
|
|
+ <span v-for="(label, index) in project.label_list || []" :key="index" class="label-item">
|
|
|
+ {{ label }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="book-intro">简介：{{ project.content_intro || '-' }}</div>
|
|
|
@@ -73,8 +79,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="normalizedType === 'manage'" class="apply-wrap">
|
|
|
- <div v-if="project.status_name.length > 0" class="request-status">{{ project.status_name }}</div>
|
|
|
- <div v-if="project.request_status_name.length > 0" class="request-status">
|
|
|
+ <div
|
|
|
+ v-if="project.status_name?.length > 0"
|
|
|
+ :style="{
|
|
|
+ color: stateColorList[project.status].color,
|
|
|
+ backgroundColor: stateColorList[project.status].bc,
|
|
|
+ }"
|
|
|
+ class="status"
|
|
|
+ >
|
|
|
+ {{ project.status_name }}
|
|
|
+ </div>
|
|
|
+ <div v-if="project.request_status_name?.length > 0" class="request-status">
|
|
|
{{ project.request_status_name }}
|
|
|
</div>
|
|
|
<div style="flex: 1"></div>
|
|
|
@@ -82,10 +97,12 @@
|
|
|
v-for="item in operateButtons"
|
|
|
:key="item.type"
|
|
|
type="button"
|
|
|
- class="btn-apply"
|
|
|
+ :class="['btn-operate', item.customClass]"
|
|
|
+ :style="item.style"
|
|
|
:disabled="operateLoadingType === item.type"
|
|
|
@click="projectRequestOperate(item.type)"
|
|
|
>
|
|
|
+ <SvgIcon :icon-class="item.icon" />
|
|
|
{{ item.label }}
|
|
|
</button>
|
|
|
</div>
|
|
|
@@ -185,6 +202,7 @@
|
|
|
<script>
|
|
|
import BookUnifiedAttr from '@/views/personal_workbench/project/components/BookUnifiedAttr.vue';
|
|
|
|
|
|
+import { stateColorList } from '@/common/data';
|
|
|
import { GetProjectInfo, ProjectRequestOperate } from '@/api/project';
|
|
|
|
|
|
const TYPE_LIST = ['edit', 'manage', 'audit', 'launch'];
|
|
|
@@ -199,11 +217,36 @@ const PROGRESS_STEP_CONFIG = [
|
|
|
|
|
|
// 操作按钮配置
|
|
|
const OPERATE_BUTTON_CONFIG = [
|
|
|
- { type: 1, label: '申请上架' },
|
|
|
- { type: 2, label: '申请下架' },
|
|
|
- { type: 3, label: '申请修订' },
|
|
|
- { type: 4, label: '撤回重做' },
|
|
|
- { type: 5, label: '申请改错' },
|
|
|
+ {
|
|
|
+ type: 1,
|
|
|
+ label: '申请上架',
|
|
|
+ icon: 'courseware-upload',
|
|
|
+ customClass: 'apply',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 2,
|
|
|
+ label: '申请下架',
|
|
|
+ icon: 'courseware-download',
|
|
|
+ customClass: 'shelve',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 3,
|
|
|
+ label: '申请修订',
|
|
|
+ icon: 'courseware-file-edit',
|
|
|
+ customClass: 'revise',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 4,
|
|
|
+ label: '撤回申请',
|
|
|
+ icon: 'courseware-undo',
|
|
|
+ customClass: 'revoke',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 5,
|
|
|
+ label: '申请改错',
|
|
|
+ icon: 'courseware-pencil',
|
|
|
+ customClass: 'error-correction',
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
function isProgressFinished(value) {
|
|
|
@@ -220,6 +263,7 @@ export default {
|
|
|
project: {},
|
|
|
operateLoadingType: null,
|
|
|
visibleAttr: false,
|
|
|
+ stateColorList,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -246,7 +290,7 @@ export default {
|
|
|
},
|
|
|
currentStage() {
|
|
|
const nextUnfinishedStep = this.progressSteps.find((step) => !step.finished);
|
|
|
- return nextUnfinishedStep ? nextUnfinishedStep.index : this.progressSteps.length;
|
|
|
+ return nextUnfinishedStep ? nextUnfinishedStep.index : this.progressSteps?.length;
|
|
|
},
|
|
|
curCanOperateButtonList() {
|
|
|
const list = this.project.cur_can_operate_button_list;
|
|
|
@@ -271,9 +315,10 @@ export default {
|
|
|
getProjectInfo() {
|
|
|
if (!this.projectId) return;
|
|
|
GetProjectInfo({ id: this.projectId }).then(
|
|
|
- ({ project_info = {}, progress_node_info = {}, member_list = [], leader_list = [] }) => {
|
|
|
+ ({ project_info = {}, progress_node_info = {}, book_info_PBE, member_list = [], leader_list = [] }) => {
|
|
|
this.project = {
|
|
|
...project_info,
|
|
|
+ ...book_info_PBE,
|
|
|
progress_node_info,
|
|
|
leader_name_desc: leader_list.map((user) => user.name).join('，') || project_info.leader_name_desc,
|
|
|
member_name_desc: member_list.map((user) => user.name).join('，') || project_info.member_name_desc,
|
|
|
@@ -425,6 +470,10 @@ export default {
|
|
|
background: #fff;
|
|
|
border-radius: 4px;
|
|
|
|
|
|
+ i {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
&:hover {
|
|
|
color: #2d3e8f;
|
|
|
}
|
|
|
@@ -514,6 +563,10 @@ export default {
|
|
|
.info-item {
|
|
|
font-size: 13px;
|
|
|
|
|
|
+ &--full {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ }
|
|
|
+
|
|
|
.label {
|
|
|
display: inline-block;
|
|
|
width: 95px;
|
|
|
@@ -526,6 +579,24 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .label-list {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px 12px;
|
|
|
+
|
|
|
+ .label-item {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 3px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #2d3e8f;
|
|
|
+ background: #e8f8fd;
|
|
|
+ border: 1px solid rgba(77, 201, 246, 30%);
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.book-intro {
|
|
|
margin-top: 14px;
|
|
|
font-size: 13px;
|
|
|
@@ -651,6 +722,26 @@ export default {
|
|
|
margin-top: 12px;
|
|
|
border-top: $border;
|
|
|
|
|
|
+ .status {
|
|
|
+ padding: 4px 12px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #2563eb;
|
|
|
+ background: #dbeafe;
|
|
|
+ border-radius: 12px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: relative;
|
|
|
+ top: -1px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ margin-right: 2px;
|
|
|
+ content: '';
|
|
|
+ background: currentColor;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.request-status {
|
|
|
padding: 4px 12px;
|
|
|
font-size: 13px;
|
|
|
@@ -671,6 +762,80 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .btn-operate {
|
|
|
+ display: inline-flex;
|
|
|
+ gap: 5px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 8px 18px;
|
|
|
+ font-size: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #fff;
|
|
|
+ border: $border;
|
|
|
+ border-radius: 20px;
|
|
|
+ transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.apply {
|
|
|
+ color: #2d3e8f;
|
|
|
+ border-color: #2d3e8f;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #e8f8fd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.revoke {
|
|
|
+ color: #f59e0b;
|
|
|
+ border-color: #fde68a;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #2d3e8f;
|
|
|
+ background-color: #fffbeb;
|
|
|
+ border-color: #f59e0b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.shelve {
|
|
|
+ color: #ef4444;
|
|
|
+ border-color: #fecaca;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #fef2f2;
|
|
|
+ border-color: #ef4444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.revise {
|
|
|
+ color: #10b981;
|
|
|
+ border-color: #a7f3d0;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #ecfdf5;
|
|
|
+ border-color: #10b981;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.error-correction {
|
|
|
+ color: #64748b;
|
|
|
+ border-color: #e2e8f0;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #2d3e8f;
|
|
|
+ background: #e8f8fd;
|
|
|
+ border-color: #2d3e8f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #2d3e8f;
|
|
|
+ box-shadow: 0 4px 12px rgba(45, 62, 143, 10%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.btn-apply {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
dsy