品牌的增删改查

品牌的增删改查

<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">&times;</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">&times;</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>