修改

src/pages/system/stuAbroad.vue

+<style>
+  .stuCloseBtn {
+    position: absolute;
+    right: -8px;
+    top: -9px;
+    width: 20px;
+    height: 20px;
+    border: 1px solid red;
+    background-color: red;
+    color: #fff;
+    line-height: 18px;
+    text-align: center;
+    border-radius: 50%;
+    cursor:pointer;
+  }
+
+</style>
 <template>
   <div>
     <q-card flat class="q-pa-lg q-my-lg" v-loading="loading">
       <div class="text-h6 text-weight-bold">分配给以下部门/成员</div>
-      <div class="text-subtitle1 text-weight-bold q-my-md">
-        <span>适用部门/成员</span>
-        <span class="text-negative">*</span>
+      <div style="display:flex;justify-content:end;width:600px;margin-bottom:10px;">
+        <q-btn round color="primary" icon="iconfont icon-img_haha" @click="addEmployee()" />
       </div>
-      <div class="q-mb-md row">
-        <div class="col">
-          <q-btn outline color="primary" class="q-px-lg" @click="outerVisible = true">选择部门/成员</q-btn>
+      <div style="display:flex;margin-bottom:10px;position:relative;width:620px;" v-for="(item,index) in List" :key="index">
+        <q-select class="col-6 q-pb" v-model="item.Content" @input="getName(item.Content,index)"
+          style="width:300px;margin-right:10px;" clearable filled stack-label use-input option-value="Id"
+          option-label="EmployeeName" ref="ManagerId" :options="EmployeeList" label="留学顾问" :dense="false" emit-value
+          map-options @filter="filterFn">
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                未找到相关数据
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+        <q-select filled v-model="item.CodeList" multiple option-value="Id" option-label="Name" :options="NeedData"
+          label="客户需求" style="width: 300px" emit-value map-options />
+        <div class="stuCloseBtn">
+          <i @click="delStepStu(index)" class="iconfont icon-guanbi"></i>
         </div>
-        <div class="col">已选择：{{ chosenUser.length }}人</div>
-      </div>
-      <div class="q-mb-xl">
-        <q-badge color="primary" class="q-mr-md" v-for="(x, i) in chosenUser" :key="i">
-          {{ x.DeptName }}
-        </q-badge>
       </div>
-      <q-select filled v-model="multiCheck" multiple option-value="Id" option-label="Name" :options="NeedData"
-        label="客户需求" style="width: 300px" emit-value map-options />
       <q-btn class="q-mt-xl q-px-lg" unelevated color="primary" :loading="saving" @click="saveHandler">立即保存</q-btn>
     </q-card>
-    <choiceapproval v-if="outerVisible" @close="getclose()" :singleCheck="true" @success="getsuccess2" :byval="chosenUser" cptype="0">
+    <choiceapproval v-if="outerVisible" @close="getclose()" :singleCheck="true" @success="getsuccess2"
+      :byval="chosenUser" cptype="0">
     </choiceapproval>
   </div>
 </template>
@@ -37,6 +60,9 @@
   import {
     GetNeedsList
   } from "../../api/school/index";
+  import {
+    queryEmployee
+  } from "../../api/users/user"; //获取员工
   export default {
     components: {
       choiceapproval
@@ -56,14 +82,68 @@
           Name: "留学客户分配规则",
         },
         multiCheck: [],
-        NeedData: [] //多选
+        NeedData: [], //多选
+        EmployeeList: [], // 员工
+        AllemployeeList: [],
+        List: [{
+          CodeList: [],
+          Code: '',
+          Content: '',
+          Mask: ""
+        }]
       };
     },
     created() {
       this.getGetNeedsList();
+      this.getEmployee();
       this.init();
     },
     methods: {
+      //点击添加
+      addEmployee() {
+        let obj = {
+          CodeList: [],
+          Code: '',
+          Content: '',
+          Mask: ""
+        }
+        this.List.push(obj);
+      },
+      delStepStu(index){
+        this.List.splice(index,1);
+      },
+      //选择Name
+      getName(Id, index) {
+        this.EmployeeList.forEach(x => {
+          if (x.Id == Id) {
+            this.List[index].Mask = x.EmployeeName;
+          }
+        })
+      },
+      //获取业务员
+      getEmployee() {
+        var qMsg = {
+          EmployeeName: ''
+        }
+        queryEmployee(qMsg).then(res => {
+          if (res.Code == 1) {
+            this.EmployeeList = res.Data;
+            this.AllemployeeList = res.Data;
+          }
+        })
+      },
+      //筛选员工
+      filterFn(val, update) {
+        update(() => {
+          if (val === '') {
+            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
+          } else {
+            const needle = val.toLowerCase();
+            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1);
+          }
+        })
+      },
+
       //获取客户需求
       getGetNeedsList() {
         GetNeedsList().then(res => {
@@ -88,70 +168,70 @@
         }).then(res => {
           this.loading = false;
           if (res.Code == 1) {
-            var tempObj=res.Data;
+            var tempObj = res.Data;
             if (tempObj) {
-              this.dictObjEmp.ID=tempObj.ID;
-              this.dictObjEmp.Code=tempObj.Code;
-              this.dictObjEmp.Content=tempObj.Content;
-              this.dictObjEmp.Mask=tempObj.Mask;
-              this.chosenUser=[];
-              if(tempObj.Content&&tempObj.Mask){
-                this.chosenUser.push({
-                    DeptId:tempObj.Content,
-                    DeptName:tempObj.Mask
-                })
-              }
-              if(tempObj.Code){
-                this.multiCheck = tempObj.Code.split(',');
-                this.multiCheck=this.multiCheck.map(item => {  
-                    return +item;  
-                });  
+              this.dictObjEmp.ID = tempObj.ID;
+              this.dictObjEmp.Content = tempObj.Content;
+              if (tempObj.Content) {
+                this.List = JSON.parse(tempObj.Content);
               }
             }
           }
         });
       },
       saveHandler() {
-        if (this.chosenUser.length > 0) {
-          this.saving = true;
-          let contentTemp = "";
-          let maskTemp = "";
-          this.chosenUser.forEach(x => {
-            contentTemp += "," + x.DeptId;
-            maskTemp += "," + x.DeptName;
+        if(this.List.length==0){
+          this.$q.notify({
+            type: 'negative',
+            position: "top",
+            message: `请添加数据`
           });
-          this.dictObjEmp.Content = this.chosenUser[0].DeptId;
-          this.dictObjEmp.Mask = this.chosenUser[0].DeptName;
-          if (this.multiCheck && this.multiCheck.length > 0) {
-            this.dictObjEmp.Code = this.multiCheck.toString()
-          }
-          saveDict(this.dictObjEmp).then(r => {
-            this.saving = false;
-            if (r.Code == 1) {
+          return
+        }
+        if(this.List.length>0){
+          for(let i=0;i<this.List.length;i++){
+            if(this.List[i].Content==''||this.List[i].Content==null){
               this.$q.notify({
-                icon: "iconfont icon-chenggong",
-                color: "accent",
-                timeout: 2000,
-                message: "数据保存成功！",
-                position: "top"
+                type: 'negative',
+                position: "top",
+                message: `请选择第${i+1}条留学顾问`
               });
-              this.init();
-            } else {
-              this.saving = false;
+              return
             }
-          });
-        } else {
-          this.$q.notify({
-            icon: "",
-            color: "negative",
-            timeout: 2000,
-            message: "请选择适用的部门成员",
-            position: "top"
-          });
+            if(this.List[i].CodeList.length==0){
+              this.$q.notify({
+                type: 'negative',
+                position: "top",
+                message: `请选择第${i+1}条客户需求`
+              });
+              return
+            }
+          }
+          this.List.forEach(x => {
+            x.Code = x.CodeList.toString();
+          })
         }
+        this.dictObjEmp.Content = JSON.stringify(this.List);
+        this.saving = true;
+        saveDict(this.dictObjEmp).then(r => {
+          this.saving = false;
+          if (r.Code == 1) {
+            this.$q.notify({
+              icon: "iconfont icon-chenggong",
+              color: "accent",
+              timeout: 2000,
+              message: "数据保存成功！",
+              position: "top"
+            });
+            this.init();
+          } else {
+            this.saving = false;
+          }
+        });
       }
     }
   };
+
 </script>
 
-<style></style>
+<style></style>
\ No newline at end of file