@lambo-design/workflow-approve 1.0.0-beta.95 → 1.0.0-beta.96

package/src/components/horizontal/history.vue

@@ -1,464 +1,464 @@
-<template>
-  <div>
-
-    <Timeline class="horizontalTimeline">
-      <TimelineItem v-for="(items,index) in itemList" :key="index" class="horizontalTimelineItem">
-        <template #dot>
-          <img v-if="items[0].auditResult === '30'" style="zoom: 18%" class="imgStyle" src="../../static/icons/tongguo1.png"
-               alt=""/>
-          <img v-else-if="items[0].auditResult === '40'" style="zoom: 15%" class="imgStyle"
-               src="../../static/icons/bohui1.png" alt=""/>
-          <img v-else-if="items[0].auditResult === '50'" style="zoom: 15%" class="imgStyle"
-               src="../../static/icons/bohui1.png" alt=""/>
-          <img v-else-if="items[0].auditResult === '60'" class="imgStyle" src="../../static/icons/bohui.png" alt=""/>
-          <img v-else-if="items[0].auditResult === '80'" style="zoom: 18%" class="imgStyle"
-               src="../../static/icons/tongguo1.png" alt=""/>
-          <img v-else style="zoom: 18%" class="imgStyle" src="../../static/icons/daiban.png" alt=""/>
-        </template>
-        <Collapse v-model="activeName" simple style="margin: -10px 0 0 -2px;border: none">
-          <Panel :name="'panel' + index">
-            <span class="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="horizontalCard"
-                        :bordered="false">
-                    <List item-layout="vertical">
-                      <ListItem>
-                        <Row style="display: flex; align-items: center;">
-                          <!-- 左边：Avatar -->
-                          <Col>
-                            <avatar
-                              class="horizontalAvatar"
-                              icon="ios-person"
-                              size="large"/>
-                          </Col>
-                          <!-- 右边：审批信息 -->
-                          <Col span="17">
-                            <Row>
-                              <tooltip>
-                                <span class="auditNameStyle"> {{ 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="auditNameStyle"> {{ item.auditOrganName[itemListIndex] }}</span>
-                              <span class="auditDateStyle">
-                  {{ item.startDate }}{{ item.auditDate }}
-                  </span>
-                            </Row>
-                            <Row style="margin-top: 10px">
-                          <span style="color: #19be6b; 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 === '80'">驳回到指定节点</span>
-                              <span style="color: #ff9900; font-size: 13px;" v-else>待审批</span>
-                              <span style="color: #808695;font-size: 13px;margin-left: 10px"
-                                    v-if="item.auditComment">审批意见：</span>
-                              <span style="color: #808695;font-size: 13px"
-                              >{{ item.auditComment }}</span>
-                              <template v-if="item.fileList && item.fileList.length > 0">
-                                <a @click="openModal(item)" style="margin-left: 10px">查看附件</a>
-                              </template>
-                            </Row>
-                          </Col>
-                          <Col style="margin-right: 10px">
-                            <template
-                              v-if="displayPushButton && item.auditResult !== '30'&&item.auditResult !== '40'&&item.auditResult !== '50'&&item.auditResult !== '60'&&item.auditResult!=='80'">
-                              <Button style="color:#d30000;border-color:#d30000;zoom: 120%;"
-                                      @click="pushHim(item,itemListItem,itemListIndex)">催一下
-                              </Button>
-                            </template>
-                          </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 { operateBtn } 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
-    },
-    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','pdf','gif','png','docx']
-          //由于pdf预览显示乱码 暂时不提供pdf预览功能
-          const typeList = ['jpg', 'gif', 'png', 'docx']
-          if (typeList.indexOf(fileType) !== -1) {
-            return h("div", [
-              operateBtn(this, h, row, "下载", () => {
-                this.getAttach(row);
-              }, "primary"),
-              operateBtn(this, h, row, "预览", () => {
-                this.preViewAttach(row);
-              }, "primary")
-            ]);
-          } else {
-            return h("div", [
-              operateBtn(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 = this.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
-    }
-  },
-  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>
-.arrow {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.fontType {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-  font-weight: bold;
-  color: #657180;
-  font-size: 14px
-}
-
-.title {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-  font-weight: bold;
-  color: #515a6e;
-  font-size: 14px;
-  margin: 0 1vh 0 -2vh;
-}
-
-.imgStyle {
-  margin: 0 0 0 -5px;
-  zoom: 60%;
-
-}
-
-.cardStyle {
-  background-color: #bbbbbb;
-}
-
-.auditNameStyle {
-  margin-bottom: -5px;
-  white-space: nowrap;
-  display: inline-block;
-  max-width: 100px;
-  font-size: 14px;
-  color: #17233d;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.auditDateStyle {
-  white-space: nowrap;
-  display: inline-block;
-  max-width: 100px;
-  font-size: 14px;
-  color: #808695;
-  margin-left: 10px;
-}
-
-.horizontalTimelineItem {
-  margin-bottom: 30px !important;
-}
-.portraitTimelineItem {
-  margin-bottom: -10px !important;
-}
-
-/deep/ .docx {
-  width: 100% !important;
-}
-
-/deep/ .ivu-timeline-item-tail {
-  border-style: dashed;
-  border-left: none;
-  border-color: #bbbbbb;
-  border-width: thin;
-}
-
-.horizontalTimeline {
-  margin: 4vh 0 0 10vh
-}
-
-.portraitTimeline {
-  margin: 0 0 0 0
-}
-
-.horizontalCard {
-  background-color: #f1f1f1;
-  border-radius: 10px;
-  margin-top: 10px;
-  width: 150vh;
-}
-
-.portraitCard {
-  background-color: #f1f1f1;
-  border-radius: 10px;
-  width: auto;
-  margin-left: -15px;
-  margin-right: -25px;
-  margin-bottom: 5px;
-}
-
-.horizontalAvatar {
-  margin: 0 30px 0 5px;
-  zoom: 200%
-}
-
-.portraitAvatarLarge {
-  margin: 0 20px 0 0;
-  zoom: 200%
-}
-
-.portraitAvatarSmall {
-  margin: 0 5px 0 0;
-  zoom: 200%
-}
-
-.portraitAuditDateStyle{
-  white-space: nowrap;
-  max-width: 100px;
-  font-size: 14px;
-  color: #808695;
-}
-</style>
+<template>
+  <div>
+
+    <Timeline class="horizontalTimeline">
+      <TimelineItem v-for="(items,index) in itemList" :key="index" class="horizontalTimelineItem">
+        <template #dot>
+          <img v-if="items[0].auditResult === '30'" style="zoom: 18%" class="imgStyle" src="../../static/icons/tongguo1.png"
+               alt=""/>
+          <img v-else-if="items[0].auditResult === '40'" style="zoom: 15%" class="imgStyle"
+               src="../../static/icons/bohui1.png" alt=""/>
+          <img v-else-if="items[0].auditResult === '50'" style="zoom: 15%" class="imgStyle"
+               src="../../static/icons/bohui1.png" alt=""/>
+          <img v-else-if="items[0].auditResult === '60'" class="imgStyle" src="../../static/icons/bohui.png" alt=""/>
+          <img v-else-if="items[0].auditResult === '80'" style="zoom: 18%" class="imgStyle"
+               src="../../static/icons/tongguo1.png" alt=""/>
+          <img v-else style="zoom: 18%" class="imgStyle" src="../../static/icons/daiban.png" alt=""/>
+        </template>
+        <Collapse v-model="activeName" simple style="margin: -10px 0 0 -2px;border: none">
+          <Panel :name="'panel' + index">
+            <span class="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="horizontalCard"
+                        :bordered="false">
+                    <List item-layout="vertical">
+                      <ListItem>
+                        <Row style="display: flex; align-items: center;">
+                          <!-- 左边：Avatar -->
+                          <Col>
+                            <avatar
+                              class="horizontalAvatar"
+                              icon="ios-person"
+                              size="large"/>
+                          </Col>
+                          <!-- 右边：审批信息 -->
+                          <Col span="17">
+                            <Row>
+                              <tooltip>
+                                <span class="auditNameStyle"> {{ 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="auditNameStyle"> {{ item.auditOrganName[itemListIndex] }}</span>
+                              <span class="auditDateStyle">
+                  {{ item.startDate }}{{ item.auditDate }}
+                  </span>
+                            </Row>
+                            <Row style="margin-top: 10px">
+                          <span style="color: #19be6b; 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 === '80'">驳回到指定节点</span>
+                              <span style="color: #ff9900; font-size: 13px;" v-else>待审批</span>
+                              <span style="color: #808695;font-size: 13px;margin-left: 10px"
+                                    v-if="item.auditComment">审批意见：</span>
+                              <span style="color: #808695;font-size: 13px"
+                              >{{ item.auditComment }}</span>
+                              <template v-if="item.fileList && item.fileList.length > 0">
+                                <a @click="openModal(item)" style="margin-left: 10px">查看附件</a>
+                              </template>
+                            </Row>
+                          </Col>
+                          <Col style="margin-right: 10px">
+                            <template
+                              v-if="displayPushButton && item.auditResult !== '30'&&item.auditResult !== '40'&&item.auditResult !== '50'&&item.auditResult !== '60'&&item.auditResult!=='80'">
+                              <Button style="color:#d30000;border-color:#d30000;zoom: 120%;"
+                                      @click="pushHim(item,itemListItem,itemListIndex)">催一下
+                              </Button>
+                            </template>
+                          </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 { operateBtn } 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
+    },
+    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','pdf','gif','png','docx']
+          //由于pdf预览显示乱码 暂时不提供pdf预览功能
+          const typeList = ['jpg', 'gif', 'png', 'docx']
+          if (typeList.indexOf(fileType) !== -1) {
+            return h("div", [
+              operateBtn(this, h, row, "下载", () => {
+                this.getAttach(row);
+              }, "primary"),
+              operateBtn(this, h, row, "预览", () => {
+                this.preViewAttach(row);
+              }, "primary")
+            ]);
+          } else {
+            return h("div", [
+              operateBtn(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 = this.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
+    }
+  },
+  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>
+.arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fontType {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-weight: bold;
+  color: #657180;
+  font-size: 14px
+}
+
+.title {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-weight: bold;
+  color: #515a6e;
+  font-size: 14px;
+  margin: 0 1vh 0 -2vh;
+}
+
+.imgStyle {
+  margin: 0 0 0 -5px;
+  zoom: 60%;
+
+}
+
+.cardStyle {
+  background-color: #bbbbbb;
+}
+
+.auditNameStyle {
+  margin-bottom: -5px;
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 100px;
+  font-size: 14px;
+  color: #17233d;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.auditDateStyle {
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 100px;
+  font-size: 14px;
+  color: #808695;
+  margin-left: 10px;
+}
+
+.horizontalTimelineItem {
+  margin-bottom: 30px !important;
+}
+.portraitTimelineItem {
+  margin-bottom: -10px !important;
+}
+
+/deep/ .docx {
+  width: 100% !important;
+}
+
+/deep/ .ivu-timeline-item-tail {
+  border-style: dashed;
+  border-left: none;
+  border-color: #bbbbbb;
+  border-width: thin;
+}
+
+.horizontalTimeline {
+  margin: 4vh 0 0 10vh
+}
+
+.portraitTimeline {
+  margin: 0 0 0 0
+}
+
+.horizontalCard {
+  background-color: #f1f1f1;
+  border-radius: 10px;
+  margin-top: 10px;
+  width: 150vh;
+}
+
+.portraitCard {
+  background-color: #f1f1f1;
+  border-radius: 10px;
+  width: auto;
+  margin-left: -15px;
+  margin-right: -25px;
+  margin-bottom: 5px;
+}
+
+.horizontalAvatar {
+  margin: 0 30px 0 5px;
+  zoom: 200%
+}
+
+.portraitAvatarLarge {
+  margin: 0 20px 0 0;
+  zoom: 200%
+}
+
+.portraitAvatarSmall {
+  margin: 0 5px 0 0;
+  zoom: 200%
+}
+
+.portraitAuditDateStyle{
+  white-space: nowrap;
+  max-width: 100px;
+  font-size: 14px;
+  color: #808695;
+}
+</style>