From 5ffbec0a33a49c698699646ab71ddb3ad1ea310c Mon Sep 17 00:00:00 2001 From: charles <981744753@qq.com> Date: 星期二, 21 五月 2024 17:10:03 +0800 Subject: [PATCH] fix:增加一个登录功能 --- src/views/home/components/textManager/index.vue | 112 ++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 85 insertions(+), 27 deletions(-) diff --git a/src/views/home/components/textManager/index.vue b/src/views/home/components/textManager/index.vue index 5eab2bc..2ab05f5 100644 --- a/src/views/home/components/textManager/index.vue +++ b/src/views/home/components/textManager/index.vue @@ -1,21 +1,54 @@ <template> <div> - <div class="search"> - <el-form :inline="true" class="demo-form-inline"> - <el-form-item label="鏂囧瓧鍐呭/杞﹀彿锛�"> - <el-input v-model="keyword" size="small" placeholder="璇疯緭鍏�"></el-input> + <!--娣诲姞鐨勬ā鎬佹--> + <el-dialog + title="娣诲姞" + :visible.sync="addModal" + width="40%" + :close-on-click-modal="false" + @close="addModal=false" + :destroy-on-close="true" + > + <el-form ref="textForm" class="demo-form-inline" label-width="120px" :model="textObj" :rules="textRules"> + <el-form-item label="鏂囧瓧鍐呭锛�" prop="content"> + <el-input v-model="textObj.content" placeholder="璇疯緭鍏ユ枃瀛楀唴瀹�"/> </el-form-item> - <el-form-item> - <el-button @click="searchCar" size="mini" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">鏌ヨ</el-button> + <el-form-item label="杞﹀彿锛�"> + <el-input v-model="textObj.locomotiveNumber" placeholder="璇疯緭鍏ヨ溅鍙�"/> </el-form-item> </el-form> + <span slot="footer" class="dialog-footer"> + <el-button @click="addModal = false">鍙� 娑�</el-button> + <el-button type="primary" @click="addText">纭� 瀹�</el-button> + </span> + </el-dialog> + <div class="search"> + <el-row type="flex" justify="center"> + <el-col :span="18"> + <el-form :inline="true" class="demo-form-inline"> + <el-form-item label="鏂囧瓧鍐呭/杞﹀彿锛�"> + <el-input v-model="keyword" size="small" placeholder="璇疯緭鍏�"></el-input> + </el-form-item> + <el-form-item> + <el-button @click="searchCar" size="mini" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">鏌ヨ</el-button> + </el-form-item> + </el-form> + </el-col> + <el-col :span="6" style="text-align: right"> + <el-button size="mini" @click="addModal=true" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">娣诲姞</el-button> + </el-col> + </el-row> </div> <div> <el-table :data="pageInfo.textList" > - <el-table-column prop="id" label="搴忓彿" align="center" /> - <el-table-column prop="textContent" label="鏂囧瓧鍐呭" align="center" /> - <el-table-column prop="cid" label="杞﹀彿" align="center" /> - <el-table-column prop="date" label="娣诲姞鏃堕棿" align="center" /> + <el-table-column prop="ID" label="搴忓彿" align="center" /> + <el-table-column prop="content" label="鏂囧瓧鍐呭" align="center" /> + <el-table-column prop="locomotiveNumber" label="杞﹀彿" align="center" /> + <el-table-column prop="CreatedAt" label="娣诲姞鏃堕棿" align="center" > + <template slot-scope="scope"> + {{$moment(scope.row.CreatedAt).format('YYYY-MM-DD HH:mm:ss')}} + </template> + </el-table-column> </el-table> <div class="pagination"> <div class="total">鍏辫{{pageInfo.total}}鏉¤褰� 绗瑊{pageData.page}}/{{lastPage}}椤�</div> @@ -36,11 +69,19 @@ </template> <script> + import { getTextListApi,addTextApi} from '@/api'; export default { name: "textManager", data(){ return{ + textRules:{ + content: [ + { required: true, message: '鍐呭涓嶈兘涓虹┖', trigger: 'blur' }, + ], + }, + addModal:false, keyword:'', + textObj:{content:'',locomotiveNumber:''}, pageInfo:{ total:100, textList:[] @@ -53,31 +94,48 @@ return Math.ceil(this.pageInfo.total/this.pageData.pageSize) } }, + watch:{ + pageData:{ + handler(){ + this.searchCar(); + }, + deep:true, + immediate:true + } + }, methods:{ - searchCar(){ - //鎼滅储 - this.pageInfo.textList=[ - {id:1, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:2, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:3, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:4, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:5, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:6, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:7, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:8, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:9, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'}, - {id:10, textContent: '鐏溅鍚姩', cid: 'k12', date: '2016-05-02'} - ]; + async searchCar(){ + const {code,data,total}=await getTextListApi({keyword:this.keyword,...this.pageData}); + if(code===200){ + this.pageInfo.textList=data; + this.pageInfo.total=total; + } }, handleSizeChange(pageSize){ this.pageData.pageSize=pageSize; }, handleCurrentChange(page){ this.pageData.page=page; + }, + resetFormData(){ + this.addModal=false; + this.textObj={content:'',locomotiveNumber:''} + }, + addText(){ + this.$refs.textForm.validate((valid) => { + if(valid){ + addTextApi(this.textObj).then(({code})=>{ + if(code===200){ + this.$message.success('娣诲姞鎴愬姛'); + this.resetFormData(); + this.searchCar(); + }else{ + this.$message.warning('娣诲姞澶辫触') + } + }); + } + }) } - }, - mounted(){ - this.searchCar(); } } </script> -- Gitblit v1.8.0