vue3使用工作流bnpm.js實現(xiàn)保存 ，新增，修改 ，右邊工具欄自定義，屬性欄自定義文章來源地址http://www.zghlxwxcb.cn/news/detail-534890.html

<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
    <!--xml-->
    <!--自定義右邊屬性面板-->
    <div class="custom-properties-panel">
      <div class="empty" v-if="selectedElementsArr.selectedElements.length <= 0"
        >請選擇一個元素</div
      >
      <div class="empty" v-else-if="selectedElementsArr.selectedElements.length > 1"
        >只能選擇一個元素</div
      >
      <div v-else>
        <fieldset class="element-item">
          <label>節(jié)點id</label>
          <span>{{ element.id }}</span>
        </fieldset>
        <fieldset class="element-item">
          <label>名稱&nbsp;&nbsp;&nbsp;&nbsp;</label>
          <input :value="element.nmae" @change="(event) => changeField(event, 'name')" />
        </fieldset>
        <fieldset class="element-item">
          <label>用戶名</label>
          <select
            @change="changeEventType"
            :value="eventType"
            style="width: 182px; border: 1px solid #d9d9d9; border-radius: 5px"
          >
            <option
              v-for="option in eventTypesArr.eventTypes"
              :key="option.value"
              :value="option.value"
              >{{ option.label }}</option
            >
          </select>
        </fieldset>
      </div>
    </div>
    <!--自定義右邊屬性面板完-->
    <ul class="buttons">
      <li>
        <a-button ref="saveDiagramlink" title="保存為bpmn" @click="getXML()"
          >保存最新的xml文件</a-button
        >
      </li>
    </ul>
  </div>
</template>

<script setup>
  // import { workFlowApi} from '/@/api/bnpm/bnpm'
  import { workFlowApi } from '../../../api/bnpm/bnpm'
  import { ref, onMounted, reactive } from 'vue'
  // import { message } from 'ant-design-vue'
  // import { ElMessage } from 'element-plus'
  import BpmnModeler from 'bpmn-js/lib/Modeler'

  import { useRouter } from 'vue-router'
  import { xmlStr } from '../../../mock/xmlStr'
  //右側(cè)屬性欄
  import propertiesPanelModule from 'bpmn-js-properties-panel'
  import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
  import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

  //引入mitt
  // import emitter from '../../../utils/mitt/bus'
  import { vmviewdata, vmviewname } from '../bnpmtext/index.vue'

  import { ElMessage, ElMessageBox } from 'element-plus'
  // import type { Action } from 'element-plus'

  // 漢化組件
  import customTranslate from './customTranslate'
  // import { BpmnpropertiesProviderModule, BpmnpropertiesPanelModule } from 'bpmn-js-properties-panel'
  // bpmn建模器
  let bpmnModeler = reactive({})
  // let container = ref(null)
  let canvas = ref()
  let dataONE = reactive({})
  const saveDiagramlink = ref()
  const form = reactive({
    region: '',
  })

  // let defaultXML = ref()
  // 自定義右邊屬性面板屬性定義
  //當(dāng)前選擇的元素合集
  let selectedElementsArr = reactive({
    selectedElements: [],
  })

  let element = ref(null)
  let eventType = ref()

  //郵件發(fā)送參數(shù)
  // let recipientmail = reactive({
  //   recipient: ['dingzicool@sina.com', 'dingzicool@sina.com'],
  // })

  let eventTypesArr = reactive({
    eventTypes: [
      { label: '請選擇用戶', value: '' },
      { label: '張三', value: 'bpmn:MessageEventDefinition' },
      { label: '李四', value: 'bpmn:TimerEventDefinition' },
      { label: '王五', value: 'bpmn:ConditionalEventDefinition' },
    ],
  })
  const router = useRouter()

  //保存最新的bpmn文件
  let bnpmXML = reactive({
    workname: '',
    content: '',
  })

  //let content =ref()
  //掛載時初始化
  onMounted(() => {
    init()
  })

  function init() {
    //漢化組件的引入使用
    const customTranslateModule = {
      translate: ['value', customTranslate],
    }

    //可操作時候創(chuàng)建實例為BpmnModeler
    bpmnModeler = new BpmnModeler({
      container: canvas.value,
      //添加控制板
      //添加控制板
      propertiesPanel: {
        parent: '#js-properties-panel',
      },
      additionalModules: [
        // 右邊的屬性欄
        propertiesPanelModule,
        propertiesProviderModule,
        //漢化
        customTranslateModule,
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
        // authority: authorityModdleDescriptor,
      },
    })
    createNewDiagram()
    //  createNewDiagram(zhangcheng)

    // selection.changed監(jiān)聽選中的元素
    bpmnModeler.on('selection.changed', (e) => {
      // console.log('###HH', e)
      selectedElementsArr.selectedElements = e.newSelection // 數(shù)組, 可能有多個
      // console.log('###H', selectedElementsArr.selectedElements)
      console.log(element, e.newSelection[0])
      element = e.newSelection[0] // 默認(rèn)取第一個
    })

    //使用element.changed監(jiān)聽發(fā)生改變的元素
    bpmnModeler.on('element.changed', (e) => {
      const { element } = e
      console.log('@@@$$$', element)
      // const { element: currentElement } = this
      // 如果沒有 element
      if (!element.value) {
        return
      }
      if (element.id === element.value.id) {
        element.value = element
      }
    })
  }

  //自定義面板內(nèi)容
  /**
   * 更新元素屬性
   * @param { Object } 要更新的屬性, 例如 { name: '', id: '' }
   *
   */

  function updateProperties(properties) {
    const modeling = bpmnModeler.get('modeling')
    console.log(element, properties)
    modeling.updateProperties(element, properties)
  }

  /**
   * 改變控件觸發(fā)的事件
   * @param { Object } input的Event
   * @param { String } 要修改的屬性的名稱
   *
   *
   */
  // 當(dāng)控件內(nèi)的內(nèi)容發(fā)生改變時, 同步更新element.
  function changeField(event, type) {
    const value = event.target.value
    let properties = {}
    properties[type] = value
    element[type] = value
    updateProperties(properties) // 調(diào)用屬性更新方法
  }

  // 用戶下拉菜單
  function changeEventType(event) {
    const value = event.target.value
    const bpmnReplace = bpmnModeler.get('bpmnReplace')
    eventType.value = value
    bpmnReplace.replaceElement(element, {
      type: element.value.businessObject.$type,
      eventDefinitionType: value,
    })
  }

  function createNewDiagram() {
    // console.log('我是數(shù)據(jù)', vmviewdata)
    if (vmviewdata.value == undefined || vmviewdata.value == '') {
      // 新增操作時，界面的初始化
      bpmnModeler.importXML(xmlStr, (err) => {
        if (err) {
          // console.error(err)
        } else {
          // 這里是成功之后的回調(diào), 可以在這里做一系列事情
          success()
        }
        // 讓圖能自適應(yīng)屏幕
        var canvas = bpmnModeler.get('canvas')
        canvas.zoom('fit-viewport')
      })
    } else {
      // 修改操作時，界面的初始化
      bpmnModeler.importXML(vmviewdata.value, (err) => {
        if (err) {
          // console.error(err)
        } else {
          // 這里是成功之后的回調(diào), 可以在這里做一系列事情
          success()
        }
        // 讓圖能自適應(yīng)屏幕
        var canvas = bpmnModeler.get('canvas')
        canvas.zoom('fit-viewport')
      })
    }
  }

  function success() {
    // console.log('創(chuàng)建成功!')
    addBpmnListener()
  }

  function addBpmnListener() {
    // 給圖綁定事件，當(dāng)圖有發(fā)生改變就會觸發(fā)這個事件
    bpmnModeler.on('commandStack.changed', () => {
      saveDiagram(function (err, xml) {
        bnpmXML.content = xml
        // 這里獲取到的就是最新的xml信息
        console.log('zx', xml)
        //setEncoded(saveDiagramlink, 'diagram.bpmn', err ? null : xml)
      })

      // //郵件發(fā)送
      // getSendmail(recipientmail).then((res) => {
      //   console.log('郵件發(fā)送', res)
      // })
    })
  }

  //繪制圖形保存最新的xml
  function getXML() {
    if (vmviewdata.value == undefined || vmviewdata.value == '') {
      ElMessageBox.prompt('請輸入保存的文件名稱', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputErrorMessage: '文件名稱不能為空',
      })
        .then(({ value }) => {
          // ElMessage({
          //   type: 'success',
          //   message: `Your email is:${value}`,
          // })
          bnpmXML.workname = value
          workFlowApi(bnpmXML).then((res) => {
            ElMessage({
              type: 'success',
              message: '成功',
            })

            if (res) {
              router.push({
                name: 'bnpmtext',
              })
            }
            console.log('bj', res)
          })

          bnpmXML.content = ''
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '保存失敗',
          })
        })
    } else {
      // 修改時的文件名
      let xmlName = vmviewname.value
      // 文件名去除前綴和后綴的字符 /bpmn .
      let name = xmlName
        .replace(/bpmn/g, '')
        .replace(/\//g, '')
        .replace(/\\/g, '')
        .replace(/\./g, '')

      ElMessageBox.prompt('請輸入修改的文件名稱', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputErrorMessage: '文件名稱不能為空',
        inputValue: name, // 賦值文本框
      })
        .then(({ value }) => {
          bnpmXML.workname = value
          // ElMessage({
          //   type: 'success',
          //   message: `Your email is:${value}`,
          // })

          // value = vmviewname
          workFlowApi(bnpmXML).then((res) => {
            ElMessage({
              type: 'success',
              message: '成功',
            })

            if (res) {
              router.push({
                name: 'bnpmtext',
              })
            }

            // 保存后清空原有的文件名和xml內(nèi)容
            vmviewdata.value = ''
            vmviewname.value = ''

            console.log('bj', res)
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '保存失敗',
          })
        })
    }

    console.log('weihao:', bnpmXML.content)
  }

  // 下載為bpmn格式,done是個函數(shù)，調(diào)用的時候傳入的
  function saveDiagram(done) {
    //console.log("weu",done)
    // 把傳入的done再傳給bpmn原型的saveXML函數(shù)調(diào)用
    bpmnModeler.saveXML({ format: true }, function (err, xml) {
      // return (urlq = xml)
      //console.log('iiii', urlq)
      done(err, xml)
    })
  }
  function setEncoded(link, name, data) {
    //   console.log('222223333', data)
    dataONE = data
    // console.log('dataONE', dataONE)

    // const dataONE = data
    // 把xml轉(zhuǎn)換為URI，下載要用到的
    const encodedData = encodeURIComponent(data)
    //console.log('222224444', encodedData)
    // 下載圖的具體操作,改變a的屬性，className令a標(biāo)簽可點擊，href令能下載，download是下載的文件的名字
    //  console.log('hahhah', link, name, data)
    let xmlFile = new File([data], 'test.bpmn')
    //console.log('22222222222222222', xmlFile)
    // if (data) {
    //   link.className = 'active'
    //   link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
    //   link.download = name
    // }
  }
</script>

<style scoped>
  .containers {
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 55.5rem;
  }

  .canvas {
    width: 100%;
    height: 100%;
  }

  .panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
  }

  .buttons {
    position: absolute;
    left: 20px;
    bottom: 20px;
  }

  .buttons li {
    display: inline-block;
    margin: 5px;
  }

  .buttons li a {
    color: #999;
    background: #eee;
    cursor: not-allowed;
    padding: 8px;
    border: 1px solid #ccc;
    text-decoration: none;
  }

  .buttons li a.active {
    color: #333;
    background: #fff;
    cursor: pointer;
  }

  /** 自定義屬性面板樣式 **/
  .custom-properties-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    background-color: #fff9f9;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
    padding: 20px;
  }

  .custom-properties-panel {
    position: absolute;
    right: 300px;
    top: 0;
    width: 300px;
    background-color: #fff9f9;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
    padding: 20px;
  }

  .empty {
    height: 200px;
    line-height: 200px;
    font-weight: 700;
  }

  .element-item {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid;
    border-color: rgb(182, 182, 182);
    border-radius: 8px;
  }

  .element-item:first-child {
    margin-top: 0;
  }

  .custom-properties-panel input,
  .custom-properties-panel textarea {
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all 0.3s;
    outline: none;
  }

  .custom-properties-panel input:focus,
  .custom-properties-panel button:focus,
  .custom-properties-panel textarea:focus,
  .custom-properties-panel [contenteditable]:focus {
    border-color: rgb(239, 112, 96);
    box-shadow: 0 0 1px 2px rgb(239, 112, 96, 0.2);
  }

  .custom-properties-panel label {
    font-weight: bold;
  }

  .custom-properties-panel label:after {
    content: ': ';
  }

  .custom-properties-panel button + button {
    margin-left: 10px;
  }
</style>

到了這里，關(guān)于vue3使用工作流bpmn.js實現(xiàn)保存 ，新增，修改 ，右邊工具欄自定義，屬性欄自定義的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！