@maketribe/ms-app 3.0.17 → 3.0.19

package/src/components/upload-file/ui/upload-image/upload-image.tsx

@@ -0,0 +1,337 @@
+import {
+  Fragment,
+  Ref,
+  VNode,
+  computed,
+  defineComponent,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import { ElImage, ElTooltip, ElImageViewer } from "element-plus";
+import { MKSvgIcon } from "../../../svg-icon";
+import { MKUploadFile } from "../../upload-file";
+import { uploadImageEmits, uploadImageProps } from "./upload-image-options";
+import { UploadContext } from "../../context";
+
+const MKUploadImageItem = defineComponent({
+  name: "MKUploadImageItem",
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    uploadContext: {
+      type: UploadContext,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue", "view", "delete"],
+  setup(props, { emit }) {
+    const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =
+      ref(null);
+
+    const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);
+
+    const modelValue = computed({
+      get: () => props.modelValue as string,
+      set: (v: string) => {
+        emit("update:modelValue", v);
+      },
+    });
+
+    const handleUpdateModelValue = (v: string) => {
+      modelValue.value = v;
+    };
+
+    const handleClick = (event: MouseEvent) => {
+      event.stopPropagation();
+
+      if (unref(modelValue)) {
+        return;
+      }
+
+      unref(uploadFileInstance)?.handleUpload();
+    };
+
+    const handleView = (event: MouseEvent) => {
+      event.stopPropagation();
+
+      emit("view", unref(modelValue));
+    };
+
+    const handleDelete = (event: MouseEvent) => {
+      event.stopPropagation();
+
+      // modelValue.value = "";
+      emit("delete", unref(modelValue));
+    };
+
+    return () => {
+      let content;
+
+      if (unref(modelValue)) {
+        content = (
+          <Fragment>
+            <ElImage
+              ref={
+                ((el: InstanceType<typeof ElImage>) =>
+                  (imageInstance.value = el)) as any
+              }
+              src={unref(modelValue)}
+              class="mk-upload-image-item__image"
+              fit="cover"
+            />
+
+            <div class="mk-upload-image-item__mask">
+              <ElTooltip content="查看">
+                <MKSvgIcon iconClass="View" onClick={handleView} />
+              </ElTooltip>
+              <ElTooltip content="删除">
+                <MKSvgIcon iconClass="Delete" onClick={handleDelete} />
+              </ElTooltip>
+            </div>
+          </Fragment>
+        );
+      } else {
+        content = <MKSvgIcon iconClass="Plus" />;
+      }
+
+      return (
+        <div class="mk-upload-image-item">
+          <MKUploadFile
+            modelValue={props.modelValue}
+            onUpdate:modelValue={handleUpdateModelValue}
+            uploadContext={props.uploadContext}
+            ref={
+              ((el: InstanceType<typeof MKUploadFile>) =>
+                (uploadFileInstance.value = el)) as any
+            }
+          >
+            <div class="mk-upload-image-item__wrapper" onClick={handleClick}>
+              {content}
+            </div>
+          </MKUploadFile>
+        </div>
+      );
+    };
+  },
+});
+
+export default defineComponent({
+  name: "MKUploadImage",
+  props: uploadImageProps,
+  emits: uploadImageEmits,
+  setup(props, { emit }) {
+    const modelValue = computed({
+      get: () => props.modelValue as string[] | string,
+      set: (v: string[] | string) => emit("update:modelValue", v),
+    });
+
+    const currentImageSrc: Ref<string> = ref("");
+
+    const multiple = computed(() => props.multiple);
+
+    const isShowImageViewer: Ref<boolean> = ref(false);
+
+    watch(
+      computed(() => [unref(modelValue), unref(multiple)]),
+      ([value, multiple]) => {
+        if (multiple && !Array.isArray(value)) {
+          modelValue.value = [];
+        }
+      },
+      { immediate: true }
+    );
+
+    const handleDelete = (src: string) => {
+      if (!unref(multiple)) {
+        modelValue.value = "";
+        return;
+      }
+
+      const index = unref(modelValue).indexOf(src);
+
+      if (index === -1) {
+        return;
+      }
+
+      (modelValue.value as string[]).splice(index, 1);
+    };
+
+    const handleShowImageViewer = (src: string) => {
+      isShowImageViewer.value = true;
+      currentImageSrc.value = src;
+    };
+
+    const handleCloseImageViewer = () => {
+      isShowImageViewer.value = false;
+    };
+
+    const handleAppendImage = (src: string) => {
+      const _value = unref(modelValue);
+
+      if (Array.isArray(_value)) {
+        _value.push(src);
+      }
+    };
+
+    return () => {
+      const _multiple = unref(multiple);
+
+      let content;
+
+      if (!_multiple) {
+        content = (
+          <MKUploadImageItem
+            onView={handleShowImageViewer}
+            onDelete={handleDelete}
+            modelValue={unref(modelValue) as string}
+            onUpdate:modelValue={(value) => (modelValue.value = value)}
+            uploadContext={props.uploadContext}
+          />
+        );
+      } else {
+        let images: VNode[] | null = null;
+
+        if (Array.isArray(unref(modelValue))) {
+          images = (unref(modelValue) as string[]).map((src) => (
+            <MKUploadImageItem
+              onView={handleShowImageViewer}
+              onDelete={handleDelete}
+              modelValue={src}
+              uploadContext={props.uploadContext}
+            />
+          ));
+        }
+
+        content = (
+          <Fragment>
+            {images}
+            <MKUploadImageItem
+              onUpdate:modelValue={handleAppendImage}
+              uploadContext={props.uploadContext}
+            />
+          </Fragment>
+        );
+      }
+
+      const imageViewer = unref(isShowImageViewer) ? (
+        <ElImageViewer
+          onClose={handleCloseImageViewer}
+          urlList={[unref(currentImageSrc)]}
+        />
+      ) : null;
+
+      return (
+        <div class="mk-upload-image">
+          {content}
+          {imageViewer}
+        </div>
+      );
+    };
+  },
+  // setup(props, { emit }) {
+  //   const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =
+  //     ref(null);
+
+  //   const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);
+
+  //   const isShowImageViewer: Ref<boolean> = ref(false);
+
+  //   const modelValue = computed({
+  //     get: () => props.modelValue as string,
+  //     set: (v: string) => {
+  //       emit("update:modelValue", v);
+  //     },
+  //   });
+
+  //   const handleUpdateModelValue = (v: string) => {
+  //     modelValue.value = v;
+  //   };
+
+  //   const handleClick = (event: MouseEvent) => {
+  //     event.stopPropagation();
+
+  //     if (unref(modelValue)) {
+  //       return;
+  //     }
+
+  //     unref(uploadFileInstance)?.handleUpload();
+  //   };
+
+  //   const handleView = (event: MouseEvent) => {
+  //     event.stopPropagation();
+
+  //     isShowImageViewer.value = true;
+  //   };
+
+  //   const handleCloseImageViewer = () => {
+  //     isShowImageViewer.value = false;
+  //   };
+
+  //   const handleDelete = (event: MouseEvent) => {
+  //     event.stopPropagation();
+
+  //     modelValue.value = "";
+  //   };
+
+  //   return () => {
+  //     let content;
+
+  //     if (unref(modelValue)) {
+  //       const imageViewer = unref(isShowImageViewer) ? (
+  //         <ElImageViewer
+  //           onClose={handleCloseImageViewer}
+  //           urlList={[unref(modelValue)]}
+  //         />
+  //       ) : null;
+
+  //       content = (
+  //         <Fragment>
+  //           <ElImage
+  //             ref={
+  //               ((el: InstanceType<typeof ElImage>) =>
+  //                 (imageInstance.value = el)) as any
+  //             }
+  //             src={unref(modelValue)}
+  //             class="mk-upload-image__image"
+  //             fit="cover"
+  //           />
+
+  //           {imageViewer}
+
+  //           <div class="mk-upload-image__mask">
+  //             <ElTooltip content="查看">
+  //               <MKSvgIcon iconClass="View" onClick={handleView} />
+  //             </ElTooltip>
+  //             <ElTooltip content="删除">
+  //               <MKSvgIcon iconClass="Delete" onClick={handleDelete} />
+  //             </ElTooltip>
+  //           </div>
+  //         </Fragment>
+  //       );
+  //     } else {
+  //       content = <MKSvgIcon iconClass="Plus" />;
+  //     }
+
+  //     return (
+  //       <div class="mk-upload-image">
+  //         <MKUploadFile
+  //           modelValue={props.modelValue}
+  //           onUpdate:modelValue={handleUpdateModelValue}
+  //           uploadContext={props.uploadContext}
+  //           ref={
+  //             ((el: InstanceType<typeof MKUploadFile>) =>
+  //               (uploadFileInstance.value = el)) as any
+  //           }
+  //         >
+  //           <div class="mk-upload-image__wrapper" onClick={handleClick}>
+  //             {content}
+  //           </div>
+  //         </MKUploadFile>
+  //       </div>
+  //     );
+  //   };
+  // },
+});

package/src/components/upload-file/upload-file-options.ts

@@ -1,36 +1,22 @@
-import { WebFileUpload } from "@maketribe/request";
-import { buildProps } from "@maketribe/utils";
-import { UploadFile, UploadFiles } from "element-plus";
 import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { UploadContext } from "./context";
+import { MaterialUploadContext } from "./context/MaterialUploadContext";
 
 export const uploadFileProps = buildProps({
-  upload: {
-    type: WebFileUpload,
-  },
-  showFileList: {
-    type: Boolean,
-    default: false,
-  },
-  fileList: {
-    type: null,
-  },
-  listType: {
+  modelValue: {
     type: String,
-    values: ["text", "picture", "picture-card"],
-    default: "text",
   },
-  limit: {
-    type: Number,
-    default: 10,
+  uploadContext: {
+    type: UploadContext,
+    default: () => new MaterialUploadContext(),
   },
 } as const);
 
 export type UploadFileProps = ExtractPropTypes<typeof uploadFileProps>;
 
 export const uploadFileEmits = {
-  uploadSuccess: (res: any) => true,
-  "update:file-list": (fileList: any) => true,
-  remove: (uploadFile: UploadFile, uploadFiles: UploadFiles) => true,
+  "update:modelValue": (path: string) => true,
 };
 
 export type UploadFileEmits = typeof uploadFileEmits;

package/src/components/upload-file/upload-file.tsx

@@ -1,56 +1,69 @@
-import { computed, defineComponent, unref } from "vue";
-import { ElMessage, ElUpload, UploadFile, UploadFiles } from "element-plus";
-import { UploadError, WebFileUpload } from "@maketribe/request";
-import { uploadFileProps, uploadFileEmits } from "./upload-file-options";
-import { MSAppClient } from "../../core";
+import { computed, defineComponent, inject, unref } from "vue";
+import { uploadFileEmits, uploadFileProps } from "./upload-file-options";
+import { ElMessage } from "element-plus";
+import { UploadContextCtxKey } from "./context";
+import { withInstall } from "@maketribe/utils";
 
-export default defineComponent({
+/**
+ * 文件上传
+ *
+ * 文件上传在本后台中有两大分类
+ * 1.直接上传文件
+ * 2.使用素材库文件
+ *
+ * 文件上传的界面交互又会分为几种情况
+ * 1.单文件上传（单文件上传，可能会根据。文件情况的不同，界面显示方式不一样）
+ * 2.多文件上传（多文件上传基于单文件的逻辑，不过是会变成多个文件）
+ *
+ * 希望文件交互组件不需要用了解是直接上传文件或使用素材库。
+ *
+ */
+
+const _UploadFile = defineComponent({
   name: "MKUploadFile",
   props: uploadFileProps,
   emits: uploadFileEmits,
-  setup(props, { slots, emit }) {
-    const upload =
-      props.upload ??
-      new WebFileUpload({ httpRequest: MSAppClient.instance!.httpRequest });
-
-    const fileList = computed({
-      get: () => props.fileList,
-      set: (v) => emit("update:file-list", v),
+  setup(props, { emit }) {
+    const uploadContextCtx = inject(UploadContextCtxKey, null);
+
+    const value = computed({
+      get: () => props.modelValue as string,
+      set: (v: string) => emit("update:modelValue", v),
     });
 
-    const handleChange = async (uploadFile: UploadFile) => {
-      if (uploadFile.raw) {
-        try {
-          const result = await upload.upload(uploadFile.raw);
-          if (result.data.code == 200) {
-            emit("uploadSuccess", result);
-          }
-        } catch (e) {
-          if (e instanceof UploadError) {
-            ElMessage.error(e.message);
-          }
+    const uploadContext = computed(
+      () => uploadContextCtx?.uploadContext || props.uploadContext
+    );
+
+    const handleUpload = async () => {
+      try {
+        const uploadResult = await unref(uploadContext).selectFile();
+
+        if (uploadResult.success) {
+          value.value = uploadResult.path || value.value;
+          return;
         }
+
+        ElMessage.error(uploadResult.msg);
+      } catch (e) {
+        console.error(e);
+        ElMessage.error("网络异常");
       }
     };
 
-    const handleRemove = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
-      emit("remove", uploadFile, uploadFiles);
+    return {
+      handleUpload,
     };
+  },
+  render() {
+    const { handleUpload, $slots } = this;
 
-    return () => {
-      return (
-        <ElUpload
-          class="mk-upload-file"
-          autoUpload={false}
-          showFileList={props.showFileList}
-          fileList={unref(fileList)}
-          listType={props.listType}
-          onChange={handleChange}
-          onRemove={handleRemove}
-          limit={props.limit}
-          v-slots={slots}
-        />
-      );
-    };
+    return (
+      <span class="mk-upload-file" onClick={handleUpload}>
+        {$slots.default?.()}
+      </span>
+    );
   },
 });
+
+export const MKUploadFile = withInstall(_UploadFile);

package/src/core/PageManager.ts

@@ -120,44 +120,48 @@ export class PageManager {
             return;
           }
 
-          const router = userSession.router;
+          userSession.beforeInitRouterEvent.on(() => {
+            const router = userSession.router;
 
-          const addedExtendsPageNames: string[] = [];
+            const addedExtendsPageNames: string[] = [];
 
-          for (const extendsPage of this.extendsPages) {
-            const routeInfo = router.getRouteByName(extendsPage.name as string);
+            for (const extendsPage of this.extendsPages) {
+              const routeInfo = router.getRouteByName(
+                extendsPage.name as string
+              );
 
-            if (!routeInfo) {
-              continue;
-            }
+              if (!routeInfo) {
+                continue;
+              }
 
-            const vueRoute = vueRoutes.find(
-              (vueRoute) => vueRoute.name === extendsPage.name
-            );
+              const vueRoute = vueRoutes.find(
+                (vueRoute) => vueRoute.name === extendsPage.name
+              );
 
-            if (!vueRoute) {
-              extendsPage.path = routeInfo.route || extendsPage.path;
-              addedExtendsPageNames.push(extendsPage.name as string);
-              vueRouter.addRoute("mk-ms-layout", extendsPage);
+              if (!vueRoute) {
+                extendsPage.path = routeInfo.route || extendsPage.path;
+                addedExtendsPageNames.push(extendsPage.name as string);
+                vueRouter.addRoute("mk-ms-layout", extendsPage);
+              }
             }
-          }
 
-          if (!this.extendsPages.find((page) => page.name === "notFound")) {
-            this.addExtendsPage({
-              name: "notFound",
-              // path: ":pathMatch(.*)*",
-              path: "",
-              component: () => import("../page/index/404.vue"),
-            });
-          }
+            if (!this.extendsPages.find((page) => page.name === "notFound")) {
+              this.addExtendsPage({
+                name: "notFound",
+                // path: ":pathMatch(.*)*",
+                path: "",
+                component: () => import("../page/index/404.vue"),
+              });
+            }
 
-          userSession.register(
-            createDisposable(() => {
-              for (const addedExtendsPageName of addedExtendsPageNames) {
-                vueRouter.removeRoute(addedExtendsPageName);
-              }
-            })
-          );
+            userSession.register(
+              createDisposable(() => {
+                for (const addedExtendsPageName of addedExtendsPageNames) {
+                  vueRouter.removeRoute(addedExtendsPageName);
+                }
+              })
+            );
+          });
         })
       );
     });

package/src/core/component/DataFormComponents.ts

@@ -82,22 +82,6 @@ export class DataFormComponents extends Components {
       ),
     });
 
-    this.registerComponent({
-      name: "MKFormImageList",
-      title: "图片列表",
-      component: defineAsyncComponent(
-        () => import("../../components/form-components/form-image-list")
-      ),
-    });
-
-    this.registerComponent({
-      name: "MKFormImageSelect",
-      title: "图片选择",
-      component: defineAsyncComponent(
-        () => import("../../components/form-components/form-image-list")
-      ),
-    });
-
     this.registerComponent({
       name: "MKFormRichTextEditor",
       title: "富文本",

package/src/dataview/material/MaterialMan.ts

@@ -59,10 +59,6 @@ export class MaterialMan {
       .getWhere()
       .addGroup(this.materialConditionGroup);
 
-    (this.materialTable.dataFilter as WhereFilter)
-      .getOrder()
-      .addOrderItem("createDate", OrderType.DESC);
-
     // this.materialGroupTable.dataFilter.setReady();
     this.materialTable.dataFilter.setReady();
 

package/src/dataview/member/MemberForm.ts

@@ -4,6 +4,7 @@ import { RoleTable } from "../role";
 import { DepartmentTable } from "../department";
 import { WebFileUpload } from "@maketribe/request";
 import { EMAIL_PATTERN } from "../../constants";
+import { WebFileUploadContext } from "../../components/upload-file";
 export type MemberResult = {
   id: string;
   name: string;
@@ -61,9 +62,6 @@ export class MemberForm<
         label: "头像",
         defaultValue: null,
         componentInfo: "MKFormImageUpload",
-        componentProps: {
-          upload: new WebFileUpload({ httpRequest: this.httpRequest }),
-        },
       }),
       new FormColumn({
         name: "roles",

package/src/dataview/member/MemberTable.tsx

@@ -75,7 +75,12 @@ export class MemberTable extends DataTable<MemberResult, MemberTableItem> {
         width: "190px",
         visible: false,
       }),
-      new TableColumn({ name: "name", label: "姓名", minWidth: "150px" }),
+      new TableColumn({
+        name: "name",
+        label: "姓名",
+        minWidth: "150px",
+        sortable: true,
+      }),
       new TableColumn({ name: "nickName", label: "昵称", minWidth: "150px" }),
       new TableColumn({
         name: "avatar",

package/src/dataview/route/RouteTable.ts

@@ -42,9 +42,9 @@ export class RouteTable extends DataTable<RouteResult, Route> {
     ]);
 
     this.setColumns([
-      new TableColumn({ name: "id", label: "编号", visible: false }),
       new TableColumn({ name: "name", label: "路由名" }),
       new TableColumn({ name: "title", label: "路由描述" }),
+      new TableColumn({ name: "route", label: "路径" }),
       new TableColumn({
         name: "type",
         label: "路由类型",

package/src/installer.ts

@@ -25,6 +25,10 @@ import {
   MKRolePermissionConfig,
   MKImageSelect,
   MKVerifyDialog,
+  MKUploadFile,
+  MKUploadImage,
+  MKWebFileUploadContext,
+  MKMaterialUploadContext,
 } from "./components";
 
 const components: Plugin[] = [
@@ -48,6 +52,10 @@ const components: Plugin[] = [
   MKRolePermissionConfig,
   MKImageSelect,
   MKVerifyDialog,
+  MKUploadFile,
+  MKUploadImage,
+  MKWebFileUploadContext,
+  MKMaterialUploadContext,
 ];
 
 export const installer = makeInstaller<ConfigProviderContext>(