sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-image-upload/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="sohelp-image-upload">
+    <vxe-upload
+      ref="vxeUploadRef"
+      v-model="fileList"
+      :upload-method="uploadMethod"
+      :before-remove-method="beforeRemoveMethod"
+      :before-download-method="beforeDownloadMethod"
+      :autoHiddenButton="!multiple"
+      show-download-button
+      mode="image"
+      :urlMode="true"
+      :showProgress="true"
+      :showButtonText="false"
+      :pasteToUpload="true"
+      :multiple="multiple"
+      :singleMode="!multiple"
+      :readonly="readonly"
+      :imageConfig="imageConfig"
+      :limitCount="limitCount"
+      :limitSize="limitSize"
+      :imageTypes="imageTypes"
+      :progressText="'{percent}%'"
+      :moreConfig="moreConfig"
+    ></vxe-upload>
+  </div>
+</template>
+
+<script setup>
+  import { ref, watch } from 'vue';
+  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { SohelpHttp } from '../core-export';
+  import { VxeUI } from 'vxe-pc-ui';
+
+  const modelValue = defineModel('modelValue');
+  /**
+   * 支持本地数据
+   * @type {ModelRef<Object | any[] | undefined, string>}
+   */
+  const data = defineModel('data', { type: [Object, Array], default: () => [] });
+
+  const imagePath = `${SohelpHttp.getBaseUrl()}/engine/web/file/image?id=`;
+  const props = defineProps({
+    /**
+     * 是否只读
+     */
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 支持异步数据源
+     */
+    datasource: {
+      type: Function,
+      default: () => {}
+    },
+    /**
+     * 支持多个图片上传，默认单个图片
+     */
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 单次上传9个图片
+     */
+    limitCount: {
+      type: Number,
+      default: 9
+    },
+    /**
+     * 每张图片不超过10M
+     */
+    limitSize: {
+      type: Number,
+      default: 10 //10Mb
+    },
+    /**
+     * 支持上传图片的类型
+     */
+    imageTypes: {
+      type: Object,
+      default: () => {
+        return ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'gif'];
+      }
+    },
+    /**
+     * 图片参数配置
+     */
+    imageConfig: {
+      type: Object,
+      default: () => {
+        return {
+          width: 30,
+          height: 26
+        };
+      }
+    },
+    moreConfig: {
+      type: Object,
+      default: () => {
+        return {
+          maxCount: 1,
+          layout: 'horizontal'
+        };
+      }
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue', 'update:data']);
+
+  const vxeUploadRef = ref(null);
+  const fileList = ref([]);
+  const originList = ref([]);
+
+  /**
+   * 下载
+   * @param param0
+   */
+  const beforeDownloadMethod = async ({ option }) => {
+    try {
+      const blob = await fetch(option.url).then((response) => response.blob());
+      await VxeUI.saveFile({
+        filename: option.name,
+        content: blob
+      });
+      VxeUI.modal.message({
+        content: '下载成功',
+        status: 'success'
+      });
+    } catch (e) {
+      VxeUI.modal.message({
+        content: '下载失败',
+        status: 'error'
+      });
+    }
+    return false;
+  };
+
+  /**
+   *
+   * @param param0 删除
+   */
+  const beforeRemoveMethod = async ({ option }) => {
+    try {
+      if (!option || !option.url || typeof option.url !== 'string') {
+        return false;
+      }
+
+      await ElMessageBox.confirm('确定要删除图片吗?', '系统提示', {
+        type: 'warning',
+        draggable: false
+      });
+
+      const urlObj = new URL(option.url);
+      const id = urlObj.searchParams.get('id');
+
+      if (!id) {
+        return false;
+      }
+
+      const res = await SohelpHttp.post('/engine/web/file/delete', { id: id });
+
+      if (res.meta.success) {
+        ElMessage.success(res.meta.message);
+        originList.value = originList.value.filter((item) => item.id !== id);
+        modelValue.value = '';
+        return true;
+      } else {
+        ElMessage.error(res.meta.message);
+        return false;
+      }
+    } catch (e) {
+      return false;
+    }
+  };
+
+  /**
+   * 上传
+   */
+  const uploadMethod = async ({ file }) => {
+    const formData = new FormData();
+    formData.append('files', file);
+
+    const res = await SohelpHttp.post('/engine/web/file/upload', formData);
+    if (res.meta.success && res.data.length > 0) {
+      originList.value.push({
+        name: file.name,
+        id: res.data[0]
+      });
+
+      modelValue.value = res.data[0];
+
+      return {
+        url: imagePath + res.data[0],
+        name: file.name
+      };
+    } else {
+      ElMessage.error(res.meta.message);
+    }
+  };
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val && val !== '0' && val !== 0) {
+        const arr = Array.isArray(val) ? val : [val];
+        const v = Array.isArray(data.value) ? data.value : [data.value];
+        originList.value = arr.map((item) => {
+          const filename = v?.find((row) => row?.id === item)?.filename || '';
+          return {
+            id: item,
+            name: filename,
+            url: imagePath + item
+          };
+        });
+        fileList.value = originList.value;
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+
+<script>
+  export default {
+    name: 'SohelpImageUpload'
+  };
+</script>
+<style scoped lang="scss">
+  .sohelp-image-upload {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+
+    :deep(.vxe-upload) {
+      height: 100%;
+
+      .vxe-upload--image-wrapper {
+        height: 100%;
+      }
+
+      .vxe-upload--image-list {
+        height: 100%;
+        display: flex;
+        gap: 5px;
+
+        .vxe-upload--image-over-more {
+          padding: 0;
+        }
+
+        .vxe-upload--image-action {
+          padding: 0;
+        }
+
+        .vxe-upload--image-item {
+          padding: 0;
+          display: flex;
+
+          .vxe-upload--image-item-box {
+            img {
+              min-width: 100%;
+              min-height: 100%;
+            }
+          }
+
+          .vxe-upload--image-item-btn-wrapper {
+            width: 12px;
+            height: 12px;
+            overflow: hidden;
+            top: -3px;
+          }
+
+          .vxe-upload--image-item-remove-btn {
+            width: 12px;
+            height: 12px;
+          }
+        }
+      }
+    }
+  }
+</style>

package/sohelp-input/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-input
+    v-bind="$attrs"
+    v-model="modelValue"
+    clearable
+    ref="inputRef"
+    :disabled="$attrs?.disabled || $attrs?.readonly"
+  >
+    <template v-for="(_, slot) in $slots" #[slot]="slotProps">
+      <slot :name="slot" v-bind="slotProps" />
+    </template>
+  </el-input>
+</template>
+<script setup>
+  import { nextTick, onMounted, ref } from 'vue';
+
+  const emit = defineEmits(['update:modelValue']);
+  const modelValue = defineModel('modelValue');
+  const props = defineProps({
+    autoFocus: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  const inputRef = ref(null);
+  onMounted(() => {
+    nextTick(() => {
+      if (props.autoFocus) {
+        inputRef.value.focus();
+      }
+    });
+  });
+</script>
+<script>
+  export default {
+    name: 'SohelpInput'
+  };
+</script>

package/sohelp-modal/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <ele-modal v-bind="$attrs" v-model="modelValue">
+    <template #header>
+      <div class="modal-header">
+        <slot name="header">
+          {{ $attrs.title }}
+        </slot>
+        <div class="right">
+          <slot name="setting"></slot>
+        </div>
+      </div>
+    </template>
+
+    <!-- 主内容插槽 -->
+    <slot></slot>
+    <!-- 底部插槽 -->
+
+    <template #footer>
+      <slot name="footer" v-if="showFooter">
+        <el-button type="primary" @click="confirm">确认</el-button>
+        <el-button @click="cancel">关闭</el-button>
+      </slot>
+    </template>
+  </ele-modal>
+</template>
+<script setup>
+  const modelValue = defineModel('modelValue', { type: Boolean, default: false });
+  const emit = defineEmits('confirm', 'cancel');
+  const props = defineProps({
+    showFooter: {
+      type: Boolean,
+      default: true
+    }
+  });
+
+  const confirm = () => {
+    emit('confirm');
+  };
+  const cancel = () => {
+    modelValue.value = false;
+    emit('cancel');
+  };
+
+  const show = () => {
+    modelValue.value = true;
+  };
+  const close = () => {
+    modelValue.value = false;
+  };
+
+  defineExpose({
+    show,
+    close
+  });
+</script>
+<script>
+  export default {
+    name: 'SohelpModal'
+  };
+</script>
+<style scoped lang="scss">
+  .modal-header {
+    display: flex;
+
+    .right {
+      margin-left: auto;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+    }
+  }
+</style>

package/sohelp-module/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- 动态渲染多个el-modal -->
+  <sohelp-modal
+    maxable
+    multiple
+    resizable
+    v-for="[id, modal] in modals"
+    :key="id"
+    v-model="modal.visible"
+    v-bind="modal"
+    @close="closeModal(id)"
+    :bodyStyle="{ padding: 0, height: '100%', minHeight: '60vh', }"
+    :showFooter="false"
+    class="module-modal"
+  >
+    <sohelp-vform :refid="id" v-model="modal.params" v-model:data="modal.params" ref="vformRefs" moduleType="modal"></sohelp-vform>
+  </sohelp-modal>
+
+  <!-- 动态渲染多个el-drawer -->
+  <sohelp-drawer
+    v-for="[id, drawer] in drawers"
+    :key="id"
+    v-model="drawer.visible"
+    v-bind="drawer"
+    @close="closeDrawer(id)"
+    :bodyStyle="{ padding: 0, height: '100%', overflow: 'auto'}"
+  >
+    <sohelp-vform :refid="id" v-model="drawer.params.modelValue" v-model:data="drawer.params.data" moduleType="drawer"></sohelp-vform>
+  </sohelp-drawer>
+</template>
+<script>
+  export default {
+    name: 'SohelpModule'
+  };
+</script>
+<script setup>
+  import SohelpModal from '../sohelp-modal/index.vue';
+  import SohelpDrawer from '../sohelp-drawer/index.vue';
+  import SohelpVform from '../sohelp-vform-eleplus/index.vue';
+  import useModalManager from './useModalManager';
+  import { ref } from 'vue';
+
+  const { modals, drawers, openModal, closeModal, openDrawer, closeDrawer } = useModalManager();
+  const vformRefs = ref(null);
+
+  defineExpose({
+    openModal,
+    closeModal,
+    openDrawer,
+    closeDrawer
+  });
+</script>
+
+<style lang="scss" scoped></style>

package/sohelp-module/useModalManager.js

@@ -0,0 +1,89 @@
+import { ref } from 'vue'
+
+export default function useModalManager() {
+  // 存储所有模态框实例
+  const modals = ref(new Map())
+  // 存储所有抽屉实例
+  const drawers = ref(new Map())
+
+  /**
+   * 打开模态框
+   * @param refid 模块地址
+   * @param params  数据对象
+   * @param props 属性
+   */
+  const openModal = (refid,params={}, props = {}) => {
+    modals.value.set(refid, {
+      visible: true,
+      ...props,
+      params:{...params}
+    })
+  }
+
+  /**
+   * 关闭对话框
+   * @param refid 模块地址
+   */
+  const closeModal = (refid) => {
+    if (modals.value.has(refid)) {
+      modals.value.set(refid, {
+        ...modals.value.get(refid),
+        visible: false
+      })
+    }
+  }
+
+  /**
+   * 打开抽屉
+   * @param refid 模块地址
+   * @param params 数据对象
+   * @param props 属性
+   */
+  const openDrawer = (refid, params={},props = {}) => {
+    drawers.value.set(refid, {
+      visible: true,
+      ...props,
+      params:{...params}
+    })
+  }
+
+  /**
+   * 关闭抽屉
+   * @param refid 模块地址
+   */
+  const closeDrawer = (refid) => {
+    if (drawers.value.has(refid)) {
+      drawers.value.set(refid, {
+        ...drawers.value.get(refid),
+        visible: false
+      })
+    }
+  }
+
+  /**
+   * 获取模态框状态
+   * @param refid 模块地址
+   */
+  const getModalState = (refid) => {
+    return modals.value.get(refid) || { visible: false }
+  }
+
+  /**
+   * 获取抽屉状态
+   * @param refid 模块地址
+   */
+  const getDrawerState = (refid) => {
+    return drawers.value.get(refid) || { visible: false }
+  }
+
+  return {
+    modals,
+    drawers,
+    openModal,
+    closeModal,
+    openDrawer,
+    closeDrawer,
+    getModalState,
+    getDrawerState
+  }
+}

package/sohelp-module/useSohelpModule.js

@@ -0,0 +1,64 @@
+import { usePageTab } from "@/utils/use-page-tab";
+
+function objectToUrlParams(obj) {
+  if (!obj) {
+    return "";
+  }
+  return "&" + Object.keys(obj)
+    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
+    .join("&");
+}
+
+export function useSohelpModule(sohelpModuleRef, push){
+  return {
+    /**
+     * 打开抽屉
+     * @param refid 模块地址
+     * @param params 参数
+     * @param props 属性
+     */
+    openDrawer: (refid, params = {}, props = {}) => {
+      sohelpModuleRef.value.openDrawer(refid, params, props);
+    },
+    /**
+     *打开对话框
+     * @param refid 模块地址
+     * @param params
+     * @param props
+     */
+    openModal: (refid, params = {}, props = {}, callback) => {
+      sohelpModuleRef.value.openModal(refid, params, props, callback);
+    },
+    /**
+     * 关闭对话框
+     * @param refid 模块地址
+     */
+    closeModal: (refid) => {
+      sohelpModuleRef.value.closeModal(refid);
+    },
+    /**
+     * 关闭抽屉
+     * @param refid 模块地址
+     */
+    closeDrawer: (refid) => {
+      sohelpModuleRef.value.closeDrawer(refid);
+    },
+    /**
+     * 打开标签页
+     * @param refid 模块地址
+     * @param params 数据对象
+     */
+    openTab: (refid, params) => {
+      delete params.refid;
+      push(`/vform?refid=${refid}${objectToUrlParams(params)}`);
+    },
+    /**
+     * 关闭标签页
+     * @param refid 模块地址
+     */
+    closeTab: (refid) => {
+      const { finishPageTab, setPageTabTitle, addPageTab } = usePageTab();
+      finishPageTab();
+    }
+  };
+}

package/sohelp-number-input/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-input-number
+    v-bind="$attrs"
+    controls-position="right"
+    ref="inputRef"
+    :disabled="$attrs?.disabled || $attrs?.readonly"
+  ></el-input-number>
+</template>
+<script setup>
+  import { nextTick, onMounted, ref } from 'vue';
+
+  const props = defineProps({
+    autoFocus: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  const inputRef = ref(null);
+  onMounted(() => {
+    nextTick(() => {
+      if (props.autoFocus) {
+        inputRef.value.focus();
+      }
+    });
+  });
+</script>
+<script>
+  export default {
+    name: 'SohelpNumberInput'
+  };
+</script>