pull/1/head
fenda 2021-03-08 20:14:29 +08:00
parent 50f5b88146
commit 29ecfd471b
6 changed files with 464 additions and 86 deletions

View File

@ -2,7 +2,7 @@
ENV = 'development'
# 若依管理系统/开发环境
VUE_APP_BASE_API = 'http://127.0.0.1:8000'
VUE_APP_BASE_API = 'https://api.django-vue-admin.com/'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

@ -0,0 +1,70 @@
/*
* @Author: 庄志莹
* @Date: 2021-03-08 19:39:35
* @LastEditTime: 2021-03-08 20:03:36
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \dvadmin-ui\src\api\permission\msg.js
*/
import request from '@/utils/request'
// 查询消息列表
export function getList(query) {
return request({
url: '/system/config/',
method: 'get',
params: query
})
}
// 查看详情
export function getDesc(configId) {
return request({
url: '/system/config/' + configId + '/',
method: 'get'
})
}
// // 根据消息标题查询
// export function getConfigKey(configKey) {
// return request({
// url: '/system/config/configKey/' + configKey + '/',
// method: 'get'
// })
// }
// 新增消息
export function addMsg(data) {
return request({
url: '/system/config/',
method: 'post',
data: data
})
}
// 修改消息
export function updateMsg(data) {
return request({
url: '/system/config/' + data.id + '/',
method: 'put',
data: data
})
}
// 删除消息
export function delMsg(configId) {
return request({
url: '/system/config/' + configId + '/',
method: 'delete'
})
}
// 导出消息
export function exportMsg(query) {
return request({
url: '/system/config/export/',
method: 'get',
params: query
})
}

View File

@ -1,13 +1,24 @@
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<hamburger
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu">
<template v-if="device!=='mobile'">
<template v-if="device !== 'mobile'">
<router-link to="/user/msg">
<el-badge :value="count" :max="99" class="badge-item">
<i class="el-icon-message-solid badge-item-icon"></i>
</el-badge>
</router-link>
<search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
@ -21,12 +32,14 @@
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
<img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
@ -46,14 +59,14 @@
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc";
export default {
components: {
@ -63,43 +76,44 @@ export default {
SizeSelect,
Search,
RuoYiGit,
RuoYiDoc
RuoYiDoc,
},
data() {
return {
count: 0,
};
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'device'
]),
...mapGetters(["sidebar", "avatar", "device"]),
setting: {
get() {
return this.$store.state.settings.showSettings
return this.$store.state.settings.showSettings;
},
set(val) {
this.$store.dispatch('settings/changeSetting', {
key: 'showSettings',
value: val
})
}
}
this.$store.dispatch("settings/changeSetting", {
key: "showSettings",
value: val,
});
},
},
},
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
this.$store.dispatch("app/toggleSideBar");
},
async logout() {
this.$confirm('确定注销并退出系统吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
this.$confirm("确定注销并退出系统吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
})
}
}
}
this.$store.dispatch("LogOut").then(() => {
location.href = "/index";
});
});
},
},
};
</script>
<style lang="scss" scoped>
@ -108,18 +122,18 @@ export default {
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
@ -136,6 +150,18 @@ export default {
float: right;
height: 100%;
line-height: 50px;
.badge-item {
height: 70px;
width: 30px;
line-height: 40px;
text-align: center;
margin-right: 5px;
.badge-item-icon {
width: 18px;
color: #5a5e66;
height: 18px;
}
}
&:focus {
outline: none;
@ -151,10 +177,10 @@ export default {
&.hover-effect {
cursor: pointer;
transition: background .3s;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
}

View File

@ -77,18 +77,12 @@ export const constantRoutes = [
component: (resolve) => require(['@/views/permission/user/profile/index'], resolve),
name: 'Profile',
meta: { title: '个人中心', icon: 'user' }
}
]
},
{
path: '/user',
component: Layout,
children: [
},
{
path: 'users',
component: (resolve) => require(['@/views/permission/user/users/index'], resolve),
name: 'Profile',
meta: { title: '个人测试', icon: 'user' }
path: 'msg',
component: (resolve) => require(['@/views/permission/user/msg/index'], resolve),
name: 'msg',
meta: { title: '消息通知', icon: 'user' }
}
]
},

View File

@ -0,0 +1,317 @@
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="消息名称" prop="msgTitle">
<el-input
v-model="queryParams.msgTitle"
placeholder="请输入消息名称"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
<!-- 下面的按钮 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:config:post']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:config:{id}:delete']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:config:export:get']"
>导出</el-button
>
</el-col>
<!-- 右边的隐藏搜索和刷新 -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 表格 -->
<el-table
v-loading="loading"
:data="configList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="消息序号" align="center" prop="id" />
<el-table-column
label="消息名称"
align="center"
prop="msgTitle"
:show-overflow-tooltip="true"
/>
<el-table-column label="状态" align="center" prop="status" />
<el-table-column
label="备注"
align="center"
prop="remark"
:show-overflow-tooltip="true"
/>
<el-table-column
label="创建时间"
align="center"
prop="create_datetime"
width="180"
/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
v-if="hasPermi(['system:config:{id}:put'])"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:config:{id}:put']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-more"
@click="handleDesc(scope.row)"
>详情</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="消息名称" prop="msgTitle">
<el-input v-model="form.msgTitle" placeholder="请输入消息名称" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio :key="0" :label="0">正常</el-radio>
<el-radio :key="1" :label="1">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getList,
getDesc,
delMsg,
addMsg,
updateMsg,
exportMsg,
} from "@/api/permission/msg";
export default {
name: "Msg",
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
configList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
msgTitle: undefined,
status: undefined,
},
//
form: {},
//
rules: {
msgTitle: [{ required: true, message: "消息名称不能为空", trigger: "blur" }],
},
};
},
created() {
this.getList();
},
methods: {
/** 查询参数列表 */
getList() {
this.loading = true;
getList(this.queryParams).then((response) => {
this.configList = response.data.results;
this.total = response.data.count;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: undefined,
msgTitle: undefined,
status: "0",
remark: undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加消息";
},
//
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getDesc(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改参数";
});
},
//
handleDesc(row) {},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != undefined) {
updateMsg(this.form).then((response) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addMsg(this.form).then((response) => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const configIds = row.id || this.ids;
this.$confirm('是否确认删除参数编号为"' + configIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return delMsg(configIds);
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm("是否确认导出所有参数数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return exportMsg(queryParams);
})
.then((response) => {
this.download(response.data.file_url, response.data.name);
});
},
},
};
</script>

View File

@ -1,29 +0,0 @@
<template>
<div>
无内容
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {}
},
computed: {},
watch: {},
created() {
},
mounted() {
},
methods: {}
}
</script>
<style>
.el-rate {
display: inline-block;
vertical-align: text-top;
}
</style>