qgb-process 0.2.3 → 0.2.7

package/src/formBuilder/components/app-main/components/main-left.vue

@@ -1,179 +1,179 @@
-<template>
-  <div>
-    <div v-if="filteredComps.length === 0">
-      <p class="no-comps-text">未找到相关组件~</p>
-    </div>
-    <div class="app-main-content">
-      <el-card
-        :body-style="{ padding: '10px' }"
-        :header="comp.title"
-        :key="comp.title"
-        shadow="never"
-        style="border: none;"
-        v-for="comp of filteredComps"
-      >
-        <draggable
-          :clone="addFormItem"
-          :group="{ name: 'form', pull: 'clone', put: false, }"
-          :list="comp.comps"
-          :disabled="false"
-          chosen-class="chosen"
-          drag-class='chosen'
-          :sort="false"
-          filter='.nodraggable'
-        >
-          <template v-for="item of comp.comps">
-            <div
-              :key="item.type+item.label"
-              class="type-item"
-              :class="{'nodraggable' : !item.type}"
-            >
-              <!-- <div class="type-item-title">{{ item.type }}</div> -->
-
-              <div class='iconMenuBox' v-if="comp.title!=='业务组件'"><span :class="[getIcon(item.type),'iconMenu']"></span>{{ item.label }}</div>
-              <div class='iconMenuBox' v-else><span :class="[getIcon('columns'),'iconMenu']"></span>{{item.label}}</div>
-            </div>
-          </template>
-        </draggable>
-      </el-card>
-    </div>
-  </div>
-</template>
-
-<script>
-import comps from "@/formBuilder/comps";
-import { addFormItem } from "@/formBuilder/tool.js";
-// import draggable from "vuedraggable";
-const draggable = () => ({
-  // 需要加载的组件 (应该是一个 `Promise` 对象)
-  component: import("vuedraggable"),
-  // 异步组件加载时使用的组件
-  loading: "",
-  // 加载失败时使用的组件
-  error: "",
-  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
-  delay: 200,
-  // 如果提供了超时时间且组件加载也超时了，
-  // 则使用加载失败时使用的组件。默认值是：`Infinity`
-  timeout: 3000
-});
-import _ from "lodash-es";
-import SvgIcon from "@/components/SvgIcon";
-
-export default {
-  name: "AppMainLeft",
-  components: {
-    draggable,
-    SvgIcon
-  },
-  data() {
-    return {
-      searchValue: ""
-    };
-  },
-  computed: {
-    getIcon(type) {
-      return function(type) {
-        if (type == "cascader") {
-          return "icon-select";
-        } else if (type == "date") {
-          return "icon-datetime";
-        } else  if (type == "daterange") {
-          return "icon-datetimerange";
-        } else {
-          return "icon-" + type;
-        }
-      };
-    },
-    filteredComps() {
-      const keyword = _.toLower(this.searchValue);
-      if (!keyword) {
-        return comps;
-      } else {
-        const newComps = comps.map(x => {
-          // 匹配 type 或者 label，匹配上就返回该项
-          const newInnerComps = _.filter(
-            x.comps,
-            x => x.type.includes(keyword) || x.type.includes(keyword)
-          );
-          return { ...x, comps: newInnerComps };
-        });
-        return newComps.filter(x => x.comps.length > 0);
-      }
-    }
-  },
-  methods: {
-    dragstart(e) {},
-    dragend(e) {},
-    // 拖拽后的数据
-    addFormItem({ label, type }) {
-      return addFormItem({ label, type, field: "key_" + Date.now() });
-    }
-  }
-};
-</script>
-
-<style lang='scss' >
-
-
-.iconMenu {
-  display: inline-block;
-  width: 16px;
-  margin-right: 12px;
-}
-
-.type-item.ghost {
-  height: 80px;
-  width: 100% !important;
-  background-color: rgb(230, 247, 255);
-}
-/* .ghost {
-  opacity: 0.5;
-  background: rgb(106, 188, 232);
-}
-.chosen {
-  opacity: 0.5;
-  background: blue;
-} */
-.search-comps {
-  padding: 10px;
-  border-bottom: 1px solid #eee;
-}
-.app-main-content .el-card__header {
-  padding: 10px 20px;
-}
-.type-item {
-  width: 110px;
-  color: #606266;
-  cursor: move;
-  //   border: 1px solid #ebeef5;
-  overflow: hidden;
-  white-space: nowrap;
-  display: inline-block;
-  text-overflow: ellipsis;
-  border-radius: 3px;
-  padding: 6px 8px;
-  box-sizing: border-box;
-  margin: 5px;
-  font-size: 14px;
-  text-align: left;
-  background-color: #f4f8fc;
-  div {
-    text-align: left;
-  }
-  &:hover {
-    cursor: move;
-  }
-}
-
-.type-item-title {
-  font-weight: bold;
-  color: #222;
-}
-.no-comps-text {
-  text-align: center;
-  color: #409eff;
-  padding-top: 50px;
-  font-size: 14px;
-}
-</style>
+<template>
+  <div>
+    <div v-if="filteredComps.length === 0">
+      <p class="no-comps-text">未找到相关组件~</p>
+    </div>
+    <div class="app-main-content">
+      <el-card
+        :body-style="{ padding: '10px' }"
+        :header="comp.title"
+        :key="comp.title"
+        shadow="never"
+        style="border: none;"
+        v-for="comp of filteredComps"
+      >
+        <draggable
+          :clone="addFormItem"
+          :group="{ name: 'form', pull: 'clone', put: false, }"
+          :list="comp.comps"
+          :disabled="false"
+          chosen-class="chosen"
+          drag-class='chosen'
+          :sort="false"
+          filter='.nodraggable'
+        >
+          <template v-for="item of comp.comps">
+            <div
+              :key="item.type+item.label"
+              class="type-item"
+              :class="{'nodraggable' : !item.type}"
+            >
+              <!-- <div class="type-item-title">{{ item.type }}</div> -->
+
+              <div class='iconMenuBox' v-if="comp.title!=='业务组件'"><span :class="[getIcon(item.type),'iconMenu']"></span>{{ item.label }}</div>
+              <div class='iconMenuBox' v-else><span :class="[getIcon('columns'),'iconMenu']"></span>{{item.label}}</div>
+            </div>
+          </template>
+        </draggable>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import comps from "@/formBuilder/comps";
+import { addFormItem } from "@/formBuilder/tool.js";
+// import draggable from "vuedraggable";
+const draggable = () => ({
+  // 需要加载的组件 (应该是一个 `Promise` 对象)
+  component: import("vuedraggable"),
+  // 异步组件加载时使用的组件
+  loading: "",
+  // 加载失败时使用的组件
+  error: "",
+  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
+  delay: 200,
+  // 如果提供了超时时间且组件加载也超时了，
+  // 则使用加载失败时使用的组件。默认值是：`Infinity`
+  timeout: 3000
+});
+import _ from "lodash-es";
+import SvgIcon from "@/components/SvgIcon";
+
+export default {
+  name: "AppMainLeft",
+  components: {
+    draggable,
+    SvgIcon
+  },
+  data() {
+    return {
+      searchValue: ""
+    };
+  },
+  computed: {
+    getIcon(type) {
+      return function(type) {
+        if (type == "cascader") {
+          return "icon-select";
+        } else if (type == "date") {
+          return "icon-datetime";
+        } else  if (type == "daterange") {
+          return "icon-datetimerange";
+        } else {
+          return "icon-" + type;
+        }
+      };
+    },
+    filteredComps() {
+      const keyword = _.toLower(this.searchValue);
+      if (!keyword) {
+        return comps;
+      } else {
+        const newComps = comps.map(x => {
+          // 匹配 type 或者 label，匹配上就返回该项
+          const newInnerComps = _.filter(
+            x.comps,
+            x => x.type.includes(keyword) || x.type.includes(keyword)
+          );
+          return { ...x, comps: newInnerComps };
+        });
+        return newComps.filter(x => x.comps.length > 0);
+      }
+    }
+  },
+  methods: {
+    dragstart(e) {},
+    dragend(e) {},
+    // 拖拽后的数据
+    addFormItem({ label, type }) {
+      return addFormItem({ label, type, field: "key_" + Date.now() });
+    }
+  }
+};
+</script>
+
+<style lang='scss' >
+
+
+.iconMenu {
+  display: inline-block;
+  width: 16px;
+  margin-right: 12px;
+}
+
+.type-item.ghost {
+  height: 80px;
+  width: 100% !important;
+  background-color: rgb(230, 247, 255);
+}
+/* .ghost {
+  opacity: 0.5;
+  background: rgb(106, 188, 232);
+}
+.chosen {
+  opacity: 0.5;
+  background: blue;
+} */
+.search-comps {
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+.app-main-content .el-card__header {
+  padding: 10px 20px;
+}
+.type-item {
+  width: 110px;
+  color: #606266;
+  cursor: move;
+  //   border: 1px solid #ebeef5;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  text-overflow: ellipsis;
+  border-radius: 3px;
+  padding: 6px 8px;
+  box-sizing: border-box;
+  margin: 5px;
+  font-size: 14px;
+  text-align: left;
+  background-color: #f4f8fc;
+  div {
+    text-align: left;
+  }
+  &:hover {
+    cursor: move;
+  }
+}
+
+.type-item-title {
+  font-weight: bold;
+  color: #222;
+}
+.no-comps-text {
+  text-align: center;
+  color: #409eff;
+  padding-top: 50px;
+  font-size: 14px;
+}
+</style>