sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-vxe-grid/index.vue

@@ -0,0 +1,475 @@
+<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 #keywords>
+        <div class="search-wrap">
+          <div class="search-box">
+            <ele-tooltip content="请输入关键字按回车搜索." placement="top" :offset="3">
+              <sohelp-input
+                v-model="keywords"
+                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 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: () => {
+        }
+      }
+    }
+  });
+}
+
+
+/**根据参数加载数据*/
+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 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
+      };
+    }
+    //清空选中
+    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 });
+    }
+  }
+};
+
+/**
+ * 行点击
+ * @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>
+.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>