@cmstops/pro-compo/es/selectAvatarList/component.js

[物料平台文档中心](https://arco.design/docs/material/guide)

import { defineComponent, ref, computed, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, unref, withCtx, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
import { Space, Tooltip, Avatar, Button } from "@arco-design/web-vue";
import { IconDelete, IconPlus } from "@arco-design/web-vue/es/icon";
import userDirector from "../userDirector/index.js";
import { DEFAULT_BASE_API } from "../config.js";
const _hoisted_1 = { class: "select-avatar-list" };
const _sfc_main = defineComponent({
  ...{ name: "selectAvatarList" },
  __name: "component",
  props: {
    list: {},
    BASE_API: {},
    repositoryId: {}
  },
  emits: ["update:list"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const BASE_API = props.BASE_API || DEFAULT_BASE_API;
    const emit = __emit;
    const visible = ref(false);
    const list = computed({
      get() {
        return props.list;
      },
      set(value) {
        emit("update:list", value);
      }
    });
    const dell = (index) => {
      list.value.splice(index, 1);
    };
    const content = (item) => {
      return item.uid ? item.alias : `\u89D2\u8272\uFF1A${item.alias || item.name}`;
    };
    const getUserAlias = (user) => {
      if (!user)
        return "--";
      const alias2 = user.alias || user.title || user.name || "\u672A\u77E5";
      return alias2.length > 1 ? `${alias2.slice(0, 1)}` : alias2;
    };
    const addUser = () => {
      visible.value = true;
    };
    const submit = (data) => {
      list.value = data;
      visible.value = false;
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        createElementVNode("div", _hoisted_1, [
          createVNode(unref(Space), null, {
            default: withCtx(() => [
              (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item, index) => {
                return openBlock(), createBlock(unref(Tooltip), {
                  key: index,
                  content: content(item),
                  position: "top",
                  mini: ""
                }, {
                  default: withCtx(() => [
                    createVNode(unref(Avatar), {
                      "trigger-type": "mask",
                      "image-url": item.avatar
                    }, {
                      "trigger-icon": withCtx(() => [
                        createVNode(unref(IconDelete), {
                          onClick: ($event) => dell(index)
                        }, null, 8, ["onClick"])
                      ]),
                      default: withCtx(() => [
                        createTextVNode(toDisplayString(!item.avatar ? getUserAlias(item) : "") + " ", 1)
                      ]),
                      _: 2
                    }, 1032, ["image-url"])
                  ]),
                  _: 2
                }, 1032, ["content"]);
              }), 128)),
              createVNode(unref(Button), {
                class: "large",
                shape: "circle",
                size: "large",
                onClick: addUser
              }, {
                default: withCtx(() => [
                  createVNode(unref(IconPlus))
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ]),
        createVNode(unref(userDirector), {
          visible: visible.value,
          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
          BASE_API: unref(BASE_API),
          "default-data": list.value,
          "repository-id": props.repositoryId,
          onSubmit: submit
        }, null, 8, ["visible", "BASE_API", "default-data", "repository-id"])
      ], 64);
    };
  }
});
export { _sfc_main as default };