jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue

<template>
  <div class="Descriptions keep-ratio" origin="left" :style="getStyle()">
    <div class="item" v-for="(item, index) in getResolveList" :key="`${item.key || item.label}${index}`"
      :style="[gridStyle(item, index), transformStyle(itemStyle)]">
      <div class="text title" :style="{...transformStyle(titleStyle), width: labelWidth }">
        <p>
          <slot :name="`title-${item.key || item.label}`" :data="item">
            {{ item.label || "-" }}
          </slot>
        </p>
        :
      </div>
      <ContentText :style="transformStyle(titleStyle)" class="content text" :data="data" :_config="item">
        <template #default="{ value }">
          <slot :name="`content-${item.key || item.label}`" :value="value" :data="item">
            {{ value }}
          </slot>
        </template>
      </ContentText>
    </div>
  </div>
</template>

<script>
import { getContent } from "@screen/components/FormConfig/utils/index.js";
import ContentText from "@screen/components/FormConfig/components/Text.vue";

export default {
  name: "Descriptions",
  components: {
    ContentText,
  },
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    /**
     * {
     *  key: string;
     *  label: string;
     *  gridRow: number;
     *  gridColumn: number;
     * }[]
     */
    list: {
      type: Array,
      default: () => [],
    },
    column: {
      type: String,
      default: "2",
    },
    labelWidth: String,
    titleStyle: {
      type: [String, Object],
      default: null,
    },
    contentStyle: {
      type: [String, Object],
      default: null,
    },
    itemStyle: {
      type: [String, Object],
      default: null,
    },
  },
  computed: {
    gridStyle() {
      return (item, index) => ({
        gridRow: `span ${item.gridRow || 1}`,
        gridColumn: `span ${item.gridColumn || 1}`,
      });
    },
    getText() {
      return (item) => getContent(this.data, item);
    },
    getResolveList() {
      return this.list.reduce((prev, data) => {
        if (typeof data.visible === "function") {
          if (!data.visible(data)) return prev;
        }

        prev.push(data);
        return prev;
      }, []);
    },
  },
  methods: {
    getStyle() {
      return {
        gridTemplateColumns: `repeat(${this.column}, 1fr)`,
      };
    },
    getComponent(type) {
      return `Form${type.replace(/^[a-z]/, (word) => word.toUpperCase())}`;
    },
    transformStyle(style) {
      if (typeof style != "string") return style;

      return style.split(";").reduce((prev, cur) => {
        const [key, value] = cur.split(":");

        prev[key] = value;

        return prev;
      }, {});
    },
  },
};
</script>

<style lang="scss" scoped>
.Descriptions {
  display: grid;
  gap: 9px;

  .text {
    font-size: 15px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #fff;
    line-height: 18px;
    gap: 3px;
    display: flex;
  }

  .item {
    display: flex;
    align-items: center;
    gap: 6px;

    .title {
      color: #3de8ff;

      p {
        width: 100%;
        text-align: justify;
        text-align-last: justify;
      }
    }

    .content {
      flex: 1;
      gap: 6px;
    }
  }
}
</style>