udiwms-vue-frame/src/components/ApprovalFlow/index.vue

<template>
  <!-- 时间线 -->
  <div class="block" style="padding-top: 40px; padding-left: 200px">
    <el-timeline>
      <el-timeline-item v-for="(activity, index) in activities" :key="index" :color="colors(activity.approvalStatus)">
        <!-- 方案一 -->
        <el-card v-if="activity.nodeType == 2 " style="width: 85%" shadow="hover">
          <div class="content">
            <span>
              <b v-if="activity.approvalStatus != 2">办理人：</b>
              <b v-else>待办人：</b>
              {{ activity.approvalUserName }}</span>
            <span v-if="activity.approvalStatus != 2"><b>办理时间：</b>{{ activity.approvalTime }}</span>
          </div>
          <hr color="#eee"/>
          <div style="margin-top: 8px">
            状态：
            <el-button type="text" size="small" :style="fontstyle(activity.approvalStatus)" class="status"
                       @click.native="approvalFlowUpdate(activity)">
              {{
                activity.approvalStatus == 2 ?
                  '待审核' : activity.approvalStatus == 3 ? '通过' : activity.approvalStatus == 4 ? '拒绝' : '审核中'
              }}
            </el-button>
            <el-row style="width: 100%">
              <div style="margin-bottom: 8px" v-if="activity.approvalStatus != 2">
                审批意见：<span>{{ activity.approvalOpinion }}</span>
              </div>
              <div style="margin-bottom: 8px;margin-left: 85%" v-if="activity.approvalStatus == 2">
                <el-button type="primary" @click=approvalFlowUpdate(activity) >审核</el-button>
              </div>
            </el-row>


            <el-dialog title="编辑审批" :visible.sync="approvalFlowUpdateShow">
              <el-form :model="approvalFlow">
                <el-form-item label="审批意见" label-width="120px">
                  <el-input v-model="approvalFlow.approvalOpinion" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="审批结果" label-width="120px">
                  <el-select v-model="approvalFlow.approvalStatus" placeholder="请选择审批结果">
                    <el-option label="通过" value="3"></el-option>
                    <el-option label="驳回" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="approvalFlowUpdateShow = false">取 消</el-button>
                <el-button type="primary" @click=submitApprovalFlow>确 定</el-button>
              </div>
            </el-dialog>

          </div>
        </el-card>
        <!-- 方案二 -->
        <el-card v-else style="width: 85%" shadow="hover">
          <div class="content">
            <span><b>申请人：</b>{{ activity.userName }}</span>
            <span><b>申请标题：</b>{{ activity.title }}</span>
            <span><b>提交时间：</b>{{ activity.createTime }}</span>
          </div>
          <hr color="#eee"/>
          <div style="margin-top: 8px">
            状态：
            <el-button type="text" size="small" :style="fontstyle(activity.approvalStatus)" class="status">
              {{
                activity.approvalStatus == 2 ? '待审核' : activity.approvalStatus == 3 ? '通过' : activity.approvalStatus == 4 ? '拒绝' : '审核中'
              }}
            </el-button>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>

  </div>
</template>

<script>
import {getDetailList, submitApprovalFlow} from "@/api/basic/sysApprovalFlow";

export default {
  name: "ApprovalFlow",
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    idQuery: {
      type: Object,
      required: true,
    },
    isChang: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      approvalFlowUpdateShow: false,
      query: {
        approvalFlowId: ''
      },
      idQuery: {},
      approvalFlow: {
        id: "",
        approvalOpinion: "",
        approvalStatus: ""
      },
      activities: []
    }
  },
  methods: {
    submitApprovalFlow() {
      this.approvalFlow.approvalOpinion = this.approvalFlow.approvalOpinion.trim()
      submitApprovalFlow(this.approvalFlow)
        .then((response) => {
          if (response.code == 20000) {
            this.$message.success("审批完成");
            this.approvalFlowUpdateShow = false
            this.approvalFlow = {}
            this.getList();
          } else {
            this.$message.error(response.message);

          }
        })
        .catch(() => {
        });
    },
    approvalFlowUpdate(row) {
      if (row.approvalStatus == 2 && this.isChang){
        this.approvalFlow.id = row.id
        this.approvalFlowUpdateShow = !this.approvalFlowUpdateShow
      }
    },
    // 流转记录圆点颜色
    colors(index) {
      if (index == 3) {
        return '#2a9c4a';
      } else if (index == 4) {
        return 'red';
      }
    },
    getList() {
      this.loading = true;
      getDetailList(this.idQuery.approvalFlowId)
        .then((response) => {
          this.activities = response.data || [];
        })
        .catch(() => {
        });

    }
  },

  computed: {
    // 监听agree颜色变化
    fontstyle() {
      return (icontent) => {
        if (icontent == '3') {
          return {color: 'green'};
        } else if (icontent == '4') {
          return {color: 'red'};
        } else {
          return {color: 'blue'};
        }
      };
    },
  },
  created() {
    this.getList();
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.content {
  display: flex;
  justify-content: space-between;
  padding: 15px 0px;

  span {
    flex: 1;
  }
}
</style>