mec-cloud_-intelligent-manufacturing_crm/zkqy-ui/src/views/bussiness/dialogCompments/Mec/NodeShow.vue

<template>
  <div class="form-wrap">
    <div class="cardwrap">
      <div class="title-area">
        <span><i class="el-icon-help mr5"></i>工序</span>
      </div>
      <div class="node-list">
        <div
          :class="{
            node: true,
          }"
          v-for="(item, index) of nodeList"
          :key="item.num"
        >
          <!-- currentNode: item.nodeId == currentNodeKey, -->
          <!-- @click="shiftNode(item)" -->
          <span class="num">>{{ index + 1 }}</span>
          <span class="title">{{ item.nodeInfo.name }}</span>
          <span class="time">1分钟</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import getNodeSequence from "@/utils/bpmn/getNodeSequence";
import { xmlStr2XmlObj } from "@/utils/bpmn/xml";
export default {
  name: "NodeShow",
  props: ["formData", "row"],
  components: {},
  data() {
    return {
      search: "",
      nodeList: [],
      currentNodeKey: "",
      resFormData: {},
      columns: [
        {
          label: "编号",
          prop: "id",
        },
        {
          label: "编者",
          prop: "editor",
        },
        {
          label: "时间",
          prop: "time",
        },
      ],
      material: [
        {
          label: "名称",
          prop: "name",
        },
        {
          label: "尺寸",
          prop: "size",
        },
        {
          label: "规格",
          prop: "model",
        },
        {
          label: "数量",
          prop: "num",
        },
        {
          label: "备注",
          prop: "note",
        },
      ],
    };
  },
  watch: {
    myFormData: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
    myRow: {
      handler(val) {
        this.currentNodeKey = val.benTaskNodeKey;
        if (val?.bepTaskProcessXmlContent) {
          let nodeSequence = getNodeSequence(
            xmlStr2XmlObj(val.bepTaskProcessXmlContent)
          );
          this.nodeList = nodeSequence?.filter(
            (item) => item.nodeInfo.localName != "exceptionTask"
          );
          // .slice(0, this.getIndexByNodeId(nodeSequence, this.currentNodeKey))
          // ?.filter((item) => item.nodeInfo.localName != "exceptionTask");
          // this.nodeList = getNodeSequence(
          //   xmlStr2XmlObj(val.bepTaskProcessXmlContent)
          // )?.filter((item) => item.nodeInfo.localName != "exceptionTask");

          //去掉开始和结束节点
          // this.nodeList.shift();
          // this.nodeList[this.nodeList.length - 1]?.nodeInfo.localName ==
          //   "endEvent" && this.nodeList.pop();
          console.log(this.nodeList);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    myFormData() {
      return this.formData;
    },
    myRow() {
      return this.row;
    },
  },
  methods: {
    async getFormData() {
      let formData = {
        flag: false,
        msg: "",
      };

      return {
        flag: true,
        data: this.resFormData,
      };
      // if(){}
      // try {
      //   let valid = await this.$refs.form.validate();
      //   if (valid) {
      //     formData.flag = true;
      //     formData.data = this.form;
      //     return formData;
      //   } else {
      //     formData.msg = "表单校验异常,请规范填写表单数据";
      //     return formData;
      //   }
      // } catch (error) {
      //   // console.log(error);
      //   formData.msg = "表单校验异常,请规范填写表单数据";
      //   return formData;
      // }
    },
    async shiftNode(item) {
      if (item.nodeId == this.currentNodeKey) return;
      this.resFormData = {
        taskProcessKey: this.row.bepTaskKey,
        taskNodeKey: this.currentNodeKey,
        taskBackNodeKey: item.nodeId,
      };
      this.currentNodeKey = item.nodeId;
      // try {
      //   let res = await this.$modal.confirm(
      //     "是否确认切换流程至<" + item.nodeInfo.name + ">异常？"
      //   );
      //   console.log(res, item, this.row);
      //   let payLoad = {
      //     taskProcessKey: this.row.bepTaskKey,
      //     taskNodeKey: this.currentNodeKey,
      //     taskBackNodeKey: item.nodeId,
      //   };
      // } catch (error) {
      //   this.$message.info("取消成功");
      // }
    },

    getIndexByNodeId(nodeSequence, nodeId) {
      return nodeSequence.findIndex((item) => item.nodeId == nodeId);
    },
  },
};
</script>

<style scoped lang="scss">
.form-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;

  .cardwrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 20px;
    .title-area {
      display: flex;
      align-items: center;
      padding-bottom: 5px;
      font-size: 16px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.404);
      box-sizing: border-box;
    }
    .table-area {
      padding-top: 10px;
    }
    .node-list {
      display: flex;
      flex-wrap: wrap;
      padding-top: 10px;
      .node {
        width: 33.3333%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px dotted gray;
        padding: 0 5px;
        // &:hover {
        //   border: 1px dotted rgb(0, 195, 255);
        //   background-color: rgba(70, 194, 231, 0.63);
        // }
        .num {
          color: #40c3a8;
          font-size: 16px;
          margin-right: 5px;
        }
        .title {
          /* // color: #ececee34; */
          font-size: 14px;
          flex: 1;
          /* // ma */
        }
        .time {
          font-size: 12px;
          color: rgba(48, 44, 44, 0.247);
          margin-right: 10px;
        }
      }
      .currentNode {
        background-color: #7dec8f !important;
      }
    }
  }
}
</style>