Tui基础组件文档库

# 详情组件

# 基础用法

盘点单编号
PD-YX-20220302002
盘点单状态
待盘点录入
盘点负责人
张三
计划盘点日期
2022-03-03
车间
压型车间
仓库
压型电极仓
盘点所有物料
在制品,合格品
备注
测试 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-detail :descData="descData" />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  name: "TDetailDemo",
  data() {
    return {
      descData: [
        {
          label: "盘点单编号",
          fieldName: "stocktakePlanNo",
          value: "",
        },
        {
          label: "盘点单状态",
          fieldName: "stocktakeJobStatusLabel",
          value: "",
        },
        {
          label: "盘点负责人",
          fieldName: "planStocktakeUserName",
          value: "",
        },
        {
          label: "计划盘点日期",
          fieldName: "planStocktakeDate",
          value: "",
        },
        {
          label: "车间",
          fieldName: "workshopLabel",
          value: "",
        },
        {
          label: "仓库",
          fieldName: "warehouseName",
          value: "",
        },
        {
          label: "盘点所有物料",
          fieldName: "originTypeListLabel",
          value: "",
        },
        {
          label: "备注",
          fieldName: "createRemark",
          value: "",
          span: 4,
        },
      ],
    };
  },
  created() {
    const dataList = {
      id: "1498904492217241602",
      stocktakePlanNo: "PD-YX-20220302002",
      workshopId: 301,
      workshopLabel: "压型车间",
      planStocktakeDate: "2022-03-03",
      warehouseId: 1,
      warehouseName: "压型电极仓",
      stocktakeJobStatus: 4,
      stocktakeJobStatusLabel: "待盘点录入",
      stocktakeType: 2,
      stocktakeTypeLabel: "临时盘点",
      originTypeList: "[1, 3]",
      originTypeListLabel: "在制品,合格品",
      planStocktakeUserName: "张三",
      planStocktakeUserId: 0,
      createRemark: "测试",
    };
    this.descData.map((item) => {
      item.value = dataList[item.fieldName];
    });
  },
};
</script>
显示代码

# 加边框

盘点单编号：
PD-YX-20220302002
盘点单状态：
待盘点录入
盘点负责人：
张三
计划盘点日期：
2022-03-03
车间：
压型车间
仓库：
压型电极仓
盘点所有物料：
在制品,合格品
备注：
测试 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-detail :descData="descData" border />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  name: "TDetailDemo",
  data() {
    return {
      descData: [
        {
          label: "盘点单编号",
          fieldName: "stocktakePlanNo",
          value: "",
        },
        {
          label: "盘点单状态",
          fieldName: "stocktakeJobStatusLabel",
          value: "",
        },
        {
          label: "盘点负责人",
          fieldName: "planStocktakeUserName",
          value: "",
        },
        {
          label: "计划盘点日期",
          fieldName: "planStocktakeDate",
          value: "",
        },
        {
          label: "车间",
          fieldName: "workshopLabel",
          value: "",
        },
        {
          label: "仓库",
          fieldName: "warehouseName",
          value: "",
        },
        {
          label: "盘点所有物料",
          fieldName: "originTypeListLabel",
          value: "",
        },
        {
          label: "备注",
          fieldName: "createRemark",
          value: "",
          span: 4,
        },
      ],
    };
  },
  created() {
    const dataList = {
      id: "1498904492217241602",
      stocktakePlanNo: "PD-YX-20220302002",
      workshopId: 301,
      workshopLabel: "压型车间",
      planStocktakeDate: "2022-03-03",
      warehouseId: 1,
      warehouseName: "压型电极仓",
      stocktakeJobStatus: 4,
      stocktakeJobStatusLabel: "待盘点录入",
      stocktakeType: 2,
      stocktakeTypeLabel: "临时盘点",
      originTypeList: "[1, 3]",
      originTypeListLabel: "在制品,合格品",
      planStocktakeUserName: "张三",
      planStocktakeUserId: 0,
      createRemark: "测试",
    };
    this.descData.map((item) => {
      item.value = dataList[item.fieldName];
    });
  },
};
</script>
显示代码

# 每行展示多少项

盘点单编号
PD-YX-20220302002
盘点单状态
待盘点录入
盘点负责人
张三
计划盘点日期
2022-03-03
车间
压型车间
仓库
压型电极仓
盘点所有物料
在制品,合格品
备注
测试 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <el-radio-group v-model="descColumn" size="small">
        <el-radio-button :label="1">一行展示</el-radio-button>
        <el-radio-button :label="2">一行展示2项</el-radio-button>
        <el-radio-button :label="3">一行展示3项</el-radio-button>
        <el-radio-button :label="4">一行展示4项</el-radio-button>
      </el-radio-group>

      <t-detail :descData="descData" :descColumn="descColumn" />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  name: "TDetailDemo",
  data() {
    return {
      descColumn: 1,
      descData: [
        {
          label: "盘点单编号",
          fieldName: "stocktakePlanNo",
          value: "",
        },
        {
          label: "盘点单状态",
          fieldName: "stocktakeJobStatusLabel",
          value: "",
        },
        {
          label: "盘点负责人",
          fieldName: "planStocktakeUserName",
          value: "",
        },
        {
          label: "计划盘点日期",
          fieldName: "planStocktakeDate",
          value: "",
        },
        {
          label: "车间",
          fieldName: "workshopLabel",
          value: "",
        },
        {
          label: "仓库",
          fieldName: "warehouseName",
          value: "",
        },
        {
          label: "盘点所有物料",
          fieldName: "originTypeListLabel",
          value: "",
        },
        {
          label: "备注",
          fieldName: "createRemark",
          value: "",
          span: 4,
        },
      ],
    };
  },
  created() {
    const dataList = {
      id: "1498904492217241602",
      stocktakePlanNo: "PD-YX-20220302002",
      workshopId: 301,
      workshopLabel: "压型车间",
      planStocktakeDate: "2022-03-03",
      warehouseId: 1,
      warehouseName: "压型电极仓",
      stocktakeJobStatus: 4,
      stocktakeJobStatusLabel: "待盘点录入",
      stocktakeType: 2,
      stocktakeTypeLabel: "临时盘点",
      originTypeList: "[1, 3]",
      originTypeListLabel: "在制品,合格品",
      planStocktakeUserName: "张三",
      planStocktakeUserId: 0,
      createRemark: "测试",
    };
    this.descData.map((item) => {
      item.value = dataList[item.fieldName];
    });
  },
};
</script>
显示代码

# 垂直布局

盘点单编号：盘点单状态：盘点负责人：计划盘点日期：
PD-YX-20220302002
待盘点录入
张三
2022-03-03
车间：仓库：盘点所有物料：备注：
压型车间
压型电极仓
在制品,合格品
测试 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-detail :descData="descData" direction="vertical" />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  name: "TDetailDemo",
  data() {
    return {
      descData: [
        {
          label: "盘点单编号",
          fieldName: "stocktakePlanNo",
          value: "",
        },
        {
          label: "盘点单状态",
          fieldName: "stocktakeJobStatusLabel",
          value: "",
        },
        {
          label: "盘点负责人",
          fieldName: "planStocktakeUserName",
          value: "",
        },
        {
          label: "计划盘点日期",
          fieldName: "planStocktakeDate",
          value: "",
        },
        {
          label: "车间",
          fieldName: "workshopLabel",
          value: "",
        },
        {
          label: "仓库",
          fieldName: "warehouseName",
          value: "",
        },
        {
          label: "盘点所有物料",
          fieldName: "originTypeListLabel",
          value: "",
        },
        {
          label: "备注",
          fieldName: "createRemark",
          value: "",
          span: 4,
        },
      ],
    };
  },
  created() {
    const dataList = {
      id: "1498904492217241602",
      stocktakePlanNo: "PD-YX-20220302002",
      workshopId: 301,
      workshopLabel: "压型车间",
      planStocktakeDate: "2022-03-03",
      warehouseId: 1,
      warehouseName: "压型电极仓",
      stocktakeJobStatus: 4,
      stocktakeJobStatusLabel: "待盘点录入",
      stocktakeType: 2,
      stocktakeTypeLabel: "临时盘点",
      originTypeList: "[1, 3]",
      originTypeListLabel: "在制品,合格品",
      planStocktakeUserName: "张三",
      planStocktakeUserId: 0,
      createRemark: "测试",
    };
    this.descData.map((item) => {
      item.value = dataList[item.fieldName];
    });
  },
};
</script>
显示代码

# 插槽显示

盘点单编号
PD-YX-20220302002
盘点单状态
待盘点录入
盘点负责人
张三
插槽显示编号+负责人 PD-YX-20220302002--张三
计划盘点日期
2022-03-03
车间
压型车间
仓库
压型电极仓
盘点所有物料
在制品,合格品
备注
测试 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-detail :descData="descData" :descColumn="2">
        <template #slotName>
          {{ `${dataList.stocktakePlanNo}--${dataList.planStocktakeUserName}` }}
        </template>
      </t-detail>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  name: "TDetailDemo",
  data() {
    return {
      descData: [
        {
          label: "盘点单编号",
          fieldName: "stocktakePlanNo",
          value: "",
        },
        {
          label: "盘点单状态",
          fieldName: "stocktakeJobStatusLabel",
          value: "",
        },
        {
          label: "盘点负责人",
          fieldName: "planStocktakeUserName",
          value: "",
        },
        {
          label: "插槽显示编号+负责人",
          slotName: "slotName",
          span: 4,
          value: "",
        },
        {
          label: "计划盘点日期",
          fieldName: "planStocktakeDate",
          value: "",
        },
        {
          label: "车间",
          fieldName: "workshopLabel",
          value: "",
        },
        {
          label: "仓库",
          fieldName: "warehouseName",
          value: "",
        },
        {
          label: "盘点所有物料",
          fieldName: "originTypeListLabel",
          value: "",
        },
        {
          label: "备注",
          fieldName: "createRemark",
          value: "",
          span: 4,
        },
      ],
      dataList: {
        id: "1498904492217241602",
        stocktakePlanNo: "PD-YX-20220302002",
        workshopId: 301,
        workshopLabel: "压型车间",
        planStocktakeDate: "2022-03-03",
        warehouseId: 1,
        warehouseName: "压型电极仓",
        stocktakeJobStatus: 4,
        stocktakeJobStatusLabel: "待盘点录入",
        stocktakeType: 2,
        stocktakeTypeLabel: "临时盘点",
        originTypeList: "[1, 3]",
        originTypeListLabel: "在制品,合格品",
        planStocktakeUserName: "张三",
        planStocktakeUserId: 0,
        createRemark: "测试",
      },
    };
  },
  created() {
    this.descData.map((item) => {
      item.value = this.dataList[item.fieldName];
    });
  },
};
</script>
显示代码

# 字典回显

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

在组件中需配置：

descColumn：布局一行显示几列（默认：一行显示 4 列）

descData 显示数据源

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

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

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

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-detail
        :listTypeInfo="listTypeInfo"
        :dataList="dataList"
        :descData="descData"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
import data from "./data.json";
export default {
  name: "TDetailDemo",
  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: [
          {
            label: "在制品",
            id: 1,
          },
          {
            label: "待检品",
            id: 2,
          },
          {
            label: "合格品",
            id: 3,
          },
          {
            label: "报废品",
            id: 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>
显示代码

# 自定义label

盘点单编号
PD-YX-20220302002
盘点单状态
待盘点录入
盘点负责人
张三
计划盘点日期
2022-03-03 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-detail :descData="descData" border />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  name: "TDetailDemo",
  data() {
    return {
      descData: [
        {
          label: "盘点单编号",
          labelRender: () => {
            return <span style="color:red;">盘点单编号</span>
          },
          fieldName: "stocktakePlanNo",
          value: "",
        },
        {
          label: "盘点单状态",
          labelRender: () => {
            return <span style="color:blue;">盘点单状态</span>
          },
          fieldName: "stocktakeJobStatusLabel",
          value: "",
        },
        {
          label: "盘点负责人",
          labelRender: () => {
            return <span style="color:green;">盘点负责人</span>
          },
          fieldName: "planStocktakeUserName",
          value: "",
        },
        {
          label: "计划盘点日期",
          labelRender: () => {
            return <span style="color:orange;">计划盘点日期</span>
          },
          fieldName: "planStocktakeDate",
          value: "",
        }
      ],
    };
  },
  created() {
    const dataList = {
      id: "1498904492217241602",
      stocktakePlanNo: "PD-YX-20220302002",
      workshopId: 301,
      workshopLabel: "压型车间",
      planStocktakeDate: "2022-03-03",
      warehouseId: 1,
      warehouseName: "压型电极仓",
      stocktakeJobStatus: 4,
      stocktakeJobStatusLabel: "待盘点录入",
      stocktakeType: 2,
      stocktakeTypeLabel: "临时盘点",
      originTypeList: "[1, 3]",
      originTypeListLabel: "在制品,合格品",
      planStocktakeUserName: "张三",
      planStocktakeUserId: 0,
      createRemark: "测试",
    };
    this.descData.map((item) => {
      item.value = dataList[item.fieldName];
    });
  },
};
</script>
显示代码

# TDetail Attributes

# 代码示例

详情组件————可实现表单回显

<t-detail :descData="descData" />

# 配置参数（Attributes）继承 el-descriptions el-descriptions-item Attributes

参数 说明 类型 默认值
descData 详情页面数据源 Array -
----label 详情字段说明标题 String -
----value 详情字段返回值 String -
----unit 详情字段返回值单位 String -
----fieldName value 返回值的字段 String -
----slotName 插槽（自定义 value） slot -
----bind 继承el-descriptions-item属性 Object -
----span 占用的列宽，默认占用 1 列，最多 4 列 Number 1
----tooltip value 值的提示语 String/function -
----filters 字典类型（即后台返回的是数字类型）过滤转成中文 Object -
-------list 字典 list 定义的数据名即 listTypeInfo 里面对应的值 String -
-------key 下拉数据源的 key 字段 String 'dictValue'
-------label 下拉数据源的 label 字段 String 'dictLabel'
descColumn 布局一行显示几列（默认：一行显示 4 列） Number 4
dataList 开启 filters 时详情接口返回的数据 Object {}
listTypeInfo 开启 filters 时下拉数据源 Object {}

← TTreeSelect 下拉树形结构组件 →