功能区扩展
前面的章节描述的主要是通过配置来实现功能(hook需要编写少量代码)。
真实的业务需求是难以预料的,接下来的章节完全需要编写代码来实现功能扩展。
例如: 在新增记录的时候,有个字段的内容不是简单数据类型而是个对象,这是时候【新增页面】无法满足这种输入要求,这时候我们可以对该字段进行单独输入。
真实例子:部门需要加一个人数限制(min:最少人数,max:最多人数)
- 在功能区新增个按钮[人数限制]
- 点击按钮【人数限制】,弹出一个新对话框用
原来部门的数据结构:
{_id:'1',name:'人力资源部',memo:'备注'}
增加【人数配置】后:
{_id:'1',name:'人力资源部',memo:'备注',config:{max:10,min:4}}
具体步骤
- 在 /src/component/extendCompontents目录创建一个目录:department
- 创建按钮组件:index.vue
- 创建表单组件:MaxMinForm.vue
- 在部门通用元配置文件:/src/shared/meta/company/Department.js 增加导出变量:extendActionButtons:"department_buttons"
- 在文件 /src/components/extendComponents/index.js 增加内容:
import department_buttons from './department/index.vue';
let components = {
"department_buttons": department_buttons,
};
并在components变量增加属性:
let components = {
"department_buttons": department_buttons,
};
刷新页面查看结果
- 功能区多出了一个按钮:人数设置
- 选择一行,点击按钮:人数设置
- 弹出一个对话框,这对话和双击弹出的对话框时不同的