refinery-customer-admin/src/components/generalDetails/index.vue

<template>
  <div class="generalDetails_body pft14">
    <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"
          >
            <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>
          <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: Array,
      default: () => [],
    },
    mappingData: {
      type: Array,
      default: () => [],
    },
    isHeader: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "默认详情头",
    },
  },
  data() {
    return {
      dataPage: [],
    };
  },
  created() {
    // return console.log("this.sourceData", this.sourceData);
    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(
        (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) => {
            return {
              label: carItem.label,
              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,
            };
          }),
        };
      });
    },
  },
};
</script>

<style lang="scss" 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>