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

<template>
  <div>
    <div class="car_series">
      <div class="count">
        <button @click="showModal">新增类别</button>
        <Count :sum="sum"></Count>
      </div>
      <div class="table">
        <Table
          :tableData="tableData"
          @edit="edit"
          @delet_data="deleteData"
          :pageSize="sum"
        ></Table>
      </div>
      <div class="page" v-if="sum > 0">
        <Tablepage
          :totalPage="totalPage"
          :currentPage="currentPage"
          @change_page="changePage"
          @jump_page="jumpPage"
        ></Tablepage>
      </div>
      <div class="modal" v-if="modalFlag">
        <Modal
          :modalFlag="modalFlag"
          @submit="submit"
          @hide_modal="showModal"
        ></Modal>
      </div>
    </div>
  </div>
</template>

<script>
import Count from "../../components/Count";
import Tablepage from "../../components/TablePage";
import Table from "./components/ContentCategory1/Table";
import Modal from "./components/ContentCategory1/Modal";

export default {
  components: {
    Count,
    Table,
    Tablepage,
    Modal,
  },
  data() {
    return {
      sum: 0, // 一共有多少条数据
      pageSize: 20, // 每页展示的数据
      currentPage: 1,
      tableData: [],
      modalFlag: false, // 控制模态框展示
      dictList: [],
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
  },
  methods: {
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;
      this.getDateList(this.currentPage, this.pageSize);
    },
    // 点击上一页，下一页，首页，尾页
    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;
      }
      this.getDateList(this.currentPage, this.pageSize);
    },
    // 展示、隐藏模态框
    showModal: function () {
      this.modalFlag = !this.modalFlag;
    },
    // 点击编辑
    edit(index, newName) {
      this.updataDict(newName, index).then(() => {
        this.getDateList(this.currentPage, this.pageSize);
      });
    },
    // 点击删除
    deleteData(index) {
      this.deleteDict(index).then(() => {
        this.currentPage = Math.ceil((this.sum - 1) / this.pageSize);
        this.getDateList(this.currentPage, this.pageSize);
      });
    },
    // 新增车型模态框 保存
    submit: function (name) {
      this.addList(name).then(() => {
        this.currentPage = Math.ceil((this.sum + 1) / this.pageSize);
        this.getDateList(this.currentPage, this.pageSize);
      });
      this.modalFlag = false;
    },
    // 获取内容分类、媒体平台、常用参数接口的标识，再调接口时需要用到
    selectSysDataDictList: function () {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/sys/dataDict/selectSysDataDictList",
          data: {},
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              this.dictList = res.data.data;
              resolve();
            } else {
              console.log(res);
              reject();
            }
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    // 获取列表数据   接口
    getDateList: function (page, rows) {
      this.$http({
        method: "post",
        url: "/sys/dataDict/selectSysDataDictPage",
        data: {
          dictCode: this.dictList[1]["dictCode"],
          parentId: this.dictList[1]["id"],
          page,
          rows
        },
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            console.log(res.data.data);
            this.tableData = res.data.data;
            this.sum = res.data.count;
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 新增
    addList: function (name) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: "/sys/dataDict/addSysDataDictInfo",
          method: "post",
          data: {
            dictName: name,
            parentId: this.dictList[1]["id"],
            dictCode: this.dictList[1]["dictCode"],
          },
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res);
              resolve();
            } else {
              alert("新增失败，请重试");
              console.log(res);
            }
          })
          .catch((err) => {
            alert("新增失败，请重试");
            reject(err);
          });
      });
    },
    // 编辑   接口
    updataDict: function (newName, index) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: "/sys/dataDict/updateSysDataDictInfo",
          method: "post",
          data: {
            dictName: newName,
            id: this.tableData[index]["id"],
            parentId: this.dictList[1]["id"],
            dictCode: this.dictList[1]["dictCode"],
          },
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res);
              resolve();
            } else {
              alert("编辑失败，请重试");
              console.log(res);
            }
          })
          .catch((err) => {
            alert("编辑失败，请重试");
            reject(err);
          });
      });
    },
    // 删除   接口
    deleteDict: function (index) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: "/sys/dataDict/deleteSysDataDictInfo",
          method: "post",
          data: {
            id: this.tableData[index]["id"],
            parentId: this.dictList[1]["id"],
            // dictCode: this.dictList[1]['dictCode'],
          },
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res);
              resolve();
            } else {
              alert("删除失败，请重试");
              console.log(res);
            }
          })
          .catch((err) => {
            alert("删除失败，请重试");
            reject(err);
          });
      });
    },
  },
  created() {
    this.selectSysDataDictList()
      .then(() => {
        this.getDateList(this.currentPage, this.pageSize);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</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>