sohelp-eleplus 1.1.13

package/sohelp-grid-view/index.vue

@@ -0,0 +1,379 @@
+<script setup>
+  import { computed, reactive, ref, watch } from 'vue';
+  import { useMobile } from '@/utils/use-mobile';
+  import SohelpFilter from './filter/index.vue';
+  import SohelpGrid from '@/components/sohelp-eleplus/sohelp-grid/index.vue';
+  // 属性映射
+  const propertiesMap = ref({});
+  const { mobile } = useMobile();
+
+  // grid配置
+  const props = defineProps({
+    refid: { type: String, default: '' },
+    autoLoad: { type: Boolean, default: true },
+    filterValue: {
+      type: Object,
+      default: () => ({
+        keywords: '',
+        power: 0,
+        filter: [],
+        scheme: '',
+        sort: '',
+        order: ''
+      })
+    }
+  });
+
+  const emit = defineEmits([
+    'menuRightClick',
+    'toolbarButtonClick',
+    'operationButtonClick',
+    'changeFilterScheme',
+    'editClosed',
+    'currentColumnChange'
+  ]);
+
+  // grid实例
+  const sohelpGridRef = ref(null);
+
+  const filterValue = defineModel('filterValue', {
+    type: Object,
+    default: () => ({
+      keywords: '',
+      power: 0,
+      filter: [],
+      scheme: '',
+      sort: '',
+      order: ''
+    })
+  });
+
+  const _filterValue = ref(filterValue.value);
+
+  /**是否显示高级过滤,默认为关闭高级过滤 */
+  const splitConfig = reactive({
+    size: 'auto',
+    space: '10px',
+    allowCollapse: false,
+    resizable: false,
+    reverse: false,
+    vertical: true,
+    style: {
+      height: '100%'
+    },
+    customStyle: {
+      overflow: 'hidden'
+    }
+  });
+
+  const sohelpConfig = defineModel('config', {
+    type: Object,
+    default: () => ({
+      filter: {
+        config: {}
+      }
+    })
+  });
+
+  /**
+   * 分割器配置
+   */
+  const getSplitConfig = computed(() => {
+    if (sohelpConfig.value.filter?.config) {
+      const visible = sohelpConfig.value?.filter?.config?.visibleFilter || false;
+      const position = sohelpConfig.value?.filter?.config?.filterPosition || 'NONE';
+
+      splitConfig.reverse = position !== 'TOP';
+      splitConfig.vertical = position === 'TOP';
+      splitConfig.resizable = visible;
+      splitConfig.size = {
+        TOP: 'auto',
+        MODAL: '0',
+        NONE: '0',
+        RIGHT: '260PX'
+      }[position];
+
+      if (!visible) {
+        splitConfig.size = '0';
+      }
+      if (mobile.value && position === 'RIGHT') {
+        splitConfig.allowCollapse = true;
+      } else {
+        splitConfig.allowCollapse = false;
+      }
+      return splitConfig;
+    }
+  });
+
+  //工具栏按钮点击事件
+  const toolbarButtonClick = (config) => {
+    emit('toolbarButtonClick', config);
+  };
+  //右击菜单按钮点击事件
+  const menuRightClick = (config) => {
+    emit('menuRightClick', config);
+  };
+  //操作按钮点击事件
+  const operationButtonClick = (config) => {
+    emit('operationButtonClick', config);
+  };
+  //编辑后事件
+  const editClosed = (props) => {
+    emit('editClosed', props);
+  };
+
+  const currentColumnChange = (props) => {
+    emit('currentColumnChange', props);
+  };
+
+  /**
+   * 查询数据
+   * @param param 区分是高级筛选，还是列筛选
+   */
+  const reload = (param = {}, callback) => {
+    sohelpGridRef.value.reload(param, callback);
+  };
+  const load = (param = {}, callback) => {
+    sohelpGridRef.value.load(param, callback);
+  };
+  const refresh = () => {
+    sohelpGridRef.value.refresh();
+  };
+
+  const changeFilterScheme = (schemeValue, filterValue) => {
+    emit('changeFilterScheme', schemeValue, filterValue);
+  };
+  /**
+   * 关闭高级筛选面板
+   */
+  const closeFilter = () => {
+    sohelpConfig.value.filter.config.visibleFilter = false;
+  };
+  /**
+   * 显示高级筛选
+   */
+  const showFilter = () => {
+    sohelpConfig.value.filter.config.visibleFilter = !(sohelpConfig.value.filter?.config?.visibleFilter ?? false);
+  };
+  /**
+   * 重置查询
+   */
+  const resetFilter = () => {
+    sohelpGridRef.value?.resetFilter();
+  };
+  /**
+   * 查询数据
+   */
+  const filter = (val) => {
+    sohelpGridRef.value.reload({});
+  };
+
+  const getCrudUpdater = () => {
+    return sohelpGridRef.value?.getCrudUpdater();
+  };
+  //保存配置后，自动重新加载一次
+  const save = () => {
+    sohelpGridRef.value?.loadConfig();
+  };
+
+  const validate = async () => {
+    const $grid = sohelpGridRef.value;
+    if ($grid) {
+      const errMap = await $grid?.validate();
+      if (errMap) {
+        return Promise.reject(errMap);
+      }
+      return Promise.resolve();
+    }
+  };
+
+  const getSelection = () => {
+    return sohelpGridRef.value?.selections;
+  };
+
+  watch(
+    _filterValue,
+    (val) => {
+      Object.assign(filterValue.value, val);
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+
+  defineExpose({
+    getSelection,
+    getCrudUpdater,
+    reload,
+    load,
+    refresh,
+    validate
+  });
+</script>
+<script>
+  export default {
+    name: 'SohelpGridView'
+  };
+</script>
+<template>
+  <div class="sohelp-grid-view">
+    <ele-split-panel v-bind="getSplitConfig" flex-table>
+      <!--高级筛选-->
+      <sohelp-filter
+        @change="change"
+        v-if="sohelpConfig.filter?.config?.visibleFilter"
+        @filter="filter"
+        @close="closeFilter"
+        @save="save"
+        v-model:filterValue="_filterValue"
+        v-model:config="sohelpConfig"
+        @reset="resetFilter"
+        @change-filter-scheme="changeFilterScheme"
+        :propertiesMap="propertiesMap"
+      >
+      </sohelp-filter>
+      <template #body>
+        <!--数据列表-->
+        <sohelp-grid
+          ref="sohelpGridRef"
+          :refid="refid"
+          v-model:config="sohelpConfig"
+          @resetFilter="resetFilter"
+          v-model:propertiesMap="propertiesMap"
+          v-model:filterValue="_filterValue"
+          :autoLoad="autoLoad"
+          @showFilter="showFilter"
+          @menuRightClick="menuRightClick"
+          @toolbarButtonClick="toolbarButtonClick"
+          @operationButtonClick="operationButtonClick"
+          @editClosed="editClosed"
+          @currentColumnChange="currentColumnChange"
+        ></sohelp-grid>
+      </template>
+    </ele-split-panel>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .sohelp-grid-view {
+    padding: 0px;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    .toolbar-box {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+
+      .tools-btns {
+        display: flex;
+        gap: 10px;
+        margin-right: 10px;
+
+        .el-button {
+          margin-left: 0 !important;
+        }
+      }
+    }
+
+    .ele-split-panel {
+      :deep(.ele-split-panel-side) {
+        border: none !important;
+      }
+    }
+
+    .vxe-grid {
+      height: 100%;
+
+      :deep(.vxe-grid--layout-body-content-wrapper) {
+        display: flex;
+        flex-direction: column;
+
+        .vxe-grid--table-container {
+          flex: 1;
+        }
+      }
+
+      :deep(.col--SohelpImageUpload) {
+        .vxe-cell--wrapper {
+          overflow: initial !important;
+        }
+      }
+
+      :deep(.vxe-table--render-default) {
+        .vxe-body--row.row--stripe > .vxe-body--column {
+          // background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .sort-list :deep(.el-button:focus),
+  .sort-list :deep(.el-button:hover) {
+    background-color: #e8f1ff !important;
+    color: #1677ff !important;
+  }
+
+  .filter-header {
+    border-bottom: 1px solid #ddd;
+    display: flex;
+    width: 100%;
+    height: 35px;
+    line-height: 40px;
+    box-sizing: border-box;
+    margin: 0 0 0 10px;
+  }
+
+  .sohelp-grid-view.right {
+    .ele-split-panel {
+      :deep(.ele-split-panel-side) {
+        height: 100% !important;
+        border: 0;
+        display: flex;
+        flex-direction: column;
+        border-left: 1px solid #ddd !important;
+      }
+    }
+  }
+
+  :deep(.tooltip-btn) {
+    margin-left: 5px;
+    height: 22px;
+    line-height: 22px;
+    margin-top: 2px;
+    padding: 0px 5px !important;
+  }
+
+  :deep(.vxe-cell--wrapper) {
+    height: 100%;
+  }
+
+  .textarea-reference {
+    display: flex;
+    height: 100%;
+  }
+
+  :deep(.ele-split-panel.is-vertical) {
+    .ele-split-panel-wrap > .ele-split-panel-space .ele-split-resize-line::after {
+      background: #eee;
+    }
+  }
+
+  .condition-box {
+    padding: 10px;
+  }
+
+  .sohelp-filter-card.right {
+    height: 100%;
+    overflow: hidden;
+
+    :deep(.ele-card-header) {
+      min-width: 230px;
+    }
+
+    :deep(.ele-card-body) {
+      height: 100% !important;
+    }
+  }
+</style>

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

@@ -0,0 +1,141 @@
+<template>
+  <!-- 输入框组件，用于展示已选中的标签项，并提供打开选择弹窗的按钮 -->
+  <el-input >
+    <!-- 前缀插槽：显示当前已选中项的标签列表 -->
+    <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="选择数据" v-model="visible" maxable>
+    <!-- 表格视图组件，用于展示可选项 -->
+    <sohelp-grid-view :refid="refid" ref="tableRef" />
+    <!-- 弹窗底部操作按钮区域 -->
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">确定</el-button>
+    </template>
+  </ele-modal>
+</template>
+<script setup>
+import { computed, ref } from "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: () => []
+  },
+  refid: {
+    type: String,
+    required: true
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  data: [Object, Array],
+  labelField: {
+    type: String,
+    default: "label"
+  },
+  valueField: {
+    type: String,
+    default: "id"
+  }
+
+});
+/**
+ * 创建一个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;
+};
+
+/**
+ * 计算属性：处理传入的数据格式统一转换为数组形式
+ * @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;
+};
+
+</script>
+<style scoped>
+
+</style>
+

package/sohelp-group-view/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<div>按状态分组视图</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/sohelp-icon-select/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-select
+    v-model="modelValue"
+    placeholder="请选择图标"
+    filterable
+    class="sohelp-icon-select"
+    width="100%"
+    style="min-width: 60px"
+    clearable
+  >
+    <template #prefix>
+      <el-icon :size="14" color="#666" style="margin-right: 5px">
+        <component :is="ElementPlusIcons[modelValue]" v-if="ElementPlusIcons[modelValue]" />
+        <component :is="EleAdminPlusIcons[modelValue]" v-else-if="EleAdminPlusIcons[modelValue]" />
+        <span :class="modelValue" v-else></span>
+      </el-icon>
+    </template>
+    <el-option-group v-for="group in iconData" :key="group.label" :label="group.label">
+      <div class="icon-box">
+        <el-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          class="icon-item"
+        >
+          <el-tooltip :content="item.label" placement="top">
+            <el-icon :size="16" color="#666">
+              <component :is="ElementPlusIcons[item.value]" v-if="ElementPlusIcons[item.value]" />
+              <component :is="EleAdminPlusIcons[item.value]" v-else-if="EleAdminPlusIcons[item.value]" />
+              <span :class="item.value" v-else></span>
+            </el-icon>
+          </el-tooltip>
+        </el-option>
+      </div>
+    </el-option-group>
+  </el-select>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import * as ElementPlusIcons from '@element-plus/icons-vue';
+  import * as EleAdminPlusIcons from '@/components/icons';
+  import { VxeIcon } from './vxeui-icon.js';
+  const modelValue = defineModel('modelValue');
+  const iconData = ref([]);
+
+  // 创建一个通用函数来生成选项数据
+  const generateOptions = (icons) => {
+    return Object.keys(icons).map((key) => ({
+      label: key,
+      value: key
+    }));
+  };
+
+  // 初始化图标数据
+  iconData.value = [
+    {
+      label: 'ElementPlus',
+      options: generateOptions(ElementPlusIcons)
+    },
+    {
+      label: 'EleAdminPlus',
+      options: generateOptions(EleAdminPlusIcons)
+    },
+    {
+      label: 'VxeUI',
+      options: generateOptions(VxeIcon)
+    }
+  ];
+  console.log(iconData.value);
+</script>
+<script>
+  export default {
+    name: 'SohelpIconSelect'
+  };
+</script>
+<style lang="scss">
+  .icon-box {
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    height: auto;
+    flex-wrap: wrap;
+    .icon-item {
+      width: 36px !important;
+      height: 36px !important;
+      border: 1px solid #eee;
+      padding: 0 8px !important;
+      text-align: center !important;
+    }
+  }
+</style>