November 28, 2019
By: Elbert
管理后台模板使用总结
管理后台页面模板
一、概述
- 模板现存文件路径：
customplatform/custombackend/src/cljs/utils/目录下的table_curd.cljs和tables.cljs - 模板包含功能：
- 多列列表页面（包括自定义列表展示，包含编辑、可选的删除、自定义弹框的操作，可选的新增，首列是图片的树形列表）
- 列表页面按照接口关键字检索
- 详情页面（动态判断新增还是编辑、Form表单常用控件的编辑及提交）
- 动态路由
二、使用
首先建议参考裁圣管理后台中的基础数据菜单下的刺绣位置等。
下面将用裁圣管理后台中刺绣字体菜单及功能为示例，介绍使用流程。
1. 页面功能及Rest接口
明确页面功能及需要的数据来源，肯定是所有前端工作的起始。
这里将使用裁圣管理后台中已经完成的刺绣字体页面进行改造，相对应的页面和接口都是很完备的。而如果是新页面，也是类似的，不过需要明确需求和用Swagger等工具提前调试好接口。
刺绣字体列表页
2. 创建列表页面
根据上面刺绣字体的需求，需要提供路由、标题、表头字段及接口字段
在刚才的文件里，添加代码
;;; 刺绣字体页面
(def ^:private embroidery-font-route
(gen-page-routes {:father "/base-data"
:name "embroidery-font"
:title "刺绣字体"
:row-id "font_id"
:meta-list-data {:title ["图片" "名称" "编码" "排序"]
:input-type [:img :txt :txt :txt]
:key [:font_image :font_name :font_code :show_order]}
:meta-detail-data {:title ["名称" "编码" "排序" "图片"]
:key [:font_name :font_code :show_order :font_image]
:input-type [:txt :txt :num :img]
:required [true false true true]}
:urls {:query-list {:method :get :api "/admin/embroidery/font/list"}
:delete-item {:method :delete :api "/admin/embroidery/font/remove/"}
:update-item {:method :post :api "/admin/embroidery/font/post_font"}
:add-item {:method :post :api "/admin/embroidery/font/post_font"}}}))
说明：
:fater——制定刺绣字体页面的路由路径的父级是基础数据,/base-data:name——指定刺绣字体列表页面的路由路径:title——指定标题刺绣字体:row-id—— 列表数据中，每一条数据的id，一般也是数据库主键，单独指定是因为他并不需要显示在列表上:meta-list-data——map数据类型，用于定义列表页表头及显示:title——vector类型，包含表头除操作的所有:input-type——vector类型，每一列显示的数据的展示形式，:img是图片，:txt是文本:key——vector类型，每一列数据对应接口的字段名的keyword形式:meta-detail-data——map类型，用于定义详情页面:title :input-type :key—— 跟meta-list-data一样:required——vector类型，是否必填:urls——map类型，包含页面需要的增删改查接口:query-list—— 列表查询接口:delete-item—— 列表项删除接口:updata-item—— 详情更新接口:add-item—— 详情页新增接口
定义好了刺绣字体页面，接下来就可以查看页面了
应用模板的刺绣字体页面
应用模板的刺绣字体详情页面
这里测试了增删改查，还遗留一个问题，就是不能编辑，因为接口定义的编辑时所需的id在body里，不在路径。
所有的接口相关的注意事项，在后面的章节会统一介绍。
！！！以上就完成了模板应用，成功完成了刺绣字体页面！！！
三、模板参数说明
- :father String，上级路由，父路由
- :name String，路由字段
- :title String，页面标题
- :row-id String，主键id
- :search-condition Vector，在列表页面添加搜索功能，目前仅支持按照关键字检索接口字段;每个item都是一个检索条件;其他待开发
- :key Vector，接口字段的keyword
- :title String，检索框内hit
- :meta-list-data Map，列表页数据结构
- :title String，表头列名
- :key Vector，接口对应的keyword形式
- :input-type 列表项类型
- :img 图片，只有该类型，在列表第一列时，才支持树形列表结构
- :txt 文字
- :time 时间(格式："YYYY/MM/DD")
- :meta-detail-data Map，详情页数据结构
- :title String，FormItem显示标签
- :input-type Vector，列表项类型
- :img 图片
- :txt 文字
- :num 数字(最小值0，最大值1000，暂时不支持自定义范围)
- :txtarea textarea
- :switch 开关
- :cascader 单选级联，使用select-data-coll里的数据作为数据源
- :tree-select 多选级联，使用select-data-coll里的数据作为数据源
- :select 单选列表非级联，，使用select-data-coll里的数据作为数据源
- :required Vector，是否必填
- :format-key Map,针对接口数据进行数据转换，以适应展示需求
- 每个k是接口字段的关键字；每个对应的value 是一个函数，用于提供转化逻辑
- :select-data-coll Vector类型，级联单选数据源列表
- :key 数据源关键字与meta-detail-data里key字段对应
- :type 数据来源
- :net 需要网络获取，此时：value字段是接口地址；
- :local 直接从:value里面取
- :value 数据
- :type是:net时，是一个String，表示接口地址
- :type是:local时，是一个Vector
- :value 提交值，后台定义
- :lable 标签，列表显示
- :modal-window Map，列表操作弹窗数据，有该字段时在列表的操作列里增加一个弹窗选项
- :btn-name String，按钮title
- :open-event Keyword，弹出弹窗时需要的event
- :modal-view 组件，弹窗视图
- :urls Map，接口；每项的value都包含接口地址（:api）和接口Method（:method）,目前支持三种Method（:get/:post/:delete）
- :query-list 查询接口
- :delete-item 删除接口, 该字段控制是否显示删除按钮
- :update-item 更新接口
- :add-item 新增接口
四、接口注意事项
- 列表查询接口返回的数据中，data字段可以直接返回数组，或者包裹在 list 字段里.如
data: [...]
或
data: {
list:[...]
}
- 接口类型支持：GET/POST/DELETE
- 单选级联和多选级联数据结构接口数据，需要按照如下格式：
[
{lable:
value:
children: [{lable: value:}...]}
]
- 表单提交接口参数字段类型，需要跟表单输入控件类型一致
- 提交和删除等需要指定id的接口，id需要在路径里
- 增删改查等每个接口干特定的事儿，不混用
- switch开关的值，使用"1"表示开(true)，"0"表示关(false)