p-pc-ui 1.3.12 → 1.3.14

package/dist/components/p-button-rounded/p-button-rounded.vue

@@ -60,7 +60,7 @@ const btnClick = useDebounceFn(async () => {
 
   <a-tooltip color="var(--secondary-color-light)" :overlayInnerStyle="{ color: '#fff' }" :title="tooltip"
     v-bind="$attrs">
-    <a-button @click="btnClick" @keydown.enter.prevent="btnClick" :loading="loading || builtInLoading" class="font-semibold"
+    <a-button @click="btnClick" :loading="loading || builtInLoading" class="font-semibold"
       :class="disabled ? 'cursor-not-allowed' : 'hover:opacity-80 active:opacity-100'" :style="{
         background: disabled ? '#b5b5b5' : bgColor,
         color: disabled ? '#fff' : color,

package/dist/components/p-form/form-utils.ts

@@ -0,0 +1,167 @@
+import type { FormDataItem } from "./index";
+import * as _ from "../../utils/dataUtils";
+
+export type FormRenderItem = FormDataItem & {
+  rawKey: string;
+  rules: any[];
+  optionList?: any[];
+};
+
+export const toFormKey = (key: string) => key.replaceAll(".", "__");
+
+export const toRawKey = (key: string) => key.replaceAll("__", ".");
+
+export const createFormRules = (renderItem: FormDataItem) => {
+  let { fieldType, fieldRules, label } = renderItem;
+  const rules: any[] = [];
+  const operateType = ["select", "treeSelect", "date", "datePicker"].includes(renderItem.type) ? "选择" : "输入";
+
+  for (const fieldRule of fieldRules || []) {
+    const { msg, required, min, max, regex } = fieldRule;
+
+    if (
+      (renderItem.type === "uploadOss" || renderItem.type === "uploadTos" || renderItem.type === "upload") &&
+      renderItem.fieldType === "string"
+    ) {
+      fieldType = "array";
+    }
+
+    if (required) {
+      rules.push({
+        type: renderItem.type === "uploadOss" || renderItem.type === "uploadTos" ? "array" : renderItem.fieldType,
+        required: true,
+        message: msg || `请${operateType}${label}`,
+        trigger: ["blur", "change"],
+      });
+    }
+
+    if (min) {
+      rules.push({
+        type: fieldType,
+        min,
+        message: msg || `${label}需大于等于${min}${fieldType === "string" ? "个字符" : ""}`,
+        trigger: ["blur", "change"],
+      });
+    }
+
+    if (max) {
+      rules.push({
+        type: fieldType,
+        max,
+        message: `${label}需小于等于${max}${fieldType === "string" ? "个字符" : ""}`,
+        trigger: ["blur", "change"],
+      });
+    }
+
+    if (regex) {
+      rules.push({
+        type: fieldType,
+        pattern: regex,
+        message: msg || `${label}格式错误`,
+        trigger: ["blur", "change"],
+      });
+    }
+  }
+
+  return rules;
+};
+
+export const getMapOptionList = (mapInfo: any, mapPath?: string[]) => {
+  if (!mapPath) return undefined;
+  const mapItem = _.get(mapInfo || {}, mapPath);
+  if (!mapItem) return undefined;
+
+  return Object.keys(mapItem).map((key) => ({
+    label: mapItem[key],
+    value: key,
+  }));
+};
+
+export const normalizeFormRenderData = (renderData: FormDataItem[], mapInfo: any = {}) => {
+  return renderData.map((item) => {
+    const rawKey = item.key;
+    const optionList = "optionList" in item && Array.isArray(item.optionList) ? [...item.optionList] : undefined;
+    const mapOptionList =
+      item.type === "select" || item.type === "treeSelect" || item.type === "radio"
+        ? getMapOptionList(mapInfo, item.mapPath)
+        : undefined;
+
+    return {
+      ...item,
+      rawKey,
+      key: toFormKey(rawKey),
+      rules: createFormRules(item),
+      ...(optionList || mapOptionList ? { optionList: mapOptionList || optionList || [] } : {}),
+    } as FormRenderItem;
+  });
+};
+
+export const getInitialFormValue = (renderItem: FormRenderItem, initFormData: Record<string, any> = {}) => {
+  if (renderItem.default !== undefined) {
+    return renderItem.default;
+  }
+
+  let initValue = _.get(initFormData, renderItem.rawKey);
+
+  if (initValue === undefined) {
+    switch (renderItem.fieldType) {
+      case "array":
+        initValue = [];
+        break;
+      case "string":
+        initValue =
+          renderItem.type === "uploadOss" || renderItem.type === "uploadTos" || renderItem.type === "upload" ? [] : "";
+        break;
+      case "number":
+        initValue = 0;
+        break;
+      case "date":
+        initValue = "";
+        break;
+      default:
+        initValue = undefined;
+        break;
+    }
+  }
+
+  if (renderItem.type === "select" || renderItem.type === "treeSelect" || renderItem.type === "radio") {
+    if (!Array.isArray(renderItem.optionList)) {
+      renderItem.optionList = [];
+    }
+
+    if (renderItem.type === "select" && renderItem.isMultiple && !Array.isArray(initValue)) {
+      initValue = [];
+    }
+
+    if ((initValue === undefined || initValue === "") && renderItem.optionList.length > 0) {
+      if (!(renderItem.type === "select" && renderItem.isMultiple)) {
+        const valueKey = renderItem.fieldNames?.value || (renderItem.type === "treeSelect" ? "id" : "value");
+        initValue = renderItem.optionList[0]?.[valueKey];
+      }
+    }
+  } else if (renderItem.type === "uploadOss") {
+    const values = Array.isArray(initValue) ? initValue : initValue ? [initValue] : [];
+    initValue = values.map((val) => ({
+      key: val,
+      url: renderItem.baseOssUrl + val,
+    }));
+  } else if (renderItem.type === "uploadTos") {
+    const values = Array.isArray(initValue) ? initValue : initValue ? [initValue] : [];
+    initValue = values.map((val) => ({
+      key: val,
+      url: renderItem.baseTosUrl + val,
+    }));
+  }
+
+  return initValue;
+};
+
+export const initFormStateFromRenderData = (renderData: FormRenderItem[], initFormData: Record<string, any> = {}) => {
+  const formState: Record<string, any> = {};
+
+  for (const renderItem of renderData) {
+    formState[renderItem.key] = getInitialFormValue(renderItem, initFormData);
+  }
+
+  return formState;
+};