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