消息

src/const/columns/msgColumns.ts

@@ -4,7 +4,8 @@ const columns:Array<column>=
   {
     title:'发布时间',
     align:'center',
-    dataIndex:'time'
+    dataIndex:'time',
+    scopedSlots: { customRender: 'time' },
   },
   {
     title:'消息标题',
@@ -20,12 +21,14 @@ const columns:Array<column>=
   {
     title:'显示类型',
     align:'center',
-    dataIndex:'type'
+    dataIndex:'type',
+    scopedSlots: { customRender: 'type' },
   },
   {
     title:'状态',
     align:'center',
-    dataIndex:'state'
+    dataIndex:'state',
+    scopedSlots: { customRender: 'status' },
   },
   {
     title:'操作',

src/service/Notify/index.ts

+import baseAxios from '../index'
+
+export default class NotifyService {
+  static instance: NotifyService
+  static getInstance() {
+    if (!NotifyService.instance) {
+      NotifyService.instance = new NotifyService()
+    }
+    return NotifyService.instance
+  }
+
+  /**
+   * 新增消息
+   * @param data 
+   * @returns 
+   */
+  addNotify(data: {
+    content: string,
+    notify_type: number,
+    title: string
+  }) {
+    return baseAxios({
+      url: '/notify/admin/add',
+      method: 'post',
+      data,
+    })
+  }
+
+  /**
+   * 删除消息
+   * @param uuid 
+   * @returns 
+   */
+  removeNotify(uuid: string) {
+    return baseAxios({
+      url: '/notify/admin/delete',
+      method: 'delete',
+      params: {
+        uuid
+      },
+    })
+  }
+
+  /**
+   * 消息列表
+   * @param data 
+   * @returns 
+   */
+  notifyList(data: {
+    end_time?: number,
+    limit: number,
+    notify_status: number,
+    notify_type: number,
+    offset: number,
+    start_time?: number
+  }) {
+    return baseAxios({
+      url: '/notify/admin/list',
+      method: 'post',
+      data,
+    })
+  }
+
+  /**
+   * 修改消息
+   * @param data 
+   * @returns 
+   */
+  modifyNotify(data: {
+    content: string,
+    notify_type: number,
+    title: string,
+    uuid: string
+  }) {
+    return baseAxios({
+      url: '/notify/admin/modify',
+      method: 'post',
+      data,
+    })
+  }
+
+  /**
+   * 修改消息状态
+   * @param data 
+   * @returns 
+   */
+  modifyNotifyStatus(data: {
+    notify_status: number,
+    uuid: string
+  }) {
+    return baseAxios({
+      url: '/notify/admin/modify/status',
+      method: 'post',
+      data,
+    })
+  }
+}

src/views/Root/Msg/index.vue

@@ -3,8 +3,8 @@
     <p class=" text-2xl font-bold mb-5">消息管理</p>
     <!-- 消息分类 -->
     <span class=" mr-3">消息分类</span>
-    <a-select :default-value="msgType[0]" style="width: 120px; margin-right:10px;">
-      <a-select-option v-for="(type,i) in msgType" :key="i">{{type}}</a-select-option>
+    <a-select :default-value="1" style="width: 120px; margin-right:10px;">
+      <a-select-option v-for="type in msgType" :key="type.value">{{ type.label }}</a-select-option>
     </a-select>
     <!-- 操作 -->
     <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
@@ -12,12 +12,12 @@
     <!-- 发布弹窗 -->
     <a-modal v-model="show" title="发布消息" :centered="true" footer="">
       <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" ref="ruleForm" :rules="rules">
-        <a-form-model-item label="模板名称" :required="true" prop="module">
+        <!-- <a-form-model-item label="模板名称" :required="true" prop="module">
           <a-input v-model="form.module" placeholder="请输入模板名称" style="width: 200px"/>
-        </a-form-model-item>
+        </a-form-model-item> -->
         <a-form-model-item label="消息分类" :required="true" prop="type">
-          <a-select :default-value="msgType[0]" style="width: 200px" v-model="form.type"> 
-            <a-select-option v-for="(type,i) in msgType" :key="i">{{type}}</a-select-option>
+          <a-select :default-value="1" style="width: 200px" v-model="form.type"> 
+            <a-select-option v-for="type in msgType" :key="type.value">{{type.label}}</a-select-option>
           </a-select>
         </a-form-model-item>
         <a-form-model-item label="消息标题" :required="true" prop="title" >
@@ -38,23 +38,46 @@
       <p class=" text-base">{{current.content}}</p>
     </a-modal>
     <!-- 消息列表 -->
-    <a-table :columns="columns" :data-source="list" style=" text-align: center; margin-top:40px;" bordered >
+    <a-table
+      :columns="columns"
+      :data-source="list"
+      style=" text-align: center; margin-top:40px;"
+      bordered
+      :pagination="pagination"
+      @change="tableChange">
+        <!-- 发布时间 -->
+        <span slot="time" slot-scope="text,record">
+          {{ record.created_at | format }}
+        </span>
         <!-- 新闻内容 -->
         <span slot="content" slot-scope="text,record">
           <a href="javascript:;" @click="showModal(record)">查看</a>
         </span>
+        <!-- 显示类型 -->
+        <span slot="type" slot-scope="text,record">
+          {{ record.notify_type === 1 ? '滚动通知' : '系统消息' }}
+        </span>
+        <!-- 状态 -->
+        <span slot="status" slot-scope="text,record">
+          {{ record.notify_status === 1 ? '待发布' : '已发布' }}
+        </span>
         <!-- 操作 -->
         <span slot="action" slot-scope="text,record">
-          <a  v-if="record.state=='已下架'" 
-              @click="add(record.key)">
+          <a  v-if="record.notify_status==1" 
+              @click="add(record)">
               上架
           </a>
           <a  v-else
-              @click="remove(record.key)">
+              @click="remove(record)">
               下架
           </a>
           <a-divider type="vertical" />
-          <a  @click="onDelete(record.key)">
+          <a  v-show="record.notify_status === 1" 
+              @click="onEdit(record)">
+              编辑
+          </a>
+          <a-divider v-show="record.notify_status === 1" type="vertical" />
+          <a  @click="onDelete(record)">
               删除
           </a> 
         </span>
@@ -76,14 +99,22 @@
 <script lang="ts">
 import Vue from 'vue';
 import { columns } from '@/const/columns/msgColumns'
-import { FormModel } from 'ant-design-vue'
+import { FormModel, message } from 'ant-design-vue'
 import { msg } from '@/types/msg'
-import { msgList } from '@/mock/index'
 import { modal } from './const'
 import timerange from '@/components/TimePicker/index.vue'
+import Notify from '@/service/Notify/index'
+import Filter from '@/filter/index'
+
+const notify = new Notify()
 
 export default Vue.extend({
   components:{ timerange },
+  filters: {
+    format(value: string) {
+      return Filter.formatDate(value)
+    }
+  },
   computed:{
     columns(){
       return columns
@@ -93,46 +124,111 @@ export default Vue.extend({
     msgType:{
       type:Array,
       default(){
-        return ['滚动通知','系统消息']
+        return [
+          // {
+          //   label: '全部',
+          //   value: 0
+          // },
+          {
+            label: '滚动通知',
+            value: 1
+          },
+          {
+            label: '系统消息',
+            value: 2
+          }
+        ]
       }
     }
   },
+  created() {
+    this.getList()
+  },
   methods:{
+    getList() {
+      notify.notifyList({
+        limit: this.pagination.defaultPageSize,
+        offset: (this.pagination.current - 1) * this.pagination.defaultPageSize,
+        notify_status: 0,
+        // notify_type: this.form.type 
+        notify_type: 0
+      }).then(res => {
+        this.list = res.data.items
+        this.pagination.total = res.data.total
+      })
+    },
+    tableChange(e: {current: number}) {
+      this.pagination.current = e.current
+      this.getList()
+    },
     add(record:any){
       this.type = modal.on
       this.showActionModal = true
+      this.uuid = record.uuid
       this.title = '上架消息'
       this.text = '确定上架该消息吗？'
     },
     remove(record:any){
       this.type = modal.off
       this.showActionModal = true
+      this.uuid = record.uuid
       this.title = '下架消息'
       this.text = '确定下架该消息吗？'
     },
+    onEdit(record: any) {
+      this.form = {
+        title: record.title,
+        content: record.content,
+        type: record.notify_type
+      }
+      this.btnType = 'edit'
+      this.uuid = record.uuid
+      this.show = true
+    },
     onDelete(record:any){
       this.type = modal.delete
       this.showActionModal = true
+      this.uuid = record.uuid
       this.title = '删除消息'
       this.text = '确定删除该消息吗？'
     },
+    setStatus(status: number, msg: string) {
+      notify.modifyNotifyStatus({
+        notify_status: status,
+        uuid: this.uuid
+      }).then(res => {
+        if (res.code === 200) {
+          message.success(msg)
+          this.getList()
+        }
+      })
+    },
+    removeNotify() {
+      notify.removeNotify(this.uuid).then(res => {
+        if (res.code === 200) {
+          message.success('删除成功')
+          this.getList()
+        }
+      })
+    },
     onOk(record:any){
       if( this.type == modal.on){
-
+        this.setStatus(2, '发布成功')
       } else if( this.type == modal.off){
-        
+        this.setStatus(1, '下架成功')
       } else if( this.type == modal.delete){
-        
+        this.removeNotify()
       }
 
       this.showActionModal = false
     },
     query(){
-
+      this.getList()
     },
     publish(){
       this.resetForm()
       this.show = true
+      this.btnType = 'add'
     },
     showModal(current:object){
       this.visible = true
@@ -141,12 +237,43 @@ export default Vue.extend({
     handleOk(){
       this.visible = false
     },
+    addNotice() {
+      notify.addNotify({
+        content: this.form.content,
+        notify_type: this.form.type,
+        title: this.form.title
+      }).then(res => {
+        if (res.code === 200) {
+          message.success('新增成功')
+          this.show = false
+          this.getList()
+        }
+      })
+    },
+    editNotice() {
+      notify.modifyNotify({
+        content: this.form.content,
+        notify_type: this.form.type,
+        title: this.form.title,
+        uuid: this.uuid
+      }).then(res => {
+        if (res.code === 200) {
+          message.success('编辑成功')
+          this.show = false
+          this.getList()
+        }
+      })
+    },
     onSubmit() {
       (this.$refs.ruleForm as FormModel).validate(valid => {
         if (valid) {
-          this.show = false
+          if (this.btnType === 'add') {
+            this.addNotice()
+          } else {
+            this.editNotice()
+          }
         } else {
-          console.log('error submit!!');
+          message.error('请先填写表单内容')
           return false;
         }
       });
@@ -158,22 +285,21 @@ export default Vue.extend({
         this.form[m as formtype] = '' 
       })
     },
-    edit(record:msg){
-      let form = this.form
-      type msgtype = keyof msg
-      type formtype = keyof typeof form
-      Object.keys(this.form).map(m=>{
-       this.form[m as formtype] = record[m as msgtype ]
-      })
-      this.show = true
-    },
+    // edit(record:msg){
+    //   let form = this.form
+    //   type msgtype = keyof msg
+    //   type formtype = keyof typeof form
+    //   Object.keys(this.form).map(m=>{
+    //    this.form[m as formtype] = record[m as msgtype ]
+    //   })
+    //   this.show = true
+    // },
   },
   data(){
-    const list = msgList
     const rules={
-      module: [
-        { required: true, message: '请输入模板名称', trigger: 'blur' },
-      ],
+      // module: [
+      //   { required: true, message: '请输入模板名称', trigger: 'blur' },
+      // ],
       type: [
         { required: true, message: '请选择消息分类', trigger: 'blur' },
       ],
@@ -195,14 +321,21 @@ export default Vue.extend({
       labelCol: { span: 4 },
       wrapperCol: { span: 14 },
       form: {
-        name: '',
+        // name: '',
         title:'',
-        type:'',
+        type: 1,
         content:'',
-        module:''
+        // module:''
       },
       rules,
-      list
+      uuid: "",
+      list: [],
+      pagination: {
+        current: 1,
+        defaultPageSize: 10,
+        total: 0
+      },
+      btnType: 'add'
     }
   }
 })

src/views/Root/News/detail.vue

 <template>
   <div>
-    <p class=" text-2xl font-bold mb-5 ">{{title}}</p>
-    <p class=" text-gray-400">发布时间：{{time}} <span class=" ml-2">作者：{{name}}</span></p>
+    <p class=" text-2xl font-bold mb-5 ">{{ title }}</p>
+    <p class=" text-gray-400">发布时间：{{ time | format }} <span class=" ml-2">作者：{{ name }}</span></p>
     <div class="text-left p-5" v-html="content"></div>
     <!-- <p class="text-left p-5">{{content}}</p> -->
   </div>
@@ -10,6 +10,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import News from '@/service/News/index'
+import Filter from '@/filter/index'
 
 const news = new News()
 
@@ -22,6 +23,11 @@ export default Vue.extend({
       content:''
     }
   },
+  filters: {
+    format(value: string) {
+      return Filter.formatDate(value)
+    }
+  },
   methods: {
     getDetails() {
       const type = this.$route.query.type

src/views/Root/News/index.vue

@@ -29,7 +29,7 @@
         @change="tableChange">
         <!-- 发布时间 -->
         <span slot="created_at" slot-scope="text,record">
-          {{ record.created_at }}
+          {{ record.created_at | format }}
         </span>
         <!-- 新闻内容 -->
         <span slot="content" slot-scope="text,record">
@@ -86,17 +86,20 @@ import { getDate } from '@/utils/days/index'
 import timerange from '@/components//TimePicker/index.vue'
 import News from '@/service/News/index'
 import { message } from 'ant-design-vue'
+import Filter from '@/filter/index'
 
 const news = new News()
 
 export default Vue.extend({
   components:{ timerange },
+  filters: {
+    format(value: string) {
+      return Filter.formatDate(value)
+    }
+  },
   computed:{
     columns(){
       return columns
-    },
-    getTime() {
-
     }
   },
   props:{
@@ -140,7 +143,6 @@ export default Vue.extend({
   },
   methods:{
     tableChange(e: any) {
-      console.log(e)
       this.pagination.current = e.current
       this.getList()
     },
@@ -155,9 +157,9 @@ export default Vue.extend({
         console.log(res)
         this.list = res.data.items
         this.pagination.total = res.data.total
-        if (this.searchPageReqParams.title) {
-          this.findTitle()
-        }
+        // if (this.searchPageReqParams.title) {
+        //   this.findTitle()
+        // }
       })
     },
     findTitle() {
@@ -168,7 +170,11 @@ export default Vue.extend({
     },
     query(){
       console.log(this.searchPageReqParams);
-      this.getList()
+      if (this.searchPageReqParams.title) {
+        this.findTitle()
+      } else {
+        this.getList()
+      }
     },
     getNewTime(startTime:number,endTime:number){
       this.searchPageReqParams.start_time = startTime
@@ -234,6 +240,7 @@ export default Vue.extend({
       })
     },
     handleOk(record:any){
+      console.log(record)
       if( this.type == modal.on){
         this.setStatus(2, '上架成功')
       } else if( this.type == modal.off){
@@ -244,7 +251,7 @@ export default Vue.extend({
       }
       this.show = false
     },
-    toDetail(key:string, type:number|undefined){
+    toDetail(key:string, type:string){
       this.$router.push({name:'newsDetail',query:{key:key,type:type}})
     }
   }