# 详情组件


盘点单编号
盘点单状态
盘点负责人
计划盘点日期
盘点类型
车间
仓库
盘点所有物料
备注

在组件中需配置:

descColumn:布局一行显示几列(默认:一行显示 4 列)

descData 显示数据源

若需要配置filters(下拉选择转中文)
descData每项中配置filters有三个参数

filters: {
      list: 'stockTakeTypeList', // listTypeInfo里面对应的值
      key: 'id', // key  数据源的key字段(默认:dictValue)
      label: 'label' // 数据源的label字段(默认:dictLabel)
    }

还需要配置listTypeInfo下拉数据源;类型 Object

dataList后台返回的详情接口数据

<template>
  <div class="p-detail-demo" style="width:100%;min-height:100px;padding:15px;">
    <p-detail :listTypeInfo="listTypeInfo" :dataList="dataList" :descData="descData" />
  </div>
</template>
<script>
import data from './data.json'
export default {
  name: 'PDetailDemo',
  data () {
    return {
      descData: [
        {
          label: '盘点单编号',
          fieldName: 'stocktakePlanNo',
          value: ''
        },
        {
          label: '盘点单状态',
          fieldName: 'stocktakeJobStatusLabel',
          value: ''
        },
        {
          label: '盘点负责人',
          fieldName: 'planStocktakeUserName',
          value: ''
        },
        {
          label: '计划盘点日期',
          fieldName: 'planStocktakeDate',
          value: ''
        },
        {
          label: '盘点类型',
          fieldName: 'stocktakeJobStatus',
          value: '',
          filters: {
            list: 'stockTakeTypeList',
            // key: 'id',
            // label: 'label'
          },
        },
        {
          label: '车间',
          fieldName: 'workshopLabel',
          value: ''
        },
        {
          label: '仓库',
          fieldName: 'warehouseName',
          value: ''
        },
        {
          label: '盘点所有物料',
          fieldName: 'originTypeListLabel',
          value: ''
        },
        {
          label: '备注',
          fieldName: 'createRemark',
          value: '',
          span: 4
        }
      ],
      listTypeInfo: {
        stockTakeTypeList: [
          {
            dictLabel: '在制品',
            dictValue: 1,
          },
          {
            dictLabel: '待检品',
            dictValue: 2,
          },
          {
            dictLabel: '合格品',
            dictValue: 3,
          },
          {
            dictLabel: '报废品',
            dictValue: 4,
          }
        ], // 盘点类型
      },
      dataList: {}
    }
  },
  created () {
    this.getTakeRecordHead()
  },
  methods: {
    // 头部信息
    async getTakeRecordHead () {
      const res = await data
      // console.log('头部信息', res)
      if (res.success) {
        this.dataList = res.data
        // 回显基础信息
        this.descData.map(item => {
          item.value = res.data[item.fieldName]
        })
      }
    }
  }
}
</script>
显示代码

# 配置参数(Attributes)

参数 说明 类型 默认值
descData 详情页面数据源 Array
----label 详情字段说明标题 String
----value 详情字段返回值 String
----fieldName value 返回值的字段 String
----slotName 插槽(自定义 value) slot
----span 占用的列宽,默认占用 1 列,最多 4 列 Number 1
----tooltip value 值的提示语 String/function
----filters 字典类型(即后台返回的是数字类型)过滤转成中文 Object
-------list 字典 list 定义的数据名即 listTypeInfo 里面对应的值 String
-------key 下拉数据源的 key 字段 String 'dictValue'
-------label 下拉数据源的 label 字段 String 'dictLabel'
dataList 开启 filters 时详情接口返回的数据 Object {}
listTypeInfo 开启 filters 时下拉数据源 Object {}