vue查看组件编写

SeeData.ts

/**
 * key 字段
 * title 标题
 * span 宽度
 * options 转换数据
 * optionKey 转换数据的key
 * optionValue 转换数据的value
 * type 类型 text默认文本 date日期  datatime  时间
 * symbols 分隔符
 *
 */
export interface SeeData {
  key:"" ,
  title:"" ,
  span:"" ,
  options:[] ,
  optionLabel:"label" ,
  optionValue :"value" ,
  type:"text" ,
  symbols:"," ,
}

see.vue

<template>
  <div>
    <el-row>
      <el-col :span="item.span" v-for="(item,i) in seeList" :key="i" class="col">
        <div class="title" style="background-color: #cad2d2">{{ item.title }}</div>
        <div class="val">
          <template v-if="item.slot">
            <slot :name="item.slot"></slot>
          </template>
          <template v-else>
            <template v-if="item.type=='image'">
              <el-image style="height: 54px" :src="valueChange(item.value)[0]"
                        :preview-src-list="valueChange(item.value)"></el-image>
            </template>
            <template v-else-if="item.type=='date'">
              <span>{{ parseTime(item.value, '{y}-{m}-{d}') }}</span>
            </template>
            <template v-else-if="item.type=='datetime'">
              <span>{{ parseTime(item.value, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
            </template>
            <span v-else>{{ item.value }}</span>
          </template>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">

import {SeeData} from "@/components/See/seeData";

/**
 * formaData 数据对象
 * key 字段
 * title 标题
 * span 宽度
 * options 转换数据
 * optionKey 转换数据的key
 * optionValue 转换数据的value
 * type 类型 text默认文本 date日期  datatime  时间
 * symbols 分隔符
 *
 */
export default {
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    list: {
      type: Array as PropType <SeeData[]>,
      default: () => [],
    },
  }
  ,
  data() {
    return {}
  }
  ,

  computed: {
    seeList() {
      return this.list.reduce((acc, item, index) => {
        acc.push({
          ...item,
          span: item.span ? item.span : 12,
          value: item.selectList ? this.getOptionsLabel(this.formData[item.key], item.selectList, item) : this.formData[item.key],
          type: item.type ? item.type : "text",
        });
        return acc;
      }, []);
    }
  }
  ,

  methods: {
    getOptionsLabel(value, options, obj) {
      let symbols = obj.symbols ? obj.symbols : ",";
      let optionLabel = obj.optionLabel ? obj.optionLabel : "label";
      let optionValue = obj.optionValue ? obj.optionValue : "value";
      if (value) {
        var list = options.value.filter(
          function (item) {
            let split = value.split(symbols);
            for (let i = 0; i < split.length; i++) {
              if (item[optionValue] == split[i])
                return item[optionLabel];
            }
          }
        )
        return list.length > 0 ? list.map(item => item[optionLabel]).join(symbols) : value;
      } else {
        return value;
      }

    }
    ,
    valueChange(val) {
      if (Array.isArray(val)) {
        return val
      } else {
        return val.split(",")
      }
    }
  }
}
</script>

<style scoped lang="scss">
.col {
  border: 1px solid #e6e9f0;
  height: 55px;
  line-height: 55px;
  display: flex;

  > div {
    padding-left: 20px;
  }

  .title {
    min-width: 150px;
    background-color: #f5f5f5;
    color: #1F2E4D;
  }

  .val {
    flex: 1;
    border-left: 1px solid #e6e9f0;
    color: #3D4966;
  }
}
</style>
<!-- 使用 方法
    <see :list="seeData"  :formData.sync="formValues">
          <template v-slot:img>
              <div>
              <div v-viewer>
                <img :src="item" v-for="(item , i) in formValues.img_list.split(',')" :key="i"
                alt="" style="height:50px">
                </div>
              </div>

          </template>
       </see>
       import see from "@/components/see.vue";
    数据格式：
    seeData:[
              // 默认
             {
                title:"备案订单编号",
                key: "order_sn",
              },
               // 设置宽度
              {
                title:"鉴品名称",
                key: "treasure_name",
                span: 24
              }, {
                title:"加急服务",
                key: "is_urgent",
                type: "select",
                selectList: [
                  { value: 0, label: "普通" },
                  { value: 1, label: "加急" },
                ]
              },{
                title:"鉴品描述",
                key: "treasure_description",
              },{
                title:"鉴品图片",
                type: "image",
                 key: "img",
              },
   ]
-->

image.png