update：更新复合表单项相关组件

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-item.hbs

@@ -25,10 +25,83 @@
   style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"
 {{/if}}
   >
-{{#if item.psEditor}}
-  <div class="form-editor-container" style="{{#if item.psEditor.editorWidth}}width: {{item.psEditor.editorWidth}}px;{{/if}}{{#if item.psEditor.editorHeight}}height: {{item.psEditor.editorHeight}}px{{/if}}">
-  {{> @macro/front-end/editors/include-editor.hbs type=item.psEditor.editorType item=item ctrlType="form"}}
-  </div>
+{{#if item.compositeItem}}
+  {{#if (or (eq item.psEditor.editorType 'DATERANGE') (eq item.psEditor.editorType 'DATERANGE_NOTIME'))}}
+    <AppDateRange
+      :refFormItem="
+      {{#if item.psDEFormItems}}
+      {{~#each item.psDEFormItems as | formItem | ~}}
+        {{#if @first}}[{{/if~}}
+        '{{formItem.name}}'{{#unless @last}},{{/unless}}
+        {{~#if @last}}]{{/if~}}
+      {{/each}}
+      {{else}}
+        []
+      {{/if}}"
+      name="{{item.codeName}}"
+      :value="state.data.{{item.psEditor.name}}"
+      :activeData="state.data"
+      editorType="{{item.psEditor.editorType}}"  
+      :disabled="state.detailsModel.{{item.codeName}}.disabled"
+      {{#if item.psEditor.editorParams.TIMEFMT}}
+      format="{{item.psEditor.editorParams.TIMEFMT}}"
+      {{/if}}
+      @editorEvent="onEditorEvent"
+    >
+    </AppDateRange>   
+  {{else if (eq item.psEditor.editorType 'NUMBERRANGE')}}
+    <AppNumberRange
+      :refFormItem="
+      {{#if item.psDEFormItems}}
+      {{~#each item.psDEFormItems as | formItem | ~}}
+        {{#if @first}}[{{/if~}}
+        '{{formItem.name}}'{{#unless @last}},{{/unless}}
+        {{~#if @last}}]{{/if~}}
+      {{/each}}
+      {{else}}
+        []
+      {{/if}}"
+      name="{{item.codeName}}"
+      :value="state.data.{{item.psEditor.name}}"
+      :activeData="state.data"
+      editorType="{{item.psEditor.editorType}}"  
+      :disabled="state.detailsModel.{{item.codeName}}.disabled"
+      {{#if item.psEditor.editorParams.TIMEFMT}}
+      format="{{item.psEditor.editorParams.TIMEFMT}}"
+      {{/if}}
+      @editorEvent="onEditorEvent"
+    >
+    </AppNumberRange>   
+  {{else}}
+    <AppRangeEditor
+      :refFormItem="
+      {{#if item.psDEFormItems}}
+      {{~#each item.psDEFormItems as | formItem | ~}}
+        {{#if @first}}[{{/if~}}
+        '{{formItem.name}}'{{#unless @last}},{{/unless}}
+        {{~#if @last}}]{{/if~}}
+      {{/each}}
+      {{else}}
+        []
+      {{/if}}"
+      name="{{item.codeName}}"
+      :value="state.data.{{item.psEditor.name}}"
+      :activeData="state.data"
+      editorType="{{item.psEditor.editorType}}"  
+      :disabled="state.detailsModel.{{item.codeName}}.disabled"
+      {{#if item.psEditor.editorParams.TIMEFMT}}
+      format="{{item.psEditor.editorParams.TIMEFMT}}"
+      {{/if}}
+      @editorEvent="onEditorEvent"
+    >
+    </AppRangeEditor> 
+  {{/if}} 
+{{else}}
+  {{#if item.psEditor}}
+    <div class="form-editor-container" style="{{#if item.psEditor.editorWidth}}width: {{item.psEditor.editorWidth}}px;{{/if}}{{#if item.psEditor.editorHeight}}height: {{item.psEditor.editorHeight}}px{{/if}}">
+    {{> @macro/front-end/editors/include-editor.hbs type=item.psEditor.editorType item=item ctrlType="form"}}
+    </div>
+  {{/if}}
 {{/if}}
 </AppFormItem>
 {{/neq}}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-date-range.vue

+<script setup lang="ts">
+import { IActionParam, IParam } from '@core';
+import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
+
+interface AppDateRangeProps {
+  refFormItem: any;
+  name: string;
+  value: IParam;
+  activeData: IParam;
+  editorType: string;
+  disabled: boolean;
+  format?: any;
+}
+const props = withDefaults(defineProps<AppDateRangeProps>(), {});
+
+//  抛出事件集合
+interface EmitEvents {
+  (name: 'editorEvent', value: IActionParam): void;
+}
+
+//  抛出事件
+const emit = defineEmits<EmitEvents>();
+
+/**
+ * 处理值格式
+ *
+ * @readonly
+ * @memberof AppDateRange
+ */
+const valFormat = computed(() => {
+  if (props.format) {
+    return props.format.replace('YYYY', 'yyyy').replace('DD', 'dd');
+  } else {
+    return ''
+  }
+});
+
+/**
+ * 处理时间格式 
+ *
+ * @readonly
+ * @memberof AppDateRange
+ */
+const datetype = computed(() => {
+  return Object.is(props.editorType,'DATERANGE') ? 'date' : 'time';
+});
+
+/**
+ * 获取值
+ *
+ * @param {string} name
+ * @returns
+ * @memberof AppDateRange
+ */
+const curdate = computed({
+  get: () => {
+      let value: any[] = [];
+      props.refFormItem.forEach((foritem: any) => {
+        if (props.activeData[foritem]) {
+          value.push(props.activeData[foritem]);
+        }
+      })
+      return value;    
+  },
+  set: (dates:any) => {
+        if(dates) {
+          dates.forEach((date: any,index: number) => {
+            emit('editorEvent', { tag: props.refFormItem[index], action: 'valueChange', data: date });
+          });
+        } else {
+          props.refFormItem.forEach((foritem: any) => {
+            emit('editorEvent', { tag: foritem, action: 'valueChange', data: null });
+          })
+        }
+  }
+})
+</script>
+
+<template>
+    <div class="app-date-range">
+        <a-range-picker
+            v-model='curdate'
+            :picker="datetype"
+            :format="valFormat"
+            :disabled="disabled"
+            :readonly="readonly"
+            separator="至">
+        </a-range-picker>
+    </div>
+</template>
+
+<style lang="scss">
+</style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-number-range.vue

+<script setup lang="ts">
+import { IActionParam, IParam } from '@core';
+
+interface AppNumberRangeProps {
+  refFormItem: any;
+  name: string;
+  value: IParam;
+  activeData: IParam;
+  editorType: string;
+  disabled: boolean;
+  precision?: number;
+}
+const props = withDefaults(defineProps<AppNumberRangeProps>(), {
+  precision: 0,
+});
+
+//  抛出事件集合
+interface EmitEvents {
+  (name: 'editorEvent', value: IActionParam): void;
+}
+
+//  抛出事件
+const emit = defineEmits<EmitEvents>();
+
+/**
+ * 值改变
+ *
+ * @param {string} name
+ * @param {*} value
+ * @memberof AppNumberRange
+ */
+const onValueChange = ($event: any, index: number) => {
+  let value;
+  value = $event;
+  if (props.refFormItem?.length == 2) {
+    emit('editorEvent', { tag: props.refFormItem[index], action: 'valueChange', data: value });
+  }
+};
+
+/**
+ * 最小值
+ *
+ * @memberof AppNumberRange
+ */
+let minValue: any = null;
+
+/**
+ * 最大值
+ *
+ * @memberof AppNumberRange
+ */
+let maxValue: any = null;
+
+/**
+ * Vue生命周期onMounted
+ */
+onMounted(() => {
+  if (props.refFormItem?.length == 2) {
+    if (props.activeData[props.refFormItem[0]]) {
+      minValue = parseFloat(props.activeData[props.refFormItem[0]]);
+    }
+    if (props.activeData[props.refFormItem[1]]) {
+      maxValue = parseFloat(props.activeData[props.refFormItem[1]]);
+    }
+  }
+});
+</script>
+
+<template>
+  <div class="app-number-range">
+    <a-input-number
+      :max="!maxValue && maxValue != 0 ? Infinity : maxValue - 1"
+      v-model="minValue"
+      :disabled="disabled"
+      :precision="precision"
+      @change="(value) => {onValueChange(value, 0)}"
+    >
+    </a-input-number>
+    <div class="range-separator"> ~ </div>
+    <a-input-number
+      :min="minValue + 1"
+      v-model="maxValue"
+      :disabled="disabled"
+      :precision="precision"
+      @change="(value) => {onValueChange(value, 1)}"
+    >
+    </a-input-number>
+  </div>
+</template>
+
+<style lang="scss">
+.app-number-range {
+  width: 100%;
+  display: flex;
+  .range-separator {
+    width: 30px;
+    font-size: 33px;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-range-editor.vue

+<script setup lang="ts">
+import { IActionParam, IParam } from '@core';
+import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
+
+interface AppRangeEditorProps {
+  refFormItem: any;
+  name: string;
+  value: IParam;
+  activeData: IParam;
+  editorType: string;
+  disabled: boolean;
+  format?: any;
+}
+const props = withDefaults(defineProps<AppRangeEditorProps>(), {});
+
+//  抛出事件集合
+interface EmitEvents {
+  (name: 'editorEvent', value: IActionParam): void;
+}
+
+//  抛出事件
+const emit = defineEmits<EmitEvents>();
+
+/**
+ * 值变化时间
+ *
+ * @private
+ * @type {Subject<any>}
+ * @memberof AppRangeEditor
+ */
+const inputDataChang: Subject<any> = new Subject();
+
+/**
+ * 处理值格式
+ *
+ * @readonly
+ * @memberof AppRangeEditor
+ */
+const valFormat = computed(() => {
+  if (props.format) {
+    return props.format.replace('YYYY', 'yyyy').replace('DD', 'dd');
+  }
+});
+
+/**
+ * 获取值
+ *
+ * @param {string} name
+ * @returns
+ * @memberof AppRangeEditor
+ */
+const getValue = (name: string) => {
+  return props.activeData[name];
+};
+
+/**
+ * 值改变
+ *
+ * @param {string} name
+ * @param {*} value
+ * @memberof AppRangeEditor
+ */
+const onValueChange = (name: string, $event: any) => {
+  let value;
+  if (
+    Object.is(props.editorType, 'DATEPICKEREX') ||
+    Object.is(props.editorType, 'DATEPICKEREX_NOTIME') ||
+    Object.is(props.editorType, 'DATEPICKER')
+  ) {
+    value = $event;
+  } else if (props.editorType.startsWith('DATEPICKEREX')) {
+    value = $event;
+  } else if (Object.is(props.editorType, 'NUMBER')) {
+    value = $event;
+  } else {
+    value = $event.target.value;
+  }
+  emit('editorEvent', { tag: name, action: 'valueChange', data: value });
+};
+
+/**
+ * Vue生命周期beforeMount
+ */
+onBeforeMount(() => {
+  inputDataChang.pipe(debounceTime(500), distinctUntilChanged()).subscribe((data: any) => {
+    emit('editorEvent', { tag: data.name, action: 'valueChange', data: data.value });
+  });
+});
+</script>
+
+<template>
+  <div class="app-range-editor">
+    <template v-for="(item, index) in refFormItem">
+      <span
+        v-if="index > 0"
+        class="editor-space"
+        :key="index+10"
+      >~</span>
+      <a-date-picker
+        :key="index"
+        v-if="Object.is(editorType, 'DATEPICKEREX') || Object.is(editorType, 'DATEPICKEREX_NOTIME') || Object.is(editorType, 'DATEPICKER')"
+        picker="date"
+        :format="valFormat"
+        placeholder="请选择时间..."
+        :value="activeData[item]"
+        :disabled="disabled"
+        :inputReadOnly="readonly"
+        @change="(value,type)=>{onValueChange(item,value)}"
+      >
+      </a-date-picker>
+      <a-time-picker
+        :key="index+1"
+        v-else-if="editorType.startsWith('DATEPICKEREX')"
+        :format="valFormat"
+        placeholder="请选择时间..."
+        :value="activeData[item]"
+        :disabled="disabled"
+        :inputReadOnly="readonly"
+        @change="(value)=>{onValueChange(item,value)}"
+      >
+      </a-time-picker>
+      <a-input-number
+        :key="index+2"
+        v-else-if="Object.is(editorType, 'NUMBER')"
+        :value="activeData[item]"
+        :disabled="disabled"
+        placeholder="请输入..."
+        @change="(value)=>{onValueChange(item,value)}"
+      >
+      </a-input-number>
+      <AppSpan
+        :key="index+3"
+        v-else-if="Object.is(editorType, 'SPAN')"
+        :value="activeData[item]"
+        :disabled="disabled"
+      >
+      </AppSpan>
+      <a-input
+        :key="index+4"
+        v-else
+        :value="getValue(item)"
+        :disabled="disabled"
+        placeholder="请输入..."
+        @change="(value)=>{onValueChange(item,value)}"
+      >
+      </a-input>
+    </template>
+  </div>
+</template>
+
+<style lang="scss">
+.app-range-editor {
+  display: flex;
+  .editor-space {
+    padding: 0 5px;
+    font-size: 15px;
+  }
+}
+</style>
\ No newline at end of file