qgb-process 0.2.3 → 0.2.7

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

@@ -1,329 +1,329 @@
-<template>
-  <div
-    class="container"
-    ref="AppMain"
-  >
-    <!-- <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="tab-bar">
-      <div v-show="$store.state.formBuilderActive == 1">
-        <div class="tab-line"></div>
-        <multipane
-          @paneResizeStop="handlePaneresize"
-          class="app-main"
-          ref='multipane'
-        >
-          <!-- <app-main-left
-            class="app-main-left"
-          /> -->
-
-          <!-- <multipane-resizer></multipane-resizer> -->
-          <div class="app-main-container">
-            <app-main-center class="app-main-content" />
-            <app-main-header
-              class="app-main-header"
-              ref="mainHeader"
-            />
-          </div>
-          <!-- <multipane-resizer></multipane-resizer> -->
-          <!-- <div class="app-main-right">
-            <app-main-right ref="MainRight" />
-          </div> -->
-        </multipane>
-      </div>
-      <div
-        v-if="$store.state.formBuilderActive == 2"
-        style="height: 100%"
-      >
-        <list-design></list-design>
-      </div>
-      <div v-if="$store.state.formBuilderActive == 3">
-        <process></process>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import AppMainHeader from "./components/main-header";
-import AppMainLeft from "./components/main-left";
-import AppMainCenter from "./components/main-center";
-import AppMainRight from "./components/main-right/index";
-import { Multipane, MultipaneResizer } from "vue-multipane";
-import listDesign from "./components/components/listDesign";
-import process from "@/views/formBuilder/process-2.vue";
-import dd from "@/assets/icon_warning.png";
-export default {
-  name: "AppMain",
-  components: {
-    AppMainLeft,
-    AppMainCenter,
-    AppMainHeader,
-    AppMainRight,
-    Multipane,
-    MultipaneResizer,
-    listDesign,
-    process
-  },
-  computed: {
-    title() {
-      return this.$store.state.formBuilder.name;
-    }
-  },
-  data() {
-    return {
-      tab: 1,
-      leftWidth: "30%",
-      activeTab: "0",
-      activeName: 1
-    };
-  },
-  watch: {
-    "$store.state.formBuilder": {
-      deep: true,
-      handler: function() {
-        this.activeName = 1;
-      }
-    },
-    tab: {
-      deep: true,
-      handler: function(nv, ov) {
-        this.activeName = nv;
-
-        const vm = this;
-        if (ov == 1) {
-
-          vm.$confirm(
-            `<p style='font-size:16px;font-weight:bold'>表单设计修改但未保存，是否保存后继续?</p>
-        <p style='display: block;
-    font-size: 13px;
-    height: 40px;
-    line-height: 40px;
-    color: #a5a0a0;'> 不保存将失去本次做出的修改，无法找回</p>`,
-            "保存确认",
-            {
-              confirmButtonText: "保存并继续",
-              cancelButtonText: "不保存",
-              dangerouslyUseHTMLString: true,
-              closeOnClickModal: false,
-              closeOnPressEscape: false,
-              showClose: false,
-
-              type: "warning"
-            }
-          )
-            .then(() => {
-              vm.activeName = nv;
-              vm.$refs.mainHeader.saveDate();
-              //   vm.$message({
-              //     type: "success",
-              //     message: "保存成功!"
-              //   });
-            })
-            .catch(() => {
-              vm.activeName = nv;
-              //   vm.$message({
-              //     type: "info",
-              //     message: "已取消保存"
-              //   });
-            });
-        } else {
-          vm.activeName = nv;
-        }
-      }
-    }
-  },
-  methods: {
-    changeTab(flag) {
-      const vm = this;
-      console.log(flag);
-      if (flag == 2 || flag == 3) {
-        vm.$confirm(
-          `<p style='font-size:16px;font-weight:bold'>表单设计修改但未保存，是否保存后继续?</p>
-        <p style='display: block;
-    font-size: 13px;
-    height: 40px;
-    line-height: 40px;
-    color: #a5a0a0;'> 不保存将失去本次做出的修改，无法找回</p>`,
-          "保存确认",
-          {
-            confirmButtonText: "保存并继续",
-            cancelButtonText: "不保存",
-            dangerouslyUseHTMLString: true,
-            closeOnClickModal: false,
-            closeOnPressEscape: false,
-            showClose: false,
-
-            type: "warning"
-          }
-        )
-          .then(() => {
-            vm.activeName = flag;
-            vm.$refs.mainHeader.saveDate();
-            //   vm.$message({
-            //     type: "success",
-            //     message: "保存成功!"
-            //   });
-          })
-          .catch(() => {
-            vm.activeName = flag;
-            //   vm.$message({
-            //     type: "info",
-            //     message: "已取消保存"
-            //   });
-          });
-      } else {
-        vm.activeName = flag;
-      }
-    },
-    handlePaneresize(el) {
-      if (!this.$isVscode && el.className === "app-main-left") {
-        localStorage.setItem("app-main-left", el.style.width);
-      }
-    }
-  },
-  mounted() {
-    if (!this.$isVscode && localStorage.getItem("app-main-left")) {
-      this.leftWidth = localStorage.getItem("app-main-left");
-    }
-  }
-};
-</script>
-
-<style>
-.app-main {
-  height: calc(100vh - 80px);
-  /* overflow: hidden; */
-}
-
-.app-main-content {
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 20px;
-  box-sizing: border-box;
-}
-.app-main-container > .app-main-content {
-  padding: 0px 10px 60px 10px;
-}
-.app-main-header {
-position: fixed;
-    width: 31%;
-    top: -2px;
-    /* left: 0; */
-    right: 0;
-}
-
-.app-main-left {
-  /* width: 17%; */
-  line-height: 1.5em;
-  height: 100%;
-}
-
-.app-main-container {
-  /* flex-grow: 1;
-  flex: 2;
-  flex-basis: 0; */
-  width: 100%;
-}
-
-.app-main-right {
-  /* width: 17%; */
-  width: 350px;
-}
-
-.app-main > .multipane-resizer {
-  margin: 0;
-  left: 0;
-  position: relative;
-  border-left: 1px solid #ebeef5;
-  border-right: 1px solid #ebeef5;
-  width: 8px;
-}
-.app-main > .multipane-resizer::before {
-  display: block;
-  content: "";
-  width: 1px;
-  height: 40px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -20px;
-  margin-left: -1.5px;
-  border-left: 1px solid #ebeef5;
-  border-right: 1px solid #ebeef5;
-}
-.app-main > .multipane-resizer::before::before {
-  border-color: #999;
-}
-</style>
-<style lang="scss" scoped>
-.container {
-  position: relative;
-  height: 100%;
-  overflow-y: scroll !important;
-  .component-title {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    border-bottom: 1px solid #dcdfe6;
-    height: 50px;
-    line-height: 50px;
-    font-size: 20px;
-    background-color: #fff;
-    z-index: 1;
-    display: flex;
-    h4 {
-      margin: 0;
-      font-weight: normal;
-      padding-left: 40px;
-      width: 200px;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-    .tab {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      span {
-        width: 80px;
-        margin: 0 10px;
-        display: block;
-        text-align: center;
-        cursor: pointer;
-        border-bottom: 2px solid transparent;
-        &.active {
-          border-bottom: 2px solid #3a8ee6;
-          color: #409eff;
-        }
-      }
-    }
-  }
-  .tab-bar {
-    width: 100%;
-    height: 100%;
-    // padding-top: 50px;
-  }
-  .tab-line {
-    height: 10px;
-    background-color: #f5f5f5;
-  }
-}
-</style>
+<template>
+  <div
+    class="container"
+    ref="AppMain"
+  >
+    <!-- <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="tab-bar">
+      <div v-show="$store.state.formBuilderActive == 1">
+        <div class="tab-line"></div>
+        <multipane
+          @paneResizeStop="handlePaneresize"
+          class="app-main"
+          ref='multipane'
+        >
+          <!-- <app-main-left
+            class="app-main-left"
+          /> -->
+
+          <!-- <multipane-resizer></multipane-resizer> -->
+          <div class="app-main-container">
+            <app-main-center class="app-main-content" />
+            <app-main-header
+              class="app-main-header"
+              ref="mainHeader"
+            />
+          </div>
+          <!-- <multipane-resizer></multipane-resizer> -->
+          <!-- <div class="app-main-right">
+            <app-main-right ref="MainRight" />
+          </div> -->
+        </multipane>
+      </div>
+      <div
+        v-if="$store.state.formBuilderActive == 2"
+        style="height: 100%"
+      >
+        <list-design></list-design>
+      </div>
+      <div v-if="$store.state.formBuilderActive == 3">
+        <process></process>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AppMainHeader from "./components/main-header";
+import AppMainLeft from "./components/main-left";
+import AppMainCenter from "./components/main-center";
+import AppMainRight from "./components/main-right/index";
+import { Multipane, MultipaneResizer } from "vue-multipane";
+import listDesign from "./components/components/listDesign";
+import process from "@/views/formBuilder/process-2.vue";
+import dd from "@/assets/icon_warning.png";
+export default {
+  name: "AppMain",
+  components: {
+    AppMainLeft,
+    AppMainCenter,
+    AppMainHeader,
+    AppMainRight,
+    Multipane,
+    MultipaneResizer,
+    listDesign,
+    process
+  },
+  computed: {
+    title() {
+      return this.$store.state.formBuilder.name;
+    }
+  },
+  data() {
+    return {
+      tab: 1,
+      leftWidth: "30%",
+      activeTab: "0",
+      activeName: 1
+    };
+  },
+  watch: {
+    "$store.state.formBuilder": {
+      deep: true,
+      handler: function() {
+        this.activeName = 1;
+      }
+    },
+    tab: {
+      deep: true,
+      handler: function(nv, ov) {
+        this.activeName = nv;
+
+        const vm = this;
+        if (ov == 1) {
+
+          vm.$confirm(
+            `<p style='font-size:16px;font-weight:bold'>表单设计修改但未保存，是否保存后继续?</p>
+        <p style='display: block;
+    font-size: 13px;
+    height: 40px;
+    line-height: 40px;
+    color: #a5a0a0;'> 不保存将失去本次做出的修改，无法找回</p>`,
+            "保存确认",
+            {
+              confirmButtonText: "保存并继续",
+              cancelButtonText: "不保存",
+              dangerouslyUseHTMLString: true,
+              closeOnClickModal: false,
+              closeOnPressEscape: false,
+              showClose: false,
+
+              type: "warning"
+            }
+          )
+            .then(() => {
+              vm.activeName = nv;
+              vm.$refs.mainHeader.saveDate();
+              //   vm.$message({
+              //     type: "success",
+              //     message: "保存成功!"
+              //   });
+            })
+            .catch(() => {
+              vm.activeName = nv;
+              //   vm.$message({
+              //     type: "info",
+              //     message: "已取消保存"
+              //   });
+            });
+        } else {
+          vm.activeName = nv;
+        }
+      }
+    }
+  },
+  methods: {
+    changeTab(flag) {
+      const vm = this;
+      console.log(flag);
+      if (flag == 2 || flag == 3) {
+        vm.$confirm(
+          `<p style='font-size:16px;font-weight:bold'>表单设计修改但未保存，是否保存后继续?</p>
+        <p style='display: block;
+    font-size: 13px;
+    height: 40px;
+    line-height: 40px;
+    color: #a5a0a0;'> 不保存将失去本次做出的修改，无法找回</p>`,
+          "保存确认",
+          {
+            confirmButtonText: "保存并继续",
+            cancelButtonText: "不保存",
+            dangerouslyUseHTMLString: true,
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            showClose: false,
+
+            type: "warning"
+          }
+        )
+          .then(() => {
+            vm.activeName = flag;
+            vm.$refs.mainHeader.saveDate();
+            //   vm.$message({
+            //     type: "success",
+            //     message: "保存成功!"
+            //   });
+          })
+          .catch(() => {
+            vm.activeName = flag;
+            //   vm.$message({
+            //     type: "info",
+            //     message: "已取消保存"
+            //   });
+          });
+      } else {
+        vm.activeName = flag;
+      }
+    },
+    handlePaneresize(el) {
+      if (!this.$isVscode && el.className === "app-main-left") {
+        localStorage.setItem("app-main-left", el.style.width);
+      }
+    }
+  },
+  mounted() {
+    if (!this.$isVscode && localStorage.getItem("app-main-left")) {
+      this.leftWidth = localStorage.getItem("app-main-left");
+    }
+  }
+};
+</script>
+
+<style>
+.app-main {
+  height: calc(100vh - 80px);
+  /* overflow: hidden; */
+}
+
+.app-main-content {
+  height: 100%;
+  overflow-y: auto;
+  padding-bottom: 20px;
+  box-sizing: border-box;
+}
+.app-main-container > .app-main-content {
+  padding: 0px 10px 60px 10px;
+}
+.app-main-header {
+position: fixed;
+    width: 31%;
+    top: -2px;
+    /* left: 0; */
+    right: 0;
+}
+
+.app-main-left {
+  /* width: 17%; */
+  line-height: 1.5em;
+  height: 100%;
+}
+
+.app-main-container {
+  /* flex-grow: 1;
+  flex: 2;
+  flex-basis: 0; */
+  width: 100%;
+}
+
+.app-main-right {
+  /* width: 17%; */
+  width: 350px;
+}
+
+.app-main > .multipane-resizer {
+  margin: 0;
+  left: 0;
+  position: relative;
+  border-left: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+  width: 8px;
+}
+.app-main > .multipane-resizer::before {
+  display: block;
+  content: "";
+  width: 1px;
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -20px;
+  margin-left: -1.5px;
+  border-left: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+}
+.app-main > .multipane-resizer::before::before {
+  border-color: #999;
+}
+</style>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  height: 100%;
+  overflow-y: scroll !important;
+  .component-title {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    border-bottom: 1px solid #dcdfe6;
+    height: 50px;
+    line-height: 50px;
+    font-size: 20px;
+    background-color: #fff;
+    z-index: 1;
+    display: flex;
+    h4 {
+      margin: 0;
+      font-weight: normal;
+      padding-left: 40px;
+      width: 200px;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .tab {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        width: 80px;
+        margin: 0 10px;
+        display: block;
+        text-align: center;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        &.active {
+          border-bottom: 2px solid #3a8ee6;
+          color: #409eff;
+        }
+      }
+    }
+  }
+  .tab-bar {
+    width: 100%;
+    height: 100%;
+    // padding-top: 50px;
+  }
+  .tab-line {
+    height: 10px;
+    background-color: #f5f5f5;
+  }
+}
+</style>