imatrix-ui 2.8.39-dw → 2.8.39-pvtmp

package/packages/super-nine-grid/src/super-nine-grid.vue

@@ -0,0 +1,883 @@
+<template>
+  <div>
+    <search-form
+      v-if="hasLoadedColumns"
+      v-show="showSearch"
+      ref="sf"
+      :columns="columns"
+      :code="code"
+      :url="url"
+      :pagination="pagination"
+      :query="query"
+      :search-param="searchFormContent"
+      :init-search-props="initSearchProps"
+      :grid-id="gridId"
+      @search="search"
+      @reset="resetSearch"
+    />
+    <div class="nine-grid-area">
+      <div :id="gridId" :style="'height:'+ height+'px;overflow-y: auto;overflow-x: hidden;'">
+        <el-row :gutter="20">
+          <el-col v-if="isHasCreate" id="_addCardId_" v-permission="createPermission" :span="6" :offset="1.5">
+            <el-card :body-style="{ padding: '0px' }">
+              <div class="add-screen" @click="add">
+                <span style="color:#6882da"> <em class="el-icon-plus" /> {{ $t('superNineGrid.add') }}</span>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col v-for="(params,index) in gridData" :key="params.id" :span="6" :offset="1.5" class="col-content">
+            <el-card :body-style="{ padding: '0px' }" shadow="hover">
+              <!-- <div @mouseenter="enter(index)" @mouseleave="leave()" @click="clickContent(params)"> -->
+              <div @click="clickContent(params)">
+                <transition name="fade">
+                  <!-- <div v-if="seen && index === current" class="popContainer"> -->
+                  <div class="popContainer">
+                    <div class="else-button" style="background: rgba(0,0,0,0.5); min-height: 20%;">
+                      <!-- <div class="else-button" style="min-height: 20%;"> -->
+                      <slot :name="slotBefore" :params="params" />
+                      <template v-for="button in operations">
+                        <template v-if="isShowButton(params, button)">
+                          <el-tooltip v-if="button.icon" :key="button.name" v-permission="button.permission?button.permission:'true'" class="item" effect="dark" :content="button.name" placement="top">
+                            <!-- <em style="color: black;" :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)" /> -->
+                            <em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)" />
+                          </el-tooltip>
+                          <!-- <em v-else :key="button.name" v-permission="button.permission?button.permission:'true'" style="color: black;" :class="button.name +' icons'" @click.stop="buttonClick(button.event, params)">{{ button.name }} </em> -->
+                          <em v-else :key="button.name" v-permission="button.permission?button.permission:'true'" :class="button.name +' icons'" @click.stop="buttonClick(button.event, params)">{{ button.name }} </em>
+                        </template>
+                      </template>
+                    </div>
+                  </div>
+                </transition>
+                <img v-if="props && props.imageUrl && objectPropValue(params, propCloumns.imageUrl, props.imageUrl)" :src="defaultShowImageAction+objectPropValue(params, propCloumns.imageUrl, props.imageUrl)" alt="加载失败" class="image">
+                <!-- <img v-if="true || (props && props.imageUrl)" :src="defaultShowImageAction+'fa7ae05e-0f0e-4cc0-b24a-69aea4408233'" alt="加载失败" class="image"> -->
+                <div v-else class="image" style="display: table; text-align: center;">
+                  <div v-if="props && props.content" style="display: table-cell; vertical-align: middle">
+                    {{ getPropValue('content', params) }}
+                  </div>
+                  <div v-else-if="props && props.title" style="display: table-cell; vertical-align: middle">
+                    {{ getPropValue('title', params) }}
+                  </div>
+                </div>
+              </div>
+              <el-divider />
+              <div style="padding: 10px 10px 10px 10px;">
+                <div class="bottom clearfix">
+                  <time class="name">
+                    <span v-if="props && props.title">
+                      <el-checkbox v-if="multiple" style="width: 100%" :value="selectionModels['select'+params.id]" :true-label="params.id" :false-label="'false-'+params.id" :title="getPropValue('title', params)" @change="changeChecked($event, index)">
+                        <!-- {{ getPropValue('title', params) }} -->
+                        <span :style="getTitleStyle(params)"> {{ getPropValue('title', params) }}</span>
+                      </el-checkbox>
+                      <el-radio v-else-if="isShowRadio" v-model="currentId" style="width: 100%" :label="params.id" :title="getPropValue('title', params)" @change="changeSelectWhenRadio($event, index)">
+                        <!-- {{ getPropValue('title', params) }} -->
+                        <span :style="getTitleStyle(params)"> {{ getPropValue('title', params) }}</span>
+                      </el-radio>
+                      <span v-else :style="getTitleStyle(params)" :title="getPropValue('title', params)"> {{ getPropValue('title', params) }}</span>
+                    </span>
+                    <span v-else-if="props && props.content">
+                      <el-checkbox v-if="multiple" style="width: 100%" :value="selectionModels['select'+params.id]" :true-label="params.id" :false-label="'false-'+params.id" :title="getPropValue('content', params)" @change="changeChecked($event, index)">{{ getPropValue('content', params) }}</el-checkbox>
+                      <el-radio v-else-if="isShowRadio" v-model="currentId" style="width: 100%" :label="params.id" :title="getPropValue('content', params)" @change="changeSelectWhenRadio($event, index)">{{ getPropValue('content', params) }}</el-radio>
+                      <span v-else style="width: 100%" :title="getPropValue('content', params)"> {{ getPropValue('content', params) }}</span>
+                    </span>
+                    <span v-else>
+                      <el-checkbox v-if="multiple" :value="selectionModels['select'+params.id]" :true-label="params.id" :false-label="'false-'+params.id" @change="changeChecked($event, index)">{{ index + 1 }}</el-checkbox>
+                      <el-radio v-else-if="isShowRadio" v-model="currentId" :label="params.id" @change="changeSelectWhenRadio($event, index)">{{ index + 1 }}</el-radio>
+                      <span v-else> {{ index + 1 }}</span>
+                    </span>
+                  </time>
+                  <time v-if="props && props.subTitle" class="state">
+                    <span :title="getPropValue('subTitle', params)" style="width: 100%">{{ getPropValue('subTitle', params) }}</span>
+                  </time>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <el-pagination
+        v-if="pagination"
+        :current-page.sync="currentPage"
+        :page-sizes="pagination.pageSizes"
+        :page-size="pagination.pageSize"
+        :layout="pagination.layout"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.nine-grid-area {
+  padding:10px;
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+  .name {
+    font-size: 12px;
+    color: #555;
+    float: left;
+    width: 80%;
+    text-align: left;
+  }
+  .bottom {
+    // margin-top: 13px;
+    line-height: 13px;
+    // background: aquamarine;
+  }
+  .state {
+    font-size: 12px;
+    margin-top: 1.5px;
+    float: right;
+    line-height: 1;
+    display: flex;
+    align-items: right;
+    color: #999;;
+    width: 20%;
+    text-align: right;
+  }
+  .image {
+    width: 100%;
+    display: block;
+    height: 200px;
+  }
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  .clearfix:after {
+      clear: both
+  }
+  .input-with-select  {
+    // background-color: #fff;
+    width: 200px;
+    float: right;
+  }
+  .popContainer{
+    position: absolute;
+    width: 23.15%;
+    display: block;
+    height: 200px;
+    // background: rgba(0,0,0,0.5);
+    text-align: right;
+  }
+  .fade-enter-active, .fade-leave-active {
+      transition: opacity 0.5s
+  }
+  .fade-enter, .fade-leave-to {
+      opacity: 0
+  }
+  .icons{
+    color:#fff;
+    margin: 10px 10px 0px 0px;
+    cursor: pointer;
+  }
+  .release-status{
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 100%;
+  }
+  .add-screen{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    height: 230px;
+    // background-color: #fff;
+    // border: 1px solid #7693f5;
+    // box-shadow: 0 2px 8px 0 rgba(104,130,218,.4);
+    font-size: 12px;
+  }
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+}
+
+</style>
+
+<script>
+import customFormatter from './custom-formatter'
+import SearchForm from './search-form'
+import { getGridParams, getTableHeight, isHasOptionFunction } from './utils'
+import store from './store'
+import superGridService from './super-grid-service'
+import apis from './apis'
+import Sortable from 'sortablejs'
+import { addDynamicProp } from './utils'
+import Vue from 'vue'
+export default {
+  name: 'SuperNineGrid',
+  components: {
+    SearchForm
+  },
+  props: {
+    code: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    publishVersion: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    let mergeFields = []
+    if (this.options && this.options.mergeFields && this.options.mergeFields !== '') {
+      mergeFields = this.options.mergeFields.split(',')
+    }
+    const defaultShowImageAction = Vue.prototype.baseAPI + '/component/super-form/show-image?serverPath='
+    const gridId = this.options && this.options.id ? this.options.id : '_nineGrid'
+    const storeId = this.code + '~' + gridId
+    const isShowRadio = this.options && this.options.showRadio !== undefined ? this.options.showRadio : false
+    return {
+      isLoading: false,
+      currentPage: 1,
+      showColumnConfig: false,
+      basicInfo: {
+        summary: 'no'
+      },
+      columns: [],
+      pagination: null,
+      query: null,
+      lineEdit: null,
+      gridData: [],
+      sortInfo: null,
+      pageSize: null,
+      showSearch: false,
+      height: null,
+      isSql: false, // 是否是sql查询
+      hasLoadData: false,
+      mergeFields,
+      hasLoadedColumns: false, // 是否已经加载了列配置
+      seen: false,
+      current: null,
+      isHasCreate: true, // 是否需要新建按钮
+      screenBaseUrl: null,
+      props: null, // 属性配置
+      operations: [], // 指向格子时出现的操作按钮集合
+      propCloumns: null, // 属性字段配置详细信息
+      multiple: false, // 是否需要多选
+      createPermission: 'true', // 新建权限编码，默认是有权限的
+      urlToSaveOrder: null, // 拖动格子后台保存接口路径
+      selections: [], // 选中的记录集合
+      selectionIds: [], // 选中的记录id集合
+      selectionModels: {}, // 选中的记录对象
+      searchFormContent: null,
+      initSearchProps: [], // 初始查询的字段属性名集合
+      defaultShowImageAction, // 显示图片的路径
+      gridId,
+      storeId,
+      currentId: null, // 当前点击的记录id
+      isShowRadio, // 单选时是否显示单选按钮
+      titleStyle: null, // 标题的样式对象，格式为：{ color: 'green', fontWeight: 'bold'}
+      slotBefore: 'before'
+    }
+  },
+  computed: {
+  },
+  provide() {
+    return {
+    }
+  },
+  created() {
+    store.set(this.code + '~' + this.gridId, getGridParams())
+    store.set('_nine_list_code', this.code + '~' + this.gridId)
+    this.initSetting()
+    this.initialize()
+    // this.showDemo()
+  },
+  mounted() {
+    this.$watch('showSearch', function(newVal, oldVal) {
+      this.$nextTick(() => {
+        let tableHeight = getTableHeight(newVal, this.$refs.sf)
+        const newHeight = this.resizeHeight()
+        if (newHeight) {
+          tableHeight = newHeight
+        }
+        this.height = tableHeight
+      })
+    }, {
+      immediate: true,
+      deep: true
+    })
+
+    this.$watch('hasLoadData', function(newVal, oldVal) {
+      if (newVal === true) {
+        this.$nextTick(() => {
+          // this.rowDrop()
+          const gridParams = store.get(this.storeId)
+          if (isHasOptionFunction('gridComplete', this.storeId)) {
+            gridParams.options.gridComplete.call(this, { gridData: this.gridData, columns: gridParams.columns, superGrid: this.$refs.superGrid })
+          }
+          const newHeight = this.resizeHeight()
+          if (newHeight) {
+            this.height = newHeight
+          }
+        })
+      }
+    }, {
+      immediate: true,
+      deep: true
+    })
+  },
+  methods: {
+    ...superGridService,
+    ...apis,
+    ...customFormatter,
+    getTitleStyle(entity) {
+      // 九宫格的标题自定义样式
+      if (this.options && this.options.titleStyle) {
+        return this.options.titleStyle.call(this, entity)
+      }
+      return { width: '100%' }
+    },
+    // 获得属性值
+    getPropValue(type, entity) {
+      let value = ''
+      const gridParams = store.get(this.storeId)
+      if (type === 'content') {
+        let content = ''
+        if (isHasOptionFunction('setContent', this.storeId)) {
+          content = gridParams.options.getContent.call(this, entity)
+        }
+        if (content === undefined || content === '') {
+          if (this.props && this.props.content) {
+            content = this.objectPropValue(entity, this.propCloumns.content, this.props.content)
+          } else if (this.props && this.props.title) {
+            content = this.objectPropValue(entity, this.propCloumns.title, this.props.title)
+          }
+        }
+        value = content
+      } else if (type === 'title') {
+        let content = ''
+        if (isHasOptionFunction('setTitle', this.storeId)) {
+          content = gridParams.options.setTitle.call(this, entity)
+        }
+        if (content === undefined || content === '') {
+          if (this.props && this.props.title) {
+            content = this.objectPropValue(entity, this.propCloumns.title, this.props.title)
+          } else if (this.props && this.props.content) {
+            content = this.objectPropValue(entity, this.propCloumns.content, this.props.content)
+          }
+        }
+        value = content
+      } else if (type === 'subTitle') {
+        let content = ''
+        if (isHasOptionFunction('setSubTitle', this.storeId)) {
+          content = gridParams.options.getSubTitle.call(this, entity)
+        }
+        if (content === undefined || content === '') {
+          if (this.props && this.props.subTitle) {
+            content = this.objectPropValue(entity, this.propCloumns.subTitle, this.props.subTitle)
+          }
+        }
+        value = content
+      }
+      if (value === undefined) {
+        value = ''
+      }
+      return value
+    },
+    resizeHeight() {
+      const gridParams = store.get(this.storeId)
+      if (isHasOptionFunction('resizeHeight', this.storeId)) {
+        let searchHeight = 0
+        if (this.showSearch === true) {
+          if (this.$refs.sf) {
+            // 获得查询区高度
+            searchHeight = this.$refs.sf.$el.offsetHeight
+          }
+        }
+        return gridParams.options.resizeHeight.call(this, { code: this.code, height: this.height, searchHeight: searchHeight })
+      }
+    },
+    enter(index) {
+      this.seen = true
+      this.current = index
+    },
+    leave() {
+      this.seen = false
+      this.current = null
+    },
+    initSetting() {
+      const gridParams = store.get(this.storeId)
+      if (typeof (this.options) !== 'undefined') {
+        Object.assign(gridParams.options, this.options)
+      } else {
+        gridParams.options = {}
+      }
+      if (this.options && typeof (this.options.isHasCreate) !== 'undefined') {
+        this.isHasCreate = this.options.isHasCreate
+      }
+      if (this.options && typeof (this.options.props) !== 'undefined') {
+        this.props = this.options.props
+      }
+      if (this.options && typeof (this.options.operations) !== 'undefined') {
+        this.operations = this.options.operations
+      }
+      if (this.options && typeof (this.options.createPermission) !== 'undefined') {
+        this.createPermission = this.options.createPermission
+      }
+      if (this.options && typeof (this.options.multiple) !== 'undefined') {
+        this.multiple = this.options.multiple
+      }
+    },
+    // 获得各属性对应的字段配置
+    getPropColumns() {
+      if (this.columns && this.columns.length > 0) {
+        // imageUrl:{column}, content: {column}, title: {}, subTitle:{}
+        this.propCloumns = {}
+        this.columns.forEach(column => {
+          if (this.props.imageUrl && this.props.imageUrl === column.prop) {
+            this.propCloumns.imageUrl = column
+          }
+          if (this.props.content && this.props.content === column.prop) {
+            this.propCloumns.content = column
+          }
+          if (this.props.title && this.props.title === column.prop) {
+            this.propCloumns.title = column
+          }
+          if (this.props.subTitle && this.props.subTitle === column.prop) {
+            this.propCloumns.subTitle = column
+          }
+        })
+      }
+    },
+    fetchData(searchParam, isSearch) {
+      return new Promise((resolve, reject) => {
+        // 获得各属性对应的字段配置
+        this.getPropColumns()
+        this.isLoading = true
+        this.hasLoadData = false
+        if (isSearch === undefined || isSearch === false) {
+          // 如果不是查询时才需要从缓存中获得结果
+          // 如果是刷新当前列表，则需要获得缓存中的sessionStorage
+          const isRefreshList = sessionStorage.getItem('refreshList-' + this.storeId)
+          // console.log('fetchData--isRefreshList--', isRefreshList)
+          if (isRefreshList !== undefined && isRefreshList === 'true') {
+            const searchParamJson = sessionStorage.getItem('searchParam-' + this.storeId)
+            // console.log('fetchData--searchParamJson--', searchParamJson)
+            // console.log('fetchData--pagination--', this.pagination)
+            if (searchParamJson !== undefined && searchParamJson !== null && searchParamJson !== '') {
+              searchParam = JSON.parse(searchParamJson)
+              const pagination = searchParam.pagination
+              if (pagination) {
+                this.currentPage = pagination.currentPage
+                this.pagination.pageSize = pagination.pageSize
+                this.pagination.showTotal = pagination.showTotal
+              }
+              this.getInitSearchForm(searchParam.searchForm)
+              // this.searchFormContent = searchParam.searchForm
+            }
+          }
+        }
+        sessionStorage.removeItem('refreshList-' + this.storeId)
+        if (searchParam === undefined) {
+          searchParam = this.getSearchParam()
+        }
+        const gridParams = store.get(this.storeId)
+        let param = searchParam
+        if (gridParams.options.extraParam) {
+          param = {
+            searchParam: searchParam
+          }
+          if (gridParams.options.extraParam) {
+            for (const paramName in gridParams.options.extraParam) {
+              param[paramName] = gridParams.options.extraParam[paramName]
+            }
+          }
+        }
+        // 导出需要这两个参数
+        gridParams.searchParam = searchParam
+        gridParams.url = this.url
+        const requestUrl = this.url
+        // 缓存查询条件及当前页数
+        sessionStorage.setItem('searchParam-' + this.storeId, JSON.stringify(param))
+        this.$http.post(requestUrl, param).then(data => {
+          // 对数据做序列化，比如：处理xss攻击
+          if (isHasOptionFunction('gridDataLoaded', this.storeId)) {
+            const gridData = gridParams.options.gridDataLoaded.call(this, { gridData: data.data, columns: gridParams.columns })
+            if (gridData) {
+              this.gridData = gridData
+            } else {
+              this.gridData = data.data
+            }
+          } else {
+            this.gridData = data.data
+          }
+          if (!this.gridData) {
+            this.gridData = []
+          }
+
+          if (this.pagination !== null) {
+            this.pagination.total = data.total
+          }
+
+          gridParams.gridData = this.gridData
+          // 完成深拷贝，复制一份对象，行编辑时使用
+          gridParams.orgGridData = [].concat(JSON.parse(JSON.stringify(this.gridData)))
+
+          gridParams.pagination = this.pagination
+          gridParams.loaded = true
+          this.hasLoadData = true
+          resolve()
+        }).catch(error => {
+          if (isHasOptionFunction('loadError', this.storeId)) {
+            gridParams.options.loadError.call(this, this.code, error)
+          }
+          reject(error)
+        })
+      })
+    },
+    // 获得初始查询条件对象
+    getInitSearchForm(searchFormArr) {
+      const gridParams = store.get(this.storeId)
+      if (searchFormArr && searchFormArr.length > 0) {
+        this.searchFormContent = {}
+        searchFormArr.forEach(item => {
+          // 获得的是"isDeleted"
+          let prop = item.propName
+          // 获得的是“deleted”
+          const columnProp = item.columnProp
+          const dataType = item.dataType
+          if (dataType && dataType === 'BOOLEAN') {
+            prop = columnProp
+          }
+          this.initSearchProps.push(prop)
+          const propValue = item.propValue
+          if (prop.indexOf('.') > 0) {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(this.searchFormContent, prop, propValue)
+          } else {
+            this.searchFormContent[prop] = propValue
+          }
+        })
+        gridParams.searchForm = searchFormArr
+        // 调用查询api方法，该方法中调用了@showSearch方法，用于控制“查询”按钮改名为“取消查询”
+        this.showSearchForm()
+      } else {
+        gridParams.searchForm = null
+      }
+    },
+    showDemo() {
+      this.isLoading = true
+      this.$http.get(this.url).then(data => {
+        Object.assign(this, data)
+        const gridParams = store.get(this.storeId)
+
+        gridParams.listCode = this.code
+
+        gridParams.columns = this.columns
+        if (gridParams.columns && this.options.dynamicColumns) {
+          for (var i = 0; i < this.options.dynamicColumns.length; i++) {
+            this.options.dynamicColumns[i].dynamic = true
+            gridParams.columns.push(this.options.dynamicColumns[i])
+          }
+        }
+        gridParams.lineEdit = this.lineEdit
+        gridParams.basicInfo = this.basicInfo
+        gridParams.pagination = this.pagination
+        gridParams.query = this.query
+
+        this.gridData = data.gridData
+        // 对数据做序列化，比如：处理xss攻击
+        if (isHasOptionFunction('gridDataLoaded', this.storeId)) {
+          const gridData = gridParams.options.gridDataLoaded.call(this, data.gridData)
+          if (gridData) {
+            this.gridData = gridData
+          } else {
+            this.gridData = data.gridData
+          }
+        } else {
+          this.gridData = data.gridData
+        }
+
+        if (this.pagination != null) {
+          this.pagination.total = data.total
+        }
+        if (!this.gridData) {
+          this.gridData = []
+        }
+        gridParams.gridData = this.gridData
+        // 完成深拷贝，复制一份对象，行编辑时使用
+        gridParams.orgGridData = [].concat(JSON.parse(JSON.stringify(this.gridData)))
+        gridParams.pagination = this.pagination
+
+        if (isHasOptionFunction('gridComplete', this.storeId)) {
+          gridParams.options.gridComplete.call(this, this.gridData, gridParams.columns)
+        }
+      }).catch(error => {
+        if (isHasOptionFunction('loadError', this.storeId)) {
+          const gridParams = store.get(this.storeId)
+          gridParams.options.loadError.call(this, this.code, error)
+        }
+      })
+    },
+    search(searchForm) {
+      const vm = this
+      return new Promise((resolve, reject) => {
+        const gridParams = store.get(vm.storeId)
+        if (typeof (searchForm) !== 'undefined' && searchForm !== null) {
+          gridParams.searchForm = searchForm
+        } else {
+          gridParams.searchForm = null
+        }
+
+        vm.fetchData(vm.getSearchParam(), true).then(data => {
+          if (gridParams.options !== undefined && gridParams.options.isHiddenSearchForm !== undefined && gridParams.options.isHiddenSearchForm === true) {
+            // 查询时，是否隐藏查询区域，默认是不隐藏查询区域
+            vm.showSearch = false
+            vm.$emit('cancel-search')
+          }
+          if (vm.$refs.sf) {
+            vm.$refs.sf.loading = false
+          }
+          resolve(data)
+        }).catch((error) => {
+          if (vm.$refs.sf) {
+            vm.$refs.sf.loading = false
+          }
+          reject(error)
+        })
+      })
+    },
+    getSearchParam() {
+      const searchParam = {
+        'code': this.code
+      }
+      const gridParams = store.get(this.storeId)
+      if (this.pagination !== null) {
+        const pagination = {
+          'currentPage': this.currentPage,
+          'pageSize': this.pagination.pageSize,
+          'showTotal': this.pagination.showTotal
+        }
+        if (this.pageSize !== null) {
+          // 表示更改了每页显示的数据条数
+          pagination.pageSize = this.pageSize
+        }
+        searchParam.pagination = pagination
+      }
+      // 排序信息
+      if (this.sortInfo !== null) {
+        // 表示更改了排序信息
+        searchParam.sorts = this.sortInfo
+      }
+      if (this.mergeFields && this.mergeFields.length > 0) {
+        if (!searchParam.sorts) {
+          searchParam.sorts = []
+        }
+        const mergeFieldsArr = []
+        for (const mergeField of this.mergeFields) {
+          let flag = true
+          for (const so of searchParam.sorts) {
+            if (so.prop === mergeField) {
+              flag = false
+              break
+            }
+          }
+          if (flag) {
+            mergeFieldsArr.push({
+              'prop': mergeField,
+              'order': 'ascending'
+            })
+          }
+        }
+        mergeFieldsArr.push(...searchParam.sorts)
+        searchParam.sorts = mergeFieldsArr
+      }
+      // 是否有初始过滤条件
+      if (gridParams.options && typeof (gridParams.options.initSearchForm) !== 'undefined') {
+        searchParam.initSearchForm = gridParams.options.initSearchForm
+      }
+      if (typeof (gridParams.searchForm) !== 'undefined') {
+        searchParam.searchForm = gridParams.searchForm
+      } else {
+        searchParam.searchForm = []
+      }
+      return searchParam
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.fetchData(this.getSearchParam())
+    },
+    handleCurrentChange(val) {
+      this.fetchData(this.getSearchParam())
+    },
+    handleSortChange({ column, prop, order }) {
+      if (prop !== null) {
+        // 当点击第3次时，prop会是空，表示清空排序字段，还原原顺序
+        this.sortInfo = [{
+          'prop': prop,
+          'order': order
+        }]
+      } else {
+        this.sortInfo = null
+      }
+      this.fetchData(this.getSearchParam())
+      this.$emit('sort-change', { column, prop, order })
+    },
+    resetSearch() {
+      this.search(null, false)
+    },
+    // 新建事件
+    add() {
+      this.$emit('add')
+    },
+    // 操作按钮的点击事件
+    buttonClick(event, data) {
+      if (event) {
+        if (typeof (event) === 'function') {
+          event.call(this, data)
+        } else {
+          this.$emit(event, data)
+        }
+      }
+    },
+    // 点击内容区域的事件
+    clickContent(data) {
+      this.changeSelect(data)
+      this.$emit('click', data)
+    },
+    // 格子拖拽
+    rowDrop() {
+      if (this.urlToSaveOrder) {
+        let urlToSaveOrder = this.urlToSaveOrder
+        if (urlToSaveOrder.indexOf('http:') < 0 || urlToSaveOrder.indexOf('https:') < 0) {
+          // 表示是相对路径，需要拼接全路径
+          let baseURL = Vue.prototype.baseURL
+          if (baseURL.lastIndexOf('/') === baseURL.length - 1) {
+            // 表示以斜线结尾
+            // 去掉斜线
+            baseURL = baseURL.substring(0, baseURL.length - 1)
+          }
+          if (urlToSaveOrder.indexOf('/') > 0) {
+            // 表示不是以斜线开头，需要开头加“/”
+            urlToSaveOrder = '/' + urlToSaveOrder
+          }
+          urlToSaveOrder = baseURL + urlToSaveOrder
+        }
+        const tbody = document.querySelector('#' + this.gridId + ' .el-row')
+        if (tbody != null) {
+          const vm = this
+          Sortable.create(tbody, {
+            draggable: '.col-content',
+            onEnd({ newIndex, oldIndex }) {
+              const addCardId = document.querySelector('#' + vm.gridId + ' #_addCardId_')
+              if (addCardId != null) {
+                // 表示存在新建区域，则序号需要减1
+                if (oldIndex > 0) {
+                  oldIndex = oldIndex - 1
+                }
+                if (newIndex > 0) {
+                  newIndex = newIndex - 1
+                }
+              }
+              const params = {
+                'oldIndex': oldIndex,
+                'newIndex': newIndex,
+                'gridData': vm.gridData
+              }
+              vm.$http.post(urlToSaveOrder, params).then(data => {
+                const currRow = vm.gridData.splice(oldIndex, 1)[0]
+                vm.gridData.splice(newIndex, 0, currRow)
+                vm.refresh().then(() => {
+                  vm.$emit('afterDrag', params)
+                })
+              })
+            }
+          })
+        }
+      }
+    },
+    // 多选按钮的change事件
+    changeChecked(label, index) {
+      const entity = this.gridData[index]
+      if ((label + '').indexOf('false-') >= 0) {
+        // 表示取消勾选记录
+        this.unselect(entity)
+      } else {
+        // 表示勾选记录
+        this.select(entity)
+      }
+    },
+    unselect(entity) {
+      const id = entity.id
+      const index = this.selectionIds.indexOf(id)
+      if (index > -1) {
+        this.selections.splice(index, 1)
+        this.selectionIds.splice(index, 1)
+      }
+      this.$emit('unselect', entity, this.selections)
+      this.$set(this.selectionModels, 'select' + id, 'false-' + id)
+      // console.log('unselect---this.selections=', this.selections)
+    },
+    select(entity) {
+      const id = entity.id
+      if (this.selectionIds.indexOf(id) < 0) {
+        this.$set(this.selectionIds, this.selectionIds.length, id)
+        this.$set(this.selections, this.selections.length, entity)
+      }
+      this.$emit('select', entity, this.selections)
+      this.$set(this.selectionModels, 'select' + id, id)
+      // console.log('select---this.selections=', this.selections)
+    },
+    // 单选按钮的change事件
+    changeSelectWhenRadio(label, index) {
+      const entity = this.gridData[index]
+      this.selectionIds = []
+      this.selections = []
+      this.selectionModels = {}
+      this.select(entity)
+    },
+    changeSelect(data) {
+      const id = data.id
+      if (this.multiple === true) {
+        // 多选时
+        if (this.selectionIds && this.selectionIds.indexOf(id) >= 0) {
+          // 表示需要取消选中
+          this.unselect(data)
+        } else {
+          // 表示需要选中
+          this.select(data)
+        }
+      } else {
+        // 单选时
+        this.currentId = id
+        this.selectionIds = []
+        this.selections = []
+        this.selectionModels = {}
+        this.select(data)
+      }
+    },
+    isShowButton(entity, button) {
+      const val = this.isShowButtonFun(entity, button)
+      if (val === undefined) {
+        return true
+      }
+      return val
+    }
+  }
+}
+</script>