cnhis-design-vue 2.1.58 → 2.1.59

package/packages/scale-container/src/ScaleContainer.vue

@@ -1,197 +1,197 @@
-<template>
-  <div
-    class="scale-container"
-    ref="containerRef"
-    :style="style"
-  >
-    <slot />
-    <img
-      v-if="open"
-      class="scale-handle"
-      ref="handleRef"
-      src="./scale.png"
-      draggable="false"
-      alt=""
-    />
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, onMounted, toRefs, computed, reactive, watch, nextTick } from "@vue/composition-api";
-import create from '@/core/create';
-
-const isNil = val => val === undefined || val === null;
-
-export default create(defineComponent({
-  name: "scale-container",
-  props: {
-    // 不开启，则相当于div
-    open: {
-      type: Boolean,
-      default: true,
-    },
-    // 限制为容器mounted后的大小，与 min 互斥
-    limitOriginSize: {
-      type: Boolean,
-      default: false
-    },
-    minW: {
-      type: Number
-    },
-    minH: {
-      type: Number
-    },
-    defaultMaxH: {
-      type: Number
-    }
-  },
-  emits: ["changeHeight", "changeWidth"],
-  setup(props, { emit }) {
-    const { limitOriginSize, minW, minH, defaultMaxH, open } = toRefs(props);
-
-    const containerRef = ref();
-    const handleRef = ref();
-
-    const State = reactive({
-      height: null,
-      width: null
-    });
-    const Height = computed(() => (isNil(State.height) ? "inherit" : `${State.height}px`));
-    const Width = computed(() => (isNil(State.width) ? "100%" : `${State.width}px`));
-    const MaxHeight = computed(() =>
-      isNil(defaultMaxH.value) || !isNil(State.height) ? "none" : `${defaultMaxH.value}px`
-    );
-
-    const style = computed(() => {
-      if (!open.value) return {};
-      return { width: Width.value, height: Height.value, maxHeight: MaxHeight.value };
-    });
-
-    let defH, defW;
-    // attr: width / height
-    const updateSize = (size, attr) => {
-      if (!containerRef.value || (attr !== "width" && attr !== "height")) return false;
-
-      // containerRef.value.style[attr] = size + "px";
-      if (attr === "width") {
-        State.width = size;
-        emit("changeWidth", size);
-      }
-      if (attr === "height") {
-        State.height = size;
-        emit("changeHeight", size);
-      }
-
-      return true;
-    };
-
-    const updateSizeProxy = (size, attr, successCB) => {
-      let isSuccess = false;
-      if (attr === "width") {
-        if (limitOriginSize.value) {
-          if (size > defW) isSuccess = updateSize(size, attr);
-        } else if (!isNil(minW.value)) {
-          if (size > minW.value) isSuccess = updateSize(size, attr);
-        } else {
-          isSuccess = updateSize(size, attr);
-        }
-      }
-      if (attr === "height") {
-        if (limitOriginSize.value) {
-          if (size > defH) isSuccess = updateSize(size, attr);
-        } else if (!isNil(minH.value)) {
-          if (size > minH.value) isSuccess = updateSize(size, attr);
-        } else {
-          isSuccess = updateSize(size, attr);
-        }
-      }
-
-      if (isSuccess && successCB) successCB();
-    };
-
-    const setDefSize = () => {
-      const { height, width } = containerRef.value.getBoundingClientRect();
-      defW = width;
-      defH = height;
-    };
-
-    const changePointerEventsForIframe = (disabled = false) => {
-      document.querySelectorAll("iframe")?.forEach((el) => {
-        if (disabled) {
-          el.classList.add("disabled-pointer-events")
-        } else {
-          el.classList.remove("disabled-pointer-events")
-        }
-      });
-    };
-
-    const initEvents = () => {
-      nextTick(() => {
-        handleRef.value?.addEventListener("mousedown", evt => {
-          evt.preventDefault();
-          changePointerEventsForIframe(true);
-          let x = evt.clientX;
-          let y = evt.clientY;
-          const resize = evtM => {
-            const deltaX = evtM.clientX - x;
-            const deltaY = evtM.clientY - y;
-            const { height, width } = containerRef.value.getBoundingClientRect();
-            const W = width + deltaX;
-            const H = height + deltaY;
-            updateSizeProxy(W, "width", () => {
-              x = evtM.clientX;
-            });
-            updateSizeProxy(H, "height", () => {
-              y = evtM.clientY;
-            });
-          };
-          document.addEventListener("mousemove", resize);
-          document.onmouseup = () => {
-            document.removeEventListener("mousemove", resize);
-            changePointerEventsForIframe(false);
-            document.onmouseup = null;
-          };
-        });
-      })
-    }
-
-    onMounted(() => {
-      setDefSize();
-      if (!isNil(minW.value) && defW < minW.value) {
-        State.width = minW.value;
-      }
-      open.value && initEvents();
-    });
-
-    watch(open, (val) => {
-      val && initEvents();
-    });
-
-    return {
-      style,
-      containerRef,
-      handleRef,
-    };
-  }
-}));
-</script>
-<style lang="less" scoped>
-.scale-container {
-  position: relative;
-  .scale-handle {
-    height: 16px;
-    width: 16px;
-    position: absolute;
-    z-index: 999;
-    bottom: 0;
-    right: 0;
-    cursor: se-resize;
-    user-select: none;
-  }
-}
-</style>
-<style lang="less">
-.disabled-pointer-events {
-  pointer-events: none !important;
-}
-</style>
+<template>
+  <div
+    class="scale-container"
+    ref="containerRef"
+    :style="style"
+  >
+    <slot />
+    <img
+      v-if="open"
+      class="scale-handle"
+      ref="handleRef"
+      src="./scale.png"
+      draggable="false"
+      alt=""
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, toRefs, computed, reactive, watch, nextTick } from "@vue/composition-api";
+import create from '@/core/create';
+
+const isNil = val => val === undefined || val === null;
+
+export default create(defineComponent({
+  name: "scale-container",
+  props: {
+    // 不开启，则相当于div
+    open: {
+      type: Boolean,
+      default: true,
+    },
+    // 限制为容器mounted后的大小，与 min 互斥
+    limitOriginSize: {
+      type: Boolean,
+      default: false
+    },
+    minW: {
+      type: Number
+    },
+    minH: {
+      type: Number
+    },
+    defaultMaxH: {
+      type: Number
+    }
+  },
+  emits: ["changeHeight", "changeWidth"],
+  setup(props, { emit }) {
+    const { limitOriginSize, minW, minH, defaultMaxH, open } = toRefs(props);
+
+    const containerRef = ref();
+    const handleRef = ref();
+
+    const State = reactive({
+      height: null,
+      width: null
+    });
+    const Height = computed(() => (isNil(State.height) ? "inherit" : `${State.height}px`));
+    const Width = computed(() => (isNil(State.width) ? "100%" : `${State.width}px`));
+    const MaxHeight = computed(() =>
+      isNil(defaultMaxH.value) || !isNil(State.height) ? "none" : `${defaultMaxH.value}px`
+    );
+
+    const style = computed(() => {
+      if (!open.value) return {};
+      return { width: Width.value, height: Height.value, maxHeight: MaxHeight.value };
+    });
+
+    let defH, defW;
+    // attr: width / height
+    const updateSize = (size, attr) => {
+      if (!containerRef.value || (attr !== "width" && attr !== "height")) return false;
+
+      // containerRef.value.style[attr] = size + "px";
+      if (attr === "width") {
+        State.width = size;
+        emit("changeWidth", size);
+      }
+      if (attr === "height") {
+        State.height = size;
+        emit("changeHeight", size);
+      }
+
+      return true;
+    };
+
+    const updateSizeProxy = (size, attr, successCB) => {
+      let isSuccess = false;
+      if (attr === "width") {
+        if (limitOriginSize.value) {
+          if (size > defW) isSuccess = updateSize(size, attr);
+        } else if (!isNil(minW.value)) {
+          if (size > minW.value) isSuccess = updateSize(size, attr);
+        } else {
+          isSuccess = updateSize(size, attr);
+        }
+      }
+      if (attr === "height") {
+        if (limitOriginSize.value) {
+          if (size > defH) isSuccess = updateSize(size, attr);
+        } else if (!isNil(minH.value)) {
+          if (size > minH.value) isSuccess = updateSize(size, attr);
+        } else {
+          isSuccess = updateSize(size, attr);
+        }
+      }
+
+      if (isSuccess && successCB) successCB();
+    };
+
+    const setDefSize = () => {
+      const { height, width } = containerRef.value.getBoundingClientRect();
+      defW = width;
+      defH = height;
+    };
+
+    const changePointerEventsForIframe = (disabled = false) => {
+      document.querySelectorAll("iframe")?.forEach((el) => {
+        if (disabled) {
+          el.classList.add("disabled-pointer-events")
+        } else {
+          el.classList.remove("disabled-pointer-events")
+        }
+      });
+    };
+
+    const initEvents = () => {
+      nextTick(() => {
+        handleRef.value?.addEventListener("mousedown", evt => {
+          evt.preventDefault();
+          changePointerEventsForIframe(true);
+          let x = evt.clientX;
+          let y = evt.clientY;
+          const resize = evtM => {
+            const deltaX = evtM.clientX - x;
+            const deltaY = evtM.clientY - y;
+            const { height, width } = containerRef.value.getBoundingClientRect();
+            const W = width + deltaX;
+            const H = height + deltaY;
+            updateSizeProxy(W, "width", () => {
+              x = evtM.clientX;
+            });
+            updateSizeProxy(H, "height", () => {
+              y = evtM.clientY;
+            });
+          };
+          document.addEventListener("mousemove", resize);
+          document.onmouseup = () => {
+            document.removeEventListener("mousemove", resize);
+            changePointerEventsForIframe(false);
+            document.onmouseup = null;
+          };
+        });
+      })
+    }
+
+    onMounted(() => {
+      setDefSize();
+      if (!isNil(minW.value) && defW < minW.value) {
+        State.width = minW.value;
+      }
+      open.value && initEvents();
+    });
+
+    watch(open, (val) => {
+      val && initEvents();
+    });
+
+    return {
+      style,
+      containerRef,
+      handleRef,
+    };
+  }
+}));
+</script>
+<style lang="less" scoped>
+.scale-container {
+  position: relative;
+  .scale-handle {
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    z-index: 999;
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+    user-select: none;
+  }
+}
+</style>
+<style lang="less">
+.disabled-pointer-events {
+  pointer-events: none !important;
+}
+</style>

package/packages/scale-view/NoData.vue

@@ -1,81 +1,81 @@
-<template>
-  <div class="no-data-tip NoData-page">
-    <img v-if="showImg" :src="require(`./assets/img/${noDataImg}.png`)" alt="" />
-    <p>{{ $t(noDataTip) }}</p>
-    <span v-if="handleDesc"> {{ handleDesc }}</span>
-  </div>
-</template>
-<script>
-export default {
-  name: 'NoData',
-  components: {},
-  props: {
-    noDataTip: {
-      type: String,
-      default: '1.1.6.11'
-    },
-    noDataImg: {
-      type: String,
-      default: 'nodata'
-    },
-    showImg: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {};
-  },
-
-  computed: {
-    handleDesc() {
-      let res = '';
-      switch (this.noDataImg) {
-        case 'no-permission':
-          res = '请联系管理员';
-          break;
-        case 'failure':
-          res = '请稍后再试';
-          break;
-        default:
-          break;
-      }
-      return res;
-    }
-  },
-  watch: {},
-  // 生命周期
-  created() {},
-  mounted() {},
-
-  // 方法
-  methods: {}
-};
-</script>
-<style lang="less" scoped>
-.no-data-tip {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  color: #333333;
-  font-size: 22px;
-  > img {
-    max-width: 70%;
-    width: 260px;
-  }
-  > p {
-    margin-top: 12px;
-    margin-bottom: 0;
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.8);
-  }
-  > span {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.4);
-    margin-top: 6px;
-  }
-}
-</style>
+<template>
+  <div class="no-data-tip NoData-page">
+    <img v-if="showImg" :src="require(`./assets/img/${noDataImg}.png`)" alt="" />
+    <p>{{ $t(noDataTip) }}</p>
+    <span v-if="handleDesc"> {{ handleDesc }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'NoData',
+  components: {},
+  props: {
+    noDataTip: {
+      type: String,
+      default: '1.1.6.11'
+    },
+    noDataImg: {
+      type: String,
+      default: 'nodata'
+    },
+    showImg: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {};
+  },
+
+  computed: {
+    handleDesc() {
+      let res = '';
+      switch (this.noDataImg) {
+        case 'no-permission':
+          res = '请联系管理员';
+          break;
+        case 'failure':
+          res = '请稍后再试';
+          break;
+        default:
+          break;
+      }
+      return res;
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {},
+
+  // 方法
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+.no-data-tip {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #333333;
+  font-size: 22px;
+  > img {
+    max-width: 70%;
+    width: 260px;
+  }
+  > p {
+    margin-top: 12px;
+    margin-bottom: 0;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.8);
+  }
+  > span {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.4);
+    margin-top: 6px;
+  }
+}
+</style>