12 changed files with 456 additions and 176 deletions
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<div> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="lists" |
|||
tooltip-effect="dark" |
|||
style="width: 100%" |
|||
@selection-change="handleSelectionChange"> |
|||
<el-table-column |
|||
type="selection" |
|||
width="55"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="title" |
|||
label="标题"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="right"> |
|||
<template slot="header" slot-scope="scope"> |
|||
<el-input |
|||
v-model="title" |
|||
size="mini" |
|||
placeholder="输入标题搜索" |
|||
@change="handleSearch"/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-4 flex flex-row-reverse"> |
|||
<el-pagination |
|||
background |
|||
:page-size="pageSize" |
|||
layout="prev, pager, next" |
|||
:total="count" |
|||
@current-change="currentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {tabList} from '../../filters/code'; |
|||
import { POST_QUERY_DETAIL } from '@/api/contentIntro'; |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
tabList, |
|||
lists: [], |
|||
title: '', |
|||
pageNum: 1, |
|||
pageSize: 6, |
|||
count: 0, |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getList() |
|||
}, |
|||
|
|||
methods: { |
|||
// 设置显示位置 |
|||
setCode(showPage){ |
|||
let item = null |
|||
for (let i = 0; i < this.tabList.length; i++) { |
|||
const list = this.tabList[i]; |
|||
for (let j = 0; j < list.children.length; j++) { |
|||
const curItem = list.children[j]; |
|||
if(curItem.code == showPage){ |
|||
item = curItem |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
return item && item.title ? item.title : '' |
|||
}, |
|||
|
|||
/** |
|||
* 分页 |
|||
*/ |
|||
currentChange(res) { |
|||
this.pageNum = res; |
|||
this.getList() |
|||
}, |
|||
|
|||
/** |
|||
* 获取详情列表 |
|||
*/ |
|||
getList() { |
|||
const showPage = localStorage.getItem('code') |
|||
const { pageNum, pageSize, title } = this; |
|||
const params = { |
|||
pageNum, |
|||
pageSize, |
|||
showPage, |
|||
title |
|||
}; |
|||
POST_QUERY_DETAIL(params).then(res => { |
|||
if(res.code === 200){ |
|||
this.lists = res.data.list |
|||
this.pageNum = res.data.pageNum |
|||
this.pageSize = res.data.pageSize |
|||
this.count = res.data.size |
|||
}else{ |
|||
Alert.fail(res.msg || '获取失败'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
handleSelectionChange(val) { |
|||
let relationContentIds = [] |
|||
val.forEach(item => { |
|||
relationContentIds.push(item.introId) |
|||
}) |
|||
this.$emit('setRelationValue', relationContentIds) |
|||
}, |
|||
|
|||
// 搜索条件 |
|||
handleSearch(val){ |
|||
console.log('val: ', val); |
|||
this.getList() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="relations" |
|||
tooltip-effect="dark" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="introId" |
|||
label="简介ID"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="showPage" |
|||
label="页面显示位置"> |
|||
<template slot-scope="relations"> |
|||
{{ setCode(relations.row.showPage) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="title" |
|||
label="标题"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
align="center" |
|||
> |
|||
<template slot-scope="relations"> |
|||
<el-button type="danger" plain size="mini" @click="deleteItem">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
|
|||
<script> |
|||
import {tabList} from '../../filters/code'; |
|||
import { DELETE_RELATION } from '@/api/contentIntro'; |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
export default { |
|||
props: ['relations'], |
|||
|
|||
data() { |
|||
return { |
|||
tabList, |
|||
multipleSelection: [] |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// 设置显示位置 |
|||
setCode(showPage){ |
|||
let item = null |
|||
for (let i = 0; i < this.tabList.length; i++) { |
|||
const list = this.tabList[i]; |
|||
for (let j = 0; j < list.children.length; j++) { |
|||
const curItem = list.children[j]; |
|||
if(curItem.code == showPage){ |
|||
item = curItem |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
return item && item.title ? item.title : '' |
|||
}, |
|||
|
|||
/** |
|||
* 删除 |
|||
* @param {string} introId |
|||
* @param {string} relationContentIds |
|||
*/ |
|||
async deleteItem(item){ |
|||
try { |
|||
this.$alert('确定删除该条关联新闻吗？', '请确认', { |
|||
confirmButtonText: '确定', |
|||
callback: res => { |
|||
if(res === 'confirm') { |
|||
const { introId, relationContentId } = item |
|||
const relationContentIds = [] |
|||
relationContentIds.push(relationContentId) |
|||
const params = { |
|||
introId, |
|||
relationContentIds |
|||
} |
|||
DELETE_RELATION(params).then((data) => { |
|||
if(data.code === 200) { |
|||
Alert.success('删除成功'); |
|||
} else { |
|||
Alert.fail(data.msg); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,46 +1,103 @@ |
|||
<template> |
|||
<div class="w-full line-height-30"> |
|||
<!-- <el-descriptions title="垂直带边框列表" direction="vertical" :column="3" border> |
|||
<el-descriptions-item label="发表时间">{{ $moment(list.publishTime).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
|||
<el-descriptions-item label="创建时间">{{ $moment(list.createdAt).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
|||
<el-descriptions-item label="修改时间" :span="2">{{ $moment(list.updatedAt).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
|||
<el-descriptions-item label="标题显示类型"> |
|||
<el-tag size="small">{{ list.showType == 0 ? '文本' : list.showType == 1 ? '图片' : list.showType == 2 ? '视频' : '' }}</el-tag> |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="跳转路径">{{ list.jumpUrl }}</el-descriptions-item> |
|||
<el-descriptions-item label="正文"> |
|||
<div v-if="detailContent && detailContent.content" v-html="detailContent.content"></div> |
|||
<div v-else>暂无</div> |
|||
</el-descriptions-item> |
|||
</el-descriptions> --> |
|||
|
|||
<div>发表时间: {{ $moment(list.publishTime).format('YYYY-MM-DD HH:mm') }}</div> |
|||
<div>创建时间: {{ $moment(list.createdAt).format('YYYY-MM-DD HH:mm') }}</div> |
|||
<div>修改时间: {{ $moment(list.updatedAt).format('YYYY-MM-DD HH:mm') }}</div> |
|||
<div>标题显示类型: {{ list.showType == 0 ? '文本' : list.showType == 1 ? '图片' : list.showType == 2 ? '视频' : '' }}</div> |
|||
<div>跳转路径: {{ list.jumpUrl }}</div> |
|||
<div class="w-full line-height-36"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"><div><span class="font-bold">发表时间： </span>{{ list.publishTime ? $moment(list.publishTime).format('YYYY-MM-DD HH:mm') : '暂无' }}</div></el-col> |
|||
<el-col :span="6"><div><span class="font-bold">创建时间： </span>{{ list.createdAt ? $moment(list.createdAt).format('YYYY-MM-DD HH:mm') : '暂无' }}</div></el-col> |
|||
<el-col :span="6"><div><span class="font-bold">修改时间： </span>{{ list.updatedAt ? $moment(list.updatedAt).format('YYYY-MM-DD HH:mm') : '暂无' }}</div></el-col> |
|||
<el-col :span="6"><div><span class="font-bold">新闻类型： </span>{{ list.showType == 1 ? '图片新闻' : list.showType == 2 ? '视频新闻' : '普通新闻' }}</div></el-col> |
|||
</el-row> |
|||
<div><span class="font-bold">跳转路径： </span>{{ list.jumpUrl }}</div> |
|||
<div class="flex flex-column"> |
|||
<span class="font-bold">正文：</span> |
|||
<div v-if="detailContent && detailContent.content" v-html="detailContent.content"></div> |
|||
<div v-else>暂无</div> |
|||
<div>责编: {{ list.editor }}</div> |
|||
<div>来源: {{ list.source }}</div> |
|||
</div> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"><div><span class="font-bold">责编： </span>{{ list.editor || '暂无' }}</div></el-col> |
|||
<el-col :span="12"><div><span class="font-bold">来源： </span>{{ list.source || '暂无' }}</div></el-col> |
|||
</el-row> |
|||
<!-- 关联文章信息 --> |
|||
<!-- <div> |
|||
<div> |
|||
<span class="font-bold">相关新闻： </span> |
|||
<el-button type="primary" plain size="mini" class="mt-2 ml-4" @click="addRelationNews">添加相关新闻</el-button> |
|||
<div v-if="detailContent && detailContent.relations && detailContent.relations.length" class="flex flex-column px-10"> |
|||
<content-relation class="px-10" :relations="detailContent.relations" /> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> --> |
|||
<el-dialog |
|||
width="800px" |
|||
title="添加相关新闻" |
|||
:show-close="false" |
|||
:visible.sync="showModal"> |
|||
<add-content-relation ref="distribution" :introId="list.introId" v-if="showModal" @close="close" @setRelationValue="setRelationValue"></add-content-relation> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="showModal = false">取 消</el-button> |
|||
<el-button type="primary" @click="submit">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ContentRelation from './contentRelation.vue'; |
|||
import AddContentRelation from './addContentRelation.vue'; |
|||
import { ADD_RELATION } from '@/api/contentIntro'; |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
export default { |
|||
name: "detailsOfDistribution", |
|||
components: { |
|||
// Editor, |
|||
ContentRelation, |
|||
AddContentRelation |
|||
}, |
|||
props: ['list', 'detailContent'], |
|||
data() { |
|||
return { |
|||
|
|||
showModal: false, |
|||
relationContentIds: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
addRelationNews(){ |
|||
this.showModal =true; |
|||
}, |
|||
|
|||
// 关闭弹窗 |
|||
close(){ |
|||
this.showModal = false |
|||
// if(type){ |
|||
|
|||
// } |
|||
}, |
|||
|
|||
setRelationValue(relationContentIds){ |
|||
this.relationContentIds = relationContentIds |
|||
}, |
|||
|
|||
/** |
|||
* 关联新闻添加 |
|||
* @param {string} introId |
|||
* @param {string} relationContentIds |
|||
*/ |
|||
async submit(){ |
|||
try { |
|||
const params = { |
|||
introId: this.list.introId, |
|||
relationContentIds: this.relationContentIds |
|||
} |
|||
ADD_RELATION(params).then((data) => { |
|||
if(data.code === 200) { |
|||
Alert.success('添加成功'); |
|||
this.showModal = false; |
|||
this.$emit('getDetail', this.list) |
|||
} else { |
|||
Alert.fail(data.msg); |
|||
} |
|||
}); |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue