Lexus-media/src/views/parameter/components/PlatformModule/DetailPage.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 "./DetailPageTable";
import Modal from "./DetailPageModal";
import { php_url } from "../../../../config/env";
import axiosPhp from "axios";
export default {
  components: {
    Count,
    Table,
    Tablepage,
    Modal,
  },
  data() {
    return {
      sum: 0, // 一共有多少条数据
      pageSize: 20, // 每页展示的数据
      currentPage: 1,
      tableData: [],
      modalFlag: false, // 控制模态框展示
      parentId: (this.$route.query && this.$route.query.id) || "",
      unifiedUrl: "/lexus_php/api/",
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
    // 获取路由参数
    queryTag() {
      console.log(111, this.$route.query);
      return this.$route.query && this.$route.query.tag ? 0 : 1;
    },
  },
  methods: {
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;
      this.selectPublishPlatformPage(
        this.parentId,
        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.selectPublishPlatformPage(
        this.parentId,
        this.currentPage,
        this.pageSize
      );
    },
    // 展示、隐藏模态框
    showModal: function () {
      this.modalFlag = !this.modalFlag;
    },
    // 点击编辑
    edit(index, newName) {
      let id = this.tableData[index]["id"];
      let parentId = this.parentId;
      this.updatePublishPlatformInfo(parentId, id, newName).then(() => {
        this.selectPublishPlatformPage(
          this.parentId,
          this.currentPage,
          this.pageSize
        );
      });
    },
    // 点击删除
    deleteData(index) {
      let parentId = this.parentId;
      let id = this.tableData[index]["id"];
      this.deletePublishPlatformInfo(parentId, id).then(() => {
        this.selectPublishPlatformPage(
          this.parentId,
          this.currentPage,
          this.pageSize
        );
      });
    },
    // 新增版块模态框 保存
    submit: function (platName) {
      let parentId = this.parentId;
      this.addPublishPlatformInfo(parentId, platName).then(() => {
        this.selectPublishPlatformPage(
          this.parentId,
          this.currentPage,
          this.pageSize
        );
      });
      this.modalFlag = false;
    },
    // 新增平台 接口
    addPublishPlatformInfo: function (parentId, platformName) {
      return new Promise((resolve, reject) => {
        axiosPhp({
          method: "post",
          url: php_url + this.unifiedUrl +"publish_platform_add.php",
          data:{
            parentId,
            platformName
          },
        }).then((res) => {
          if (res.data && res.data.code === 200) {
            console.log(res);
            resolve();
          } else {
            alert(res.data.message);
            console.log(res);
          }
        }).catch((err) => {
                  console.log(err);
                  reject(err);
         });
      });
      // return new Promise((resolve, reject) => {
      //   this.$http({
      //     method: "post",
      //     url: "/base/publishPlatformManager/addPublishPlatformInfo",
      //     data: {
      //       parentId,
      //       platformName,
      //     },
      //   })
      //     .then((res) => {
      //       if (res.data && res.data.code === 200) {
      //         console.log(res);
      //         resolve();
      //       } else {
      //         alert(res.data.message);
      //         console.log(res);
      //       }
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //       reject(err);
      //     });
      // });
    },
    // 获取列表 接口
    selectPublishPlatformPage: function (parentId, page, rows) {
      axiosPhp({
        method: "post",
        url: php_url + this.unifiedUrl +"publish_platform_list.php",
        data:{
          parentId,
          page,
          rows,
        },
      }).then((res) => {
        if (res.data && res.data.code === 200) {
          console.log(res);
          this.tableData = res.data.data;
          this.sum = Number(res.data.count);
        } else {
          console.log(res);
        }
      }).catch((err) => {
          console.log(err);
       });
      // this.$http({
      //   method: "post",
      //   url: "/base/publishPlatformManager/selectPublishPlatformPage",
      //   data: {
      //     parentId,
      //     page,
      //     rows,
      //   },
      // })
      //   .then((res) => {
      //     if (res.data && res.data.code === 200) {
      //       console.log(res);
      //       this.tableData = res.data.data;
      //       this.sum = res.data.count;
      //     } else {
      //       console.log(res);
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    // 编辑平台模块，接口
    updatePublishPlatformInfo: function (parentId, id, platformName) {
      return new Promise((resolve, reject) => {
        axiosPhp({
          method: "post",
          url: php_url + this.unifiedUrl +"publish_platform_update.php",
          data:{
            parentId,
            id,
            platformName
          },
        }).then((res) => {
          if (res.data && res.data.code === 200) {
            resolve();
          } else {
            alert("编辑失败，请重试");
            console.log(res);
          }
        }).catch((err) => {
          alert("编辑失败，请重试");
          console.log(err);
          reject(err);
        });
      });
      // return new Promise((resolve, reject) => {
      //   this.$http({
      //     method: "post",
      //     url: "/base/publishPlatformManager/updatePublishPlatformInfo",
      //     data: {
      //       parentId,
      //       id,
      //       platformName,
      //     },
      //   })
      //     .then((res) => {
      //       console.log(res, 1111);
      //       if (res.data && res.data.code === 200) {
      //         console.log(res);
      //         resolve();
      //       } else {
      //         alert("编辑失败，请重试");
      //         console.log(res);
      //       }
      //     })
      //     .catch((err) => {
      //       alert("编辑失败，请重试");
      //       console.log(err);
      //       reject(err);
      //     });
      // });
    },
    // 删除平台模块 接口
    deletePublishPlatformInfo: function (parentId, id) {
      return new Promise((resolve, reject) => {
        axiosPhp({
          method: "post",
          url: php_url + this.unifiedUrl +"publish_platform_del.php",
          data:{
            parentId,
            id,
          },
        }).then((res) => {
          if (res.data && res.data.code === 200) {
            resolve();
          } else {
            alert("删除失败，请重试");
            console.log(res);
          }
        }).catch((err) => {
          alert("删除失败，请重试");
          console.log(err);
          reject(err);
        });
      });
      // return new Promise((resolve, reject) => {
      //   this.$http({
      //     method: "post",
      //     url: "/base/publishPlatformManager/deletePublishPlatformInfo",
      //     data: {
      //       parentId,
      //       id,
      //     },
      //   })
      //     .then((res) => {
      //       if (res.data && res.data.code === 200) {
      //         console.log(res);
      //         resolve();
      //       } else {
      //         alert("编辑失败，请重试");
      //         console.log(res);
      //       }
      //     })
      //     .catch((err) => {
      //       alert("编辑失败，请重试");
      //       console.log(err);
      //       reject(err);
      //     });
      // });
    },
  },
  mounted() {
    this.selectPublishPlatformPage(
      this.parentId,
      this.currentPage,
      this.pageSize
    );
  },
  beforeRouteEnter(to, from, next) {
    console.log(from)
    let meta = to.meta;
    console.log(meta)
    meta[2].name = to.query.setion + '版块管理'
    next()
  }
};
</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>