qgb-process 0.2.3 → 0.2.7

package/src/views/formBuilder/index.vue

@@ -1,242 +1,242 @@
-<!--
- * @Author: Yxj
- * @LastEditors: Yxj
- * @Date: 2020-04-07 13:45:45
- * @LastEditTime: 2021-08-02 11:44:08
- * @Description: file content
- * @FilePath: \src\views\formBuilder\index.vue
--->
-<template>
-
-  <div class="builder-container">
-    <!-- <div class="component-title">
-      <h4>{{title}}</h4>
-      <div class="tab">
-        <span
-          :class="activeName == 1 ? 'active' : ''"
-          @click="tab = 1 "
-        >表单设计</span>
-        <span
-          :class="activeName == 2 ? 'active' : ''"
-          @click="tab =2 "
-        >列表设计</span>
-        <span
-          :class="activeName == 3 ? 'active' : ''"
-          @click="tab =3"
-        >审批设置</span>
-      </div>
-    </div> -->
-    <!-- <div class="aside">
-      <NewLeftMenu  />
-    </div> -->
-    <!-- <div class="aside"> -->
-      <div class="aside"  v-show="$store.state.formBuilderActive==1">
-      <menu-config ref="menu" />
-    </div>
-    <div class="main">
-      <div class="main-content">
-        <app-main
-          v-show="formBuilder.menuId && getMenu()"
-          ref="AppMain"
-        ></app-main>
-        <div
-          v-show="$store.state.formBuilder.currentMenu =='' && getSubMenu()"
-          ref="AppMain2"
-          class="empty"
-        >
-          <div style="text-align:center"><img
-              src="@/assets/zanwushuju-2@2x.png"
-              alt=""
-              srcset=""
-            >
-            <p>请新增/选择一个表单，开始设计</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="app-main-right"
-      v-show='$store.state.formBuilderActive == 1'
-    >
-      <app-main-right ref="MainRight" />
-    </div>
-
-  </div>
-</template>
-
-<script>
-import AppMain from "@/formBuilder/components/app-main/index";
-import AppMainRight from "@/formBuilder/components/app-main/components/main-right/index";
-import menuConfig from "./components/menuConfig";
-import { mapState } from "vuex";
-
-export default {
-  name: "FormBuilder",
-  components: {
-    AppMain,
-    menuConfig,
-    AppMainRight
-  },
-  data() {
-    return {
-      tab: 1,
-      leftWidth: "30%",
-      activeTab: "0",
-      activeName: 1
-    };
-  },
-  computed: {
-    ...mapState(["formBuilder"]),
-    getMenu() {
-      return function(param) {
-        if (this.$store.state.menuList.length == 1) {
-          if (this.$store.state.menuList[0].subMenu.length <= 0) {
-            return false;
-          } else {
-            return true;
-          }
-        } else if (this.$store.state.menuList.length == 0) {
-          return false;
-        } else {
-          return true;
-        }
-      };
-    },
-    getSubMenu() {
-      return function(param) {
-        if (this.$store.state.menuList.length == 1) {
-          if (
-            this.$store.state.menuList[0].subMenu.length <= 0 &&
-            this.$store.state.formBuilder.currentMenu ==
-              this.$store.state.menuList[0].subMenu.id
-          ) {
-            return false;
-          } else {
-            return true;
-          }
-        } else if (this.$store.state.menuList.length == 0) {
-          return true;
-        } else {
-          return true;
-        }
-      };
-    },
-    title() {
-      return this.$store.state.formBuilder.name;
-    }
-  },
-  mounted() {
-    const vm = this;
-  },
-  watch: {}
-};
-</script>
-
-<style lang="scss">
-.empty {
-  margin: 0 auto;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #969696;
-  div {
-  }
-}
-.tab_right {
-  width: 280px;
-  margin-left: 10px;
-  background-color: #fff;
-  padding: 20px 20px 60px 20px;
-  overflow: auto;
-  h4 {
-    margin: 0;
-    color: #409eff;
-    text-align: center;
-    margin-bottom: 10px;
-    font-size: 18px;
-    font-weight: 400;
-  }
-  ul {
-    margin: 0;
-    padding: 6px 10px;
-    li {
-      padding: 6px 10px;
-      display: flex;
-      justify-content: space-between;
-      &:hover {
-        background-color: rgba(30, 101, 255, 0.05);
-        i {
-          display: block;
-        }
-      }
-      i {
-        cursor: pointer;
-        display: none;
-      }
-    }
-  }
-  .condition {
-    display: flex;
-    justify-content: space-between;
-    & > span {
-      font-weight: 600;
-    }
-  }
-  .field-list {
-    padding: 8px 0 20px 10px;
-    overflow: auto;
-    .sub-form {
-      padding-left: 20px;
-    }
-  }
-}
-.builder-container {
-  display: flex;
-  overflow: hidden;
-  height: 100%;
-  background-color: #f5f5f5;
-::-webkit-scrollbar
-{
-    width:3px;
-    height:3px;
-    background-color:#F5F5F5;
-}
-  .aside {
-
-    height: 100%;
-    width: 270px;
-    overflow-y: auto;
-    // margin-top: 10px;
-    background-color: #ffffff;
-
-  }
-  .main {
-    height: 100%;
-    width: 30%;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 0px 0px 0 10px;
-    overflow-x: hidden;
-    .main-content {
-      flex: 1;
-      overflow-x: hidden;
-      background-color: #ffffff;
-      .view-router {
-        height: 100%;
-        overflow-y: auto;
-        overflow-x: hidden;
-        background-color: white;
-      }
-    }
-  }
-  .app-main-right {
-    background-color: #ffffff;
-    width: 350px;
-    // margin-top: 10px;
-    margin-left: 10px;
-  }
-}
-</style>
-
+<!--
+ * @Author: Yxj
+ * @LastEditors: Yxj
+ * @Date: 2020-04-07 13:45:45
+ * @LastEditTime: 2021-08-02 11:44:08
+ * @Description: file content
+ * @FilePath: \src\views\formBuilder\index.vue
+-->
+<template>
+
+  <div class="builder-container">
+    <!-- <div class="component-title">
+      <h4>{{title}}</h4>
+      <div class="tab">
+        <span
+          :class="activeName == 1 ? 'active' : ''"
+          @click="tab = 1 "
+        >表单设计</span>
+        <span
+          :class="activeName == 2 ? 'active' : ''"
+          @click="tab =2 "
+        >列表设计</span>
+        <span
+          :class="activeName == 3 ? 'active' : ''"
+          @click="tab =3"
+        >审批设置</span>
+      </div>
+    </div> -->
+    <!-- <div class="aside">
+      <NewLeftMenu  />
+    </div> -->
+    <!-- <div class="aside"> -->
+      <div class="aside"  v-show="$store.state.formBuilderActive==1">
+      <menu-config ref="menu" />
+    </div>
+    <div class="main">
+      <div class="main-content">
+        <app-main
+          v-show="formBuilder.menuId && getMenu()"
+          ref="AppMain"
+        ></app-main>
+        <div
+          v-show="$store.state.formBuilder.currentMenu =='' && getSubMenu()"
+          ref="AppMain2"
+          class="empty"
+        >
+          <div style="text-align:center"><img
+              src="@/assets/zanwushuju-2@2x.png"
+              alt=""
+              srcset=""
+            >
+            <p>请新增/选择一个表单，开始设计</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="app-main-right"
+      v-show='$store.state.formBuilderActive == 1'
+    >
+      <app-main-right ref="MainRight" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+import AppMain from "@/formBuilder/components/app-main/index";
+import AppMainRight from "@/formBuilder/components/app-main/components/main-right/index";
+import menuConfig from "./components/menuConfig";
+import { mapState } from "vuex";
+
+export default {
+  name: "FormBuilder",
+  components: {
+    AppMain,
+    menuConfig,
+    AppMainRight
+  },
+  data() {
+    return {
+      tab: 1,
+      leftWidth: "30%",
+      activeTab: "0",
+      activeName: 1
+    };
+  },
+  computed: {
+    ...mapState(["formBuilder"]),
+    getMenu() {
+      return function(param) {
+        if (this.$store.state.menuList.length == 1) {
+          if (this.$store.state.menuList[0].subMenu.length <= 0) {
+            return false;
+          } else {
+            return true;
+          }
+        } else if (this.$store.state.menuList.length == 0) {
+          return false;
+        } else {
+          return true;
+        }
+      };
+    },
+    getSubMenu() {
+      return function(param) {
+        if (this.$store.state.menuList.length == 1) {
+          if (
+            this.$store.state.menuList[0].subMenu.length <= 0 &&
+            this.$store.state.formBuilder.currentMenu ==
+              this.$store.state.menuList[0].subMenu.id
+          ) {
+            return false;
+          } else {
+            return true;
+          }
+        } else if (this.$store.state.menuList.length == 0) {
+          return true;
+        } else {
+          return true;
+        }
+      };
+    },
+    title() {
+      return this.$store.state.formBuilder.name;
+    }
+  },
+  mounted() {
+    const vm = this;
+  },
+  watch: {}
+};
+</script>
+
+<style lang="scss">
+.empty {
+  margin: 0 auto;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #969696;
+  div {
+  }
+}
+.tab_right {
+  width: 280px;
+  margin-left: 10px;
+  background-color: #fff;
+  padding: 20px 20px 60px 20px;
+  overflow: auto;
+  h4 {
+    margin: 0;
+    color: #409eff;
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 18px;
+    font-weight: 400;
+  }
+  ul {
+    margin: 0;
+    padding: 6px 10px;
+    li {
+      padding: 6px 10px;
+      display: flex;
+      justify-content: space-between;
+      &:hover {
+        background-color: rgba(30, 101, 255, 0.05);
+        i {
+          display: block;
+        }
+      }
+      i {
+        cursor: pointer;
+        display: none;
+      }
+    }
+  }
+  .condition {
+    display: flex;
+    justify-content: space-between;
+    & > span {
+      font-weight: 600;
+    }
+  }
+  .field-list {
+    padding: 8px 0 20px 10px;
+    overflow: auto;
+    .sub-form {
+      padding-left: 20px;
+    }
+  }
+}
+.builder-container {
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  background-color: #f5f5f5;
+::-webkit-scrollbar
+{
+    width:3px;
+    height:3px;
+    background-color:#F5F5F5;
+}
+  .aside {
+
+    height: 100%;
+    width: 270px;
+    overflow-y: auto;
+    // margin-top: 10px;
+    background-color: #ffffff;
+
+  }
+  .main {
+    height: 100%;
+    width: 30%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 0px 0px 0 10px;
+    overflow-x: hidden;
+    .main-content {
+      flex: 1;
+      overflow-x: hidden;
+      background-color: #ffffff;
+      .view-router {
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        background-color: white;
+      }
+    }
+  }
+  .app-main-right {
+    background-color: #ffffff;
+    width: 350px;
+    // margin-top: 10px;
+    margin-left: 10px;
+  }
+}
+</style>
+