From 8e02a1240ee6b27d56b5e1a634ebc6f42e6e39a4 Mon Sep 17 00:00:00 2001
From: caolc <572275724@qq.com>
Date: Thu, 27 Apr 2023 13:16:24 +0800
Subject: [PATCH] 12

---
 src/components/generalDetails/README.md | 34 +++++++++++
 src/components/generalDetails/index.vue | 77 +++++++++++++++++--------
 2 files changed, 87 insertions(+), 24 deletions(-)
 create mode 100644 src/components/generalDetails/README.md

diff --git a/src/components/generalDetails/README.md b/src/components/generalDetails/README.md
new file mode 100644
index 0000000..48cc234
--- /dev/null
+++ b/src/components/generalDetails/README.md
@@ -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" 将返回 当前卡片对象对应的值
+
diff --git a/src/components/generalDetails/index.vue b/src/components/generalDetails/index.vue
index 9d536d6..b5225de 100644
--- a/src/components/generalDetails/index.vue
+++ b/src/components/generalDetails/index.vue
@@ -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>
\ No newline at end of file
+</style>