| @@ -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 | |||||
| } | |||||
| }) | |||||
| } | |||||
| @@ -6,64 +6,35 @@ | |||||
| import request from '@/utils/request' | import request from '@/utils/request' | ||||
| /** 轮播 */ | |||||
| export function saveLunbo(data) { | |||||
| export function save(data) { | |||||
| return request({ | return request({ | ||||
| url: '/aigc/saveLunbo', | |||||
| url: '/news/save', | |||||
| method: 'post', | method: 'post', | ||||
| data | data | ||||
| }) | }) | ||||
| } | } | ||||
| export function delLunbo(id) { | |||||
| export function first(id) { | |||||
| return request({ | return request({ | ||||
| url: '/index/delLunbo', | |||||
| url: '/news/first', | |||||
| method: 'post', | method: 'post', | ||||
| data: { id } | data: { id } | ||||
| }) | }) | ||||
| } | } | ||||
| /** 广告位1 */ | |||||
| export function guanggao1() { | |||||
| export function cancelfirst(id) { | |||||
| return request({ | return request({ | ||||
| url: '/aigc/guanggao1', | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| export function saveGuangGao(data) { | |||||
| return request({ | |||||
| url: '/index/saveGuangGao', | |||||
| url: '/news/cancelfirst', | |||||
| method: 'post', | 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({ | 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', | method: 'post', | ||||
| data | |||||
| data: { id } | |||||
| }) | }) | ||||
| } | } | ||||
| @@ -7,6 +7,7 @@ | |||||
| --> | --> | ||||
| <template> | <template> | ||||
| <el-upload | <el-upload | ||||
| v-loading="loading" | |||||
| class="avatar-uploader" | class="avatar-uploader" | ||||
| action="#" | action="#" | ||||
| :show-file-list="false" | :show-file-list="false" | ||||
| @@ -22,7 +23,7 @@ | |||||
| </el-upload> | </el-upload> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { upload } from '@/api/common.js' | |||||
| import { upload, videoUpload, uploadProgress } from '@/api/common.js' | |||||
| export default { | export default { | ||||
| props: { | props: { | ||||
| url: { | url: { | ||||
| @@ -34,6 +35,11 @@ export default { | |||||
| default: '' | default: '' | ||||
| } | } | ||||
| }, | }, | ||||
| data() { | |||||
| return { | |||||
| loading: false | |||||
| } | |||||
| }, | |||||
| methods: { | methods: { | ||||
| /* // 上传图片时限制图片的尺寸 | /* // 上传图片时限制图片的尺寸 | ||||
| beforeUpload(file) { | beforeUpload(file) { | ||||
| @@ -97,9 +103,15 @@ export default { | |||||
| let _data = { | let _data = { | ||||
| file: file.file | 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) | this.$emit('update:url', res.url) | ||||
| } | } | ||||
| }) | }) | ||||
| @@ -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', | path: '/about', | ||||
| component: Layout, | component: Layout, | ||||
| @@ -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> | |||||
| @@ -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> | |||||
| @@ -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> | |||||
| @@ -0,0 +1,5 @@ | |||||
| <template> | |||||
| <div style="padding:30px;"> | |||||
| <router-view /> | |||||
| </div> | |||||
| </template> | |||||
| @@ -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> | |||||