用户选择控件开发。

assets/css/base.less

@@ -15,6 +15,25 @@ html body {
 ul,li{
     list-style: none;
 }
+div::-webkit-scrollbar{
+    width:10px;
+    height:10px;
+    /**/
+  }
+  div::-webkit-scrollbar-track{
+    background: rgb(239, 239, 239);
+    border-radius:2px;
+  }
+  div::-webkit-scrollbar-thumb{
+    background:rgba(38,128,235,0.5);
+    border-radius:10px;
+  }
+  div::-webkit-scrollbar-thumb:hover{
+    background: rgba(38,128,235,0.8);
+  }
+  div::-webkit-scrollbar-corner{
+    background: rgba(38,128,235,1);
+  }
 /*flex*/
 .flex{
     display: flex;
@@ -23,6 +42,9 @@ ul,li{
 .fc-m{
     justify-content: center;
 }
+.fa-m{
+    align-items: center;
+}
 .fc-e{
     justify-content: flex-end;
 }

components/page/userSelect.vue

 <template>
-  <Select
-    :placeholder="placeholder"
-    v-model="name"
-    @on-change="change"
-    :multiple="multiple"
-    :departmentId="departmentId"
-    clearable
-    filterable
-  >
-    <Option
-      v-for="item in dic"
-      :value="item.value"
-      :key="item.value"
-      :label="item.label"
-    >
-      <div>
-        <Icon :type="item.gender == 1 ? 'ios-man' : 'ios-woman'" />
-        {{ item.label }}(<span style="color:#c3c3c3">{{ item.cardNo }}</span
-        >) <br /><span style="color:#c3c3c3">{{ item.departmentTitle }}</span>
+  <div>
+    <div v-if="theme=='list'" class="flex fd userSelect">
+      <div class="fg1 users">
+        <dl v-for="(g,i) in group">
+          <dt :class="{checked:g.opened}" class="flex fc-b">
+            <div class="ib fg">
+              <Checkbox v-model="g.checked" @on-change="checkAll(g,i)">
+                <span class="ml10">{{g.departmentTitle}}</span>
+              </Checkbox>
+              <!-- <span class="ml20">(<span v-text="g.children | vvv"></span>/{{g.children.length}}人)</span></div> -->
+              <span class="ml20">({{g.children.length}}人)</span>
+            </div>
+            <a class="op" @click="toggle(i)">
+              <Icon :type="g.opened?'ios-arrow-up':'ios-arrow-down'" size="24" />
+            </a>
+          </dt>
+          <dd
+            v-show="g.opened"
+            v-for="(li,j) in g.children"
+            @click="checkItem(i,j,li)"
+            :class="{checked:li.checked}"
+          >{{li.userName}}</dd>
+        </dl>
+      </div>
+      <div class="footer flex">
+        <div v-width="50" class="flex fa-m">
+         <span> 已选项</span>
+        </div>
+        <dl class="fg">
+          <dd v-for="(li,i) in checkedItems">
+            <div class="flex">
+              <span class="fg">
+                {{li.userName}}
+              </span>
+              <a>
+                X
+              </a>
+            </div>
+            
+            </dd>
+        </dl>
       </div>
-    </Option>
-  </Select>
+    </div>
+
+    <Select
+      v-else
+      :placeholder="placeholder"
+      v-model="name"
+      @on-change="change"
+      :multiple="multiple"
+      :departmentId="departmentId"
+      clearable
+      filterable
+    >
+      <Option v-for="item in dic" :value="item.value" :key="item.value" :label="item.label">
+        <div>
+          <Icon :type="item.gender == 1 ? 'ios-man' : 'ios-woman'" />
+          {{ item.label }}(
+          <span style="color:#c3c3c3">{{ item.cardNo }}</span>)
+          <br />
+          <span style="color:#c3c3c3">{{ item.departmentTitle }}</span>
+        </div>
+      </Option>
+    </Select>
+  </div>
 </template>
 <script>
 export default {
   model: {
-    prop: 'value',
-    event: 'on-change'
+    prop: "value",
+    event: "on-change"
   },
   data() {
     return {
       name: this.value,
       data: [],
-      departId: ''
-    }
+      departId: "",
+      group: []
+    };
   },
   created() {
     // let url = `${systemUrl}/user/getfordispatch_x`
     // this.$api.get(url).then((r) => {
     //   this.data = r.result
     // })
-    this.getselectuser()
+    this.getselectuser();
   },
   props: {
     value: [String, Number, Array],
     placeholder: {
       type: String,
-      default: '请选择人员'
+      default: "请选择人员"
     },
     multiple: {
       type: Boolean,
       default: false
     },
+    theme: {
+      type: String,
+      default: "select"
+    },
     type: {
       type: Number,
       default: 0
@@ -60,87 +108,224 @@ export default {
       type: Number,
       default: 0
     },
-    roleTitle:{
+    roleTitle: {
       type: String,
-      default: ''
+      default: ""
     }
   },
-  methods: {
+  methods: {    
     change(event) {
       // console.log(event)
-      this.$emit('on-change', event)
+      this.$emit("on-change", event);
     },
     // 加载人员
     getselectuser(id) {
-      let url = `${systemUrl}/user/getselectuser`
+      let url = `${systemUrl}/user/getselectuser`;
       this.$api
         .post(url, {
           // pageIndex: 1,
           departmentId: id,
           type: this.type,
-          roleTitle:this.roleTitle,
+          roleTitle: this.roleTitle
           // pageSize: 0
         })
-        .then((r) => {
-          this.data = r.result
-        })
+        .then(r => {
+          this.data = r.result;
+          this.departmentGroup();
+        });
+    },
+    departmentGroup() {
+      var group = [];
+      group = this.$u.group(this.data, u => {
+        return u.departmentId;
+      });
+      var deps = [];
+      group.map((u, i) => {
+        deps.push({
+          departmentTitle: u[0].departmentTitle,
+          children: u,
+          opened: (i = 0),
+          checked: false
+        });
+      });
+      this.group = deps;
+    },
+    toggle(i) {
+      this.group[i].opened = !this.group[i].opened;
+      // this.$set(this.group,i,this.group[i])
+    },
+    checkItem(i, j, item) {
+      item.checked = !item.checked;
+      this.group[i][j] = item;
+      this.$set(this.group, i, this.group[i]);
+    },
+    checkAll(item,i){
+      item.children.map(u=>{
+        u.checked=item.checked;
+      })
+      this.$set(this.group,i,this.group[i]);
     },
     //获取所有的选中项
     getSelectItems() {
-      var items = []
+      var items = [];
       if (!this.multiple) {
         //单选时返回信息
-        var item1 = this.dic.filter((u) => u.value == this.value)
+        var item1 = this.dic.filter(u => u.value == this.value);
         if (item1 && item1[0]) {
-          items.push(item1[0])
+          items.push(item1[0]);
         }
       } else {
         //复选时返回
-        this.value.forEach((v) => {
-          var item = this.dic.filter((u) => u.value == v)
+        this.value.forEach(v => {
+          var item = this.dic.filter(u => u.value == v);
           if (item && item[0]) {
-            items.push(item[0])
+            items.push(item[0]);
           }
-        })
+        });
       }
-      return items
+      return items;
     },
     //获取所有选中项的名称
     getSelectNames() {
-      var names = []
-      this.getSelectItems().forEach((v) => {
-        names.push(v.label)
-      })
-      return names
+      var names = [];
+      this.getSelectItems().forEach(v => {
+        names.push(v.label);
+      });
+      return names;
     }
   },
   computed: {
     dic() {
-      let result = []
-      this.data.forEach((u) => {
+      let result = [];
+      this.data.forEach(u => {
         // result.push({
         //   value: u.id,
         //   label: u.userName
         // })
-        ;(u.value = u.id), (u.label = u.userName)
-        result.push(u)
-      })
-      return result
+        (u.value = u.id), (u.label = u.userName);
+        result.push(u);
+      });
+      return result;
+    },
+    checkedItems() {
+      var items = [];
+      this.group.map(u => {
+        u.children.map(l => {
+          if (l.checked) {
+            items.push(l);
+          }
+        });
+      });
+      return items;
+    }
+  },
+  filters: {
+    vvv: lis => {
+      return 3;
+      // return lis.filter(u=>{
+      //   return u.checked==true
+      // }).lenght;
     }
   },
   watch: {
     value: {
       handler(v, o) {
-        this.name = v
+        this.name = v;
       },
       deep: true
     },
     departmentId: {
       handler(v, o) {
-        this.getselectuser(v)
+        this.getselectuser(v);
       },
       deep: true
     }
   }
-}
+};
 </script>
+<style lang="less">
+.userSelect {
+  .users {
+    width: 100%;
+    border: 1px solid #2680eb;
+    max-height: 420px;
+    overflow: auto;
+    font-size: 14px;
+  }
+  dl {
+    margin-bottom: 2px;
+    dt,
+    dd {
+      list-style: none;
+      padding: 0 15px;
+    }
+    dt {
+      width: 100%;
+      background: rgba(38, 128, 235, 0.1);
+      height: 48px;
+      font-weight: bold;
+      line-height: 48px;
+      color: rgba(81, 90, 110, 1);
+      a.op {
+        height: 26px;
+        width: 26px;
+        text-align: center;
+        display: inline-block;
+        padding-top: -15px;
+        line-height: 100%;
+        margin-top: 12px;
+      }
+      a.op:hover {
+        color: white;
+        background: rgba(38, 128, 235, 1.5);
+        border-radius: 4px;
+      }
+    }
+    dt.checked {
+      background: rgba(38, 128, 235);
+      color: white;
+      a.op {
+        color: white;
+      }
+      a.op:hover {
+        background: white;
+        color: rgba(38, 128, 235);
+      }
+    }
+    dd {
+      min-width: 120px;
+      line-height: 32px;
+      height: 36px;
+      border-radius: 18px;
+      display: inline-block;
+      background: rgba(38, 128, 235, 0.1);
+      border: 2px solid transparent;
+      color: #515a6e;
+      margin: 10px;
+    }
+    dd:hover {
+      // background: rgba(38, 128, 235, 1);
+      //  border:1px solid rgba(38,128,235,0.1);
+      background: rgba(38, 128, 235, 0.1);
+      border: 2px solid rgba(38, 128, 235, 1);
+      //  color: white;
+      cursor: pointer;
+    }
+    dd.checked {
+      border: 2px solid rgba(38, 128, 235, 1);
+    }
+  }
+  .footer {
+    margin-top: 5px;
+    min-height: 68px;
+    dl {
+      background: rgba(245, 246, 250, 1);
+      border: 1px solid rgba(220, 223, 230, 1);
+      opacity: 1;
+      border-radius: 4px;
+      min-height: 48px;
+      flex-wrap:wrap;
+    }
+  }
+}
+</style>
\ No newline at end of file

pages/test/user.vue

 <template>
-    <div>
-       <UserSelect v-model="user" :multiple="true" :type="1"/>
-       <DepartmentSelect v-model="dep" />
+    <div style="padding:50px;">
+       <UserSelect v-model="user" :multiple="true" theme="list"/>
+       <!-- <DepartmentSelect v-model="dep" />
         {{user}}
-        <Button @click="setUser">Set</Button>{{dep}}
+        <Button @click="setUser">Set</Button>{{dep}} -->
     </div>
 </template>
 <script>