mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-20 08:16:44 +08:00
2022年5月29日从svn移到git
This commit is contained in:
daihh
99
src/components/Article/articleImage.vue
Normal file
99
src/components/Article/articleImage.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<!--用于显示课程的图片-->
|
||||
<div class="img-box" id="img-box">
|
||||
<el-image style="background-color: #eeeeee;"
|
||||
:style="`width:${width};height:${height};`"
|
||||
fit="fill "
|
||||
:src="imageUrl"></el-image>
|
||||
<p v-if="isShow" :class="imageTextSize? 'mini':'max'">{{article.title}}</p>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
article:{
|
||||
type: Object,
|
||||
default:()=>{}
|
||||
},
|
||||
height:{
|
||||
type:String,
|
||||
default:'100%'
|
||||
},
|
||||
width:{
|
||||
type:String,
|
||||
default:'100%'
|
||||
}
|
||||
},
|
||||
|
||||
computed:{
|
||||
imageUrl(){
|
||||
if(this.article && this.article.coverurl && this.article.coverurl!=''){
|
||||
return this.fileBaseUrl+this.article.coverurl;
|
||||
}else if((this.article && this.article.courseImage && this.article.courseImage!='')){
|
||||
return this.fileBaseUrl+this.article.courseImage;
|
||||
} else if(this.article.coverurl =='' || this.article.courseImage ==''){
|
||||
this.isShow = true;
|
||||
return this.webBaseUrl + '/images/bgimg/article.png'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageText:'',//图片上面的文字
|
||||
fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
isShow :false,
|
||||
imageTextSize:false,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let obj = document.getElementById("img-box");
|
||||
if(obj.offsetWidth < 160) {
|
||||
this.imageTextSize = true;
|
||||
} else {
|
||||
this.imageTextSize = false;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
imageError(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.img-box{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
p{
|
||||
display: -webkit-box;
|
||||
// white-space:pre-wrap;
|
||||
overflow:hidden;
|
||||
// text-overflow:ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break:break-all;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.mini{
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.max{
|
||||
top: 100px;
|
||||
left: 34px;
|
||||
font-size: 20px;
|
||||
line-height: 35px;
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/components/Article/collectList.vue
Normal file
143
src/components/Article/collectList.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div style="cursor: pointer;">
|
||||
<div class="article-list" v-for="(item, idx) in items" :key="idx">
|
||||
<div class="article-info-date"></div>
|
||||
<div @click="jump(item)">
|
||||
<div class="article-info">
|
||||
<div class="article-info-title one-line-ellipsis">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="article-info-summary two-line-ellipsis">{{ item.summary }}</div>
|
||||
<div class="article-info-tools">
|
||||
<authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo" :sex="item.sex"> </authorInfo>
|
||||
<span>发布时间：{{ item.sysCreateTime | timeFilter }}</span>
|
||||
<span>收藏时间：{{ item.time | timeFilter }}</span>
|
||||
<el-button @click.stop="delItem(item)" type="text" style="color: #8590A6" icon="el-icon-remove">取消收藏</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import interactBar from '@/components/Portal/interactBar.vue';
|
||||
import authorInfo from '@/components/Portal/authorInfo.vue';
|
||||
export default {
|
||||
name: 'articleItems',
|
||||
props: {
|
||||
items: {
|
||||
//name,
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
interactBar,
|
||||
authorInfo
|
||||
},
|
||||
filters: {
|
||||
timeFilter(item) {
|
||||
return item.split(' ')[0];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jump(item) {
|
||||
// let routeData = this.$router.resolve({ path: '/article/detail?id=' + item.articleId }); // , query: { id: 1 }
|
||||
// window.open(routeData.href, '_blank');
|
||||
this.$router.push({path:'/article/detail',query:{id:item.articleId}})
|
||||
},
|
||||
delItem(item) {
|
||||
this.$confirm('您确定要取消收藏所选文章吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$emit('confirm', item);
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
jump(item){
|
||||
this.$router.push({path:'/article/detail',query:{id:item.articleId}})
|
||||
// window.open('/article/detail?id=' + item.articleId)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-status1 {
|
||||
padding: 3px;
|
||||
border: 1px dotted #1ea0fa;
|
||||
color: #1ea0fa;
|
||||
}
|
||||
.article-status2 {
|
||||
padding: 3px;
|
||||
border: 1px dotted #00aa00;
|
||||
color: #00aa00;
|
||||
}
|
||||
.article-status3 {
|
||||
padding: 3px;
|
||||
border: 1px dotted #ff0000;
|
||||
color: #ff0000;
|
||||
}
|
||||
.article-list {
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 10px;
|
||||
// border: 1px solid #dddddd;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.article-info-date {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 93%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: right;
|
||||
font-weight: 200;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.article-info {
|
||||
.article-info-title {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
}
|
||||
.article-info-summary {
|
||||
// height: 65px;
|
||||
color: #999999;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 10px;
|
||||
|
||||
line-height: 25px;
|
||||
}
|
||||
.article-info-tools {
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
> span {
|
||||
font-size: 14px;
|
||||
margin-top: 2px;
|
||||
margin-left: 10px;
|
||||
color: #747474;
|
||||
}
|
||||
> span:last-of-type {
|
||||
// margin-top: -4px;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
133
src/components/Article/draftList.vue
Normal file
133
src/components/Article/draftList.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div style="">
|
||||
<div class="article-list" v-for="(item,idx) in items" :key="idx">
|
||||
<div class="article-info">
|
||||
<div class="article-info-title">
|
||||
<span style=""><a :href="`${webBaseUrl}/article/detail?id=`" target="_blank"> {{item.title}}</a></span>
|
||||
<div class="article-info-date">
|
||||
<el-button @click="editItem(item)" type="text" icon="el-icon-edit">编辑</el-button>
|
||||
<el-button @click="delItem(item,idx)" type="text" icon="el-icon-remove">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-info-summary">
|
||||
作为一个管理者，首先应该具有的应该是判断力，包括对未来的眼界以及对细节的洞察能力
|
||||
</div>
|
||||
<div class="article-info-tools">
|
||||
<div class="article-info-tools-auth">
|
||||
<span style="font-size: 13px; color: #7b7b7b;"><i class="el-icon-time"></i> 2022-02-12</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'articleItems',
|
||||
props: {
|
||||
items: { //name,
|
||||
type: Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
shareShow:false,
|
||||
shareInfo:{
|
||||
aid:'',
|
||||
name:'',
|
||||
article:null
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
editItem(item){
|
||||
this.$message({message:'编辑'+item.title+'内容',offset:50})
|
||||
},
|
||||
delItem(item,idx){
|
||||
this.$confirm('您确定要删除所选文章吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.items.splice(idx,1);
|
||||
this.$message({type: 'success',message: '删除成功!',offset:50});
|
||||
}).catch(() => {
|
||||
this.$message({type: 'info',message: '已取消删除',offset:50});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-status1{
|
||||
padding: 3px;
|
||||
border: 1px dotted #1EA0FA;
|
||||
color:#1EA0FA;
|
||||
}
|
||||
.article-status2{
|
||||
padding: 3px;
|
||||
border: 1px dotted #00aa00;
|
||||
color:#00aa00;
|
||||
}
|
||||
.article-status3{
|
||||
padding: 3px;
|
||||
border: 1px dotted #ff0000;
|
||||
color:#ff0000;
|
||||
}
|
||||
.article-list {
|
||||
margin: 5px 0;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.article-info {
|
||||
.article-info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
.article-info-date {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: right;
|
||||
font-weight: 200;
|
||||
color: #999999;
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-info-summary {
|
||||
height: 65px;
|
||||
color: #999999;
|
||||
}
|
||||
.article-info-tools {
|
||||
height: 30px;
|
||||
.article-info-tools-auth {
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
img {
|
||||
margin-right: 10px;
|
||||
width: 30px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.article-info-tools-btns {
|
||||
float: right;
|
||||
.article-info-tools-btn {
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
272
src/components/Article/editItems.vue
Normal file
272
src/components/Article/editItems.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row class="article-add">
|
||||
<el-form ref="form" :rules="rules" :model="addForm" label-position="right" label-width="80px">
|
||||
<el-form-item prop="title" label="标题:">
|
||||
<el-input class="title-input" v-model.trim="addForm.title" placeholder="请输入文章标题,长度在 1 到 100 个字符" show-word-limit maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="imgInstructions">
|
||||
|
||||
<div class="el-form-item__content">
|
||||
<imageUpload :value="converImage" width="133px" height="100px" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></imageUpload>
|
||||
<dl>
|
||||
<dt>上传封面说明</dt>
|
||||
<dd>上传为4:3(如:400*300)的png或jpg图片</dd>
|
||||
<dd>允许上传图片大小为：5MB</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="keyword" label="关键字:"><el-input show-word-limit maxlength="50" placeholder="请输入关键字,长度在 0 到 50 个字符" v-model.trim="addForm.keyword"></el-input></el-form-item>
|
||||
<el-form-item prop="summary" label="摘要:">
|
||||
<el-input show-word-limit maxlength="200" placeholder="请输入摘要,仅限200字以内(未填写摘要信息时，自动从内容中提取!)" v-model.trim="addForm.summary" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="content" label="内容:">
|
||||
<WxEditor v-model.trim="addForm.content" placeholder="请输入内容,长度至少在100个字符" :minHeight="250">
|
||||
</WxEditor></el-form-item>
|
||||
<el-form-item class="footer-btn">
|
||||
<el-button type="primary" :loading="craftLoading" @click="submit(1)" style="margin-right: 40px;">保存草稿</el-button>
|
||||
<el-button :loading="loading" @click="submit(2)" :disabled="!checked" type="primary">提交</el-button>
|
||||
<el-checkbox style="margin-left:20px" v-model="checked"></el-checkbox><span style="font-size:14px;color:#787878;margin-left: 10px;">我已阅读并遵守<span style="color:#588afc;margin-right:10px;cursor: pointer;" @click="addFormCheckedShow = true">平台内容发布要求</span> </span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
class="checked-show"
|
||||
:visible.sync="addFormCheckedShow"
|
||||
width="800px"
|
||||
:show-close="false"
|
||||
:modal="false">
|
||||
<agreement></agreement>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="addFormCheckedShow = false">取 消</el-button> -->
|
||||
<el-button type="primary" @click="addFormCheckedShow = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import agreement from '@/components/Portal/agreement.vue'
|
||||
import { mapGetters } from 'vuex';
|
||||
import WxEditor from '@/components/Editor/index.vue';
|
||||
import imageUpload from '@/components/ImageUpload/index.vue';
|
||||
import apiArticle from '@/api/modules/article.js';
|
||||
export default {
|
||||
name: 'atticleAdd',
|
||||
components: { WxEditor, imageUpload,agreement },
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
props:{
|
||||
editForm:{
|
||||
type:Object,
|
||||
required:true,
|
||||
},
|
||||
jumpLimit:{
|
||||
type:Boolean,
|
||||
default:()=>{
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addFormCheckedShow:false,
|
||||
fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
checked:false,
|
||||
addForm: {
|
||||
},
|
||||
loading:false,
|
||||
converImage: '',
|
||||
rules: {
|
||||
title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }, { min: 1, max: 100, message: '请输入长度为 1 到 100 的字符', trigger: 'blur' }],
|
||||
content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }],
|
||||
// checked: [{message: '请选择协议', trigger: 'blur' }]
|
||||
},
|
||||
showForm:false,
|
||||
craftLoading:false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if(this.editForm.id){
|
||||
let id=this.editForm.id;
|
||||
apiArticle.detail(id,false).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.addForm = res.result;
|
||||
if(this.addForm.coverurl){
|
||||
this.converImage = this.fileBaseUrl + this.addForm.coverurl;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// handleAvatarSuccess(res, file) {
|
||||
// this.addForm.imageUrl = URL.createObjectURL(file.raw);
|
||||
// },
|
||||
handleUploadSuccess(file) {
|
||||
this.addForm.coverurl = file.result.filePath;
|
||||
this.converImage = this.fileBaseUrl + file.result.filePath;
|
||||
},
|
||||
handleRemoveSuccess(file) {
|
||||
this.addForm.coverurl = '';
|
||||
this.converImage = '';
|
||||
},
|
||||
draft() {
|
||||
if(this.craftLoading){
|
||||
return
|
||||
}
|
||||
this.craftLoading=true
|
||||
this.addForm.status = 1;
|
||||
apiArticle
|
||||
.save(this.addForm)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.addForm = res.result;
|
||||
this.$message.success('保存成功');
|
||||
} else {
|
||||
this.$message.error('保存失败');
|
||||
}
|
||||
this.craftLoading=false
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error('保存失败');
|
||||
this.craftLoading=false
|
||||
});
|
||||
|
||||
},
|
||||
save(){
|
||||
if(this.loading){
|
||||
return;
|
||||
}
|
||||
this.loading=true;
|
||||
this.addForm.status = 2;
|
||||
apiArticle.save(this.addForm).then(res => {
|
||||
if (res.status == 200) {
|
||||
if(res.message=='服务处理成功'){
|
||||
this.$message(
|
||||
{
|
||||
type:'success',
|
||||
message:"发布文章成功"
|
||||
});
|
||||
}
|
||||
if(res.message.indexOf('审核')!=-1){
|
||||
this.$message(
|
||||
{
|
||||
type:'warning',
|
||||
message:"发布文章失败，因包含敏感词,请等待人工审核"
|
||||
});
|
||||
}
|
||||
this.$emit("success",{result:res.result,status: this.addForm.status});
|
||||
if(!this.jumpLimit){
|
||||
return
|
||||
}
|
||||
setTimeout(()=>{
|
||||
let routeData = this.$router.resolve({ path: '/article/detail?id='+res.result.id}); // , query: { id: 1 }
|
||||
window.open(this.webBaseUrl+routeData.href, '_blank');
|
||||
// location.href = this.webBaseUrl + 'detail?id=' + res.result.id;
|
||||
},1000)
|
||||
// location.href = this.webBaseUrl + 'detail?id=' + res.result.id;
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
this.loading=false;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error('发布失败');
|
||||
this.loading=false;
|
||||
});
|
||||
|
||||
},
|
||||
submit(type) {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
if (type == 2) {
|
||||
if(this.addForm.content.length<100){
|
||||
return this.$message.warning("文章内容请输入不小于100的字符")
|
||||
}
|
||||
this.save();
|
||||
} else {
|
||||
this.draft();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .checked-show{
|
||||
.el-dialog__header{
|
||||
padding:0;
|
||||
}
|
||||
.el-dialog__footer{
|
||||
border-top: 1px solid #F5F5F6;
|
||||
background-color: #F5F5F6;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.article-add {
|
||||
background: #fff;
|
||||
padding: 20px 0;
|
||||
padding-right: 20px;
|
||||
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload--picture-card {
|
||||
width: 200px;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
display: block;
|
||||
}
|
||||
.icon-text {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.avatar {
|
||||
width: 250px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
.imgInstructions {
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
dl {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
margin-left: 20px;
|
||||
line-height: 1.5;
|
||||
dt {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
192
src/components/Article/shareItems.vue
Normal file
192
src/components/Article/shareItems.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div style="">
|
||||
<div class="article-list" v-for="(item, idx) in items" :key="idx">
|
||||
<div class="article-info" @click="jumpRouter(item)">
|
||||
<div class="article-info-title">
|
||||
<span v-if="item.isRead" class="readed">【已查看】</span>
|
||||
<span class="noRead" v-else>【未查看】</span>
|
||||
<span class="title one-line-ellipsis" v-html="$keywordActiveShow(item.title,keyword)"></span>
|
||||
|
||||
</div>
|
||||
<div v-html="$keywordActiveShow(item.summary,keyword)" class="article-info-summary two-line-ellipsis">
|
||||
</div>
|
||||
<!-- v-html="$keywordActiveShow(item.summary,keyword)" -->
|
||||
<div style="display:flex;justify-content: space-between;">
|
||||
<div class="article-info-tools">
|
||||
<!-- <authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></authorInfo> -->
|
||||
<span style="color: #999999;">{{ item.time }}</span>
|
||||
<span v-if="type=='myShare'" style="color: #999999;font-size: 14px;">分享给{{item.toAname}}</span>
|
||||
<span v-else>{{item.sysCreateBy}}分享给我</span>
|
||||
<!-- <interactBar ref="shareDialog" :type="0" :data="item" :shares="false" :views="false"></interactBar> -->
|
||||
</div>
|
||||
<div>
|
||||
<el-button style="color: #8590A6;" v-if="!item.isRead&&type=='myShare'" type="text" icon="el-icon-refresh-right" @click.stop="deleteshares(item)">撤回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import interactBar from '@/components/Portal/interactBar.vue';
|
||||
// import authorInfo from '@/components/Portal/authorInfo.vue';
|
||||
import apiShares from '@/api/modules/shares.js';
|
||||
export default {
|
||||
name: 'articleItems',
|
||||
props: {
|
||||
items: {
|
||||
//name,
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
type:{
|
||||
type:String,
|
||||
default:()=>{
|
||||
return 'myShare'
|
||||
}
|
||||
},
|
||||
keyword:{
|
||||
type:String,
|
||||
default:()=>{
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
updated(){
|
||||
},
|
||||
components: {
|
||||
// interactBar,
|
||||
// authorInfo
|
||||
},
|
||||
methods: {
|
||||
jumpRouter(item){
|
||||
if(this.type!='myShare'){
|
||||
apiShares.updateIsRead(item.id).then(res=>{
|
||||
if(res.status==200){
|
||||
this.$emit('confirm',item)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$router.push({path:'/article/detail',query:{id:item.objId}})
|
||||
// window.open(`${this.webBaseUrl}/article/detail?id=${item.objId}`)
|
||||
},
|
||||
deleteshares(item){
|
||||
this.$emit('confirm',item)
|
||||
},
|
||||
// shareItem(idx) {
|
||||
// this.$refs.shareDialog[idx].addShare()
|
||||
// },
|
||||
// delItem(item) {
|
||||
// this.$confirm('您确定要删除所选文章吗？', '删除提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// .then(() => {
|
||||
// this.$emit("confirm",item)
|
||||
// })
|
||||
// .catch(() => {
|
||||
// });
|
||||
// },
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-status1 {
|
||||
padding: 3px;
|
||||
border: 1px dotted #1ea0fa;
|
||||
color: #1ea0fa;
|
||||
}
|
||||
.article-status2 {
|
||||
padding: 3px;
|
||||
border: 1px dotted #00aa00;
|
||||
color: #00aa00;
|
||||
}
|
||||
.article-status3 {
|
||||
padding: 3px;
|
||||
border: 1px dotted #ff0000;
|
||||
color: #ff0000;
|
||||
}
|
||||
.article-list {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
// padding: 10px;
|
||||
padding-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.article-info {
|
||||
cursor: pointer;
|
||||
.article-info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
align-items: center;
|
||||
.readed{
|
||||
font-size: 18px;
|
||||
color: #3e7fff;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.noRead{
|
||||
font-size: 18px;
|
||||
color:#FF3E3E;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.title{
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
flex-shrink: 10000;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.el-button{
|
||||
margin-left: auto;
|
||||
}
|
||||
// .article-info-date {
|
||||
// height: 40px;
|
||||
// line-height: 40px;
|
||||
// float: right;
|
||||
// font-weight: 200;
|
||||
// color: #999999;
|
||||
// i {
|
||||
// margin-right: 5px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.article-info-summary {
|
||||
height: 46px;
|
||||
font-weight: 200;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin:7px 0;
|
||||
}
|
||||
.article-info-tools {
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
>span{
|
||||
font-size: 14px;
|
||||
color: #747474;
|
||||
|
||||
// margin-top: -2px;
|
||||
}
|
||||
// >span:first-of-type{
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
// >span:last-of-type{
|
||||
// margin-top: -4px;
|
||||
// margin-right:auto;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
324
src/components/Article/ucItems.vue
Normal file
324
src/components/Article/ucItems.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div>
|
||||
<Remark :fixed="false">
|
||||
<ul>
|
||||
<li>class名为problem的dom(即时间)无法直接垂直居中</li>
|
||||
<li>状态有草稿、待审核、未通过、已通过、已发布</li>
|
||||
<li>状态为已发布时才显示点赞收藏图标</li>
|
||||
<li>点击编辑时没有跳转到新页面</li>
|
||||
</ul>
|
||||
</Remark>
|
||||
<div class="article-list" v-for="(item, idx) in items" :key="idx" @click="jumpDetail(item)">
|
||||
<div class="article-info">
|
||||
<div class="article-info-title one-line-ellipsis"
|
||||
>
|
||||
<span v-if="item.enabled" :class="classFilter(item.status).className">{{classFilter(item.status).text}}</span>
|
||||
<span v-else class="article-status8">【已下架】</span>
|
||||
<span class="titleContent " >
|
||||
{{ item.title }}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="article-info-summary two-line-ellipsis">{{item.summary}}</div>
|
||||
<div class="article-info-tools">
|
||||
<div class="article-info-tools-auth">
|
||||
<!-- <el-avatar size="small" :src="item.avatar ? fileBaseUrl + item.avatar : '/temp/index/male.jpg'"></el-avatar>
|
||||
<span>{{item.name}}{{(item.orgInfo)}}</span> -->
|
||||
<!-- <el-tag v-if="status === 0" type="success">已发布</el-tag>
|
||||
<el-tag type="warning" v-else>未发布</el-tag> -->
|
||||
<span class="problem">
|
||||
|
||||
<span> 时间：{{item.sysCreateTime|sysCreateTimeFilter}}</span>
|
||||
</span>
|
||||
<span v-if="!item.enabled">
|
||||
已下架
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="article-info-tools-btns" v-if="item.status == 9">
|
||||
<!-- <interactBar :data="item" :type="2" :shares="false" :views="false"></interactBar> -->
|
||||
<!-- <el-link icon="el-icon-chat-line-round" class="article-info-tools-btn" >评论57</el-link>
|
||||
<el-link icon="el-icon-s-promotion" class="article-info-tools-btn" >分享57</el-link>
|
||||
<el-link icon="el-icon-star-on" class="article-info-tools-btn">收藏12</el-link>
|
||||
<el-link icon="el-icon-thumb" class="article-info-tools-btn" >点赞20</el-link > -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="article-info-date" v-if="item.enabled == true">
|
||||
<el-button class="edit" @click.stop="editItem(item.id)" type="text" icon="el-icon-edit">编辑</el-button>
|
||||
<el-button class="del" @click.stop="delItem(item)" type="text" icon="el-icon-delete">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="编辑文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
|
||||
<editItems v-if="diagSync" :jumpLimit="false" :editForm="editForm" @success="saveSuccess"></editItems>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import interactBar from '@/components/Portal/interactBar.vue';
|
||||
import apiArticle from '@/api/modules/article.js';
|
||||
import editItems from '@/components/Article/editItems.vue';
|
||||
export default {
|
||||
components: {
|
||||
interactBar,editItems
|
||||
},
|
||||
name: 'articleItems',
|
||||
props: {
|
||||
items: {
|
||||
//name,
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
shareShow: false,
|
||||
diagSync:false,
|
||||
editForm:{
|
||||
id:''
|
||||
}
|
||||
};
|
||||
},
|
||||
filters:{
|
||||
sysCreateTimeFilter(item){
|
||||
return item.split(' ')[0]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
classFilter(status){
|
||||
switch(status){
|
||||
case 1:{
|
||||
return {text:'【草稿】',className:'article-status1'}
|
||||
};
|
||||
// #999999
|
||||
case 2:{
|
||||
return {text:'【待审核】',className:'article-status2'}
|
||||
// #FFB30F
|
||||
};
|
||||
case 3:{
|
||||
return {text:'【未通过】',className:'article-status3'}
|
||||
// #E62E38
|
||||
};
|
||||
case 9:{
|
||||
return {text:'【已发布】',className:'article-status9'}
|
||||
|
||||
// #2AB28B
|
||||
};
|
||||
case 8:{
|
||||
return {text:'【已下架】',className:'article-status8'}
|
||||
|
||||
// #2AB28B
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
jumpDetail(row){
|
||||
if(row.status == 9){
|
||||
this.$router.push({path:'/article/detail',query:{id:row.id}})
|
||||
// window.open(this.webBaseUrl + '/article/detail?id='+row.id)
|
||||
} else {
|
||||
this.editForm=row
|
||||
this.diagSync=true
|
||||
// window.open(this.webBaseUrl + '/article/add?id='+row.id)
|
||||
}
|
||||
},
|
||||
editItem(id) {
|
||||
// window.open('/article/add?id='+id)
|
||||
// this.$router.push({
|
||||
// path:'/article/add',
|
||||
// query:{
|
||||
// id
|
||||
// }
|
||||
// })
|
||||
this.editForm.id = id;
|
||||
this.diagSync = true;
|
||||
},
|
||||
saveSuccess(){
|
||||
this.$emit('update',true);
|
||||
this.diagSync = false;
|
||||
},
|
||||
delItem(item) {
|
||||
|
||||
this.$confirm('您确定要删除所选文章吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
.then(() => {
|
||||
apiArticle
|
||||
.del(item.id)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.$emit('update',true)
|
||||
this.$message.success('删除成功');
|
||||
console.log('shanchushanchu')
|
||||
|
||||
}else{
|
||||
this.$message.error('删除失败');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error('删除失败');
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.two-line-ellipsis {
|
||||
display: -webkit-box;
|
||||
white-space:pre-wrap;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.one-line-ellipsis {
|
||||
display: -webkit-box;
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.article-info-date {
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
right:0px;
|
||||
.del{
|
||||
color: #8590A6;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit{
|
||||
color: #8590A6;
|
||||
}
|
||||
button{
|
||||
color: #8590A6;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.one-line-ellipsis {
|
||||
width: 100%;
|
||||
// word-break: break-all;
|
||||
// white-space:pre-wrap;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1; /* 这里是超出几行省略 */
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.two-line-ellipsis{
|
||||
display: -webkit-box;
|
||||
// white-space:pre-wrap;
|
||||
overflow: hidden;
|
||||
// text-overflow:ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.article-status1 {
|
||||
padding: 3px;
|
||||
// border: 1px dotted #ddd;
|
||||
color: #666;
|
||||
}
|
||||
.article-status8{
|
||||
padding: 3px;
|
||||
color: #ccc;
|
||||
|
||||
}
|
||||
.article-status2 {
|
||||
padding: 3px;
|
||||
// border: 1px dotted #FFB30F;
|
||||
color: #FFB30F;
|
||||
}
|
||||
.article-status3 {
|
||||
padding: 3px;
|
||||
// border: 1px dotted #E62E38;
|
||||
color: #E62E38;
|
||||
}
|
||||
.article-status5 {
|
||||
padding: 3px;
|
||||
// border: 1px dotted #2AB28B;
|
||||
color: #2AB28B;
|
||||
}
|
||||
.article-status9 {
|
||||
padding: 3px;
|
||||
// border: 1px dotted #588AFC;
|
||||
color: #588AFC;
|
||||
}
|
||||
.article-list {
|
||||
position: relative;
|
||||
margin: 0px 0;
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.article-info {
|
||||
|
||||
|
||||
.article-info-title {
|
||||
margin-left: -12px;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
// font-weight: 400;
|
||||
|
||||
// height: 40px;
|
||||
margin-top: 7px;
|
||||
// line-height: 40px;
|
||||
.titleContent{
|
||||
// padding-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
.article-info-summary {
|
||||
// height: 65px;
|
||||
margin-bottom: 20px;
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
|
||||
|
||||
}
|
||||
.article-info-tools {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.article-info-tools-auth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
span{
|
||||
font-size: 13px;
|
||||
color: #7b7b7b;
|
||||
margin-left:5px;
|
||||
}
|
||||
.problem{
|
||||
margin-left: -5px;
|
||||
span{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user