志愿者详情添加志愿团队

src/views/modules/user/volunteerinfo-detail.vue

@@ -36,7 +36,21 @@
                     prop="identityNo">
         <span>{{dataForm.identityNo}}</span>
       </el-form-item>
-      <el-form-item label="所属小组">
+
+      <el-form-item prop="teamIdList"
+                    label="所属团"
+                    class="role-list">
+        <el-select v-model="dataForm.teamIdList"
+                   multiple filterable
+                   placeholder="可输入进行模糊查询" popper-class='roleSelect'>
+          <el-option v-for="team in teamList"
+                     :key="team.id"
+                     :label="team.teamName"
+                     :value="team.id"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="所属队">
         <el-select v-model="dataForm.volunteerTagId" placeholder="请选择">
           <el-option
               v-for="item in volunteerTags"
@@ -98,11 +112,13 @@ export default {
         points: '',
         registTime: '',
         tagIds: [],
-        volunteerTagId: ''
+        volunteerTagId: '',
+        teamIdList: [],
       },
       tagOptions: [],
       userGridList: [],
-      volunteerTags: []
+      volunteerTags: [],
+      teamList: []
     }
   },
   computed: {
@@ -114,6 +130,7 @@ export default {
     init () {
       this.visible = true
       this.$nextTick(() => {
+        this.getTeamList()
         this.$refs['dataForm'].resetFields()
         if (this.dataForm.id) {
           this.getInfo()
@@ -121,6 +138,11 @@ export default {
         }
       })
     },
+    getTeamList () {
+      this.$http.get(`heart/volunteerteam/getSysAllTeamListByName`).then(({ data: res }) => {
+        this.teamList = res.data
+      }).catch(() => {})
+    },
     // 获取信息
     getInfo: debounce(
       function () {
@@ -185,3 +207,33 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+  .mod-sys__user {
+    .dept-list {
+      .el-input__inner,
+      .el-input__suffix {
+        cursor: pointer;
+      }
+    }
+    .role-list {
+      .el-select {
+        width: 100%;
+      }
+    }
+  }
+  .roleSelect{
+    .el-scrollbar__wrap--hidden-default::-webkit-scrollbar {
+      width: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: #a1a3a9;
+      border-radius: 3px;
+    }
+    ::-webkit-scrollbar-track{
+      background:#f5f7fa;
+    }
+    ::-webkit-scrollbar-corner{
+      background:#f5f7fa;
+    }
+  }
+</style>