update: 选择成员

src/views/salesleads/actCodeManage/components/select-clerk/index.vue

+<template>
+  <div>
+    <el-button class="select-clerk-trigger" v-if="!Array.isArray(data) || data.length == 0" @click="showSelectClerk = true">
+      <i class="iconfont-hb3 icontianjia trigger-icon"></i>
+      添加成员
+    </el-button>
+    <template v-if="Array.isArray(data) && data.length > 0">
+      <div v-if="multiple" class="multiple-preview">
+        <dm-sub-title style="margin-left: 4px" title-align="space-between">
+          <div>{{ `已选成员（${data.length}）` }}</div>
+          <div class="edit-btns">
+            <el-button class="del-btn" type="text" @click="onDelAll">清除</el-button>
+            <el-button class="update-clerk-trigger" type="text" @click="showSelectClerk = true">编辑</el-button>
+          </div>
+        </dm-sub-title>
+        <div class="clerk-list">
+          <selected-clerk-item v-for="el in data" :key="el.clerkId" :clerk-data="el" @del="onDel" class="clerk-item"></selected-clerk-item>
+        </div>
+      </div>
+      <div v-else class="single-preview">
+        <selected-clerk-item :clerk-data="data[0]" :show-del="false"></selected-clerk-item>
+        <el-button type="text" class="update-clerk-trigger" @click="showSelectClerk = true">修改成员</el-button>
+      </div>
+    </template>
+    <select-clerk :visible.sync="showSelectClerk" :multiple="multiple" :max="max" :data="data" @save="onChange"></select-clerk>
+  </div>
+</template>
+
+<script>
+import SelectClerk from './select-clerk.vue';
+import SelectedClerkItem from './selected-clerk-item.vue';
+export default {
+  name: 'Index',
+  components: { SelectClerk, SelectedClerkItem },
+  props: {
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 多选时最多可以选几条数据，默认100条
+    max: {
+      type: Number,
+      default: 100
+    },
+    // 选中的数据
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showSelectClerk: false
+    };
+  },
+  methods: {
+    onChange(data) {
+      this.$emit('change', data);
+    },
+    onDel(clerkId) {
+      const data = JSON.parse(JSON.stringify(this.data));
+      this.onChange(data.filter(el => el.clerkId != clerkId));
+    },
+    onDelAll() {
+      this.onChange([]);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.select-clerk-trigger {
+  color: #2f54eb;
+  border-color: #2f54eb;
+  .trigger-icon {
+    font-size: 12px;
+  }
+}
+.multiple-preview {
+  padding: 10px 12px 12px;
+  width: 720px;
+  max-height: 500px;
+  overflow-y: auto;
+  border-radius: 2px;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  .edit-btns {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .del-btn {
+      color: #f5222d;
+    }
+    .update-clerk-trigger {
+      margin-left: 20px;
+    }
+  }
+  .clerk-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 6px;
+    .clerk-item {
+      margin: 4px;
+    }
+  }
+}
+.single-preview {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .update-clerk-trigger {
+    margin-left: 16px;
+  }
+}
+</style>

src/views/salesleads/actCodeManage/components/select-clerk/selected-clerk-item.vue

+<template>
+  <div class="clerk-info-box">
+    <div class="clerk-info">
+      {{ clerkData.clerkName }}
+      <div class="clerk-code">{{ clerkData.clerkCode }}</div>
+    </div>
+    <i v-if="showDel" @click="$emit('del', clerkData.clerkId)" class="iconfont-hb3 iconclose1 del-clerk"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SelectedClerkItem',
+  props: {
+    clerkData: {
+      type: Object,
+      default: () => ({})
+    },
+    showDel: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.clerk-info-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  height: 51px;
+  background: #ebeffe;
+  border-radius: 4px;
+  box-sizing: border-box;
+  .clerk-info {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    line-height: 20px;
+    .clerk-code {
+      margin-top: 2px;
+      font-weight: 400;
+    }
+  }
+  .del-clerk {
+    margin-left: 10px;
+    flex-shrink: 0;
+    font-size: 12px;
+    color: #909399;
+    cursor: pointer;
+    &:hover {
+      color: #2f54eb;
+    }
+  }
+}
+</style>

src/views/salesleads/actCodeManage/staffActCode/index.vue

@@ -12,6 +12,7 @@
               <span class="info-content cur-po"><i class="el-icon-info info-icon"></i>指标说明</span>
             </div>
           </dm-sub-title>
+          <select-clerk @change="onChange"></select-clerk>
           <act-code-table></act-code-table>
         </div>
       </div>
@@ -21,14 +22,21 @@
 <script>
 import GroupList from './views/group-list.vue';
 import ActCodeTable from './views/act-code-table.vue';
+import SelectClerk from '../components/select-clerk/index.vue';
 export default {
   name: 'staffActCode',
   components: {
     GroupList,
-    ActCodeTable
+    ActCodeTable,
+    SelectClerk
   },
   data() {
     return {};
+  },
+  methods: {
+    onChange(data) {
+      console.log(data);
+    }
   }
 };
 </script>