@lx-frontend/wrap-element-ui 1.0.0-beta.7 → 1.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

package/src/components/AddMembers/index.vue

@@ -4,37 +4,40 @@
       :title="title"
       :with-submit-btn="false"
       :width="360"
-      @on-change="handleCloseTechniciansSelectPopup"
+      @on-change="handleCloseSelectPopup"
     >
       <div
         slot="form"
-        class="team-setting__technicians-popover"
+        class="team-setting__members-popover"
       >
-        <div class="team-setting__technicians-select">
+        <div class="team-setting__members-select">
           <el-input
-            v-model="techniciansSearchQuery"
+            v-model="searchQuery"
             placeholder="请输入姓名"
-            @input="handleInputTechniciansSearch"
+            @input="handleInputSearch(searchQuery, $attrs.keyId)"
           />
         </div>
         <div
-          v-if="techniciansSearchQuery && !technicianOptions.length && !fetchTechniciansLoading"
-          class="team-setting__empty-technicians-options"
+          v-if="searchQuery && !options.length && !fetchLoading"
+          class="team-setting__empty-members-options"
         >
           {{ $attrs.empty || '系统未登记该员工，请先添加员工账号' }}
         </div>
         <ul
           v-else
-          class="team-setting__technicians-options"
+          class="team-setting__members-options"
         >
           <li
-            class="team-setting__technicians-option"
-            v-for="item in technicianOptions"
+            class="team-setting__members-option"
+            v-for="item in options"
             :key="item[$attrs.showConfig.id]"
           >
-            <div class="team-setting__technicians-option-left">
+            <div class="team-setting__members-option-left" v-if="isShowRoles">
               {{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}
             </div>
+            <div class="team-setting__members-option-left" v-else>
+              {{item[$attrs.showConfig.name]}}
+            </div>
             <el-button
               v-if="item.is_selected"
               type="text"
@@ -45,7 +48,7 @@
             <el-button
               v-else
               type="text"
-              @click="handleAddTechnician($attrs.keyId, item)"
+              @click="handleAdd($attrs.keyId, item)"
             >
               添加
             </el-button>
@@ -80,26 +83,31 @@ export default {
       type: String,
       default: '添加成员',
     },
+    /** 角色名称展示 */
+    isShowRoles: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
-      techniciansSearchQuery: '',
+      searchQuery: '',
     }
   },
   watch: {
   },
   methods: {
-    handleCloseTechniciansSelectPopup(show) {
+    handleCloseSelectPopup(show) {
       if (show) return;
-      this.techniciansSearchQuery = '';
-      this.$emit('update:technicianOptions', []);
+      this.searchQuery = '';
+      this.$emit('update:options', []);
     },
-    handleInputTechniciansSearch(query) {
-      this.$emit('fetchTechniciansMethods', query);
+    handleInputSearch(query, keyId) {
+      this.$emit('fetchMethods', { query, keyId });
     },
-    handleAddTechnician(id, item) {
+    handleAdd(id, item) {
       const query = { id, item };
-      this.$emit('handleAddTechnician', query);
+      this.$emit('handleAdd', query);
     },
   },
 };
@@ -107,25 +115,25 @@ export default {
 
 <style lang="less">
 .team-setting {
-  &__technicians-popover {
-    padding: 20px;
+  &__members-popover {
+    padding: 20px 0;
+    margin: 0 20px;
     height: 350px;
     overflow-y: auto;
   }
-  &__technicians-select {
-    width: 320px;
-  }
-  &__empty-technicians-options {
-    font-size: 12px;
-    color: #80838e;
-    text-align: center;
-    margin-top: 10px;
+  &__empty-members {
+    &-options {
+      font-size: 12px;
+      color: #80838e;
+      text-align: center;
+      margin-top: 10px;
+    }
   }
-  &__technicians-options {
+  &__members-options {
     display: flex;
     flex-direction: column;
   }
-  &__technicians-option {
+  &__members-option {
     display: flex;
     justify-content: space-between;
     align-items: center;