@lambo-design/workflow-approve 1.0.0-beta.14 → 1.0.0-beta.141

package/src/components/history.vue

@@ -1,382 +1,1181 @@
-<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">
-                              <tooltip max-width="200px" placement="bottom-start">
-                                <span class="audit-name-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)}}{{ 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,
-        applyId: item.applyId,
-      };
-      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: orange; 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: orange; 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">
+                            <!-- green 52c41a // 绿色-->
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-if="item.auditResult === '00'">流程发起</span>
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-else-if="item.auditResult === '10'">首节点自动跳过</span>
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-else-if="item.auditResult === '11'">与上一环节办理人相同自动跳过</span>
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-else-if="item.auditResult === '12'">与发起人相同自动跳过</span>
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-else-if="item.auditResult === '13'">办理人为空自动跳过</span>
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-else-if="item.auditResult === '14'">符合流程变量条件自动跳过</span>
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-else-if="item.auditResult === '30'">通过</span>
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-else-if="item.auditResult === '31'">{{item.passName ? item.passName : '通过'}}</span>
+                            <span style="color: #fa541c; font-size: 13px;"
+                                  v-else-if="item.auditResult === '32'">不{{item.passName ? item.passName : '通过'}}</span>
+                            <!-- volcano fa541c // 火红色-->
+                            <span style="color: #fa541c; font-size: 13px;"
+                                  v-else-if="item.auditResult === '40'">{{item.rejectName ? item.rejectName : '驳回'}}上一节点</span>
+                            <!-- red f5222d // 红色-->
+                            <span style="color: #f5222d; font-size: 13px;"
+                                  v-else-if="item.auditResult === '50'">{{item.rejectName ? item.rejectName : '驳回'}}到原点</span>
+                            <!-- purple 722ed1 // 紫色-->
+                            <span style="color: #722ed1; font-size: 13px;"
+                                  v-else-if="item.auditResult === '51'">流程终止</span>
+                            <!-- blue 1890ff // 蓝色-->
+                            <span style="color: #1890ff; font-size: 13px;"
+                                  v-else-if="item.auditResult === '60'">撤回</span>
+                            <span style="color: #52c41a; font-size: 13px;"
+                                  v-else-if="item.auditResult === '61'">交回委派任务</span>
+                            <span style="color: #1890ff; font-size: 13px;"
+                                  v-else-if="item.auditResult === '62'">委派任务被撤回</span>
+                            <!-- orange fa8c16 // 橙色-->
+                            <span style="color: #fa8c16; font-size: 13px;"
+                                  v-else-if="item.auditResult === '63'">委派任务</span>
+                            <!-- cyan 13c2c2 // 青色-->
+                            <span style="color: #13c2c2; font-size: 13px;"
+                                  v-else-if="item.auditResult === '80'">跳转指定节点</span>
+                            <span style="color: #13c2c2; font-size: 13px;"
+                                  v-else-if="item.auditResult === '82'">指定他人处理</span>
+                            <span style="color: #1890ff; font-size: 13px;"
+                                  v-else-if="item.auditResult === '83'">会签减签</span>
+                            <!-- magenta eb2f96 // 品红色-->
+                            <span style="color: #eb2f96; font-size: 13px;"
+                                  v-else-if="item.auditResult === '90'">{{item.rejectName ? item.rejectName : '驳回'}}指定节点</span>
+                            <!-- orange fa8c16 // 默认橙色-->
+                            <span style="color: #fa8c16; 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>
+                          </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">
+                                  <!-- green 52c41a // 绿色-->
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-if="item.auditResult === '00'">流程发起</span>
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-else-if="item.auditResult === '10'">首节点自动跳过</span>
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-else-if="item.auditResult === '11'">与上一环节办理人相同自动跳过</span>
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-else-if="item.auditResult === '12'">与发起人相同自动跳过</span>
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-else-if="item.auditResult === '13'">办理人为空自动跳过</span>
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-else-if="item.auditResult === '14'">符合流程变量条件自动跳过</span>
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-else-if="item.auditResult === '30'">通过</span>
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-else-if="item.auditResult === '31'">会签表决{{item.passName ? item.passName : '通过'}}</span>
+                                  <span style="color: #fa541c; font-size: 13px;"
+                                        v-else-if="item.auditResult === '32'">会签表决不{{item.passName ? item.passName : '通过'}}</span>
+                                  <!-- volcano fa541c // 火红色-->
+                                  <span style="color: #fa541c; font-size: 13px;"
+                                        v-else-if="item.auditResult === '40'">{{item.rejectName ? item.rejectName : '驳回'}}上一节点</span>
+                                  <!-- red f5222d // 红色-->
+                                  <span style="color: #f5222d; font-size: 13px;"
+                                        v-else-if="item.auditResult === '50'">{{item.rejectName ? item.rejectName : '驳回'}}到原点</span>
+                                  <!-- purple 722ed1 // 紫色-->
+                                  <span style="color: #722ed1; font-size: 13px;"
+                                        v-else-if="item.auditResult === '51'">流程终止</span>
+                                  <!-- blue 1890ff // 蓝色-->
+                                  <span style="color: #1890ff; font-size: 13px;"
+                                        v-else-if="item.auditResult === '60'">撤回</span>
+                                  <span style="color: #52c41a; font-size: 13px;"
+                                        v-else-if="item.auditResult === '61'">交回委派任务</span>
+                                  <span style="color: #1890ff; font-size: 13px;"
+                                        v-else-if="item.auditResult === '62'">委派任务被撤回</span>
+                                  <!-- orange fa8c16 // 橙色-->
+                                  <span style="color: #fa8c16; font-size: 13px;"
+                                        v-else-if="item.auditResult === '63'">委派任务</span>
+                                  <!-- cyan 13c2c2 // 青色-->
+                                  <span style="color: #13c2c2; font-size: 13px;"
+                                        v-else-if="item.auditResult === '80'">跳转指定节点</span>
+                                  <span style="color: #13c2c2; font-size: 13px;"
+                                        v-else-if="item.auditResult === '82'">指定他人处理</span>
+                                  <span style="color: #1890ff; font-size: 13px;"
+                                        v-else-if="item.auditResult === '83'">会签减签</span>
+                                  <!-- magenta eb2f96 // 品红色-->
+                                  <span style="color: #eb2f96; font-size: 13px;"
+                                        v-else-if="item.auditResult === '90'">{{item.rejectName ? item.rejectName : '驳回'}}指定节点</span>
+                                  <!-- orange fa8c16 // 默认橙色-->
+                                  <span style="color: #fa8c16; 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)"
+                                          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>
+    <Modal
+        v-model="remindModalVisible"
+        title="催办提醒"
+        width="640"
+        class-name="todo-remind-modal"
+        @on-cancel="closeRemindModal"
+    >
+      <div class="todo-remind-dialog">
+        <div class="todo-remind-row">
+          <div class="todo-remind-label">催办类型：</div>
+          <CheckboxGroup v-model="remindForm.types" class="todo-remind-type-group">
+            <Checkbox label="MESSAGE">系统消息</Checkbox>
+            <Checkbox label="SMS">短信提醒</Checkbox>
+          </CheckboxGroup>
+        </div>
+        <div class="todo-remind-row todo-remind-row-top">
+          <div class="todo-remind-label">催办内容：</div>
+          <div class="todo-remind-body">
+            <Input
+                ref="remindContent"
+                v-model="remindForm.content"
+                type="textarea"
+                :rows="6"
+                :maxlength="500"
+                show-word-limit
+                placeholder="请输入催办内容"
+                class="todo-remind-textarea"
+                @on-focus="syncRemindCursor"
+                @on-click="syncRemindCursor"
+                @on-keyup="syncRemindCursor"
+                @on-select="syncRemindCursor"
+            />
+          </div>
+        </div>
+        <div class="todo-remind-row todo-remind-row-top">
+          <div class="todo-remind-label">占位变量：</div>
+          <div class="todo-remind-body todo-remind-variable-list">
+            <button
+                v-for="item in remindVariableList"
+                :key="item.key"
+                type="button"
+                class="todo-remind-variable"
+                @mousedown.prevent="insertRemindVariable(item)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <Button type="primary" :loading="remindSubmitting" @click="submitRemind">催办</Button>
+      </template>
+    </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: "审批"
+    },
+    historySortBy: {
+      type: String,
+      default: "time"
+    },
+    //横竖版样式不同
+    portraitWidth: {
+      type: Number,
+      default: 400
+    },
+    smartFlowServerContext: {
+      type: String,
+      default: '/api/smart-flow-server',
+    },
+  },
+  data() {
+    return {
+      allGroupKeys: [],
+      displayedList: [],
+      arrowShow: true, // 控制加载更多按钮的显示
+      activeName: '',
+      modalDocx: false,
+      setModals: {
+        modals: []
+      },
+      auditPassStatus:['00', '10', '11', '12', '13', '14', '30', '31', '32', '40', '50', '51', '60', '61', '62', '80', '82', '83', '90'],
+      showModal: false,
+      fileList: [],
+      modalImg: false,
+      image: "",
+      itemList: [],
+      auditNameList: [],
+      displayPushButton: false,
+      remindModalVisible: false,
+      remindSubmitting: false,
+      currentRemindRow: null,
+      remindCursorStart: 0,
+      remindCursorEnd: 0,
+      remindForm: {
+        types: ['MESSAGE'],
+        content: ''
+      },
+      remindVariableList: [
+        {
+          key: 'applyId',
+          label: '申请编码'
+        },
+        {
+          key: 'applyUserName',
+          label: '发起人'
+        },
+        {
+          key: 'procName',
+          label: '流程名称'
+        },
+        {
+          key: 'procTypeName',
+          label: '流程类型'
+        },
+        {
+          key: 'startTime',
+          label: '发起时间'
+        },
+        {
+          key: 'businessTopic',
+          label: '业务主题'
+        },
+        {
+          key: 'busKeyDes',
+          label: '业务描述'
+        },
+        {
+          key: 'taskName',
+          label: '环节名称'
+        },
+        {
+          key: 'orgName',
+          label: '区域名称'
+        }
+      ],
+      sortBy: this.historySortBy,
+      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 {
+        this.activeName = ''
+        // 按节点分组：保持原有的节点分组结构
+        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) {
+      this.openRemindModal(item, auditName, index)
+    },
+    getRemindContextRow(item, auditName, index) {
+      const applyUser = item && item.applyUser ? String(item.applyUser) : ''
+      const applyUserName = applyUser && applyUser.indexOf(':') > -1 ? applyUser.split(':')[1] : applyUser
+      const auditIds = item && item.auditId
+      const auditId = Array.isArray(auditIds) ? auditIds[index] : auditIds
+      return Object.assign({}, item, {
+        applyUserName,
+        auditName,
+        auditId,
+        startTime: this.formatDateTime(item && item.startDate),
+        procInstanceId: item && (item.procInstanceId || item.instanceId) ? (item.procInstanceId || item.instanceId) : ''
+      })
+    },
+    openRemindModal(item, auditName, index) {
+      this.currentRemindRow = this.getRemindContextRow(item || {}, auditName, index)
+      this.remindModalVisible = true
+    },
+    closeRemindModal() {
+      this.remindModalVisible = false
+      this.$nextTick(() => {
+        this.resetRemindForm()
+      })
+    },
+    resetRemindForm() {
+      this.currentRemindRow = null
+      this.remindCursorStart = 0
+      this.remindCursorEnd = 0
+      this.remindSubmitting = false
+      this.remindForm = {
+        types: ['MESSAGE'],
+        content: ''
+      }
+    },
+    syncRemindCursor() {
+      this.$nextTick(() => {
+        const inputRef = this.$refs.remindContent
+        const textarea = inputRef && inputRef.$refs ? inputRef.$refs.textarea : null
+        if (!textarea) {
+          return
+        }
+        this.remindCursorStart = typeof textarea.selectionStart === 'number' ? textarea.selectionStart : 0
+        this.remindCursorEnd = typeof textarea.selectionEnd === 'number' ? textarea.selectionEnd : this.remindCursorStart
+      })
+    },
+    insertRemindVariable(variable) {
+      const key = variable && variable.key ? variable.key : ''
+      const rawValue = key && this.currentRemindRow ? this.currentRemindRow[key] : ''
+      const value = rawValue === null || rawValue === undefined || rawValue === '--' ? '' : String(rawValue)
+      if (!value) {
+        return
+      }
+      const currentContent = this.remindForm.content || ''
+      const inputRef = this.$refs.remindContent
+      const textarea = inputRef && inputRef.$refs ? inputRef.$refs.textarea : null
+      const selectionStart = textarea && typeof textarea.selectionStart === 'number' ? textarea.selectionStart : this.remindCursorStart
+      const selectionEnd = textarea && typeof textarea.selectionEnd === 'number' ? textarea.selectionEnd : this.remindCursorEnd
+      const start = Math.max(0, Math.min(selectionStart, currentContent.length))
+      const end = Math.max(start, Math.min(selectionEnd, currentContent.length))
+      this.remindForm.content = `${currentContent.slice(0, start)}${value}${currentContent.slice(end)}`
+      this.$nextTick(() => {
+        const currentInputRef = this.$refs.remindContent
+        const currentTextarea = currentInputRef && currentInputRef.$refs ? currentInputRef.$refs.textarea : null
+        if (currentTextarea && typeof currentTextarea.focus === 'function') {
+          currentTextarea.focus()
+          const nextPosition = start + value.length
+          if (typeof currentTextarea.setSelectionRange === 'function') {
+            currentTextarea.setSelectionRange(nextPosition, nextPosition)
+          }
+          this.remindCursorStart = nextPosition
+          this.remindCursorEnd = nextPosition
+        }
+      })
+    },
+    submitRemind() {
+      if (this.remindSubmitting) {
+        return
+      }
+      if (!this.remindForm.types.length) {
+        this.$Message.warning('请选择至少一种催办类型')
+        return
+      }
+      const messageContent = (this.remindForm.content || '').trim()
+      if (!messageContent) {
+        this.$Message.warning('请输入催办内容')
+        return
+      }
+      const remindRow = this.currentRemindRow || {}
+      const taskNode = remindRow.taskNode
+      const procInstanceId = remindRow.procInstanceId
+      if (!taskNode || !procInstanceId) {
+        this.$Message.error('催办参数缺失，无法提交')
+        return
+      }
+      const actionTypes = this.remindForm.types.filter(Boolean)
+      if (!actionTypes.length) {
+        this.$Message.error('催办类型转换失败')
+        return
+      }
+      const requestUrl = this.smartFlowServerContext + '/manage/processTodo/urgeTask'
+      const actionType = actionTypes.join(',')
+      this.remindSubmitting = true
+      this.$Spin.show()
+      ajax.post(requestUrl, { taskNode, procInstanceId, actionType, messageContent }).then((resp) => {
+        const successCodes = ['200', 200]
+        if (!resp || !resp.data || successCodes.indexOf(resp.data.code) === -1) {
+          const message = resp && resp.data && resp.data.message ? resp.data.message : '催办失败'
+          this.$Message.error(message)
+          this.closeRemindModal()
+          return
+        }
+        this.$Message.success('催办成功')
+        this.closeRemindModal()
+      }).catch(() => {
+        this.$Message.error('催办失败')
+      }).finally(() => {
+        this.remindSubmitting = false
+        this.$Spin.hide()
+      })
+    },
+    formatDateTime(value) {
+      if (!value) {
+        return '--'
+      }
+      const date = new Date(value)
+      if (Number.isNaN(date.getTime())) {
+        return '--'
+      }
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+    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'; // 橙色：其他状态
+        }
+      // if (auditResult === '00' || auditResult === '10' || auditResult === '11' || auditResult === '12' || auditResult === '13' || auditResult === '14'
+      //         || auditResult === '30' || auditResult === '61') {
+      //   return 'green'; // 绿色：通过/跳过/交回委派状态
+      // } else if (auditResult === '40') {
+      //   return 'volcano'; // 火红色：驳回上一节点状态
+      // } else if (auditResult === '50' || auditResult === '83') {
+      //   return 'red'; // 红色：驳回到原点/会签减签状态
+      // } else if (auditResult === '90') {
+      //   return 'magenta'; // 品红色：驳回指定节点状态
+      // } else if (auditResult === '51') {
+      //   return 'purple'; // 紫色：流程终止状态
+      // } else if (auditResult === '60' || auditResult === '62') {
+      //   return 'blue'; // 蓝色：撤回/委派撤回状态
+      // } else if (auditResult === '80' || auditResult === '82') {
+      //   return 'cyan'; // 青色：跳转/交接状态
+      // } else {
+      //   return 'orange'; // 橙色：其他状态
+      // }
+    },
+    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: orange;
+  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;
+}
+
+.todo-remind-dialog {
+  padding: 8px 8px 0;
+}
+
+.todo-remind-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.todo-remind-row-top {
+  align-items: flex-start;
+}
+
+.todo-remind-label {
+  width: 96px;
+  flex-shrink: 0;
+  color: #17233d;
+  line-height: 32px;
+  text-align: right;
+}
+
+.todo-remind-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.todo-remind-type-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  min-height: 32px;
+}
+
+.todo-remind-type-group .ivu-checkbox-wrapper {
+  margin-right: 0;
+}
+
+.todo-remind-textarea textarea {
+  resize: none;
+  min-height: 132px;
+}
+
+.todo-remind-variable-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.todo-remind-variable {
+  min-width: 72px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  color: #515a6e;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 12px;
+  line-height: 28px;
+}
+
+.todo-remind-variable:hover {
+  color: #2d8cf0;
+  border-color: #2d8cf0;
+  background: #f0faff;
+}
+
+.todo-remind-modal .ivu-modal-header {
+  padding: 16px 24px;
+}
+
+.todo-remind-modal .ivu-modal-body {
+  padding: 20px 24px 12px;
+}
+
+.todo-remind-modal .ivu-modal-footer {
+  padding: 10px 24px 20px;
+  border-top: none;
+}
+
+</style>