frame/layout/admin/list-frame.vue

<template>
  <div id="list-frame" :style="`height:${heights}px;overflow:auto`">
    <!-- <el-scrollbar style="height:100%"> -->
    <el-card style="background-image: linear-gradient(315deg, #CCF, transparent);border-radius: 60px;" shadow="hover">
      <el-row>
        <el-col :span="21" class="title">
          <span v-if="returns">
            <el-button size="mini" plan circle @click="toReturns" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <span class="el-icon-arrow-left" style="zoom:1.5;font-weight:700"></span>
            </el-button>
          </span>
          <slot name="title">
            {{ title }}
          </slot>
        </el-col>
        <el-col :span="3" class="title" v-if="needAdd">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="$emit('add')">新增</el-button>
        </el-col>
      </el-row>
      <slot name="filter" v-if="needFilter">
        <el-form :inline="true" style="padding:0.9rem 1.5rem ;">
          <el-form-item v-for="(item, index) in filter" :key="index" :label="item.label">
            <template v-if="item.type === `select`">
              <el-select v-model="searchInfo[`${item.model}`]" size="mini" clearable>
                <!-- <el-option v-for="(select, sIndex) in item.list" :key="sIndex" :label="select.label" :value="select.value"></el-option> -->
                <slot name="options" v-bind="{ item }"></slot>
              </el-select>
            </template>
            <template v-else>
              <el-input v-model="searchInfo[`${item.model}`]" size="mini" :placeholder="getField('place', item)" clearable></el-input>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="toQuery()">查询</el-button>
          </el-form-item>
        </el-form>
      </slot>

      <div style="padding:0.9rem 1.25rem ;">
        <slot> </slot>
      </div>
      <el-row type="flex" align="middle" justify="end" v-if="needPag">
        <el-col :span="24" style="text-align:right;">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            :page-size="limit"
            :current-page.sync="currentPage"
            @current-change="changePage"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- </el-scrollbar> -->
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'list-frame',
  props: {
    title: { type: String },
    filter: { type: Array, default: () => [] },
    total: { type: Number, default: 0 },
    needPag: { type: Boolean, default: true },
    returns: { type: null, default: null },
    needFilter: { type: Boolean, default: true },
    needAdd: { type: Boolean, default: true },
  },
  components: {},
  data: () => ({
    limit: _.get(this, `$limit`, undefined) !== undefined ? this.$limit : process.env.VUE_APP_LIMIT * 1,
    currentPage: 1,
    searchInfo: {},
    heights: document.documentElement.clientHeight - 80,
  }),
  created() {},
  computed: {},
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight - 80;
        that.heights = window.fullHeight;
      })();
    };
  },
  methods: {
    changePage(page) {
      this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit, ...this.searchInfo });
    },
    toQuery() {
      let keys = Object.keys(this.searchInfo);
      for (const key of keys) if (this.searchInfo[key] === '' || !this.searchInfo[key]) delete this.searchInfo[key];
      this.$emit('query', this.searchInfo);
    },
    toReturns() {
      if (_.isString(this.returns)) this.$router.push({ path: this.returns });
      else if (_.isFunction(this.returns)) {
        let fun = _.get(this, `returns`);
        fun();
      }
    },
    // 文字描述
    getField(item, data) {
      let res = _.get(data, item, null);
      if (item === 'type') res = res === null ? `text` : res;
      if (item === 'place') res = res === null ? `请输入${data.label}` : res;
      if (item === 'required') res = res === null ? false : res;
      if (item === `error`) res = res === null ? `${data.label}错误` : res;
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.8rem;
}
/deep/.el-scrollbar__wrap {
  overflow-x: auto;
}
</style>