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

<template>
  <div>
    <div style="height: 120px;"></div>
    <el-row class="foot-item avue-affix"
            :style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }"
            id="avue-view">
      <template v-if="process.status == 'todo'">
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_pass')"
                   type="success"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('examine', true)">
          <span v-if="['recall', 'reject'].includes(process.processIsFinished)">重新提交</span>
          <span v-else>通过</span>
        </el-button>
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_reject')"
                   type="danger"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('examine', false)">
          <span v-if="backNodes.length > 1">驳回</span>
          <span v-else>取消申请</span>
        </el-button>
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_transfer')"
                   type="primary"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('user-select', {type: 'transfer', checkType: 'radio'})">转办</el-button>
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_delegate')"
                   type="warning"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('user-select', {type: 'delegate', checkType: 'radio'})">委托</el-button>
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_rollback')"
                   type="success"
                   size="medium"
                   v-loading="loading"
                   @click="handleRollback">指定回退</el-button>
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_terminate')"
                   type="danger"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('terminate')">终止</el-button>
        <el-button v-if="process.isMultiInstance && buttonList.find(b => b.buttonKey == 'wf_add_instance')"
                   type="primary"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('user-select', {type: 'addInstance', checkType: 'checkbox'})">加签</el-button>
      </template>
      <el-button v-if="permission.wf_process_withdraw && process.isOwner && process.isReturnable && !['recall', 'reject'].includes(process.processIsFinished)"
                 type="warning"
                 size="medium"
                 v-loading="loading"
                 @click="$emit('withdraw')">撤销</el-button>
      <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_print')"
                 type="info"
                 size="medium"
                 v-loading="loading"
                 @click="$emit('print')">打印</el-button>
    </el-row>
    <el-dialog :visible.sync="nodeVisible"
               append-to-body
               title="选择回退节点">
      <avue-form v-if="nodeVisible"
                 v-model="nodeForm"
                 :option="nodeOption"
                 @submit="handleNodeSubmit"></avue-form>
    </el-dialog>
  </div>
</template>

<script>
import { backNodes } from '@/api/plugin/workflow/process'

import { mapGetters } from 'vuex'

export default {
  name: 'wf-button',
  computed: {
    ...mapGetters(['isCollapse', 'permission']),
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    buttonList: {
      type: Array,
      default: () => {
        return []
      }
    },
    process: Object,
    comment: String
  },
  data() {
    return {
      nodeVisible: false,
      nodeForm: {},
      nodeOption: {
        column: [{
          label: '节点',
          prop: 'nodeId',
          type: 'select',
          props: {
            label: 'nodeName',
            value: 'nodeId'
          },
          span: 24,
          rules: [{ required: true, message: '请选择回退节点', trigger: 'change' }]
        }]
      },
      backNodes: []
    }
  },
  watch: {
    'process.taskId': {
      handler(val) {
        if (val) {
          backNodes({ taskId: val }).then(res => {
            const list = res.data.data
            this.backNodes = list
            this.findObject(this.nodeOption.column, 'nodeId').dicData = list
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    handleRollback() { // 指定回退
      if (!this.comment) {
        this.$message.error("请填写批复意见")
        return
      }
      this.nodeVisible = true
    },
    handleNodeSubmit() { // 指定回退确定
      const { nodeId } = this.nodeForm
      this.$emit('rollback', nodeId)
    },
  }
}
</script>

<style lang="scss" scoped>
.foot-item {
  position: fixed;
  bottom: 0;
  margin-left: -20px;
  // right: 0;
  z-index: 101;
  height: 66px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>