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">
      <el-button v-if="buttonList.find(b => b.key == 'wf_pass')"
                 type="success"
                 size="medium"
                 v-loading="loading"
                 @click="$emit('examine', true)">通过</el-button>
      <el-button v-if="buttonList.find(b => b.key == 'wf_reject')"
                 type="danger"
                 size="medium"
                 v-loading="loading"
                 @click="$emit('examine', false)">驳回</el-button>
      <el-button v-if="buttonList.find(b => b.key == '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.key == '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.key == 'wf_print')"
                 type="info"
                 size="medium"
                 v-loading="loading"
                 @click="$emit('print')">打印</el-button>
      <el-button v-if="buttonList.find(b => b.key == 'wf_print')"
                 type="success"
                 size="medium"
                 v-loading="loading"
                 @click="handleRollback">指定回退</el-button>
      <el-button v-if="buttonList.find(b => b.key == 'wf_terminate')"
                 type="danger"
                 size="medium"
                 v-loading="loading"
                 @click="$emit('terminate')">终止</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']),
  },
  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' }]
        }]
      }
    }
  },
  methods: {
    handleRollback() { // 指定回退
      if (!this.comment) {
        this.$message.error("请填写批复意见")
        return
      }
      const { taskId } = this.process
      backNodes({ taskId }).then(res => {
        this.findObject(this.nodeOption.column, 'nodeId').dicData = res.data.data
        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>