doway-coms 1.1.52 → 1.1.55

package/packages/BaseGrid/src/index.vue

@@ -0,0 +1,2375 @@
+<template>
+    <div :style="{'height':height+'px'}">
+      <VxeGrid
+        ref="baseGrid"
+        border
+        keep-source
+        :loading="loading"
+        auto-resize
+        :edit-config="{
+          trigger: 'manual',
+          mode: 'row',
+          activeMethod: activeCellMethod,
+          showStatus: true,
+          showUpdateStatus: true,
+          showInsertStatus: true,
+          showIcon: !showFilter
+        }"
+        :filter-config="{
+          remote: filterRemote
+        }"
+        :toolbar-config="toolBarConfig"
+        :menu-config="menuConfig"
+        @menu-click="contextMenuClickEvent"
+        @filter-change="filterChange"
+        :footer-method="footerMethod"
+        @cell-click="cellClick"
+        resizable
+        :show-overflow="showOverFlow"
+        :show-header-overflow="showHeaderOverflow"
+        show-footer-overflow
+        highlight-current-row
+        highlight-hover-row
+        :span-method="rowspanMethod"
+        @current-change="currentChange"
+        @sort-change="sortChange"
+        @cellValueChange="cellValueChange"
+        @operationButtonClick="operationButtonClick"
+        @preSearch="preSearch"
+        @pulldownBtnClick="pulldownBtnClick"
+        @pulldownMultiSelect="pulldownMultiSelect"
+        :edit-rules="validRules"
+        :tree-config="treeConfig"
+        @resizable-change="resizableChange"
+        :checkbox-config="checkboxConfig"
+        :expand-config="expandConfig"
+        @edit-closed="editClosedEvent"
+        @edit-actived="editActived"
+        @filter-visible="filterVisible"
+        :sort-config="{
+          multiple: true,
+          remote: sortRemote,
+          chronological: true,
+          defaultSort: defaultSort
+        }"
+        @checkbox-all="checkBoxAllChanged"
+        @checkbox-change="checkBoxChanged"
+        :cell-class-name="cellClassName"
+        :row-style="rowStyle"
+        :size="'mini'"
+        :data="rows"
+        :columns="internalColumns"
+        class="base-grid-view"
+        :height="'auto'"
+        :show-footer="showFooter"
+        @scroll="bodyScroll"
+      >
+      <template #toolbar_buttons>
+        <div
+          ><span v-for="loopFilterStr in filterStr" :key="loopFilterStr.field">
+            {{ loopFilterStr.title }} {{ loopFilterStr.exp }} 并且</span
+          >
+        </div>
+      </template>
+        <template #seqHeader>
+          <div
+            @click="clickHeader"
+            v-if="moduleCode && dataCode"
+            style="color: #219bff"
+          >
+            <a-icon type="ordered-list" style="font-size: 25px;cursor:pointer" />
+          </div>
+        </template>
+        <template #empty>
+          <span v-if="emptyText">{{ emptyText }}</span>
+          <a-empty v-else size="small" />
+        </template>
+
+        <template #default="scope">
+          <div v-if="scope.column.params" class="grid-valid-display">
+            <!-- {{ scope.row[scope.column.field] }} -->
+            {{gridDefaultValueDisplay(scope.row,scope.column)}}
+            <!-- {{ defaultValueDisplay(scope.row, scope.column) }} -->
+          </div>
+        </template>
+
+        <template #text_edit="scope">
+          <div class="interceptor-class">
+            <a-input
+              class="inner-cell-control"
+              size="small"
+              v-model="scope.row[scope.column.property]"
+              @change="cellValueChange(scope)"
+              type="text"
+            />
+          </div>
+        </template>
+        <template #checkbox_edit="scope">
+          <div class="interceptor-class">
+          <a-checkbox class="inner-cell-control"
+          size="small"
+          @change="cellValueChange(scope)"
+          v-model="scope.row[scope.column.property]" />
+        </div>
+        </template>
+        <template #number_edit="scope">
+          <div class="interceptor-class">
+          <a-input-number
+            class="inner-cell-control"
+            size="small"
+            @change="cellValueChange(scope)"
+            v-model="scope.row[scope.column.property]"
+            :min="scope.column.numberMin"
+            :max="scope.column.numberMax"
+          />
+        </div>
+        </template>
+        <template #date_edit="scope" >
+          <div class="interceptor-class">
+            <a-date-picker v-model="scope.row[scope.column.property]"
+            class="inner-cell-control"
+            size="small"
+            @change="cellValueChange(scope)"
+            value-format="YYYY-MM-DD" />
+          </div>
+          </template>
+          <template #datetime_edit="scope" >
+            <div class="interceptor-class">
+            <a-date-picker v-model="scope.row[scope.column.property]"
+            format="YYYY-MM-DD  HH:mm:ss"
+            size="small"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="inner-cell-control"
+            :showTime="true"
+            @change="cellValueChange(scope)"/>
+          </div>
+          </template>
+          <template #select_edit="scope">
+            <div class="interceptor-class">
+            <a-select v-model="scope.row[scope.column.property]"
+            @change="cellValueChange(scope)"
+            size="small"  class="inner-cell-control">
+              <a-select-option
+                v-for="loopSource in scope.column.params.dataSource"
+                :key="loopSource.value"
+                :value="loopSource.value"
+                >{{ loopSource.caption }}</a-select-option
+              >
+            </a-select>
+          </div>
+          </template>
+          <template #time_edit="scope" class="interceptor-class">
+            <div class="interceptor-class">
+            <a-time-picker v-model="scope.row[scope.column.property]"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+            size="small"
+            class="inner-cell-control"
+            @change="cellValueChange(scope)"/>
+          </div>
+          </template>
+
+          <template #pulldown_edit="scope" class="interceptor-class">
+            <div class="interceptor-class">
+            <BasePulldown
+            v-model="scope.row[scope.column.property]"
+            :field="scope.column.property"
+            :formRow="formRow"
+            :edit="scope.column.params.controlEdit === true"
+            :showLabel="false"
+            :row="scope.row"
+            :api="scope.column.params.api"
+            :isLocalData="scope.column.params.isLocalData"
+            :localDataSource="scope.column.params.localDataSource"
+            :isMultiSelect="scope.column.params.isMultiSelect"
+            :defaultExpression="scope.column.params.defaultExpression"
+            :columns="scope.column.params.columns"
+            :pageSize="scope.column.params.pageSize"
+            :optBtns="scope.column.params.optBtns"
+            :popupAddName="scope.column.params.popupAddName"
+            :popupAddPath="scope.column.params.popupAddPath"
+            @pre-search="(searchInfo)=>preSearch(searchInfo , scope)"
+            @select-changed="cellValueChange(scope)"
+            @confirm-multi-select="
+              (pulldownView, selectRows) => pulldownMultiSelect(scope, pulldownView, selectRows)
+            "
+            @pulldown-btn-click="pulldownBtnClick"
+      />
+    </div>
+          </template>
+
+
+        <template #expandContent="{ row, column, $table }">
+          <slot name="expandContent" :item="{ row, column, $table }"></slot>
+        </template>
+        <template #expandDefault="{ row, column }">
+          <slot name="expandDefault" :item="{ row, column }"></slot>
+        </template>
+        <template #linkCell="{ row, column }">
+          <span
+          ><a>{{ row[column.property] }}</a></span
+          >
+        </template>
+        <template #operation_edit="scope">
+          <div class="interceptor-class">
+            <a-button  type="link" @click="operationButtonClick(item,scope)"
+            v-show="item.visible === true && !(scope.row['sysOperationDisVisible_' + item.field] === true)"
+            v-for="item in scope.column.params.columns" :key="item.field">
+              {{item.title}}
+            </a-button>
+        </div>
+        </template>
+        <template #customCell="{ row, column }">
+          <slot name="customCell" :item="{ row, column }"></slot>
+        </template>
+        <template #customRadio="{ row, checked }">
+          <slot name="customRadio" :item="{ row, checked }"></slot>
+        </template>
+        <template #customFooter="{ column, items, _columnIndex }">
+          <slot
+            name="customFooter"
+            :item="{ column, items, _columnIndex }"
+          ></slot>
+        </template>
+        <template #pager v-if="pager && !pager.notShow">
+          <a-row>
+            <a-col :span="12" style="text-align: left; padding: 10px">
+              <a-space>
+                <template v-for="loopPagerBtn in pager.buttons">
+                  <a-button
+                    :key="loopPagerBtn.field"
+                    v-if="loopPagerBtn.visible"
+                    type="primary"
+                    size="small"
+                    :disabled="loopPagerBtn.edit === false"
+                    @click="pagerBtnClick(loopPagerBtn)"
+                  >{{ loopPagerBtn.title }}</a-button
+                  >
+                </template>
+              </a-space>
+            </a-col>
+            <a-col :span="12" style="text-align: right">
+              <BasePagination
+                v-if="pager.size"
+                :totalRows="pager.totalRows"
+                :pageSize="pager.size"
+                :currentPage="pager.current"
+                @pageChange="pageChange"
+                @pageSizeChange="pageSizeChange"
+                :pageSizeOptions="pager.sizeOptions"
+              />
+            </a-col>
+          </a-row>
+        </template>
+  
+        <!-- 筛选过滤 -->
+        <template  #text_filter="scope">
+          <div class="d-grid-fitler-popup">
+              <div
+                :class="scope.column.field + '_filter_' + $index"
+                v-for="(loopFilterValue, $index) in scope.column.filters[0].data.displayValues"
+                :key="$index"
+              >
+                <a-input allowClear v-model="loopFilterValue.value[0]" />
+              </div>
+              <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
+              <a-button @click="filterConfirm(scope.column)">确认</a-button>
+        </div>
+        </template>
+        <template #select_filter="scope">
+          <div class="d-grid-fitler-popup">
+            <a-checkbox-group v-model="scope.column.filters[0].data.displayValues">
+              <a-checkbox
+                v-for="loopData in scope.column.params.dataSource"
+                :key="loopData.value"
+                :value="loopData.value"
+              >
+                {{ loopData.caption }}</a-checkbox
+              >
+            </a-checkbox-group>
+            <a-button @click="filterConfirm(scope.column)">确认</a-button>
+          </div>
+      </template>
+      <template #datetime_filter="scope">
+        <div class="d-grid-fitler-popup">
+          <div
+            :class="scope.column.field + '_filter_' + $index"
+            v-for="(loopFilterValue, $index) in scope.column.filters[0].data.displayValues"
+            :key="$index"
+          >
+            <a-date-picker
+              valueFormat="YYYY-MM-DD HH:mm:ss"
+              format="YYYY-MM-DD HH:mm:ss"
+              :show-time="{ defaultValue: moment('2000-01-01 00:00:00', 'YYYY-MM-DD HH:mm:ss') }"
+              placeholder="开始时间"
+              v-model="loopFilterValue.value[0]"
+            />
+            <a-date-picker
+              valueFormat="YYYY-MM-DD HH:mm:ss"
+              format="YYYY-MM-DD HH:mm:ss"
+              :show-time="{ defaultValue: moment('2000-01-01 23:59:59', 'YYYY-MM-DD HH:mm:ss') }"
+              placeholder="结束时间"
+              v-model="loopFilterValue.value[1]"
+            />
+          </div>
+        </div>
+        <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
+        <a-button @click="filterConfirm(scope.column)">确认</a-button>
+      </template>
+      <template #date_filter="scope">
+        <div class="d-grid-fitler-popup">
+          <div
+            :class="scope.column.field + '_filter_' + $index"
+            v-for="(loopFilterValue, $index) in scope.column.filters[0].data.displayValues"
+            :key="$index"
+          >
+            <a-date-picker
+              valueFormat="YYYY-MM-DD"
+              format="YYYY-MM-DD"
+              placeholder="开始时间"
+              v-model="loopFilterValue.value[0]"
+            />
+            <a-date-picker
+              valueFormat="YYYY-MM-DD"
+              format="YYYY-MM-DD"
+              placeholder="结束时间"
+              v-model="loopFilterValue.value[1]"
+            />
+          </div>
+        </div>
+        <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
+        <a-button @click="filterConfirm(scope.column)">确认</a-button>
+      </template>
+      </VxeGrid>
+      <VxeModal
+        v-model="showGridColumnUserDefine"
+        title="表格布局设置"
+        width="70%"
+        height="70%"
+        show-zoom
+        transfer
+        resize
+        :zIndex="15"
+        show-footer
+        destroy-on-close
+      >
+        <base-adjust-grid-view
+          :userDefineColumns="userDefineColumns"
+          ref="baseAdjustGridView"
+        ></base-adjust-grid-view>
+        <template #footer>
+          <a-button
+            type="primary"
+            :size="'small'"
+            @click="confirmUserDefineColumn"
+          >
+            确认
+          </a-button>
+        </template>
+      </VxeModal>
+    </div>
+</template>
+  <script>
+  //轻量级剪贴板复制函数
+  import XEClipboard from 'xe-clipboard'
+  //引入全局文件
+  import { controlType } from '../../utils/enum'
+  //日期处理类库
+  import moment from 'moment'
+  //拖拽排序功能
+  //辅助函数 将store 中的 getter 映射到局部计算属性
+  import { mapGetters } from 'vuex'
+  //xe-utils提供了一套实用的基础函数、任意格式的日期转换函数，浏览器相关操作函数等,详细使用百度
+  import XEUtils from 'xe-utils'
+  //VXETable插件
+  //ant的空状态展示占位图
+  import { Empty,Row,Col,Space,Input,Select,DatePicker,Checkbox,InputNumber,TimePicker,Button } from 'ant-design-vue'
+  import BasePagination from '../../BasePagination/index'
+  import BasePulldown from '../../BasePulldown/index'
+  import { saveUserModuleDataFieldApi } from '../../utils/api'
+  import {gridDefaultValueDisplay } from '../../utils/filters'
+  export default {
+    name: 'BaseGrid',
+    components: {
+        'a-empty':Empty,
+        'a-row':Row,
+        'a-col':Col,
+        'a-space':Space,
+        'a-input':Input,
+        'a-select':Select,
+        'a-select-option':Select.Option,
+        'a-date-picker':DatePicker,
+        'a-checkbox':Checkbox,
+        'a-input-number':InputNumber,
+        'a-time-picker':TimePicker,
+        'a-button':Button,
+        BasePagination,
+        BasePulldown
+    },
+    data() {
+      return {
+        gridDefaultValueDisplay:gridDefaultValueDisplay,
+        //   gridOptions:{
+        //   border:true,
+        //     stripe:true,
+        //    columns:[
+        //
+        //    ]
+        // },
+        showFooter: false,
+        showGridColumnUserDefine: false,
+        userDefineColumns: [],
+        loading: false,
+        internalCols: {},
+        moment,
+        internalColumns: [],
+        gridEdit: false,
+        addBtnEdit: true,
+        validRules: {},
+        footerSum: [],
+        mergeFields: [],
+        simpleImage: null,
+        dragOptions: {
+          animation: 0,
+          group: 'description',
+          disabled: false,
+          ghostClass: 'ghost'
+        },
+        menuConfig: {
+          header: {
+            options: [
+              [
+                {
+                  code: 'clearFilter',
+                  name: '清空筛选',
+                  visible: true,
+                  disabled: false
+                }
+              ]
+            ]
+          },
+          body: {
+            options: [
+              [
+                {
+                  code: 'refresh',
+                  name: '刷新',
+                  visible: true
+                },
+                {
+                  code: 'copy',
+                  name: '复制',
+                  visible: true,
+                  disabled: false
+                },
+                {
+                  code: 'sort',
+                  name: '排序',
+                  prefixIcon: 'fa fa-sort color-blue',
+                  children: [
+                    { code: 'clearSort', name: '清除排序' },
+                    {
+                      code: 'asc',
+                      name: '升序',
+                      prefixIcon: 'fa fa-sort-alpha-asc color-orange'
+                    },
+                    {
+                      code: 'desc',
+                      name: '倒序',
+                      prefixIcon: 'fa fa-sort-alpha-desc color-orange'
+                    }
+                  ]
+                }
+              ]
+            ]
+          }
+          // body:{
+          //   options: [
+          //     [
+          //       { code: 'clearFilter', name: '清除所有筛选', visible: true, disabled: false }
+          //     ]
+          //   ]
+          // }
+        },
+        toolBarConfig:{
+          custom: true,
+          slots: { buttons: 'toolbar_buttons' },
+          enabled: false,
+        },
+        filterExpression:[],
+        filterStr:[]
+      }
+    },
+    computed: {
+      //使用对象展开运算符 将 getter 混入 computer 对象中
+      ...mapGetters(['controlSize'])
+    },
+    filters: {
+      displayText: function(row, column) {
+        if (column.params.controlType === 'select') {
+          let tempItem = XEUtils.find(
+            column.params.dataSource,
+            p => p.value === row[column.property]
+          )
+          // let tempItems = column.params.dataSource.filter(filterItem => {
+          //   return filterItem.value === row[column.property]
+          // })
+          if (tempItem) {
+            return tempItem.caption
+          } else {
+            return row[column.property]
+          }
+        }
+  
+        let linkField = column.property.split('.')
+        if (linkField.length > 1) {
+          let fieldValue = row
+          for (let i = 0; i < linkField.length; i++) {
+            if (
+              fieldValue[linkField[i]] === undefined ||
+              fieldValue[linkField[i]] === null
+            ) {
+              return null
+            }
+            fieldValue = fieldValue[linkField[i]]
+          }
+          return fieldValue
+        }
+        if (column.params.controlType === 'checkbox') {
+          return row[column.property] === true ? '是' : '否'
+        }
+  
+        if (column.params.displayField) {
+          return row[column.params.displayField]
+        }
+        return row[column.property]
+      }
+    },
+    props: {
+      showOverFlow: {
+        type: Boolean,
+        default: true
+      },
+      defaultSort: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      },
+      showFilter: {
+        type: Boolean,
+        default: true
+      },
+      showHeaderOverflow: {
+        type: Boolean,
+        default: true
+      },
+      cellClassName: {
+        type: Function,
+        default: null
+      },
+      sortRemote: {
+        type: Boolean,
+        default: () => {
+          return true
+        }
+      },
+      //筛选判断是否远程
+      filterRemote: {
+        type: Boolean,
+        default: () => {
+          return false
+        }
+      },
+      checkboxConfig: {
+        type: Object,
+        default: () => {
+          return null
+        },
+        deep: true
+      },
+      treeConfig: {
+        type: Object,
+        default: () => {
+          return null
+        },
+        deep: true
+      },
+      expandConfig: {
+        type: Object,
+        default: () => {
+          return null
+        },
+        deep: true
+      },
+      rowStyle: {
+        type: Function
+      },
+      height: {
+        default: null
+      },
+      pager: {
+        type: Object,
+        default: () => {
+          return null
+        },
+        deep: true
+      },
+      showSeq: {
+        type: Boolean,
+        default: () => {
+          return true
+        }
+      },
+      showMenu: {
+        type: Boolean,
+        default: () => {
+          return true
+        }
+      },
+      showExpand: {
+        type: Boolean,
+        default: () => {
+          return false
+        }
+      },
+      isOld: {
+        type: Boolean,
+        default: () => {
+          return false
+        }
+      },
+      emptyText: {
+        type: String,
+        default: () => {
+          return ''
+        }
+      },
+      columns: {
+        type: Array,
+        default: () => {
+          return []
+        },
+        deep: true
+      },
+      editStates: {
+        type: Array,
+        default: () => {
+          return null
+        },
+        deep: true
+      },
+      edit: {
+        type: Boolean,
+        default: false
+      },
+      formRow: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+        deep: true
+      },
+      editStatuss: {
+        type: Array,
+        default: () => {
+          return null
+        },
+        deep: true
+      },
+      showCheckBox: {
+        type: Boolean,
+        default: false
+      },
+      showRadio: {
+        type: Boolean,
+        default: false
+      },
+      // checkboxConfigReserve: {
+      //   type: Boolean,
+      //   default: false
+      // },
+      dataName: {
+        type: String,
+        default: ''
+      },
+      moduleCode: {
+        type: String,
+        default: ''
+      },
+      dataCode: {
+        type: String,
+        default: ''
+      },
+      rows: {
+        type: Array,
+        default: () => {
+          return []
+        },
+        deep: true
+      }
+    },
+    beforeCreate() {
+      this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
+    },
+  
+    created() {
+      //拖动后输入框有错位问题，暂时不启用
+      // this.initColumnDrop()
+  
+      // this.internalColumns.push({
+      //     field: 'sysRowState',
+      //     visible:false,
+      //     filterMethod:this.sysRowStateFilter,
+      //     filters:[{label:'筛选删除行',value:'delete',checked:true}]
+      //   })
+      if (this.showSeq) {
+        this.internalColumns.push(
+          // {
+          // children: [
+          {
+            type: 'seq',
+            fixed: 'left',
+            width: 50,
+            slots: {
+              header: 'seqHeader'
+            },
+            params: {
+              disableUserVisible: true
+            }
+          }
+          // ],
+          // slots: {
+          //   header: 'seqHeader'
+          // }
+          // }
+        )
+      }
+  
+      if (this.showCheckBox) {
+        this.internalColumns.push({
+          type: 'checkbox',
+          fixed: 'left',
+          width: 40,
+          params: {
+            disableUserVisible: true
+          }
+        })
+      }
+      for (let i = 0; i < this.columns.length; i++) {
+        this.internalColumns.push(this.initColumns(this.columns[i]))
+      }
+      this.gridEdit = this.edit
+    },
+  
+    mounted() {
+      //  this.toggleFixedColumn('operation','right')
+      //设置默认筛选的到表格
+      //   let filterCol = this.internalColumns.filter(
+      //   x =>
+      //     (x.filters && x.filters.length > 0) ||
+      //     (x.children &&
+      //       x.children.length > 0 &&
+      //       x.children[0].filters &&
+      //       x.children[0].filters.length > 0)
+      // )
+      // for (let i = 0; i < filterCol.length; i++) {
+      //   this.$refs.baseGrid
+      //     .setFilter(filterCol[i].field, filterCol[i].filters)
+      //     .then(() => {
+      //       // if (i == filterCol.length - 1) {
+      //       // }
+      //     })
+      // }
+    },
+    methods: {
+      getExpTags(filterList) {
+        //构造查询条件
+        let returnExp = []
+        for (let loopProp in filterList) {
+          let tempExpTag = {
+            expressions: [],
+            operator: 'or'
+          }
+          let tempControlType = filterList[loopProp].column.params.controlType
+          let tempIsAddTime = filterList[loopProp].isAddTime
+          for (let i = 0; i < filterList[loopProp].column.filters.length; i++) {
+            let tempValue = filterList[loopProp].column.filters[i]
+  
+            if (tempControlType === controlType.text) {
+              // 文本框
+              tempExpTag.expressions.push({
+                field: filterList[loopProp].property,
+                operator: 'CO',
+                value: tempValue.value
+              })
+            }
+            //  if (tempControlType === controlType.date)
+            // {
+            //   //日期
+            //   if (tempExpTag.value) {
+            //     tempExpTag.value.push(tempValue.value)
+            //   } else {
+            //     tempExpTag.value = [tempValue.value]
+            //     tempExpTag.operator = 'IN'
+            //     tempExpTag.field = filterList[loopProp].property
+            //   }
+            // }
+            // else
+            else if (tempControlType === controlType.number) {
+              // 数字范围
+              tempExpTag.expressions.push({
+                field: filterList[loopProp].property,
+                operator: 'RA',
+                value: [tempValue.value.min, tempValue.value.max]
+              })
+            } else if (
+              tempControlType === controlType.datetime ||
+              tempControlType === controlType.date
+            ) {
+              //日期范围
+              // if (tempIsAddTime === true) {
+              tempExpTag.expressions.push({
+                field: filterList[loopProp].property,
+                operator: 'RA',
+                value: [
+                  // tempValue.value[0] + ' 00:00:00',
+                  // tempValue.value[1] + ' 23:59:59'
+                  tempValue.value[0],
+                  tempValue.value[1]
+                ]
+              })
+              // } else {
+              //   tempExpTag.expressions.push({
+              //     field: filterList[loopProp].property,
+              //     operator: 'RA',
+              //     value: tempValue.value
+              //   })
+              // }
+            } else if (
+              tempControlType === controlType.dropmulti ||
+              tempControlType === controlType.select
+            ) {
+              //下拉多选
+              tempExpTag.expressions.push({
+                field: filterList[loopProp].property,
+                operator: 'IN',
+                value: filterList[loopProp].datas[0]
+              })
+            } else if (tempControlType === controlType.checkbox) {
+              //实际上checkbox的value数组里就一个值 这边是为了兼容select的结构
+              tempExpTag.expressions.push({
+                field: filterList[loopProp].property,
+                operator: 'EQ',
+                value: tempValue.value.indexOf('true') >= 0 ? true : false
+              })
+            } else {
+              // 文本框
+              tempExpTag.expressions.push({
+                field: filterList[loopProp].property,
+                operator: 'CO',
+                value: tempValue.value
+              })
+            }
+          }
+          if (tempExpTag.expressions.length > 0 || tempExpTag.field) {
+            returnExp.push(tempExpTag)
+          }
+        }
+        return returnExp
+      },
+      rangeChange(column) {
+        let vm = this
+        if (vm.filterRemote) {
+          column.filters.forEach(f => {
+            f.checked = true
+          })
+          vm.$refs.baseGrid.setFilter(column.field, column.filters).then(() => {
+            this.$emit('filterChange')
+          })
+        } else {
+          const xTable = this.$refs.baseGrid
+          // 设置为选中状态
+          for (let i = 0; i < column.filters.length; i++) {
+            if (!column.filters[i].value) {
+              column.filters[i].checked = false
+            } else {
+              column.filters[i].checked = true
+            }
+          }
+          // 修改条件之后，需要手动调用 updateData 处理表格数据
+          xTable.updateData()
+        }
+      },
+      //日期筛选变化
+      dateChange(column, dates) {
+        let vm = this
+        if (vm.filterRemote) {
+          if (dates.length > 0) {
+            column.filters[0].checked = true
+            column.filters[0].data.range = dates //显示的值
+            column.filters[0].data.beginDate = dates[0]
+            column.filters[0].data.endDate = dates[1]
+            vm.$refs.baseGrid.setFilter(column.field, column.filters)
+          } else {
+            column.filters[0].checked = false
+            column.filters[0].data.range = dates
+            vm.$refs.baseGrid
+              .setFilter(column.field, column.filters)
+              .then(res => {
+                this.$emit('filterChange')
+              })
+          }
+        } else {
+          const xTable = this.$refs.baseGrid
+          // 设置为选中状态
+          for (let i = 0; i < column.filters.length; i++) {
+            if (!column.filters[i].value) {
+              column.filters[i].checked = false
+            } else {
+              column.filters[i].checked = true
+            }
+          }
+          // 修改条件之后，需要手动调用 updateData 处理表格数据
+          xTable.updateData()
+        }
+      },
+      inputChange(column) {
+        let vm = this
+        if (vm.filterRemote) {
+          for (let i = 0; i < column.filters.length; i++) {
+            if (!column.filters[i].value) {
+              column.filters[i].checked = false
+            } else {
+              column.filters[i].checked = true
+            }
+          }
+          vm.$refs.baseGrid.setFilter(column.field, column.filters).then(res => {
+            this.$emit('filterChange')
+          })
+        } else {
+          const xTable = this.$refs.baseGrid
+          // 设置为选中状态
+          for (let i = 0; i < column.filters.length; i++) {
+            if (!column.filters[i].value) {
+              column.filters[i].checked = false
+            } else {
+              column.filters[i].checked = true
+            }
+          }
+          // 修改条件之后，需要手动调用 updateData 处理表格数据
+          xTable.updateData()
+        }
+      },
+      textEditEnter(valueInfo) {
+        if (this.textValue) {
+          valueInfo.visible = false
+          valueInfo.value = this.textValue
+          this.textValue = ''
+        }
+        this.$emit('searchBtnClick', null)
+      },
+      editPopupVisibleChange(editKey, originValue, valueIndex, visible) {
+        if (visible === true) {
+          let vm = this
+          this.textValue = originValue.value
+          setTimeout(() => {
+            vm.$refs[editKey + '_edit_' + valueIndex][0].$el.focus()
+            vm.$refs[editKey + '_edit_' + valueIndex][0].$el.select()
+          }, 10)
+        }
+      },
+      closeTagPreventDefault(colValue, valueIndex, event) {
+        colValue.values.splice(valueIndex, 1)
+        event.preventDefault()
+        this.$emit('searchBtnClick', null)
+      },
+      //右键菜单事件
+      contextMenuClickEvent({ menu, row, column }) {
+        let vm = this
+        const $table = this.$refs.baseGrid
+        if (column && column.field) {
+          if (
+            menu.code !== 'sort' &&
+            menu.code !== 'copy' &&
+            menu.code !== 'refresh'
+          ) {
+            $table.sort(column.field, menu.code)
+          }
+        }
+        switch (menu.code) {
+          case 'copy':
+            // 示例
+            if (row && column) {
+              if (XEClipboard.copy(row[column.property])) {
+                VXETable.modal.message({
+                  content: '已复制到剪贴板！',
+                  status: 'success'
+                })
+              }
+            }
+            break
+          case 'clearFilter':
+            // 示例
+            const filterList = vm.$refs.baseGrid.getCheckedFilters()
+            filterList.forEach(col => {
+              if (
+                col.column.params.controlType === 'select' ||
+                col.column.params.controlType === 'checkbox'
+              ) {
+                col.column.filters = [{ data: [] }]
+              } else {
+                col.column.filters = []
+              }
+            })
+            // vm.$refs.baseGrid.clearFilter()
+            vm.$emit('filterChange')
+            break
+          case 'desc':
+            if (this.sortRemote) {
+              this.$emit('sortChange', $table.getSortColumns())
+            }
+            break
+          case 'asc':
+            if (this.sortRemote) {
+              this.$emit('sortChange', $table.getSortColumns())
+            }
+            break
+          case 'clearSort':
+            let sortColumns = $table.getSortColumns()
+            sortColumns.forEach(col => {
+              col.column.order = ''
+            })
+            if (this.sortRemote) {
+              this.$emit('sortChange', [])
+            }
+            break
+          case 'refresh':
+            this.$emit('sortChange', $table.getSortColumns())
+            break
+          default:
+        }
+      },
+      getFiltersList() {
+        return this.filterExpression
+        // let vm = this
+        // const filterList = vm.$refs.baseGrid.getCheckedFilters()
+  
+        // let expList = []
+        // expList = vm.getExpTags(filterList)
+        // return expList
+      },
+      filterChange({ column, property, values, datas, filterList, $event }) {
+        let vm = this
+        //如果不是远程筛选 就不emit了
+        if (!this.filterRemote) {
+          return
+        }
+        vm.$emit('filterChange')
+      },
+      // sysRowStateFilter(scope){
+      //     return scope.row.sysRowState!==scope.value
+      // },
+      initColumns(originCol) {
+        let vm = this
+        let colParams = {}
+  
+        let colInfo = {
+          field: originCol.field,
+          title: originCol.title,
+          visible: true
+        }
+  
+        let customSlot = {};
+          if (originCol.slots) {
+            customSlot = originCol.slots
+          }
+  
+        if (originCol.treeNode === true) {
+          colInfo['treeNode'] = true
+        }
+        if (originCol.isMerge === true) {
+          //合并行
+          this.mergeFields.push(originCol.field)
+        }
+        //判断originCol的showHeaderOverflow是否为true
+        // if (originCol.showHeaderOverflow) {
+        //   //当表头内容过长时显示为省略号
+        //   colInfo['showHeaderOverflow'] = false
+        // }
+        //判断组件传递自定义属性filterRemote值是否为true
+        // if (this.filterRemote) {
+        //   //是就给colInfo加一个属性showHeaderOverflow并赋值false，这样当表头内容过长时就不会显示为省略
+        //   colInfo['showHeaderOverflow'] = false
+        // }
+        //判断originCol的filters是否为数组 暂时不知道是否有被用到
+        if (XEUtils.isArray(originCol.filters)) {
+          //是就给colInfo加一个属性filters并把传入的形参传给新加的属性
+            colInfo['filters'] = originCol.filters
+        }
+        //vxe-table列配置
+        //判断originCol的filterMethod是否为true
+        if (originCol.filterMethod) {
+          //是就给colInfo加一个属性filterMethod并把形参赋值给新加的属性，这样
+          colInfo['filterMethod'] = originCol.filterMethod
+        }
+        if (originCol.align) {
+          colInfo['align'] = originCol.align
+        }
+        if (originCol.visible === false) {
+          colInfo.visible = false
+        }
+        //在不启用 筛选框的情况下 可以显示  因为 表头分组的关系
+        if (originCol.sortable === true) {
+          colInfo['sortable'] = true
+          colInfo['sortType'] = 'auto'
+        }
+        if (originCol.fixed) {
+          colInfo['fixed'] = originCol.fixed === 'left' ? 'left' : 'right'
+        }
+        if (originCol.formatter) {
+          colInfo['formatter'] = originCol.formatter
+        }
+        if (originCol.params) {
+          colParams = originCol.params
+        }
+  
+        if (originCol.footerSum === true) {
+          this.showFooter = true
+          this.footerSum.push(colInfo.field)
+        }
+        if (originCol.route) {
+          colParams['route'] = originCol.route
+          customSlot['default'] = 'linkCell'
+        }
+        //默认text
+        if (!originCol.controlType) {
+          originCol.controlType = controlType.text
+        }
+  
+        if (originCol.controlType === controlType.customRadio) {
+          colInfo['type'] = 'radio'
+          customSlot['radio'] = 'customRadio'
+          customSlot['footer'] = 'customFooter'
+        }
+        if (originCol.isExpand === true) {
+          colInfo['type'] = 'expand'
+          customSlot['content'] = 'expandContent'
+          customSlot['default'] = 'expandDefault'
+        }
+        if (originCol.controlType === controlType.customCell) {
+            customSlot['default']= 'customCell'
+            customSlot['footer'] = 'customFooter'
+        }
+        if (originCol.isCheckbox === true) {
+          colInfo['type'] = 'checkbox'
+          // colInfo['field'] = 'matCode'
+        }
+        colParams.dataSource = originCol.dataSource
+        if (originCol.rules) {
+          this.validRules[colInfo.field] = originCol.rules
+        }
+        if (originCol.precision) {
+          colParams['precision'] = originCol.precision
+          //加入验证逻辑
+          // if(!this.validRules[colInfo.field]){
+          //     this.validRules[colInfo.field] = []
+          // }
+          // this.validRules[colInfo.field].push({
+          //     validator: this.validPrecision
+          // })
+        }
+        if (XEUtils.isInteger(originCol.min)) {
+          colParams['min'] = originCol.min
+        }
+        if (XEUtils.isInteger(originCol.max)) {
+          colParams['max'] = originCol.max
+        }
+        // else{
+        //     colParams['precision'] = 10 //默认十位小数
+        // }
+        colParams['le'] = originCol.le
+        colParams['controlType'] = originCol.controlType
+        colParams['edit'] = false
+        if (originCol.editStates) {
+          colParams['editStates'] = originCol.editStates
+        }
+        if (originCol.editStatuss) {
+          colParams['editStatuss'] = originCol.editStatuss
+        }
+        if (originCol.width) {
+          colInfo.width = originCol.width
+        } else {
+          colInfo.width = 100
+        }
+        customSlot['default'] = 'default';
+        if (originCol.controlType === 'operation') {
+          customSlot['default'] = 'operation_edit'
+        }
+        
+        if (
+          originCol.editStates &&
+          originCol.editStates.length > 0 &&
+          originCol.edit === true
+        ) {
+          let tempAutoSelect = true
+          let tempAutoFocus = '.inner-cell-control'
+          switch (originCol.controlType) {
+            case controlType.number:
+              tempAutoFocus = '.ant-input-number-input'
+              break
+            case controlType.pulldown:
+              tempAutoFocus = '.inner-cell-control>input'
+              break
+            case controlType.date:
+              tempAutoFocus = '.ant-calendar-picker-input'
+              break
+            case controlType.time:
+              tempAutoFocus = '.ant-time-picker-input'
+              tempAutoSelect = false
+              break
+            case controlType.checkbox:
+              tempAutoFocus = '.ant-checkbox-input'
+              break
+            case controlType.select:
+              tempAutoSelect = false
+              break
+          }
+
+          
+          //可以编辑
+          colInfo.editRender = {
+            // autofocus: tempAutoSelect,
+            // autoselect:tempAutoSelect,
+            // name:'$input' //originCol.controlType + '_edit',
+          };
+          //编辑插槽
+          customSlot['edit'] = originCol.controlType + '_edit';
+        //   colInfo['editRender'] = {
+        //     name: originCol.controlType + '_edit',
+        //     autofocus: tempAutoFocus,
+        //     autoselect: tempAutoSelect
+        //   }
+        //   if (this.edit === true) {
+        //     colParams['edit'] = true
+        //     colInfo['editRender']['enabled'] = true
+        //   }
+        }
+        if (originCol.controlType === controlType.pulldown) {
+          colParams['api'] = originCol.api
+          colParams['defaultExpression'] = originCol.defaultExpression
+          colParams['pageSize'] = originCol.pageSize
+          colParams['optBtns'] = originCol.optBtns
+          colParams['displayField'] = originCol.displayField
+          colParams['popupAddName'] = originCol.popupAddName
+          colParams['popupAddPath'] = originCol.popupAddPath
+          colParams['columns'] = originCol.columns
+          colParams['isLocalData'] = originCol.isLocalData
+          colParams['isMultiSelect'] = originCol.isMultiSelect
+          colParams['controlEdit'] = true
+        }
+        if (originCol.controlType === controlType.text) {
+          colParams['controlEdit'] = true
+        }
+        if (originCol.controlType === controlType.select) {
+          colParams['controlEdit'] = true
+        }
+        if (originCol.controlType === controlType.checkbox) {
+          colParams['controlEdit'] = true
+        }
+        if (originCol.controlType === controlType.date) {
+          colParams['pastDate'] = originCol.pastDate
+        }
+        colParams['disableUserVisible'] = originCol.disableUserVisible === true
+        colInfo['params'] = colParams
+        colInfo['params']['sysOriValue'] = {}
+        if (originCol.children) {
+          colInfo['children'] = []
+          for (let x = 0; x < originCol.children.length; x++) {
+            colInfo['children'].push(this.initColumns(originCol.children[i]))
+          }
+        }
+        //防止报错 有slots值就走前面 没有slots这个键key就走后面
+        if (
+          originCol.controlType !== controlType.operation &&
+          originCol.filters === true
+        ) {
+          let filterTypeName = `${originCol.controlType}_filter`
+            //网格筛选
+            colInfo['filters'] = [{ data: { bindingValues: [], displayValues: [] }, checked: false }]
+            colInfo['filterMultiple'] = false
+            // colInfo['filterRender'] ={name: filterTypeName,showFilterFooter:false}
+            customSlot['filter'] = filterTypeName
+        }
+        // console.debug(customSlot)
+        colInfo.slots = customSlot
+        return colInfo
+      },
+      validPrecision({ cellValue, column }) {
+        if (XEUtils.isNumber(cellValue)) {
+          let reg = new RegExp(
+            '^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,' +
+              column.params.precision +
+              '})?$'
+          )
+          if (!reg.test(cellValue)) {
+            return new Error('超过小数点' + column.params.precision + '位')
+          }
+        }
+      },
+      numberInputKeyDown(scope, event) {
+        let rowTag = scope.row
+        let columnTag = scope.column
+        let ROW_XIDS = scope.data.map(mapItem => mapItem._XID)
+        let currentRowIndex = ROW_XIDS.indexOf(rowTag._XID)
+        let targetRow
+        switch (event.keyCode) {
+          case 39: //向右
+            //当前光标已在输入文本末尾，向右找到第一个可编辑的列，设为编辑状态
+            break
+          case 37: //向左
+            //当前光标已在输入文本开头，向左找到第一个可编辑的列，设为编辑状态
+            break
+          case 38: //向上
+            if (0 < currentRowIndex - 1) {
+              targetRow = scope.data[currentRowIndex - 1]
+              this.$refs.baseGrid.setActiveCell(targetRow, columnTag)
+            }
+            break
+          case 40: //向下
+            if (scope.data.length > currentRowIndex + 1) {
+              targetRow = scope.data[currentRowIndex + 1]
+              this.$refs.baseGrid.setActiveCell(targetRow, columnTag)
+            }
+            break
+        }
+      },
+      getValid(column, row) {
+        if (column.params.rules) {
+          v.verify(row[column.property], column.params.rules).then(validData => {
+            return 'davis'
+          })
+        }
+      },
+      getGridView() {
+        return this.$refs.baseGrid
+      },
+      //拖动输入框功能 未启用
+      initColumnDrop() {
+        this.$nextTick(() => {
+          const $table = this.$refs.baseGrid
+          this.sortable2 = Sortable.create(
+            $table.$el.querySelector(
+              '.body--wrapper>.vxe-table--header .vxe-header--row'
+            ),
+            {
+              handle: '.vxe-header--column:not(.col--fixed)',
+              onEnd: ({ item, newIndex, oldIndex }) => {
+                const { fullColumn, tableColumn } = $table.getTableColumn()
+                const targetThElem = item
+                const wrapperElem = targetThElem.parentNode
+                const newColumn = fullColumn[newIndex]
+                if (newColumn.fixed) {
+                  // 错误的移动
+                  if (newIndex > oldIndex) {
+                    wrapperElem.insertBefore(
+                      targetThElem,
+                      wrapperElem.children[oldIndex]
+                    )
+                  } else {
+                    wrapperElem.insertBefore(
+                      wrapperElem.children[oldIndex],
+                      targetThElem
+                    )
+                  }
+                  return this.$XModal.message({
+                    content: '固定列不允许拖动！',
+                    status: 'error'
+                  })
+                }
+                // 转换真实索引
+                const oldColumnIndex = $table.getColumnIndex(
+                  tableColumn[oldIndex]
+                )
+                const newColumnIndex = $table.getColumnIndex(
+                  tableColumn[newIndex]
+                )
+                // 移动到目标列
+                const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
+                fullColumn.splice(newColumnIndex, 0, currRow)
+                $table.loadColumn(fullColumn)
+              }
+            }
+          )
+        })
+      },
+      sortChange({ column, property, order, sortBy, sortList, $event }) {
+  
+        if(this.filterRemote){
+          let tempSortList = []
+          XEUtils.arrayEach(sortList, (loopSort) => {
+            tempSortList.push([loopSort.field, loopSort.order])
+          });
+          this.$emit('sortChange', tempSortList)
+        }
+  
+        // let vm = this
+        // const $table = this.$refs.baseGrid
+        // //有children说明是 有筛选框
+        // if (column.children && column.children.length > 0) {
+        //   if (column.children[0].order == order) {
+        //     $table.clearSort(column.children[0].field)
+        //     column.children[0].order = null
+        //   } else if (order == 'asc') {
+        //     $table.sort(column.children[0].property, order)
+        //   } else if (order == 'desc') {
+        //     $table.sort(column.children[0].property, order)
+        //   }
+        // } else {
+        //   if (column.order == order) {
+        //     $table.clearSort(column.field)
+        //     column.order = null
+        //   } else if (order == 'asc') {
+        //     $table.sort(column.property, order)
+        //   } else if (order == 'desc') {
+        //     $table.sort(column.property, order)
+        //   }
+        // }
+        //远程emit 不是的话就调vxe的sort
+        // if (vm.sortRemote) {
+          // if (column.children && column.children.length > 0) {
+          //   if (column.children[0].order == order) {
+          //     column.children[0].order = null
+          //   } else
+          //     if (order == 'asc') {
+          //       column.children[0].order = order
+          //     } else if (order == 'desc') {
+          //       column.children[0].order = order
+          //     }
+          // } else {
+          //   if (column.order == order) {
+          //     column.order = null
+          //   } else
+          //     if (order == 'asc') {
+          //       column.order = 'asc'
+          //     } else if (order == 'desc') {
+          //       column.order = 'desc'
+          //     }
+          // }
+        //   let tmp = $table.getSortColumns()
+        //   vm.$emit('sortChange', tmp)
+        // }
+      },
+      currentChange(scope) {
+        this.$emit('currentChange', scope.row)
+      },
+      pageSizeChange(page, pageSize) {
+        this.$emit('pageSizeChange', page, pageSize)
+      },
+      pageChange(page, pageSize) {
+        this.$emit('pageChange', page, pageSize)
+      },
+      getCheckboxRecords() {
+        return this.$refs.baseGrid.getCheckboxRecords(true)
+      },
+      setCheckboxRow(rows, checked) {
+        this.$refs.baseGrid.setCheckboxRow(rows, checked)
+      },
+      setAllCheckboxRow(checked) {
+        return this.$refs.baseGrid.setAllCheckboxRow(checked)
+      },
+      reloadRow(rows, record) {
+        return this.$refs.baseGrid.reloadRow(rows, record)
+      },
+      /**
+       * 确认保存用户自定义表格信息
+       */
+      confirmUserDefineColumn() {
+        let vm = this
+        let postData = {
+          moduleCode: this.moduleCode,
+          dataCode: this.dataCode,
+          fields: []
+        }
+        let tableCollectColumn = this.$refs.baseGrid.getTableColumn()
+          .collectColumn
+        let baseAdjustGridViewColumn = this.$refs.baseAdjustGridView
+          .adjustUserDefineColumns
+        // XEUtils.arrayEach(this.userDefineColumns, (loopCol) => {
+        XEUtils.arrayEach(baseAdjustGridViewColumn, loopCol => {
+          let tempData = {
+            field: loopCol.field,
+            sort: postData.fields.length + 1,
+            hidden: loopCol.visible !== true,
+            width: loopCol.width
+            // width: colWidth,
+          }
+          postData.fields.push(tempData)
+          let tempCol = XEUtils.findTree(
+            tableCollectColumn,
+            p => p.field === loopCol.field
+          ).item
+          tempCol.visible = loopCol.visible
+          tempCol.width = loopCol.width
+          // tempCol.width = colWidth;
+          //设置顺序
+          tempCol.params['tempCustomSort'] = tempData.sort
+          this.setCustomGridParentSort(
+            tableCollectColumn,
+            tempCol.parentId,
+            tempData.sort
+          )
+        })
+        saveUserModuleDataFieldApi(postData)
+          .then(res => {
+            //设置表格顺序
+            tableCollectColumn = XEUtils.orderBy(
+              tableCollectColumn,
+              p => p.params.tempCustomSort
+            )
+            vm.$refs.baseGrid.reloadColumn(tableCollectColumn)
+            //清空store缓存
+            vm.$store.dispatch(
+              'setModuleLoadViewInfo',
+              this.moduleCode,
+              res.content
+            )
+            vm.showGridColumnUserDefine = false
+          })
+          .catch(() => {})
+      },
+      setCustomGridParentSort(tableCollectColumn, parentId, sort) {
+        let tempParentCol = XEUtils.findTree(
+          tableCollectColumn,
+          p => p.id === parentId
+        )
+        if (tempParentCol) {
+          tempParentCol.item.params['tempCustomSort'] = sort
+          this.setCustomGridParentSort(
+            tableCollectColumn,
+            tempParentCol.item.parentId,
+            sort
+          )
+        }
+      },
+      getFetchField() {
+        let tempStr = ''
+        let tempFullColumn = this.$refs.baseGrid.getTableColumn().fullColumn
+        XEUtils.arrayEach(tempFullColumn, loopCol => {
+          if (!loopCol.field) {
+            return
+          }
+          if (
+            loopCol.visible === true ||
+            loopCol.params.disableUserVisible === true
+          ) {
+            tempStr = tempStr + loopCol.field + ','
+          }
+        })
+        return tempStr.substring(0, tempStr.length - 1)
+      },
+      clickHeader() {
+        let tableCollectColumn = XEUtils.toTreeArray(
+          this.$refs.baseGrid.getTableColumn().collectColumn
+        )
+        this.userDefineColumns = XEUtils.filter(
+          tableCollectColumn,
+          p => !p.children && p.params.disableUserVisible !== true
+        )
+        this.showGridColumnUserDefine = true
+      },
+      operationButtonClick(btn, scope) {
+        if (btn.edit === false) {
+          return
+        }
+        this.$emit('operationBtnClick', btn, scope.row, this)
+      },
+      activeCellMethod({ row, column }) {
+        // let emitData ={
+        //   row:row,
+        //   column:column,
+        //   edit:column.params.edit
+        // }
+        //  this.$emit('activeCellMethod',emitData)
+  
+        if (row['sysDisableEdit'] === true) {
+          //禁止编辑
+          return false
+        }
+        console.debug('davis activeCellMethod')
+  
+        return column.params.edit
+      },
+      editActived(scope) {
+        let colElId = scope.column.id
+        let rowElId = scope.row._X_ROW_KEY
+        //延迟设置输入框自动获取焦点以及选中
+        this.$nextTick(()=>{
+          let cellEl = scope.$table.$el.querySelector('[rowid="'+rowElId+'"]>[colid="'+colElId+'"]')
+          let inputEl =  cellEl.querySelector('input')
+          if(inputEl){
+            inputEl.focus()
+            inputEl.select()
+          }
+        })
+        this.$emit('editActived', scope)
+      },
+      setColumnEdit(field, edit) {
+        for (let i = 0; i < this.internalColumns.length; i++) {
+          if (this.internalColumns[i].children) {
+            let colInfo = XEUtils.find(
+              this.internalColumns[i].children,
+              p => p.field === field
+            )
+            if (colInfo) {
+              colInfo.editRender.enabled = edit
+              colInfo.params.edit = edit
+            }
+          }
+        }
+        this.$refs.baseGrid.refreshColumn()
+      },
+      setEdit(currentState, currentStatus) {
+        //设置添加按钮
+        if (this.pager.buttons) {
+          for (let i = 0; i < this.pager.buttons.length; i++) {
+            let editVisible = this.getColumnEdit(
+              this.pager.buttons[i].edit,
+              currentState,
+              currentStatus,
+              this.pager.buttons[i].editStates,
+              this.pager.buttons[i].editStatuss,
+              this.pager.buttons[i].visibleStates,
+              this.pager.buttons[i].visibleStatuss
+            )
+            this.$set(this.pager.buttons[i], 'visible', editVisible.visible)
+            this.$set(this.pager.buttons[i], 'edit', editVisible.edit)
+            this.$forceUpdate()
+          }
+        }
+        // if (this.pager.add) {
+        //   this.addBtnEdit = false
+        //   this.addBtnEdit = this.getColumnEdit(
+        //     this.addBtnEdit,
+        //     currentState,
+        //     currentStatus,
+        //     this.pager.add.editStates,
+        //     this.pager.add.editStatuss
+        //   )
+        // }
+        //设置网格可编辑状态
+  
+        if (this.editStates.indexOf(currentState) > -1) {
+          this.gridEdit = true
+        } else {
+          this.gridEdit = false
+        }
+        if (currentStatus && this.editStatuss) {
+          if (this.editStatuss.indexOf(currentStatus) > -1) {
+            this.gridEdit = true
+          } else {
+            this.gridEdit = false
+          }
+        }
+        for (let i = 0; i < this.internalColumns.length; i++) {
+          if (!this.internalColumns[i].params) {
+            continue
+          }
+          this.internalColumns[i].params.edit = false
+          if (
+            this.internalColumns[i].params.controlType === controlType.operation
+          ) {
+            for (
+              let j = 0;
+              j < this.internalColumns[i].params.columns.length;
+              j++
+            ) {
+              this.internalColumns[i].params.columns[j].edit = false
+              //设置工具栏可编辑状态
+              let editVisible = this.getColumnEdit(
+                this.internalColumns[i].params.columns[j].edit,
+                currentState,
+                currentStatus,
+                this.internalColumns[i].params.columns[j].editStates,
+                this.internalColumns[i].params.columns[j].editStatuss,
+                this.internalColumns[i].params.columns[j].visibleStates,
+                this.internalColumns[i].params.columns[j].visibleStatuss
+              )
+              this.$set(
+                this.internalColumns[i].params.columns[j],
+                'visible',
+                editVisible.visible
+              )
+              this.$set(
+                this.internalColumns[i].params.columns[j],
+                'edit',
+                editVisible.edit
+              )
+            }
+            continue
+          }
+          //设置网格列编辑状态
+          if (this.gridEdit === true) {
+            let editVisible = this.getColumnEdit(
+              this.internalColumns[i].params.edit,
+              currentState,
+              currentStatus,
+              this.internalColumns[i].params.editStates,
+              this.internalColumns[i].params.editStatuss,
+              this.internalColumns[i].params.visibleStates,
+              this.internalColumns[i].params.visibleStatuss
+            )
+            this.internalColumns[i].params.edit = editVisible.edit
+            if (this.internalColumns[i].editRender) {
+              this.internalColumns[i].editRender.enabled = editVisible.edit
+            }
+          }
+        }
+      },
+      getColumnEdit(
+        originEdit,
+        currentState,
+        currentStatus,
+        editStates,
+        editStatuss,
+        visibleStates,
+        visibleStatuss
+      ) {
+        //显示状态控制
+        let fieldVisible = true
+        if (currentState && visibleStates && visibleStates.length > 0) {
+          //有显示状态控制
+          if (visibleStates.indexOf(currentState) < 0) {
+            fieldVisible = false
+          }
+        }
+        if (currentStatus && visibleStatuss && visibleStatuss.length > 0) {
+          if (visibleStatuss.indexOf(currentStatus) < 0) {
+            fieldVisible = false
+          }
+        }
+  
+        //编辑状态控制
+        if (currentState && editStates) {
+          originEdit = editStates.indexOf(currentState) > -1
+        }
+        if (currentStatus && editStatuss) {
+          originEdit = editStatuss.indexOf(currentStatus) > -1
+        }
+        return { visible: fieldVisible, edit: originEdit }
+      },
+      cellValueChange(scope, e) {
+        console.debug(scope.column.field+'value change')
+        if (
+          scope.row['sysRowState'] !== 'add' &&
+          scope.row['sysRowState'] !== 'delete'
+        ) {
+          scope.row['sysRowState'] = 'update'
+        }
+        this.$emit('valueChange', scope, this.dataName)
+        this.$refs.baseGrid.updateStatus(scope)
+      },
+      /**
+       * 异步插入
+       */
+      async insertAtAsync(row, index, autoSelect = true) {
+        let vm = this
+        row['sysRowState'] = 'add'
+        if (!row['id']) {
+          row['id'] = this.$store.getters.newId() + ''
+        }
+        let insertRow = await this.$refs.baseGrid.insertAt(row, index)
+        if (autoSelect === true) {
+          this.$refs.baseGrid.setActiveRow(row)
+          this.$refs.baseGrid.setCurrentRow(row)
+          this.$emit('currentChange', row)
+        }
+        return insertRow
+      },
+      insertAt(row, index, autoSelect = true, callback) {
+        let vm = this
+        row['sysRowState'] = 'add'
+        if (!row['id']) {
+          row['id'] = this.$store.getters.newId() + ''
+        }
+        this.$refs.baseGrid.insertAt(row, index).then(({ row }) => {
+          if (callback) {
+            callback(row)
+          }
+  
+          if (autoSelect === true) {
+            vm.$refs.baseGrid.setActiveRow(row)
+            vm.$refs.baseGrid.setCurrentRow(row)
+            // vm.rows.push(row)
+            vm.$emit('currentChange', row)
+          }
+        })
+      },
+      // insertTree(row,)
+      setCurrentRow(rowInfo) {
+        let vm = this
+        this.$refs.baseGrid.setCurrentRow(rowInfo).then(() => {
+          vm.$emit('currentChange', vm.$refs.baseGrid.getCurrentRecord())
+        })
+      },
+      getCurrentRow() {
+        return this.$refs.baseGrid.getCurrentRecord()
+      },
+      checkBoxChanged({ checked, records, row }) {
+        this.$emit('checkBoxChanged', checked, records, row)
+      },
+      checkBoxAllChanged({ checked, records }) {
+        this.$emit('checkBoxAllChanged', checked, records)
+      },
+      clearCurrentRow() {
+        this.$refs.baseGrid.clearCurrentRow()
+      },
+      clearCheckboxReserve() {
+        this.$refs.baseGrid.clearCheckboxReserve()
+      },
+      /**
+       * 表尾按钮操作
+       */
+      pagerBtnClick(pagerBtnInfo) {
+        this.$emit('pagerButtonClick', pagerBtnInfo, this)
+      },
+      /**
+       * 删除行
+       */
+      removeRow(row) {
+        return this.$refs.baseGrid.remove(row)
+      },
+      /**
+       * 删除所有行
+       */
+      removeAll() {
+        return this.$refs.baseGrid.remove()
+      },
+      getTableData() {
+        return this.$refs.baseGrid.getTableData().fullData
+      },
+      getVisibleData() {
+        return this.$refs.baseGrid.getTableData().visibleData
+      },
+      /**
+       * 获取更新的行
+       */
+      getUpdateRows() {
+        let tempRows = []
+        let tempTableData = this.$refs.baseGrid.getTableData().fullData
+        for (let i = 0; i < tempTableData.length; i++) {
+          let tempRow = tempTableData[i]
+          if (this.$refs.baseGrid.isInsertByRow(tempRow) === true) {
+            tempRow['sysRowState'] = 'add'
+            tempRows.push(tempRow)
+            continue
+          }
+          if (this.$refs.baseGrid.isUpdateByRow(tempRow) === true) {
+            //   tempRow['sysRowState'] = 'update'
+            //   tempRows.push(tempRow)
+            //   continue
+          }
+        }
+  
+        let tempRemoveRows = this.$refs.baseGrid.getRemoveRecords()
+        for (let i = 0; i < tempRemoveRows.length; i++) {
+          let tempRow = tempRemoveRows[i]
+          tempRow['sysRowState'] = 'delete'
+          tempRows.push(tempRow)
+        }
+        let tempUpdateRows = this.$refs.baseGrid.getUpdateRecords()
+        for (let i = 0; i < tempUpdateRows.length; i++) {
+          let tempRow = tempUpdateRows[i]
+          tempRow['sysRowState'] = 'update'
+          tempRows.push(tempRow)
+        }
+  
+        return tempRows
+      },
+      async fullValidate() {
+        const errMap = await this.$refs.baseGrid
+          .fullValidate(true)
+          .catch(errMap => errMap)
+        let errorMsgList = []
+        if (errMap) {
+          Object.values(errMap).forEach(errList => {
+            errList.forEach(params => {
+              const { rowIndex, column, rules, row } = params
+              let tempRowIndex = this.$refs.baseGrid.getVTRowIndex(row)
+              rules.forEach(rule => {
+                errorMsgList.push(
+                  `第 ${tempRowIndex + 1} 行 ${column.title} 校验错误：${
+                    rule.message
+                  }`
+                )
+              })
+            })
+          })
+        }
+  
+        return errorMsgList
+      },
+      preSearch(searchInfo, scope) {
+        this.$emit('preSearch', searchInfo, scope)
+      },
+      pulldownBtnClick(btn) {
+        this.$emit('pulldownBtnClick', btn)
+      },
+      pulldownMultiSelect(scope, pulldownView, selectRows) {
+        //第一行选中
+        pulldownView.setLinkValue(selectRows[0], scope.row)
+        this.cellValueChange(scope)
+        let vm = this
+        for (let i = 1; i < selectRows.length; i++) {
+          let tempSelectRow = selectRows[i]
+          this.$emit('defaultRow', newRow => {
+            pulldownView.setLinkValue(tempSelectRow, newRow)
+            vm.insertAt(newRow, -1, false, insertRow => {
+              vm.cellValueChange({ row: insertRow, column: scope.column })
+            })
+          })
+        }
+      },
+      resizableChange(scope) {
+        this.$emit('resizableChange', scope)
+      },
+      setVisiable(fields, visible) {
+        fields.forEach(field => {
+          let column = this.$refs.baseGrid.getColumnByField(field)
+          column.visible = visible
+        })
+        this.$refs.baseGrid.refreshColumn()
+      },
+      reloadColumn(columns) {
+        this.internalColumns = []
+        if (this.showSeq) {
+          this.internalColumns.push({
+            type: 'seq',
+            fixed: 'left',
+            width: 50,
+            slots: {
+              header: 'seqHeader'
+            },
+            params: {
+              disableUserVisible: true
+            }
+          })
+        }
+        if (this.showCheckBox) {
+          this.internalColumns.push({
+            type: 'checkbox',
+            fixed: 'left',
+            width: 40,
+            params: {
+              disableUserVisible: true
+            }
+          })
+        }
+        columns.forEach(column => {
+          this.internalColumns.push(this.initColumns(column))
+        })
+        this.$refs.baseGrid.refreshColumn()
+      },
+      addRules(fields, rules) {
+        fields.forEach(field => {
+          this.$set(this.validRules, field, rules)
+        })
+        this.$refs.baseGrid.refreshColumn()
+      },
+      /**
+       * 表尾
+       */
+      footerMethod({ columns, data }) {
+        if (this.footerSum.length > 0) {
+          return [
+            columns.map((column, columnIndex) => {
+              if (columnIndex === 0) {
+                return '合计'
+              }
+              if (this.footerSum.includes(column.property)) {
+                let tempSumVal = XEUtils.sum(data, column.property)
+                if (
+                  column.formatter &&
+                  column.formatter !== 'defaultFormat' &&
+                  VXETable.formats.store[column.formatter]
+                ) {
+                  tempSumVal = VXETable.formats.store[column.formatter]({
+                    cellValue: tempSumVal
+                  })
+                }
+                return tempSumVal
+              }
+              return null
+            })
+          ]
+        } else {
+          return []
+        }
+      },
+      cellClick({ row, column }) {
+        this.$emit('cellClick', { row, column })
+        //判断是否可以跳转
+        if (
+          this.gridEdit != true ||
+          !(column.editRender && column.editRender.enabled === true)
+        ) {
+          if (column.params && column.params.route) {
+            let tempRouteName = column.params.route.name
+            if (XEUtils.isArray(tempRouteName)) {
+              //需要不同条件跳转不同页面
+              for (let i = 0; i < tempRouteName.length; i++) {
+                if (tempRouteName[i].value === row[tempRouteName[i].field]) {
+                  tempRouteName = tempRouteName[i].name
+                  break
+                }
+              }
+            }
+  
+            this.$router.pushRoute({
+              name: tempRouteName,
+              query: { id: row[column.params.route.field] }
+            })
+            return
+          }
+        }
+        // 判断当前网格是否可以编辑状态
+        if (this.gridEdit !== true) {
+          return
+        }
+        if (this.$refs.baseGrid.isActiveByRow(row) === true) {
+          //判断当前行是否是编辑行
+          return
+        }
+        // column.editRender.enabled = false
+        if (column.editRender && column.editRender.enabled === true) {
+          this.$refs.baseGrid.setActiveCell(row, column)
+        } else {
+          this.$refs.baseGrid.setActiveRow(row)
+        }
+      },
+      customSetActive(id) {
+        let fullData = this.$refs.baseGrid.getTableData().fullData
+        let row = fullData.find(x => x.id == id)
+        this.$refs.baseGrid.setCurrentRow(row)
+      },
+      gridRowStyle(scope) {},
+      bodyScroll(scrollInfo) {
+        this.$emit('scroll', scrollInfo)
+        // if (scrollInfo.isX === true) {
+        //   // this.$refs.lineArea.style.marginLeft =
+        //   //   (scrollInfo.scrollLeft-(this.fixedColWidth-this.colWidth)) * -1 + 'px'
+  
+        //   // this.$refs.headMonth.scrollTo(scrollInfo.scrollLeft)
+        //   this.$refs.headDay.scrollTo(scrollInfo.scrollLeft)
+        //   this.$refs.headHour.scrollTo(scrollInfo.scrollLeft)
+        // }
+      },
+      getRadioRecord(isFull) {
+        return this.$refs.baseGrid.getRadioRecord(isFull)
+      },
+      setRadioRow(rowInfo) {
+        this.$refs.baseGrid.setRadioRow(rowInfo)
+      },
+      editClosedEvent({ row, column }) {
+        // const $table = this.$refs.baseGrid
+        // const field = column.property
+        // const cellValue = row[field]
+        // $table.reloadRow(row, null, field)
+        // 判断单元格值是否被修改
+        // if ($table.isUpdateByRow(row, field)) {
+        //   $table.reloadRow(row, null, field)
+        //   // setTimeout(() => {
+        //   //   this.$XModal.message({
+        //   //     content: `局部保存成功！ ${field}=${cellValue}`,
+        //   //     status: 'success'
+        //   //   })
+        //   //   // 局部更新单元格为已保存状态
+        //   //   $table.reloadRow(row, null, field)
+        //   // }, 300)
+        // }
+      },
+      // 通用行合并函数（将相同多列数据合并为一行）
+      rowspanMethod({ row, _rowIndex, column, visibleData }) {
+        //  let fields = ['role']
+        let cellValue = row[column.property]
+        if (cellValue && this.mergeFields.includes(column.property)) {
+          let prevRow = visibleData[_rowIndex - 1]
+          let nextRow = visibleData[_rowIndex + 1]
+          if (prevRow && prevRow[column.property] === cellValue) {
+            return { rowspan: 0, colspan: 0 }
+          } else {
+            let countRowspan = 1
+            while (nextRow && nextRow[column.property] === cellValue) {
+              nextRow = visibleData[++countRowspan + _rowIndex]
+            }
+            if (countRowspan > 1) {
+              return { rowspan: countRowspan, colspan: 1 }
+            }
+          }
+        }
+      },
+      clearAll() {
+        let vm = this
+        vm.$refs.baseGrid.clearAll()
+      },
+      reloadData(data) {
+        let vm = this
+        vm.$refs.baseGrid.reloadData(data)
+      },
+      setLoading(e) {
+        this.loading = e
+      },
+      //清空筛选
+      clearFilter() {
+        let vm = this
+        // 示例
+        const filterList = vm.$refs.baseGrid.getCheckedFilters()
+        filterList.forEach(col => {
+          col.column.filters = []
+        })
+        vm.$refs.baseGrid.clearFilter()
+      },
+      filterAddExp(colInfo){
+        colInfo.filters[0].data.displayValues.push({
+            value: [null, null],
+          });
+      },
+      filterConfirm(colInfo){
+        colInfo.filters[0].data.bindingValues = [];
+          XEUtils.arrayEach(colInfo.filters[0].data.displayValues, (item) => {
+            if (colInfo.params.controlType === controlType.select) {
+              colInfo.filters[0].data.bindingValues.push(item);
+            } else {
+              if (item.value[0] || item.value[1]) {
+                colInfo.filters[0].data.bindingValues.push(item);
+              }
+            }
+          });
+          colInfo.filters[0].checked = colInfo.filters[0].data.bindingValues.length > 0;
+  
+          //设置筛选过滤条件
+          this.setFilterExpression();
+          //通知外部筛选改变事件
+          this.$emit('filterChange', { filterCol: colInfo });
+      },
+      setFilterExpression(){
+        XEUtils.clear(this.filterExpression);
+          XEUtils.clear(this.filterStr);
+          XEUtils.arrayEach(this.internalColumns, (loopColInfo) => {
+            if (!loopColInfo.filters) {
+              return
+            }
+            if (loopColInfo.filters[0].data.bindingValues.length === 0) {
+              return
+            }
+            //开始构造条件
+            let tempStr = {
+              field: loopColInfo.field,
+              title: loopColInfo.title,
+              exp: '',
+            }
+            let expStr = ''
+            let filterBindingValues = loopColInfo.filters[0].data.bindingValues;
+  
+            //筛选条件过滤
+            let colFilterExpression = { operator: 'or', expressions: [] };
+  
+            if (loopColInfo.params.controlType === controlType.select) {
+              colFilterExpression.expressions.push({
+                field: loopColInfo.field,
+                operator: 'IN',
+                value: filterBindingValues,
+              });
+              this.filterExpression.push(colFilterExpression);
+              tempStr.exp = '存在于 ' + filterBindingValues;
+              this.filterStr.push(tempStr);
+              return;
+            }
+  
+            XEUtils.arrayEach(filterBindingValues, (loopBindingValue) => {
+              let tempPushExp = {
+                field: loopColInfo.field,
+                operator: 'CO',
+                value: [],
+              };
+              switch (loopColInfo.params.controlType) {
+                case controlType.date:
+                case controlType.datetime:
+                  if (loopBindingValue.value[0] && loopBindingValue.value[1]) {
+                    tempPushExp.operator = 'RA';
+                    tempPushExp.value = loopBindingValue.value;
+                    expStr = '范围';
+                    tempStr.exp =
+                      tempStr.exp +
+                      loopBindingValue.value[0] +
+                      '到' +
+                      loopBindingValue.value[1] +
+                      '或';
+                  } else if (loopBindingValue.value[0]) {
+                    tempPushExp.operator = 'GE';
+                    tempPushExp.value = loopBindingValue.value[0];
+                    tempStr.exp = tempStr.exp + tempPushExp.value + '或';
+                    expStr = '大于等于';
+                  } else {
+                    tempPushExp.operator = 'LE';
+                    tempPushExp.value = loopBindingValue.value[1];
+                    tempStr.exp = tempStr.exp + tempPushExp.value + '或';
+                    expStr = '小于等于';
+                  }
+                  break;
+                default:
+                  tempPushExp.value = loopBindingValue.value[0];
+                  expStr = '包含';
+                  tempStr.exp = tempStr.exp + loopBindingValue.value[0] + '或';
+              }
+              colFilterExpression.expressions.push(tempPushExp);
+            });
+            this.filterExpression.push(colFilterExpression);
+            tempStr.exp = expStr + tempStr.exp.substring(0, tempStr.exp.length - 1)
+            this.filterStr.push(tempStr);
+          });
+  
+          this.toolBarConfig.enabled = this.filterExpression.length > 0
+      },
+      filterVisible({column,visible}){
+        if (visible) {
+            //重新赋值过滤的显示值
+            column.filters[0].data.displayValues = []
+            XEUtils.arrayEach(column.filters[0].data.bindingValues, (item) => {
+              column.filters[0].data.displayValues.push(item)
+            });
+            if (column.params.controlType !== controlType.select) {
+              column.filters[0].data.displayValues.push({
+                value: [null, null],
+              });
+            }
+            //设置第一个输入框光标选中
+            let tempClassName = column.field + '_filter_0';
+            setTimeout(() => {
+              document.getElementsByClassName(tempClassName)[0].children[0].select();
+              document.getElementsByClassName(tempClassName)[0].children[0].focus();
+            }, 10);
+          }
+      }
+    }
+  }
+  </script>
+  
+  <style>
+  .base-grid-view .ant-btn-link {
+    padding: 0 6px;
+  }
+  .base-grid-view .vxe-body--column.col-red {
+    background-color: rgb(227, 9, 53);
+    color: rgb(55, 55, 55);
+    /* font-weight: bold; */
+  }
+  .base-grid-view .vxe-body--column.col-orange {
+    background-color: rgb(237, 216, 20);
+    color: rgb(55, 55, 55);
+    /* font-weight: bold; */
+  }
+  .base-grid-view .vxe-body--column.col-grey {
+    background-color: rgb(140, 140, 138);
+    color: rgb(55, 55, 55);
+    /* font-weight: bold; */
+  }
+  .base-grid-view .vxe-body--column.col-blue {
+    background-color: #1890ff;
+    color: rgb(55, 55, 55);
+    /* font-weight: bold; */
+  }
+  
+  .base-grid-view .vxe-icon--caret-top {
+    color: "#c0c4cc" !important;
+  }
+  .base-grid-view .vxe-icon--caret-bottom {
+    color: "#c0c4cc" !important;
+  }
+  .vxe-icon--caret-top:hover {
+    color: #409eff;
+  }
+  .vxe-icon--caret-bottom:hover {
+    color: #409eff;
+  }
+  </style>
+  <style lang="scss" scoped>
+  .base-grid-view .vxe-header--row .vxe-header--column.sortable-ghost,
+  .base-grid-view .vxe-header--row .vxe-header--column.sortable-chosen {
+    background-color: #dfecfb;
+  }
+  .base-grid-view .vxe-header--row .vxe-header--column.col--fixed {
+    cursor: no-drop;
+  }
+  .inner-cell-control {
+    width: 100% !important;
+    min-width:unset!important;
+  }
+  .input-box {
+    width: 100%;
+    border: 1px solid;
+    min-height: 24px;
+    border-radius: 4px;
+    border-color: rgb(217, 217, 217);
+    padding-left: 5px;
+    line-height: 24px !important;
+  }
+  .test_filter {
+    text-align: left;
+    // display: inline-block;
+    // width:90%
+  }
+  .test_filter_title {
+    margin-left: 2%;
+  }
+  /*滚动条整体部分*/
+  .base-grid-view ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    z-index: 10;
+  }
+  /*滚动条的轨道*/
+  .base-grid-view ::-webkit-scrollbar-track {
+    background-color: #ffffff;
+    z-index: 10;
+  }
+  /*滚动条里面的小方块，能向上向下移动*/
+  .base-grid-view ::-webkit-scrollbar-thumb {
+    background-color: #bfbfbf;
+    border-radius: 5px;
+    border: 1px solid #f1f1f1;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    z-index: 10;
+  }
+  .base-grid-view ::-webkit-scrollbar-thumb:hover {
+    background-color: #a8a8a8;
+    z-index: 10;
+  }
+  .base-grid-view ::-webkit-scrollbar-thumb:active {
+    background-color: #787878;
+    z-index: 10;
+  }
+  /*边角，即两个滚动条的交汇处*/
+  .base-grid-view ::-webkit-scrollbar-corner {
+    background-color: #ffffff;
+    z-index: 10;
+  }
+  .draggableItem {
+    display: inline-block;
+    height: 100%;
+    line-height: 30px;
+    border: 1.3px solid #e8eaec;
+    margin: 0 !important;
+    margin: 0 10px;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    // white-space: nowrap;
+  }
+  .sortable-column-demo .vxe-header--row .vxe-header--column.sortable-ghost,
+  .sortable-column-demo .vxe-header--row .vxe-header--column.sortable-chosen {
+    background-color: #dfecfb;
+  }
+  .sortable-column-demo .vxe-header--row .vxe-header--column.col--fixed {
+    cursor: no-drop;
+  }
+  </style>