sohelp-eleplus 1.1.18 → 1.1.20

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,410 +46,363 @@
   </div>
 </template>
 
-<script>
+<script setup>
   import { EleMessage } from '@/components/ele-admin-plus/components';
   import { DragOutlined } from '../sohelp-icon-select/icons';
-  import { reactive, ref, nextTick, watch, computed } from 'vue';
+  import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+  import { merge, cloneDeep } from 'lodash-es'; // 正确导入
   import DefaultProps from './DefaultProps';
-  import initial from './SohelpGridConfig';
   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);
+  }
 
-  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;
-          }
+  if (props.gridOptions) {
+    merge(gridOptions, props.gridOptions);
+  }
 
-          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;
-          }
-        }
-        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
-            };
+  /**根据URL动态加载数据**/
+  if (props.url) {
+    merge(gridOptions, {
+      proxyConfig: {
+        response: {
+          result: 'result',
+          total: 'page.total'
+        },
+        ajax: {
+          query: () => {
+            refresh();
           }
-          //清空选中
-          selectedValue.value = [];
-          sohelpVxeGridRef.value?.clearCheckboxRow();
-          emit('refresh');
         }
-        isPage.value = false;
-        const autoLoad = props.autoLoad || sohelpConfig?.autoLoad || true;
+      }
+    });
+  }
 
-        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;
-          }
-        }
-      };
-
-      /**
-       * 工具栏点击事件
-       * @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));
-        }
+  /**根据参数加载数据*/
+  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 };
+    }
 
-        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 = [];
-          }
+    let pageConfig = {};
+    // 是否分页
+    if (gridOptions.pagerConfig?.enabled) {
+      pageConfig.page = gridOptions.pagerConfig?.currentPage ?? 1;
+      pageConfig.limit = gridOptions.pagerConfig?.pageSize ?? 50;
+    }
 
-          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;
-            }
+    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;
+    }
 
-            emit('menuClick', $grid, code);
-          }
-        }
-      };
+    gridOptions.loading = false;
+    initValue();
+  };
 
-      const loadData = (data) =>{
-        const $grid = sohelpVxeGridRef.value;
-        $grid.loadData(data);
+  /**实现分页事件*/
+  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 });
+  };
 
-      /**
-       * 数据回显
-       */
-      const initValue = () => {
-        nextTick(() => {
-          const $grid = sohelpVxeGridRef.value;
-          if ($grid && selectedValue.value.length) {
-            setTimeout(() => {
-              $grid.setCheckboxRowKey(selectedValue.value, true);
-            }, 100);
-          }
-        });
-      };
-
-      /**
-       * 清空
-       */
-      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
-        }
+  /**
+   *  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 });
+      }
+    }
+  };
 
-      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();
+  /**
+   * 行点击
+   * @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 = [];
+      }
+
+      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);
+      }
     }
   };
+
+  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);
+      }
+    });
+  };
+
+  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>
 
 <style lang="scss" scoped>
@@ -458,6 +410,7 @@
     width: 100%;
     height: 100%;
     box-sizing: border-box;
+
     :deep(.vxe-grid) {
       height: 100%;
       width: 100%;
@@ -477,12 +430,16 @@
         .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;
@@ -511,6 +468,7 @@
     justify-content: flex-start;
     gap: 10px;
     margin-right: 10px;
+
     .search-box {
       width: 200px;
     }