vue2-client 1.14.50 → 1.14.52

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowTimeline.vue

@@ -1,223 +1,275 @@
-<template>
-  <div class="timeline" ref="timelineContent" style="white-space: nowrap; overflow-x: auto">
-    <a-steps
-      :current="currentStepId"
-      :initial="1">
-      <template #progressDot="{index}">
-        <span v-if="!changeAble" class="step-label in-steps"><i :class="['step-icon', getStepIconColor(index)]"></i></span>
-        <span v-else :key="displayStepId" :class="['step-icon-filled digital', getStepIconColor(index)]">
-          <a-icon v-if="index < currentStepId || state" type="check-circle" theme="filled" :class="['step-icon-filled icon', getStepIconColor(index)]" />
-          <span v-else :class="['step-icon-filled digital', getStepIconColor(index)]">{{ index }}</span>
-        </span>
-      </template>
-      <a-step
-        v-for="item in steps"
-        :key="item.id"
-        class="step-item"
-        :class="{ 'next-step-overdue': item.id === currentStepId - 1 && isOverdue }"
-        @click.stop="onStepClick(item.id)"
-      >
-        <template #title>
-          <h3 v-if="item.name">{{ item.name }}</h3>
-        </template>
-        <template #description>
-          <div>
-            <p v-if="item.handler">负责人：
-              <trim-text-tail :text="item.handler" :length="14"/>
-            </p>
-            <p v-if="item.date">填报时间：{{ formatDate(item.date, 'yyyy-MM-dd hh:mm') }}</p>
-            <p v-if="item.deadline" :class="{ 'text-red': item.id === currentStepId && isOverdue }">截止时间：{{ formatDate(item.deadline, 'yyyy-MM-dd hh:mm') }}</p>
-            <p v-if="item.note">备注：
-              <trim-text-tail :text="item.note" :length="15"/>
-            </p>
-          </div>
-        </template>
-      </a-step>
-    </a-steps>
-  </div>
-</template>
-
-<script>
-import { formatDate } from '@vue2-client/utils/util'
-import TrimTextTail from './TrimTextTail'
-
-export default {
-  components: { TrimTextTail },
-  name: 'WorkFlowTimeline',
-  props: {
-    workflowId: {
-      type: String,
-      required: true
-    },
-    currentStepId: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    activeStepId: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    state: {
-      type: [Boolean, Number],
-      required: false,
-      default: false
-    },
-    steps: {
-      type: Array,
-      required: true
-    },
-    changeAble: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data () {
-    return {
-      // 当前显示的步骤 id
-      displayStepId: 1,
-      // 当前任务是否逾期
-      isOverdue: false
-    }
-  },
-  mounted () {
-    this.init()
-    const timelineContent = this.$refs.timelineContent
-    timelineContent.onmousewheel = function (e) {
-      timelineContent.scrollLeft -= e.wheelDelta
-      e.preventDefault()
-    }
-  },
-  beforeDestroy () {
-    this.$refs.timelineContent.onmousewheel = null
-  },
-  methods: {
-    init () {
-      this.displayStepId = this.activeStepId
-      const deadline = this.steps.find(step => step.id === this.currentStepId).deadline
-      this.isOverdue = !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > deadline
-      this.$emit('activeStep', this.displayStepId)
-    },
-    // 判断id是否为流程中最后一个
-    isLastStep (stepId) {
-      return stepId >= this.steps.length
-    },
-    // 动态展示时间线节点颜色
-    getStepIconColor (stepId) {
-      if (this.changeAble && stepId === this.displayStepId) {
-        return 'yellow'
-      } else if (!this.changeAble && stepId === this.currentStepId) {
-        return this.state ? 'blue' : 'green'
-      }
-      if (stepId < this.currentStepId || this.state) {
-        return 'blue'
-      }
-      if (stepId === this.currentStepId) {
-        return this.isOverdue ? 'red' : 'blue'
-      }
-      return 'gray'
-    },
-    onStepClick (stepId) {
-      if (!this.changeAble || stepId === this.displayStepId) {
-        return
-      }
-      if (stepId > this.currentStepId) {
-        return this.$message.info('您要访问的步骤超出了当前进度！')
-      }
-      this.$emit('activeStep', stepId)
-      this.displayStepId = stepId
-    },
-    formatDate,
-  },
-  watch: {
-    activeStepId: function (newVal) {
-      this.displayStepId = newVal
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.timeline {
-  /deep/ .ant-steps-dot {
-    margin-bottom: 6px;
-    .ant-steps-item-tail {
-      top: 7px;
-      margin-left: 106px;
-      width: calc(100% - 23px);
-    }
-    .ant-steps-item-icon {
-      margin-left: 90px;
-    }
-    .ant-steps-item-content {
-      width: 200px;
-      margin-top: 24px;
-      .ant-steps-item-description {
-        text-align: left;
-        margin: 6px 0 0 60px;
-        p:not(:last-child) {
-          margin-bottom: 4px;
-        }
-      }
-    }
-    &.ant-steps {
-      padding-top: 8px;
-    }
-  }
-  @red: rgb(255, 77, 79);
-  .step-icon-filled {
-    position: absolute;
-    top: -2px;
-    left: -6px;
-    @blue: rgb(24, 144, 255);
-    @yellow: rgb(255, 164, 39);
-    @gray: rgb(191, 191, 191);
-    &.digital {
-      width: 28px;
-      line-height: 28px;
-      border-radius: 50%;
-      color: #ffffff;
-      &.blue {
-        background: @blue;
-      }
-      &.yellow {
-        background: @yellow;
-      }
-      &.gray {
-        background: @gray;
-      }
-      &.red {
-        background: @red;
-      }
-    }
-    &.icon {
-      font-size: 28px;
-      &.blue {
-        color: @blue;
-      }
-      &.yellow {
-        color: @yellow;
-      }
-      &.gray {
-        color: @gray;
-      }
-    }
-  }
-  .step-item {
-    cursor: pointer;
-    &:hover p {
-      color: rgba(0, 0, 0, 0.7);
-    }
-    .text-red {
-      color: @red !important;
-    }
-  }
-  .next-step-overdue {
-    /deep/ .ant-steps-item-tail::after {
-      background: @red;
-    }
-  }
-}
-</style>
+<template>
+  <div class="timeline" ref="timelineContent" style="white-space: nowrap; overflow-x: auto">
+    <a-steps
+      :current="currentStepId"
+      :initial="1">
+      <template #progressDot="{index}">
+        <span v-if="!changeAble" class="step-label in-steps"><i :class="['step-icon', getStepIconColor(index)]"></i></span>
+        <span v-else :key="displayStepId" :class="['step-icon-filled digital', getStepIconColor(index)]">
+          <a-icon v-if="index < currentStepId || state" type="check-circle" theme="filled" :class="['step-icon-filled icon', getStepIconColor(index)]" />
+          <span v-else :class="['step-icon-filled digital', getStepIconColor(index)]">{{ index }}</span>
+        </span>
+      </template>
+      <a-step
+        v-for="item in steps"
+        :key="item.id"
+        class="step-item"
+        @click.stop="onStepClick(item.id)"
+      >
+        <template #title>
+          <h3 v-if="item.name">{{ item.name }}</h3>
+        </template>
+        <template #description>
+          <div>
+            <p v-if="item.handler">负责人：
+              <trim-text-tail :text="item.handler" :length="14"/>
+            </p>
+            <p v-if="item.date">填报时间：{{ formatDate(item.date, 'yyyy-MM-dd hh:mm') }}</p>
+            <p v-if="item.deadline" :class="{ 'text-red': item.id === currentStepId && isOverdue }">截止时间：{{ formatDate(item.deadline, 'yyyy-MM-dd hh:mm') }}</p>
+            <p v-if="item.note">备注：
+              <trim-text-tail :text="item.note" :length="15"/>
+            </p>
+          </div>
+        </template>
+      </a-step>
+    </a-steps>
+  </div>
+</template>
+
+<script>
+import { formatDate } from '@vue2-client/utils/util'
+import TrimTextTail from './TrimTextTail'
+
+export default {
+  components: { TrimTextTail },
+  name: 'WorkFlowTimeline',
+  props: {
+    workflowId: {
+      type: String,
+      required: true
+    },
+    currentStepId: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    activeStepId: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    state: {
+      type: [Boolean, Number],
+      required: false,
+      default: false
+    },
+    steps: {
+      type: Array,
+      required: true
+    },
+    changeAble: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 当前显示的步骤 id
+      displayStepId: 1,
+      // 当前任务是否逾期
+      isOverdue: false
+    }
+  },
+  mounted () {
+    this.init()
+    const timelineContent = this.$refs.timelineContent
+    timelineContent.onmousewheel = function (e) {
+      timelineContent.scrollLeft -= e.wheelDelta
+      e.preventDefault()
+    }
+  },
+  beforeDestroy () {
+    this.$refs.timelineContent.onmousewheel = null
+  },
+  methods: {
+    init () {
+      this.displayStepId = this.activeStepId
+      const deadline = this.steps.find(step => step.id === this.currentStepId).deadline
+      this.isOverdue = !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > deadline
+      this.$emit('activeStep', this.displayStepId)
+    },
+    // 判断id是否为流程中最后一个
+    isLastStep (stepId) {
+      return stepId >= this.steps.length
+    },
+    // 动态展示时间线节点颜色
+    getStepIconColor (stepId) {
+      if (this.changeAble && stepId === this.displayStepId) {
+        return 'yellow'
+      } else if (!this.changeAble && stepId === this.currentStepId) {
+        return this.state ? 'blue' : 'green'
+      }
+      if (stepId < this.currentStepId || this.state) {
+        return 'blue'
+      }
+      if (stepId === this.currentStepId) {
+        return this.isOverdue ? 'red' : 'blue'
+      }
+      return 'gray'
+    },
+    onStepClick (stepId) {
+      if (!this.changeAble || stepId === this.displayStepId) {
+        return
+      }
+      if (stepId > this.currentStepId) {
+        return this.$message.warn('请先完成当前步骤')
+      }
+      this.$emit('activeStep', stepId)
+      this.displayStepId = stepId
+    },
+    formatDate,
+  },
+  watch: {
+    activeStepId: function (newVal) {
+      this.displayStepId = newVal
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.timeline {
+  /deep/ .ant-steps-dot {
+    margin-bottom: 6px;
+    .ant-steps-item-tail {
+      top: 7px;
+      margin-left: 106px;
+      width: calc(100% - 23px);
+    }
+    .ant-steps-item-icon {
+      margin-left: 90px;
+      width: 8px;
+      height: 8px;
+      line-height: 8px;
+    }
+    .ant-steps-item-content {
+      min-width: 200px;
+      margin-top: 24px;
+      .ant-steps-item-description {
+        text-align: left;
+        margin: 6px 0 0 0;
+        background: #fff;
+        border-radius: 4px;
+        padding: 12px;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 1px;
+          background: repeating-linear-gradient(
+            to right,
+            #e8e8e8 0px,
+            #e8e8e8 4px,
+            transparent 4px,
+            transparent 8px
+          );
+        }
+
+        p {
+          position: relative;
+          padding: 8px 0;
+          margin: 0;
+          font-size: 13px;
+          color: #595959;
+          line-height: 1.5;
+          white-space: nowrap;
+          overflow: visible;
+
+          &:not(:last-child) {
+            border-bottom: 1px dashed #f0f0f0;
+          }
+
+          &:last-child {
+            padding-bottom: 0;
+          }
+
+          &:first-child {
+            padding-top: 0;
+          }
+        }
+      }
+    }
+    &.ant-steps {
+      padding-top: 8px;
+    }
+  }
+  /deep/ .ant-steps-item-title {
+    font-size: 14px;
+  }
+  @red: rgb(255, 77, 79);
+  .step-icon-filled {
+    position: absolute;
+    top: -2px;
+    left: -6px;
+    @blue: rgb(24, 144, 255);
+    @yellow: rgb(255, 164, 39);
+    @gray: rgb(191, 191, 191);
+    &.digital {
+      width: 28px;
+      line-height: 28px;
+      border-radius: 50%;
+      color: #ffffff;
+      &.blue {
+        background: @blue;
+      }
+      &.yellow {
+        background: @yellow;
+      }
+      &.gray {
+        background: @gray;
+      }
+      &.red {
+        background: @red;
+      }
+    }
+    &.icon {
+      font-size: 28px;
+      &.blue {
+        color: @blue;
+      }
+      &.yellow {
+        color: @yellow;
+      }
+      &.gray {
+        color: @gray;
+      }
+    }
+  }
+  .step-item {
+    cursor: pointer;
+    &:hover {
+      .ant-steps-item-description {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        transform: translateY(-1px);
+        transition: all 0.3s ease;
+      }
+      p {
+        color: #262626;
+      }
+    }
+    .text-red {
+      color: @red !important;
+    }
+  }
+  .next-step-overdue {
+    /deep/ .ant-steps-item-tail::after {
+      background: @red;
+    }
+  }
+}
+</style>