简单的管理系统

最新推荐文章于 2023-02-26 17:57:37 发布
鸡蛋灌饼1
最新推荐文章于 2023-02-26 17:57:37 发布
阅读量291
点赞数
文章标签： vue.js javascript
本文链接：https://blog.csdn.net/jidanguanbing1/article/details/124105343
版权
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title></title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="app">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">添加品牌</h3>
      </div>
      <div class="panel-body">
        <form action="" method="POST" class="form-inline" role="form">
          <div class="form-group">
            <label class="" for="">ID:</label>
            <input type="text" v-model="carId" class="form-control" id="" placeholder="请输入id" />
          </div>
          <div class="form-group">
            <label class="" for="">name:</label>
            <input type="text" v-model="carName" class="form-control" id="" placeholder="Input field" />
          </div>


          <button type="submit" class="btn btn-primary" @click.prevent="addCar">
            添加
          </button>

          <div class="form-group">
            <label class="" for="">搜索名称关键字:</label>
            <input type="text" class="form-control" id="" placeholder="Input field" v-model="keyWord" />
          </div>
        </form>
      </div>
    </div>

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
          <th>Modify</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr v-for="(item,index) in carList" :key="item.id"> -->
        <!-- 改为函数返回数组 -->
        <tr v-for="(item,index) in filterCarList()" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime | timeFormat('YYYY-MM-DD HH:mm:SS')}}</td>

          <td>
            <!-- <button type="button" class="btn btn-danger" @click="deleteCar(index)">删除</button> -->

            <button data-toggle="modal"  :data-target="'#car'+item.id" type="button" class="btn btn-danger"
             >
              删除
            </button>
              <!-- 模态框 -->
          <div class="modal fade" :id="'car'+item.id">
            <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">
                  确定 <span> 删除</span> 吗
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                  <button type="button" class="btn btn-success"  @click="deleteCar(item.id)" data-dismiss="modal">确定</button>

                  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>

              </div>
            </div>
          </div>
          <!-- 模态框 -->
          </td>
          <td>
            <!-- <input type="text" placeholder="名字" :id="item.id" v-model="item.changname"> -->
            <button data-toggle="modal" :data-target="'#myModal'+item.id"  :id="item.id">更改</button>
              <!-- 模态框 -->
          <div class="modal fade" :id="'myModal'+item.id">
            <div class="modal-dialog">
              <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                  <h4 class="modal-title">修改名字中：{{item.name}}</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                  <input type="text" v-model='changname'>
                  确定更改！！！！！！！！吗
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary"     data-dismiss="modal" @click="changeCarName(item.id)">确定</button>

                  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>

              </div>
            </div>
          </div>

          </td>
        




    


        </tr>
      </tbody>
    </table>
  </div>

  <script>
    // console.log(Vue);
    Vue.filter("timeFormat", function (data, format) {
      // YYYY-MM-DD
      // 2020-1-5
      let Y = data.getFullYear();
      let M =
        data.getMonth() + 1 > 10
          ? data.getMonth() + 1
          : "0" + (data.getMonth() + 1);


      let D = data.getDate().toString().padStart(2, "0");
      let H = data.getHours().toString().padStart(2, "0");
      let m = data.getMinutes().toString().padStart(2, "0");
      let S = data.getSeconds().toString().padStart(2, "0");
      // console.log(Y);
      // console.log(M);
      // console.log(D);
      // console.log(H);

      // return  `${Y}/${M}/${D}`
      return format.replace("YYYY", Y).replace("MM", M).replace("DD", D).replace("HH", H).replace("mm", m).replace("SS", S);
    });
    const vm = new Vue({
      el: "#app",
      data: {
        changname: "",
        carList: [
          { id: 1, name: "宝马", ctime: new Date(), changname: "" },
          { id: 3, name: "奔驰", ctime: new Date(), changname: "" },
          { id: 7, name: "五菱", ctime: new Date(), changname: "" },
        ],
        // 汽车id
        carId: "",
        // 汽车品牌
        carName: "",
        //   关键字
        keyWord: "",
      },
      methods: {
        addCar() {
          console.log(this.carId);
          console.log(this.carName);
          // 非空判断
          if (this.carName && this.carId) {
            // 判断id是否存在
            if (
              this.carList.some((item, index) => {
                return item.id == this.carId;
              })
            ) {
              alert("id重复");
            } else {
              // 添加数据
              this.carList.push({
                id: this.carId,
                name: this.carName,
                ctime: new Date(),
                changname: this.changname
              });
              //   数据清空
              this.carId = "";
              this.carName = "";
            }
          } else {
            alert("添加完整数据");
          }


        },


        deleteCar(id) {
          console.log(id);
          // 根据id找到下标
          let index = this.carList.findIndex((item) => {
            return id == item.id;
          });
          console.log(index);

          this.carList.splice(index, 1);
        },
        // 返回新数组
        filterCarList() {

          let newArr = [];
          for (let i = 0; i < this.carList.length; i++) {
            if (this.carList[i].name.includes(this.keyWord)) {
              newArr.push(this.carList[i]);
            }
          }

          return newArr;
        },

        hit(id) {
          let index = this.carList.findIndex((item) => {
            return id == item.id;
          });
          this.carList[index].name = this.carList[index].changname
        },


        // 
        changeCarName(id){
          console.log(this.changname);
          console.log(id);
		 if(this.changname.length){
			 
			 // 根据id找到对应数据
			 this.carList.findIndex((item)=>{
			   return item.id == id
			 });
			 
			 this.carList[this.carList.findIndex((item)=>{
			   return item.id == id
			 })].name = this.changname
			 this.ctime = new Date()
			 
		 }else{
			 alert('请')
		 }

          // this.changname = ""
        }
      },
    });
  </script>
</body>

</html>
鸡蛋灌饼1
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的管理系统

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title></title&gt.
复制链接

扫一扫