From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期五, 26 九月 2025 09:24:03 +0800
Subject: [PATCH] H5静态化

---
 admin/src/layouts/TableLayout.vue |  192 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 192 insertions(+), 0 deletions(-)

diff --git a/admin/src/layouts/TableLayout.vue b/admin/src/layouts/TableLayout.vue
new file mode 100644
index 0000000..28b3a81
--- /dev/null
+++ b/admin/src/layouts/TableLayout.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="table-layout" >
+    <!-- 澶撮儴 -->
+    <!--    <div v-if="withBreadcrumb" class="table-header">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item v-for="path in paths" :key="path">{{path}}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>-->
+    <!-- <div style="height:10px;"></div> -->
+    <Profile :roles="roles" :permissions="permissions">
+      <!-- 鎼滅储琛ㄥ崟閮ㄥ垎 -->
+      <div class="table-search-form" ref="tableSearchForm">
+        <div class="form-wrap">
+          <slot name="search-form"></slot>
+        </div>
+      </div>
+      <slot name="space"></slot>
+      <!-- 鍒楄〃鍜屽垎椤甸儴鍒� -->
+      <div class="table-content">
+        <div class="table-wrap">
+          <slot name="table-wrap"></slot>
+        </div>
+      </div>
+      <slot></slot>
+    </Profile>
+  </div>
+</template>
+
+<script>
+import Profile from '../components/common/Profile'
+export default {
+  name: 'TableLayout',
+  components: { Profile },
+  props: {
+    // 瑙掕壊
+    roles: {
+      type: Array
+    },
+    // 鏉冮檺
+    permissions: {
+      type: Array
+    },
+    // 鏄惁灞曠ず澶撮儴闈㈠寘灞�
+    withBreadcrumb: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    paths () {
+      return this.$route.meta.paths
+    }
+  },
+  mounted() {
+
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/style/variables.scss";
+/*.el-container .el-main[data-v-5b01577c] {
+  width: 100%;
+  height: calc(100vh - 68px);
+  padding: 0;
+  position: relative;
+  display: flex
+;
+  flex-direction: column;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}*/
+.table-layout {
+  height: calc(100%-10px);
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  .not-allow-wrap {
+    padding-top: 0;
+  }
+}
+.danger-column{
+  color: red;
+}
+// 澶撮儴
+.table-header {
+  overflow: hidden;
+  padding: 12px 16px;
+  flex-shrink: 0;
+  // 椤甸潰璺緞
+  .el-breadcrumb {
+    .el-breadcrumb__item {
+      .el-breadcrumb__inner {
+        color: #ABB2BE;
+        font-size: 12px;
+      }
+      &:last-of-type .el-breadcrumb__inner {
+        color: #606263;
+        font-size: 14px;
+      }
+    }
+  }
+}
+// 鎼滅储
+.table-search-form {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 16px;
+  margin-bottom: 10px;
+  .form-wrap {
+    padding: 16px 16px 0 16px;
+    width: 100%;
+    background: #fff;
+    &:empty {
+      padding: 0;
+    }
+  }
+  section {
+    display: inline-block;
+    margin-left: 16px;
+    margin-bottom: 18px;
+  }
+}
+// 鍒楄〃鍜屽垎椤�
+.table-content {
+  padding: 0 16px;
+  .table-wrap {
+    padding: 16px 16px 60px 16px;
+    background: #fff;
+    // 宸ュ叿鏍�
+    .toolbar {
+      border-bottom: 1px solid #eee;
+      padding-bottom: 10px;
+      li {
+        display: inline-block;
+        margin-right: 6px;
+      }
+    }
+    // 琛ㄦ牸
+    .el-table {
+      //min-height: 300px;
+      overflow: auto;
+      th {
+        .cell {
+          color: #666;
+        }
+      }
+      // 澶嶉�夋鍒�
+      .el-table-column--selection {
+        .cell {
+          text-align: center !important;
+        }
+      }
+      // 澶氬�煎瓧娈�
+      .table-column-strings {
+        ul {
+          li {
+            display: inline-block;
+            background: #eee;
+            border-radius: 3px;
+            padding: 0 3px;
+            margin-right: 3px;
+            margin-bottom: 3px;
+          }
+        }
+      }
+      // 鏍戣瑙夎皟鏁�
+      [class*=el-table__row--level] .el-table__expand-icon {
+        position: relative;
+        left: -6px;
+        margin-right: 0;
+      }
+    }
+    // 鍒嗛〉
+    .table-pagination {
+      margin-left: 0px;
+      padding: 16px 0px;
+      text-align: left;
+      display: block;
+      z-index: 100;
+      width: -webkit-fill-available;
+      /* width: 80%; */
+      position: fixed;
+      bottom: 0px;
+      background-color: white;
+      margin-right: 50px;
+    }
+  }
+}
+</style>

--
Gitblit v1.9.3