README
PlatformUI
中国电建集团成都勘测设计研究院有限公司数字工程分公司
研发中心平台前端组件库
安装
npm i @chidi-sdc/platform-ui -S
使用
import "@chidi-sdc/platform-ui/dist/platform-ui.min.css";
import PlatformUI from "@chidi-sdc/platform-ui";
PlatformUI.PlTask
- props
- taskId 字符串 任务 id
- taskType 字符串 todo | done 任务表单类型
- todo 表示是代办任务,会渲染右测的处理区域
- done 表示已办任务,不会渲染右侧处理区域
slot
此组件提供有一个 slot 插槽,放入插槽的业务表单组件根据业务需要在业务表单组件 methods 中实现以下三个方法
1、任务信息加载成功
// PlTask会调用此方法将任务信息传递给业务表单组件 onTaskLoad(task) { this.task = task; console.log(this.task); }
- 2、流程表单按钮点击之前
// PlTask在点击流程处理按钮之前会先调用此业务组件方法 // 业务表单可以在此时处理业务系统的数据处理 async beforeTaskButtonClick(button) { console.log("点击按钮前", button); }
- 3、流程表单按钮点击之后
// PlTask在流程处理流程点击完成并拿到后台返回结果后会调用此方法 async afterTaskButtonClick(button, result) { console.log("点击按钮后", button, result); }
业务表单组件 test
<template> <div class="form-test"> <h1>这里是动态表单组件</h1> </div> </template> <script> export default { name: "FormTest", methods: { async beforeTaskButtonClick(button) { console.log("点击按钮前", button); }, async afterTaskButtonClick(button, result) { console.log("点击按钮后", button, result); }, onTaskLoad(task) { this.task = task; console.log(this.task); } }, data() { return { task: {} }; } }; </script>
PlTask 使用示例
<template> <div class="demo-page"> <div class="box"> <pl-task :task-id="'677913593743671296'" :task-type="'done'"> <test></test> </pl-task> </div> </div> </template> <script> import PlatformUI from "@chidi-sdc/platform-ui"; import test from "./test"; export default { name: "ApiTask", components: { PlTask : PlatformUI.PlTask, test }, methods: {}, data() { return {}; } }; </script>