Merge branch 'HitSheep' of http://39.105.160.25:10880/post-project-ui/post-ui into HitSheep

README.md

@@ -4,7 +4,11 @@ HitSheep加油！！
 
 ```bash
 # 克隆项目
-git clone http://39.105.160.25:10880/sifu-gogs/post-ui.git
+# git clone http://39.105.160.25:10880/sifu-gogs/post-ui.git
+
+直接下载zip包 
+
+本地解压zip 
 
 # 进入项目目录
 cd ruoyi-ui
@@ -12,7 +16,7 @@ cd ruoyi-ui
 # 安装依赖
 npm install
 
-# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
+# 不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npmmirror.com
 
 # 启动服务
@@ -21,7 +25,7 @@ npm run dev
 
 浏览器访问 http://localhost:80
 
-## 发布
+<!-- ## 发布
 
 ```bash
 # 构建测试环境
@@ -29,4 +33,4 @@ npm run build:stage
 
 # 构建生产环境
 npm run build:prod
-```
+``` -->

src/assets/styles/element-ui.scss

@@ -89,4 +89,4 @@
   > .el-submenu__title
   .el-submenu__icon-arrow {
   display: none;
-}
+}

src/assets/styles/index.scss

@@ -189,3 +189,10 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+.build{
+  border-radius: 4px;
+}
+.list{
+  border-radius: 4px;
+}

src/mock/index.ts

@@ -0,0 +1,28 @@
+import Mock from 'mockjs';
+
+import './user';
+import './message-box';
+
+import '@/views/dashboard/workplace/mock';
+/** simple */
+// import '@/views/dashboard/monitor/mock';
+
+// import '@/views/list/card/mock';
+// import '@/views/list/search-table/mock';
+
+import '@/views/lesson/series/mock';
+
+// import '@/views/form/step/mock';
+
+// import '@/views/profile/basic/mock';
+
+// import '@/views/visualization/data-analysis/mock';
+// import '@/views/visualization/multi-dimension-data-analysis/mock';
+
+// import '@/views/user/info/mock';
+// import '@/views/user/setting/mock';
+/** simple end */
+
+Mock.setup({
+  timeout: '600-1000',
+});

src/mock/message-box.ts

@@ -0,0 +1,85 @@
+import Mock from 'mockjs';
+import setupMock, { successResponseWrap } from '../utils/setup-mock';
+
+const haveReadIds: number[] = [];
+const getMessageList = () => {
+  return [
+    {
+      id: 1,
+      type: 'message',
+      title: '郑曦月',
+      subTitle: '的私信',
+      avatar:
+        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp',
+      content: '审批请求已发送，请查收',
+      time: '今天 12:30:01',
+    },
+    {
+      id: 2,
+      type: 'message',
+      title: '宁波',
+      subTitle: '的回复',
+      avatar:
+        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
+      content: '此处 bug 已经修复',
+      time: '今天 12:30:01',
+    },
+    {
+      id: 3,
+      type: 'message',
+      title: '宁波',
+      subTitle: '的回复',
+      avatar:
+        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
+      content: '此处 bug 已经修复',
+      time: '今天 12:20:01',
+    },
+    {
+      id: 4,
+      type: 'notice',
+      title: '续费通知',
+      subTitle: '',
+      avatar: '',
+      content: '您的产品使用期限即将截止，如需继续使用产品请前往购…',
+      time: '今天 12:20:01',
+      messageType: 3,
+    },
+    {
+      id: 5,
+      type: 'notice',
+      title: '规则开通成功',
+      subTitle: '',
+      avatar: '',
+      content: '内容屏蔽规则于 2021-12-01 开通成功并生效',
+      time: '今天 12:20:01',
+      messageType: 1,
+    },
+    {
+      id: 6,
+      type: 'todo',
+      title: '质检队列变更',
+      subTitle: '',
+      avatar: '',
+      content: '内容质检队列于 2021-12-01 19:50:23 进行变更，请重新…',
+      time: '今天 12:20:01',
+      messageType: 0,
+    },
+  ].map((item) => ({
+    ...item,
+    status: haveReadIds.indexOf(item.id) === -1 ? 0 : 1,
+  }));
+};
+
+setupMock({
+  setup: () => {
+    Mock.Mock(new RegExp('/api/message/list'), () => {
+      return successResponseWrap(getMessageList());
+    });
+
+    Mock.Mock(new RegExp('/api/message/read'), (params: { body: string }) => {
+      const { ids } = JSON.parse(params.body);
+      haveReadIds.push(...(ids || []));
+      return successResponseWrap(true);
+    });
+  },
+});

src/mock/messageMock.js

@@ -0,0 +1,64 @@
+export const getMessageList = () => {
+  return [
+    {
+      id: 1,
+      type: 'message',
+      title: '郑曦月',
+      subTitle: '的私信',
+      avatar:
+        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp',
+      content: '审批请求已发送，请查收',
+      time: '今天 12:30:01',
+    },
+    {
+      id: 2,
+      type: 'message',
+      title: '宁波',
+      subTitle: '的回复',
+      avatar:
+        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
+      content: '此处 bug 已经修复',
+      time: '今天 12:30:01',
+    },
+    {
+      id: 3,
+      type: 'message',
+      title: '宁波',
+      subTitle: '的回复',
+      avatar:
+        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
+      content: '此处 bug 已经修复',
+      time: '今天 12:20:01',
+    },
+    {
+      id: 4,
+      type: 'notice',
+      title: '续费通知',
+      subTitle: '',
+      avatar: '',
+      content: '您的产品使用期限即将截止，如需继续使用产品请前往购…',
+      time: '今天 12:20:01',
+      messageType: 3,
+    },
+    {
+      id: 5,
+      type: 'notice',
+      title: '规则开通成功',
+      subTitle: '',
+      avatar: '',
+      content: '内容屏蔽规则于 2021-12-01 开通成功并生效',
+      time: '今天 12:20:01',
+      messageType: 1,
+    },
+    {
+      id: 6,
+      type: 'todo',
+      title: '质检队列变更',
+      subTitle: '',
+      avatar: '',
+      content: '内容质检队列于 2021-12-01 19:50:23 进行变更，请重新…',
+      time: '今天 12:20:01',
+      messageType: 0,
+    },
+  ]
+}

src/router/index.js

@@ -113,19 +113,19 @@ export const constantRoutes = [
     path: '/messageList',
     component: Layout,
     // redirect: '消息管理',
-    meta: { title: '消息管理', icon : "dashboard" },
+    meta: { title: '消息管理', icon : "message" },
     children: [
       {
         path: 'messageList',
         component: () => import('@/views/message/messageList'),
         name: 'messageList',
-        meta: { title: '消息列表', icon: 'user' }
+        meta: { title: '消息列表', icon: 'list' }
       },
       {
         path: 'addMessage',
         component: () => import('@/views/message/addMessage'),
         name: 'addMessage',
-        meta: { title: '创建消息', icon: 'user' }
+        meta: { title: '创建消息', icon: 'build' }
       }
     ]
   }

src/utils/env.ts

@@ -0,0 +1,3 @@
+const debug = process.env.NODE_ENV !== 'production';
+
+export default debug;

src/utils/setup-mock.ts

@@ -0,0 +1,23 @@
+import debug from './env';
+
+export default ({ mock, setup }: { mock?: boolean; setup: () => void }) => {
+  if (mock !== false && debug) setup();
+};
+
+export const successResponseWrap = (data: unknown) => {
+  return {
+    data,
+    status: 'ok',
+    msg: '请求成功',
+    code: 20000,
+  };
+};
+
+export const failResponseWrap = (data: unknown, msg: string, code = 50000) => {
+  return {
+    data,
+    status: 'fail',
+    msg,
+    code,
+  };
+};

src/views/message/messageList.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="right" :style="{ height: height, width: width }">
     <div class="up">
+      <div>
+        <div class="up-title"><i class="el-icon-search"></i>筛选搜索</div>
+        <div class="btn">
+          <el-button plain>重置</el-button>
+          <el-button type="primary" plain>查询列表</el-button> 
+        </div>       
+      </div>
       <div class="left-up">
-        <div class="up-title">🔍筛选搜索</div>
         <div class="up-input-title">
           消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>
-
         </div>
-
         <div class="up-input-title-right">
           <span class="demonstration">发布时间:</span>
           <el-date-picker v-model="value2" type="datetimerange" class="up-input-right" :picker-options="pickerOptions"
@@ -15,156 +19,194 @@
           </el-date-picker>
         </div>
       </div>
-      <div class="right-up">
-        <div class="anniu">
-          <el-button plain>重置</el-button>
-          <el-button type="primary" plain>查询列表</el-button>
-        </div>
-      </div>
     </div>
-
-
-
-
-      <div class="down">
-        
-        <div class="down-add">
-          <el-row :gutter="24">
+    <div class="down">
+      <div class="down-add">
+        <el-row :gutter="24">
           <el-col :span="22" class="down-title"> <i class="el-icon-tickets">消息列表</i> </el-col>
           <el-col :span="2"> <el-button>添加</el-button> </el-col>
-          </el-row>
-        </div>
-        
-        <div class="down-table">
-          <el-table :data="tableData" border style="width: 100%" class="messagetable">
-            <el-table-column
-              prop="id"
-              label="ID"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="messageTitle"
-              label="消息标题"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="messageTitle"
-              label="消息标题"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="phoneNumber"
-              label="手机号"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="publishTime"
-              label="发布时间"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="operate"
-              label="操作">
-            </el-table-column>
-          </el-table>
-        </div>
+        </el-row>
       </div>
-      <div class="bottom">
-        <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1"></el-pagination></div>
-        <span class="bottom-number">共{{ 0 }}条 </span>
+      <div class="down-table">
+        <el-table :data="tableData" border style="width: 100%" class="messagetable">
+          <el-table-column prop="id" label="ID">
+          </el-table-column>
+          <el-table-column prop="messageTitle" label="消息标题">
+          </el-table-column>
+          <el-table-column prop="phoneNumber" label="手机号">
+          </el-table-column>
+          <el-table-column prop="publishTime" label="发布时间">
+          </el-table-column>
+          <el-table-column prop="operate" label="操作">
+          </el-table-column>
+        </el-table>
       </div>
-     
     </div>
-
-
-
+    <div class="bottom">
+      <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1"></el-pagination></div>
+      <span class="bottom-number">共{{ 0 }}条 </span>
+    </div>
+  </div>
 </template>
-
 <script>
 export default {
-    data() {
-      return {
-        tableData: []
-      }
+  props: {
+
+  },
+  data() {
+    return {
+      tableData: [],
+      input: "",
+      value2: "",
+      mock: "",
+      mockMessageList: [],
+    }
+  },
+  mounted() {
+    this.getMockMessageList();
+    this.getTableList();
+  },
+  beforeDestroy() {
+
+  },
+  methods: {
+    getMockMessageList() {
+      var Mock = require('mockjs')
+      var data = Mock.mock({
+        'list|1-50': [{
+          'id|+1': 1,
+          'messageTitle': '您的产品使用期限即将截止，如需继续使用产品请前往购…',
+          'phoneNumber': '15888888888',
+          'publishTime': '2022-05-03',
+        }]
+      })
+      this.mockMessageList = data;
+    },
+    getTableList() {
+      this.tableData = this.mockMessageList.list
     }
   }
+}
+
+
 </script>
 
 <style scoped>
 .up {
   width: 96%;
-  height: 150px;
+  height: 170px;
   margin-top: 20px;
-  margin-left: 27px;
+  margin-left: 2%;
   border: 1px solid #ccc;
+  border-radius: 4px;
+
 }
 
 .up-title {
+  font-size: 20px;
+  width: 20%;
   margin-left: 20px;
   margin-top: 20px;
+  float: left;
+}
+.btn{
+  float: right;
+  padding-right: 3%;
+  margin-top: 2.5%;
 }
-
 .up-input {
   width: 250px;
   margin-left: 15px;
 }
 
 .up-input-title {
-  margin-top: 15px;
+  
   margin-left: 40px;
+
   float: left;
 }
 
 .up-input-right {
+  margin-left: 15px;
   width: 500px;
 }
 
 .up-input-title-right {
+  width: 800px;
   margin-left: 450px;
-  margin-top: 15px;
+  
 
 }
 
+.left-up {
+  width: 80%;
+  float: left;
+  height: 37px;
+  margin-top: 50px;
+}
+
+.right-up {
+  width: 16%;
+  margin-top: 2%;
+  float: right;
 
-.down{
+}
+
+.anniu {
+  padding-right: 5%;
+}
+
+.down {
   margin-top: 40px;
 }
-.down-add{
+
+.down-add {
   padding: 10px;
   margin: 0 27px;
-  border:1px solid #ccc ; 
+  border: 1px solid #ccc;
   border-radius: 2px
 }
-.down-title{
+
+.down-title {
   padding-top: 10px;
   color: #303133;
 }
-.down-table{
+
+.down-table {
   margin-top: 15px;
   text-align: center;
   margin: 35px 27px;
 }
 
-.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
-    word-break: break-word;
-    /* background-color: #f8f8f9; */
-    color: #515a6e;
-    height: 40px;
-    font-size: 13px;
-    text-align: center;
+.el-table .el-table__header-wrapper th,
+.el-table .el-table__fixed-header-wrapper th {
+  word-break: break-word;
+  /* background-color: #f8f8f9; */
+  color: #515a6e;
+  height: 40px;
+  font-size: 13px;
+  text-align: center;
 }
-.bottom-number{
+
+.bottom-number {
   padding-top: 5px;
   color: #303133;
   float: right;
 }
-.bottom-page{
-  float:right;
+
+.bottom-page {
+  float: right;
+}
+
+.el-icon-search{ 
+  padding-right: 10px;
 }
 /**
 自适应
 */
-
+/* .demonstration{
+  width: 50%;
+} */
 .right {
   float: none;
   width: 100%;