Lexus-media/src/views/parameter/CarSeries.vue

<template>
  <div>
    <div class="car_series" v-if="queryTag">
      <div class="count">
        <button @click="showModal">新增车系</button>
        <Count :sum="sum"></Count>
      </div>
      <div class="table">
        <Table
          :tableData="tableData"
          @edit="edit"
          @delet_data="deleteData"
          @car_type="carType"
          :pageSize='sum'
        ></Table>
      </div>
      <div class="page">
        <Tablepage
          :totalPage="totalPage"
          :currentPage="currentPage"
          @change_page="changePage"
          @jump_page="jumpPage"
        ></Tablepage>
      </div>
      <div class="modal" v-if="modalFlag">
        <Modal :modalFlag="modalFlag" @hide_modal="showModal" @submit='submit'></Modal>
      </div>
    </div>
    <div v-else>
      <CarType />
    </div>
  </div>
</template>

<script>
import Count from "../../components/Count";
import Tablepage from "../../components/TablePage";
import Table from "./components/CarSeriesTable";
import Modal from "./components/CarSeriesModal";
import CarType from "./components/CarType";
export default {
  components: {
    Count,
    Table,
    Tablepage,
    Modal,
    CarType,
  },
  data() {
    return {
      sum: 140, // 一共有多少条数据
      pageSize: 20, // 每页展示的数据
      currentPage: 1,
      // 表格配置
      tableData: [{ carSeries: "雷克萨斯ES" }, { carSeries: "雷克萨斯ES2" }],
      getDate: [
        { carSeries: "雷克萨斯ES", str: "123" },
        { carSeries: "雷克萨斯ES", str: "124" },
        { carSeries: "雷克萨斯ES", str: "125" },
      ],
      functionData: [],
      modalFlag: false, // 控制模态框展示
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
    // 获取路由参数
    queryTag() {
      return this.$route.query && this.$route.query.tag ? 0 : 1;
    },
  },
  methods: {
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;
      console.log(page);
    },
    // 点击上一页，下一页，首页，尾页
    jumpPage: function (item) {
      switch (item) {
        case 1:
          this.currentPage = 1;
          break;
        case 2:
          this.currentPage = this.currentPage - 1;
          break;
        case 3:
          this.currentPage = this.currentPage + 1;
          break;
        case 4:
          this.currentPage = this.totalPage;
          break;
      }
      console.log(this.currentPage);
    },
    // 获取数据
    getData: function () {
      this.tableData = [];
      this.functionData = [];
      this.getDate.forEach((element) => {
        this.tableData.push({
          carSeries: element.carSeries,
        });
        this.functionData.push({
          str: element.str,
        });
      });
    },
    // 展示、隐藏模态框
    showModal: function () {
      this.modalFlag = !this.modalFlag;
    },
    // 模态框保存
    submit: function(car) {
      console.log('车系保存', car);
      this.modalFlag = false;
    },
    // 点击编辑
    edit(index, newName) {
      console.log(this.functionData[index].str, newName);
    },
    // 点击删除
    deleteData: function(index) {
      console.log("删除", this.functionData[index].str);
    },
    // 点击系列车型
    carType: function(index) {
      // 页面变化
      this.$router.push({ query: { tag: "vehicle_type" } });
      console.log("点击系列车型", this.functionData[index].str);
    },
    // 删除数据
    detletData: function() {
      console.log('删除数据');
    }
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
.car_series {
  .count {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      width: 86px;
      height: 30px;
      position: relative;
      bottom: -5px;
      margin: 0;
      border-radius: 2px;
    }
  }
}
</style>