zhytech-ui-mobile 1.0.0 → 1.0.2

package/src/components/dynamicForm/formRenderer.vue

@@ -0,0 +1,567 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\formRenderer.vue
+ * Author       : 苏军志
+ * Date         : 2024-04-09 09:18
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 20:31
+ * Description  : 动态表单渲染器
+ * CodeIterationRecord:
+-->
+<template>
+  <wd-config-provider :theme-vars="themeVars" class="h-full">
+    <view class="form-renderer y-aline-start h-full -top px-5 bg-#ffffff box-border">
+      <h3 class="mx-5 my-10 text-center c-#000000" v-if="!hiddenTitle && (title || formData.props.formName)">
+        {{ title ?? formData.props.formName }}
+      </h3>
+      <wd-form ref="formRenderer" custom-class="zhy flex-auto h-full overflow-y-auto" :model="formData.datas" :resetOnChange="false">
+        <component-renderer
+          :disabled="disabled"
+          :labelPosition="formData.props.labelPosition ?? 'top'"
+          :components="formData.components"
+          :showDescription="showDescription"
+          :onePageItemFlag="onePageItemFlag"
+          :currentShowIDArray="currentShowIDArray"
+          @validate="validate"
+        ></component-renderer>
+      </wd-form>
+      <view v-if="onePageItemFlag && showOnePageNavButton" class="text-right mb-5 sons-class-wd-button:mr-10!">
+        <wd-button type="primary" @click="switchPageItem('prev')"> 上一题 </wd-button>
+        <wd-button type="success" @click="switchPageItem('next')"> 下一题 </wd-button>
+      </view>
+    </view>
+    <answer-sheet-popup
+      v-if="showAnswerSheetFlag"
+      :showCorrectOrNot="showCorrectOrNot"
+      :formData="formData"
+      @showItem="scrollToField"
+    ></answer-sheet-popup>
+    <!-- toast消息的挂载点。 -->
+    <wd-toast />
+  </wd-config-provider>
+</template>
+<script lang="ts">
+export default {
+  name: "zhy-form-renderer"
+};
+</script>
+<script setup lang="ts">
+import componentRenderer from "./componentRenderer.vue";
+import answerSheetPopup from "./components/answerSheetPopup/index.vue";
+import type { dynamicFormData, formAttribute } from "./types/formAttribute";
+import type { uploadOption } from "./types/uploadOption";
+const { removeEmptyAttribute } = useUtils();
+const formRenderer = ref<any>();
+const showDescription = ref<boolean>(false);
+const props = defineProps({
+  /**
+   * @description: 表单数据，包含表单属性，组件集合、初始数据
+   */
+  formData: {
+    type: Object as PropType<dynamicFormData<formAttribute>>,
+    default: () => {
+      return {
+        components: [],
+        props: {
+          labelPosition: "top",
+          labelWidth: 90,
+          formType: "1"
+        },
+        datas: {}
+      };
+    },
+    required: true
+  },
+  /**
+   * @description: 文件上传配置参数
+   */
+  uploadOptions: {
+    type: Object as PropType<uploadOption>,
+    default: () => {
+      return {
+        serverApi: "",
+        headers: undefined,
+        autoUpload: false,
+        params: undefined
+      } as uploadOption;
+    }
+  },
+  /**
+   * @description: 监视标记
+   */
+  watching: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * 是否隐藏标题
+   */
+  hiddenTitle: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 一页一项标记
+   */
+  onePageItemFlag: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 一页一项时显示切题导航
+   */
+  showOnePageNavButton: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 实时显示答案模式
+   */
+  realTimeDisplayAnswerMode: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 每个项目都显示解析开关
+   */
+  everyItemDisplayAnalysisSwitch: {
+    type: Boolean,
+    default: false
+  }
+});
+const emits = defineEmits(["change", "switchPage"]);
+const { formData, onePageItemFlag } = toRefs(props);
+provide("realTimeDisplayAnswerMode", props.realTimeDisplayAnswerMode);
+provide("everyItemDisplayAnalysisSwitch", props.everyItemDisplayAnalysisSwitch);
+provide("uploadOptions", props.uploadOptions);
+provide("formData", formData);
+provide(
+  "formType",
+  computed(() => formData.value.props.formType)
+);
+watch(formData, () => {
+  initComponents(formData.value.components);
+});
+// 获取主题变量
+const theme = inject("theme", ref({}));
+const themeVars = computed(() => ({ ...theme.value }));
+onMounted(() => initComponents(formData.value.components));
+/**
+ * @description: 初始化表单属性
+ */
+const initComponents = (components: Record<string, any>[]) => {
+  if (components?.length) {
+    components.forEach((component) => {
+      if (component.isLayout && component.children?.length) {
+        component.children.forEach((child: Record<string, any>) => {
+          child.rules = getFormRules(child);
+        });
+      } else {
+        component.rules = getFormRules(component);
+      }
+    });
+    allComponentIdArray.value = getComponentIDArray(formData.value.components);
+    currentShowIDArray.value = allComponentIdArray.value[0];
+  }
+};
+const { isEmpty } = useUtils();
+/**
+ * @description: 获取组件的表单校验规则
+ * @param component 组件
+ * @return
+ */
+const getFormRules = (component: Record<string, any>) => {
+  const componentProps = component.props;
+  let formRules: Record<string, any>[] = [];
+  if (componentProps.required) {
+    let formRule: Record<string, any> = {
+      required: componentProps.required,
+      message: componentProps.requiredMessage || "必填项"
+    };
+    formRule.validator = (value: any, rule: any) => {
+      if (isEmpty(value)) {
+        return Promise.reject(rule.message);
+      }
+      return Promise.resolve();
+    };
+    formRules.push(formRule);
+  }
+  if (componentProps.pattern) {
+    formRules.push({
+      pattern: componentProps.pattern,
+      message: componentProps.patternMessage
+    });
+  }
+  return formRules;
+};
+// #region 获取表单数据
+/**
+ * @description: 获取数据
+ * @return
+ */
+const getDatas = () => {
+  let data: Record<string, any> = removeEmptyAttribute(formData.value.datas);
+  let resultData: Record<string, any>[] = [];
+  let fileList: Record<string, any>[] = [];
+  const componentIDs = Object.keys(data);
+  const result = setLayoutChildrenResultData(formData.value.components, resultData, fileList, componentIDs, data);
+  return result;
+};
+/**
+ * @description: 设置布局组件子组件的返回值-递归
+ * @param components
+ * @param resultData
+ * @param fileList
+ * @param componentIDs
+ * @param data
+ * @param groupID
+ * @param pageID
+ * @return
+ */
+const setLayoutChildrenResultData = (
+  components: Record<string, any>[],
+  resultData: Record<string, any>[],
+  fileList: Record<string, any>[],
+  componentIDs: string[],
+  data: Record<string, any>,
+  groupID?: string,
+  pageID?: string
+) => {
+  let newResultData = resultData;
+  let newFileList = fileList;
+  for (let i = 0; i < components.length; i++) {
+    const component = components[i];
+    if (componentIDs.includes(component.id)) {
+      const newPageID = component.props.pageID || pageID;
+      const result = setDataByComponentType(newResultData, newFileList, component.id, data, component, groupID, newPageID);
+      newResultData = result.resultData;
+      newFileList = result.fileList;
+      continue;
+    }
+    // 如果是布局组件并且有子组件
+    if (component.isLayout && component?.children?.length) {
+      const childGroupID = component.id;
+      // 递归设置子组件的数据
+      const result = setLayoutChildrenResultData(component.children, newResultData, newFileList, componentIDs, data, childGroupID, pageID);
+      newResultData = result.resultData;
+      newFileList = result.fileList;
+    }
+  }
+  return { resultData: newResultData, fileList: newFileList };
+};
+/**
+ * @description: 依据组件类型设置值
+ * @param resultData
+ * @param fileList
+ * @param componentID
+ * @param data
+ * @param component
+ * @param groupID
+ * @param pageID
+ */
+const setDataByComponentType = (
+  resultData: Record<string, any>[],
+  fileList: Record<string, any>[],
+  componentID: string,
+  data: Record<string, any>,
+  component: Record<string, any>,
+  groupID?: string,
+  pageID?: string
+) => {
+  switch (component.type) {
+    case "radio":
+      resultData.push({
+        sourceType: component.itemSourceType,
+        pageID,
+        groupID,
+        parentID: componentID,
+        id: data[componentID],
+        // 可能包含手动录入的备注，通过拼接获取到录入的备注
+        value: data[`${componentID}||${data[componentID]}`] ?? ""
+      });
+      break;
+    case "checkbox":
+      data[componentID]?.forEach((value: any) => {
+        resultData.push({
+          sourceType: component.itemSourceType,
+          pageID,
+          groupID,
+          parentID: componentID,
+          id: value,
+          // 可能包含手动录入的备注，通过拼接获取到录入的备注
+          value: data[`${componentID}||${value}`] ?? ""
+        });
+      });
+      break;
+    case "upload":
+    case "uploadImage":
+      // 如果不是自动上传，这里需要处理
+      if (!props.uploadOptions?.autoUpload && data[componentID]?.length) {
+        // 将文件和ID传到后端 文件保存后 根据componentID反写业务明细表
+        let addFileList: Record<string, any>[] = [];
+        let fileIDs: string[] = [];
+        data[componentID].forEach((file: Record<string, any>) => {
+          file.id = componentID;
+          addFileList.push(file);
+          if (file.fileID) {
+            fileIDs.push(file.fileID);
+          }
+        });
+        fileList.push({
+          sourceType: component.itemSourceType,
+          id: componentID,
+          pageID: component.props.pageID,
+          groupID,
+          fileIDs: fileIDs,
+          files: addFileList
+        });
+      }
+      break;
+    default:
+      resultData.push({
+        sourceType: component.itemSourceType,
+        pageID,
+        groupID,
+        parentID: componentID,
+        id: componentID,
+        value: data[componentID]
+      });
+      break;
+  }
+  return { resultData, fileList };
+};
+
+// 判断是否需要实时回传数据
+if (props.watching) {
+  watch(
+    () => formData.value.datas,
+    () => {
+      const resultData = getDatas();
+      emits("change", resultData.resultData, resultData.fileList);
+    },
+    { immediate: true, deep: true }
+  );
+}
+// #endregion
+
+//#region 一页一项模式逻辑
+const allComponentIdArray = ref<string[][]>([]);
+const currentShowIDArray = ref<string[]>([]);
+/**
+ * @description: 将所有组件转换位数组地址（嵌套）
+ * @param components 组件集合
+ * @return
+ */
+const getComponentIDArray = (components: Record<string, any>[], parentPath?: string[] = []) => {
+  let result: string[][] = [];
+  components.forEach((component) => {
+    const currentPath = [...parentPath, component.id];
+    // 如果是叶子节点（没有子组件或不是布局组件）
+    if (!component.isLayout || !component.children?.length) {
+      result.push(currentPath);
+    }
+    // 递归处理子组件
+    if (component.isLayout && component.children?.length) {
+      const childPaths = getComponentIDArray(component.children, currentPath);
+      result = result.concat(childPaths);
+    }
+  });
+  return result;
+};
+const currentIndex = computed(() => allComponentIdArray.value.indexOf(currentShowIDArray.value));
+/**
+ * @description: 一页一项模式下切换项目
+ * @param type
+ * @param id
+ * @return
+ */
+const switchPageItem = (type: string, id?: string) => {
+  if (!onePageItemFlag.value || !currentShowIDArray.value.length) {
+    return;
+  }
+  if (type === "prev") {
+    if (currentIndex.value > 0) {
+      currentShowIDArray.value = allComponentIdArray.value[currentIndex.value - 1];
+    } else {
+      // showToast("已经是第一题了");
+    }
+  }
+  if (type === "next") {
+    if (currentIndex.value < allComponentIdArray.value.length - 1) {
+      currentShowIDArray.value = allComponentIdArray.value[currentIndex.value + 1];
+    } else {
+      // showToast("已经是最后一题了");
+    }
+  }
+  if (id) {
+    // 直接跳转到指定ID
+    const targetIDArray = allComponentIdArray.value.find((idArray) => idArray.includes(id));
+    if (targetIDArray) {
+      currentShowIDArray.value = targetIDArray;
+    }
+  }
+  // 抛出事件，告诉父组件切换了第几页
+  emits("switchPage", currentIndex.value + 1, allComponentIdArray.value.length);
+  return {
+    currentIndex: currentIndex.value + 1,
+    count: allComponentIdArray.value.length
+  };
+};
+//#endregion
+
+const showAnswerSheetFlag = ref<boolean>(false);
+const showCorrectOrNot = ref<boolean>(false);
+/**
+ * @description: 显示答题卡
+ * @param showCorrectOrNot 显示正确与否
+ */
+const showAnswerSheet = (showCorrectOrNotFlag?: boolean) => {
+  showCorrectOrNot.value = showCorrectOrNotFlag ?? false;
+  showAnswerSheetFlag.value = false;
+  nextTick(() => {
+    showAnswerSheetFlag.value = true;
+  });
+};
+//#region 滚动到指定的字段
+let highlightStyle: HTMLStyleElement | null = null;
+/**
+ * @description: 滚动到指定的DOM元素
+ * @param prop
+ * @return
+ */
+const scrollToFormProp = (prop: string) => {
+  // 查找目标dom元素
+  const element = document.querySelector(`.form-prop-${prop}`);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth", block: "center" });
+    // 添加加高亮效果
+    element.classList.add("highlight");
+    // 如果高亮样式不存在，则添加
+    if (!highlightStyle || !document.head.contains(highlightStyle)) {
+      highlightStyle = document.createElement("style");
+      highlightStyle.innerHTML = `
+      .form-prop-${prop}.highlight {
+        border-color: red;
+        background-color: #ffe6e6;
+      }
+      .form-prop-${prop}.highlight * {
+        background-color: #ffe6e6;
+      }
+    `;
+      document.head.appendChild(highlightStyle);
+    }
+    // 2秒后移除高亮效果
+    setTimeout(() => {
+      if (highlightStyle && document.head.contains(highlightStyle)) {
+        document.head.removeChild(highlightStyle);
+        highlightStyle = null;
+      }
+      element.classList.remove("highlight");
+    }, 2000);
+  }
+};
+/**
+ * @description: 滚动到指定的字段
+ * @param prop
+ * @return
+ */
+const scrollToField = (prop: string) => {
+  // 如果是一页已项模式，特殊处理
+  if (onePageItemFlag.value) {
+    switchPageItem("", prop);
+    return;
+  }
+  scrollToFormProp(prop);
+  if (showAnswerSheetFlag.value) {
+    showAnswerSheetFlag.value = false;
+  }
+};
+//#endregion
+/**
+ * @description: 表单的验证
+ * @param prop 要验证的字段
+ * @return
+ */
+const validate = async (prop?: string) => {
+  let result = await formRenderer.value?.validate(prop);
+  if (!result) {
+    return true;
+  }
+  // 验证不通过，
+  if (!result.valid) {
+    // 指定字段验证不通过，滚动到该字段
+    if (prop) {
+      scrollToField(prop);
+      return;
+    }
+    // 整个表单校验，滚动到第一个检核不通过的的字段
+    const firstErrorProp = result.errors.reduce((prev: any, curr: any) => {
+      const prevIndex = allComponentIdArray.value.findIndex((idArray) => idArray.includes(prev.prop));
+      const currIndex = allComponentIdArray.value.findIndex((idArray) => idArray.includes(curr.prop));
+      return currIndex < prevIndex ? curr : prev;
+    }, result.errors[0])?.prop;
+    scrollToField(firstErrorProp);
+  }
+  return result.valid;
+};
+/**
+ * 向父组件暴漏方法
+ */
+defineExpose({
+  /**
+   * @description: 获取表单数据
+   * @param callback
+   * @return
+   */
+  getDatas,
+  /**
+   * @description: 对整个表单的内容进行验证
+   * @param callback
+   * @return
+   */
+  validate,
+  /**
+   * @description: 对该表单项进行重置，将其值重置为初始值并移除校验结果
+   * @param
+   * @return
+   */
+  resetFields() {
+    nextTick(() => formRenderer.value.reset());
+  },
+  /**
+   * @description: 滚动到指定的字段
+   * @param prop
+   * @return
+   */
+  scrollToField,
+  /**
+   * @description:显示/隐藏 项目说明/答案解析
+   */
+  toggleDescription() {
+    showDescription.value = !showDescription.value;
+  },
+  /**
+   * @description: 一页一项模式下切换项目
+   * @param type
+   * @return
+   */
+  switchPageItem,
+  /**
+   * @description: 显示答题卡
+   */
+  showAnswerSheet
+});
+</script>

package/src/components/dynamicForm/index.ts

@@ -0,0 +1,21 @@
+/*
+ * FilePath     : \src\components\dynamicForm\index.ts
+ * Author       : 苏军志
+ * Date         : 2024-08-25 16:37
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-04 10:43
+ * Description  : 动态表单组件导出
+ * CodeIterationRecord:
+ */
+/* eslint-disable id-match */
+import formRenderer from "./formRenderer.vue";
+import type { dynamicFormData, formAttribute } from "./types/formAttribute";
+import type { uploadOption } from "./types/uploadOption";
+import type { dictionaryData, dictionaryItem } from "./types/formAttribute";
+import type { documentView } from "./types/documentView";
+
+formRenderer.install = function (app: any) {
+  app.component(formRenderer.name, formRenderer);
+};
+export type { dynamicFormData, formAttribute, dictionaryData, dictionaryItem, uploadOption, documentView };
+export { formRenderer };

package/src/components/dynamicForm/types/componentAttribute/advanced/uploadAttribute.ts

@@ -0,0 +1,35 @@
+/*
+ * FilePath     : \src\components\dynamicForm\types\componentAttribute\advanced\uploadAttribute.ts
+ * Author       : 苏军志
+ * Date         : 2024-06-14 11:25
+ * LastEditors  : 苏军志
+ * LastEditTime : 2024-06-14 21:10
+ * Description  : 文件、图片上传(upload、uploadImage)组件属性
+ * CodeIterationRecord:
+ */
+
+/**
+ * @description: 文件、图片上传(upload、uploadImage)组件属性
+ */
+export interface uploadAttribute {
+  /**
+   * fileLimit是否可以多选
+   */
+  multiple: boolean;
+  /**
+   * 文件数量限制
+   */
+  fileLimit: number;
+  /**
+   * 文件类型
+   */
+  fileType: string;
+  /**
+   * 文件大小限制
+   */
+  fileSize: number;
+  /**
+   * 文件大小单位
+   */
+  fileSizeUnit: string;
+}

package/src/components/dynamicForm/types/componentAttribute/application/employeeAttribute.ts

@@ -0,0 +1,42 @@
+/*
+ * FilePath     : \src\components\dynamicForm\types\componentAttribute\application\employeeAttribute.ts
+ * Author       : 苏军志
+ * Date         : 2024-03-04 18:54
+ * LastEditors  : 苏军志
+ * LastEditTime : 2024-06-11 10:59
+ * Description  : 人员(employee)组件属性
+ * CodeIterationRecord:
+ */
+/**
+ * @description: 人员(employee)组件属性
+ */
+export interface employeeAttribute {
+  /**
+   * 部门ID
+   */
+  departmentID: number;
+  /**
+   * 显示类型
+   */
+  type: "radio" | "checkbox" | "selector";
+  /**
+   * displayType!=selector时人员是否换行
+   */
+  newLine: boolean;
+  /**
+   * displayType=checkbox时最少选择个数
+   */
+  min?: number;
+  /**
+   * displayType=checkbox时最多选择个数
+   */
+  max?: number;
+  /**
+   * displayType=selector时是否可以多选
+   */
+  multiple?: boolean;
+  /**
+   * 人员列表
+   */
+  options: Record<string, any>[];
+}