更新

src/components/generalDetails/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="generalDetails_body">
+  <div class="generalDetails_body pft14">
     <div class="generalDetails_header" v-if="isHeader">
       <slot name="generalDetails_header">
         {{ title }}
@@ -37,21 +37,27 @@
             :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($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>
+            <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
+                    @click="isCopy($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>
+            </template>
+
+            <slot v-else name="table"> </slot>
           </div>
         </el-card>
         <div>
@@ -73,8 +79,8 @@ export default {
   name: "generalDetails",
   props: {
     sourceData: {
-      type: Object,
-      default: () => null,
+      type: Array,
+      default: () => [],
     },
     mappingData: {
       type: Array,
@@ -95,6 +101,7 @@ export default {
     };
   },
   created() {
+    // return console.log("this.sourceData", this.sourceData);
     this.sourceData !== null && this.mappingData.length !== 0 && this.init();
   },
   methods: {
@@ -108,18 +115,45 @@ export default {
       this.$emit("close");
     },
     init() {
-      this.dataPage = this.mappingData.map((item) => {
+      this.dataPage = this.mappingData.map(
+        (mappingDataItem, 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,
           iconClass: item.iconClass || "iconjichuziliao",
           isFold: item.isFold || true,
-          listData: item.carItems.map((carItem, index) => {
+          listData: item.carItems.map((carItem) => {
             return {
               label: carItem.label,
               value:
                 (typeof carItem.value == "function" &&
-                  carItem.value(this.sourceData)) ||
-                this.sourceData[carItem.value] ||
+                  carItem.value(this.sourceData[index])) ||
+                this.sourceData[index][carItem.value] ||
                 carItem.fieldDefault ||
                 "暂无数据",
               field: carItem.value,
@@ -134,7 +168,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .title_bottom {
   margin-top: 20px;
 }