【类 型】：feat
【原 因】：添加公告管理模块 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
b42ea4328d
commit
2ef12fc312
@ -415,6 +415,39 @@ const routes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/message',
|
||||
component: Layout,
|
||||
redirect: '/message/index',
|
||||
meta: {
|
||||
title: '公告管理',
|
||||
icon: 'iconfont icon-guanliyuan',
|
||||
roles: ['admin', 'editor'],
|
||||
tapName: 'admin'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/message/index',
|
||||
component: () => import('@/views/layout/components/main/message/index'),
|
||||
meta: {
|
||||
title: '公告列表',
|
||||
icon: 'iconfont icon-yonghuguanli',
|
||||
roles: ['admin', 'editor'],
|
||||
tapName: 'admin'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/message/index',
|
||||
component: () => import('@/views/layout/components/main/message/pub'),
|
||||
meta: {
|
||||
title: '发布公告',
|
||||
icon: 'iconfont icon-yonghuguanli',
|
||||
roles: ['admin', 'editor'],
|
||||
tapName: 'admin'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/category',
|
||||
component: Layout,
|
||||
|
||||
143
src/views/layout/components/main/message/index.vue
Normal file
143
src/views/layout/components/main/message/index.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 组合按钮 -->
|
||||
<el-button-group class="m-b-20 m-r-20">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$router.replace('/admin/add')">添加</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deleteAdmin(countSelIdArr($refs.myTable.selection))">删除
|
||||
</el-button>
|
||||
<el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
|
||||
<el-button type="success" icon="el-icon-microphone" @click="toMessagePage(countSelIdArr($refs.myTable.selection))">发布公告</el-button>
|
||||
</el-button-group>
|
||||
<!-- 用户select选项 -->
|
||||
<el-button-group class="m-b-20">
|
||||
<SelectionShopId v-model="form.shop_id" :allSel="true" />
|
||||
</el-button-group>
|
||||
<!-- 管理员列表 -->
|
||||
<el-table class="w-100" ref="myTable"
|
||||
:data="adminListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
|
||||
<el-table-column align="center" type="selection" width="40">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="id" label="id" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="账户名" width="150" min-width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="uname" label="昵称" min-width="150">
|
||||
</el-table-column>
|
||||
<el-table-column label="最后登录时间" width="140" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.lasttime | parseTime('{y}-{m}-{d} {h}:{i}') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="注册时间" width="100" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.addtime | parseTime('{y}-{m}-{d}') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="controler" label="操作" width="350" min-width="350">
|
||||
<template slot-scope="scope">
|
||||
<el-button-group>
|
||||
<el-button type="warning" icon="el-icon-edit"
|
||||
@click="$router.replace(`/admin/edit/${scope.row.id}`)">编辑</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">删除</el-button>
|
||||
<el-button type="success" icon="el-icon-microphone" @click="toMessagePage([scope.row.id])">发布公告</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
|
||||
:total="adminListArr.length">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseTime, countSelIdArr } from '@/utils'
|
||||
import SelectionShopId from '@/components/SelectionShopId'
|
||||
|
||||
export default {
|
||||
name: 'Admin',
|
||||
data () {
|
||||
return {
|
||||
pageSize: 8, // 每页显示记录条数
|
||||
currentPage: 1, // 当前页
|
||||
form: {
|
||||
shop_id: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SelectionShopId
|
||||
},
|
||||
computed: {
|
||||
adminList () {
|
||||
return this.$store.state.adminList
|
||||
},
|
||||
/**
|
||||
* @description: 过滤掉 不对应客户的 飞机列表
|
||||
* @return: 飞机列表
|
||||
*/
|
||||
adminListArr () {
|
||||
if (this.form.shop_id !== '') {
|
||||
return this.adminList.filter((item) => item.shop_id === this.form.shop_id)
|
||||
} else {
|
||||
return this.adminList
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countSelIdArr,
|
||||
/**
|
||||
* @description: 跳转到编辑页面
|
||||
*/
|
||||
toEditPage () {
|
||||
const selId = this.countSelIdArr(this.$refs.myTable.selection)
|
||||
switch (selId.length) {
|
||||
case 0:
|
||||
this.$message.error('请选择一条需要编辑的记录')
|
||||
break
|
||||
case 1:
|
||||
this.$router.push('/admin/edit/' + selId['0'])
|
||||
break
|
||||
default:
|
||||
this.$message.error('只能选择一条记录')
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 跳转到发布公告页面
|
||||
*/
|
||||
toMessagePage (selIdArr) {
|
||||
if (selIdArr.length === 0) {
|
||||
this.$message.error('请选择至少一个用户')
|
||||
} else {
|
||||
this.$store.commit('app/setToMessageIdArr', selIdArr)// 传参
|
||||
this.$router.push('/admin/message/')
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 删除用户
|
||||
*/
|
||||
deleteAdmin (idArr) {
|
||||
this.$store.dispatch('fetchDelAdmin', idArr)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
created () {
|
||||
},
|
||||
filters: {
|
||||
parseTime,
|
||||
countSelIdArr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/theme.scss";
|
||||
|
||||
.el-tag {
|
||||
i {
|
||||
vertical-align: middle
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/views/layout/components/main/message/pub.vue
Normal file
107
src/views/layout/components/main/message/pub.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row class="m-t-0">
|
||||
<el-col :span="24">
|
||||
<el-container>
|
||||
<el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
|
||||
<div class="l">
|
||||
<i class="iconfont el-icon-link f-s-20"></i>
|
||||
<font class="m-l-10 f-s-18 fb">发布公告</font>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="border p-20">
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="公告标题">
|
||||
<el-input v-model="form.tit" placeholder="请输入公告标题" maxlength="50" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="公告信息">
|
||||
<el-input v-model="form.message" type="textarea" placeholder="请输入公告内容" :rows="5" maxlength="80"
|
||||
show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="显示截止日期">
|
||||
<el-date-picker v-model="form.date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
|
||||
value-format="timestamp" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-edit" :loading="loading" @click="pubMessage()">
|
||||
发布公告
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pubMessage } from '@/utils/api/table'
|
||||
|
||||
export default {
|
||||
name: 'message',
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
date: '',
|
||||
message: '',
|
||||
tit: ''
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 从 Vuex 中获取用户 ID 列表
|
||||
idArr () {
|
||||
return this.$store.state.app.toMessageIdArr
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
async pubMessage () {
|
||||
// 判断 idArr 是否为空
|
||||
if (!this.idArr || this.idArr.length === 0) {
|
||||
this.$message.warning('接收用户为空，请重新操作')
|
||||
this.$router.push('/admin/index')
|
||||
return
|
||||
}
|
||||
if (!this.form.tit) {
|
||||
this.$message.error('请输入公告标题')
|
||||
return
|
||||
}
|
||||
if (!this.form.message) {
|
||||
this.$message.error('请输入公告内容')
|
||||
return
|
||||
}
|
||||
if (!this.form.date) {
|
||||
this.$message.error('请选择截止日期')
|
||||
return
|
||||
}
|
||||
|
||||
const endTime = Math.floor(new Date(this.form.date).setHours(23, 59, 59, 999) / 1000)// 取日历选择的 当天最后一秒
|
||||
|
||||
const res = await pubMessage(this.form.tit, this.form.message, this.idArr, endTime)
|
||||
|
||||
if (res.data.status === 1) {
|
||||
this.$message.success(res.data.msg)
|
||||
this.form.message = ''
|
||||
this.form.date = ''
|
||||
this.form.tit = ''
|
||||
// 跳转到首页
|
||||
this.$router.push('/admin/index')
|
||||
} else {
|
||||
this.$message.error(res.data.msg || '公告发布失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rspan {
|
||||
float: right;
|
||||
color: #8492a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user