caoliancun/dispacth_zhongpin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

12

Browse Source
This commit is contained in:
caolc
2023-04-27 13:16:24 +08:00
parent b3991ebba0
commit 8e02a1240e
2 changed files with 87 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/generalDetails/README.md Normal file
View File

@@ -0,0 +1,34 @@
组件 参数
sourceData : 数据源 类型：对象 {}
mappingData：映射表 类型：数组 []
isHeader：是否需要标题 默认为false 类型：布尔
title：详情标题 默认为 默认详情头 类型：字符串
mappingData 示例
[
{ //第一层 为卡片
carTitle：//卡片标题
iconClass://图标名
isFold：是否可折叠
carItems：[
{
label:名称
value：显示的值 支持 string(相对相应的字段) array( 支持嵌套字段如['a','b'],实际为sourceData.a.b) functoin(接收一个参数为当前数据源，需返回一个字符串类型的值)
fieldDefault：默认值 value没有数据的时候现实的值
remark：备注
isCopy：：是否可复制
field：字段
}
]
}
]
插槽模式 slot
header 整个组件的头部
field 每个字段都可以使用插槽自定义 插槽名称为相对应的字段
index card_bottom 每张卡片都有相对应的底部 index为索引
footer 整个组件的底部
index_car 整张卡片的插槽名称 index为卡片索引
#4_car="data" 将返回 当前卡片对象对应的值

77
src/components/generalDetails/index.vue
View File

@@ -9,9 +9,9 @@
<slot name="title_bottom"></slot>
</div>
<div class="generalDetails_card_container">
<div v-for="(item, index) in dataPage" :key="index">
<div name v-for="(item, index) in dataPage" :key="index">
<el-card class="generalDetails_card">
<div @click="isShow(item)" class="generalDetails_card_header" slot="header">
<div @click="isShow(item)" class="generalDetails_card_header" slot="header">
<div>
<span class="generalDetails-card-header-icon">
<svg-icon style="color: #118dde" :icon-class="item.iconClass" />
@@ -19,30 +19,37 @@
<span class="generalDetails-card-header-text">{{ item.title }}</span>
</div>
<div class="fold">
<i :style="{ transform: `rotate(${item.isFold ? 0 : 180}deg)` }"
class="el-icon-arrow-down generalDetails_card_arrow_down"></i>
<i
:style="{
transform: `rotate(${item.isFold ? 0 : 180}deg)`
}"
class="el-icon-arrow-down generalDetails_card_arrow_down"
></i>
</div>
</div>
<div :style="{ maxHeight: item.isFold ? '100vh' : '0px' }" class="my-cell">
<div v-for="(i, x) in item.listData " :key="x" class="cell-item">
<span :title="i.remark" class="color-999 test-tst">
{{ i.label }}
<i v-if="i.remark" class="header-icon el-icon-info"></i>
<i @click="isCopy(i.value, $event)" v-if="i.isCopy" class="el-icon-document-copy"></i>
</span>
<br />
<slot class="inner-data" :name="`${i.field}`">
<span class="inner-data">{{ i.value }}</span>
</slot>
<slot :name="`${index}_car`" :item="item">
<div :style="{ maxHeight: item.isFold ? '100vh' : '0px' }" class="my-cell">
<div v-for="(i, x) in item.listData" :key="x" class="cell-item">
<span :title="i.remark" class="color-999 test-tst">
{{ i.label }}
<i v-if="i.remark" class="header-icon el-icon-info"></i>
<i @click="isCopy(i.value, $event)" v-if="i.isCopy" class="el-icon-document-copy"></i>
</span>
<br />
<slot class="inner-data" :name="`${i.field}`">
<span class="inner-data">{{ i.value }}</span>
</slot>
</div>
</div>
</div>
</slot>
</el-card>
<div>
<div >
<slot :name="`${index}card_bottom`"></slot>
</div>
</div>
</div>
<div class="generalDetails_footer">
<slot name="footer">
<el-button @click="close" type="primary" :size="$store.getters.size">关闭</el-button>
</slot>
@@ -78,8 +85,10 @@ export default {
dataPage: []
}
},
created() {
(this.sourceData !== null) && (this.mappingData.length !== 0) && (this.init())
console.log('created')
this.sourceData !== null && this.mappingData.length !== 0 && this.init()
},
methods: {
isShow(item) {
@@ -100,14 +109,32 @@ export default {
listData: item.carItems.map((carItem, index) => {
return {
label: carItem.label,
value: (typeof carItem.value =='function')&&(carItem.value(this.sourceData)) || this.sourceData[carItem.value] || carItem.fieldDefault || '暂无数据',
value:
(typeof carItem.value == 'function' && carItem.value(this.sourceData)) ||
(Array.isArray(carItem.value) &&
carItem.value.reduce((prev, current, index, _arr) =>
index == 1
? this.sourceData[prev]
? this.sourceData[prev][current] !== null && this.sourceData[prev][current] !== undefined
? this.sourceData[prev][current]
: '暂无数据'
: '暂无数据'
: typeof prev == 'object'
? prev[current]
: prev
)) ||
(this.sourceData[carItem.value] !== null && this.sourceData[carItem.value] !== undefined
? String(this.sourceData[carItem.value])
: false) ||
carItem.fieldDefault ||
'暂无数据',
field: carItem.value,
remark: carItem.remark,
isCopy: carItem.isCopy || false
}
})
}
});
})
console.log(this.dataPage)
}
}
@@ -115,9 +142,10 @@ export default {
</script>
<style scoped>
.title_bottom{
.title_bottom {
margin-top: 20px;
}
.fold {
/* position: absolute;
bottom: 0px;
@@ -130,7 +158,7 @@ export default {
}
.generalDetails_card_arrow_down {
transition: all .9s;
transition: all 0.9s;
}
.generalDetails_card_header {
@@ -156,7 +184,7 @@ title {
flex-wrap: wrap;
max-height: 100vh;
overflow: hidden;
transition: all .9s;
transition: all 0.9s;
}
.color-999 {
@@ -196,6 +224,7 @@ title {
padding: 15px 20px;
box-sizing: border-box;
border-top: solid 1px #e5e5e5;
z-index: 999999;
}
.generalDetails_header {
@@ -223,4 +252,4 @@ title {
flex-direction: column;
position: relative;
}
</style>
</style>