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

package/src/components/process-info.vue

@@ -0,0 +1,542 @@
+<template>
+  <div class="process-info-content">
+    <a v-if="!isDetail" @click="auditShow = !auditShow">
+      <Title
+        v-if="handleButtons && (handleButtons.includes('auditOpinion') || handleButtons.includes('attachmentFile'))">
+        <a style="color: #989898">
+        <Icon v-if="auditShow" type="ios-arrow-down"/>
+        <Icon v-if="!auditShow" type="ios-arrow-up"/>
+        {{ handleName }}信息
+        </a>
+      </Title>
+    </a>
+    <transition v-if="!isDetail" name="draw" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave"
+                @leave="leave">
+      <div class="box" v-show="auditShow">
+        <Form ref="auditOpinion" justify="center" :label-width="100" :model="form"
+              v-if="handleButtons && handleButtons.includes('auditOpinion')"
+              style="margin: 10px 0 0 10px;" :rules="ruleValidate">
+          <FormItem :label="auditOpinionTitle" prop="auditOpinion">
+            <AuditOpinion v-model="form.auditOpinion" :attachment-file="handleButtons.includes('attachmentFile')"
+                          :attachmentdata="fileList" :default-audit-opinion="defaultAuditOpinion"
+                          :smart-flow-server-context="smartFlowServerContext" @handle-file="handleFile"></AuditOpinion>
+          </FormItem>
+        </Form>
+        <Form ref="auditOpinion" justify="center" :label-width="100"
+              v-if="handleButtons && !handleButtons.includes('auditOpinion') && handleButtons.includes('attachmentFile')"
+              style="margin: 10px 0 0 10px;">
+          <FormItem style="min-height: 70px">
+            <Tooltip placement="bottom" max-width="200">
+              <div style="font-size: smaller" slot="content">支持扩展名：.pdf .doc .docx .txt .xls .xlsx .jpg .jpeg
+                .png .gif
+              </div>
+              <UploadFile @upload-result="uploadFile" :multiple="true"
+                          :oss-server-context="smartFlowServerContext"
+                          :oss-file-put-url="ossFilePutUrl"></UploadFile>
+            </Tooltip>
+          </FormItem>
+        </Form>
+      </div>
+    </transition>
+    <a v-if="taskNode && isDetail && hisAuditOpinion[0].auditOpinion" @click="auditShow = !auditShow">
+      <Title
+        v-if="handleButtons && (handleButtons.includes('auditOpinion') || handleButtons.includes('attachmentFile'))">
+        <a style="color: #989898">
+        <Icon v-if="auditShow" type="ios-arrow-down"/>
+        <Icon v-if="!auditShow" type="ios-arrow-up"/>
+        {{ handleName }}信息
+        </a>
+      </Title>
+    </a>
+    <transition v-if="taskNode && isDetail && hisAuditOpinion[0].auditOpinion" name="draw"
+                @before-enter="beforeEnter"
+                @enter="enter" @before-leave="beforeLeave" @leave="leave">
+      <div class="box" v-show="auditShow">
+        <Form ref="auditOpinion" justify="center" :model="form"
+              v-if="handleButtons && handleButtons.includes('auditOpinion')"
+              style="margin: 10px 0 0 10px;" :rules="ruleValidate">
+          <FormItem style="margin-left: -60px">
+            <Card v-for="(item, index) in hisAuditOpinion" :key="index">
+              <Row style="display: flex">
+                <Col span="24">
+                  <div style="word-wrap: break-word;">
+                    <span>{{ item.auditOpinion }}</span>
+                    <div style="position: absolute; right: 0;bottom: -18px;color: grey">{{ item.auditTime }}</div>
+                  </div>
+                </Col>
+              </Row>
+            </Card>
+          </FormItem>
+        </Form>
+      </div>
+    </transition>
+    <a @click="historyShow = !historyShow">
+      <Title v-if="handleButtons && handleButtons.includes('auditHistory')">
+        <a style="color: #989898">
+        <Icon v-if="historyShow" type="ios-arrow-down"/>
+        <Icon v-if="!historyShow" type="ios-arrow-up"/>
+        {{ handleName }}记录
+        </a>
+      </Title>
+    </a>
+    <transition name="draw" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave">
+      <div class="box" v-show="historyShow">
+        <Card class="process-history" :style="processHistoryHeight" dis-hover :bordered="false"
+              v-if="handleButtons && handleButtons.includes('auditHistory')">
+          <processHistory :portrait-width="processInfoWidth" :list="processHistory" :done-page="isDetail"
+                          :push-button="pushButton"
+                          :smart-flow-server-context="smartFlowServerContext"></processHistory>
+        </Card>
+      </div>
+    </transition>
+    <a @click="attachListShow = !attachListShow">
+      <Title v-if="handleButtons && handleButtons.includes('attachmentFile') && attachmentList.length > 0 && attachListShow">
+        <a style="color: #989898">
+        <Icon v-if="attachListShow" type="ios-arrow-down"/>
+        <Icon v-if="!attachListShow" type="ios-arrow-up"/>
+        查看附件
+        </a>
+      </Title>
+    </a>
+    <transition v-if="handleButtons && handleButtons.includes('attachmentFile') && attachmentList.length > 0 && attachListShow" name="draw" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave">
+      <div class="box" v-if="!inHorizontal">
+        <div v-for="(item, index) in attachmentList" :key="index">
+          <Card dis-hover class="attach-card">
+            <List item-layout="vertical">
+              <ListItem style="margin-top: -8px">
+                <Row style="display: flex; align-items: center;">
+                  <!-- 左边：图片 -->
+                  <Col span="4" style="margin-top: -25px">
+                    <avatar v-if="item.fileType === 'image'" icon="ios-image-outline" class="attach-avatar"
+                            style="background-color: #005aff"
+                            :style="portraitWidth >= 600 ? 'margin-left: 10px' : ''"
+                            :size="portraitWidth >= 600 ? 'middle' : 'small'"></avatar>
+                    <avatar v-else-if="item.fileType === 'doc'" icon="ios-document-outline" class="attach-avatar"
+                            style="background-color: #005aff"
+                            :style="portraitWidth >= 600 ? 'margin-left: 10px' : ''"
+                            :size="portraitWidth >= 600 ? 'middle' : 'small'">
+                    </avatar>
+                    <avatar v-else-if="item.fileType === 'xlsx'" icon="ios-document-outline" class="attach-avatar"
+                            style="background-color: #19be6b"
+                            :style="portraitWidth >= 600 ? 'margin-left: 10px' : ''"
+                            :size="portraitWidth >= 600 ? 'middle' : 'small'"></avatar>
+                    <avatar v-else-if="item.fileType === 'pdf'" icon="ios-document-outline" class="attach-avatar"
+                            style="background-color: #ed4014"
+                            :style="portraitWidth >= 600 ? 'margin-left: 10px' : ''"
+                            :size="portraitWidth >= 600 ? 'middle' : 'small'"></avatar>
+                    <avatar v-else icon="ios-document-outline" class="attach-avatar"
+                            :style="portraitWidth >= 600 ? 'margin-left: 10px' : ''"
+                            :size="portraitWidth >= 600 ? 'middle' : 'small'"></avatar>
+                  </Col>
+                  <!-- 右边：附件信息 -->
+                  <Col span="20">
+                    <Row>
+                      <tooltip>
+                        <span class="attach-name-style"> {{ item.attachName }}</span>
+                        <div slot="content" style="white-space: normal"> {{ item.attachName }}</div>
+                      </tooltip>
+                    </Row>
+                    <Row style="margin-top: 3px">
+                      <span style="color: #005aff; font-size: 13px;">{{ item.uploadUserName }}</span>
+                      <Divider style="background-color:#808695;height: 1em;margin: 4px 9px 0 6px;"
+                               type="vertical"/>
+                      <span style="color: #808695;font-size: 13px"
+                      >{{ showTaskNode(item.taskId) }}</span>
+                    </Row>
+                    <Row style="margin-bottom: -10px; margin-top: 10px">
+                      <template>
+                        <Button @click="getAttach(item)" size="small">下载</Button>
+                        <Button v-if="item.showPreview" ghost type="primary" @click="preViewAttach(item)"
+                                style="margin-left: 10px" size="small">预览
+                        </Button>
+                      </template>
+                    </Row>
+                  </Col>
+                </Row>
+
+              </ListItem>
+            </List>
+          </Card>
+        </div>
+      </div>
+      <div class="box" v-else style="margin: 20px">
+        <LamboPagingTable :requestSuccessCodes="requestSuccessCodes" :pageDisable="true" ref="table" :dataUrl="dataUrl" :columns="tableColumn"></LamboPagingTable>
+      </div>
+    </transition>
+    <Modal title="查看附件" v-model="modalVisible" fullscreen scrollable :mask="false">
+      <img :src="imageUrl" v-if="modalVisible" alt="" style="width: 100%">
+      <div slot="footer">
+        <Button type="primary" @click="modalVisible = 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 axios from "axios";
+import Title from './title'
+import processHistory from './history'
+import AuditOpinion from './opinion'
+import UploadFile from '@lambo-design/upload-file'
+import {operateBtn} from "@lambo-design/shared/utils/assist";
+import LamboPagingTable from '@lambo-design/paging-table'
+
+// 引入docx-preview插件
+let docx = require('docx-preview')
+
+export default {
+  name: "process-info",
+  components: {
+    Title,
+    processHistory,
+    AuditOpinion,
+    UploadFile,
+    LamboPagingTable,
+  },
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    isDetail: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    procId: {
+      type: String,
+      required: true,
+    },
+    taskNode: {
+      type: String,
+      required: true,
+    },
+    applyId: {
+      type: String,
+      required: true,
+    },
+    taskId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    defaultAuditOpinion: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    //详情页催办按钮
+    pushButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    //组件宽度
+    portraitWidth: {
+      type: Number,
+      default: 0
+    },
+    //是否显示竖向布局
+    inHorizontal: {
+      type: Boolean,
+      default: false
+    },
+    //审批名称
+    handleName: {
+      type: String,
+      default: '审批',
+    },
+    //操作按钮
+    handleButtons: {
+      type: [Array, String],
+      default: () => ([])
+    },
+    //审批历史
+    processHistory: {
+      type: Array,
+      default: () => ([])
+    },
+    smartFlowServerContext: {
+      type: String,
+      default: '/api/smart-flow-server',
+    },
+  },
+  data(){
+    return{
+      auditShow: true,
+      historyShow: true,
+      attachListShow: true,
+      modalVisible: false,
+      modalDocx: false,
+      imageUrl: '',
+      processInfoWidth: 400,
+      auditOpinionTitle: this.handleName + '意见',
+      fileList: [],
+      attachmentList: [],
+      requestSuccessCodes: [200, "200"],
+      dataUrl: this.smartFlowServerContext + '/manage/processDone/getAttachmentList?procId='+this.procId + '&applyId=' + this.applyId,
+      form: {
+        auditOpinion: '',
+      },
+      hisAuditOpinion: [{
+        auditOpinion: '',
+        auditTime: '',
+      }],
+      ossFilePutUrl: '/manage/oss/file/put',
+      ruleValidate: {
+        auditOpinion: [{ required: true, trigger: 'blur', message: '意见不能为空' }],
+        assignee: [{ required: true, trigger: 'blur', message: '办理人不能为空' }],
+        candidateGroups: [{ required: true, trigger: 'blur', message: '候选人不能为空' }],
+      },
+    }
+  },
+  computed: {
+    processHistoryHeight() {
+      if (this.inHorizontal) return ''
+      let str = ''
+      const hasAuditOpinion = this.taskNode && this.handleButtons && this.handleButtons.includes('auditOpinion')
+      const hasAttachmentFile = this.handleButtons && this.handleButtons.includes('auditHistory') && this.attachmentList.length > 0
+      const isDetail = this.isDetail && !this.hisAuditOpinion[0].auditOpinion.length > 0
+      if (hasAuditOpinion && !hasAttachmentFile && !isDetail) {
+        str += 'height: 43vh'
+      } else if (hasAuditOpinion && hasAttachmentFile && !isDetail) {
+        str += 'height: 40vh'
+      } else {
+        str += 'height: 67vh'
+      }
+      return str
+    },
+    tableColumn() {
+      let column = [];
+      let self = this;
+      column.push({
+        title: '序号',
+        type: 'index',
+        width: 70,
+        align: 'center',
+      });
+      column.push({
+        title: '附件名称', key: 'fileName', minWidth: 150, align: 'center',
+        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',
+        render:(h,{row})=>{
+          const index= row.fileName.lastIndexOf(".");
+          const fileType=row.fileName.substr(index+1)
+          return h("span",fileType)
+        }
+      });
+
+      column.push({
+        title: "上传人姓名",
+        key: "uploadUserName",
+        width: 170,
+        align: "center",
+      });
+
+      column.push({
+        title: "节点名称",
+        key: "taskName",
+        width: 170,
+        align: "center",
+      });
+
+      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: {
+
+    imgPreview(url) {
+      this.imageUrl = url
+      this.modalVisible = true
+    },
+    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, //启用额外的日志记录
+            })
+          }
+        )
+      }
+    },
+    getAttach(row) {
+      window.open(this.smartFlowServerContext + '/manage/oss/file/get/' + row.fileId, '_blank')
+    },
+    showTaskNode(taskId) {
+      if (this.processHistory.length > 0) {
+        let task = null
+        this.processHistory.some(itemList => {
+          task = itemList.find(item => item.taskId === taskId)
+          return task !== undefined
+        })
+        return task ? task.taskName : ''
+      }
+      return ''
+    },
+    getAttachList(taskId) {
+      const self = this
+      const param = {
+        taskId: taskId,
+        procId: this.procId,
+        applyId: this.applyId
+      }
+      ajax.get(self.smartFlowServerContext + '/manage/processDone/getAttachmentList', { params: param }).then(function (resp) {
+        self.attachmentList = resp.data.data.rows
+        self.attachmentList.forEach(item => {
+          const index = item.fileName.lastIndexOf('.')
+          const fileType = item.fileName.substr(index + 1).toLowerCase()
+          const imageList = ['jpg', 'gif', 'png', 'svg']
+          const docList = ['doc', 'docx']
+          const zipList = ['rar', 'zip']
+          const typeList = ['jpg', 'gif', 'png', 'docx']
+          item.fileType = imageList.indexOf(fileType) !== -1 ? 'image' : docList.indexOf(fileType) !== -1 ? 'doc' : zipList.indexOf(fileType) !== -1 ? 'zip' : fileType
+          item.showPreview = typeList.indexOf(fileType) !== -1
+        })
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    uploadFile(file) {
+      const self = this
+      self.fileList = []
+      file.forEach(item => {
+        self.fileList.push({
+          fileName: item.fileName,
+          fileId: item.fileCode,
+        })
+      })
+      this.$emit('upload-file', self.fileList)
+    },
+    handleFile(file){
+      this.$emit('upload-file', file)
+    },
+
+    //折叠动画效果
+    beforeEnter(el) {
+      el.style.height = '0'
+    },
+    enter(el, done) {
+      setTimeout(() => {
+        el.style.height = el.scrollHeight + 'px'
+      }, 0)
+
+      el.addEventListener('transitionend', done)
+    },
+    beforeLeave(el) {
+      el.style.height = el.scrollHeight + 'px'
+    },
+    leave(el, done) {
+      setTimeout(() => {
+        el.style.height = '0'
+      }, 0)
+
+      el.addEventListener('transitionend', done)
+    },
+
+    beforeFlowInfoEnter(el) {
+      el.style.transform = 'translateX(100%)'
+    },
+    flowInfoEnter(el, done) {
+      const transitionDuration = 0.5
+      el.style.transition = `transform ${transitionDuration}s`
+      el.style.transform = 'translateX(0)'
+      el.addEventListener('transitionend', done)
+    },
+    beforeFlowInfoLeave(el) {
+      el.style.transform = 'translateX(0)'
+    },
+    flowInfoLeave(el, done) {
+      const transitionDuration = 0.5
+      el.style.transition = `transform ${transitionDuration}s`
+      el.style.transform = 'translateX(100%)'
+      el.addEventListener('transitionend', done)
+    },
+  },
+  mounted() {
+    this.getAttachList(this.taskId)
+    this.processInfoWidth = this.inHorizontal ? 1000 : this.portraitWidth
+    this.form.auditOpinion = this.value;
+  },
+  watch: {
+    'form.auditOpinion'(val) {
+      this.$emit('input', val)
+    },
+    value(newVal) {
+      this.form.auditOpinion = newVal;
+    },
+    defaultAuditOpinion(val) {
+      this.auditOpinion = this.defaultAuditOpinion
+      this.$emit('input', val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>