sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-cry-input/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="sohelp-cry-input">
+    <span class="unit-icon" :class="['left', 'right'].includes(unitPosition)?unitPosition:'left'">{{ unit || '￥' }}</span>
+    <sohelp-number-input
+      v-bind="$attrs"
+      :formatter="formatCurrency"
+      :parser="parseCurrency"
+    ></sohelp-number-input>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'SohelpCryInput',
+    props: {
+      unit: {
+        type: String,
+        default: '￥'
+      },
+      unitPosition: {
+        type: String,
+        default: 'left'
+      }
+    }
+  };
+</script>
+<style lang="scss">
+  .sohelp-cry-input {
+    position: relative;
+
+    .el-input__inner {
+      box-sizing: border-box;
+      padding: 0 0px;
+    }
+
+    .unit-icon {
+      color: #909399;
+      min-width: 15px;
+      max-width: 40px;
+      overflow: hidden;
+      text-align: center;
+      height: 50%;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+
+      position: absolute;
+      top: 0;
+      font-size: 14px;
+      bottom: 0;
+      margin: auto 0;
+      z-index: 99;
+      background: #fff;
+    }
+
+    .unit-icon.left {
+      left: 25%;
+      padding-right:3px;
+    }
+    .unit-icon.right {
+      right: 25%;
+      padding-left:3px;
+    }
+  }
+</style>

package/sohelp-date/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-date-picker ref="dateRef" v-bind="$attrs" value-format="YYYY-MM-DD"></el-date-picker>
+</template>
+<script setup>
+  import { nextTick, onMounted, ref } from 'vue';
+  const props = defineProps({
+    focus: {
+      type: Boolean,
+      default: false
+    }
+  });
+  const dateRef = ref(null);
+  onMounted(() => {
+    if (props.focus) {
+      nextTick(() => {
+        dateRef.value?.focus();
+      });
+    }
+  });
+</script>
+<script>
+  export default {
+    name: 'SohelpDate'
+  };
+</script>
+
+<style scoped></style>

package/sohelp-datetime/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-date-picker
+    :type="type"
+    ref="dateRef"
+    v-bind="$attrs"
+    :value-format="valueFormat"
+    v-model="modelValue"
+  ></el-date-picker>
+</template>
+
+<script setup>
+  import { ref, onMounted, nextTick, defineEmits, defineModel } from 'vue';
+  const modelValue = defineModel('modelValue', { default: '' });
+  const props = defineProps({
+    focus: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'datetime'
+    },
+    valueFormat: {
+      type: String,
+      default: 'YYYY-MM-DD HH:mm:ss'
+    }
+  });
+  const dateRef = ref(null);
+  onMounted(() => {
+    if (props.focus) {
+      nextTick(() => {
+        dateRef.value?.focus();
+      });
+    }
+  });
+</script>
+
+<script>
+  export default {
+    name: 'SohelpDatetime'
+  };
+</script>
+
+<style scoped></style>

package/sohelp-datetime-picker/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-date-picker
+    :type="type"
+    v-bind="$attrs"
+    :value-format="valueFormat"
+    :shortcuts="dateType"
+    v-model="value"
+  ></el-date-picker>
+</template>
+
+<script setup>
+  import { ref, reactive, watch } from 'vue';
+  import dayjs from 'dayjs';
+  const props = defineProps({
+    modelValue: String,
+    default: '',
+    type: {
+      type: String,
+      default: 'datetimerange'
+    },
+    valueFormat: {
+      type: String,
+      default: 'YYYY-MM-DD HH:mm:ss'
+    }
+  });
+
+  const emit = defineEmits('update:modelValue');
+  const value = ref([]);
+  const now = dayjs();
+  const dateType = reactive([
+    {
+      text: '今天',
+      value: [now.startOf('day'), now.endOf('day')]
+    },
+    {
+      text: '昨天',
+      value: [now.subtract(1, 'day').startOf('day'), now.subtract(1, 'day').endOf('day')]
+    },
+    {
+      text: '前天',
+      value: [now.subtract(2, 'day').startOf('day'), now.subtract(2, 'day').endOf('day')]
+    },
+    {
+      text: '本周',
+      value: [now.startOf('week').add(1, 'day'), now.endOf('week').add(1, 'day')]
+    },
+    {
+      text: '上周',
+      value: [
+        now.subtract(1, 'week').startOf('week').add(1, 'day'),
+        now.subtract(1, 'week').endOf('week').add(1, 'day')
+      ]
+    },
+    {
+      text: '本月',
+      value: [now.startOf('month'), now.endOf('month')]
+    },
+    {
+      text: '上月',
+      value: [now.subtract(1, 'month').startOf('month'), now.subtract(1, 'month').endOf('month')]
+    },
+    {
+      text: '本年',
+      value: [now.startOf('year'), now.endOf('year')]
+    },
+    {
+      text: '去年',
+      value: [now.subtract(1, 'year').startOf('year'), now.subtract(1, 'year').endOf('year')]
+    }
+  ]);
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      value.value = val;
+    }
+  );
+</script>
+
+<script>
+  export default {
+    name: 'SohelpDatetimePicker'
+  };
+</script>
+
+<style scoped></style>

package/sohelp-datetime-range/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="sohelp-datetime-range">
+    <sohelp-datetime v-model="value[0]" :format="format" :value-format="format" @change="onChange"></sohelp-datetime>
+    {{ separator }}
+    <sohelp-datetime v-model="value[1]" :format="format" :value-format="format" @change="onChange"></sohelp-datetime>
+  </div>
+</template>
+
+<script setup>
+  import { ref, watch } from 'vue';
+  const emit = defineEmits(['update:modelValue', 'change']);
+  const props = defineProps({
+    modelValue: [String, Number, Array],
+    format: {
+      type: String,
+      default: 'YYYY-MM-DD HH:mm:ss'
+    },
+    separator: {
+      type: String,
+      default: '-'
+    }
+  });
+
+  const value = ref([]);
+  const onChange = () => {
+    emit('update:modelValue', value.value);
+  };
+
+  /**
+   * 监听props.modelValue的变化
+   */
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (Array.isArray(val)) {
+        value.value = val;
+      } else {
+        value.value = [val, ''];
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+<script>
+  export default {
+    name: 'SohelpDatetimeRange'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-datetime-range {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
+  }
+</style>

package/sohelp-dict/index.vue

@@ -0,0 +1,206 @@
+<!-- 字典组件 -->
+<template>
+  <template v-if="type === 'text'">
+    <el-text
+      v-bind="$attrs"
+      :style="getStyle(item)"
+      style="
+        border-radius: 3px;
+        margin-right: 3px;
+        padding-left: 6px;
+        padding-right: 6px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+      "
+      v-for="(item, index) in valueData"
+      :key="item.value"
+      >{{ item.label }}
+    </el-text>
+  </template>
+  <template v-else-if="type === 'tag'">
+    <div class="tags" style="display: flex; gap: 5px; flex-wrap: wrap">
+      <el-tag
+        v-bind="$attrs"
+        style="margin-right: 3px"
+        :style="getStyle(item)"
+        v-for="item in valueData"
+        :key="item.value"
+        :disable-transitions="true"
+      >
+        {{ item.label }}
+      </el-tag>
+    </div>
+  </template>
+  <el-radio-group
+    v-bind="$attrs"
+    v-else-if="type === 'radio'"
+    :disabled="disabled"
+    :model-value="modelValue"
+    @change="change"
+  >
+    <el-radio v-for="item in data.value" :key="item.value" :label="item.value">
+      {{ item.label }}
+    </el-radio>
+  </el-radio-group>
+  <el-checkbox-group
+    v-bind="$attrs"
+    v-else-if="type === 'checkbox'"
+    :disabled="disabled"
+    :model-value="modelValue"
+    @change="change"
+  >
+    <el-checkbox v-for="item in data.value" :key="item.value" :label="item.value">
+      {{ item.label }}
+    </el-checkbox>
+  </el-checkbox-group>
+
+  <el-select
+    v-bind="$attrs"
+    filterable
+    clearable
+    v-else
+    v-model="modelValue"
+    :model-value="modelValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :multiple="type === 'multipleSelect'"
+    :teleported="teleported"
+    style="min-width: 120px"
+    @change="change"
+    ref="dictSelectRef"
+  >
+    <template #prefix v-if="icon">
+      <el-icon :size="18" style="margin-right: 5px">
+        <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
+        <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
+        <span :class="icon" v-else></span>
+      </el-icon>
+    </template>
+    <el-option
+      v-for="item in data.value"
+      :key="item.id"
+      :value="item.value"
+      :label="item.label"
+      :style="`color:${item.fontColor}`"
+    >
+      <el-icon :size="18" v-if="item.icon" style="margin-right: 5px">
+        <component :is="ElementPlusIcons[item.icon]" v-if="ElementPlusIcons[item.icon]" />
+        <component :is="EleAdminPlusIcons[item.icon]" v-else-if="EleAdminPlusIcons[item.icon]" />
+        <span :class="item.icon" v-else></span>
+      </el-icon>
+      {{ item.label }}
+    </el-option>
+  </el-select>
+</template>
+
+<script setup>
+  import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+  import { dictCache } from '../cache/DictCache';
+  import * as ElementPlusIcons from '@element-plus/icons-vue';
+  import * as EleAdminPlusIcons from '../sohelp-icon-select/icons';
+
+  const modelValue = defineModel('modelValue', { type: [String, Number, Array], default: '' });
+  const emit = defineEmits('change');
+  const props = defineProps({
+    /** 字典类型 */
+    code: {
+      type: String,
+      required: true
+    },
+    /** 组件类型 */
+    type: String,
+    /** 是否禁用 */
+    disabled: Boolean,
+    /** 提示文本 */
+    placeholder: String,
+    /** select的下拉是否插入到body下 */
+    teleported: {
+      type: Boolean,
+      default: true
+    },
+    autoFocus: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  /** 字典数据 */
+  const data = reactive({});
+  const dictSelectRef = ref(null);
+
+  const icon = computed(() => {
+    const item = data.value?.find((item) => item.value === modelValue.value);
+    return item?.icon;
+  });
+
+  //初始化菜单数据
+  onMounted(async () => {
+    data.value = (await dictCache.get(props.code)) || [];
+    //设置默认值
+    nextTick(() => {
+      if (!modelValue.value && (props.type === 'select' || props.type === undefined) && data.value[0]) {
+        modelValue.value = data.value[0].value;
+      }
+      if (props.autoFocus) {
+        dictSelectRef.value?.focus();
+      }
+    });
+  });
+
+  /**
+   * 获取样式
+   * @param item
+   */
+  const getStyle = (item) => {
+    const styles = [];
+    if (item?.fontColor) {
+      styles.push(`color:${item.fontColor};`);
+    }
+    if (item?.backgroundColor) {
+      styles.push(`background-color:${item.backgroundColor};`);
+    }
+    return styles.join('');
+  };
+
+  /**
+   * change
+   * @param val
+   */
+  const change = (val) => {
+    emit('change', val);
+  };
+
+  /**
+   *  显示标签数据
+   */
+  const valueData = computed(() => {
+    const val = props.modelValue;
+    if (val == null || val === '') return [];
+    const values = Array.isArray(val)
+      ? val
+      : typeof val === 'number'
+        ? [val]
+        : val
+            .split(',')
+            .map((v) => v.trim())
+            .filter(Boolean);
+
+    return (data.value || [])
+      .map((d) => (values.includes(d.value) ? d : null))
+      .filter(Boolean)
+      .concat(
+        values.filter((v) => !(data.value || []).some((d) => d.value === v)).map((v) => ({ value: v, label: v }))
+      );
+  });
+  /** 更新选中数据 */
+  // const updateValue = (value) => {
+  //   emit('update:modelValue', value);
+  // };
+</script>
+
+<script>
+  export default {
+    name: 'SohelpDict',
+    inheritAttrs: false
+  };
+</script>

package/sohelp-dict/props.js

@@ -0,0 +1,68 @@
+/**
+ * 属性
+ */
+export const prop = {
+  dict: {
+    type: String,
+    required: true
+  },
+
+  type: {
+    type: String,
+    default: 'select'
+  },
+
+  mappingFields:{
+    type: Object,
+    default: () => {
+      return {
+        label: 'label',
+        value: 'value'
+      }
+    }
+  },
+
+  width: {
+    type: String,
+    default: '200px'
+  },
+
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  modelValue: {
+    type: Array || String || Number,
+    default: String,
+    required: true
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    validator: function (value) {
+      return ['large', 'default', 'small', ''].includes(value);
+    },
+    default: 'default'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  }
+};
+
+/**
+ * 事件
+ */
+
+export const emit = ['update:modelValue','change'];

package/sohelp-drawer/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <ele-drawer v-bind="$attrs" style="max-width: 100%" class="sohelp-drawer" v-model="modelValue">
+    <div class="drawer__container">
+      <!-- 主内容插槽 -->
+      <slot></slot>
+    </div>
+
+    <!-- 底部插槽 -->
+    <template #footer>
+      <div class="drawer__footer">
+        <slot name="footer" />
+      </div>
+    </template>
+  </ele-drawer>
+</template>
+
+<script setup>
+  const modelValue = defineModel('modelValue', {
+    type: Boolean,
+    default: false
+  });
+
+  const show = () => {
+    modelValue.value = true;
+  };
+  const close = () => {
+    modelValue.value = false;
+  };
+
+  defineExpose({
+    show,
+    close
+  });
+</script>
+<script>
+  export default {
+    name: 'SohelpDrawer'
+  };
+</script>
+<style scoped lang="scss">
+  /* 可选：添加样式 */
+  .drawer__container {
+    /* 样式定义 */
+    height: 100%;
+  }
+
+  .drawer__footer {
+    /* 样式定义 */
+  }
+</style>

package/sohelp-drop-card/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <ele-tooltip v-bind="propsBind" class="tooltip-wrap" ref="sohelpDropCardRef">
+    <template #default>
+      <el-button size="small"
+        ><el-icon style="margin-right: 3px" v-if="icon"> <component :is="icon" /> </el-icon>{{ title }}
+      </el-button>
+    </template>
+    <template #content>
+      <ele-card
+        class="tooltip-card"
+        :bodyStyle="{ padding: '0 10px 0 0', height: 'auto', maxHeight: '40vh', overflow: 'auto' }"
+        :footerStyle="{ padding: '8px 0 2px 0' }"
+      >
+        <slot></slot>
+        <template #footer v-if="$slots.footer">
+          <div class="footer-right">
+            <slot name="footer"></slot>
+          </div>
+        </template>
+      </ele-card>
+    </template>
+  </ele-tooltip>
+</template>
+
+<script setup>
+  import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+  const props = defineProps({
+    title: String,
+    icon: Object,
+    placement: {
+      default: 'bottom-end'
+    },
+    trigger: {
+      type: String,
+      default: 'click'
+    },
+    effect: {
+      type: String,
+      default: 'light'
+    },
+    icon: {
+      type: [Object, String],
+      default: ''
+    },
+    modelValue: Boolean
+  });
+
+  const windowHeight = ref(window.innerHeight);
+  const sohelpDropCardRef = ref(null);
+
+  const handleResize = () => {
+    windowHeight.value = window.innerHeight;
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', handleResize);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResize);
+  });
+
+  const propsBind = computed(() => ({
+    ...props,
+    placement: windowHeight.value < 600 ? 'auto' : props.placement
+  }));
+
+  defineExpose({
+    close: () => {
+      sohelpDropCardRef.value.hide();
+    }
+  });
+</script>
+
+<script>
+  export default {
+    name: 'SohelpDropCard'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .tooltip-wrap {
+  }
+
+  .tooltip-card {
+    min-width: 180px;
+  }
+  .footer-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+</style>