@web-utils/component 2.7.30 → 2.7.31

package/dist/components/form-view/index.js

@@ -1,24 +1,30 @@
-var __async = (__this, __arguments, generator) => new Promise((resolve, reject) => {
-  var fulfilled = (value) => {
-    try {
-      step(generator.next(value));
-    } catch (e) {
-      reject(e);
-    }
-  }, rejected = (value) => {
-    try {
-      step(generator.throw(value));
-    } catch (e) {
-      reject(e);
-    }
-  }, step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-  step((generator = generator.apply(__this, __arguments)).next());
-});
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { hasOwn, toStringArray, animate, isInContainer } from "@web-utils/core";
 import { merge } from "@web-utils/integrations/lodash";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     class: ["form-view", _vm.className]
   }, [_vm.showToolbar ? _c("div", {
@@ -32,14 +38,14 @@ var render = function() {
   }, [_vm._t("form-view-toolbar", function() {
     return [_c("Toolbar", _vm._g(_vm._b({
       on: {
-        edit: _vm.onEdit
+        "edit": _vm.onEdit
       },
       scopedSlots: _vm._u([{
         key: "default",
         fn: function(_ref) {
           var buttons = _ref.buttons;
           return [_vm._t("toolbar-button", null, {
-            buttons
+            "buttons": buttons
           })];
         }
       }, _vm._l(_vm.getToolbarSlotKeys(), function(item) {
@@ -48,18 +54,18 @@ var render = function() {
           fn: function() {
             return [_vm._t(item)];
           },
-          proxy: !0
+          proxy: true
         };
       }), {
         key: "toolbar-right",
         fn: function() {
           return [_vm._t("toolbar-right")];
         },
-        proxy: !0
-      }], null, !0)
+        proxy: true
+      }], null, true)
     }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
       buttons: _vm.toolbarButtons
-    }), !1), _vm.toolbarListeners))];
+    }), false), _vm.toolbarListeners))];
   })], 2) : _vm._e(), _c("div", {
     directives: [{
       name: "show",
@@ -72,7 +78,7 @@ var render = function() {
     ref: "formScroller",
     class: ["form-scroller", "absolute-box", _vm.contentClass],
     on: {
-      scroll: _vm.onFormScroll
+      "scroll": _vm.onFormScroll
     }
   }, [_vm.notForm ? _c("div", {
     staticClass: "not-form",
@@ -89,15 +95,15 @@ var render = function() {
     })];
   }), _vm.footerBarButtons.length ? _c("Toolbar", _vm._g(_vm._b({
     attrs: {
-      footer: ""
+      "footer": ""
     },
     scopedSlots: _vm._u([{
       key: "default",
       fn: function(_ref2) {
         var buttons = _ref2.buttons, footer = _ref2.footer;
         return [_vm._t("footer-button", null, {
-          buttons,
-          footer
+          "buttons": buttons,
+          "footer": footer
         })];
       }
     }, _vm._l(_vm.getFooterSlotKeys(), function(item) {
@@ -106,12 +112,12 @@ var render = function() {
         fn: function() {
           return [_vm._t(item)];
         },
-        proxy: !0
+        proxy: true
       };
-    })], null, !0)
+    })], null, true)
   }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
     buttons: _vm.footerBarButtons
-  }), !1), _vm.toolbarListeners)) : _vm._e(), _vm.$scopedSlots["form-bottom"] ? _vm._t("form-bottom") : _vm._e()], 2) : _c("div", {
+  }), false), _vm.toolbarListeners)) : _vm._e(), _vm.$scopedSlots["form-bottom"] ? _vm._t("form-bottom") : _vm._e()], 2) : _c("div", {
     class: ["form-card", {
       "un-limit": _vm.unLimit
     }],
@@ -130,15 +136,15 @@ var render = function() {
     })];
   }), _vm.footerBarButtons.length ? _c("Toolbar", _vm._g(_vm._b({
     attrs: {
-      footer: ""
+      "footer": ""
     },
     scopedSlots: _vm._u([{
       key: "default",
       fn: function(_ref3) {
         var buttons = _ref3.buttons, footer = _ref3.footer;
         return [_vm._t("footer-button", null, {
-          buttons,
-          footer
+          "buttons": buttons,
+          "footer": footer
         })];
       }
     }, _vm._l(_vm.getFooterSlotKeys(), function(item) {
@@ -147,12 +153,12 @@ var render = function() {
         fn: function() {
           return [_vm._t(item)];
         },
-        proxy: !0
+        proxy: true
       };
-    })], null, !0)
+    })], null, true)
   }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
     buttons: _vm.footerBarButtons
-  }), !1), _vm.toolbarListeners)) : _vm._e()], 2)]), _vm.$scopedSlots["form-bottom"] || _vm.$parent.$options.flowForm && _vm.flowContext.logs.length ? _c("div", {
+  }), false), _vm.toolbarListeners)) : _vm._e()], 2)]), _vm.$scopedSlots["form-bottom"] || _vm.$parent.$options.flowForm && _vm.flowContext.logs.length ? _c("div", {
     class: ["form-card", {
       "un-limit": _vm.unLimit
     }],
@@ -171,13 +177,13 @@ var render = function() {
   }, [_c("FlowLog", {
     staticClass: "flow-log",
     attrs: {
-      fetch: !1,
-      "show-title": !1,
+      "fetch": false,
+      "show-title": false,
       "business-key": _vm.$parent.bizKey
     }
   })], 1) : _vm._e(), _vm._t("form-bottom")], 2)]) : _vm._e()]), _c("ResizeObserver", {
     on: {
-      notify: _vm.onFormResize
+      "notify": _vm.onFormResize
     }
   })], 1), _vm.formNav && !_vm.isFormLoading && _vm.showNav && _vm.groups.length ? _c("div", {
     staticClass: "form-nav"
@@ -192,7 +198,7 @@ var render = function() {
         active: _vm.activeIndex === index
       }],
       on: {
-        click: function($event) {
+        "click": function($event) {
           return _vm.navItemClick(item, index);
         }
       }
@@ -203,15 +209,24 @@ var render = function() {
       "font-size": "16px"
     }
   }) : _vm._e()], 1);
-}, staticRenderFns = [];
-const builtInButtons = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "agree", "disagree", "reject", "finish", "cancel", "enable", "exp", "imp", "del", "disabled", "reload", "slot"], footerButtons = builtInButtons.map((value) => `${value}-down`), topButtons = ["back", "withdraw", "edit"], bottomButtons = ["save", "submit", "", "publish", "agree", "disagree", "reject", "finish", "cancel"], findParent = (el, selector) => {
-  if (el.classList.contains(selector))
+};
+var staticRenderFns = [];
+const FormView_vue_vue_type_style_index_0_lang = "";
+const builtInButtons = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "agree", "disagree", "reject", "finish", "cancel", "enable", "exp", "imp", "del", "disabled", "reload", "slot"];
+const footerButtons = builtInButtons.map((value) => `${value}-down`);
+const topButtons = ["back", "withdraw", "edit"];
+const bottomButtons = ["save", "submit", "", "publish", "agree", "disagree", "reject", "finish", "cancel"];
+const findParent = (el, selector) => {
+  if (el.classList.contains(selector)) {
     return el;
+  }
   let parent = el.parentNode;
-  for (; parent && !parent.classList.contains(selector); )
+  while (parent && !parent.classList.contains(selector)) {
     parent = parent.parentNode;
+  }
   return parent.classList.contains(selector) ? parent : null;
-}, __vue2_script = {
+};
+const __vue2_script = {
   name: "FormView",
   inject: {
     flowContext: {
@@ -245,60 +260,90 @@ const builtInButtons = ["back", "create", "save", "withdraw", "edit", "submit",
     },
     showToolbar: {
       type: Boolean,
-      default: !0
+      default: true
     },
     formNav: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   data() {
     return {
       groups: [],
       activeIndex: -1,
-      tryByClick: !1,
-      showNav: !1
+      tryByClick: false,
+      showNav: false
     };
   },
   computed: {
     isFormLoading() {
-      return this.loading || hasOwn(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : !1;
+      return this.loading || hasOwn(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : false;
     },
     toolbarProps() {
       var _a;
-      const defaultProps = {}, buttons = ((_a = this.toolbarAttrs) == null ? void 0 : _a.buttons) || this.$parent.buttons, toolbarAttrs = merge({}, this.toolbarAttrs, defaultProps);
-      return toolbarAttrs.buttons = buttons || ["back"], toolbarAttrs.buttons = toStringArray(toolbarAttrs.buttons), toolbarAttrs;
+      const defaultProps = {};
+      const buttons = ((_a = this.toolbarAttrs) == null ? void 0 : _a.buttons) || this.$parent.buttons;
+      const toolbarAttrs = merge({}, this.toolbarAttrs, defaultProps);
+      toolbarAttrs.buttons = buttons || ["back"];
+      toolbarAttrs.buttons = toStringArray(toolbarAttrs.buttons);
+      return toolbarAttrs;
     },
     toolbarButtons() {
       return this.toolbarProps.buttons.filter((value) => !bottomButtons.includes(value) && value.indexOf(":down") < 0).map((value) => value.replace(":up", ""));
     },
     footerBarButtons() {
       let footerBarButtons = this.toolbarProps.buttons.filter((value) => !topButtons.includes(value) && (bottomButtons.includes(value) || value.indexOf(":down") > -1)).map((value) => value.replace(":down", ""));
-      return footerBarButtons = footerBarButtons || [], this.$parent.isEnabled && !footerBarButtons.includes("cancel") && footerBarButtons.push("cancel"), footerBarButtons;
+      footerBarButtons = footerBarButtons || [];
+      if (this.$parent.isEnabled && !footerBarButtons.includes("cancel")) {
+        footerBarButtons.push("cancel");
+      }
+      return footerBarButtons;
     }
   },
   created() {
     this.$on("FormView.addGroup", (group) => {
-      group && (this.activeIndex === -1 && (this.activeIndex = 0), this.groups.push(group), this.groups = this.groups.sort((aTab, bTab) => {
-        const formCardA = findParent(aTab.$el, "form-card"), formCardB = findParent(bTab.$el, "form-card");
-        if (formCardA === formCardB) {
-          const aIndex = [].indexOf.call(aTab.$el.parentNode.children, aTab.$el), bIndex = [].indexOf.call(bTab.$el.parentNode.children, bTab.$el);
-          return aIndex - bIndex;
-        } else {
-          const formScroller = findParent(formCardA, "form-scroller"), aBlockIndex = [].indexOf.call(formScroller.children, formCardA), bBlockIndex = [].indexOf.call(formScroller.children, formCardB);
-          return aBlockIndex - bBlockIndex;
+      if (group) {
+        if (this.activeIndex === -1) {
+          this.activeIndex = 0;
+        }
+        this.groups.push(group);
+        this.groups = this.groups.sort((aTab, bTab) => {
+          const formCardA = findParent(aTab.$el, "form-card");
+          const formCardB = findParent(bTab.$el, "form-card");
+          if (formCardA === formCardB) {
+            const aIndex = [].indexOf.call(aTab.$el.parentNode.children, aTab.$el);
+            const bIndex = [].indexOf.call(bTab.$el.parentNode.children, bTab.$el);
+            return aIndex - bIndex;
+          } else {
+            const formScroller = findParent(formCardA, "form-scroller");
+            const aBlockIndex = [].indexOf.call(formScroller.children, formCardA);
+            const bBlockIndex = [].indexOf.call(formScroller.children, formCardB);
+            return aBlockIndex - bBlockIndex;
+          }
+        });
+        if (group.active) {
+          this.activeIndex = this.groups.indexOf(group);
+          this.navItemClick(group, this.activeIndex);
         }
-      }), group.active && (this.activeIndex = this.groups.indexOf(group), this.navItemClick(group, this.activeIndex)));
-    }), this.$on("FormView.removeGroup", (tab) => {
+      }
+    });
+    this.$on("FormView.removeGroup", (tab) => {
       if (tab) {
         const index = this.groups.indexOf(tab);
-        this.groups.splice(index, 1), this.activeIndex > this.groups.length - 1 && (this.activeIndex = 0);
+        this.groups.splice(index, 1);
+        if (this.activeIndex > this.groups.length - 1) {
+          this.activeIndex = 0;
+        }
       }
-    }), this.onFormResize({ width: window.document.body.clientWidth });
+    });
+    this.onFormResize({ width: window.document.body.clientWidth });
   },
   activated() {
     return __async(this, null, function* () {
-      this.$refs.formScroller && (yield this.$nextTick(), this.scrollTo(this.formScrollTop, this.formScrollLeft));
+      if (this.$refs.formScroller) {
+        yield this.$nextTick();
+        this.scrollTo(this.formScrollTop, this.formScrollLeft);
+      }
     });
   },
   methods: {
@@ -315,48 +360,74 @@ const builtInButtons = ["back", "create", "save", "withdraw", "edit", "submit",
       this.showNav = width > 1500;
     },
     onEdit() {
-      !this.toolbarListeners.edit && hasOwn(this.$parent, "disabled") && (this.$parent.disabled = !1);
+      if (!this.toolbarListeners.edit && hasOwn(this.$parent, "disabled")) {
+        this.$parent.disabled = false;
+      }
     },
     navItemClick(item, index) {
       return __async(this, null, function* () {
-        this.showNav && (yield this.$nextTick(), this.activeFormItemGroup(item, index), item.expand || item.open());
+        if (!this.showNav) {
+          return;
+        }
+        yield this.$nextTick();
+        this.activeFormItemGroup(item, index);
+        if (!item.expand) {
+          item.open();
+        }
       });
     },
     activeFormItemGroup(tab, index) {
-      this.$refs.formScroller.scrollTop = tab.$el.offsetTop - 10, animate(tab.$el, "breathe-indicator-animation"), this.tryByClick = !0, this.activeIndex = index;
+      this.$refs.formScroller.scrollTop = tab.$el.offsetTop - 10;
+      animate(tab.$el, "breathe-indicator-animation");
+      this.tryByClick = true;
+      this.activeIndex = index;
     },
     tryActive() {
       return __async(this, null, function* () {
-        if (this.showNav) {
-          for (let i = 0; i < this.groups.length; i++)
-            if (isInContainer(this.groups[i].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
-              this.activeIndex = i;
-              break;
-            }
+        if (!this.showNav) {
+          return;
+        }
+        for (let i = 0; i < this.groups.length; i++) {
+          if (isInContainer(this.groups[i].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
+            this.activeIndex = i;
+            break;
+          }
         }
       });
     },
     onFormScroll() {
-      this.formScrollTop = this.$refs.formScroller.scrollTop, this.formScrollLeft = this.$refs.formScroller.scrollLeft, !this.tryByClick && this.groups.length && window.requestAnimationFrame(this.tryActive), this.tryByClick = !1;
+      this.formScrollTop = this.$refs.formScroller.scrollTop;
+      this.formScrollLeft = this.$refs.formScroller.scrollLeft;
+      if (!this.tryByClick && this.groups.length) {
+        window.requestAnimationFrame(this.tryActive);
+      }
+      this.tryByClick = false;
     },
     scrollTo(top, left) {
-      top && (this.$refs.formScroller.scrollTop = top), left && (this.$refs.formScroller.scrollLeft = left);
+      if (top) {
+        this.$refs.formScroller.scrollTop = top;
+      }
+      if (left) {
+        this.$refs.formScroller.scrollLeft = left;
+      }
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const FormView = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/form-view/style.css

@@ -1 +1,158 @@
-.form-view{display:flex;flex-direction:column;height:100%}.form-view .form-scroller-wrapper{position:relative;flex:1}.form-view .not-form{margin:0 auto}.form-view .form-view-toolbar{overflow:hidden}.form-view .form-scroller{flex:1;overflow:auto}.form-view .form-scroller .el-row{position:static}.form-view .form-content .el-form .el-row{padding-right:2rem}.form-view .form-content .el-form .el-row .el-row{padding-right:0}.form-view .form-card{box-shadow:0 2px 12px #0000001a;max-width:1000px;margin:14px auto;padding:20px;color:#303133;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;transition:.3s}.form-view .form-card.un-limit{max-width:100%}.form-view .form-nav{box-shadow:0 2px 12px #0000001a;position:absolute;top:55px;left:20px;background-color:#fff}.form-view .form-nav-list{min-width:180px;padding:10px 20px}.form-view .form-nav-header{position:relative;padding:5px 20px;color:#e34e55;font-weight:700;font-size:15px;background-color:#f3f5fb}.form-view .form-nav-item{position:relative;padding:5px 0;font-family:element-icons!important;cursor:pointer}.form-view .form-nav-item.active,.form-view .form-nav-item:hover{color:#e34e55;font-weight:700}.form-view .form-nav-item.active:before{position:absolute;left:-14px;content:"\e6e0"}.form-view .form-view-title{width:100%;height:36px;margin-bottom:10px;color:#333;font-size:22px;line-height:36px;text-align:center;background-color:#fff}.form-view .tip{margin:20px 0;padding:8px 16px;background-color:#ecf8ff;border-left:5px solid #50bfff;border-radius:4px}.form-view .tip p{color:#5e6d82;font-size:14px;line-height:1.5em}.form-view .tip.danger{background-color:#fde2e2;border-left-color:#f56c6c}.form-view .tip.danger p{color:#564646}.form-view .tip.warning{background-color:#f7efe2;border-left-color:#e6a23c}.form-view .tip.warning p{color:#5d564b}.form-view .select-num{color:#898989;font-size:12px}.form-view .select-num .num{font-size:19px;font-family:impact,Constantia,Georgia}.form-view .el-table .el-table__header th{color:#595959;font-weight:400;background:#fff}.form-view .el-table td{padding:4px 0}.form-view .el-table td .cell .el-input .el-input__inner{padding-left:4px}.form-view .el-table td .cell .el-input.el-input--prefix .el-input__inner{padding-left:30px}.form-view .el-table td .cell .el-input.is-disabled .el-input__suffix{display:none}.form-view .el-table td .cell .el-input.is-disabled .el-input__inner{padding:0 0 0 4px;line-height:1.6;white-space:normal;word-break:break-word;background:transparent;border:0}@media screen and (min-width: 1700px){.form-view.form-view__lg .form-card{position:relative;left:60px}}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.form-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.form-view .form-scroller-wrapper {
+  position: relative;
+  flex: 1;
+}
+.form-view .not-form {
+  margin: 0 auto;
+}
+.form-view .form-view-toolbar {
+  overflow: hidden;
+}
+.form-view .form-scroller {
+  flex: 1;
+  overflow: auto;
+}
+.form-view .form-scroller .el-row {
+  position: static;
+}
+.form-view .form-content .el-form .el-row {
+  padding-right: 2rem;
+}
+.form-view .form-content .el-form .el-row .el-row {
+  padding-right: 0;
+}
+.form-view .form-card {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  max-width: 1000px;
+  margin: 14px auto;
+  padding: 20px;
+  color: #303133;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  transition: 0.3s;
+}
+.form-view .form-card.un-limit {
+  max-width: 100%;
+}
+.form-view .form-nav {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 55px;
+  left: 20px;
+  background-color: white;
+}
+.form-view .form-nav-list {
+  min-width: 180px;
+  padding: 10px 20px;
+}
+.form-view .form-nav-header {
+  position: relative;
+  padding: 5px 20px;
+  color: #e34e55;
+  font-weight: bold;
+  font-size: 15px;
+  background-color: #f3f5fb;
+}
+.form-view .form-nav-item {
+  position: relative;
+  padding: 5px 0;
+  font-family: element-icons !important;
+  cursor: pointer;
+}
+.form-view .form-nav-item.active, .form-view .form-nav-item:hover {
+  color: #e34e55;
+  font-weight: bold;
+}
+.form-view .form-nav-item.active::before {
+  position: absolute;
+  left: -14px;
+  content: "\e6e0";
+}
+.form-view .form-view-title {
+  width: 100%;
+  height: 36px;
+  margin-bottom: 10px;
+  color: #333;
+  font-size: 22px;
+  line-height: 36px;
+  text-align: center;
+  background-color: #fff;
+}
+.form-view .tip {
+  margin: 20px 0;
+  padding: 8px 16px;
+  background-color: #ecf8ff;
+  border-left: 5px solid #50bfff;
+  border-radius: 4px;
+}
+.form-view .tip p {
+  color: #5e6d82;
+  font-size: 14px;
+  line-height: 1.5em;
+}
+.form-view .tip.danger {
+  background-color: #fde2e2;
+  border-left-color: #f56c6c;
+}
+.form-view .tip.danger p {
+  color: #564646;
+}
+.form-view .tip.warning {
+  background-color: #f7efe2;
+  border-left-color: #e6a23c;
+}
+.form-view .tip.warning p {
+  color: #5d564b;
+}
+.form-view .select-num {
+  color: #898989;
+  font-size: 12px;
+}
+.form-view .select-num .num {
+  font-size: 19px;
+  font-family: impact, Constantia, Georgia;
+}
+.form-view .el-table .el-table__header th {
+  color: #595959;
+  font-weight: normal;
+  background: #fff;
+}
+.form-view .el-table td {
+  padding: 4px 0;
+}
+.form-view .el-table td .cell .el-input .el-input__inner {
+  padding-left: 4px;
+}
+.form-view .el-table td .cell .el-input.el-input--prefix .el-input__inner {
+  padding-left: 30px;
+}
+.form-view .el-table td .cell .el-input.is-disabled .el-input__suffix {
+  display: none;
+}
+.form-view .el-table td .cell .el-input.is-disabled .el-input__inner {
+  padding: 0;
+  padding-left: 4px;
+  line-height: 1.6;
+  white-space: normal;
+  word-break: break-word;
+  background: transparent;
+  border: 0;
+}
+@media screen and (min-width: 1700px) {
+.form-view.form-view__lg .form-card {
+    position: relative;
+    left: 60px;
+}
+}