imatrix-ui 0.2.3-up → 0.2.5-up

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

@@ -1,1164 +1,1188 @@
-<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"
+				:code="code"
+				:columns="columns"
+				:grid-id="gridId"
+				:init-search-props="initSearchProps"
+				:pagination="pagination"
+				:query="query"
+				:search-param="searchFormContent"
+				:url="url"
+				@reset="resetSearch"
+				@search="search"
+		/>
+		<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"
+									@click="clickContent(params)"
+									@mouseenter="enter(index)"
+									@mouseleave="leave()"
+							>
+								<!-- <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
+												:content="'系统编码：' + params.code"
+												effect="dark"
+												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;
+                      "
+										>
+											<el-icon>
+												<SuccessFilled/>
+											</el-icon>
+											<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"
+														style="background-color: red"
+												>
+													<el-icon :class="button.icon + ' icons'" @click.stop="buttonClick(button.event, params)">
+														<component :is="button.icon"/>
+													</el-icon>
+												</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"
+					:layout="pagination.layout"
+					:page-size="pagination.pageSize"
+					:page-sizes="pagination.pageSizes"
+					:total="pagination.total"
+					@size-change="handleSizeChange"
+					@current-change="handleCurrentChange"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import {$emit} from '../../utils/gogocodeTransfer'
+import customFormatter from './custom-formatter'
+import SearchForm from './search-form.vue'
+import {addDynamicProp, getGridParams, getTableHeight, isHasOptionFunction} from './utils'
+import store from './store'
+import superGridService from './super-grid-service'
+import apis from './apis'
+import Sortable from 'sortablejs'
+
+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()
+		console.log('%c描述-232041', 'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px', this.operations);
+	},
+	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%;
+		max-width: 20%;
+		padding-left: 12px;
+		padding-right: 12px;
+	}
+
+	.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>