自定义流程按钮

介绍

1. 自定义流程处理按钮是一个高度灵活的功能组件，专为满足用户在特定流程处理中的个性化需求而设计。
2. 需要在bfp项目中添加运行时和配置页面，在ide项目配置页面，在移动端项目添加运行页面。

开发步骤

在bfp-ui项目中

在base项目config/bfp-runtime-config.json文件中添加自定义按钮模型即可在流程操作中添加一个按钮

页面文件放在src/components/Panel/component/configUI文件夹下

bfp-ui项目中流程配置按钮的页面：

点击编辑按钮，自定义的组件即可弹出

流程运行按钮页面：

运行时的页面放在bfp-ui项目的src/components/Panel/component/runtime下

点击自定义的按钮（如加签），即可弹出自定义的按钮页面

在ide项目中

该项目中只需要在ide项目的src/components/editor/flow/editAttr/components/manual-activities/operation/components/Panel/component/configUI文件下添加自定义的配置页面即可

在移动端项目中

在移动端项目的config/bfp-runtime-config.json文件中添加自定义按钮模型

该项目中只需要在移动端项目的src/components/dynamic-button/components文件下添加自定义的运行页面即可

接口使用

在目录 src/components/Panel/component/runtime/中添加流程审批界面组件

如：src/components/Panel/component/runtime/dTask.vue 自定义组件与表单的交互使用 src/views/fragment/index.vue提供的方法 组件选项添加 inject: ["BFP"]

可供运行时组件使用的接口

方法	介绍
this.BFP.realForm	取得表单实例
this.BFP.matchFormButtonFunc	匹配表单按钮函数
this.BFP.changeAuthority	更新页面按钮权限

加签按钮代码说明

参考加签自定义按钮代码，在src/components/Panel/component的目录下

├── configUI │ ├── config.vue │ ├── dTask.vue │ └── model.js ├── mixins │ └── index.js └── runtime ├── signature.vue └── signture └── dTask.vue

在AFCentern项目中添加配置文件

路径：config/bfp-runtime-config.json

{
    "op-button":[
        {
            "code": "signature",
            "name": "dTask",
            "enable": false,
            "config":{},
            "configUI": "dTask",
            "runtimeUI": "signature"
        }
    ]
}

自定义组件导入的基本原理

// 导入文件夹下的所有文件
const cache = {};

function importAll(r) {
  r.keys().forEach((key) => (cache[key] = r(key)));
}
importAll(require.context("./component", false, /\.vue$/));
const components = Object.keys(cache).reduce((pre, key) => {
  const property = key.match(/\.\/(.*?)\.vue/)[1];
  pre[property] = cache[key].default;
  return pre;
}, {});

//...

export default{
    components: { ...components },
}

在目录 src/components/Panel/component/configUI/中添加流程配置界面组件

如 src/components/Panel/component/configUI/dTask.vue

<template>
  <div>
    <el-form :model="form" label-width="120px">
      <div class="action-title">
        <i></i>
        <h5>基本信息</h5>
      </div>
      <el-form-item label="按钮动作">
        <el-input disabled v-model="form.actionName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="按钮名称">
        <el-input disabled v-model="form.actionChName" placeholder=""></el-input>
      </el-form-item>
      <!-- -->
    </el-form>
        <!-- -->
  </div>
</template>

<script>
//...
export default {
  name: "",
  components: { Participants },
  props: {
    //...
  },
  data() {
    return {
      form: {},
      participantScopeList1
    };
  },
  watch: {},
  computed: {
    // 参与者范围
    participantScope() {
      //...
    },
  },
  mounted() {
    this.form = cloneDeep(this.actionObj);
  },
  methods: {
    // ...
    /**
     * 获取配置数据
     */
    getData(){
        return this.form;
    }
  },
};
</script>
<style lang="scss" scoped>
//...
</style>

<template>
  <div class="remain-button-overview">
    <div class="inner-wrap">
      <div class="remain-button-list">
        <div class="divide-bar">
          <span>参与者选择</span>
        </div>
        <!-- -->
    </div>
  </div>
</template>

<script>
// 该组件渲染 转交、协办、加签表单按钮
import SelectEmp from "@/components/universalButton/select-emp.vue";
import {
BfpActionController,
} from "@controller"

export default {
  name: "remain-button",
  inject: ["BFP"],
  props: {
    btnData: {
      type: Object,
      default: () => {},
    },
    approval: {
      type: Object,
      default: () => {},
    },
    clickBefor: {
      type: Function,
      default: null,
    },
  },
  components: {
    SelectEmp,
  },
  data() {
    return {
      visible: false,
      assignList: [],
    };
  },
  computed: {
    //...
  },
  methods: {
  	//...
    // 处理加签
    async handleSignature([val, close], btn) {
      const { actionCode, actionChName } = this.btnData;
      const context = {
        opinions: this.BFP.approval.content || "",
        actionCode,
      };
      // 转交、协办、加签更新bfpContext
      let bfpContext = {
        ...this.BFP.bfpContext,
        ...context,
      };
      const payload = {
        participants: val,
        bfpContext: bfpContext,
        processContext: this.BFP.processContext,
      };
  
      payload.formData = { ...this.BFP.formData };
  
      const responseHandle = (data, name) => {
        if (data && data.code === 200) {
          this.$alert(`流程${name}成功`, "提醒", {
            confirmButtonText: "确定并关闭当前页",
            showClose: false,
            type: "success",
            callback: (action) => {
              // TODO postmessage 关闭标签页; 办理的时候执行关闭和刷新，如果为发起，可以不刷新和关闭
              this.BFP.closeWindow();
            },
          });
        } else {
          this.$message.error(`${name}失败！`);
        }
      };
  
      // 运行表单方法
      await this.BFP.matchFormButtonFunc(this.btnData);
      const { data } = await this.dispatch(BfpActionController.delegateAction, {
        payload,
      });
      responseHandle(data, actionChName);
   
    }
  },
};
</script>

<style lang="scss" scoped>
.inner-wrap {
  width: 800px;
}
.remain-button-overview {
  display: inline-block;
}
</style>

完成后的例子如下