zhytech-ui-mobile 1.0.0 → 1.0.2

package/src/components/dynamicForm/components/base/input.vue

@@ -0,0 +1,99 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\base\input.vue
+ * Author       : 苏军志
+ * Date         : 2024-03-05 08:48
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 10:01
+ * Description  : 文本框(input)组件渲染器
+ * CodeIterationRecord:
+ -->
+<template>
+  <view class="zhy-form-component-input">
+    <wd-input
+      :type="componentProps.type"
+      custom-class="zhy"
+      v-model="datas[componentID]"
+      :placeholder="componentProps.placeholder"
+      :clearable="componentProps.clearable"
+      :disabled="disabled"
+      :readonly="readonly"
+      clearTrigger="focus"
+    />
+    <view
+      v-if="
+        everyItemDisplayAnalysisSwitch ||
+        displayAnswerDescription ||
+        (showDescription && (formType === formTypeEnum.Examination || componentProps.description))
+      "
+      :class="['dynamic-form-item-description', { 'show-description': displayAnswerDescription }]"
+    >
+      <wd-icon
+        custom-class="description-tip"
+        class-prefix="iconfont zhy"
+        name="tip"
+        color="#ff0000"
+        @click="displayAnswerDescription = !displayAnswerDescription"
+      />
+      <view v-if="displayAnswerDescription">
+        {{ `${formType === formTypeEnum.Form ? "项目说明" : "答案解析"}：${componentProps.description || "无"}` }}</view
+      >
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { formTypeEnum } from "../../types/enum";
+import type { baseAttribute, editAttribute, inputAttribute } from "../../types/componentAttribute/index";
+type componentType = baseAttribute & editAttribute & inputAttribute;
+const props = defineProps({
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否只读
+   */
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 组件ID
+   */
+  componentID: {
+    type: [String, Number],
+    required: true
+  },
+  /**
+   * 表单数据
+   */
+  datas: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 组件属性
+   */
+  componentProps: {
+    type: Object as PropType<componentType>,
+    required: true
+  },
+  /**
+   * 是否项目说明/答案解析
+   */
+  showDescription: {
+    type: Boolean,
+    default: false
+  }
+});
+// 表单类型
+const formType = inject("formType") as ComputedRef<string>;
+const everyItemDisplayAnalysisSwitch = inject("everyItemDisplayAnalysisSwitch") as boolean;
+const displayAnswerDescription = ref<boolean>(false);
+// 双向绑定
+const { datas, componentProps } = toRefs(props);
+const emits = defineEmits(["update:datas"]);
+watch(datas, (newValue) => emits("update:datas", newValue));
+</script>

package/src/components/dynamicForm/components/base/label.vue

@@ -0,0 +1,29 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\base\label.vue
+ * Author       : 苏军志
+ * Date         : 2024-03-04 16:42
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-08-24 20:01
+ * Description  :导出标签(label)组件渲染器
+ * CodeIterationRecord:
+ -->
+
+<template>
+  <wd-text
+    custom-class="zhy"
+    :text="componentProps.label"
+    :size="`${componentProps.fontSize > 14 ? componentProps.fontSize : 14}px`"
+    :bold="componentProps.isBold"
+    :color="componentProps.color"
+  ></wd-text>
+</template>
+<script setup lang="ts">
+import type { baseAttribute } from "../../types/componentAttribute/index";
+type componentType = baseAttribute;
+defineProps({
+  componentProps: {
+    type: Object as PropType<componentType>,
+    required: true
+  }
+});
+</script>

package/src/components/dynamicForm/components/base/radio.vue

@@ -0,0 +1,155 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\base\radio.vue
+ * Author       : 苏军志
+ * Date         : 2024-03-06 14:20
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 10:02
+ * Description  : 单选框(radio)组件渲染器
+ * CodeIterationRecord:
+ -->
+<template>
+  <view class="zhy-form-component-radio">
+    <wd-radio-group
+      custom-class="zhy"
+      v-model="datas[componentID]"
+      :disabled="disabled"
+      :inline="!componentProps.newLine"
+      icon-placement="left"
+      shape="dot"
+      @change="change"
+    >
+      <template v-for="(item, index) in componentProps.options" :key="index">
+        <wd-radio :value="item.value" @click="clearCheck($event, item.value)">
+          {{ item.label }}
+        </wd-radio>
+        <wd-input
+          v-if="item.inputEnable && datas[componentID]?.includes(item.value)"
+          custom-class="zhy ml-20!"
+          type="text"
+          placeholder=""
+          :clearable="true"
+          clearTrigger="focus"
+          v-model="datas[`${componentID}||${item.value}`]"
+        />
+      </template>
+    </wd-radio-group>
+    <view
+      v-if="
+        everyItemDisplayAnalysisSwitch ||
+        displayAnswerDescription ||
+        (showDescription && (formType === formTypeEnum.Examination || componentProps.description))
+      "
+      :class="['dynamic-form-item-description', { 'show-description': displayAnswerDescription }]"
+    >
+      <wd-icon
+        custom-class="description-tip"
+        class-prefix="iconfont zhy"
+        name="tip"
+        color="#ff0000"
+        @click="displayAnswerDescription = !displayAnswerDescription"
+      />
+      <view v-if="displayAnswerDescription">
+        {{ `${formType === formTypeEnum.Form ? "项目说明" : "答案解析"}：${componentProps.description || "无"}` }}</view
+      >
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { formTypeEnum, examinationStatusEnum } from "../../types/enum";
+import type { baseAttribute, editAttribute, radioAttribute } from "../../types/componentAttribute/index";
+type componentType = baseAttribute & editAttribute & radioAttribute;
+const props = defineProps({
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 组件ID
+   */
+  componentID: {
+    type: [String, Number],
+    required: true
+  },
+  /**
+   * 表单数据
+   */
+  datas: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 组件属性
+   */
+  componentProps: {
+    type: Object as PropType<componentType>,
+    required: true
+  },
+  /**
+   * 是否项目说明/答案解析
+   */
+  showDescription: {
+    type: Boolean,
+    default: false
+  }
+});
+// 表单类型
+const formType = inject("formType") as ComputedRef<string>;
+const realTimeDisplayAnswerMode = inject("realTimeDisplayAnswerMode") as boolean;
+const everyItemDisplayAnalysisSwitch = inject("everyItemDisplayAnalysisSwitch") as boolean;
+// 双向绑定
+const { datas, componentProps } = toRefs(props);
+const emits = defineEmits(["update:datas"]);
+watch(datas, (newValue) => emits("update:datas", newValue));
+let oldValue: string | number | boolean | undefined = datas.value[props.componentID];
+const displayAnswerDescription = ref<boolean>(false);
+/**
+ * @description: 选项值改变，如果允许填空的选项被取消勾选，填空内容也清空
+ * @param value
+ * @return
+ */
+const change = (values: any) => {
+  const { value } = values ?? {};
+  // 如果是考试，并且打开了实时显示答案模式
+  if (formType.value === formTypeEnum.Examination && realTimeDisplayAnswerMode && value && componentProps.value.correctOptions?.length) {
+    if (componentProps.value.correctOptions?.includes(value)) {
+      componentProps.value.examinationStatus = examinationStatusEnum.Correct;
+      componentProps.value.color = "#000000";
+      displayAnswerDescription.value = false;
+    } else {
+      componentProps.value.examinationStatus = examinationStatusEnum.Error;
+      componentProps.value.color = "#ff0000";
+      displayAnswerDescription.value = true;
+    }
+  }
+  componentProps.value.options.forEach((option) => {
+    // 如果允许填空的选项被取消勾选，填空内容也清空
+    const inputKey = `${props.componentID}||${option.value}`;
+    if (value !== option.value && datas.value[inputKey]) {
+      delete datas.value[inputKey];
+    }
+  });
+};
+change(datas.value[props.componentID]);
+/**
+ * @description: 清空选项检核
+ * @param event
+ * @param value
+ * @return
+ */
+const clearCheck = (event: any, value: string) => {
+  // 如果点击项目已选中，且允许取消，则取消选中
+  if (componentProps.value.clearable && oldValue === value) {
+    delete datas.value[props.componentID];
+    oldValue = undefined;
+    // 如果允许填空的选项被取消勾选，填空内容也清空
+    const inputKey = `${props.componentID}||${value}`;
+    datas.value[inputKey] && delete datas.value[inputKey];
+    event.preventDefault();
+    return;
+  }
+  oldValue = value;
+};
+</script>

package/src/components/dynamicForm/components/componentType.ts

@@ -0,0 +1,16 @@
+/*
+ * FilePath     : \src\components\dynamicForm\components\componentType.ts
+ * Author       : 苏军志
+ * Date         : 2024-03-04 19:04
+ * LastEditors  : 苏军志
+ * LastEditTime : 2024-03-30 19:12
+ * Description  : 组件集合
+ * CodeIterationRecord:
+ */
+
+import * as baseComponent from "./base/index";
+import * as advancedComponent from "./advanced/index";
+import * as applicationComponent from "./application/index";
+import * as layoutComponent from "./layout/index";
+
+export { baseComponent, advancedComponent, applicationComponent, layoutComponent };

package/src/components/dynamicForm/components/layout/groupLayout.vue

@@ -0,0 +1,103 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\layout\groupLayout.vue
+ * Author       : 苏军志
+ * Date         : 2024-06-14 11:38
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 10:21
+ * Description  : 分组面板(groupLayout)组件渲染器
+ * CodeIterationRecord:
+-->
+
+<template>
+  <view class="group-layout-component px-10 box-border" :style="style">
+    <view
+      v-if="component.props.showLabel"
+      :class="['py-5', { 'fs-20!': onePageItemFlag }]"
+      :style="{
+        color: component.props.color,
+        'font-size': component.props.fontSize + 'px',
+        'font-weight': component.props.isBold ? 'bold' : 'normal'
+      }"
+    >
+      {{ component.props.label }}
+    </view>
+    <component-renderer
+      :components="component.children"
+      :disabled="disabled"
+      :labelPosition="labelPosition"
+      :showDescription="showDescription"
+      :onePageItemFlag="onePageItemFlag"
+      :currentShowIDArray="currentShowIDArray"
+      @validate="(prop:string) => emits('validate', prop)"
+    ></component-renderer>
+  </view>
+</template>
+<script setup lang="ts">
+import componentRenderer from "../../componentRenderer.vue";
+const emits = defineEmits(["validate"]);
+const props = defineProps({
+  /**
+   * 组件ID
+   */
+  componentID: {
+    type: [String, Number],
+    required: true
+  },
+  /**
+   * 组件
+   */
+  component: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 标题位置
+   */
+  labelPosition: {
+    type: String,
+    default: "top"
+  },
+  /**
+   * 是否项目说明/答案解析
+   */
+  showDescription: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 一页一项标记
+   */
+  onePageItemFlag: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 一页一项时的当前显示项目ID集合
+   */
+  currentShowIDArray: {
+    type: Array<String>,
+    default: []
+  }
+});
+const { component, showDescription, onePageItemFlag, currentShowIDArray } = toRefs(props);
+!component.value.children && (component.value.children = []);
+const style = computed(() => {
+  let styles: Record<string, string> = {
+    "background-color": component.value.props.backgroundColor || ""
+  };
+  if (component.value.props.showBorder) {
+    styles["border"] = `${component.value.props.borderWidth}px ${component.value.props.borderStyle} ${component.value.props.borderColor}`;
+  }
+  if (component.value.props.borderRadius) {
+    styles["border-radius"] = `${component.value.props.borderRadius}px`;
+  }
+  return styles;
+});
+</script>

package/src/components/dynamicForm/components/layout/index.ts

@@ -0,0 +1,12 @@
+/*
+ * FilePath     : \src\components\dynamicForm\components\advanced\index.ts
+ * Author       : 苏军志
+ * Date         : 2024-03-04 19:04
+ * LastEditors  : 苏军志
+ * LastEditTime : 2024-07-19 17:35
+ * Description  : 高级组件集合
+ * CodeIterationRecord:
+ */
+
+import groupLayout from "./groupLayout.vue";
+export { groupLayout };