我的消息页面开发

src/api/notifyManage/index.js

@@ -2,10 +2,7 @@ import request from '@/utils/request';
 
 // 模板管理分页
 export async function notifyTemplatePageAPI(data) {
-  const res = await request.post(`/sys/notifytemplate/page`, {
-    data: data
-  });
-  console.log(data);
+  const res = await request.post(`/sys/notifytemplate/page`, data);
   if (res.data.code == 0) {
     return res.data.data;
   }

src/api/notifyRecord/index.js

@@ -2,9 +2,7 @@ import request from '@/utils/request';
 
 // 消息分页
 export async function notifyMessagePageAPI(data) {
-  const res = await request.post(`/sys/notifymessage/page`, {
-    data
-  });
+  const res = await request.post(`/sys/notifymessage/page`, data);
   if (res.data.code == 0) {
     return res.data.data;
   }

src/views/notifyManage/notifyRecord/index-search.vue

@@ -25,6 +25,19 @@
           ></el-input>
         </el-form-item>
       </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="状态：" prop="readStatus">
+          <el-select
+            style="width: 100%"
+            v-model="params.readStatus"
+            placeholder="请选择状态"
+            clearable
+          >
+            <el-option :value="1" label="已读"></el-option>
+            <el-option :value="0" label="未读"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
       <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
         <div class="ele-form-actions">
           <el-button
@@ -38,6 +51,22 @@
           <el-button @click="reset">重置</el-button>
         </div>
       </el-col>
+      <el-col
+        v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="创建时间：" prop="createTime">
+          <el-date-picker
+            v-model="params.createTime"
+            style="width: 100%"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+          />
+        </el-form-item>
+      </el-col>
+
     </el-row>
   </el-form>
 </template>
@@ -47,7 +76,9 @@ export default {
     // 默认表单数据
     const defaultParams = {
       userName: '',
-      templateCode: ''
+      templateCode: '',
+      readStatus:'',
+      createTime:null,
     };
     return {
       // 表单数据

src/views/notifyManage/notifyRecord/index.vue

@@ -16,6 +16,11 @@
             详情
           </el-link>
         </template>
+        <template v-slot:readStatus="{row}">
+          <el-tag v-if="row.readStatus" type="success">{{ '已读' }}</el-tag>
+          <el-tag v-else type="danger">{{ '未读' }}</el-tag>
+
+        </template>
       </ele-pro-table>
     </el-card>
     <!--新增、修改-->
@@ -45,10 +50,9 @@ export default {
           fixed: 'left'
         },
         {
-          prop: 'templateNickname',
-          label: '发送人',
-          minWidth: '60',
-          align: "center",
+          prop: 'templateContent',
+          label: '消息',
+          minWidth: '150',
         },
         {
           prop: 'templateCode',
@@ -56,12 +60,6 @@ export default {
           minWidth: '120',
           align: "center",
         },
-        {
-          prop: 'templateContent',
-          label: '模板内容',
-          minWidth: '150',
-          align: "center",
-        },
         {
           prop: 'userName',
           label: '接收人',
@@ -70,24 +68,29 @@ export default {
         },
         {
           prop: 'readStatus',
-          label: '是否已读',
-          minWidth: '60',
+          label: '状态',
+          width: '90',
+          slot:'readStatus',
           align: "center",
-          formatter: (_row, _column, cellValue) => {
-            return _row.readStatus ? '已读' : '未读';
-          }
+
         },
         {
           prop: 'readTime',
           label: '阅读时间',
-          minWidth: '120',
+          width: '170',
           align: "center",
           showOverflowTooltip: true,
         },
+        {
+          prop: 'templateNickname',
+          label: '发送人',
+          width: '100',
+          align: "center",
+        },
         {
           prop: 'createTime',
           label: '创建时间',
-          minWidth: '120',
+          width: '170',
           align: "center",
           showOverflowTooltip: true,
         },

src/views/notifyManage/templateManage/components/addOrEditDialog.vue

@@ -24,7 +24,7 @@
           placeholder="请输入"
         />
       </el-form-item>
-      <el-form-item label="发件人名称:" prop="nickname">
+      <el-form-item label="默认发送人:" prop="nickname">
         <el-input
           clearable
           :disabled="dialogType=='view'"
@@ -109,7 +109,7 @@ export default {
         nickname: [
           {
             required: true,
-            message: '请输入发件人名称',
+            message: '请输入默认发送人',
             trigger: 'blur'
           }
         ],

src/views/notifyManage/templateManage/index.vue

@@ -21,8 +21,7 @@
             type="primary"
             :underline="false"
             icon="el-icon-edit"
-            @click="handleAddOrEdit('update',row)"
-          >
+            @click="handleAddOrEdit('update',row)">
             编辑
           </el-link>
           <el-popconfirm
@@ -34,6 +33,11 @@
             </template>
           </el-popconfirm>
         </template>
+        <template v-slot:status="{row}">
+          <el-tag v-if="row.status" type="success">{{ '启用' }}</el-tag>
+          <el-tag v-else type="danger">{{ '禁用' }}</el-tag>
+
+        </template>
       </ele-pro-table>
     </el-card>
     <!--新增、修改-->
@@ -74,27 +78,28 @@ export default {
           minWidth: '120',
           align: "center",
         },
-        {
-          prop: 'nickname',
-          label: '发送人名称',
-          minWidth: '80',
-          align: "center",
-        },
+
 
         {
           prop: 'content',
           label: '模板内容',
           minWidth: '150',
+        },
+        {
+          prop: 'nickname',
+          label: '默认发送人',
+          width: '100',
           align: "center",
         },
         {
           prop: 'status',
-          label: '开启状态',
-          minWidth: '60',
+          label: '状态',
+          width: '80',
           align: "center",
-          formatter: (_row, _column, cellValue) => {
-            return _row.status ? '启用' : '禁用';
-          }
+          slot:"status",
+          // formatter: (_row, _column, cellValue) => {
+          //   return _row.status ? '启用' : '禁用';
+          // }
         },
         {
           prop: 'remark',
@@ -105,13 +110,13 @@ export default {
         {
           prop: 'createTime',
           label: '创建时间',
-          minWidth: '140',
+          width: '170',
           align: "center",
         },
         {
           columnKey: 'action',
           label: '操作',
-          width: 250,
+          width: 150,
           align: 'center',
           slot: 'action',
           fixed: 'right'

vue.config.js

@@ -33,7 +33,7 @@ module.exports = {
       // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
       '/api': {
         // target: 'http://124.71.68.31:50001',
-        target: 'http://192.168.1.125:18086',
+        target: 'http://192.168.1.147:18086',
         // target: 'http://192.168.1.132:18086',
         // target: 'http://192.168.1.147:18087',
         changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域