@ibiz-template/vue3-components 0.7.40-alpha.9 → 0.7.40

package/es/control/grid/grid-column/grid-field-column/attachment-column/attachment-column.d.ts

@@ -0,0 +1,65 @@
+import { PropType } from 'vue';
+import { ControlVO, GridFieldColumnController } from '@ibiz-template/runtime';
+import './attachment-column.scss';
+export declare const AttachmentColumn: import("vue").DefineComponent<{
+    value: {
+        type: (StringConstructor | {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        })[];
+        required: true;
+    };
+    data: {
+        type: PropType<ControlVO>;
+        required: true;
+    };
+    controller: {
+        type: PropType<GridFieldColumnController>;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    files: import("vue").Ref<{
+        id: string;
+        name: string;
+        url?: string | undefined;
+        base64?: string | undefined;
+    }[]>;
+    handleFileClick: (file: IData) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        })[];
+        required: true;
+    };
+    data: {
+        type: PropType<ControlVO>;
+        required: true;
+    };
+    controller: {
+        type: PropType<GridFieldColumnController>;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/control/grid/grid-column/grid-field-column/attachment-column/attachment-column.mjs

@@ -0,0 +1,125 @@
+import { ref, createVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useFilesParse, getFileType } from './file-util.mjs';
+import './attachment-column.css';
+
+"use strict";
+const AttachmentColumn = /* @__PURE__ */ defineComponent({
+  name: "IBizAttachmentColumn",
+  props: {
+    value: {
+      type: [String, Array],
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("attachment-column");
+    const {
+      downloadUrl,
+      files,
+      onDownload
+    } = useFilesParse(props, props.controller);
+    const loading = ref(true);
+    const onLoad = () => {
+      loading.value = false;
+    };
+    const renderImagePreview = (file) => {
+      return withDirectives(createVNode("div", {
+        "class": ns.e("image-preview")
+      }, [createVNode("div", {
+        "class": ns.em("image-preview", "container")
+      }, [createVNode("img", {
+        "alt": "--",
+        "src": file.base64 || file.url,
+        "onLoad": onLoad
+      }, null)])]), [[resolveDirective("loading"), loading.value]]);
+    };
+    const handleImagePreview = async (file) => {
+      const overlay = ibiz.overlay.createModal(renderImagePreview(file), void 0, {
+        modalClass: ns.e("image-preview"),
+        width: 700,
+        height: "auto"
+      });
+      overlay.present();
+      await overlay.onWillDismiss();
+    };
+    const handlePDFPreview = async (file) => {
+      const url = file.url || downloadUrl.value.replace("%fileId%", file.id);
+      const response = await ibiz.net.request(url, {
+        method: "get",
+        responseType: "blob",
+        baseURL: ""
+        // 已经有baseURL了，这里无需再写
+      });
+      if (response.data) {
+        const blob = new Blob([response.data], {
+          type: "application/pdf"
+        });
+        const objectURL = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = objectURL;
+        link.target = "_blank";
+        link.style.cursor = "pointer";
+        link.textContent = file.name || "";
+        const handleClick = function() {
+          link.removeEventListener("click", handleClick);
+          document.body.removeChild(link);
+        };
+        link.addEventListener("click", handleClick);
+        document.body.appendChild(link);
+        link.click();
+      }
+    };
+    const handleFileClick = (file) => {
+      var _a, _b;
+      const fileName = file.name;
+      const fileExtension = (_b = (_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) != null ? _b : "";
+      switch (getFileType(fileExtension)) {
+        case "image":
+          handleImagePreview(file);
+          break;
+        case "pdf":
+          handlePDFPreview(file);
+          break;
+        case "other":
+        default:
+          onDownload(file);
+          break;
+      }
+    };
+    return {
+      ns,
+      files,
+      handleFileClick
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.files.map((file) => {
+      var _a, _b;
+      const fileName = file.name;
+      const fileExtension = (_b = (_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) != null ? _b : "";
+      const fileType = getFileType(fileExtension);
+      return createVNode("div", {
+        "class": this.ns.e("file"),
+        "title": file.name,
+        "onClick": () => this.handleFileClick(file)
+      }, [fileType === "image" ? createVNode("img", {
+        "alt": "",
+        "class": this.ns.em("file", "img"),
+        "src": file.base64 || file.url
+      }, null) : file.name]);
+    })]);
+  }
+});
+
+export { AttachmentColumn };

package/es/control/grid/grid-column/grid-field-column/attachment-column/file-util.d.ts

@@ -0,0 +1,28 @@
+import { Ref } from 'vue';
+import { GridFieldColumnController } from '@ibiz-template/runtime';
+/** 文件总类型定义 */
+type FileType = 'image' | 'pdf' | 'other';
+/**
+ * 获取文件类型
+ */
+export declare const getFileType: (extension: string) => FileType;
+/**
+ * 文件内容解析的适配逻辑
+ *
+ * @export
+ * @param {IParams} props
+ * @param {UploadEditorController} c
+ * @returns {*}
+ */
+export declare function useFilesParse(props: IParams, c: GridFieldColumnController): {
+    uploadUrl: Ref<string>;
+    downloadUrl: Ref<string>;
+    files: Ref<{
+        id: string;
+        name: string;
+        url?: string | undefined;
+        base64?: string | undefined;
+    }[]>;
+    onDownload: (file: IData) => void;
+};
+export {};

package/es/control/grid/grid-column/grid-field-column/attachment-column/file-util.mjs

@@ -0,0 +1,131 @@
+import { ref, watch } from 'vue';
+import { isString } from 'lodash-es';
+
+"use strict";
+const getFileType = (extension) => {
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "bmp":
+    case "svg":
+    case "webp":
+    case "jfif":
+      return "image";
+    case "pdf":
+      return "pdf";
+    default:
+      return "other";
+  }
+};
+function useFilesParse(props, c) {
+  const files = ref([]);
+  const uploadUrl = ref("");
+  const downloadUrl = ref("");
+  const svgBlob = /* @__PURE__ */ new Map();
+  const fetchSVGAsBase64 = async (url) => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error("Failed to fetch SVG: ".concat(response.status));
+      }
+      const blob = await response.blob();
+      const reader = new FileReader();
+      return new Promise((resolve, reject) => {
+        reader.onloadend = () => {
+          const base64String = reader.result;
+          if (base64String) {
+            const dataURL = base64String.replace(
+              "data:application/octet-stream;base64",
+              "data:image/svg+xml;base64"
+            );
+            resolve(dataURL);
+          }
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+    } catch (error) {
+      ibiz.log.error(error == null ? void 0 : error.message);
+      throw error;
+    }
+  };
+  const calcSvgPreview = (file) => {
+    const blob = svgBlob.get(file.id);
+    if (blob) {
+      Object.assign(file, { base64: blob });
+    } else {
+      fetchSVGAsBase64(file.url).then((base64String) => {
+        Object.assign(file, { base64: base64String });
+      });
+    }
+  };
+  const onDownload = (file) => {
+    const url = file.url || downloadUrl.value.replace("%fileId%", file.id);
+    ibiz.util.file.fileDownload(url, file.name);
+  };
+  watch(
+    () => props.value,
+    (newVal) => {
+      files.value = !newVal ? [] : isString(newVal) ? JSON.parse(newVal) : newVal;
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.data,
+    (newVal) => {
+      if (newVal) {
+        const urls = ibiz.util.file.calcFileUpDownUrl(
+          c.context,
+          c.params,
+          newVal,
+          {}
+        );
+        uploadUrl.value = urls.uploadUrl;
+        downloadUrl.value = urls.downloadUrl;
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  watch(
+    files,
+    (newVal) => {
+      if ((newVal == null ? void 0 : newVal.length) && downloadUrl.value) {
+        newVal.forEach((file) => {
+          Object.assign(file, {
+            url: file.url || downloadUrl.value.replace("%fileId%", file.id)
+          });
+          if (file.name.split(".").pop() === "svg") {
+            calcSvgPreview(file);
+          }
+        });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    downloadUrl,
+    (newVal) => {
+      if (newVal && files.value.length) {
+        files.value.forEach((file) => {
+          Object.assign(file, {
+            url: downloadUrl.value.replace("%fileId%", file.id)
+          });
+          if (file.name.split(".").pop() === "svg") {
+            calcSvgPreview(file);
+          }
+        });
+      }
+    },
+    { immediate: true }
+  );
+  return {
+    files,
+    uploadUrl,
+    onDownload,
+    downloadUrl
+  };
+}
+
+export { getFileType, useFilesParse };

package/es/control/grid/grid-column/grid-field-column/grid-field-column.d.ts

@@ -24,6 +24,7 @@ export declare const GridFieldColumn: import("vue").DefineComponent<{
     codeListValue: import("vue").ComputedRef<string>;
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;
+    columnType: string | undefined;
     codeListItems: Ref<readonly import("@ibiz-template/core").IApiData[]>;
     hiddenEmpty: import("vue").ComputedRef<boolean>;
     findLayoutPanel: () => IPanel | undefined;

package/es/control/grid/grid-column/grid-field-column/grid-field-column.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed, createVNode, resolveComponent } from 'vue';
+import { ref, watch, computed, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useNamespace, useCodeListListen } from '@ibiz-template/vue3-util';
 import { GridFieldColumnController, GridRowState, ValueExUtil } from '@ibiz-template/runtime';
 import { isNotNil } from 'ramda';
@@ -19,8 +19,10 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
     }
   },
   setup(props) {
+    var _a;
     const ns = useNamespace("grid-field-column");
     const zIndex = props.controller.grid.state.zIndex;
+    const columnType = (_a = props.controller.model.userParam) == null ? void 0 : _a.columnType;
     const onCellClick = (event) => {
       if (props.controller.hasAction) {
         event.stopPropagation();
@@ -98,11 +100,11 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
     };
     useCodeListListen(props.controller.model.appCodeListId, props.controller.context.srfappid, fn);
     const findLayoutPanel = () => {
-      var _a;
+      var _a2;
       const {
         controlRenders = []
       } = props.controller.model;
-      return (_a = controlRenders.find((renderItem) => renderItem.renderType === "LAYOUTPANEL")) == null ? void 0 : _a.layoutPanel;
+      return (_a2 = controlRenders.find((renderItem) => renderItem.renderType === "LAYOUTPANEL")) == null ? void 0 : _a2.layoutPanel;
     };
     const renderPanelItemLayout = (item, modelData) => {
       const {
@@ -129,6 +131,7 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
       codeListValue,
       tooltip,
       zIndex,
+      columnType,
       codeListItems,
       hiddenEmpty,
       findLayoutPanel,
@@ -170,6 +173,12 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
         "onInfoTextChange": this.onInfoTextChange,
         "title": showTitle(this.tooltip)
       }, null);
+    } else if (this.columnType === "attachment") {
+      content = createVNode(resolveComponent("iBizAttachmentColumn"), {
+        "data": this.row.data,
+        "value": this.fieldValue,
+        "controller": this.controller
+      }, null);
     } else {
       content = createVNode("span", {
         "class": this.ns.e("text"),

package/es/control/grid/grid-column/grid-field-column/index.d.ts

@@ -20,6 +20,7 @@ export declare const IBizGridFieldColumn: import("@ibiz-template/vue3-util").Typ
     codeListValue: import("vue").ComputedRef<string>;
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;
+    columnType: string | undefined;
     codeListItems: import("vue").Ref<readonly import("@ibiz-template/core").IApiData[]>;
     hiddenEmpty: import("vue").ComputedRef<boolean>;
     findLayoutPanel: () => import("@ibiz/model-core").IPanel | undefined;

package/es/control/grid/grid-column/grid-field-column/index.mjs

@@ -1,13 +1,15 @@
-import { registerGridColumnProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
+import { registerGridColumnProvider } from '@ibiz-template/runtime';
 import { GridFieldColumn } from './grid-field-column.mjs';
 import { GridFieldColumnProvider } from './grid-field-column.provider.mjs';
+import { AttachmentColumn } from './attachment-column/attachment-column.mjs';
 
 "use strict";
 const IBizGridFieldColumn = withInstall(
   GridFieldColumn,
   function(v) {
     v.component(GridFieldColumn.name, GridFieldColumn);
+    v.component(AttachmentColumn.name, AttachmentColumn);
     registerGridColumnProvider(
       "DEFGRIDCOLUMN",
       () => new GridFieldColumnProvider()

package/es/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createVNode, resolveComponent } from 'vue';
+import { computed, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './grid-edit-item.css';
 

package/es/control/grid/grid-column/grid-field-edit-column/grid-field-edit-column.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, nextTick, computed, createVNode, resolveComponent, h } from 'vue';
+import { ref, nextTick, computed, resolveComponent, h, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { RuntimeError } from '@ibiz-template/core';
 import { GridFieldEditColumnController, GridRowState } from '@ibiz-template/runtime';

package/es/control/grid/grid-column/grid-group-column/grid-group-column.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, createVNode } from 'vue';
+import { createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { GridGroupColumnController, GridRowState } from '@ibiz-template/runtime';
 

package/es/control/grid/grid-column/grid-ua-column/grid-ua-column.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, createVNode, resolveComponent } from 'vue';
+import { resolveComponent, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './grid-ua-column.css';
 import { GridUAColumnController, GridRowState } from '@ibiz-template/runtime';

package/es/control/grid/grid-column/index.d.ts

@@ -3,3 +3,4 @@ export * from './grid-ua-column';
 export * from './grid-field-edit-column';
 export * from './grid-group-column';
 export * from './auto-grid-field-edit-column';
+export * from './grid-column-header';

package/es/control/grid/grid-column/index.mjs

@@ -3,5 +3,6 @@ export { IBizGridUAColumn } from './grid-ua-column/index.mjs';
 export { IBizGridFieldEditColumn } from './grid-field-edit-column/index.mjs';
 export { IBizGridGroupColumn } from './grid-group-column/index.mjs';
 export { IBizDynamicGridFieldEditColumn } from './auto-grid-field-edit-column/index.mjs';
+export { IBizGridColumnHeader } from './grid-column-header/index.mjs';
 
 "use strict";

package/es/control/grid/index.mjs

@@ -6,5 +6,6 @@ export { IBizGridUAColumn } from './grid-column/grid-ua-column/index.mjs';
 export { IBizGridFieldEditColumn } from './grid-column/grid-field-edit-column/index.mjs';
 export { IBizGridGroupColumn } from './grid-column/grid-group-column/index.mjs';
 export { IBizDynamicGridFieldEditColumn } from './grid-column/auto-grid-field-edit-column/index.mjs';
+export { IBizGridColumnHeader } from './grid-column/grid-column-header/index.mjs';
 
 "use strict";

package/es/control/grid/row-edit-popover/row-edit-popover.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, ref, createVNode, resolveComponent } from 'vue';
+import { isVNode, ref, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useNamespace, useEventListener } from '@ibiz-template/vue3-util';
 import './row-edit-popover.css';
 

package/es/control/index.d.ts

@@ -25,3 +25,4 @@ export * from './map';
 export * from './report-panel';
 export * from './gantt';
 export * from './context-menu';
+export * from './view-panel';

package/es/control/index.mjs

@@ -25,6 +25,7 @@ export { IBizMapControl } from './map/index.mjs';
 export { IBizReportPanelControl } from './report-panel/index.mjs';
 export { IBizGanttControl } from './gantt/index.mjs';
 export { IBizContextMenuControl } from './context-menu/index.mjs';
+export { IBizViewPanelControl } from './view-panel/index.mjs';
 export { useAppGridBase, useAppGridPagination, useGridDraggable, useGridHeaderStyle, useITableEvent } from './grid/grid/grid-control.util.mjs';
 export { IBizGridControl } from './grid/grid/index.mjs';
 export { IBizGridFieldColumn } from './grid/grid-column/grid-field-column/index.mjs';
@@ -32,6 +33,7 @@ export { IBizGridUAColumn } from './grid/grid-column/grid-ua-column/index.mjs';
 export { IBizGridFieldEditColumn } from './grid/grid-column/grid-field-edit-column/index.mjs';
 export { IBizGridGroupColumn } from './grid/grid-column/grid-group-column/index.mjs';
 export { IBizDynamicGridFieldEditColumn } from './grid/grid-column/auto-grid-field-edit-column/index.mjs';
+export { IBizGridColumnHeader } from './grid/grid-column/grid-column-header/index.mjs';
 export { IBizSearchFormControl } from './form/search-form/index.mjs';
 export { IBizFormGroupPanel } from './form/form-detail/form-group-panel/index.mjs';
 export { IBizFormItemContainer } from './form/form-detail/form-item/form-item-container/form-item-container.mjs';

package/es/control/kanban/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { KanbanControl } from './kanban.mjs';
 import { KanbanProvider } from './kanban.provider.mjs';

package/es/control/kanban/kanban.d.ts

@@ -3,29 +3,52 @@ import { IDEKanban } from '@ibiz/model-core';
 import { KanbanController, IKanbanGroupState, IControlProvider } from '@ibiz-template/runtime';
 import './kanban.scss';
 export declare const KanbanControl: import("vue").DefineComponent<{
+    /**
+     * @description 数据看板模型数据
+     */
     modelData: {
         type: PropType<IDEKanban>;
         required: true;
     };
+    /**
+     * @description 应用上下文对象
+     */
     context: {
         type: PropType<import("@ibiz-template/core").IApiContext>;
         required: true;
     };
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
         type: PropType<import("@ibiz-template/core").IApiParams>;
         default: () => {};
     };
+    /**
+     * @description 部件适配器
+     */
     provider: {
         type: PropType<IControlProvider>;
     };
+    /**
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
+     */
     mdctrlActiveMode: {
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -38,29 +61,52 @@ export declare const KanbanControl: import("vue").DefineComponent<{
     onFullScreen: () => void;
     renderGroup: (group: IKanbanGroupState) => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 数据看板模型数据
+     */
     modelData: {
         type: PropType<IDEKanban>;
         required: true;
     };
+    /**
+     * @description 应用上下文对象
+     */
     context: {
         type: PropType<import("@ibiz-template/core").IApiContext>;
         required: true;
     };
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
         type: PropType<import("@ibiz-template/core").IApiParams>;
         default: () => {};
     };
+    /**
+     * @description 部件适配器
+     */
     provider: {
         type: PropType<IControlProvider>;
     };
+    /**
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
+     */
     mdctrlActiveMode: {
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;