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

<template>
  <div class='Descriptions' :style="getStyle()">
    <div class="item" v-for="(item, index) in list" :key="`${item.key || item.label}${index}`"
      :style="[gridStyle(item, index), resolveStyle(itemStyle)]">
      <div class="title text" :style="resolveStyle(titleStyle)">
        <slot :name="`title-${item.key || item.label}`" :data="item">
          {{ item.label || '-' }}:
        </slot>
      </div>
      <div class="content text" :style="resolveStyle(contentStyle)">
        <slot :name="`content-${item.key || item.label}`" :data="item">
          {{ item.text || '-' }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Descriptions',
  props: {
    /**
     * {
     *  key: string;
     *  label: string;
     *  text: 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}`,
      })
    }
  },
  methods: {
    getStyle() {
      return {
        gridTemplateColumns: `repeat(${this.column}, 1fr)`,
      }
    },
    getComponent(type) {
      return `Form${type.replace(/^[a-z]/, word => word.toUpperCase())}`
    },
    resolveStyle(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;
    display: flex;
    align-items: center;
    gap: 3px;
  }

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

    .title {
      color: #3DE8FF;
    }

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