权限分组

src/views/parameter/Grouping.vue

@@ -11,7 +11,7 @@
           @edit="edit"
           @delet_data="deleteData"
           @group_member="groupMember"
-          :pageSize='sum'
+          :pageSize="sum"
         ></Table>
       </div>
       <div class="page">
@@ -23,11 +23,17 @@
         ></Tablepage>
       </div>
       <div class="modal" v-if="modalFlag">
-        <Modal :modalFlag="modalFlag" @hide_modal="showModal" @submit='submit'></Modal>
+        <Modal
+          :modalFlag="modalFlag"
+          @hide_modal="showModal"
+          @submit="submit"
+        ></Modal>
       </div>
     </div>
     <div v-else>
-      <GroupMember />
+      <GroupMember 
+        :groupId='groupId'
+      />
     </div>
   </div>
 </template>
@@ -53,15 +59,8 @@ export default {
       currentPage: 1,
       // 表格配置
       tableData: [],
-      getDate: [
-        { group: "第一小组", str: "13" },
-        { group: "第二小组", str: "14" },
-        { group: "第三小组", str: "15" },
-        { group: "第四小组", str: "125" },
-        { group: "第五小组", str: "125" },
-      ],
-      functionData: [],
       modalFlag: false, // 控制模态框展示
+      groupId: ''
     };
   },
   computed: {
@@ -98,50 +97,143 @@ export default {
       }
       console.log(this.currentPage);
     },
-    // 获取数据
-    getData: function () {
-      this.tableData = [];
-      this.functionData = [];
-      this.getDate.forEach((element) => {
-        this.tableData.push({
-          group: element.group,
-        });
-        this.functionData.push({
-          str: element.str,
-        });
-      });
-    },
     // 展示、隐藏模态框
     showModal: function () {
       this.modalFlag = !this.modalFlag;
     },
-    // 模态框保存
-    submit: function(groupName) {
-      console.log('小组保存', groupName);
+    // 模态框保存，
+    submit: function (groupName) {
+      console.log("小组保存", groupName);
+      this.addGroupInfo(groupName).then(() => {
+        this.selectGroupList();
+      });
       this.modalFlag = false;
     },
     // 点击编辑
     edit(index, newName) {
-      console.log(this.functionData[index].str, newName);
+      console.log(index, newName);
+      let id = this.tableData[index]['id'];
+      this.updateGroupInfo(id, newName).then(() => { 
+        this.selectGroupList();
+      })
     },
     // 点击删除
-    deleteData: function(index) {
-      console.log("删除", this.functionData[index].str);
+    deleteData: function (index) {
+      console.log("删除", index);
+      let id = this.tableData[index]['id'];
+      this.deleteGroupInfo(id).then(() => {
+        this.selectGroupList();
+      })
     },
-    // 点击系列车型
-    groupMember: function(index) {
+    // 点击小组成员
+    groupMember: function (index) {
       // 页面变化
       this.$router.push({ query: { tag: "group_menber" } });
-      console.log("点击系列车型", this.functionData[index].str);
+      this.groupId = this.tableData[index]['id'];
+    },
+    // 新增小组 接口
+    addGroupInfo: function (groupName) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          method: "post",
+          url: "/sys/group/addGroupInfo",
+          data: {
+            groupName
+          },
+        })
+          .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);
+          });
+      });
+    },
+    // 获取列表 接口
+    selectGroupList: function () {
+      this.$http({
+        method: "post",
+        url: "/sys/group/selectGroupList",
+        data: {},
+      })
+        .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);
+        });
+    },
+    // 编辑平台模块，接口
+    updateGroupInfo: function (id, platformName) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          method: "post",
+          url: "/sys/group/updateGroupInfo",
+          data: {
+            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);
+          });
+      });
+    },
+    // 删除平台模块 接口
+    deleteGroupInfo: function (id) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          method: "post",
+          url: "/sys/group/deleteGroupInfo",
+          data: {
+            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);
+          });
+      });
     },
-    // 删除数据
-    detletData: function() {
-      console.log('删除数据');
-    }
-  },
-  mounted() {
-    this.getData();
   },
+  created() {
+    this.selectGroupList();
+  }
 };
 </script>
 

src/views/parameter/components/Grouping/GroupMember.vue

@@ -39,6 +39,12 @@ import Table from './GroupMemberTable';
 import Modal from "./GroupMemberModal";
 
 export default {
+  props: {
+    groupId: {
+      type: String,
+      default: ''
+    }
+  },
   components: {
     Count,
     Table,
@@ -125,9 +131,64 @@ export default {
         console.log('保存', list1, list2);
         this.modalFlag = false;
     },
+    // 点击小组成员
+    groupMember: function (index) {
+      // 页面变化
+      this.$router.push({ query: { tag: "group_menber" } });
+      this.groupId = this.tableData[index]['id'];
+    },
+    // 获取列表 接口
+    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 (groupId) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          method: "post",
+          url: "/sys/agent/deleteAgentInfo",
+          data: {
+            groupId
+          },
+        })
+          .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.getData();
+    console.log(this.groupId);
   }
 }
 </script>

src/views/parameter/components/Grouping/GroupMemberModal.vue

@@ -33,13 +33,8 @@
         </div>
         <div class="table">
           <Table
-            :trStyle="trStyle"
-            :tableHeader="tableHeader"
             :tableData="tableData"
-            :tableHeadStyle="tableHeadStyle"
-            :discolor="discolor"
             @change_icon="changeIcon"
-            :operationStyle="operationStyle"
             :imgFlag="imgFlag"
           >
           </Table>
@@ -129,36 +124,10 @@ export default {
       ], // 按区域添加
       checkedBoxList: [],
       addByCustomize: [],
-      trStyle: {
-        background: "#ffffff",
-        height: "36px",
-        width: "20%",
-      },
-      tableHeader: ["序号", "经销商名称", "DLR Code", "所属区域", "筛选"],
-      tableData: [
-        { name: "北京博瑞", code: "L020", area: "东区" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-        { name: "a", code: "a", area: "N" },
-      ],
-      tableHeadStyle: {
-        background: "#8D9092",
-        height: "36px",
-        color: "#fff",
-      },
-      discolor: false, // 是否隔行变色,
-      imgFlag: new Array(20).fill(true), // 筛选栏用添加图片还是删除图片
-      operationStyle: {
-        width: "20px",
-        height: "20px",
-      },
+      tableData: [],
+      imgFlag: new Array(this.pageSize).fill(true), // 筛选栏用添加图片还是删除图片
+      dlrList: [],
+      AllDlr: [],
     };
   },
   methods: {
@@ -207,7 +176,60 @@ export default {
     mousewheel: function (e) {
       e.preventDefault();
     },
+    // 获取所有经销商信息接口
+    getAllDlr: function (data = {}) {
+      this.$http({
+        method: "post",
+        url: "/sys/agent/selectAgentInfoList",
+        data: data,
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            this.dlrList = [];
+            this.AllDlr = res.data.data;
+            let resData = JSON.parse(JSON.stringify(res.data.data));
+            resData.forEach((item) => {
+              // 获取自定义下拉框的值
+              if (item.dlrCode || item.dlrName) {
+                this.dlrList.push({
+                  dlrCode: item.dlrCode,
+                });
+                this.dlrList.push({
+                  dlrName: item.dlrName,
+                });
+              }
+            });
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 分页获取所有进销商信息接口
+    getDlrData: function (data = {}) {
+      this.$http({
+        method: "post",
+        url: "/sys/agent/selectAgentInfoPage",
+        data: data,
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            this.tableData = res.data.data;
+            this.sum = res.data.count;
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
   },
+  created() {
+    this.getDlrData();
+  }
 };
 </script>
 
@@ -256,7 +278,7 @@ export default {
       }
     }
     .addByCustomize {
-      margin: 20px 0 0 30px;
+      margin: 20px 0 0 0;
       button {
         height: 28px;
       }

src/views/parameter/components/Grouping/GroupMemberTable.vue

@@ -3,7 +3,7 @@
     <table>
       <thead>
         <tr>
-          <td>车型</td>
+          <td>成员</td>
           <td>操作</td>
         </tr>
       </thead>

src/views/parameter/components/Grouping/GroupingTable.vue

@@ -14,12 +14,12 @@
           :class="{ table_gray: index % 2 === 0 }"
         >
           <td style="width: 50%">
-            <p v-if="!editFlag[index]">{{ obj.group }}</p>
+            <p v-if="!editFlag[index]">{{ obj.groupName }}</p>
             <input
               type="text"
               v-model="newName"
               v-else
-              :placeholder="obj.group"
+              :placeholder="obj.groupName"
             />
           </td>
           <td style="width: 50%" class="operation">
@@ -72,7 +72,7 @@ export default {
     // 点击编辑
     edit: function (i) {
       this.getEditArr(); // 确保只有一个在编辑
-      this.newName = this.tableData[i] && this.tableData[i].group;
+      this.newName = this.tableData[i] && this.tableData[i].groupName;
       this.editFlag.splice(i, 1, true);
     },
     // 确认编辑

src/views/parameter/components/Grouping/ModalTable.vue

@@ -1,131 +1,121 @@
 <template>
   <div class="table_template">
     <table class="table">
-        <thead>
-            <tr :style="tableHeadStyle">
-                <td v-for="(item, index) in tableHeader" :key="index" :style="tableHeadStyle">{{ item }}</td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: !discolor && index%2 === 0 }">
-                <td :style="trStyle" v-if="flag">{{ index + 1 }}</td>
-                <td v-for="(item, index) in obj" :key="index" :style="trStyle">
-                    {{ item }}
-                </td>
-                <td :style="trStyle">
-                    <img src="../../../../img/add.png" @click="changeIcon(index)" :style="operationStyle" v-if="imgFlag[index]">
-                    <img src="../../../../img/delete.png" @click="changeIcon(index)" :style="operationStyle" v-else>
-                </td>
-            </tr>
-        </tbody>
+      <thead>
+        <tr>
+          <td>序号</td>
+          <td>经销商名称</td>
+          <td>DLR Code</td>
+          <td>所属区域</td>
+          <td>筛选</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(obj, index) in tableData"
+          :key="index"
+          :class="{ table_gray: index % 2 === 0 }"
+        >
+          <td >{{ index + 1 }}</td>
+          <td>{{ obj.dlrCode }}</td>
+          <td>{{ obj.dlrName }}</td>
+          <td>{{ obj.localArea }}</td>
+          <td >
+            <img
+              src="../../../../img/add.png"
+              @click="changeIcon(index)"
+              v-if="imgFlag[index]"
+            />
+            <img
+              src="../../../../img/delete.png"
+              @click="changeIcon(index)"
+              v-else
+            />
+          </td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </template>
 
 <script>
 export default {
-    props: {
-        // 表数据
-        tableData: {
-            type: Array,
-            default: () => {
-                return []
-            }
-        },
-        // 表头
-        tableHeader: {
-            type: Array,
-            default: () => {
-                return []
-            }
-        },
-        // 表头样式
-        tableHeadStyle: {
-            type: Object,
-            default: () => {
-                return {
-                    background: '#848484',
-                    height: '50px',
-                    color: '#fff'
-                }
-            }
-        },
-        // 操作样式
-        operationStyle: {
-            type: Object,
-            default: () => {
-                return {
-                    color: '#0000ff'
-                }
-            }
-        },
-        // imgFlag
-        imgFlag: {
-            type: Array,
-            default: () => {
-                let arr = new Array(20).fill(20);
-                return arr
-            }
-        },
-        // 表格除去表头的样式
-        trStyle: {
-            type: Object,
-            default: () => {
-                return {
-                    width: '200px',
-                    height: '50px'
-                }
-            }
-        },
-        // 是否隔行变色
-        discolor: {
-            type: Boolean,
-            default: true
-        },
-        // 每页表格共有多少数据
-        pageSize: {
-            type: Number,
-            default: 20
-        },
-        flag: {
-            type: Boolean,
-            default: true
-        },
+  props: {
+    // 表数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-    methods: { 
-        changeIcon: function(index) {
-            console.log(index);
-            this.$emit('change_icon', index);
-        }
+    // imgFlag
+    imgFlag: {
+      type: Array,
+      default: () => {
+        let arr = new Array(20).fill(20);
+        return arr;
+      },
     },
-    mounted() {
+    // 每页表格共有多少数据
+    pageSize: {
+      type: Number,
+      default: 20,
     },
-    data() {
-        return {
-        }
-    }
+  },
+  methods: {
+    changeIcon: function (index) {
+      console.log(index);
+      this.$emit("change_icon", index);
+    },
+  },
+  mounted() {},
+  data() {
+    return {};
+  },
 };
 </script>
 
 <style scoped lang="less">
-.table_template{
-    text-align: center;
-    .table{
-        background-color: #fff;
-        border-collapse:collapse;
-        border:none;
-        width: 100%;
-        td{
-            border: 1px solid #ccc;
+.table_template {
+  text-align: center;
+  .table {
+    background-color: #fff;
+    border-collapse: collapse;
+    border: none;
+    width: 100%;
+    thead {
+      tr {
+        background: #8d9092;
+        height: 36px;
+        color: #fff;
+      }
+    }
+    td {
+      border: 1px solid #ccc;
+    }
+    span {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    tbody {
+        tr{
+        height: 36px;
+
         }
-        span{
-            &:hover{
-                cursor: pointer;
-            }
+      td {
+        background: #ffffff;
+        height: 36px;
+        width: 20%;
+        img{
+            height: 20px;
+            width: 20px;
         }
+      }
     }
+  }
 }
-.table_gray{
-    background: #f5f5f5;
+.table_gray {
+  background: #f5f5f5;
 }
 </style>