senderName filter and selectByTitile completed

ui/src/assets/svg/notice_search.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682968756096" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2625" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z" p-id="2626"></path></svg>

ui/src/components/NoticeEdit.vue

@@ -1,56 +0,0 @@
-<template>
-    <el-form :model="form">
-      <el-form-item label="Promotion name" :label-width="formLabelWidth">
-        <el-input v-model="form.name" autocomplete="off" />
-      </el-form-item>
-      <el-form-item label="Zones" :label-width="formLabelWidth">
-        <el-select v-model="form.region" placeholder="Please select a zone">
-          <el-option label="Zone No.1" value="shanghai" />
-          <el-option label="Zone No.2" value="beijing" />
-        </el-select>
-      </el-form-item>
-    </el-form>
-  <span class="dialog-footer">
-          <el-button @click="dialogFormVisible = false">Cancel</el-button>
-          <el-button type="primary" @click="dialogFormVisible = false">
-            Confirm
-          </el-button>
-      </span>
-</template>
-
-<script>
-export default {
-  name: "NoticeEdit",
-  data(){
-    return{
-      dialogFormVisible:false,
-      formLabelWidth:'140px',
-      form:[{
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: '',
-      }]
-    }
-  }
-}
-
-</script>
-<style scoped>
-.el-button--text {
-  margin-right: 15px;
-}
-.el-select {
-  width: 300px;
-}
-.el-input {
-  width: 300px;
-}
-.dialog-footer button:first-child {
-  margin-right: 10px;
-}
-</style>

ui/src/components/notice/NoticeEdit.vue

@@ -0,0 +1,55 @@
+<template>
+    <el-form :model="form">
+        <el-form-item label="Promotion name" :label-width="formLabelWidth">
+            <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="Zones" :label-width="formLabelWidth">
+            <el-select v-model="form.region" placeholder="Please select a zone">
+                <el-option label="Zone No.1" value="shanghai" />
+                <el-option label="Zone No.2" value="beijing" />
+            </el-select>
+        </el-form-item>
+    </el-form>
+    <span class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false"> Confirm </el-button>
+    </span>
+</template>
+
+<script lang="js">
+export default {
+    name: 'NoticeEdit',
+    data() {
+        return {
+            dialogFormVisible: false,
+            formLabelWidth: '140px',
+            form: [
+                {
+                    name: '',
+                    region: '',
+                    date1: '',
+                    date2: '',
+                    delivery: false,
+                    type: [],
+                    resource: '',
+                    desc: ''
+                }
+            ]
+        }
+    }
+}
+</script>
+<style scoped>
+.el-button--text {
+    margin-right: 15px;
+}
+.el-select {
+    width: 300px;
+}
+.el-input {
+    width: 300px;
+}
+.dialog-footer button:first-child {
+    margin-right: 10px;
+}
+</style>

ui/src/components/notice/NoticeHead.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="notice-head-layout">
+        <el-row :gutter="20">
+            <el-col :span="5">
+                <el-input v-model="search_title" placeholder="请输入公告标题">
+                    <template #prefix>
+                        <el-icon :size="SIZE_ICON_MD()" :color="COLOR_PRODUCTION()">
+                            <icon-pinnacle-notice_search />
+                        </el-icon>
+                    </template>
+                </el-input>
+            </el-col>
+            <el-col :span="4">
+                <el-button type="primary" @click="this.$emit('selectByTitle', search_title)"
+                    >搜索</el-button
+                >
+            </el-col>
+            <el-col :span="8">
+                <div class="gutter" />
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script lang="ts">
+import { COLOR_PRODUCTION, SIZE_ICON_MD } from '@/constants/Common.constants'
+
+export default {
+    name: 'NoticeHead',
+    methods: {
+        COLOR_PRODUCTION() {
+            return COLOR_PRODUCTION
+        },
+        SIZE_ICON_MD() {
+            return SIZE_ICON_MD
+        }
+    },
+    data() {
+        return {
+            search_title: ''
+        }
+    }
+}
+</script>
+
+<style scoped>
+.el-row {
+    height: 80%;
+    margin-top: 15px;
+}
+
+.el-row:last-child {
+    margin-bottom: 0;
+}
+
+.el-col {
+    border-radius: 4px;
+    margin-left: 20px;
+}
+
+.grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+}
+</style>

ui/src/components/notice/NoticeTable.vue

@@ -1,13 +1,17 @@
 <template>
-    <el-button @click="resetDateFilter">reset date filter</el-button>
-    <el-button @click="clearFilter">reset all filters</el-button>
+    <el-button @click="clearFilter">清除筛选条件</el-button>
     <el-table
         ref="tableRef"
-        row-key="date"
-        :data="tableData"
+        :data="selectData"
         style="width: 100%"
         border
         highlight-current-row
+        :header-cell-style="{
+            background: 'darksalmon',
+            'text-align': 'center',
+            color: '#fff',
+            'font-size': '20px'
+        }"
     >
         <el-table-column
             prop="title"
@@ -23,14 +27,6 @@
             label="生效时间"
             sortable
             width="180"
-            column-key="date"
-            :filters="[
-                { text: '2016-05-01', value: '2016-05-01' },
-                { text: '2016-05-02', value: '2016-05-02' },
-                { text: '2016-05-03', value: '2016-05-03' },
-                { text: '2016-05-04', value: '2016-05-04' }
-            ]"
-            :filter-method="filterHandler"
             :formatter="formatDate"
         />
         <el-table-column
@@ -45,27 +41,28 @@
             prop="sender.username"
             label="发布人"
             width="100"
-            :filters="[
-                { text: 'Home', value: 'Home' },
-                { text: 'Office', value: 'Office' }
-            ]"
+            column-key="senderName"
+            :filters="filterSenderName"
             :filter-method="filterTag"
             filter-placement="bottom-end"
         >
             <template #default="scope">
                 <el-tag
-                    :type="scope.row.sender.userName === 'Home' ? '' : 'success'"
+                    :type="scope.row.sender.username === 'cyb' ? '' : 'success'"
                     disable-transitions
                     >{{ scope.row.sender.username }}
                 </el-tag>
             </template>
         </el-table-column>
-        <el-table-column label="Operations">
+        <el-table-column label="操作">
             <template #default="scope">
-                <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+                <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
                     >编辑
                 </el-button>
-                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
+                <el-button
+                    size="small"
+                    type="danger"
+                    @click="this.$emit('handleDelete', scope.row.id)"
                     >删除
                 </el-button>
             </template>
@@ -81,26 +78,19 @@
 </template>
 
 <script lang="ts">
-import axios from "axios";
-import NoticeEdit from "@/components/NoticeEdit.vue";
-
-
 export default {
-    components: {NoticeEdit},
-    component: {NoticeEdit},
     data() {
         return {
-            tableData: [],
+            filterSenderName: [],
             dialogFormVisible: false,
             dialogFormTitle: ''
         }
     },
+    props: ['msg', 'selectData'],
     methods: {
-        resetDateFilter() {
-            this.$refs.tableRef.clearFilter(['date'])
-        },
         clearFilter() {
-            this.$refs.tableRef.clearFilter()
+            this.$refs.tableRef.clearFilter(['senderName'])
+            this.$emit('clearFilter')
         },
         formatter(row, column) {
             return row.title
@@ -108,38 +98,37 @@ export default {
         filterTag(value, row) {
             return row.sender.username === value
         },
-        filterHandler(value, row, column) {
-            const property = column['property']
-            return row[property] === value
-        },
         formatDate(row, column) {
             // 获取单元格数据
-            let data = row[column.property]
+            const data = row[column.property]
             if (data == null) return null
 
-            let dt = data.replace('T', ' ')
+            const dt = data.replace('T', ' ')
             return dt
         },
         handleEdit(index, row) {
             this.dialogFormVisible = true
             this.dialogFormTitle = row.title
-            console.log(index + "   " + row);
-        },
-        handleDelete(index, row) {
-            axios.delete('http://localhost:8621/notice/' + row.id).then((response) => {
-                console.log(response.data)
-                this.selectAllNotice()
-            })
-        },
-        selectAllNotice() {
-            axios.get('http://localhost:8621/notice').then((response) => {
-                this.tableData = response.data.data;
-                console.log(response.data.data)
-            })
+            console.log(index + '   ' + row)
         }
     },
-    mounted() {
-        this.selectAllNotice()
+    mounted() {},
+    updated() {
+        this.filterSenderName = []
+        const nameArray = []
+        for (let i = 0; i < this.selectData.length; i++) {
+            nameArray.push(this.selectData[i].sender.username)
+        }
+        const newArr = nameArray.filter((item, i, arr) => {
+            return arr.indexOf(item) === i
+        })
+        for (let j = 0; j < newArr.length; j++) {
+            const senderName = { text: '', value: '' }
+            senderName.text = newArr[j]
+            senderName.value = newArr[j]
+            this.filterSenderName.push(senderName)
+        }
+        console.log(this.filterSenderName)
     }
 }
 </script>

ui/src/pages/notice/NoticeHome.vue

@@ -1,14 +1,65 @@
 <template>
-  <notice-table/>
+    <div class="notice-home-layout">
+        <el-container>
+            <el-header>
+                <notice-head @selectByTitle="selectByTitle"></notice-head>
+            </el-header>
+            <el-main>
+                <notice-table
+                    :selectData="selectData"
+                    @handleDelete="handleDelete"
+                    @clearFilter="clearFilter"
+                ></notice-table>
+            </el-main>
+        </el-container>
+    </div>
 </template>
 
-<script>
-import NoticeTable from "@/components/NoticeTable.vue";
+<script lang="ts">
+import axios from 'axios'
+
 export default {
-    name: "NoticeHome"
-};
+    name: 'NoticeHome',
+    data() {
+        return {
+            selectData: []
+        }
+    },
+    methods: {
+        selectByTitle(searchTitle) {
+            axios.get('http://localhost:8621/notice?title=' + searchTitle).then((response) => {
+                this.selectData = response.data.data
+            })
+        },
+        selectAllNotice() {
+            axios.get('http://localhost:8621/notice').then((response) => {
+                this.selectData = response.data.data
+            })
+        },
+        handleDelete(deleteID) {
+            axios.delete('http://localhost:8621/notice/' + deleteID).then((response) => {
+                this.selectAllNotice()
+            })
+        },
+        clearFilter() {
+            this.selectAllNotice()
+        }
+    },
+    mounted() {
+        this.selectAllNotice()
+    }
+}
 </script>
 
 <style scoped>
-
-</style>
+.el-container {
+}
+.el-header {
+    background-color: #fff;
+    //border: #9e9e9e solid 1px;
+}
+.el-main {
+    padding: 0px;
+    margin-top: 20px;
+}
+</style>