mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 20:06:44 +08:00
2022年5月29日从svn移到git
This commit is contained in:
daihh
316
src/views/portal/case/Detail.vue
Normal file
316
src/views/portal/case/Detail.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div>
|
||||
<portal-header current="case" :goSearch="2"></portal-header>
|
||||
<div class="portal-content xcontent" style="margin-top: 30px;">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
|
||||
<el-breadcrumb-item :to="{ path: '/case' }">案例列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>案例详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="xrow" style="display: flex;justify-content: space-between;">
|
||||
<div style="flex: 1;">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24">
|
||||
<el-card :body-style="{ padding: '0px' }" class="detail">
|
||||
<div class="title">{{ caseDetail.title }}</div>
|
||||
<div class="label">
|
||||
<author :onlyAvatar="true" :avatar="authorInfo.avatar" ></author>
|
||||
<span>作者：{{ authorInfo.name }}</span>
|
||||
<span>工号：{{ authorInfo.code }}</span>
|
||||
<span>部门：{{ authorInfo.orgInfo }}</span>
|
||||
<span>案例编号：{{ caseDetail.id }}</span>
|
||||
<span>发布时间：{{ caseDetail.sysCreateTime }}</span>
|
||||
<interactBar :views="false" :data="caseDetail" :type="3" :comments="false" :shares="false"></interactBar>
|
||||
</div>
|
||||
<div class="btn-div">
|
||||
<span class="item">角色认知</span>
|
||||
<span class="item">角色转变</span>
|
||||
<span class="item">团队管理</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card :body-style="{ padding: '0px' }" class="jianjie">
|
||||
<!-- <div class="content">
|
||||
{{ caseDetail.content }}
|
||||
</div> -->
|
||||
<pdfPreview :filePath="basePath+caseDetail.filePath"></pdfPreview>
|
||||
</el-card>
|
||||
<!-- :authorId="articleDetailData.sysCreateAid" -->
|
||||
<el-row><comments @success="success" v-if="resolveId != ''" :obj-type="3" :obj-id="resolveId" :authorId="caseDetail.sysCreateAid"></comments></el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="width: 245px;margin-left: 10px;"><!--排行榜-->
|
||||
<div id="fixd-box">
|
||||
<el-card class="ranking-card">
|
||||
<div slot="header">
|
||||
<span>排行榜</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-row class="ranking-title" v-for="(item,index) in ankingList" :key="index">
|
||||
<el-col :span="6">
|
||||
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
|
||||
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
|
||||
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
|
||||
</el-col>
|
||||
<el-col class="center" :span="18">{{item.sysCreateUname}}</el-col>
|
||||
<!-- <el-col class="center" :span="7">{{''}}</el-col>
|
||||
<el-col class="center" :span="7">{{item.counts}}</el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<portal-footer></portal-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import portalHeader from '@/components/PortalHeader.vue';
|
||||
import portalFooter from '@/components/PortalFooter.vue';
|
||||
import pdfPreview from '@/components/PdfPreview/index.vue';
|
||||
|
||||
import interactBar from '@/components/Portal/interactBar.vue';
|
||||
import comments from '@/components/Portal/comments.vue';
|
||||
import apiCase from '@/api/modules/cases.js';
|
||||
import apiUser from '@/api/system/user.js';
|
||||
import author from '@/components/Portal/authorInfo.vue';
|
||||
import apiMessage from '@/api/system/message.js'
|
||||
export default {
|
||||
name: 'atticle',
|
||||
components: { portalHeader, portalFooter, interactBar, author, comments,pdfPreview },
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
resolveId: '',
|
||||
basePath:process.env.VUE_APP_FILE_BASE_URL,
|
||||
caseDetail: {
|
||||
id:'',
|
||||
filePath:''
|
||||
},
|
||||
ankingList:[],
|
||||
authorInfo:{ aid: '', name: '', orgInfo: '', avatar: '', code: '' }
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.resolveId = this.$route.query.id;
|
||||
if (this.resolveId) {
|
||||
this.getCaseData();
|
||||
}
|
||||
this.getAnkingData();
|
||||
|
||||
},
|
||||
methods: {
|
||||
getAnkingData(){
|
||||
apiCase.usernameList(10).then(res=>{
|
||||
if(res.status==200){
|
||||
this.ankingList=res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
getCaseData() {
|
||||
apiCase.detail(this.resolveId,true).then(res => {
|
||||
if (res.status == 200) {
|
||||
if (JSON.stringify(res.result) != '{}') {
|
||||
this.caseDetail = res.result;
|
||||
this.getCaseUserDetail();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getCaseUserDetail() {
|
||||
apiUser.getByIds([this.caseDetail.sysCreateAid]).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.authorInfo = res.result[0];
|
||||
}
|
||||
});
|
||||
},
|
||||
success(value){
|
||||
let content=this.userInfo.name+'评论了我的案例'+'-'+this.caseDetail.title;
|
||||
let query={refId:this.caseDetail.id,sendType:1,title:'系统消息',refType:3,content:content,sendName:this.userInfo.name,accpetId:this.caseDetail.sysCreateAid,acceptName:this.caseDetail.sysCreateBy}
|
||||
apiMessage.save(query).then(res=>{
|
||||
if(res.status==200){
|
||||
|
||||
}
|
||||
})
|
||||
// let con=value.sysCreateBy+' 评论了我的文章'+'-'+this.articleDetailData.title;
|
||||
// let query={refId:value.objId,content:con,accpetId:value.sysCreateAid,sendType:1,sendName:'系统',acceptName:'文章',title:'系统消息'}
|
||||
// apiMessage.save(query).then(res=>{
|
||||
// if(res.status==200){
|
||||
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.detail {
|
||||
background-color: #fff;
|
||||
padding: 5px 20px 10px 20px;
|
||||
.title {
|
||||
font-size: 20px;
|
||||
line-height: 45px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.label {
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
span {
|
||||
margin-left: 10px;
|
||||
&:last-of-type {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.type {
|
||||
color: #0079fe;
|
||||
}
|
||||
.btn-div {
|
||||
margin: 8px 0;
|
||||
padding-bottom: 10px;
|
||||
color: #666;
|
||||
.item {
|
||||
margin: 0 8px 0 15px;
|
||||
border: 1px solid #9e9e9e;
|
||||
padding: 3px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.item-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jianjie {
|
||||
margin: 15px 0;
|
||||
background-color: #fff;
|
||||
padding: 20px 100px 10px 100px;
|
||||
.content {
|
||||
padding: 10px 0;
|
||||
line-height: 25px;
|
||||
}
|
||||
.btn-div {
|
||||
margin: 8px 0;
|
||||
padding: 10px 0;
|
||||
color: #666;
|
||||
.item {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.item-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-btn {
|
||||
padding: 10px 50px;
|
||||
.article-info-tools-btn {
|
||||
padding: 5px 0px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.bottom-div {
|
||||
margin-top: 10px;
|
||||
background-color: #fff;
|
||||
padding: 5px 20px 10px 20px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
.tip {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.submit-div {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.bottom {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.data {
|
||||
margin-top: 10px;
|
||||
background-color: #fff;
|
||||
padding: 5px 20px 10px 20px;
|
||||
.data-item {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
margin-top: 10px;
|
||||
.top {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
margin: 15px 0 5px 0;
|
||||
padding-left: 40px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.huifu {
|
||||
padding-left: 40px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.result-div {
|
||||
padding-left: 40px;
|
||||
padding-top: 10px;
|
||||
.top {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.up-div {
|
||||
padding: 0 15px;
|
||||
.up-btn {
|
||||
padding: 8px 20px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
img {
|
||||
margin-right: 10px;
|
||||
width: 30px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
line-height: 25px;
|
||||
.ranking-card {
|
||||
margin-bottom: 10px;
|
||||
.el-col{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.center{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.ranking-title {
|
||||
}
|
||||
.aligh-title{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.ranking-data {
|
||||
margin: 10px 0;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user