公告接口

src/api/notice/notice.js

@@ -1,29 +1,29 @@
 import request from '@/utils/request'
-// 获取公告详细信息
-// export function getNotice2() {
-//     return request({
-//         url: 'https://www.fastmock.site/mock/094301fab3b0ae090e5afe11df9aba38/dev-api/notice',//只有dev-api才不会被影响
-//         method: 'get'
-//     })
-// }
+// 获取公告信息列表
 export function getNotice(params) {
     return request({
-        url: '/api/notice/getData',
-        // method: 'get',
+        url: '/system/poNotice/list',
         params
     })
 }
-export function searchNotice(params) {
+// 添加公告信息
+export function addNotice(data) {
     return request({
-        url: '/api/notice/searchData',
-        // method: 'get',
-        params
+        url: '/system/poNotice',
+        method: 'post',
+        data
     })
 }
-export function detailNotice(params) {
+// 获取公告详情
+export function detailNotice(id) {
     return request({
-        url: '/api/notice/detailNotic',
-        // method: 'get',
-        params
+        url: '/system/poNotice/' + id,
+    })
+}
+// 删除公告信息
+export function deleteNotice(id) {
+    return request({
+        url: '/system/poNotice/' + id,
+        method: 'delete'
     })
 }

src/views/notice/addNotice.vue

@@ -1,110 +1,102 @@
 <template>
   <div>
-    <el-card>
-      <el-page-header @back="goback" content="创建公告"></el-page-header>
-    </el-card>
     <div class="body">
       <div class="s-body">
-        <el-form
-          :model="ruleForm"
-          :rules="rules"
-          ref="ruleForm"
-          label-width="100px"
-          class="demo-ruleForm"
-        >
-          <el-form-item label="公告名称:  " prop="name">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="公告名称: " prop="name">
             <el-input v-model="ruleForm.name"></el-input>
           </el-form-item>
-
-          <el-form-item label="发布时间:  " required>
-            <el-col>
-              <el-form-item prop="date2">
-                <el-time-picker
-                  placeholder="选择时间"
-                  v-model="ruleForm.date2"
-                  style="width: 100%"
-                ></el-time-picker>
-              </el-form-item>
-            </el-col>
+          <el-form-item label="发布时间: " required>
+            <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期">
+            </el-date-picker>
+            <el-time-picker placeholder="选择时间" v-model="ruleForm.time"></el-time-picker>
           </el-form-item>
           <el-form-item label="公告内容:  " prop="name">
-            <mavon-editor
-              ref="md"
-              v-model="notice.noticeContent"
-              style="height: calc(100vh - 400px)"
-            />
+            <mavon-editor ref="md" v-model="notice.noticeContent" style="height: calc(100vh - 400px)" />
           </el-form-item>
           <el-form-item>
-            <el-button
-              type="danger"
-              @click="dialogVisible = true"
-              style="float: right"
-              >发布公告</el-button
-            >
-
-            
+            <el-button type="danger" @click="confirmGG" style="float: right">发布公告</el-button>
           </el-form-item>
         </el-form>
-        <el-dialog
-              title="提示"
-              :visible.sync="dialogVisible"
-              width="20%"
-              :before-close="handleClose"
-            >
-              <span>确认发布公告吗？</span>
-              <span slot="footer" class="dialog-footer">
-                <el-button @click="dialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="dialogVisible = false"
-                  >确 定</el-button
-                >
-              </span>
-            </el-dialog>
+        <el-dialog title="提示" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
+          <span>确认发布公告吗？</span>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="cancel">取 消</el-button>
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+          </span>
+        </el-dialog>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { addNotice } from '../../api/notice/notice'
 export default {
   name: "Addnotice",
-
   data() {
     return {
       ruleForm: {
-        name: "",
-        date2: "",
+        name: '',
+        date: '',
+        time: '',
       },
       notice: {
         noticeContent: "",
       },
       rules: {
-        name: [{ required: true, message: "请输入公告名称", trigger: "blur" }],
-        date2: [
-          {
-            type: "date",
-            required: true,
-            message: "请选择时间",
-            trigger: "change",
-          },
+        name: [
+          { required: true, message: '请输入公告名称', trigger: 'blur' },
+        ],
+        date: [
+          { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
         ],
+        time: [
+          { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
+        ]
       },
       dialogVisible: false,
     };
   },
 
   methods: {
-    goback() {
-      window.history.go(-1);
-    },
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
+    submitForm() {
+      this.$refs.ruleForm.validate((valid) => {
         if (valid) {
-          alert("submit!");
+          let nyr = this.$formatDate(this.ruleForm.date, 'yyyy-MM-dd');
+          let sfm = this.$formatDate(this.ruleForm.time, 'hh:mm:ss');
+          let notice = {
+            noticeTitle: this.ruleForm.name,
+            noticeContent: this.notice.noticeContent,
+            createTime: nyr + ' ' + sfm
+          }
+          addNotice(notice).then(() => {
+            this.ruleForm.name = '';
+            this.ruleForm.date = '';
+            this.ruleForm.time = '';
+            this.notice.noticeContent = '';
+          })
+          this.$notify({
+            title: '成功',
+            message: '创建消息成功',
+            type: 'success'
+          });
+          this.$router.push("./noticeList");
         } else {
-          console.log("error submit!!");
-          return false;
+          this.$notify({
+            title: '警告',
+            message: '请填写内容',
+            type: 'warning'
+          });
         }
       });
+      this.dialogVisible = false
+    },
+    cancel() {
+      this.dialogVisible = false
+    },
+    confirmGG() {
+      this.dialogVisible = true
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
@@ -114,7 +106,7 @@ export default {
         .then((_) => {
           done();
         })
-        .catch((_) => {});
+        .catch((_) => { });
     },
   },
 };
@@ -132,7 +124,6 @@ export default {
 .s-body {
   margin: 0 auto;
   width: 70%;
-  /* background-color: pink; */
   padding-top: 40px;
 }
 </style>

src/views/notice/details.vue

@@ -2,9 +2,9 @@
     <div class="body">
         <div class="container">
             <h2 class="details">公告详情</h2>
-            <h3 class="title">{{notical.title}}</h3>
-            <div class="date">{{notical.time}}</div>
-            <p class="content">{{notical.content}}</p>
+            <h3 class="title">{{ notical.title }}</h3>
+            <div class="date">{{ notical.time }}</div>
+            <p class="content">{{ notical.content }}</p>
         </div>
     </div>
 </template>
@@ -23,12 +23,16 @@ export default {
         }
     },
     created() {
-        console.log(this.$route.params.id);
         let con = {
-            id: this.$route.params.id
+            poNoticeId: this.$route.params.id
         }
-        detailNotice(con).then(({data}) => {
-            this.notical = data[0];
+        detailNotice(con.poNoticeId).then((data) => {
+            this.notical = {
+                id: data.data.noticeId,
+                title: data.data.noticeTime,
+                content: data.data.noticeContent,
+                time: data.data.createTime
+            }
         })
     }
 }

src/views/notice/noticeList.vue

@@ -1,15 +1,12 @@
 <template>
   <div>
-    <el-card>
-      <el-page-header @back="goback" content="公告列表"></el-page-header>
-    </el-card>
     <el-container>
       <el-header style="height: 120px;">
         <div id="header-one">
           <h3 class="el-icon-search" style="margin-left: 10px;">筛选搜索</h3>
           <div id="header-one-btu">
             <el-button @click="empty">重置</el-button>
-            <el-button type="primary" @click="check">搜索</el-button>
+            <el-button type="primary">搜索</el-button>
           </div>
         </div>
         <div id="header-two">
@@ -33,131 +30,97 @@
           </el-row>
         </div>
       </el-header>
-      <el-main style="height: 110px;">
+      <el-main style="height: 100px;">
         <h3 class="el-icon-tickets">公告列表</h3>
-        <el-button id="main-btu" @click="addNotice()">添加</el-button>
+        <el-button id="main-btu" @click="addNotice">添加</el-button>
       </el-main>
       <div>
-        <el-table height="280" :data="tableData" border style="width: 99%" id="footer-t">
+        <el-table height="310" :data="tableData" border style="width: 96%" id="footer-t">
           <el-table-column type="index" label="ID" width="400" align="center">
           </el-table-column>
-          <el-table-column prop="title" label="公告标题" align="center">
+          <el-table-column prop="noticeTitle" label="公告标题" align="center">
           </el-table-column>
-          <el-table-column prop="time" label="发布时间" align="center">
+          <el-table-column prop="createTime" label="发布时间" align="center">
           </el-table-column>
           <el-table-column prop="address" label="操作" align="center">
             <template slot-scope="scope">
-              <el-button type="primary" @click="details(scope.row)">查看详情 </el-button>
-              <el-button type="danger" @click="deleteNoticeById"> 删除</el-button>
+              <el-button type="primary" @click="details(scope.row)">查看详情</el-button>
+              <el-button type="danger" @click="deleteNoticeById(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
         <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
           id="page">
         </el-pagination>
-        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-          :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
-          layout="total, sizes, prev, pager, next, jumper" :total="10"></el-pagination> -->
       </div>
     </el-container>
   </div>
 </template>
 <script>
-import { getNotice, searchNotice } from "@/api/notice/notice"
+import { getNotice, deleteNotice } from "@/api/notice/notice"
 export default {
   data() {
     return {
       anForm: {
         anName: '',
       },
-      // queryInfo: {
-      //   query: "",
-      //   pagenum: 1,
-      //   pagesize: 2,
-      // },
-      tableData: [],
-      pageData: {
-        page: 1,
-        limit: 10
+      dataput: '',
+      tableData: [],  // 具体数据
+      total: 1,   // 数据个数
+      pageInfo: { // 分页信息
+        pageNum: 1,
+        pageSize: 10
       },
-      total: 1,
-      dataput: ''
     }
   },
-
   created() {
     this.getnotice()
   },
   methods: {
-    goback() {
-      window.history.go(-1)
-    },
+    // 添加跳转
     addNotice() {
       this.$router.push('./addnotice')
     },
-    //获取公告
-    async getnotice() {
-      getNotice(this.pageData).then((data) => {
-        this.tableData = data.list;
-        this.total = data.count;
+    // 获取公告
+    getnotice() {
+      getNotice(this.pageInfo).then((data) => {
+        this.tableData = data.rows;
+        this.total = data.total;
       })
-      //解构赋值data
-      // const { data: res } = await getNotice((resolve, reject) => {
-      //   console.log(resolve);
-      // }).catch((e) => {
-      //   console.log(e);
-      // })
-      // console.log(await getNotice())
-      // this.tableData = res.list
     },
-    // handleSizeChange(newSize) {
-    //   this.queryInfo.pagesize = newSize;
-    //   this.getnotice();
-    // },
-
+    // 查看详情
+    details(val) {
+      this.$router.push('./details/' + val.noticeId)
+    },
+    // 分页信息
     handleCurrentChange(newPage) {
-      // this.queryInfo.pagenum = newPage;
-      // this.getnotice();
-      this.pageData.page = newPage;
+      this.pageInfo.pageNum = newPage;
       this.getnotice();
     },
-
-    /**重置按钮 */
+    // 重置按钮
     empty() {
       this.anForm.anName = "";
+      this.dataput = "";
       this.getnotice();
     },
-    /**搜索按钮 */
-    check() {
-      if (this.anForm.anName) {
-        let con = {
-          name: this.anForm.anName
-        }
-        searchNotice(con).then((data) => {
-          this.tableData = data.list;
-          this.total = data.count;
-        })
-      } else {
-        this.getnotice();
-      }
-    },
-
-    /**查看详情 */
-    details(val) {
-      this.$router.push('./details/' + val.id)
-    },
-
-    /**删除公告 */
+    // 删除操作 // 存在问题************************************************************
     deleteNoticeById(id) {
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
-        });
+        let poNoticeIds = id.noticeId
+        deleteNotice(poNoticeIds).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+          this.getnotice();
+        }).catch(err => {
+          // 存在问题************************************************************
+          console.log(err);
+        })
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -165,6 +128,21 @@ export default {
         });
       });
     }
+
+    /**搜索按钮 */  // 没找到具体接口
+    // check() {
+    //   if (this.anForm.anName) {
+    //     let con = {
+    //       name: this.anForm.anName
+    //     }
+    //     searchNotice(con).then((data) => {
+    //       this.tableData = data.list;
+    //       this.total = data.count;
+    //     })
+    //   } else {
+    //     this.getnotice();
+    //   }
+    // },
   }
 };
 
@@ -185,20 +163,15 @@ export default {
   margin: 30px;
 }
 
-/* .el-footer {} */
-
 #footer-t {
   color: #333;
   border: 1px solid #d3d7d4;
   border-radius: 5px;
-  margin-left: 10px;
-  margin-top: 30px;
-}
+  margin: 30px auto;
 
-/* #header-one {} */
+}
 
 #header-two {
-  /* background-color: aqua; */
   margin-left: 55px;
 }
 
@@ -218,6 +191,6 @@ export default {
 
 #page {
   float: right;
-  margin-top: 15px;
+  margin-right: 20px;
 }
 </style>