tianheng-ui 0.1.82 → 0.1.84

package/packages/FormMaking/WidgetForm.vue

@@ -1,145 +1,145 @@
-<template>
-  <div class="widgetForm" ref="formContainer">
-    <th-empty
-      v-if="data.list.length == 0"
-      class="form-empty"
-      description="从左侧拖拽来添加字段"
-    ></th-empty>
-    <el-form
-      :class="{ isHideFormLabel: data.config.hideLabel }"
-      style="margin: 0 auto;padding:5px;height:100%;"
-      :style="{ width: formWidth }"
-      :size="data.config.size"
-      :label-suffix="data.config.labelSuffix"
-      :label-position="data.config.labelPosition"
-      :label-width="`${data.config.labelWidth}px`"
-      :disabled="data.config.disabled"
-    >
-      <draggable
-        class="draggable"
-        v-model="data.list"
-        v-bind="{
-          group: 'people',
-          animation: 200,
-          handle: '.drag-widget',
-          ghostClass: 'draggable-ghost'
-        }"
-        @add="handleWidgetAdd"
-      >
-        <transition-group name="fade" tag="div" class="draggable-list">
-          <widget-form-item
-            v-for="(element, elementIndex) in widgetList"
-            :key="element.key"
-            :widget="element"
-            :widgetArray="data.list"
-            :widgetIndex="elementIndex"
-            :config="data.config"
-            :select.sync="selectWidget"
-          ></widget-form-item>
-        </transition-group>
-      </draggable>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import { deepClone } from "./util/index";
-import Draggable from "vuedraggable";
-import WidgetFormItem from "./WidgetFormItem.vue";
-
-export default {
-  components: { Draggable, WidgetFormItem },
-  props: ["data", "select", "client"],
-  data() {
-    return {
-      selectWidget: this.select,
-      config: {}
-    };
-  },
-  watch: {
-    select(val) {
-      this.selectWidget = val;
-    },
-    selectWidget: {
-      handler(val) {
-        this.$emit("update:select", val);
-      },
-      deep: true
-    }
-  },
-  computed: {
-    widgetList() {
-      return this.data.list.filter(item => {
-        return item.key;
-      });
-    },
-    formWidth() {
-      if (this.data.config.width) return this.data.config.width;
-      if (this.client === "mobile") return "375px";
-
-      return "";
-    }
-  },
-  mounted() {
-    document.body.ondrop = function(event) {
-      let s = navigator.userAgent;
-      let isFirefox =
-        typeof s === "string"
-          ? s.toLowerCase().indexOf("firefox") > -1
-          : s.indexOf("firefox") > -1;
-      if (isFirefox) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    };
-  },
-  methods: {
-    handleSelectWidget(index) {
-      this.selectWidget = this.data.list[index];
-    },
-    handleWidgetAdd(evt) {
-      const newIndex = evt.newIndex;
-      let newComponent = deepClone(this.data.list[newIndex]);
-      //为拖拽到容器的元素添加唯一 key
-      if (!newComponent.key) {
-        const key =
-          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-        newComponent.key = key;
-        newComponent.model = newComponent.type + "_" + key;
-      }
-
-      this.$set(this.data.list, newIndex, newComponent);
-      this.selectWidget = this.data.list[newIndex];
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.widgetForm {
-  position: relative;
-  width: 100%;
-  height: calc(100% - 45px);
-  overflow-y: overlay;
-
-  .form-empty {
-    position: absolute;
-    text-align: center;
-    width: 400px;
-    top: 200px;
-    left: 50%;
-    margin-left: -200px;
-    color: #ccc;
-
-    .th-empty-description {
-      font-size: 20px;
-    }
-  }
-  .draggable {
-    height: 100%;
-    .draggable-list {
-      min-height: 100%;
-    }
-  }
-}
-</style>
+<template>
+  <div class="widgetForm" ref="formContainer">
+    <th-empty
+      v-if="data.list.length == 0"
+      class="form-empty"
+      description="从左侧拖拽来添加字段"
+    ></th-empty>
+    <el-form
+      :class="{ isHideFormLabel: data.config.hideLabel }"
+      style="margin: 0 auto;padding:5px;height:100%;"
+      :style="{ width: formWidth }"
+      :size="data.config.size"
+      :label-suffix="data.config.labelSuffix"
+      :label-position="data.config.labelPosition"
+      :label-width="`${data.config.labelWidth}px`"
+      :disabled="data.config.disabled"
+    >
+      <draggable
+        class="draggable"
+        v-model="data.list"
+        v-bind="{
+          group: 'people',
+          animation: 200,
+          handle: '.drag-widget',
+          ghostClass: 'draggable-ghost'
+        }"
+        @add="handleWidgetAdd"
+      >
+        <transition-group name="fade" tag="div" class="draggable-list">
+          <widget-form-item
+            v-for="(element, elementIndex) in widgetList"
+            :key="element.key"
+            :widget="element"
+            :widgetArray="data.list"
+            :widgetIndex="elementIndex"
+            :config="data.config"
+            :select.sync="selectWidget"
+          ></widget-form-item>
+        </transition-group>
+      </draggable>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { deepClone } from "./util/index";
+import Draggable from "vuedraggable";
+import WidgetFormItem from "./WidgetFormItem.vue";
+
+export default {
+  components: { Draggable, WidgetFormItem },
+  props: ["data", "select", "client"],
+  data() {
+    return {
+      selectWidget: this.select,
+      config: {}
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    widgetList() {
+      return this.data.list.filter(item => {
+        return item.key;
+      });
+    },
+    formWidth() {
+      if (this.data.config.width) return this.data.config.width;
+      if (this.client === "mobile") return "375px";
+
+      return "";
+    }
+  },
+  mounted() {
+    document.body.ondrop = function(event) {
+      let s = navigator.userAgent;
+      let isFirefox =
+        typeof s === "string"
+          ? s.toLowerCase().indexOf("firefox") > -1
+          : s.indexOf("firefox") > -1;
+      if (isFirefox) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+  },
+  methods: {
+    handleSelectWidget(index) {
+      this.selectWidget = this.data.list[index];
+    },
+    handleWidgetAdd(evt) {
+      const newIndex = evt.newIndex;
+      let newComponent = deepClone(this.data.list[newIndex]);
+      //为拖拽到容器的元素添加唯一 key
+      if (!newComponent.key) {
+        const key =
+          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+        newComponent.key = key;
+        newComponent.model = newComponent.type + "_" + key;
+      }
+
+      this.$set(this.data.list, newIndex, newComponent);
+      this.selectWidget = this.data.list[newIndex];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.widgetForm {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 45px);
+  overflow-y: overlay;
+
+  .form-empty {
+    position: absolute;
+    text-align: center;
+    width: 400px;
+    top: 200px;
+    left: 50%;
+    margin-left: -200px;
+    color: #ccc;
+
+    .th-empty-description {
+      font-size: 20px;
+    }
+  }
+  .draggable {
+    height: 100%;
+    .draggable-list {
+      min-height: 100%;
+    }
+  }
+}
+</style>

package/packages/FormMaking/custom/register.js

@@ -1,43 +1,43 @@
-//在此注册组件
-import {
-  basicComponents,
-  advanceComponents,
-  layoutComponents,
-  businessComponents
-} from "./config";
-
-let compsData = {};
-for (const config of basicComponents) {
-  compsData[config.type] = {
-    name: config.name,
-    type: config.type,
-    config: config,
-    content: null
-  };
-}
-for (const config of advanceComponents) {
-  compsData[config.type] = {
-    name: config.name,
-    type: config.type,
-    config: config,
-    content: null
-  };
-}
-for (const config of layoutComponents) {
-  compsData[config.type] = {
-    name: config.name,
-    type: config.type,
-    config: config,
-    content: null
-  };
-}
-for (const config of businessComponents) {
-  compsData[config.type] = {
-    name: config.name,
-    type: config.type,
-    config: config,
-    content: null
-  };
-}
-
-export default compsData;
+//在此注册组件
+import {
+  basicComponents,
+  advanceComponents,
+  layoutComponents,
+  businessComponents
+} from "./config";
+
+let compsData = {};
+for (const config of basicComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+for (const config of advanceComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+for (const config of layoutComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+for (const config of businessComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+
+export default compsData;