接口

src/views/data/UploadInfor.vue

@@ -34,11 +34,7 @@
             @change="materialTimeChange"
           />
           <span style="margin-left: 30px">经销商范围</span>
-          <select
-            class="selectStyle"
-            v-model="scope"
-            autocomplete="off"
-          >
+          <select class="selectStyle" v-model="scope" autocomplete="off">
             <option value="1">共通</option>
             <option value="0">部分</option>
           </select>
@@ -51,10 +47,10 @@
           <div v-for="(item, index) in areaList" :key="index">
             <input
               type="checkbox"
-              :value="item.sign"
+              :value="item"
               v-model="checkedBoxList"
               @click="clickCheckbox(index)"
-            /><span>{{ item.area }}</span>
+            /><span>{{ item }}</span>
           </div>
           <button @click.prevent="addByArea">添加</button>
         </div>
@@ -84,7 +80,7 @@
                   <img
                     src="../../img/add.png"
                     @click="addGroup(index)"
-                    v-if="addFlag[index]"
+                    v-if="item.flag"
                   />
                   <img
                     src="../../img/delete.png"
@@ -106,7 +102,8 @@
       <UpLoadTable
         :tableData="tableData"
         @change_icon="changeIcon"
-        :imgFlag="imgFlag"
+        :pageSize="pageSize"
+        :currentPage="currentPage"
       />
     </div>
     <div class="page" v-show="scope === '0'">
@@ -128,9 +125,9 @@
     </div>
     <button @click="submit" class="submitBtn">提交</button>
     <TipModal
-        :tipFlag='tipModalFlag'
-        :tipText='tipModalText'
-        @close_tip_modal='closeTipModal'
+      :tipFlag="tipModalFlag"
+      :tipText="tipModalText"
+      @close_tip_modal="closeTipModal"
     />
   </div>
 </template>
@@ -139,8 +136,7 @@
 import UpLoadTable from "./components/UploadInforTable";
 import Count from "../../components/Count";
 import Tablepage from "../../components/TablePage";
-import TipModal from "../../components/TipModal"
-import { AREASLIST } from "./uploadinfo";
+import TipModal from "../../components/TipModal";
 export default {
   props: {
     isManufacturer: {
@@ -152,7 +148,7 @@ export default {
     UpLoadTable,
     Count,
     Tablepage,
-    TipModal
+    TipModal,
   },
   watch: {},
   data() {
@@ -168,7 +164,6 @@ export default {
       addByCustomize: "",
       dlrList: [], // 自定义添加
       addGroupList: [], // 添加的小组
-      addFlag: [true, true, true, true, true, true], // 长度等于groupList.length
       optionFlag: false, // 是否展示按小组添加的选择栏
       fileDes: [], // 上传的文件名
       file: "", //上传的文件
@@ -176,14 +171,14 @@ export default {
       sum: 0, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
       currentPage: 1,
-      areaList: AREASLIST, // 按区域添加
+      areaList: [], // 按区域添加
       groupList: [], // 按小组添加
       localMonth: "",
       tableData: [], // 表格显示的数据
-      AllDlr: [], // 所有进销商数据
-      imgFlag: new Array(20).fill(true), // 筛选栏用添加图片还是删除图片
+      allDlr: [], // 所有进销商数据
+      idList: [],
       tipModalFlag: false,
-      tipModalText: ''
+      tipModalText: "",
     };
   },
   computed: {
@@ -234,57 +229,69 @@ export default {
     },
     // 点击按区域添加button
     addByArea: function () {
-      console.log(this.checkedBoxList);
-      console.log(JSON.parse(JSON.stringify(this.checkedBoxList)));
-      let dataObj = {
-        localArea: ['东区', '南区']
+      let req = {
+        localArea: this.checkedBoxList,
       };
-      this.getDlrData(dataObj);
-      this.getAllDlr(dataObj);
+      console.log(req,'按区域添加');
+      this.getAllDlr(req);
     },
     // 自定义添加
     addBySelf: function () {
       let dataObj = {
         queryParams: this.addByCustomize,
       };
-      this.getDlrData(dataObj);
+      console.log(this,dataObj, '自定义添加入参');
       this.getAllDlr(dataObj);
     },
     // 按小组添加，增加小组
     addGroup: function (index) {
-      this.addFlag.splice(index, 1, false);
-      console.log(this.addFlag);
+      this.groupList[index].flag = !this.groupList[index].flag;
     },
     // 按小组添加，删除小组
     deleteGroup: function (index) {
-      this.addFlag.splice(index, 1, true);
+      this.groupList[index].flag = !this.groupList[index].flag;
     },
     // 点击按小组添加  添加按钮
     addByGroup: function () {
       this.addGroupList = [];
-      this.addFlag.forEach((item, index) => {
-        if (!item) {
-          this.addGroupList.push(this.groupList[index]['id']);
+      this.groupList.forEach(element => {
+        if(!element.flag){
+          this.addGroupList.push(element.id);
         }
       });
-      console.log(this.addGroupList);
+      let req = {
+        groupList: this.addGroupList
+      }
+      console.log('点击按小组添加入参', req)
+      this.getAllDlr(req);
       this.optionFlag = false;
     },
     // 筛选
     changeIcon: function (i) {
-      this.imgFlag.splice(i, 1, !this.imgFlag[i]);
-      // 筛选后的数据
+      let index = (this.currentPage - 1) * this.pageSize + i;
+      this.allDlr[index].flag = !this.allDlr[index].flag;
+    },
+    // 选中经销商的id 组成列表
+    dlrIdList: function () {
+      this.idList = [];
+      this.allDlr.forEach((element) => {
+        if (element.flag) {
+          this.idList.push(element.id);
+        }
+      });
     },
     // 关闭提示框
-    closeTipModal: function() {
+    closeTipModal: function () {
       this.tipModalFlag = false;
       this.$router.go(0);
     },
     // 获取某一页面的数据，展示在表格
     changePage: function (page) {
       this.currentPage = page;
-      console.log(page);
-      this.getDlrData(this.currentPage);
+      this.tableData = this.allDlr.slice(
+        (this.currentPage - 1) * this.pageSize,
+        this.currentPage * this.pageSize
+      );
     },
     // 点击上一页，下一页，首页，尾页
     jumpPage: function (item) {
@@ -302,7 +309,10 @@ export default {
           this.currentPage = this.totalPage;
           break;
       }
-      this.getDlrData(this.currentPage);
+      this.tableData = this.allDlr.slice(
+        (this.currentPage - 1) * this.pageSize,
+        this.currentPage * this.pageSize
+      );
     },
     // 点击提交，检查名字是否重复，获取数据
     submit: function () {
@@ -320,6 +330,7 @@ export default {
           alert("请导入附件");
           return;
         }
+        this.dlrIdList();
         this.submitRequest();
       }
     },
@@ -351,11 +362,10 @@ export default {
       paramData.append("dataDesc", this.inforDes);
       paramData.append("sourceTime", this.materialTime);
       paramData.append("dealerScope", this.scope);
-      console.log(this.scope, 111)
-      if (this.scope === '0') {
-         paramData.append("dealerList", this.AllDlr);
-         console.log(1111)
-         console.log(this.AllDlr, 11111);
+      console.log(this.scope, 111);
+      if (this.scope === "0") {
+        paramData.append("dealerList", this.idList);
+        console.log(1111, this.idList);
       }
       console.log(paramData.getAll("dataName"));
       this.$http
@@ -363,7 +373,7 @@ export default {
         .then((res) => {
           if (res.data && res.data.code === 200) {
             this.tipModalFlag = true;
-            this.tipModalText = '上传成功!';
+            this.tipModalText = "上传成功!";
           } else {
             alert("上传失败，请重试");
             console.log(res);
@@ -395,24 +405,37 @@ export default {
         });
     },
     // 获取所有经销商信息接口
-    getAllDlr: function (data = {}) {
+    getAllDlr: function (data = {}, flag) {
       this.$http({
         method: "post",
         url: "/sys/agent/selectAgentInfoPage",
         data: data,
       })
         .then((res) => {
+          console.log(res);
+          this.tableData = [];
+          this.allDlr = [];
           if (res.data && res.data.code === 200) {
-            this.dlrList = [];
-            let dealerList = res.data.data;
-            dealerList.forEach((item)=>{this.AllDlr.push(item.id)})
-            console.log(this.AllDlr)
-            let resData = this.AllDlr;
-            resData.forEach((item) => {
-              // 获取自定义下拉框的值
-              this.dlrList.push(item.dlrName);
-              this.dlrList.push(item.dlrCode);
+            // 整合数据， 主要目的是加一个 flag，在用户点击筛选的时候，好判断
+            res.data.data.forEach((item) => {
+              this.allDlr.push({
+                id: item.id,
+                dlrCode: item.dlrCode,
+                dlrName: item.dlrName,
+                localArea: item.localArea,
+                flag: true,
+              });
             });
+            this.sum = res.data.count;
+            this.tableData = this.allDlr.slice(0, this.pageSize);
+            // 获取自定义添加datalist下拉框的值
+            if (!flag) {
+              this.dlrList = [];
+              this.allDlr.forEach((item) => {
+                this.dlrList.push(item.dlrName);
+                this.dlrList.push(item.dlrCode);
+              });
+            }
           } else {
             console.log(res);
           }
@@ -421,18 +444,25 @@ export default {
           console.log(err);
         });
     },
-    // 分页获取所有进销商信息接口
-    getDlrData: function (data = {}) {
+    // 获取小组接口
+    selectGroupList: function () {
       this.$http({
         method: "post",
-        url: "/sys/agent/selectAgentInfoPage",
-        data: data,
+        url: "/sys/group/selectGroupList",
+        data: {},
       })
         .then((res) => {
           if (res.data && res.data.code === 200) {
-            console.log(res, 'pageres');
-            this.tableData = res.data.data;
-            this.sum = res.data.count;
+            this.groupList = [];
+            res.data.data.forEach((item) => {
+            this.groupList.push(
+              {
+                id: item.id,
+                groupName: item.groupName,
+                flag: true
+              }
+            )
+            })
           } else {
             console.log(res);
           }
@@ -441,17 +471,17 @@ export default {
           console.log(err);
         });
     },
-    // 获取小组接口
-    selectGroupList: function () {
+    // 获取 所有区域  接口
+    getAreaList: function () {
       this.$http({
         method: "post",
-        url: "/sys/group/selectGroupList",
-        data: {},
+        url: "/sys/agent/selectAgentAreaInfoList",
       })
         .then((res) => {
+          console.log(res, 1111111);
           if (res.data && res.data.code === 200) {
-            this.groupList = res.data.data;
-            console.log(this.groupList);
+            this.areaList = res.data.data;
+            console.log(this.areaList)
           } else {
             console.log(res);
           }
@@ -467,8 +497,7 @@ export default {
   created() {
     // 获取所有经销商信息
     this.getAllDlr();
-    // 获取第一页经销商信息
-    this.getDlrData();
+    this.getAreaList();
     // 获取所有的资料名称
     this.getAllDataName();
     this.selectGroupList();

src/views/data/components/UploadInforTable.vue

@@ -1,106 +1,109 @@
 <template>
   <div class="table_template">
     <table class="table">
-        <thead>
-            <tr>
-                <td>序号</td>
-                <td>经销商名称</td>
-                <td>DLR Code</td>
-                <td>所属区域</td>
-                <td>筛选</td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="(item, index) in tableData" :key="index" :class="{ table_gray: index%2 === 0 }">
-                <td>{{ index + 1 }}</td>
-                <td >{{item.dlrName}}</td>
-                <td >{{item.dlrCode}}</td>
-                <td >{{item.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>
+      <thead>
+        <tr>
+          <td>序号</td>
+          <td>经销商名称</td>
+          <td>DLR Code</td>
+          <td>所属区域</td>
+          <td>筛选</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(item, index) in tableData"
+          :key="index"
+          :class="{ table_gray: index % 2 === 0 }"
+        >
+          <td style="width: 10%">{{ (currentPage - 1) * pageSize + 1 + index }}</td>
+          <td style="width: 40%">{{ item.dlrName }}</td>
+          <td style="width: 20%">{{ item.dlrCode }}</td>
+          <td style="width: 15%">{{ item.localArea }}</td>
+          <td style="width: 15%">
+            <img
+              src="../../../img/add.png"
+              @click="changeIcon(index)"
+              v-if="item.flag"
+            />
+            <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 []
-            }
-        },
-        // 操作样式
-        operationStyle: {
-            type: Object,
-            default: () => {
-                return {
-                    color: '#0000ff'
-                }
-            }
-        },
-        // imgFlag
-        imgFlag: {
-            type: Array,
-            default: () => {
-                let arr = new Array(20).fill(20);
-                return arr
-            }
-        }
+  props: {
+    // 表数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-    methods: { 
-        changeIcon: function(index) {
-            console.log(index);
-            this.$emit('change_icon', index);
-        }
+    // 每页表格共有多少数据
+    pageSize: {
+      type: Number,
+      default: 20,
     },
-    mounted() {
+    // 当前展示第几页
+    currentPage: {
+      type: Number,
+      default: 1,
     },
-    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%;
-        thead{
-            background-color: #8D9092;
-            height: 36px;
-            color: #fff;
-        }
-        td{
-            border: 1px solid #ccc;
-        }
-        span{
-            &:hover{
-                cursor: pointer;
-            }
-        }
+.table_template {
+  text-align: center;
+  .table {
+    background-color: #fff;
+    border-collapse: collapse;
+    border: none;
+    width: 100%;
+    thead {
+      background-color: #8d9092;
+      height: 36px;
+      color: #fff;
+    }
+    td {
+      border: 1px solid #ccc;
+    }
+    span {
+      &:hover {
+        cursor: pointer;
+      }
     }
+  }
 }
-.table_gray{
-    background: #f5f5f5;
+.table_gray {
+  background: #f5f5f5;
 }
-img{
-    width: 20px;
-    height: 20px;
+img {
+  width: 20px;
+  height: 20px;
 }
-td{
-    width: 20%;
-    height: 36px;
+td {
+//   width: 20%;
+  height: 36px;
 }
 </style>

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

@@ -9,6 +9,7 @@
               type="checkbox"
               :value="item.area"
               v-model="checkedBoxList"
+              @click="clickCheckbox(index)"
             /><span>{{ item.area }}</span>
           </div>
           <button @click.prevent="addByArea">添加</button>
@@ -101,27 +102,22 @@ export default {
         {
           sign: "all",
           area: "全区",
-          checked: false,
         },
         {
           sign: "n",
           area: "北区",
-          checked: false,
         },
         {
           sign: "s",
           area: "南区",
-          checked: false,
         },
         {
           sign: "e",
           area: "东区",
-          checked: false,
         },
         {
           sign: "self",
           area: "自定义分组",
-          checked: false,
         },
       ], // 按区域添加
       checkedBoxList: [],
@@ -140,19 +136,32 @@ export default {
     hideModal: function () {
       this.$emit("hide_modal");
     },
+    // 保证多选框全区和其他的多选框互斥
+    clickCheckbox(i) {
+      let list = this.checkedBoxList;
+      let include = list.indexOf("全区");
+      if (i === 0) {
+        this.checkedBoxList = [];
+        return;
+      }
+      if (include >= 0) {
+        this.checkedBoxList.splice(0, 1);
+      }
+    },
     // 点击按区域添加button
     addByArea: function () {
       let req = {
         localArea: this.checkedBoxList,
       };
-      this.getDlrData(req);
+      console.log(req);
+      this.getDataByArea(req);
     },
     // 自定义添加
     addBySelf: function () {
       let req = {
         queryParams: this.addByCustomize,
       };
-      this.getDlrData(req);
+      this.getDlrData(req, true);
     },
     // 筛选
     changeIcon: function (i) {
@@ -195,13 +204,13 @@ export default {
     dlrIdList: function () {
       this.idList = [];
       this.AllDlr.forEach((element) => {
-        if(element.flag) {
+        if (element.flag) {
           this.idList.push(element.id);
         }
       });
     },
     // 获取进销商信息 接口
-    getDlrData: function (data = {}) {
+    getDlrData: function (data = {}, flag) {
       this.$http({
         method: "post",
         url: "/sys/agent/selectAgentInfoPage",
@@ -210,7 +219,6 @@ export default {
         .then((res) => {
           this.tableData = [];
           this.AllDlr = [];
-          this.dlrList = [];
           if (res.data && res.data.code === 200) {
             // 整合数据， 主要目的是加一个 flag，在用户点击筛选的时候，好判断
             res.data.data.forEach((item) => {
@@ -225,7 +233,8 @@ export default {
             this.sum = res.data.count;
             this.tableData = this.AllDlr.slice(0, this.pageSize);
             // 获取自定义添加datalist下拉框的值
-            if (this.dlrList.length === 0) {
+            if (!flag) {
+              this.dlrList = [];
               this.AllDlr.forEach((item) => {
                 this.dlrList.push(item.dlrName);
                 this.dlrList.push(item.dlrCode);
@@ -239,6 +248,43 @@ export default {
           console.log(err);
         });
     },
+    // 按区域查找进销商信息  接口
+    getDataByArea: function (data) {
+      this.$http({
+        method: "post",
+        url: "/sys/agent/selectAgentAreaInfoList",
+        data: data,
+      })
+        .then((res) => {
+          this.tableData = [];
+          this.AllDlr = [];
+          if (res.data && res.data.code === 200) {
+            // 整合数据， 主要目的是加一个 flag，在用户点击筛选的时候，好判断
+            res.data.data.forEach((item) => {
+              this.AllDlr.push({
+                id: item.id,
+                dlrCode: item.dlrCode,
+                dlrName: item.dlrName,
+                localArea: item.localArea,
+                flag: true,
+              });
+            });
+            this.sum = res.data.count;
+            this.tableData = this.AllDlr.slice(0, this.pageSize);
+            // 获取自定义添加datalist下拉框的值
+            this.dlrList = [];
+            this.AllDlr.forEach((item) => {
+              this.dlrList.push(item.dlrName);
+              this.dlrList.push(item.dlrCode);
+            });
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
   },
   created() {
     this.getDlrData();