@fle-ui/plus-goods-detail-drawer/es/components/GoodsDetailSection/index.js

@fle-ui/plus-goods-detail-drawer

import "antd/es/descriptions/style";
import _Descriptions from "antd/es/descriptions";
import "antd/es/space/style";
import _Space from "antd/es/space";
import "antd/es/typography/style";
import _Typography from "antd/es/typography";
import React from 'react';
import { formatDescriptionsItem, formatValueToBoolean } from '../DescriptionsItem';
import { getFileTypeIcon } from '../../utils/tools';
var Link = _Typography.Link;
var GoodsDetailSection = function GoodsDetailSection(_ref) {
  var hideFields = _ref.hideFields,
    goodsDetail = _ref.goodsDetail,
    changeContent = _ref.changeContent,
    beforeContent = _ref.beforeContent,
    isAudit = _ref.isAudit;
  if (!goodsDetail) return null;
  var getMaterialContent = function getMaterialContent(materialList) {
    if (!materialList || materialList.length === 0) return '-';
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Space, {
      direction: "vertical",
      size: "small"
    }, materialList.map(function (material, index) {
      return /*#__PURE__*/React.createElement(Link, {
        key: index,
        href: material.fileUrl,
        target: "_blank"
      }, /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement("img", {
        src: getFileTypeIcon(material.fileMime),
        alt: "\u6587\u4EF6\u7C7B\u578B\u56FE\u6807",
        className: "file-icon"
      }), material.fileName));
    })));
  };
  var getDetailContent = function getDetailContent(detail) {
    if (!detail) return '-';
    return /*#__PURE__*/React.createElement("div", {
      className: "goods-detail-html",
      dangerouslySetInnerHTML: {
        __html: detail
      }
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    id: "goods-detail",
    className: "goods-detail-drawer-section"
  }, /*#__PURE__*/React.createElement("div", {
    className: "goods-detail-drawer-section-title"
  }, "\u5546\u54C1\u8BE6\u60C5"), /*#__PURE__*/React.createElement(_Descriptions, {
    column: 1,
    size: "small",
    colon: false,
    layout: "vertical",
    styles: {
      label: {
        fontWeight: 'bold',
        color: '#1d2531'
      }
    },
    items: [formatDescriptionsItem({
      hideFields: hideFields,
      key: 'goodsDetail.materialList',
      label: '商品素材',
      isChangeRecord: isAudit && formatValueToBoolean(changeContent === null || changeContent === void 0 ? void 0 : changeContent.materialList),
      beforeContent: getMaterialContent(beforeContent === null || beforeContent === void 0 ? void 0 : beforeContent.materialList),
      children: getMaterialContent(goodsDetail.materialList)
    }), formatDescriptionsItem({
      hideFields: hideFields,
      key: 'goodsDetail.detail',
      label: '商品详情',
      dynamicWidth: true,
      tooltipPlacement: 'right',
      styles: {
        label: {
          paddingTop: 20
        }
      },
      isChangeRecord: isAudit && formatValueToBoolean(changeContent === null || changeContent === void 0 ? void 0 : changeContent.detail),
      beforeContent: getDetailContent(beforeContent === null || beforeContent === void 0 ? void 0 : beforeContent.detail),
      children: getDetailContent(goodsDetail.detail)
    })].filter(Boolean)
  }));
};
export default GoodsDetailSection;