agilebuilder-ui 1.0.0

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

@@ -0,0 +1,1211 @@
+<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'
+              }"
+								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="$t('imatrixUIPublicModel.systemCode') +':' + 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">
+										<div style="padding: 10px;box-sizing: border-box;">
+											{{ $t('imatrixUIPublicModel.edit') }}
+										</div>
+										<div>
+											<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>
+											<slot :name="slotBefore" :params="params"/>
+										</div>
+									</div>
+									<div
+											v-if="isShowEnableState"
+											style="position: absolute;right: 5%;bottom: 9%;"
+									>
+										<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>
+									</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"
+					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 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 {}
+			},
+		},
+		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
+		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'
+		}
+	},
+	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);
+		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;
+	}
+
+	.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>