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

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

@@ -1,263 +0,0 @@
-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

@@ -1,161 +0,0 @@
-.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;
-}