agilebuilder-ui 1.1.65-tmp3 → 1.1.65-tmp30

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

@@ -1,1112 +0,0 @@
-<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="
-                        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">
-													<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"
-        background
-        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
-    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.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
-            }
-
-            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>