czg_team
/
video_admin
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

消息中心增加首页弹窗公共

This commit is contained in:
YeMingfei666 2025-01-02 17:07:49 +08:00
parent ef09b41510
commit d67b7e4342
5 changed files with 536 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/announcement.js Normal file
View File

@ -0,0 +1,2 @@
import {API1} from './classApi'
export const $announcement=new API1('announcement')

28
src/api/classApi.js
View File

@ -25,4 +25,32 @@ class API {
}
}
export class API1 {
constructor(url) {
const map = {
add: 'POST',
del: 'DELETE',
update: 'PUT',
get: 'GET'
}
this.url = url
for (let key in map) {
this[key] = function (data) {
data = Array.isArray(data) ? data : {
...data
}
if (key === 'del') {
}
const par={ url:key==='get'?url+'/list':url, method: map[key] }
if(key==='get'){
par.params=data
}else{
par.data=data
}
return $http(par)
}
}
}
}
export default API

3
src/config/index.js
View File

@ -2,8 +2,9 @@ export const testUrl='video-admin';
export const productUrl='dj-admin';
// const baseUrl = "http://192.168.1.7:8100/czg/"
const baseUrl = "https://web-api.hnsiyao.cn/czg/" //
// const baseUrl = "https://api.tianjinzhitongdaohe.com/czg/"
const baseUrl = "https://web-api.hnsiyao.cn/czg/" //测试
// const baseUrl = "https://web.hnsiyao.cn/czg/" // 线上
export default{

123
src/views/message/components/pop-add-message.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<el-dialog :title="title" width="500px" :visible.sync="dialogVisible" @close="diaClose"
:close-on-click-modal="true">
<div >
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item label="标题" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input v-model="form.content" type="textarea"></el-input>
</el-form-item>
<el-form-item label="状态" required>
<el-switch v-model="form.state" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
</el-form>
</div>
<div class="dialog-footer">
<el-button @click="diaClose">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import {$announcement as $api} from "@/api/announcement.js";
export default {
data() {
return {
dialogVisible: false,
title: "",
rules: {
title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
content: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
},
form: {
title:'',
content:'',
state:1,
},
};
},
methods: {
open(item) {
console.log(item);
this.dialogVisible = true;
Object.assign(this.form, item);
this.title = item ? "修改公告" : "添加公告";
},
diaClose() {
this.dialogVisible = false;
this.form = {
title:'',
content:'',
state:1,
};
this.$refs.form.resetFields();
},
async confirm() {
if (!this.form.title) {
return this.$message.error("请输入公告标题");
}
if (!this.form.content) {
return this.$message.error("请输入公告内容");
}
this.submit();
},
async submit() {
let res = { data: { code: 1 } };
const submitForm = {
...this.form,
};
if (this.form.id) {
res = await $api.update(submitForm);
} else {
res = await $api.add(submitForm);
}
console.log(res);
const { data } = res;
if (data.code == 0) {
this.$message.success(this.form.id ? "修改成功" : "添加成功");
this.$emit("refresh");
this.diaClose();
} else {
this.$message.error(data.msg);
}
},
},
};
</script>
<style scoped lang="scss">
.el-form-item__label {
text-align: left;
}
::v-deep .el-form-item__label {
text-align: left;
}
.dialog-footer {
padding-top: 20px;
display: flex;
justify-content: flex-end;
}
.upload-file-box {
border-radius: 6px;
width: 148px;
height: 148px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border: 1px solid #c0c4cc;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>

543
src/views/message/message.vue
View File

@ -1,135 +1,266 @@
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="公告中心" name="first">
<div style="float: right;margin-right:2%;">
<el-button style="margin: 10px 0;" :disabled="!isAuth('message:add')" size="mini" type="primary"
icon="document" @click="addNotice">添加公告</el-button>
</div>
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column prop="id" label="编号" width="80">
</el-table-column>
<el-table-column prop="title" label="标题">
</el-table-column>
<el-table-column prop="url" label="链接">
</el-table-column>
<el-table-column prop="type" label="类型">
<template slot-scope="scope">
<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type === 'url' ">链接</span>
<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type === 'word' ">文本</span>
</template>
</el-table-column>
<el-table-column prop="createAt" label="创建时间">
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" type="primary" :disabled="!isAuth('message:update')"
@click="updates(scope.$index, scope.row)">修改
</el-button>
<el-button size="mini" type="danger" :disabled="!isAuth('message:delete')"
@click="deletes(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 10px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[5, 10, 15, 20]" :page-size="limit" :current-page="page"
layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalElements">
</el-pagination>
</div>
<!-- 添加弹框 -->
<el-dialog title="添加公告" :visible.sync="dialogFormVisible" center>
<div style="margin-bottom: 10px;">
<span style="width: 200px;display: inline-block;text-align: right;">标题：</span>
<el-input style="width:50%;" v-model="title" placeholder="请输入公告标题"></el-input>
</div>
<div style="margin-bottom: 10px;" v-if="type=='url'">
<span style="width: 200px;display: inline-block;text-align: right;">链接：</span>
<el-input style="width: 50%;" v-model="url" placeholder="请输入公告链接"></el-input>
</div>
<div style="margin-bottom: 10px;">
<span style="width: 200px;display: inline-block;text-align: right;">类型：</span>
<el-select v-model="type" placeholder="请选择公告类型" style="width:50%;">
<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="releasNoticeTo()">确 定</el-button>
</div>
</el-dialog>
<!-- 修改弹框 -->
<el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
<el-form :model="form">
<el-form-item label="标题：" :label-width="formLabelWidth">
<el-input v-model="form.title" style="width:65%;"></el-input>
</el-form-item>
<el-form-item label="链接：" :label-width="formLabelWidth">
<el-input v-model="form.url" style="width:65%;"></el-input>
</el-form-item>
<el-form-item label="类型：" :label-width="formLabelWidth">
<el-select v-model="form.type" placeholder="请选择类型" style="width:65%;">
<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible1 = false">取 消</el-button>
<el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
</div>
</el-dialog>
</el-tab-pane>
<el-tab-pane label="用户反馈" name="two">
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column prop="id" label="编号" width="80">
</el-table-column>
<el-table-column prop="title" label="联系方式">
</el-table-column>
<el-table-column prop="content" label="内容">
</el-table-column>
<el-table-column prop="createAt" label="创建时间" width="160">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 10px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="用户消息" name="fourth">
<div style="float: right;margin-right:2%;">
<el-button style='margin: 10px 0;' :disabled="!isAuth('message:push')" size="mini" type="primary"
icon="document" @click="magNotice">消息推送</el-button>
</div>
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column prop="id" label="编号" width="80">
</el-table-column>
<el-table-column prop="userName" label="用户名称">
</el-table-column>
<el-table-column prop="title" label="消息标题">
</el-table-column>
<el-table-column prop="content" label="消息内容">
</el-table-column>
<el-table-column prop="createAt" label="创建时间">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="updataDetails(scope.row)">用户详情
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 10px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
</el-pagination>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="消息推送" name="seventh">
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="首页弹窗公告" name="dialogMessage">
<div style="float: right; margin-right: 2%">
<el-button
style="margin: 10px 0"
:disabled="!isAuth('message:add')"
size="mini"
type="primary"
icon="document"
@click="refPopAddMessageOpen()"
>添加公告</el-button
>
</div>
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column prop="id" label="编号" width="80"> </el-table-column>
<el-table-column prop="title" label="标题"> </el-table-column>
<el-table-column prop="content" label="内容"> </el-table-column>
<el-table-column prop="content" label="是否启用">
<template slot-scope="scope">
<el-switch :value="scope.row.state" :active-value="1" :inactive-value="0" @change="dialogMessageUpdate($event, scope.row)"> </el-switch>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间"> </el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
:disabled="!isAuth('message:update')"
@click="refPopAddMessageOpen( scope.row)"
>修改
</el-button>
<el-button
size="mini"
type="danger"
:disabled="!isAuth('message:delete')"
@click="dialogMessagedeletes(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px" v-if="false">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[5, 10, 15, 20]"
:page-size="limit"
:current-page="page"
layout="total,sizes, prev, pager, next,jumper"
:total="tableData.totalElements"
>
</el-pagination>
</div>
<pop-add-message ref="refPopAddMessage" @refresh="getDialogMessage"></pop-add-message>
</el-tab-pane>
<el-tab-pane label="公告中心" name="first">
<div style="float: right; margin-right: 2%">
<el-button
style="margin: 10px 0"
:disabled="!isAuth('message:add')"
size="mini"
type="primary"
icon="document"
@click="addNotice"
>添加公告</el-button
>
</div>
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column prop="id" label="编号" width="80"> </el-table-column>
<el-table-column prop="title" label="标题"> </el-table-column>
<el-table-column prop="url" label="链接"> </el-table-column>
<el-table-column prop="type" label="类型">
<template slot-scope="scope">
<span
style="color: #4f9dec; cursor: pointer"
v-if="scope.row.type === 'url'"
>链接</span
>
<span
style="color: #4f9dec; cursor: pointer"
v-if="scope.row.type === 'word'"
>文本</span
>
</template>
</el-table-column>
<el-table-column prop="createAt" label="创建时间"> </el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
:disabled="!isAuth('message:update')"
@click="updates(scope.$index, scope.row)"
>修改
</el-button>
<el-button
size="mini"
type="danger"
:disabled="!isAuth('message:delete')"
@click="deletes(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[5, 10, 15, 20]"
:page-size="limit"
:current-page="page"
layout="total,sizes, prev, pager, next,jumper"
:total="tableData.totalElements"
>
</el-pagination>
</div>
<!-- 添加弹框 -->
<el-dialog title="添加公告" :visible.sync="dialogFormVisible" center>
<div style="margin-bottom: 10px">
<span style="width: 200px; display: inline-block; text-align: right"
>标题：</span
>
<el-input
style="width: 50%"
v-model="title"
placeholder="请输入公告标题"
></el-input>
</div>
<div style="margin-bottom: 10px" v-if="type == 'url'">
<span style="width: 200px; display: inline-block; text-align: right"
>链接：</span
>
<el-input
style="width: 50%"
v-model="url"
placeholder="请输入公告链接"
></el-input>
</div>
<div style="margin-bottom: 10px">
<span style="width: 200px; display: inline-block; text-align: right"
>类型：</span
>
<el-select
v-model="type"
placeholder="请选择公告类型"
style="width: 50%"
>
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="releasNoticeTo()"
>确 定</el-button
>
</div>
</el-dialog>
<!-- 修改弹框 -->
<el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
<el-form :model="form">
<el-form-item label="标题：" :label-width="formLabelWidth">
<el-input v-model="form.title" style="width: 65%"></el-input>
</el-form-item>
<el-form-item label="链接：" :label-width="formLabelWidth">
<el-input v-model="form.url" style="width: 65%"></el-input>
</el-form-item>
<el-form-item label="类型：" :label-width="formLabelWidth">
<el-select
v-model="form.type"
placeholder="请选择类型"
style="width: 65%"
>
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible1 = false">取 消</el-button>
<el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
</div>
</el-dialog>
</el-tab-pane>
<el-tab-pane label="用户反馈" name="two">
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column prop="id" label="编号" width="80"> </el-table-column>
<el-table-column prop="title" label="联系方式"> </el-table-column>
<el-table-column prop="content" label="内容"> </el-table-column>
<el-table-column prop="createAt" label="创建时间" width="160">
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]"
:page-size="limit"
:current-page="page"
layout="total,sizes, prev, pager, next,jumper"
:total="tableData.totalCount"
>
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="用户消息" name="fourth">
<div style="float: right; margin-right: 2%">
<el-button
style="margin: 10px 0"
:disabled="!isAuth('message:push')"
size="mini"
type="primary"
icon="document"
@click="magNotice"
>消息推送</el-button
>
</div>
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column prop="id" label="编号" width="80"> </el-table-column>
<el-table-column prop="userName" label="用户名称"> </el-table-column>
<el-table-column prop="title" label="消息标题"> </el-table-column>
<el-table-column prop="content" label="消息内容"> </el-table-column>
<el-table-column prop="createAt" label="创建时间"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="updataDetails(scope.row)"
>用户详情
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]"
:page-size="limit"
:current-page="page"
layout="total,sizes, prev, pager, next,jumper"
:total="tableData.totalCount"
>
</el-pagination>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="消息推送" name="seventh">
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column fixed prop="id" label="编号" width="80">
</el-table-column>
@ -155,39 +286,77 @@
</el-pagination>
</div>
</el-tab-pane> -->
<!-- 消息推送 -->
<el-dialog title="消息推送" :visible.sync="dialogFormVisible2" center>
<div style="margin-bottom: 10px;">
<span style="width: 200px;display: inline-block;text-align: right;">类型：</span>
<el-select v-model="flag" placeholder="请选择类型" style="width:50%">
<el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div style="margin-bottom: 10px;" v-if="flag == 1">
<span style="width: 200px;display: inline-block;text-align: right;">用户手机号：</span>
<el-input style="width: 50%;" v-model="phone" placeholder="请输入用户手机号"></el-input>
</div>
<div style="margin-bottom: 10px;">
<span style="width: 200px;display: inline-block;text-align: right;">消息标题：</span>
<el-input style="width: 50%;" v-model="title" placeholder="请输入消息标题"></el-input>
</div>
<div style="margin-bottom: 10px;">
<span
style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;">消息内容：</span>
<el-input style="width: 50%;" type="textarea" rows="4" v-model="content" placeholder="请输入消息内容">
</el-input>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible2 = false">取 消</el-button>
<el-button type="primary" @click="magNoticeTo()">确 定</el-button>
</div>
</el-dialog>
</el-tabs>
<!-- 消息推送 -->
<el-dialog title="消息推送" :visible.sync="dialogFormVisible2" center>
<div style="margin-bottom: 10px">
<span style="width: 200px; display: inline-block; text-align: right"
>类型：</span
>
<el-select v-model="flag" placeholder="请选择类型" style="width: 50%">
<el-option
v-for="item in flags"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-select
>&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div style="margin-bottom: 10px" v-if="flag == 1">
<span style="width: 200px; display: inline-block; text-align: right"
>用户手机号：</span
>
<el-input
style="width: 50%"
v-model="phone"
placeholder="请输入用户手机号"
></el-input>
</div>
<div style="margin-bottom: 10px">
<span style="width: 200px; display: inline-block; text-align: right"
>消息标题：</span
>
<el-input
style="width: 50%"
v-model="title"
placeholder="请输入消息标题"
></el-input>
</div>
<div style="margin-bottom: 10px">
<span
style="
width: 200px;
display: inline-block;
text-align: right;
position: relative;
top: -65px;
"
>消息内容：</span
>
<el-input
style="width: 50%"
type="textarea"
rows="4"
v-model="content"
placeholder="请输入消息内容"
>
</el-input>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible2 = false">取 消</el-button>
<el-button type="primary" @click="magNoticeTo()">确 定</el-button>
</div>
</el-dialog>
</el-tabs>
</div>
</template>
<script>
import {$announcement} from '@/api/announcement';
import popAddMessage from './components/pop-add-message.vue';
export default {
components:{popAddMessage},
data() {
return {
limit: 10,
@ -235,7 +404,7 @@
}
],
formLabelWidth: '200px',
activeName: 'first',
activeName: 'dialogMessage',
tableDataLoading: false,
dialogFormVisible1: false,
dialogFormVisible2: false,
@ -244,6 +413,36 @@
}
},
methods: {
dialogMessageUpdate(e,item){
$announcement.update({...item,state:e}).then(({
data
}) => {
this.getDialogMessage()
})
},
// 删除首页弹窗公告
dialogMessagedeletes(row) {
let delid = row.id
this.$confirm(`确定删除此条信息?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$announcement.del({id:delid}).then(({
data
}) => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1500
})
this.getDialogMessage()
})
}).catch(() => {})
},
refPopAddMessageOpen(item){
this.$refs.refPopAddMessage.open(item)
},
// 详情跳转
updataDetails(row) {
this.$router.push({
@ -261,7 +460,24 @@
this.page = val;
this.dataSelect()
},
getDialogMessage() {
this.tableDataLoading = true
$announcement.get({
page: this.page,
limit: this.limit
}).then(({data}) => {
console.log(data)
this.tableDataLoading = false
this.tableData = {list:data.data}
})
},
handleClick(tab, event) {
if (tab._props.label == '首页弹窗公告') {
this.page = 1
this.limit = 10
this.state = 1
this.getDialogMessage()
}
if (tab._props.label == '公告中心') {
this.page = 1
this.limit = 10
@ -404,6 +620,10 @@
},
// 获取数据列表
dataSelect() {
if(this.activeName == 'dialogMessage'){
this.getDialogMessage()
return
}
this.tableDataLoading = true
this.$http({
url: this.$http.adornUrl(`message/page/${this.state}/${this.page}/${this.limit}`),
@ -583,5 +803,4 @@
</script>
<style>
</style>