自动化组件
具体使用方法说明：
(1)配置服务器参数;
配置请参考如下：(如已配置请忽略)
McrbHttpClient.conf.host = "http://127.0.0.1:8081"
(2)自动化列表需配置列表操作功能按钮;
var xxx = [btnName, btnType, fun]
btnName按钮名称:string；btnType按钮类型:1跳转链接，0执行方法，2链接(且字段名转字段值)；fun执行操作；
配置请参考如下(pc端)：
var item1 = ["查看",1,"/auto/{{mark}}_view.html?id={{id}}"];
var item2 = ["修改",1,"/auto/{{mark}}_edit.html?id={{id}}"];
var item3 = ["删除",0,"delete({{id}})",];
var item4 = ["说明",1,"https://smcms.ixiera.com/"];
var item5 = ["发布",0,"toRelease({{id}},{{name}})"];
var options = new Array(item1,item2,item3,item4,item5);
配置请参考如下(移动端)：
var item1 = ["查看",1,"/auto/{{mark}}_m_view.html?id={{id}}"];
var item2 = ["修改",1,"/auto/{{mark}}_m_edit.html?id={{id}}"];
var item3 = ["删除",0,"delete({{id}})",];
var item4 = ["说明",1,"https://smcms.ixiera.com/"];
var item5 = ["发布",0,"toRelease({{id}},{{name}})"];
var options = new Array(item1,item2,item3,item4,item5);
当btnType=0时自定义方法：可调用autoFormFactory.addMethod()动态添加一个方法，如下
var item5 = ["发布",0,"toRelease({{id}},{{name}})"];
/**动态添加一个方法
* name 方法名（第一个参数）
* fun 执行方法（第二个参数，e..执行方法的传参）
*/
autoFormFactory.addMethod('toRelease', function(id, name) {
console.log('This is a new method!');
console.log(id);
console.log(name);
McrbHttpClient.gainOneById(function(e){
// console.log(e)
alert(e)
}, 'md243', id);
});
(3)创建自动化工具;
请参考如下：
自动化表单：
let autoFormFactory = McrbHttpClient.autoFormFactory(containerId, moduleId, url)
* 注意：如果模型中有map类型时，需要设置高德地图的key、securityJsCode及version(默认值为1.4.15, 可选2.0),设置方法如下：
McrbHttpClient.mapConfig = { key: '你申请的key', securityJsCode: '你申请的securityJsCode', version: '1.4.15' }自动化列表：
let autoFormFactory = McrbHttpClient.autoList(containerId, moduleId, url, options)
参数：containerId(String):自动化表单工具容器id(统一写成autoFormContainer), moduleId(String):模型id(如图4-19所示), url(String):提交成功后跳转的url
图4-19
(4)渲染表单或列表
请参考如下：
autoFormFactory.render(contId)
参数contId渲染容器id
(5)配置面包屑
配置面包屑内容说明：
1.如浏览器地址中存在参数menuid=xxx，自动化工具函数会根据提供的menuid查询对应的菜单信息以及其父级信息显示；
2.如浏览器地址中不存在参数menuid=xxx，自动化工具函数会查询当前模型信息显示；
(6)配置自动化列表查询条件
配置说明：
如浏览器地址中存在参数menuid=xxx，需查看其对应菜单管理中是否设置了查询条件（绑定模型），列表数据则会根据查询条件显示列表数据；
1)、自动化表单:添加/编辑（autoFormFactory）
具体使用方法:
<!-- 配置服务器参数 -->
McrbHttpClient.conf.host = "http://127.0.0.1:8081";
<!-- 创建自动化表单工具 -->
let autoFormFactory = McrbHttpClient.autoFormFactory(containerId, moduleId, url);
<!-- 渲染表单 -->
参数说明：
containerId(String):自动化表单工具容器id统一写成autoFormContainer;
moduleId(String):模型id(如图4-19所示);
url(String):提交成功后跳转的url;
formId:表单id;
应用实例如下：
//使用方法：
<div id="autoform_container" style="width: 800px;"></div>
<script>
McrbHttpClient.conf.host = "http://127.0.0.1:8081";
// 创建自动化工具
let autoFormFactory = McrbHttpClient.autoFormFactory('autoform_container', '60', 'index.html');
// 渲染
autoFormFactory.render('test')
</script>
2)、自动化表单:数据展示（autoFormView）
具体使用方法:
<!-- 配置服务器参数 -->
McrbHttpClient.conf.host = "http://127.0.0.1:8081";
<!-- 创建自动化表单工具 -->
let autoFormView = McrbHttpClient.autoFormView(containerId, moduleId, url);
<!-- 渲染表单 -->
autoFormView.render(viewId)
参数说明：
containerId(String):自动化表单工具容器id统一写成autoFormContainer;
moduleId(String):模型id(如图4-19所示);
url(String):提交成功后跳转的url;
viewId:信息显示容器id;
应用实例如下：
<div id="autoFormContainer"></div>
<script>
McrbHttpClient.conf.host = "http://127.0.0.1:8081";
// 创建自动化工具
const autoFormView = McrbHttpClient.autoFormView('autoFormContainer',98 ,'https://mhc.ixiera.com/');
// 渲染
autoFormView.render('viewId');
</script>
3)、自动化列表（autoList/autoMobileList）
具体使用方法(pc端):
<!-- 配置服务器参数 -->
McrbHttpClient.conf.host = "http://127.0.0.1:8081";
<!-- 配置列表操作功能按钮 -->
var item1 = ["查看",1,"/auto/{{mark}}_view.html?id={{id}}"];
var item2 = ["修改",1,"/auto/{{mark}}_edit.html?id={{id}}"];
var item3 = ["删除",0,"delete({{id}})",];
var item4 = ["说明",1,"https://smcms.ixiera.com/"];
var item5 = ["下载",2,"{{yuanfiles}}"];
var options = new Array(item1,item2,item3,item4,item5);
<!-- 创建自动化表单工具 -->
let autoList = McrbHttpClient.autoList(containerId, moduleId, url, options);
<!-- 渲染表单 -->
autoList.render(listId);
具体使用方法(移动端):
<!-- 配置服务器参数 -->
McrbHttpClient.conf.host = "http://127.0.0.1:8081";
<!-- 配置列表操作功能按钮 -->
var item1 = ["查看",1,"/auto/{{mark}}_m_view.html?id={{id}}"];
var item2 = ["修改",1,"/auto/{{mark}}_m_edit.html?id={{id}}"];
var item3 = ["删除",0,"delete({{id}})",];
var item4 = ["说明",1,"https://smcms.ixiera.com/"];
var item5 = ["下载",2,"{{yuanfiles}}"];
var options = new Array(item1,item2,item3,item4,item5);
<!-- 创建自动化表单工具 -->
let autoList = McrbHttpClient.autoMobileList(containerId, moduleId, url, options);
<!-- 渲染表单 -->
autoList.render(auto_mlist);
参数说明：
containerId(String):自动化表单工具容器id统一写成autoFormContainer;
moduleId(String):模型id(如图4-19所示);
url(String):提交成功后跳转的url;
options列表操作功能按钮;
listId:列表组件id;
注意：移动端搜索条件字段仅显示设置的第一个;列表显示字段仅显示设置的前两个;
配置按钮说明：item = [text, type, url];
text 按钮显示文字
type按钮类型：1常用链接，0删除按钮，2自定义url
url字符串中可使用{{字段名}}
应用实例如下：
<div id="autoFormContainer"></div>
<script>
McrbHttpClient.conf.host = "http://127.0.0.1:8081";
//
var item1 = ["查看",1,"/auto/{{mark}}_view.html?id={{id}}"];
var item2 = ["修改",1,"/auto/{{mark}}_edit.html?id={{id}}"];
var item3 = ["删除",0,"delete({{id}})",];
var item4 = ["说明",1,"https://smcms.ixiera.com/"];
var item5 = ["下载",2,"{{yuanfiles}}"];
var options = new Array(item1,item2,item3,item4,item5);
// 创建自动化工具
const autoList = McrbHttpClient.autoList('autoFormContainer',98 ,'https://mhc.ixiera.com/');
// 渲染
autoList.render('listId');
</script>
返回顶部
热线电话
微信
扫一扫