# 详情组件
# 基础用法
盘点单编号 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>
显示代码
wocwin微信二维码
# 加边框
盘点单编号 | 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>
显示代码
wocwin微信二维码
# 每行展示多少项
盘点单编号 PD-YX-20220302002 |
盘点单状态 待盘点录入 |
盘点负责人 张三 |
计划盘点日期 2022-03-03 |
车间 压型车间 |
仓库 压型电极仓 |
盘点所有物料 在制品,合格品 |
备注 测试 |
<template>
<t-layout-page>
<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-layout-page-item>
<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>
显示代码
wocwin微信二维码
# 垂直布局
盘点单编号 | 盘点单状态 | 盘点负责人 | 计划盘点日期 |
---|---|---|---|
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>
显示代码
wocwin微信二维码
# 插槽显示
盘点单编号 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>
显示代码
wocwin微信二维码
# 字典回显
盘点单编号 | 盘点单状态 | 盘点负责人 | 计划盘点日期 |
字典回显 | 车间 | 仓库 | 盘点所有物料 |
备注 |
在组件中需配置:
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>
显示代码
wocwin微信二维码
# TDetail Attributes
# 代码示例
详情组件————可实现表单回显
<t-detail :descData="descData" />
# 配置参数(Attributes)继承 el-descriptions el-descriptions-item Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
descData | 详情页面数据源 | Array | 无 |
----label | 详情字段说明标题 | String | 无 |
----value | 详情字段返回值 | 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 | {} |