Browse Source

新闻管理

master
chutingting 1 year ago
parent
commit
460331cf81
9 changed files with 1169 additions and 44 deletions
  1. +27
    -0
      src/api/common.js
  2. +11
    -40
      src/api/news.js
  3. +16
    -4
      src/components/uploadFile/index.vue
  4. +43
    -0
      src/router/index.js
  5. +265
    -0
      src/views/news/car.vue
  6. +265
    -0
      src/views/news/hot.vue
  7. +266
    -0
      src/views/news/yyz/depth.vue
  8. +5
    -0
      src/views/news/yyz/index.vue
  9. +271
    -0
      src/views/news/yyz/info.vue

+ 27
- 0
src/api/common.js View File

@@ -15,3 +15,30 @@ export function upload(data) {
}
})
}

export function videoUpload(data) {
var formData = new FormData()
formData.append('file', data.file)
console.log('upload:', data)
return request({
url: '/video/upload',
method: 'post',
data: formData,
timeout: 1000 * 60 * 2, // 超时时间两分钟
params: {
width: 200,
hight: 200
}
})
}

export function uploadProgress(videoId) {
return request({
url: '/video/uploadProgress',
method: 'get',
params: {
videoId
}
})
}


+ 11
- 40
src/api/news.js View File

@@ -6,64 +6,35 @@

import request from '@/utils/request'

/** 轮播 */
export function saveLunbo(data) {
export function save(data) {
return request({
url: '/aigc/saveLunbo',
url: '/news/save',
method: 'post',
data
})
}

export function delLunbo(id) {
export function first(id) {
return request({
url: '/index/delLunbo',
url: '/news/first',
method: 'post',
data: { id }
})
}

/** 广告位1 */
export function guanggao1() {
export function cancelfirst(id) {
return request({
url: '/aigc/guanggao1',
method: 'get'
})
}

export function saveGuangGao(data) {
return request({
url: '/index/saveGuangGao',
url: '/news/cancelfirst',
method: 'post',
data
})
}
/** 广告位2 */
export function guanggao2() {
return request({
url: '/aigc/guanggao2',
method: 'get'
data: { id }
})
}

/** 数字人形象(共用轮播) */
export function saveShuziren() {
export function del(id) {
return request({
url: '/aigc/saveShuziren',
method: 'get'
})
}
export function shuzirenremark() {
return request({
url: '/aigc/shuzirenremark',
method: 'get'
})
}
/** 数字人视频 */
export function videoSave(data) {
return request({
url: '/aigc/videoSave',
url: '/news/del',
method: 'post',
data
data: { id }
})
}


+ 16
- 4
src/components/uploadFile/index.vue View File

@@ -7,6 +7,7 @@
-->
<template>
<el-upload
v-loading="loading"
class="avatar-uploader"
action="#"
:show-file-list="false"
@@ -22,7 +23,7 @@
</el-upload>
</template>
<script>
import { upload } from '@/api/common.js'
import { upload, videoUpload, uploadProgress } from '@/api/common.js'
export default {
props: {
url: {
@@ -34,6 +35,11 @@ export default {
default: ''
}
},
data() {
return {
loading: false
}
},
methods: {
/* // 上传图片时限制图片的尺寸
beforeUpload(file) {
@@ -97,9 +103,15 @@ export default {
let _data = {
file: file.file
}
// OPERATE FORMWORK
upload(_data).then(res => {
if (res) {
let api = this.type === 'video' ? videoUpload(_data) : upload(_data)
api.then(res => {
this.loading = true
if (this.type === 'video' && res) {
uploadProgress(res.videoId).then(da => {
this.$emit('update:url', res.url)
this.loading = false
})
} else if (res) {
this.$emit('update:url', res.url)
}
})


+ 43
- 0
src/router/index.js View File

@@ -216,6 +216,49 @@ export const constantRoutes = [
}
]
},
{
path: '/news',
component: Layout,
alwaysShow: true,
redirect: '/news/hot',
name: 'news',
meta: {
title: '新闻管理',
icon: 'nested'
},
children: [
{
path: 'hot',
component: () => import('@/views/news/hot'),
meta: { title: '热点新闻' }
},
{
path: 'car',
component: () => import('@/views/news/car'),
meta: { title: '汽车资讯新闻' }
},
{
path: 'yyz',
component: () => import('@/views/news/yyz/index'),
name: 'yyz',
meta: { title: '元宇宙日爆' },
children: [
{
path: 'info',
component: () => import('@/views/news/yyz/info'),
name: 'info',
meta: { title: '资讯' }
},
{
path: 'depth',
component: () => import('@/views/news/yyz/depth'),
name: 'depth',
meta: { title: '深度' }
}
]
}
]
},
{
path: '/about',
component: Layout,


+ 265
- 0
src/views/news/car.vue View File

@@ -0,0 +1,265 @@
<!--
* @Date: 2021-07-08 11:02:40
* @LastEditTime: 2022-07-27 10:48:43
* @Description: 列表查询demo
-->
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-input v-model="query.title" prefix-icon="el-icon-search" clearable placeholder="标题" class="filter-item"
@keyup.enter.native="crud.toQuery" />

<el-date-picker v-model="query.sendDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="date-item" style="width:300px !important; margin: 0 3px 10px 0;"></el-date-picker>

<rrOperation />
</div>
<div>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
@click="openSave()">新增</el-button>
</div>
</div>

<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
<el-table-column :show-overflow-tooltip="true" prop="subTitle" label="副标题" />
<el-table-column :show-overflow-tooltip="true" prop="detail" label="详情" />
<el-table-column :show-overflow-tooltip="true" prop="image" label="图片">
<template slot-scope="scope">
<img :src="scope.row.image" width="50px" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="image" label="视频地址" />
<el-table-column :show-overflow-tooltip="true" prop="sendDate" label="发布时间" />
<el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="发布状态">
<template slot-scope="scope">
{{ scope.row.status === 1 ? '未发布' : '已发布' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="是否置顶">
<template slot-scope="scope">
{{ scope.row.first === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="操作" width="230" align="center" fixed="right">
<template slot-scope="scope" class="btn">
<el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>

<el-popover placement="top" width="200" :ref="`first-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 0 ">
<p>是否确认置顶该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`first-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="first(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">置顶</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 1 ">
<p>是否确认取消置顶该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="cancelfirst(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">取消置顶</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 1">
<p>是否确认发布该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="statusFn(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">发布</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
<p>是否确认删除该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />

<!-- 新增修改弹窗 -->
<el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="副标题" prop="subTitle">
<el-input v-model="ruleForm.subTitle"></el-input>
</el-form-item>
<el-form-item label="详情" prop="detail">
<el-input v-model="ruleForm.detail"></el-input>
</el-form-item>
<el-form-item label="图片" prop="image">
<uploadFile :url.sync="ruleForm.image" type="image" />
</el-form-item>
<el-form-item label="视频" prop="video">
<uploadFile :url.sync="ruleForm.video" type="video" />
</el-form-item>
<el-form-item label="发布时间" prop="sendDate">
<el-date-picker
v-model="ruleForm.sendDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择发布时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { save, del, first, cancelfirst } from '@/api/news'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import uploadFile from '@/components/uploadFile'
import rrOperation from '@crud/RR.operation'

export default {
components: { rrOperation, pagination, uploadFile },
mixins: [presenter(), header(), crud()],
data() {
return {
dialogVisible: false,
ruleForm: {
type: 2,
title: '',
subTitle: '',
detail: '',
image: '',
video: '',
sendDate: '',
status: ''
},
rules: {
name: [
{ required: true, message: '请上传图片', trigger: 'blur' }
],
serialNumber: [
{ required: true, message: '请输入序号', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入链接', trigger: 'blur' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
loadingBtn: false
}
},
cruds() {
return CRUD({ title: '列表', url: '/news/list', query: {}})
},
methods: {
/* 刷新前操作 */
[CRUD.HOOK.beforeRefresh]() {
this.query.sendDateBegin = this.query.sendDate ? this.query.sendDate[0] : ''
this.query.sendDateEnd = this.query.sendDate ? this.query.sendDate[1] : ''
this.query.type = '2'
},
openSave(item) {
if (item) {
this.ruleForm.id = item.id
this.ruleForm.image = item.image
this.ruleForm.title = item.title
this.ruleForm.subTitle = item.subTitle
this.ruleForm.detail = item.detail
this.ruleForm.video = item.video
this.ruleForm.detail = item.detail
this.ruleForm.sendDate = item.sendDate
}
this.dialogVisible = true
},
close(tag) {
if (tag) this.crud.toQuery()
this.dialogVisible = false
},
/* 删除 */
del(scope) {
del(scope.row.id).then(res => {
this.$message({
message: '删除成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`del-${scope.$index}`].doClose()
})
},
first(scope) {
first(scope.row.id).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`first-${scope.$index}`].doClose()
})
},
cancelfirst(scope) {
cancelfirst(scope.row.id).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`cancelfirst-${scope.$index}`].doClose()
})
},
statusFn(scope) {
let data = {
id: scope.row.id,
status: 2
}
save(data).then(res => {
this.$message({
message: '发布成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`status-${scope.$index}`].doClose()
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.loadingBtn = true
save(this.ruleForm).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.loadingBtn = false
this.dialogVisible = false
this.$refs[formName].resetFields()
this.crud.toQuery()
}).catch(() => {
this.loadingBtn = false
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>

+ 265
- 0
src/views/news/hot.vue View File

@@ -0,0 +1,265 @@
<!--
* @Date: 2021-07-08 11:02:40
* @LastEditTime: 2022-07-27 10:48:43
* @Description: 列表查询demo
-->
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-input v-model="query.title" prefix-icon="el-icon-search" clearable placeholder="标题" class="filter-item"
@keyup.enter.native="crud.toQuery" />

<el-date-picker v-model="query.sendDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="date-item" style="width:300px !important; margin: 0 3px 10px 0;"></el-date-picker>

<rrOperation />
</div>
<div>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
@click="openSave()">新增</el-button>
</div>
</div>

<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
<el-table-column :show-overflow-tooltip="true" prop="subTitle" label="副标题" />
<el-table-column :show-overflow-tooltip="true" prop="detail" label="详情" />
<el-table-column :show-overflow-tooltip="true" prop="image" label="图片">
<template slot-scope="scope">
<img :src="scope.row.image" width="50px" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="image" label="视频地址" />
<el-table-column :show-overflow-tooltip="true" prop="sendDate" label="发布时间" />
<el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="发布状态">
<template slot-scope="scope">
{{ scope.row.status === 1 ? '未发布' : '已发布' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="是否置顶">
<template slot-scope="scope">
{{ scope.row.first === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="操作" width="230" align="center" fixed="right">
<template slot-scope="scope" class="btn">
<el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>

<el-popover placement="top" width="200" :ref="`first-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 0 ">
<p>是否确认置顶该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`first-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="first(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">置顶</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 1 ">
<p>是否确认取消置顶该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="cancelfirst(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">取消置顶</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 1">
<p>是否确认发布该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="statusFn(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">发布</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
<p>是否确认删除该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />

<!-- 新增修改弹窗 -->
<el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="副标题" prop="subTitle">
<el-input v-model="ruleForm.subTitle"></el-input>
</el-form-item>
<el-form-item label="详情" prop="detail">
<el-input v-model="ruleForm.detail"></el-input>
</el-form-item>
<el-form-item label="图片" prop="image">
<uploadFile :url.sync="ruleForm.image" type="image" />
</el-form-item>
<el-form-item label="视频" prop="video">
<uploadFile :url.sync="ruleForm.video" type="video" />
</el-form-item>
<el-form-item label="发布时间" prop="sendDate">
<el-date-picker
v-model="ruleForm.sendDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择发布时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { save, del, first, cancelfirst } from '@/api/news'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import uploadFile from '@/components/uploadFile'
import rrOperation from '@crud/RR.operation'

export default {
components: { rrOperation, pagination, uploadFile },
mixins: [presenter(), header(), crud()],
data() {
return {
dialogVisible: false,
ruleForm: {
type: 1,
title: '',
subTitle: '',
detail: '',
image: '',
video: '',
sendDate: '',
status: ''
},
rules: {
name: [
{ required: true, message: '请上传图片', trigger: 'blur' }
],
serialNumber: [
{ required: true, message: '请输入序号', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入链接', trigger: 'blur' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
loadingBtn: false
}
},
cruds() {
return CRUD({ title: '列表', url: '/news/list', query: {}})
},
methods: {
/* 刷新前操作 */
[CRUD.HOOK.beforeRefresh]() {
this.query.sendDateBegin = this.query.sendDate ? this.query.sendDate[0] : ''
this.query.sendDateEnd = this.query.sendDate ? this.query.sendDate[1] : ''
this.query.type = '1'
},
openSave(item) {
if (item) {
this.ruleForm.id = item.id
this.ruleForm.image = item.image
this.ruleForm.title = item.title
this.ruleForm.subTitle = item.subTitle
this.ruleForm.detail = item.detail
this.ruleForm.video = item.video
this.ruleForm.detail = item.detail
this.ruleForm.sendDate = item.sendDate
}
this.dialogVisible = true
},
close(tag) {
if (tag) this.crud.toQuery()
this.dialogVisible = false
},
/* 删除 */
del(scope) {
del(scope.row.id).then(res => {
this.$message({
message: '删除成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`del-${scope.$index}`].doClose()
})
},
first(scope) {
first(scope.row.id).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`first-${scope.$index}`].doClose()
})
},
cancelfirst(scope) {
cancelfirst(scope.row.id).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`cancelfirst-${scope.$index}`].doClose()
})
},
statusFn(scope) {
let data = {
id: scope.row.id,
status: 2
}
save(data).then(res => {
this.$message({
message: '发布成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`status-${scope.$index}`].doClose()
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.loadingBtn = true
save(this.ruleForm).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.loadingBtn = false
this.dialogVisible = false
this.$refs[formName].resetFields()
this.crud.toQuery()
}).catch(() => {
this.loadingBtn = false
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>

+ 266
- 0
src/views/news/yyz/depth.vue View File

@@ -0,0 +1,266 @@
<!--
* @Date: 2021-07-08 11:02:40
* @LastEditTime: 2022-07-27 10:48:43
* @Description: 列表查询demo
-->
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-input v-model="query.title" prefix-icon="el-icon-search" clearable placeholder="标题" class="filter-item"
@keyup.enter.native="crud.toQuery" />

<el-date-picker v-model="query.sendDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="date-item" style="width:300px !important; margin: 0 3px 10px 0;"></el-date-picker>

<rrOperation />
</div>
<div>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
@click="openSave()">新增</el-button>
</div>
</div>

<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
<el-table-column :show-overflow-tooltip="true" prop="subTitle" label="副标题" />
<el-table-column :show-overflow-tooltip="true" prop="detail" label="详情" />
<el-table-column :show-overflow-tooltip="true" prop="image" label="图片">
<template slot-scope="scope">
<img :src="scope.row.image" width="50px" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="image" label="视频地址" />
<el-table-column :show-overflow-tooltip="true" prop="sendDate" label="发布时间" />
<el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="发布状态">
<template slot-scope="scope">
{{ scope.row.status === 1 ? '未发布' : '已发布' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="是否置顶">
<template slot-scope="scope">
{{ scope.row.first === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="操作" width="230" align="center" fixed="right">
<template slot-scope="scope" class="btn">
<el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>

<el-popover placement="top" width="200" :ref="`first-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 0 ">
<p>是否确认置顶该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`first-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="first(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">置顶</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 1 ">
<p>是否确认取消置顶该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="cancelfirst(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">取消置顶</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 1">
<p>是否确认发布该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="statusFn(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">发布</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
<p>是否确认删除该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />

<!-- 新增修改弹窗 -->
<el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="副标题" prop="subTitle">
<el-input v-model="ruleForm.subTitle"></el-input>
</el-form-item>
<el-form-item label="详情" prop="detail">
<el-input v-model="ruleForm.detail"></el-input>
</el-form-item>
<el-form-item label="图片" prop="image">
<uploadFile :url.sync="ruleForm.image" type="image" />
</el-form-item>
<el-form-item label="视频" prop="video">
<uploadFile :url.sync="ruleForm.video" type="video" />
</el-form-item>
<el-form-item label="发布时间" prop="sendDate">
<el-date-picker
v-model="ruleForm.sendDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择发布时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { save, del, first, cancelfirst } from '@/api/news'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import uploadFile from '@/components/uploadFile'
import rrOperation from '@crud/RR.operation'

export default {
components: { rrOperation, pagination, uploadFile },
mixins: [presenter(), header(), crud()],
data() {
return {
dialogVisible: false,
ruleForm: {
type: 1,
title: '',
subTitle: '',
detail: '',
image: '',
video: '',
sendDate: '',
status: ''
},
rules: {
name: [
{ required: true, message: '请上传图片', trigger: 'blur' }
],
serialNumber: [
{ required: true, message: '请输入序号', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入链接', trigger: 'blur' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
loadingBtn: false
}
},
cruds() {
return CRUD({ title: '列表', url: '/news/list', query: {}})
},
methods: {
/* 刷新前操作 */
[CRUD.HOOK.beforeRefresh]() {
this.query.sendDateBegin = this.query.sendDate ? this.query.sendDate[0] : ''
this.query.sendDateEnd = this.query.sendDate ? this.query.sendDate[1] : ''
this.query.type = '3'
this.query.subType = '32'
},
openSave(item) {
if (item) {
this.ruleForm.id = item.id
this.ruleForm.image = item.image
this.ruleForm.title = item.title
this.ruleForm.subTitle = item.subTitle
this.ruleForm.detail = item.detail
this.ruleForm.video = item.video
this.ruleForm.detail = item.detail
this.ruleForm.sendDate = item.sendDate
}
this.dialogVisible = true
},
close(tag) {
if (tag) this.crud.toQuery()
this.dialogVisible = false
},
/* 删除 */
del(scope) {
del(scope.row.id).then(res => {
this.$message({
message: '删除成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`del-${scope.$index}`].doClose()
})
},
first(scope) {
first(scope.row.id).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`first-${scope.$index}`].doClose()
})
},
cancelfirst(scope) {
cancelfirst(scope.row.id).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`cancelfirst-${scope.$index}`].doClose()
})
},
statusFn(scope) {
let data = {
id: scope.row.id,
status: 2
}
save(data).then(res => {
this.$message({
message: '发布成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`status-${scope.$index}`].doClose()
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.loadingBtn = true
save(this.ruleForm).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.loadingBtn = false
this.dialogVisible = false
this.$refs[formName].resetFields()
this.crud.toQuery()
}).catch(() => {
this.loadingBtn = false
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>

+ 5
- 0
src/views/news/yyz/index.vue View File

@@ -0,0 +1,5 @@
<template>
<div style="padding:30px;">
<router-view />
</div>
</template>

+ 271
- 0
src/views/news/yyz/info.vue View File

@@ -0,0 +1,271 @@
<!--
* @Date: 2021-07-08 11:02:40
* @LastEditTime: 2022-07-27 10:48:43
* @Description: 列表查询demo
-->
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-input v-model="query.title" prefix-icon="el-icon-search" clearable placeholder="标题" class="filter-item"
@keyup.enter.native="crud.toQuery" />
<el-select v-model="query.tag" clearable placeholder="类型" class="filter-item">
<el-option label="XR" value="XR"></el-option>
<el-option label="WEB3" value="WEB3"></el-option>
<el-option label="AI" value="AI"></el-option>
</el-select>

<el-date-picker v-model="query.sendDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="date-item" style="width:300px !important; margin: 0 3px 10px 0;"></el-date-picker>

<rrOperation />
</div>
<div>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
@click="openSave()">新增</el-button>
</div>
</div>

<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
<el-table-column :show-overflow-tooltip="true" prop="subTitle" label="副标题" />
<el-table-column :show-overflow-tooltip="true" prop="detail" label="详情" />
<el-table-column :show-overflow-tooltip="true" prop="image" label="图片">
<template slot-scope="scope">
<img :src="scope.row.image" width="50px" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="image" label="视频地址" />
<el-table-column :show-overflow-tooltip="true" prop="sendDate" label="发布时间" />
<el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="发布状态">
<template slot-scope="scope">
{{ scope.row.status === 1 ? '未发布' : '已发布' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="是否置顶">
<template slot-scope="scope">
{{ scope.row.first === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="操作" width="230" align="center" fixed="right">
<template slot-scope="scope" class="btn">
<el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>

<el-popover placement="top" width="200" :ref="`first-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 0 ">
<p>是否确认置顶该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`first-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="first(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">置顶</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 1 ">
<p>是否确认取消置顶该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="cancelfirst(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">取消置顶</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 1">
<p>是否确认发布该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="statusFn(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">发布</el-button>
</el-popover>
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
<p>是否确认删除该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />

<!-- 新增修改弹窗 -->
<el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="副标题" prop="subTitle">
<el-input v-model="ruleForm.subTitle"></el-input>
</el-form-item>
<el-form-item label="详情" prop="detail">
<el-input v-model="ruleForm.detail"></el-input>
</el-form-item>
<el-form-item label="图片" prop="image">
<uploadFile :url.sync="ruleForm.image" type="image" />
</el-form-item>
<el-form-item label="视频" prop="video">
<uploadFile :url.sync="ruleForm.video" type="video" />
</el-form-item>
<el-form-item label="发布时间" prop="sendDate">
<el-date-picker
v-model="ruleForm.sendDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择发布时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { save, del, first, cancelfirst } from '@/api/news'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import uploadFile from '@/components/uploadFile'
import rrOperation from '@crud/RR.operation'

export default {
components: { rrOperation, pagination, uploadFile },
mixins: [presenter(), header(), crud()],
data() {
return {
dialogVisible: false,
ruleForm: {
type: 1,
title: '',
subTitle: '',
detail: '',
image: '',
video: '',
sendDate: '',
status: ''
},
rules: {
name: [
{ required: true, message: '请上传图片', trigger: 'blur' }
],
serialNumber: [
{ required: true, message: '请输入序号', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入链接', trigger: 'blur' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
loadingBtn: false
}
},
cruds() {
return CRUD({ title: '列表', url: '/news/list', query: {}})
},
methods: {
/* 刷新前操作 */
[CRUD.HOOK.beforeRefresh]() {
this.query.sendDateBegin = this.query.sendDate ? this.query.sendDate[0] : ''
this.query.sendDateEnd = this.query.sendDate ? this.query.sendDate[1] : ''
this.query.type = '3'
this.query.subType = '31'
},
openSave(item) {
if (item) {
this.ruleForm.id = item.id
this.ruleForm.image = item.image
this.ruleForm.title = item.title
this.ruleForm.subTitle = item.subTitle
this.ruleForm.detail = item.detail
this.ruleForm.video = item.video
this.ruleForm.detail = item.detail
this.ruleForm.sendDate = item.sendDate
}
this.dialogVisible = true
},
close(tag) {
if (tag) this.crud.toQuery()
this.dialogVisible = false
},
/* 删除 */
del(scope) {
del(scope.row.id).then(res => {
this.$message({
message: '删除成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`del-${scope.$index}`].doClose()
})
},
first(scope) {
first(scope.row.id).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`first-${scope.$index}`].doClose()
})
},
cancelfirst(scope) {
cancelfirst(scope.row.id).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`cancelfirst-${scope.$index}`].doClose()
})
},
statusFn(scope) {
let data = {
id: scope.row.id,
status: 2
}
save(data).then(res => {
this.$message({
message: '发布成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`status-${scope.$index}`].doClose()
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.loadingBtn = true
save(this.ruleForm).then(res => {
this.$message({
message: '操作成功!',
type: 'success'
})
this.loadingBtn = false
this.dialogVisible = false
this.$refs[formName].resetFields()
this.crud.toQuery()
}).catch(() => {
this.loadingBtn = false
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>

Loading…
Cancel
Save