doway-coms 2.2.18 → 2.2.21

package/packages/BaseGridAdjust/src/index.vue

@@ -1,482 +1,482 @@
-<template>
-  <div>
-    <vxe-grid
-      ref="adjustGrid"
-      v-bind="adjustGridOptions"
-      :loading="adjustGridLoading"
-      @resizable-change="resizableChange"
-      :filter-config="{
-        remote: true,
-      }"
-      :sort-config="{
-        multiple: true,
-        remote: true,
-        chronological: true,
-      }"
-      column-key
-      :menu-config="menuConfig"
-      @menu-click="contextMenuClickEvent"
-    >
-      <template #empty>
-        <div>拖拽调整字段位置或者宽度</div>
-      </template>
-      <!--      是否显示字段  -->
-      <template #checkbox="{ column }">
-        <a-checkbox
-          v-model="column.params.show"
-          @change="changeCheckbox(column)"
-        ></a-checkbox>
-        {{ column.title }}
-      </template>
-
-      <!-- 筛选过滤 -->
-      <template #text_filter="scope">
-        <div class="interceptor-class">
-          <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]"
-              @keyup.enter.native="filterConfirm(scope.column)"
-            />
-          </div>
-          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
-          <a-button @click="filterConfirm(scope.column)">确认</a-button>
-        </div>
-      </template>
-      <template #customCell_filter="scope">
-        <div class="interceptor-class">
-          <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]"
-              @keyup.enter.native="filterConfirm(scope.column)"
-            />
-          </div>
-          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
-          <a-button @click="filterConfirm(scope.column)">确认</a-button>
-        </div>
-      </template>
-      <template #pulldown_filter="scope">
-        <div class="interceptor-class">
-          <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]"
-              @keyup.enter.native="filterConfirm(scope.column)"
-            />
-          </div>
-          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
-          <a-button @click="filterConfirm(scope.column)">确认</a-button>
-        </div>
-      </template>
-      <template #number_filter="scope">
-        <div class="interceptor-class">
-          <div
-            :class="scope.column.field + '_filter_' + $index"
-            v-for="(loopFilterValue, $index) in scope.column.filters[0].data
-              .displayValues"
-            :key="$index"
-          >
-            <a-input-number
-              :precision="0"
-              size="small"
-              v-model="loopFilterValue.value[0]"
-              @keyup.enter.native="filterConfirm(scope.column)"
-            />~
-            <a-input-number
-              :precision="0"
-              size="small"
-              v-model="loopFilterValue.value[1]"
-              @keyup.enter.native="filterConfirm(scope.column)"
-            />
-          </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="interceptor-class">
-          <a-checkbox-group
-            v-model="scope.column.filters[0].data.displayValues"
-            :style="{
-              display: 'flex',
-              flexWrap: 'wrap',
-              justifyContent: 'left',
-              alignItems: 'center',
-              maxHeight: '150px',
-              overflow: 'auto',
-              maxWidth: '100px',
-            }"
-            @keyup.enter.native="filterConfirm(scope.column)"
-          >
-            <br />
-            <a-checkbox
-              v-for="loopSource in scope.column.params.dataSource"
-              :key="loopSource.value"
-              :value="loopSource.value"
-              style="margin: 5px 0"
-              >{{ loopSource.caption }}
-            </a-checkbox>
-          </a-checkbox-group>
-          <!--          <a-select-->
-          <!--              v-model="scope.column.filters[0].data.displayValues"-->
-          <!--              mode="multiple"-->
-          <!--              allowClear-->
-          <!--              style="width: 300px;"-->
-          <!--              placeholder="筛选条件"-->
-          <!--              showArrow-->
-          <!--          >-->
-          <!--            <a-select-option-->
-          <!--                v-for="loopSource in scope.column.params.dataSource"-->
-          <!--                :key="loopSource.value"-->
-          <!--                :value="loopSource.value"-->
-          <!--            >{{ loopSource.caption }}</a-select-option-->
-          <!--            >-->
-          <!--          </a-select>-->
-          <br />
-          <a-button @click="filterConfirm(scope.column)">确认</a-button>
-        </div>
-      </template>
-      <template #datetime_filter="scope">
-        <div class="interceptor-class">
-          <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]"
-              @keyup.enter.native="filterConfirm(scope.column)"
-            />
-            <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]"
-              @keyup.enter.native="filterConfirm(scope.column)"
-            />
-          </div>
-          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
-          <a-button @click="filterConfirm(scope.column)">确认</a-button>
-        </div>
-      </template>
-      <template #date_filter="scope">
-        <div class="interceptor-class">
-          <div
-            :class="scope.column.field + '_filter_' + $index"
-            v-for="(loopFilterValue, $index) in scope.column.filters[0].data
-              .displayValues"
-            :key="$index"
-          >
-            <a-range-picker
-              v-model:value="loopFilterValue.value"
-              valueFormat="YYYY-MM-DD"
-              format="YYYY-MM-DD"
-              @keyup.enter.native="filterConfirm(scope.column)"
-            />
-          </div>
-          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
-          <a-button @click="filterConfirm(scope.column)">确认</a-button>
-        </div>
-      </template>
-    </vxe-grid>
-  </div>
-</template>
-<script>
-import Sortable from "sortablejs";
-import VXETable from "vxe-table";
-import XEUtils from "xe-utils";
-import { controlType } from "../../utils/enum";
-
-export default {
-  props: {
-    userDefineColumns: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-  },
-  created() {
-    this.adjustUserDefineColumns = this.userDefineColumns;
-    this.adjustUserDefineColumns.forEach((item) => {
-      if (item.visible) {
-        this.$set(item, "show", true);
-      } else {
-        this.$set(item, "show", false);
-      }
-    });
-    this.adjustGridOptions.columns = [];
-    this.adjustUserDefineColumns.forEach((item) => {
-      if (item.field === "operation") {
-        return;
-      }
-
-      const column = {
-        field: item.field,
-        title: item.title,
-        slots: {
-          header: "checkbox",
-          filter: item.slots.filter,
-        },
-        params: item.params,
-        width: item.width,
-        filters: item.filters,
-        sortable: item.sortable,
-        filterResetMethod: ({ options, column }) => {
-          column.filters = [
-            {
-              data: {
-                bindingValues: [],
-                displayValues: [],
-              },
-            },
-          ];
-        },
-      };
-      this.$set(column.params, "show", item.show);
-      this.adjustGridOptions.columns.push(column);
-    });
-  },
-  mounted() {
-    this.$refs.adjustGrid.getTableColumn().collectColumn.forEach((item) => {
-      const find = XEUtils.find(
-        this.adjustUserDefineColumns,
-        (innerItem) => item.field === innerItem.field
-      );
-      item.order = find.order;
-    });
-    this.columnDrop(this.adjustUserDefineColumns);
-  },
-  beforeDestroy() {
-    if (this.sortable) {
-      this.sortable.destroy();
-    }
-  },
-  data() {
-    return {
-      menuConfig: {
-        header: {
-          options: [
-            [
-              {
-                code: "clearFilter",
-                name: "清空筛选",
-                visible: true,
-                disabled: false,
-              },
-            ],
-          ],
-        },
-        enabled: true,
-      },
-      adjustGridLoading: false,
-      adjustUserDefineColumns: null,
-      adjustGridOptions: {
-        border: true,
-        class: "sortable-column-demo",
-        columnConfig: {
-          useKey: true,
-          resizable: true,
-        },
-        scrollX: {
-          enabled: false,
-        },
-        columns: [],
-        data: [],
-      },
-    };
-  },
-
-  methods: {
-    changeCheckbox(val) {
-      const find = XEUtils.find(
-        this.$refs.adjustGrid.getTableColumn().collectColumn,
-        (item) => item.field === val.field
-      );
-      find.visible = val.params.show;
-    },
-    //右键菜单事件
-    contextMenuClickEvent({ menu, row, column }) {
-      const $table = this.$refs.adjustGrid;
-      switch (menu.code) {
-        case "clearFilter":
-          const filterList = this.$refs.adjustGrid.getCheckedFilters();
-          filterList.forEach((col) => {
-            this.getTableColumn().forEach((column) => {
-              if (column.field == col.property) {
-                this.$set(column.filters[0].data, "displayValues", []);
-                this.$set(column.filters[0].data, "bindingValues", []);
-                this.$refs.adjustGrid.clearFilter(column);
-              }
-            });
-            //这个col和 internalColumn之间没有绑定上
-            col.column.filters = [
-              {
-                data: {
-                  bindingValues: [],
-                  displayValues: [],
-                },
-              },
-            ];
-          });
-          // this.$refs.adjustGrid.clearFilter()
-          // .then(res=>{
-          //   console.log('a',this.$refs.adjustGrid.getCheckedFilters())
-          //   console.log('b',this.getTableColumn())
-          // })
-          //     XEUtils.clear(this.filterExpression)
-          //     vm.$emit("filterChange");
-          break;
-      }
-    },
-    resizableChange($rowIndex) {
-      this.$refs.adjustGrid.getTableColumn().collectColumn.forEach((item) => {
-        if (item.field === $rowIndex.column.field) {
-          item.width = $rowIndex.column.resizeWidth;
-        }
-      });
-    },
-    columnDrop() {
-      this.$nextTick(() => {
-        this.adjustGridLoading = true;
-        const $table = this.$refs.adjustGrid;
-        this.sortable = Sortable.create(
-          $table.$el.querySelector(
-            ".body--wrapper>.vxe-table--header .vxe-header--row"
-          ),
-          {
-            handle: ".vxe-header--column",
-            onEnd: ({ item, newIndex, oldIndex }) => {
-              const { fullColumn, tableColumn } = $table.getTableColumn();
-              const targetThElem = item;
-              const wrapperElem = targetThElem.parentNode;
-              const newColumn = fullColumn[newIndex];
-              if (newColumn.fixed) {
-                const oldThElem = wrapperElem.children[oldIndex];
-                // 错误的移动
-                if (newIndex > oldIndex) {
-                  wrapperElem.insertBefore(targetThElem, oldThElem);
-                } else {
-                  wrapperElem.insertBefore(
-                    targetThElem,
-                    oldThElem ? oldThElem.nextElementSibling : oldThElem
-                  );
-                }
-                VXETable.modal.message({
-                  content: "固定列不允许拖动，即将还原操作！",
-                  status: "error",
-                });
-                return;
-              }
-              // 获取列索引 columnIndex > fullColumn
-              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);
-              this.adjustUserDefineColumns = fullColumn;
-            },
-          }
-        );
-        this.adjustGridLoading = false;
-      });
-    },
-    filterAddExp(colInfo) {
-      colInfo.filters[0].data.displayValues.push({
-        value: [null, null],
-      });
-    },
-    filterConfirm(colInfo) {
-      let col = this.adjustUserDefineColumns.find(
-        (x) => x.field === colInfo.property
-      );
-      this.$set(col.filters[0].data, "bindingValues", []);
-      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);
-          this.$set(
-            col.filters[0].data,
-            "bindingValues",
-            colInfo.filters[0].data.bindingValues
-          );
-        } else {
-          if (item.value[0] || item.value[1]) {
-            colInfo.filters[0].data.bindingValues.push(item);
-            this.$set(
-              col.filters[0].data,
-              "bindingValues",
-              colInfo.filters[0].data.bindingValues
-            );
-          }
-        }
-      });
-      colInfo.filters[0].checked =
-        colInfo.filters[0].data.bindingValues.length > 0;
-      this.$refs.adjustGrid.closeFilter();
-    },
-    getTableColumn() {
-      return this.$refs.adjustGrid.getTableColumn().collectColumn;
-    },
-  },
-};
-</script>
-<style scoped lang="less">
-.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;
-}
-
-.interceptor-class {
-  padding: 10px;
-  ::v-deep .ant-btn {
-    margin: 10px 10px 0;
-  }
-  ::v-deep .ant-input {
-    margin-bottom: 5px;
-  }
-  ::v-deep .ant-calendar-picker {
-    margin: 0 5px;
-  }
-}
-</style>
+<template>
+  <div>
+    <vxe-grid
+      ref="adjustGrid"
+      v-bind="adjustGridOptions"
+      :loading="adjustGridLoading"
+      @resizable-change="resizableChange"
+      :filter-config="{
+        remote: true,
+      }"
+      :sort-config="{
+        multiple: true,
+        remote: true,
+        chronological: true,
+      }"
+      column-key
+      :menu-config="menuConfig"
+      @menu-click="contextMenuClickEvent"
+    >
+      <template #empty>
+        <div>拖拽调整字段位置或者宽度</div>
+      </template>
+      <!--      是否显示字段  -->
+      <template #checkbox="{ column }">
+        <a-checkbox
+          v-model="column.params.show"
+          @change="changeCheckbox(column)"
+        ></a-checkbox>
+        {{ column.title }}
+      </template>
+
+      <!-- 筛选过滤 -->
+      <template #text_filter="scope">
+        <div class="interceptor-class">
+          <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]"
+              @keyup.enter.native="filterConfirm(scope.column)"
+            />
+          </div>
+          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
+          <a-button @click="filterConfirm(scope.column)">确认</a-button>
+        </div>
+      </template>
+      <template #customCell_filter="scope">
+        <div class="interceptor-class">
+          <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]"
+              @keyup.enter.native="filterConfirm(scope.column)"
+            />
+          </div>
+          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
+          <a-button @click="filterConfirm(scope.column)">确认</a-button>
+        </div>
+      </template>
+      <template #pulldown_filter="scope">
+        <div class="interceptor-class">
+          <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]"
+              @keyup.enter.native="filterConfirm(scope.column)"
+            />
+          </div>
+          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
+          <a-button @click="filterConfirm(scope.column)">确认</a-button>
+        </div>
+      </template>
+      <template #number_filter="scope">
+        <div class="interceptor-class">
+          <div
+            :class="scope.column.field + '_filter_' + $index"
+            v-for="(loopFilterValue, $index) in scope.column.filters[0].data
+              .displayValues"
+            :key="$index"
+          >
+            <a-input-number
+              :precision="0"
+              size="small"
+              v-model="loopFilterValue.value[0]"
+              @keyup.enter.native="filterConfirm(scope.column)"
+            />~
+            <a-input-number
+              :precision="0"
+              size="small"
+              v-model="loopFilterValue.value[1]"
+              @keyup.enter.native="filterConfirm(scope.column)"
+            />
+          </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="interceptor-class">
+          <a-checkbox-group
+            v-model="scope.column.filters[0].data.displayValues"
+            :style="{
+              display: 'flex',
+              flexWrap: 'wrap',
+              justifyContent: 'left',
+              alignItems: 'center',
+              maxHeight: '150px',
+              overflow: 'auto',
+              maxWidth: '100px',
+            }"
+            @keyup.enter.native="filterConfirm(scope.column)"
+          >
+            <br />
+            <a-checkbox
+              v-for="loopSource in scope.column.params.dataSource"
+              :key="loopSource.value"
+              :value="loopSource.value"
+              style="margin: 5px 0"
+              >{{ loopSource.caption }}
+            </a-checkbox>
+          </a-checkbox-group>
+          <!--          <a-select-->
+          <!--              v-model="scope.column.filters[0].data.displayValues"-->
+          <!--              mode="multiple"-->
+          <!--              allowClear-->
+          <!--              style="width: 300px;"-->
+          <!--              placeholder="筛选条件"-->
+          <!--              showArrow-->
+          <!--          >-->
+          <!--            <a-select-option-->
+          <!--                v-for="loopSource in scope.column.params.dataSource"-->
+          <!--                :key="loopSource.value"-->
+          <!--                :value="loopSource.value"-->
+          <!--            >{{ loopSource.caption }}</a-select-option-->
+          <!--            >-->
+          <!--          </a-select>-->
+          <br />
+          <a-button @click="filterConfirm(scope.column)">确认</a-button>
+        </div>
+      </template>
+      <template #datetime_filter="scope">
+        <div class="interceptor-class">
+          <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]"
+              @keyup.enter.native="filterConfirm(scope.column)"
+            />
+            <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]"
+              @keyup.enter.native="filterConfirm(scope.column)"
+            />
+          </div>
+          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
+          <a-button @click="filterConfirm(scope.column)">确认</a-button>
+        </div>
+      </template>
+      <template #date_filter="scope">
+        <div class="interceptor-class">
+          <div
+            :class="scope.column.field + '_filter_' + $index"
+            v-for="(loopFilterValue, $index) in scope.column.filters[0].data
+              .displayValues"
+            :key="$index"
+          >
+            <a-range-picker
+              v-model:value="loopFilterValue.value"
+              valueFormat="YYYY-MM-DD"
+              format="YYYY-MM-DD"
+              @keyup.enter.native="filterConfirm(scope.column)"
+            />
+          </div>
+          <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
+          <a-button @click="filterConfirm(scope.column)">确认</a-button>
+        </div>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+<script>
+import Sortable from "sortablejs";
+import VXETable from "vxe-table";
+import XEUtils from "xe-utils";
+import { controlType } from "../../utils/enum";
+
+export default {
+  props: {
+    userDefineColumns: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+  },
+  created() {
+    this.adjustUserDefineColumns = this.userDefineColumns;
+    this.adjustUserDefineColumns.forEach((item) => {
+      if (item.visible) {
+        this.$set(item, "show", true);
+      } else {
+        this.$set(item, "show", false);
+      }
+    });
+    this.adjustGridOptions.columns = [];
+    this.adjustUserDefineColumns.forEach((item) => {
+      if (item.field === "operation") {
+        return;
+      }
+
+      const column = {
+        field: item.field,
+        title: item.title,
+        slots: {
+          header: "checkbox",
+          filter: item.slots.filter,
+        },
+        params: item.params,
+        width: item.width,
+        filters: item.filters,
+        sortable: item.sortable,
+        filterResetMethod: ({ options, column }) => {
+          column.filters = [
+            {
+              data: {
+                bindingValues: [],
+                displayValues: [],
+              },
+            },
+          ];
+        },
+      };
+      this.$set(column.params, "show", item.show);
+      this.adjustGridOptions.columns.push(column);
+    });
+  },
+  mounted() {
+    this.$refs.adjustGrid.getTableColumn().collectColumn.forEach((item) => {
+      const find = XEUtils.find(
+        this.adjustUserDefineColumns,
+        (innerItem) => item.field === innerItem.field
+      );
+      item.order = find.order;
+    });
+    this.columnDrop(this.adjustUserDefineColumns);
+  },
+  beforeDestroy() {
+    if (this.sortable) {
+      this.sortable.destroy();
+    }
+  },
+  data() {
+    return {
+      menuConfig: {
+        header: {
+          options: [
+            [
+              {
+                code: "clearFilter",
+                name: "清空筛选",
+                visible: true,
+                disabled: false,
+              },
+            ],
+          ],
+        },
+        enabled: true,
+      },
+      adjustGridLoading: false,
+      adjustUserDefineColumns: null,
+      adjustGridOptions: {
+        border: true,
+        class: "sortable-column-demo",
+        columnConfig: {
+          useKey: true,
+          resizable: true,
+        },
+        scrollX: {
+          enabled: false,
+        },
+        columns: [],
+        data: [],
+      },
+    };
+  },
+
+  methods: {
+    changeCheckbox(val) {
+      const find = XEUtils.find(
+        this.$refs.adjustGrid.getTableColumn().collectColumn,
+        (item) => item.field === val.field
+      );
+      find.visible = val.params.show;
+    },
+    //右键菜单事件
+    contextMenuClickEvent({ menu, row, column }) {
+      const $table = this.$refs.adjustGrid;
+      switch (menu.code) {
+        case "clearFilter":
+          const filterList = this.$refs.adjustGrid.getCheckedFilters();
+          filterList.forEach((col) => {
+            this.getTableColumn().forEach((column) => {
+              if (column.field == col.property) {
+                this.$set(column.filters[0].data, "displayValues", []);
+                this.$set(column.filters[0].data, "bindingValues", []);
+                this.$refs.adjustGrid.clearFilter(column);
+              }
+            });
+            //这个col和 internalColumn之间没有绑定上
+            col.column.filters = [
+              {
+                data: {
+                  bindingValues: [],
+                  displayValues: [],
+                },
+              },
+            ];
+          });
+          // this.$refs.adjustGrid.clearFilter()
+          // .then(res=>{
+          //   console.log('a',this.$refs.adjustGrid.getCheckedFilters())
+          //   console.log('b',this.getTableColumn())
+          // })
+          //     XEUtils.clear(this.filterExpression)
+          //     vm.$emit("filterChange");
+          break;
+      }
+    },
+    resizableChange($rowIndex) {
+      this.$refs.adjustGrid.getTableColumn().collectColumn.forEach((item) => {
+        if (item.field === $rowIndex.column.field) {
+          item.width = $rowIndex.column.resizeWidth;
+        }
+      });
+    },
+    columnDrop() {
+      this.$nextTick(() => {
+        this.adjustGridLoading = true;
+        const $table = this.$refs.adjustGrid;
+        this.sortable = Sortable.create(
+          $table.$el.querySelector(
+            ".body--wrapper>.vxe-table--header .vxe-header--row"
+          ),
+          {
+            handle: ".vxe-header--column",
+            onEnd: ({ item, newIndex, oldIndex }) => {
+              const { fullColumn, tableColumn } = $table.getTableColumn();
+              const targetThElem = item;
+              const wrapperElem = targetThElem.parentNode;
+              const newColumn = fullColumn[newIndex];
+              if (newColumn.fixed) {
+                const oldThElem = wrapperElem.children[oldIndex];
+                // 错误的移动
+                if (newIndex > oldIndex) {
+                  wrapperElem.insertBefore(targetThElem, oldThElem);
+                } else {
+                  wrapperElem.insertBefore(
+                    targetThElem,
+                    oldThElem ? oldThElem.nextElementSibling : oldThElem
+                  );
+                }
+                VXETable.modal.message({
+                  content: "固定列不允许拖动，即将还原操作！",
+                  status: "error",
+                });
+                return;
+              }
+              // 获取列索引 columnIndex > fullColumn
+              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);
+              this.adjustUserDefineColumns = fullColumn;
+            },
+          }
+        );
+        this.adjustGridLoading = false;
+      });
+    },
+    filterAddExp(colInfo) {
+      colInfo.filters[0].data.displayValues.push({
+        value: [null, null],
+      });
+    },
+    filterConfirm(colInfo) {
+      let col = this.adjustUserDefineColumns.find(
+        (x) => x.field === colInfo.property
+      );
+      this.$set(col.filters[0].data, "bindingValues", []);
+      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);
+          this.$set(
+            col.filters[0].data,
+            "bindingValues",
+            colInfo.filters[0].data.bindingValues
+          );
+        } else {
+          if (item.value[0] || item.value[1]) {
+            colInfo.filters[0].data.bindingValues.push(item);
+            this.$set(
+              col.filters[0].data,
+              "bindingValues",
+              colInfo.filters[0].data.bindingValues
+            );
+          }
+        }
+      });
+      colInfo.filters[0].checked =
+        colInfo.filters[0].data.bindingValues.length > 0;
+      this.$refs.adjustGrid.closeFilter();
+    },
+    getTableColumn() {
+      return this.$refs.adjustGrid.getTableColumn().collectColumn;
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.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;
+}
+
+.interceptor-class {
+  padding: 10px;
+  ::v-deep .ant-btn {
+    margin: 10px 10px 0;
+  }
+  ::v-deep .ant-input {
+    margin-bottom: 5px;
+  }
+  ::v-deep .ant-calendar-picker {
+    margin: 0 5px;
+  }
+}
+</style>