mec-cloud_-intelligent-manufacturing_crm/zkqy-ui/src/views/bussiness/progressShow.vue

<template>
  <div class="app-container">
    <div class="main-area">
      <div class="show-header">
        <div class="tag-list">
          <div class="tag-item">
            <!-- <div class="circle"></div> -->
            <i class="el-icon-circle-check icon"></i>
            <span>已完成</span>
          </div>
          <div class="tag-item">
            <i class="el-icon-warning icon"></i>
            <span>触发异常</span>
          </div>
          <div class="tag-item">
            <i class="el-icon-warning-outline icon"></i>
            <span>新插入</span>
          </div>
          <div class="tag-item">
            <span class="current-node">当前节点</span>
          </div>
        </div>
        <div class="search-list">
          <div class="search-tab">
            <el-radio-group
              v-model="queryParams.taskProcessState"
              @change="getList"
            >
              <el-radio-button label="3">已完成</el-radio-button>
              <el-radio-button label="0">进行中</el-radio-button>
              <el-radio-button label="">所有</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-input">
            <el-input
              placeholder="请输入..."
              v-model="queryString"
              @keyup.enter.native="getList"
            >
              <el-button
                slot="append"
                @click="getList"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </div>
        </div>
      </div>
      <div class="show-body">
        <template v-if="tableData.length > 0">
          <TaskList
            v-for="(item, index) of tableData"
            :key="index + 1"
            :num="index + 1"
            :cardData="item"
          ></TaskList>
        </template>
        <el-empty v-else description="暂无数据"></el-empty>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TaskList from "./components/taskList.vue";
import { processList, getListLog } from "@/api/bpmprocess/run/executeProcess";
import getNodeSequence from "@/utils/bpmn/getNodeSequence";
import { xmlStr2XmlObj } from "@/utils/bpmn/xml";
export default {
  name: "ProgressShow",
  props: [],
  components: { TaskList },
  data() {
    return {
      // processType: 1,
      queryString: "",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskProcessState: "0",
      },
      tableData: [], //列表数据
    };
  },
  computed: {},
  methods: {
    // 获取列表数据
    getList() {
      getListLog({ ...this.queryParams, taskName: this.queryString }).then(
        (res) => {
          if (res.code == 200) {
            this.tableData = this.getTableData(
              res.rows.map((item) => item.resultMap)
            );
            console.log(this.tableData);
            this.total = res.total;
          } else {
            this.$message.error("网络异常,请稍后再试");
          }

          return;
          if (res.code == 200) {
            this.tableData = this.getTableData(
              res.rows.map((item) => item.resultMap)
            );
            this.total = res.total;
          } else {
            this.$message.error("网络异常,请稍后再试");
          }
        }
      );
    },
    // 获取表格展示数据
    getTableData(dataList) {
      let res = [];
      res = dataList.map((item) => {
        let baseObj = {
          benTaskProcessKey: item.taskKey, //任务编号
          bepTaskName: item.taskPlanName, //任务名称
          benCreateTime: item.nodeLogList[0].taskNodeType
            ? item.nodeLogList[0].createTime
            : "", //开始或结束时间  需要根据bepTaskProcessState状态 来判定
          currentNodeKey: item.taskNodeNextKey, //当前节点key
          cardList: [],
          doneNodeList: item.nodeLogList,
        };
        let xmlObj = xmlStr2XmlObj(item.taskProcessXmlContent);
        baseObj.cardList = getNodeSequence(xmlObj);
        return baseObj;
      });
      res = this.nodeHandler(res); //合并两个节点数组
      res = this.sortHandler(res); //排序
      // res = this.setNodeState(res);
      return res;
    },
    // 设置节点完成情况
    setNodeState(res) {
      res.forEach((re) => {
        let nowKey = re.currentNodeKey;
        let isDone = true;
        re.cardList.forEach((item) => {
          if (item.nodeId == nowKey) {
            isDone = false;
            item.isDone = isDone;
            item.isNow = true;
          } else {
            item.isDone = isDone;
            item.isNow = false;
          }
        });
        // 当最后一个节点就是当前节点时置为完成状态
        let lastNode = re.cardList[re.cardList.length - 1];
        if (re.currentNodeKey == lastNode.nodeId) {
          lastNode.isDone = true;
          lastNode.isNow = false;
        }
      });

      return res;
    },

    // 合并两个节点数组
    nodeHandler(processList) {
      let res = processList.map((item, index) => {
        console.log(
          JSON.parse(JSON.stringify(item.cardList)),
          JSON.parse(JSON.stringify(item.doneNodeList)),
          item.currentNodeKey
        );
        item.doneNodeList.forEach((node) => {
          Object.assign(node, {
            isDone: true,
            isNow: false,
            nodeId: node.taskNodeKey,
            nodeInfo: {
              localName: node.taskNodeType,
              id: "",
              name: node.taskNodeName,
              nodeDescription: "",
              industryType: "",
              normalScriptKey: "",
              normalScriptTriggerType: node.taskNodeExecuteType,
              executeUserType: "",
              executeUser: "",
              virtuallyRole: "",
            },
          });
        });
        let currentIndex = item.cardList.findIndex(
          (node) => node.nodeId == item.currentNodeKey
        );
        console.log(currentIndex, item.cardList.length);
        // while(currentIndex<item.cardList.length){}
        for (let i = currentIndex; i < item.cardList.length; i++) {
          if (i == currentIndex) {
            item.cardList[i].isNow = true;
            if (i == item.cardList.length - 1) {
              item.cardList[i].isDone = true;
            } else {
              item.cardList[i].isDone = false;
            }
          } else {
            item.cardList[i].isDone = false;
            item.cardList[i].isNow = false;
          }
        }
        if (currentIndex == item.cardList.length - 1) {
          item.cardList.splice(0, currentIndex + 1);
        } else {
          item.cardList.splice(0, currentIndex);
        }

        item.cardList.unshift(...item.doneNodeList);
        console.log(item.cardList);
        item.cardList.forEach((node, index) => {
          node.num = index + 1;
        });
        return item;
      });
      return res;
    },

    // 任务排序
    sortHandler(processList) {
      processList.sort((a, b) => {
        let time_a = new Date(a.doneNodeList[0].createTime)?.getTime();
        let time_b = new Date(b.doneNodeList[0].createTime)?.getTime();
        return time_b - time_a;
      });
      return processList;
    },
  },
  mounted() {
    this.getList();
  },
  activated() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 15px 15px;
  box-sizing: border-box;
  .main-area {
    box-shadow: 0 1px 15px 1px rgb(69 65 78 / 8%);
    background-color: #fff;
    .show-header {
      border-bottom: 1px solid #ebedf2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 20px 0px 20px;
      height: 50px;
      .tag-list {
        display: flex;
        align-items: center;
        .tag-item {
          display: flex;
          align-items: center;
          margin-right: 15px;
          font-size: 16px;
          .circle {
            width: 15px;
            height: 15px;
            background-color: rgb(104, 221, 104);
            border-radius: 50%;
            margin-right: 5px;
          }
          .icon {
            margin-right: 5px;
          }
          .current-node {
            display: inline-block;
            border: 2px solid #34bfa3;
            padding: 2px 5px;
            margin: 2px 40px 2px 10px;
          }
        }
      }
      .search-list {
        display: flex;
        .search-tab {
          margin-right: 20px;
        }
      }
    }
    .show-body {
      padding: 25px;
    }
  }
}
</style>