sohelp-eleplus 1.1.13

package/sohelp-vxe-grid/index.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="sohelp-vxe-grid">
+    <vxe-grid
+      v-bind="gridOptions"
+      row-id="id"
+      @page-change="pageChangeEvent"
+      ref="sohelpVxeGridRef"
+      @menuClick="menuEvents"
+      @toolbarButtonClick="onToolbarButtonClick"
+      @checkboxChange="onCheckboxChange"
+      @checkboxAll="onCheckboxAllChange"
+      @radioChange="onRadioChange"
+      @cellClick.stop="onCellClick"
+    >
+      <template #searchSlot>
+        <div class="search-wrap">
+          <div class="search-box">
+            <ele-tooltip :content="getKeywordsPlaceholder" placement="top" :offset="3">
+              <sohelp-input
+                v-model="keywords"
+                :placeholder="getKeywordsPlaceholder"
+                clearable
+                @keyup.enter="reload(gridOptions.params)"
+                class="input-with-select"
+              >
+                <template #append>
+                  <el-button :icon="Search" @click="reload(gridOptions.params)" size="small" />
+                </template>
+              </sohelp-input>
+            </ele-tooltip>
+          </div>
+          <slot name="toolbarRight"></slot>
+        </div>
+      </template>
+
+      <template #draggableDefault>
+        <span class="drag-btn">
+          <ele-text :icon="DragOutlined"></ele-text>
+        </span>
+      </template>
+
+      <!-- 编历插槽 -->
+      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData"></slot>
+      </template>
+    </vxe-grid>
+  </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;
+          }
+        }
+        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;
+
+        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));
+        }
+
+        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 = [];
+          }
+
+          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);
+          }
+        });
+      };
+
+      /**
+       * 清空
+       */
+      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
+        }
+      );
+
+      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;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .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>

package/sohelp-vxe-grid-select/index.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { computed, nextTick, ref } from "vue";
+import SohelpVxeGrid from "../sohelp-vxe-grid/index.vue";
+
+/**
+ * 组件属性定义
+ * @property {Array|String} modelValue - 当前绑定的值（支持单选或多选）
+ * @property {String} refid - 必填字段，标识引用ID
+ * @property {Boolean} multiple - 是否允许多选，默认为false
+ * @property {Object|Array} data - 已选中的数据对象或数组
+ * @property {String} labelField - 显示文本对应的字段名，默认"label"
+ * @property {String} valueField - 值字段名，默认"id"
+ */
+const props = defineProps({
+  modelValue: {
+    type: [String, Array],
+    default: () => []
+  },
+  gridOptions: Object,
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  data: [Object, Array],
+  labelField: {
+    type: String,
+    default: "label"
+  },
+  valueField: {
+    type: String,
+    default: "id"
+  },
+  title: {
+    type: String,
+    default: "选择数据"
+  }
+
+});
+/**
+ * 创建一个ref对象，用于存储表格视图组件的引用
+ */
+const tableRef = ref(null);
+
+/**
+ * 定义事件发射器
+ * @event update:modelValue - 更新modelValue时触发
+ * @event update:data - 更新data时触发
+ * @event confirm - 用户确认选择时触发
+ */
+const emit = defineEmits(["update:modelValue", "update:data", "confirm", "show"]);
+
+// 控制弹窗是否可见的状态变量
+const visible = ref(false);
+
+/**
+ * 打开对话框
+ */
+const showDialog = () => {
+  visible.value = true;
+  emit("show");
+};
+
+/**
+ * 计算属性：处理传入的数据格式统一转换为数组形式
+ * @returns {Array} 返回标准化后的数组数据
+ */
+const _data = computed(() => {
+  return props.data?.constructor === Object ? [props.data] : props.data;
+});
+
+/**
+ * 关闭标签
+ * @param tag - 被关闭的标签项
+ */
+const handleClose = (tag) => {
+  if (props.multiple) {
+    props.data.splice(props.data.indexOf(tag), 1);
+  } else {
+    emit("update:modelValue", null);
+    emit("update:data", null);
+  }
+};
+
+/**
+ * 取消操作并关闭弹窗
+ */
+const cancel = () => {
+  visible.value = false;
+};
+
+/**
+ * 确认选择操作
+ * 根据multiple属性决定是单选还是多选模式，
+ * 并通过emit更新modelValue、data以及发送confirm事件
+ */
+const confirm = () => {
+  const rows = tableRef.value.getSelection();
+  if (props.multiple) {
+    let _data = [];
+    for (let i = 0; i < rows.length; i++) {
+      let obj = {};
+      obj[props.valueField] = rows[i][props.valueField];
+      obj[props.labelField] = rows[i][props.labelField];
+      _data.push(obj);
+    }
+    emit("update:modelValue", _data.map((item) => item[props.valueField]));
+    emit("update:data", _data);
+    emit("confirm", rows);
+  } else {
+    emit("update:modelValue", rows.length > 0 ? rows[0][props.valueField] : null);
+    emit("update:data", rows[0]);
+    emit("confirm", rows[0]);
+  }
+  visible.value = false;
+
+};
+
+defineExpose({ $grid: tableRef });
+
+</script>
+
+<template>
+  <!-- 输入框组件，用于展示已选中的标签项，并提供打开选择弹窗的按钮 -->
+  <el-input clearable placeholder="请选择">
+    <!-- 前缀插槽：显示当前已选中项的标签列表 -->
+    <template #prefix>
+      <el-tag v-for="item in _data" :key="item.id" closable @close="handleClose(item)">{{ item[labelField] }}</el-tag>
+    </template>
+    <!-- 后缀插槽：添加按钮，点击后打开数据选择弹窗 -->
+    <template #append>
+      <el-button icon="Plus" @click="showDialog" />
+    </template>
+  </el-input>
+  <!-- 数据选择弹窗组件 -->
+  <ele-modal :title="title" v-model="visible" maxable>
+    <!-- 表格视图组件，用于展示可选项 -->
+    <sohelp-vxe-grid ref="tableRef" :gridOptions="gridOptions" />
+    <!-- 弹窗底部操作按钮区域 -->
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">确定</el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>