inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/processDrawingConfiguration/editor/index.tsx

@@ -1,116 +1,116 @@
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  PropType,
-  provide,
-  ref,
-  shallowRef,
-} from "vue";
-import { message, Modal } from "ant-design-vue";
-import inlTpEditor from "../editor-util/index.js";
-import { watchThingMove, watchThingRemove } from "./utils";
-import InstanceSelector from "./instanceSelector";
-import MainContent from "./mainContent";
-import OperationArea from "./operationArea";
-import api from "@/api/processDrawing";
-
-export interface customData {}
-export interface dropData<T = customData> {
-  url: string;
-  callBack: (opt: any) => void;
-  data: T;
-}
-export default defineComponent({
-  emits: ["back"],
-  props: {
-    flow: {
-      type: Object,
-    },
-    inlTpEditor: {
-      type: Object as PropType<typeof inlTpEditor>,
-    },
-  },
-  setup(props, { emit }) {
-    const showLeft = ref(true);
-    const showRight = ref(true);
-
-    const handleToggleLeft = () => (showLeft.value = !showLeft.value);
-    const handleToggleRight = () => (showRight.value = !showRight.value);
-    // 创建画布
-    const canvas = shallowRef<inlTpEditor>();
-    provide("canvas", canvas);
-    onMounted(async () => {
-      const editor = props.inlTpEditor || inlTpEditor;
-      canvas.value = new editor({
-        boxElement: "canvasBox",
-        uploadFile: {
-          customFun: async (file: File) => {
-            const fileData = new FormData();
-            fileData.append("file", file as any);
-            const res = await api.uploadCommon(fileData);
-            // 上传文件得到url
-            return res.data;
-          },
-        },
-      });
-      // 监听实例移动 控制属性跟随实例
-      watchThingMove(canvas.value);
-      watchThingRemove(canvas.value);
-      // 加载传入的流程图
-      if (props.flow) {
-        canvas.value.loadJsonString(props.flow.style);
-      }
-    });
-    // 左侧实例列表
-    const thingList = ref([]);
-    const getThingList = async () => {
-      const { data } = await api.getThingList();
-      thingList.value = data;
-    };
-    getThingList();
-    const handleSave = async (data) => {
-      await api.saveFlow(data).then(() => {
-        message.success("保存成功");
-        emit("back");
-      });
-    };
-    const title = ref(props.flow?.title);
-    const onHanleQuit = async () => {
-      if (canvas.value?.toJson() !== sessionStorage.getItem("canvas")) {
-        Modal.confirm({
-          title: "提示",
-          content: "当前页面的修改未保存，是否继续返回？",
-          async onOk() {
-            // handleSave(data);
-            emit("back");
-          },
-          onCancel() {},
-        });
-      } else {
-        emit("back");
-      }
-    };
-    onMounted(() => {});
-    return () => (
-      <div class="processFlow-new">
-        <InstanceSelector
-          thingList={thingList.value}
-          onBack={onHanleQuit}
-          v-show={showLeft.value}
-        />
-        <MainContent
-          onToggleLeft={handleToggleLeft}
-          onToggleRight={handleToggleRight}
-          defaultFlow={props.flow}
-          // onSave={handleSave}
-          onChangeTitle={(e: string) => {
-            title.value = e;
-          }}
-        />
-        {/* <div id="line" class="resize-line"></div> */}
-        <OperationArea v-show={showRight.value} onSave={getThingList} />
-      </div>
-    );
-  },
-});
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  PropType,
+  provide,
+  ref,
+  shallowRef,
+} from "vue";
+import { message, Modal } from "ant-design-vue";
+import inlTpEditor from "../editor-util/index.js";
+import { watchThingMove, watchThingRemove } from "./utils";
+import InstanceSelector from "./instanceSelector";
+import MainContent from "./mainContent";
+import OperationArea from "./operationArea";
+import api from "@/api/processDrawing";
+
+export interface customData {}
+export interface dropData<T = customData> {
+  url: string;
+  callBack: (opt: any) => void;
+  data: T;
+}
+export default defineComponent({
+  emits: ["back"],
+  props: {
+    flow: {
+      type: Object,
+    },
+    inlTpEditor: {
+      type: Object as PropType<typeof inlTpEditor>,
+    },
+  },
+  setup(props, { emit }) {
+    const showLeft = ref(true);
+    const showRight = ref(true);
+
+    const handleToggleLeft = () => (showLeft.value = !showLeft.value);
+    const handleToggleRight = () => (showRight.value = !showRight.value);
+    // 创建画布
+    const canvas = shallowRef<inlTpEditor>();
+    provide("canvas", canvas);
+    onMounted(async () => {
+      const editor = props.inlTpEditor || inlTpEditor;
+      canvas.value = new editor({
+        boxElement: "canvasBox",
+        uploadFile: {
+          customFun: async (file: File) => {
+            const fileData = new FormData();
+            fileData.append("file", file as any);
+            const res = await api.uploadCommon(fileData);
+            // 上传文件得到url
+            return res.data;
+          },
+        },
+      });
+      // 监听实例移动 控制属性跟随实例
+      watchThingMove(canvas.value);
+      watchThingRemove(canvas.value);
+      // 加载传入的流程图
+      if (props.flow) {
+        canvas.value.loadJsonString(props.flow.style);
+      }
+    });
+    // 左侧实例列表
+    const thingList = ref([]);
+    const getThingList = async () => {
+      const { data } = await api.getThingList();
+      thingList.value = data;
+    };
+    getThingList();
+    const handleSave = async (data) => {
+      await api.saveFlow(data).then(() => {
+        message.success("保存成功");
+        emit("back");
+      });
+    };
+    const title = ref(props.flow?.title);
+    const onHanleQuit = async () => {
+      if (canvas.value?.toJson() !== sessionStorage.getItem("canvas")) {
+        Modal.confirm({
+          title: "提示",
+          content: "当前页面的修改未保存，是否继续返回？",
+          async onOk() {
+            // handleSave(data);
+            emit("back");
+          },
+          onCancel() {},
+        });
+      } else {
+        emit("back");
+      }
+    };
+    onMounted(() => {});
+    return () => (
+      <div class="processFlow-new">
+        <InstanceSelector
+          thingList={thingList.value}
+          onBack={onHanleQuit}
+          v-show={showLeft.value}
+        />
+        <MainContent
+          onToggleLeft={handleToggleLeft}
+          onToggleRight={handleToggleRight}
+          defaultFlow={props.flow}
+          // onSave={handleSave}
+          onChangeTitle={(e: string) => {
+            title.value = e;
+          }}
+        />
+        {/* <div id="line" class="resize-line"></div> */}
+        <OperationArea v-show={showRight.value} onSave={getThingList} />
+      </div>
+    );
+  },
+});

package/src/pageComponent/views/processDrawingConfiguration/editor/instanceSelector.tsx

@@ -1,190 +1,190 @@
-import {
-  computed,
-  defineComponent,
-  inject,
-  nextTick,
-  onMounted,
-  PropType,
-  ref,
-  ShallowRef,
-  watch,
-  watchEffect,
-} from "vue";
-import { screen, judgeFullscreen } from "@/pageComponent/hooks/screen";
-import { message } from "ant-design-vue";
-import inlTpEditor from "../editor-util/index.js";
-
-export interface customData {}
-
-export interface dropData<T = customData> {
-  url: string;
-  callBack: (opt: any) => void;
-  data: T;
-}
-
-// 可以被搜索的实例属性
-const searchInstanceKeys = ["name", "code"];
-
-/**
- * 左侧实例选择框
- */
-const InstanceSelector = defineComponent({
-  emits: ["back"],
-  props: {
-    thingList: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-  },
-  setup(props, { emit }) {
-    const canvas = inject<ShallowRef<inlTpEditor>>("canvas")!;
-    const keyword = ref("");
-
-    let dragInstance;
-
-    const filteredThingList = computed(() => {
-      if (!keyword.value) return props.thingList;
-      return props.thingList.map((item) => ({
-        ...item,
-        elements: item.elements.filter((ele) => {
-          return searchInstanceKeys.some((key) => {
-            const isMatch = ele[key].includes(keyword.value);
-            if (isMatch) {
-              return true;
-            }
-          });
-        }),
-      }));
-    });
-
-    const openKeys = ref<string[]>([]);
-    watchEffect(() => {
-      openKeys.value = props.thingList.map((item) => item.code);
-    });
-
-    watchEffect(() => {
-      if (!canvas.value) return;
-      canvas.value.onAddElement((item: any) => {
-        if (dragInstance && item.data?.effectType === "svg") {
-          item.data.instanceId = dragInstance.id;
-          item.data.originalData = dragInstance;
-          const propertyList = dragInstance.propertyList ?? [];
-          for (const property of propertyList) {
-            const text = canvas.value.draw.text({
-              name: property.text,
-              parentId: item.id,
-              option: {
-                ...property.style,
-                top: item.top + property.relativePosition.offsetTop,
-                left: item.left + property.relativePosition.offsetLeft,
-              },
-            });
-            text.data.instanceId = item.id;
-            text.data.effectType = "property";
-            text.data.code = property.code;
-            if (!item.data.propertyList) {
-              item.data.propertyList = [];
-            }
-            item.data.propertyList.push(property);
-          }
-          stateList.value.push(dragInstance.id);
-          dragInstance = undefined;
-        }
-      });
-    });
-
-    const handleDragStart = (e, instance: any) => {
-      const hasThing = canvas.value.canvas
-        .getObjects()
-        .find((item) => item.data.instanceId === instance.id);
-      if (hasThing) {
-        e.preventDefault();
-        message.error("一个工艺流程图内不能同时拖入两个相同的设备.", 10);
-        return false;
-      } else {
-        const data: dropData = {
-          url: instance.image_run,
-          callBack: (e) => {},
-          data: instance,
-        };
-        // dragInstance = JSON.parse(instance.style);
-        dragInstance = instance;
-        e.dataTransfer.setData("dropData", JSON.stringify(data));
-      }
-    };
-    // 判断返回还是退出全屏
-    const onHandleBack = () => {
-      if (judgeFullscreen()) {
-        screen.exitFullscreen();
-      } else {
-        emit("back");
-      }
-    };
-    const stateList: any = ref([]);
-
-    const getState = (instance) => {
-      const hasThing = stateList.value.find((item) => item === instance.id);
-      return hasThing ? "instance-layer" : "";
-    };
-    watchEffect(() => {
-      if (!canvas.value) return;
-      canvas.value.onElementRemove((item: any) => {
-        if (item.data?.effectType === "svg") {
-          // 删除后取消选中框
-          const t = canvas.value.canvas.getActiveObject();
-          if (t) canvas.value.canvas.discardActiveObject();
-          const curInx = stateList.value.indexOf(item.data.instanceId);
-          stateList.value.splice(curInx, 1);
-        }
-      });
-    });
-    onMounted(async () => {
-      await nextTick();
-      stateList.value = [];
-      canvas.value.canvas.getObjects().forEach((item) => {
-        stateList.value.push(item.data.instanceId);
-      });
-    });
-    return () => (
-      <div class="instance-selector">
-        <div class="header" onClick={onHandleBack}>
-          <arrow-left-outlined />
-          <span>返回</span>
-        </div>
-        <div class="search">
-          <a-input
-            placeholder="搜索物实例"
-            clearable
-            prefix={<search-outlined />}
-            v-model={[keyword.value, "value"]}
-          ></a-input>
-        </div>
-        <a-collapse
-          class="instance-container"
-          ghost
-          v-model={[openKeys.value, "activeKey"]}
-        >
-          {filteredThingList.value.map((item) => (
-            <a-collapse-panel
-              key={item.code}
-              header={item.name === "device" ? "设备" : item.name}
-            >
-              {item.elements.map((instance: any) => (
-                <div class={[getState(instance), "instance"]} key={instance.id}>
-                  <img
-                    src={instance.image_run}
-                    alt={instance.name}
-                    onDragstart={(e) => handleDragStart(e, instance)}
-                  />
-                  <div class="instance-name">{`${instance.name}-${instance.code}`}</div>
-                </div>
-              ))}
-            </a-collapse-panel>
-          ))}
-        </a-collapse>
-      </div>
-    );
-  },
-});
-
-export default InstanceSelector;
+import {
+  computed,
+  defineComponent,
+  inject,
+  nextTick,
+  onMounted,
+  PropType,
+  ref,
+  ShallowRef,
+  watch,
+  watchEffect,
+} from "vue";
+import { screen, judgeFullscreen } from "@/pageComponent/hooks/screen";
+import { message } from "ant-design-vue";
+import inlTpEditor from "../editor-util/index.js";
+
+export interface customData {}
+
+export interface dropData<T = customData> {
+  url: string;
+  callBack: (opt: any) => void;
+  data: T;
+}
+
+// 可以被搜索的实例属性
+const searchInstanceKeys = ["name", "code"];
+
+/**
+ * 左侧实例选择框
+ */
+const InstanceSelector = defineComponent({
+  emits: ["back"],
+  props: {
+    thingList: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+  },
+  setup(props, { emit }) {
+    const canvas = inject<ShallowRef<inlTpEditor>>("canvas")!;
+    const keyword = ref("");
+
+    let dragInstance;
+
+    const filteredThingList = computed(() => {
+      if (!keyword.value) return props.thingList;
+      return props.thingList.map((item) => ({
+        ...item,
+        elements: item.elements.filter((ele) => {
+          return searchInstanceKeys.some((key) => {
+            const isMatch = ele[key].includes(keyword.value);
+            if (isMatch) {
+              return true;
+            }
+          });
+        }),
+      }));
+    });
+
+    const openKeys = ref<string[]>([]);
+    watchEffect(() => {
+      openKeys.value = props.thingList.map((item) => item.code);
+    });
+
+    watchEffect(() => {
+      if (!canvas.value) return;
+      canvas.value.onAddElement((item: any) => {
+        if (dragInstance && item.data?.effectType === "svg") {
+          item.data.instanceId = dragInstance.id;
+          item.data.originalData = dragInstance;
+          const propertyList = dragInstance.propertyList ?? [];
+          for (const property of propertyList) {
+            const text = canvas.value.draw.text({
+              name: property.text,
+              parentId: item.id,
+              option: {
+                ...property.style,
+                top: item.top + property.relativePosition.offsetTop,
+                left: item.left + property.relativePosition.offsetLeft,
+              },
+            });
+            text.data.instanceId = item.id;
+            text.data.effectType = "property";
+            text.data.code = property.code;
+            if (!item.data.propertyList) {
+              item.data.propertyList = [];
+            }
+            item.data.propertyList.push(property);
+          }
+          stateList.value.push(dragInstance.id);
+          dragInstance = undefined;
+        }
+      });
+    });
+
+    const handleDragStart = (e, instance: any) => {
+      const hasThing = canvas.value.canvas
+        .getObjects()
+        .find((item) => item.data.instanceId === instance.id);
+      if (hasThing) {
+        e.preventDefault();
+        message.error("一个工艺流程图内不能同时拖入两个相同的设备.", 10);
+        return false;
+      } else {
+        const data: dropData = {
+          url: instance.image_run,
+          callBack: (e) => {},
+          data: instance,
+        };
+        // dragInstance = JSON.parse(instance.style);
+        dragInstance = instance;
+        e.dataTransfer.setData("dropData", JSON.stringify(data));
+      }
+    };
+    // 判断返回还是退出全屏
+    const onHandleBack = () => {
+      if (judgeFullscreen()) {
+        screen.exitFullscreen();
+      } else {
+        emit("back");
+      }
+    };
+    const stateList: any = ref([]);
+
+    const getState = (instance) => {
+      const hasThing = stateList.value.find((item) => item === instance.id);
+      return hasThing ? "instance-layer" : "";
+    };
+    watchEffect(() => {
+      if (!canvas.value) return;
+      canvas.value.onElementRemove((item: any) => {
+        if (item.data?.effectType === "svg") {
+          // 删除后取消选中框
+          const t = canvas.value.canvas.getActiveObject();
+          if (t) canvas.value.canvas.discardActiveObject();
+          const curInx = stateList.value.indexOf(item.data.instanceId);
+          stateList.value.splice(curInx, 1);
+        }
+      });
+    });
+    onMounted(async () => {
+      await nextTick();
+      stateList.value = [];
+      canvas.value.canvas.getObjects().forEach((item) => {
+        stateList.value.push(item.data.instanceId);
+      });
+    });
+    return () => (
+      <div class="instance-selector">
+        <div class="header" onClick={onHandleBack}>
+          <arrow-left-outlined />
+          <span>返回</span>
+        </div>
+        <div class="search">
+          <a-input
+            placeholder="搜索物实例"
+            clearable
+            prefix={<search-outlined />}
+            v-model={[keyword.value, "value"]}
+          ></a-input>
+        </div>
+        <a-collapse
+          class="instance-container"
+          ghost
+          v-model={[openKeys.value, "activeKey"]}
+        >
+          {filteredThingList.value.map((item) => (
+            <a-collapse-panel
+              key={item.code}
+              header={item.name === "device" ? "设备" : item.name}
+            >
+              {item.elements.map((instance: any) => (
+                <div class={[getState(instance), "instance"]} key={instance.id}>
+                  <img
+                    src={instance.image_run}
+                    alt={instance.name}
+                    onDragstart={(e) => handleDragStart(e, instance)}
+                  />
+                  <div class="instance-name">{`${instance.name}-${instance.code}`}</div>
+                </div>
+              ))}
+            </a-collapse-panel>
+          ))}
+        </a-collapse>
+      </div>
+    );
+  },
+});
+
+export default InstanceSelector;