单独构建大屏ui库,避免引入混乱

ui/dv/AiUserPicker.vue

@@ -0,0 +1,163 @@
+<template>
+  <section class="AiUserPicker">
+    <div v-if="$slots.default " @click="handleSelect">
+      <slot/>
+    </div>
+    <div class="AiWechatSelecter-userlist" v-else>
+      <div class="user-item" v-for="(item, index) in value" :key="index">
+        <img :src="getAvatar(item)">
+        <div class="itemLabel" v-text="item.name"/>
+        <i class="iconfont iconwarning" @click="removeUser(index)"/>
+      </div>
+      <div class="user-add" @click="handleSelect">
+        <div class="userlist-add__icon">
+          <i class="el-icon-plus"/>
+        </div>
+        <span>选择</span>
+      </div>
+    </div>
+    <ai-dialog title="选择人员" :visible.sync="dialog" width="1100px" @onConfirm="submit" @close="selected=[]">
+      <ai-table-select :instance="instance" v-model="selected" multiple action="/app/wxcp/wxuser/list?status=1" valueObj extra="mobile"/>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "AiUserPicker",
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {default: () => []},
+    instance: Function,
+    multiple: {default: true},
+    props: {
+      default: () => ({
+        label: 'name',
+        id: 'id'
+      })
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+      selected: [],
+    }
+  },
+  methods: {
+    removeUser(i) {
+      let list = this.$copy(this.value)
+      list.splice(i, 1)
+      this.$emit("change", list)
+    },
+    submit() {
+      this.$emit("change", this.selected)
+      this.dialog = false
+    },
+    handleSelect() {
+      this.selected = this.$copy(this.value)
+      this.dialog = true
+    },
+    getAvatar(row){
+      return row.avatar||row.photo||'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiUserPicker {
+  .AiWechatSelecter-userlist {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .user-add {
+      margin-bottom: 6px;
+
+      .userlist-add__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        margin-bottom: 4px;
+        border-radius: 2px;
+        border: 1px solid #CCCCCC;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.6;
+        }
+
+        i {
+          color: #CCCCCC;
+          font-size: 20px;
+        }
+      }
+
+      span {
+        display: block;
+        width: 100%;
+        line-height: 22px;
+        text-align: center;
+        color: #888888;
+        font-size: 14px;
+      }
+    }
+
+    .user-item {
+      position: relative;
+      margin-bottom: 6px;
+      margin-right: 16px;
+      width: 40px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      img {
+        display: block;
+        width: 40px;
+        height: 40px;
+        margin-bottom: 4px;
+        border-radius: 2px;
+        border: 1px solid #CCCCCC;
+      }
+
+      i {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 2px;
+        font-size: 16px;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        transform: translate(40%, -100%);
+        height: 16px;
+
+        &:hover {
+          opacity: 0.6;
+        }
+      }
+
+      .itemLabel {
+        display: block;
+        width: 60px;
+        line-height: 22px;
+        text-align: center;
+        color: #888888;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>