代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
<!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">
<!-- 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">
<!-- vue -->
<script src="vue.js"></script>
</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="id" type="text"
class="form-control" name="" id="" aria-describedby="helpId" placeholder="请输入车位编号">
</div>
<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="floor">
<option v-for="(item, index) in floors" :key="index">{{item}}</option>
</select>
</div>
<div class="form-group">
<label for="">车位区域</label>
<select class="form-control" name="" id="" v-model="region">
<option v-for="(item, index) in regions" :key="index">{{item}}</option>
</select>
</div>
<div class="form-group">
<label for="">车辆类型</label>
<select class="form-control" name="" id="" v-model="kind">
<option v-for="(item, index) in kinds" :key="index">{{item}}</option>
</select>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="" id="" v-model="remark" value="占用"> 占用
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="" id="" v-model="remark" value="空位"> 空位
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="" id="" v-model="remark" value="停用"> 停用
</label>
</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 ownerList" :key="index">
<template v-if="editIndex!=index">
<td>{{item.id}}</td>
<td>{{item.card}}</td>
<td>{{item.floor}}</td>
<td>{{item.region}}</td>
<td>{{item.kind}}</td>
<td>{{item.remark}}</td>
<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="editId" style="width: 100%"></td>
<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="editFloor">
<option v-for="(item, index) in floors" :key="index" >{{item}}</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control" v-model="editRegion">
<option v-for="(item, index) in regions" :key="index" >{{item}}</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control" v-model="editKind">
<option v-for="(item, index) in kinds" :key="index" >{{item}}</option>
</select>
</div>
</td>
<td><input type="text" v-model="editRemark" 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>
<!-- JS -->
<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="outCar.html" 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>
`
});
let v1 = new Vue({
el :'#app',
data:{
show:'停车场',
editIndex: -1,
id:'',
card:'',
floor:'',
floors:['负一楼','负二楼','负三楼'],
region:'',
regions:['A','B','C','D'],
kind:'',
kinds:['固定车','租赁车','临时车'],
remark:'',
editId:'',
editCard:'',
editFloor:'',
editRegion:'',
editKind:'',
editRemark:'',
ownerList:[
{
id:'1',
card:'湘A77777',
floor:'负一楼',
region:'A',
kind:'固定车',
remark:'占用',
},
{
id:'3',
card:'湘A88888',
floor:'负二楼',
region:'C',
kind:'临时车',
remark:'占用',
},
{
id:'5',
card:'',
floor:'负一楼',
region:'B',
kind:'',
remark:'空位',
},
{
id:'6',
card:'',
floor:'负三楼',
region:'D',
kind:'',
remark:'空位',
},
]
},
methods: {
add(){
let o =
{
id:this.id,
card:this.card,
floor:this.floor,
region:this.region,
kind:this.kind,
remark:this.remark,
}
this.ownerList.push(o);
this.id = '';
this.card = '';
this.floor = '';
this.region = '';
this.kind = '';
this.remark = '';
},
rm(i){
this.ownerList.splice(i,1);
},
//编辑
edit:function(i,o){
this.editIndex = i;
this.id = o.id;
this.card = o.card;
this.floor = o.floor;
this.region = o.region;
this.editKind = o.kind;
this.remark = o.remark;
},
//更新
update:function(i){
this.ownerList[i].id = this.editId;
this.ownerList[i].card = this.editCard;
this.ownerList[i].floor = this.editFloor;
this.ownerList[i].region = this.editRegion;
this.ownerList[i].floor = this.editKind;
this.ownerList[i].region = this.editRemark;
this.cancel();
},
//取消
cancel:function(){
this.editIndex = -1;
this.editId = '';
this.editCard = '';
this.editFloor = '';
this.editRegion= '';
this.editKind = '';
this.editRemark= '';
}
}
})
</script>
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化