msg

dvadmin-ui/.env.development

@@ -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

dvadmin-ui/src/api/permission/msg.js

@@ -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
+  })
+}

dvadmin-ui/src/layout/components/Navbar.vue

@@ -1,11 +1,22 @@
 <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">
@@ -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 { mapGetters } from "vuex";
-import Breadcrumb from '@/components/Breadcrumb'
+import Breadcrumb from "@/components/Breadcrumb";
-import Hamburger from '@/components/Hamburger'
+import Hamburger from "@/components/Hamburger";
-import Screenfull from '@/components/Screenfull'
+import Screenfull from "@/components/Screenfull";
-import SizeSelect from '@/components/SizeSelect'
+import SizeSelect from "@/components/SizeSelect";
-import Search from '@/components/HeaderSearch'
+import Search from "@/components/HeaderSearch";
-import RuoYiGit from '@/components/RuoYi/Git'
+import RuoYiGit from "@/components/RuoYi/Git";
-import RuoYiDoc from '@/components/RuoYi/Doc'
+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([
+    ...mapGetters(["sidebar", "avatar", "device"]),
-      'sidebar',
-      'avatar',
-      'device'
-    ]),
     setting: {
       get() {
-        return this.$store.state.settings.showSettings
+        return this.$store.state.settings.showSettings;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
+        this.$store.dispatch("settings/changeSetting", {
-          key: 'showSettings',
+          key: "showSettings",
-          value: val
+          value: val,
-        })
+        });
-      }
+      },
-    }
+    },
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
+      this.$confirm("确定注销并退出系统吗？", "提示", {
-        confirmButtonText: '确定',
+        confirmButtonText: "确定",
-        cancelButtonText: '取消',
+        cancelButtonText: "取消",
-        type: 'warning'
+        type: "warning",
       }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
+        this.$store.dispatch("LogOut").then(() => {
-          location.href = '/index';
+          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;
+    transition: background 0.3s;
-    -webkit-tap-highlight-color:transparent;
+    -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);
         }
       }
     }

dvadmin-ui/src/router/index.js

@@ -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',
+        path: 'msg',
-        component: (resolve) => require(['@/views/permission/user/users/index'], resolve),
+        component: (resolve) => require(['@/views/permission/user/msg/index'], resolve),
-        name: 'Profile',
+        name: 'msg',
-        meta: { title: '个人测试', icon: 'user' }
+        meta: { title: '消息通知', icon: 'user' }
       }
     ]
   },

dvadmin-ui/src/views/permission/user/msg/index.vue

@@ -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>

dvadmin-ui/src/views/permission/user/users/index.vue

@@ -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>