mec-cloud_-intelligent-manufacturing_crm/zkqy-ui/src/views/bussiness/dialogCompments/GongYi/GY06.vue

<template>
  <div class="form-wrap">
    <div class="cardwrap">
      <div class="title-area">
        <span><i class="el-icon-s-order mr5"></i>请选择工艺文件</span>
        <div class="search ml10">
          <el-input
            v-model="search"
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
          ></el-input>
        </div>
      </div>
      <div class="table-area">
        <el-table :data="[]" border stripe>
          <el-table-column type="index" width="50" />
          <el-table-column
            v-for="col in columns"
            :prop="col.prop"
            :key="col.prop"
            :label="col.label"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="cardwrap">
      <div class="title-area">
        <span><i class="el-icon-document mr5"></i>材料信息</span>
      </div>
      <div class="table-area">
        <el-table :data="[]" border stripe>
          <el-table-column type="index" width="50" />
          <el-table-column
            v-for="col in material"
            :prop="col.prop"
            :key="col.prop"
            :label="col.label"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <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,
            currentNode: item.nodeId == currentNodeKey,
          }"
          v-for="(item, index) of nodeList"
          :key="item.num"
          @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: "GY01",
  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) {
          this.nodeList = getNodeSequence(
            xmlStr2XmlObj(val.bepTaskProcessXmlContent)
          )?.filter((item) => item.nodeInfo.localName != "exceptionTask");
          // this.nodeList = getNodeSequence(
          //   xmlStr2XmlObj(val.bepTaskProcessXmlContent)
          // );
          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("取消成功");
      // }
    },
  },
};
</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>