imatrix-ui 0.2.0-up → 0.2.2-up

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

@@ -1,1164 +1,1164 @@
-<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="24">
-          <el-col
-            v-if="isHasCreate"
-            id="_addCardId_"
-            v-permission="createPermission"
-            :span="colSpan"
-          >
-            <el-card
-              :body-style="{ padding: '0px' }"
-              style="
-                border-radius: 4px;
-                background: #ffffff;
-                border: 1px solid #e5e8ef;
-              "
-            >
-              <div class="add-screen" @click="add">
-                <em class="el-icon-plus" />
-                <span style="margin-top: 7px">
-                  {{ $t('superNineGrid.add') }}</span
-                >
-              </div>
-            </el-card>
-          </el-col>
-          <el-col
-            v-for="(params, index) in gridData"
-            :key="params.id"
-            :span="colSpan"
-          >
-            <el-card
-              :body-style="{ padding: '0px' }"
-              :style="{
-                border:
-                  selectionIds.indexOf(params.id) > -1
-                    ? '1px solid #005EBA'
-                    : '',
-              }"
-              shadow="hover"
-            >
-              <div
-                style="height: 160px"
-                @mouseenter="enter(index)"
-                @mouseleave="leave()"
-                @click="clickContent(params)"
-              >
-                <!-- <transition name="fade">
-                        <div v-if="seen && index === current" class="popContainer">
-                          <div class="else-button">
-                            <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 :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'" :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="padding: 20px; text-align: center;"> -->
-                <div
-                  class="image"
-                  style="padding: 15px; box-sizing: border-box"
-                >
-                  <div>
-                    <el-tooltip
-                      effect="dark"
-                      :content="'系统编码：' + params.code"
-                      placement="top-start"
-                    >
-                      <div
-                        v-if="props && props.content"
-                        style="display: inline-block"
-                      >
-                        {{
-                          getPropValue('content', params) +
-                          getLength(params.code)
-                        }}
-                      </div>
-                      <div
-                        v-else-if="props && props.title"
-                        style="display: inline-block"
-                      >
-                        {{
-                          getPropValue('title', params) + getLength(params.code)
-                        }}
-                      </div>
-                    </el-tooltip>
-                    <div
-                      v-if="showEnableButton(params)"
-                      style="
-                        margin-left: 2px;
-                        color: #00b42a;
-                        background-color: #e8ffea;
-                        width: 68px;
-                        text-align: center;
-                        display: inline-block;
-                      "
-                    >
-                      <em class="el-icon-success" />
-                      <span
-                        :title="getPropValue('subTitle', params)"
-                        style="margin-left: 4px"
-                        >{{ getPropValue('subTitle', params) }}</span
-                      >
-                    </div>
-                  </div>
-                  <div class="button-style">
-                    操作
-                    <template v-for="button in operations">
-                      <template v-if="isShowButton(params, button)">
-                        <el-tooltip
-                          v-if="button.icon"
-                          v-permission="
-                            button.permission ? button.permission : 'true'
-                          "
-                          :content="button.name"
-                          class="item"
-                          effect="dark"
-                          placement="top"
-                        >
-                          <em
-                            :class="button.icon + ' icons'"
-                            @click.stop="buttonClick(button.event, params)"
-                          />
-                        </el-tooltip>
-                        <em
-                          v-else
-                          v-permission="
-                            button.permission ? button.permission : 'true'
-                          "
-                          :class="button.name + ' icons'"
-                          @click.stop="buttonClick(button.event, params)"
-                          >{{ button.name }}
-                        </em>
-                      </template>
-                    </template>
-                  </div>
-                  <div
-                    v-if="isShowEnableState"
-                    style="float: right; margin-top: 28px"
-                  >
-                    <el-button
-                      v-if="showEnableButton(params)"
-                      size="mini"
-                      @click.stop="changeState(params)"
-                    >
-                      禁用
-                    </el-button>
-                    <el-button
-                      v-else
-                      size="mini"
-                      type="primary"
-                      @click.stop="changeState(params)"
-                    >
-                      启用
-                    </el-button>
-                  </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" :value="selectionModels['select'+params.id]" :true-label="params.id" :false-label="'false-'+params.id" :title="getPropValue('title', params)" style="width: 100%" @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" :label="params.id" :title="getPropValue('title', params)" style="width: 100%" @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" :value="selectionModels['select'+params.id]" :true-label="params.id" :false-label="'false-'+params.id" :title="getPropValue('content', params)" style="width: 100%" @change="changeChecked($event, index)">{{ getPropValue('content', params) }}</el-checkbox>
-                            <el-radio v-else-if="isShowRadio" v-model="currentId" :label="params.id" :title="getPropValue('content', params)" style="width: 100%" @change="changeSelectWhenRadio($event, index)">{{ getPropValue('content', params) }}</el-radio>
-                            <span v-else :title="getPropValue('content', params)" style="width: 100%"> {{ 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"
-        v-model:current-page="currentPage"
-        :page-sizes="pagination.pageSizes"
-        :page-size="pagination.pageSize"
-        :layout="pagination.layout"
-        :total="pagination.total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-import customFormatter from './custom-formatter'
-import SearchForm from './search-form.vue'
-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 * as Vue from 'vue'
-export default {
-  name: 'SuperNineGrid',
-  components: {
-    SearchForm,
-  },
-  props: {
-    code: {
-      type: String,
-      default: '',
-    },
-    url: {
-      type: String,
-      default: '',
-    },
-    options: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-  },
-  data() {
-    let mergeFields = []
-    if (
-      this.options &&
-      this.options.mergeFields &&
-      this.options.mergeFields !== ''
-    ) {
-      mergeFields = this.options.mergeFields.split(',')
-    }
-    const defaultShowImageAction =
-      window.$vueApp.config.globalProperties.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'}
-      isShowEnableState: false,
-      colSpan: 6,
-    }
-  },
-  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.setSubTitle.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
-      }
-      if (
-        this.options &&
-        typeof this.options.isShowEnableState !== 'undefined'
-      ) {
-        this.isShowEnableState = this.options.isShowEnableState
-      }
-      if (this.options && typeof this.options.colSpan !== 'undefined') {
-        this.colSpan = this.options.colSpan
-      }
-    },
-    // 获得各属性对应的字段配置
-    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) {
-          // 如果不是查询时才需要从缓存中获得结果
-          // 如果是刷新当前列表，则需要获得缓存中的window.sessionStorage
-          const isRefreshList = window.sessionStorage.getItem(
-            'refreshList-' + this.storeId
-          )
-          // console.log('fetchData--isRefreshList--', isRefreshList)
-          if (isRefreshList !== undefined && isRefreshList === 'true') {
-            const searchParamJson = window.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
-            }
-          }
-        }
-        window.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
-        // 缓存查询条件及当前页数
-        window.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)
-          })
-      })
-    },
-    getLength(paramsData) {
-      if (paramsData && paramsData.length > 5) {
-        return '(' + paramsData.substring(0, 5) + '...' + ')'
-      } else if (paramsData) {
-        return '(' + paramsData + ')'
-      } else {
-        return ''
-      }
-    },
-    // 获得初始查询条件对象
-    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
-              $emit(vm, '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())
-      $emit(this, 'sort-change', { column, prop, order })
-    },
-    resetSearch() {
-      this.search(null, false)
-    },
-    // 新建事件
-    add() {
-      $emit(this, 'add')
-    },
-    // 操作按钮的点击事件
-    buttonClick(event, data) {
-      if (event) {
-        if (typeof event === 'function') {
-          event.call(this, data)
-        } else {
-          $emit(this, event, data)
-        }
-      }
-    },
-    // 点击内容区域的事件
-    clickContent(data) {
-      this.changeSelect(data)
-      $emit(this, 'click', data)
-    },
-    // 格子拖拽
-    rowDrop() {
-      if (this.urlToSaveOrder) {
-        let urlToSaveOrder = this.urlToSaveOrder
-        if (
-          urlToSaveOrder.indexOf('http:') < 0 ||
-          urlToSaveOrder.indexOf('https:') < 0
-        ) {
-          // 表示是相对路径，需要拼接全路径
-          let baseURL = window.$vueApp.config.globalProperties.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(() => {
-                  $emit(vm, '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)
-      }
-      $emit(this, 'unselect', entity, this.selections)
-      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.selectionIds[this.selectionIds.length] = id
-        this.selections[this.selections.length] = entity
-      }
-      $emit(this, 'select', entity, this.selections)
-      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
-    },
-    // 是否显示启用禁用按钮
-    showEnableButton(entity) {
-      const gridParams = store.get(this.storeId)
-      if (isHasOptionFunction('showEnableButton', this.storeId)) {
-        return gridParams.options.showEnableButton.call(this, entity)
-      }
-      return false
-    },
-    // 启用禁用按钮显示状态
-    changeState(entity) {
-      const gridParams = store.get(this.storeId)
-      if (isHasOptionFunction('changeState', this.storeId)) {
-        return gridParams.options.changeState.call(this, entity)
-      }
-      return false
-    },
-  },
-  emits: [
-    'sort-change',
-    ,
-    'click',
-    'afterDrag',
-    'unselect',
-    'select',
-    'cancel-search',
-    'add',
-    ,
-  ],
-}
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.nine-grid-area {
-  padding: 10px;
-  .el-row {
-    margin-bottom: 20px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-  .el-col-5 {
-    width: 20%;
-  }
-  .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: #adb5bd;
-    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: 160px;
-    // background-color: #fff;
-    // border: 1px solid #7693f5;
-    // box-shadow: 0 2px 8px 0 rgba(104,130,218,.4);
-    font-size: 12px;
-    color: #666666;
-    font-family: Source Han Sans CN;
-    font-weight: regular;
-    font-size: 14px;
-    line-height: 14px;
-    letter-spacing: 0px;
-    text-align: left;
-  }
-  .el-divider--horizontal {
-    margin: 5px 0;
-  }
-  .button-style {
-    margin-top: 28px;
-    color: #606266;
-    font-family: Source Han Sans CN;
-    font-weight: regular;
-    font-size: 14px;
-    line-height: 14px;
-    letter-spacing: 0px;
-    text-align: left;
-  }
-}
-</style>
+<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="24">
+          <el-col
+            v-if="isHasCreate"
+            id="_addCardId_"
+            v-permission="createPermission"
+            :span="colSpan"
+          >
+            <el-card
+              :body-style="{ padding: '0px' }"
+              style="
+                border-radius: 4px;
+                background: #ffffff;
+                border: 1px solid #e5e8ef;
+              "
+            >
+              <div class="add-screen" @click="add">
+                <em class="el-icon-plus" />
+                <span style="margin-top: 7px">
+                  {{ $t('superNineGrid.add') }}</span
+                >
+              </div>
+            </el-card>
+          </el-col>
+          <el-col
+            v-for="(params, index) in gridData"
+            :key="params.id"
+            :span="colSpan"
+          >
+            <el-card
+              :body-style="{ padding: '0px' }"
+              :style="{
+                border:
+                  selectionIds.indexOf(params.id) > -1
+                    ? '1px solid #005EBA'
+                    : '',
+              }"
+              shadow="hover"
+            >
+              <div
+                style="height: 160px"
+                @mouseenter="enter(index)"
+                @mouseleave="leave()"
+                @click="clickContent(params)"
+              >
+                <!-- <transition name="fade">
+                        <div v-if="seen && index === current" class="popContainer">
+                          <div class="else-button">
+                            <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 :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'" :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="padding: 20px; text-align: center;"> -->
+                <div
+                  class="image"
+                  style="padding: 15px; box-sizing: border-box"
+                >
+                  <div>
+                    <el-tooltip
+                      effect="dark"
+                      :content="'系统编码：' + params.code"
+                      placement="top-start"
+                    >
+                      <div
+                        v-if="props && props.content"
+                        style="display: inline-block"
+                      >
+                        {{
+                          getPropValue('content', params) +
+                          getLength(params.code)
+                        }}
+                      </div>
+                      <div
+                        v-else-if="props && props.title"
+                        style="display: inline-block"
+                      >
+                        {{
+                          getPropValue('title', params) + getLength(params.code)
+                        }}
+                      </div>
+                    </el-tooltip>
+                    <div
+                      v-if="showEnableButton(params)"
+                      style="
+                        margin-left: 2px;
+                        color: #00b42a;
+                        background-color: #e8ffea;
+                        width: 68px;
+                        text-align: center;
+                        display: inline-block;
+                      "
+                    >
+                      <em class="el-icon-success" />
+                      <span
+                        :title="getPropValue('subTitle', params)"
+                        style="margin-left: 4px"
+                        >{{ getPropValue('subTitle', params) }}</span
+                      >
+                    </div>
+                  </div>
+                  <div class="button-style">
+                    操作
+                    <template v-for="button in operations">
+                      <template v-if="isShowButton(params, button)">
+                        <el-tooltip
+                          v-if="button.icon"
+                          v-permission="
+                            button.permission ? button.permission : 'true'
+                          "
+                          :content="button.name"
+                          class="item"
+                          effect="dark"
+                          placement="top"
+                        >
+                          <em
+                            :class="button.icon + ' icons'"
+                            @click.stop="buttonClick(button.event, params)"
+                          />
+                        </el-tooltip>
+                        <em
+                          v-else
+                          v-permission="
+                            button.permission ? button.permission : 'true'
+                          "
+                          :class="button.name + ' icons'"
+                          @click.stop="buttonClick(button.event, params)"
+                          >{{ button.name }}
+                        </em>
+                      </template>
+                    </template>
+                  </div>
+                  <div
+                    v-if="isShowEnableState"
+                    style="float: right; margin-top: 28px"
+                  >
+                    <el-button
+                      v-if="showEnableButton(params)"
+                      size="mini"
+                      @click.stop="changeState(params)"
+                    >
+                      禁用
+                    </el-button>
+                    <el-button
+                      v-else
+                      size="mini"
+                      type="primary"
+                      @click.stop="changeState(params)"
+                    >
+                      启用
+                    </el-button>
+                  </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" :value="selectionModels['select'+params.id]" :true-label="params.id" :false-label="'false-'+params.id" :title="getPropValue('title', params)" style="width: 100%" @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" :label="params.id" :title="getPropValue('title', params)" style="width: 100%" @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" :value="selectionModels['select'+params.id]" :true-label="params.id" :false-label="'false-'+params.id" :title="getPropValue('content', params)" style="width: 100%" @change="changeChecked($event, index)">{{ getPropValue('content', params) }}</el-checkbox>
+                            <el-radio v-else-if="isShowRadio" v-model="currentId" :label="params.id" :title="getPropValue('content', params)" style="width: 100%" @change="changeSelectWhenRadio($event, index)">{{ getPropValue('content', params) }}</el-radio>
+                            <span v-else :title="getPropValue('content', params)" style="width: 100%"> {{ 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"
+        v-model:current-page="currentPage"
+        :page-sizes="pagination.pageSizes"
+        :page-size="pagination.pageSize"
+        :layout="pagination.layout"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import customFormatter from './custom-formatter'
+import SearchForm from './search-form.vue'
+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 * as Vue from 'vue'
+export default {
+  name: 'SuperNineGrid',
+  components: {
+    SearchForm,
+  },
+  props: {
+    code: {
+      type: String,
+      default: '',
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+  },
+  data() {
+    let mergeFields = []
+    if (
+      this.options &&
+      this.options.mergeFields &&
+      this.options.mergeFields !== ''
+    ) {
+      mergeFields = this.options.mergeFields.split(',')
+    }
+    const defaultShowImageAction =
+      window.$vueApp.config.globalProperties.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'}
+      isShowEnableState: false,
+      colSpan: 6,
+    }
+  },
+  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.setSubTitle.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
+      }
+      if (
+        this.options &&
+        typeof this.options.isShowEnableState !== 'undefined'
+      ) {
+        this.isShowEnableState = this.options.isShowEnableState
+      }
+      if (this.options && typeof this.options.colSpan !== 'undefined') {
+        this.colSpan = this.options.colSpan
+      }
+    },
+    // 获得各属性对应的字段配置
+    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) {
+          // 如果不是查询时才需要从缓存中获得结果
+          // 如果是刷新当前列表，则需要获得缓存中的window.sessionStorage
+          const isRefreshList = window.sessionStorage.getItem(
+            'refreshList-' + this.storeId
+          )
+          // console.log('fetchData--isRefreshList--', isRefreshList)
+          if (isRefreshList !== undefined && isRefreshList === 'true') {
+            const searchParamJson = window.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
+            }
+          }
+        }
+        window.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
+        // 缓存查询条件及当前页数
+        window.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)
+          })
+      })
+    },
+    getLength(paramsData) {
+      if (paramsData && paramsData.length > 5) {
+        return '(' + paramsData.substring(0, 5) + '...' + ')'
+      } else if (paramsData) {
+        return '(' + paramsData + ')'
+      } else {
+        return ''
+      }
+    },
+    // 获得初始查询条件对象
+    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
+              $emit(vm, '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())
+      $emit(this, 'sort-change', { column, prop, order })
+    },
+    resetSearch() {
+      this.search(null, false)
+    },
+    // 新建事件
+    add() {
+      $emit(this, 'add')
+    },
+    // 操作按钮的点击事件
+    buttonClick(event, data) {
+      if (event) {
+        if (typeof event === 'function') {
+          event.call(this, data)
+        } else {
+          $emit(this, event, data)
+        }
+      }
+    },
+    // 点击内容区域的事件
+    clickContent(data) {
+      this.changeSelect(data)
+      $emit(this, 'click', data)
+    },
+    // 格子拖拽
+    rowDrop() {
+      if (this.urlToSaveOrder) {
+        let urlToSaveOrder = this.urlToSaveOrder
+        if (
+          urlToSaveOrder.indexOf('http:') < 0 ||
+          urlToSaveOrder.indexOf('https:') < 0
+        ) {
+          // 表示是相对路径，需要拼接全路径
+          let baseURL = window.$vueApp.config.globalProperties.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(() => {
+                  $emit(vm, '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)
+      }
+      $emit(this, 'unselect', entity, this.selections)
+      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.selectionIds[this.selectionIds.length] = id
+        this.selections[this.selections.length] = entity
+      }
+      $emit(this, 'select', entity, this.selections)
+      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
+    },
+    // 是否显示启用禁用按钮
+    showEnableButton(entity) {
+      const gridParams = store.get(this.storeId)
+      if (isHasOptionFunction('showEnableButton', this.storeId)) {
+        return gridParams.options.showEnableButton.call(this, entity)
+      }
+      return false
+    },
+    // 启用禁用按钮显示状态
+    changeState(entity) {
+      const gridParams = store.get(this.storeId)
+      if (isHasOptionFunction('changeState', this.storeId)) {
+        return gridParams.options.changeState.call(this, entity)
+      }
+      return false
+    },
+  },
+  emits: [
+    'sort-change',
+    ,
+    'click',
+    'afterDrag',
+    'unselect',
+    'select',
+    'cancel-search',
+    'add',
+    ,
+  ],
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.nine-grid-area {
+  padding: 10px;
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col-5 {
+    width: 20%;
+  }
+  .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: #adb5bd;
+    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: 160px;
+    // background-color: #fff;
+    // border: 1px solid #7693f5;
+    // box-shadow: 0 2px 8px 0 rgba(104,130,218,.4);
+    font-size: 12px;
+    color: #666666;
+    font-family: Source Han Sans CN;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
+  .el-divider--horizontal {
+    margin: 5px 0;
+  }
+  .button-style {
+    margin-top: 28px;
+    color: #606266;
+    font-family: Source Han Sans CN;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
+}
+</style>