master

分支 (1)

管理

管理

master

t5
/
outCar.html

<!doctype html>
<html lang="en">
  <head>
    <title>停车场</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="vue.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div id="app">
        <n-nav></n-nav>
        <n-jum id="" class="" :info="show"></n-jum>
        <div class="row">
            <div style="margin-left: 25%; margin-bottom: 5%;" class="col-lg-6">
                <div class="form-group">
                  <label for="">车牌号</label>
                  <input v-model="card" type="text"
                    class="form-control" name="" id="" aria-describedby="helpId" placeholder="请输入车牌号">
                </div>
                <div class="form-group">
                    <label for="">入口</label>
                    <select class="form-control" name="" id="" v-model="ine">
                        <option v-for="(item, index) in ins" :key="index">{{item}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="">入场时间</label>
                    <input v-model="time" type="text"
                    class="form-control" name="" id="" aria-describedby="helpId" placeholder="请输入入场时间">
                </div>
                <div class="form-group">
                    <label for="">出场时间</label>
                    <input v-model="outtime" type="text"
                    class="form-control" name="" id="" aria-describedby="helpId" placeholder="请输入出场时间">
                </div>
                <div class="form-group">
                    <label for="">出口</label>
                    <select class="form-control" name="" id="" v-model="out">
                        <option v-for="(item, index) in outs" :key="index">{{item}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="">停车费</label>
                    <input v-model="money" type="text"
                    class="form-control" name="" id="" aria-describedby="helpId" placeholder="请输入停车费">
                </div>

                  <button v-on:click="add()" type="button" class="btn btn-block btn-primary ">提交</button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <table class="table text-center">
                    <thead>
                        <tr>
                            <th>车牌号</th>
                            <th>入口</th>
                            <th>入场时间</th>
                            <th>出场时间</th>
                            <th>出口</th>
                            <th>停车费</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in list" :key="index">
                            <template v-if="editIndex!=index">
                                <th>{{item.card}}</th>
                                <th>{{item.ine}}</th>
                                <th>{{item.time}}</th>
                                <th>{{item.outtime}}</th>
                                <th>{{item.out}}</th>
                                <th>{{item.money}}</th>
                                <td>
                                    <div class="row">
                                        <div class="col">
                                            <button v-on:click="edit(index,item)" type="button" class="btn btn-outline-warning btn-sm btn-block">编辑</button>
                                        </div>
                                    </div>
                                    <button v-on:click="rm(index)" type="button" class="btn btn-outline-danger btn-block">X</button>
                                </td>
                            </template>
                            <template v-else>
                                <td><input type="text" v-model="editCard" style="width: 100%"></td>
                                <td>
                                    <div class="form-group" style="width: 100%">
                                        <select class="form-control" v-model="editIn">
                                          <option v-for="(item, index) in ins" :key="index" >{{item}}</option>
                                        </select>
                                    </div>
                                </td>
                                <td><input type="text" v-model="editTime" style="width: 100%"></td>
                                <td><input type="text" v-model="editOuttime" style="width: 100%"></td>
                                <td>
                                    <div class="form-group">
                                        <select class="form-control" v-model="editOut">
                                          <option v-for="(item, index) in outs" :key="index" >{{item}}</option>
                                        </select>
                                      </div>
                                </td>
                                <td><input type="text" v-model="editMoney" style="width: 100%"></td>
                                <td>
                                    <div class="row">
                                        <div class="col">
                                            <button v-on:click="update(index)" type="button" class="btn btn-success">保存</button>
                                        </div>
                                        <div class="col">
                                            <button @click="cancel()" type="button" class="btn btn-primary">取消</button>
                                        </div>
                                    </div>
                                </td>
                            </template>
                        </tr>

                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <script>
        Vue.component('n-nav',{
            data(){
                return{
                    title:'首页',
                    link:'车主信息',
                    links:'车位信息',

                }
            },
            methods: {

            },
            template:`
            <nav class="navbar navbar-expand-sm navbar-dark" style=" background-color: #0dccea;">
                <a class="navbar-brand" style="color:black;" href="index.html">{{title}}</a>
                <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                    aria-expanded="false" aria-label="Toggle navigation"></button>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item active" >
                                <a class="nav-link" href="owner.html"> <span style="color: black;">{{link}}</span><span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item active" >
                                <a class="nav-link" href="park.html"> <span style="color: black;">{{links}}</span><span class="sr-only">(current)</span></a>
                            </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="dropdownId" style="color:black;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">车辆出入信息</a>
                            <div class="dropdown-menu" aria-labelledby="dropdownId" style="color:black;">
                                <a class="dropdown-item" href="inCar.html">车辆入场信息</a>
                                <a class="dropdown-item" href="outCar.html">车辆出场信息</a>
                            </div>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>

            `
        });
        // 自定义的另一个组件
        Vue.component('n-jum', {
            // 属性，从外部传入数据
            props: ['info'],
            // 组件的成员变量，内部
            data() {
                return {

                }
            },
            template: `
                <div class="jumbotron jumbotron-fluid">
                    <div class="container">
                        <h1 class="display-3">{{info}}</h1>

                    </div>
                </div>
            `
        });
        //创建Vue实例
        let v1 = new Vue({
            el:'#app',
            data:{
                show:'停车场',
                editIndex: -1,
                card:'',
                ine:'',
                ins:['A1','A2','B1','B2'],
                time:'',
                outtime:'',
                out:'',
                outs:['A1','A2','B1','B2'],
                money:'',
                editCard:'',
                editIn:'',
                editTime:'',
                editOuttime:'',
                editOut:'',
                editMoney:'',
                list:[
                    {
                        card:'湘A66666',
                        ine:'A2',
                        time:'2023-03-11',
                        outtime:'2023-03-11',
                        out:'A1',
                        money:'150000',
                    },
                    {
                        card:'湘C88888',
                        ine:'A1',
                        time:'2023-02-12',
                        outtime:'2023-02-13',
                        out:'B1',
                        money:'30',
                    },
                    {
                        card:'鄂A44444',
                        ine:'B2',
                        time:'2023-01-03',
                        outtime:'2023-02-13',
                        out:'B2',
                        money:'300',
                    },
                    {
                        card:'粤A77777',
                        ine:'B1',
                        time:'2023-02-24',
                        outtime:'2023-02-26',
                        out:'A2',
                        money:'60',
                    },
                ],
            },
            methods:{
                add(){
                    let o =
                    {
                        card:this.card,
                        ine:this.ine,
                        time:this.time,
                        outtime:this.outtime,
                        out:this.out,
                        money:this.money,
                    }
                    this.list.push(o);
                    this.card='';
                    this.ine='';
                    this.time='';
                    this.outtime='';
                    this.out='';
                    this.money='';
                },
                rm(i){
                    this.list.splice(i,1);
                },
                //编辑
                edit:function(i,o){
                    this.editIndex = i;
                    this.card = o.card;
                    this.ine = o.ine;
                    this.time = o.time;
                    this.outtime = o.outtime;
                    this.out = o.out;
                    this.money = o.money;
                },
                //更新
                update:function(i){
                    this.list[i].card = this.editCard;
                    this.list[i].ine = this.editIn;
                    this.list[i].time = this.editTime;
                    this.list[i].outtime = this.editOuttime;
                    this.list[i].out = this.editOut;
                    this.list[i].money = this.editMoney;
                    this.cancel();
                },
                //取消
                cancel:function(){
                    this.editIndex = -1;
                    this.editCard = '';
                    this.editIn = '';
                    this.editTime = '';
                    this.editOuttime= '';
                    this.editOut = '';
                    this.editMoney= '';
                }
            },
        });
  </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>