品牌的增删改查
<script>
import {defineComponent} from 'vue'
import index from "vuex";
export default defineComponent({
name: "BrandManagement",
computed: {
index() {
return index
}
},
data() {
return{
oldName:null,
newName:null,
delIndex:'',
modifyIndex:'',
carId:'',
carName:'',
keyWorld:'',
carList:[
{
id:1,
name:'奔驰',
Ctime:new Date()
},
{
id:2,
name:'宝马',
Ctime:new Date()
}
]
}
},
methods:{
add(){
// console.log('111')
let obj = {
id:this.carId,
name:this.carName,
Ctime:new Date()
}
if (this.carList.some(item => item.id == this.carId)){
alert('Id重复')
}else {
this.carList.push(obj)
this.carId=''
this.carName=''
}
},
del(index){
// console.log('22222')
// this.carList.splice(this.carList.indexOf(index),1)
this.delIndex = this.carList.indexOf(index)
},
confirm() {
this.carList.splice(this.delIndex,1)
},
search(){
// console.log(this.keyWorld)
// let arr = []
// this.carList.forEach(item => {
// if (item.name.includes(this.keyWorld)) {
// console.log(item.name)
// arr.push(item)
// }
// })
// console.log(arr)
// this.carList = arr
return this.carList.filter((item) => {
return item.name.includes(this.keyWorld)
})
},
modify(item) {
this.oldName = item.name
this.modifyIndex = this.carList.indexOf(item)
},
update() {
this.carList[this.modifyIndex].name = this.newName
this.newName = ''
},
updateCancel() {
alert('取消修改')
}
}
})
</script>
<template>
<div>
<router-link to="/key">Board</router-link>
<div class="container">
<div class="card">
<div class="card-header">添加品牌</div>
<div class="card-body">
<form class="form-inline">
<label for="email">Id:</label>
<input type="text" class="form-control" id="email" v-model="carId">
<label for="pwd">Name:</label>
<input type="text" class="form-control" id="pwd" v-model="carName">
<button type="button" class="btn btn-primary" @click="add">添加</button>
<label for="pwd">搜索关键字:</label>
<input type="text" class="form-control" id="pwd" v-model="keyWorld" @keyup="search">
</form>
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item) in search()" :key="item.id">
<td>{{item.id}}</td>
<td>{{ item.name }}</td>
<td>{{ item.Ctime }}</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal" @click="del(item)">删除</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalModify" @click="modify(item)">修改</button>
</td>
</tr>
<!-- <tr>-->
<!-- <td>2</td>-->
<!-- <td>宝马</td>-->
<!-- <td>2024-03-25 15:43</td>-->
<!-- <td><button type="button" class="btn btn-danger">删除</button></td>-->
<!-- </tr>-->
</tbody>
</table>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">是否删除</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirm">确认</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" >取消</button>
</div>
</div>
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModalModify">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">修改名字</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<div class="form-group">
<label for="usr">原来的name:</label>
<input type="text" class="form-control" id="usr" v-model="oldName">
</div>
<div class="form-group">
<label for="pwd">修改的name:</label>
<input type="text" class="form-control" id="pwd" v-model="newName">
</div>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @click="update">确认</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" @click="updateCancel">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="less">
</style>