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>