人员选择控件开发完成

assets/css/base.less

@@ -60,6 +60,9 @@ div::-webkit-scrollbar{
 .fg{
     flex-grow: 1;
 }
+.fs{
+    flex-shrink: 0;
+}
 .fg2{
     flex-grow: 2;
 }

components/page/userSelect.vue

@@ -24,23 +24,23 @@
         </dl>
       </div>
       <div class="footer flex">
-        <div v-width="50" class="flex fa-m">
-         <span> 已选项</span>
+        <div v-width="50" class="fa-m fs">
+          <span>已选项</span>
         </div>
-        <dl class="fg">
+        <div  class="fg">
+          <dl>
           <dd v-for="(li,i) in checkedItems">
             <div class="flex">
-              <span class="fg">
-                {{li.userName}}
-              </span>
-              <a>
-                X
+              <span class="fg">{{li.userName}}</span>
+              <a @click="removeItem(li)">
+                <Icon type="md-close" size="16" />
               </a>
             </div>
-            
           </dd>
         </dl>
         </div>
+        
+      </div>
     </div>
 
     <Select
@@ -131,18 +131,27 @@ export default {
         })
         .then(r => {
           this.data = r.result;
+          if(this.theme=="list"){
           this.departmentGroup();
+          }
         });
     },
     departmentGroup() {
       var group = [];
-      group = this.$u.group(this.data, u => {
+      var users=this.$u.clone(this.data);
+      if(this.name&&this.name.length>0){
+        users.map(u=>{
+          u.checked=this.name.indexOf(u.id)>-1;
+        })
+      }
+      group = this.$u.group(users, u => {
         return u.departmentId;
       });
       var deps = [];
       group.map((u, i) => {
         deps.push({
           departmentTitle: u[0].departmentTitle,
+          departmentId: u[0].departmentId,
           children: u,
           opened: (i = 0),
           checked: false
@@ -158,16 +167,44 @@ export default {
       item.checked = !item.checked;
       this.group[i][j] = item;
       this.$set(this.group, i, this.group[i]);
+      this.listSetValue();
+    },
+    removeItem(item) {
+      this.group.map((u, i) => {
+        if (u.departmentId == item.departmentId) {
+          u.children.map(p => {
+            if (p.id == item.id) {
+              p.checked = false;
+            }
+          });
+          this.$set(this.group, i, u);
+        }
+      });
+       this.listSetValue();
     },
-    checkAll(item,i){
-      item.children.map(u=>{
-        u.checked=item.checked;
+    //list 时，设置值。
+    listSetValue(){
+      var ids=[];
+      this.checkedItems.map(u=>{
+        ids.push(u.id)
       })
-      this.$set(this.group,i,this.group[i]);
+      this.$emit("on-change",ids);
+    },
+    checkAll(item, i) {
+      item.children.map(u => {
+        u.checked = item.checked;
+      });
+      this.$set(this.group, i, this.group[i]);
+      this.listSetValue();
     },
     //获取所有的选中项
     getSelectItems() {
       var items = [];
+      if (this.theme == "list") {
+        this.checkedItems.map(u => {
+          items.push(u);
+        });
+      } else {
         if (!this.multiple) {
           //单选时返回信息
           var item1 = this.dic.filter(u => u.value == this.value);
@@ -183,14 +220,22 @@ export default {
             }
           });
         }
+      }
+
       return items;
     },
     //获取所有选中项的名称
     getSelectNames() {
       var names = [];
+      if (this.theme == "list") {
+        this.checkedItems.map(u => {
+          items.push(u.userName);
+        });
+      } else {
         this.getSelectItems().forEach(v => {
           names.push(v.label);
         });
+      }
       return names;
     }
   },
@@ -253,6 +298,7 @@ export default {
     font-size: 14px;
   }
   dl {
+    width: 100%;
     margin-bottom: 2px;
     dt,
     dd {
@@ -302,6 +348,20 @@ export default {
       border: 2px solid transparent;
       color: #515a6e;
       margin: 10px;
+      a {
+        display: inline-flex;
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        border: 1px solid transparent;
+        justify-items: center;
+        align-items: center;
+        margin-top: 5px;
+      }
+      a:hover {
+        background: rgb(241, 14, 14);
+        color: white;
+      }
     }
     dd:hover {
       // background: rgba(38, 128, 235, 1);
@@ -324,7 +384,7 @@ export default {
       opacity: 1;
       border-radius: 4px;
       min-height: 48px;
-      flex-wrap:wrap;
+      flex-wrap: wrap;
     }
   }
 }

pages/test.vue

@@ -4,9 +4,9 @@
     .bg1{
         background:#fefefe ;
     }
-  .fg {
-    overflow: auto;
-  }
+  // &.fg {
+  //   // overflow: auto;
+  // }
 }
 .layout-copy {
   text-align: center;

pages/test/user.vue

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