自定义bpmn 属性面板

点击查看代码

<template>
  <div class="custom-properties-panel my-card">
    <div v-if="selectedElements.length <= 0" class="empty">请选择一个节点</div>
    <div v-else-if="selectedElements.length > 1" class="empty">
      只能选择一个节点
    </div>
    <div v-else>
      <fieldset class="element-item">
        <label>id</label>
        <span>{{ element.id }}</span>
      </fieldset>
      <fieldset class="element-item">
        <label>name</label>
        <input
          :value="element.name"
          @change="(event) => changeField(event, 'name')"
        >
      </fieldset>
      <fieldset class="element-item">
        <label>customProps</label>
        <input
          :value="element.name"
          @change="(event) => changeField(event, 'customProps')"
        >
      </fieldset>
      <el-form
        ref="dataForm"
        :model="dataForm"
        :rules="rules"
        label-width="140px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="节点最大审批人数" prop="code">
              <el-select
                v-model="dataForm.approvalNum"
                placeholder="请选择节点最大审批人数"
                style="width: 100%"
              >
                <el-option
                  v-for="item in approvalNum"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审批类型" prop="code">
              <el-select
                v-model="dataForm.approvalType"
                placeholder="请选择审批类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in approvalType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            v-if="dataForm.approvalType == 1 || dataForm.approvalType == 2"
            :span="24"
          >
            <el-form-item label="已选人员" prop="code">
              <el-input v-model="dataForm.code" placeholder="请输入编码" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PropertiesView',
  props: {
    bpmnModeler: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      selectedElements: [],
      element: null,
      approvalNum: [
        {
          id: 1,
          label: '1'
        },
        {
          id: 2,
          label: '全部'
        }
      ],
      approvalType: [
        {
          id: 1,
          label: '指定人员'
        },
        {
          id: 2,
          label: '指定角色'
        },
        {
          id: 3,
          label: '由上一步指定'
        }
      ],
      dataForm: {
        id: null,
        deptType: null,
        name: null,
        platforms: []
      },
      rules: {
        platforms: [
          { required: true, message: '所属平台不能为空', trigger: 'change' }
        ],
        code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
  // 因此功能还未写完，流程图跟右侧panel的联动功能逻辑还未实现，在这里可以实现
    init() {
      // 右侧面板改变事件
      this.bpmnModeler.on('selection.changed', (e) => {
        this.selectedElements = e.newSelection;
        this.element = e.newSelection[0]?.businessObject;
        console.log(this.element, 'e.newSelection');
      });
      this.bpmnModeler.on('element.changed', (e) => {
        const { element } = e;
        const { element: currentElement } = this;
        if (!currentElement) {
          return;
        }
        // 如果当前选择的元素改变，需要同步更新面板
        if (element.id === currentElement.id) {
          this.element = element;
        }
      });
    },
    /**
     * 改变控件触发的事件
     * @param { Object } input的Event
     * @param { String } 要修改的属性的名称
     */
    changeField(event, type) {
      const value = event.target.value;
      let properties = {};
      properties[type] = value;
      this.element[type] = value;
      this.updateProperties(properties);
    },
    updateName(name) {
      const modeling = this.bpmnModeler.get('modeling');
      // modeling.updateLabel(element, name)
    //   modeling.updateProperties(element, {
    //     name
    //   });
    },
    /**
     * 更新元素属性
     * @param { Object } 要更新的属性, 例如 { name: '' }
     */
    updateProperties(properties) {
      const modeling = this.bpmnModeler.get('modeling');
    //   modeling.updateProperties(element, properties);
    }
  }
};
</script>

<style scoped>

</style>