@cmstops/pro-compo/es/contentDetailList/components/CustomWrp/CustomItem.js

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

import { defineComponent, computed, ref, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, createBlock, unref, toDisplayString, renderSlot, Fragment, renderList, createVNode, withCtx } from "vue";
import { Image, Tooltip } from "@arco-design/web-vue";
import { IconTopic } from "@arco-iconbox/vue-cmstop-icons";
import { getDocThumb } from "../../../utils/doc.js";
import { noCoverText } from "../../../utils/index.js";
const _hoisted_1 = { class: "cover-view" };
const _hoisted_2 = {
  key: 1,
  class: "no-img"
};
const _hoisted_3 = { class: "batch-select" };
const _hoisted_4 = { class: "info-view" };
const _hoisted_5 = { class: "title-desc" };
const _hoisted_6 = { class: "abttrite-v" };
const _hoisted_7 = { class: "left" };
const _hoisted_8 = { class: "abttr-content" };
const _hoisted_9 = { class: "right" };
const _sfc_main = defineComponent({
  __name: "CustomItem",
  props: {
    item: {},
    showAttrs: {},
    thumbKey: {}
  },
  emits: ["clickTitle", "cellMouseEnter", "cellMouseLeave"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const title = computed(() => {
      const { alias, title: title2 } = props.item;
      return alias || title2;
    });
    const thumb = computed(() => {
      if (!props.item)
        return null;
      if (!props.thumbKey) {
        return getDocThumb(props.item);
      }
      return props.item[props.thumbKey];
    });
    const noImgText = computed(() => {
      if (title.value)
        return "\u65E0\u56FE";
      return noCoverText(props.item);
    });
    const hide = computed(() => {
      const { hide: hide2 } = props.item;
      return hide2 === 7 || hide2 === 6;
    });
    const silent = computed(() => {
      return props.item && props.item.mourn_style === 1;
    });
    const attributes = ref([]);
    function initAttributes() {
      if (!props.showAttrs)
        return;
      attributes.value = props.showAttrs.map((item) => {
        let value = "--";
        if (item.key)
          value = props.item[item.key] || "--";
        else if (item.getValue)
          value = item.getValue(props.item) || "--";
        return {
          value,
          ...item
        };
      });
    }
    watch(
      () => props.item,
      () => {
        initAttributes();
      },
      { deep: true, immediate: true }
    );
    const mouseEnterFun = (event, row) => {
      emit("cellMouseEnter", { row, event });
    };
    const mouseLeaveFun = (event, row) => {
      emit("cellMouseLeave", { row, event });
    };
    const clickTitle = () => {
      emit("clickTitle", props.item);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["medialist-doc-item-view", { "gray-forbidden": hide.value, "gray-for-state-hide": silent.value }]),
        onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseEnterFun($event, _ctx.item)),
        onMouseleave: _cache[1] || (_cache[1] = ($event) => mouseLeaveFun($event, _ctx.item))
      }, [
        createElementVNode("div", _hoisted_1, [
          createCommentVNode(" \u5C01\u9762 "),
          thumb.value ? (openBlock(), createBlock(unref(Image), {
            key: 0,
            class: "image",
            src: thumb.value,
            preview: false,
            fit: "cover"
          }, null, 8, ["src"])) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(noImgText.value), 1)),
          createElementVNode("div", _hoisted_3, [
            renderSlot(_ctx.$slots, "batch", { row: _ctx.item })
          ])
        ]),
        createCommentVNode(" \u4FE1\u606F "),
        createElementVNode("div", _hoisted_4, [
          createCommentVNode(" \u6807\u9898 "),
          createElementVNode("div", {
            class: "title",
            onClick: clickTitle
          }, [
            renderSlot(_ctx.$slots, "index"),
            createElementVNode("span", _hoisted_5, toDisplayString(title.value || "\u2014\u2014"), 1)
          ]),
          createCommentVNode(" \u5143\u4FE1\u606F "),
          createElementVNode("div", _hoisted_6, [
            createElementVNode("div", _hoisted_7, [
              createCommentVNode(" \u524D\u7F00 "),
              renderSlot(_ctx.$slots, "tip"),
              createCommentVNode(" \u5C5E\u6027 "),
              (openBlock(true), createElementBlock(Fragment, null, renderList(attributes.value, (attr, index) => {
                return openBlock(), createElementBlock("span", {
                  key: index,
                  class: "abttr"
                }, [
                  createVNode(unref(Tooltip), {
                    content: `${attr.label}: ${attr.value}`,
                    position: "tl"
                  }, {
                    default: withCtx(() => [
                      createElementVNode("div", _hoisted_8, [
                        attr.topic && attr.value ? (openBlock(), createBlock(unref(IconTopic), { key: 0 })) : createCommentVNode("v-if", true),
                        createElementVNode("span", null, toDisplayString(attr.value || "--"), 1)
                      ])
                    ]),
                    _: 2
                  }, 1032, ["content"])
                ]);
              }), 128))
            ]),
            createElementVNode("div", _hoisted_9, [
              createCommentVNode(" \u540E\u7F00 "),
              renderSlot(_ctx.$slots, "option", { row: _ctx.item })
            ])
          ])
        ])
      ], 34);
    };
  }
});
export { _sfc_main as default };