master

分支 (1)

管理

管理

master

vue-courseware
/
29-综合练习-学员信息管理[3编辑].html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>综合练习-学员信息管理</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/vue.js"></script>
    <style>
      .danger {
        background-color: #d9534f;
        color: #fff;
      }
      #myModal {
        background-color: rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>

  <body>
    <div id="app" class="container">
      <h1>学员信息录入</h1>
      <!-- 表单 -->
      <my-form @my-add="add"></my-form>
      <h1>学员信息展示</h1>
      <div class="btnList" v-if="arr.length>0">
        <button
          type="button"
          class="btn btn-info"
          v-on:click="changeState('all')"
        >
          全部
        </button>
        <button
          type="button"
          class="btn btn-danger"
          v-on:click="changeState('bad')"
        >
          不及格
        </button>
        <button
          type="button"
          class="btn btn-warning"
          v-on:click="changeState('good')"
        >
          良好
        </button>
        <button
          type="button"
          class="btn btn-success"
          v-on:click="changeState('great')"
        >
          优秀
        </button>
      </div>
      <table class="table table-bordered">
        <tr>
          <th>#</th>
          <th>姓名</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
        <tr v-if="arr.length==0">
          <td colspan="4" class="text-center">当前没有学员信息</td>
        </tr>
        <!-- 要求，不及格的学员信息背景色为红色  class---danger  -->
        <!-- 表格每一行，调用组件，防止表格解析的时候把组件解析到表格外面，所以is调用组件 -->
        <tr
          @my-show="show"
          @my-del="del"
          v-if="arr.length>0"
          is="my-tr"
          v-for="(ele,i) in filterData"
          :key="i"
          :ele="ele"
          :i="i"
        ></tr>
      </table>
      <!-- 模态框 v-if每一次显示都重新调用组件-->
      <my-model
        v-if="isShow"
        @my-close="close"
        :edit-data="editData"
        @my-save="save"
      ></my-model>
    </div>
  </body>
  <script>
    Vue.component("my-form", {
      template: `<div>
            <div class="form-group">
                <label for="name">姓名</label>
                <input v-model="name" type="text" class="form-control" id="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="score">成绩</label>
                <input v-model="score" type="text" class="form-control" id="score" placeholder="请输入成绩">
            </div>
            <button type="button" class="btn btn-primary" v-on:click="add">录入</button>
        </div>`,
      data() {
        return {
          name: "",
          score: "",
        };
      },
      methods: {
        add() {
          this.$emit("my-add", [this.name, this.score]);
        },
      },
    });
    Vue.component("my-tr", {
      template: `<tr>
                <td>{{i+1}}</td>
                <td>{{ele[0]}}</td>
                <td>{{ele[1]}}</td>
                <td>
                    <button type="button" class="btn btn-info btn-xs" @click="showModel">编辑</button>
                    <button type="button" class="btn btn-danger btn-xs" @click="del">删除</button>
                </td>
            </tr>`,
      props: ["ele", "i"],
      methods: {
        del() {
          this.$emit("my-del", this.ele[2]);
        },
        showModel() {
          //控制模态框显示
          this.$emit("my-show", this.ele);
        },
      },
    });
    Vue.component("my-model", {
      template: `<div
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
        class="modal fade in"
        style="display: block"
      >
        <div role="document" class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                data-dismiss="modal"
                aria-label="Close"
                class="close"
                @click="close"
              >
                <span aria-hidden="true">×</span>
              </button>
              <h4 id="myModalLabel" class="modal-title">信息编辑</h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label for="editName">姓名</label>
                <input
                  type="text"
                  id="editName"
                  placeholder="请输入姓名"
                  class="form-control"
                  v-model="editArr[0]"
                />
              </div>
              <div class="form-group">
                <label for="editScore">成绩</label>
                <input
                  type="text"
                  id="editScore"
                  placeholder="请输入成绩"
                  class="form-control"
                  v-model="editArr[1]"
                />
              </div>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                data-dismiss="modal"
                class="btn btn-primary"
                @click="save"
              >
                保存
              </button>
            </div>
          </div>
        </div>
      </div>`,
      mounted() {
        console.log(this.editData);
        //es6 数组的拓展,可以将数组展开成字符集
        // console.log(...this.editData);
        // console.log([...this.editData]);
        this.editArr = [...this.editData];
      },
      data() {
        return {
          editArr: [],
        };
      },
      props: ["editData"], //提供组件首次渲染的数据，避免双向绑定在未保存之前就更新数据，所以添加组件的data
      methods: {
        close() {
          this.$emit("my-close");
        },
        save() {
          //通知父组件，将对应的数据修改替换成新的姓名 年龄
          this.$emit("my-save", this.editArr);
        },
      },
    });
    new Vue({
      el: "#app", //声明vue实例对象对应的标签容器
      data: {
        //页面的数据，响应式数据
        isShow: false, //控制模态框显示 false---隐藏
        editData: null, //记录被编辑的数据
        arr: [], //记录所有学员信息
        state: "all", //记录筛选的情况  all--全部学员  good--良好（75~85）  great--优秀（>=85）  bad--不及格(<60)
      },
      mounted() {
        //获取本地缓存的数据
        let oldArr = window.localStorage.getItem("list")
          ? JSON.parse(window.localStorage.getItem("list"))
          : [];
        //把数据写入缓存中（sessionStorage，localStorage），写入对象的时候，要转成字符串
        this.arr = oldArr;
      },
      methods: {
        add(data) {
          //添加信息
          let info = [data[0], data[1], new Date().getTime()];
          this.arr.push(info);
          // console.log(this.arr);
          //存到本地缓存中
          window.localStorage.setItem("list", JSON.stringify(this.arr));
        },
        changeState(s) {
          //切换当前筛选状态
          this.state = s;
        },
        del(id) {
          //删除学员信息（删除this.arr的数据，更新缓存的数据）
          for (let i in this.arr) {
            if (this.arr[i][2] == id) {
              //从所有学员信息中找到符合那一条删除
              this.arr.splice(i, 1);
            }
          }
          //更新缓存的数据
          window.localStorage.setItem("list", JSON.stringify(this.arr));
        },
        show(arr) {
          //控制模态框显示，传递参数
          this.isShow = true;
          this.editData = arr; //记录被编辑的id
        },
        close() {
          this.isShow = false;
        },
        save(arr) {
          //保存
          console.log(arr);
          //找到数据包中编辑的数据，修改
          for (let n in this.arr) {
            if (this.arr[n][2] == arr[2]) {
              //   this.arr[n] = arr;   //不能使用索引值修改数组
              this.arr.splice(n, 1, arr);
              //vue中推荐修改数组元素的方法
              this.$set(this.arr, n, arr); //修改  this.$set(数组名，索引值，新的内容)
            }
          }
          console.log(this.arr);
          window.localStorage.setItem("list", JSON.stringify(this.arr));
          this.isShow = false;
        },
      },
      computed: {
        filterData() {
          //根据当前的筛选状态 state，筛选所有信息，把符合条件返回
          let newArr = [];
          switch (this.state) {
            case "all":
              newArr = this.arr;
              break;
            case "good":
              newArr = this.arr.filter((ele) => ele[1] > 75 && ele[1] < 85);
              break;
            case "great":
              newArr = this.arr.filter((ele) => ele[1] >= 85);
              break;
            case "bad":
              newArr = this.arr.filter((ele) => ele[1] < 60);
              break;
          }
          return newArr;
        },
      },
    });
  </script>
</html>