1

src/App.vue

@@ -6,12 +6,12 @@
 
 <script>
 export default {
-  name: "App"
+  name: "App",
 };
 </script>
 
 <style>
-@import "//at.alicdn.com/t/font_1769104_m5nx47o7118.css";
+@import "//at.alicdn.com/t/font_2077629_k0elxank7id.css";
 @import "./assets/css/common.css";
 @import "./assets/css/zkcss.css";
 html,
@@ -20,27 +20,30 @@ body {
   padding: 0;
   height: 100%;
 }
-*{
-  margin:0;
-  padding:0;
+* {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
 #app {
   height: 100%;
 }
 /*滚动条样式*/
-::-webkit-scrollbar {/*滚动条整体样式*/
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
   height: 5px;
   width: 4px;
   border-radius: 5px;
 }
-::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius:5px!important;
-    background: #b5b5b5!important;
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px !important;
+  background: #b5b5b5 !important;
 }
-::-webkit-scrollbar-track {/*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.2)!important;
-    border-radius: 20px!important;
-    background: transparent!important;
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2) !important;
+  border-radius: 20px !important;
+  background: transparent !important;
 }
 </style>

src/components/education/addSchoolAndCompany.vue

@@ -18,26 +18,25 @@
           <el-input v-model="addMsg.ShoolName"></el-input>
         </el-form-item>
         <el-form-item label="关联分销商" prop="AgentIds" size="small">
-          <el-input
-            v-model="DistributorMsg.NickName"
-            style="margin-bottom: 10px"
-            placeholder="输入会员昵称"
+          <div class="check-box">
+            <div
+              v-for="(item, index) in fxsList"
+              :key="item.UserId"
+              class="check-box-item"
             >
               <el-button
-              slot="append"
-              icon="el-icon-search"
-              @click="GetDistributorInfoList"
-            ></el-button>
-          </el-input>
-          <el-select v-model="addMsg.AgentIds" multiple placeholder="请选择">
-            <el-option
-              v-for="item in DLoptions"
-              :key="item.UserId"
-              :label="item.NickName"
-              :value="item.UserId"
+                >{{ item.NickName }}
+                <i class="el-icon-delete del-icon" @click="delFXS(index)"></i>
+              </el-button>
+            </div>
+            <el-button
+              type="primary"
+              icon="el-icon-plus"
+              @click="showFXS"
+              class="check-box-item"
             >
-            </el-option>
-          </el-select>
+            </el-button>
+          </div>
         </el-form-item>
         <el-form-item class="tooltiplabel" label="LOGO" prop="CoverPhoto">
           <el-upload
@@ -62,6 +61,46 @@
         >保存</el-button
       >
     </div>
+    <el-dialog title="分销商列表" :visible.sync="showDialog" width="500px">
+      <div style="padding: 0 20px; background: #fff">
+        <el-input
+          v-model="DistributorMsg.NickName"
+          style="margin-bottom: 10px"
+          placeholder="输入会员昵称"
+        >
+          <el-button
+            slot="append"
+            icon="el-icon-search"
+            @click="GetDistributorInfoList"
+          ></el-button>
+        </el-input>
+        <el-table
+          :data="DLoptions"
+          header-cell-class-name="headClass"
+          border
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"></el-table-column>
+          <el-table-column prop="Id" label="ID" width="100"> </el-table-column>
+          <el-table-column prop="NickName" label="名称"></el-table-column>
+        </el-table>
+        <el-pagination
+          style="text-align: right"
+          background
+          @current-change="dighandleCurrentChange"
+          :page-size="DistributorMsg.pageSize"
+          layout="prev, pager, next"
+          :current-page.sync="DistributorMsg.pageIndex"
+          :total="digcount"
+          v-if="digcount > 0"
+        >
+        </el-pagination>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showDialog = false" type="primary">关闭</el-button>
+        <el-button @click="confirm" type="primary">确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -81,7 +120,7 @@ export default {
         ],
       },
       DistributorMsg: {
-        AuditStatus: 0,
+        AuditStatus: 2,
         GradeId: -1,
         Mobile: "",
         Name: "",
@@ -89,10 +128,14 @@ export default {
         Source: 0,
         UserId: 0,
         pageIndex: 1,
-        pageSize: 30,
+        pageSize: 10,
       },
       DLoptions: [],
       loading: false,
+      showDialog: false,
+      sels: [],
+      fxsList: [],
+      digcount: 0,
     };
   },
   created() {
@@ -122,23 +165,18 @@ export default {
           if (res.data.resultCode == 1) {
             this.addMsg.ShoolName = res.data.data[0].ShoolName;
             this.addMsg.CoverPhoto = res.data.data[0].CoverPhoto;
+            this.fxsList = res.data.data[0].AgentList || [];
+            if (this.fxsList.length > 0) {
+              this.fxsList.forEach((e) => {
+                (e.NickName = e.UserName), (e.UserId = e.Id);
+              });
+            }
+
             let arr = res.data.data[0].AgentIds.split(",");
             this.addMsg.AgentIds = arr.map((e) => {
               e = parseInt(e);
               return e;
             });
-            // res.data.data[0].AgentList.forEach((e) => {
-            //   e.UserId = e.Id;
-            //   e.NickName = e.UserName;
-            //   let _res = this.DLoptions.filter((_e) => {
-            //     return _e.UserId == e.Id;
-            //   });
-            //   if (_res.length == 0) {
-            //     // this.DLoptions.push(e);
-            //   }
-            //   console.log("134", _res);
-            //   console.log("tag", this.DLoptions, e);
-            // });
           }
         }
       );
@@ -158,8 +196,11 @@ export default {
         this.DistributorMsg,
         (res) => {
           if (res.data.resultCode == 1) {
-            this.DLoptions = [...this.DLoptions, ...res.data.data.pageData];
-            this.DLoptions = [...new Set(this.DLoptions)];
+            this.digcount = res.data.data.pageCount;
+            this.DLoptions = res.data.data.pageData;
+            if (this.DLoptions.length > 0) {
+              this.sels = [];
+            }
           } else {
             this.Info(res.data.message);
           }
@@ -167,9 +208,21 @@ export default {
       );
     },
     submitForm(formName) {
+      // if (!this.addMsg.CoverPhoto) {
+      //   this.Error("请上传logo");
+      //   return;
+      // }
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          this.addMsg.AgentIds = this.addMsg.AgentIds.toString();
+          if (this.fxsList.length === 0) {
+            this.addMsg.AgentIds = "";
+          } else {
+            this.addMsg.AgentIds = this.fxsList
+              .map((e) => {
+                return e.UserId;
+              })
+              .toString();
+          }
           this.apipost(
             "/api/Education/AddOrUpdateEduSchool",
             this.addMsg,
@@ -186,6 +239,33 @@ export default {
         }
       });
     },
+    showFXS() {
+      this.showDialog = true;
+    },
+    handleSelectionChange(val) {
+      this.sels = val;
+    },
+    dighandleCurrentChange(val) {
+      this.DistributorMsg.pageIndex = val;
+      this.GetDistributorInfoList();
+    },
+    confirm() {
+      this.showDialog = false;
+      if (this.sels.length > 0) {
+        this.sels.map((e) => {
+          let search = this.fxsList.filter((_e) => {
+            return _e.UserId == e.UserId;
+          });
+          if (search.length == 0) {
+            this.fxsList.push(e);
+          }
+        });
+      }
+    },
+    // 删除分销商
+    delFXS(index) {
+      this.fxsList.splice(index, 1);
+    },
   },
 };
 </script>
@@ -220,4 +300,20 @@ export default {
   height: 178px;
   display: block;
 }
+.check-box {
+  display: flex;
+}
+.check-box-item {
+  margin-right: 10px;
+  margin-bottom: 10px;
+  position: relative;
+}
+.del-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #f00;
+  z-index: 10;
+  font-size: 16px;
+}
 </style>