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 list" :key="`${item.key || item.label}${index}`"
      :style="[gridStyle(item, index), transformStyle(itemStyle)]">
      <div class="title text" :style="transformStyle(titleStyle)">
        <slot :name="`title-${item.key || item.label}`" :data="item">
          {{ item.label || '-' }}:
        </slot>
      </div>
      <div class="content text" :style="{
        ...transformStyle(titleStyle),
        ...getDisplayColor(item)
      }">
        <slot :name="`content-${item.key || item.label}`" :data="item">
          {{ getText(item) || '-' }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import * as EnumMap from "@screen/utils/enum.js"

export default {
  name: 'Descriptions',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    /**
     * {
     *  key: string;
     *  label: string;
     *  gridRow: number;
     *  gridColumn: number;
     * }[]
     */
    list: {
      type: Array,
      default: () => []
    },
    column: {
      type: String,
      default: "2"
    },
    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) => {
        const result = this.data[item.key];

        if (item.enum) return EnumMap[item.enum][result]?.text;

        const templateResult = item.key?.replace(/\$\{[^}]+\}/g, (key) => this.data[key.slice(2, -1)] || "-");

        if (templateResult && templateResult != item.key) return templateResult

        return result || item.text;
      }
    }
  },
  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;
      }, {});
    },
    getDisplayColor(item) {
      const style = {};

      if (item.enum) {
        const config = EnumMap[item.enum][this.data[item.key]];

        if (config?.color) style.color = config.color;
      }

      return style;

    },
  }
}
</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;
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .item {
    display: flex;
    gap: 6px;

    .title {
      color: #3DE8FF;
    }

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