更新

src/components/generalDetails/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="generalDetails_body">
+    <div class="generalDetails_header" v-if="isHeader">
+      <slot name="generalDetails_header">
+        {{ title }}
+      </slot>
+    </div>
+    <div class="title_bottom">
+      <slot name="title_bottom"></slot>
+    </div>
+    <div class="generalDetails_card_container">
+      <div v-for="(item, index) in dataPage" :key="index">
+        <el-card class="generalDetails_card">
+          <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" />
+              </span>
+              <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>
+            </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($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>
+        </el-card>
+        <div>
+          <slot :name="`${index}card_bottom`"></slot>
+        </div>
+      </div>
+    </div>
+    <div class="generalDetails_footer">
+      <slot name="footer">
+        <el-button @click="close" type="primary">关闭</el-button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import handleClipboard from "@/utils/clipboard.js";
+export default {
+  name: "generalDetails",
+  props: {
+    sourceData: {
+      type: Object,
+      default: () => null,
+    },
+    mappingData: {
+      type: Array,
+      default: () => [],
+    },
+    isHeader: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "默认详情头",
+    },
+  },
+  data() {
+    return {
+      dataPage: [],
+    };
+  },
+  created() {
+    this.sourceData !== null && this.mappingData.length !== 0 && this.init();
+  },
+  methods: {
+    isShow(item) {
+      item.isFold = !item.isFold;
+    },
+    isCopy(event) {
+      handleClipboard(event);
+    },
+    close() {
+      this.$emit("close");
+    },
+    init() {
+      this.dataPage = this.mappingData.map((item) => {
+        return {
+          title: item.carTitle,
+          iconClass: item.iconClass || "iconjichuziliao",
+          isFold: item.isFold || true,
+          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 ||
+                "暂无数据",
+              field: carItem.value,
+              remark: carItem.remark,
+              isCopy: carItem.isCopy || false,
+            };
+          }),
+        };
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title_bottom {
+  margin-top: 20px;
+}
+.fold {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1;
+}
+
+.generalDetails_card_arrow_down {
+  transition: all 0.9s;
+}
+
+.generalDetails_card_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+title {
+  background-color: black !important;
+}
+
+.inner-data {
+  font-size: 14px;
+}
+
+.my-cell {
+  color: #666;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  float: left;
+  flex-wrap: wrap;
+  max-height: 100vh;
+  overflow: hidden;
+  transition: all 0.9s;
+}
+
+.color-999 {
+  color: #999;
+  font-size: 11px;
+  padding-right: 2rem;
+  padding-bottom: 8px !important;
+  display: inline-block;
+  min-width: 5rem;
+}
+
+.cell-item {
+  width: calc(100% / 4);
+  margin-bottom: 20px;
+}
+
+.generalDetails_card {
+  margin-bottom: 25px;
+  position: relative;
+}
+
+.generalDetails-card-header-icon {
+  font-size: 24px;
+}
+
+.generalDetails-card-header-text {
+  font-weight: bold;
+}
+
+.generalDetails_footer {
+  min-height: 50px;
+  position: sticky;
+  bottom: 0px;
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  border-top: solid 1px #e5e5e5;
+}
+
+.generalDetails_header {
+  min-height: 50px;
+  width: 100%;
+  display: flex;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  border-bottom: solid 1px #e5e5e5;
+  font-weight: bold;
+}
+
+.generalDetails_card_container {
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: auto;
+  position: relative;
+}
+
+.generalDetails_body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+</style>