From ddfc75ed45d427bb8b407133b5e2bde0e6ec581a Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期六, 22 一月 2022 16:22:45 +0800 Subject: [PATCH] 新闻查询功能完毕 --- src/components/page/News.vue | 2 src/api/api.js | 24 +++ src/components/Administrator/Main.vue | 207 +++++++++++++++++++++---- src/components/Administrator/Edit.vue | 33 ++- src/main.js | 1 src/components/Administrator/Update.vue | 46 +++++ src/components/page/introduce.vue | 42 ++-- src/views/homePage/moreMessage.vue | 68 +++++--- src/router.js | 4 src/components/Administrator/AdminHome.vue | 2 10 files changed, 330 insertions(+), 99 deletions(-) diff --git a/src/api/api.js b/src/api/api.js index d8f69ae..3f1fd5d 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -30,4 +30,28 @@ method: 'GET', url:`/news/main/${data}` }) +} +//淇敼鏂伴椈 +export const update = data => { + return request({ + method:'POST', + url:'/news/update', + params:data, + }) +} +//鍒犻櫎鏂伴椈 +export const deleteNew = data => { + return request({ + method:'POST', + url:'/news/delete', + params:data, + }) +} +//妯$硦鏌ヨ +export const fuzzy = data => { + return request({ + method:'POST', + url:'/news/fuzzy', + params:data, + }) } \ No newline at end of file diff --git a/src/components/Administrator/AdminHome.vue b/src/components/Administrator/AdminHome.vue index 2badd5d..72b3ec7 100644 --- a/src/components/Administrator/AdminHome.vue +++ b/src/components/Administrator/AdminHome.vue @@ -3,7 +3,7 @@ <el-header> <div> <img src="../../assets/head.png" alt="" /> - <span>鍚庡彴绠$悊绯荤粺</span> + <span>鏂伴椈鍚庡彴绠$悊绯荤粺</span> </div> <el-button type="info" @click="logout">閫�鍑�</el-button> </el-header> diff --git a/src/components/Administrator/Edit.vue b/src/components/Administrator/Edit.vue index 94447f1..fdd7d01 100644 --- a/src/components/Administrator/Edit.vue +++ b/src/components/Administrator/Edit.vue @@ -1,7 +1,10 @@ <template> - <div> - <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" /> - <el-button type="primary" @click="submit">鎻愪氦</el-button> + <div class="box"> + 鏂伴椈鏍囬锛�<el-input v-model="title" placeholder="璇疯緭鍏ユ柊闂绘爣棰�"></el-input><br/><br/> + 鍙戝竷鏃ユ湡锛�<el-input v-model="releaseTime" placeholder="璇疯緭鍏ユ柊闂诲彂甯冩棩鏈�"></el-input> + 鏂伴椈鍐呭锛�<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" /> + <el-button type="primary" @click="submit">纭畾</el-button> + <el-button type="success">鎻愪氦</el-button> </div> </template> <script> @@ -9,25 +12,31 @@ import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' - export default { components:{ quillEditor }, - data () { + data(){ return { - content: '', - editorOption: {} , + title:'', //鏍囬鍐呭 + releaseTime:'', //鍙戝竷鏃ユ湡 + content: '', //鏂伴椈鍐呭 + editorOption: { + placeholder: "璇疯緭鍏ユ鏂�", + } , //缂栬緫鍣ㄦ柊闂诲璞� } }, - methods: { + created(){ + }, + methods:{ submit () { console.log(this.$refs.text.value) } } } </script> -<style lang="less" scoped> -// .myQuillEditor{ -// height: 400px; -// } +<style lang="less" scoped> +.box{ + width: 1200px; + margin: 0 auto; +} </style> \ No newline at end of file diff --git a/src/components/Administrator/Main.vue b/src/components/Administrator/Main.vue index 1db10c7..16ed775 100644 --- a/src/components/Administrator/Main.vue +++ b/src/components/Administrator/Main.vue @@ -1,5 +1,6 @@ <template> <div> + <!-- 绾ц仈閫夋嫨鍣� --> <div class="block"> <el-cascader v-model="value" @@ -11,7 +12,19 @@ </div> <div> <el-card class="box-card"> - <el-button class="add" type="success" icon="el-icon-plus" @click="goEdit()">鐐瑰嚮鍦ㄨ鍒楄〃涓嬫坊鍔犱竴鏉℃柊闂�</el-button> + <el-row :gutter="40"> + <el-col :span="4"> + <!-- 娣诲姞鏂伴椈鎸夐挳 --> + <el-button el-button class="add" type="success" icon="el-icon-plus" @click="goEdit()">鐐瑰嚮鍦ㄨ鍒楄〃涓嬫坊鍔犱竴鏉℃柊闂�</el-button> + </el-col> + <el-col :span="10"> + <!-- 鏂伴椈鎼滅储 --> + <el-input clearable @clear="qingKong()" placeholder="璇疯緭鍏ユ墍瑕佹煡璇㈢殑鏂伴椈鏍囬" v-model="fuzzyForm.fuzzytitle" class="input-with-select"> + <el-button class="btn" slot="append" icon="el-icon-search" @click="fuzzyList(fuzzyForm.fuzzytitle)"></el-button> + </el-input> + </el-col> + </el-row> + <!-- 鏂伴椈琛ㄦ牸鍖哄煙 --> <el-table :data="tableData" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" > <!-- :header-cell-style="{textAlign: 'center'}"璁剧疆澶撮儴灞呬腑锛� --> @@ -30,23 +43,16 @@ <!-- {{ scope.row.id }} --> <div> <el-button type="success" @click="look(scope.row.id)">鏌ョ湅</el-button> - <el-button type="warning" @click="amend(scope.row.id)">淇敼</el-button>  - <el-popconfirm - confirm-button-text='鏄殑' - cancel-button-text='鍙栨秷' - icon="el-icon-info" - icon-color="red" - title="纭畾鍒犻櫎璇ユ潯鏂伴椈锛�" - > - <el-button slot="reference">鍒犻櫎</el-button> - </el-popconfirm> + <el-button type="warning" @click="showEditDialog(scope.row.id)">淇敼</el-button> + <el-button type="info" @click="deleteNews(scope.row.id)">鍒犻櫎</el-button> </div> </template> </el-table-column> </el-table> - <!-- 鍒嗛〉 --> - <div> + <div class="fenye"> + <!-- 鑾峰彇鏂伴椈鍒楄〃鍒嗛〉 --> + <div class="get"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @@ -57,24 +63,62 @@ :total="total"> </el-pagination> </div> + <!-- 妯$硦鏂伴椈鍒楄〃鍒嗛〉 --> + <div class="fuzzy"> + <el-pagination + @size-change="handleSizeChangefuzzy" + @current-change="handleCurrentChangefuzzy" + :current-page="fuzzyForm.fuzzycurrent" + :page-sizes="[6,12, 18,]" + :page-size="100" + layout="total, sizes, prev, pager, next, jumper" + :total="fuzzyForm.fuzzytotal"> + </el-pagination> + </div> + </div> </el-card> + <!-- 淇敼鏂伴椈鐨勫璇濇 --> + <el-dialog + title="淇敼鏂伴椈" + :visible.sync="editDialogVisible" + width="50%" + :before-close="handleClose"> + <!-- rules琛ㄥ崟楠岃瘉瑙勫垯锛宺ef褰撳墠琛ㄥ崟鐨勯獙璇佸璞� --> + <el-form ref="editFormRef" :model="editForm" label-width="80px" status-icon> + <el-form-item label="id:"> + <el-input v-model="editForm.id" disabled></el-input> + </el-form-item> + <el-form-item label="鏂伴椈鏍囬:"> + <el-input v-model="editForm.title"></el-input> + </el-form-item> + <el-form-item label="鍙戝竷鏃ユ湡:"> + <el-input v-model="editForm.releaseTime"></el-input> + </el-form-item> + </el-form> + <span slot="footer" class="dialog-footer"> + <el-button @click="editDialogVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="editNew()">纭� 瀹�</el-button> + </span> + </el-dialog> </div> </div> </template> <script> -import { getNewsList } from '../../api/api' +import { getNewsList,getnew,update,deleteNew,fuzzy } from '../../api/api' import axios from 'axios' export default { data() { return { visible: false, + editDialogVisible:false, //鎺у埗淇敼瀵硅瘽妗嗙殑甯冨皵鍊� + editForm:{}, //鏌ヨ鍒扮殑鏂伴椈瀵硅薄锛岀洰鍓嶄粎渚涗慨鏀逛娇鐢� newsCategoryId:1, //鍏堝瓨涓�涓皬鏍囬id tableData:[], //鏂伴椈鍒楄〃瀵硅薄 - pageSize:6, //姣忛〉鏉℃暟 + pageSize:3, //姣忛〉鏉℃暟 currentPage:1, //褰撳墠椤� - newsList:[], total:0, //鏂伴椈鎬绘潯鏁� + fuzzyForm:{ fuzzytitle:'',fuzzytotal:0,fuzzycurrent:1,fuzzysize:6 }, //妯$硦鏌ヨ鍒楄〃瀵硅薄 value: [], options: [{ value: 1, @@ -162,26 +206,21 @@ mounted(){ }, methods: { + //淇敼瀵硅瘽妗嗗叧闂殑鏂规硶 + handleClose(done) { + this.$confirm('纭鍏抽棴锛�') + .then(_ => { + done(); + }) + .catch(_ => {}); + }, + //绾ц仈閫夋嫨鍣ㄧ殑鏂规硶 handleChange(value) { console.log(value); console.log(value[1]); this.newsCategoryId = value[1]; //灏嗗緱鍒扮殑灏忔爣棰榠d瀛樻斁璧锋潵 this.query(this.newsCategoryId); }, - // query(value){ - // const data = { - // current:this.currentPage, - // newsCategoryId:value[1], - // size:this.pageSize - // }; - // getNewsList(data).then(res=>{ - // console.log(res); - // this.tableData = res.data.records - // this.total = res.data.total - // }).catch(err => { - // console.log(err); - // }) - // }, query(newsCategoryId){ const data = { current:this.currentPage, @@ -200,10 +239,98 @@ console.log(err); }) }, - //淇敼 - amend(id){ - alert('鐖变綘鍛�'); - console.log('>>>'+id); + //灞曠ず淇敼瀵硅瘽妗� + showEditDialog(id){ + getnew(id).then(res => { + console.log(res); + if (res.code == 200) { + this.editForm = res.data + } + }) + this.editDialogVisible = true; + }, + //纭畾淇敼琛ㄥ崟鎻愪氦锛岄獙璇佸彂璧疯姹� + editNew(){ + // console.log(typeof(this.editForm.releaseTime)); + // console.log(this.editForm.releaseTime); + let arr = this.editForm.releaseTime.split('') + if(arr[4] !== '/' || arr[7] !== '/'){ + return this.$message.error('璇锋寜鐓р�淴XXX/XX/XX鈥濈殑鏍煎紡濉啓鏃ユ湡') + }else{ + const data = { + id: this.editForm.id, + releaseTime: this.editForm.releaseTime, + title:this.editForm.title + } + update(data).then(res=>{ + console.log('dsadasas'+res); + if (res.code == 200) { + this.editDialogVisible =false; + this.$message.success('淇敼鏂伴椈鎴愬姛锛�') + this.query(this.newsCategoryId); + } + }) + } + }, + //妯$硦鏌ヨ + fuzzyList(title){ + console.log(title); + if(title == ''){ + return this.$message.error('璇峰厛杈撳叆鏌ヨ鏂伴椈鏍囬锛�') + } + const data = { + current: this.fuzzyForm.fuzzycurrent, + size: this.fuzzyForm.fuzzysize, + title:title + } + fuzzy(data).then(res => { + console.log(res); + if (res.code !== 200) { + return this.$message.error('鏌ヨ鏂伴椈鍒楄〃澶辫触') + }else{ + this.tableData = res.data.records + this.fuzzyForm.fuzzytotal = res.data.total + } + }).catch(err => { + console.log(err); + }) + }, + //娓呯┖鏌ヨ鍒楄〃鍐呭 + qingKong(){ + this.tableData = [] + this.fuzzyForm.fuzzytotal = 0 + }, + //鏍规嵁id鍒犻櫎鏂伴椈 + async deleteNews(id){ + console.log(id); + const res = await this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ潯鏂伴椈, 鏄惁缁х画?', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).catch(err => { + return err + }) + //濡傛灉鐢ㄦ埛鐐瑰嚮纭畾鍒欒繑鍥瀋onfirm + //濡傛灉鐢ㄦ埛鐐瑰嚮鍙栨秷鍒欒繑鍥瀋ancel + console.log(res); + if(res !== 'confirm'){ + return this.$message.info('宸插彇娑堝垹闄') + }else{ + console.log(id); + const data = { + id:id + } + //鍙傛暟data 瑕佷互瀵硅薄鐨勫舰寮忎紶鍏� + deleteNew(data).then(res => { + console.log('>>>'+res); + if(res.code == 200){ + this.$message.success('鍒犻櫎鏂伴椈鎴愬姛锛�') + this.query(this.newsCategoryId); + }else{ + return this.$message.error('鍒犻櫎鏂伴椈澶辫触锛�') + } + }) + } }, //鏌ョ湅 look(id){ @@ -218,6 +345,14 @@ // console.log(`姣忛〉 ${val} 鏉); this.pageSize = val; this.query(this.newsCategoryId) + }, + handleCurrentChangefuzzy(val){ + this.fuzzyForm.fuzzycurrent = val + this.fuzzyList(this.fuzzyForm.fuzzytitle) //妯$硦鏌ヨ + }, + handleSizeChangefuzzy(val){ + this.fuzzyForm.fuzzysize = val + this.fuzzyList(this.fuzzyForm.fuzzytitle) //妯$硦鏌ヨ }, //鍘诲線娣诲姞缂栬緫椤甸潰 goEdit(){ @@ -244,4 +379,8 @@ .el-pagination{ margin-top: 10px; } +.fenye{ + display: flex; + justify-content: space-between; +} </style> \ No newline at end of file diff --git a/src/components/Administrator/Update.vue b/src/components/Administrator/Update.vue new file mode 100644 index 0000000..5f0ab30 --- /dev/null +++ b/src/components/Administrator/Update.vue @@ -0,0 +1,46 @@ +<template> + <div class="box"> + 鏂伴椈鏍囬锛�<el-input v-model="input" placeholder="璇疯緭鍏ユ柊闂绘爣棰�"></el-input><br/><br/> + 鍙戝竷鏃ユ湡锛�<el-date-picker + v-model="value1" + type="date" + placeholder="閫夋嫨鏃ユ湡"> + </el-date-picker><br/><br/> + 鏂伴椈鍐呭锛�<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" /> + <el-button type="primary" @click="submit">纭畾</el-button> + <el-button type="success">鎻愪氦</el-button> + </div> +</template> +<script> +import { quillEditor } from 'vue-quill-editor' +import 'quill/dist/quill.core.css' +import 'quill/dist/quill.snow.css' +import 'quill/dist/quill.bubble.css' +export default { + components:{ quillEditor }, + data(){ + return { + input:'', //鏍囬鍐呭 + value1:'', //鏃ユ湡 + content: '', //鏂伴椈鍐呭 + editorOption: { + placeholder: "璇疯緭鍏ユ鏂�", + } , //缂栬緫鍣ㄦ柊闂诲璞� + } + }, + created(){ + }, + methods:{ + submit () { + console.log(this.$refs.text.value) + } + } +} +</script> + +<style lang="less" scoped> +.box{ + width: 1200px; + margin: 0 auto; +} +</style> \ No newline at end of file diff --git a/src/components/page/News.vue b/src/components/page/News.vue index 45a88dc..a76f040 100644 --- a/src/components/page/News.vue +++ b/src/components/page/News.vue @@ -40,7 +40,7 @@ // queryAll(){ // this.content = `` // } - } + }, } </script> <style> diff --git a/src/components/page/introduce.vue b/src/components/page/introduce.vue index 9fb6ac3..f9174f7 100644 --- a/src/components/page/introduce.vue +++ b/src/components/page/introduce.vue @@ -15,12 +15,7 @@ <!-- 鏂伴椈鍐呭 --> <el-card class="box-card"> <el-col :span="18"> - <!-- <div v-if="newsList.length > 0"> - <el-row class="marb10" :key="index" v-for="(item, index) in newsList"> - {{ item.title }} - </el-row> - </div> --> - <div>{{ content }}</div> + <div>{{ this.new.content }}</div> </el-col> </el-card> </el-row> @@ -40,7 +35,7 @@ cont: '', menuList: [], newsList:[], - content:'', + new:{} //鏂伴椈瀵硅薄 } }, created() { @@ -51,15 +46,15 @@ watch: { menuList(n,o){ this.cont = this.menuList[0].name; - this.getnews(this.menuList[0]); - this.getalone(this.newsList); + this.getnews(this.menuList[0]); //鏀瑰彉瀵硅薄锛岃彍鍗曟爮鐨勪笢瑗胯鍐欏埌鐩戝惉灞炴�ч噷杈� } }, methods: { + //鑾峰彇灏忔爣棰樼殑id getTitle(){ const data = Number(this.$route.query.id); getMinTitle(data).then(res => { - console.log(res); + // console.log(res); if(res.code == 200){ this.menuList = res.data } @@ -67,10 +62,12 @@ console.log(err); }) }, + //灏忔爣棰樿彍鍗曠殑鐞冨垏鎹� changeMenu(val) { this.cont = val.name; this.getnews(val) }, + //鑾峰彇鍒颁簡鏂伴椈鍒楄〃锛岄噷杈瑰彧鏈変竴涓璞� getnews(item){ const data = { current:1, @@ -78,26 +75,25 @@ size:5 }; getNewsList(data).then(res => { - console.log(res); + // console.log(res); if(res.code == 200){ - // if(res.data.records.length == 1){ - this.newsList = []; - this.getalone(res.data.records[0]); - // }else{ - // this.content = ''; - // this.newsList = res.data.records - // } + this.newsList = res.data.records + this.getalone(this.newsList[0].id) } }).catch(error => { console.log(error); }) }, - getalone(item){ - const data = item.id; + //鑾峰彇鏂伴椈鍐呭,寰楀埌涓�涓柊闂诲璞� + getalone(id){ + const data = id; getnew(data).then(res => { - console.log(">>>>",res); - this.content = res.data.content; - this.data = res.data; + // console.log(res); + if(res.code == 200){ + this.new = res.data; + } + }).catch(error => { + console.log(error); }) } } diff --git a/src/main.js b/src/main.js index 97a6142..49e66c8 100644 --- a/src/main.js +++ b/src/main.js @@ -9,7 +9,6 @@ import './assets/css/my_style.css' - import axios from 'axios' // 閰嶇疆璇锋眰鐨勮窡璺緞 // axios.defaults.baseURL = 'http://8.140.68.52:8181' diff --git a/src/router.js b/src/router.js index 82d7ea9..293b4e9 100644 --- a/src/router.js +++ b/src/router.js @@ -18,6 +18,7 @@ import Welcome from './components/Administrator/Welcome.vue' import Main from './components/Administrator/Main.vue' import Edit from './components/Administrator/Edit.vue' +import Update from './components/Administrator/Update.vue' Vue.use(Router) @@ -31,7 +32,8 @@ children: [{ path:'welcome',component:Welcome }, { path:'main',component:Main }, { path:'edit',component:Edit }, - { path:'news',component:News }] + { path:'news',component:News }, + { path:'update',component:Update }] }, { path: '/home', diff --git a/src/views/homePage/moreMessage.vue b/src/views/homePage/moreMessage.vue index 88b6789..43978e9 100644 --- a/src/views/homePage/moreMessage.vue +++ b/src/views/homePage/moreMessage.vue @@ -17,14 +17,14 @@ </li> </ul> <!-- 鍒嗛〉 --> - <div class="fenye"> + <div> <el-pagination background - @current-change="handleCurrentChange" - :current-page.sync="currentPage" + @current-change="handleCurrentChange1" + :current-page="currentPagenotice" :page-size="pageSize" layout="prev, pager, next,total" - :total="total"> + :total="totalnotice"> </el-pagination> </div> </el-card> @@ -43,14 +43,14 @@ </li> </ul> <!-- 鍒嗛〉 --> - <div class="fenye"> + <div> <el-pagination background - @current-change="handleCurrentChange" - :current-page.sync="currentPage" + @current-change="handleCurrentChange2" + :current-page.sync="currentPageschool" :page-size="pageSize" layout="prev, pager, next,total" - :total="total"> + :total="totalschool"> </el-pagination> </div> </el-card> @@ -70,14 +70,14 @@ </li> </ul> <!-- 鍒嗛〉 --> - <div class="fenye"> + <div> <el-pagination background - @current-change="handleCurrentChange" - :current-page.sync="currentPage" + @current-change="handleCurrentChange3" + :current-page.sync="currentPagework" :page-size="pageSize" layout="prev, pager, next,total" - :total="total"> + :total="totalwork"> </el-pagination> </div> </el-card> @@ -95,9 +95,13 @@ noticeList: [], schoolList: [], workList: [], - currentPage:1, + currentPagenotice:1, //閫氱煡鍏憡鐨勫綋鍓嶉〉 + currentPageschool:1, //瀛﹂櫌鍔ㄦ�佺殑褰撳墠椤� + currentPagework:1, //宸ヤ綔鍔ㄦ�佺殑褰撳墠椤� pageSize:4, - total:0, + totalnotice:0, //閫氱煡鍏憡鏂伴椈鐨勬�绘潯鏁� + totalschool:0, //瀛﹂櫌鍔ㄦ�佹柊闂荤殑鎬绘潯鏁� + totalwork:0, //宸ヤ綔鍔ㄦ�佹柊闂荤殑鎬绘潯鏁� } }, mounted(){ @@ -106,24 +110,36 @@ this.getschool(); }, methods: { - handleCurrentChange(val){ - console.log(`褰撳墠椤�: ${val}`); + //閫氱煡鍏憡鐨勫垎椤靛垏鎹� + handleCurrentChange1(val){ + // console.log(`褰撳墠椤�: ${val}`); + this.currentPagenotice = val; this.getnotice(); - this.getwork(); + }, + //瀛﹂櫌鍔ㄦ�佺殑鍒嗛〉鍒囨崲 + handleCurrentChange2(val){ + // console.log(`褰撳墠椤�: ${val}`); + this.currentPageschool = val; this.getschool(); + }, + //宸ヤ綔鍔ㄦ�佺殑鍒嗛〉鍒囨崲 + handleCurrentChange3(val){ + // console.log(`褰撳墠椤�: ${val}`); + this.currentPagework = val; + this.getwork(); }, //鑾峰彇鏂伴椈鍒楄〃 getnotice(){ const data = { - current:this.currentPage, + current:this.currentPagenotice, newsCategoryId:42, size:this.pageSize } getNewsList(data).then(res => { - console.log(res); + // console.log(res); if(res.code == 200){ this.noticeList = res.data.records - this.total = Number(res.data.total) + this.totalnotice = res.data.total } }).catch(error => { console.log(error); @@ -131,15 +147,15 @@ }, getwork(){ const data = { - current:this.currentPage, + current:this.currentPagework, newsCategoryId:43, size:this.pageSize } getNewsList(data).then(res => { - console.log(res); + // console.log(res); if(res.code == 200){ this.workList = res.data.records - this.total = Number(res.data.total) + this.totalwork = Number(res.data.total) } }).catch(error => { console.log(error); @@ -147,15 +163,15 @@ }, getschool(){ const data = { - current:this.currentPage, + current:this.currentPageschool, newsCategoryId:44, size:this.pageSize } getNewsList(data).then(res => { - console.log(res); + // console.log(res); if(res.code == 200){ this.schoolList = res.data.records - this.total = Number(res.data.total) + this.totalschool = Number(res.data.total) } }).catch(error => { console.log(error); -- Gitblit v1.8.0