Lexus-media/src/views/parameter/components/Grouping/GroupMember.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">
      <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 './GroupMemberTable';
import Modal from "./GroupMemberModal";

export default {
  components: {
    Count,
    Table,
    Tablepage,
    Modal
  },
  data() {
    return {
      sum: 140, // 一共有多少条数据
      pageSize: 20, // 每页展示的数据
      currentPage: 1,
      tableData: [],
      modalFlag: false, // 控制模态框展示
      groupId: this.$route.query.id
    }
  },
  computed:{
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum/this.pageSize);
    }
  },
  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);
    },
    // 展示、隐藏模态框
    showModal: function() {
      this.modalFlag = !this.modalFlag;
    },
    // 点击编辑
    edit (index, newName) {
      console.log(index, newName);
    },
    // 点击删除
    deleteData (index) {
      let req = {
        id: this.tableData[index]['id'],
        groupId: this.groupId
      }
      this.deleteAgentInfo(req).then(() => {
        this.selectAgentInfoPage(this.groupId);
      })
      console.log('删除', index);
    },
    // 新增车型模态框 保存
    submit: function(list) {
      let req = {
        groupId: this.groupId,
        agentId: list
      }
      console.log(req, '入参')
      this.groupAddDlr(req).then(() => {
        this.selectAgentInfoPage(this.groupId);
      })
       ///sys/agentGroup/bindAgentGroup 调用这个接口来新增小组成员
      // 入参 {
      //  groupId:groupId
      //  agentId:[经销商id1,经销商id2]
      // }
        this.modalFlag = false;
    },
    // 获取列表 接口
    selectAgentInfoPage: function (groupId) {
      this.$http({
        method: "post",
        url: "/sys/agent/selectAgentInfoPage",
        data: {
          groupId
        },
      })
        .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);
        });
    },
    // 删除平台模块 接口
    deleteAgentInfo: function (data={}) {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/sys/agent/deleteAgentInfo",
          data
        })
          .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);
          });
      });
    },
    // 新增分组下的经销商
    groupAddDlr: function (data) {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/sys/agentGroup/bindAgentGroup",
          data
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res);
              resolve();
            } else {
              alert("新增失败，请重试");
              console.log(res);
            }
          })
          .catch((err) => {
            console.log(err);
            reject(err);
          });
      });
    },
  },
  mounted() {
    this.selectAgentInfoPage(this.groupId);
  }
}
</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>