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> |
<template> |
||||
<div class="w-full line-height-30"> |
<div class="w-full line-height-36"> |
||||
<!-- <el-descriptions title="垂直带边框列表" direction="vertical" :column="3" border> |
<el-row :gutter="20"> |
||||
<el-descriptions-item label="发表时间">{{ $moment(list.publishTime).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
<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-descriptions-item label="创建时间">{{ $moment(list.createdAt).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
<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-descriptions-item label="修改时间" :span="2">{{ $moment(list.updatedAt).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
<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-descriptions-item label="标题显示类型"> |
<el-col :span="6"><div><span class="font-bold">新闻类型： </span>{{ list.showType == 1 ? '图片新闻' : list.showType == 2 ? '视频新闻' : '普通新闻' }}</div></el-col> |
||||
<el-tag size="small">{{ list.showType == 0 ? '文本' : list.showType == 1 ? '图片' : list.showType == 2 ? '视频' : '' }}</el-tag> |
</el-row> |
||||
</el-descriptions-item> |
<div><span class="font-bold">跳转路径： </span>{{ list.jumpUrl }}</div> |
||||
<el-descriptions-item label="跳转路径">{{ list.jumpUrl }}</el-descriptions-item> |
<div class="flex flex-column"> |
||||
<el-descriptions-item label="正文"> |
<span class="font-bold">正文：</span> |
||||
<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 v-if="detailContent && detailContent.content" v-html="detailContent.content"></div> |
<div v-if="detailContent && detailContent.content" v-html="detailContent.content"></div> |
||||
<div v-else>暂无</div> |
</div> |
||||
<div>责编: {{ list.editor }}</div> |
<el-row :gutter="20"> |
||||
<div>来源: {{ list.source }}</div> |
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import ContentRelation from './contentRelation.vue'; |
||||
|
import AddContentRelation from './addContentRelation.vue'; |
||||
|
import { ADD_RELATION } from '@/api/contentIntro'; |
||||
|
import Alert from "@/utils/alert"; |
||||
|
|
||||
export default { |
export default { |
||||
name: "detailsOfDistribution", |
name: "detailsOfDistribution", |
||||
components: { |
components: { |
||||
// Editor, |
ContentRelation, |
||||
|
AddContentRelation |
||||
}, |
}, |
||||
props: ['list', 'detailContent'], |
props: ['list', 'detailContent'], |
||||
data() { |
data() { |
||||
return { |
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> |
</script> |
||||
|
|||||
Loading…
Reference in new issue