sohelp-eleplus 1.1.1-8.beta.1

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 '../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/icons/AnalysisOutlined.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linejoin="round"
+  >
+    <path d="M0.3 7H47.7M6 7V34H42V7M19 34 12 45M29 34 36 45" />
+    <path d="M16 22V27" />
+    <path d="M24 18V27" />
+    <path d="M32 14V27" />
+  </svg>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'AnalysisOutlined'
+  });
+</script>

package/sohelp-icon-select/icons/ApplicationOutlined.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg viewBox="0 0 48 48" fill="currentColor">
+    <circle cx="9" cy="9" r="4" />
+    <circle cx="9" cy="24" r="4" />
+    <circle cx="9" cy="39" r="4" />
+    <circle cx="24" cy="9" r="4" />
+    <circle cx="24" cy="24" r="4" />
+    <circle cx="24" cy="39" r="4" />
+    <circle cx="39" cy="9" r="4" />
+    <circle cx="39" cy="24" r="4" />
+    <circle cx="39" cy="39" r="4" />
+  </svg>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'ApplicationOutlined'
+  });
+</script>

package/sohelp-icon-select/icons/AppstoreAddOutlined.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+  >
+    <path
+      d="M18 6H8C7 6 6 7 6 8V18C6 19 7 20 8 20H18C19 20 20 19 20 18V8C20 7 19 6 18 6Z"
+    />
+    <path
+      d="M40 6H30C29 6 28 7 28 8V18C28 19 29 20 30 20H40C41 20 42 19 42 18V8C42 7 41 6 40 6Z"
+    />
+    <path
+      d="M40 28H30C29 28 28 29 28 30V40C28 41 29 42 30 42H40C41 42 42 41 42 40V30C42 29 41 28 40 28Z"
+    />
+    <path d="M12 27V45M3 36H21" />
+  </svg>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'AppstoreAddOutlined'
+  });
+</script>

package/sohelp-icon-select/icons/AppstoreOutlined.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+  >
+    <path
+      d="M18 6H8C7 6 6 7 6 8V18C6 19 7 20 8 20H18C19 20 20 19 20 18V8C20 7 19 6 18 6Z"
+    />
+    <path
+      d="M40 6H30C29 6 28 7 28 8V18C28 19 29 20 30 20H40C41 20 42 19 42 18V8C42 7 41 6 40 6Z"
+    />
+    <path
+      d="M40 28H30C29 28 28 29 28 30V40C28 41 29 42 30 42H40C41 42 42 41 42 40V30C42 29 41 28 40 28Z"
+    />
+    <path
+      d="M18 28H8C7 28 6 29 6 30V40C6 41 7 42 8 42H18C19 42 20 41 20 40V30C20 29 19 28 18 28Z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'AppstoreOutlined'
+  });
+</script>

package/sohelp-icon-select/icons/ArrowDown.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="ele-arrow-down"
+  >
+    <path d="M10 17 24 31 38 17" />
+  </svg>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'ArrowDown'
+  });
+</script>

package/sohelp-icon-select/icons/ArrowDownOutlined.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M38 28 24 42 10 28M24 42V6" />
+  </svg>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'ArrowDownOutlined'
+  });
+</script>

package/sohelp-icon-select/icons/ArrowLeft.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="ele-arrow-left"
+  >
+    <path d="M31 38 17 24 31 10" />
+  </svg>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'ArrowLeft'
+  });
+</script>