sohelp-eleplus 1.1.19 → 1.1.21

package/sohelp-vxe-grid/index.vue

@@ -6,6 +6,7 @@
       @page-change="pageChangeEvent"
       ref="sohelpVxeGridRef"
       @menuClick="menuEvents"
+      :id="getId()"
       @toolbarButtonClick="onToolbarButtonClick"
       @checkboxChange="onCheckboxChange"
       @checkboxAll="onCheckboxAllChange"
@@ -47,401 +48,409 @@
 </template>
 
 <script setup>
-import { EleMessage } from "@/components/ele-admin-plus/components";
-import { DragOutlined } from "../sohelp-icon-select/icons";
-import { nextTick, onMounted, reactive, ref, watch } from "vue";
-import { merge,cloneDeep } from "lodash-es"; // 正确导入
-import DefaultProps from "./DefaultProps";
-import { Search } from "@element-plus/icons-vue";
-import DefaultGridOptions from "./DefaultGridOptions";
-
-/**判断配置是否初始化完毕*/
-const emit = defineEmits([
-  "filter",
-  "reset",
-  "pageChange",
-  "checkboxAll",
-  "checkboxChange",
-  "toolbarButtonClick",
-  "menuClick",
-  "cellClick",
-  "pageChange",
-  "refresh",
-  "radioChange",
-  "update:value",
-  "update:value"
-]);
-
-const isPage = ref(false);
-const selectedValue = ref([]);
-const selectedData = ref([]);
-const keywords = ref("");
-const props = defineProps(cloneDeep(DefaultProps));
-
-/**列表实例*/
-const sohelpVxeGridRef = ref(null);
-
-const gridOptions = reactive(cloneDeep(DefaultGridOptions));
-if (props.gridOptions) {
-  merge(gridOptions, props.gridOptions);
-}
-
-/**根据URL动态加载数据**/
-if (props.url) {
-  merge(gridOptions, {
-    proxyConfig: {
-      response: {
-        result: "result",
-        total: "page.total"
-      },
-      ajax: {
-        query: () => {
+  import { EleMessage } from '@/components/ele-admin-plus/components';
+  import { DragOutlined } from '../sohelp-icon-select/icons';
+  import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+  import { merge, cloneDeep } from 'lodash-es'; // 正确导入
+  import DefaultProps from './DefaultProps';
+  import { Search } from '@element-plus/icons-vue';
+  import { uuid } from '../utils/core.js';
+  import DefaultGridOptions from './DefaultGridOptions';
+
+  /**判断配置是否初始化完毕*/
+  const emit = defineEmits([
+    'filter',
+    'reset',
+    'pageChange',
+    'checkboxAll',
+    'checkboxChange',
+    'toolbarButtonClick',
+    'menuClick',
+    'cellClick',
+    'pageChange',
+    'refresh',
+    'radioChange',
+    'update:value',
+    'update:value'
+  ]);
+
+  const isPage = ref(false);
+  const selectedValue = ref([]);
+  const selectedData = ref([]);
+  const keywords = ref('');
+  const props = defineProps(cloneDeep(DefaultProps));
+
+  /** 自动生成ID */
+  const getId = () => {
+    return 'sohelp-grid-' + uuid();
+  };
+
+  /**列表实例*/
+  const sohelpVxeGridRef = ref(null);
+
+  const gridOptions = reactive(cloneDeep(DefaultGridOptions));
+  if (props.gridOptions) {
+    merge(gridOptions, props.gridOptions);
+  }
+
+  if (props.gridOptions) {
+    merge(gridOptions, props.gridOptions);
+  }
+
+  /**根据URL动态加载数据**/
+  if (props.url) {
+    merge(gridOptions, {
+      proxyConfig: {
+        response: {
+          result: 'result',
+          total: 'page.total'
+        },
+        ajax: {
+          query: () => {
+            refresh();
+          }
         }
       }
+    });
+  }
+
+  /**根据参数加载数据*/
+  const reload = async (param = {}) => {
+    emit('filter', param);
+    gridOptions.loading = true;
+    gridOptions.params = param;
+    //配置初始化完毕后，才可以执行刷新
+
+    const url = props.url;
+    if (!url) {
+      gridOptions.loading = false;
+      return { results: [], total: 0 };
     }
-  });
-}
 
+    let pageConfig = {};
+    // 是否分页
+    if (gridOptions.pagerConfig?.enabled) {
+      pageConfig.page = gridOptions.pagerConfig?.currentPage ?? 1;
+      pageConfig.limit = gridOptions.pagerConfig?.pageSize ?? 50;
+    }
 
-/**根据参数加载数据*/
-const reload = async (param = {}) => {
-  emit("filter", param);
-  gridOptions.loading = true;
-  gridOptions.params = param;
-  //配置初始化完毕后，才可以执行刷新
+    const res = await SohelpHttp.get(url, {
+      ...param,
+      keywords: keywords.value,
+      ...pageConfig
+    }).catch((e) => {
+      gridOptions.loading = false;
+      EleMessage.error(e);
+    });
 
-  const url = props.url;
-  if (!url) {
     gridOptions.loading = false;
-    return { results: [], total: 0 };
-  }
-
-  let pageConfig = {};
-  // 是否分页
-  if (gridOptions.pagerConfig?.enabled) {
-    pageConfig.page = gridOptions.pagerConfig?.currentPage ?? 1;
-    pageConfig.limit = gridOptions.pagerConfig?.pageSize ?? 50;
-  }
+    if (!res.meta.success) {
+      EleMessage.error(res.meta.message);
+      return { results: [], total: 0 };
+    }
+    const $grid = sohelpVxeGridRef.value;
+    $grid.loadData(res.data.results || res.data);
+    if (gridOptions?.pagerConfig?.enabled) {
+      gridOptions.pagerConfig.total = res.data.total;
+    }
 
-  const res = await SohelpHttp.get(url, {
-    ...param,
-    keywords: keywords.value,
-    ...pageConfig
-  }).catch((e) => {
     gridOptions.loading = false;
-    EleMessage.error(e);
-  });
-
-  gridOptions.loading = false;
-  if (!res.meta.success) {
-    EleMessage.error(res.meta.message);
-    return { results: [], total: 0 };
-  }
-  const $grid = sohelpVxeGridRef.value;
-  $grid.loadData(res.data.results || res.data);
-  if (gridOptions?.pagerConfig?.enabled) {
-    gridOptions.pagerConfig.total = res.data.total;
-  }
-
-  gridOptions.loading = false;
-  initValue();
-};
-
-
-/**实现分页事件*/
-const pageChangeEvent = (page) => {
-  isPage.value = true;
-  gridOptions.pagerConfig.currentPage = page.currentPage;
-  gridOptions.pagerConfig.pageSize = page.pageSize;
-  emit("pageChange", page);
-};
-
-/**刷新数据*/
-const refresh = () => {
-  if (!isPage.value) {
-    keywords.value = "";
-    if (gridOptions.pagerConfig && gridOptions.pagerConfig.enabled) {
-      gridOptions.pagerConfig.currentPage = 1;
-    } else {
-      gridOptions.pagerConfig = {
-        currentPage: 1
-      };
+    initValue();
+  };
+
+  /**实现分页事件*/
+  const pageChangeEvent = (page) => {
+    isPage.value = true;
+    gridOptions.pagerConfig.currentPage = page.currentPage;
+    gridOptions.pagerConfig.pageSize = page.pageSize;
+    emit('pageChange', page);
+  };
+
+  /**刷新数据*/
+  const refresh = () => {
+    if (!isPage.value) {
+      keywords.value = '';
+      if (gridOptions.pagerConfig && gridOptions.pagerConfig.enabled) {
+        gridOptions.pagerConfig.currentPage = 1;
+      } else {
+        gridOptions.pagerConfig = {
+          currentPage: 1
+        };
+      }
+      //清空选中
+      selectedValue.value = [];
+      sohelpVxeGridRef.value?.clearCheckboxRow();
+      emit('refresh');
     }
-    //清空选中
-    selectedValue.value = [];
-    sohelpVxeGridRef.value?.clearCheckboxRow();
-    emit("refresh");
-  }
-  isPage.value = false;
-  reload({ ...gridOptions.params });
-};
-
-/**
- *  grid事件
- * @param param0
- */
-const menuEvents = async ({ menu, row, column, rowIndex }) => {
-  const $grid = sohelpVxeGridRef.value;
-  if ($grid) {
-    $grid.setCurrentRow(row);
-  }
-};
-
-/**
- * 工具栏点击事件
- * @param params
- */
-const onToolbarButtonClick = (params) => {
-  emit("toolbarButtonClick", params);
-};
-
-/**
- * checkbox 点击
- * @param params
- */
-const onCheckboxChange = (params) => {
-  emit("checkboxChange", params);
-  if (props.multiple) {
-    setSelectedValue(params.row);
-    updateData();
-  }
-};
-
-/**
- * 获取表格当前页数据
- */
-const getTableData = () => {
-  return JSON.parse(JSON.stringify(sohelpVxeGridRef.value?.getTableData().tableData));
-};
-
-/**
- * 全选、取消全选 更新value,data值
- * @param param0
- */
-const onCheckboxAllChange = (params) => {
-  const data = getTableData();
-  const ids = data.map((item) => item.id);
-  if (params.checked) {
-    selectedValue.value = [...new Set([...selectedValue.value, ...ids])];
-    selectedData.value = Array.from(
-      [...selectedData.value, ...data].reduce((map, item) => map.set(item.id, item), new Map()).values()
-    );
-  } else {
-    selectedValue.value = selectedValue.value.filter((item) => !ids.includes(item));
-  }
-
-  emit("checkboxAll", params);
-  updateData();
-};
-
-/**
- * checkbox row click selectValue, selectedData设置是否选中
- * @param row
- */
-const setSelectedValue = (row) => {
-  let idx = selectedValue.value.findIndex((id) => id === row.id);
-  if (idx != -1) {
-    selectedValue.value.splice(idx, 1);
-  } else {
-    selectedValue.value.push(row.id);
-    let _idx = selectedData.value.findIndex((item) => item.id === row.id);
-    if (_idx === -1) {
-      selectedData.value.push({ ...row });
+    isPage.value = false;
+    reload({ ...gridOptions.params });
+  };
+
+  /**
+   *  grid事件
+   * @param param0
+   */
+  const menuEvents = async ({ menu, row, column, rowIndex }) => {
+    const $grid = sohelpVxeGridRef.value;
+    if ($grid) {
+      $grid.setCurrentRow(row);
     }
-  }
-};
-
-/**
- * 行点击
- * @param params
- */
-const onCellClick = (params) => {
-  emit("cellClick", params);
-};
-
-/**
- *
- * @param params 单选框点击
- */
-const onRadioChange = (params) => {
-  emit("radioChange", params);
-  if (!props.multiple) {
-    clear();
-    const row = sohelpVxeGridRef.value?.getRadioRecord();
-    if (row) {
-      selectedValue.value = [row.id];
+  };
+
+  /**
+   * 工具栏点击事件
+   * @param params
+   */
+  const onToolbarButtonClick = (params) => {
+    emit('toolbarButtonClick', params);
+  };
+
+  /**
+   * checkbox 点击
+   * @param params
+   */
+  const onCheckboxChange = (params) => {
+    emit('checkboxChange', params);
+    if (props.multiple) {
+      setSelectedValue(params.row);
+      updateData();
+    }
+  };
+
+  /**
+   * 获取表格当前页数据
+   */
+  const getTableData = () => {
+    return JSON.parse(JSON.stringify(sohelpVxeGridRef.value?.getTableData().tableData));
+  };
+
+  /**
+   * 全选、取消全选 更新value,data值
+   * @param param0
+   */
+  const onCheckboxAllChange = (params) => {
+    const data = getTableData();
+    const ids = data.map((item) => item.id);
+    if (params.checked) {
+      selectedValue.value = [...new Set([...selectedValue.value, ...ids])];
       selectedData.value = Array.from(
-        new Map([row, ...selectedData.value].map((item) => [item.id, item])).values()
+        [...selectedData.value, ...data].reduce((map, item) => map.set(item.id, item), new Map()).values()
       );
     } else {
-      selectedData.value = props.data;
-      selectedValue.value = [];
+      selectedValue.value = selectedValue.value.filter((item) => !ids.includes(item));
     }
 
+    emit('checkboxAll', params);
     updateData();
-  }
-};
-
-/**
- * 更新value,data
- */
-const updateData = () => {
-  emit("update:value", [...selectedValue.value]);
-  emit("update:data", [...selectedData.value]);
-};
-
-/**grid 事件处理 */
-const gridEvents = {
-  cellMenu({ row, rowIndex }) {
-    const $grid = sohelpVxeGridRef.value;
-    if ($grid) {
-      $grid.setCurrentRow(row);
+  };
+
+  /**
+   * checkbox row click selectValue, selectedData设置是否选中
+   * @param row
+   */
+  const setSelectedValue = (row) => {
+    let idx = selectedValue.value.findIndex((id) => id === row.id);
+    if (idx != -1) {
+      selectedValue.value.splice(idx, 1);
+    } else {
+      selectedValue.value.push(row.id);
+      let _idx = selectedData.value.findIndex((item) => item.id === row.id);
+      if (_idx === -1) {
+        selectedData.value.push({ ...row });
+      }
     }
-  },
-  menuClick({ menu, column, row, rowIndex }) {
-    const $grid = sohelpVxeGridRef.value;
-    if ($grid) {
-      switch (menu.code) {
-        case "insert":
-          // $grid.insert();
-          $grid.insertAt({}, rowIndex);
-
-          let _table = $grid.getTableData();
+  };
+
+  /**
+   * 行点击
+   * @param params
+   */
+  const onCellClick = (params) => {
+    emit('cellClick', params);
+  };
+
+  /**
+   *
+   * @param params 单选框点击
+   */
+  const onRadioChange = (params) => {
+    emit('radioChange', params);
+    if (!props.multiple) {
+      clear();
+      const row = sohelpVxeGridRef.value?.getRadioRecord();
+      if (row) {
+        selectedValue.value = [row.id];
+        selectedData.value = Array.from(new Map([row, ...selectedData.value].map((item) => [item.id, item])).values());
+      } else {
+        selectedData.value = props.data;
+        selectedValue.value = [];
+      }
 
-          break;
-        case "copy":
-          break;
+      updateData();
+    }
+  };
+
+  /**
+   * 更新value,data
+   */
+  const updateData = () => {
+    emit('update:value', [...selectedValue.value]);
+    emit('update:data', [...selectedData.value]);
+  };
+
+  /**grid 事件处理 */
+  const gridEvents = {
+    cellMenu({ row, rowIndex }) {
+      const $grid = sohelpVxeGridRef.value;
+      if ($grid) {
+        $grid.setCurrentRow(row);
       }
+    },
+    menuClick({ menu, column, row, rowIndex }) {
+      const $grid = sohelpVxeGridRef.value;
+      if ($grid) {
+        switch (menu.code) {
+          case 'insert':
+            // $grid.insert();
+            $grid.insertAt({}, rowIndex);
+
+            let _table = $grid.getTableData();
+
+            break;
+          case 'copy':
+            break;
+        }
 
-      emit("menuClick", $grid, code);
+        emit('menuClick', $grid, code);
+      }
     }
-  }
-};
-
-const loadData = (data) => {
-  const $grid = sohelpVxeGridRef.value;
-  $grid.loadData(data);
-};
-
-/**
- * 数据回显
- */
-const initValue = () => {
-  nextTick(() => {
+  };
+
+  const loadData = (data) => {
     const $grid = sohelpVxeGridRef.value;
-    if ($grid && selectedValue.value.length) {
-      setTimeout(() => {
-        $grid.setCheckboxRowKey(selectedValue.value, true);
-      }, 100);
+    $grid.loadData(data);
+  };
+
+  /**
+   * 数据回显
+   */
+  const initValue = () => {
+    nextTick(() => {
+      const $grid = sohelpVxeGridRef.value;
+      if ($grid && selectedValue.value.length) {
+        setTimeout(() => {
+          $grid.setCheckboxRowKey(selectedValue.value, true);
+        }, 100);
+      }
+    });
+  };
+
+  onMounted(() => {
+    if (props.autoLoad) {
+      // reload({});
     }
   });
-};
 
-onMounted(() => {
-  if (props.autoLoad) {
-    reload({});
-  }
-});
-
-/**
- * 清空
- */
-const clear = () => {
-  const $grid = sohelpVxeGridRef.value;
-  $grid?.clearCheckboxReserve();
-  $grid?.clearCheckboxRow();
-  $grid.clearSelected();
-};
-
-const getSelection = () => {
-  return sohelpVxeGridRef.value?.getCheckboxRecords() || [];
-};
-
-watch(
-  () => props.value,
-  (val) => {
-    let arr = Array.isArray(val) ? val : val ? [val] : [];
-    selectedValue.value = props.multiple ? [...arr] : [arr[0]];
-    if (props.data && props.data?.length > 0) {
-      selectedData.value = [...props.data];
+  /**
+   * 清空
+   */
+  const clear = () => {
+    const $grid = sohelpVxeGridRef.value;
+    $grid?.clearCheckboxReserve();
+    $grid?.clearCheckboxRow();
+    $grid.clearSelected();
+  };
+
+  const getSelection = () => {
+    return sohelpVxeGridRef.value?.getCheckboxRecords() || [];
+  };
+
+  watch(
+    () => props.value,
+    (val) => {
+      let arr = Array.isArray(val) ? val : val ? [val] : [];
+      selectedValue.value = props.multiple ? [...arr] : [arr[0]];
+      if (props.data && props.data?.length > 0) {
+        selectedData.value = [...props.data];
+      }
+    },
+    {
+      immediate: true
     }
-  },
-  {
-    immediate: true
-  }
-);
-
-defineExpose({
-  $grid: sohelpVxeGridRef,
-  getSelection,
-  gridOptions,
-  loadData,
-  refresh,
-  reload,
-  pageChangeEvent,
-  gridEvents,
-  menuEvents,
-  onToolbarButtonClick,
-  onCheckboxChange,
-  onCellClick,
-  onCheckboxAllChange,
-  onRadioChange,
-  selectedData,
-  selectedValue,
-  updateData,
-  initValue,
-  clear,
-  getTableData,
-  keywords,
-  clearRadioRow: () => {
-    sohelpVxeGridRef.value.clearRadioRow();
-  }
-});
+  );
+
+  defineExpose({
+    $grid: sohelpVxeGridRef,
+    getSelection,
+    gridOptions,
+    loadData,
+    refresh,
+    reload,
+    pageChangeEvent,
+    gridEvents,
+    menuEvents,
+    onToolbarButtonClick,
+    onCheckboxChange,
+    onCellClick,
+    onCheckboxAllChange,
+    onRadioChange,
+    selectedData,
+    selectedValue,
+    updateData,
+    initValue,
+    clear,
+    getTableData,
+    keywords,
+    clearRadioRow: () => {
+      sohelpVxeGridRef.value.clearRadioRow();
+    }
+  });
 </script>
 <script>
-export default {
-  name: "SohelpVxeGrid"
-};
+  export default {
+    name: 'SohelpVxeGrid'
+  };
 </script>
 
 <style lang="scss" scoped>
-.sohelp-vxe-grid {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  :deep(.vxe-grid) {
-    height: 100%;
+  .sohelp-vxe-grid {
     width: 100%;
-    min-width: 100px;
+    height: 100%;
+    box-sizing: border-box;
 
-    .vxe-grid--layout-body-content-wrapper {
-      display: flex;
-      flex-direction: column;
+    :deep(.vxe-grid) {
+      height: 100%;
+      width: 100%;
+      min-width: 100px;
 
-      .vxe-grid--toolbar-wrapper {
-        .vxe-toolbar {
-          box-sizing: border-box;
-          padding: 0 5px 5px 5px;
-        }
-      }
+      .vxe-grid--layout-body-content-wrapper {
+        display: flex;
+        flex-direction: column;
 
-      .vxe-grid--table-container {
-        flex: 1;
-        height: 100%;
+        .vxe-grid--toolbar-wrapper {
+          .vxe-toolbar {
+            box-sizing: border-box;
+            padding: 0 5px 5px 5px;
+          }
+        }
 
-        .vxe-table {
+        .vxe-grid--table-container {
+          flex: 1;
           height: 100%;
 
-          .vxe-table--render-wrapper {
+          .vxe-table {
             height: 100%;
 
-            .vxe-table--layout-wrapper {
-              height: calc(100% - 10px);
+            .vxe-table--render-wrapper {
+              height: 100%;
+
+              .vxe-table--layout-wrapper {
+                height: calc(100% - 10px);
 
-              .col--selected {
-                //去除单元格选中效果
-                box-shadow: none;
+                .col--selected {
+                  //去除单元格选中效果
+                  box-shadow: none;
+                }
               }
             }
           }
@@ -449,27 +458,26 @@ export default {
       }
     }
   }
-}
-
-.drag-btn {
-  cursor: move;
-  font-size: 12px;
-}
-
-.vxe-body--row.sortable-ghost,
-.vxe-body--row.sortable-chosen {
-  background-color: #dfecfb;
-}
-
-.search-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
-  margin-right: 10px;
-
-  .search-box {
-    width: 200px;
+
+  .drag-btn {
+    cursor: move;
+    font-size: 12px;
+  }
+
+  .vxe-body--row.sortable-ghost,
+  .vxe-body--row.sortable-chosen {
+    background-color: #dfecfb;
+  }
+
+  .search-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    margin-right: 10px;
+
+    .search-box {
+      width: 200px;
+    }
   }
-}
 </style>