imatrix-ui 0.2.6-up → 0.2.7-up

package/packages/super-grid/src/columns-config.vue

@@ -1,427 +1,427 @@
-<template>
-  <el-dialog
-    :title="$t('superGrid.columnConfig')"
-    width="50%"
-    top="5vh"
-    append-to-body
-    :close-on-click-modal="false"
-    :model-value="true"
-    :show-close="true"
-    @open="$emit('open')"
-    @opend="$emit('opend')"
-    @close="$emit('close')"
-    @closed="$emit('closed')"
-  >
-    <div class="operation-area">
-      <el-button type="primary" size="small" @click="saveConfig">
-        {{ $t('imatrixUIPublicModel.sure') }}
-      </el-button>
-      <el-button size="small" @click="resetConfig">
-        {{ $t('imatrixUIPublicModel.reset') }}
-      </el-button>
-      <el-button size="small" @click="$emit('close')">
-        {{ $t('imatrixUIPublicModel.cancel') }}
-      </el-button>
-      <span v-if="isDragColumn" style="padding-left: 10px; color: red"
-        >({{ $t('superGrid.dragColumnOrderMessage') }})</span
-      >
-    </div>
-    <el-table
-      v-if="hasLoaded"
-      :data="columns"
-      max-height="450"
-      class="custom-config-elTable"
-    >
-      <el-table-column
-        property="label"
-        :label="$t('superGrid.label')"
-        width="220"
-      >
-        <template v-slot="scope">
-          <span class="ellipsis cell--span" :title="scope.row.label">{{
-            scope.row.label
-          }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        property="showType"
-        :label="$t('superGrid.isShow')"
-        width="120"
-      >
-        <template v-slot="scope">
-          <el-select
-            v-model="scope.row.showType"
-            :disabled="isDisabledShow(scope.row)"
-            @change="changeShow(scope.row, $event)"
-          >
-            <el-option
-              :label="
-                isDisabledShow(scope.row)
-                  ? $t('superGrid.default')
-                  : $t('superGrid.show')
-              "
-              value="default"
-            />
-            <el-option :label="$t('superGrid.hidden')" value="false" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column
-        property="exportType"
-        :label="$t('superGrid.isExportable')"
-        width="120"
-      >
-        <template v-slot="scope">
-          <el-select
-            v-model="scope.row.exportType"
-            :disabled="isDisabledExport(scope.row)"
-            @change="changeExport(scope.row, $event)"
-          >
-            <el-option
-              :label="
-                isDisabledExport(scope.row)
-                  ? $t('superGrid.default')
-                  : $t('superGrid.export')
-              "
-              value="default"
-            />
-            <el-option :label="$t('superGrid.unExport')" value="false" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="isDragColumn"
-        property="displayOrderType"
-        :label="$t('superGrid.displayOrder')"
-        width="120"
-      >
-        <template v-slot="scope">
-          <el-input
-            v-if="
-              scope.row.displayOrderType &&
-              scope.row.displayOrderType === 'custom'
-            "
-            v-model="scope.row.displayOrder"
-            clearable
-            size="mini"
-            @clear="clearDisplayOrder(scope.row)"
-          />
-          <el-select v-else v-model="scope.row.displayOrderType">
-            <el-option :label="$t('superGrid.default')" value="default" />
-            <el-option :label="$t('superGrid.custom')" value="custom" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column
-        property="widthType"
-        :label="$t('superGrid.width')"
-        width="120"
-      >
-        <template v-slot="scope">
-          <el-input
-            v-if="scope.row.widthType && scope.row.widthType === 'custom'"
-            v-model="scope.row.width"
-            size="mini"
-            clearable
-            @clear="clearWidth(scope.row)"
-          />
-          <el-select v-else v-model="scope.row.widthType">
-            <el-option :label="$t('superGrid.default')" value="default" />
-            <el-option :label="$t('superGrid.custom')" value="custom" />
-          </el-select>
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-dialog>
-</template>
-
-<script>
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-import * as Vue from 'vue'
-import store from './store'
-import Sortable from 'sortablejs'
-export default {
-  name: 'ColumnsConfig',
-  props: {
-    listCode: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      columns: [],
-      hasLoaded: false,
-    }
-  },
-  created() {},
-  mounted() {
-    this.listAllColumns().then((columns) => {
-      this.columns = columns
-      this.hasLoaded = true
-      this.$nextTick(() => {
-        this.dragColumnDisplayOrder()
-      })
-    })
-  },
-  methods: {
-    isDisabledShow(row) {
-      // 序号、复选框列不可以配置是否显示；占位符列不可以设置是否显示；当不是自定义的显示状态为false时，不可配置是否显示
-      return (
-        (row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
-        row.custom === true ||
-        (row.showType && row.showType !== 'false' && row.show === false)
-      )
-    },
-    isDisabledExport(row) {
-      // 序号、复选框列不可以配置是否导出；占位符列不可以设置是否导出；当不是自定义的导出状态为false时，不可配置是否导出
-      return (
-        (row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
-        row.custom === true ||
-        (row.exportType &&
-          row.exportType !== 'false' &&
-          row.exportable === false)
-      )
-    },
-    changeShow(row, value) {
-      if (value !== undefined && value === 'false') {
-        row.show = false
-      } else {
-        row.show = true
-      }
-    },
-    changeExport(row, value) {
-      if (value !== undefined && value === 'false') {
-        row.exportable = false
-      } else {
-        row.exportable = true
-      }
-    },
-    saveConfig() {
-      const params = {
-        settingColumns: this.columns,
-        listCode: this.listCode,
-      }
-      this.$http
-        .post(
-          window.$vueApp.config.globalProperties.baseAPI +
-            '/component/super-grids/setting-columns',
-          params
-        )
-        .then((data) => {
-          this.$message({
-            type: 'success',
-            message: this.$t('imatrixUIMessage.saveSuccessfully'),
-            showClose: true,
-          })
-          $emit(this, 'close', true)
-        })
-    },
-    resetConfig() {
-      this.$confirm(
-        this.$t('superGrid.whetherToConfirmReset'),
-        this.$t('imatrixUIMessage.tips'),
-        {
-          confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
-          cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
-          type: 'warning',
-        }
-      ).then(() => {
-        const url =
-          window.$vueApp.config.globalProperties.baseAPI +
-          '/component/super-grids/reset-columns/' +
-          this.listCode
-        this.$http.delete(url).then(() => {
-          this.$message({
-            type: 'success',
-            message: this.$t('superGrid.resetSuccessful'),
-            showClose: true,
-          })
-          this.listAllColumns().then((columns) => {
-            this.columns = columns
-            $emit(this, 'reset', true)
-          })
-        })
-      })
-    },
-    listAllColumns() {
-      return new Promise((resolve, reject) => {
-        const url =
-          window.$vueApp.config.globalProperties.baseAPI +
-          '/component/super-grids/all-list-columns/' +
-          this.listCode
-        const gridParams = store.get(this.listCode)
-        const params = {}
-        const isSql = gridParams.isSql
-        this.isDragColumn = gridParams.colSetting.isDragColumn
-        if (typeof isSql !== 'undefined') {
-          params.isSql = isSql + ''
-        }
-        this.$http
-          .post(url, params)
-          .then((columns) => {
-            resolve(columns)
-          })
-          .catch((error) => {
-            reject(error)
-          })
-      })
-    },
-    clearDisplayOrder(row) {
-      row.displayOrderType = 'default'
-    },
-    clearWidth(row) {
-      row.widthType = 'default'
-    },
-    // 移动完成后的displayOrder设置
-    indexAfterTheChangeUpdateDisplayOrder(dataList, oldIndex, newIndex, prop) {
-      if (dataList && dataList.length > 0) {
-        if (oldIndex != null && oldIndex !== undefined && oldIndex !== -1) {
-          if (newIndex !== null && newIndex !== undefined && newIndex !== -1) {
-            if (prop && prop !== '') {
-              const selectCol = dataList[newIndex]
-              selectCol.displayOrderType = 'custom'
-              if (newIndex > oldIndex) {
-                // 表示向后移动
-                // 位置已经移动，所以参数要赋值给原始位置的下一个
-                const afProp = dataList[newIndex - 1][prop]
-                const arr = dataList.slice(oldIndex, newIndex)
-                if (arr && arr.length > 0) {
-                  for (let i = arr.length - 1; i > -1; i--) {
-                    const col = arr[i]
-                    col.displayOrderType = 'custom'
-                    if (i === 0) {
-                      // 紧靠原始位置的上一个
-                      col[prop] = selectCol[prop]
-                    } else {
-                      col[prop] = arr[i - 1][prop]
-                    }
-                  }
-                }
-                selectCol[prop] = afProp
-              } else {
-                const befProp = dataList[newIndex + 1][prop]
-                // 表示向前移动
-                // 位置已经移动，所以参数要赋值给原始位置的上一个
-                const arr = dataList.slice(newIndex + 1, oldIndex + 1)
-                if (arr && arr.length > 0) {
-                  for (let i = 0; i < arr.length; i++) {
-                    const col = arr[i]
-                    col.displayOrderType = 'custom'
-                    if (i === arr.length - 1) {
-                      // 紧靠原始位置的上一个
-                      col[prop] = selectCol[prop]
-                    } else {
-                      col[prop] = arr[i + 1][prop]
-                    }
-                  }
-                }
-                selectCol[prop] = befProp
-              }
-            }
-          }
-        }
-      }
-    },
-    // 拖动列顺序
-    dragColumnDisplayOrder() {
-      if (!this.isDragColumn) {
-        return
-      }
-      return new Promise((resolve, reject) => {
-        const tbody = document.querySelector(
-          '.custom-config-elTable .el-table__body-wrapper tbody'
-        )
-        if (tbody != null) {
-          const vm = this
-          Sortable.create(tbody, {
-            onEnd({ newIndex, oldIndex }) {
-              if (
-                oldIndex !== null &&
-                oldIndex !== undefined &&
-                oldIndex !== -1 &&
-                newIndex !== null &&
-                newIndex !== undefined &&
-                newIndex !== -1
-              ) {
-                if (oldIndex > newIndex) {
-                  // 从后往前
-                  if (vm.columns && vm.columns.length > 0) {
-                    const item = vm.columns[oldIndex]
-                    for (var i = oldIndex - 1; i >= newIndex; i--) {
-                      const col = vm.columns[i]
-                      col.displayOrderType = 'custom'
-                      vm.columns[i + 1] = col
-                    }
-                    vm.columns[newIndex] = item
-                  }
-                } else {
-                  // 从前往后
-                  if (vm.columns && vm.columns.length > 0) {
-                    const item = vm.columns[oldIndex]
-                    for (var k = oldIndex + 1; k <= newIndex; k++) {
-                      const col = vm.columns[k]
-                      col.displayOrderType = 'custom'
-                      vm.columns[k - 1] = col
-                    }
-                    vm.columns[newIndex] = item
-                  }
-                }
-              }
-              console.log('config拖动字段', vm.columns)
-              console.log('config拖动字段oldIndex', oldIndex)
-              console.log('config拖动字段newIndex', newIndex)
-              vm.hasLoaded = false
-              setTimeout(function () {
-                vm.hasLoaded = true
-                vm.$nextTick(() => {
-                  vm.indexAfterTheChangeUpdateDisplayOrder(
-                    vm.columns,
-                    oldIndex,
-                    newIndex,
-                    'displayOrder'
-                  )
-                  vm.dragColumnDisplayOrder()
-                })
-              }, 100)
-
-              // vm.hasLoaded = false
-              // // 添加setTimeout是解决拖动顺序后数组columns值改变了，但是列表没有重新渲染问题
-              // setTimeout(function() {
-              //   vm.hasLoaded = true
-              //   vm.$nextTick(() => {
-              //     vm.dragColumnDisplayOrder()
-              //   })
-              //   const currentColumn = vm.columns[oldIndex]
-              //   const targetColumn = vm.columns[newIndex]
-              //   const currentDisplayOrder = currentColumn.displayOrder
-              //   const targetDisplayOrder = targetColumn.displayOrder
-              //   vm.columns.splice(oldIndex, 1)
-              //   vm.columns.splice(newIndex, 0, currentColumn)
-              //   vm.$set(currentColumn, 'displayOrder', targetDisplayOrder)
-              //   vm.$set(currentColumn, 'displayOrderType', 'custom')
-              //   vm.$set(targetColumn, 'displayOrder', currentDisplayOrder)
-              //   vm.$set(targetColumn, 'displayOrderType', 'custom')
-              //   vm.hasLoaded = true
-              //   vm.$nextTick(() => {
-              //     vm.dragColumnDisplayOrder()
-              //   })
-              // }, 100)
-            },
-          })
-        }
-      })
-    },
-  },
-  emits: [
-    'open',
-    'opend',
-    'close',
-    'closed',
-    'reset',
-    'opend',
-    'close',
-    'closed',
-  ],
-}
-</script>
+<template>
+  <el-dialog
+    :title="$t('superGrid.columnConfig')"
+    width="50%"
+    top="5vh"
+    append-to-body
+    :close-on-click-modal="false"
+    :model-value="true"
+    :show-close="true"
+    @open="$emit('open')"
+    @opend="$emit('opend')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <div class="operation-area">
+      <el-button type="primary" size="small" @click="saveConfig">
+        {{ $t('imatrixUIPublicModel.sure') }}
+      </el-button>
+      <el-button size="small" @click="resetConfig">
+        {{ $t('imatrixUIPublicModel.reset') }}
+      </el-button>
+      <el-button size="small" @click="$emit('close')">
+        {{ $t('imatrixUIPublicModel.cancel') }}
+      </el-button>
+      <span v-if="isDragColumn" style="padding-left: 10px; color: red"
+        >({{ $t('superGrid.dragColumnOrderMessage') }})</span
+      >
+    </div>
+    <el-table
+      v-if="hasLoaded"
+      :data="columns"
+      max-height="450"
+      class="custom-config-elTable"
+    >
+      <el-table-column
+        property="label"
+        :label="$t('superGrid.label')"
+        width="220"
+      >
+        <template v-slot="scope">
+          <span class="ellipsis cell--span" :title="scope.row.label">{{
+            scope.row.label
+          }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        property="showType"
+        :label="$t('superGrid.isShow')"
+        width="120"
+      >
+        <template v-slot="scope">
+          <el-select
+            v-model="scope.row.showType"
+            :disabled="isDisabledShow(scope.row)"
+            @change="changeShow(scope.row, $event)"
+          >
+            <el-option
+              :label="
+                isDisabledShow(scope.row)
+                  ? $t('superGrid.default')
+                  : $t('superGrid.show')
+              "
+              value="default"
+            />
+            <el-option :label="$t('superGrid.hidden')" value="false" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column
+        property="exportType"
+        :label="$t('superGrid.isExportable')"
+        width="120"
+      >
+        <template v-slot="scope">
+          <el-select
+            v-model="scope.row.exportType"
+            :disabled="isDisabledExport(scope.row)"
+            @change="changeExport(scope.row, $event)"
+          >
+            <el-option
+              :label="
+                isDisabledExport(scope.row)
+                  ? $t('superGrid.default')
+                  : $t('superGrid.export')
+              "
+              value="default"
+            />
+            <el-option :label="$t('superGrid.unExport')" value="false" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isDragColumn"
+        property="displayOrderType"
+        :label="$t('superGrid.displayOrder')"
+        width="120"
+      >
+        <template v-slot="scope">
+          <el-input
+            v-if="
+              scope.row.displayOrderType &&
+              scope.row.displayOrderType === 'custom'
+            "
+            v-model="scope.row.displayOrder"
+            clearable
+            size="mini"
+            @clear="clearDisplayOrder(scope.row)"
+          />
+          <el-select v-else v-model="scope.row.displayOrderType">
+            <el-option :label="$t('superGrid.default')" value="default" />
+            <el-option :label="$t('superGrid.custom')" value="custom" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column
+        property="widthType"
+        :label="$t('superGrid.width')"
+        width="120"
+      >
+        <template v-slot="scope">
+          <el-input
+            v-if="scope.row.widthType && scope.row.widthType === 'custom'"
+            v-model="scope.row.width"
+            size="mini"
+            clearable
+            @clear="clearWidth(scope.row)"
+          />
+          <el-select v-else v-model="scope.row.widthType">
+            <el-option :label="$t('superGrid.default')" value="default" />
+            <el-option :label="$t('superGrid.custom')" value="custom" />
+          </el-select>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import * as Vue from 'vue'
+import store from './store'
+import Sortable from 'sortablejs'
+export default {
+  name: 'ColumnsConfig',
+  props: {
+    listCode: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      columns: [],
+      hasLoaded: false,
+    }
+  },
+  created() {},
+  mounted() {
+    this.listAllColumns().then((columns) => {
+      this.columns = columns
+      this.hasLoaded = true
+      this.$nextTick(() => {
+        this.dragColumnDisplayOrder()
+      })
+    })
+  },
+  methods: {
+    isDisabledShow(row) {
+      // 序号、复选框列不可以配置是否显示；占位符列不可以设置是否显示；当不是自定义的显示状态为false时，不可配置是否显示
+      return (
+        (row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
+        row.custom === true ||
+        (row.showType && row.showType !== 'false' && row.show === false)
+      )
+    },
+    isDisabledExport(row) {
+      // 序号、复选框列不可以配置是否导出；占位符列不可以设置是否导出；当不是自定义的导出状态为false时，不可配置是否导出
+      return (
+        (row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
+        row.custom === true ||
+        (row.exportType &&
+          row.exportType !== 'false' &&
+          row.exportable === false)
+      )
+    },
+    changeShow(row, value) {
+      if (value !== undefined && value === 'false') {
+        row.show = false
+      } else {
+        row.show = true
+      }
+    },
+    changeExport(row, value) {
+      if (value !== undefined && value === 'false') {
+        row.exportable = false
+      } else {
+        row.exportable = true
+      }
+    },
+    saveConfig() {
+      const params = {
+        settingColumns: this.columns,
+        listCode: this.listCode,
+      }
+      this.$http
+        .post(
+          window.$vueApp.config.globalProperties.baseAPI +
+            '/component/super-grids/setting-columns',
+          params
+        )
+        .then((data) => {
+          this.$message({
+            type: 'success',
+            message: this.$t('imatrixUIMessage.saveSuccessfully'),
+            showClose: true,
+          })
+          $emit(this, 'close', true)
+        })
+    },
+    resetConfig() {
+      this.$confirm(
+        this.$t('superGrid.whetherToConfirmReset'),
+        this.$t('imatrixUIMessage.tips'),
+        {
+          confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+          cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
+          type: 'warning',
+        }
+      ).then(() => {
+        const url =
+          window.$vueApp.config.globalProperties.baseAPI +
+          '/component/super-grids/reset-columns/' +
+          this.listCode
+        this.$http.delete(url).then(() => {
+          this.$message({
+            type: 'success',
+            message: this.$t('superGrid.resetSuccessful'),
+            showClose: true,
+          })
+          this.listAllColumns().then((columns) => {
+            this.columns = columns
+            $emit(this, 'reset', true)
+          })
+        })
+      })
+    },
+    listAllColumns() {
+      return new Promise((resolve, reject) => {
+        const url =
+          window.$vueApp.config.globalProperties.baseAPI +
+          '/component/super-grids/all-list-columns/' +
+          this.listCode
+        const gridParams = store.get(this.listCode)
+        const params = {}
+        const isSql = gridParams.isSql
+        this.isDragColumn = gridParams.colSetting.isDragColumn
+        if (typeof isSql !== 'undefined') {
+          params.isSql = isSql + ''
+        }
+        this.$http
+          .post(url, params)
+          .then((columns) => {
+            resolve(columns)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    clearDisplayOrder(row) {
+      row.displayOrderType = 'default'
+    },
+    clearWidth(row) {
+      row.widthType = 'default'
+    },
+    // 移动完成后的displayOrder设置
+    indexAfterTheChangeUpdateDisplayOrder(dataList, oldIndex, newIndex, prop) {
+      if (dataList && dataList.length > 0) {
+        if (oldIndex != null && oldIndex !== undefined && oldIndex !== -1) {
+          if (newIndex !== null && newIndex !== undefined && newIndex !== -1) {
+            if (prop && prop !== '') {
+              const selectCol = dataList[newIndex]
+              selectCol.displayOrderType = 'custom'
+              if (newIndex > oldIndex) {
+                // 表示向后移动
+                // 位置已经移动，所以参数要赋值给原始位置的下一个
+                const afProp = dataList[newIndex - 1][prop]
+                const arr = dataList.slice(oldIndex, newIndex)
+                if (arr && arr.length > 0) {
+                  for (let i = arr.length - 1; i > -1; i--) {
+                    const col = arr[i]
+                    col.displayOrderType = 'custom'
+                    if (i === 0) {
+                      // 紧靠原始位置的上一个
+                      col[prop] = selectCol[prop]
+                    } else {
+                      col[prop] = arr[i - 1][prop]
+                    }
+                  }
+                }
+                selectCol[prop] = afProp
+              } else {
+                const befProp = dataList[newIndex + 1][prop]
+                // 表示向前移动
+                // 位置已经移动，所以参数要赋值给原始位置的上一个
+                const arr = dataList.slice(newIndex + 1, oldIndex + 1)
+                if (arr && arr.length > 0) {
+                  for (let i = 0; i < arr.length; i++) {
+                    const col = arr[i]
+                    col.displayOrderType = 'custom'
+                    if (i === arr.length - 1) {
+                      // 紧靠原始位置的上一个
+                      col[prop] = selectCol[prop]
+                    } else {
+                      col[prop] = arr[i + 1][prop]
+                    }
+                  }
+                }
+                selectCol[prop] = befProp
+              }
+            }
+          }
+        }
+      }
+    },
+    // 拖动列顺序
+    dragColumnDisplayOrder() {
+      if (!this.isDragColumn) {
+        return
+      }
+      return new Promise((resolve, reject) => {
+        const tbody = document.querySelector(
+          '.custom-config-elTable .el-table__body-wrapper tbody'
+        )
+        if (tbody != null) {
+          const vm = this
+          Sortable.create(tbody, {
+            onEnd({ newIndex, oldIndex }) {
+              if (
+                oldIndex !== null &&
+                oldIndex !== undefined &&
+                oldIndex !== -1 &&
+                newIndex !== null &&
+                newIndex !== undefined &&
+                newIndex !== -1
+              ) {
+                if (oldIndex > newIndex) {
+                  // 从后往前
+                  if (vm.columns && vm.columns.length > 0) {
+                    const item = vm.columns[oldIndex]
+                    for (var i = oldIndex - 1; i >= newIndex; i--) {
+                      const col = vm.columns[i]
+                      col.displayOrderType = 'custom'
+                      vm.columns[i + 1] = col
+                    }
+                    vm.columns[newIndex] = item
+                  }
+                } else {
+                  // 从前往后
+                  if (vm.columns && vm.columns.length > 0) {
+                    const item = vm.columns[oldIndex]
+                    for (var k = oldIndex + 1; k <= newIndex; k++) {
+                      const col = vm.columns[k]
+                      col.displayOrderType = 'custom'
+                      vm.columns[k - 1] = col
+                    }
+                    vm.columns[newIndex] = item
+                  }
+                }
+              }
+              console.log('config拖动字段', vm.columns)
+              console.log('config拖动字段oldIndex', oldIndex)
+              console.log('config拖动字段newIndex', newIndex)
+              vm.hasLoaded = false
+              setTimeout(function () {
+                vm.hasLoaded = true
+                vm.$nextTick(() => {
+                  vm.indexAfterTheChangeUpdateDisplayOrder(
+                    vm.columns,
+                    oldIndex,
+                    newIndex,
+                    'displayOrder'
+                  )
+                  vm.dragColumnDisplayOrder()
+                })
+              }, 100)
+
+              // vm.hasLoaded = false
+              // // 添加setTimeout是解决拖动顺序后数组columns值改变了，但是列表没有重新渲染问题
+              // setTimeout(function() {
+              //   vm.hasLoaded = true
+              //   vm.$nextTick(() => {
+              //     vm.dragColumnDisplayOrder()
+              //   })
+              //   const currentColumn = vm.columns[oldIndex]
+              //   const targetColumn = vm.columns[newIndex]
+              //   const currentDisplayOrder = currentColumn.displayOrder
+              //   const targetDisplayOrder = targetColumn.displayOrder
+              //   vm.columns.splice(oldIndex, 1)
+              //   vm.columns.splice(newIndex, 0, currentColumn)
+              //   vm.$set(currentColumn, 'displayOrder', targetDisplayOrder)
+              //   vm.$set(currentColumn, 'displayOrderType', 'custom')
+              //   vm.$set(targetColumn, 'displayOrder', currentDisplayOrder)
+              //   vm.$set(targetColumn, 'displayOrderType', 'custom')
+              //   vm.hasLoaded = true
+              //   vm.$nextTick(() => {
+              //     vm.dragColumnDisplayOrder()
+              //   })
+              // }, 100)
+            },
+          })
+        }
+      })
+    },
+  },
+  emits: [
+    'open',
+    'opend',
+    'close',
+    'closed',
+    'reset',
+    'opend',
+    'close',
+    'closed',
+  ],
+}
+</script>