需求

很多时候因对象关联，前端只收到一个关联对象的ID，或者枚举值。这个如果后台不处理的话前端往往需要根据ID再去后台查询获得对象数据显示对象信息（一般显示name）。因此这是一个很常见的操作，所以我们可以封装一个组件，让组件自动帮我们去查询。

开始做

新建 GetModelInfo.vue 文件

定义参数

包含 fdId（要查询的ID）、url（后台接口路径）、show（显示的字段）、attributes（要查询的属性）

props: {
    fdId: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    },
    show: {
      type: String,
      required: true
    },
    attributes: {
      type: Array,
      required: false
    }
  },

显示

<template>
  <span>{{ modelInfo }}</span>
</template>

查询

activated() {
   // 进入页面的时候查询数据
  show(this.url, this.fdId, this.attributes).then(_ => {
    const { data } = _.data
    this.modelInfo = data[this.show] // 显示字段
    this.$emit('model-info', data) // 返回调用者完整的数据
  })
}

完整代码

<template>
  <span>{{ modelInfo }}</span>
</template>

<script>
import { show } from '@/services/baseService'

export default {
  name: 'GetModelInfo',
  props: {
    fdId: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    },
    show: {
      type: String,
      required: true
    },
    attributes: {
      type: Array,
      required: false
    }
  },
  data() {
    return {
      modelInfo: ''
    }
  },
  activated() {
    show(this.url, this.fdId, this.attributes).then(_ => {
      const { data } = _.data
      this.modelInfo = data[this.show]
      this.$emit('model-info', data)
    })
  }
}
</script>

<style scoped>

</style>

这里的 show 是个通用查询，根据ID和要查询的字段动态返回。

使用

在需要调用的地方引入即可

...
<!-- test -->
<get-model-info fd-id="rrr" :url="url0" show="fdType" :attributes="attributes" @model-info="modelInfo" />
...

<script>
import GetModelInfo from '@/components/GetModelInfo'
...

export default {
  components: { GetModelInfo },
  data() {
    return {
      url0: 'eam_device_main',
      attributes: ['fdId', 'fdType'],
      ...
    }
  },
  methods: {
  	modelInfo(data) {
      console.log(data)
    },
  }
  ...
</script>

效果

请求

结果显示