agilebuilder-ui 1.0.621 → 1.0.962

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

@@ -1,211 +1,170 @@
 <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">
-								<el-icon>
-									<Plus/>
-								</el-icon>
-								<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"
-							:offset="1.5"
-							:span="colSpan"
-					>
-						<el-card
-								:body-style="{ padding: '0px' }"
-								:style="{
-                border:
-                  selectionIds.indexOf(params.id) > -1
-                    ? '1px solid #005EBA'
-                    : '',
-                    position: 'relative'
+  <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">
+                <el-icon>
+                  <Plus />
+                </el-icon>
+                <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" :offset="1.5" :span="colSpan">
+            <el-card
+              :body-style="{ padding: '0px' }"
+              :style="{
+                border: selectionIds.indexOf(params.id) > -1 ? '1px solid #005EBA' : '',
+                position: 'relative'
               }"
-								shadow="hover"
-						>
-							<div
-									style="height: 160px"
-									@click="clickContent(params)"
-									@mouseenter="enter(index)"
-									@mouseleave="leave()"
-							>
-								<!--<div @click="clickContent(params)">-->
-								<!--<transition name="fade">-->
-								<!--	&lt;!&ndash;<div v-if="seen && index === current" class="popContainer">&ndash;&gt;-->
-								<!--	<div class="popContainer">-->
-								<!--		<div class="else-button" style="background: rgba(0,0,0,0.5); min-height: 20%;">-->
-								<!--			&lt;!&ndash;<div class="else-button">&ndash;&gt;-->
-								<!--			<slot :name="slotBefore" :params="params"/>-->
+              shadow="hover"
+            >
+              <div style="height: 160px" @click="clickContent(params)" @mouseenter="enter(index)" @mouseleave="leave()">
+                <!--<div @click="clickContent(params)">-->
+                <!--<transition name="fade">-->
+                <!--	&lt;!&ndash;<div v-if="seen && index === current" class="popContainer">&ndash;&gt;-->
+                <!--	<div class="popContainer">-->
+                <!--		<div class="else-button" style="background: rgba(0,0,0,0.5); min-height: 20%;">-->
+                <!--			&lt;!&ndash;<div class="else-button">&ndash;&gt;-->
+                <!--			<slot :name="slotBefore" :params="params"/>-->
 
-								<!--			<template v-for="button in operations">-->
-								<!--				<template v-if="isShowButton(params, button)">-->
-								<!--					<el-tooltip v-if="button.icon" :key="button.name" v-permission="button.permission?button.permission:'true'" :content="button.name" class="item" effect="dark" placement="top">-->
-								<!--						&lt;!&ndash;<em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)"/>&ndash;&gt;-->
-								<!--						<em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)"/>-->
-								<!--					</el-tooltip>-->
-								<!--					&lt;!&ndash;<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>&ndash;&gt;-->
-								<!--					<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="props && props.content?getPropValue('content', params) + '('+ params.code+')':(props && props.title?getPropValue('title', params) + '('+ params.code+')':'')"
-													effect="dark"
-													placement="top-start"
-											>
-												<div
-														v-if="props && props.content"
-														:style="'display: inline-block;width:'+titleWidth"
-														class="ellipsis cell--span"
-												>
-													{{
-														getPropValue('content', params) + '('+ params.code+')'
-													}}
-												</div>
-												<div
-														v-else-if="props && props.title"
-														:style="'display: inline-block;width:'+titleWidth"
-														class="ellipsis cell--span"
-												>
-													{{
-														getPropValue('title', params) + '('+ 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">
-										<div style="padding: 10px;box-sizing: border-box;width: 50px">
-											{{ $t('imatrixUIPublicModel.edit') }}
-										</div>
-										<div style="padding-left: 15px">
-											<template v-for="button in operations">
-												<template v-if="isShowButton(params, button)">
-													<el-tooltip
-														:key="button.name"
-															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
-														: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>
-											<slot :name="slotBefore" :params="params"/>
-										</div>
-									</div>
-									<div	
-											style="position: absolute;right: 5%;bottom: 9%;"
-									>
-									<slot :name="slotState" :params="params"/>
-									<template  v-if="isShowEnableState">
-										<el-button
-											v-if="showEnableButton(params)"
-											class="button--default"
-											size="default"
-											@click.stop="changeState(params)"
-										>
-											{{ $t('imatrixUIPublicModel.forbidden') }}
-										</el-button>
-										<el-button
-											v-else
-												size="default"
-												type="primary"
-												@click.stop="changeState(params)"
-										>
-											{{ $t('imatrixUIPublicModel.startUsing') }}
-										</el-button>
-									</template>
-									</div>
-								</div>
-							</div>
-							<!-- <el-divider />
+                <!--			<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'" :content="button.name" class="item" effect="dark" placement="top">-->
+                <!--						&lt;!&ndash;<em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)"/>&ndash;&gt;-->
+                <!--						<em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)"/>-->
+                <!--					</el-tooltip>-->
+                <!--					&lt;!&ndash;<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>&ndash;&gt;-->
+                <!--					<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="
+                        props && props.content
+                          ? getPropValue('content', params) + '(' + params.code + ')'
+                          : props && props.title
+                          ? getPropValue('title', params) + '(' + params.code + ')'
+                          : ''
+                      "
+                      effect="dark"
+                      placement="top-start"
+                    >
+                      <div
+                        v-if="props && props.content"
+                        :style="'display: inline-block;width:' + titleWidth"
+                        class="ellipsis cell--span"
+                      >
+                        {{ getPropValue('content', params) + '(' + params.code + ')' }}
+                      </div>
+                      <div
+                        v-else-if="props && props.title"
+                        :style="'display: inline-block;width:' + titleWidth"
+                        class="ellipsis cell--span"
+                      >
+                        {{ getPropValue('title', params) + '(' + 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">
+                    <div style="padding: 10px; box-sizing: border-box; width: 50px">
+                      {{ $t('imatrixUIPublicModel.edit') }}
+                    </div>
+                    <div style="padding-left: 15px">
+                      <template v-for="button in operations">
+                        <template v-if="isShowButton(params, button)">
+                          <el-tooltip
+                            :key="button.name"
+                            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
+                            :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>
+                      <slot :name="slotBefore" :params="params" />
+                    </div>
+                  </div>
+                  <div v-if="isShowBottom" style="position: absolute; right: 5%; bottom: 9%">
+                    <slot :name="slotState" :params="params" />
+                    <template v-if="isShowEnableState">
+                      <el-button
+                        v-if="showEnableButton(params)"
+                        class="button--default"
+                        size="default"
+                        @click.stop="changeState(params)"
+                      >
+                        {{ $t('imatrixUIPublicModel.forbidden') }}
+                      </el-button>
+                      <el-button v-else size="default" type="primary" @click.stop="changeState(params)">
+                        {{ $t('imatrixUIPublicModel.startUsing') }}
+                      </el-button>
+                    </template>
+                  </div>
+                </div>
+              </div>
+              <!-- <el-divider />
 										<div style="padding: 10px 10px 10px 10px;">
 											<div class="bottom clearfix">
 												<time class="name">
@@ -235,986 +194,918 @@
 													<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"
-					v-model:page-size="pagination.pageSize"
-					:layout="pagination.layout"
-					:page-sizes="pagination.pageSizes"
-					:total="pagination.total!==undefined&&pagination.total!==''&&pagination.total!==null?pagination.total:0"
-					@size-change="handleSizeChange"
-					@current-change="handleCurrentChange"
-			/>
-		</div>
-	</div>
+              <!--</div>-->
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <el-pagination
+        v-if="pagination"
+        v-model:current-page="currentPage"
+        v-model:page-size="pagination.pageSize"
+        :layout="pagination.layout"
+        :page-sizes="pagination.pageSizes"
+        :total="
+          pagination.total !== undefined && pagination.total !== '' && pagination.total !== null ? pagination.total : 0
+        "
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
-import {$emit} from '../../utils/gogocodeTransfer'
+import { $emit } from '../../utils/gogocodeTransfer'
 import customFormatter from './custom-formatter'
 import SearchForm from './search-form.vue'
-import {addDynamicProp, getGridParams, getTableHeight, isHasOptionFunction} from './utils'
+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 {}
-			},
-		},
-		publishVersion: {
-			type: Number,
-			default: 0
-		}
-	},
-	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
-		const titleWidth = this.options && this.options.style && this.options.style.titleWidth !== undefined
-						? this.options.style.titleWidth:'60%'
-		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,
-			slotBefore: 'before',
-			titleWidth,
-			slotState: 'bottom'
-		}
-	},
-	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,
-				}
-		)
+  name: 'SuperNineGrid',
+  components: {
+    SearchForm
+  },
+  props: {
+    code: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    publishVersion: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    let mergeFields = []
+    if (this.options && this.options.mergeFields && this.options.mergeFields !== '') {
+      mergeFields = this.options.mergeFields.split(',')
+    }
+    const defaultShowImageAction =
+      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
+    const titleWidth =
+      this.options && this.options.style && this.options.style.titleWidth !== undefined
+        ? this.options.style.titleWidth
+        : '60%'
+    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,
+      slotBefore: 'before',
+      titleWidth,
+      slotState: 'bottom',
+	  isShowBottom: true
+    }
+  },
+  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 = []
-							}
+    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.clearSelections()
+        // 获得各属性对应的字段配置
+        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
-							}
+            if (this.pagination !== null) {
+              this.pagination.total = data.total
+            }
 
-							gridParams.gridData = this.gridData
-							// 完成深拷贝，复制一份对象，行编辑时使用
-							gridParams.orgGridData = [].concat(
-									JSON.parse(JSON.stringify(this.gridData))
-							)
+            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.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.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
+          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
-						}
+          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 (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
-				}
+          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',
-		,
-	],
+        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;
+  padding: 10px;
 
-	.el-row {
-		margin-bottom: 20px;
+  .el-row {
+    margin-bottom: 20px;
 
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
-	.el-col-5 {
-		width: 20%;
-		max-width: 20%;
-		padding-left: 12px;
-		padding-right: 12px;
-	}
+  .el-col-5 {
+    width: 20%;
+    max-width: 20%;
+    padding-left: 12px;
+    padding-right: 12px;
+  }
 
-	.el-col {
-		border-radius: 4px;
-		margin-bottom: 10px;
-	}
+  .el-col {
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
 
-	.name {
-		font-size: 12px;
-		color: #555;
-		float: left;
-		width: 80%;
-		text-align: left;
-	}
+  .name {
+    font-size: 12px;
+    color: #555;
+    float: left;
+    width: 80%;
+    text-align: left;
+  }
 
-	.bottom {
-		// margin-top: 13px;
-		line-height: 13px;
-		// background: aquamarine;
-	}
+  .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;
-	}
+  .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;
-	}
+  .image {
+    width: 100%;
+    display: block;
+    height: 200px;
+  }
 
-	.clearfix:before,
-	.clearfix:after {
-		display: table;
-		content: '';
-	}
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: '';
+  }
 
-	.clearfix:after {
-		clear: both;
-	}
+  .clearfix:after {
+    clear: both;
+  }
 
-	.input-with-select {
-		// background-color: #fff;
-		width: 200px;
-		float: right;
-	}
+  .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;
-	}
+  .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-active,
+  .fade-leave-active {
+    transition: opacity 0.5s;
+  }
 
-	.fade-enter,
-	.fade-leave-to {
-		opacity: 0;
-	}
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
 
-	.icons {
-		color: #adb5bd;
-		margin: 10px 10px 0px 0px;
-		cursor: pointer;
-	}
+  .icons {
+    color: #adb5bd;
+    margin: 10px 10px 0px 0px;
+    cursor: pointer;
+  }
 
-	.release-status {
-		display: block;
-		width: 8px;
-		height: 8px;
-		margin-right: 8px;
-		border-radius: 100%;
-	}
+  .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);
-		color: #666666;
-		font-family: Source Han Sans CN;
-		font-weight: 400;
-		font-size: 14px;
-		line-height: 14px;
-		letter-spacing: 0px;
-		text-align: left;
-	}
+  .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);
+    color: #666666;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
 
-	.el-divider--horizontal {
-		margin: 5px 0;
-	}
+  .el-divider--horizontal {
+    margin: 5px 0;
+  }
 
-	.button-style {
-		margin-top: 28px;
-		color: #606266;
-		font-family: Source Han Sans CN;
-		font-weight: 400;
-		font-size: 14px;
-		//line-height: 14px;
-		//letter-spacing: 0px;
-		//text-align: left;
-		display: grid;
-		grid-template-columns: 20% 80%;
-	}
+  .button-style {
+    margin-top: 28px;
+    color: #606266;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    //line-height: 14px;
+    //letter-spacing: 0px;
+    //text-align: left;
+    display: grid;
+    grid-template-columns: 20% 80%;
+  }
 }
 </style>