mec-cloud_-intelligent-manufacturing_crm/ruoyi-ui/src/views/bussiness/processMange.vue

<template>
  <div class="process-mange-wrap">
    <!-- <el-card shadow="always" :body-style="{ padding: '20px' }"> -->
    <el-row>
      <el-col :xs="24" :md="8" :xl="8" class="col">
        <div class="statistic-wrap">
          <div class="discription">
            <span class="title">我的处理</span>
            <span class="sub-title">需要我处理的管道</span>
          </div>
          <span class="data">10</span>
        </div>
      </el-col>
      <el-col :xs="24" :md="8" :xl="8" class="col">
        <div class="statistic-wrap">
          <div class="discription">
            <span class="title">其它处理</span>
            <span class="sub-title">需要其他人处理的管道</span>
          </div>
          <span class="data">0</span>
        </div>
      </el-col>
      <el-col :xs="24" :md="8" :xl="8" class="col">
        <div class="statistic-wrap">
          <div class="discription">
            <span class="title">完成</span>
            <span class="sub-title">已经完成的管道</span>
          </div>
          <span class="data">4</span>
        </div>
      </el-col>
    </el-row>
    <!-- </el-card> -->
    <div class="main-area">
      <div class="show-header">
        <h3 class="header">管道列表</h3>
        <div class="search-list">
          <div class="search-tab">
            <el-radio-group v-model="taskType">
              <el-radio-button :label="1">我的处理</el-radio-button>
              <el-radio-button :label="2">其他处理</el-radio-button>
            </el-radio-group>
            <el-radio-group class="btn-list-two" v-model="taskStatus">
              <el-radio-button :label="3">已完成</el-radio-button>
              <el-radio-button :label="4">进行中</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-input">
            <el-input placeholder="请输入..." v-model="queryString">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getList"
              ></el-button>
            </el-input>
          </div>
        </div>
      </div>
      <div class="show-body">
        <!--    流程任务列表    -->
        <el-table :data="tableData" border stripe>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" width="50" align="center" />
          <el-table-column
            v-for="col in columns"
            :prop="col.prop"
            :key="col.prop"
            :label="col.label"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="col.prop == 'benCreateTime'">{{
                scope.row.benCreateTime.replace("T", " ")
              }}</span>
              <span v-else-if="col.prop == 'bepTaskProcessType'">{{
                getDictLabel(scope.row.bepTaskProcessType, dict.type.bpm_type)
              }}</span>
              <span v-else-if="col.prop == 'benTaskNodeState'">{{
                scope.row.benTaskNodeState == "0" ? "已执行" : "未执行"
              }}</span>
              <span v-else>{{ scope.row[col.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="excute-wrap">
                <el-button
                  type="warning"
                  plain
                  size="small"
                  class="mr10 mb5"
                  @click="opneExecuteNode(scope.row)"
                >
                  运行
                </el-button>
                <el-dropdown>
                  <el-button type="warning" plain size="small">
                    处理<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item>
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="excuteHandler(scope.row)"
                        v-hasPermi="['system:user:edit']"
                      >处理
                      </el-button>
                    </el-dropdown-item> -->
                    <el-dropdown-item>
                      <el-dropdown
                        size="mini"
                        @command="
                          (command) => handleCommand(command, scope.row)
                        "
                      >
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-d-arrow-right"
                          >触发异常
                        </el-button>
                        <el-dropdown-menu slot="dropdown"> </el-dropdown-menu>
                      </el-dropdown>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--    分页    -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div class="show-window">
        <!-- 运行节点弹窗 -->
        <el-dialog :title="nodeTitle" :visible.sync="open" width="50%">
          <!-- <el-form label-width="100px" :model="commonData">
            <h1>这里会引入当前节点需要处理的表单</h1>
          </el-form> -->
          <component v-if="myForm" :is="myForm" ref="myFormRef"></component>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeExecuteNode">取消</el-button>
            <el-button type="primary" @click="executeNode">运行</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  processList,
  runProcessNodeExecution,
} from "@/api/bpmprocess/run/executeProcess";
import getNodeSequence from "@/utils/bpmn/getNodeSequence";
import GY1 from "./dialogCompments/GY1.vue";

export default {
  name: "processMange",
  props: [],
  components: { GY1 },
  dicts: ["bpm_type"],
  data() {
    return {
      row: {}, //当前操作行数据
      myForm: "", //自定义表单组件名
      // 节点弹窗title
      nodeTitle: "节点弹窗",
      open: false,
      // 节点弹窗对应的formData
      commonData: {},
      taskType: 1,
      queryString: "",
      taskStatus: 3,
      tableData: [], //表格数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      columns: [
        {
          prop: "bepTaskKey",
          label: "任务编号",
        },
        {
          prop: "bepTaskName",
          label: "任务名称",
        },
        {
          prop: "bepTaskProcessType",
          label: "任务流程类型",
        },
        {
          prop: "bepTaskProcessState",
          label: "任务流程状态",
        },
        {
          prop: "benTaskNodeName",
          label: "节点名称",
        },
        {
          prop: "benTaskNodeType",
          label: "节点类型",
        },
        {
          prop: "benTaskNodeState",
          label: "节点状态",
        },
        {
          prop: "benCreateBy",
          label: "创建人",
        },
        {
          prop: "benCreateTime",
          label: "创建时间",
        },
      ],
    };
  },
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    getList() {
      processList(this.queryParams).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.rows.map((item) => item.resultMap);
          this.total = res.total;
          console.log(this.tableData);
        } else {
          this.$message.error("网络异常,请稍后再试");
        }
      });
    },
    // 打开运行节点弹窗
    opneExecuteNode(row) {
      console.log(row);
      this.myForm = row.benTaskNodeName.split("-")[0];
      this.row = row; //记录当前行数据
      this.open = true; // 打开弹窗
      // 根据当前节点绑定的表单信息查询对应的表单进行展示
    },
    // 运行节点按钮
    async executeNode() {
      console.log(this.row);
      let { benTaskNodeKey, bepTaskProcessXmlContent, implementationName } =
        this.row;
      let { nodeId, nextNodeId } = this.getNextNodeKey(
        benTaskNodeKey,
        bepTaskProcessXmlContent
      );
      let formData = {};
      if (this.$refs.myFormRef) {
        //获取自定义表单组件内容
        formData = await this.$refs.myFormRef.getFormData();
        if (!formData.flag) {
          this.$message.error(formData.msg);
          return;
        }
      }
      // let payLoad = {
      //   basicMap: {
      //     taskNodeKey: nodeId,
      //     nextNodeKey: nextNodeId,
      //     // tableName: "",
      //     implementationName: this.row.benmTaskAutomaticScriptTriggerType,
      //     taskProcessKey: this.row.bepTaskKey,
      //   },
      //   commMap: {
      //     //formData
      //   },
      // };

      let payLoad = {
        taskProcessKey: this.row.bepTaskKey, //当前任务流程编码
        taskNodeKey: nodeId, //当前执行节点唯一编码
        nextNodeKey: nextNodeId, //下一节点编码
        implementationName: this.row.benmTaskAutomaticScriptTriggerType, //当前节点绑定的脚本名
        taskProcessXmlContent: this.row.bepTaskProcessXmlContent, //当前流程xml
        formDataMap: formData.data, //自定义表单组件收集的表单数据
      };
      runProcessNodeExecution(payLoad).then((res) => {
        console.log(res);
      });
      console.log(payLoad);
    },
    // 关闭运行节点弹窗
    closeExecuteNode(row) {
      console.log(row);
      this.open = false;
    },
    // 获取下一个节点的nodekey
    getNextNodeKey(nodeKey, xmlStr) {
      let xmlObj = this.xmlStr2XmlObj(xmlStr);
      let nodeSequence = getNodeSequence(xmlObj);
      return nodeSequence.find((item) => item.nodeId == nodeKey) || {};
    },
    // xml字符串转xml对象
    xmlStr2XmlObj(xmlStr) {
      var xmlObj = {};
      if (document.all) {
        var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
        xmlDom.loadXML(xmlStr);
        xmlObj = xmlDom;
      } else {
        xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
      }
      return xmlObj;
    },
    // 触发异常回调
    handleCommand(command, row) {
      console.log("触发异常");
    },
    // 获取字典对应label
    getDictLabel(value, dictLsit = []) {
      return dictLsit.find((item) => {
        return item.value == value;
      })?.label;
    },
  },
};
</script>

<style scoped lang="scss">
.process-mange-wrap {
  background-color: #f2f3f8;
  padding: 20px;

  .col {
    background-color: #fff;
    border-right: 1px solid #ebedf2;
    // margin-right: 3px;
    .statistic-wrap {
      // height: 70px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 10px 17px;
      justify-content: space-between;

      .discription {
        display: flex;
        flex-direction: column;

        .title {
          line-height: 20px;
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 5px;
        }

        .sub-title {
          font-size: 14px;
        }
      }

      .data {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }

  .main-area {
    margin-top: 30px;
    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: 70px;

      .header {
      }

      .search-list {
        display: flex;

        .search-tab {
          margin-right: 20px;

          .btn-list-two {
            margin-left: 10px;
          }
        }
      }
    }

    .show-body {
      padding: 25px;
    }
  }
}
</style>