vue2-client 1.14.55 → 1.14.57

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

@@ -1,261 +1,261 @@
-<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;
-        background: #fff;
-        border-radius: 4px;
-        padding: 12px;
-        position: relative;
-
-        p {
-          position: relative;
-          padding: 8px 0;
-          margin: 0;
-          font-size: 13px;
-          color: #595959;
-          line-height: 1.5;
-          white-space: nowrap;
-          overflow: visible;
-
-          &:first-child {
-            border-top: 1px dotted #e8e8e8;
-          }
-
-          &:not(:last-child) {
-            border-bottom: 1px dashed #f0f0f0;
-          }
-
-          &:last-child {
-            padding-bottom: 0;
-          }
-        }
-      }
-    }
-    &.ant-steps {
-      padding-top: 8px;
-    }
-  }
-  /deep/ .ant-steps-item-title {
-    font-size: 14px;
-    h3 {
-      margin-bottom: 0;
-    }
-  }
-  @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>
+<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;
+        background: #fff;
+        border-radius: 4px;
+        padding: 12px;
+        position: relative;
+
+        p {
+          position: relative;
+          padding: 8px 0;
+          margin: 0;
+          font-size: 13px;
+          color: #595959;
+          line-height: 1.5;
+          white-space: nowrap;
+          overflow: visible;
+
+          &:first-child {
+            border-top: 1px dotted #e8e8e8;
+          }
+
+          &:not(:last-child) {
+            border-bottom: 1px dashed #f0f0f0;
+          }
+
+          &:last-child {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+    &.ant-steps {
+      padding-top: 8px;
+    }
+  }
+  /deep/ .ant-steps-item-title {
+    font-size: 14px;
+    h3 {
+      margin-bottom: 0;
+    }
+  }
+  @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>

package/src/router/async/router.map.js

@@ -64,8 +64,8 @@ routerResource.example = {
   // component: () => import('@vue2-client/base-client/components/common/XTab/XTabDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XForm/demo.vue'),
-  component: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelectDemo.vue'),
-  // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
+  // component: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelectDemo.vue'),
+  component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XConversation/XConversationDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XButtons/XButtonDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XLabelSelect/XLabelSelectDemo.vue'),

package/src/services/api/restTools.js

@@ -81,13 +81,23 @@ function startEventStreamPOST (url, params, headers = {}, onDataUpdate, onError,
   return startEventStream(url, params, headers, onDataUpdate, onError, serviceName, 'POST')
 }
 function startEventStream (url, params, headers = {}, onDataUpdate, onError, serviceName = process.env.VUE_APP_SYSTEM_NAME, method = 'GET') {
+  // let isStopped = false
   let isStopped = false
+  let requestCount = 0
+
   if (!(url.startsWith('api/') || url.startsWith('/api/') || url.startsWith('http'))) {
     if (!url.startsWith('/')) {
       url = '/' + url
     }
     url = '/api/' + serviceName + url
   }
+
+  console.log(`[EventStream] 开始新的请求: ${url}`, {
+    params,
+    headers,
+    method
+  })
+
   const controller = new AbortController()
   const { signal } = controller
   const token = localStorage.getItem(ACCESS_TOKEN)
@@ -101,38 +111,99 @@ function startEventStream (url, params, headers = {}, onDataUpdate, onError, ser
       headers[ACCESS_TOKEN] = token
     }
   }
-  // 开始请求
-  fetchEventSource(url, {
+  fetch(url, {
     method: method,
-    headers: headers,
-    body: JSON.stringify(params),
-    signal,
-    onopen (response) {
-      if (!response.ok) {
-        const error = new Error(`Error: ${response.status} ${response.statusText}`)
-        onError?.(error)
-        throw error
-      }
-      console.log('连接已打开')
+    headers: {
+      ...headers,
+      Accept: 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive'
     },
-    onmessage (event) {
-      if (isStopped) return
-      const data = event.data
-      try {
-        const parsedData = JSON.parse(data)
-        onDataUpdate?.(parsedData)
-      } catch (e) {
-        onDataUpdate?.(data)
+    body: JSON.stringify(params),
+    signal
+  }).then(response => {
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    requestCount++
+    console.log(`[EventStream] 请求已打开 (第${requestCount}次): ${url}`, {
+      status: response.status,
+      statusText: response.statusText
+    })
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+
+    function processStream () {
+      if (isStopped) {
+        console.log(`[EventStream] 请求已停止，停止读取流: ${url}`)
+        return
       }
-    },
-    onerror (error) {
-      if (isStopped) return
-      console.error('发生错误:', error)
+
+      reader.read().then(({ done, value }) => {
+        if (done) {
+          console.log(`[EventStream] 流读取完成: ${url}`)
+          return
+        }
+
+        const chunk = decoder.decode(value, { stream: true })
+        buffer += chunk
+
+        // 处理接收到的数据
+        const lines = buffer.split('\n')
+        buffer = lines.pop() // 保留最后一个不完整的行
+
+        let currentEvent = null
+        let currentData = null
+
+        for (const line of lines) {
+          if (line.startsWith('event: ')) {
+            currentEvent = line.slice(7)
+          } else if (line.startsWith('data: ')) {
+            currentData = line.slice(6)
+            try {
+              const parsedData = JSON.parse(currentData)
+              if (currentEvent === 'additionalInfo') {
+                // 触发 additionalInfo 回调
+                onDataUpdate?.(parsedData, 'additionalInfo')
+              } else {
+                // 普通消息数据
+                onDataUpdate?.(parsedData, 'sourceInfo')
+              }
+            } catch (e) {
+              if (currentEvent === 'sourceInfo') {
+                // 触发 sourceInfo 回调
+                onDataUpdate?.(currentData, 'sourceInfo')
+              } else {
+                onDataUpdate?.(currentData, 'data')
+              }
+            }
+            // 重置当前事件和数据
+            currentEvent = null
+            currentData = null
+          }
+        }
+
+        processStream()
+      }).catch(error => {
+        console.error(`[EventStream] 流读取错误: ${url}`, error)
+        if (!isStopped) {
+          isStopped = true
+          onError?.(error)
+        }
+      })
+    }
+
+    processStream()
+  }).catch(error => {
+    console.error(`[EventStream] 请求错误: ${url}`, error)
+    if (!isStopped) {
       isStopped = true
-      controller.abort()
       onError?.(error)
-    },
-  }).then(r => {})
+    }
+  })
 
   // 返回停止函数
   return () => {