feat: news
This commit is contained in:
zzc
40
src/api/miniNews.js
Normal file
40
src/api/miniNews.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function getList(data) {
|
||||||
|
return request({
|
||||||
|
url: '/management/api/news/list',
|
||||||
|
method: 'get',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function doAdd(data) {
|
||||||
|
return request({
|
||||||
|
url: '/management/api/news',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function doDelete(data) {
|
||||||
|
return request({
|
||||||
|
url: '/management/api/news/delete',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getArticle(id) {
|
||||||
|
return request({
|
||||||
|
url: `/management/api/news/${id}`,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function doEdit(id, data) {
|
||||||
|
return request({
|
||||||
|
url: `/management/api/news/${id}`,
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -73,6 +73,18 @@ export const asyncRoutes = [
|
|||||||
component: () => import('@/views/cxshMini/home/banner/index'),
|
component: () => import('@/views/cxshMini/home/banner/index'),
|
||||||
meta: { title: '轮播图' },
|
meta: { title: '轮播图' },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'news',
|
||||||
|
name: 'News',
|
||||||
|
component: () => import('@/views/cxshMini/home/news/index'),
|
||||||
|
meta: { title: '花絮动态' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'createNews',
|
||||||
|
name: 'CreateNews',
|
||||||
|
component: () => import('@/views/cxshMini/home/createNews/index'),
|
||||||
|
meta: { title: '新建花絮' },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
97
src/views/cxshMini/home/createNews/index.vue
Normal file
97
src/views/cxshMini/home/createNews/index.vue
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cxshMini-createnews-container">
|
||||||
|
<el-button style="margin-bottom: 10px" type="primary" @click="handlePublish">发布</el-button>
|
||||||
|
<el-form ref="form" label-width="80px" :model="form" :rules="rules">
|
||||||
|
<el-form-item label="标题" prop="title">
|
||||||
|
<el-input v-model.trim="form.title" autocomplete="off" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述" prop="desc">
|
||||||
|
<el-input v-model.trim="form.desc" autocomplete="off" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="封面" prop="coverUrl">
|
||||||
|
<single-upload
|
||||||
|
style="width: 100px; height: 100px"
|
||||||
|
:upload-url="uploadUrl"
|
||||||
|
:value="form.coverUrl"
|
||||||
|
@upload-success="handleUploadSuccess"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<quill-editor v-model="form.content" :options="editorOptions" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { quillEditor } from 'vue-quill-editor'
|
||||||
|
import 'quill/dist/quill.snow.css'
|
||||||
|
import SingleUpload from '@/components/SingleUpload'
|
||||||
|
import { getArticle, doAdd, doEdit } from '@/api/miniNews'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CxshMiniCreateNews',
|
||||||
|
components: { quillEditor, SingleUpload },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
title: '',
|
||||||
|
desc: '',
|
||||||
|
coverUrl: '',
|
||||||
|
content: '',
|
||||||
|
},
|
||||||
|
categoryList: [],
|
||||||
|
rules: {
|
||||||
|
title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
|
||||||
|
coverUrl: [{ required: true, trigger: 'blur', message: '请上传封面' }],
|
||||||
|
content: [{ required: true, trigger: 'blur', message: '请输入内容' }],
|
||||||
|
},
|
||||||
|
articleId: '',
|
||||||
|
editorOptions: {
|
||||||
|
theme: 'snow',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
uploadUrl() {
|
||||||
|
return `${process.env.VUE_APP_API_BASE_URL}/management/api/common/upload`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.articleId = this.$route.query.id
|
||||||
|
if (this.articleId) {
|
||||||
|
this.fetchArticle()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePublish() {
|
||||||
|
if (this.articleId) {
|
||||||
|
this.$refs['form'].validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
await doEdit(this.articleId, this.form)
|
||||||
|
this.$baseMessage('编辑成功', 'success')
|
||||||
|
this.$router.push(`/cxshMini/home/news`)
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$refs['form'].validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
await doAdd(this.form)
|
||||||
|
this.$baseMessage('发布成功', 'success')
|
||||||
|
this.$router.push(`/cxshMini/home/news`)
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleUploadSuccess(url) {
|
||||||
|
this.form.coverUrl = url
|
||||||
|
},
|
||||||
|
async fetchArticle() {
|
||||||
|
const { data } = await getArticle(this.articleId)
|
||||||
|
this.form = data
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
123
src/views/cxshMini/home/news/index.vue
Normal file
123
src/views/cxshMini/home/news/index.vue
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cxshMini-news-container">
|
||||||
|
<vab-query-form>
|
||||||
|
<vab-query-form-left-panel :span="12">
|
||||||
|
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加花絮动态</el-button>
|
||||||
|
</vab-query-form-left-panel>
|
||||||
|
<vab-query-form-right-panel :span="12">
|
||||||
|
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</vab-query-form-right-panel>
|
||||||
|
</vab-query-form>
|
||||||
|
|
||||||
|
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
|
||||||
|
<el-table-column show-overflow-tooltip type="selection" />
|
||||||
|
<el-table-column align="center" label="封面" prop="coverUrl" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-image :src="row.coverUrl" style="width: 100px; height: 100px" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="标题" prop="title" show-overflow-tooltip />
|
||||||
|
<el-table-column align="center" label="作者" prop="authorName" show-overflow-tooltip />
|
||||||
|
<el-table-column align="center" label="修改时间" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.updatedAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="操作" show-overflow-tooltip width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
:current-page="queryForm.pageNo"
|
||||||
|
:layout="layout"
|
||||||
|
:page-size="queryForm.pageSize"
|
||||||
|
:total="total"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { doDelete, getList } from '@/api/miniNews'
|
||||||
|
import { formatTime } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CxshMiniNewsList',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: null,
|
||||||
|
listLoading: true,
|
||||||
|
layout: 'total, sizes, prev, pager, next, jumper',
|
||||||
|
total: 0,
|
||||||
|
selectRows: '',
|
||||||
|
elementLoadingText: '正在加载...',
|
||||||
|
queryForm: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
permission: '',
|
||||||
|
},
|
||||||
|
timeOutID: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
clearTimeout(this.timeOutID)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatTime,
|
||||||
|
setSelectRows(val) {
|
||||||
|
this.selectRows = val
|
||||||
|
},
|
||||||
|
handleEdit(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$router.push(`/cxshMini/home/createNews?id=${row.id}`)
|
||||||
|
} else {
|
||||||
|
this.$router.push(`/cxshMini/home/createNews`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: [row.id] })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.queryForm.pageSize = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.queryForm.pageNo = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
queryData() {
|
||||||
|
this.queryForm.pageNo = 1
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
async fetchData() {
|
||||||
|
this.listLoading = true
|
||||||
|
const { data } = await getList(this.queryForm)
|
||||||
|
this.list = data.list
|
||||||
|
this.total = data.totalCount
|
||||||
|
this.timeOutID = setTimeout(() => {
|
||||||
|
this.listLoading = false
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user