@lambo-design/workflow-approve 1.0.0-beta.46 → 1.0.0-beta.48

package/src/components/history.vue

@@ -1,400 +1,404 @@
-<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 === '00' || 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"/>
-                              <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-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)}}</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 === '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 === '51'">流程终止</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>{{ '待' + 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 && item.auditResult !== '00'&& 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
-    },
-    pushButton: {
-      type: Boolean,
-      default: true
-    },
-    handleName: {
-      type: String,
-      default: "审批"
-    },
-    //横竖版样式不同
-    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,
-        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}`
-    }
-  },
-  mounted() {
-    this.displayPushButton = this.donePage && this.pushButton;
-    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>
+
+    <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 === '00' || items[0].auditResult === '10' || 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' || items[0].auditResult === '83'" 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"/>
+                              <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-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)}}</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 === '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 === '51'">流程终止</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: #ed4014; font-size: 13px;"
+                                      v-else-if="item.auditResult === '83'">会签减签</span>
+                                <span style="color: #19be6b; font-size: 13px;"
+                                      v-else-if="item.auditResult === '90'">驳回指定节点</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 && item.auditResult !== '00' && item.auditResult !== '10' && item.auditResult !== '30'&&item.auditResult !== '40'&&item.auditResult !== '50'&&item.auditResult !== '60'&&item.auditResult!=='80'&&item.auditResult!=='83'&&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
+    },
+    pushButton: {
+      type: Boolean,
+      default: true
+    },
+    handleName: {
+      type: String,
+      default: "审批"
+    },
+    //横竖版样式不同
+    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,
+        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}`
+    }
+  },
+  mounted() {
+    this.displayPushButton = this.donePage && this.pushButton;
+    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>