收藏人数:
下载插件并导入HBuilderX
赞赏（0）
更新记录
1.0.0（2024-01-02） 下载此版本
首次发布
平台兼容性
| Vue2 | Vue3 |
|---|---|
| √ | √ |
| App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| HBuilderX 3.99 | × | × | × | × | × | × |
| 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
|---|---|---|---|
| × | × | × | × |
| H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
|---|---|---|---|---|---|---|---|---|
| × | × | × | × | × | × | × | × | × |
dao-amis-ui
引用网络amis源
<!-- 国内镜像 -->
<link rel="stylesheet" href="https://unpkg.zhimg.com/amis@3.4.2/sdk/sdk.css" />
<script type="module" src="https://unpkg.zhimg.com/amis@3.4.2/sdk/sdk.js"></script>
<!-- 国外镜像 -->
<link rel="stylesheet" href="https://unpkg.com/amis@3.4.2/sdk/sdk.css" />
<script type="module" src="https://unpkg.com/amis@3.4.2/sdk/sdk.js"></script>防止出现纵向不饱满的情况出现
// app.vue
<style lang="scss">
// ★★★ 工作区100%高度，为了隐藏内容不饱和时显示的滚动条 ★★★
.cxd-Layout-content {
height: 100% !important;
}
</style>
// 需要的页面上
<style lang="scss" scoped>
// ★★★ 工作区100%高度，为了隐藏内容不饱和时显示的滚动条，当前页面生效 ★★★
uni-app, uni-page, uni-page-wrapper, uni-page-body{
height: calc(100vh - (var(--top-window-height)));
}
</style>可以配合dao-base-3中的样式使用
配置调试参数
"debug": true,
"debugConfig": {
"enableClipboard": true,
"displayDataTypes": true
},ajax拦截器，调用jql|云对象|云函数|http|upload|download
jql
['get|select', 'add|insert', 'update', 'remove|delete']
{
"initApi | api | source | receiver | schemaApi": {
"method":"get|post", // ★★★ 这个很重要直接关系到数据的传递方式query|data ★★★
"url":"get?",
"dao":{ // 扩展内容全部放在dao节点下
"type":"jql",
"method":"[get|select] | [add|insert] | update | [remove|delete]", // 如果分页就得是get
"name":"string" || [{
"name":"string",
"method":"[get|select] | [add|insert] | update | [remove|delete]",
"doc":"",
"where":"",
"field":"必须定义",
... // 其他jql
},...],
"doc":"",
"where":"",
"field":"必须定义,字段1,字段2...",
"searchFields":"快速查询字段,...", // 也可以是数组
"count": false, // 默认不统计,
"tree": false, // 默认不是树形结构,
"rows": false,// rows|items,
"pageSize": 8, // 每页多少条记录，默认8条
... // 其他jql
},
"data": {
xxx
},
... // 其他配置
}
}通过公式转换分页limit=${perPage}&offset=${(page - 1) * perPage}
如果jql不能满足要求采用云对象|云函数
云对象
{
"api | initApi | receiver": {
"method": "post", // ★★★ 这里还是比较关键的基本都是post请求 ★★★
"url":"co",
"dao":{ // 扩展内容全部放在dao节点下
"type":"co",
"name":"云对象名",
"method":"云对象方法",
},
"data": {
xxx
},
... // 其他配置
}
}云函数
{
"api | initApi | receiver": {
"method": "post", // ★★★ 这里还是比较关键的基本都是post请求 ★★★
"url":"cf",
"dao":{ // 扩展内容全部放在dao节点下
"type":"cf",
"name":"云函数名"
},
"data": {
xxx
},
... // 其他配置
}
}http
{
"api | initApi | receiver": {
"method":"get",
"url":"外部url",
"dao":{ // 扩展内容全部放在dao节点下
"type":"http",
"name":"外部请求"
},
"data": {
xxx
},
... // 其他配置
}
}upload
包含文件和图片的存储 保存完毕后记录fileid，以便失败后删除垃圾数据
{
"api | initApi | receiver": {
"url":"upload",
"dao":{ // 扩展内容全部放在dao节点下
"type":"upload"
},
"data": {
xxx
},
... // 其他配置
}
}查询类的操作首选jql、次选云对象、再次云函数，服务器运营的操作首选云对象、次选云函数
service 动态渲染表单
service -> schemaApi
{
"status": 0,
"msg": "",
"data": {
"type": "container",
"body": [
{
"type": "input-text",
"name": "text",
"label": "文本输入"
}
]
}
}- 定时轮询
page页面初始请求
- initApi
- "interval": 3000,
nav
- source
颜色尺码
当前日期时间
{
"type": "page",
"body": {
"type": "service",
"dataProvider": "const timer = setInterval(() => { setData({date: new Date().toString()}) }, 1000); return () => { clearInterval(timer) }",
"body": {
"type": "tpl",
"tpl": "现在是：${date}"
}
}
}page示例：左上下结构
{
"type": "page",
"title": "功能名称",
"remark": {
"title": "V1.0.0",
"body": "该功能主要作用是",
"placement": "right",
"shape": "circle"
},
"regions": [
"header",
"toolbar",
"aside",
"body"
],
"aside": [
{
"type": "tpl",
"tpl": "这是侧边栏部分"
}
],
"toolbar": [
{
"type": "tpl",
"tpl": "这是工具栏部分"
}
],
"body": [
{
"type": "tpl",
"tpl": "这是内容区"
}
]
}page示例：上左右结构
{
"type": "page",
"title": "功能名称",
"remark": {
"title": "V1.0.0",
"body": "该功能主要作用是",
"placement": "right",
"shape": "circle"
},
"regions": [
"header",
"toolbar",
"body"
],
"toolbar": [
{
"type": "tpl",
"tpl": "这是工具栏部分"
}
],
"body": [
{
"type": "page",
"regions": [
"aside",
"body"
],
"asideResizor": true,
"aside": [
{
"type": "tpl",
"tpl": "这是侧边栏部分"
}
],
"body": [
{
"type": "tpl",
"tpl": "这是内容区"
}
]
}
]
}page示例：上下结构
{
"type": "page",
"title": "功能名称",
"remark": {
"title": "V1.0.0",
"body": "该功能主要作用是",
"placement": "right",
"shape": "circle"
},
"regions": [
"header",
"toolbar",
"body"
],
"toolbar": [
{
"type": "tpl",
"tpl": "这是工具栏部分"
}
],
"body": [
{
"type": "tpl",
"tpl": "这是内容区"
}
]
}新增清除数据
"data": {
"&": "$$",
"status": "__undefined"
},更新的两种写法
"data": { // 一种写法
"_id": "$_id"
},
"api":{
"dao":{
...
},
"data": { // 二种写法
"&": "$$",
"_id": "$_id"
}
}权限管理为例注释
{
"type": "page",
"title": "权限管理",
"remark": {
"title": "V1.0.0",
"body": "该功能主要作用是",
"placement": "right",
"shape": "circle"
},
"regions": [
"header",
"toolbar",
"body"
],
"toolbar": [{
"type": "button",
"actionType": "dialog",
"label": "新增",
"icon": "fa fa-plus pull-left",
"primary": true,
"dialog": {
"title": "新增",
"body": {
"type": "form",
"name": "sample-edit-form",
"autoFocus": true,
"api": "post:/amis/api/sample",
"body": [{
"type": "input-text",
"name": "engine",
"label": "Engine",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "browser",
"label": "Browser",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "platform",
"label": "Platform(s)",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "grade",
"label": "CSS grade"
}
]
}
}
}],
"body": [{
"type": "page",
"regions": [
"aside",
"body"
],
"asideResizor": true,
"aside": {
"type": "form",
"target": "permCrud",
"wrapWithPanel": false,
"submitOnInit": true,
"body": [{
"type": "input-tree",
"name": "identity",
"inputClassName": "no-border",
"submitOnChange": true,
"selectFirst": true,
"options": [{
"label": "平台权限",
"value": "0"
},
{
"label": "商户权限",
"value": "1"
},
{
"label": "服务商权限",
"value": "2"
},
{
"label": "供应商权限",
"value": "3"
}
]
}]
},
"body": {
"type": "crud",
"name": "permCrud",
"primaryField": "_id",
"api": {
"dao": {
"type": "jql",
"method": "get",
"name": "uni-id-permissions",
"field": "permission_id,permission_name,parent_id,identity,comment,create_date,update_date",
"searchFields": "permission_id,permission_name,comment",
"pageSize": 10,
"count": true,
"rows": false,
"tree": true
},
"url": "jql"
},
"headerToolbar": [
"reload",
"bulkActions",
{
"type": "columns-toggler",
"className": "pull-right",
"align": "right"
},
{
"type": "search-box",
"align": "right",
"name": "keywords",
"clearable": true,
"placeholder": "请输入关键字"
},
{
"type": "drag-toggler",
"align": "right"
},
{
"type": "pagination",
"align": "right"
}
],
"bulkActions": [{
"type": "button",
"label": "批量删除",
"confirmText": "确定要批量删除?",
"actionType": "ajax",
"api": {
"dao": {
"type": "jql",
"method": "delete",
"name": "uni-id-permissions",
"where": "_id in ${ids}"
},
"url": "deleteall",
"data": {
"ids": "$ids"
}
}
}],
"columns": [{
"name": "permission_id",
"label": "权限ID",
"type": "text",
"sortable": true,
"copyable": true,
"toggled": true,
"remark": "Bla bla Bla"
},
{
"name": "permission_name",
"label": "权限名称",
"type": "text",
"sortable": true,
"searchable": true,
"toggled": true
},
{
"name": "parent_id",
"label": "上级ID",
"type": "text",
"sortable": true,
"toggled": false
},
{
"name": "identity",
"label": "适用身份",
"sortable": true,
"toggled": true,
"type": "mapping",
"map": {
"0": "<span class='label label-info'>平台</span>",
"1": "<span class='label label-success'>商户</span>",
"2": "<span class='label label-danger'>服务商</span>",
"3": "<span class='label label-warning'>供应商</span>",
"*": "其他：${identity}"
}
},
{
"name": "comment",
"label": "说明",
"type": "text",
"toggled": true
},
{
"name": "create_date",
"label": "创建日期",
"sortable": true,
"type": "static-date",
"valueFormat": "x",
"format": "YYYY/MM/DD HH:mm:ss"
},
{
"name": "update_date",
"label": "修改日期",
"type": "static-date",
"valueFormat": "x",
"format": "YYYY/MM/DD HH:mm:ss",
"sortable": true,
"toggled": false
},
{
"type": "operation",
"label": "操作",
"width": 114,
"fixed": "right",
"buttons": [{
"type": "button",
"icon": "fa fa-eye",
"actionType": "dialog",
"tooltip": "查看本项",
"dialog": {
"title": "查看本项",
"body": {
"type": "form",
"body": [{
"type": "static",
"name": "permission_id",
"label": "权限ID"
},
{
"type": "divider"
},
{
"type": "static",
"name": "permission_name",
"label": "权限名称"
},
{
"type": "divider"
},
{
"type": "static",
"name": "parent_id",
"label": "上级ID"
},
{
"type": "divider"
},
{
"type": "static-mapping",
"name": "identity",
"label": "适用身份",
"map": {
"0": "<span class='label label-info'>平台</span>",
"1": "<span class='label label-success'>商户</span>",
"2": "<span class='label label-danger'>服务商</span>",
"3": "<span class='label label-warning'>供应商</span>",
"*": "其他：${identity}"
}
},
{
"type": "divider"
},
{
"type": "static",
"name": "comment",
"label": "说明"
},
{
"type": "divider"
},
{
"type": "static-date",
"name": "create_date",
"label": "创建日期",
"valueFormat": "x",
"format": "YYYY/MM/DD HH:mm:ss"
}
]
}
}
},
{
"type": "button",
"icon": "fa fa-plus",
"tooltip": "增加本项",
"actionType": "drawer",
"drawer": {
"position": "left",
"size": "md",
"resizable": true,
"title": "增加本项"
}
},
{
"type": "button",
"icon": "fa fa-pencil",
"tooltip": "编辑本项",
"actionType": "drawer",
"drawer": {
"position": "left",
"size": "lg",
"title": "编辑本项",
"body": {
"type": "form",
"name": "sample-edit-form",
"autoFocus": true,
"api": {
"dao": {
"type": "jql",
"method": "update",
"name": "uni-id-permissions",
"doc": "_id"
},
"url": "update",
"data": {
"&": "$$",
"_id": "$_id"
}
},
"messages": {
"saveFailed": "保存失败"
},
"body": [{
"type": "static",
"name": "permission_id",
"label": "权限ID"
},
{
"type": "input-text",
"name": "permission_name",
"label": "权限名称",
"required": true
},
{
"type": "static",
"name": "parent_id",
"label": "上级ID"
},
{
"type": "list-select",
"name": "identity",
"label": "适用身份",
"required": true,
"multiple": true,
"joinValues": false,
"extractValue": true,
"options": [{
"label": "平台",
"value": "0"
},
{
"label": "商户",
"value": "1"
},
{
"label": "服务商",
"value": "2"
},
{
"label": "供应商",
"value": "3"
}
]
},
{
"type": "textarea",
"name": "comment",
"label": "权限说明"
}
]
}
}
},
{
"type": "button",
"icon": "fa fa-xmark text-danger",
"tooltip": "删除本项",
"visibleOn": "${ISTYPE(children,'array')}",
"confirmText": "您确认要删除此权限么?",
"actionType": "ajax",
"api": {
"dao": {
"type": "jql",
"method": "delete",
"name": "uni-id-permissions",
"doc": "_id"
},
"url": "?_id=$_id",
"data": {
"_id": "$_id"
}
}
},
{
"type": "button",
"icon": "fa fa-indent",
"tooltip": "增加子级",
"actionType": "drawer",
"drawer": {
"position": "left",
"size": "md",
"resizable": true,
"title": "增加子级"
}
}
]
}
]
}
}]
}tag 两种方式
"items": {
"type": "tpl",
"tpl": "<span class='label label-info m-l-sm'><%= data.permission_name %></span>"
}
"items": {
"type": "tag",
"label": "${permission_name}",
"color": "processing"
}根据条件请求
{
"type": "service",
"data": {
"type": "${ls:currentType|default:undefined}"
},
"body": [
{
"type": "service",
"schemaApi": {
"method": "get",
"url": "/amis/api/mock2/service/schema?type=controls",
"sendOn":"${type=='weixin'}"
}
},
{
"type": "service",
"schemaApi": {
"method": "get",
"url": "/amis/api/mock2/service/schema?type=controls",
"sendOn":"${type==undefined}"
}
}
]
}
下载 2740
赞赏 0
下载 8955982
赞赏 1300
赞赏
京公网安备：11010802035340号