From fefe4a3011fb472788abb2e7ffdbbc5a4f58623c Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期三, 05 六月 2024 14:10:16 +0800
Subject: [PATCH] feat:更新ui界面
---
src/views/home/components/textManager/index.vue | 169 +++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 123 insertions(+), 46 deletions(-)
diff --git a/src/views/home/components/textManager/index.vue b/src/views/home/components/textManager/index.vue
index 5eab2bc..4bad26e 100644
--- a/src/views/home/components/textManager/index.vue
+++ b/src/views/home/components/textManager/index.vue
@@ -1,46 +1,99 @@
<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>
- </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>
- <div class="pagination">
- <div class="total">鍏辫{{pageInfo.total}}鏉¤褰� 绗瑊{pageData.page}}/{{lastPage}}椤�</div>
- <div class="page">
- <el-pagination
- background
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page.sync="pageData.page"
- :page-size="pageData.pageSize"
- layout="prev, pager, next,sizes, jumper"
- :total="pageInfo.total">
- </el-pagination>
- </div>
- </div>
- </div>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="addModal = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="addText">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ <el-row type="flex" justify="center">
+ <el-col :span="23">
+ <el-card style="margin-top: 20px;height: 85vh">
+ <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" border>
+ <el-table-column prop="ID" label="搴忓彿" align="center" />
+ <el-table-column prop="content" width="340px" label="鏂囧瓧鍐呭" align="center">
+ <template slot-scope="scope">
+ <el-tooltip class="item" effect="dark" :content="scope.row.content" placement="bottom">
+ <div class="content-warp">{{scope.row.content}}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ <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>
+ <div class="page">
+ <el-pagination
+ background
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page.sync="pageData.page"
+ :page-size="pageData.pageSize"
+ layout="prev, pager, next,sizes, jumper"
+ :total="pageInfo.total">
+ </el-pagination>
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
</div>
</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 +106,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>
@@ -91,4 +161,11 @@
color: gray;
}
}
+ .content-warp{
+ margin: 0px auto;
+ width: 85%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0