H5静态化

doum

2025-09-26 9057e04efad1b7d61c77a72e5c37a504d0aee935

 admin/src/layouts/TableLayout1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,175 @@
<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>-->
    <Profile :roles="roles" :permissions="permissions">
      <div style="width: 100%; height: 100%; padding: 0 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;">
        <div style="width: 240px; height: 100%; flex-shrink: 0; background: #ffffff;">
          <slot name="menu"></slot>
        </div>
        <div style="width: calc(100% - 250px); height: 100%">
          <!-- æœç´¢è¡¨å•éƒ¨åˆ† -->
          <div class="table-search-form" style="padding: 0 !important;">
            <div class="form-wrap">
              <slot name="search-form"></slot>
            </div>
          </div>
          <slot name="space"></slot>
          <!-- åˆ—表和分页部分 -->
          <div class="table-content" style="padding: 0 !important;">
            <div class="table-wrap">
              <slot name="table-wrap"></slot>
            </div>
          </div>
        </div>
      </div>
    </Profile>
  </div>
</template>

<script>
import Profile from '../components/common/Profile'
export default {
  name: 'TableLayout1',
  components: { Profile },
  props: {
    // è§’色
    roles: {
      type: Array
    },
    // æƒé™
    permissions: {
      type: Array
    },
    // æ˜¯å¦å±•ç¤ºå¤´éƒ¨é¢åŒ…屑
    withBreadcrumb: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    paths () {
      return this.$route.meta.paths
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/style/variables.scss";
.table-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  .not-allow-wrap {
    padding-top: 20;
  }
}
// å¤´éƒ¨
.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;*/
  /*box-sizing: border-box;*/
  .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 {
      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>