hitch-sb-antd/src/views/activiti/History.vue

<template>
  <div>
    <title-divider title="审批信息" width="90px"></title-divider>
    <a-table
      :columns="auditColumns"
      :dataSource="auditData"
      :loading="historyRecordLoading"
      :pagination="false"
    >
    </a-table>
    <title-divider title="流程图" width="90px"></title-divider>
    <div>
      <img :loading="historyImgLoading" style="width: 90%" :src="image1" v-show="!showFlag" />
      <img :loading="historyImgLoading" style="width: 90%" :src="image2" v-show="showFlag"/>
    </div>
    <div v-show="audit">
      <title-divider title="审核信息" width="90px"></title-divider>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="12" :md="12" :sm="24">
          <a-radio-group v-model="auditFlag" @change="changeOpinion">
            <a-radio :value="1">通过</a-radio>
            <a-radio :value="0">拒绝</a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item
            label="审核描述"
          >
            <a-textarea
              v-model="refuseReason"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="48" slot="">
        <a-col :md="48" :sm="48">
          <span class="table-page-search-submitButtons" style="float: right">
            <a-button type="primary" :loading="confirmLoading" @click="save()">提交</a-button>
          </span>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import { getAuditRecord, getShineProImage } from '@/api/activiti/activiti'
import { auditSbInfoScrapForAudit } from '@/api/activiti/activiti-sb-scrap'
const DetailListItem = DetailList.Item

export default {
  name: 'ActivitiHistory',
  components: {
    DetailList,
    DetailListItem
  },
  props: {
    audit: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      targetId: null,
      taskId: null,
      processInstanceId: null,
      confirmLoading: false,
      historyRecordLoading: false,
      historyImgLoading: false,
      auditFinish: true,
      image1: '',
      timer: '',
      showFlag: true,
      countNum: 0,
      image2: '',
      refuseReason: '同意',
      auditFlag: 1,
      auditModelKey: null,
      auditModelName: null,
      auditColumns: [
        {
          title: '审批人',
          dataIndex: 'userName',
          key: 'userName',
          width: '20%'
        },
        {
          title: '审批时间',
          dataIndex: 'createTime',
          key: 'auditTime',
          width: '30%',
          scopedSlots: { customRender: 'keyword' }
        },
        {
          title: '审批结果',
          dataIndex: 'flag',
          key: 'flag',
          width: '30%',
          customRender: (text, row, index) => {
            return text ? '通过' : '不通过'
          }
        },
        {
          title: '审批意见',
          dataIndex: 'opinion',
          key: 'opinion'
        }
      ],
      auditData: []
    }
  },
  created () {
    // 下拉框map
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.ACTIVITI_FORM_STATUS)
    this.modalTitle = '审批'
    // this.getAuditRecords()
    // this.getImage()
  },
  mounted () {
    // this.timer = setInterval(this.showImage, 1000)
  },
  methods: {
    base (record, taskId) {
      this.targetId = record.id
      this.taskId = taskId
      this.processInstanceId = record.processInstanceId
      this.historyRecordLoading = true
      this.historyImgLoading = true
      this.auditModelKey = record.auditModelKey
      this.auditModelName = this.DictCache.VALUE.SB_INFO_AUDIT_MODEL_NAME[this.auditModelKey]
      this.getAuditRecords(record)
      this.getImage(record)
    },
    showImage () {
      if (this.countNum === 0) {
        this.showFlag = false
      } else {
        this.showFlag = true
      }
      this.countNum++
      if (this.countNum === 2) {
        this.countNum = 0
      }
    },
    getAuditRecords (record) {
      getAuditRecord(record.processInstanceId).then(res => {
        this.historyRecordLoading = false
        const auditData = res.data
        for (let i = 0; i < auditData.length; i++) {
          const item = auditData[i]
          item.opinion = this.getFormatOpinion(item.opinion)
        }
        this.auditData = auditData
      })
    },
    getFormatOpinion (opinion) {
      if (opinion === '提交申请') {
        return '同意'
      } else {
        return opinion
      }
    },
    getImage (record) {
      getShineProImage(record.processInstanceId)
        .then((res) => {
          this.historyImgLoading = false
          const images = res.data.images
          this.image1 = 'data:image/png;base64,' + images[0]
          this.image2 = 'data:image/png;base64,' + images[1]
          this.timer = setInterval(this.showImage, 1000)
        }).catch(() => {
          this.confirmLoading = false
        })
    },
    changeOpinion (e) {
      this.refuseReason = e.target.value ? '同意' : '不同意'
    },
    save () {
      this.confirmLoading = true
      const params = {}
      params.id = this.targetId
      params.processInstanceId = this.processInstanceId
      params.refuseReason = this.refuseReason
      params.auditFlag = this.auditFlag
      params.taskId = this.taskId
      params.auditModelKey = this.auditModelKey
      params.auditModelName = this.auditModelName
      auditSbInfoScrapForAudit(params)
        .then(() => {
          this.$message.info('操作成功')
          this.auditFinish = false
          this.handleOk()
        }).catch(() => {
          this.confirmLoading = false
          this.auditFinish = true
        })
    },
    handleCancel () {
      alert('hhhh')
      this.confirmLoading = false
      this.image1 = ''
      this.showFlag = true
      this.countNum = 0
      this.image2 = ''
      this.refuseReason = '同意'
      this.auditFlag = 1
      this.auditFinish = true
      clearInterval(this.timer)
      this.$emit('ok')
    },
    handleOk () {
      this.$emit('ok')
    }
  }
}
</script>