111

k94314517

2025-06-19 a27b2b1e241937cf60ff38e6e403ec164bc8224b

 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>