zhytech-ui-mobile 1.0.0 → 1.0.2

package/src/components/dynamicForm/componentRenderer.vue

@@ -0,0 +1,207 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\componentRenderer.vue
+ * Author       : 苏军志
+ * Date         : 2024-03-04 20:56
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 10:44
+ * Description  : 组件渲染器
+ * CodeIterationRecord:
+ -->
+<template>
+  <template v-for="(component, index) in components" :key="index">
+    <!-- 非隐藏项 -->
+    <view
+      v-if="
+        (getByDynamicCondition(component, 'show') && !onePageItemFlag) || (onePageItemFlag && currentShowIDArray.includes(component.id))
+      "
+      class="p-5"
+    >
+      <!-- 容器组件直接显示 且（非一项一页 或 一项一页的当前项）-->
+      <component
+        v-if="component.isLayout"
+        :is="(componentTypes as any)[component.type]"
+        v-model:component="components[index]"
+        :componentID="component.id"
+        :disabled="disabled"
+        :labelPosition="labelPosition"
+        :showDescription="showDescription"
+        :onePageItemFlag="onePageItemFlag"
+        :currentShowIDArray="currentShowIDArray"
+        @validate="(prop:string) => emits('validate', prop)"
+      />
+
+      <wd-cell
+        v-else
+        :custom-class="`zhy form-item form-prop-${component.id}`"
+        :vertical="labelPosition === 'top' || component.props.labelNewLine"
+        :title-width="`${
+          component.props.showLabel && !(labelPosition === 'top' || component.props.labelNewLine) ? component.props.labelWidth : ''
+        }px`"
+        :prop="component.id"
+        :rules="component.rules"
+      >
+        <template #label>
+          <wd-text
+            custom-class="zhy"
+            :text="component.props.showLabel ? component.props.label + '：' : ''"
+            :size="`${onePageItemFlag ? 18 : component.props.fontSize > 14 ? component.props.fontSize : 14}px`"
+            :bold="component.props.isBold"
+            :color="component.props.color || '#000000'"
+          ></wd-text>
+        </template>
+        <component
+          :class="{ 'sons-html-*:fs-18!': onePageItemFlag }"
+          :is="(componentTypes as any)[component.type]"
+          v-model:componentProps="component.props"
+          v-model:datas="formData.datas"
+          :componentID="component.id"
+          :disabled="disabled || getByDynamicCondition(component, 'disabled')"
+          :readonly="getByDynamicCondition(component, 'readonly')"
+          :showDescription="showDescription"
+          :key="setValidateWatch(component.id, formData.datas[component.id])"
+        />
+      </wd-cell>
+    </view>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { baseComponent, advancedComponent, applicationComponent, layoutComponent } from "./components/componentType";
+import type { dynamicFormData, formAttribute } from "./types/formAttribute";
+const componentTypes: Record<string, any> = { ...baseComponent, ...advancedComponent, ...applicationComponent, ...layoutComponent };
+const { computedExpression } = useUtils();
+const props = defineProps({
+  /**
+   * 组件
+   */
+  components: {
+    type: Array as PropType<Record<string, any>[]>,
+    required: true
+  },
+  /**
+   * 标题位置
+   */
+  labelPosition: {
+    type: String,
+    default: "top"
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否显示组件说明
+   */
+  showDescription: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 一页一项标记
+   */
+  onePageItemFlag: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 一页一项时的当前显示项目ID集合
+   */
+  currentShowIDArray: {
+    type: Array<String>,
+    default: []
+  }
+});
+const { components, showDescription, onePageItemFlag, currentShowIDArray } = toRefs(props);
+// 获取父组件中的变量
+let formData = inject("formData") as Ref<dynamicFormData<formAttribute>>;
+// 动态条件处理方式，后续迭代只需在此对象中添加属性即可
+const dynamicConditionType: Record<string, Function> = {
+  // 显示动态条件
+  show: (componentProp: Record<string, any>) => {
+    if (componentProp.showFlag === undefined) {
+      return String(true);
+    }
+    let condition = "";
+    if (componentProp.showFlag) {
+      condition = componentProp.hiddenConditionExpression
+        ? `!(${componentProp.hiddenConditionExpression})`
+        : String(componentProp.showFlag);
+    } else {
+      condition = componentProp.showConditionExpression || String(componentProp.showFlag);
+    }
+    return condition;
+  },
+  // 禁用动态条件
+  disabled: (componentProp: Record<string, any>) => {
+    return componentProp.disabledConditionExpression || String(componentProp.disabled === undefined ? false : componentProp.disabled);
+  },
+  // 只读动态条件
+  readonly: (componentProp: Record<string, any>) => {
+    return componentProp.readonlyConditionExpression || String(componentProp.readonly === undefined ? false : componentProp.readonly);
+  }
+};
+/**
+ * @description: 动态条件计算
+ * @param component 组件
+ * @param propType 组件属性名称
+ * @return
+ */
+const getByDynamicCondition = (component: Record<string, any>, propType: string) => {
+  let condition = dynamicConditionType[propType](component.props);
+  if (!condition) {
+    return undefined;
+  }
+  if (!["true", "false"].includes(condition)) {
+    const idTemplates = condition.match(/{(.*?)}/g);
+    idTemplates.forEach((idTemplate: string) => {
+      const id = idTemplate.replace(/\{|}/g, "");
+      let value = formData.value.datas[id];
+      // 找到目标组件
+      const paramComponent = components.value.find((paramComponent) => paramComponent.id === id);
+      if (paramComponent?.type === "grade") {
+        value = formData.value.datas[id]?.score;
+      }
+      condition = condition.replace(idTemplate, value || "");
+    });
+  }
+  const result = computedExpression(condition);
+  // 如果此组件满足隐藏条件，且有值，则清空值
+  if (propType === "show" && !result) {
+    let components: Record<string, any>[] = [];
+    // 如果是布局组件 循环子组件 删除值
+    if (component.isLayout && component.children?.length) {
+      components = component.children;
+    } else {
+      components = [component];
+    }
+    components.forEach((tempComponent) => {
+      if (!formData.value.datas[tempComponent.id]) {
+        return;
+      }
+      if (tempComponent.type === "grade") {
+        delete formData.value.datas[tempComponent.id].score;
+      } else {
+        delete formData.value.datas[tempComponent.id];
+      }
+    });
+  }
+  return result;
+};
+
+// #region form表单验证
+const watchID = ref<string>();
+const watchData = ref<any>();
+const setValidateWatch = (id: string, data: any) => {
+  watchID.value = id;
+  watchData.value = data;
+  return id;
+};
+const emits = defineEmits(["validate"]);
+watch(watchData, () => {
+  emits("validate", watchID.value);
+});
+// #endregion
+</script>

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

@@ -0,0 +1,13 @@
+/*
+ * FilePath     : \src\components\dynamicForm\components\advanced\index.ts
+ * Author       : 苏军志
+ * Date         : 2024-03-04 19:04
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-08-24 19:30
+ * Description  : 高级组件集合
+ * CodeIterationRecord:
+ */
+
+import upload from "./upload.vue";
+import uploadImage from "./uploadImage.vue";
+export { upload, uploadImage };

package/src/components/dynamicForm/components/advanced/upload.vue

@@ -0,0 +1,108 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\advanced\upload.vue
+ * Author       : 苏军志
+ * Date         : 2024-07-16 10:29
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 08:48
+ * Description  : 文件上传(upload)组件渲染器
+ * CodeIterationRecord:
+ -->
+<template>
+  <div class="zhy-form-component-upload">
+    <wd-upload
+      ref="upload"
+      :file-list="fileList"
+      :action="uploadOptions.serverApi"
+      :multiple="componentProps.multiple"
+      :limit="componentProps.fileLimit"
+      :auto-upload="uploadOptions?.autoUpload"
+      :extension="componentProps.fileType?.split(',')"
+      accept="all"
+      :before-upload="beforeUpload"
+      :before-remove="beforeRemove"
+    >
+      <wd-button>上传文件</wd-button>
+    </wd-upload>
+    <view
+      v-if="showDescription && (formTypeEnum.Examination || componentProps.description)"
+      class="dynamic-form-item-description show-description"
+    >
+      <wd-icon custom-class="description-tip" class-prefix="iconfont zhy" name="tip" color="#ff0000" />
+      {{ `${formType === formTypeEnum.Form ? "项目说明" : "答案解析"}：${componentProps.description || "无"}` }}
+    </view>
+    <!-- message消息的挂载点。 -->
+    <wd-message-box></wd-message-box>
+  </div>
+</template>
+<script setup lang="ts">
+import { formTypeEnum } from "../../types/enum";
+import type { baseAttribute, uploadAttribute } from "../../types/componentAttribute/index";
+import type { uploadOption } from "../../types/uploadOption";
+type componentType = baseAttribute & uploadAttribute;
+const props = defineProps({
+  /**
+   * 组件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 { checkFile } = useUtils();
+const upload = ref<any>();
+// 获取父组件中的变量
+const uploadOptions = inject("uploadOptions") as uploadOption;
+const { datas, componentProps } = toRefs(props);
+const fileList = ref<Record<string, any>[]>(datas.value[props.componentID] ?? []);
+
+const { confirm } = useMessage();
+// 因为wd-upload组件的change事件无法正确触发，使用before-remove和before-upload钩子做处理
+const beforeRemove = ({ file, resolve }: any) => {
+  confirm("确定删除该文件吗？", "提示", (flag: boolean) => {
+    if (flag) {
+      datas.value[props.componentID] = datas.value[props.componentID].filter((item: any) => item.name !== file.name);
+    }
+    resolve(flag);
+  });
+};
+const beforeUpload = ({ files, fileList, resolve }: any) => {
+  let errorNumber = 0;
+  files.forEach((file: any) => {
+    const checkPass = checkFile(file, fileList, componentProps.value.fileSize, componentProps.value.fileSizeUnit, false);
+    if (!checkPass) {
+      errorNumber++;
+    }
+  });
+  if (errorNumber === 0) {
+    if (!datas.value[props.componentID]) {
+      datas.value[props.componentID] = [];
+    }
+    datas.value[props.componentID] = [...datas.value[props.componentID], ...files];
+    resolve(true);
+  }
+  resolve(false);
+};
+</script>

package/src/components/dynamicForm/components/advanced/uploadImage.vue

@@ -0,0 +1,107 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\advanced\uploadImage.vue
+ * Author       : 苏军志
+ * Date         : 2024-07-16 10:29
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-03 17:01
+ * Description  : 图片上传(uploadImage)组件渲染器
+ * CodeIterationRecord:
+ -->
+<template>
+  <div class="zhy-form-component-upload-image">
+    <wd-upload
+      ref="upload"
+      :file-list="fileList"
+      :action="uploadOptions.serverApi"
+      :multiple="componentProps.multiple"
+      :limit="componentProps.fileLimit"
+      :auto-upload="uploadOptions?.autoUpload"
+      :extension="componentProps.fileType?.split(',')"
+      accept="media"
+      :before-upload="beforeUpload"
+      :before-remove="beforeRemove"
+    >
+    </wd-upload>
+    <view
+      v-if="showDescription && (formTypeEnum.Examination || componentProps.description)"
+      class="dynamic-form-item-description show-description"
+    >
+      <wd-icon custom-class="description-tip" class-prefix="iconfont zhy" name="tip" color="#ff0000" />
+      {{ `${formType === formTypeEnum.Form ? "项目说明" : "答案解析"}：${componentProps.description || "无"}` }}
+    </view>
+    <!-- message消息的挂载点。 -->
+    <wd-message-box></wd-message-box>
+  </div>
+</template>
+<script setup lang="ts">
+import { formTypeEnum } from "../../types/enum";
+import type { baseAttribute, uploadAttribute } from "../../types/componentAttribute/index";
+import type { uploadOption } from "../../types/uploadOption";
+type componentType = baseAttribute & uploadAttribute;
+const props = defineProps({
+  /**
+   * 组件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 { checkFile } = useUtils();
+const upload = ref<any>();
+// 获取父组件中的变量
+const uploadOptions = inject("uploadOptions") as uploadOption;
+const { datas, componentProps } = toRefs(props);
+const fileList = ref<Record<string, any>[]>(datas.value[props.componentID] ?? []);
+
+const { confirm } = useMessage();
+// 因为wd-upload组件的change事件无法正确触发，使用before-remove和before-upload钩子做处理
+const beforeRemove = ({ file, resolve }: any) => {
+  confirm("确定删除该文件吗？", "提示", (flag: boolean) => {
+    if (flag) {
+      datas.value[props.componentID] = datas.value[props.componentID].filter((item: any) => item.name !== file.name);
+    }
+    resolve(flag);
+  });
+};
+const beforeUpload = ({ files, fileList, resolve }: any) => {
+  let errorNumber = 0;
+  files.forEach((file: any) => {
+    const checkPass = checkFile(file, fileList, componentProps.value.fileSize, componentProps.value.fileSizeUnit, false);
+    if (!checkPass) {
+      errorNumber++;
+    }
+  });
+  if (errorNumber === 0) {
+    if (!datas.value[props.componentID]) {
+      datas.value[props.componentID] = [];
+    }
+    datas.value[props.componentID] = [...datas.value[props.componentID], ...files];
+    resolve(true);
+  }
+  resolve(false);
+};
+</script>

package/src/components/dynamicForm/components/answerSheetPopup/answerSheetItem.vue

@@ -0,0 +1,58 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\answerSheetPopup\answerSheetItem.vue
+ * Author       : 苏军志
+ * Date         : 2025-05-15 09:30
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-04 19:27
+ * Description  : 答题卡项
+ * CodeIterationRecord:
+ -->
+<template>
+  <view class="answer-sheet-item w-full">
+    <template v-for="(answerSheet, index) in answerSheetData" :key="index">
+      <view class="aline-left pl-10 my-15 b-1-#cccccc first:mt-5" v-if="answerSheet.children?.length">
+        <view class="w-full fs-16 mt-4">{{ answerSheet.name }}</view>
+        <template v-for="(item, index) in answerSheet.children" :key="index">
+          <answer-sheet-item
+            v-if="item.children?.length"
+            :answerSheetData="item.children"
+            :tagType="tagType"
+            @showItem="showItem"
+          ></answer-sheet-item>
+          <template v-else>
+            <wd-tag
+              v-if="tagType[item.status]?.value"
+              custom-class="my-10! mx-5! py-2! px-18! fs-18!"
+              :type="tagType[item.status]?.value"
+              @click="showItem(item.id)"
+            >
+              {{ item.name }}
+            </wd-tag>
+            <wd-tag v-else custom-class="my-10! mx-5! py-2! px-18! fs-18!" @click="showItem(item.id)">
+              {{ item.name }}
+            </wd-tag>
+          </template>
+        </template>
+      </view>
+    </template>
+  </view>
+</template>
+<script setup lang="ts">
+defineProps({
+  /**
+   * 组件
+   */
+  answerSheetData: {
+    type: Array as PropType<Record<string, any>[]>,
+    required: true
+  },
+  tagType: {
+    type: Object as PropType<Record<number, any>>,
+    required: true
+  }
+});
+const emits = defineEmits(["showItem"]);
+const showItem = (id: string) => {
+  emits("showItem", id);
+};
+</script>

package/src/components/dynamicForm/components/answerSheetPopup/index.vue

@@ -0,0 +1,111 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\answerSheetPopup\index.vue
+ * Author       : 苏军志
+ * Date         : 2025-05-15 10:11
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-04 19:47
+ * Description  : 答题卡
+ * CodeIterationRecord:
+ -->
+<template>
+  <wd-action-sheet custom-class="zhy answer-sheet-popup" v-model="show" title="答题卡">
+    <view class="y-aline-start overflow-y-auto h-[calc(100%-50px)]">
+      <view class="my-10 ml-20 mr-0 fs-16 fw-bold">
+        <text>说明：</text>
+        <template v-for="(type, index) in Object.values(tagType)" :key="index">
+          <wd-tag v-if="type.value" custom-class="zhy mr-10! py-4! px-10!" :type="type.value"> {{ type.label }} </wd-tag>
+          <wd-tag v-else custom-class="zhy mr-10! py-4! px-10!"> {{ type.label }} </wd-tag>
+        </template>
+      </view>
+      <view class="flex-auto h-full overflow-y-auto px-10 box-border">
+        <answer-sheet-item :answerSheetData="answerSheetData" :tagType="tagType" @showItem="showItem"></answer-sheet-item>
+      </view>
+    </view>
+  </wd-action-sheet>
+</template>
+<script setup lang="ts">
+import type { dynamicFormData, formAttribute } from "../../types/formAttribute";
+import answerSheetItem from "./answerSheetItem.vue";
+const props = defineProps({
+  /**
+   * @description: 表单数据，包含表单属性，组件集合、初始数据
+   */
+  formData: {
+    type: Object as PropType<dynamicFormData<formAttribute>>,
+    required: true
+  },
+  /**
+   * @description: 是否显示正确与否
+   */
+  showCorrectOrNot: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description: 弹出框高度
+   */
+  height: {
+    type: String,
+    default: "360px"
+  }
+});
+const show = ref<boolean>(true);
+const answerSheetData = ref<Record<string, any>[]>([]);
+const tagType = ref<Record<number, any>>({});
+onMounted(() => {
+  tagType.value = {
+    1: { value: "", label: "未作答" },
+    2: { value: "success", label: "已作答" }
+  };
+  if (props.showCorrectOrNot) {
+    tagType.value[2].label = "正确";
+    tagType.value[3] = { value: "danger", label: "错误" };
+  }
+  answerSheetData.value = getAnswerSheetData(props.formData.components);
+});
+import { componentTypeEnum } from "../../types/enum";
+/**
+ * @description: 获取答题卡数据
+ * @param components
+ * @param any
+ * @return
+ */
+const getAnswerSheetData = (components: Record<string, any>[]) => {
+  let result: Record<string, any>[] = [];
+  let index = 1;
+  components.forEach((component) => {
+    if (component.type === componentTypeEnum.LABEL) {
+      return;
+    }
+    let status: number = 0;
+    if (props.showCorrectOrNot) {
+      status = !props.formData.datas[component.id] ? 1 : component.props.examinationStatus;
+    } else {
+      status = !props.formData.datas[component.id] ? 1 : 2;
+    }
+    const data: Record<string, any> = {
+      id: component.id,
+      name: index,
+      status
+    };
+    // 递归处理子组件
+    if (component.isLayout && component.children?.length) {
+      data.name = component.props.label.replace(/（[^）]*）/g, "");
+      data.children = getAnswerSheetData(component.children);
+    }
+    result.push(data);
+    index++;
+  });
+  return result;
+};
+const emits = defineEmits(["showItem"]);
+const showItem = (id: string) => {
+  show.value = false;
+  emits("showItem", id);
+};
+</script>
+<style lang="scss">
+:deep(.zhy.answer-sheet-popup) {
+  height: v-bind(height);
+}
+</style>