@lambo-design/workflow-approve 1.0.0-beta.10

package/src/components/history.vue

@@ -0,0 +1,378 @@
+<template>
+  <div>
+
+    <Timeline class="portrait-timeline">
+      <TimelineItem v-for="(items,index) in itemList" :key="index" class="portrait-timeline-item">
+        <template #dot>
+          <div v-if="items[0].auditResult === '30' || items[0].auditResult === '80'" class="cicle" style="background-color: #005aff"></div>
+          <div v-else-if="items[0].auditResult === '40' || items[0].auditResult === '50'" class="cicle" style="background-color: #ffcc66"></div>
+          <div v-else-if="items[0].auditResult === '60'" class="cicle" style="background-color: #ed4014"></div>
+          <div v-else class="cicle" style="background-color: #ff9900"></div>
+        </template>
+        <Collapse v-model="activeName" simple style="margin: -10px 0 0 -2px;border: none">
+          <Panel :name="'panel' + index" hide-arrow>
+            <span class="history-title"> {{ items[0].taskName }}</span>
+            <template #content>
+              <div v-for="(item, index) in items" :key="index">
+                <div v-for="(itemListItem, itemListIndex) in item.auditName" :key="itemListIndex">
+                  <Card dis-hover
+                        class="portrait-card"
+                        :bordered="false">
+                    <List item-layout="vertical">
+                      <ListItem>
+                        <Row style="display: flex; align-items: center;">
+                          <!-- 左边：Avatar -->
+                          <Col>
+                            <avatar
+                              :class="portraitWidth >= 600 ? 'portrait-avatar-large' : 'portrait-avatar-small'"
+                              size="small">
+                              {{ getFirstName(itemListItem) }}</avatar>
+                          </Col>
+                          <!-- 右边：审批信息 -->
+                          <Col span="17">
+                            <Row>
+                              <tooltip>
+                                <span class="audit-name-style"> {{ itemListItem }}</span>
+                                <div slot="content" style="white-space: normal"> {{ itemListItem }}</div>
+                              </tooltip>
+                              <Divider style="background-color:#808695;height: 1em;margin: 4px 9px 0 6px;"
+                                       type="vertical"/>
+                              <span v-if="item.auditOrganName"
+                                    class="audit-name-style"> {{ item.auditOrganName[itemListIndex] }}</span>
+                              <span v-if="portraitWidth === 0 || portraitWidth >= 600" class="audit-date-style">
+                                {{ item.startDate }}{{ item.auditDate }}
+                              </span>
+                            </Row>
+                            <Row v-if="item.auditComment">
+                              <span class="audit-name-style">{{ item.auditComment }}</span>
+                            </Row>
+                            <Row v-if="portraitWidth < 600" class="portrait-audit-date-style">{{showDate(item)}}{{ item.startDate }}{{ item.auditDate }}</Row>
+                            <Row style="margin-top: 10px">
+                              <Col span="12">
+                                <span style="color: #005aff;; font-size: 13px;"
+                                v-if="item.auditResult === '30'">通过</span>
+                                <span style="color: #ed4014; font-size: 13px;"
+                                      v-else-if="item.auditResult === '40'">驳回到上一节点</span>
+                                <span style="color: #ed4014; font-size: 13px;"
+                                      v-else-if="item.auditResult === '50'">驳回到原点</span>
+                                <span style="color: #ed4014; font-size: 13px;"
+                                      v-else-if="item.auditResult === '60'">撤回</span>
+                                <span style="color: #19be6b; font-size: 13px;"
+                                      v-else-if="item.auditResult === '80'">跳转到指定节点</span>
+                                <span style="color: #19be6b; font-size: 13px;"
+                                      v-else-if="item.auditResult === '90'">驳回到指定节点</span>
+                                <span style="color: #ff9900; font-size: 13px;" v-else>待审批</span>
+                              </Col>
+                              <Col span="12" style="text-align: right">
+                                <Button v-if="item.fileList && item.fileList.length > 0" size="small" type="primary" ghost class="urging" @click="openModal(item)">查看附件</Button>
+                                <Button v-if="displayPushButton && item.auditResult !== '30'&&item.auditResult !== '40'&&item.auditResult !== '50'&&item.auditResult !== '60'&&item.auditResult!=='80'&&item.auditResult!=='90'"
+                                        size="small" type="primary" ghost class="urging"
+                                        @click="pushHim(item,itemListItem,itemListIndex)">催一下
+                                </Button>
+                              </Col>
+                            </Row>
+                          </Col>
+                        </Row>
+
+                      </ListItem>
+                    </List>
+                  </Card>
+                </div>
+              </div>
+            </template>
+          </Panel>
+        </Collapse>
+      </TimelineItem>
+    </Timeline>
+
+    <Modal
+      v-model="showModal"
+      title="查看附件"
+    >
+      <Table border
+             :columns="attachmentColumn"
+             :data="fileList"
+      >
+      </Table>
+    </Modal>
+    <div v-if="0 < allGroupKeys.length">
+      <div v-show="arrowShow" class="arrow">
+        <a @click="arrowClick">
+          <Icon type="ios-arrow-down"/>
+          展开显示更多
+        </a>
+      </div>
+      <div v-show="!arrowShow" class="arrow">
+        <a @click="arrowClick">
+          <Icon type="ios-arrow-up"/>
+          收缩
+        </a>
+      </div>
+    </div>
+    <Modal title="查看附件" v-model="modalImg" fullscreen scrollable :mask="false">
+      <img :src="image" v-if="modalImg" alt="" style="width: 100%">
+      <div slot="footer">
+        <Button type="primary" @click="modalImg = false">关闭</Button>
+      </div>
+    </Modal>
+    <Modal title="查看附件" v-model="modalDocx" fullscreen scrollable :mask="false">
+      <div ref="file"></div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ajax from "@lambo-design/shared/utils/ajax";
+import { operateHref } from '@lambo-design/shared/utils/assist'
+import axios from 'axios';
+// 引入docx-preview插件
+let docx = require('docx-preview');
+export default {
+  components: {},
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    applyId: {
+      type: String,
+      default: ""
+    },
+    donePage: {
+      type: Boolean,
+      default: false
+    },
+    //横竖版样式不同
+    portraitWidth: {
+      type: Number,
+      default: 0
+    },
+    smartFlowServerContext: {
+      type: String,
+      default: '/api/smart-flow-server',
+    },
+  },
+  data() {
+    return {
+      allGroupKeys: [],
+      displayedList: [],
+      arrowShow: true, // 控制加载更多按钮的显示
+      activeName: 'panel0',
+      modalDocx: false,
+      setModals: {
+        modals: []
+      },
+      showModal: false,
+      fileList: [],
+      modalImg: false,
+      image: "",
+      itemList: {},
+      auditNameList: [],
+      displayPushButton: false,
+    }
+  },
+  computed: {
+    attachmentColumn: function () {
+      let column = [];
+      column.push({title: '序号', type: 'index', width: 70, align: 'center', fixed: 'left'});
+      column.push({
+        title: '附件名称', key: 'fileName', minWidth: 150, align: 'center', fixed: 'left',
+        render(h, {row}) {
+          const index = row.fileName.lastIndexOf(".");
+          const fileName = row.fileName.substr(0, index)
+          return h("span", fileName)
+
+        }
+      });
+      column.push({
+        title: '附件类型', width: 100, align: 'center', fixed: 'left',
+        render: (h, {row}) => {
+          const index = row.fileName.lastIndexOf(".");
+          const fileType = row.fileName.substr(index + 1)
+          return h("span", fileType)
+        }
+      });
+
+      column.push({
+        title: "操作", width: 160, align: 'center', tooltip: true,
+        render: (h, {row}) => {
+          const index = row.fileName.lastIndexOf(".");
+          const fileType = row.fileName.substr(index + 1).toLowerCase()
+          const typeList=['jpg','gif','png','docx']
+          if (typeList.indexOf(fileType) !== -1) {
+            return h("div", [
+              operateHref(this, h, row, "下载", () => {
+                this.getAttach(row);
+              }, "primary"),
+              operateHref(this, h, row, "预览", () => {
+                this.preViewAttach(row);
+              }, "primary")
+            ]);
+          } else {
+            return h("div", [
+              operateHref(this, h, row, "下载", () => {
+                this.getAttach(row);
+              }, "primary")
+            ]);
+          }
+
+        }
+
+      });
+      return column;
+    }
+  },
+  methods: {
+    pushHim(item, auditName, index) {
+      if (this.isDebouncing) {
+        return;
+      }
+
+      this.isDebouncing = true;
+      // 设置一个延时，例如 1 秒，之后重置防抖状态
+      setTimeout(() => {
+        this.isDebouncing = false;
+      }, 2000);
+
+      let self = this;
+      let applyUserName = item.applyUser.split(":")[1];
+      let params = {
+        applyUserName: applyUserName,
+        auditName: auditName,
+        auditId: item.auditId[index],
+        procName: item.procName,
+        effectTime: item.startDate,
+        expireTime: item.warningDate,
+      };
+      let url = self.smartFlowServerContext + "/manage/processTodo/sendMessage";
+      ajax.post(url, params).then(function (resp) {
+        console.log("message  ", resp);
+        if (resp.data.code == 200) {
+          self.$Message.success("催办成功");
+        } else {
+          self.$Message.error("催办失败");
+        }
+      });
+    },
+    getAttach(row) {
+      window.open(this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId, "_blank");
+    },
+    preViewAttach(row) {
+      let reg = /\.(gif|jpg|jpeg|bmp|png|PNG)$/
+      let regs = /\.(pdf)$/
+      if (reg.test(row.fileName)) {
+        let url = this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId;
+        this.imgPreview(url);
+      } else if (regs.test(row.fileName)) {
+        window.open(this.smartFlowServerContext + "/manage/oss/file/getFileStream?fileId=" + row.fileId, "_blank");
+      } else {
+        this.modalDocx = true
+        axios({
+          method: 'get',
+          responseType: 'blob', // 因为是流文件，所以要指定blob类型
+          url: this.smartFlowServerContext + "/manage/oss/file/get/" + row.fileId// 一个word下载文件的接口
+        }).then(({data}) => {
+            docx.renderAsync(data, this.$refs.file, null, {
+              className: "docx", //默认和文档样式类的类名/前缀
+              inWrapper: true, //启用围绕文档内容呈现包装器
+              ignoreWidth: false, //禁用页面的渲染宽度
+              ignoreHeight: false, //禁用页面的渲染高度
+              ignoreFonts: false, //禁用字体渲染
+              breakPages: true, //在分页符上启用分页
+              ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
+              experimental: false, //启用实验功能（制表符停止计算）
+              trimXmlDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明
+              useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
+              useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
+              showChanges: false, //启用文档更改的实验渲染（插入/删除）
+              debug: false, //启用额外的日志记录
+            })
+          }
+        )
+      }
+    },
+    //查看附件
+    imgPreview: function (img) {
+      this.modalImg = true
+      this.image = img;
+    },
+    arrowClick() {
+      if (this.itemList.length > 0) {
+        if (this.arrowShow) {
+          // 显示全部
+          this.displayedList = this.itemList;
+          this.arrowShow = false;
+        } else {
+          // 只显示两个
+          this.displayedList = this.itemList.slice(0, 2);
+          this.arrowShow = true;
+        }
+      }
+    },
+    openModal(item) {
+      this.fileList = item.fileList
+      this.showModal = true
+    },
+    getFirstName(item) {
+      return item ? item[0] : ''
+    },
+    showDate(item) {
+      if (item.auditResult){
+        return '处理时间：'
+      }
+      return '接收时间：'
+    }
+  },
+  mounted() {
+    this.displayPushButton = this.donePage;
+    this.itemList = this.list;
+    if (this.itemList.length > 0) {
+      this.displayedList = this.itemList.slice(0, 2);
+      // 初始化modals
+      this.setModals.modals = this.itemList.map(() => ({value: false}));
+      this.activeName = 'panel0';
+    }
+  },
+  watch: {
+    list: function (newValue) {
+      this.$nextTick(() => {
+        this.itemList = newValue;
+        if (this.itemList.length > 0) {
+          this.displayedList = this.itemList.slice(0, 2);
+          this.setModals.modals = this.itemList.map(() => ({value: false}));
+        }
+
+      });
+    }
+  }
+
+
+}
+</script>
+
+<style scoped>
+@import "../styles/css/index.less";
+/deep/ .docx {
+  width: 100% !important;
+}
+
+/deep/ .ivu-timeline-item-tail {
+  border-style: solid;
+  border-left: none;
+  border-color: #005aff;
+  border-width: thin;
+}
+
+/deep/ .ivu-list-item {
+  padding-bottom: 0 !important;
+}
+
+/deep/ .ivu-collapse-content-box {
+  padding: 0 !important;
+}
+
+/deep/ .ivu-card-body {
+  padding: 5px !important;
+}
+
+</style>

package/src/components/horizontal/attachment.vue

@@ -0,0 +1,224 @@
+<template>
+  <div>
+    <Row>
+      <Row>
+        <span v-for="(item, index) in attachmentdata" :key="index" style="font-size: 14px">
+          <span v-if="index>0">、</span>
+         <span style="color:#2D8cF0 ">  {{ item.fileName }}</span>
+          <a @click="forRemoveAttachment(index)" style="font-size: 13px;">.删除</a>
+        </span>
+        <div>
+          <div slot="buttons">
+            <Upload :action="actionUrl" :on-error="handleError" :before-upload="handleUpload" :show-upload-list="false"
+                    multiple
+                    :on-success="handleSuccess" :on-progress="handleProgress"
+                    :on-format-error="handleFormatError"
+                    :format="['xlsx', 'xls','txt','rar','zip','doc','docx','jpg','pdf','gif','png']">
+              <Button :loading="loading" icon="ios-arrow-round-up" type="primary"
+                      style="color: #808080;border-color:#e0e0e0;" ghost>添加附件
+              </Button>
+            </Upload>
+          </div>
+        </div>
+      </Row>
+      <Row style="margin-top: 10px">
+        <span style="color: red;font-size: 14px">* 支持扩展名： .rar .zip .doc .docx .pdf .jpg...</span>
+      </Row>
+    </Row>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "attachment",
+  components: {},
+  props: {
+    actionUrl: {
+      default: "/api/oss-server/file/put",
+    },
+    attachmentdata: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    attachmentColumn: {
+      default: function () {
+        let column = [
+          {title: "序号", type: 'index', width: 80, align: "center"},
+          {
+            title: "相关附件", key: "fileName", minWidth: 200, align: 'left', tooltip: true,
+            render: (h, {row}) => {
+              return h("a", {
+                on: {
+                  'click': () => {
+                    let reg = /\.(gif|jpg|jpeg|bmp|png)$/
+                    let regs = /\.pdf$/
+                    if (reg.test(row.fileName)) {
+                      let imgs = [];
+                      let url = this.ossServerContext + "/file/get/" + row.fileId;
+                      this.imgPreview(url);
+                    } else if (regs.test(row.fileName)) {
+                      window.open(this.ossServerContext + "/file/getFileStream?fileId=" + row.fileId, "_blank");
+                    } else {
+                      window.open(this.ossServerContext + "/file/get/" + row.fileId, "_blank");
+                    }
+                  }
+                }
+              }, row.fileName);
+            }
+          },
+          {
+            title: "操作", width: 80, align: "center",
+            render: (h, {index}) => {
+              return h('div', [
+                h('Button', {
+                  props: {
+                    type: 'warning',
+                    size: 'small',
+                    ghost: true
+                  },
+                  on: {
+                    click: () => {
+                      this.forRemoveAttachment(index)
+                    }
+                  }
+                }, '删除')
+              ]);
+            }
+          }
+        ];
+        return column
+      }
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      modalImg: false,
+      image: "",
+      tempFileArr: [],
+      percentage: null,
+      file_name: '',
+      fileList: [],
+    }
+  },
+  methods: {
+    openAttachment(item) {
+      let reg = /\.(gif|jpg|jpeg|bmp|png)$/;
+      let regs = /\.pdf$/;
+
+      if (reg.test(item.fileName)) {
+        let imgs = [];
+        let url = this.ossServerContext + "/file/get/" + item.fileId;
+        this.imgPreview(url);
+      } else if (regs.test(item.fileName)) {
+        window.open(this.ossServerContext + "/file/getFileStream?fileId=" + item.fileId, "_blank");
+      } else {
+        window.open(this.ossServerContext + "/file/get/" + item.fileId, "_blank");
+      }
+    },
+    handleSuccess: function (response, file, fileList) {
+      let self = this;
+      let tempArr = JSON.parse(JSON.stringify(this.tempFileArr))
+
+      tempArr.forEach(function (value, index, array) {
+        if (value == file.name) {
+          self.tempFileArr.splice(index, 1)
+        }
+      });
+
+      if (response.code == 1 && self.tempFileArr && self.tempFileArr.length < 1) {
+        self.loading = false;
+        self.$Message.success("上传成功");
+      }
+
+      if (response.code == 1) {
+        if (response.data != undefined && response.data != null && response.data.length > 0) {
+          let tempData = [].concat(response.data);
+          this.attachmentdata.push({
+            fileName: tempData[0].originalName,
+            fileId: tempData[0].fileName,
+          });
+        }
+
+        this.fileList = fileList
+
+      } else {
+        self.loading = false;
+        this.$Message.error({
+          content: file.name + '上传失败！',
+        });
+        //this.$Message.error("上传失败！");
+
+        let j = 0;
+        for (let i = 0; i < fileList.length; i++) {
+          if (fileList[i].canceled) {
+            continue;
+          }
+          if (fileList[i].name === file.name && fileList[i].timestamp === file.timestamp) {
+            j = i;
+          }
+        }
+
+        //console.log(fileList)
+        fileList.splice(j, 1);
+
+      }
+
+    },
+    handleError: function (error, file, fileList) {
+      this.loading = false
+      this.$Message.error({
+        content: fileList.name + ' 上传失败！',
+      });
+    },
+    handleUpload: function (file) {
+      if (!file.canceled) {
+        this.tempFileArr.push(file.name)
+      }
+    },
+    forRemoveAttachment: function (index) {
+      this.attachmentdata.splice(index, 1);
+      this.$refs.attachmentTable.tableRefresh()
+    },
+    //查看附件
+    imgPreview: function (img) {
+      this.modalImg = true
+      this.image = img;
+    },
+    //查看附件
+    cancelUpload: function (item, fileList) {
+      item.showProgress = false;
+      item.canceled = true;
+    },
+    handleProgress(event, file, fileList) {
+      this.loading = true
+
+
+    },
+    handleFormatError(file) {
+      this.loading = false
+      this.$Notice.warning({
+        title: "文件格式不正确",
+        desc: "文件 " + file.name + " 格式不支持，请上传其他格式的文件。",
+      });
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.demo-spin-icon-load {
+  animation: ani-demo-spin 1s linear infinite;
+}
+
+/deep/ .ivu-icon {
+  zoom: 130%;
+  color: #808080;
+  margin-right: -1px;
+}
+</style>