BST_bigScreen/src/components/currencyPage/index.vue

<template>
  <div style="height: 100%">
    <Toptitle :title="title">
      <slot name="titleButton"></slot>
    </Toptitle>

    <div class="page-edit">
      <div class="nav">
        <Topsearch v-if="showTopSearch"
                   :showbtn="showbtn"
                   @changeSelected="changeSelected"
                   :list="list"
                   @init="init"
                   @searchData="searchData" />
        <div style="padding-bottom: 15px">
          <slot name="navButton"></slot>
        </div>
      </div>
      <div v-if="logList"
           slot="text-list"
           class="log-list">
        <div class="log-item"
             v-for="(item, index) of logList"
             :key="index">
          <span>{{ item.key }}：</span>
          <span :style="item.color ? 'color:' + item.color : ''">{{
            item.value
          }}</span>
        </div>
      </div>
      <div>
        <slot name="text-list"></slot>
      </div>
      <Table ref="table"
             v-if="showTable"
             :width="tableWidth"
             :loading="loading"
             :disabled-hover="disabledHover"
             @on-selection-change="selectTable"
             @on-select='select'
             @on-select-cancel='selectTableCancel'
             @on-select-all-cancel='selectTableAllCancel'
             :stripe="stripe"
             border
             :size="size"
             :columns="tableColums"
             :data="tableData">
        <template slot-scope="{ row }"
                  slot="set">
          <slot name="set"
                :row="row"></slot>
        </template>
        <template slot-scope="{ row }"
                  slot="basicTypeSet">
          <slot name="basicTypeSet"
                :row="row"></slot>
        </template>
         <template slot-scope="{ row,index }"
                  slot="urlSet">
          <slot name="urlSet"
                :row="row"
                :index='index'></slot>
        </template>
         <template slot-scope="{ row,index }"
                  slot="fashion">
          <slot name="fashion"
                :row="row"
                :index='index'></slot>
        </template>
      </Table>

      <slot></slot>
    </div>
    <slot name="pageSlot"></slot>
    <Footer v-if="showPage"
            :pageIndex="pageIndex"
            :total="total"
            :pageSize="pageSize"
            @changeSize="changeSize"
            @change="changePage" />
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: {
    list: {
      // type:Array,
      // default:null,
    },
    tableColums: {
      type: Array,
    },
    tableData: {
      type: Array,
    },
    pageIndex: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: '',
    },
    showTopSearch: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    disabledHover: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'default'
    },
    logList: {
      type: Array,
      default: null,
    },
    showPage: {
      type: Boolean,
      default: true,
    },
    showbtn: {
      type: Boolean,
      default: true,
    },
    showTable: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      tableWidth: null,
      tableHeight: null,
    }
  },
  created () { },
  mounted () {
    this.$nextTick(() => {
      if (this.showTable) {
        this.tableWidth = window.innerWidth - 350
        this.tableHeight =
          window.innerHeight - this.$refs.table.$el.offsetTop - 300
        window.addEventListener('resize', (e) => {
          this.tableWidth = e.target.innerWidth - 350
          // this.tableHeight = e.target.innerHeight - this.$refs.table.$el.offsetTop - 320;
          this.$forceUpdate()
        })
      }
    })
    //2021年07月23日17:24:05
    let id = JSON.parse(sessionStorage.getItem('crumbs')).parantData.id
    if (this.$route.query.permisssions_id || id) {
      this.axios('/api/get_permission', {
        params: {
          menu_id: this.$route.query.permisssions_id || id,
        },
      }).then((res) => {
        if (res.code == 200) {
          const result = Object.values(res.data)
          if (result.length > 0) {
            const obj = {}
            result.forEach((element) => (obj[element.remark] = element.status))
            this.updata_permission(obj)
          } else {
            this.updata_permission({ all: 1 })
          }
        }
      })
    }
  },
  destroyed () {
    window.removeEventListener('resize', (e) => {
      this.tableWidth = e.target.innerWidth - 350
    })
  },
  methods: {
    ...mapActions(['updata_permission']),
    init (row) {
      this.$emit('init', row)
    },
    searchData (row) {
      this.$emit('searchData', row)
    },
    changePage (e) {
      this.$emit('changePage', e)
    },
    selectTable (e) {
      this.$emit('selectTable', e)
    },
    changeSize (e) {
      this.$emit('changeSize', e)
    },
    changeSelected (e) {
      this.$emit('changeSelected', e)
    },
    selectTableCancel(e,row){
      this.$emit('selectTableCancel',e,row)
    },
    select(e,row){
      this.$emit('select',e,row)
    },
    selectTableAllCancel(e){
      this.$emit('selectTableAllCancel',e)
    }
  },
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.page-edit {
  // overflow: hidden;
  overflow-y: auto;
  position: relative;
  top: 0px;
  height: 80%;
}
</style>