vue制作工作流UI组件

Posted 2021-02-18 smallzoro

---

最近项目需求要做工作流组件，没办法这种东西还得插件好用，不过样式调的我头皮发麻，所以把代码放博客上，喜欢的就点赞吧！

先安装插件

npm install workflow-ui --save

<template>
  <div class="work-flow">
    <div class="fd-nav-content">
      <div
        class="dingflow-design"
      >
        <div class="ie-polyfill-container">
          <div
            class="box-scale"
            style="transform: scale(1); transform-origin: 50% 0px 0px;"
          >
            <Node
              v-for="(item, index) in items"
              :key="index"
              :node="item"
              @addnode="addnode"
              @delNode="delNode(item)"
            />
            <EndNode />
            <AModal
              :dialog.sync="viewModal"
            >
              <pre
                style="font-family: Monaco,Menlo,Consolas,Bitstream Vera Sans Mono,monospace;font-size: 14px;"
              >{{ JSON.stringify(data1.node, null, 4) }}</pre>
            </AModal>
            <ErrorsModal
              :dialog.sync="errorsModal"
              :data="errors"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ‘./style.css‘
import AModal from ‘workflow-ui/src/components/AModal/AModal‘;
import EndNode from ‘workflow-ui/src/components/Generator/end-node‘;
import ErrorsModal from ‘workflow-ui/src/components/Generator/errors-modal‘;
import Node from ‘workflow-ui/src/components/Generator/node‘
export default {
  name: ‘WorkFlow‘,
  components: {
    Node, AModal, EndNode, ErrorsModal
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    items: [],
    errorsModal: false,
    errors: [],
    viewModal: false,
    data1: {
      title: ‘请假‘,
      node: {
        name: ‘发起人‘,
        type: ‘start‘,
        nodeId: ‘sid-startevent‘,
        childNode: {}
      }
    }
  }),
  mounted() {
    if (this.data.node) {
      this.initNode(this.items, this.data.node)
    }
  },
  methods: {
    addnode(node) {

    },
    delNode(node) {

    },
    initNode(resultArr, data) {
      const arr = []
      arr.push(data)
      while (arr.length > 0) {
        const temp = arr.pop()
        if (temp.type === ‘route‘) {
          resultArr.push(temp)
        } else {
          const item = {
            nodeId: temp.nodeId,
            name: temp.name,
            type: temp.type,
            properties: temp.properties
          }
          resultArr.push(item)
        }
        if (temp.childNode != null) {
          arr.push(temp.childNode)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .work-flow {
    height: 100%;
    width: 100%;
    position: relative;
    .fd-nav-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      overflow-x: hidden;
      overflow-y: auto;
      padding-bottom: 30px;
      .dingflow-design {
        .ie-polyfill-container {
          display: -ms-grid;
          -ms-grid-columns: min-content;
          height: 100%;
          .box-scale {
            transform: scale(1);
            display: inline-block;
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            min-width: -webkit-min-content;
            min-width: -moz-min-content;
            min-width: min-content;
            background-color: #f5f5f7;
            -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
          }
        }
      }
    }
  }
</style>