mes-web/src/view/process/process-flow/process-setting.vue

<template>
  <div class="main-div" style="width:100%;height:100%;"  ref="mainDiv">
    {{ this.exportData }}
    <!--    {{this.importValue}}-->
    <!--    {{this.process.currentEdgeId}}-->
    <!--    {{this.process.currentNodeId}}-->
    <!--  测试导入初始数据  -->
    <Layout>
      <!--   左侧工具栏   -->
      <Sider :width="180">
        <div id="stencil"></div>
      </Sider>
      <Layout>
        <!-- 顶部工具栏 -->
        <Header class="header">
          <Button @click="()=>{this.graph.exportPNG('',{padding:50})}">导出PNG</Button>
          <Button @click="()=>{this.exportData=this.graph.toJSON()}" style="margin-left:10px;">导出json</Button>
          <Button @click="()=>{this.graph.fromJSON(JSON.parse(this.importValue))}" style="margin-left:10px;">导入json
          </Button>
          <Input v-model="importValue"/>
        </Header>
        <!--   中间流程图  -->
        <Content>
          <div id="container" ref="container" style="width:100%;height:100%"/>
        </Content>
        <!--   底部按钮   -->
        <Footer class="footer">
          <DkButton style="margin-right: 10px;" ref="save" type="primary" @click="save">{{ $t('save') }}</DkButton>
          <DkButton ref="close" @click="close('/process/process-flow/index')">{{ $t('close') }}</DkButton>
        </Footer>
      </Layout>
    </Layout>
    <transition-group name="fade">
      <!--  节点弹窗  -->
      <NodeModal key="node" v-if="process.nodeModal.display"
                 :dataKindList="dataKindList"
                 :productGradeList="productGradeList"
                 :jobList="jobList"
                 :shopList="shopList"
                 :dictionaryDataList="dictionaryDataList"/>
      <!--  连线弹窗  -->
      <EdgeModal key="edge" v-if="process.edgeModal.display"
                 :dataKindList="dataKindList"
                 :productGradeList="productGradeList.filter(it=>![$config.gradeKindType.decrease,$config.gradeKindType.inferior].includes(it.gradeKind))"/>
    </transition-group>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import NodeModal from '_c/business/process/node-modal/node-modal'
import EdgeModal from '_c/business/process/edge-modal/edge-modal'

const insertCss = require('insert-css')
const zt1 = require('./data/zt1.json')
import Process from '@/view/process/process-flow/config/ProcessConfig'
import { formMixin } from '@/mixins/form'

export default {
  name: 'process-setting',
  mixins: [formMixin],
  components: { NodeModal, EdgeModal },
  props: {
    type: {
      type: String,
      default: 'edit'
    },
  },
  data() {
    return {
      graph: null,//图形对象
      exportData: undefined,
      importValue: undefined,
      dataKindList: [],//基础数据
      productGradeList: [],//产品等级
      jobList: [],//工种
      dictionaryDataList:[],//数据字典
      shopList:[],//车间
    }
  },
  created() {
    this.setCurrentNodeId(undefined)
    this.setCurrentEdgeId(undefined)
    this.setProcessNodeModalDisplay(null)
    this.setProcessEdgeModalDisplay(null)
  },
  mounted() {
    //创建流程图对象
    this.graph = Process.init(this.$refs.container)
    //监听删除节点
    this.bindDeleteNodes()
    // this.graph.zoomToFit({ maxScale: 1 });// 将画布中元素缩小或者放大一定级别，让画布正好容纳所有元素，可以通过 maxScale 配置最大缩放级别
    // this.graph.centerContent(); // 将画布中元素居中展示
  },
  computed: {
    ...mapState(['process']),
  },

  methods: {
    ...mapMutations(['setProcessNodeModalDisplay', 'setProcessEdgeModalDisplay', 'setCurrentNodeId', 'setCurrentEdgeId']),
    /**
     * @desc   : 获取基础数据
     * @author : 张潇木
     * @date   : 2023/1/31 13:42
     */
    initData() {
      // 获取数据类别
      this.excute(this.$service.commonService, this.$service.commonService.getDataKind, {}).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.dataKindList = res.data
        }
      })
      // 获取产品等级
      this.excute(this.$service.productGradeService, this.$service.productGradeService.selectByCond, {
        flgValid: true,
        ftyId: this.$store.state.user.ftyId
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.productGradeList = res.data.list
        }
      })
      // 获取工种信息
      this.excute(this.$service.jobService, this.$service.jobService.selectByCond, {
        flgValid: true,
        ftyId: this.$store.state.user.ftyId
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.jobList = res.data.list
        }
      })
      //数据字典
      this.excute(this.$service.commonService, this.$service.commonService.getDictionaryData, {
        ftyId: this.$store.state.user.ftyId,
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.dictionaryDataList = res.data
        }
      })
      //数据字典
      this.excute(this.$service.commonService, this.$service.commonService.getFactorySpace, {
        ftyId: this.$store.state.user.ftyId,
        spaceKind: this.$config.factorySpace.shop
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.shopList = res.data
        }
      })
    },
    /**
     * @desc   : 提交保存
     * @author : 张潇木
     * @date   : 2023/2/3 9:30
     */
    save() {
      //节点组大小和是否展开存在data中
      this.graph.getNodes().filter(it => it.shape == 'groupNode').forEach((it) => {
        //如果是收起状态，存展开大小，如果展开，存当时的实际大小
        it.setData({
          'expandSize': it.isCollapsed() ? it.getExpandSize() : it.getSize(),
          'isCollapsed': it.isCollapsed()
        })
      })
      //转json
      this.formData.flowLayout = this.graph.toJSON()
      //流程整体校验
      if (!this.validData()) return false
      //发送保存网络请求
      this.excute(this.$service.processService, this.$service.processService.processSetting, this.formData).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          // 提示信息
          this.$Message.success(this.$t('I_001', { 'param': this.$v(this.type) }))
          // 编辑关闭窗体
          this.close()
        } else {
          // 如果不成功就提示错误信息
          this.$Message.warning(res.message)
        }
      })
    },
    /**
     * @desc   : 校验数据
     * @author : 张潇木
     * @date   : 2023/2/27 11:12
     */
    validData() {
      let allNodes = this.graph.getNodes().filter(it => it.shape == 'custom-image')
      let allEdges = this.graph.getEdges()
      let startNodes = allNodes.filter(it=>it.getData()?.flowKind===this.$config.flowKind.start)
      let endNodes = allNodes.filter(it=>it.getData()?.flowKind===this.$config.flowKind.end)
      if(allNodes.length<2){
        this.$Message.warning('流程中应至少包含2个节点')
        return false
      }
      if(allEdges.length<1){
        this.$Message.warning('流程中应至少包含1条线')
        return false
      }
      if(startNodes.length<1){
        this.$Message.warning('流程中应至少包含1个开始节点')
        return false
      }
      if(endNodes.length<1){
        this.$Message.warning('流程中应至少包含1个结束节点')
        return false
      }
      //检查所有开始节点是否能够连接到结束节点
      let startNodesNoCloseLoop=startNodes.filter(it=>{
        let endCount = this.graph.getSuccessors(it)?.filter(it=>it.getData()?.flowKind===this.$config.flowKind.end)
        if (endCount<1) {
          this.$Message.warning('开始节点为 [' + it.getData()?.nodeName + '] 的流程未闭环，请检查')
          return true
        }
      })
      if (startNodesNoCloseLoop.length > 0) return false

      //检查所有结束节点是否都有开始节点(回收不校验)
      let endNodesNoCloseLoop=endNodes.filter(it=>it.getData()?.nodeKind!==this.$config.nodeKind.recover).filter(it=>{
        let startCount = this.graph.getPredecessors(it)?.filter(it=>it.getData()?.flowKind===this.$config.flowKind.start)
        if (startCount<1) {
          this.$Message.warning('结束节点为 [' + it.getData()?.nodeName + '] 的流程未闭环，请检查')
          return true
        }
      })
      if (endNodesNoCloseLoop.length > 0) return false

      //节点的单个校验未通过
      let invalidNodes =allNodes.filter(it => {
        if (it.getAttrs()?.body?.stroke === 'red') {
          this.$Message.warning('[' + it.getData()?.nodeName + '] 节点设置有误，请检查')
          return true
        }
      })
      if (invalidNodes.length > 0) return false
      return true
    },

    /**
     * @desc   : 删除节点特殊控制，如果是成型模型，且被成型线绑定了，则不能删除
     * @author : 张潇木
     * @date   : 2023/3/29 13:26
     */
    bindDeleteNodes(){
      this.graph.bindKey(['backspace','del'], () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          //取成型节点id
          let shapingNodes=cells.filter(it=>it.getData()?.nodeKind === this.$config.nodeKind.shaping).map(it=> {return it.getData()?.nodeId})
          console.log('shapingNodes',shapingNodes)
          if(shapingNodes.length){
            //查询是否存在绑定的成型线
            this.excute(this.$service.processService, this.$service.processService.getBindMolding, shapingNodes).then(res => {
              if (res.code === this.$config.SUCCESS_CODE&&res.data.length) {
                this.$Message.warning('无法删除已被成型线绑定的节点')
              }
              else{
                this.graph.removeCells(cells)
              }
            })
          }else{
            this.graph.removeCells(cells)
          }
        }
      })
    },
    /**
     * @desc   : 查询明细
     * @author : 张潇木
     * @date   : 2023/2/3 16:47
     */
    detail(id) {
      return this.excuteNoParam(this.$service.processService, this.$service.processService.selectById, [id], false)
    },
    /**
     * @desc   : 初始化
     * @author : 张潇木
     * @date   : 2023/2/7 8:50
     */
    setValuesByEdit(data) {
      this.formData = data
      //初始化数据
      this.graph.fromJSON(this.formData.flowLayout || { cells: [] })
      //再重新渲染群组大小
      this.graph.getNodes().filter(it => it.shape == 'groupNode').forEach((it) => {
        // console.log('group-data',it.getData())
        //解构
        let { isCollapsed, expandSize } = it.getData()
        //设置展开大小
        it.setExpandSize(expandSize)
        //如果不是收起的，展开并还原大小
        if (!isCollapsed) {
          it.toggleCollapse(isCollapsed)
        }
      })
    },
  }
}
</script>
<style scoped>
#container {
  display: flex;
  border: 1px solid #dfe3e8;
}

#stencil {
  width: 180px;
  height: 100%;
  position: relative;
  border-right: 1px solid #dfe3e8;
}

#graph-container {
  width: calc(100% - 180px);
  height: 100%;
}

.x6-widget-stencil {
  background-color: #fff;
}

.x6-widget-stencil-title {
  background-color: #fff;
}

.x6-widget-stencil-group-title {
  background-color: #fff !important;
}

/deep/ .x6-widget-transform {
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239edd;
}

/deep/ .x6-widget-transform > div {
  border: 1px solid #239edd;
}

/deep/ .x6-widget-transform > div:hover {
  background-color: #3dafe4;
}

/deep/ .x6-widget-transform-active-handle {
  background-color: #3dafe4;
}

/deep/ .x6-widget-transform-resize {
  border-radius: 0;
}

/deep/ .x6-widget-selection-inner {
  border: 1px solid #239edd;
}

/deep/ .x6-widget-selection-box {
  border: 0 !important;
}

/*@keyframes ant-line {*/
/*  to {*/
/*    stroke-dashoffset: -1000*/
/*  }*/
/*}*/
.snap-line-color {
  color: black !important;
  background: black !important;
}

.ivu-layout-has-sider {
  height: 100%;
}

.header {
  height: 30px;
  background: #ededed;
  display: flex;
  align-items: center;
}

/deep/ .ivu-layout-header {
  height: 52px !important;
  line-height: 52px !important;
}

.footer {
  background: #ededed;
  display: flex;
  justify-content: right;
  padding: 10px 50px;
}
</style>