detail

src/api/collection/seriesList.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+//获取套系列表
+export function getSeriesList(){
+    return request({
+        url:'/sytem/system/list',
+        method:'get'
+    })
+}

src/api/message/index.js

@@ -1,8 +1,26 @@
 import request from '@/utils/request'
 
+//获取消息列表
 export function getMessageList(list){
     return request({
         url:'system/infos/list',
         method:'get'
     })
+}
+//搜索消息功能
+
+//删除消息
+export const messageDel = (id) =>{
+    return request({
+        url:'/system/infos/' + id,
+        method: 'delete'
+    })
+}
+//新增消息
+export function addMesage(param){
+    return request({
+        url:'/system/infos',
+        method:'post',
+        data:param
+    }) 
 }

src/router/index.js

@@ -104,7 +104,7 @@ export const constantRoutes = [
   {
     path: '/collection',
     component: Layout,
-    
+
     meta: { title: '藏品管理', icon: 'collection' },
     children: [
       {
@@ -119,9 +119,16 @@ export const constantRoutes = [
         name: 'createseries',
         meta: { title: '创建套系', icon: 'createseries' }
       },
+      {
+        path: '/deatil',
+        hidden: true,
+        component: () => import('@/views/collection/detail/index'),
+        name: 'deatil',
+        meta: { title: '套系详情' }
+      }
     ]
   },
-  
+
   //app用户列表
   {
     path: '',
@@ -172,10 +179,10 @@ export const constantRoutes = [
         component: () => import('@/views/announcement/add/index'),
         name: 'announcementAdd',
         meta: { title: '创建公告', icon: 'createseries' }
-      }, 
+      },
       {
         path: 'announcementDetail',
-        hidden:true,
+        hidden: true,
         component: () => import('@/views/announcement/detail/index'),
         name: 'announcementDetail',
         meta: { title: '公告详情' }
@@ -199,7 +206,13 @@ export const constantRoutes = [
         component: () => import('@/views/message/messageCreate/index'),
         name: 'messageCreate',
         meta: { title: '创建消息', icon: 'createseries' }
-      },
+      }, {
+        path: 'messageDetail',
+        hidden: true,
+        component: () => import('@/views/message/detail/index'),
+        name: 'messageDetail',
+        meta: { title: '消息详情' }
+      }
     ]
   },
   //兑换列表

src/views/announcement/detail/index.vue

@@ -34,6 +34,7 @@ export default{
   methods:{
     getNotice(){
       this.notice=this.$route.params.row;
+      console.log(this.$route);
       console.log("公告",this.notice);
     }
   }

src/views/announcement/list/index.vue

@@ -4,37 +4,25 @@
     <div class="select-box">
       <div class="search-icon">
         <i class="el-icon-search"></i>
-        <span>  筛选搜查</span>
+        <span> 筛选搜查</span>
         <div class="search-button">
-          <el-button  @click="resetQuery">重置</el-button>
-          <el-button type="primary"  @click="handleQuery">查询搜索</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+          <el-button type="primary" @click="handleQuery">查询搜索</el-button>
         </div>
       </div>
-      <el-form  :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
-        <el-form-item class="inline" label="公告标题:  " prop="title" >
-          <el-input
-            v-model="queryParams.title"
-            placeholder="筛选公告标题"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
+        <el-form-item class="inline" label="公告标题:  " prop="title">
+          <el-input v-model="queryParams.title" placeholder="筛选公告标题" clearable @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item class="inline" label="发布时间:  " prop="dateRange">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            placeholder="选择时间范围"
-            value-format="yyyy-MM-dd"
-            @keyup.enter.native="handleQuery"
-            unlink-panels  >
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" placeholder="选择时间范围" value-format="yyyy-MM-dd" @keyup.enter.native="handleQuery"
+            unlink-panels>
           </el-date-picker>
         </el-form-item>
       </el-form>
     </div>
-    
+
 
     <!-- 标题 -->
     <el-row>
@@ -52,12 +40,7 @@
     <!-- 列表 -->
     <el-table v-loading="loading" :data="noticeList" border>
       <el-table-column label="ID" align="center" prop="noticeId" width="100" />
-      <el-table-column
-        label="公告标题"
-        align="center"
-        prop="noticeTitle"
-        :show-overflow-tooltip="true"
-      />
+      <el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
       <el-table-column label="发布时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -65,36 +48,21 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="170">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleDetail(scope.row)"
-          >查看详情</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
+          <el-button size="mini" type="text" @click="handleDetail(scope.row)">查看详情</el-button>
+          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <el-pagination
-      background
-      :current-page="pagination.current"
-      :page-size="pagination.pageSize"
-      layout="total, prev, pager, next"
-      :total="pagination.total"
-      @pagination="getList"
-      @current-change="onPageChange"
-      class="paper"
-    >
+    <el-pagination background :current-page="pagination.current" :page-size="pagination.pageSize"
+      layout="total, prev, pager, next" :total="pagination.total" @pagination="getList" @current-change="onPageChange"
+      class="paper">
     </el-pagination>
   </div>
 </template>
 
 <script>
-import { getNoticeList, deleteNotice,queryNotice } from '@/api/announce/list';
+import { getNoticeList, deleteNotice, queryNotice } from '@/api/announce/list';
 
 export default {
   name: "Notice",
@@ -105,18 +73,18 @@ export default {
       // 公告表格数据
       noticeList: [],
       // 查询的时间参数
-      dateRange:[],
+      dateRange: [],
       // 查询参数
       queryParams: {
         title: undefined,
-        noticeTimeLeft:undefined,
-        noticeTimeRight:undefined
+        noticeTimeLeft: undefined,
+        noticeTimeRight: undefined
       },
       // 分页参数
-      pagination:{
-        total:0,
-        current:1,
-        pageSize:10,
+      pagination: {
+        total: 0,
+        current: 1,
+        pageSize: 10,
       },
     };
   },
@@ -127,7 +95,7 @@ export default {
     /** 查询公告列表 */
     getList() {
       this.loading = true;
-      getNoticeList().then( res =>{
+      getNoticeList().then(res => {
         console.log(res);
         this.noticeList = res.rows;
         this.pagination.total = res.total;
@@ -138,10 +106,10 @@ export default {
     /** 搜索按钮操作 */
     handleQuery() {
       this.pagination.current = 1;
-      this.queryParams.noticeTimeLeft = this.dateRange ? this.dateRange[0] :undefined;
-      this.queryParams.noticeTimeRight = this.dateRange ? this.dateRange[1] :undefined;
+      this.queryParams.noticeTimeLeft = this.dateRange ? this.dateRange[0] : undefined;
+      this.queryParams.noticeTimeRight = this.dateRange ? this.dateRange[1] : undefined;
       this.loading = true;
-      queryNotice({...this.queryParams}).then(res =>{
+      queryNotice({ ...this.queryParams }).then(res => {
         //console.log(res);
         this.noticeList = res.rows;
         this.pagination.total = res.total;
@@ -150,21 +118,22 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRange=[]
+      this.dateRange = []
       this.resetForm("queryForm");
       this.getList();
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.$router.push({name:"announcementAdd"});
+      this.$router.push({ name: "announcementAdd" });
     },
     // 查看详情
     handleDetail(row) {
-      this.$router.push({name:"announcementDetail",params:{row}});
+      this.$router.push({ name: "announcementDetail", params: { row } });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$confirm('是否确认删除公告编号为"' + row.noticeId + '"的数据项？','提示').then(function() {
+      console.log(row);
+      this.$confirm('是否确认删除公告编号为"' + row.noticeId + '"的数据项？', '提示').then(function () {
         return deleteNotice(row.noticeId);
       }).then(() => {
         this.$message({
@@ -172,11 +141,11 @@ export default {
           message: '删除成功!'
         });
         this.getList();
-      }).catch(()=>{});
+      }).catch(() => { });
     },
     // 页号发生变化
-    onPageChange(number){
-      this.pagination.current=number;
+    onPageChange(number) {
+      this.pagination.current = number;
       this.getList();
     }
   }
@@ -187,6 +156,7 @@ export default {
 .el-row {
   margin-bottom: 20px;
 }
+
 .list-title {
   height: 50px;
   width: 100%;
@@ -206,21 +176,26 @@ export default {
   margin: 10px;
   float: right;
 }
-.select-box{
-  border: 1px solid rgb(0, 0, 0,0.1);
-  margin-bottom:20px;
+
+.select-box {
+  border: 1px solid rgb(0, 0, 0, 0.1);
+  margin-bottom: 20px;
   padding: 20px;
 }
-.inline{
+
+.inline {
   margin-right: 30px;
 }
-.search-icon{
+
+.search-icon {
   padding-bottom: 20px
 }
-.search-button{
+
+.search-button {
   float: right;
 }
-.paper{
+
+.paper {
   float: right;
   margin-top: 10px;
 }

src/views/collection/detail/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>detail</div>
+</template>

src/views/collection/serieslist/index.vue

@@ -8,38 +8,19 @@
             筛选搜索
           </span>
           <el-button type="primary" size="small">查询搜索</el-button>
-          <el-button @click="resetForm('ruleForm')" size="small"
-            >重置</el-button
-          >
+          <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
         </el-form-item>
 
         <el-form-item required>
           <el-col :span="10">
-            <el-form-item
-              label="藏品名称（套）："
-              label-width="140px"
-              prop="name"
-            >
-              <el-input
-                v-model="formInline.name"
-                placeholder="请输入藏品名称"
-                size="small"
-              ></el-input>
+            <el-form-item label="藏品名称（套）：" label-width="140px" prop="name">
+              <el-input v-model="formInline.name" placeholder="请输入藏品名称" size="small"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="11">
             <el-form-item label="创建时间：" label-width="160px" prop="date">
-              <el-date-picker
-                v-model="formInline.date"
-                type="daterange"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                :picker-options="pickerOptions"
-                size="small"
-              >
+              <el-date-picker v-model="formInline.date" type="daterange" align="right" unlink-panels range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" size="small">
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -48,8 +29,7 @@
     </div>
     <div class="total">
       <i class="el-icon-tickets" style="margin-right: 5px"></i>套系列表
-      共有<span style="color: #1890ff">{{ mockData.length }}</span
-      >条数据
+      共有<span style="color: #1890ff">{{ mockData.length }}</span>条数据
     </div>
     <div class="list">
       <el-radio-group v-model="tabPosition">
@@ -57,14 +37,9 @@
         <el-radio-button label="预售">预售</el-radio-button>
         <el-radio-button label="已过期">已过期</el-radio-button>
       </el-radio-group>
-      <el-table
-        :data="
-          mockData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
-        "
-        border
-        style="width: 100%"
-        :header-cell-style="{ background: '#ffffff', color: '#919398' }"
-      >
+      <el-table :data="
+        mockData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
+      " border style="width: 100%" :header-cell-style="{ background: '#ffffff', color: '#919398' }">
         <el-table-column prop="id" label="ID" width="100px" align="center">
         </el-table-column>
         <el-table-column prop="name" label="藏品名称（套）" align="center">
@@ -76,27 +51,29 @@
         <el-table-column prop="amount" label="藏品数量" align="center">
         </el-table-column>
         <el-table-column prop="state" label="状态" align="center">
+          <el-button type="success" plain v-show="shelves">已上架</el-button>
+          <el-button type="info" plain v-show="!shelves">未上链</el-button>
         </el-table-column>
         <el-table-column prop="operate" label="操作" align="center">
+          <template slot-scope="scope">
+          <el-button type="text" @click="handleDetail(scope.row)">商品列表</el-button>
+          <el-button type="text">修改</el-button>
+        </template>
         </el-table-column>
       </el-table>
     </div>
     <div>
-      <el-pagination
-        :current-page="currentPage"
-        background
-        layout="total,prev, pager, next"
-        :total="mockData.length"
-        style="margin-right: 10px"
-        :page-size.sync="pageSize"
-        @current-change="handleCurrentChange"
-      >
+      <el-pagination :current-page="currentPage" background layout="total,prev, pager, next" :total="mockData.length"
+        style="margin-right: 10px" :page-size.sync="pageSize" @current-change="handleCurrentChange">
       </el-pagination>
     </div>
   </div>
 </template>
 <script>
+// mock
 import { reqMockData } from "../../../mockjs/reqMock.js";
+//后端接口
+// import { getSeriesList } from "../../../api/collection/seriesList"
 export default {
   mounted() {
     reqMockData().then((res) => {
@@ -104,9 +81,12 @@ export default {
       // console.log(res);
       this.mockData = res.data;
     });
+    // this.getSeries()
   },
   data() {
     return {
+      //上架
+      shelves:true,
       currentPage: 1,
       pageSize: 10,
       formInline: { name: "", date: "" },
@@ -154,6 +134,16 @@ export default {
       // console.log(`当前页: ${val}`);
       this.currentPage = val;
     },
+    //获取套系列表
+    // getSeries(){
+    //   getSeriesList().then((res)=>{
+    //     console.log(res);
+    //   }) 
+    // }
+    //商品列表
+    handleDetail(row){
+      this.$router.push({name:"deatil",prams:{row}});
+    }
   },
 };
 </script>
@@ -167,20 +157,24 @@ export default {
   .text {
     font-size: medium;
   }
+
   button {
     float: right;
     margin-left: 15px;
   }
 }
+
 .total {
   border: 1px solid #ebebeb;
   margin: 20px 15px 20px 20px;
   padding: 20px;
   border-radius: 4px;
 }
+
 .list {
   margin: 20px 10px 20px 20px;
 }
+
 .el-pagination {
   float: right;
 }
@@ -189,14 +183,17 @@ export default {
 label.el-form-item__label {
   font-weight: 500;
 }
+
 .list .el-radio-button__inner {
   border-bottom-left-radius: 0;
   border-bottom: none;
   font-weight: 600;
 }
+
 .el-radio-button:first-child .el-radio-button__inner {
   border-radius: 4px 0 0 0;
 }
+
 .el-radio-button:last-child .el-radio-button__inner {
   border-radius: 0 4px 0 0;
 }
@@ -227,14 +224,17 @@ label.el-form-item__label {
 label.el-form-item__label {
   font-weight: 500;
 }
+
 .list .el-radio-button__inner {
   border-bottom-left-radius: 0;
   border-bottom: none;
   font-weight: 600;
 }
+
 .el-radio-button:first-child .el-radio-button__inner {
   border-radius: 4px 0 0 0;
 }
+
 .el-radio-button:last-child .el-radio-button__inner {
   border-radius: 0 4px 0 0;
 }

src/views/message/detail/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="app-container">
+      <div class="detail-box">
+        <el-row class="detail-title">消息详情</el-row>
+        <el-row class="notice-box">
+          <el-col >
+            <span class="notice-title">{{ message.title }}</span>
+          </el-col>
+          <el-col>
+            <span>{{ message.sendTime }}</span>
+          </el-col>
+          <el-col>
+            <div class="notice-content">
+              {{ message.detail }}
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </template>
+  <script>
+  export default{
+    name:"messageDetail",
+    data(){
+      return {
+        // 消息
+        message:{},
+      }
+    },
+    created(){
+      this.getMessage();
+    },
+    methods:{
+      getMessage(){
+        this.message=this.$route.params.row;
+        console.log(this.$route.params.row);
+        console.log("公告",this.message);
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .app-container{
+    text-align: center;
+  }
+  .detail-box{
+    width: 80%;
+    border: solid 1px #DCDFE6;
+    padding: 30px;
+    display: inline-block;
+    .el-col{
+      margin-bottom: 10px;
+    }
+    .detail-title{
+      font-weight: bold;
+      font-size: 25px;
+      margin-bottom: 20px;
+    }
+  }
+  .notice-title{
+    font-weight: bold;
+    font-size: 20px;
+  }
+  
+  .notice-content{
+    text-indent: 30px;
+    line-height: 23px;
+  }
+  .notice-box{
+    text-align: left;
+  }
+  </style>

src/views/message/messageCreate/index.vue

@@ -39,6 +39,7 @@ import {
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
+import { addMesage } from '../../../api/message'
 
 export default {
   name: 'FuncFormsEdit',
@@ -81,7 +82,20 @@ export default {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          alert('submit!');
+          addMesage({
+            addName:this.ruleForm.name,
+            addDate:this.ruleForm.date1,
+            addReceivedUsers:this.ruleForm.receivedUsers,
+            addDesc:this.ruleForm.desc
+          }).then((res)=>{
+            this.$message({
+              message:'添加成功',
+              type:'success'
+            })
+            console.log(res);
+            this.resetForm()
+            this.$router.push({name:"messageList"});
+          })
         } else {
           console.log('error submit!!');
           return false;

src/views/message/messageList/index.vue

@@ -5,7 +5,7 @@
         <div class="searchContainer">
           <i class="el-icon-search search">筛选搜索</i>
           <el-form-item class="searchButton">
-            <el-button type="primary" @click="onSubmit">查询搜索</el-button>
+            <el-button type="primary" @click="searchMessage">查询搜索</el-button>
             <el-button @click="resetForm()">重置</el-button>
           </el-form-item>
         </div>
@@ -36,7 +36,7 @@
         <el-table-column fixed="right" label="操作" align="center" width="200">
           <template slot-scope="scope">
             <el-button @click="handleClick(scope.row)" type="primary" size="small">查看详情</el-button>
-            <el-button @click="messageDel(scope.$index, scope.column)" type="danger" size="small">删除</el-button>
+            <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -49,21 +49,21 @@
 </template>
 
 <script>
-import { getMessageList } from "../../../api/message";
+import { getMessageList, messageDel } from "../../../api/message";
 
 export default {
   data() {
     return {
+      //搜索
       formInline: {
         messageTitle: '',
       },
       tableData: [],//所有数据
-      tableDataRst: [],// 搜索筛选之后的所有数据
-      value: "",
       currentPage: 1,
       pagesize: 5,
       setShow: false,
       setShowMsg: '更多查询条件',
+      value: '',
       styleArrow: true,
       setContent: '',
       setTitle: ''
@@ -71,7 +71,7 @@ export default {
   },
   methods: {
     //搜索功能
-    onSubmit() {
+    searchMessage() {
       // 若未输入值，则展示所有数据
       if (null === this.formInline.messageTitle || undefined === this.formInline.messageTitle) {
         this.tableDataRst = this.tableData;
@@ -94,9 +94,18 @@ export default {
       }
     },
     //消息删除
-    messageDel(row, column) {
-      console.log(column);
-      this.tableDataRst = this.tableData.splice(this.tableData[row], 1)
+    handleDelete(row) {
+      console.log(row);
+      return messageDel(row.id).then((res) => {
+        console.log(res);
+        this.$message({
+          type: 'error',
+          message: '成功删除'
+        })
+        this.getMessage()
+      }).catch((err) => {
+        console.log(err);
+      })
     },
     //分页功能
     handleSizeChange(size) {
@@ -123,13 +132,16 @@ export default {
       this.formInline.messageTitle = "";
       this.value = ""
     },
+    //查看消息详情
+    handleClick(row) {
+      console.log(row.id);
+      this.$router.push({ name: "messageDetail", params: { row } });
+    },
     //获取消息列表
     getMessage() {
       getMessageList().then((res) => {
-        console.log(res);
-        console.log(res.rows);
         this.tableData = res.rows
-        console.log(this.tableData);
+        console.log(res);
       })
     },
   },
@@ -168,8 +180,3 @@ export default {
   float: right;
 }
 </style>
-
-.searchButton {
-  float: right;
-}
-</style>