X-web/src/components/work-flow-v2/node-item.vue

<template>
  <div
    class="node-item"
    ref="node"
    :class="{
      active: isActive || isSelected,
      done: node.state === '0',
      todo: node.state === '1'
    }"
    :style="flowNodeContainer"
    v-click-outside="setNotActive"
    @click="setActive"
    @mouseenter="showAnchor"
    @mouseleave="hideAnchor"
    @dblclick.prevent="editNode"
    @contextmenu.prevent="onContextmenu"
  >
    <el-row>
      <!-- <el-col :span="8">
        <div class="log-wrap">
          <img :src="node.logImg" alt="" />
        </div>
      </el-col> -->
      <el-col :span="24">
        <div class="nodeName">{{ node.nodeName }}</div>
      </el-col>
    </el-row>
    <!-- <el-row>
      <div class="node-operator">{{ node.operatorName }}</div>
    </el-row> -->
    <!--连线用--//触发连线的区域-->
    <div class="node-anchor anchor-top" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-right" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-left" v-show="mouseEnter"></div>
    <el-dialog
      :title="disabled ? '节点详情' : '节点编辑'"
      :visible.sync="dialog.visible"
      :modal="true"
      :append-to-body="true"
      width="60%"
    >
    <div style="height:400px;overflow:auto">
      <nodeEdit
        ref="nodeEdit"
        :data="dialog.data"
        :disabled="disabled"
        :isEdit="isEdit"
        :selectOperator="selectOperator"
      ></nodeEdit>
    </div>
    <div slot="footer">
      <el-button @click="dialog.visible = false">取 消</el-button>
      <el-button v-if="!disabled" type="primary" @click="dialogSubmit"
        >确 定</el-button
      >
    </div>
    </el-dialog>
  </div>
</template>

<script>
import ClickOutside from 'vue-click-outside'
import nodeEdit from './node-edit'
// import nodeAdd from './node-add'
export default {
  name: 'node-item',
  components: {
    nodeEdit
    // nodeAdd
  },
  props: {
    node: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否选择操作人，当选择操作人时，其他字段不可编辑
    selectOperator: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  directives: {
    ClickOutside
  },
  computed: {
    // 节点容器样式
    flowNodeContainer: {
      get () {
        return {
          top: this.node.top,
          left: this.node.left
        }
      }
    }
  },
  data () {
    return {
      mouseEnter: false,
      isActive: false,
      isSelected: false,
      // 对话框
      dialog: {
        visible: false,
        data: {}
      }
    }
  },
  watch: {
    disabled (val) {
      // eslint-disable-next-line no-undef
      onContextmenu()
    }
  },
  methods: {
    showAnchor () {
      this.mouseEnter = true
    },
    hideAnchor () {
      this.mouseEnter = false
    },
    onContextmenu () {
      this.$contextmenu({
        items: [
          {
            label: '删除',
            disabled: this.disabled,
            icon: '',
            onClick: () => {
              this.deleteNode()
            }
          }
        ],
        event,
        customClass: 'custom-class',
        zIndex: 9999,
        minWidth: 180
      })
    },
    setActive () {
      if (window.event.ctrlKey) {
        this.isSelected = !this.isSelected
        return false
      }
      this.isActive = true
      this.isSelected = false
      setTimeout(() => {
        this.$emit('changeLineState', this.node.id, true)
      }, 0)
    },
    setNotActive () {
      if (!window.event.ctrlKey) {
        this.isSelected = false
      }
      if (!this.isActive) {
        return
      }
      this.$emit('changeLineState', this.node.id, false)
      this.isActive = false
    },
    editNode () {
      // 编辑节点
      this.dialog.data = this.node
      this.dialog.visible = true
    },
    deleteNode () {
      this.$emit('deleteNode', this.node)
    },
    // 节点编辑提交
    dialogSubmit () {
      this.$refs.nodeEdit
        .validateFormData()
        .then(() => {
          let formData = this.$refs.nodeEdit.formData()
          this.$emit('setNode', this.node.id, formData)
          this.dialog.visible = false
        })
        .catch((e) => { console.log(e) })
    }
  }
}
</script>

<style lang="less" scoped>
@labelColor: #409eff;
@nodeSize: 20px;
@viewSize: 10px;
.node-item {
  position: absolute;
  // display: flex;
  // height: 40px;
  width: 120px;
  justify-content: center;
  align-items: center;
  border: 1px solid #b7b6b6;
  border-radius: 4px;
  // color: #ffffff;
  cursor: move;
  box-sizing: content-box;
  z-index: 9995;
  &:hover {
    z-index: 9998;
    .delete-btn {
      display: block;
    }
  }

  .log-wrap {
    width: 40px;
    height: 40px;
    border-right: 1px solid #b7b6b6;
  }
  .nodeName {
    flex-grow: 1;
    // width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    // white-space: nowrap;
    height: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .node-operator {
    border-top: 1px solid #b7b6b6;
    height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .node-anchor {
    display: flex;
    position: absolute;
    width: @nodeSize;
    height: @nodeSize;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: crosshair;
    z-index: 9999;
    background: -webkit-radial-gradient(sandybrown 10%, white 30%, #9a54ff 60%);
  }
  .anchor-top {
    top: calc((@nodeSize / 2) * -1);
    left: 50%;
    margin-left: calc((@nodeSize / 2) * -1);
  }
  .anchor-right {
    top: 50%;
    right: calc((@nodeSize / 2) * -1);
    margin-top: calc((@nodeSize / 2) * -1);
  }
  .anchor-bottom {
    bottom: calc((@nodeSize / 2) * -1);
    left: 50%;
    margin-left: calc((@nodeSize / 2) * -1);
  }
  .anchor-left {
    top: 50%;
    left: calc((@nodeSize / 2) * -1);
    margin-top: calc((@nodeSize / 2) * -1);
  }
}
.active {
  border: 1px dashed @labelColor;
  box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.5);
}
.done {
  background-color: #cccccc;
  color: #ffffff;
}
.todo {
  background-color: #FF3333;
  color: #ffffff;
}
</style>