更新

src/components/Breadcrumb/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span
+          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+          class="no-redirect"
+          >{{ item.meta.title }}</span
+        >
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from "path-to-regexp";
+
+export default {
+  data() {
+    return {
+      levelList: null,
+    };
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb();
+    },
+  },
+  created() {
+    this.getBreadcrumb();
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(
+        (item) => item.meta && item.meta.title
+      );
+      const first = matched[0];
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: "/", meta: { title: "" } }].concat(matched);
+      }
+
+      this.levelList = matched.filter(
+        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+      );
+    },
+    isDashboard(route) {
+      const name = route && route.name;
+      if (!name) {
+        return false;
+      }
+      return (
+        name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
+      );
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route;
+      var toPath = pathToRegexp.compile(path);
+      return toPath(params);
+    },
+    handleLink(item) {
+      const { redirect, path } = item;
+      if (redirect) {
+        this.$router.push(redirect);
+        return;
+      }
+      this.$router.push(this.pathCompile(path));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/components/Hamburger/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>

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>