plain-design 1.0.0-beta.102 → 1.0.0-beta.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.102",
+  "version": "1.0.0-beta.104",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/$upload/upload.utils.ts

@@ -2,11 +2,12 @@ import {iHttp} from "../createHttp";
 import {PlainObject} from "plain-utils/utils/event";
 
 export interface iUploadServiceConfig {
-  http: iHttp,
-  action: string,
-  filename: string,
-  prefix?: string,
-  process?: (uploadData: iUploadData) => void | iUploadData | Promise<iUploadData | void>
+  http: iHttp,                                      // 上传的http请求服务对象
+  action: string,                                   // 默认上传路径
+  filename: string,                                 // 上传文件名
+  getFilePathFromResponse: (resp: any) => string,   // 从返回值中获取上传返回的图片路径
+  prefix?: string,                                  // 默认图片路径前缀
+  process?: (uploadData: iUploadData) => void | iUploadData | Promise<iUploadData | void> // 处理请求参数uploadData拦截器
 }
 
 export interface iUploadData {

package/src/packages/components/Cascade/CascadeKeys.tsx

@@ -0,0 +1,158 @@
+import {computed, designComponent, PropType, reactive, useModel} from "plain-design-composition";
+import {CascadeEmitOptions, CascadePropsOptions} from "./cascade.utils";
+import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
+import Cascade from "./index";
+import {omit} from "plain-utils/object/omit";
+import {inheritSlots} from "../../utils/inheritSlots";
+import {PlainObject} from "plain-utils/utils/event";
+
+/**
+ * 用来编辑key可能冲突的级联数据，仅支持单选不支持多选
+ * @author  韦胜健
+ * @date    2024.8.7 18:43
+ */
+export const CascadeKeys = designComponent({
+  name: 'conflict-cascade',
+  inheritPropsType: Cascade,
+  props: {
+    /*key有冲突的情况下，不支持多选，多选必须保证key为唯一标识不能有冲突，并且singleValueType必须是all*/
+    ...omit(CascadePropsOptions, ['keyField', 'multiple', 'singleValueType', "modelValue"]),
+    /*绑定值一定是数组，可能是nodeData对象数组，也可能是key字符串数组*/
+    modelValue: { type: Array as PropType<(string | PlainObject)[]> },
+    /*keyField一定要存在*/
+    keyField: { type: [String, Function] as PropType<string | ((nodeData: any) => string)>, required: true },
+    /*值类型设置，为true则表明绑定值modelValue为字符串数组，否则为object对象数组*/
+    useKeysValue: { type: Boolean },
+  },
+  emits: CascadeEmitOptions,
+  scopeSlots: {
+    ...TreeScopeSlotsOption,
+  },
+  setup({ props, scopeSlots, event: { emit } }) {
+
+    const dataModel = useModel(() => props.data, emit.onUpdateData);
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const utils = reactive({
+      getDataLabel: computed((): iUseCascadeDataPropsLabelFunction => {
+        const { labelField } = props;
+        return typeof labelField === "function" ? labelField : ((nodeData) => (nodeData as any)[labelField]);
+      }),
+      getDataKey: computed((): iUseCascadeDataPropsValFunction => {
+        const { keyField } = props;
+        return typeof keyField === "function" ? keyField : ((nodeData) => (nodeData as any)[keyField]);
+      }),
+      getDataChildren: computed((): iUseCascadeDataPropsChildrenFunction => {
+        const { childrenField } = props;
+        return typeof childrenField === "function" ? childrenField : ((nodeData) => (nodeData as any)[childrenField]);
+      }),
+      formatData2CascadeData: (nodeData: any, getParent: iCascadeWrapData['getParent'] = (() => undefined)): iCascadeWrapData => {
+        const label = utils.getDataLabel(nodeData);
+        const key = utils.getDataKey(nodeData);
+        const children = utils.getDataChildren(nodeData);
+        const keys: string[] = [...getParent()?.keys || [], key];
+        const ret: iCascadeWrapData = { label, key, nodeData, getParent, keys, keyString: keys.join('.') };
+        if (!!children) {
+          const formatChildren = children.map(child => utils.formatData2CascadeData(child, () => ret));
+          ret.children = formatChildren;
+        }
+        return ret;
+      },
+    });
+
+    const cascadeData = computed((): iCascadeWrapData[] | undefined => props.data?.map(item => utils.formatData2CascadeData(item)));
+
+    const cascadeModelValue = computed((): iCascadeWrapData[] | undefined => {
+      if (!model.value?.length) {return undefined;}
+      const modelValueList = [...model.value];
+      const ret: iCascadeWrapData[] = [];
+
+      let list = cascadeData.value;
+      let itemModelValue = modelValueList.shift();
+      while (itemModelValue && !!list?.length) {
+        const itemModelValueKey = props.useKeysValue ? itemModelValue : utils.getDataKey(itemModelValue);
+        const matchItem = list.find(i => i.key == itemModelValueKey);
+        if (!!matchItem) {
+          ret.push(matchItem);
+          list = matchItem.children || [];
+          itemModelValue = modelValueList.shift();
+        } else {
+          break;
+        }
+      }
+
+      return ret;
+    });
+
+    const handler = {
+      onUpdateData: (newData: iCascadeWrapData[] | undefined | null) => {
+        if (!newData) {dataModel.value = newData;}
+        dataModel.value = cascadeData.value?.map(itemData => itemData.nodeData);
+      },
+      onUpdateModelValue: (val: iCascadeWrapData[] | null | undefined) => {
+        model.value = props.useKeysValue ?
+          val?.map(i => i.key) :
+          val?.map(i => i.nodeData);
+      },
+      setChildrenData: (cascadeWrapData: iCascadeWrapData, childrenData: any[] | null | undefined) => {
+        const { childrenField, setChildrenData } = props;
+        if (typeof childrenField === "string") {
+          (cascadeWrapData.nodeData as any)[childrenField] = childrenData;
+        } else {
+          if (!!setChildrenData) {
+            setChildrenData(cascadeWrapData.nodeData, childrenData);
+          } else {
+            throw new Error('tree: props.setChildrenData is required when childrenField is function');
+          }
+        }
+      },
+      isCheckAble: (cascadeWrapData: iCascadeWrapData) => {return props.isCheckAble!(cascadeWrapData.nodeData);},
+      isLeaf: (cascadeWrapData: iCascadeWrapData) => {return props.isLeaf!(cascadeWrapData.nodeData);},
+      filterMethod: (cascadeWrapData: iCascadeWrapData, filterText: string) => {return props.filterMethod!(cascadeWrapData.nodeData, filterText);},
+    };
+
+    const cascadeAttrs = computed(() => {
+      const { useKeysValue, ..._props } = props;
+      return {
+        ..._props,
+        data: cascadeData.value,
+        onUpdateData: handler.onUpdateData,
+        modelValue: cascadeModelValue.value,
+        onUpdateModelValue: handler.onUpdateModelValue,
+
+        setChildrenData: !props.setChildrenData ? undefined : handler.setChildrenData,
+        isCheckAble: !props.isCheckAble ? undefined : handler.isCheckAble,
+        isLeaf: !props.isLeaf ? undefined : handler.isLeaf,
+        filterMethod: !props.filterMethod ? undefined : handler.filterMethod,
+
+        labelField: "label",
+        keyField: "keyString",
+        childrenField: "children",
+        singleValueType: "all" as const,
+      };
+    });
+
+    return () => (
+      <Cascade{...cascadeAttrs.value} v-slots={inheritSlots({ scopeSlots })}/>
+    );
+  },
+});
+
+
+interface iCascadeWrapData {
+  label: string,
+  key: string,
+  children?: iCascadeWrapData[],
+
+  keys: string[],
+  keyString: string,
+  nodeData: any,
+  getParent: () => iCascadeWrapData | undefined,
+}
+
+interface iUseCascadeDataPropsLabelFunction {(nodeData: any): string;}
+
+interface iUseCascadeDataPropsValFunction {(nodeData: any): string;}
+
+interface iUseCascadeDataPropsChildrenFunction {(nodeData: any): any[] | undefined | null;}

package/src/packages/components/CascadeKeys/index.tsx

@@ -0,0 +1,5 @@
+import {CascadeKeys} from "../Cascade/CascadeKeys";
+
+export {CascadeKeys};
+
+export default CascadeKeys;

package/src/packages/components/Image/index.tsx

@@ -100,6 +100,7 @@ export const Image = designComponent({
         emit.onSuccess(state.src!);
       };
       image.onerror = (e) => {
+        console.error(`load image error: ${image.src}`, e, props.urlPrefix);
         state.status = eImageStatus.error;
         emit.onError(e);
       };

package/src/packages/components/ImageUploader/index.tsx

@@ -12,6 +12,7 @@ import {$file, FileServiceDefaultAccept, FileServiceUploadConfig} from "../$file
 import $configuration from "../$configuration";
 import {iUploadService} from "../$upload/createUploadService";
 import i18n from "../i18n";
+import {iUploadServiceConfig} from "../$upload/upload.utils";
 
 /**
  * ImageUploader的状态
@@ -40,17 +41,21 @@ export const ImageUploader = designComponent({
     handleDelete: { type: Function as PropType<() => void | Promise<void>> },                 // 自定义删除图片逻辑
     handleUpload: { type: Function as PropType<(file: File) => void | Promise<void>> },       // 自定义上传图片逻辑
     handlePreview: { type: Function as PropType<(url?: string) => void> },                    // 自定义预览逻辑
-    urlPrefix: { type: String },
-    service: { type: Object as PropType<iUploadService> },
+    urlPrefix: { type: String },                                                              // 图片路径前缀
+    service: { type: Object as PropType<iUploadService> },                                    // 文件上传服务
+    emitBase64: { type: Boolean },                                                            // 当选择文件之后，是否将 base64 值更新到绑定值
+    getFilePathFromResponse: { type: Function as PropType<iUploadServiceConfig['getFilePathFromResponse']> },// 从上传结果中获取图片访问地址
   },
   inheritPropsType: HTMLDivElement,
   emits: {
     onUpdateModelValue: (val?: string) => true,
     onLoadSuccess: (url: string) => true,
     onLoadError: (e: string | Event) => true,
+    onLoadComplete: () => true,
     onUploadSuccess: (resp: PlainObject | string) => true,
     onUploadProgress: (percent: number, e: ProgressEvent) => true,
     onUploadFail: (e: any) => true,
+    onUploadComplete: () => true,
   },
   setup({ props, event: { emit } }) {
 
@@ -59,7 +64,8 @@ export const ImageUploader = designComponent({
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
 
     const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { autoWatch: false });
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
 
     const { editComputed } = useEdit();
 
@@ -70,7 +76,6 @@ export const ImageUploader = designComponent({
     });
 
     watch(() => props.modelValue, val => {
-      model.value = Image.formatImagePath(val, urlPrefix.value);
       state.chooseBase64 = undefined;
       if (!model.value) {
         return state.status = eImageUploaderStatus.empty;
@@ -80,12 +85,14 @@ export const ImageUploader = designComponent({
       image.onload = () => {
         state.status = eImageUploaderStatus.success;
         emit.onLoadSuccess(model.value!);
+        emit.onLoadComplete();
       };
       image.onerror = (e) => {
         state.status = eImageUploaderStatus.error;
         emit.onLoadError(e);
+        emit.onLoadComplete();
       };
-      image.src = model.value;
+      image.src = Image.formatImagePath(val, urlPrefix.value);
     }, { immediate: true });
 
     const classes = useClasses(() => [
@@ -125,10 +132,16 @@ export const ImageUploader = designComponent({
             onSuccess: (resp) => {
               if (!!config?.onSuccess) config.onSuccess(resp);
               console.log('upload success, resp:', resp);
-              model.value = String(state.chooseBase64);
+              // model.value = String(state.chooseBase64);
+              const getFilePathFromResponse: iUploadServiceConfig['getFilePathFromResponse'] | undefined =
+                props.getFilePathFromResponse ||
+                upload?.config.getFilePathFromResponse;
+
+              model.value = getFilePathFromResponse?.(resp);
               state.chooseBase64 = undefined;
               state.status = eImageUploaderStatus.success;
               emit.onUploadSuccess(resp);
+              emit.onUploadComplete();
               dfd.resolve(resp);
             },
             onError: (e) => {
@@ -136,6 +149,7 @@ export const ImageUploader = designComponent({
               console.log('upload fail, e:', e);
               state.status = eImageUploaderStatus.fail;
               emit.onUploadFail(e);
+              emit.onUploadComplete();
               dfd.reject(e);
             },
           };
@@ -181,10 +195,12 @@ export const ImageUploader = designComponent({
     };
 
     const imageAttrs = computed(() => {
-      return Object.keys(ImagePropsOptions).reduce((prev, key) => {
+      const ret = Object.keys(ImagePropsOptions).reduce((prev, key) => {
         prev[key] = (props as any)[key];
         return prev;
       }, {} as any);
+      ret.urlPrefix = urlPrefix.value;
+      return ret;
     });
 
     return {

package/src/packages/components/InputNumber/number.scss

@@ -30,6 +30,7 @@
   &.number-button-type-right {
     .number-button-container {
       display: flex;
+      color: plv(text-2);
       flex-direction: column;
       align-items: stretch;
       justify-content: center;

package/src/packages/components/TreeCore/createTreeNode.tsx

@@ -53,11 +53,11 @@ export function createTreeNode(
   /*设置子节点数据*/
   const setChildrenData = (childrenData: any[] | null | undefined) => {
     const { childrenField, setChildrenData } = props;
-    if (typeof childrenField === "string") {
-      (data as any)[childrenField] = childrenData;
+    if (!!setChildrenData) {
+      setChildrenData(data, childrenData);
     } else {
-      if (!!setChildrenData) {
-        setChildrenData(data, childrenData);
+      if (typeof childrenField === "string") {
+        (data as any)[childrenField] = childrenData;
       } else {
         throw new Error('tree: props.setChildrenData is required when childrenField is function');
       }

package/src/packages/entry.tsx

@@ -66,6 +66,7 @@ export {SelectGroup} from './components/SelectGroup';
 export {Form} from './components/Form';
 export {FormItem} from './components/FormItem';
 export {Cascade} from './components/Cascade';
+export {CascadeKeys} from './components/CascadeKeys';
 export {Image} from './components/Image';
 export {Tooltip} from './components/Tooltip';
 export {useImage} from './components/useImage';

package/src/packages/utils/inheritSlots.ts

@@ -24,5 +24,7 @@ export function inheritSlots<
   !!slots && Object.keys(slots).forEach((k: keyof Slots) => {if (slots[k].isExist()) {ret[k] = () => slots[k]();}});
   !!scopeSlots && Object.keys(scopeSlots).forEach((k: keyof ScopeSlots) => {if (scopeSlots[k].isExist()) {ret[k] = (...args: any[]) => scopeSlots[k](...args);}});
 
+  if (!Object.keys(ret).length) {return undefined;}
+
   return ret;
 }