star-horse-lowcode 2.7.62 → 2.7.65

package/src/components/formcomp/items/number-item.vue

@@ -0,0 +1,94 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-input-number
+      :fid="field.fieldName"
+      :disabled="checkIsDisabled(props)"
+      v-bind="field.preps"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    >
+      <template #prefix>
+        <span v-if="field.preps?.prefix">{{ field.preps["prefix"] }}</span>
+      </template>
+      <template #suffix>
+        <span v-if="field.preps?.suffix">{{ field.preps["suffix"] }}</span>
+      </template>
+    </el-input-number>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { nextTick, onMounted, PropType } from "vue";
+import {
+  allAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { getDynamicEvents } from "@/api/system";
+
+defineOptions({
+  name: "NumberItem",
+});
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+const initEvent = async () => {
+  await nextTick();
+};
+const itemAction = (prep: any) => {
+  allAction(props, emits, formData, prep);
+};
+onMounted(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  props.field.preps["step"] = props.field.preps["step"] || 1;
+  props.field.preps["min"] = props.field.preps["min"] || 0;
+  props.field.preps["precision"] = props.field.preps["precision"] || 0;
+  initCompCallEvent(props, emits, formData);
+
+  initEvent();
+});
+</script>
+<style lang="scss" scoped>
+:deep(.el-input-number) {
+  width: 100% !important;
+}
+</style>

package/src/components/formcomp/items/number-range-item.vue

@@ -0,0 +1,278 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <div class="number-range-container">
+      <div
+        v-if="field.preps?.prefix"
+        :class="{ 'slot-default': slotStyle === 'default', 'slot-pend ': true }"
+      >
+        {{ field.preps["prefix"] }}
+      </div>
+      <div
+        class="number-range"
+        :class="{
+          'is-disabled': checkIsDisabled(props),
+          'is-focus': isFocus,
+          'number-range-border-radius': true,
+        }"
+      >
+        <el-input-number
+          :fid="minName"
+          :controls="false"
+          :disabled="checkIsDisabled(props)"
+          v-bind="field.preps"
+          :placeholder="field.preps?.minPlaceholder"
+          @change="itemAction('change')"
+          @blur="handleBlur"
+          @focus="handleFocus"
+          v-model="formData[minName]"
+        />
+        <div class="to">
+          <span>{{ splitName }}</span>
+        </div>
+        <el-input-number
+          :fid="maxName"
+          :controls="false"
+          :disabled="checkIsDisabled(props)"
+          v-bind="field.preps"
+          @change="itemAction('change')"
+          @blur="handleBlur"
+          @focus="handleFocus"
+          :placeholder="field.preps?.maxPlaceholder"
+          :step-strictly="field.preps?.stepStrictly"
+          v-model="formData[maxName]"
+        />
+      </div>
+      <div
+        v-if="field.preps?.suffix"
+        :class="{ 'slot-default': slotStyle === 'default', 'slot-pend ': true }"
+      >
+        {{ field.preps["suffix"] }}
+      </div>
+    </div>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeMount,
+  onMounted,
+  PropType,
+  ref,
+  shallowRef,
+} from "vue";
+import {
+  allAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+  formFieldList: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+const maxName = computed(() => {
+  return props.field.preps?.maxName ?? props.field.fieldName + "Max";
+});
+const minName = computed(() => {
+  return props.field.preps?.minName ?? props.field.fieldName + "Min";
+});
+const splitName = computed(() => {
+  return props.field.preps?.splitName ?? "-";
+});
+let slotStyle = shallowRef("");
+
+// input焦点事件
+const isFocus = ref();
+const handleFocus = () => {
+  isFocus.value = true;
+};
+const handleBlur = () => {
+  isFocus.value = false;
+};
+
+// 处理数字精度
+// 判断插槽是否被使用
+// 组件外部使用时插入了
+// <template #插槽名 >
+// </template>
+// 无论template标签内是否插入了内容，均视为已使用该插槽
+
+const itemAction = (prep: string) => {
+  let min = formData.value[minName.value];
+  let max = formData.value[maxName.value];
+  if (
+    min === undefined ||
+    min === null ||
+    isNaN(min) || // 空值/非数值校验
+    max === undefined ||
+    max === null ||
+    isNaN(max) ||
+    max < min // 最大值小于最小值校验
+  ) {
+    // 校验失败时，清空主字段值（触发父组件required规则）
+    formData.value[props.field.fieldName] =
+      `${min ?? ""}${splitName.value}${max ?? ""}`;
+    return;
+  }
+  formData.value[props.field.fieldName] = `${min}${splitName.value}${max}`;
+  allAction(props, emits, formData, prep);
+};
+onBeforeMount(() => {
+  if (!props.field.preps) {
+    props.field["preps"] = {};
+  }
+});
+onMounted(() => {
+  let val: any = formData.value[props.field.fieldName];
+  if (typeof val === "string") {
+    let data = val.split(splitName.value);
+    formData.value[minName.value] = Number(data[0]);
+    formData.value[maxName.value] = Number(data[1]);
+  } else if (Array.isArray(val)) {
+    formData.value[minName.value] = Number(val[0]);
+    formData.value[maxName.value] = Number(val[1]);
+  }
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped>
+.el-input-number {
+  width: 100%;
+}
+
+.number-range-container {
+  display: flex;
+  height: 100%;
+
+  .slot-pend {
+    white-space: nowrap;
+    color: var(--el-color-info);
+    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+  }
+
+  #prepend {
+    padding: 0 20px;
+    box-shadow:
+      1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
+      0 1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
+      0 -1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  #append {
+    padding: 0 15px;
+    box-shadow:
+      0 1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
+      0 -1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
+      -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .slot-default {
+    background-color: var(--el-fill-color-light);
+  }
+
+  .number-range-border-radius {
+    border-radius: 5px !important;
+  }
+
+  .number-range {
+    background-color: var(--el-bg-color) !important;
+    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
+      inset;
+    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+    padding: 0 2px;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    color: var(--el-input-text-color, var(--el-text-color-regular));
+    transition: var(--el-transition-box-shadow);
+    transform: translate3d(0, 0, 0);
+    overflow: hidden;
+
+    .to {
+      margin-top: 1px;
+    }
+  }
+
+  .is-focus {
+    transition: all 0.3s;
+    box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
+  }
+
+  .is-disabled {
+    background-color: var(--el-input-bg-color);
+    color: var(--el-input-text-color, var(--el-text-color-regular));
+    cursor: not-allowed;
+
+    .to {
+      height: calc(100% - 3px);
+      background-color: var(--el-fill-color-light) !important;
+    }
+  }
+}
+
+:deep(.el-input) {
+  border: none;
+}
+
+:deep(.el-input__wrapper) {
+  margin: 0;
+  padding: 0 15px;
+  background-color: transparent;
+  border: none !important;
+  box-shadow: none !important;
+
+  &.is-focus {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}
+</style>