sohelp-eleplus 1.1.13

package/sohelp-pro-form/index.vue

@@ -0,0 +1,257 @@
+<!-- 高级表单 -->
+<template>
+  <ElForm
+    ref="formRef"
+    :model="model"
+    :labelWidth="labelWidth"
+    :statusIcon="statusIcon"
+    :size="size"
+    :readonly="readonly"
+    :disabled="disabled || readonly"
+    @submit.prevent=""
+  >
+    <slot name="topExtra"></slot>
+    <template v-if="!grid">
+      <template v-for="item in items">
+        <ProFormItem
+          v-if="item.prop"
+          :key="item.key ?? item.prop"
+          :item="item"
+          :model="model"
+          :rules="rules"
+          :data="data[item.prop]"
+          :disabled="disabled"
+          :readonly="readonly"
+          :ref="(el) => setFormItemRef(el, item.prop)"
+          @updateValue="(value) => updateValue(item.prop, value)"
+        >
+          <template
+            v-for="name in Object.keys($slots).filter(
+              (k) => !['default', 'footer', 'topExtra', 'bottomExtra'].includes(k)
+            )"
+            #[name]="slotProps"
+          >
+            <slot :name="name" v-bind="slotProps || {}"></slot>
+          </template>
+        </ProFormItem>
+      </template>
+      <ProFormFooter
+        v-if="footer"
+        :footerProps="footerProps"
+        :footerSlots="footerSlots"
+        :submitText="submitText"
+        :resetText="resetText"
+        @submit="submit"
+        @reset="reset"
+      >
+        <template
+          v-for="name in Object.keys($slots).filter((k) => !['default', 'topExtra', 'bottomExtra'].includes(k))"
+          #[name]="slotProps"
+        >
+          <slot :name="name" v-bind="slotProps || {}"></slot>
+        </template>
+      </ProFormFooter>
+    </template>
+    <ElRow v-else v-bind="rowProps">
+      <template v-for="item in items">
+        <ElCol
+          v-if="item.prop"
+          :key="item.key ?? item.prop"
+          v-bind="{
+            ...(grid === true ? { span: 12 } : grid),
+            ...(item.colProps || {})
+          }"
+        >
+          <ProFormItem
+            :item="item"
+            :model="model"
+            :rules="rules"
+            :data="data[item.prop]"
+            :disabled="disabled"
+            :readonly="readonly"
+            :ref="(el) => setFormItemRef(el, item.prop)"
+            @updateValue="(value) => updateValue(item.prop, value)"
+          >
+            <template
+              v-for="name in Object.keys($slots).filter(
+                (k) => !['default', 'footer', 'topExtra', 'bottomExtra'].includes(k)
+              )"
+              #[name]="slotProps"
+            >
+              <slot :name="name" v-bind="slotProps || {}"></slot>
+            </template>
+          </ProFormItem>
+        </ElCol>
+      </template>
+      <ElCol v-if="footer" v-bind="footerColProps || {}">
+        <ProFormFooter
+          :footerProps="footerProps"
+          :footerSlots="footerSlots"
+          :submitText="submitText"
+          :resetText="resetText"
+          @submit="submit"
+          @reset="reset"
+        >
+          <template
+            v-for="name in Object.keys($slots).filter((k) => !['default', 'topExtra', 'bottomExtra'].includes(k))"
+            #[name]="slotProps"
+          >
+            <slot :name="name" v-bind="slotProps || {}"></slot>
+          </template>
+        </ProFormFooter>
+      </ElCol>
+    </ElRow>
+    <slot name="bottomExtra"></slot>
+  </ElForm>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import ProFormItem from './components/pro-form-item.vue';
+  import ProFormFooter from './components/pro-form-footer.vue';
+
+  const props = defineProps({
+    data: Object,
+    /** 表单数据 */
+    model: {
+      type: Object,
+      required: true
+    },
+    /** 验证规则 */
+    rules: Object,
+    /** 标签长度 */
+    labelWidth: {
+      type: [String, Number],
+      default: '80px'
+    },
+    /** 是否显示校验结果图标 */
+    statusIcon: Boolean,
+    /** 尺寸 */
+    size: String,
+    /** 是否禁用 */
+    disabled: Boolean,
+    /** 表单项 */
+    items: {
+      type: Array,
+      required: true
+    },
+    /** 是否栅格布局 */
+    grid: [Boolean, Object],
+    /** ElRow属性 */
+    rowProps: Object,
+    /** 是否需要底栏 */
+    footer: Boolean,
+    /** 底栏ElFormItem属性 */
+    footerProps: Object,
+    /** 底栏ElFormItem插槽 */
+    footerSlots: Object,
+    /** 底栏ElCol属性 */
+    footerColProps: {
+      type: Object,
+      default: () => {
+        return { span: 24 };
+      }
+    },
+    /** 提交按钮文本 */
+    submitText: {
+      type: String,
+      default: '提交'
+    },
+    /** 重置按钮文本 */
+    resetText: {
+      type: String,
+      default: '重置'
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  const emit = defineEmits(['updateValue', 'submit', 'reset']);
+
+  /** 表单实例 */
+  const formRef = ref(null);
+
+  /** 更新值 */
+  const updateValue = (prop, value) => {
+    emit('updateValue', prop, value);
+  };
+
+  const formItems = ref({}); // 使用对象存储确保唯一性
+
+  const setFormItemRef = (el, prop) => {
+    if (el) {
+      formItems.value[prop] = el;
+    }
+  };
+
+  const getRef = (propName) => {
+    return formItems.value[propName];
+  };
+
+  /** 提交 */
+  const submit = () => {
+    formRef.value?.validate?.((valid) => {
+      if (valid) {
+        emit('submit', props.model);
+      }
+    });
+  };
+
+  /** 重置 */
+  const reset = () => {
+    resetFields();
+    emit('reset');
+  };
+
+  /** 验证表单 */
+  const validate = () => {
+    if (!formRef.value) {
+      throw new Error('formRef is null');
+    }
+    return formRef.value.validate();
+  };
+
+  /** 验证表单某个字段 */
+  const validateField = (props, callback) => {
+    if (!formRef.value) {
+      throw new Error('formRef is null');
+    }
+    return formRef.value.validateField(props, callback);
+  };
+
+  /** 重置表单 */
+  const resetFields = (props) => {
+    if (!formRef.value) {
+      throw new Error('formRef is null');
+    }
+    return formRef.value.resetFields(props);
+  };
+
+  /** 滚动到指定字段 */
+  const scrollToField = (prop) => {
+    if (!formRef.value) {
+      throw new Error('formRef is null');
+    }
+    return formRef.value.scrollToField(prop);
+  };
+
+  /** 清理表单验证信息 */
+  const clearValidate = (props) => {
+    if (!formRef.value) {
+      throw new Error('formRef is null');
+    }
+    return formRef.value.clearValidate(props);
+  };
+
+  defineExpose({
+    formRef,
+    validate,
+    validateField,
+    resetFields,
+    scrollToField,
+    clearValidate,
+    getRef
+  });
+</script>

package/sohelp-pro-form/util.js

@@ -0,0 +1,140 @@
+/**
+ * 表单数据类型为字符串的组件类型
+ */
+export const stringTypes = [
+  'input',
+  'textarea',
+  'date',
+  'datetime',
+  'time',
+  'timeSelect',
+  'autocomplete',
+  'editor'
+];
+
+/**
+ * 表单数据类型为数字的组件类型
+ */
+export const numberTypes = [
+  'select',
+  'radio',
+  'radioButton',
+  'checkbox',
+  'checkboxButton',
+  'switch',
+  'inputNumber',
+  'rate',
+  'slider',
+  'tableSelect'
+];
+
+/**
+ * 表单数据类型为数组的组件类型
+ */
+export const arrayTypes = [
+  'multipleSelect',
+  'checkbox',
+  'checkboxButton',
+  'daterange',
+  'datetimerange',
+  'timerange',
+  'cascader',
+  'sliderRange',
+  'treeMultipleSelect',
+  'virtualTreeMultipleSelect',
+  'tableMultipleSelect',
+  'multipleCheckCard',
+  'editTag',
+  'dictCheckbox',
+  'dictMultipleSelect',
+  'regions'
+];
+
+/**
+ * 表单验证规则使用blur触发的组件类型
+ */
+export const blurTypes = ['input', 'textarea'];
+
+/**
+ * 选择类型的组件类型
+ */
+export const selectTypes = [
+  'select',
+  'multipleSelect',
+  'radio',
+  'radioButton',
+  'checkbox',
+  'checkboxButton',
+  'date',
+  'datetime',
+  'daterange',
+  'datetimerange',
+  'time',
+  'timerange',
+  'timeSelect',
+  'switch',
+  'cascader',
+  'rate',
+  'slider',
+  'sliderRange',
+  'treeSelect',
+  'tableMultipleSelect',
+  'virtualTreeSelect',
+  'virtualTreeMultipleSelect',
+  'tableSelect',
+  'tableMultipleSelect',
+  'checkCard',
+  'multipleCheckCard',
+  'dictRadio',
+  'dictSelect',
+  'dictCheckbox',
+  'dictMultipleSelect',
+  'regions'
+];
+
+/**
+ * 上传类型的组件类型
+ */
+export const uploadTypes = ['imageUpload', 'fileUpload'];
+
+/**
+ * 获取验证规则值类型
+ * @param type 组件类型
+ */
+export function getRuleType(type) {
+  if (type) {
+    if (arrayTypes.includes(type)) {
+      return 'array';
+    }
+    if (numberTypes.includes(type)) {
+      return 'number';
+    }
+  }
+  return 'string';
+}
+
+/**
+ * 获取验证规则触发类型
+ * @param type 组件类型
+ */
+export function getRuleTrigger(type) {
+  return type && blurTypes.includes(type) ? 'blur' : 'change';
+}
+
+/**
+ * 获取验证规则提示文本
+ * @param type 组件类型
+ * @param label 表单项标题
+ */
+export function getRuleMessage(type, label) {
+  const text = label ?? '';
+  if (type) {
+    if (selectTypes.includes(type)) {
+      return `请选择${text}`;
+    }
+    if (uploadTypes.includes(type)) {
+      return `请上传${text}`;
+    }
+  }
+  return `请输入${text}`;
+}

package/sohelp-pro-layout/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>界面布局SohelpProLayout是继承EleProLayout</div>
+</template>
+<script>
+export default {
+  name: "SohelpProLayout"
+}
+</script>
+<style scoped>
+
+</style>

package/sohelp-pro-table/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <ele-pro-table  v-bind="$attrs">
+    <template v-for="(_, slot) in $slots" #[slot]="slotProps">
+      <slot :name="slot" v-bind="slotProps" />
+    </template>
+  </ele-pro-table>
+</template>
+
+<script setup>
+
+</script>
+<style scoped lang="scss">
+
+</style>

package/sohelp-process/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="sohelp-progress-c">
+    <view class="sohelp-progress-wrap">
+      <view class="sohelp-progress-box" ref="progressBox" @mousedown="onDragStart" @touchstart="onDragStart">
+        <view class="sohelp-progress" :style="style"></view>
+        <!-- 拖拽句柄 -->
+        <div
+          v-if="!props.readonly"
+          class="sohelp-progress-handle"
+          :style="handleStyle"
+          @mousedown.stop="onHandleDown"
+          @touchstart.stop="onHandleDown"
+        ></div>
+      </view>
+      <view class="percent">{{ Number(value) || 0 }}%</view>
+    </view>
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref, watch, onBeforeUnmount } from 'vue';
+
+  const emit = defineEmits(['update:modelValue']);
+  const props = defineProps({
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: [Number, String],
+      default: 8
+    },
+    modelValue: {
+      type: [String, Number],
+      default: 0
+    },
+    color: {
+      type: String,
+      default: '#35b558'
+    },
+    // 动画延迟秒数
+    delay: {
+      type: Number,
+      default: 1
+    },
+    // 持续时间
+    duration: {
+      type: Number,
+      default: 1
+    },
+    // 是否开启动画
+    animate: {
+      type: Boolean,
+      default: false
+    },
+    // 动画轨迹
+    track: {
+      type: String,
+      default: 'ease-out'
+    },
+    margin: {
+      type: String,
+      default: '10px 0'
+    },
+    // 显示百分比
+    showPercent: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  const progressBox = ref(null);
+  const dragging = ref(false);
+
+  const value = ref(Number(props.modelValue) || 0);
+
+  const handleStyle = computed(() => ({
+    left: `calc(${value.value}% - 7px)`
+  }));
+
+  // 拖拽相关
+  const getPercent = (e) => {
+    let clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const rect = progressBox.value.getBoundingClientRect();
+    let percent = ((clientX - rect.left) / rect.width) * 100;
+    percent = Math.round(percent); // step 1
+    percent = Math.max(0, Math.min(100, percent));
+    return percent;
+  };
+
+  const onDragStart = (e) => {
+    if (props.readonly) return;
+    dragging.value = true; // 保证拖动时立即生效
+    updateValue(getPercent(e));
+    window.addEventListener('mousemove', onDragging);
+    window.addEventListener('mouseup', onDragEnd);
+    window.addEventListener('touchmove', onDragging);
+    window.addEventListener('touchend', onDragEnd);
+  };
+
+  const onHandleDown = (e) => {
+    dragging.value = true;
+    onDragStart(e);
+  };
+
+  const onDragging = (e) => {
+    if (!dragging.value && e.type !== 'mousemove' && e.type !== 'touchmove') return;
+    updateValue(getPercent(e));
+  };
+
+  const onDragEnd = () => {
+    dragging.value = false;
+    window.removeEventListener('mousemove', onDragging);
+    window.removeEventListener('mouseup', onDragEnd);
+    window.removeEventListener('touchmove', onDragging);
+    window.removeEventListener('touchend', onDragEnd);
+  };
+
+  const updateValue = (val) => {
+    val = Math.max(0, Math.min(100, Math.round(val)));
+    value.value = val;
+    emit('update:modelValue', val);
+  };
+
+  onBeforeUnmount(() => {
+    onDragEnd();
+  });
+
+  const style = computed(() => {
+    const obj = {
+      width: value.value + '%',
+      backgroundColor: props.color
+    };
+
+    obj.transition = dragging.value ? 'none' : `width ${props.duration}s ${props.track}`; // 不要加 delay
+
+    return obj;
+  });
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      value.value = val;
+    }
+  );
+</script>
+
+<script>
+  export default {
+    name: 'SohelpProcess'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .readonly {
+    width: 100% !important;
+    .el-input-number {
+      width: 100%;
+    }
+  }
+
+  .sohelp-progress-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+
+    .sohelp-progress-box {
+      position: relative;
+      width: 100%;
+      height: 8px;
+      background: #ccc;
+      border-radius: 16px;
+      border: 1px solid #ddd;
+      margin: 10px 5px 10px 10px;
+
+      .sohelp-progress {
+        position: absolute;
+        display: block;
+        width: 0%;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+        height: 100%;
+        border-radius: 8px;
+        transition: width 0.3s ease;
+      }
+    }
+
+    .percent {
+      margin-left: 10px;
+      font-size: 14px;
+      flex: 1;
+      min-width: 40px;
+    }
+  }
+  .sohelp-progress-handle {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 100%; // 继承父节点高度
+    aspect-ratio: 1 / 1; // 保持正方形
+    padding: 3px;
+    background: #fff;
+    border: 2px solid #35b558; // 建议加上边框更明显
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    cursor: move;
+    z-index: 2;
+    transition: box-shadow 0.2s;
+    &:active {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+  }
+</style>

package/sohelp-rate/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="sohelp-rate">
+    <ele-text v-if="type === 'select'">
+      <sohelp-select :datasource="datasource" v-model="value" v-bind="$attrs" />
+    </ele-text>
+    <el-rate v-model="value" v-else v-bind="$attrs" :texts="['1 分', '2 分', '3 分', '4 分', '5 分']" show-text></el-rate>
+  </div>
+</template>
+<script>
+  import { reactive, ref, watch } from 'vue';
+  import SohelpDynSelect from '../sohelp-dyn-select/index.vue';
+  export default {
+    name: 'SohelpRate',
+    components: { SohelpDynSelect },
+    props: {
+      type: {
+        type: String,
+        default: "rate"
+      },
+      modelValue: [Number, String, Array]
+    },
+    emit: ['update:modelValue'],
+    setup(props, { emit, attrs }) {
+      const datasource = Array.from({ length: 5 }, (_, i) => ({
+        label: '*'.repeat(i + 1),
+        value: String(i + 1)
+      }));
+
+      const value = ref('');
+
+      watch(
+        () => props.modelValue,
+        (val) => {
+          value.value = val;
+        },
+        {
+          immediate: true
+        }
+      );
+
+      return {
+        value,
+        datasource
+      };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+
+  .sohelp-rate{
+    .el-rate{
+      margin-top: 0;
+    }
+  }
+
+</style>