@utogether/udp-core 1.0.1-beta.27 → 1.0.1-beta.30

package/src/components/udp/grid/index.vue

@@ -1,524 +1,524 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-11-17 16:33:37
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-11-18 15:18:53
- * @Description: file content
--->
-<template>
-  <div style="width: 100%; height: 100%">
-    <vxe-grid
-      ref="xgrid"
-      v-bind="data"
-      class="ut-grid-wrapper"
-      v-on="attrs.events || {}"
-      @toolbarButtonClick="toolbarButtonClick"
-      @toolbarToolClick="toolbarButtonClick"
-      @cell-click="cellClick"
-      @cell-dblclick="cellDbclick"
-      @edit-activated="editEctivated"
-      @form-reset="onReset"
-    />
-    <!-- <SearchScheme
-      v-if="showModal && props.url"
-      :items="items"
-      :view="viewCode"
-      @search="onSearch"
-      @close="showModal = false"
-    /> -->
-  </div>
-</template>
-
-<script lang="ts" setup>
-// @ts-nocheck
-import { useI18n } from 'vue-i18n';
-import { ref, onBeforeMount, reactive, getCurrentInstance, toRaw, useAttrs, onUnmounted, nextTick } from 'vue';
-import { VxeGridProps } from 'vxe-table';
-import Sortable from 'sortablejs';
-import { clone } from 'xe-utils';
-import { formatGridItems, i18nColums, formatRules, errorMessage, dbstorage, warnMessage } from '@utogether/utils';
-// import { http } from '../../../utils/udp/http';
-import {
-  queryAll,
-  query,
-  del,
-  save,
-  footerSumMethod,
-  getToolBarConfig,
-  defaultColums,
-  onCheckMethod,
-  getAttrs
-} from '../utils';
-// import SearchScheme from '../components/SuSearch.vue';
-
-defineOptions({
-  name: 'UtGrid'
-});
-
-export interface IProps {
-  checkMethod?: Function;
-  serviceCode?: IRecord;
-  defaultValue?: IRecord;
-  defaultParams?: IRecord;
-  url?: string | IRecord;
-  columns: Array<ITableColProps>;
-  items?: Array<IFormItemProps>;
-  editable?: boolean;
-  needExport?: boolean; // 是否需要导出
-  autoLoad?: boolean; // 自动加载查询数据
-}
-
-const attrs: IRecord = getAttrs(useAttrs());
-
-const kSTORECOLUM = 'U_TABLE_COLUMNN_SORT';
-let storeColums;
-const cacheColumns = {};
-
-// console.log(attrs);
-const instance = getCurrentInstance()!;
-const hasAuthority = instance.appContext.config.globalProperties.$hasAuthority;
-const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
-const viewCode = instance.parent.type.name;
-const $mode = instance.appContext.config.globalProperties.$mode;
-
-const props = withDefaults(defineProps<IProps>(), {
-  /**
-   * @deprecated 2.10.0版本失效,
-   * */
-  serviceCode: (): IRecord => {
-    return {};
-  },
-  items: () => [],
-  columns: () => [],
-  editable: true,
-  autoLoad: true,
-  needExport: true
-});
-
-const { t } = useI18n();
-
-const xgrid = ref(null);
-const showModal = ref(false);
-
-const favorite = {
-  icon: 'vxe-icon-setting',
-  name: 'favorite',
-  events: {
-    click: (e, option) => {
-      if (option.name === 'favorite') {
-        showModal.value = true;
-      }
-    }
-  }
-};
-
-/**
- * @description: 根据items 获取必填选
- */
-const getRules = () => {
-  if (!props.columns.length) return {};
-  return formatRules(props.columns, t);
-};
-/**
- * @description: colum 统一添加国家化
- */
-const getColumns = () => {
-  const columns = props.columns;
-  if (attrs.gridId) {
-    const cols = defaultColums
-      .filter(f => !columns.some(s => s.field === f.field))
-      .map(col => {
-        if (attrs.format && ['lastUpdateDate', 'creationDate'].includes(col.field)) {
-          col.formatter = attrs.format;
-          col.width = 90;
-        }
-        return col;
-      });
-    const idx = columns.findIndex(s => s.field === 'operate');
-    if (idx !== -1) {
-      columns.splice(idx, 0, ...cols);
-    } else {
-      columns.push(...cols);
-    }
-  }
-  const act_columns = attrs.gridId ? formatColums(columns) : columns;
-
-  return i18nColums(act_columns, attrs.sortable);
-};
-
-dbstorage.getItem(kSTORECOLUM).then(value => {
-  storeColums = value;
-  data.columns = getColumns();
-});
-
-const data = reactive<VxeGridProps>({
-  border: true,
-  pagerConfig: { pageSize: attrs.pageSize || 20 },
-  editConfig: {},
-  editRules: getRules(),
-  formConfig: {},
-  columnConfig: { useKey: true },
-  toolbarConfig: { enabled: false },
-  sortConfig: { multiple: true, trigger: 'cell' },
-  height: $mode ? undefined : window.innerHeight - 92,
-
-  checkboxConfig: {
-    checkMethod: ({ row }) => onCheckMethod(row, props),
-    checkRowKeys: props.checkRowKeys
-  },
-  loading: false,
-  footerRowClassName: 'ut-grid-footer',
-  proxyConfig: {
-    form: true, // 查询是需要启用表单代理
-    autoLoad: props.autoLoad,
-    showResponseMsgvxe: false,
-    showActionMsgvxe: false,
-    // 接收 Promise
-    ajax: {
-      queryAll: ({ form }) => queryAll(props, serviceApi, form),
-      query: ({ page, form, code }) => {
-        debugger;
-        return query(props, form, page, serviceApi, code, $mode);
-      },
-      delete: ({ body: { removeRecords } }) => del(serviceApi, removeRecords, props),
-      save: ({ body }) => Promise.all(save(serviceApi, body, props)),
-      querySuccess: ({ response }) => callback('querySuccess', response),
-      queryError: ({ response }) => callback('queryError', response),
-      deleteSuccess: ({ response }) => callback('deleteSuccess', response),
-      deleteError: ({ response }) => callback('deleteError', response),
-      saveSuccess: ({ response }) => callback('saveSuccess', response),
-      saveError: ({ response }) => callback('saveError', response)
-    }
-  },
-  columns: !attrs.gridId ? getColumns() : [],
-  ...attrs
-});
-
-/**
- * @description: 预处理查询form
- * @return {*} items
- */
-const getItems = () => {
-  if (!props.items.length) return props.items;
-  return formatGridItems(clone(props.items, true), viewCode && props.url ? favorite : viewCode);
-};
-
-/**
- * @description 格式化column
- * @return {*} columns
- */
-function formatColums(columns) {
-  const customSort = storeColums ? storeColums[attrs.gridId] : {};
-  if (!customSort) return columns;
-  return columns
-    .map((col, idx) => {
-      const sort = (idx + 1) * 10;
-      col._sort = customSort[col.field] || sort;
-      // 缓存列索引数据
-      cacheColumns[col.field] = col._sort;
-      return col;
-    })
-    .sort((a, b) => a._sort - b._sort);
-}
-
-/**
- * @description: 设置grid参数
- */
-const setGridConfig = () => {
-  // 查询
-  if (props.items.length) {
-    // data.formConfig = {};
-    data.formConfig = {
-      titleWidth: 100,
-      titleAlign: 'right',
-      items: getItems(),
-      rules: formatRules(props.items, t),
-      validConfig: { showMessage: false }
-    };
-  }
-  // tool bar
-  const obj = getToolBarConfig(data, props, attrs, hasAuthority);
-  Object.assign(data, obj);
-  // 表格id，用于自定义列
-  if (attrs.gridId) {
-    data.id = attrs.gridId;
-    data.customConfig = {
-      storage: true,
-      mode: 'popup',
-      checkMethod({ column }) {
-        return column.field === 'operate' || ['checkbox', 'radio'].includes(column.type) ? false : true;
-      },
-      modalOptions: {
-        width: 750,
-        height: '75%'
-      }
-    };
-  }
-  if (attrs.mergeFooter) {
-    // 合计方法
-    data.showFooter = true;
-    data.footerMethod = ({ columns, data }) => footerSumMethod({ columns, data }, attrs.mergeFooter);
-  }
-};
-/**
- * @description 手动调用查询方法
- */
-const refreshData = () => {
-  xgrid.value.commitProxy('query');
-};
-/**
- * @description 刷新列数据
- */
-const refreshColumn = () => {
-  data.editRules = getRules();
-  return xgrid.value.refreshColumn();
-};
-/**
- * @description 显示加载框
- */
-const showLoading = () => {
-  data.loading = true;
-};
-/**
- * @description 隐藏加载框
- */
-const hiddenLoading = () => {
-  data.loading = false;
-};
-/**
- * @description 获取实例方法
- * @return vxe-grid实例的方法
- */
-const getInstance = () => {
-  return toRaw(xgrid.value);
-};
-/**
- * @description 获取表格全量数据方法
- * @return vxe-grid表格全量数据
- */
-const getTableData = () => {
-  return xgrid.value.getTableData().fullData;
-};
-/**
- * @description 获取表格选中的行
- * @return vxe-grid表格勾选行
- */
-const getSelectRecords = (isFull = false) => {
-  const columnType = props.columns[0].type;
-  const checkRecords =
-    columnType === 'radio' ? xgrid.value.getRadioRecord(isFull) : xgrid.value.getCheckboxRecords(isFull);
-  if (columnType === 'checkbox' && !checkRecords.length) {
-    warnMessage(t('message.tip_selectedRecord'));
-    return [];
-  } else if (columnType === 'radio' && !checkRecords) {
-    warnMessage(t('message.tip_selectedRecord'));
-    return null;
-  }
-  return checkRecords;
-};
-
-const callback = (cb, response) => {
-  attrs?.callback && attrs?.callback[cb] && attrs?.callback[cb](response);
-};
-
-const onReset = async e => {
-  console.log(e);
-  const data = e.data;
-  const items = props.items.filter(f => f.itemRender?.props?.multiple);
-  console.log(items);
-  items.forEach(item => {
-    if (item.itemRender.props.defaultValue) {
-      data[`_${item.field}`] = item.itemRender.props.defaultValue.split(',');
-      data[`${item.field}`] = item.itemRender.props.defaultValue;
-    } else {
-      data[`_${item.field}`] = [];
-    }
-  });
-  if (items.length) {
-    // 多选时，重新查询一次
-    setTimeout(() => {
-      refreshData();
-    }, 200);
-  }
-};
-
-let sortable2: any;
-const columnDrop = () => {
-  const $grid = xgrid.value;
-  sortable2 = Sortable.create($grid.$el.querySelector('.vxe-table--header .vxe-header--row'), {
-    disabled: !attrs.gridId,
-    handle: '.vxe-header--column',
-    onEnd: async sortableEvent => {
-      const targetThElem = sortableEvent.item;
-      const newIndex = sortableEvent.newIndex as number;
-      const oldIndex = sortableEvent.oldIndex as number;
-      const { fullColumn, tableColumn } = $grid.getTableColumn();
-      const wrapperElem = targetThElem.parentNode as HTMLElement;
-      const newColumn = fullColumn[newIndex];
-      const item = fullColumn[oldIndex];
-      let nodrag = false;
-      let msg = '固定列';
-      if (newColumn.fixed) {
-        nodrag = false;
-      } else if (newIndex === 0 || ['checkbox', 'radio'].includes(item.type)) {
-        msg = '勾选列';
-        nodrag = true;
-      } else if (item.field === 'operate' || newIndex === fullColumn.length - 1) {
-        nodrag = true;
-        msg = '操作列';
-      }
-      if (nodrag) {
-        // 错误的移动
-        const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
-        if (newIndex > oldIndex) {
-          wrapperElem.insertBefore(targetThElem, oldThElem);
-        } else {
-          wrapperElem.insertBefore(targetThElem, oldThElem ? oldThElem.nextElementSibling : oldThElem);
-        }
-        return errorMessage(msg + '不允许拖动！');
-      }
-      // 获取列索引 columnIndex > fullColumn
-      const oldColumnIndex = $grid.getColumnIndex(tableColumn[oldIndex]);
-      const newColumnIndex = $grid.getColumnIndex(tableColumn[newIndex]);
-      // 移动到目标列
-      const currRow = fullColumn.splice(oldColumnIndex, 1)[0];
-      fullColumn.splice(newColumnIndex, 0, currRow);
-
-      // 拖拽方向 1: 右 -1: 左
-      const direction = newColumnIndex - oldColumnIndex > 0 ? 1 : -1;
-
-      // 获取新列
-      const newSort = (newColumnIndex + 1) * 10;
-      const oldSort = (oldColumnIndex + 1) * 10;
-      // 目标列索引+1，方便后续计算
-      const comparisonVal = newSort + 1 * direction;
-      for (const key in cacheColumns) {
-        const cacheValue = cacheColumns[key];
-        if (direction > 0 && cacheValue < comparisonVal && cacheValue > oldSort) {
-          // 大于拖拽列且小于目标列的索引,均向前移动一个单位
-          cacheColumns[key] = cacheValue - 10 * direction;
-        } else if (direction < 0 && cacheValue > comparisonVal && cacheValue < oldSort) {
-          // 小于拖拽列且大于目标列的索引,  均向后移动一个单位
-          cacheColumns[key] = cacheValue - 10 * direction;
-        }
-      }
-
-      cacheColumns[currRow.field] = newSort;
-
-      dbstorage.setItem(kSTORECOLUM, { [attrs.gridId]: cacheColumns });
-      $grid.loadColumn(fullColumn);
-    }
-  });
-};
-
-/**
- * @description 常用查询面板确认查询
- * @param data 常用查询条件
- */
-// const onSearch = data => {
-//   showModal.value = false;
-//   const { form } = xgrid.value.getProxyInfo();
-//   Object.assign(form, data);
-//   refreshData();
-// };
-
-const reloadGrid = () => {
-  setGridConfig();
-};
-
-/**
- * @description Vue实例对外暴露的相关方法或属性
- */
-defineExpose({
-  getTableData,
-  getSelectRecords,
-  refreshData,
-  refreshColumn,
-  getInstance,
-  showLoading,
-  hiddenLoading,
-  reloadGrid
-});
-
-const toolbarButtonClick = ({ code }) => {
-  emit('buttonClick', code);
-};
-const cellClick = e => {
-  emit('cellClick', e);
-};
-const cellDbclick = e => {
-  emit('cellDbclick', e);
-};
-const editEctivated = e => {
-  emit('editEctivated', e);
-};
-
-/**
- * @description: 监听窗口变化，动态改变表格的高度
- */
-const addResizeListener = () => {
-  window.onresize = () => {
-    return (() => {
-      let height = attrs?.height || window.innerHeight - 90;
-      if (attrs.mode !== 'inline' && !attrs?.height) {
-        height = window.innerHeight - 180;
-      }
-      data.height = height < 240 ? 240 : height;
-    })();
-  };
-};
-
-let initTime: any;
-nextTick(() => {
-  // 加载完成之后在绑定拖动事件
-  initTime = setTimeout(() => {
-    columnDrop();
-  }, 500);
-});
-/**
- * @description Vue实例卸载
- */
-onUnmounted(() => {
-  clearTimeout(initTime);
-  sortable2 && sortable2.destroy();
-});
-/**
- * @description Vue实例挂载
- */
-onBeforeMount(() => {
-  setGridConfig();
-  addResizeListener();
-});
-
-const emit = defineEmits<{
-  (e: 'buttonClick', code: string): void;
-  (e: 'cellClick', data: any): void;
-  (e: 'cellDbclick', data: any): void;
-  (e: 'editEctivated', data: any): void;
-}>();
-</script>
-
-<style lang="scss">
-.ut-grid-wrapper {
-  padding: 5px;
-  background-color: #fff;
-
-  .vxe-form--item {
-    padding: 0.1em 0.8em 0.1em 0 !important;
-
-    .el-select {
-      .el-input {
-        height: 26px;
-      }
-
-      .el-select__tags-text {
-        color: #000;
-      }
-    }
-  }
-
-  .vxe-grid--layout-body-content-wrapper {
-    overflow: hidden;
-  }
-}
-</style>
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:33:37
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-11-18 15:18:53
+ * @Description: file content
+-->
+<template>
+  <div style="width: 100%; height: 100%">
+    <vxe-grid
+      ref="xgrid"
+      v-bind="data"
+      class="ut-grid-wrapper"
+      v-on="attrs.events || {}"
+      @toolbarButtonClick="toolbarButtonClick"
+      @toolbarToolClick="toolbarButtonClick"
+      @cell-click="cellClick"
+      @cell-dblclick="cellDbclick"
+      @edit-activated="editEctivated"
+      @form-reset="onReset"
+    />
+    <!-- <SearchScheme
+      v-if="showModal && props.url"
+      :items="items"
+      :view="viewCode"
+      @search="onSearch"
+      @close="showModal = false"
+    /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import { useI18n } from 'vue-i18n';
+import { ref, onBeforeMount, reactive, getCurrentInstance, toRaw, useAttrs, onUnmounted, nextTick } from 'vue';
+import { VxeGridProps } from 'vxe-table';
+import Sortable from 'sortablejs';
+import { clone } from 'xe-utils';
+import { formatGridItems, i18nColums, formatRules, errorMessage, dbstorage, warnMessage } from '@utogether/utils';
+// import { http } from '../../../utils/udp/http';
+import {
+  queryAll,
+  query,
+  del,
+  save,
+  footerSumMethod,
+  getToolBarConfig,
+  defaultColums,
+  onCheckMethod,
+  getAttrs
+} from '../utils';
+// import SearchScheme from '../components/SuSearch.vue';
+
+defineOptions({
+  name: 'UtGrid'
+});
+
+export interface IProps {
+  checkMethod?: Function;
+  serviceCode?: IRecord;
+  defaultValue?: IRecord;
+  defaultParams?: IRecord;
+  url?: string | IRecord;
+  columns: Array<ITableColProps>;
+  items?: Array<IFormItemProps>;
+  editable?: boolean;
+  needExport?: boolean; // 是否需要导出
+  autoLoad?: boolean; // 自动加载查询数据
+}
+
+const attrs: IRecord = getAttrs(useAttrs());
+
+const kSTORECOLUM = 'U_TABLE_COLUMNN_SORT';
+let storeColums;
+const cacheColumns = {};
+
+// console.log(attrs);
+const instance = getCurrentInstance()!;
+const hasAuthority = instance.appContext.config.globalProperties.$hasAuthority;
+const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
+const viewCode = instance.parent.type.name;
+const $mode = instance.appContext.config.globalProperties.$mode;
+
+const props = withDefaults(defineProps<IProps>(), {
+  /**
+   * @deprecated 2.10.0版本失效,
+   * */
+  serviceCode: (): IRecord => {
+    return {};
+  },
+  items: () => [],
+  columns: () => [],
+  editable: true,
+  autoLoad: true,
+  needExport: true
+});
+
+const { t } = useI18n();
+
+const xgrid = ref(null);
+const showModal = ref(false);
+
+const favorite = {
+  icon: 'vxe-icon-setting',
+  name: 'favorite',
+  events: {
+    click: (e, option) => {
+      if (option.name === 'favorite') {
+        showModal.value = true;
+      }
+    }
+  }
+};
+
+/**
+ * @description: 根据items 获取必填选
+ */
+const getRules = () => {
+  if (!props.columns.length) return {};
+  return formatRules(props.columns, t);
+};
+/**
+ * @description: colum 统一添加国家化
+ */
+const getColumns = () => {
+  const columns = props.columns;
+  if (attrs.gridId) {
+    const cols = defaultColums
+      .filter(f => !columns.some(s => s.field === f.field))
+      .map(col => {
+        if (attrs.format && ['lastUpdateDate', 'creationDate'].includes(col.field)) {
+          col.formatter = attrs.format;
+          col.width = 90;
+        }
+        return col;
+      });
+    const idx = columns.findIndex(s => s.field === 'operate');
+    if (idx !== -1) {
+      columns.splice(idx, 0, ...cols);
+    } else {
+      columns.push(...cols);
+    }
+  }
+  const act_columns = attrs.gridId ? formatColums(columns) : columns;
+
+  return i18nColums(act_columns, attrs.sortable);
+};
+
+dbstorage.getItem(kSTORECOLUM).then(value => {
+  storeColums = value;
+  data.columns = getColumns();
+});
+
+const data = reactive<VxeGridProps>({
+  border: true,
+  pagerConfig: { pageSize: attrs.pageSize || 20 },
+  editConfig: {},
+  editRules: getRules(),
+  formConfig: {},
+  columnConfig: { useKey: true },
+  toolbarConfig: { enabled: false },
+  sortConfig: { multiple: true, trigger: 'cell' },
+  height: $mode ? undefined : window.innerHeight - 92,
+
+  checkboxConfig: {
+    checkMethod: ({ row }) => onCheckMethod(row, props),
+    checkRowKeys: props.checkRowKeys
+  },
+  loading: false,
+  footerRowClassName: 'ut-grid-footer',
+  proxyConfig: {
+    form: true, // 查询是需要启用表单代理
+    autoLoad: props.autoLoad,
+    showResponseMsgvxe: false,
+    showActionMsgvxe: false,
+    // 接收 Promise
+    ajax: {
+      queryAll: ({ form }) => queryAll(props, serviceApi, form),
+      query: ({ page, form, code }) => {
+        debugger;
+        return query(props, form, page, serviceApi, code, $mode);
+      },
+      delete: ({ body: { removeRecords } }) => del(serviceApi, removeRecords, props),
+      save: ({ body }) => Promise.all(save(serviceApi, body, props)),
+      querySuccess: ({ response }) => callback('querySuccess', response),
+      queryError: ({ response }) => callback('queryError', response),
+      deleteSuccess: ({ response }) => callback('deleteSuccess', response),
+      deleteError: ({ response }) => callback('deleteError', response),
+      saveSuccess: ({ response }) => callback('saveSuccess', response),
+      saveError: ({ response }) => callback('saveError', response)
+    }
+  },
+  columns: !attrs.gridId ? getColumns() : [],
+  ...attrs
+});
+
+/**
+ * @description: 预处理查询form
+ * @return {*} items
+ */
+const getItems = () => {
+  if (!props.items.length) return props.items;
+  return formatGridItems(clone(props.items, true), viewCode && props.url ? favorite : viewCode);
+};
+
+/**
+ * @description 格式化column
+ * @return {*} columns
+ */
+function formatColums(columns) {
+  const customSort = storeColums ? storeColums[attrs.gridId] : {};
+  if (!customSort) return columns;
+  return columns
+    .map((col, idx) => {
+      const sort = (idx + 1) * 10;
+      col._sort = customSort[col.field] || sort;
+      // 缓存列索引数据
+      cacheColumns[col.field] = col._sort;
+      return col;
+    })
+    .sort((a, b) => a._sort - b._sort);
+}
+
+/**
+ * @description: 设置grid参数
+ */
+const setGridConfig = () => {
+  // 查询
+  if (props.items.length) {
+    // data.formConfig = {};
+    data.formConfig = {
+      titleWidth: 100,
+      titleAlign: 'right',
+      items: getItems(),
+      rules: formatRules(props.items, t),
+      validConfig: { showMessage: false }
+    };
+  }
+  // tool bar
+  const obj = getToolBarConfig(data, props, attrs, hasAuthority);
+  Object.assign(data, obj);
+  // 表格id，用于自定义列
+  if (attrs.gridId) {
+    data.id = attrs.gridId;
+    data.customConfig = {
+      storage: true,
+      mode: 'popup',
+      checkMethod({ column }) {
+        return column.field === 'operate' || ['checkbox', 'radio'].includes(column.type) ? false : true;
+      },
+      modalOptions: {
+        width: 750,
+        height: '75%'
+      }
+    };
+  }
+  if (attrs.mergeFooter) {
+    // 合计方法
+    data.showFooter = true;
+    data.footerMethod = ({ columns, data }) => footerSumMethod({ columns, data }, attrs.mergeFooter);
+  }
+};
+/**
+ * @description 手动调用查询方法
+ */
+const refreshData = () => {
+  xgrid.value.commitProxy('query');
+};
+/**
+ * @description 刷新列数据
+ */
+const refreshColumn = () => {
+  data.editRules = getRules();
+  return xgrid.value.refreshColumn();
+};
+/**
+ * @description 显示加载框
+ */
+const showLoading = () => {
+  data.loading = true;
+};
+/**
+ * @description 隐藏加载框
+ */
+const hiddenLoading = () => {
+  data.loading = false;
+};
+/**
+ * @description 获取实例方法
+ * @return vxe-grid实例的方法
+ */
+const getInstance = () => {
+  return toRaw(xgrid.value);
+};
+/**
+ * @description 获取表格全量数据方法
+ * @return vxe-grid表格全量数据
+ */
+const getTableData = () => {
+  return xgrid.value.getTableData().fullData;
+};
+/**
+ * @description 获取表格选中的行
+ * @return vxe-grid表格勾选行
+ */
+const getSelectRecords = (isFull = false) => {
+  const columnType = props.columns[0].type;
+  const checkRecords =
+    columnType === 'radio' ? xgrid.value.getRadioRecord(isFull) : xgrid.value.getCheckboxRecords(isFull);
+  if (columnType === 'checkbox' && !checkRecords.length) {
+    warnMessage(t('message.tip_selectedRecord'));
+    return [];
+  } else if (columnType === 'radio' && !checkRecords) {
+    warnMessage(t('message.tip_selectedRecord'));
+    return null;
+  }
+  return checkRecords;
+};
+
+const callback = (cb, response) => {
+  attrs?.callback && attrs?.callback[cb] && attrs?.callback[cb](response);
+};
+
+const onReset = async e => {
+  console.log(e);
+  const data = e.data;
+  const items = props.items.filter(f => f.itemRender?.props?.multiple);
+  console.log(items);
+  items.forEach(item => {
+    if (item.itemRender.props.defaultValue) {
+      data[`_${item.field}`] = item.itemRender.props.defaultValue.split(',');
+      data[`${item.field}`] = item.itemRender.props.defaultValue;
+    } else {
+      data[`_${item.field}`] = [];
+    }
+  });
+  if (items.length) {
+    // 多选时，重新查询一次
+    setTimeout(() => {
+      refreshData();
+    }, 200);
+  }
+};
+
+let sortable2: any;
+const columnDrop = () => {
+  const $grid = xgrid.value;
+  sortable2 = Sortable.create($grid.$el.querySelector('.vxe-table--header .vxe-header--row'), {
+    disabled: !attrs.gridId,
+    handle: '.vxe-header--column',
+    onEnd: async sortableEvent => {
+      const targetThElem = sortableEvent.item;
+      const newIndex = sortableEvent.newIndex as number;
+      const oldIndex = sortableEvent.oldIndex as number;
+      const { fullColumn, tableColumn } = $grid.getTableColumn();
+      const wrapperElem = targetThElem.parentNode as HTMLElement;
+      const newColumn = fullColumn[newIndex];
+      const item = fullColumn[oldIndex];
+      let nodrag = false;
+      let msg = '固定列';
+      if (newColumn.fixed) {
+        nodrag = false;
+      } else if (newIndex === 0 || ['checkbox', 'radio'].includes(item.type)) {
+        msg = '勾选列';
+        nodrag = true;
+      } else if (item.field === 'operate' || newIndex === fullColumn.length - 1) {
+        nodrag = true;
+        msg = '操作列';
+      }
+      if (nodrag) {
+        // 错误的移动
+        const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
+        if (newIndex > oldIndex) {
+          wrapperElem.insertBefore(targetThElem, oldThElem);
+        } else {
+          wrapperElem.insertBefore(targetThElem, oldThElem ? oldThElem.nextElementSibling : oldThElem);
+        }
+        return errorMessage(msg + '不允许拖动！');
+      }
+      // 获取列索引 columnIndex > fullColumn
+      const oldColumnIndex = $grid.getColumnIndex(tableColumn[oldIndex]);
+      const newColumnIndex = $grid.getColumnIndex(tableColumn[newIndex]);
+      // 移动到目标列
+      const currRow = fullColumn.splice(oldColumnIndex, 1)[0];
+      fullColumn.splice(newColumnIndex, 0, currRow);
+
+      // 拖拽方向 1: 右 -1: 左
+      const direction = newColumnIndex - oldColumnIndex > 0 ? 1 : -1;
+
+      // 获取新列
+      const newSort = (newColumnIndex + 1) * 10;
+      const oldSort = (oldColumnIndex + 1) * 10;
+      // 目标列索引+1，方便后续计算
+      const comparisonVal = newSort + 1 * direction;
+      for (const key in cacheColumns) {
+        const cacheValue = cacheColumns[key];
+        if (direction > 0 && cacheValue < comparisonVal && cacheValue > oldSort) {
+          // 大于拖拽列且小于目标列的索引,均向前移动一个单位
+          cacheColumns[key] = cacheValue - 10 * direction;
+        } else if (direction < 0 && cacheValue > comparisonVal && cacheValue < oldSort) {
+          // 小于拖拽列且大于目标列的索引,  均向后移动一个单位
+          cacheColumns[key] = cacheValue - 10 * direction;
+        }
+      }
+
+      cacheColumns[currRow.field] = newSort;
+
+      dbstorage.setItem(kSTORECOLUM, { [attrs.gridId]: cacheColumns });
+      $grid.loadColumn(fullColumn);
+    }
+  });
+};
+
+/**
+ * @description 常用查询面板确认查询
+ * @param data 常用查询条件
+ */
+// const onSearch = data => {
+//   showModal.value = false;
+//   const { form } = xgrid.value.getProxyInfo();
+//   Object.assign(form, data);
+//   refreshData();
+// };
+
+const reloadGrid = () => {
+  setGridConfig();
+};
+
+/**
+ * @description Vue实例对外暴露的相关方法或属性
+ */
+defineExpose({
+  getTableData,
+  getSelectRecords,
+  refreshData,
+  refreshColumn,
+  getInstance,
+  showLoading,
+  hiddenLoading,
+  reloadGrid
+});
+
+const toolbarButtonClick = ({ code }) => {
+  emit('buttonClick', code);
+};
+const cellClick = e => {
+  emit('cellClick', e);
+};
+const cellDbclick = e => {
+  emit('cellDbclick', e);
+};
+const editEctivated = e => {
+  emit('editEctivated', e);
+};
+
+/**
+ * @description: 监听窗口变化，动态改变表格的高度
+ */
+const addResizeListener = () => {
+  window.onresize = () => {
+    return (() => {
+      let height = attrs?.height || window.innerHeight - 90;
+      if (attrs.mode !== 'inline' && !attrs?.height) {
+        height = window.innerHeight - 180;
+      }
+      data.height = height < 240 ? 240 : height;
+    })();
+  };
+};
+
+let initTime: any;
+nextTick(() => {
+  // 加载完成之后在绑定拖动事件
+  initTime = setTimeout(() => {
+    columnDrop();
+  }, 500);
+});
+/**
+ * @description Vue实例卸载
+ */
+onUnmounted(() => {
+  clearTimeout(initTime);
+  sortable2 && sortable2.destroy();
+});
+/**
+ * @description Vue实例挂载
+ */
+onBeforeMount(() => {
+  setGridConfig();
+  addResizeListener();
+});
+
+const emit = defineEmits<{
+  (e: 'buttonClick', code: string): void;
+  (e: 'cellClick', data: any): void;
+  (e: 'cellDbclick', data: any): void;
+  (e: 'editEctivated', data: any): void;
+}>();
+</script>
+
+<style lang="scss">
+.ut-grid-wrapper {
+  padding: 5px;
+  background-color: #fff;
+
+  .vxe-form--item {
+    padding: 0.1em 0.8em 0.1em 0 !important;
+
+    .el-select {
+      .el-input {
+        height: 26px;
+      }
+
+      .el-select__tags-text {
+        color: #000;
+      }
+    }
+  }
+
+  .vxe-grid--layout-body-content-wrapper {
+    overflow: hidden;
+  }
+}
+</style>