feat:更新ui界面

charles

2024-06-05 fefe4a3011fb472788abb2e7ffdbbc5a4f58623c

 src/views/home/components/textManager/index.vue

@@ -10,11 +10,11 @@
                :destroy-on-close="true"
                >
            <el-form  ref="textForm" class="demo-form-inline" label-width="120px" :model="textObj" :rules="textRules">
                <el-form-item label="文字内容：" prop="textContent">
                    <el-input v-model="textObj.textContent" placeholder="请输入文字内容"/>
                <el-form-item label="文字内容：" prop="content">
                    <el-input v-model="textObj.content" placeholder="请输入文字内容"/>
                </el-form-item>
                <el-form-item label="车号：">
                    <el-input v-model="textObj.carNo" placeholder="请输入车号"/>
                    <el-input v-model="textObj.locomotiveNumber" placeholder="请输入车号"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
@@ -22,61 +22,78 @@
                <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>
            <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-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:{
                    textContent: [
                    content: [
                        { required: true, message: '内容不能为空', trigger: 'blur' },
                    ],
                },
                addModal:false,
                keyword:'',
                textObj:{textContent:'',carNo:''},
                textObj:{content:'',locomotiveNumber:''},
                pageInfo:{
                  total:100,
                  textList:[]
@@ -89,21 +106,22 @@
              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;
@@ -111,16 +129,25 @@
            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>
@@ -134,4 +161,11 @@
            color: gray;
        }
    }
    .content-warp{
        margin: 0px auto;
        width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>