cnhis-design-vue 3.1.14-beta.2 → 3.1.14-beta.5

package/es/packages/steps-wheel/src/StepsWheel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,263 @@
+import { defineComponent, computed, ref, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, createCommentVNode, renderSlot, toDisplayString, createBlock, unref, normalizeStyle, withCtx, withDirectives, vShow, createTextVNode } from 'vue';
+import { NTooltip } from 'naive-ui';
+
+const _hoisted_1 = { class: "stepOut" };
+const _hoisted_2 = { style: { "list-style": "none" } };
+const _hoisted_3 = ["title"];
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("ul", { class: "nodeTipContent" }, [
+  /* @__PURE__ */ createElementVNode("li", null, [
+    /* @__PURE__ */ createElementVNode("p", null, [
+      /* @__PURE__ */ createElementVNode("span", { style: { "margin-right": "10px" } }, "(1)"),
+      /* @__PURE__ */ createTextVNode(" 2022-07-30 14:15:12 ")
+    ]),
+    /* @__PURE__ */ createElementVNode("p", null, "\u5468\u8001\u5E08"),
+    /* @__PURE__ */ createElementVNode("p", null, "\u6B65\u9AA4\u6761\u63D0\u793A"),
+    /* @__PURE__ */ createElementVNode("p", null, "\u54B1\u8FD9\u662F\u6D4B\u8BD5\u6848\u4F8B,\u8BF7\u4F7F\u7528\u63D2\u69FD\uFF1A#nodeTipBox \u81EA\u5B9A\u4E49")
+  ]),
+  /* @__PURE__ */ createElementVNode("li", null, [
+    /* @__PURE__ */ createElementVNode("p", null, [
+      /* @__PURE__ */ createElementVNode("span", { style: { "margin-right": "10px" } }, "(2)"),
+      /* @__PURE__ */ createTextVNode(" 2022-07-30 14:15:12 ")
+    ]),
+    /* @__PURE__ */ createElementVNode("p", null, "\u5468\u8001\u5E08"),
+    /* @__PURE__ */ createElementVNode("p", null, "\u6B65\u9AA4\u6761\u63D0\u793A"),
+    /* @__PURE__ */ createElementVNode("p", null, "\u54B1\u8FD9\u662F\u4E2A\u6D4B\u8BD5\u6848\u4F8B,\u8BF7\u4F7F\u7528\u63D2\u69FD\uFF1A#nodeTipBox \u81EA\u5B9A\u4E49")
+  ])
+], -1);
+const _hoisted_5 = { class: "stepBottomBox" };
+const _hoisted_6 = ["title"];
+const _hoisted_7 = ["title"];
+const _hoisted_8 = { class: "statusTime" };
+const _hoisted_9 = { key: 1 };
+var script = /* @__PURE__ */ defineComponent({
+  __name: "StepsWheel",
+  props: {
+    stepInfo: {
+      type: Object,
+      default: () => {
+        return {
+          list: [],
+          cols: 6
+        };
+      }
+    },
+    currentStep: {
+      type: Number,
+      default: 1
+    },
+    toolTipShow: {
+      type: Boolean,
+      default: true
+    },
+    lastNodeRender: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const nodeRowCount = computed(() => {
+      return Math.ceil(stepInfoList.value.length / props.stepInfo.cols);
+    });
+    const lastNodeRenderShow = computed(() => {
+      return props.lastNodeRender;
+    });
+    const stepInfoList = ref([]);
+    const handleNode = (nodeList, cols) => {
+      let length = nodeList.length + 1;
+      let rows = Math.ceil(length / cols);
+      let sort = true;
+      let arr = new Array();
+      for (var i = 0; i < rows; i++) {
+        arr[i] = new Array(cols);
+        arr[i].fill(null);
+      }
+      let x = 0, y = 0;
+      for (let i2 = 1; i2 < length; i2++) {
+        arr[x][y] = Object.assign(nodeList[i2 - 1], {
+          nodeIndex: i2,
+          rowIndex: x + 1
+        });
+        if (sort) {
+          if (i2 % cols != 0) {
+            y++;
+          } else {
+            sort = !sort;
+            x++;
+          }
+        } else {
+          if (i2 % cols != 0) {
+            y--;
+          } else {
+            sort = !sort;
+            x++;
+          }
+        }
+      }
+      let list = [];
+      arr.map((v) => {
+        v.map((a, i2) => a && (a.sort = i2));
+        v[0] && (v[0].nodeType = "frist");
+        v[v.length - 1] && (v[v.length - 1].nodeType = "last");
+        list = [...list, ...v];
+      });
+      stepInfoList.value = list;
+    };
+    const lineCircleLeft = (stepItem) => {
+      return stepItem.rowIndex % 2 == 0 && stepItem.nodeType == "frist";
+    };
+    const lineCircleRight = (stepItem) => {
+      return stepItem.rowIndex % 2 != 0 && stepItem.nodeType == "last";
+    };
+    const lineActiveShow = (stepItem, index) => {
+      if (stepItem.rowIndex % 2 == 0) {
+        return props.currentStep >= index + (props.stepInfo.cols - 2 * stepItem.sort);
+      } else {
+        return props.currentStep >= index + 2;
+      }
+    };
+    const format2DArray = (baseArray, cols) => {
+      let len = baseArray.length;
+      let lineNum = len % cols === 0 ? len / cols : Math.floor(len / cols + 1);
+      let res = [];
+      for (let i = 0; i < lineNum; i++) {
+        let temp = baseArray.slice(i * cols, i * cols + cols);
+        res.push(temp);
+      }
+      return res;
+    };
+    const lastLineHidden = (index) => {
+      const { cols } = props.stepInfo;
+      let arr = format2DArray(stepInfoList.value, cols);
+      let lastRow = arr[arr.length - 1].filter((v) => v);
+      if (nodeRowCount.value % 2 == 0) {
+        return index != lastRow[lastRow.length - 1].nodeIndex - (props.stepInfo.cols - 2 * lastRow[lastRow.length - 1].sort);
+      } else {
+        return index != lastRow[lastRow.length - 1].nodeIndex - 1;
+      }
+    };
+    const handleFinishLastNodeCss = (index) => {
+      const { cols } = props.stepInfo;
+      let arr = format2DArray(stepInfoList.value, cols);
+      let lastRow = arr[arr.length - 1].filter((v) => v);
+      if (nodeRowCount.value % 2 == 0) {
+        return lastNodeRenderShow.value && index == lastRow[lastRow.length - 1].nodeIndex - (props.stepInfo.cols - 2 * lastRow[lastRow.length - 1].sort);
+      } else {
+        return lastNodeRenderShow.value && index == lastRow[lastRow.length - 1].nodeIndex - 1;
+      }
+    };
+    const handleFinishLastNodeLine = (index) => {
+      const { cols } = props.stepInfo;
+      let arr = format2DArray(stepInfoList.value, cols);
+      let lastRow = arr[arr.length - 1].filter((v) => v);
+      if (nodeRowCount.value % 2 == 0) {
+        return lastNodeRenderShow.value && index == lastRow[lastRow.length - 1].nodeIndex - (props.stepInfo.cols - 2 * lastRow[lastRow.length - 1].sort) - 1;
+      } else {
+        return lastNodeRenderShow.value && index == lastRow[lastRow.length - 1].nodeIndex - 2;
+      }
+    };
+    watch(() => props.stepInfo, (val) => {
+      var _a;
+      if ((_a = val == null ? void 0 : val.list) == null ? void 0 : _a.length) {
+        handleNode(val.list, val.cols);
+      }
+    }, { immediate: true, deep: true });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("ul", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(stepInfoList.value, (stepItem, index) => {
+            return openBlock(), createElementBlock("li", {
+              class: normalizeClass(["stepItem", { [`stepItem_${index + 1}`]: true, [`${stepItem == null ? void 0 : stepItem.stepId}`]: (stepItem == null ? void 0 : stepItem.stepId) ? true : false }]),
+              key: (stepItem == null ? void 0 : stepItem.stepId) || index
+            }, [
+              stepItem ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createCommentVNode(" \u6B65\u9AA4\u5934\u90E8\u4FE1\u606F "),
+                createElementVNode("div", {
+                  class: normalizeClass(["stepTopBox", { finished: handleFinishLastNodeCss(index) }])
+                }, [
+                  renderSlot(_ctx.$slots, "stepTopBox", {}, () => [
+                    createElementVNode("span", {
+                      title: stepItem.title
+                    }, toDisplayString(stepItem.title), 9, _hoisted_3)
+                  ])
+                ], 2),
+                createCommentVNode(" \u6B65\u9AA4\u6761\u7684\u8282\u70B9\uFF0C\u6B64\u5904\u4E3A\u5706\u5708 "),
+                __props.toolTipShow ? (openBlock(), createBlock(unref(NTooltip), {
+                  key: 0,
+                  placement: "top",
+                  "show-arrow": true,
+                  trigger: "hover",
+                  style: normalizeStyle({ opacity: "0.88" })
+                }, {
+                  trigger: withCtx(() => [
+                    createElementVNode("div", {
+                      class: normalizeClass(["icon", {
+                        active: __props.currentStep >= stepItem.nodeIndex,
+                        finished: handleFinishLastNodeCss(index)
+                      }])
+                    }, null, 2)
+                  ]),
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "nodeTipBox", {
+                      stepId: stepItem.stepId
+                    }, () => [
+                      _hoisted_4
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["style"])) : (openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: normalizeClass(["icon", {
+                    active: __props.currentStep >= stepItem.nodeIndex,
+                    finished: handleFinishLastNodeCss(index)
+                  }])
+                }, null, 2)),
+                createCommentVNode(" \u6B65\u9AA4\u6761\u8FDE\u63A5\u7EBF\uFF0C\u52A8\u6001\u663E\u793A  "),
+                stepItem.nodeType !== "last" ? withDirectives((openBlock(), createElementBlock("div", {
+                  key: 2,
+                  class: normalizeClass(["line", {
+                    lineActive: lineActiveShow(stepItem, index),
+                    finished: handleFinishLastNodeLine(index)
+                  }])
+                }, null, 2)), [
+                  [vShow, lastLineHidden(index)]
+                ]) : createCommentVNode("v-if", true),
+                createCommentVNode(" \u6B65\u9AA4\u6761\u5F2F\u66F2\u8FDE\u7EBF\uFF0C\u52A8\u6001\u6E32\u67D3 "),
+                lineCircleLeft(stepItem) || lineCircleRight(stepItem) ? (openBlock(), createElementBlock("div", {
+                  key: 3,
+                  class: normalizeClass({
+                    lineCircleActive: __props.currentStep > stepItem.nodeIndex,
+                    lineCircleRight: lineCircleRight(stepItem),
+                    lineCircleLeft: lineCircleLeft(stepItem)
+                  })
+                }, null, 2)) : createCommentVNode("v-if", true),
+                createCommentVNode(" \u6B65\u9AA4\u5E95\u90E8\u4FE1\u606F "),
+                createElementVNode("div", _hoisted_5, [
+                  renderSlot(_ctx.$slots, "stepBottomBox", {}, () => [
+                    createCommentVNode(" \u6B65\u9AA4\u540D\u79F0  "),
+                    createElementVNode("p", {
+                      class: normalizeClass(["stepLabel", { labelFinsh: handleFinishLastNodeCss(index) }]),
+                      title: stepItem.label
+                    }, toDisplayString(stepItem.label), 11, _hoisted_6),
+                    withDirectives(createElementVNode("p", {
+                      class: "stepExtra",
+                      title: stepItem.person
+                    }, toDisplayString(stepItem.person), 9, _hoisted_7), [
+                      [vShow, stepItem.person]
+                    ]),
+                    createCommentVNode(" \u6B65\u9AA4\u65F6\u95F4  "),
+                    createElementVNode("p", _hoisted_8, toDisplayString(stepItem.statusTime), 1)
+                  ])
+                ])
+              ], 64)) : (openBlock(), createElementBlock("div", _hoisted_9, [
+                createCommentVNode("null\u5143\u7D20\u5360\u4F4D")
+              ]))
+            ], 2);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+
+export { script as default };

package/es/packages/steps-wheel/style/index.css

@@ -0,0 +1,161 @@
+.stepOut {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+.stepOut .stepItem {
+  width: 15%;
+  min-width: 65px;
+  height: 180px;
+  float: left;
+  font-family: SimSun;
+  font-size: 16px;
+  text-align: center;
+  position: relative;
+  top: 48px;
+}
+.stepOut .stepItem .lineCircleRight {
+  left: 55%;
+  top: 6px;
+  position: absolute;
+  display: block;
+  border-left-color: white;
+  border-left-width: 0px;
+  width: 30%;
+  border-color: white white white white;
+  border-left-style: hidden;
+  border-left: none;
+  border-top: 1px dashed rgba(3, 2, 2, 0.4);
+  border-right: 1px dashed rgba(3, 2, 2, 0.4);
+  border-bottom: 1px dashed rgba(3, 2, 2, 0.4);
+  border-left: 0px dashed rgba(3, 2, 2, 0.4) !important;
+  height: 100%;
+  border-radius: 0px 25px 25px 0px;
+}
+.stepOut .stepItem .lineCircleLeft {
+  left: 15%;
+  top: 6px;
+  position: absolute;
+  display: block;
+  border-left-color: white;
+  border-left-width: 0px;
+  width: 30%;
+  border-color: white white white white;
+  border-left-style: hidden;
+  border-left: none;
+  border-top: 1px dashed rgba(3, 2, 2, 0.4);
+  border-right: 0px dashed rgba(3, 2, 2, 0.4) !important;
+  border-bottom: 1px dashed rgba(3, 2, 2, 0.4);
+  border-left: 1px dashed rgba(3, 2, 2, 0.4);
+  height: 100%;
+  border-radius: 25px 0px 0px 25px;
+}
+.stepOut .stepItem .lineCircleActive {
+  border-top: 1px solid #2563f4;
+  border-right: 1px solid #2563f4;
+  border-bottom: 1px solid #2563f4;
+  border-left: 1px solid #2563f4;
+}
+.stepOut .stepItem .icon {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #969696;
+  margin: 0 auto;
+  position: relative;
+  z-index: 888;
+}
+.stepOut .stepItem .active {
+  background-color: #2563f4;
+}
+.stepOut .stepItem .finished {
+  background-color: #5dc055 !important;
+  color: #fff !important;
+  border-color: #5dc055 !important;
+}
+.stepOut .stepItem .labelFinsh {
+  color: #5dc055 !important;
+}
+.stepOut .stepItem .line {
+  position: absolute;
+  top: 6px;
+  left: 55%;
+  border-bottom: 1px dashed rgba(3, 2, 2, 0.4);
+  width: 90%;
+  z-index: 111;
+}
+.stepOut .stepItem .lineActive {
+  border-bottom: 1px solid #2563f4;
+}
+.stepOut .stepItem .stepTopBox {
+  position: absolute;
+  top: -48px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 70%;
+  min-width: 65px;
+  height: 40px;
+  line-height: 40px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  background: rgba(110, 153, 255, 0.11);
+  border-radius: 4px;
+  color: #2563f4;
+  padding: 0px 5px;
+  cursor: pointer;
+}
+.stepOut .stepItem .stepBottomBox {
+  cursor: pointer;
+  width: 100%;
+  min-width: 65px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.stepOut .stepItem .stepLabel {
+  width: 100%;
+  color: #212121;
+  line-height: 36px;
+  margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.stepOut .stepItem .stepExtra {
+  width: 68px;
+  height: 26px;
+  border-radius: 4px;
+  border: 1px solid #cacaca;
+  margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.stepOut .stepItem .statusTime {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  width: 89px;
+  height: 34px;
+  margin: 0;
+}
+.nodeTipContent {
+  max-height: 200px;
+  max-width: 400px;
+  overflow: auto;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+.nodeTipContent li {
+  list-style: none;
+  margin-bottom: 5px;
+}
+.nodeTipContent li p {
+  margin: 0;
+}