@lambo-design/workflow-approve 1.0.0-beta.9 → 1.0.0-beta.91

package/src/components/history.vue

@@ -1,378 +1,839 @@
-<template>
-  <div>
-
-    <Timeline class="portrait-timeline">
-      <TimelineItem v-for="(items,index) in itemList" :key="index" class="portrait-timeline-item">
-        <template #dot>
-          <div v-if="items[0].auditResult === '30' || items[0].auditResult === '80'" class="cicle" style="background-color: #005aff"></div>
-          <div v-else-if="items[0].auditResult === '40' || items[0].auditResult === '50'" class="cicle" style="background-color: #ffcc66"></div>
-          <div v-else-if="items[0].auditResult === '60'" class="cicle" style="background-color: #ed4014"></div>
-          <div v-else class="cicle" style="background-color: #ff9900"></div>
-        </template>
-        <Collapse v-model="activeName" simple style="margin: -10px 0 0 -2px;border: none">
-          <Panel :name="'panel' + index" hide-arrow>
-            <span class="history-title"> {{ items[0].taskName }}</span>
-            <template #content>
-              <div v-for="(item, index) in items" :key="index">
-                <div v-for="(itemListItem, itemListIndex) in item.auditName" :key="itemListIndex">
-                  <Card dis-hover
-                        class="portrait-card"
-                        :bordered="false">
-                    <List item-layout="vertical">
-                      <ListItem>
-                        <Row style="display: flex; align-items: center;">
-                          <!-- 左边：Avatar -->
-                          <Col>
-                            <avatar
-                              :class="portraitWidth >= 600 ? 'portrait-avatar-large' : 'portrait-avatar-small'"
-                              size="small">
-                              {{ getFirstName(itemListItem) }}</avatar>
-                          </Col>
-                          <!-- 右边：审批信息 -->
-                          <Col span="17">
-                            <Row>
-                              <tooltip>
-                                <span class="audit-name-style"> {{ itemListItem }}</span>
-                                <div slot="content" style="white-space: normal"> {{ itemListItem }}</div>
-                              </tooltip>
-                              <Divider style="background-color:#808695;height: 1em;margin: 4px 9px 0 6px;"
-                                       type="vertical"/>
-                              <span v-if="item.auditOrganName"
-                                    class="audit-name-style"> {{ item.auditOrganName[itemListIndex] }}</span>
-                              <span v-if="portraitWidth === 0 || portraitWidth >= 600" class="audit-date-style">
-                                {{ item.startDate }}{{ item.auditDate }}
-                              </span>
-                            </Row>
-                            <Row v-if="item.auditComment">
-                              <span class="audit-name-style">{{ item.auditComment }}</span>
-                            </Row>
-                            <Row v-if="portraitWidth < 600" class="portrait-audit-date-style">{{showDate(item)}}{{ item.startDate }}{{ item.auditDate }}</Row>
-                            <Row style="margin-top: 10px">
-                              <Col span="12">
-                                <span style="color: #005aff;; font-size: 13px;"
-                                v-if="item.auditResult === '30'">通过</span>
-                                <span style="color: #ed4014; font-size: 13px;"
-                                      v-else-if="item.auditResult === '40'">驳回到上一节点</span>
-                                <span style="color: #ed4014; font-size: 13px;"
-                                      v-else-if="item.auditResult === '50'">驳回到原点</span>
-                                <span style="color: #ed4014; font-size: 13px;"
-                                      v-else-if="item.auditResult === '60'">撤回</span>
-                                <span style="color: #19be6b; font-size: 13px;"
-                                      v-else-if="item.auditResult === '80'">跳转到指定节点</span>
-                                <span style="color: #19be6b; font-size: 13px;"
-                                      v-else-if="item.auditResult === '90'">驳回到指定节点</span>
-                                <span style="color: #ff9900; font-size: 13px;" v-else>待审批</span>
-                              </Col>
-                              <Col span="12" style="text-align: right">
-                                <Button v-if="item.fileList && item.fileList.length > 0" size="small" type="primary" ghost class="urging" @click="openModal(item)">查看附件</Button>
-                                <Button v-if="displayPushButton && item.auditResult !== '30'&&item.auditResult !== '40'&&item.auditResult !== '50'&&item.auditResult !== '60'&&item.auditResult!=='80'&&item.auditResult!=='90'"
-                                        size="small" type="primary" ghost class="urging"
-                                        @click="pushHim(item,itemListItem,itemListIndex)">催一下
-                                </Button>
-                              </Col>
-                            </Row>
-                          </Col>
-                        </Row>
-
-                      </ListItem>
-                    </List>
-                  </Card>
-                </div>
-              </div>
-            </template>
-          </Panel>
-        </Collapse>
-      </TimelineItem>
-    </Timeline>
-
-    <Modal
-      v-model="showModal"
-      title="查看附件"
-    >
-      <Table border
-             :columns="attachmentColumn"
-             :data="fileList"
-      >
-      </Table>
-    </Modal>
-    <div v-if="0 < allGroupKeys.length">
-      <div v-show="arrowShow" class="arrow">
-        <a @click="arrowClick">
-          <Icon type="ios-arrow-down"/>
-          展开显示更多
-        </a>
-      </div>
-      <div v-show="!arrowShow" class="arrow">
-        <a @click="arrowClick">
-          <Icon type="ios-arrow-up"/>
-          收缩
-        </a>
-      </div>
-    </div>
-    <Modal title="查看附件" v-model="modalImg" fullscreen scrollable :mask="false">
-      <img :src="image" v-if="modalImg" alt="" style="width: 100%">
-      <div slot="footer">
-        <Button type="primary" @click="modalImg = false">关闭</Button>
-      </div>
-    </Modal>
-    <Modal title="查看附件" v-model="modalDocx" fullscreen scrollable :mask="false">
-      <div ref="file"></div>
-    </Modal>
-  </div>
-</template>
-
-<script>
-import ajax from "@lambo-design/shared/utils/ajax";
-import { operateHref } from '@lambo-design/shared/utils/assist'
-import axios from 'axios';
-// 引入docx-preview插件
-let docx = require('docx-preview');
-export default {
-  components: {},
-  props: {
-    list: {
-      type: Array,
-      default: () => []
-    },
-    applyId: {
-      type: String,
-      default: ""
-    },
-    donePage: {
-      type: Boolean,
-      default: false
-    },
-    //横竖版样式不同
-    portraitWidth: {
-      type: Number,
-      default: 0
-    },
-    smartFlowServerContext: {
-      type: String,
-      default: '/api/smart-flow-server',
-    },
-  },
-  data() {
-    return {
-      allGroupKeys: [],
-      displayedList: [],
-      arrowShow: true, // 控制加载更多按钮的显示
-      activeName: 'panel0',
-      modalDocx: false,
-      setModals: {
-        modals: []
-      },
-      showModal: false,
-      fileList: [],
-      modalImg: false,
-      image: "",
-      itemList: {},
-      auditNameList: [],
-      displayPushButton: false,
-    }
-  },
-  computed: {
-    attachmentColumn: function () {
-      let column = [];
-      column.push({title: '序号', type: 'index', width: 70, align: 'center', fixed: 'left'});
-      column.push({
-        title: '附件名称', key: 'fileName', minWidth: 150, align: 'center', fixed: 'left',
-        render(h, {row}) {
-          const index = row.fileName.lastIndexOf(".");
-          const fileName = row.fileName.substr(0, index)
-          return h("span", fileName)
-
-        }
-      });
-      column.push({
-        title: '附件类型', width: 100, align: 'center', fixed: 'left',
-        render: (h, {row}) => {
-          const index = row.fileName.lastIndexOf(".");
-          const fileType = row.fileName.substr(index + 1)
-          return h("span", fileType)
-        }
-      });
-
-      column.push({
-        title: "操作", width: 160, align: 'center', tooltip: true,
-        render: (h, {row}) => {
-          const index = row.fileName.lastIndexOf(".");
-          const fileType = row.fileName.substr(index + 1).toLowerCase()
-          const typeList=['jpg','gif','png','docx']
-          if (typeList.indexOf(fileType) !== -1) {
-            return h("div", [
-              operateHref(this, h, row, "下载", () => {
-                this.getAttach(row);
-              }, "primary"),
-              operateHref(this, h, row, "预览", () => {
-                this.preViewAttach(row);
-              }, "primary")
-            ]);
-          } else {
-            return h("div", [
-              operateHref(this, h, row, "下载", () => {
-                this.getAttach(row);
-              }, "primary")
-            ]);
-          }
-
-        }
-
-      });
-      return column;
-    }
-  },
-  methods: {
-    pushHim(item, auditName, index) {
-      if (this.isDebouncing) {
-        return;
-      }
-
-      this.isDebouncing = true;
-      // 设置一个延时，例如 1 秒，之后重置防抖状态
-      setTimeout(() => {
-        this.isDebouncing = false;
-      }, 2000);
-
-      let self = this;
-      let applyUserName = item.applyUser.split(":")[1];
-      let params = {
-        applyUserName: applyUserName,
-        auditName: auditName,
-        auditId: item.auditId[index],
-        procName: item.procName,
-        effectTime: item.startDate,
-        expireTime: item.warningDate,
-      };
-      let url = self.smartFlowServerContext + "/manage/processTodo/sendMessage";
-      ajax.post(url, params).then(function (resp) {
-        console.log("message  ", resp);
-        if (resp.data.code == 200) {
-          self.$Message.success("催办成功");
-        } else {
-          self.$Message.error("催办失败");
-        }
-      });
-    },
-    getAttach(row) {
-      window.open(this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId, "_blank");
-    },
-    preViewAttach(row) {
-      let reg = /\.(gif|jpg|jpeg|bmp|png|PNG)$/
-      let regs = /\.(pdf)$/
-      if (reg.test(row.fileName)) {
-        let url = this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId;
-        this.imgPreview(url);
-      } else if (regs.test(row.fileName)) {
-        window.open(this.smartFlowServerContext + "/manage/oss/file/getFileStream?fileId=" + row.fileId, "_blank");
-      } else {
-        this.modalDocx = true
-        axios({
-          method: 'get',
-          responseType: 'blob', // 因为是流文件，所以要指定blob类型
-          url: this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId// 一个word下载文件的接口
-        }).then(({data}) => {
-            docx.renderAsync(data, this.$refs.file, null, {
-              className: "docx", //默认和文档样式类的类名/前缀
-              inWrapper: true, //启用围绕文档内容呈现包装器
-              ignoreWidth: false, //禁用页面的渲染宽度
-              ignoreHeight: false, //禁用页面的渲染高度
-              ignoreFonts: false, //禁用字体渲染
-              breakPages: true, //在分页符上启用分页
-              ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
-              experimental: false, //启用实验功能（制表符停止计算）
-              trimXmlDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明
-              useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
-              useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
-              showChanges: false, //启用文档更改的实验渲染（插入/删除）
-              debug: false, //启用额外的日志记录
-            })
-          }
-        )
-      }
-    },
-    //查看附件
-    imgPreview: function (img) {
-      this.modalImg = true
-      this.image = img;
-    },
-    arrowClick() {
-      if (this.itemList.length > 0) {
-        if (this.arrowShow) {
-          // 显示全部
-          this.displayedList = this.itemList;
-          this.arrowShow = false;
-        } else {
-          // 只显示两个
-          this.displayedList = this.itemList.slice(0, 2);
-          this.arrowShow = true;
-        }
-      }
-    },
-    openModal(item) {
-      this.fileList = item.fileList
-      this.showModal = true
-    },
-    getFirstName(item) {
-      return item ? item[0] : ''
-    },
-    showDate(item) {
-      if (item.auditResult){
-        return '处理时间：'
-      }
-      return '接收时间：'
-    }
-  },
-  mounted() {
-    this.displayPushButton = this.donePage;
-    this.itemList = this.list;
-    if (this.itemList.length > 0) {
-      this.displayedList = this.itemList.slice(0, 2);
-      // 初始化modals
-      this.setModals.modals = this.itemList.map(() => ({value: false}));
-      this.activeName = 'panel0';
-    }
-  },
-  watch: {
-    list: function (newValue) {
-      this.$nextTick(() => {
-        this.itemList = newValue;
-        if (this.itemList.length > 0) {
-          this.displayedList = this.itemList.slice(0, 2);
-          this.setModals.modals = this.itemList.map(() => ({value: false}));
-        }
-
-      });
-    }
-  }
-
-
-}
-</script>
-
-<style scoped>
-@import "../styles/css/index.less";
-/deep/ .docx {
-  width: 100% !important;
-}
-
-/deep/ .ivu-timeline-item-tail {
-  border-style: solid;
-  border-left: none;
-  border-color: #005aff;
-  border-width: thin;
-}
-
-/deep/ .ivu-list-item {
-  padding-bottom: 0 !important;
-}
-
-/deep/ .ivu-collapse-content-box {
-  padding: 0 !important;
-}
-
-/deep/ .ivu-card-body {
-  padding: 5px !important;
-}
-
-</style>
+<template>
+  <div>
+    <!-- 添加排序和分组切换按钮 -->
+    <div class="history-controls" style="margin-bottom: 16px;">
+      <ButtonGroup>
+        <Button
+            :type="sortBy === 'time' ? 'primary' : 'default'"
+            size="small"
+            @click="toggleSortBy('time')">
+          <Icon type="md-time" />
+          按时间排序
+        </Button>
+        <Button
+            :type="sortBy === 'node' ? 'primary' : 'default'"
+            size="small"
+            @click="toggleSortBy('node')">
+          <Icon type="md-git-network" />
+          按节点分组
+        </Button>
+      </ButtonGroup>
+    </div>
+
+    <Timeline class="portrait-timeline">
+      <TimelineItem v-for="(items,index) in processedItemList" :key="index" class="portrait-timeline-item">
+        <template #dot>
+          <div class="cicle" :style="{backgroundColor: getTimelineDotColor(items[0].auditResult)}"></div>
+        </template>
+        <!-- 按时间排序时：不显示标题，自动展开 -->
+        <template v-if="sortBy === 'time'">
+          <!-- 检查是否有待审批记录 -->
+          <template v-if="items.some(item => isPendingAudit(item))">
+            <!-- 待审批的记录：使用折叠面板 -->
+            <Collapse v-model="pendingActiveName" simple style="margin: -10px 0 0 20px;border: none">
+              <Panel :name="'pending-panel' + index" hide-arrow>
+                 <span class="pending-audit-title">
+                   <Icon type="md-time" style="color: #ff9900; margin-right: 5px;" />
+                   待{{ handleName }}
+                 </span>
+                <template #content>
+                  <!-- 遍历所有待审批的记录 -->
+                  <div v-for="(item, itemIndex) in items.filter(item => isPendingAudit(item))" :key="itemIndex">
+                    <div v-for="(itemListItem, itemListIndex) in item.auditName" :key="itemListIndex">
+                      <Card dis-hover
+                            class="portrait-card portrait-card-time"
+                            :bordered="false">
+                        <List item-layout="vertical">
+                          <ListItem>
+                            <Row style="display: flex; align-items: center;">
+                              <!-- 左边：Avatar -->
+                              <Col>
+                                <avatar
+                                    :class="portraitWidth >= 600 ? 'portrait-avatar-large' : 'portrait-avatar-small'"
+                                    size="small">
+                                  {{ getFirstName(itemListItem) }}</avatar>
+                              </Col>
+                              <!-- 右边：审批信息 -->
+                              <Col span="17">
+                                <Row>
+                                  <tooltip>
+                                    <span class="audit-name-style"> {{ itemListItem }}</span>
+                                    <div slot="content" style="white-space: normal"> {{ itemListItem }}</div>
+                                  </tooltip>
+                                  <Divider style="background-color:#808695;height: 1em;margin: 4px 9px 0 6px;"
+                                           type="vertical"/>
+                                  <tooltip v-if="item.auditOrganName">
+                                    <span class="audit-name-style"> {{ item.auditOrganName[itemListIndex] }}</span>
+                                    <div slot="content" style="white-space: normal"> {{ item.auditOrganName[itemListIndex] }}</div>
+                                  </tooltip>
+                                  <span v-if="portraitWidth === 0 || portraitWidth >= 600" class="audit-date-style">
+                                     {{showDate(item)}}
+                                   </span>
+                                </Row>
+                                <Row v-if="item.auditComment">
+                                  <tooltip max-width="200px" placement="bottom-start">
+                                    <span class="audit-comment-style">{{ item.auditComment }}</span>
+                                    <div slot="content" style="white-space: normal"> {{ item.auditComment }}</div>
+                                  </tooltip>
+                                </Row>
+                                <Row v-if="portraitWidth < 600" class="portrait-audit-date-style">{{showDate(item)}}</Row>
+                                <Row style="margin-top: 10px">
+                                  <Col span="12">
+                                    <span style="color: #ff9900; font-size: 13px;">{{ '待' + handleName }}</span>
+                                  </Col>
+                                  <Col span="12" style="text-align: right">
+                                    <Button v-if="item.fileList && item.fileList.length > 0" size="small" type="primary" ghost class="urging" @click="openModal(item)">查看附件</Button>
+                                    <Button v-if="displayPushButton"
+                                            size="small" type="primary" ghost class="urging" v-permission="'swf-work-hurry'"
+                                            @click="pushHim(item,itemListItem,itemListIndex)">催一下
+                                    </Button>
+                                  </Col>
+                                </Row>
+                              </Col>
+                            </Row>
+                          </ListItem>
+                        </List>
+                      </Card>
+                    </div>
+                  </div>
+                </template>
+              </Panel>
+            </Collapse>
+          </template>
+
+          <!-- 已审批的记录：直接显示 -->
+          <div v-for="(item, itemIndex) in items.filter(item => !isPendingAudit(item))" :key="'approved-' + itemIndex">
+            <div v-for="(itemListItem, itemListIndex) in item.auditName" :key="itemListIndex">
+              <Card dis-hover
+                    class="portrait-card portrait-card-time"
+                    :bordered="false">
+                <List item-layout="vertical">
+                  <ListItem>
+                    <Row style="display: flex; align-items: center;">
+                      <!-- 左边：Avatar -->
+                      <Col>
+                        <avatar
+                            :class="portraitWidth >= 600 ? 'portrait-avatar-large' : 'portrait-avatar-small'"
+                            size="small">
+                          {{ getFirstName(itemListItem) }}</avatar>
+                      </Col>
+                      <!-- 右边：审批信息 -->
+                      <Col span="17">
+                        <Row>
+                          <tooltip>
+                            <span class="audit-name-style"> {{ itemListItem }}</span>
+                            <div slot="content" style="white-space: normal"> {{ itemListItem }}</div>
+                          </tooltip>
+                          <Divider style="background-color:#808695;height: 1em;margin: 4px 9px 0 6px;"
+                                   type="vertical"/>
+                          <tooltip v-if="item.auditOrganName">
+                            <span class="audit-name-style"> {{ item.auditOrganName[itemListIndex] }}</span>
+                            <div slot="content" style="white-space: normal"> {{ item.auditOrganName[itemListIndex] }}</div>
+                          </tooltip>
+                          <span v-if="portraitWidth === 0 || portraitWidth >= 600" class="audit-date-style">
+                             {{showDate(item)}}
+                           </span>
+                        </Row>
+                        <Row v-if="item.auditComment">
+                          <tooltip max-width="200px" placement="bottom-start">
+                            <span class="audit-comment-style">{{ item.auditComment }}</span>
+                            <div slot="content" style="white-space: normal"> {{ item.auditComment }}</div>
+                          </tooltip>
+                        </Row>
+                        <Row v-if="portraitWidth < 600" class="portrait-audit-date-style">{{showDate(item)}}</Row>
+                        <Row style="margin-top: 10px">
+                          <Col span="12">
+                             <span style="color: #005aff;; font-size: 13px;"
+                                   v-if="item.auditResult === '00'">流程发起</span>
+                            <span style="color: #005aff;; font-size: 13px;"
+                                  v-else-if="item.auditResult === '10'">自动跳过</span>
+                            <span style="color: #005aff;; font-size: 13px;"
+                                  v-else-if="item.auditResult === '11'">与上一环节办理人相同自动跳过</span>
+                            <span style="color: #005aff;; font-size: 13px;"
+                                  v-else-if="item.auditResult === '12'">与发起人相同自动跳过</span>
+                            <span style="color: #005aff;; font-size: 13px;"
+                                  v-else-if="item.auditResult === '13'">办理人为空自动跳过</span>
+                            <span style="color: #005aff;; font-size: 13px;"
+                                  v-else-if="item.auditResult === '14'">符合流程变量条件自动跳过</span>
+                            <span style="color: #005aff;; font-size: 13px;"
+                                  v-else-if="item.auditResult === '30'">通过</span>
+                            <span style="color: #ed4014; font-size: 13px;"
+                                  v-else-if="item.auditResult === '40'">{{item.rejectName ? item.rejectName : '驳回'}}上一节点</span>
+                            <span style="color: #ed4014; font-size: 13px;"
+                                  v-else-if="item.auditResult === '50'">{{item.rejectName ? item.rejectName : '驳回'}}到原点</span>
+                            <span style="color: #ed4014; font-size: 13px;"
+                                  v-else-if="item.auditResult === '51'">流程终止</span>
+                            <span style="color: #ed4014; font-size: 13px;"
+                                  v-else-if="item.auditResult === '60'">撤回</span>
+                            <span style="color: #005aff; font-size: 13px;"
+                                  v-else-if="item.auditResult === '61'">交回委派任务</span>
+                            <span style="color: #ed4014; font-size: 13px;"
+                                  v-else-if="item.auditResult === '62'">委派任务被撤回</span>
+                            <span style="color: #19be6b; font-size: 13px;"
+                                  v-else-if="item.auditResult === '80'">跳转指定节点</span>
+                            <span style="color: #005aff; font-size: 13px;"
+                                  v-else-if="item.auditResult === '82'">指定他人处理</span>
+                            <span style="color: #ed4014; font-size: 13px;"
+                                  v-else-if="item.auditResult === '83'">会签减签</span>
+                            <span style="color: #ed4014; font-size: 13px;"
+                                  v-else-if="item.auditResult === '90'">{{item.rejectName ? item.rejectName : '驳回'}}指定节点</span>
+                          </Col>
+                          <Col span="12" style="text-align: right">
+                            <Button v-if="item.fileList && item.fileList.length > 0" size="small" type="primary" ghost class="urging" @click="openModal(item)">查看附件</Button>
+                          </Col>
+                        </Row>
+                      </Col>
+                    </Row>
+                  </ListItem>
+                </List>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <!-- 按节点分组时：显示折叠面板 -->
+        <template v-else>
+          <Collapse v-model="activeName" simple style="margin: -10px 0 0 -2px;border: none">
+            <Panel :name="'panel' + index" hide-arrow>
+              <span class="history-title">{{ items[0].taskName }}</span>
+              <template #content>
+                <div v-for="(item, index) in items" :key="index">
+                  <div v-for="(itemListItem, itemListIndex) in item.auditName" :key="itemListIndex">
+                    <Card dis-hover
+                          class="portrait-card"
+                          :bordered="false">
+                      <List item-layout="vertical">
+                        <ListItem>
+                          <Row style="display: flex; align-items: center;">
+                            <!-- 左边：Avatar -->
+                            <Col>
+                              <avatar
+                                  :class="portraitWidth >= 600 ? 'portrait-avatar-large' : 'portrait-avatar-small'"
+                                  size="small">
+                                {{ getFirstName(itemListItem) }}</avatar>
+                            </Col>
+                            <!-- 右边：审批信息 -->
+                            <Col span="17">
+                              <Row>
+                                <tooltip>
+                                  <span class="audit-name-style"> {{ itemListItem }}</span>
+                                  <div slot="content" style="white-space: normal"> {{ itemListItem }}</div>
+                                </tooltip>
+                                <Divider style="background-color:#808695;height: 1em;margin: 4px 9px 0 6px;"
+                                         type="vertical"/>
+                                <tooltip v-if="item.auditOrganName">
+                                  <span class="audit-name-style"> {{ item.auditOrganName[itemListIndex] }}</span>
+                                  <div slot="content" style="white-space: normal"> {{ item.auditOrganName[itemListIndex] }}</div>
+                                </tooltip>
+                                <span v-if="portraitWidth === 0 || portraitWidth >= 600" class="audit-date-style">
+                                  {{showDate(item)}}
+                                </span>
+                              </Row>
+                              <Row v-if="item.auditComment">
+                                <tooltip max-width="200px" placement="bottom-start">
+                                  <span class="audit-comment-style">{{ item.auditComment }}</span>
+                                  <div slot="content" style="white-space: normal"> {{ item.auditComment }}</div>
+                                </tooltip>
+                              </Row>
+                              <Row v-if="portraitWidth < 600" class="portrait-audit-date-style">{{showDate(item)}}</Row>
+                              <Row style="margin-top: 10px">
+                                <Col span="12">
+                                  <span style="color: #005aff;; font-size: 13px;"
+                                        v-if="item.auditResult === '00'">流程发起</span>
+                                  <span style="color: #005aff;; font-size: 13px;"
+                                        v-else-if="item.auditResult === '10'">自动跳过</span>
+                                  <span style="color: #005aff;; font-size: 13px;"
+                                        v-else-if="item.auditResult === '11'">与上一环节办理人相同自动跳过</span>
+                                  <span style="color: #005aff;; font-size: 13px;"
+                                        v-else-if="item.auditResult === '12'">与发起人相同自动跳过</span>
+                                  <span style="color: #005aff;; font-size: 13px;"
+                                        v-else-if="item.auditResult === '13'">办理人为空自动跳过</span>
+                                  <span style="color: #005aff;; font-size: 13px;"
+                                        v-else-if="item.auditResult === '14'">符合流程变量条件自动跳过</span>
+                                  <span style="color: #005aff;; font-size: 13px;"
+                                        v-else-if="item.auditResult === '30'">通过</span>
+                                  <span style="color: #ed4014; font-size: 13px;"
+                                        v-else-if="item.auditResult === '40'">{{item.rejectName ? item.rejectName : '驳回'}}上一节点</span>
+                                  <span style="color: #ed4014; font-size: 13px;"
+                                        v-else-if="item.auditResult === '50'">{{item.rejectName ? item.rejectName : '驳回'}}到原点</span>
+                                  <span style="color: #ed4014; font-size: 13px;"
+                                        v-else-if="item.auditResult === '51'">流程终止</span>
+                                  <span style="color: #ed4014; font-size: 13px;"
+                                        v-else-if="item.auditResult === '60'">撤回</span>
+                                  <span style="color: #005aff; font-size: 13px;"
+                                        v-else-if="item.auditResult === '61'">交回委派任务</span>
+                                  <span style="color: #ed4014; font-size: 13px;"
+                                        v-else-if="item.auditResult === '62'">委派任务被撤回</span>
+                                  <span style="color: #19be6b; font-size: 13px;"
+                                        v-else-if="item.auditResult === '80'">跳转指定节点</span>
+                                  <span style="color: #005aff; font-size: 13px;"
+                                        v-else-if="item.auditResult === '82'">指定他人处理</span>
+                                  <span style="color: #ed4014; font-size: 13px;"
+                                        v-else-if="item.auditResult === '83'">会签减签</span>
+                                  <span style="color: #ed4014; font-size: 13px;"
+                                        v-else-if="item.auditResult === '90'">{{item.rejectName ? item.rejectName : '驳回'}}指定节点</span>
+                                  <span style="color: #ff9900; font-size: 13px;" v-else>{{ '待' + handleName }}</span>
+                                </Col>
+                                <Col span="12" style="text-align: right">
+                                  <Button v-if="item.fileList && item.fileList.length > 0" size="small" type="primary" ghost class="urging" @click="openModal(item)">查看附件</Button>
+                                  <Button v-if="displayPushButton && !auditPassStatus.includes(item.auditResult) && item.auditResult !== '40'&&item.auditResult !== '50'&&item.auditResult !== '60'&&item.auditResult !== '62'&&item.auditResult!=='83'&&item.auditResult!=='90'"
+                                          size="small" type="primary" ghost class="urging" v-permission="'swf-work-hurry'"
+                                          @click="pushHim(item,itemListItem,itemListIndex)">催一下
+                                  </Button>
+                                </Col>
+                              </Row>
+                            </Col>
+                          </Row>
+
+                        </ListItem>
+                      </List>
+                    </Card>
+                  </div>
+                </div>
+              </template>
+            </Panel>
+          </Collapse>
+        </template>
+      </TimelineItem>
+    </Timeline>
+
+    <Modal
+        v-model="showModal"
+        title="查看附件"
+    >
+      <Table border
+             :columns="attachmentColumn"
+             :data="fileList"
+      >
+      </Table>
+    </Modal>
+    <div v-if="0 < allGroupKeys.length">
+      <div v-show="arrowShow" class="arrow">
+        <a @click="arrowClick">
+          <Icon type="ios-arrow-down"/>
+          展开显示更多
+        </a>
+      </div>
+      <div v-show="!arrowShow" class="arrow">
+        <a @click="arrowClick">
+          <Icon type="ios-arrow-up"/>
+          收缩
+        </a>
+      </div>
+    </div>
+    <Modal title="查看附件" v-model="modalImg" fullscreen scrollable :mask="false">
+      <img :src="image" v-if="modalImg" alt="" style="width: 100%">
+      <div slot="footer">
+        <Button type="primary" @click="modalImg = false">关闭</Button>
+      </div>
+    </Modal>
+    <Modal title="查看附件" v-model="modalDocx" fullscreen scrollable :mask="false">
+      <div ref="file"></div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ajax from "@lambo-design/shared/utils/ajax";
+import { operateHref } from '@lambo-design/shared/utils/assist'
+import axios from 'axios';
+// 引入docx-preview插件
+let docx = require('docx-preview');
+export default {
+  components: {},
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    applyId: {
+      type: String,
+      default: ""
+    },
+    donePage: {
+      type: Boolean,
+      default: false
+    },
+    pushButton: {
+      type: Boolean,
+      default: true
+    },
+    handleName: {
+      type: String,
+      default: "审批"
+    },
+    //横竖版样式不同
+    portraitWidth: {
+      type: Number,
+      default: 400
+    },
+    smartFlowServerContext: {
+      type: String,
+      default: '/api/smart-flow-server',
+    },
+  },
+  data() {
+    return {
+      allGroupKeys: [],
+      displayedList: [],
+      arrowShow: true, // 控制加载更多按钮的显示
+      activeName: 'panel0',
+      modalDocx: false,
+      setModals: {
+        modals: []
+      },
+      auditPassStatus:['00', '10', '11', '12', '13', '14', '30', '40', '50', '51', '60', '61', '62', '80', '82', '83', '90'],
+      showModal: false,
+      fileList: [],
+      modalImg: false,
+      image: "",
+      itemList: [],
+      auditNameList: [],
+      displayPushButton: false,
+      sortBy: 'time',
+      pendingActiveName: [], // 控制待审批折叠面板的展开状态
+    }
+  },
+  computed: {
+    processedItemList() {
+      // 确保 itemList 存在且是数组
+      if (!this.itemList || !Array.isArray(this.itemList) || this.itemList.length === 0) {
+        return [];
+      }
+
+      if (this.sortBy === 'time') {
+        // 按时间排序：将所有审批记录平铺，按时间排序，然后重新分组
+        let allRecords = [];
+
+        // 平铺所有审批记录
+        this.itemList.forEach(nodeGroup => {
+          // 确保 nodeGroup 是数组
+          if (Array.isArray(nodeGroup)) {
+            nodeGroup.forEach(record => {
+              if (record && typeof record === 'object') {
+                // 获取准确的时间用于排序
+                let sortTime = this.getRecordTime(record);
+                let timestamp = new Date(sortTime).getTime();
+
+                // 验证时间戳是否有效
+                if (isNaN(timestamp)) {
+                  console.warn('时间戳解析失败:', {
+                    record: record,
+                    sortTime: sortTime,
+                    auditDate: record.auditDate,
+                    createTime: record.createTime
+                  });
+                  // 使用当前时间作为后备
+                  timestamp = new Date().getTime();
+                  sortTime = new Date().toISOString();
+                }
+
+                allRecords.push({
+                  record: record,
+                  sortTime: sortTime,
+                  timestamp: timestamp
+                });
+              }
+            });
+          }
+        });
+
+        // 调试信息：打印排序前的数据
+        console.log('排序前的记录:', allRecords.map(item => ({
+          auditResult: item.record.auditResult,
+          auditDate: item.record.auditDate,
+          createTime: item.record.createTime,
+          sortTime: item.sortTime,
+          timestamp: item.timestamp,
+          date: new Date(item.timestamp)
+        })));
+
+        // 按时间戳排序（倒序，最新在前）
+        allRecords.sort((a, b) => {
+          // 使用时间戳进行排序，避免字符串比较问题
+          return b.timestamp - a.timestamp;
+        });
+
+        // 调试信息：打印排序后的数据
+        console.log('排序后的记录:', allRecords.map(item => ({
+          auditResult: item.record.auditResult,
+          auditDate: item.record.auditDate,
+          createTime: item.record.createTime,
+          sortTime: item.sortTime,
+          timestamp: item.timestamp,
+          date: new Date(item.timestamp)
+        })));
+
+        // 重新分组：相同状态且时间相近的记录分为一组
+        let groupedRecords = [];
+        let currentGroup = [];
+
+        allRecords.forEach((item, index) => {
+          if (currentGroup.length === 0) {
+            // 第一个记录，直接加入
+            currentGroup.push(item.record);
+          } else {
+            // 检查是否应该与当前组合并
+            let shouldGroup = false;
+
+            // 如果都是待审批状态且是同一个节点，则分为一组
+            if (this.isPendingAudit(item.record) &&
+                currentGroup.some(r => this.isPendingAudit(r) && r.taskName === item.record.taskName)) {
+              shouldGroup = true;
+            }
+            // 如果都是已审批状态且时间非常接近（同一天或几分钟内），可以考虑分组，但通常按个人分组
+            else if (!this.isPendingAudit(item.record) &&
+                currentGroup.length === 1 &&
+                !this.isPendingAudit(currentGroup[0]) &&
+                currentGroup[0].taskName === item.record.taskName) {
+              // 暂时不分组已审批记录，每个人一组
+              shouldGroup = false;
+            }
+
+            if (shouldGroup) {
+              currentGroup.push(item.record);
+            } else {
+              // 开始新的分组
+              if (currentGroup.length > 0) {
+                groupedRecords.push([...currentGroup]);
+              }
+              currentGroup = [item.record];
+            }
+          }
+        });
+
+        // 添加最后一组
+        if (currentGroup.length > 0) {
+          groupedRecords.push(currentGroup);
+        }
+
+        return groupedRecords;
+      } else {
+        // 按节点分组：保持原有的节点分组结构
+        return this.itemList;
+      }
+    },
+
+    attachmentColumn: function () {
+      let column = [];
+      column.push({title: '序号', type: 'index', width: 70, align: 'center', fixed: 'left'});
+      column.push({
+        title: '附件名称', key: 'fileName', minWidth: 150, align: 'center', fixed: 'left',
+        render(h, {row}) {
+          const index = row.fileName.lastIndexOf(".");
+          const fileName = row.fileName.substr(0, index)
+          return h("span", fileName)
+
+        }
+      });
+      column.push({
+        title: '附件类型', width: 100, align: 'center', fixed: 'left',
+        render: (h, {row}) => {
+          const index = row.fileName.lastIndexOf(".");
+          const fileType = row.fileName.substr(index + 1)
+          return h("span", fileType)
+        }
+      });
+
+      column.push({
+        title: "操作", width: 160, align: 'center', tooltip: true,
+        render: (h, {row}) => {
+          const index = row.fileName.lastIndexOf(".");
+          const fileType = row.fileName.substr(index + 1).toLowerCase()
+          const typeList=['jpg','gif','png','docx']
+          if (typeList.indexOf(fileType) !== -1) {
+            return h("div", [
+              operateHref(this, h, row, "下载", () => {
+                this.getAttach(row);
+              }, "primary"),
+              operateHref(this, h, row, "预览", () => {
+                this.preViewAttach(row);
+              }, "primary")
+            ]);
+          } else {
+            return h("div", [
+              operateHref(this, h, row, "下载", () => {
+                this.getAttach(row);
+              }, "primary")
+            ]);
+          }
+
+        }
+
+      });
+      return column;
+    }
+  },
+  methods: {
+    pushHim(item, auditName, index) {
+      if (this.isDebouncing) {
+        return;
+      }
+
+      this.isDebouncing = true;
+      // 设置一个延时，例如 1 秒，之后重置防抖状态
+      setTimeout(() => {
+        this.isDebouncing = false;
+      }, 2000);
+
+      let self = this;
+      let applyUserName = item.applyUser.split(":")[1];
+      let params = {
+        applyUserName: applyUserName,
+        auditName: auditName,
+        auditId: item.auditId[index],
+        procName: item.procName,
+        effectTime: item.startDate,
+        expireTime: item.warningDate,
+        applyId: item.applyId,
+        taskNode: item.taskNode
+      };
+      let url = self.smartFlowServerContext + "/manage/processTodo/sendMessage";
+      ajax.post(url, params).then(function (resp) {
+        console.log("message  ", resp);
+        if (resp.data.code == 200) {
+          self.$Message.success("催办成功");
+        } else {
+          self.$Message.error("催办失败");
+        }
+      });
+    },
+    getAttach(row) {
+      window.open(this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId, "_blank");
+    },
+    preViewAttach(row) {
+      let reg = /\.(gif|jpg|jpeg|bmp|png|PNG)$/
+      let regs = /\.(pdf)$/
+      if (reg.test(row.fileName)) {
+        let url = this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId;
+        this.imgPreview(url);
+      } else if (regs.test(row.fileName)) {
+        window.open(this.smartFlowServerContext + "/manage/oss/file/getFileStream?fileId=" + row.fileId, "_blank");
+      } else {
+        this.modalDocx = true
+        axios({
+          method: 'get',
+          responseType: 'blob', // 因为是流文件，所以要指定blob类型
+          url: this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId// 一个word下载文件的接口
+        }).then(({data}) => {
+              docx.renderAsync(data, this.$refs.file, null, {
+                className: "docx", //默认和文档样式类的类名/前缀
+                inWrapper: true, //启用围绕文档内容呈现包装器
+                ignoreWidth: false, //禁用页面的渲染宽度
+                ignoreHeight: false, //禁用页面的渲染高度
+                ignoreFonts: false, //禁用字体渲染
+                breakPages: true, //在分页符上启用分页
+                ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
+                experimental: false, //启用实验功能（制表符停止计算）
+                trimXmlDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明
+                useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
+                useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
+                showChanges: false, //启用文档更改的实验渲染（插入/删除）
+                debug: false, //启用额外的日志记录
+              })
+            }
+        )
+      }
+    },
+    //查看附件
+    imgPreview: function (img) {
+      this.modalImg = true
+      this.image = img;
+    },
+    arrowClick() {
+      if (this.itemList.length > 0) {
+        if (this.arrowShow) {
+          // 显示全部
+          this.displayedList = this.itemList;
+          this.arrowShow = false;
+        } else {
+          // 只显示两个
+          this.displayedList = this.itemList.slice(0, 2);
+          this.arrowShow = true;
+        }
+      }
+    },
+    openModal(item) {
+      this.fileList = item.fileList
+      this.showModal = true
+    },
+    getFirstName(item) {
+      return item ? item[0] : ''
+    },
+    showDate(item) {
+      if (item.auditResult){
+        if (item.auditResult === '00'){
+          return `发起时间：${item.auditDate}`
+        }
+        return `处理时间：${item.auditDate}`
+      }
+      return `接收时间：${item.createTime}`
+    },
+    getRecordTime(item) {
+      // 获取记录的时间用于排序
+      let timeStr = '';
+
+      if (item.auditResult && item.auditResult !== '') {
+        // 已审批记录：优先使用审批时间
+        timeStr = item.auditDate || item.createTime;
+      } else {
+        // 待审批记录：使用创建时间
+        timeStr = item.createTime || item.auditDate;
+      }
+
+      // 如果没有时间，使用当前时间
+      if (!timeStr) {
+        return new Date().toISOString();
+      }
+
+      // 标准化时间格式
+      try {
+        // 处理中国标准时间格式 "YYYY-MM-DD HH:mm:ss"
+        if (typeof timeStr === 'string') {
+          // 移除可能的多余空格
+          timeStr = timeStr.trim();
+
+          // 检查是否是标准格式 "YYYY-MM-DD HH:mm:ss"
+          if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(timeStr)) {
+            // 直接使用 new Date() 解析，这样会按本地时区处理
+            let date = new Date(timeStr);
+            if (!isNaN(date.getTime())) {
+              return date.toISOString();
+            }
+          }
+
+          // 如果包含 T 但没有时区信息，添加本地时区
+          if (timeStr.includes('T') && !timeStr.includes('Z') && !timeStr.includes('+')) {
+            timeStr += 'Z';
+          }
+        }
+
+        // 验证时间是否有效
+        let date = new Date(timeStr);
+        if (isNaN(date.getTime())) {
+          console.warn('Invalid date format:', timeStr);
+          return new Date().toISOString();
+        }
+
+        return date.toISOString();
+      } catch (error) {
+        console.warn('Error parsing date:', timeStr, error);
+        return new Date().toISOString();
+      }
+    },
+    getTimelineDotColor(auditResult) {
+      if (this.auditPassStatus.includes(auditResult)) {
+        return '#005aff'; // 蓝色：通过状态
+      } else if (auditResult === '40' || auditResult === '50' ) {
+        return '#ffcc66'; // 黄色：驳回状态
+      } else if (auditResult === '60' || auditResult === '62' || auditResult === '83') {
+        return '#ed4014'; // 红色：撤回/委派状态
+      } else {
+        return '#ff9900'; // 橙色：其他状态
+      }
+    },
+    toggleSortBy(by) {
+      this.sortBy = by;
+    },
+    isPendingAudit(item) {
+      // 判断是否为待审批状态
+      // auditResult为空、null、undefined或者不在已审批状态列表中时，认为是待审批
+      return !item.auditResult || !this.auditPassStatus.includes(item.auditResult);
+    }
+  },
+  mounted() {
+    this.displayPushButton = this.donePage && this.pushButton;
+    this.itemList = this.list;
+    if (this.itemList.length > 0) {
+      // 初始化modals
+      this.setModals.modals = this.itemList.map(() => ({value: false}));
+      this.activeName = 'panel0';
+    }
+  },
+  watch: {
+    list: function (newValue) {
+      this.$nextTick(() => {
+        this.itemList = newValue;
+        if (this.itemList.length > 0) {
+          this.setModals.modals = this.itemList.map(() => ({value: false}));
+        }
+      });
+    }
+  }
+
+
+}
+</script>
+
+<style scoped>
+@import "../styles/css/index.less";
+
+.history-controls {
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e8eaec;
+  text-align: center;
+}
+
+.history-controls .ivu-btn-group .ivu-btn {
+  margin-right: 0;
+}
+
+.history-controls .ivu-btn-group .ivu-btn + .ivu-btn {
+  margin-left: -1px;
+}
+
+.history-title {
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.pending-audit-title {
+  font-weight: 600;
+  color: #ff9900;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+/* 按时间排序的卡片样式 - 更小，不遮挡时间轴圆点 */
+.portrait-card-time {
+  margin-left: 20px !important;
+  margin-right: 10px !important;
+  margin-bottom: 8px !important;
+  background-color: #fafafa !important;
+}
+
+:deep(.portrait-card-time .ivu-card-body) {
+  padding: 8px 12px !important;
+}
+
+:deep(.portrait-card-time .ivu-list-item) {
+  padding: 6px 0 !important;
+}
+
+:deep(.docx) {
+  width: 100% !important;
+}
+
+:deep(.ivu-timeline-item-tail) {
+  border-style: solid;
+  border-left: none;
+  border-color: #005aff;
+  border-width: thin;
+}
+
+:deep(.ivu-list-item) {
+  padding-bottom: 0 !important;
+}
+
+:deep(.ivu-collapse-content-box) {
+  padding: 0 !important;
+}
+
+:deep(.ivu-card-body) {
+  padding: 5px !important;
+}
+
+</style>