sohelp-eleplus 1.1.17 → 1.1.19

package/sohelp-vxe-grid/index.vue

@@ -12,13 +12,12 @@
       @radioChange="onRadioChange"
       @cellClick.stop="onCellClick"
     >
-      <template #searchSlot>
+      <template #keywords>
         <div class="search-wrap">
           <div class="search-box">
-            <ele-tooltip :content="getKeywordsPlaceholder" placement="top" :offset="3">
+            <ele-tooltip content="请输入关键字按回车搜索." placement="top" :offset="3">
               <sohelp-input
                 v-model="keywords"
-                :placeholder="getKeywordsPlaceholder"
                 clearable
                 @keyup.enter="reload(gridOptions.params)"
                 class="input-with-select"
@@ -47,446 +46,402 @@
   </div>
 </template>
 
-<script>
-  import { EleMessage } from '@/components/ele-admin-plus/components';
-  import { DragOutlined } from '@/components/icons';
-  import { reactive, ref, nextTick, watch, computed } from 'vue';
-  import DefaultProps from './DefaultProps';
-  import initial from './SohelpGridConfig';
-  import { Search } from '@element-plus/icons-vue';
-
-  export default {
-    name: 'SohelpVxeGrid',
-    extends: [],
-    props: DefaultProps,
-    emits: [
-      'pageChange',
-      'checkboxAll',
-      'checkboxChange',
-      'toolbarButtonClick',
-      'menuClick',
-      'cellClick',
-      'pageChange',
-      'refresh',
-      'radioChange',
-      'update:value',
-      'update:value'
-    ],
-    setup(props, { emit }) {
-      /**判断配置是否初始化完毕*/
-      const isConfigInitialized = ref(false);
-      const sohelpConfig = reactive({});
-      const isPage = ref(false);
-      const selectedValue = ref([]);
-      const selectedData = ref([]);
-      const keywords = ref('');
-      const propertiesMap = reactive({});
-
-      /**列表实例*/
-      const sohelpVxeGridRef = ref(null);
-      const gridOptions = reactive({});
-      /**初始化配置*/
-      initial(sohelpVxeGridRef, props)
-        .then((config) => {
-          /**配置刷新功能 */
-          config.gridOptions = {
-            ...config.gridOptions,
-            toolbarConfig: {
-              ...config.gridOptions?.toolbarConfig,
-              refresh: true,
-              zoom: true
-            },
-            proxyConfig: {
-              ajax: {
-                query: () => refresh() // 简写箭头函数
-              }
-            }
-          };
-
-          Object.assign(gridOptions, config.gridOptions);
-          Object.assign(sohelpConfig, config.sohelpConfig);
-          Object.assign(propertiesMap, config.propertiesMap);
-
-          /**配置初始化完成*/
-          isConfigInitialized.value = true;
-        })
-        .catch((e) => {
-          EleMessage.error(e.message);
-        });
-
-      const getKeywordsPlaceholder = computed(() => {
-        if (sohelpConfig?.filter?.keywords?.length) {
-          return (
-            '请输入关键 ' +
-            sohelpConfig.filter.keywords
-              .filter((key) => propertiesMap[key])
-              .map((key) => propertiesMap[key].label)
-              .join('、') +
-            ' 进行查询'
-          );
-        }
-        return '请输入关键字';
-      });
-
-      /**判断配置是否初始化完毕*/
-      const isConfigDone = async () => {
-        return new Promise((resolve) => {
-          if (isConfigInitialized.value) {
-            resolve();
-          } else {
-            let timer = setInterval(() => {
-              if (isConfigInitialized.value) {
-                clearInterval(timer);
-                resolve();
-              }
-            }, 10);
-          }
-        });
-      };
-
-      /**根据参数加载数据*/
-      const reload = async (param = {}) => {
-        gridOptions.loading = true;
-        gridOptions.params = param;
-        //配置初始化完毕后，才可以执行刷新
-        await isConfigDone();
-        const $grid = sohelpVxeGridRef.value;
-        if ($grid) {
-          const url = props.url || sohelpConfig.requestValue;
-          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 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 };
-          }
-          $grid.loadData(res.data.results || res.data);
-          if (gridOptions?.pagerConfig?.enabled) {
-            gridOptions.pagerConfig.total = res.data.total;
-          }
+<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: () => {
         }
-        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
-            };
-          }
-          //清空选中
-          selectedValue.value = [];
-          sohelpVxeGridRef.value?.clearCheckboxRow();
-          emit('refresh');
-        }
-        isPage.value = false;
-        const autoLoad = props.autoLoad || sohelpConfig?.autoLoad || true;
+/**根据参数加载数据*/
+const reload = async (param = {}) => {
+  emit("filter", param);
+  gridOptions.loading = true;
+  gridOptions.params = param;
+  //配置初始化完毕后，才可以执行刷新
 
-        if (autoLoad) {
-          reload({ ...gridOptions.params });
-        }
-      };
-
-      /**
-       *  grid事件
-       * @param param0
-       */
-      const menuEvents = async ({ menu, row, column, rowIndex }) => {
-        const $grid = sohelpVxeGridRef.value;
-        if ($grid) {
-          $grid.setCurrentRow(row);
-          switch (menu.code) {
-            case 'insert':
-              const { row } = await $grid.insertAt(
-                {
-                  role_name: 'sales user'
-                },
-                rowIndex
-              );
-              break;
-          }
-        }
-      };
+  const url = props.url;
+  if (!url) {
+    gridOptions.loading = false;
+    return { results: [], total: 0 };
+  }
 
-      /**
-       * 工具栏点击事件
-       * @param params
-       */
-      const onToolbarButtonClick = (params) => {
-        emit('toolbarButtonClick', params);
-      };
+  let pageConfig = {};
+  // 是否分页
+  if (gridOptions.pagerConfig?.enabled) {
+    pageConfig.page = gridOptions.pagerConfig?.currentPage ?? 1;
+    pageConfig.limit = gridOptions.pagerConfig?.pageSize ?? 50;
+  }
 
-      /**
-       * checkbox 点击
-       * @param params
-       */
-      const onCheckboxChange = (params) => {
-        emit('checkboxChange', params);
-        if (props.multiple) {
-          setSelectedValue(params.row);
-          updateData();
-        }
-      };
+  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;
+  }
 
-      /**
-       * 获取表格当前页数据
-       */
-      const getTableData = () => {
-        return JSON.parse(JSON.stringify(sohelpVxeGridRef.value?.getTableData().tableData));
+  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
       };
+    }
+    //清空选中
+    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));
+  }
 
-      /**
-       * 全选、取消全选 更新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();
-      };
+  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 });
+    }
+  }
+};
+
+/**
+ * 行点击
+ * @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 = [];
+    }
 
-      /**
-       * 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 });
-          }
-        }
-      };
+    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;
+      }
 
-      /**
-       * 行点击
-       * @param params
-       */
-      const onCellClick = (params) => {
-        emit('cellClick', params);
-      };
+      emit("menuClick", $grid, code);
+    }
+  }
+};
+
+const loadData = (data) => {
+  const $grid = sohelpVxeGridRef.value;
+  $grid.loadData(data);
+};
+
+/**
+ * 数据回显
+ */
+const initValue = () => {
+  nextTick(() => {
+    const $grid = sohelpVxeGridRef.value;
+    if ($grid && selectedValue.value.length) {
+      setTimeout(() => {
+        $grid.setCheckboxRowKey(selectedValue.value, true);
+      }, 100);
+    }
+  });
+};
 
-      /**
-       *
-       * @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 = [];
-          }
+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];
+    }
+  },
+  {
+    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();
+  }
+});
+</script>
+<script>
+export default {
+  name: "SohelpVxeGrid"
+};
+</script>
 
-          updateData();
-        }
-      };
+<style lang="scss" scoped>
+.sohelp-vxe-grid {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
 
-      /**
-       * 更新value,data
-       */
-      const updateData = () => {
-        emit('update:value', [...selectedValue.value]);
-        emit('update:data', [...selectedData.value]);
-      };
+  :deep(.vxe-grid) {
+    height: 100%;
+    width: 100%;
+    min-width: 100px;
 
-      /**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;
-            }
+    .vxe-grid--layout-body-content-wrapper {
+      display: flex;
+      flex-direction: column;
 
-            emit('menuClick', $grid, code);
-          }
+      .vxe-grid--toolbar-wrapper {
+        .vxe-toolbar {
+          box-sizing: border-box;
+          padding: 0 5px 5px 5px;
         }
-      };
-
-      const loadData = (data) =>{
-        const $grid = sohelpVxeGridRef.value;
-        $grid.loadData(data);
       }
 
-      /**
-       * 数据回显
-       */
-      const initValue = () => {
-        nextTick(() => {
-          const $grid = sohelpVxeGridRef.value;
-          if ($grid && selectedValue.value.length) {
-            setTimeout(() => {
-              $grid.setCheckboxRowKey(selectedValue.value, true);
-            }, 100);
-          }
-        });
-      };
+      .vxe-grid--table-container {
+        flex: 1;
+        height: 100%;
 
-      /**
-       * 清空
-       */
-      const clear = () => {
-        const $grid = sohelpVxeGridRef.value;
-        $grid?.clearCheckboxReserve();
-        $grid?.clearCheckboxRow();
-        $grid.clearSelected();
-      };
+        .vxe-table {
+          height: 100%;
 
-      const getSelection = () => {
-        return sohelpVxeGridRef.value?.getCheckboxRecords() || []
-      };
+          .vxe-table--render-wrapper {
+            height: 100%;
 
-      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
-        }
-      );
+            .vxe-table--layout-wrapper {
+              height: calc(100% - 10px);
 
-      return {
-        getSelection,
-        gridOptions,
-        loadData,
-        sohelpVxeGridRef,
-        DragOutlined,
-        refresh,
-        reload,
-        pageChangeEvent,
-        gridEvents,
-        menuEvents,
-        onToolbarButtonClick,
-        onCheckboxChange,
-        onCellClick,
-        onCheckboxAllChange,
-        onRadioChange,
-        selectedData,
-        selectedValue,
-        updateData,
-        initValue,
-        clear,
-        getTableData,
-        keywords,
-        Search,
-        getKeywordsPlaceholder,
-        propertiesMap,
-        clearRadioRow: () => {
-          sohelpVxeGridRef.value.clearRadioRow();
-        }
-      };
-    }
-  };
-</script>
-
-<style lang="scss" scoped>
-  .sohelp-vxe-grid {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    :deep(.vxe-grid) {
-      height: 100%;
-      width: 100%;
-      min-width: 100px;
-
-      .vxe-grid--layout-body-content-wrapper {
-        display: flex;
-        flex-direction: column;
-
-        .vxe-grid--toolbar-wrapper {
-          .vxe-toolbar {
-            box-sizing: border-box;
-            padding: 0 5px 5px 5px;
-          }
-        }
-
-        .vxe-grid--table-container {
-          flex: 1;
-          height: 100%;
-          .vxe-table {
-            height: 100%;
-            .vxe-table--render-wrapper {
-              height: 100%;
-              .vxe-table--layout-wrapper {
-                height: calc(100% - 10px);
-                .col--selected {
-                  //去除单元格选中效果
-                  box-shadow: none;
-                }
+              .col--selected {
+                //去除单元格选中效果
+                box-shadow: none;
               }
             }
           }
@@ -494,25 +449,27 @@
       }
     }
   }
-
-  .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>