Vue根据模板动态显示内容

使用场景：前台配置显示模板，后台返回的数据，前台根据数据模板动态渲染页面。

优点：开发一个公共的页面，每个页面对应一个模板，减少不停的开发页面。把写页面和样式的重复工作用代码来实现，减少开发工作量。

缺点：每个页面对应一个模板，模板里面需要配置页面内容。

实现思路：

1. 写一个公共的展示页面。

2. 定义页面模板，及配置页面中每个字段属性。

3. 根据模板把数据格式化。

4.定义页面每个字段显示组件。比如：label、file、radio、checkbox等

UI效果：

 

 

代码：

1.公共UI展示组件

CommonDisplay.vue

<template>

      <div class="display-data" v-for="item in displayData" :key="item.key">

        <template v-if="item.type == 'image'">

          <span v-show="item.label">{{ item.label }}：</span>

          <div

            v-for="imageItem in item.value"

            :key="imageItem.uuid"

            class="vant-uploader"

          >

            <van-image

              width="100%"

              height="100%"

              fit="cover"

              :src="imageItem.filePath"

            />

          </div> </template

        ><template v-else

          ><span>{{ item.label }}：</span

          ><span>{{ item.value }}</span></template

        >

      </div>

</template>

<script>

export default {

  name: "CommonDisplay",

  props: {

    data: {

      type: Object,

      default: function () {

        return {};

      },

    },

    dataModel: {

      type: Array,

      default: function () {

        return [];

      },

    },

  },

  components: { ResourceDetails },

  data() {

    return {

      displayData: [],

    };

  },

  methods: {

    /**

     * 格式化展示的数据

     */

    formatDisplayData() {

      if (this.currentState != "notStart") {

        this.displayData = this.formatTemplate(this.data, this.dataModel);

      }

    },

    /**

     * 根据model格式化表单数据展示

     */

    formatTemplate(data, model) {

      let displayData = JSON.parse(JSON.stringify(model));

      let item = null;

      if (!this.$utils.isEmpty(data)) {

        for (let i = 0; i < displayData.length; i++) {

          item = displayData[i];

          item.value = !this.$utils.isEmpty(data[item.key])

            ? data[item.key]

            : "";

          if (item.type == "dict" && !this.$utils.isEmpty(item.value)) {

            // 字典

            item.value = this.$utils.getValueById(

              "id",

              item.value,

              this.$store.state.bd5Module[item.dict]

            );

          } else if (item.type == "file" && !this.$utils.isEmpty(item.value)) {

            // 附件

            let tempArr = JSON.parse(item.value);

            let temp = [];

            for (let i = 0; i < tempArr.length; i++) {

              temp.push(tempArr[i].name);

            }

            item.value = temp.join("、");

          } else if (item.type == "image") {

            // 图片

            item.value = this.formatImage(item.value);

          } else if (item.type == "time" && !this.$utils.isEmpty(item.value)) {

            // 时间

            let time = Number(item.value);

            item.value = this.$utils.dateFormat(time);

          }

        }

      }

      return displayData;

    },

    /**

     * 格式图片

     */

    formatImage(data) {

      let temp = [];

      if (!this.$utils.isEmpty(data)) {

        let tempArr = JSON.parse(data);

        let item = null;

        for (let i = 0; i < tempArr.length; i++) {

          item = tempArr[i];

          item.filePath =

            location.origin +

            "/direct/api/repository/file/download/" +

            item.uuid;

        }

        temp.push(item);

      }

      return temp;

    },

  },

  mounted() {

    this.formatDisplayData();

  },

};

</script>

2. 定义页面模板 model.js

export const siteSurveyModel = [

  {

    key: "lowerBrushGreen",

    value: "",

    label: "下一是否刷绿",

    type: "dict",

    dict: "yes_or_no",

  },

  {

    key: "caseStudySuccess",

    value: "",

    label: "考察是否顺利",

    type: "dict",

    dict: "yes_or_no",

  },

  {

    key: "remark",

    value: "",

    label: "备注",

  },

];