Skip to content

vk-unicloud-admin
vk-unicloud-admin

vk-uni / vk-unicloud-admin
11 个月 前同步成功

通知 0
Star 0
Fork 0
vk-unicloud-admin
vk-unicloud-admin

体验新版 GitCode，发现更多精彩内容 >>

提交 74254b81 编写于 作者: VK1688's avatar VK1688
浏览文件
操作

1.8.3

上级 dc83c8bb
展开全部 隐藏空白更改
内联 并排
Showing with 26 addition and 3636 deletion
README/1.8/1.8.3.md 0 → 100644
浏览文件 @ 74254b81
* 1、【升级】`vk-unicloud-admin-ui` 包升级至 `1.8.5`
* 2、【优化】一些细节
*
##### 框架更新步骤 [点击查看](https://vkdoc.fsq.pub/admin/1/update.html)
##### 框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架
##### 如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。
changelog.md
浏览文件 @ 74254b81
## 1.8.3（2021-12-04）
* 1、【升级】`vk-unicloud-admin-ui` 包升级至 `1.8.5`
* 2、【优化】一些细节
*
##### 框架更新步骤 [点击查看](https://vkdoc.fsq.pub/admin/1/update.html)
##### 框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架
##### 如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。
## 1.8.2（2021-12-01）
* 1、【升级】`vk-unicloud-admin-ui` 包升级至 `1.8.5`
* 2、【升级】`element-ui` 包升级至 `2.15.7`
......
package.json
浏览文件 @ 74254b81
{
"id": "vk-unicloud-admin",
"name": "vk-unicloud-admin",
"version": "1.8.2",
"version": "1.8.3",
"displayName": "【开箱即用】vk-unicloud-admin-快速开发框架-打造unicloud最好用的admin",
"description": "vk-unicloud-admin是基于unicloud+uni-id+element+vk-unicloud-router的一套快速PC admin完整开发框架。小白几分钟即可完成一个页面CRUD。",
"description": "vk-unicloud-admin是基于unicloud+uni-id+element+vk-unicloud-router的一套快速PC admin企业级开发框架。小白几分钟即完成一个页面CRUD。",
"keywords": [
"vk-unicloud-admin",
"支持表单可视化拖拽生成代码",
......
pages.json
浏览文件 @ 74254b81
......@@ -94,7 +94,7 @@
"globalStyle": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "【开箱即用】vk-unicloud-admin-快速开发框架-打造unicloud最好用的admin",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
......
使用帮助/0、此处的文档已不更新，请直接看官网文档.md 0 → 100644
浏览文件 @ 74254b81
# 此处的文档已不更新，请直接看官网文档
[官网地址](https://vkdoc.fsq.pub/admin/)
\ No newline at end of file
使用帮助/10、强制重置admin账号密码.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 如何强制重置admin账号密码？
#### 1、在`uniCloud/cloudfunctions/router/service/user/pub/`目录新建 `forceResetAdminPassword.js` 文件
#### 将下方的代码全部复制到新建的文件内
```js
module.exports = {
/**
* 强制重置admin密码
* @url user/pub/forceResetAdminPassword 前端调用的url参数地址
*/
main: async (event) => {
let { data = {}, util, filterResponse, originalParam } = event;
let { customUtil, uniID, config, pubFun, vk, db, _ } = util;
let { uid } = data;
let res = { code: 0, msg: "" };
// 业务逻辑开始-----------------------------------------------------------
let params = {
username: "admin",
password: "123456"
};
let userInfo = await vk.baseDao.findByWhereJson({
dbName: "uni-id-users",
whereJson: {
username: params.username,
}
});
if (!userInfo) {
return { code: -1, msg: `${params.username}账号未注册` };
}
// 重置密码
res = await uniID.resetPwd({
uid: userInfo._id,
password: params.password
});
if(res.code === 0){
res.msg = `密码已重置为：${params.password}`;
}
// 业务逻辑结束-----------------------------------------------------------
return res;
}
}
```
#### 2、将下方的代码全部复制到`uniCloud/cloudfunctions/router/router.param.json`文件内（如果没有此文件则新建）
```js
{
"uni_id_token":"",
"$url":"user/pub/forceResetAdminPassword",
"data":{
}
}
```
#### 3、右键`uniCloud/cloudfunctions/router`目录，点击本地运行云函数
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/fa4f4355-21d1-49c7-b97a-0d74f02a6715.png)
#### 4、当看到控制显示密码已重置为`123456`时，则代表重置成功。
#### 5、重置成功后，请立即删除刚刚创建的 `uniCloud/cloudfunctions/router/service/user/pub/forceResetAdminPassword.js` 文件（如不删除，会有安全隐患）
```js
其中 `uniCloud/cloudfunctions/router/router.param.json` 这个文件没有必要删除。
```
\ No newline at end of file
使用帮助/11、不同端用户隔离.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 不同端用户隔离
#### [1、实现逻辑](#一)
#### [2、数据库](#二)
#### [3、应用管理](#三)
#### [4、添加应用（重要）（重要）（重要）](#四)
#### [5、隔离不同端配置](#五)
#### [6、补齐用户dcloud_appid字段](#六)
### 一
### 实现逻辑
#### 用户表新增了 `dcloud_appid` 字段，类型是字符串数组，用来控制该用户可登录的应用列表。
#### 在admin左侧菜单 用户角色权限 - 应用管理 中可管理当前的应用列表。
##### 如指定哪个应用是用户端，哪个是管理端。（应用管理中的appid为uniapp项目的manifest.json文件内的appid）
##### 官方建议：`DCloud Appid`是一个很重要的配置，如无必要请勿随意更换。(在这个用户隔离逻辑下，更换后会导致用户无法登录)
### 二
### 数据库 - 应用表字段
#### 表名：`opendb-app-list`
| 字段名 | 字段说明 | 字段类型 |
|------- |-----------|---------|
| _add_time | 记录添加时间 | time |
| appid | 应用的AppID | String |
| type | 应用类型 如 admin、client、rider、business （可自定义） | String |
| name | 应用名称 如 管理端、用户端、骑手端、商家端（可自定义） | String |
| description | 应用描述 | String |
| create_date | 创建时间 | time |
### 三
### 应用管理
#### 框架内置了应用管理，1.4.0之前的版本没有内置，需要手动添加
#### 手动添加方法
##### 1、下载最新版admin框架[点击下载](https://ext.dcloud.net.cn/plugin?id=5043)
##### 2、复制新下载的项目根目录下的`pages_plugs`目录（全部）到你原本的框架内
##### 3、复制云函数`\router\service\admin\system`目录（全部）到你原本的框架内
##### 4、项目根目录`pages.json`的 `pages_plugs`子包添加代码 `{ "path": "system/app/list" },`
##### 5、在菜单管理导入菜单（选择数组结构）
##### JSON内容为：
```js
[
{
"_id": "sys-app-manage",
"_add_time": 1596416400000,
"menu_id":"sys-app-manage",
"name": "应用管理",
"icon":"el-icon-cloudy",
"url": "/pages_plugs/system/app/list",
"comment":"应用管理",
"sort": 5,
"parent_id":"sys-admin",
"enable":true
}
]
```
### 四
### 添加应用（重要）
#### 因为每个人的 `DCloud Appid`是不一样的，所以你需要在应用管理中添加自己的应用（或直接修改内置的2条数据的appid即可）
#### `DCloud Appid` 获取方法
#### 复制`uniapp`项目根目录的`manifest.json`文件内的`appid`
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/e717232f-0f18-4dee-8437-5dec2c224920.png)
### 五
#### （此步骤可忽略）隔离不同端配置（一般无必要，如有必要，可以这么做）
#### （除非你确定要隔离配置，否则建议保持原来的配置方案即可）
#### 将`uni-id` 的`config.json`配置成数组形式（下方配置并非完全版，请勿直接复制）
##### "dcloudAppid": "__UNI__xxxx1", // 务必替换为对应项目manifest.json内的DCloud Appid
##### "isDefaultConfig": true, // 默认配置标记，未匹配到dcloudAppid的情况下使用默认配置
```json
[{
"dcloudAppid": "__UNI__xxxx1",
"isDefaultConfig": true,
"passwordSecret": "passwordSecret-demo",
"tokenSecret": "tokenSecret-demo",
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 600,
"app-plus": {
"tokenExpiresIn": 2592000,
"oauth": {
"weixin": {
"appid": "weixin appid",
"appsecret": "weixin appsecret"
}
}
}
}, {
"dcloudAppid": "__UNI__xxxx2",
"passwordSecret": "passwordSecret-demo",
"tokenSecret": "tokenSecret-demo",
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 600,
"app-plus": {
"tokenExpiresIn": 2592000,
"oauth": {
"weixin": {
"appid": "weixin appid",
"appsecret": "weixin appsecret"
}
}
}
}]
```
### 六
### 补齐用户dcloud_appid字段
#### uni-id在3.3.0提供了根据客户端appid（项目manifest.json内配置的DCloud Appid）隔离不同用户的功能
#### 旧版本的uni-id在注册用户时并未将当前客户端的appid存储在用户的记录内
#### 更新到新版后这些没有dcloud_appid字段的用户和之前一样可以登录所有端。
#### 开发者使用云函数本地运行可以自行对用户数据进行修补，为用户创建dcloud_appid字段
[点击查看官方文档](https://uniapp.dcloud.net.cn/uniCloud/uni-id?id=makeup-dcloud-appid)
使用帮助/1、关于admin框架.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
### `vk-unicloud-admin`框架研究Q群:22466457 如有问题或建议可以在群内讨论。
### 插件名称：`vk-unicloud-admin`
### 作者：VK
## 什么是 `vk-unicloud-admin` ？
#### `vk-unicloud-admin` 是基于 `unicloud` + `uni-id` +`element` + `vk-unicloud-router` 的一套快速`PC admin`完整开发框架
#### （只兼容PC，只为PC admin而生）
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/6deebd32-8075-4bdb-8e04-5839516ef4f4.png)
## 与官方 `unicloud-admin` 的关系？
#### 没有太大关系，用户在此框架上的编码风格与 `unicloud-admin` 差别较大。但框架兼容 `unicloud-admin`
## 已经有了官方的 `unicloud-admin`，为什么还要出 `vk-unicloud-admin`，Ta的优势是什么 ？
#### 1、完美集成 `vk-unicloud-router`，拥有`vk-unicloud-router`的所有现成API功能。让你开发事半功倍。[点击查看](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=2912162&doc_id=975983)
#### 2、完美集成 `element` UI框架，并在 `element` 基础上进行了深度封装（支持原生`element`）[element官网](https://element.eleme.cn/#/zh-CN/component/button)
#### 3、`表单可视化拖拽工具`（可直接生成`vk框架代码`和`element`原生代码 [点击体验](https://vkunicloud.fsq.pub/vk-form-visualizer/)
#### 4、`万能表格组件`，通过少量代码即可完成`CRUD`，且同时还拥有较高的自由度。几分钟完成一个页面`CRUD`。
#### 5、`万能表单组件`，通过少量代码即可完成表单渲染 + 表单请求。
#### 6、完善的用户角色权限，无需开发即可拥有（权限可精确到每一个云函数）。
#### 7、`pages-dev.json`机制，开发调试页面不会被发布到正式版中。
#### 8、只要你开发过传统`vue admin`项目，那么上手此框架的学习成本几乎为0
#### 9、众多示例代码，为你的云开发之路扫平障碍。
#### 10、群内众多开发者，关于框架使用问题几乎有问必答。Q群：22466457
#### 11、更多功能敬请体验。
## 目前 admin 框架内置了以下页面
#### 1、用户管理
#### 2、角色管理
#### 3、权限管理
#### 4、菜单管理
#### 5、应用管理
#### 6、系统缓存管理
#### 7、动态组件数据
#### 8、用户登录日志
#### 9、系统操作日志
#### 10、VK框架组件演示
#### 11、element静态功能演示
#### 12、素材管理（图片、视频、文件）
#### 13、持续完善中。。。
使用帮助/1、快速上手 - 安装步骤.md 0 → 100644
浏览文件 @ 74254b81
# 快速上手 - 安装步骤
## 此处的文档已不更新，请直接看官网文档
[文档地址](https://vkdoc.fsq.pub/admin/1/quickstart.html)
\ No newline at end of file
使用帮助/2、快速上手 - 安装步骤.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
# 快速上手
### 1、下载uniapp插件市场的 `vk-unicloud-admin` 项目
### 2、`项目根目录` 执行 `npm i` 命令
### 接下来是后端（云函数端）安装步骤
### 通常一个完整的项目分为`client端`（客户端）、`admin端`（管理端）、`service端`（服务端，这里指云函数端）
#### 这里需要分三种情况
#### [第一种](#一)：你之前已经在用 `vk-unicloud-router` 框架开发H5、小程序、APP的开发者。
#### [第二种](#二)：你之前是用别的框架开发H5、小程序、APP，现在只想用VK框架单独开发 admin 项目。
#### [第三种](#三)：你的项目刚开始，`client端`和`admin端`都还没开发。
### 一
### 情况一
#### 思路：因为云函数会互相覆盖，因此我们可以把 `service端（云函数端）` 统一放在 `client端`的项目中，而`admin端`项目 直接绑定`client端`项目
#### 安装步骤：
##### 1、把`admin端` 内的 `uniCloud/router/service/admin`内的以下文件复制到你之前的`client端`项目 `uniCloud/router/service/admin`内（复制整个目录）
##### 2、把`admin端` 内的 `uniCloud/database/db_init/`目录下的3个数据库表数据导入对应的表内（导入方法：服务空间后台 - 数据库 - 导入）
```js
uni-id-roles 角色表
uni-id-permissions 权限表
opendb-admin-menus 菜单表
```
##### 3、把`admin端`的服务空间直接绑定`client端`项目（注意是`绑定`不是`关联`）（注意是`绑定`不是`关联`）（注意是`绑定`不是`关联`）
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/98c6961a-22c8-4d61-833f-f558d848b0e5.png)
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/8a9406fd-ff00-48d4-b1fe-6e133c2bf13a.png)
##### 4、把`admin端` 内的 `components/vk-data-input-editor`目录复制到你之前的`client端`项目 `components`目录内（没有`components`目录则新建）
##### 5、完成
### 二
### 情况二
#### （已完成情况一的请直接跳过情况二和情况三）
#### 安装步骤：
##### 1、在`项目根目录` 目录执行 `npm i`
##### 2、右键`uniCloud`目录 点击 `运行云服务空间初始化向导`
##### 3、完成
### 三
### 情况三
#### 安装步骤：
##### 建议你先使用`vk-unicloud-router`框架进行`client端`开发，`client端`开发完成后，使用 `vk-unicloud-admin` 开发 `admin端`
##### 当然你也可以先开发 `admin端`，再开发 `client端`。
##### 如果先开发`admin端`，则直接用`情况二`的安装步骤即可。
##### 如果先开发`client端`，则先下载`client端`开发框架，等`client端`开发完后再用`情况一`的安装步骤即可 [点击前往下载client端开发框架](https://ext.dcloud.net.cn/plugin?id=2204)
## 初始admin账号密码：123456
### 如密码错误，可以强制重置admin账号密码
### [点击查看『强制重置admin账号密码步骤』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4064984&doc_id=975983)
### 安装代码快捷提示步骤
#### 1、将`根目录/使用帮助/代码快捷提示/javascript代码块提示.json` 内的代码 复制到 hbx 工具 - 代码块设置 - javascript代码块
#### 2、将`根目录/使用帮助/代码快捷提示/vue代码块提示.json` 内的代码 复制到 hbx 工具 - 代码块设置 - vue代码块
### 其他
#### 删除 `pages.json`内的`pages_template/components`和`pages_template/element`分包（此为发布演示版本需要而加，你的项目可以删除，删除后开发模式下依然存在（因为在`pages-dev.json`中配置了），发布到线上环境时自动屏蔽）
### 若提示上传云函数失败，请仔细对比下你的项目`uniCloud/common`目录是否跟下图完全一致
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/da1c3ccc-b6bf-4792-b3a7-7208b1020c7d.png)
#### 如果不一致，特别是`uni-id` 目录下没有这个文件`uni-id/node_modules/uni-config-center/uni-id/config.json`，则在`uni-id`目录执行 `npm i` 试试（如果有这个`uni-id/node_modules`目录，先删除目录，再执行npm i）
#### 如有疑问，请加群：22466457 关于插件的问题包教包会！
使用帮助/3、admin框架目录结构.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
### 前端（页面）目录结构
```js
.
├── vk-unicloud-admin ──────# 根目录
│ └── common───────────────────# 自定义公共资源
│ └── components───────────────# 自定义全局组件
│ └── node_modules─────────────# node模块
│ └── pages────────────────────# 【重要】页面目录（你开发的页面都写在这个目录内）
│ ── └── index────────────────────# 首页
│ ── └── login────────────────────# 登陆页面
│ ── └── ...──────────────────────# 你的其他页面
│ └── pages_plugs──────────────# 框架内置页面
│ ──└── error─────────────────────# 错误页面
│ ──└── system────────────────────# 用户角色权限菜单
│ ──└── system_uni────────────────# 其他页面
│ └── pages_template───────────# 框架模板示例页面
│ ──└── components────────────────# VK框架内置组件示例
│ ──└── element───────────────────# element原生组件示例
│ ──└── kong──────────────────────# 空页面模板示例
│ └── README───────────────────# 框架更新记录
│ └── static───────────────────# 静态资源目录
│ └── static_menu──────────────# 【重要】静态菜单目录
│ └── store────────────────────# 【重要】vuex目录
│ └── uni_modules──────────────# uni模块
│ └── windows──────────────────# admin窗体（左侧菜单和顶部导航）
│ └── app.config.js────────────# 【重要】全局配置
│ └── App.vue──────────────────# App.vue
│ └── main.js──────────────────# main.js
│ └── pages.json───────────────# 【重要】页面配置
│ └── pages-dev.json───────────# 【重要】只会在开发模式时打包的页面配置
└─────────────────────────────────
```
#### 以上标记为【重要】的目录是你实际开发过程中会经常使用的。
### 后端（云函数）目录结构
[点击查看](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=2912169&doc_id=975983)
### `admin端`的云函数代码写法和`client端`基本一致。
### 建议
#### `admin端` 的云函数全部写在 `service/admin` 目录内
#### `client端` 的云函数全部写在 `service/client` 目录内
#### `公共` 的云函数全部写在 `service/common` 目录内
#### 需要权限的云函数写在 `sys` 目录内 如：`admin/user/sys/add` 、 `client/user/sys/setAvatar`
#### 只需要登录即可请求的云函数写在 `kh` 目录内 如：`client/user/kh/setAvatar`
```js
注意：请求admin目录下的kh目录内的云函数 如：`admin/user/kh/setAvatar`
除了需要登录以外，登录用户的 allow_login_background 需为 true，否则也是无权限。
```
#### 任何人都可以请求的云函数写在 `pub` 目录内 如：`client/user/pub/login`
使用帮助/4、万能表格 - 搜索组件 - vk-data-table-query.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表格搜索组件 `vk-data-table-query`
#### columns属性的写法与万能表单相似(但部分表单组件搜索不支持)
[万能表单文档](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4003878&doc_id=975983)
## template 使用方式
```html
<vk-data-table-query
ref="tableQuery1"
v-model="queryForm1.formData"
:columns="queryForm1.columns"
@search="search"
></vk-data-table-query>
```
## template 使用方式（折叠抽屉弹窗模式）
```html
<vk-data-table-query
ref="tableQuery1"
v-model="queryForm1.formData"
:columns="queryForm1.columns"
:main-columns="['user_id','_add_time']"
@search="search"
></vk-data-table-query>
```
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| v-model | 绑定查询表单数据源 | Object | - | - |
| columns | 字段渲染规则 | Array | - | [查看columns](#columns) |
| show-reset | 是否显示重置按钮 | Boolean | false | true |
| main-columns | 在页面上直接显示的字段名数组，此值若不为空，则会显示高级搜索按钮 | Array | - | - |
| drawer | 高级搜索的抽屉弹窗的属性（详情见element的drawer文档）| Object | - |
| search-text | 搜索按钮的文本 | String | 搜索 | - |
| senior-search-text | 高级搜索按钮的文本 | String | 高级搜索 | - |
### columns
### columns与万能表单的columns相似
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------- |-----------|---------|-------|-------|
| key | 键名 | String | 无 | - |
| title | 标题 | String | 无 | - |
| type | 组件类型 | String | 无 | - |
| width | 组件宽度 | Number | 无 | - |
| placeholder | 输入前的提示 | String | - | - |
| mode | 查询模式 | String | = | [查看mode](#mode) |
| fieldName | 数据库字段名称，默认=key的值 | String | key的值 | - |
| lastWhereJson | 是否是连表后的where条件 | Boolean | false | true |
| hidden | 是否隐藏该字段 | Boolean | false | true |
| show | 显示规则,page代表显示在页面上，drawer代表显示在高级搜索中 | Array | ["page"] | ["page","drawer"] |
#### mode
#### columns 中 mode 参数详情
| 值 | 说明
|------------|-------------------|
| = | 完全匹配 |
| != | 不等于 |
| %% | 模糊匹配 |
| %* | 以xxx开头 |
| *% | 以xxx结尾 |
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| in | 在数组里 |
| nin | 不在数组里 |
| [] | 范围 arr[0] <= x <= arr[1] |
| [) | 范围 arr[0] <= x < arr[1]|
| (] | 范围 arr[0] < x <= arr[1] |
| () | 范围 arr[0] < x < arr[1] |
\ No newline at end of file
使用帮助/4、万能表格 - vk.baseDao.getTableData.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## vk.baseDao.getTableData
#### 用法与vk.baseDao.selects相似，区别是 vk.baseDao.getTableData 多了一个data参数
[vk.baseDao.selects万能连表文档](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=3028633&doc_id=975983)
### data参数详解
#### data参数的作用是让前端可以直接传查询条件和排序条件。同时为了控制安全性，getTableData的whereJson参数可以设置强制where条件
#### Ta的优势是：
##### 1、条件查询很方便，且减少了很多代码量。
##### 2、在云函数端写强制条件，不用担心用户看到不该看的数据。
##### 3、代码结构比较清晰，容易阅读与理解。
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| pageIndex | 第几页 | Number | 1 | - |
| pageSize | 每页查询数量 | Number | - | - |
| sortRule | 排序规则 | Array | - | - |
| formData | 查询条件数据源 | Object | - | - |
| columns | 静态模式 - 总记录数 | Array | - | - |
#### mode
#### columns 中 mode 参数详情
| 值 | 说明
|------------|-------------------|
| = | 完全匹配 |
| != | 不等于 |
| %% | 模糊匹配 |
| %* | 以xxx开头 |
| *% | 以xxx结尾 |
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| in | 在数组里 |
| nin | 不在数组里 |
| [] | 范围 arr[0] <= x <= arr[1] |
| [) | 范围 arr[0] <= x < arr[1]|
| (] | 范围 arr[0] < x <= arr[1] |
| () | 范围 arr[0] < x < arr[1] |
```js
// 通常data是前端传过来的数据
let data = {
pageIndex:1,
pageSize:20,
sortRule:[
{ name:"_add_time", type:"desc" }
],
formData:{
},
columns:[
{ key:"nickname", title:"昵称", type:"text", width:160, mode:"%%" },
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
]
};
let dbName = "表名";
vk.baseDao.getTableData({
dbName,
data,
// 强制where条件，比如这里设置了只能查询当前登录用户的数据
whereJson: {
user_id:uid
},
// 强制字段显示规则
fieldJson: {
},
// 默认排序规则
sortArr: [
],
// 副表列表
foreignDB:[
],
// 聚合结束后的where条件
lastWhereJson: {
}
});
```
### 前端条件查询
#### 可搭配表格搜索组件`vk-data-table-query` 进行条件查询
```html
<!-- 表格搜索组件开始 -->
<vk-data-table-query
v-model="queryForm1.formData"
:columns="queryForm1.columns"
@search="search"
></vk-data-table-query>
<!-- 表格搜索组件结束 -->
<!-- 表格组件开始 -->
<vk-data-table
...其他参数
:query-form-param="queryForm1"
...其他参数
></vk-data-table>
<!-- 表格组件结束 -->
```
```js
queryForm1:{
// 查询表单数据源，可在此设置默认值
formData:{
},
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
columns:[
{ key:"nickname", title:"昵称", type:"text", width:160, mode:"%%" },
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
]
}
```
#### queryForm1.columns 参数说明
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------- |-----------|---------|-------|-------|
| key | 键名 | String | 无 | - |
| title | 标题 | String | 无 | - |
| type | 组件类型 | String | 无 | - |
| width | 组件宽度 | Number | 无 | - |
| placeholder | 输入前的提示 | String | - | - |
| mode | 查询模式 | String | = | [查看mode](#mode) |
| fieldName | 数据库字段名称，默认=key的值 | String | key的值 | - |
| lastWhereJson | 是否是连表后的where条件 | Boolean | false | true |
| hidden | 是否隐藏组件 | Boolean | false | true |
#### fieldName 参数的用处
##### 如余额按金额范围查询
```js
columns:[
{
key:"balance1", title:"金额范围", type:"money", width:160, placeholder:"请输入最小金额",
mode:">=", fieldName:"balance",
},
{
key:"balance2", title:"-", type:"money", width:160, placeholder:"请输入最大金额",
mode:"<=", fieldName:"balance",
}
]
```
#### lastWhereJson 参数的用处
##### 如userInfo是连表字段的as的值，想要根据 userInfo.mobile 进行查询
```js
columns:[
{
key:"mobile", title:"手机号", type:"text", width:160,
mode:"=", fieldName:"userInfo.mobile", lastWhereJson:true
}
]
```
使用帮助/4、万能表格.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表格
### 核心思想：通过 JSON 配置渲染规则
### 基础用法
```html
<vk-data-table :data="table1.data" :columns="table1.columns"></vk-data-table>
```
```js
export default {
data() {
// 页面数据变量
return {
table1:{
// 表格数据
data:[],
// 表格字段显示规则
columns:[
{ key:"_id" , title:"用户ID" , type:"text" , width:200 },
{ key:"username" , title:"用户名" , type:"text" , width:200 },
{ key:"nickname" , title:"用户昵称" , type:"text" , width:200 },
{ key:"mobile" , title:"手机号" , type:"text" , width:200 },
{ key:"comment" , title:"备注" , type:"text" , minWidth:200 },
]
}
};
}
};
```
### 进阶用法
### 请直接看示例文件 `/pages_template/components/table/table-easy`
## API
### 属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| action | 动态模式 - vk框架下的云函数地址 | String | 无 | - |
| auto-action | 动态模式 - 是否组件加载完毕后自动运行action | Boolean | 无 | - |
| query-form-param | 动态模式 - 请求参数（表格查询参数） | Object | {} | - |
| dataPreprocess | 动态模式 - 云函数返回的数据进行预处理 | function(list) | - | - |
| data | 静态模式 - 列表数据 | Array | 无 | - |
| total | 静态模式 - 总记录数 | Number | 无 | - |
| columns | 通用 - 字段显示规则 | Array | [] | [查看columns](#columns) |
| height | 通用 - table的高度 | Number | 无 | - |
| max-height | 通用 - table的最大高度 | Number | 无 | - |
| row-height | 通用 - 行高 | Number | 无 | - |
| top | 通用 - margin-top的高度 | Number | 10 | - |
| selection | 通用 - 显示多选框 | Boolean | false | true |
| rowNo | 通用 - 显示序号 | Boolean | false | true |
| pagination | 通用 - 显示分页器 | Boolean | false | true |
| page-size | 通用 - 每页显示数量 | Number | 10 | - |
| page-sizes | 通用 - 每页显示数量选择列表 | Array | [1, 5, 10, 20, 50, 100, 1000] | - |
| right-btns | 通用 - 右侧显示的按钮列表 | Array | [] | [查看right-btns](#right-btns) |
| right-btns-type | 通用 - 右侧显示的按钮类型 | String | "button" | "text" |
| right-btns-more | 通用 - 右侧更多按钮 | Array | [] | [查看right-btns-more](#right-btns-more) |
| custom-right-btns | 通用 - 自定义右侧按钮 | Array | [] | [查看custom-right-btns](#custom-right-btns) |
| row-key | 通用 - 行数据的 Key | Function,String | "_id" | - |
| empty-text | 通用 - 空数据时显示的文本内容 | String | "暂无数据" | - |
| default-expand-all | 通用 - 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | Boolean | false | true |
| tree-props | 通用 - 渲染嵌套数据的配置选项 | Object | {children: 'children', hasChildren: 'hasChildren'} | - |
| border | 通用 - 是否带有纵向边框 | Boolean | false | true |
| stripe | 通用 - 是否为斑马纹 | Boolean | false | true |
| size | 通用 - Table 的尺寸 | String | 无 | medium / small / mini |
| show-header | 通用 - 是否显示表头 | Boolean | true | false |
| highlight-current-row | 通用 - 是否要高亮当前行 | Boolean | true | false |
| detail-dialog-width | 通用 - 详情弹窗的宽度 | Number,String | "830px" | - |
| multiple | 通用 - 可多选 |Boolean | true | false |
| default-sort | 默认排序规则 |Object | - | [查看default-sort](#default-sort) |
| show-summary | 通用 - 是否需要显示合计行 |Boolean | false | true |
| summary-method | 通用 - 自定义合计的计算函数（详情见下方） |Function | - | [查看summary-method](#summary-method) |
| total-option | 通用 - 需要自动统计的行（详情见下方） |Array | - | - |
#### default-sort
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| name | 需要排序的字段名 | String | - | - |
| type | 排序类型 | String | asc（升序） | desc（降序） |
### 事件
| 事件名 | 说明 | 回调参数 |
|----------|------------------------|------|
| selection-change | 多选框状态发生变化时 | rows |
| current-change | 点击(高亮)某一行 | row |
| row-click | 单击某一行 | row, column, event |
| row-dblclick | 双击某一行 | row, column, event |
| row-contextmenu | 鼠标右键某一行 | row, column, event |
| cell-click | 单击某一个单元格 | row, column, cell, event |
| cell-dblclick | 双击某一个单元格 | row, column, cell, event |
| header-click | 某一列的表头被点击时 | column, event |
| header-contextmenu | 某一列的表头被鼠标右键点击时 | row, btn |
| custom-right-btns | 自定义右侧按钮点击事件 | column, event |
| 其他 | 其他element自带的事件大部分也支持 | - |
### 方法
#### 通过 this.$refs.table1.xxx(); 方式调用
| 方法名 | 说明 |
|----------|------------------------|
| refresh | 刷新 |
| search | 查询（搜索） |
| getCurrentRow | 获取当前选中的行的数据 |
| getTableData | 获取整个表格数据 |
| getTableFormatterData | 获取整个表格数据（格式化后的数据） |
| getMultipleSelection | 获取多选框的数据 |
| showDetail | 显示详情页 |
| closeDetail | 关闭详情页 |
| exportExcel | 导出xls表格文件 |
| deleteRows | 删除指定的行（不删数据库数据） |
| updateRows | 更新指定的行数据（不更新据库数据） |
#### 删除指定的行（不删数据库数据）
```js
that.$refs.table1.deleteRows({
ids:["60acf6248a69dc00018d8520"],
success:function(){
}
});
```
#### 更新指定的行数据（不更新据库数据）
```js
that.$refs.table1.updateRows({
mode:"update", // update 局部字段更新 set 覆盖字段更新
rows:[
{ _id:"60acf6248a69dc00018d8520", remark:"被修改了", money:10000 }
],
success:function(){
}
});
```
#### 导出表格显示的数据
```js
that.$refs.table1.exportExcel();
```
#### 自定义导出表格数据
```js
that.$refs.table1.exportExcel({
fileName : "表格数据",
original : false,
columns: [
{ key:"_id", title:"id", type:"text" },
{ key:"money", title:"金额", type:"money" },
]
});
```
#### 导出自定义数据
```js
that.$refs.table1.exportExcel({
fileName:"文件名称",
data:[
{ a:1,b:2},
{ a:11,b:22}
],
columns:[
{ key:"a", title:"标题a", type:"text" },
{ key:"b", title:"标题b", type:"text" },
]
});
```
#### 获取整个表格数据（格式化后的数据）
```js
let info = that.$refs.table1.getTableFormatterData();
console.log(info);
```
#### 获取整个表格数据（格式化后的数据,key为中文）
```js
let info = that.$refs.table1.getTableFormatterData({
key:"title"
});
console.log(info);
```
### 插槽
#### columns中的每一个key都是插槽的名称
#### 如重写`gender`字段的渲染
```html
<template v-slot:gender="{ row, column, index }">
<view>{{ row.gender }}</view>
</template>
```
### 详细说明
#### columns
#### columns是一个数组，数组内每个元素有以下属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------- |-----------|---------|-------|-------|
| key | 键名 | String | 无 | - |
| title | 标题 | String | 无 | - |
| type | 类型 | String | 无 | [查看type](#type) |
| width | 宽度 | Number | 无 | - |
| minWidth | 最小宽度（设置此值会自动填充宽度） | Number | 无 | - |
| alignt | 对其方式 | String | center | left 、right |
| headerAlign | 表头对其方式 | String | center | left 、right |
| sortable | 是否是排序字段 | String | custom | true 、false |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | 无 | true、left、right |
| show | 显示规则，当为"detail" 代表只在详情弹窗时显示，"row" 代表只在表格内显示，"none" 代表均不显示 | string 、 array | ["detail","row"] | "detail"、"row"、"none" |
| defaultValue | 默认值 | String | 无 | - |
| formatter | 自定义格式化函数 | function(val, row, column, index) | - | - |
#### type
#### type（类型）
```js
table1:{
columns:[
{ key: "nickname", title: "昵称", type: "text", width: 120, defaultValue:"未设置昵称", },
{ key: "avatar", title: "头像", type: "avatar", width: 80 },
{ key: "images", title: "图片", type: "image", width: 120 },
{ key: "rate", title: "评分", type: "rate", width: 120 },
{ key: "switch", title: "开关", type: "switch", width: 120 },
{ key: "icon", title: "图标", type: "icon", width: 120 },
{
key: "type", title: "类型", type: "tag", width: 120, size: "mini",
data:[
{ value:1, label:"收入", tagType:"success" },
{ value:2, label:"支出", tagType:"danger" }
]
},
{ key: "_add_time", title: "添加时间", type: "time", width: 160, valueFormat:"yyyy-MM-dd hh:mm:ss" },
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
{
key: "nickname", title: "html渲染", type: "html", defaultValue: "未设置",
formatter: function(val, row, column, index) {
let str = `<text>${val}</text>（审核通过）`;
return str;
}
},
{ key: "balance", title: "余额", type: "money", width: 120 },
{ key: "percentage", title: "占比", type: "percentage", width: 120 },
{ key: "address", title: "地址", type: "address", width: 120 },
{ key: "userInfo", title: "用户", type: "userInfo", width: 120 },
{
key: "", title: "分组显示", type: "group", minWidth: 290, align:"left",
columns:[
{ key: "_id", title: "ID", type: "text" },
{ key: "avatar", title: "头像", type: "avatar" },
{ key: "nickname", title: "昵称", type: "text" },
],
},
{
key: "object1", title: "对象字段", type: "object", width: 180, align:"left",
columns:[
{ key: "key1", title: "对象内字段1", type: "text" },
{ key: "key2", title: "对象内字段2", type: "text" },
],
},
{
key: "gender", title: "性别", type: "radio", width: 120, defaultValue:0,
data:[
{ value:1, label:"男" },
{ value:2, label:"女" },
{ value:0, label:"保密" },
]
},
{
key: "gender", title: "性别", type: "select", width: 120, defaultValue:0,
data:[
{ value:1, label:"男" },
{ value:2, label:"女" },
{ value:0, label:"保密" },
]
},
{
key: "checkbox", title: "多选字段", type: "checkbox", width: 120, defaultValue:1,
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" },
]
}
]
}
```
#### right-btns
#### right-btns（右侧按钮列表）
```html
<vk-data-table
:right-btns="['detail_auto','update','delete','more']"
></vk-data-table>
```
##### right-btns数组内的可选值有
| 可选值 | 说明 |
|----------|------------------------|
| detail | 点击后触发detail事件 |
| detail_auto | 点击后自动弹出详情页 |
| update | 点击后触发update事件 |
| delete | 点击后触发delete事件 |
| more | 与 rightBtnsMore 搭配使用|
#### right-btns-more
#### right-btns-more(右侧更多按钮点击后显示的按钮列表)
```html
<vk-data-table
right-btns="['detail_auto','update','delete','more']"
:right-btns-more="table1.rightBtnsMore"
></vk-data-table>
```
```js
data() {
return {
table1:{
rightBtnsMore:[
{
title:'按钮1',
onClick:function(item){
}
},
{
title:'按钮2',
onClick:function(item){
}
}
]
}
}
}
```
#### custom-right-btns
#### custom-right-btns (右侧自定义按钮)
```html
<vk-data-table
:custom-right-btns="[
{ title: '按钮1', type: 'primary', icon: 'el-icon-edit' },
{ title: '按钮2', type: 'success', icon: 'el-icon-edit' },
{ title: '按钮3', type: 'warning', icon: 'el-icon-edit' },
{ title: '按钮4', type: 'danger', icon: 'el-icon-edit' }
]"
@custom-right-btns="customRightBtns"
></vk-data-table>
```
```js
methods: {
customRightBtns(item, btn){
}
}
```
### 条件查询
#### 可搭配表格搜索组件`vk-data-table-query` 进行条件查询
```html
<!-- 表格搜索组件开始 -->
<vk-data-table-query
v-model="queryForm1.formData"
:columns="queryForm1.columns"
@search="search"
></vk-data-table-query>
<!-- 表格搜索组件结束 -->
<!-- 表格组件开始 -->
<vk-data-table
...其他参数
:query-form-param="queryForm1"
...其他参数
></vk-data-table>
<!-- 表格组件结束 -->
```
```js
queryForm1:{
// 查询表单数据源，可在此设置默认值
formData:{
},
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
columns:[
{ key:"nickname", title:"昵称", type:"text", width:160, mode:"%%" },
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
]
}
```
#### queryForm1.columns 参数说明
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------- |-----------|---------|-------|-------|
| key | 键名 | String | 无 | - |
| title | 标题 | String | 无 | - |
| type | 组件类型 | String | 无 | - |
| width | 组件宽度 | Number | 无 | - |
| placeholder | 输入前的提示 | String | - | - |
| mode | 查询模式 | String | = | [查看mode](#mode) |
| fieldName | 数据库字段名称，默认=key的值 | String | key的值 | - |
| lastWhereJson | 是否是连表后的where条件 | Boolean | false | true |
#### fieldName 参数的用处
##### 如余额按金额范围查询
```js
columns:[
{
key:"balance1", title:"金额范围", type:"money", width:160, placeholder:"请输入最小金额",
mode:">=", fieldName:"balance",
},
{
key:"balance2", title:"-", type:"money", width:160, placeholder:"请输入最大金额",
mode:"<=", fieldName:"balance",
}
]
```
#### lastWhereJson 参数的用处
##### 如userInfo是连表字段的as的值，想要根据 userInfo.mobile 进行查询
```js
columns:[
{
key:"mobile", title:"手机号", type:"text", width:160,
mode:"=", fieldName:"userInfo.mobile", lastWhereJson:true
}
]
```
#### mode
#### queryForm1.columns 中 mode 参数详情
| 值 | 说明
|------------|-------------------|
| = | 完全匹配 |
| != | 不等于 |
| %% | 模糊匹配 |
| %* | 以xxx开头 |
| *% | 以xxx结尾 |
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| in | 在数组里 |
| nin | 不在数组里 |
| [] | 范围 arr[0] <= x <= arr[1] |
| [) | 范围 arr[0] <= x < arr[1]|
| (] | 范围 arr[0] < x <= arr[1] |
| () | 范围 arr[0] < x < arr[1] |
#### 万能表格合计列的示例
#### 简单模式
```html
<vk-data-table
...其他属性
:show-summary="true"
:total-option=" [
{ label: '标题1（此为table1.columns中title的值）', 'unit': '单位' }
]"
></vk-data-table>
```
#### summary-method
#### 万能表格合计列的示例
#### 自定义函数方法，如果涉及到金额，则需要使用summary-method属性进行自定义，代码如下
```html
<vk-data-table
...其他属性
:show-summary="true"
:summary-method="summaryMethod"
></vk-data-table>
```
```js
summaryMethod({ columns, data }) {
const means = ['']; // 合计
// 需要进行合计的字段
let totalOption = [
{ key: 'money', 'unit': '元', type:"money" },
];
for(let columnIndex=0; columnIndex<columns.length; columnIndex++){
let column = columns[columnIndex];
if (columnIndex === 0) {
means.push('合计');
} else {
let columnItem = vk.pubfn.getListItem(totalOption, "key", column.property);
if(!columnItem){
continue;
}
const values = data.map(dataItem => Number(dataItem[column.property]));
// 合计
if (!values.every(value => isNaN(value))) {
means[columnIndex] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
if(columnItem.type === "money"){
// 金额字段的特殊处理
let money = vk.pubfn.priceFilter(means[columnIndex]);
means[columnIndex] = `<span style="color: red">${money}${columnItem.unit}</span>`;
}else{
means[columnIndex] = `<span style="color: red">${means[columnIndex]}${columnItem.unit}</span>`;
}
} else {
// 如果不是数字类型,则直接为空
means[columnIndex] = "";
}
}
}
return [means];
}
```
\ No newline at end of file
使用帮助/5、万能表单.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单
### 核心思想：通过 JSON 配置渲染规则
#### 如：渲染一个input输入框,只需要如下代码
```js
{ key:"nickname", title:"昵称", type:"text" }
```
#### 渲染一个单选框组,只需要如下代码
```js
{
key:"gender", title:"性别", type:"radio",
data:[
{ value:1, label:"男" },
{ value:2, label:"女" }
]
}
```
#### 你甚至还可以通过 `表单可视化拖拽工具` 直接生成`vk框架代码` [点击体验](https://vkunicloud.fsq.pub/vk-form-visualizer/)
### 基础用法（vk-data-dialog为弹窗表单，去掉则为表单页面）
```html
<vk-data-dialog
v-model="form1.props.show"
title="表单标题"
width="600px"
mode="form"
>
<vk-data-form
ref="form1"
v-model="form1.data"
:action="form1.props.action"
:columns="form1.props.columns"
:rules="form1.props.rules"
:form-type="form1.props.formType"
:loading.sync="form1.props.loading"
:auto-close="true"
label-width="140px"
@success="onFormSuccess"
></vk-data-form>
</vk-data-dialog>
```
```js
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
// 表单请求数据，此处可以设置默认值
data: {
radio: 1,
checkbox : [1,2]
},
// 表单属性
props: {
// 表单请求地址
action: "template/test/sys/test",
// 表单字段显示规则
columns: [
{ key: "text", title: "text类型字段", type: "text" },
{ key: "number", title: "number类型字段", type: "number" },
{
key: "radio", title: "radio类型字段", type: "radio",
data: [
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" },
]
},
{
key: "checkbox", title: "checkbox类型字段", type: "checkbox",
data: [
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" },
]
},
{ key: "switch", title: "switch类型字段", type: "switch" }
],
// 表单验证规则
rules: {
text: [
{ required: true, message: "text不能为空", trigger: "change" },
]
},
// add 代表添加 update 代表修改
formType: "",
// 表单是否在请求中
loading: false,
// 是否显示表单1 的弹窗
show: false
}
},
// 表单相关结束-----------------------------------------------------------
};
}
}
```
### 进阶用法
请直接看示例文件 `/pages_template/components/form/form-pro`
## API
### 属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-----------------------|---------|--------|-------|
| v-model | 表单数据源 | Object | {} | - |
| rules | 表单验证规则 | Object | 无 | - |
| action | vk框架云函数地址 | String | 无 | - |
| before-action | action请求前拦截器 | Function | 无 | - |
| form-type | 表单类型，用于复用表单 | String | 无 | - |
| columns | 通用 - 字段规则 | Array | [] | [查看columns](#columns) |
| loading | 表单是否在请求中 | Boolean | false | true |
| label-width | 左侧label宽度 | String,Number | "80px" | - |
| width | 表单宽度 | Number,String | 无 | - |
| footer-show | 底部按钮是否显示 | Boolean | true | false |
| footer-center | 底部按钮是否居中 | Boolean | true | false |
| show-cancel | 是否显示取消按钮 | Boolean | true | false |
| cancel-text | 取消按钮的文字 | String | 关 闭 | - |
| submit-text | 确定按钮的文字 | String | 确 定 | - |
| submit-disabled | 确定按钮是否禁用 | Boolean | false | true |
| auto-close | 表单请求成功后自动关闭 | Boolean | true | false |
| auto-reset | 自动重置表单 | String | Boolean | true | false |
| label-position | 对齐方式 | String | right | right left top |
| max-height | 表单最大高度 | String | 无 | - |
| size | 表单内组件的size | String | 无 | - |
| label-suffix | label的后缀 | String | 无 | - |
| disabled | 禁用表单 | Boolean | false | true |
| clearable | 表单内的组件有清空效果 | Boolean | true | false |
### 事件
| 事件名 | 说明 | 回调参数 |
|----------|------------------------|------|
| success | 表单提交成功 | data, formType |
| fail | 表单提交失败 | data, formType |
| complete | 表单提交结束 | data, formType |
| cancel | 表单点击取消按钮 | - |
### 方法
#### 通过 this.$refs.form1.xxx(); 方式调用
| 方法名 | 说明 |
|----------|------------------------|
| submitForm | 提交表单 |
| resetForm | 重置表单 |
| clearValidate | 移除整个表单的校验 |
### 插槽
#### columns中的每一个key都是插槽的名称 （详情见示例:`/pages_template/components/form/form-slot`)
#### 如重写 `rate` 字段的渲染
```html
<vk-data-form
ref="form1"
v-model="form1.data"
:rules="form1.props.rules"
:action="form1.props.action"
:form-type="form1.props.formType"
:columns='form1.props.columns'
:loading.sync="form1.props.loading"
label-width="140px"
@success="onFormSuccess"
>
<!-- v-slot:rate 中的 rate 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
<template v-slot:rate="{ form, keyName }">
<view style="height: 36px;display: flex;align-items: center;">
<el-rate v-model="form[keyName]"></el-rate>
</view>
</template>
</vk-data-form>
```
### 详细说明
#### columns
#### columns是一个数组，数组内每个元素有以下属性，每个元素代表一个表单元素
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------- |-----------|---------|-------|-------|
| key | 键名 | String | 无 | - |
| title | 标题 | String | 无 | - |
| type | 类型 | String | 无 | [查看type](#type) |
| width | 宽度 | Number | 无 | - |
| tips | 下方的提示 | String | 无 | - |
| disabled | 是否禁用 | Boolean | false | true |
| showLabel | 是否显示label | Boolean | true | false |
#### type
#### type类型（更多请见：`/pages_template/components/form/form-pro`）
```js
form1:{
// 表单请求数据，此处可以设置默认值
data: {
},
// 表单属性
props:[
{ key:"", title:"基础字段", type:"bar-title" },
{ key:"text", title:"单行文本", type:"text" },
{
key:"textarea", title:"多行文本", type:"textarea",
autosize:{ minRows:4, maxRows:10 },
maxlength:200,
showWordLimit:true,
},
{ key:"money", title:"money类型", type:"money", tips:"100 = 1元。页面显示的是1，实际的值是100，请看右上角表单数据的值。" },
{ key:"number", title:"number类型", type:"number", precision:2, tips:"number类型值会转为数字，可以指定小数位数" },
{ key:"number2", title:"计数器类型", type:"number", controls:true, precision:0, min:5, max:100, placeholder:"请输入数字" },
{ key:"percentage", title:"百分比类型", type:"percentage", precision:0, tips:"页面显示的是1，实际的值是0.01，请看右上角表单数据的值。" },
{ key:"discount", title:"折扣类型", type:"discount", tips:"页面显示的是1，实际的值是0.1，请看右上角表单数据的值。" },
{ key:"text2", title:"文本2", type:"text",prepend:"前置文字",append:"后置文字",prefixIcon:"el-icon-user" },
// 选择型字段
{ key:"", title:"选择型字段", type:"bar-title" },
{
key:"radio1", title:"radio类型1", type:"radio",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"checkbox1", title:"checkbox类型1", type:"checkbox",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"select1", title:"select类型1", type:"select",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{ key:"address", title:"address类型", type:"address" },
{ key:"cascader2", title:"云端数据级联", type:"cascader",
action:"admin/system/permission/sys/getAll",
props:{
list:"rows",
value:"permission_id",
label:"label",
children:"children",
multiple:true
}
},
{ key:"switch", title:"switch类型", type:"switch" },
{ key:"rate", title:"评分类型", type:"rate", allowHalf:false },
{ key:"slider", title:"滑块类型", type:"slider" },
{ key:"color1", title:"颜色类型1", type:"color" },
{ key:"color2", title:"颜色类型2", type:"color", showAlpha:true },
// 文件上传
{ key:"", title:"文件上传", type:"bar-title" },
{ key:"image1", title:"image类型", type:"image", limit:6 },
// 日期型字段
{ key:"", title:"日期型字段", type:"bar-title" },
{ key:"date", title:"date类型", type:"date", dateType:"date", tips:"可选择年月日" },
{ key:"dateTime", title:"dataTime类型", type:"date", dateType:"datetime", tips:"可选择年月日时分秒" },
{ key:"dateArr", title:"date类型范围", type:"date", dateType:"daterange" },
{ key:"dataTimeArr", title:"dataTime类型范围", type:"date", dateType:"datetimerange" },
// 时间型字段
{ key:"", title:"时间型字段", type:"bar-title" },
{ key:"time1", title:"time类型1", type:"time" },
{ key:"timeArr1", title:"time类型范围1", type:"time", isRange:true },
// 数据库联动字段
{ key:"", title:"数据库联动字段", type:"bar-title" },
{
key:"user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号/昵称",
action:"admin/select/kh/user",
},
{
key: "user_id", title: "选择用户", type: "table-select", placeholder:"选择",
action:"admin/system/user/sys/getList",
columns:[
{ key:"nickname", title:"用户昵称", type:"text", nameKey:true },
{ key:"_id", title:"用户标识", type:"text", idKey:true },
{ key:"mobile", title:"手机号", type:"text" },
]
},
{
key: "role1", title: "通过表格选择(单选)", type: "table-select", placeholder:"请选择角色",
action:"admin/system/role/sys/getList",
columns:[
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
{ key:"role_id", title:"角色标识", type:"text", idKey:true }
],
},
{
key: "role2", title: "通过表格选择(多选)", type: "table-select", placeholder:"请选择角色",
action:"admin/system/role/sys/getList",
columns:[
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
{ key:"role_id", title:"角色标识", type:"text", idKey:true }
],
multiple:true
},
// 布局
{ key:"", title:"横向布局", type:"bar-title" },
{ key:"", title:"", type:"group", justify:"start",
columns:[
{ key:"text1", title:"单行文本1", type:"text" },
{ key:"text2", title:"单行文本2", type:"text" },
{ key:"text3", title:"单行文本3", type:"text" },
{ key:"text4", title:"单行文本4", type:"text" },
]
},
{ key:"", title:"", type:"group", justify:"start",
columns:[
{ key:"text5", title:"单行文本5", type:"text" },
{ key:"text6", title:"单行文本6", type:"text" },
{ key:"text7", title:"单行文本7", type:"text" },
{ key:"text8", title:"单行文本8", type:"text" },
]
},
// 特殊类型
{ key:"", title:"特殊类型", type:"bar-title" },
{ key:"editor", title:"富文本类型", type:"editor" },
]
}
```
#### 更多请见：`/pages_template/components/form/form-pro`
使用帮助/6、用户角色权限.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 用户角色权限
#### 目前框架内置了sys过滤器（云函数层的权限过滤器，检测用户是否有此业务云函数的执行权限）
```js
用户表：`uni-id-users`
角色表：`uni-id-roles`
权限表：`uni-id-permissions`
由于云数据库的特殊性
用户角色中间表为用户表中的`role`字段(用户角色列表，由`role_id`组成的数组)
角色权限中间表为角色表中的`permission`字段(角色拥有的权限列表，由`permission_id`组成的数组)
```
### 云函数权限检测逻辑
#### 这里只是介绍下，框架已内置，无需写对应的代码
```js
1. 用户访问云函数 `user/sys/updateUserInfo`
则 `url = "user/sys/updateUserInfo"`
则云函数权限检测就变成了用户是否有执行 `user/sys/updateUserInfo` 云函数的权限。
2. 根据 `token` 获取到用户 `permission`
3. 根据权限表的权限规则（如完整匹配、通配符匹配、正则匹配）校验用户拥有的 `permission` 是否有任意一个权限匹配到了此 `url`
4. 若能匹配，代表用户有此云函数执行权限，放行，若不能匹配，代表用户无此云函数执行权限，需要拦截。
```
#### 注意：admin角色无需赋予权限，即可访问所有云函数。
### 举例1：设置用户A可以访问 `user/sys/updateUserInfo`
```
1、进入权限管理页面
2、创建权限C，其中url = user/sys/updateUserInfo
3、进入角色管理
4、创建角色B
5、给角色B赋予权限C
6、进入用户管理
7、给用户A赋予角色B
8、完成，此时用户A可以访问 user/sys/updateUserInfo
```
### 举例2：设置用户A可以访问所有 以`user/sys/` 开头的云函数
```
1、进入权限管理页面
2、创建权限C，其中url = user/sys/* ， 匹配模式选择 通配符
3、进入角色管理
4、创建角色B
5、给角色B赋予权限C
6、进入用户管理
7、给用户A赋予角色B
8、完成，此时用户A可以访问 以 user/sys/ 开头的所有云函数
```
#### 以上为用户角色权限校验的大致逻辑（因为非常灵活配置，可以适用于所有系统：admin后台，ERP软件，APP、小程序等）
### 想要发挥内置权限过滤器的最大功能，建议
#### `admin端` 的云函数全部写在 `service/admin` 目录内
#### `client端` 的云函数全部写在 `service/client` 目录内
#### `公共` 的云函数全部写在 `service/common` 目录内
#### 需要权限的云函数写在 `sys` 目录内 如：`admin/user/sys/add` 、 `client/user/sys/setAvatar`
#### 只需要登录即可请求的云函数写在 `kh` 目录内 如：`client/user/kh/setAvatar`
```js
注意：请求admin目录下的kh目录内的云函数 如：`admin/user/kh/setAvatar`
除了需要登录以外，登录用户的 allow_login_background 需为 true，否则也是无权限。
```
#### 任何人都可以请求的云函数写在 `pub` 目录内 如：`client/user/pub/login`
#### [中间件 - 过滤器介绍](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=3035637&doc_id=975983)
#### 相关的页面列表
### 1、用户管理：`/pages_plugs/system/user/list`
### 此页面的用户管理仅仅显示可以登录admin后台的用户，你自己的小程序用户管理应该新建页面开发（尽量不要在此页面上开发）
### 2、角色管理：`/pages_plugs/system/role/list`
### 3、权限管理：`/pages_plugs/system/permission/list`
### 4、菜单管理：`/pages_plugs/system/menu/list`
使用帮助/7、创建我的第一个带CRUD的页面.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 创建我的第一个带CRUD的页面
#### 建议：你自己业务的页面全部创建在 `pages` 目录下
#### 此处我们已创建自己业务的用户管理为例。
#### 一、写云函数
##### 1、在目录`uniCloud/cloudfunctions/router/service/admin/`下创建新的目录 `user`
##### 2、复制`router/service/admin/kong/sys/` 目录到 刚刚新建的`user`目录（包含sys文件夹）
##### 3、将4个云函数中的参数`dbName`的值改为 `uni-id-users`
##### 4、正确编写add、update中的请求参数和可操作的字段名称
##### 如 增：`add.js`
```js
module.exports = {
/**
* 添加
* @url admin/user/sys/add 前端调用的url参数地址
* data 请求参数 说明
* @params {String} username 用户名
*/
main: async (event) => {
let { data = {}, userInfo, util, filterResponse, originalParam } = event;
let { customUtil, uniID, config, pubFun, vk, db, _ } = util;
let { uid } = data;
let res = { code: 0, msg: '' };
// 业务逻辑开始-----------------------------------------------------------
let {
username,
nickname,
gender = 0,
mobile,
comment
} = data;
// 此处应该还需要判断下mobile和username是否已存在等参数校验逻辑和
let register_date = new Date().getTime();
res.id = await vk.baseDao.add({
dbName:"uni-id-users",
dataJson:{
username,
nickname,
gender,
mobile,
comment,
register_date
}
});
return res;
}
}
```
##### 实际开发用户管理时，接口可以参考`admin/system/user/sys/add`内的更详细的写法。（这里是为了演示常规页面的CRUD）
##### 删：delete.js
```js
module.exports = {
/**
* 删除
* @url admin/user/sys/delete 前端调用的url参数地址
* data 请求参数 说明
* @params {String} _id 用户ID
*/
main: async (event) => {
let { data = {}, userInfo, util, filterResponse, originalParam } = event;
let { customUtil, uniID, config, pubFun, vk, db, _ } = util;
let { uid } = data;
let res = { code: 0, msg: '' };
// 业务逻辑开始-----------------------------------------------------------
let { _id } = data;
if (vk.pubfn.isNullOne(_id)) {
return { code: -1, msg: '_id不能为空' };
}
if (uid === _id) {
return { code: -1, msg: '请勿删除当前登录账户!' };
}
// 执行数据库API请求
res.num = await vk.baseDao.deleteById({
dbName: "uni-id-users",
id:_id
});
return res;
}
}
```
##### 查：getList.js （只改dbName即可）
##### 全部代码如下：
```js
module.exports = {
/**
* 查询多条记录 分页
* @url admin/kong/sys/getList 前端调用的url参数地址
* data 请求参数 说明
* @params {Number} pageIndex 当前页码
* @params {Number} pageSize 每页显示数量
* @params {Array<Object>} sortRule 排序规则
* @params {object} formData 查询条件数据源
* @params {Array<Object>} columns 查询条件规则
*/
main: async (event) => {
let { data = {}, userInfo, util, filterResponse, originalParam } = event;
let { customUtil, uniID, config, pubFun, vk , db, _ } = util;
let { uid } = data;
let res = { code : 0, msg : '' };
// 业务逻辑开始-----------------------------------------------------------
let dbName = "uni-id-users";
res = await vk.baseDao.getTableData({
dbName,
data
});
return res;
}
}
```
##### 改：update.js
```js
module.exports = {
/**
* 修改
* @url admin/user/sys/update 前端调用的url参数地址
* data 请求参数 说明
* @params {String} _id 用户ID
*/
main: async (event) => {
let { data = {}, userInfo, util, filterResponse, originalParam } = event;
let { customUtil, uniID, config, pubFun, vk, db, _ } = util;
let { uid } = data;
let res = { code: 0, msg: '' };
// 业务逻辑开始-----------------------------------------------------------
let {
_id,
nickname,
gender = 0,
mobile,
comment,
} = data;
if (vk.pubfn.isNullOne(_id)) {
return { code: -1, msg: '_id不能为空' };
}
// 此处还应该还需要判断下mobile和username是否已存在等参数校验逻辑和
// 执行数据库API请求
res.id = await vk.baseDao.updateById({
dbName:"uni-id-users",
id:_id,
dataJson:{
nickname,
gender,
mobile,
comment
}
});
return res;
}
}
```
##### 实际开发用户管理时，接口可以参考`admin/system/user/sys/update`内的更详细的写法。（这里是为了演示常规页面的CRUD）
##### 5、上传云函数`router`
#### 二、写页面
#### 1、在目录 `pages` 下创建新的目录 `user`（只建目录，无需建页面）
#### 2、复制 `pages_template/kong/list.vue` 文件到 刚刚新建的`pages/user`目录
#### 3、修改变量`table1.columns `值 `template/db_api/sys/getList` 为 `admin/user/sys/getList`
#### 4、修改变量`addBtn ` 函数中的action `template/db_api/sys/add` 为 `admin/user/sys/add`
#### 5、修改变量`updateBtn ` 函数中的action `template/db_api/sys/update` 为 `admin/user/sys/update`
#### 6、修改变量`deleteBtn ` 函数中的action `template/db_api/sys/delete` 为 `admin/user/sys/delete`
#### 7、修改变量 `table1.columns`
```js
table1:{
// 表格数据请求地址
action:"admin/user/sys/getList",
// 表格字段显示规则
columns:[
{ key:"_id", title:"id", type:"text", width:200 },
{ key:"avatar", title:"头像", type:"avatar", width:80 },
{ key:"username", title:"用户名", type:"text", defaultValue:'未设置' },
{ key:"nickname", title:"昵称", type:"text", defaultValue:'未设置' },
{ key:"comment", title:"备注", type:"text" },
{ key:"mobile", title:"手机号", type:"text", width:120, defaultValue:"未绑定" },
{ key:"gender", title:"性别", type:"radio", width:80, defaultValue:0,
data:[
{ value:1, label:"男"},
{ value:2, label:"女"},
{ value:0, label:"保密"}
]
},
{ key:"status", title:"账户状态", type:"tag", width:120, defaultValue:0,
data:[
{ value:1, label:"冻结", tagType:"danger" },
{ value:0, label:"正常", tagType:"success" }
]
},
{ key:"register_date", title:"注册时间", type:"time", width:160, sortable:"custom" },
{ key:"last_login_date", title:"最后登录时间", type:"dateDiff", width:130, defaultValue:'从未登录过', sortable:"custom" },
{ key:"last_login_ip", title:"最后登录ip", type:"text", width:120, defaultValue:'从未登录过' },
{ key:"role", title:"角色", type:"text", width:120, defaultValue:'无' },
{ key:"allow_login_background", title:"允许登录后台", type:"tag", width: 120, defaultValue:false,
data:[
{ value:true, label:"允许", tagType:"success" },
{ value:false, label:"禁止", tagType:"danger" }
]
}
],
// 多选框选中的值
multipleSelection:[],
// 当前高亮的记录
selectItem:""
},
```
#### 8、修改变量 `queryForm1.columns`
```js
queryForm1:{
// 查询表单数据源，可在此设置默认值
formData:{
},
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
columns:[
{ key:"_id", title:"ID", type:"text", width:140, mode:"=" },
{ key:"username", title:"用户名", type:"text", width:140, mode:"%%" },
{ key:"nickname", title:"昵称", type:"text", width:140, mode:"%%" },
{ key:"mobile", title:"手机号", type:"text", width:140, mode:"%%" },
{ key:"register_date", title:"注册时间", type:"datetimerange", width:400, mode:"[]" },
{ key:"allow_login_background", hidden:true, mode:"=" },
]
},
```
#### 9、修改变量 `form1.props`
```js
form1: {
// 表单请求数据，此处可以设置默认值
data: {
},
// 表单属性
props: {
// 表单请求地址
action:"",
// 表单字段显示规则
columns:[
{ key:"username", title:"用户名", type:"text", show:["add"] },
{ key:"nickname", title:"昵称", type:"text" },
{ key:"gender", title:"性别", type:"radio",
data: [
{ value:1, label:"男"},
{ value:2, label:"女"},
{ value:0, label:"保密"}
]
},
{ key:"mobile", title:"手机号", type:"text" },
{ key:"comment", title:"备注", type:"textarea",
maxlength:"99", showWordLimit:true, autosize:{ minRows: 2, maxRows: 10 } ,
},
],
// 表单对应的验证规则
rules:{
username:[
{
required: true,
validator:vk.pubfn.validator("username"),
message: '用户名以字母开头，长度在6~18之间，只能包含字母、数字和下划线',
trigger: 'blur'
}
],
nickname: [
{ required:true, message:'昵称为必填字段', trigger:'blur' },
{ min:2, max:20, message:'昵称长度在 2 到 20 个字符', trigger:'blur' }
],
mobile:[
{ validator:vk.pubfn.validator("mobile"), message: '手机号格式错误', trigger: 'blur' }
]
},
// add 代表添加 update 代表修改
formType:'',
// 是否显示表单1 的弹窗
show: false,
}
},
```
#### 10、在 `pages.json` 的 `subPackages`中配置页面路由
```js
"pages": [
...其他页面
{ "path": "pages/user/list" }
],
```
#### 11、在 `static_menu/menu.json` 添加静态菜单（或者去菜单管理中添加动态菜单）
```js
{
"menu_id": "my_system",
"name": "你的系统名",
"icon": "el-icon-s-tools",
"sort": 1,
"children": [{
"menu_id": "my_system-user",
"name": "用户管理",
"icon": "",
"url": "/pages/user/list"
}
]
}
```
#### 参数
```js
menu_id : 菜单唯一标识
name : 菜单名称
icon : 菜单图标
sort : 菜单排序（从小到大排序）
children : 子菜单列表
```
#### 12、完成
\ No newline at end of file
使用帮助/8、代码块提示.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
### 安装代码快捷提示步骤
#### 1、将`根目录/使用帮助/代码快捷提示/javascript代码块提示.json` 内的代码 复制到 hbx 工具 - 代码块设置 - javascript代码块
#### 2、将`根目录/使用帮助/代码快捷提示/vue代码块提示.json` 内的代码 复制到 hbx 工具 - 代码块设置 - vue代码块
#### 友情提示：请先下载一个最新的框架示例项目，保证代码块提示是最新版本。（从新下载的项目的`根目录/使用帮助/代码快捷提示/javascript代码块提示.json`）中复制
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/4732a485-b7c2-4532-955b-78de4384af26.png)
### 效果
#### 在 `script` 内输入vk
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/3d2824ab-d034-48be-9fff-f49edde50921.png)
#### 在 `云函数` 内输入dao.
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/fe965ad9-e9ed-44fc-ad0b-5bc286988e09.png)
#### 在 `template` 内输入vk
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/7a8db184-f842-4576-baa5-bbae0f5cb52f.png)
\ No newline at end of file
使用帮助/9、admin框架更新步骤指南.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
### 目前升级框架方式：
### 方式一: 升级整个框架(包含模块) HBX编译器版本需 `3.1.4`或更高
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/80fd47c9-686f-4237-ae71-7170008f3102.png)
#### 注意事项：使用方式一更新框架是最方便的，但是如果你改动了框架内置的部分代码，你改动过的代码可能会被还原，因此如果你改动过框架内置代码，合并的时候，可以先看下改动的文件。
```js
如：
1、app.config.js
2、App.vue
3、main.js
4、pages.json
5、static_menu目录
6、store目录
等等
升级前一定要进行文件对比！
```
#### 1、按上图进行操作
#### 2、更新完成后，在项目根目录重新执行下 `npm i`(如果npm包有更新的话)
#### 3、重新上传公共模块和云函数(如果`admin端`是绑定的`client端`,则去`client端`上传即可)（`client端`也执行下更新`uni_modules`模块）
#### 4、重启hbx编译器
### 方式二: 只升级模块
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/2daf712c-ae06-4f8b-8cc3-767737265361.png)
#### 1、按上图进行操作
#### 2、修改`package.json`内的npm包版本(如果npm包有更新的话)
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/14a55ee2-f811-4619-8d53-19d3ec998566.png)
#### 3、在项目根目录重新执行下 `npm i`(如果npm包有更新的话)
#### 4、重新上传公共模块和云函数(如果`admin端`是绑定的`client端`,则去`client端`上传即可)（`client端`也执行下更新`uni_modules`模块）
#### 5、重启hbx编译器
### 注意：
#### 更新 `vk-unicloud` 后,需要在 `common/vk-unicloud` 右键上传公共模块才会生效
#### 若是本地调试模式，则需要重启本地服务才会生效。
#### 注意事项：使用方式二更新框架不会造成你修改过的框架文件被覆盖，但是如果本次更新需要改动框架内一些文件，则需要你手动更改。
### 如升级过程中遇到问题，请加群：`22466457` 你的问题可在群内解决。
使用帮助/内置组件参数说明/0、公共属性.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
### 公共属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---------------|------------------|--------|-------|-------|
| key | 字段名 | String | - | - |
| title | 字段显示的名称 | String | - | - |
| type | 组件类型 | String | - | - |
| placeholder | 占位符 | String | - | - |
| width | 宽度 | Number | - | - |
| disabled | 是否禁用 | Boolean | false | true |
| clearable | 是否可以清空选项 | Boolean | true | false |
| tips | 下方的提示 | String | - | - |
使用帮助/内置组件参数说明/10、remote-select 远程下拉.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
#### 下拉选择方式
#### 应用场景：数据量不大时使用。
```js
{
key:"category_ids1", title:"远程select（单选）", type:"remote-select", placeholder:"请选择分类",
action:"admin/select/kh/categorys",
props:{ list:"rows", value:"_id", label:"name" },
showAll:true
}
```
#### 远程搜索方式
#### 应用场景：数据量很大，不方便一次性全部加载时使用。
```js
{
key:"user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号/昵称",
action:"admin/select/kh/user",
}
```
#### 远程搜索带参数方式1
```js
{
key:"user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号/昵称",
action:"admin/select/kh/user",
actionData:{
a:1
}
}
```
#### 远程搜索带参数方式2
```js
{
key:"user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号/昵称",
action:"admin/select/kh/user",
actionData:function(){
return {
a:that.form1.data.a
}
}
}
```
#### 数据预处理
```js
{
key:"user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号/昵称",
action:"你的云函数",
props:{ list:"rows", value:"_id", label:"name" },
dataPreprocess:function(list){
list.map((item, index) => {
item.name = `${item.name}(${item._id})`
});
return list;
}
}
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| data | 静态模式数据源 | Array | - | - |
| action | 动态模式 - 远程请求的云函数地址 | String | - | - |
| actionData | 动态模式 - 远程请求的云函数时的额外参数 | Object、Function | - | - |
| props | 数据源的属性匹配规则 | Object | { list:'list', value:'value', label:'label' } | - |
| dataPreprocess | 动态模式 - 云函数返回的数据进行预处理 | function(list) | - | - |
| showAll | 是否一开始就全部加载 | Boolean | false | true |
| multiple | 是否允许多选 | Boolean | false | true |
| limit | 最多可选数量 | Number | - | - |
| loadingText | 远程加载时显示的文字 | String | 加载中| - |
| noMatchText | 搜索条件无匹配时显示的文字 | String | 无匹配数据| - |
| noDataText | 选项为空时显示的文字 | String | 无数据| - |
| onChange | function(val, formData, column, index, option) | Function | -| - |
#### onChange 使用示例
```js
{
key:"user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号/昵称",
action:"admin/select/kh/user",
onChange:function(val, formData, column, index, option){
console.log(1,val, formData, column, index, option);
}
}
```
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| val | 表单绑定的值 | Any | - | - |
| formData | 整个表单数据源 | Object | - | - |
| column | 该组件属性 | Object | - | - |
| index | 组件的索引下标 | Number | - | - |
| option | 其他参数，如选项的对象值等 | Any | - | - |
## 万能表格使用方式
#### 暂无，请通过连表查询方式获取数据。
## template 使用方式
## 下拉选择方式
#### 应用场景：数据量不大时使用。
```html
<vk-data-input-remote-select
v-model="form1.category_ids"
placeholder="请选择分类"
action="admin/select/kh/categorys"
:props="{ list: 'rows', value: '_id', label: 'name' }"
width="300px"
show-all
multiple
:limit="3"
></vk-data-input-remote-select>
```
#### 远程搜索方式
#### 应用场景：数据量很大，不方便一次性全部加载时使用。
```html
<vk-data-input-remote-select
v-model="form1.user_id"
placeholder="请输入用户名"
action="admin/select/kh/user"
width="300px"
></vk-data-input-remote-select>
```
使用帮助/内置组件参数说明/11、cascader 级联选择.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
#### 静态数据方式
#### 应用场景：选项数据为静态数据的情况。
```js
{
key:"cascader1", title:"本地数据级联", type:"cascader",
data:[
{
value:1,
label:"数学",
children:[
{ value:11,label:"奥数" },
{ value:12,label:"微积分" }
]
},
{
value:2,
label:"语文",
children:[
{ value:21, label:"文言文" },
{ value:22, label:"古诗" }
]
},
]
}
```
#### 远程数据方式
#### 应用场景：需要从数据库中获取选项的情况。
```js
{
key:"cascader2", title:"云端数据级联", type:"cascader",
action:"admin/system/permission/sys/getAll",
props:{
list:"rows",
value:"permission_id",
label:"label",
children:"children",
// multiple:true
}
}
```
#### 远程懒加载方式
#### 应用场景：数据量很大，一次性获取数据库容易超时时。
#### 云函数代码见本页面最下方。
```js
{
key:"cascader2", title:"云端数据级联", type:"cascader",
action:"admin/system/menu/sys/getCascader",
props:{
list:"rows",
value:"menu_id",
label:"label",
children:"children",
lazy:true
}
}
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| data | 静态模式数据源 | Array | - | - |
| action | 动态模式 - 远程请求的云函数地址 | String | - | - |
| props | 数据源的属性匹配规则 | Object | { list:'list', value:'value', label:'label', children:'children' } | - |
| showAllLevels | 输入框中是否显示选中值的完整路径 | Boolean | true | false |
| collapseTags | 多选模式下是否折叠Tag | Boolean | false | true |
| separator | 选项分隔符 | String | 斜杠' / ' | - |
| filterable | 是否可搜索选项 | Boolean | - | - |
| filterMethod | 自定义搜索逻辑 | function(node, keyword) | -| - |
| debounce | 搜索关键词输入的去抖延迟，毫秒 | Number | 300 | - |
| beforeFilter | 筛选之前的钩子，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | -| - |
## 万能表格使用方式
#### 无
## template 使用方式
#### 静态数据方式
#### 应用场景：选项数据为静态数据的情况。
```html
<vk-data-input-cascader
v-model="form1.value"
:localdata="[
{
value:1,
label:'数学',
children:[
{ value:11,label:'奥数' },
{ value:12,label:'微积分' }
]
},
{
value:2,
label:'语文',
children:[
{ value:21, label:'文言文' },
{ value:22, label:'古诗' }
]
},
]"
placeholder="请选择"
></vk-data-input-cascader>
```
#### 远程数据方式
#### 应用场景：需要从数据库中获取选项的情况。
```html
<vk-data-input-cascader
v-model="form1.value"
action="admin/system/permission/sys/getAll"
:props="{ list:'rows', value:'permission_id', label:'label', children:'children' }"
placeholder="请选择"
></vk-data-input-cascader>
```
#### 远程懒加载方式云函数代码示例
```js
'use strict';
module.exports = {
/**
* 获取菜单级联数据(懒加载形式)
* @url admin/system/menu/sys/getCascader 前端调用的url参数地址
* data 请求参数 说明
* @param {Object} node 当前点击的节点
* res 返回参数说明
* @param {Number} code 错误码，0表示成功
* @param {String} msg 详细信息
*/
main: async (event) => {
let { data = {}, userInfo, util, filterResponse, originalParam } = event;
let { customUtil, uniID, config, pubFun, vk, db, _ } = util;
let { uid } = data;
let res = { code: 0, msg: "" };
// 业务逻辑开始-----------------------------------------------------------
let { node = {} } = data;
let whereJson = {
enable: true
};
if (node.root) {
whereJson["parent_id"] = null;
} else {
whereJson["parent_id"] = node.value;
}
res = await vk.baseDao.selects({
dbName: "opendb-admin-menus",
pageIndex: 1,
pageSize: 500,
whereJson,
sortArr: [{ name: "sort", type: "asc" }],
// 副表列表
foreignDB: [
{
dbName: "opendb-admin-menus",
localKey:"menu_id",
foreignKey: "parent_id",
as: "hasChildren",
limit: 1, // 避免浪费查询,这里设置limit:1
}
]
});
// 数据预处理
let rows = res.rows;
for (let i in rows) {
let item = rows[i];
rows[i].label = `${item.name}（${item.menu_id}）`;
if(vk.pubfn.isNull(item.hasChildren)){
rows[i].leaf = true;
}
}
res.rows = rows;
// 业务逻辑结束-----------------------------------------------------------
return res;
}
}
```
使用帮助/内置组件参数说明/12、table-select 通过表格选择.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{
key: "role", title: "通过表格选择(单选)", type: "table-select", placeholder:"请选择角色",
action:"admin/system/role/sys/getList",
columns:[
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
{ key:"role_id", title:"角色标识", type:"text", idKey:true }, // idKey:true 代表此字段为主键字段，若设置show:["none"],则可以在表格中隐藏该字段的显示
{ key:"comment", title:"备注", type:"text" }
],
queryColumns:[
{ key: "role_name", title: "角色昵称", type: "text", width: 150, mode: "%%" },
{ key: "role_id", title: "角色标识", type: "text", width: 150, mode: "%%" }
]
}
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------|---------|--------|-------|
| action | 远程请求的云函数地址 | String | - | - |
| columns | 表格字段显示规则 | Array | - | - |
| queryColumns | 搜索栏字段显示规则 | Array | - | - |
| multiple | 是否允许多选 | Boolean | false | true |
| multipleLimit | 最多可选择的数量 | Number | - | - |
| formData | 默认搜索字段的值 | Object | - | - |
| listKey | 后端返回的list数组的字段名称 | String | rows | - |
| showCancel | 是否显示取消按钮 | Boolean | true | false |
| cancelText | 取消按钮的文字 | String | 关闭 | - |
| submitText | 确定按钮的文字 | String | 确定 | - |
| pageSize | 表格分页每页显示数量 | Number | 5 | 5、10、20、50、100、500 |
| valueFields | 用于控制value的值由哪些字段组成 | Array | - | - |
| onChange | function(val, formData, column, index, option) | Function | -| - |
#### onChange 使用示例
```js
{
key: "role", title: "通过表格选择(单选)", type: "table-select", placeholder:"请选择角色",
action:"admin/system/role/sys/getList",
columns:[
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
{ key:"role_id", title:"角色标识", type:"text", idKey:true }, // idKey:true 代表此字段为主键字段，若设置show:["none"],则可以在表格中隐藏该字段的显示
{ key:"comment", title:"备注", type:"text" }
],
queryColumns:[
{ key: "role_name", title: "角色昵称", type: "text", width: 150, mode: "%%" },
{ key: "role_id", title: "角色标识", type: "text", width: 150, mode: "%%" }
],
onChange:function(val, formData, column, index, option){
console.log(1,val, formData, column, index, option);
}
}
```
#### 不设置 `valueFields` 时 表单绑定的值为`字符串数组形式`
```js
["001","002"]
```
#### 设置 `valueFields` 时 表单绑定的值为`对象数组形式`
#### 如 `valueFields:["_id","nickname","mobile"]` 表单绑定的值为
```js
[
{"_id":"001","nickname":"昵称1","mobile":"手机号1"}，
{"_id":"002","nickname":"昵称2","mobile":"手机号2"}
]
```
#### columns 参数详情
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------|---------|--------|-------|
| key | 字段名 | String | - | - |
| title | 字段显示的名称 | String | - | - |
| type | 字段渲染的组件类型 | String | - | - |
| nameKey | 是否将此字段的值定义为lable（类似单选框的lable和value的关系） | Boolean | false | true |
| idKey | 是否将此字段的值定义为value（类似单选框的lable和value的关系） | Boolean | false | true |
| 其他 | 其他参数参考万能表格（和万能表格参数一致）| - | - | - |
### 注意：
1、`idKey` 和 `nameKey` 只能各设置1个。
2、 设置了`idKey:true`的字段，必须在列表中非空唯一(如主键_id)，默认`idKey`为`_id`
3、 设置了`nameKey:true`的字段，用于展示在已选择的列表中（如用户昵称字段）默认`nameKey`为`name`
#### queryColumns 参数详情
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------|---------|--------|-------|
| key | 字段名 | String | - | - |
| title | 字段显示的名称 | String | - | - |
| type | 字段渲染的组件类型 | String | - | - |
| mode | 查询匹配方式 | String | = | 见下方 |
| 其他 | 其他参数参考万能表单（和万能表单参数大部分一致）| - | - | - |
#### queryColumns 中 mode 参数详情
| 值 | 说明
|------------|-------------------|
| = | 完全匹配 |
| != | 不等于 |
| %% | 模糊匹配 |
| %* | 以xxx开头 |
| *% | 以xxx结尾 |
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| in | 在数组里 |
| nin | 不在数组里 |
| [] | 范围 arr[0] <= x <= arr[1] |
| [) | 范围 arr[0] <= x < arr[1]|
| (] | 范围 arr[0] < x <= arr[1] |
| () | 范围 arr[0] < x < arr[1] |
## 万能表格使用方式
无
## template 使用方式
```html
<vk-data-input-table-select
v-model="role"
action="admin/system/role/sys/getList"
placeholder="请选择"
:columns='[
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
{ key:"role_id", title:"角色标识", type:"text", idKey:true },
{ key:"comment", title:"备注", type:"text" }
]'
></vk-data-input-table-select>
```
使用帮助/内置组件参数说明/13、address 地址选择.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"address", title:"address类型", type:"address" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| level | 层级（最大3级，省市区） | Number | 3 | 1 、 2 |
## 万能表格使用方式
```js
{ key: "address", title: "地址", type: "address", width: 120 }
```
## template 使用方式
```html
<vk-data-input-address v-model="address" placeholder="请选择省市区" :level="3"></vk-data-input-address>
```
使用帮助/内置组件参数说明/14、switch 开关.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
### 开关形式
```js
{ key:"switch", title:"switch类型", type:"switch", activeValue:true, inactiveValue:false }
```
### 多选框形式
```js
{ key:"switch", title:"switch类型", type:"switch", activeValue:true, inactiveValue:false, switchType:"checkbox", label:"允许为空" },
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| activeText | switch - 打开时的文字描述 | String | - | - |
| inactiveText | switch - 关闭时的文字描述 | String | - | - |
| activeValue | switch 打开时或checkbox选中时的值 | Boolean/Number/String | true | - |
| inactiveValue | switch 关闭时或checkbox未选中时的值 | Boolean/Number/String | false | - |
| activeColor | switch - 打开时的背景色 | String | - | - |
| inactiveColor | switch - 关闭时的背景色 | String | - | - |
| validateEvent | switch - 状态改变时是否触发表单的校验 | Boolean | true | false |
| switchType | 开关的类型，设置成checkbox可以将开关显示成多选框形式 | String | - | switch 、checkbox |
| label | checkbox - 多选框的label | String | - | - |
## 万能表格使用方式
```js
{ key: "switch", title: "switch类型", type: "switch", activeValue:true, inactiveValue:false, width: 100 }
```
## template 使用方式
### 开关形式
```html
<el-switch v-model="switch" :active-value="true" :inactive-value="false"></el-switch>
```
### 多选框形式
```html
<el-checkbox v-model="switch" :true-label="true" :false-label="false">允许为空</el-checkbox>
```
使用帮助/内置组件参数说明/15、rate 评分.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"rate", title:"评分类型", type:"rate", allowHalf:false }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| allowHalf | 是否允许半选 | Boolean | false | true |
| lowThreshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | 2 | - |
| highThreshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | 4 | - |
| colors | icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色 | Array/Object | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | - |
| voidColor | 未选中 icon 的颜色 | String | #C6D1DE | - |
| disabledVoidColor | 只读时未选中 icon 的颜色 | String | #EFF2F7 | - |
| showText | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | Boolean | false | true |
| showScore | 是否显示当前分数，show-score 和 show-text 不能同时为真 | Boolean | false | true |
| textColor | 辅助文字的颜色| String | #1F2D3D | - |
| texts | 辅助文字数组 | Array | ['极差', '失望', '一般', '满意', '惊喜'] | - |
| scoreTemplate | 分数显示模板 | String | {value} | - |
## 万能表格使用方式
```js
{ key: "rate", title: "评分", type: "rate", width: 120 }
```
## template 使用方式
```html
<el-rate v-model="rate"></el-rate>
```
使用帮助/内置组件参数说明/16、slider 滑块.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"slider", title:"滑块类型", type:"slider" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| min | 最小值 | Number | 0 | - |
| max | 最大值 | Number | 100 | - |
| step | 步长 | Number | 1 | - |
| showInput | 是否显示输入框，仅在非范围选择时有效 | Boolean | false | true |
| showInputControls | 在显示输入框的情况下，是否显示输入框的控制按钮 | Boolean | true | false |
| inputSize | 输入框的尺寸 | String | small | large / medium / small / mini |
| showStops | 是否显示间断点 | Boolean | false | true |
| showTooltip | 是否显示间断点 | Boolean | true | false |
| formatTooltip | 格式化 tooltip message| function(value) | - | - |
| range | 是否为范围选择 | Boolean | false | true |
| vertical | 是否竖向模式 | Boolean | false | true |
| height | Slider 高度，竖向模式时必填 | Number | - | - |
| label | 屏幕阅读器标签 | String | - | - |
| debounce | 输入时的去抖延迟，毫秒，仅在show-input等于true时有效 | Number | 300 | - |
| marks | 标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式 | Object | - | - |
## 万能表格使用方式
### 暂无
## template 使用方式
```html
<el-slider v-model="value1"></el-slider>
```
### marks用法
```html
<template>
<view>
<el-slider v-model="value" range :marks="marks"></el-slider>
</view>
</template>
<script>
export default {
data() {
return {
value: [30, 60],
marks: {
0: '0°C',
8: '8°C',
37: '37°C',
50: {
style: {
color: '#1989FA'
},
label: this.$createElement('strong', '50%')
}
}
}
}
}
</script>
```
\ No newline at end of file
使用帮助/内置组件参数说明/17、color 颜色选择.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"color", title:"颜色类型", type:"color" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| showAlpha | 是否支持透明度选择 | Boolean | false | true |
| colorFormat | 写入 v-model 的颜色的格式 | String | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） | hsl / hsv / hex / rgb |
| predefine | 预定义颜色 | Array | - | - |
## 万能表格使用方式
### 暂无
## template 使用方式
```html
<el-color-picker v-model="color"></el-color-picker>
```
使用帮助/内置组件参数说明/18、image 图片上传.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"image1", title:"image类型", type:"image", limit:9 }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| limit | 最大上传数量 | Number | - | - |
| provider | 储存空间供应商 | String | unicloud | aliyun |
| needSave | 是否需要保存图片url到admin后台 | Boolean | false | true |
| httpRequest | 覆盖默认的上传行为，可以自定义上传的实现（下方有详细说明） | function | - | - |
| listType | 文件列表的类型 | String | picture-card | text/picture/picture-card |
| 其他 | 其他参数请查看element Upload 上传组件 https://element.eleme.cn/#/zh-CN/component/upload | - | - | - |
#### httpRequest 用法
#### 注意：如果是上传到unicloud云储存或阿里云OSS，无需写httpRequest，框架已集成。
```js
httpRequest(obj){
let { action, file, filename, data, headers, onProgress, onSuccess, onError } = obj;
// 在此处写将 file 上传到你指定的地方
// 上传成功后，需要执行 onSuccess(res);
// 上传失败时，需要执行 onError(res);
// 正在上传时，可以监听上传过程，同时执行下方代码，达到显示上传过程进度条的功能
/* onProgress({
percent:progress,
isTrusted:progress >= 100 ? true:false,
returnValue:progress >= 100 ? true:false,
total:progressEvent.total
}); */
},
```
## 万能表格使用方式
```js
{ key: "image", title: "图片", type: "image", width: 120 }
```
## template 使用方式
```html
<vk-data-upload v-model="image1" :limit="9"></vk-data-upload>
```
使用帮助/内置组件参数说明/19、file 文件上传.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"file", title:"文件类型", type:"file", limit:9, accept:".txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx,.pdf" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| limit | 最大上传数量 | Number | - | - |
| provider | 储存空间供应商 | String | unicloud | aliyun |
| needSave | 是否需要保存图片url到admin后台 | Boolean | false | true |
| httpRequest | 覆盖默认的上传行为，可以自定义上传的实现（下方有详细说明） | function | - | - |
| listType | 文件列表的类型 | String | picture-card | text/picture/picture-card |
| 其他 | 其他参数请查看element Upload 上传组件 https://element.eleme.cn/#/zh-CN/component/upload | - | - | - |
#### httpRequest 用法
#### 注意：如果是上传到unicloud云储存或阿里云OSS，无需写httpRequest，框架已集成。
```js
httpRequest(obj){
let { action, file, filename, data, headers, onProgress, onSuccess, onError } = obj;
// 在此处写将 file 上传到你指定的地方
// 上传成功后，需要执行 onSuccess(res);
// 上传失败时，需要执行 onError(res);
// 正在上传时，可以监听上传过程，同时执行下方代码，达到显示上传过程进度条的功能
/* onProgress({
percent:progress,
isTrusted:progress >= 100 ? true:false,
returnValue:progress >= 100 ? true:false,
total:progressEvent.total
}); */
},
```
## 万能表格使用方式
### 暂无
## template 使用方式
```html
<vk-data-upload v-model="image1" :limit="9" upload-type="file" list-type="text"></vk-data-upload>
```
使用帮助/内置组件参数说明/1、text 单行文本.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"text", title:"单行文本", type:"text" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| maxlength | 最大输入长度 | Number | - | - |
| showWordLimit | 是否显示输入字数统计 | Boolean | false | true |
| readonly | 原生属性，是否只读 | boolean| false | true |
| prefixIcon | 输入框头部图标 | String | - | - |
| suffixIcon | 输入框尾部图标 | String | - | - |
## 万能表格使用方式
```js
{ key:"nickname" , title:"用户昵称" , type:"text" , width:200 }
```
## template 使用方式
```html
<el-input v-model="form1.value" placeholder="请输入内容"></el-input>
```
使用帮助/内置组件参数说明/20、date 日期选择.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
// date类型
{ key:"date", title:"date类型", type:"date", dateType:"date", tips:"可选择年月日" },
// dataTime类型
{ key:"dateTime", title:"dataTime类型", type:"date", dateType:"datetime", tips:"可选择年月日时分秒" },
// date类型范围
{ key:"dateArr", title:"date类型范围", type:"date", dateType:"daterange" },
// dataTime类型范围
{ key:"dataTimeArr", title:"dataTime类型范围", type:"date", dateType:"datetimerange" },
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| dateType | 时间格式类型 | String | - | date、datetime、daterange、datetimerange |
| align | 对其方式 | String | left | left, center, right |
| format | 显示在输入框中的格式 | String | yyyy-MM-dd HH:mm:ss | - |
| startPlaceholder | 范围选择时开始日期的占位内容 | String | - | - |
| endPlaceholder | 范围选择时结束日期的占位内容 | String | - | - |
| rangeSeparator | 选择范围时的分隔符 | String | '-' | - |
| pickerOptions | 当前时间日期选择器特有的选项参考下表 | Object | {} | - |
### pickerOptions 详情说明
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| shortcuts | 设置快捷选项，需要传入 { text, onClick } | Object[] | - | - |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean| Function |- | - |
| cellClassName |设置日期的 className | Function(Date) | - | - |
| firstDayOfWeek | 周起始日 | Number | - | - |
| onPick | 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效 | Function({ maxDate, minDate }) | 7 | 1 到 7 |
[点击查看更多element 官方API](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi)
## 万能表格使用方式
```js
{ key: "_add_time", title: "添加时间", type: "time", width: 160 },
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
```
## template 使用方式
```html
<vk-data-input-date-time v-model="value1" type="date"></vk-data-input-date-time>
```
使用帮助/内置组件参数说明/21、time 时间选择.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"time1", title:"time类型1", type:"time" },
{
key:"time2", title:"time类型2", type:"time",
valueFormat:"HH:mm",
pickerOptions:{
format:"HH:mm"
}
},
{
key:"time3", title:"time类型3", type:"time", custom:true,
pickerOptions:{
start: '08:00',
step: '01:00',
end: '24:00'
}
},
{ key:"timeArr1", title:"time类型范围1", type:"time", isRange:true },
{
key:"timeArr2", title:"time类型范围2", type:"time", isRange:true,
valueFormat:"HH:mm",
pickerOptions:{
selectableRange: '18:30:00 - 20:30:00',
format:"HH:mm"
}
}
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| align | 对其方式 | String | left | left, center, right |
| format | 显示在输入框中的格式 | String | yyyy-MM-dd HH:mm:ss | - |
| startPlaceholder | 范围选择时开始日期的占位内容 | String | - | - |
| endPlaceholder | 范围选择时结束日期的占位内容 | String | - | - |
| rangeSeparator | 选择范围时的分隔符 | String | '-' | - |
| pickerOptions | 当前时间日期选择器特有的选项参考下表 | Object | {} | - |
### pickerOptions 详情说明
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| selectableRange |可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] | string / array | - | - |
| format | 设置禁用状态，参数为当前日期，要求返回 Boolean| string | 'HH:mm:ss' | 小时：HH，分：mm，秒：ss，AM/PM A |
[点击查看更多element 官方API](https://element.eleme.cn/#/zh-CN/component/time-picker)
## 万能表格使用方式
```js
{ key: "time", title: "添加时间", type: "text", width: 160 },
```
## template 使用方式
```html
<vk-data-input-time
v-model="value1"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="选择时间"
></vk-data-input-time>
```
[点击查看更多element 官方API](https://element.eleme.cn/#/zh-CN/component/time-picker)
\ No newline at end of file
使用帮助/内置组件参数说明/23、json JSON编辑器.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"json", title:"json类型", type:"json" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| height | 高度 | Number/String | 300px | - |
## 万能表格使用方式
### 暂无
## template 使用方式
```html
<vk-data-input-json v-model="value1"></vk-data-input-json>
```
使用帮助/内置组件参数说明/24、array 可变数组子表单.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 效果图
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/67cda695-e3f9-469f-9870-9f248b415400.png)
## 万能表单使用方式
#### 数组<对象>类型
#### 应用场景：数组内的元素是对象类型。如`[{a:1,b:true},{a:2,b:false}]`
```js
{
key:"array", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
showAdd:true,
showClear:true,
showSort:true,
// 新增一行时,该行的默认值
defaultValue:{
switch:true,
text1:""
},
rightBtns:['copy','delete'],
// 每行每个字段对应的渲染规则
columns:[
{
key:"text1", title:"昵称", type:"text",
isUnique:true,
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ["change","blur"] }
]
},
{
key:"number1", title:"数字", type:"number",
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"select1", title:"select类型", type:"select",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
],
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
],
onChange:function(val, row, column, index){
// 此处演示根据选择的值动态改变text1的值
row.text1 = "昵称" + val;
}
},
{ key:"switch", title:"switch类型", type:"switch", width:160 },
]
}
```
#### 数组<字符串>类型
#### 应用场景：数组内的元素是字符串类型，如`["1","2","3"]`
```js
{ key:"array1", title:"数组<字符串>类型", type:"array<string>" },
```
#### 数组<数字>类型
#### 应用场景：数组内的元素是字符串类型，如`[1,2,3]`
```js
{ key:"array2", title:"数组<数字>类型", type:"array<number>" },
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| columns | 同万能表单 | Array | - | 和万能表单一致，同时多了一些参数，见下方 |
| itemWidth | 每一项的固定宽度 | Number | - | - |
| itemMinWidth | 每一项的最小宽度 | Number | - | - |
| addButtonText | 添加按钮的文字 | String | 新增 | - |
| clearButtonText | 清除按钮的文字 | String | 清空 | - |
| showAdd | 是否显示添加按钮 | Boolean | true | false |
| showClear | 是否显示清除按钮 | Boolean | true | false |
| showSort | 是否显示排序按钮 | Boolean | false | true |
| emptyText | 没有数据时显示的文字 | String | 暂无数据 | - |
| defaultValue | 每一项的默认值 | Object | - | - |
| rowKey | 每一项唯一索引值 | String | _index | - |
| columnIndexMethod | 序号格式化方法 | String/Function | - | - |
| columnIndexWidth | 序号显示的宽度 | Number | 80 | - |
| columnIndexLabel | 序号显示的标题 | String | # | - |
| rightBtns | 右侧按钮显示列表 | Array | - | ['copy','delete'] |
## columns 比万能表单新增的参数
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| isUnique | 是否在数组中唯一 | Boolean | false | true |
| allowRepeat | 唯一值需要排除的，如[""] 排除空值 | Array | - | - |
| rules | 该项的表单验证规则 | Array | - | - |
| defaultValue | 该项的默认值 | any | - | - |
| onChange | 监听如select选项改变时触发的函数，部分组件不支持 | function(val, row, column, index) | - | - |
## 万能表格使用方式
### 不支持
## template 使用方式
### 不支持
使用帮助/内置组件参数说明/25、file-select 素材库选择.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 效果图
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/0ca12bfc-703e-4662-98b8-068ed01e4fac.png)
## 万能表单使用方式
```js
{ key:"image1", title:"多选图片", type:"file-select", placeholder:"请选择图片", fileType:"image", multiple:true, multipleLimit:6 }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| fileType | 文件类型 | String | image | image、video、other |
| multiple | 是否可多选 | Number | - | - |
| multipleLimit | 最大多选数量 | Number | 9 | - |
| defaultCategory | 默认显示哪个分类下的素材（分类ID） | String | - | - |
## 万能表格使用方式
```js
{ key: "image", title: "图片", type: "image", width: 120 }
```
## template 使用方式
```html
<vk-data-input-file-select v-model="image1" placeholder="请选择图片" multiple :multiple-limit="9" file-type="image"></vk-data-input-file-select>
```
## 注意：
### 需确保有以下云函数（如没有，则从新版本中拷贝）
#### 1、admin/system_uni/uni-id-files/files/kh/delete
#### 2、admin/system_uni/uni-id-files/files/kh/getList
#### 3、admin/system_uni/uni-id-files/files/kh/update
#### 4、admin/system_uni/uni-id-files/categories/kh/getList
#### 5、admin/system_uni/uni-id-files/categories/sys/add
#### 6、admin/system_uni/uni-id-files/categories/sys/delete
#### 7、admin/system_uni/uni-id-files/categories/sys/update
#### 8、user/kh/addUploadRecord
### 若需要使用 `素材管理`，则还需要进行以下操作
#### 1、拷贝目录 `/pages_plugs/system_uni/uni-id-files/`（如果没有，则从新版本中拷贝）
#### 2、在`pages.json` 中的子包 `pages_plugs` 添加 `{ "path": "system_uni/uni-id-files/list" }`
#### 3、`导入` 动态菜单
1、打开admin后台，进入用户角色权限 - 菜单管理
2、点击 `通过json导入菜单` 选择
3、粘贴下面的数组
```js
[
{
"menu_id": "system_uni",
"name": "系统设置",
"icon": "el-icon-s-tools",
"sort": 110,
"children": [{
"menu_id": "system-uni-uni-id-files",
"name": "素材管理",
"icon": "el-icon-folder-opened",
"url": "/pages_plugs/system_uni/uni-id-files/list",
"sort": 0
}
]
}
]
```
4、导入
5、刷新页面，点击系统设置-素材管理（如果是非admin账号，则需要授权才能看到）
### 注意：前端 `vk.callFunctionUtil.uploadFile` 带参数 `needSave: true`时，上传的图片记录会保存到admin后台，可在`素材管理`中查看
\ No newline at end of file
使用帮助/内置组件参数说明/2、textarea 多行文本.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{
key:"textarea", title:"多行文本", type:"textarea",
autosize:{ minRows:4, maxRows:10 },
maxlength:200,
showWordLimit:true,
}
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| maxlength | 最大输入长度 | Number | - | - |
| showWordLimit | 是否显示输入字数统计 | Boolean | false | true |
| readonly | 原生属性，是否只读 | boolean| false | true |
| autosize | 自适应内容高度 | object | - | - |
## 万能表格使用方式
```js
{ key:"comment" , title:"备注" , type:"textarea" , width:200 }
```
## template 使用方式
```html
<el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
```
使用帮助/内置组件参数说明/3、money 金额输入.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"balance", title:"金额类型", type:"money" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| max | 最大输入 | Number | - | - |
| rightText | 右侧文字后缀 | String | 元 | - |
| precision | 精度（小数点位数） | Number | 2 | - |
| readonly | 原生属性，是否只读 | boolean| false | true |
## 万能表格使用方式
```js
{ key:"balance" , title:"用户余额" , type:"money" , width:100 }
```
## template 使用方式
```html
<vk-data-input-money v-model="form1.balance" placeholder="请输入金额" width="300px"></vk-data-input-money>
```
使用帮助/内置组件参数说明/4、number 数字输入.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"number", title:"数字类型", type:"number" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| min | 最小输入 | Number | - | - |
| max | 最大输入 | Number | - | - |
| rightText | 右侧文字后缀 | String | 元 | - |
| precision | 精度（小数点位数） | Number | 2 | - |
| controls |是否使用步进器模式 | boolean | false | true |
| controlsPosition |控制按钮位置| String | - | right |
| step | 步长 | Number| - | - |
| stepStrictly | 是否必须是步长的倍数 | false | true |
| readonly | 原生属性，是否只读 | boolean| false | true |
## 万能表格使用方式
```js
{ key:"number" , title:"数字类型" , type:"number" , width:100 }
```
## template 使用方式
### 普通模式
```html
<vk-data-input-number v-model="form1.value2" :precision="2" width="300px" placeholder="请输入数字"></vk-data-input-number>
```
### 步进器模式
```html
<vk-data-input-number-box v-model="form1.value2" :precision="2" :step="0.01" width="200px" placeholder="请输入数字"></vk-data-input-number-box>
```
使用帮助/内置组件参数说明/5、percentage 百分比输入.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"percentage", title:"百分比类型", type:"percentage" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| max | 最大输入 | Number | - | - |
| rightText | 右侧文字后缀 | String | % | - |
| precision | 精度（小数点位数） | Number | 2 | - |
| readonly | 原生属性，是否只读 | boolean| false | true |
## 万能表格使用方式
```js
{ key:"percentage" , title:"百分比类型" , type:"percentage" , width:100 }
```
## template 使用方式
```html
<vk-data-input-percentage v-model="form1.value1" placeholder="请输入百分比" :precision="2" :max="100" width="300px"></vk-data-input-percentage>
```
使用帮助/内置组件参数说明/6、discount 折扣输入.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
```js
{ key:"discount", title:"折扣类型", type:"discount" }
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| max | 最大输入 | Number | - | - |
| rightText | 右侧文字后缀 | String | 折 | - |
| precision | 精度（小数点位数） | Number | 2 | - |
| readonly | 原生属性，是否只读 | boolean| false | true |
## 万能表格使用方式
```js
{ key:"discount" , title:"折扣类型" , type:"discount" , width:100 }
```
## template 使用方式
```html
<vk-data-input-discount v-model="form1.value1" placeholder="请输入折扣" :precision="2" width="300px"></vk-data-input-discount>
```
使用帮助/内置组件参数说明/7、radio 单选.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
#### 静态数据方式
#### 应用场景：选项数据为静态数据的情况。
```js
{
key:"radio1", title:"radio类型1", type:"radio",
itemWidth:80,
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
}
```
#### 远程数据方式
#### 应用场景：需要从数据库中获取选项的情况。
```js
{
key:"radio4", title:"远程radio", type:"radio",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
props:{ list:"rows", value:"_id", label:"name" },
}
```
#### 远程数据带参数方式1
```js
{
key:"radio4", title:"远程radio", type:"radio",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
actionData:{
a:1
},
props:{ list:"rows", value:"_id", label:"name" },
}
```
#### 远程数据带参数方式2
```js
{
key:"radio4", title:"远程radio", type:"radio",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
actionData:function(){
return {
a:that.form1.data.a
}
},
props:{ list:"rows", value:"_id", label:"name" },
}
```
#### 数据预处理
```js
{
key:"radio4", title:"远程radio", type:"radio",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
props:{ list:"rows", value:"_id", label:"name" },
dataPreprocess:function(list){
list.map((item, index) => {
item.name = `${item.name}(${item._id})`
});
return list;
}
}
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| data | 静态模式数据源 | Array | - | - |
| action | 动态模式 - 远程请求的云函数地址 | String | - | - |
| actionData | 动态模式 - 远程请求的云函数时的额外参数 | Object、Function | - | - |
| props | 数据源的属性匹配规则 | Object | { list:'list', value:'value', label:'label' } | - |
| dataPreprocess | 动态模式 - 云函数返回的数据进行预处理 | function(list) | - | - |
| textColor | 按钮形式的 Radio 激活时的文本颜色 | String | #ffffff | - |
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | String | #409EFF | - |
| optionType | 选项形状类型 | String | default | button |
| border | 是否显示边框 | Boolean | false| true |
| itemWidth | 选项的统一宽度（用于排版） | Number | - | - |
| onChange | function(val, formData, column, index, option) | Function | -| - |
#### onChange 使用示例
```js
{
key:"radio4", title:"远程radio", type:"radio",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
props:{ list:"rows", value:"_id", label:"name" },
onChange:function(val, formData, column, index, option){
console.log(1,val, formData, column, index, option);
}
}
```
## 万能表格使用方式
```js
{
key: "gender", title: "性别", type: "radio", width: 120, defaultValue:0,
data:[
{ value:1, label:"男" },
{ value:2, label:"女" },
{ value:0, label:"保密" }
]
}
```
## template 使用方式
#### 静态数据方式
#### 应用场景：选项数据为静态数据的情况。
```html
<vk-data-input-radio
v-model="form1.value"
:localdata="[
{ value:1, label:'男' },
{ value:2, label:'女' },
{ value:0, label:'保密' }
]"
></vk-data-input-radio>
```
#### 远程数据方式
#### 应用场景：需要从数据库中获取选项的情况。
```html
<vk-data-input-radio
v-model="form1.value"
:item-width="80"
action="admin/select/kh/categorys"
:props="{ list:'rows', value:'_id', label:'name' }"
></vk-data-input-radio>
```
使用帮助/内置组件参数说明/8、checkbox 多选.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
#### 静态数据方式
#### 应用场景：选项数据为静态数据的情况。
```js
{
key:"checkbox1", title:"多选类型", type:"checkbox",
itemWidth:80,
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
}
```
#### 远程数据方式
#### 应用场景：需要从数据库中获取选项的情况。
```js
{
key:"checkbox1", title:"多选类型", type:"checkbox",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
props:{ list:"rows", value:"_id", label:"name" },
}
```
#### 远程数据带参数方式1
```js
{
key:"checkbox1", title:"多选类型", type:"checkbox",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
actionData:{
a:1
},
props:{ list:"rows", value:"_id", label:"name" },
}
```
#### 远程数据带参数方式2
```js
{
key:"checkbox1", title:"多选类型", type:"checkbox",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
actionData:function(){
return {
a:that.form1.data.a
}
},
props:{ list:"rows", value:"_id", label:"name" },
}
```
#### 数据预处理
```js
{
key:"checkbox1", title:"多选类型", type:"checkbox",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
props:{ list:"rows", value:"_id", label:"name" },
dataPreprocess:function(list){
list.map((item, index) => {
item.name = `${item.name}(${item._id})`
});
return list;
}
}
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| data | 静态模式数据源 | Array | - | - |
| action | 动态模式 - 远程请求的云函数地址 | String | - | - |
| actionData | 动态模式 - 远程请求的云函数时的额外参数 | Object、Function | - | - |
| props | 数据源的属性匹配规则 | Object | { list:'list', value:'value', label:'label' } | - |
| dataPreprocess | 动态模式 - 云函数返回的数据进行预处理 | function(list) | - | - |
| textColor | 按钮形式的 Radio 激活时的文本颜色 | String | #ffffff | - |
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | String | #409EFF | - |
| optionType | 选项形状类型 | String | default | button |
| border | 是否显示边框 | Boolean | false| true |
| itemWidth | 选项的统一宽度（用于排版） | Number | - | - |
| onChange | function(val, formData, column, index, option) | Function | -| - |
#### onChange 使用示例
```js
{
key:"checkbox1", title:"多选类型", type:"checkbox",
border:true,
itemWidth:80,
action:"admin/select/kh/categorys",
props:{ list:"rows", value:"_id", label:"name" },
onChange:function(val, formData, column, index, option){
console.log(1,val, formData, column, index, option);
}
}
```
## 万能表格使用方式
```js
{
key: "checkbox", title: "多选字段", type: "checkbox", width: 120, defaultValue:1,
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
}
```
## template 使用方式
#### 静态数据方式
#### 应用场景：选项数据为静态数据的情况。
```html
<vk-data-input-checkbox
v-model="form1.value"
:localdata="[
{ value:1, label:'选项1' },
{ value:2, label:'选项2' },
{ value:3, label:'选项3' }
]"
></vk-data-input-checkbox>
```
#### 远程数据方式
#### 应用场景：需要从数据库中获取选项的情况。
```html
<vk-data-input-checkbox
v-model="form1.value"
:item-width="80"
action="admin/select/kh/categorys"
:props="{ list:'rows', value:'_id', label:'name' }"
></vk-data-input-checkbox>
```
使用帮助/内置组件参数说明/9、select 下拉选择.md 已删除 100644 → 0
浏览文件 @ dc83c8bb
## 万能表单使用方式
### 常规用法
```js
{
key:"select1", title:"select类型1", type:"select",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
}
```
### 分组用法
```js
{
key:"select3", title:"select类型3", type:"select",
group:true,
data:[
{
label: "分组1",
children:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
label: "分组2",
children:[
{ value:3, label:"选项3" },
{ value:4, label:"选项4" }
]
}
]
}
```
## API
### 属性
[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)
### 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| data | 数据源 | Array | - | - |
| props | 数据源的属性匹配规则 | Object | { value:'value', label:'label', children:'children' } | - |
| multiple | 是否允许多选 | Boolean | false | true |
| multipleLimit | 最多可选数量 | Number | - | - |
| group | 是否需要分组 | Boolean | false| true |
| onChange | function(val, formData, column, index, option) | Function | -| - |
#### onChange 使用示例
```js
{
key:"select1", title:"select类型1", type:"select",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
],
onChange:function(val, formData, column, index, option){
console.log(1,val, formData, column, index, option);
}
}
```
## 万能表格使用方式
```js
{
key: "gender", title: "性别", type: "select", width: 120, defaultValue:0,
data:[
{ value:1, label:"男" },
{ value:2, label:"女" },
{ value:0, label:"保密" },
]
}
```
## template 使用方式
### 常规用法
```html
<vk-data-input-select
v-model="form1.value1"
:localdata='[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]'
placeholder="请选择"
></vk-data-input-select>
```
### 分组用法
```html
<vk-data-input-select
v-model="form1.value2"
:group="true"
:localdata='[
{
label: "分组1",
children:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
label: "分组2",
children:[
{ value:3, label:"选项3" },
{ value:4, label:"选项4" }
]
}
]'
placeholder="请选择"
></vk-data-input-select>
```
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或