更多ruoyi-nbcio功能請(qǐng)看演示系統(tǒng)

gitee源代碼地址

前后端代碼：?https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后臺(tái)管理系統(tǒng)

? ? ? ?仿釘釘?shù)拈_源項(xiàng)目網(wǎng)上也不少，而且很多功能已經(jīng)也比較完善了，但大部分都不是MIT協(xié)議，所以都被我放棄了，最后找到approvalFlow項(xiàng)目，雖然這個(gè)項(xiàng)目只是簡(jiǎn)單的做了一個(gè)仿釘釘?shù)牧鞒虉D，功能很多也不完善，但也沒(méi)辦法，那我還是基于這個(gè)項(xiàng)目來(lái)擴(kuò)展，滿足我的ruoyi-nbcio所需要的通過(guò)仿釘釘流程來(lái)實(shí)現(xiàn)原先bpmn實(shí)現(xiàn)的流程設(shè)計(jì)。

? ? ?1、建立imdd目錄

? ?

? ?把相應(yīng)的組件custom放到相應(yīng)目錄里，如上。

? 根據(jù)自己需要，仿釘釘流程主頁(yè)修改如下：

<template>
  <div class="page">
    <section class="page__content" v-if="mockData">
      <Process
        ref="processDesign"
        :conf="mockData.processData"
        tabName="processDesign"
        @startNodeChange="onStartChange"/>
    </section>
    <div class="publish">
      <el-button size="mini" type="primary" @click="preview"><i class="el-icon-view"></i>預(yù)覽</el-button>
      <el-button size="mini" type="primary" @click="publish"><i class="el-icon-s-promotion"></i>發(fā)布</el-button>
    </div>
  </div>
</template>

? ? ? 數(shù)據(jù)也暫時(shí)用原先的json數(shù)據(jù)，后續(xù)用api后端數(shù)據(jù)，其它內(nèi)容也不做修改，后續(xù)根據(jù)需要再修改。

? ?2、在FlowCard里的增加節(jié)點(diǎn)里增加三個(gè)新功能，就是并行分支，延遲等待與觸發(fā)器，以后需要增加相應(yīng)的功能也可以在這里增加。

? ??

function addNodeButton(ctx, data, h, isBranch = false) {
  // 只有非條件節(jié)點(diǎn)和條件分支樹下面的那個(gè)按鈕 才能添加新分支樹
  console.log("addNodeButton data,isBranch",data,isBranch);
  //let couldAddBranch = !hasConditionBranch(data) || isBranch;
  let isEmpty = data.type === "empty";
  if (isEmpty && !isBranch) {
    return "";
  }
  return (
    <div class="add-node-btn-box flex  justify-center">
      <div class="add-node-btn">
        <el-popover placement="right" trigger="click" width="400">
          <div class="condition-box">
            <div>
              <div class="condition-icon" onClick={ctx.eventLancher.bind( ctx, "addApprovalNode",  data, isBranch )} >
                <i class="el-icon-s-check iconfont"></i>
              </div>
              審批人
            </div>

            <div>
              <div class="condition-icon" onClick={ctx.eventLancher.bind( ctx, "addCopyNode",  data, isBranch )} >
                <i class="el-icon-s-promotion iconfont" style="vertical-align: middle;"></i>
              </div>
              抄送人
            </div>

            <div>
              <div class="condition-icon" onClick={this.eventLancher.bind(ctx, "appendBranch", data, isBranch)}>
                <i class="el-icon-share iconfont" style="color:rgb(21, 188, 131);"></i>
              </div>
              條件分支
            </div>

            <div>
              <div class="condition-icon" onClick={this.eventLancher.bind(ctx, "addConcurrentBranch", data, isBranch)}>
                <i class="el-icon-s-operation iconfont" style="color:rgb(21, 188, 131);"></i>
              </div>
              并行分支
            </div>

            <div>
              <div class="condition-icon" onClick={this.eventLancher.bind(ctx, "addDelayNode", data, isBranch)}>
                <i class="el-icon-time iconfont" style="color:rgb(21, 188, 131);"></i>
              </div>
              延遲等待
            </div>

            <div>
              <div class="condition-icon" onClick={this.eventLancher.bind(ctx, "addTriggerNode", data, isBranch)}>
                <i class="el-icon-set-up iconfont" style="color:rgb(21, 188, 131);"></i>
              </div>
              觸發(fā)器
            </div>
          </div>

          <button class="btn" type="button" slot="reference">
            <i class="el-icon-plus icon"></i>
          </button>
        </el-popover>
      </div>
    </div>
  );
}

3、一些界面上的樣式修改

? ?因?yàn)樵谛碌沫h(huán)境與界面下面，所以相應(yīng)的樣式根據(jù)現(xiàn)有界面需要進(jìn)行修改與調(diào)整。

? 主要調(diào)整下面的界面，包括背景。

4、效果圖如下：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-734857.html

到了這里，關(guān)于基于若依的ruoyi-nbcio流程管理系統(tǒng)增加仿釘釘流程設(shè)計(jì)(一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！