<!-- 表格 -->
<template>
  <div class="cs-table">
    <aside v-if="!disableHeadBar">
      <div class="filter">
        <slot name="head_filter" style="display: inline"></slot>
        <span style="display: inline-block" v-if="!disableKeywordSearch">
          <cs-field-search
            :style="{ width: searchWidth }"
            v-model="filter.keywords"
            :placeholder="keywordSearchPlaceholder"
          ></cs-field-search>
        </span>
        <el-link
          style="margin-left: 5px"
          icon="el-icon-refresh"
          :title="$t('common.refresh')"
          @click="init"
          v-if="disableRefresh == false"
        ></el-link>
      </div>

      <div class="button">
        <cs-button-add @click="openAdd" v-if="!disableAddButton"></cs-button-add>
        <slot name="head_button"></slot>

        <el-dropdown style="margin-left: 10px" trigger="click" @command="exportCommand" v-if="enableExportButtons">
          <cs-button>
            {{ $t('common.export') }}
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </cs-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">{{ $t('common.exportAll') }}</el-dropdown-item>
            <el-dropdown-item command="2">{{ $t('common.exportFilter') }}</el-dropdown-item>
            <el-dropdown-item v-show="enableSelectionColumn" :disabled="multipleSelection.length == 0" command="3">{{
              $t('common.exportSelected')
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <cs-button-search
          v-if="advancedSearchRules && advancedSearchRules.length > 0"
          @click="search"
        ></cs-button-search>
      </div>
      <div class="clearfloat"></div>
    </aside>

    <div style="padding: 5px">
      <slot name="head_batch"></slot>
    </div>

    <el-tabs v-model="currentViewDisplay" v-if="viewDisplays.length > 1">
      <el-tab-pane label="卡片视图" name="card" v-if="viewDisplays.indexOf('card') > -1"></el-tab-pane>
      <el-tab-pane label="表格视图" name="table" v-if="viewDisplays.indexOf('table') > -1"></el-tab-pane>
    </el-tabs>

    <!-- 卡片视图 -->
    <el-card
      v-if="currentViewDisplay == 'card'"
      v-adaptive-card
      style="overflow-y: auto"
      :style="{ height: disableAdaptive == true ? height : '100%' }"
      shadow="never"
    >
      <div class="grid_list" :style="cardRowCountStyle">
        <div class="box-card" v-for="(item, index) in tableData" :key="index">
          <el-card>
            <div slot="header" v-if="enableCardHeader">
              <slot name="card_header" :row="item"></slot>
            </div>

            <div
              class="card-content"
              :style="{ cursor: disableViewSideslip ? 'auto' : 'pointer' }"
              @click="openCurrentView(item)"
            >
              <slot name="card_block" :row="item"></slot>
              <div class="clearfloat"></div>
            </div>
            <div class="bottom-right">
              <i
                class="fa fa-pencil-square-o"
                aria-hidden="true"
                v-if="!disableEditButton"
                @click.stop="openEdit(item)"
              ></i>
              <i class="fa fa-trash-o" aria-hidden="true" v-if="!disableDeleteButton" @click.stop="remove(item)"></i>
              <slot name="card_block_button" :row="item"></slot>
            </div>
          </el-card>
        </div>
      </div>

      <div class="clearfloat"></div>
    </el-card>

    <!-- 表格视图 -->
    <el-table
      v-if="currentViewDisplay == 'table'"
      ref="table"
      :data="tableData"
      style="margin-top: 10px"
      :stripe="rowClassName == null"
      v-adaptive
      :height="disableAdaptive == true ? height : '100%'"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
      @filter-change="filterChange"
      :show-summary="showSummary"
      :summary-method="summaryMethod"
      :row-class-name="rowClassName"
      :size="size"
      :border="border"
      :row-key="rowKey"
      :default-expand-all="defaultExpandAll"
      :tree-props="treeProps"
      :span-method="spanMethod"
    >
      <el-table-column
        type="selection"
        fixed="left"
        width="55"
        align="center"
        v-if="enableSelectionColumn"
      ></el-table-column>
      <el-table-column :label="$t('common.lineNo')" fixed="left" width="80" v-if="enableLinenoColumn">
        <template slot-scope="scope">{{ (currentPage - 1) * currentPageSize + scope.$index + 1 }}</template>
      </el-table-column>
      <slot name="table_column"></slot>
      <el-table-column
        :label="$t('common.operation')"
        fixed="right"
        :width="operationColumnWidth"
        :align="operationColumnAlign"
        v-if="!disableOperationColumn"
      >
        <template slot-scope="scope">
          <div>
            <cs-button-edit @click="openEdit(scope.row)" v-if="!disableEditButton"></cs-button-edit>
            <cs-button-delete @click="remove(scope.row)" v-if="!disableDeleteButton"></cs-button-delete>
            <slot name="table_column_button" :row="scope.row" :index="scope.$index"></slot>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 下部分页标签 -->
    <cs-table-pagination
      v-if="!disablePagination"
      :currentPage="currentPage"
      :pageSize="currentPageSize"
      :pageSizes="pageSizes"
      :total="total"
      @change="handlePageOrSizeChange"
    ></cs-table-pagination>

    <!-- 添加/编辑侧滑框 -->
    <cs-sideslip ref="sideslip" :size="saveSideslipSize" :title="dialogTitle" :before-close="closeSideslip">
      <cs-form
        ref="csForm"
        :size="formSize"
        :model="formData"
        :label-width="formLabelWidth"
        label-position="rightF"
        style="padding-right: 20px"
      >
        <slot name="sideslip_form" :formData="formData"></slot>
      </cs-form>

      <template slot="button">
        <slot name="sideslip_button"></slot>
        <cs-button-save v-if="!disableSideslipAddButton" @click="save(formData)" :loading="loading"></cs-button-save>
      </template>
    </cs-sideslip>

    <!-- 查看页面侧滑框 -->
    <cs-sideslip ref="viewSideslip" :size="viewSideslipSize" :title="dialogTitle" wrapperClosable>
      <slot name="sideslip_view" :viewData="formData"></slot>

      <template slot="button">
        <slot name="sideslip_view_button"></slot>
      </template>
    </cs-sideslip>

    <!-- <cs-sideslip ref="sideslip" :title="dialogTitle" wrapperClosable @change="searchMethod">
      <cs-search></cs-search>
    </cs-sideslip>-->
  </div>
</template>
<script>
import CsButton from '../Button/Default'
import CsButtonSearch from '../Button/Search'
import CsTablePagination from './components/Pagination'
import CsSideslip from '../Sideslip'
import CsSearch from './components/Search'

import Request from '../../../lib/utils/request'

export default {
  name: 'CsTable',
  props: {
    // 资源控制器对象
    objectController: {
      type: String,
      default: null
    },
    // 视图显示
    viewDisplay: {
      type: Array,
      default: null
    },
    // 操作栏宽度
    operationColumnWidth: {
      type: String,
      default: '120px'
    },
    operationColumnAlign: {
      type: String,
      default: 'left'
    },
    // 查询时传递的url参数
    queryParameters: {
      type: Object,
      default: null
    },
    // 搜索框长度
    searchWidth: {
      type: String,
      default: '250px'
    },
    // 一页多少条
    pageSize: {
      type: Number,
      default: 50
    },
    // 设置一页多少条数组
    pageSizes: {
      type: Array,
      default: () => {
        return [25, 50, 100]
      }
    },
    // 是否在表尾显示合计行
    showSummary: {
      type: Boolean,
      default: false
    },
    // 自定义的合计计算方法
    summaryMethod: {
      default: null
    },
    // -----------------------------------------------------------------------------------------------
    // 开启卡片标题
    enableCardHeader: {
      type: Boolean,
      default: false
    },
    // 卡片视图的卡片一行显示多少个
    cardRowCount: {
      type: Number,
      default: 4
    },
    // -----------------------------------------------------------------------------------------------
    // 开启选择列
    enableSelectionColumn: {
      type: Boolean,
      default: false
    },
    // 开启行号列
    enableLinenoColumn: {
      type: Boolean,
      default: false
    },
    // 开启添加/编辑后整体刷新
    enableRefresh: {
      type: Boolean,
      default: false
    },
    // 关闭关键字搜索框
    disableKeywordSearch: {
      type: Boolean,
      default: false
    },
    // 关闭操作列
    disableOperationColumn: {
      type: Boolean,
      default: false
    },
    // 禁用表格分页
    disablePagination: {
      type: Boolean,
      default: false
    },
    // 禁用刷新按钮
    disableRefresh: {
      type: Boolean,
      default: false
    },
    // 禁用表格自适应
    disableAdaptive: {
      type: Boolean,
      default: false
    },
    // 表格高度（禁用表格分页才能使用）
    height: {
      default: null
    },
    // 表格大小
    size: {
      default: 'mini'
    },
    // 表格边框
    border: {
      type: Boolean,
      default: false
    },
    // 行数据的 Key
    rowKey: {
      default: null
    },
    // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
    defaultExpandAll: {
      type: Boolean,
      default: true
    },
    // 渲染嵌套数据的配置选项
    treeProps: {
      type: Object,
      default: { hasChildren: 'HasChildren', children: 'Children' }
    },
    // 合并行或列的计算方法
    spanMethod: {
      default: null
    },
    // -----------------------------------------------------------------------------------------------
    // 禁用自带添加按钮
    disableAddButton: {
      type: Boolean,
      default: false
    },
    // 禁用自带编辑按钮
    disableEditButton: {
      type: Boolean,
      default: false
    },
    // 禁用自带删除按钮
    disableDeleteButton: {
      type: Boolean,
      default: false
    },
    // 禁用顶部搜索、功能按钮
    disableHeadBar: {
      type: Boolean,
      default: false
    },
    // 启用自带导出按钮组
    enableExportButtons: {
      type: Boolean,
      default: false
    },
    // 导出规则
    exportRules: {
      type: Object,
      default: null
    },
    // -----------------------------------------------------------------------------------------------
    // 高级搜索规则
    advancedSearchRules: {
      type: Array,
      default: null
    },
    // 关键字搜索规则
    keywordSearchRules: {
      type: Array,
      default: null
    },
    // 关键字搜索占位文字
    keywordSearchPlaceholder: {
      type: String,
      default: ''
    },
    // -----------------------------------------------------------------------------------------------
    // 添加/编辑侧滑框大小
    saveSideslipSize: {
      type: String,
      default: 'mini'
    },
    // 查看侧滑框大小
    viewSideslipSize: {
      type: String,
      default: 'mini'
    },
    // 禁用查看侧滑框
    disableViewSideslip: {
      type: Boolean,
      default: false
    },
    // 禁用自带的侧滑保存按钮
    disableSideslipAddButton: {
      type: Boolean,
      default: false
    },
    // -----------------------------------------------------------------------------------------------
    // 表单文字宽度
    formLabelWidth: {
      type: String,
      default: '80px'
    },
    // 表单内部组件大小
    formSize: {
      type: String,
      default: 'mini'
    },
    // 添加/编辑主键字段关键字
    formKey: {
      type: String,
      default: 'Id'
    },
    // 设置表格多选后通过EventBus传递选中的值的关键字
    eventBusKeySelection: {
      type: String,
      default: 'CsTableMultipleSelection'
    },
    // -----------------------------------------------------------------------------------------------
    // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className
    rowClassName: {
      default: null
    }
  },
  components: {
    CsButton,
    CsButtonSearch,
    CsTablePagination,
    CsSideslip,
    CsSearch
  },
  data() {
    return {
      currentPage: 1,
      currentPageSize: 0,
      total: 0,

      loading: false,
      viewDisplays: [],
      currentViewDisplay: '',
      originalData: [],
      items: [],
      tableData: [],
      multipleSelection: [],

      filter: {
        keywords: ''
      },
      fieldKeywordsArray: [],

      dialogTitle: '',
      dialogData: null,

      // 表单接收对象
      formData: {},

      cardRowCountStyle: ''
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    filter: {
      handler(val) {
        this.initData('filter')
      },
      immediate: false, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    },
    queryParameters: {
      handler(val) {
        this.init()
      },
      immediate: false, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    },
    objectController: {
      handler(val) {
        this.init()
      },
      immediate: true, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    }
  },
  //方法集合
  methods: {
    /** 改变值 */
    change() {
      this.$forceUpdate()
    },

    /** 选中事件 */
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$EventBus.$emit(this.eventBusKeySelection, val)
    },

    /** 表格自带筛选 */
    filterChange(filters) {
      Object.keys(filters).forEach(key => {
        this.filter[key] = filters[key]
      })
      this.initData()
    },

    /** 高级搜索 */
    search() {
      this.dialogTitle = this.$t('common.search')
      this.$refs.sideslip.visible = true
      setTimeout(() => {
        this.$refs.csForm.reset()
      })
    },

    /** 开始搜索 */
    // searchMethod() {
    //   this.$refs.formItem.formData;
    // },

    /** 打开添加侧滑框 */
    openAdd(item) {
      this.dialogTitle = this.$t('common.add')
      this.$refs.sideslip.visible = true
      if (item) {
        this.formData = this.$util.copy(item)
      } else {
        this.formData = {}
      }
      setTimeout(() => {
        this.$refs.csForm.reset()
      })
    },

    /** 打开编辑侧滑框 */
    openEdit(item) {
      this.dialogTitle = this.$t('common.edit')
      this.$refs.sideslip.visible = true
      this.formData = this.$util.copy(item)
      setTimeout(() => {
        this.$refs.csForm.reset()
      })
    },

    /** 导出 */
    exportCommand(flag) {
      let datas = []
      switch (flag) {
        case '1': // 获取所有数据
          datas = this.items
          break
        case '2': // 获取筛选后的数据
          datas = this.tableData
          break
        case '3': // 获取选中的数据
          datas = this.multipleSelection
          break
      }
      if (datas.length == 0) {
        return
      }

      this.$util.exportExcel(datas, this.exportRules)
    },

    /** 组件内打开查看页面 */
    openCurrentView(item) {
      if (this.disableViewSideslip) {
        return
      }
      this.openView(item)
    },

    /** 打开查看侧滑框 */
    openView(item) {
      this.dialogTitle = this.$t('common.view')
      this.$refs.viewSideslip.visible = true
      this.formData = this.$util.copy(item)
    },

    /** 关闭 添加/编辑侧滑框 */
    closeSideslip() {
      this.$refs.csForm.reset()
      this.$refs.sideslip.visible = false
    },

    /** 关闭 查看侧滑框 */
    closeViewSideslip() {
      this.$refs.viewSideslip.visible = false
    },

    /** 保存 */
    save(item) {
      this.$refs.csForm.validate().then(valdid => {
        if (!valdid) {
          return
        }

        let objectController = ''
        let params = {}
        if (this.queryParameters && typeof this.queryParameters == 'object') {
          Object.keys(this.queryParameters).forEach(parameterKey => {
            params[parameterKey] = this.queryParameters[parameterKey]
          })
        }

        // 添加
        this.loading = true
        let loadingInstance = this.$loading({
          lock: true,
          text: '加载中……',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (!item[this.formKey]) {
          objectController = this.objectController
          if (this.objectController.indexOf('api/v2/') > -1) {
            params.action = 'New'
          }
          Request({
            url: objectController,
            params: params,
            data: item,
            method: 'post'
          })
            .then(res => {
              this.loading = false
              loadingInstance.close()
              if (this.enableRefresh) {
                this.init()
              } else {
                this.addItem(res)
              }
              this.$util.info(this.$t('common.addSuccess'))
              this.closeSideslip()
            })
            .catch(() => {
              this.loading = false
              loadingInstance.close()
            })
        }
        // 修改
        else {
          if (this.objectController.indexOf('api/v2/') > -1) {
            objectController = this.objectController
            params.action = 'Update'
            params.id = item[this.formKey]
          } else {
            objectController = `${this.objectController}/${item[this.formKey]}`
          }
          Request({
            url: objectController,
            params: params,
            data: item,
            method: 'put'
          })
            .then(res => {
              this.loading = false
              loadingInstance.close()
              if (this.enableRefresh) {
                this.init()
              } else {
                this.editItem(res)
              }
              this.$util.info(this.$t('common.saveSuccess'))
              this.closeSideslip()
            })
            .catch(() => {
              this.loading = false
              loadingInstance.close()
            })
        }
      })
    },

    /** 删除 */
    remove(item) {
      let loadingInstance = this.$loading({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$confirm(this.$t('common.deleteTips'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.ok'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          let objectController = ''
          let params = {}
          if (this.queryParameters && typeof this.queryParameters == 'object') {
            Object.keys(this.queryParameters).forEach(parameterKey => {
              params[parameterKey] = this.queryParameters[parameterKey]
            })
          }

          if (this.objectController.indexOf('api/v2/') > -1) {
            objectController = this.objectController
            params.action = 'Delete'
            params.id = item[this.formKey]
          } else {
            objectController = `${this.objectController}/${item[this.formKey]}`
          }
          Request({
            url: objectController,
            params: params,
            method: 'delete'
          })
            .then(() => {
              loadingInstance.close()
              this.removeItem(item)
              this.$util.info(this.$t('common.deleteSuccess'))
            })
            .catch(() => {
              loadingInstance.close()
            })
        })
        .catch(() => {
          loadingInstance.close()
        })
    },

    /** 添加方法 */
    addItem(item) {
      this.originalData.unshift(item)
      this.items.unshift(item)
      this.initData('add')
    },

    /** 修改方法 */
    editItem(item) {
      for (let i = 0; i < this.originalData.length; i++) {
        if (this.originalData[i][this.formKey] == item[this.formKey]) {
          this.originalData[i] = this.$util.copy(item)
          break
        }
      }
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i][this.formKey] == item[this.formKey]) {
          this.items[i] = this.$util.copy(item)
          break
        }
      }
      this.initData('edit')
    },

    /** 删除方法 */
    removeItem(item) {
      for (let i = 0; i < this.originalData.length; i++) {
        if (this.originalData[i][this.formKey] == item[this.formKey]) {
          this.originalData.splice(i, 1)
          break
        }
      }
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i][this.formKey] == item[this.formKey]) {
          this.items.splice(i, 1)
          break
        }
      }
      this.initData('delete')
    },

    /** 排序 */
    sortChange(column, prop, order) {
      let data = this.$util.copy(this.originalData)

      let propArgs = column.prop.split('.')
      if (column.order == 'ascending') {
        data.sort((a, b) => {
          let val1 = this.$util.copy(a)
          let val2 = this.$util.copy(b)
          for (let i = 0; i < propArgs.length; i++) {
            if (val1[propArgs[i]]) {
              val1 = val1[propArgs[i]]
            } else {
              val1 = ''
            }
            if (val2[propArgs[i]]) {
              val2 = val2[propArgs[i]]
            } else {
              val2 = ''
            }
          }
          return this.$util.sort(val1, val2)
        })
      } else if (column.order == 'descending') {
        data.sort((a, b) => {
          let val1 = this.$util.copy(a)
          let val2 = this.$util.copy(b)
          for (let i = 0; i < propArgs.length; i++) {
            if (val1[propArgs[i]]) {
              val1 = val1[propArgs[i]]
            } else {
              val1 = ''
            }
            if (val2[propArgs[i]]) {
              val2 = val2[propArgs[i]]
            } else {
              val2 = ''
            }
          }
          return this.$util.sortByDescending(val1, val2)
        })
      }
      this.items = data
      this.initData('sort')
    },

    /**  当前页面或者页面显示数据个数变动 */
    handlePageOrSizeChange({ currentPage, pageSize }) {
      this.currentPage = currentPage
      this.currentPageSize = pageSize
      this.initData('selectPageOrSize')
    },

    /** 筛选 */
    filterItemFunc(item) {
      const filter = this.filter
      let itemFilter = true
      this.$emit('item-filter', item, res => {
        if (res == false) {
          itemFilter = false
        }
      })
      if (!itemFilter) {
        return itemFilter
      }

      Object.keys(filter).forEach(key => {
        // 关键字筛选
        if (key == 'keywords') {
          if (filter[key] && !this.$util.containsObjProperty(item, filter[key], this.fieldKeywordsArray)) {
            itemFilter = false
            return
          }
        }
        // 其他筛选
        else {
          if (filter[key] && filter[key].length && filter[key].indexOf(item[key]) == -1) {
            itemFilter = false
            return
          }
        }
      })
      return itemFilter
    },

    /**
     * 构造数据
     * type: init 初始化、add 添加、edit 编辑、delete 删除、filter 筛选、selectPageOrSize 选择页数或每页大小、sort 排序
     */
    initData(type) {
      // 显示视图
      this.viewDisplays.splice(0, this.viewDisplays.length)
      if (this.viewDisplay && this.viewDisplay.length > 0) {
        this.viewDisplay.forEach(viewDisplay => {
          this.viewDisplays.push(viewDisplay.toLowerCase())

          if (!this.currentViewDisplay) {
            this.currentViewDisplay = viewDisplay.toLowerCase()
          }
        })
      } else {
        this.viewDisplays.push('table')
        this.currentViewDisplay = 'table'
      }

      // 关键字搜索字段
      this.fieldKeywordsArray.splice(0, this.fieldKeywordsArray.length)
      if (this.keywordSearchRules && this.keywordSearchRules.length > 0) {
        this.fieldKeywordsArray = this.$util.copy(this.keywordSearchRules)
      } else {
        if (this.items.length > 0) {
          Object.keys(this.items[0]).forEach(key => {
            if (
              key.toLowerCase() != 'id' &&
              key.toLowerCase() != 'created' &&
              key.toLowerCase() != 'modified' &&
              key.toLowerCase() != 'tenantId'
            ) {
              this.fieldKeywordsArray.push(key)
            }
          })
        }
      }

      // 生成表格数据
      this.tableData = []
      let tableData = []
      for (let i = 0; i < this.items.length; i++) {
        const item = this.$util.copy(this.items[i])

        //如果筛选不通过跳过
        if (!this.filterItemFunc(item)) {
          continue
        }
        tableData.push(item)
      }
      this.total = tableData.length
      // 重置分页到第一页
      if ((type == 'filter' || type == 'sort') && this.currentPage != 1) {
        this.currentPage = 1
      }
      if (this.total < (this.currentPage - 1) * this.currentPageSize && this.currentPage != 1) {
        this.currentPage = 1
      }
      if (this.disablePagination) {
        this.tableData = tableData
      } else {
        this.tableData = tableData.slice(
          (this.currentPage - 1) * this.currentPageSize,
          this.currentPage * this.currentPageSize
        )
      }
      //返回筛选后的数据
      this.$emit('return-table-data', tableData)
      setTimeout(() => {
        if (this.$refs.table) {
          this.$refs.table.doLayout()
          this.$refs.table.bodyWrapper.scrollTop = 0
        }
      })
    },

    init() {
      if (!this.objectController) {
        this.$util.warning('请传入object-controller属性')
        return
      }

      // 卡片视图一行个数样式
      if (this.cardRowCount <= 0) {
        this.$util.warning('请输入有效的卡片视图个数')
        return
      }

      let cardPercentage = []
      for (let i = 0; i < this.cardRowCount; i++) {
        cardPercentage.push('{0}%'.format((100 / this.cardRowCount).toFixed(2)))
      }
      this.cardRowCountStyle = 'grid-template-columns: {0};'.format(cardPercentage.join(' '))
      // 当前第几页、一页多少条
      this.currentPage = 1
      this.currentPageSize = this.pageSize

      let objectController = this.objectController
      let params = {}
      if (this.queryParameters && typeof this.queryParameters == 'object') {
        Object.keys(this.queryParameters).forEach(parameterKey => {
          params[parameterKey] = this.queryParameters[parameterKey]
        })
      }
      if (this.objectController.indexOf('api/v2/') > -1 && !params.action) {
        params.action = 'GetList'
      }
      let loadingInstance = this.$loading({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      Request({
        url: objectController,
        params: params,
        method: 'get'
      })
        .then(res => {
          this.originalData = this.$util.copy(res)
          this.items = this.$util.copy(res)
          this.initData('init')
          loadingInstance.close()
        })
        .catch(error => {
          loadingInstance.close()
        })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
aside {
  height: auto;
  padding: 5px;
  margin: 0px;

  .filter {
    right: 4px;
    float: left;
    padding-left: 5px;
  }

  .button {
    right: 4px;
    float: right;
    white-space: nowrap;
    margin-left: 10px;
  }
}

.grid_list {
  display: grid;
  list-style-type: none;

  .card-content {
    padding-bottom: 30px;
    height: 100%;
  }

  .box-card {
    margin: 7px;
    line-height: 18px;
    position: relative;

    .el-card {
      height: 100%;
    }

    // 列表底部右边
    .bottom-right {
      text-align: right;
      color: #9b9a9d;
      position: absolute;
      bottom: 15px;
      right: 15px;

      i {
        font-size: 20px;
        margin: 0 5px;
        cursor: pointer;
      }
      i:hover {
        color: #8490ff;
      }
    }
  }
}
</style>
