slow_live/src/views/plugin/workflow/process/components/detail.vue

<template>
  <basic-container>
    <avue-affix id="avue-view"
                :offset-top="116">
      <div class="header">
        <avue-title :value="process.processDefinitionName"></avue-title>
      </div>
    </avue-affix>
    <el-tabs v-model="activeName">
      <el-tab-pane label="申请信息"
                   name="first">
        <el-card shadow="never">
          <div ref="printBody">
            <avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
                       v-model="form"
                       ref="form"
                       :option="option">
            </avue-form>
          </div>
        </el-card>
        <el-card shadow="never"
                 style="margin-top: 20px"
                 v-if="process.status == 'todo'">
          <wf-examine-form ref="examineForm"
                           :comment.sync="comment"
                           :process="process"
                           @user-select="handleUserSelect"></wf-examine-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="流转信息"
                   name="second">
        <el-card shadow="never"
                 style="margin-top: 5px;">
          <wf-flow :flow="flow"></wf-flow>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="流程跟踪"
                   name="third">
        <template v-if="activeName == 'third'">
          <el-card shadow="never"
                   style="margin-top: 5px;">
            <wf-design ref="bpmn"
                       style="height: 500px;"
                       :options="bpmnOption"></wf-design>
          </el-card>
        </template>
      </el-tab-pane>
    </el-tabs>

    <!-- 底部按钮 -->
    <template v-if="process.status == 'todo'">
      <wf-button :loading="submitLoading"
                 :button-list="buttonList"
                 :process="process"
                 :comment="comment"
                 @examine="handleExamine"
                 @user-select="handleUserSelect"
                 @print="handlePrint"
                 @rollback="handleRollbackTask"
                 @terminate="handleTerminateProcess"></wf-button>
    </template>
    <!-- 人员选择弹窗 -->
    <user-select ref="user-select"
                 :check-type="checkType"
                 @onConfirm="handleUserSelectConfirm"></user-select>
  </basic-container>
</template>

<script>
import WfExamineForm from './examForm.vue'
import WfButton from './button.vue'
import WfFlow from './flow.vue'
import userSelect from './user-select'

import exForm from '../../mixins/ex-form'

export default {
  mixins: [exForm],
  components: { userSelect, WfExamineForm, WfButton, WfFlow },
  watch: {
    '$route.params.params': {
      handler(val) {
        if (val) {
          const param = JSON.parse(Buffer.from(val, 'base64').toString())
          const { taskId, processInsId } = param
          if (taskId && processInsId) this.getDetail(taskId, processInsId)
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      activeName: 'first',
      form: {},
      option: {},
      vars: [], // 需要提交的字段
      submitLoading: false, // 提交时按钮loading
    }
  },
  methods: {
    // 获取任务详情
    getDetail(taskId, processInsId) {
      this.getTaskDetail(taskId, processInsId).then(res => {
        const { process, form } = res
        const { variables, status } = process

        let { allForm, taskForm } = form
        if (allForm) {
          const option = eval('(' + allForm + ')')
          option.menuBtn = false
          const { column, group } = option
          if (status != 'todo') { // 已办，删除字段默认值
            option.detail = true
            if (column && column.length > 0) { // 处理column
              column.forEach(col => {
                if (col.type == 'dynamic') col.children.column.forEach(cc => delete cc.value)
                else delete col.value
              })
            }

            if (group && group.length > 0) { // 处理group
              group.forEach(gro => {
                if (gro.column && gro.column.length > 0) {
                  gro.column.forEach(col => {
                    if (col.type == 'dynamic') col.children.column.forEach(cc => delete cc.value)
                    else delete col.value
                  })
                }
              })
            }
          } else {
            const columnFilter = this.filterAvueColumn(column, taskForm)
            const columnArr = columnFilter.column
            let vars = columnFilter.vars || []

            const groupArr = []
            if (group && group.length > 0) { // 处理group
              group.forEach(gro => {
                const groupFilter = this.filterAvueColumn(gro.column, taskForm)
                gro.column = groupFilter.column
                vars = vars.concat(groupFilter.vars)
                if (gro.column.length > 0) groupArr.push(gro)
              })
            }

            if (process.variables && process.variables.serialNumber) {
              columnArr.unshift({
                label: '流水号',
                prop: 'serialNumber',
                span: 24,
                detail: true,
              })
            }
            option.column = columnArr
            option.group = groupArr
            this.vars = vars
          }
          for (let key in variables) {
            if (!variables[key]) delete variables[key]
          }

          this.option = option
          this.form = variables
        }
      })
    },
    // 审核
    handleExamine(pass) {
      this.submitLoading = true
      this.$refs.form.validate((valid, done) => {
        if (valid) {
          const variables = {}
          this.vars.forEach(v => {
            if (v != 'comment' && this.form[v]) variables[v] = this.form[v]
          })

          this.handleCompleteTask(pass, variables).then(() => {
            this.$message.success("处理成功")
            this.handleCloseTag('/plugin/workflow/process/todo')
          }).catch(() => {
            done()
            this.submitLoading = false
          })
        } else {
          done()
          this.submitLoading = false
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 10px 0;
}
</style>