@gct-paas/core-web 0.1.6-dev.4 → 0.1.6-dev.41

package/es/components/label-design/header/test-var-modal.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,202 @@
+import { useDesigner } from "../hooks/useDesigner.mjs";
+import { GctOverlayScrollbars } from "../../overlay-scrollbars/gct-overlay-scrollbars.mjs";
+import stage_canvas_default from "../stage/stage-canvas.vue.mjs";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, withCtx } from "vue";
+import { cloneDeep } from "lodash-es";
+import { t, useModal } from "@gct-paas/core";
+//#region src/components/label-design/header/test-var-modal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex h100% w100% print" };
+var _hoisted_2 = { class: "left flex flex-col" };
+var _hoisted_3 = { class: "left-title" };
+var _hoisted_4 = { class: "right" };
+var _hoisted_5 = { class: "right-title" };
+var test_var_modal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "test-var-modal",
+	props: {
+		modal: {},
+		fieldConfig: {},
+		data: {}
+	},
+	setup(__props) {
+		const { hoveredElements, updateEgglement } = useDesigner();
+		const selectItem = ref([]);
+		const hoverItem = ref([]);
+		const containerRef = ref(null);
+		const canvasRef = ref(null);
+		const canvasSize = ref({
+			width: 0,
+			height: 0
+		});
+		const containerSize = ref({
+			width: 0,
+			height: 0
+		});
+		const FormRef = ref();
+		const varMap = ref({});
+		const defProps = __props;
+		const schema = ref();
+		const handleOk = async () => {
+			try {
+				await FormRef.value?.validate();
+				return {
+					ok: true,
+					data: { ...varMap.value }
+				};
+			} catch (err) {
+				console.warn(err);
+			}
+			return { ok: false };
+		};
+		const changeMap = async (value, id) => {
+			schema.value?.forEach((i) => {
+				if (i.type === "TEXT" && i.id === id) {
+					i.attrs.text.label = value;
+					i.attrs.text.value = value;
+				} else if (i.id === id) i.attrs.content.value = value;
+			});
+		};
+		const updatePBarcodeWidth = (payload) => {
+			const egglement = schema.value?.find((d) => d.id === payload.elId);
+			if (!egglement) return;
+			if (egglement.rotate === 90) if (payload.height !== egglement.height) updateEgglement({
+				egglement,
+				width: payload.rotateWidth,
+				height: payload.width
+			});
+			else console.log("高度不变");
+			else if (payload.width !== egglement.width) updateEgglement({
+				egglement,
+				width: payload.width
+			});
+			else console.log("长度不变");
+		};
+		const updatePQrCodeWidthAndHeight = (payload) => {
+			const egglement = schema.value?.find((d) => d.id === payload.elId);
+			if (!egglement) return;
+			if (egglement.rotate === 90) if (payload.height !== egglement.height || payload.width !== egglement.width) updateEgglement({
+				egglement,
+				width: payload.rotateWidth,
+				height: payload.rotateHeight
+			});
+			else console.log("高度不变");
+			else if (payload.width !== egglement.width || payload.height !== egglement.height) updateEgglement({
+				egglement,
+				width: payload.width,
+				height: payload.height
+			});
+			else console.log("长度不变");
+		};
+		const focus = (id) => {
+			selectItem.value = schema.value?.filter((i) => i.id === id) ?? [];
+			hoveredElements.value = [...selectItem.value, ...hoverItem.value];
+		};
+		const blur = () => {
+			selectItem.value = [];
+			hoveredElements.value = [...hoverItem.value];
+		};
+		const mouseenter = (id) => {
+			hoverItem.value = schema.value?.filter((i) => i.id === id) ?? [];
+			hoveredElements.value = [...selectItem.value, ...hoverItem.value];
+		};
+		const mouseleave = () => {
+			hoverItem.value = [];
+			hoveredElements.value = [...selectItem.value];
+		};
+		useModal(handleOk);
+		const canvasStyle = computed(() => {
+			if (!canvasSize.value.width || !canvasSize.value.height || !containerSize.value.width || !containerSize.value.height) return {};
+			const scaleX = containerSize.value.width / canvasSize.value.width;
+			const scaleY = containerSize.value.height / canvasSize.value.height;
+			const scale = Math.min(scaleX, scaleY);
+			return {
+				transform: `translate(${(containerSize.value.width - canvasSize.value.width * scale) / 2}px, ${(containerSize.value.height - canvasSize.value.height * scale) / 2}px) scale(${scale})`,
+				transformOrigin: "top left",
+				width: `${canvasSize.value.width}px`,
+				height: `${canvasSize.value.height}px`
+			};
+		});
+		onMounted(() => {
+			schema.value = cloneDeep(defProps.data);
+			if (canvasRef.value) canvasSize.value = {
+				width: canvasRef.value.$el?.offsetWidth || 0,
+				height: canvasRef.value.$el?.offsetHeight || 0
+			};
+			const resizeObserver = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					const { width, height } = entry.contentRect;
+					containerSize.value.width = width;
+					containerSize.value.height = height;
+				}
+			});
+			if (containerRef.value) resizeObserver.observe(containerRef.value);
+			onUnmounted(() => {
+				resizeObserver.disconnect();
+			});
+		});
+		return (_ctx, _cache) => {
+			const _component_a_input = resolveComponent("a-input");
+			const _component_a_form_item = resolveComponent("a-form-item");
+			const _component_a_form = resolveComponent("a-form");
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, toDisplayString(unref(t)("sys.inputVar")), 1), createVNode(unref(GctOverlayScrollbars), null, {
+				default: withCtx(() => [createVNode(_component_a_form, {
+					ref_key: "FormRef",
+					ref: FormRef,
+					model: varMap.value,
+					autocomplete: "off",
+					layout: "vertical"
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(defProps.fieldConfig, (item) => {
+						return openBlock(), createBlock(_component_a_form_item, {
+							key: item.key,
+							label: unref(t)(item.label),
+							name: item.key,
+							class: normalizeClass(["var-item", { selected: selectItem.value[0]?.id === item.key }]),
+							required: "",
+							onMouseenter: ($event) => mouseenter(item.key),
+							onMouseleave: mouseleave
+						}, {
+							default: withCtx(() => [createVNode(_component_a_input, {
+								value: varMap.value[item.key],
+								"onUpdate:value": ($event) => varMap.value[item.key] = $event,
+								placeholder: unref(t)("sys.inputText"),
+								onFocus: ($event) => focus(item.key),
+								onBlur: blur,
+								onChange: ($event) => changeMap(varMap.value[item.key], item.key)
+							}, null, 8, [
+								"value",
+								"onUpdate:value",
+								"placeholder",
+								"onFocus",
+								"onChange"
+							])]),
+							_: 2
+						}, 1032, [
+							"label",
+							"name",
+							"class",
+							"onMouseenter"
+						]);
+					}), 128))]),
+					_: 1
+				}, 8, ["model"])]),
+				_: 1
+			})]), createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("sys.simulatedPreview")), 1), createElementVNode("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "canvas-container"
+			}, [createVNode(stage_canvas_default, {
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				schema: schema.value,
+				style: normalizeStyle([{
+					"pointer-events": "none",
+					"user-select": "none"
+				}, canvasStyle.value]),
+				onUpdatePBarcodeWidth: updatePBarcodeWidth,
+				onUpdatePQrCodeWidthAndHeight: updatePQrCodeWidthAndHeight
+			}, null, 8, ["schema", "style"])], 512)])]);
+		};
+	}
+});
+//#endregion
+export { test_var_modal_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/label-design/header/test-var-modal.vue_vue_type_style_index_0_scoped_972496bb_lang.css

@@ -0,0 +1,69 @@
+.print[data-v-972496bb] {
+  min-width: 0;
+  /* 重要：防止 flex 子项溢出 */
+  min-height: 0;
+  /* 重要：防止 flex 子项溢出 */
+}
+.left[data-v-972496bb] {
+  width: 288px;
+  min-width: 288px;
+  padding: 12px 0 12px 12px;
+  border-right: 1px solid #e0e3eb;
+}
+.left .left-title[data-v-972496bb] {
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  color: #1a1d23;
+  font-size: 14px;
+  font-weight: 600;
+}
+.left .left-title[data-v-972496bb]::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  margin-right: 8px;
+  margin-left: 12px;
+  background: var(--ant-primary-color);
+  color: var(--ant-primary-color);
+}
+.right[data-v-972496bb] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  /* 重要：防止内容撑开 */
+  padding: 24px;
+  background: #f6f8fa;
+}
+.right .canvas-container[data-v-972496bb] {
+  height: calc(100% - 48px);
+}
+.right .right-title[data-v-972496bb] {
+  margin-bottom: 24px;
+  color: #1a1d23;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+}
+.var-item[data-v-972496bb] {
+  margin-right: 12px;
+  padding: 12px;
+}
+.var-item[data-v-972496bb]:hover {
+  border: 1px solid rgb(from var(--ant-primary-color) r g b / 30%);
+  border-radius: 4px;
+  background: rgb(from var(--ant-primary-color) r g b / 8%);
+}
+.var-item.selected[data-v-972496bb] {
+  border: 1px solid rgb(from var(--ant-primary-color) r g b / 30%);
+  border-radius: 4px;
+  background: rgb(from var(--ant-primary-color) r g b / 8%);
+}
+[data-v-972496bb] .ant-form .ant-form-item {
+  margin-bottom: 0;
+}
+[data-v-972496bb] .ant-input-affix-wrapper-focused {
+  border-color: var(--ant-primary-color);
+}

package/es/components/label-design/hooks/useDesigner.d.ts

@@ -23,6 +23,7 @@ export declare function useDesigner(): {
     snapTracking: import('vue').Ref<boolean, boolean>;
     registerElement: (payload: IObject) => void;
     resizeBarcodeWidth: (payload: IObject) => void;
+    resizeQrCodeWidthAndHeight: (payload: IObject) => void;
     hoveredElements: import('vue').Ref<IObject[], IObject[]>;
     isModal: import('vue').Ref<boolean, boolean>;
 };

package/es/components/label-design/hooks/useDesigner.mjs

@@ -60,7 +60,7 @@ function useDesigner() {
 		});
 	}
 	function removeElement(payload) {
-		if (selectedElements.value[0]?.isEdit) return;
+		if (selectedElements.value[0] && selectedElements.value[0].isEdit) return;
 		clearSelectedElements();
 		const parent = selectedPage.value;
 		const eggIndex = parent.findIndex((egg) => egg.id === payload.elId);
@@ -98,6 +98,9 @@ function useDesigner() {
 		if (payload.classes) payload.egglement.classes = payload.classes;
 		if (payload.styles) payload.egglement.styles = payload.styles;
 		if (payload.attrs) payload.egglement.attrs = payload.attrs;
+		if (typeof payload.hasError !== "undefined" && payload.hasError !== null) payload.egglement.hasError = payload.hasError;
+		if (typeof payload.errMsg !== "undefined" && payload.errMsg !== null) payload.egglement.errMsg = payload.errMsg;
+		if (typeof payload.hasRotate !== "undefined" && payload.hasRotate !== null) payload.egglement.hasRotate = payload.hasRotate;
 	}
 	function deleteEgglement(payload) {
 		payload.parent.splice(payload.eggIndex, 1);
@@ -132,6 +135,20 @@ function useDesigner() {
 			width: payload.width
 		});
 	}
+	function resizeQrCodeWidthAndHeight(payload) {
+		const egglement = selectedPage.value?.find((d) => d.id === payload.elId) || {};
+		if (!egglement) return;
+		if (egglement.rotate === 90 || egglement.rotate === 270) updateEgglement({
+			egglement,
+			width: payload.height,
+			height: payload.width
+		});
+		else updateEgglement({
+			egglement,
+			width: payload.width,
+			height: payload.height
+		});
+	}
 	function togglePanel(value) {
 		if (currentPanel.value === value) return;
 		currentPanel.value = value;
@@ -155,6 +172,7 @@ function useDesigner() {
 		snapTracking,
 		registerElement,
 		resizeBarcodeWidth,
+		resizeQrCodeWidthAndHeight,
 		hoveredElements,
 		isModal
 	};

package/es/components/label-design/hooks/usePage.mjs

@@ -3,6 +3,13 @@ import { mmConvertPx } from "../helper/unit-conversion.mjs";
 import { ref } from "vue";
 import { isEmpty } from "lodash-es";
 //#region src/components/label-design/hooks/usePage.ts
+function clearEditState(items) {
+	items.forEach((item) => {
+		if (!item || typeof item !== "object") return;
+		if ("isEdit" in item) item.isEdit = false;
+		if (Array.isArray(item.children) && item.children.length > 0) clearEditState(item.children);
+	});
+}
 var project = ref({
 	labelWidth: 0,
 	labelHeight: 0,
@@ -69,9 +76,15 @@ function usePage() {
 		const history = await _api.apaas.labelLog.getInfo({ id });
 		Object.assign(labelInfo.value, { designerJson: history?.designerJson });
 		if (labelInfo.value) try {
-			if (labelInfo.value?.designerJson) project.value = JSON.parse(decodeURIComponent(labelInfo.value?.designerJson));
+			if (labelInfo.value?.designerJson) {
+				project.value = JSON.parse(decodeURIComponent(labelInfo.value?.designerJson));
+				if (Array.isArray(project.value.page)) clearEditState(project.value.page);
+			}
 		} catch {
-			if (labelInfo.value?.designerJson) project.value = JSON.parse(labelInfo.value?.designerJson);
+			if (labelInfo.value?.designerJson) {
+				project.value = JSON.parse(labelInfo.value?.designerJson);
+				if (Array.isArray(project.value.page)) clearEditState(project.value.page);
+			}
 		}
 	}
 	return {
@@ -104,6 +117,7 @@ async function loadLabelInfo(id) {
 		project.value.width = String(w.value);
 		project.value.heightMM = String(hM.value);
 		project.value.widthMM = String(wM.value);
+		if (Array.isArray(project.value.page)) clearEditState(project.value.page);
 	}
 	if (project.value && project.value.page) project.value.page.forEach((item) => {
 		aliasManager.set(item);

package/es/components/label-design/hooks/useProp.d.ts

@@ -83,6 +83,7 @@ export declare function useProp(context: {
             children: ({
                 type: string;
                 props: {
+                    space?: undefined;
                     type: string;
                     min: number;
                     max: number;
@@ -94,6 +95,7 @@ export declare function useProp(context: {
                     fontWeight?: undefined;
                     fontStyle?: undefined;
                     textDecoration?: undefined;
+                    spaceType?: undefined;
                 };
                 changeEvent(newValue: unknown): void;
                 change2Event(val: unknown): void;
@@ -104,6 +106,7 @@ export declare function useProp(context: {
                 type: string;
                 props: {
                     color?: undefined;
+                    space?: undefined;
                     type?: undefined;
                     min?: undefined;
                     max?: undefined;
@@ -114,6 +117,7 @@ export declare function useProp(context: {
                     fontWeight?: undefined;
                     fontStyle?: undefined;
                     textDecoration?: undefined;
+                    spaceType?: undefined;
                 };
                 changeEvent(newValue: unknown): void;
             } | {
@@ -122,6 +126,7 @@ export declare function useProp(context: {
                 type: string;
                 props: {
                     color?: undefined;
+                    space?: undefined;
                     type?: undefined;
                     min?: undefined;
                     max?: undefined;
@@ -132,11 +137,35 @@ export declare function useProp(context: {
                     fontWeight: any;
                     fontStyle: any;
                     textDecoration: any;
+                    spaceType?: undefined;
                 };
                 changeEvent({ prop, value, }: {
                     prop: string;
                     value: unknown;
                 }): void;
+            } | {
+                change2Event?: undefined;
+                change3Event?: undefined;
+                type: string;
+                props: {
+                    color?: undefined;
+                    type?: undefined;
+                    min?: undefined;
+                    max?: undefined;
+                    value?: undefined;
+                    fontFamily?: undefined;
+                    textAlign?: undefined;
+                    disabled?: undefined;
+                    fontWeight?: undefined;
+                    fontStyle?: undefined;
+                    textDecoration?: undefined;
+                    spaceType: any;
+                    space: any;
+                };
+                changeEvent({ spaceType, space, }: {
+                    spaceType: string;
+                    space: number;
+                }): void;
             })[];
         } | {
             text: string;
@@ -349,8 +378,30 @@ export declare function useProp(context: {
         QR_CODE: ({
             text: string;
             children: ({
+                change2Event?: undefined;
+                type: string;
+                props: {
+                    type?: undefined;
+                    rowHeight?: undefined;
+                    rows?: undefined;
+                    columns?: undefined;
+                    min?: undefined;
+                    max?: undefined;
+                    label: string;
+                    value: any;
+                    options: {
+                        label: string;
+                        value: QR_CODE_TYPE;
+                    }[];
+                };
+                changeEvent(newValue: string): void;
+            } | {
+                change2Event?: undefined;
                 type: string;
                 props: {
+                    rowHeight?: undefined;
+                    rows?: undefined;
+                    columns?: undefined;
                     options?: undefined;
                     type: string;
                     label: string;
@@ -365,14 +416,18 @@ export declare function useProp(context: {
                     type?: undefined;
                     min?: undefined;
                     max?: undefined;
-                    label: string;
-                    value: any;
-                    options: {
-                        label: string;
-                        value: QR_CODE_TYPE;
-                    }[];
+                    value?: undefined;
+                    options?: undefined;
+                    label?: undefined;
+                    rows: any;
+                    columns: any;
+                    rowHeight: any;
                 };
-                changeEvent(newValue: string): void;
+                changeEvent(val: IObject): void;
+                change2Event(val: {
+                    isError: boolean;
+                    errMsg: string;
+                }): void;
             })[];
         } | {
             text: string;