RuoYi-flowable-master/ruoyi-ui/src/views/project/flowBase.vue

<template>
  <div class="approval-table">
    <table border="1" cellpadding="8" cellspacing="0">
      <thead>
      <tr>
        <th>节点名称</th>
        <th>审批人</th>
        <th>审批结果</th>
        <th>审批时间</th>
        <th v-if="procDefId && procDefId.includes('dgt-project')">打分表</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in approvalData" :key="index">
        <td>{{ item.taskName }}</td>
        <td>{{ item.createBy }}</td>
        <td>{{ item.comment }}</td>
        <td>{{ item.createDate }}</td>
        <td v-if="procDefId && procDefId.includes('dgt-project')">
          <el-button v-if="item.taskDefKey==='decision' " class="custom-blue-color" size="mini"
                     type="text" icon="el-icon-search" @click="handleDetail(item.createBy,scoringList)">查看</el-button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
import {getFlowBaseInfo} from "../../api/project/flowBase";
import {getScoringListById,
  listMeeting} from "@/api/invest/meeting";

export default {
  props: {
    procInstId: {
      type: String,
      /*required: true*/
    },
    id: {
      type: String,
      /*required: true*/
    }
  },
  data() {
    return {
      approvalData: [],
      procDefId:null,
      // 所以人打分列表
      scoringList: []
    };
  },
  created() {
    // 组件创建时调用接口获取数据
    this.fetchApprovalData();
    this.getMettingId();
  },
  methods: {
    fetchApprovalData() {
      // 假设接口地址为 /api/approvalData，参数为 processId
      getFlowBaseInfo(this.procInstId)
        .then(response => {
          this.approvalData = response.rows;
          // 获取第一条数据的某个字段，先判断数组是否有数据
          if (response.rows && response.rows.length > 0) {
            this.procDefId = response.rows[0].procDefId;
          }
          console.log('接收到的 信息：', response.rows);
        })
        .catch(error => {
          console.error('获取审批数据失败:', error);
        });
    },
    getMettingId() {
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        meetingType: "LX",
        orderByColumn: "createTime",
        isAsc: "desc",
        projectPoolId: this.id,
      };
      listMeeting(queryParams).then((response) => {
        let meetingList = response.rows;
        if (meetingList.length > 0) {
            this.getScoringListById(meetingList[0].id)
        }
      });
    },
    getScoringListById(meetingId) {
      getScoringListById(meetingId).then((response) => {
        this.scoringList = response.rows;
      });
    },
    // 打分详情-弹窗
    handleDetail(createBy,scoringList) {
      // 遍历 scoringList，找到 createBy 与 item.createBy 匹配的数据
      const matchedData = scoringList.find(scoringItem => scoringItem.createBy === createBy);
      //console.log('筛选出的目标数据2：', createBy);
      this.$store.commit("SET_TPROJECTSCORING", matchedData);
      this.$router.push({
        path: "/invest/meeting/mark",
        query: { id: matchedData.meetingId, formType: 1, readonly: true },
      });
    },
  },
};
</script>

<style scoped>
.approval-table {
  margin-top: 20px;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.approval-table th,
.approval-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: center;
  /* 复用 Element UI 的文本颜色 */
  color: var(--el-text-color-regular, #606266);
  /* 复用 Element UI 的边框颜色 */
  border-color: var(--el-border-color, #dcdfe6);
  /* 其他继承样式（如字体大小、粗细）可按需加 */
  font-weight: var(--el-font-weight-regular, 400);
}
</style>