更新

src/components/generalDetails/index.vue

@@ -11,44 +11,29 @@
     <div class="generalDetails_card_container">
       <div v-for="(item, index) in dataPage" :key="index">
         <el-card class="generalDetails_card">
-          <div
+          <div @click="isShow(item)" class="generalDetails_card_header" slot="header">
-            @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" />
               </span>
-              <span class="generalDetails-card-header-text">{{
+              <span class="generalDetails-card-header-text">{{ item.title }}</span>
-                item.title
-              }}</span>
             </div>
             <div class="fold">
               <i
                 :style="{
-                  transform: `rotate(${item.isFold ? 0 : 180}deg)`,
+                  transform: `rotate(${item.isFold ? 0 : 180}deg)`
                 }"
                 class="el-icon-arrow-down generalDetails_card_arrow_down"
               ></i>
             </div>
           </div>
-          <div
+          <div :style="{ maxHeight: item.isFold ? '100vh' : '0px' }" class="my-cell">
-            :style="{ maxHeight: item.isFold ? '100vh' : '0px' }"
+            <template v-if="item.listData.length && item.listData[0].field !== 'table'">
-            class="my-cell"
-          >
-            <template
-              v-if="item.listData.length && item.listData[0].field !== 'table'"
-            >
               <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
+                  <i @click="isCopy($event)" v-if="i.isCopy" class="el-icon-document-copy"></i>
-                    @click="isCopy($event)"
-                    v-if="i.isCopy"
-                    class="el-icon-document-copy"
-                  ></i>
                 </span>
                 <br />
                 <slot class="inner-data" :name="`${i.field}`">
@@ -74,98 +59,70 @@
 </template>
 
 <script>
-import handleClipboard from "@/utils/clipboard.js";
+import handleClipboard from '@/utils/clipboard.js'
 export default {
-  name: "generalDetails",
+  name: 'generalDetails',
   props: {
     sourceData: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     mappingData: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     isHeader: {
       type: Boolean,
-      default: false,
+      default: false
     },
     title: {
       type: String,
-      default: "默认详情头",
+      default: '默认详情头'
-    },
+    }
   },
   data() {
     return {
-      dataPage: [],
+      dataPage: []
-    };
+    }
   },
   created() {
-    // return console.log("this.sourceData", this.sourceData);
+    this.sourceData && this.mappingData.length && this.init()
-    this.sourceData !== null && this.mappingData.length !== 0 && this.init();
   },
   methods: {
     isShow(item) {
-      item.isFold = !item.isFold;
+      item.isFold = !item.isFold
     },
     isCopy(event) {
-      handleClipboard(event);
+      handleClipboard(event)
     },
     close() {
-      this.$emit("close");
+      this.$emit('close')
     },
     init() {
-      this.dataPage = this.mappingData.map(
+      this.dataPage = this.mappingData.map((mappingDataItem, mappingDataIndex) => {
-        (mappingDataItem, mappingDataIndex) => {
+        let shineData = this.sourceData[mappingDataIndex] || {}
-          let shineData = this.sourceData[mappingDataIndex] || {};
-          return {
-            title: mappingDataItem.carTitle,
-            iconClass: mappingDataItem.iconClass || "iconjichuziliao",
-            isFold: mappingDataItem.isFold || true,
-            listData: mappingDataItem.carItems.map((carItem) => {
-              let value =
-                (typeof carItem.value == "function" &&
-                  carItem.value(shineData)) ||
-                shineData[carItem.value] == 0
-                  ? 0
-                  : shineData[carItem.value] || carItem.fieldDefault || "";
-              return {
-                label: carItem.label,
-                value: value,
-                field: carItem.value,
-                remark: carItem.remark,
-                isCopy: carItem.isCopy || false,
-              };
-            }),
-          };
-        }
-      );
-      console.log("this.dataPage", this.dataPage);
-      return;
-      this.dataPage = this.mappingData.map((item, index) => {
         return {
-          title: item.carTitle,
+          title: mappingDataItem.carTitle,
-          iconClass: item.iconClass || "iconjichuziliao",
+          iconClass: mappingDataItem.iconClass || 'iconjichuziliao',
-          isFold: item.isFold || true,
+          isFold: mappingDataItem.isFold || true,
-          listData: item.carItems.map((carItem) => {
+          listData: mappingDataItem.carItems.map(carItem => {
+            let value =
+              (typeof carItem.value == 'function' && carItem.value(shineData)) || shineData[carItem.value] == 0
+                ? 0
+                : shineData[carItem.value] || carItem.fieldDefault || ''
             return {
               label: carItem.label,
-              value:
+              value: value,
-                (typeof carItem.value == "function" &&
-                  carItem.value(this.sourceData[index])) ||
-                this.sourceData[index][carItem.value] ||
-                carItem.fieldDefault ||
-                "暂无数据",
               field: carItem.value,
               remark: carItem.remark,
-              isCopy: carItem.isCopy || false,
+              isCopy: carItem.isCopy || false
-            };
+            }
-          }),
+          })
-        };
+        }
-      });
+      })
-    },
+    }
-  },
+  }
-};
+}
 </script>
 
 <style lang="scss" scoped>