1107
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
/.hbuilderx
|
||||
/node_modules
|
||||
/unpackage
|
||||
@@ -0,0 +1,130 @@
|
||||
<script>
|
||||
import config from "@/app.config.js";
|
||||
import { version } from "./package.json";
|
||||
export default {
|
||||
computed: {},
|
||||
methods: {
|
||||
// 初始化菜单权限等数据
|
||||
init() {
|
||||
let that = this;
|
||||
let { vk } = that;
|
||||
// 如果token失效，直接跳登录页面
|
||||
if (!vk.checkToken()) {
|
||||
vk.reLaunch(config.login.url);
|
||||
return false;
|
||||
}
|
||||
if (!that.isAllowLoginBackground()) {
|
||||
vk.alert("您的账户无登陆权限", function() {
|
||||
vk.reLaunch(config.login.url);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
vk.userCenter.getMenu({
|
||||
success: function(data) {
|
||||
// 初始化菜单
|
||||
let { menus = [] } = data;
|
||||
// 合并去重
|
||||
menus = vk.pubfn.arr_concat(menus, config.sideBar.staticMenu, "menu_id");
|
||||
// 排序
|
||||
menus.sort(function(a, b) {
|
||||
let sortA = a.sort || 0;
|
||||
let sortB = b.sort || 0;
|
||||
return sortA - sortB;
|
||||
});
|
||||
if (JSON.stringify(menus) !== JSON.stringify(vk.getVuex("$app.navMenu"))) {
|
||||
vk.setVuex("$app.navMenu", menus);
|
||||
}
|
||||
// 将树形结构转成数组结构
|
||||
let menuList = vk.pubfn.treeToArray(menus, {
|
||||
id: "menu_id",
|
||||
parent_id: "parent_id",
|
||||
children: "children"
|
||||
});
|
||||
if (JSON.stringify(menuList) !== JSON.stringify(vk.getVuex("$app.menuList"))) {
|
||||
vk.setVuex("$app.menuList", menuList);
|
||||
}
|
||||
vk.setVuex("$app.inited", true);
|
||||
vk.setVuex("$user.userInfo", data.userInfo);
|
||||
vk.setVuex("$user.permission", data.userInfo.permission);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 初始化系统环境变量
|
||||
initApp() {
|
||||
let that = this;
|
||||
let { vk } = that;
|
||||
uni.getSystemInfo().then(([err, res]) => {
|
||||
let isPC = res.model && res.model != "PC" ? false : true;
|
||||
vk.setVuex("$app.isPC", isPC);
|
||||
vk.setVuex("$app.width", res.windowWidth);
|
||||
vk.setVuex("$app.height", res.windowHeight);
|
||||
});
|
||||
uni.onWindowResize(res => {
|
||||
vk.pubfn.debounce(
|
||||
function() {
|
||||
vk.setVuex("$app.width", res.size.windowWidth);
|
||||
vk.setVuex("$app.height", res.size.windowHeight);
|
||||
},
|
||||
50,
|
||||
false,
|
||||
"app-onresize"
|
||||
);
|
||||
});
|
||||
},
|
||||
// 检测用户是否可以登录admin
|
||||
isAllowLoginBackground(userInfo) {
|
||||
let that = this;
|
||||
let { vk } = that;
|
||||
if (!userInfo) userInfo = vk.getVuex("$user.userInfo");
|
||||
let key = true;
|
||||
if (vk.pubfn.isNotNull(userInfo)) {
|
||||
let { role = [], allow_login_background = false } = userInfo;
|
||||
if (role.indexOf("admin") == -1 && !allow_login_background) {
|
||||
key = false;
|
||||
}
|
||||
}
|
||||
return key;
|
||||
}
|
||||
},
|
||||
// 监听 - 页面404
|
||||
onPageNotFound(e) {
|
||||
uni.redirectTo({
|
||||
url: config.error.url
|
||||
});
|
||||
},
|
||||
onLaunch: function(options) {
|
||||
// 注意：config.debug 在正式环境时，值为false，故此{}内的代码只有开发环境才会执行
|
||||
if (config.debug) {
|
||||
console.log(
|
||||
`%c vk-admin %c v${version} `,
|
||||
"background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff",
|
||||
"background:#007aff ;padding: 1px; border-radius: 0 3px 3px 0; color: #fff; font-weight: bold;"
|
||||
);
|
||||
console.log("App Launch");
|
||||
}
|
||||
// 注意：以下代码正式和开发环境都会执行
|
||||
let that = this;
|
||||
that.vk.pubfn.needInit({
|
||||
that,
|
||||
config,
|
||||
success: function() {
|
||||
that.init();
|
||||
}
|
||||
});
|
||||
that.initApp();
|
||||
},
|
||||
onShow: function() {
|
||||
if (config.debug) console.log("App Show");
|
||||
},
|
||||
onHide: function() {
|
||||
if (config.debug) console.log("App Hide");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 此为uni-admin的样式，如果你不使用uni-admin的官方插件，可以不需要加载这些样式 */
|
||||
@import "@/common/uni-admin/css/uni.css";
|
||||
@import "@/common/uni-admin/css/uni-icons.css";
|
||||
/* 此为uni-admin的样式，如果你不使用uni-admin的官方插件，可以不需要加载这些样式 */
|
||||
</style>
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 VK
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,305 @@
|
||||
|
||||
|
||||
|
||||
### 插件名称：`vk-unicloud-admin`
|
||||
### 作者：VK
|
||||
|
||||
## 序
|
||||
* 如果你热爱编程，想快速入门云开发，欢迎使用`vk-unicloud`系列开发框架
|
||||
* 无需转变开发习惯，0成本上手云开发。
|
||||
* 框架内置了众多API、工具包，为你的业务扫平障碍。使你的项目刚起步进度就是50%（微信登录、短信、验证码、缓存、生成小程序码等等）
|
||||
* 从此你又get一个新技能，只需用js，轻松搞定前后台整体业务。
|
||||
* `client端`框架地址： [https://ext.dcloud.net.cn/plugin?id=2204](https://ext.dcloud.net.cn/plugin?id=2204)
|
||||
* `admin端`框架地址：[https://ext.dcloud.net.cn/plugin?id=5043](https://ext.dcloud.net.cn/plugin?name=vk-unicloud-admin)
|
||||
* `client端`框架文档：[点击查看](https://vkdoc.fsq.pub/client/)
|
||||
* `admin端`框架文档：[点击查看](https://vkdoc.fsq.pub/admin/)
|
||||
|
||||
#### 框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架
|
||||
|
||||
#### 框架体验地址：[点击进入『框架体验地址』](https://vkunicloud.fsq.pub/admin/)
|
||||
|
||||
#### 体验账号：
|
||||
|
||||
* 高级管理员：test11（账号）123456（密码）可以执行绝大部分功能
|
||||
* 初级管理员：test12（账号）123456（密码）只能执行查询功能
|
||||
* 无权限用户：test13（账号）123456（密码）无admin登录权限
|
||||
|
||||
[点击体验『表单可视化生成器』](https://vkunicloud.fsq.pub/vk-form-visualizer/)
|
||||
|
||||
### 什么是 `vk-unicloud-admin` ?
|
||||
|
||||
* `vk-unicloud-admin` 是基于 `uniapp` + `unicloud` + `uni-id` +`element` + `vk-unicloud-router` 的一套快速 `admin` 完整开发框架
|
||||
* （只兼容PC，只为PC admin而生，但Ta也是uniapp项目，非传统vue-admin项目，你可以用Ta来做你H5、小程序、app的admin管理端）
|
||||
|
||||
**注意：TA是uniapp项目，支持uniapp所有H5的API和插件市场所有uni-admin插件**
|
||||
|
||||
**最大亮点：使用 `vk-unicloud-admin` 后，即使你是一个纯后端，不会写任何css，照样可以写出功能强大且页面好看的admin管理系统。**
|
||||
|
||||
### `vk-unicloud-admin` 主要功能 以及 对开发者的价值
|
||||
|
||||
* 1、完美集成 `vk-unicloud-router`，拥有 `vk-unicloud-router` 的所有现成API功能。让你开发事半功倍。[点击查看](https://vkdoc.fsq.pub/client/)
|
||||
* 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、超高自由度，支持使用插槽的形式自定义已有的功能和渲染方式，也支持直接使用 `element` 原生代码来写页面。
|
||||
* 7、完善的用户角色权限，无需开发即可拥有（权限可精确到每一个云函数）。
|
||||
* 8、`pages-dev.json` 机制，开发调试页面不会被发布到正式版中。
|
||||
* 9、只要你开发过传统 `vue admin` 项目，那么上手此框架的学习成本几乎为0
|
||||
* 10、众多示例代码，为你的云开发之路扫平障碍。
|
||||
* 11、内置3个主题（纯黑，纯白，黑白）且支持自定义主题。[点击查看主题](https://vkdoc.fsq.pub/admin/1/theme.html)
|
||||
* 12、群内众多开发者，关于框架使用问题几乎有问必答。Q群：22466457
|
||||
* 13、更多功能敬请体验。
|
||||
|
||||
### 核心功能
|
||||
|
||||
#### 一、万能表格
|
||||
|
||||
核心思想：通过 JSON 配置渲染页面（简单配置一下，表格就完成了）
|
||||
|
||||
如下方JSON用于渲染头像和时间
|
||||
```js
|
||||
[
|
||||
{ key: "avatar", title: "头像", type: "avatar", width: 80, shape:"circle" },
|
||||
{ key: "_add_time", title: "添加时间", type: "time", width: 160, valueFormat:"yyyy-MM-dd hh:mm:ss" },
|
||||
]
|
||||
```
|
||||
|
||||
* 1、查询：包含分页、排序、多条件搜索、搜索项折叠、多表连表、数据源预处理、展开行、树状结构等等
|
||||
* 2、支持多选框（用于批量操作）
|
||||
* 3、自动生成详情页：点击详情按钮，自动显示详情页弹窗。
|
||||
* 4、修改：点击修改按钮，自动显示修改表单弹窗。
|
||||
* 5、删除：点击删除，显示气泡二次确认提示，再点击确定，则删除数据。
|
||||
* 6、自定义操作按钮：如发货、审核等自定义按钮。
|
||||
* 7、高自由度：每个字段都有插槽，在内置组件不满足需求的情况下，可以使用插槽自己编写该字段的渲染规则。（内置组件基本上可满足90%以上的渲染需求）
|
||||
* 8、导出excel表格：通过内置api只需一行代码即可直接导出表格数据。
|
||||
* 9、导出满足表格查询条件的数据库内所有数据（unicloud的查询有限制每次500条记录，但万能表格解决了此问题，可以导出数据库内全部数据)
|
||||
* 10、异常重试机制：一般不需要此功能，但是由于unicloud-阿里云空间会偶尔查询失败，此时此功能就派上用场了（会自动重新再查询，用户体验上只是感觉这次查询慢了一点而已（因为第一次失败了，查了2次或2次以上））
|
||||
* 11、不仅仅支持unicloud云函数请求，还支持http请求。
|
||||
* 12、支持下方自动显示合计
|
||||
* 13、更多功能敬请体验 [万能表格文档地址](https://vkdoc.fsq.pub/admin/2/table.html)
|
||||
|
||||
#### 二、万能表单
|
||||
|
||||
核心思想：通过 JSON 配置渲染表单（简单配置一下，表单就完成了）
|
||||
|
||||
如下方JSON用于渲染 一个昵称输入框 和 性别单选按钮组
|
||||
```js
|
||||
[
|
||||
{ key:"nickname", title:"昵称", type:"text" },
|
||||
{
|
||||
key:"gender", title:"性别", type:"radio",
|
||||
data:[
|
||||
{ value:1, label:"男" },
|
||||
{ value:2, label:"女" }
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
* 1、自动提交表单
|
||||
* 2、提交前自动表单验证
|
||||
* 3、防止表单重复提交（提交后按钮自动进入loading状态，不可再点击）
|
||||
* 4、同一表单可复用（如一般添加和修改的表单基本是一样的）
|
||||
* 5、表单复用时，支持字段显示规则（如添加时有A字段，修改时，无A字段等）
|
||||
* 6、拦截器：表单提交前拦截，执行自己逻辑，再放行或终止。
|
||||
* 7、高自由度：每个字段都有插槽，在内置组件不满足需求的情况下，可以使用插槽自己编写该字段的渲染规则。（内置组件基本上可满足90%以上的渲染需求）
|
||||
* 8、重置表单：一键重置表单
|
||||
* 9、表单可视化拖拽工具 [点击查看](https://vkunicloud.fsq.pub/vk-form-visualizer/#/)
|
||||
* 10、更多功能敬请体验 [万能表单文档地址](https://vkdoc.fsq.pub/admin/3/form.html)
|
||||
|
||||
`vk-unicloud-admin` 框架同时还包含 `vk-unicloud-router` 所有功能，[点击查看vk-unicloud-router功能列表](https://vkdoc.fsq.pub/client/)
|
||||
|
||||
### 同时 admin 框架内置了以下页面
|
||||
|
||||
* 1、用户管理
|
||||
* 2、角色管理
|
||||
* 3、权限管理
|
||||
* 4、菜单管理
|
||||
* 5、应用管理
|
||||
* 6、系统缓存管理
|
||||
* 7、动态组件数据
|
||||
* 8、用户登录日志
|
||||
* 9、系统操作日志
|
||||
* 10、VK框架组件演示
|
||||
* 11、element静态功能演示
|
||||
* 12、素材管理（图片、视频、文件）
|
||||
* 13、App升级中心管理（新增于1.14.0）
|
||||
* 14、持续完善中。。。
|
||||
|
||||
## 2、快速上手 - 安装步骤
|
||||
|
||||
* 1、`项目根目录` 执行 `npm i` 命令（必须先执行此npm命令，安装必要的依赖，否则会无法启动。）
|
||||
|
||||
#### 接下来是后端（云函数端）安装步骤
|
||||
|
||||
* 通常一个完整的项目分为 `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/router/service/template` 内的以下文件复制到你之前的 `client端` 项目 `uniCloud/router/service/template` 内（复制整个目录）
|
||||
* 3、把 `admin端` 内的 `uniCloud/database/db_init/` 目录下的3个数据库表数据导入对应的表内（导入方法：服务空间后台 - 数据库 - 导入）
|
||||
```js
|
||||
uni-id-roles 角色表
|
||||
uni-id-permissions 权限表
|
||||
opendb-admin-menus 菜单表
|
||||
```
|
||||
* 3、把 `admin端` 的服务空间直接绑定 `client端` 项目（注意是 `绑定` 不是 `关联`）（注意是 `绑定` 不是 `关联`）（注意是 `绑定` 不是 `关联`）
|
||||
|
||||
|
||||
|
||||
|
||||
* 4、上传 `router` 云函数
|
||||
|
||||
* 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://vkdoc.fsq.pub/admin/4/forceResetAdminPassword.html)
|
||||
|
||||
### 安装代码快捷提示步骤
|
||||
* 1、将 `根目录/使用帮助/代码快捷提示/javascript代码块提示.json` 内的代码 复制到 hbx 工具 - 代码块设置 - javascript代码块
|
||||
* 2、将 `根目录/使用帮助/代码快捷提示/vue代码块提示.json` 内的代码 复制到 hbx 工具 - 代码块设置 - vue代码块
|
||||
|
||||
### 其他
|
||||
删除 `pages.json` 内的 `pages_template/components` 和 `pages_template/element` 分包（此为发布演示版本需要而加，你的项目可以删除，删除后开发模式下依然存在（因为在`pages-dev.json`中配置了），发布到线上环境时自动屏蔽）
|
||||
|
||||
### 若提示上传云函数失败，请仔细对比下你的项目 `uniCloud/common` 目录是否跟下图完全一致
|
||||
|
||||
|
||||
|
||||
如果不一致，特别是 `uni-id` 目录下没有这个文件 `uni-id/node_modules/uni-config-center/uni-id/config.json`，则在 `uni-id` 目录执行 `npm i` 试试（如果有这个`uni-id/node_modules`目录，先删除目录，再执行npm i）
|
||||
|
||||
### 若新建的用户登录提示用户不存在（数据库明明有数据），此时是因为不同端用户隔离导致的
|
||||
|
||||
* 1、先用admin账号登录后台，进入应用管理
|
||||
|
||||
因为每个人的 `DCloud Appid`是不一样的，所以你需要在应用管理中添加自己的应用（或直接修改内置的2条数据的appid即可）
|
||||
|
||||
`DCloud Appid` 获取方法
|
||||
|
||||
复制 `uniapp` 项目根目录的 `manifest.json` 文件内的 `appid`
|
||||
|
||||
|
||||
|
||||
* 2、再进入用户管理，对需要设置的用户点击编辑，设置该用户可以登录哪些端。
|
||||
|
||||
|
||||
|
||||
* 3、完成，可以登录了。
|
||||
|
||||
|
||||
#### 如有疑问，请加群：22466457 关于插件的问题包教包会！
|
||||
|
||||
[点击查看『完整安装步骤』](https://vkdoc.fsq.pub/admin/1/quickstart.html)
|
||||
|
||||
## 3、框架目录结构
|
||||
|
||||
[点击查看『目录结构』](https://vkdoc.fsq.pub/admin/1/catalogue.html)
|
||||
|
||||
## 4、万能表格
|
||||
|
||||
[点击查看『万能表格』](https://vkdoc.fsq.pub/admin/2/table.html)
|
||||
|
||||
## 5、万能表单
|
||||
|
||||
[点击查看『万能表单』](https://vkdoc.fsq.pub/admin/3/form.html)
|
||||
|
||||
[点击查看『表单可视化生成器』](https://vkunicloud.fsq.pub/vk-form-visualizer/)
|
||||
|
||||
## 6、用户角色权限
|
||||
|
||||
[点击查看『用户角色权限』](https://vkdoc.fsq.pub/admin/4/role.html)
|
||||
|
||||
## 7、创建我的第一个带CRUD的页面
|
||||
|
||||
[点击查看『如何创建我的第一个带CRUD的页面』](https://vkdoc.fsq.pub/admin/5/template.html)
|
||||
|
||||
## 8、HBX代码块提示
|
||||
|
||||
[点击查看『HBX代码块提示』](https://vkdoc.fsq.pub/admin/4/codeTips.html)
|
||||
|
||||
## 9、admin框架更新步骤指南
|
||||
|
||||
[点击查看『admin框架更新步骤指南』](https://vkdoc.fsq.pub/admin/1/update.html)
|
||||
|
||||
## 10、强制重置admin账号密码
|
||||
|
||||
[点击查看『强制重置admin账号密码』](https://vkdoc.fsq.pub/admin/4/forceResetAdminPassword.html)
|
||||
|
||||
## 11、admin框架内置组件参数说明
|
||||
|
||||
[点击查看『admin框架内置组件参数说明』](https://vkdoc.fsq.pub/admin/components/1%E3%80%81text.html)
|
||||
|
||||
## 20、云函数开发文档
|
||||
|
||||
[点击查看『云函数开发文档』](https://vkdoc.fsq.pub/client/uniCloud/cloudfunctions/catalogue.html)
|
||||
|
||||
## 21、vk.baseDao数据库API
|
||||
|
||||
[点击查看『vk.baseDao』数据库API](https://vkdoc.fsq.pub/client/uniCloud/db/api.html)
|
||||
|
||||
## 22、数据库缓存API
|
||||
|
||||
[点击查看『数据库缓存API』](https://vkdoc.fsq.pub/client/uniCloud/cache/cache.html)
|
||||
|
||||
## 23、中间件开发文档
|
||||
|
||||
[点击查看『中间件开发文档』](https://vkdoc.fsq.pub/client/uniCloud/middleware/filter.html)
|
||||
|
||||
## 24、JS API文档大全
|
||||
|
||||
[点击查看『JS API文档大全』](https://vkdoc.fsq.pub/client/jsapi.html)
|
||||
|
||||
## 25、前端请求云函数
|
||||
|
||||
[点击查看『前端请求云函数』](https://vkdoc.fsq.pub/client/pages/callFunction.html)
|
||||
|
||||
## 26、配置前端非法token拦截器
|
||||
|
||||
[点击查看『前端请求云函数』](https://vkdoc.fsq.pub/client/pages/interceptor1.html)
|
||||
|
||||
## 27、配置前端全局异常拦截器
|
||||
|
||||
[点击查看『前端请求云函数』](https://vkdoc.fsq.pub/client/pages/interceptor2.html)
|
||||
|
||||
## 28、vuex使用文档
|
||||
|
||||
[点击查看『vuex使用文档』](https://vkdoc.fsq.pub/client/pages/vuex.html)
|
||||
|
||||
## 29、更多其他功能敬请在框架内体验
|
||||
|
||||
### vk-unicloud-admin 框架研究Q群:`22466457` 如有问题或建议可以在群内讨论。
|
||||
|
||||
### 如果你觉得框架对你有用，可以在下方进行评论，也可以进行赞赏。
|
||||
+135
@@ -0,0 +1,135 @@
|
||||
// 引入自定义公共函数
|
||||
import myPubFunction from '@/common/function/myPubFunction.js'
|
||||
// 引入静态菜单
|
||||
import staticMenu from '@/app.config.menu.js'
|
||||
// 引入主题配置文件
|
||||
import themeConfig from '@/common/theme/index.js'
|
||||
export default {
|
||||
// 开发模式启用调式模式(请求时会打印日志)
|
||||
debug: process.env.NODE_ENV !== "production",
|
||||
// 主云函数名称
|
||||
functionName: "router",
|
||||
// 登录页面路径
|
||||
login: {
|
||||
url: "/pages/login/index",
|
||||
testUser: {
|
||||
show: false, // 是否显示
|
||||
list: [
|
||||
{ username: "test11", password: "123456", nickname: "高级管理员" },
|
||||
{ username: "test12", password: "123456", nickname: "初级管理员" },
|
||||
{ username: "test13", password: "123456", nickname: "无权限用户" }
|
||||
]
|
||||
}
|
||||
},
|
||||
// 首页页面路径
|
||||
index: {
|
||||
url: '/pages/index/index'
|
||||
},
|
||||
// 404 Not Found 错误页面路径
|
||||
error: {
|
||||
url: "/pages_plugs/error/404"
|
||||
},
|
||||
// 前端默认时区（中国为8）
|
||||
targetTimezone:8,
|
||||
globalError: true, // 是否开启全局错误提示
|
||||
// 需要检查是否登录的页面列表
|
||||
// let { mode, list } = config.checkTokenPages
|
||||
checkTokenPages: {
|
||||
/**
|
||||
* 如果 mode = 0 则代表自动检测
|
||||
* 如果 mode = 1 则代表list内的页面需要登录，不在list内的页面不需要登录
|
||||
* 如果 mode = 2 则代表list内的页面不需要登录，不在list内的页面需要登录
|
||||
* 注意1: list内是通配符表达式，非正则表达式
|
||||
* 在无需登录的页面上执行kh或sys函数，也会自动判断是否登录，未登录会自动跳登录页面，登录成功后会自动返回本来要跳转的页面。
|
||||
*/
|
||||
mode: 2,
|
||||
list: [
|
||||
"/pages/login/*",
|
||||
"/pages_template/*",
|
||||
]
|
||||
},
|
||||
// 静态文件的资源URL地址
|
||||
staticUrl: {
|
||||
// 顶部导航
|
||||
navBar: {
|
||||
// 正方形 Logo 160*160
|
||||
logo: "/static/logo.png",
|
||||
// 长方形 Logo 224*160
|
||||
logo1: "/static/logo1.png",
|
||||
// 横幅 Logo 480*100
|
||||
logo2: "/static/logo2.png"
|
||||
},
|
||||
},
|
||||
// 自定义公共函数，myPubFunction内的函数可通过vk.myfn.xxx() 调用
|
||||
myfn: myPubFunction,
|
||||
// 第三方服务配置
|
||||
service: {
|
||||
// 阿里云oss配置
|
||||
aliyunOSS: {
|
||||
// 密钥和签名信息 (由于签名的获取比较麻烦,建议初学者使用上传到unicloud的方案,上传到阿里云OSS是给有特殊需求的用户使用)
|
||||
// 相关文档 : https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.1757.b7987d9czoFCVu
|
||||
uploadData: {
|
||||
OSSAccessKeyId: "",
|
||||
policy: "",
|
||||
signature: "",
|
||||
},
|
||||
// oss上传地址
|
||||
action: "",
|
||||
// 根目录名称
|
||||
dirname: "",
|
||||
// oss外网访问地址，也可以是阿里云cdn地址
|
||||
host: "",
|
||||
// 上传时,是否按用户id进行分组储存
|
||||
groupUserId: true,
|
||||
// vk.callFunctionUtil.uploadFile 是否默认上传到阿里云OSS
|
||||
isDefault: false
|
||||
}
|
||||
},
|
||||
// 全局异常码，可以自定义提示结果
|
||||
globalErrorCode: {
|
||||
// 阿里云10秒非正常超时，其实请求还在执行（且一般已经成功了，但前端接受不到成功结果）
|
||||
"cloudfunction-unusual-timeout": "请求超时，但请求还在执行，请重新进入页面。",
|
||||
// 请求超时（真正的请求超时）
|
||||
"cloudfunction-timeout": "请求超时，请重试！",
|
||||
// 不在预期内的异常（如数据库异常、云函数编译异常等）
|
||||
"cloudfunction-system-error": "网络开小差了！"
|
||||
},
|
||||
// 页面风格
|
||||
pageStyle: {
|
||||
// 表单组件和表格组件的size
|
||||
size: "auto", // medium / small / mini / auto
|
||||
},
|
||||
// 左侧菜单
|
||||
sideBar: {
|
||||
// 配置静态菜单列表
|
||||
"staticMenu": staticMenu
|
||||
},
|
||||
// 主题配置
|
||||
theme: {
|
||||
// 当前使用哪个主题
|
||||
use: "blackWhite", // white blackWhite black custom
|
||||
...themeConfig,
|
||||
// 自定义主题
|
||||
custom: {
|
||||
// 左侧菜单样式
|
||||
leftMenu: {
|
||||
backgroundColor: "",
|
||||
subBackgroundColor: "",
|
||||
textColor: "",
|
||||
activeTextColor: "",
|
||||
activeBackgroundColor: "",
|
||||
collapseActiveTextColor:"",
|
||||
collapseActiveBackgroundColor: "",
|
||||
hoverTextColor: "",
|
||||
hoverBackgroundColor: "",
|
||||
boxShadow: "",
|
||||
borderTop: ""
|
||||
},
|
||||
// 顶部菜单样式
|
||||
topMenu: {
|
||||
backgroundColor: "",
|
||||
textColor: "",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
const debug = process.env.NODE_ENV !== 'production';
|
||||
// 开发环境和正式环境中都会显示的静态菜单
|
||||
import menus from './static_menu/menu.json'
|
||||
// 只在开发环境中显示的静态菜单
|
||||
import devMenus from './static_menu/menu-dev.json'
|
||||
var menusList = [];
|
||||
if (debug && devMenus) {
|
||||
menusList = menus.concat(devMenus);
|
||||
} else {
|
||||
menusList = menus;
|
||||
}
|
||||
|
||||
export default menusList;
|
||||
+1748
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,14 @@
|
||||
* 【升级】`vk-unicloud-admin-ui` 包升级至 `1.17.45`
|
||||
* 【调整】`万能表单` `vk-data-input-editor` 组件的js依赖内置到项目里，防止因quill官方CDN无法访问导致editor组件渲染失败的问题
|
||||
* 【修复】`万能表单` 部分复杂情况下表单验证未生效的问题
|
||||
* 【修复】`万能表格` `object` 内 `oneLine:true` 不生效的bug
|
||||
* 【修复】`万能表单` `object` 内 `disabled` 不生效的bug
|
||||
* 【修复】`万能表格` `:searched-clean-selection="false"` 时，分页会导致多选框清空的问题
|
||||
* 【修复】`万能表格` 点击右侧按钮时可能会出现请先选中一行的bug
|
||||
* 【优化】`pages_plugs/system_uni/vk-pay-orders.vue`页面新增支付渠道区分
|
||||
* 【优化】`万能表格` 导出的文件名支持自定义扩展名
|
||||
* 【优化】`万能表格` 新增 `getRowIndex` 方法
|
||||
|
||||
##### 框架更新步骤 [点击查看](https://vkdoc.fsq.pub/admin/1/update.html)
|
||||
##### 框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架
|
||||
##### 如果你觉得框架对你有用，可以在下方进行评论或赞赏。
|
||||
@@ -0,0 +1,47 @@
|
||||
/* 这里是你自己写的全局css样式 */
|
||||
|
||||
/* 滚动条美化方案开始 去掉下方css的注释即可 */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(135, 135, 135, 0.1);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(135, 135, 135, 0.4);
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(135, 135, 135, 0.8);
|
||||
}
|
||||
|
||||
/* 滚动条美化方案结束 */
|
||||
|
||||
/* 富文本编辑器样式开始 */
|
||||
.ql-indent-1{
|
||||
padding-left: 3em;
|
||||
}
|
||||
.ql-indent-2{
|
||||
padding-left: 6em;
|
||||
}
|
||||
.ql-indent-3{
|
||||
padding-left: 9em;
|
||||
}
|
||||
.ql-indent-4{
|
||||
padding-left: 12em;
|
||||
}
|
||||
.ql-indent-5{
|
||||
padding-left: 15em;
|
||||
}
|
||||
.ql-indent-6{
|
||||
padding-left: 18em;
|
||||
}
|
||||
.ql-indent-7{
|
||||
padding-left: 21em;
|
||||
}
|
||||
.ql-indent-8{
|
||||
padding-left: 24em;
|
||||
}
|
||||
/* 富文本编辑器样式结束 */
|
||||
@@ -0,0 +1,104 @@
|
||||
// 这里是uni-app内置的常用样式变量
|
||||
|
||||
// uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
// 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
|
||||
|
||||
// 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
|
||||
// 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
|
||||
|
||||
// 颜色变量
|
||||
|
||||
// 行为相关颜色
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
// 文字基本颜色
|
||||
$uni-text-color:#333; // 基本色
|
||||
$uni-text-color-inverse:#fff; // 反色
|
||||
$uni-text-color-grey:#999; // 辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
// 背景颜色
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1; //点 击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4); // 遮罩颜色
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-color:#e4e7ed;
|
||||
|
||||
// 尺寸变量
|
||||
|
||||
// 文字尺寸
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
|
||||
// 图片尺寸
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
// Border Radius
|
||||
$uni-border-radius-sm: 3px;
|
||||
$uni-border-radius-base: 5px;
|
||||
$uni-border-radius-lg: 10px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
// 水平间距
|
||||
$uni-spacing-row-sm: 10px;
|
||||
$uni-spacing-row-base: 15px;
|
||||
$uni-spacing-row-lg: 20px;
|
||||
|
||||
// 垂直间距
|
||||
$uni-spacing-col-sm: 5px;
|
||||
$uni-spacing-col-base: 10px;
|
||||
$uni-spacing-col-lg: 15px;
|
||||
|
||||
// 透明度
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
// 文章场景相关
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:18px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:14px;
|
||||
|
||||
|
||||
$menu-bg-color:#fff; // 一级菜单背景色
|
||||
$sub-menu-bg-color:darken($menu-bg-color, 8%); // 二级以下菜单背景色
|
||||
$menu-bg-color-hover:darken($menu-bg-color, 15%); // 菜单 hover 背景颜色
|
||||
|
||||
$menu-text-color: #333; // 菜单前景色
|
||||
$menu-text-color-actived: #409eff; // 菜单激活前景色
|
||||
|
||||
$left-window-bg-color: $menu-bg-color; // 左侧窗口背景色
|
||||
|
||||
$top-window-bg-color: #fff; // 顶部窗口背景色
|
||||
$top-window-text-color: #999; // 顶部窗口前景色
|
||||
// 水平垂直居中
|
||||
@mixin flex_center_center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
// 换行居中
|
||||
@mixin flex_direction_center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
// 水平可换行居中
|
||||
@mixin flex_justify_center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* 自定义公共函数
|
||||
*/
|
||||
var myfn = {};
|
||||
/**
|
||||
* 测试函数test1
|
||||
* vk.myfn.test1();
|
||||
*/
|
||||
myfn.test1 = function(obj = {}) {
|
||||
let vk = uni.vk;
|
||||
console.log("执行了自定义公共函数test1");
|
||||
return obj;
|
||||
};
|
||||
|
||||
export default myfn;
|
||||
@@ -0,0 +1,23 @@
|
||||
// 纯黑主题
|
||||
export default {
|
||||
// 左侧菜单样式
|
||||
leftMenu: {
|
||||
backgroundColor: "#191a23",
|
||||
subBackgroundColor:"#101117",
|
||||
textColor: "rgba(255,255,255,0.9)",
|
||||
activeTextColor: "#ffffff",
|
||||
activeBackgroundColor: "#2d8cf0",
|
||||
collapseActiveTextColor:"#2d8cf0",
|
||||
collapseActiveBackgroundColor: "#2c3239",
|
||||
hoverTextColor: "#ffffff",
|
||||
hoverBackgroundColor: "#545f6c",
|
||||
boxShadow: "0px 0 0px rgba(0,21,4,0.2)",
|
||||
//boxShadow: "2px 0 2px rgba(0,21,4,0.2)",
|
||||
//borderTop: "1px solid #101117"
|
||||
},
|
||||
// 顶部菜单样式
|
||||
topMenu: {
|
||||
backgroundColor: "#191a23",
|
||||
textColor: "#f0f0f0",
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
// 黑白主题（左侧菜单黑，顶部白）
|
||||
export default {
|
||||
// 左侧菜单样式
|
||||
leftMenu: {
|
||||
backgroundColor: "#191a23",
|
||||
subBackgroundColor:"#101117",
|
||||
textColor: "rgba(255,255,255,0.9)",
|
||||
activeTextColor: "#ffffff",
|
||||
activeBackgroundColor: "#2d8cf0",
|
||||
collapseActiveTextColor:"#2d8cf0",
|
||||
collapseActiveBackgroundColor: "#2c3239",
|
||||
hoverTextColor: "#ffffff",
|
||||
hoverBackgroundColor: "#545f6c",
|
||||
boxShadow: "0px 0 0px rgba(0,21,4,0.25)",
|
||||
//boxShadow: "2px 0 4px rgba(0,21,4,0.25)",
|
||||
//borderTop: "1px solid #101117"
|
||||
},
|
||||
// 顶部菜单样式
|
||||
topMenu: {
|
||||
backgroundColor: "#ffffff",
|
||||
textColor: "#999999",
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import white from './white.js'
|
||||
import black from './black.js'
|
||||
import blackWhite from './blackWhite.js'
|
||||
|
||||
export default {
|
||||
white,
|
||||
black,
|
||||
blackWhite
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
// 纯白主题
|
||||
export default {
|
||||
// 左侧菜单样式
|
||||
leftMenu: {
|
||||
backgroundColor: "#ffffff",
|
||||
subBackgroundColor:"#ffffff",
|
||||
textColor: "#303133",
|
||||
activeTextColor: "#409EFF",
|
||||
activeBackgroundColor: "#ecf5ff",
|
||||
collapseActiveTextColor:"#409EFF",
|
||||
collapseActiveBackgroundColor: "#ecf5ff",
|
||||
hoverTextColor: "#303133",
|
||||
hoverBackgroundColor: "#efefef",
|
||||
boxShadow: "0px 0 0px 0 rgba(29,35,41,0.05)",
|
||||
//boxShadow: "2px 0 0px 0 rgba(29,35,41,0.05)",
|
||||
borderTop: "1px solid #f8f8f9"
|
||||
},
|
||||
// 顶部菜单样式
|
||||
topMenu: {
|
||||
backgroundColor: "#ffffff",
|
||||
textColor: "#999999",
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,543 @@
|
||||
/* 全局公共样式 */
|
||||
|
||||
/* body,
|
||||
html {
|
||||
-webkit-user-select: auto;
|
||||
user-select: auto;
|
||||
font-size: 16px;
|
||||
} */
|
||||
|
||||
/* #ifdef H5 */
|
||||
|
||||
.uni-app--showleftwindow uni-main {
|
||||
position: relative;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-mask+.uni-left-window,
|
||||
.uni-mask+.uni-right-window {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.uni-app--showleftwindow uni-page-head .uni-page-head {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
uni-page-head .uni-btn-icon {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.uni-app--showleftwindow uni-page-head[uni-page-head-type=default]~uni-page-wrapper {
|
||||
height: auto;
|
||||
padding-top: 59px;
|
||||
}
|
||||
|
||||
/* .uni-app--showleftwindow uni-page-head~uni-page-wrapper uni-page-body {
|
||||
padding-top: 44px;
|
||||
} */
|
||||
|
||||
/*
|
||||
.uni-app--showleftwindow uni-page-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.uni-app--showleftwindow uni-page-body {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
box-shadow: -1px -1px 5px 0 rgba(0, 0, 0, .1);
|
||||
background-color: #fff;
|
||||
} */
|
||||
|
||||
.uni-app--showleftwindow .uni-container .uni-forms {
|
||||
padding: 15px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
.uni-nav-menu {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uni-top-window {
|
||||
z-index: 998;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.uni-tips {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 容器 */
|
||||
.uni-container {
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 标题栏 */
|
||||
.uni-header {
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
min-height: 55px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px #f5f5f5 solid;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.uni-title {
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-sub-title {
|
||||
margin-top: 3px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.uni-link {
|
||||
color: #3A8EE6;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.uni-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.uni-button-group {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-button {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.uni-group .uni-button {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.uni-group .uni-search {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.uni-group>.uni-button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.uni-button:hover,
|
||||
.uni-button:focus {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.uni-button:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-button-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 搜索框样式 */
|
||||
.uni-search {
|
||||
width: 268px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
padding: 0 10px;
|
||||
border: 1px #dcdfe6 solid;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 分页容器 */
|
||||
.uni-pagination-box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.uni-input-border,
|
||||
.uni-textarea-border {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
border: 1px #e5e5e5 solid;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-input-border {
|
||||
padding: 0 10px;
|
||||
height: 35px;
|
||||
|
||||
}
|
||||
|
||||
.uni-textarea-border {
|
||||
padding: 10px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.uni-disabled {
|
||||
background-color: #F5F7FA;
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
.uni-icon-password-eye {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 6px;
|
||||
font-family: uniicons;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.uni-eye-active {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.uni-tabs__header {
|
||||
position: relative;
|
||||
background-color: #f5f7fa;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.uni-tabs__nav-wrap {
|
||||
overflow: hidden;
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-tabs__nav-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-tabs__nav {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.uni-tabs__item {
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #909399;
|
||||
margin-top: -1px;
|
||||
margin-left: -1px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uni-tabs__item.is-active {
|
||||
color: #007aff;
|
||||
background-color: #fff;
|
||||
border-right-color: #dcdfe6;
|
||||
border-left-color: #dcdfe6;
|
||||
}
|
||||
|
||||
.uni-form-item-tips {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
|
||||
}
|
||||
|
||||
.uni-form-item-empty {
|
||||
color: #999;
|
||||
min-height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item__label .label-text {
|
||||
color: #606266 !important;
|
||||
}
|
||||
|
||||
::v-deep .flex-center-x .uni-forms-item__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
line-height: 26px;
|
||||
margin-top: 5px;
|
||||
color: #007AFF;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* button 重置样式 */
|
||||
::v-deep button[size=mini] {
|
||||
line-height: 2.4;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button[type=primary] {
|
||||
background-color: #409EFF;
|
||||
border-color: #409EFF;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
button[type=warn] {
|
||||
background-color: #f56c6c;
|
||||
border-color: #f56c6c;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
button[type=default] {
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button[type=primary][plain] {
|
||||
border-color: #409EFF;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
button[type=warn][plain] {
|
||||
border-color: #f56c6c;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
button[type=default][plain] {
|
||||
border-color: #dcdfe6;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
button[plain] {
|
||||
border-color: #dcdfe6;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
button:after {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.uni-input-placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
.uni-pagination-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.select-picker {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.select-picker button {
|
||||
margin-top: 5px;
|
||||
line-height: 29px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.select-picker button text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.select-picker-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
/* stat style start */
|
||||
.m-m {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.mb-s {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mb-m {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.mb-l {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.ml-s {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ml-m {
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
|
||||
.ml-l {
|
||||
margin-left: 30px !important;
|
||||
}
|
||||
|
||||
.p-m {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.uni-charts-box {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.uni-stat--x {
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px -1px 5px 0 rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.uni-stat__actived {
|
||||
outline: 1px solid #2979ff;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
margin: auto 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.uni-stat-edit--x {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uni-stat-edit--btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uni-stat-datetime-picker {
|
||||
margin: 15px
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
@media screen and (max-width: 500px) {
|
||||
.hide-on-phone {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.uni-charts-box {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.uni-group .uni-search {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
margin: 20px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.uni-header {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.uni-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-stat-breadcrumb-on-phone {
|
||||
padding: 0 20px !important;
|
||||
border-bottom: 1px #f5f5f5 solid;
|
||||
}
|
||||
|
||||
.uni-stat-datetime-picker {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.dispaly-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 15px;
|
||||
}
|
||||
|
||||
.pc-flex-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-stat-datetime-picker {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
.fix-top-window {
|
||||
margin-top: 85px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
@@ -0,0 +1,35 @@
|
||||
### 此目录为 `uni-admin` 官方模板的一些样式文件
|
||||
|
||||
* 如果你需要引入 `uni-admin` 官方的一些插件，如[升级中心](https://ext.dcloud.net.cn/plugin?id=4470)
|
||||
* 你可能会碰到样式错乱的问题，那是因为 `vk-uni-admin` 并没有引入 `uni-admin` 的公共样式
|
||||
* 但框架已经帮你整理好了公共样式的文件，就在 `common/uni-admin` 目录内
|
||||
|
||||
### 在 `App.vue` 中引入 `uni-admin` 的公共样式
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
@import '@/common/uni-admin/css/uni.css';
|
||||
@import '@/common/uni-admin/css/uni-icons.css';
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 同时官方的插件一般是不通过 `云函数` 获取数据的，而是通过 `clientDB` 操作数据库（前端操作数据库）
|
||||
|
||||
* 因此，你需要上传一些数据库的 `schema.json` 文件
|
||||
|
||||
### 如 `升级中心` 需要上传以下两个 `schema.json` 文件
|
||||
|
||||
**特别注意：如果 `admin项目` 是绑定 `client项目`，则需要复制到 `client项目` 的 `uniCloud/database/`目录去上传**
|
||||
|
||||
* opendb-app-list.schema.json
|
||||
* opendb-app-versions.schema.json
|
||||
|
||||
#### 这些 `schema.json` 文件一般在插件包里就有，直接右键点击对应的文件即可上传。
|
||||
|
||||
* 如升级中心的 `schema.json` 目录在 `uni_modules/uni-upgrade-center/uniCloud/database/opendb-app-list.schema.json`
|
||||
|
||||
* 同时一般插件还会有一个自己的 `db_init.json` 文件 如 `uni_modules/uni-upgrade-center/uniCloud/database/db_init.json` （也是右键上传）
|
||||
|
||||
* 如还有样式问题，建议重启项目试试。
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,55 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import config from '@/app.config.js'
|
||||
|
||||
// 引入 elementUI
|
||||
import elementUI from "element-ui";
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.use(elementUI);
|
||||
|
||||
// 引入 高性能表格UI 组件
|
||||
import UmyUi from 'umy-ui'
|
||||
import 'umy-ui/lib/theme-chalk/index.css';
|
||||
Vue.use(UmyUi);
|
||||
|
||||
// 引入 vk 实例
|
||||
import vk from 'uni_modules/vk-unicloud';
|
||||
Vue.use(vk);
|
||||
|
||||
// 初始化 vk框架
|
||||
Vue.prototype.vk.init({
|
||||
Vue, // Vue实例
|
||||
config, // 配置
|
||||
});
|
||||
|
||||
// 引入 vkAdminUI 组件
|
||||
import vkAdminUI from 'vk-unicloud-admin-ui';
|
||||
import 'vk-unicloud-admin-ui/theme/index.css';
|
||||
Vue.use(vkAdminUI);
|
||||
|
||||
// 自动注册全局组件（必须加在Vue.use(vkAdminUI);的后面）
|
||||
const modulesFiles = require.context('./components', true, /\.vue$/);
|
||||
modulesFiles.keys().map((modulePath, index) => {
|
||||
const moduleNames = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
|
||||
const moduleSplit = moduleNames.split("/");
|
||||
const moduleName = moduleSplit[0];
|
||||
if (moduleSplit.length === 2 && moduleName === moduleSplit[1]) {
|
||||
const value = modulesFiles(modulePath);
|
||||
let moduleItem = value.default;
|
||||
Vue.component(moduleName, moduleItem);
|
||||
}
|
||||
});
|
||||
|
||||
// 引入 自定义全局css 样式
|
||||
import '@/common/css/app.scss';
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
App.mpType = 'app'
|
||||
|
||||
const app = new Vue({
|
||||
store,
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"name" : "jinjiuxin-admin",
|
||||
"appid" : "__UNI__E3B97BE",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
"modules" : {},
|
||||
"distribute" : {
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
"ios" : {},
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
"quickapp" : {},
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"h5" : {
|
||||
"template" : "template.h5.html",
|
||||
"router" : {
|
||||
"mode" : "hash",
|
||||
"base" : "/admin/"
|
||||
},
|
||||
"devServer" : {
|
||||
"disableHostCheck" : true
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"maps" : {
|
||||
"qqmap" : {
|
||||
"key" : "3EXBZ-3NYCW-L5MRG-ONN2B-FJYR6-H7BSU"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vueVersion" : "2"
|
||||
}
|
||||
Generated
+125
@@ -0,0 +1,125 @@
|
||||
{
|
||||
"name": "vk-unicloud-admin",
|
||||
"version": "1.17.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"async-validator": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
|
||||
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
|
||||
"requires": {
|
||||
"babel-runtime": "6.x"
|
||||
}
|
||||
},
|
||||
"babel-helper-vue-jsx-merge-props": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
||||
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
|
||||
},
|
||||
"babel-runtime": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
|
||||
"requires": {
|
||||
"core-js": "^2.4.0",
|
||||
"regenerator-runtime": "^0.11.0"
|
||||
}
|
||||
},
|
||||
"core-js": {
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
|
||||
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
|
||||
},
|
||||
"deepmerge": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
|
||||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.15.13",
|
||||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.13.tgz",
|
||||
"integrity": "sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==",
|
||||
"requires": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
"deepmerge": "^1.2.0",
|
||||
"normalize-wheel": "^1.0.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"throttle-debounce": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"normalize-wheel": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
|
||||
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
|
||||
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"sortablejs": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
|
||||
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
|
||||
},
|
||||
"throttle-debounce": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
|
||||
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
|
||||
},
|
||||
"umy-table": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/umy-table/-/umy-table-1.1.8.tgz",
|
||||
"integrity": "sha512-yqPMFwZ6MUNqI73KamsNKBTbHRA7VuVZDEWobaySghtf4n/s7INuTNQoADB/ROVK57WOXr99Xpnol0aMqGlASA==",
|
||||
"requires": {
|
||||
"async-validator": "~1.8.1",
|
||||
"deepmerge": "^1.2.0",
|
||||
"normalize-wheel": "^1.0.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"throttle-debounce": "^1.0.1",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"xe-utils": "^3.0.0-beta.12"
|
||||
}
|
||||
},
|
||||
"umy-ui": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/umy-ui/-/umy-ui-1.1.6.tgz",
|
||||
"integrity": "sha512-wX0S29B5sFn8q0MvU9PEl8DGZeQmZXOJlLrwaCJ2UHiIQZCANWgXMBjjQgpaequ1gRZ8BekEu7Sn7hJccm9YMQ==",
|
||||
"requires": {
|
||||
"async-validator": "~1.8.1",
|
||||
"deepmerge": "^1.2.0",
|
||||
"normalize-wheel": "^1.0.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"throttle-debounce": "^1.0.1",
|
||||
"umy-table": "1.1.8",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"xe-utils": "^3.0.0-beta.12"
|
||||
}
|
||||
},
|
||||
"vk-unicloud-admin-ui": {
|
||||
"version": "1.17.46",
|
||||
"resolved": "https://registry.npmjs.org/vk-unicloud-admin-ui/-/vk-unicloud-admin-ui-1.17.46.tgz",
|
||||
"integrity": "sha512-VJvi8Gm3mfZOFEilIrZ1bSoi192ov9hPzSFzkR6l62pqJ3UEwgjTr5L2gQqxw4twb+y5qDmWZPS4dQMwya+iiQ=="
|
||||
},
|
||||
"vuedraggable": {
|
||||
"version": "2.24.3",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
|
||||
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
|
||||
"requires": {
|
||||
"sortablejs": "1.10.2"
|
||||
}
|
||||
},
|
||||
"xe-utils": {
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmjs.org/xe-utils/-/xe-utils-3.5.13.tgz",
|
||||
"integrity": "sha512-ORT6ghCRk0mUVavMBxetcPzUPskS6NGfntzpWazJ86e+XU0uK4HwHfDhN/jKATiyInrOH5RwQo9SO/+DB8XeBw=="
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
{
|
||||
"id": "vk-unicloud-admin",
|
||||
"name": "vk-unicloud-admin",
|
||||
"version": "1.17.3",
|
||||
"displayName": "【开箱即用】vk-unicloud-admin-快速开发框架-打造unicloud最好用的admin",
|
||||
"description": "vk-unicloud-admin是基于uniapp+unicloud+uni-id+vk-router+element的一套快速PC admin企业级开发框架。小白几分钟即完成一个页面CRUD。",
|
||||
"keywords": [
|
||||
"vk-unicloud-admin",
|
||||
"支持表单可视化拖拽生成代码",
|
||||
"vk云开发",
|
||||
"uniapp、uni-id、vk-unicloud-router、vk-admin、element",
|
||||
"内置众多API、工具包"
|
||||
],
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": "https://gitee.com/vk-uni/vk-unicloud-admin",
|
||||
"author": "VK",
|
||||
"license": "MIT",
|
||||
"homepage": "https://vkdoc.fsq.pub/admin/",
|
||||
"dependencies": {
|
||||
"element-ui": "2.15.13",
|
||||
"umy-ui": "1.1.6",
|
||||
"vk-unicloud-admin-ui": "^1.17.45"
|
||||
},
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.10"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "370725567"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://vkdoc.fsq.pub/admin/",
|
||||
"type": "unicloud-template-project"
|
||||
},
|
||||
"uni_modules": {
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "n",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "n",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "n",
|
||||
"阿里": "n",
|
||||
"百度": "n",
|
||||
"字节跳动": "n",
|
||||
"QQ": "n",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "n"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
{
|
||||
"subPackages": [{
|
||||
"root": "pages_template/components",
|
||||
"pages": [
|
||||
{ "path": "icons/vk-icons" },
|
||||
{ "path": "icons/element-icons" },
|
||||
{ "path": "table/table-basic" },
|
||||
{ "path": "table/table-easy" },
|
||||
{ "path": "table/table-query" },
|
||||
{ "path": "table/table-expand" },
|
||||
{ "path": "form/form-array-object" },
|
||||
{ "path": "form/form-basic" },
|
||||
{ "path": "form/form-inline" },
|
||||
{ "path": "form/form-dialog" },
|
||||
{ "path": "form/form-pro" },
|
||||
{ "path": "form/form-dialog-2" },
|
||||
{ "path": "form/form-slot" },
|
||||
{ "path": "detail/detail-basic" },
|
||||
{ "path": "detail/detail-table" },
|
||||
{ "path": "dialog/dialog-basic" },
|
||||
{ "path": "dialog/dialog-form" },
|
||||
{ "path": "dialog/dialog-table" },
|
||||
{ "path": "upload/upload-basic" },
|
||||
{ "path": "upload/upload-drag" },
|
||||
{ "path": "input/input-address" },
|
||||
{ "path": "input/input-money" },
|
||||
{ "path": "input/input-number" },
|
||||
{ "path": "input/input-number-box" },
|
||||
{ "path": "input/input-percentage" },
|
||||
{ "path": "input/input-json" },
|
||||
{ "path": "input/input-province" },
|
||||
{ "path": "input/input-select" },
|
||||
{ "path": "input/input-remote-select" },
|
||||
{ "path": "input/input" },
|
||||
{ "path": "editor/editor" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages_template/element",
|
||||
"pages": [
|
||||
{ "path": "detail/detail" },
|
||||
{ "path": "form/basic-form" },
|
||||
{ "path": "form/advanced-form" },
|
||||
{ "path": "form/step-form" },
|
||||
{ "path": "setting/account" },
|
||||
{ "path": "popup/alert" },
|
||||
{ "path": "popup/dialog" },
|
||||
{ "path": "popup/drawer" },
|
||||
{ "path": "popup/loading" },
|
||||
{ "path": "popup/message" },
|
||||
{ "path": "popup/message-box" },
|
||||
{ "path": "popup/notification" },
|
||||
{ "path": "popup/popconfirm" },
|
||||
{ "path": "popup/popover" },
|
||||
{ "path": "popup/tooltip" },
|
||||
{ "path": "result/fail" },
|
||||
{ "path": "result/success" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
const debug = process.env.NODE_ENV !== 'production';
|
||||
var devPages;
|
||||
try {
|
||||
// 只在开发环境中才会被HBX打包的页面
|
||||
devPages = require('./pages-dev.json');
|
||||
} catch (err) {}
|
||||
module.exports = function(pagesJson){
|
||||
try {
|
||||
let newDevPages = JSON.parse(JSON.stringify(devPages));
|
||||
if(debug && newDevPages){
|
||||
for(let keyName in newDevPages){
|
||||
let item = newDevPages[keyName]
|
||||
if (Object.prototype.toString.call(item) === "[object Array]") {
|
||||
pagesJson[keyName].push(...item);
|
||||
}else if(Object.prototype.toString.call(item)==='[object Object]'){
|
||||
pagesJson[keyName] = Object.assign(pagesJson[keyName], item);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
return pagesJson;
|
||||
}
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
{
|
||||
"pages": [
|
||||
{ "path": "pages/index/index" },
|
||||
{ "path": "pages/product/product-category/list" },
|
||||
{ "path": "pages/product/goods/list" },
|
||||
{ "path": "pages/config/site"},
|
||||
{ "path": "pages/enquiry/template/list"},
|
||||
{ "path": "pages/enquiry/attributes/list"},
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"style": {
|
||||
"topWindow": false,
|
||||
"leftWindow": false,
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
"subPackages": [{
|
||||
"root": "pages_plugs",
|
||||
"pages": [
|
||||
{ "path": "error/404", "style": { "navigationBarTitleText": "页面不存在" } },
|
||||
{ "path": "error/403", "style": { "navigationBarTitleText": "无权访问" } },
|
||||
{ "path": "error/500", "style": { "navigationBarTitleText": "服务器出错了" } },
|
||||
{ "path": "system/user/list" },
|
||||
{ "path": "system/role/list" },
|
||||
{ "path": "system/permission/list" },
|
||||
{ "path": "system/menu/list" },
|
||||
{ "path": "system/app/list" },
|
||||
{ "path": "system/app-upgrade-center/list" },
|
||||
{ "path": "system_uni/vk-global-data" },
|
||||
{ "path": "system_uni/uni-id-log" },
|
||||
{ "path": "system_uni/opendb-admin-log" },
|
||||
{ "path": "system_uni/vk-components-dynamic" },
|
||||
{ "path": "system_uni/uni-id-files/list" },
|
||||
{ "path": "system_uni/vk-pay-orders" }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"root": "pages_template/components",
|
||||
"pages": [
|
||||
{ "path": "icons/vk-icons" },
|
||||
{ "path": "icons/element-icons" },
|
||||
{ "path": "icons/vk-icons-page", "style": { "topWindow": false,"leftWindow": false } },
|
||||
{ "path": "icons/element-icons-page", "style": { "topWindow": false,"leftWindow": false } },
|
||||
{ "path": "table/table-basic" },
|
||||
{ "path": "table/table-easy" },
|
||||
{ "path": "table/table-query" },
|
||||
{ "path": "table/table-expand" },
|
||||
{ "path": "form/form-array-object" },
|
||||
{ "path": "form/form-basic" },
|
||||
{ "path": "form/form-cert" , "style": { "topWindow": false,"leftWindow": false } },
|
||||
{ "path": "form/form-pay-cert" , "style": { "topWindow": false,"leftWindow": false } },
|
||||
{ "path": "form/form-inline" },
|
||||
{ "path": "form/form-dialog" },
|
||||
{ "path": "form/form-pro" },
|
||||
{ "path": "form/form-dialog-2" },
|
||||
{ "path": "form/form-slot" },
|
||||
{ "path": "detail/detail-basic" },
|
||||
{ "path": "detail/detail-table" },
|
||||
{ "path": "dialog/dialog-basic" },
|
||||
{ "path": "dialog/dialog-form" },
|
||||
{ "path": "dialog/dialog-table" },
|
||||
{ "path": "upload/upload-basic" },
|
||||
{ "path": "upload/upload-drag" },
|
||||
{ "path": "input/input-address" },
|
||||
{ "path": "input/input-money" },
|
||||
{ "path": "input/input-number" },
|
||||
{ "path": "input/input-number-box" },
|
||||
{ "path": "input/input-percentage" },
|
||||
{ "path": "input/input-json" },
|
||||
{ "path": "input/input-province" },
|
||||
{ "path": "input/input-select" },
|
||||
{ "path": "input/input-remote-select" },
|
||||
{ "path": "input/input" },
|
||||
{ "path": "editor/editor" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages_template/element",
|
||||
"pages": [
|
||||
{ "path": "detail/detail" },
|
||||
{ "path": "form/basic-form" },
|
||||
{ "path": "form/advanced-form" },
|
||||
{ "path": "form/step-form" },
|
||||
{ "path": "setting/account" },
|
||||
{ "path": "popup/alert" },
|
||||
{ "path": "popup/dialog" },
|
||||
{ "path": "popup/drawer" },
|
||||
{ "path": "popup/loading" },
|
||||
{ "path": "popup/message" },
|
||||
{ "path": "popup/message-box" },
|
||||
{ "path": "popup/notification" },
|
||||
{ "path": "popup/popconfirm" },
|
||||
{ "path": "popup/popover" },
|
||||
{ "path": "popup/tooltip" },
|
||||
{ "path": "result/fail" },
|
||||
{ "path": "result/success" }
|
||||
]
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "管理后台",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"topWindow": {
|
||||
"path": "windows/topWindow",
|
||||
"style": {
|
||||
"height": "100px"
|
||||
},
|
||||
"matchMedia": {
|
||||
"minWidth": 0
|
||||
}
|
||||
},
|
||||
"leftWindow": {
|
||||
"path": "windows/leftWindow",
|
||||
"style": {
|
||||
"width": "240px"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view>
|
||||
<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
|
||||
:form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
|
||||
@success="form1.props.show = false;refresh();"></vk-data-form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
sort: 0
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/site_config/sys/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{
|
||||
title: "基本信息",
|
||||
type: "bar-title",
|
||||
placeholder: ""
|
||||
},
|
||||
{
|
||||
key: "siteLogo",
|
||||
title: "LOGO",
|
||||
type: "image",
|
||||
placeholder: "请上传LOGO",
|
||||
limit: 1
|
||||
},
|
||||
{
|
||||
key: "siteTitle",
|
||||
title: "网站标题",
|
||||
type: "text",
|
||||
placeholder: "请输入网站标题"
|
||||
},
|
||||
{
|
||||
key: "siteDesc",
|
||||
title: "网站描述",
|
||||
type: "text",
|
||||
placeholder: "请输入网站描述"
|
||||
},
|
||||
{
|
||||
key: "siteCopyright",
|
||||
title: "版权信息",
|
||||
type: "text",
|
||||
placeholder: "请输入版权信息"
|
||||
},
|
||||
{
|
||||
key: "siteIcpNumber",
|
||||
title: "ICP备案号",
|
||||
type: "text",
|
||||
placeholder: "请输入ICP备案号"
|
||||
},
|
||||
{
|
||||
title: "联系方式",
|
||||
type: "bar-title",
|
||||
placeholder: ""
|
||||
},
|
||||
{
|
||||
key: "companyName",
|
||||
title: "公司名称",
|
||||
type: "text",
|
||||
placeholder: "请输入公司名称"
|
||||
},
|
||||
{
|
||||
key: "companyAddress",
|
||||
title: "公司地址",
|
||||
type: "text",
|
||||
placeholder: "请输入公司地址"
|
||||
},
|
||||
{
|
||||
key: "companyPhone",
|
||||
title: "公司电话",
|
||||
type: "text",
|
||||
placeholder: "请输入公司电话"
|
||||
},
|
||||
{
|
||||
key: "companyEmail",
|
||||
title: "公司邮箱",
|
||||
type: "text",
|
||||
placeholder: "请输入公司邮箱"
|
||||
},
|
||||
{
|
||||
key: "companyServicePhone",
|
||||
title: "客服热线",
|
||||
type: "text",
|
||||
placeholder: "请输入客服热线"
|
||||
},
|
||||
{
|
||||
key: "companyMobileSiteImage",
|
||||
title: "手机站二维码",
|
||||
type: "image",
|
||||
limit: 1,
|
||||
placeholder: "请上传收手机站上二维码"
|
||||
},
|
||||
{
|
||||
key: "companyGzhImage",
|
||||
title: "公众号二维码",
|
||||
type: "image",
|
||||
limit: 1,
|
||||
placeholder: "请上传公众号二维码"
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
sort: [{
|
||||
type: 'number',
|
||||
message: '排序值必须为数字'
|
||||
}],
|
||||
name:[
|
||||
{ required:true, message:'分类名称不能为空', trigger:'blur' },
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 是否显示表单的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
//
|
||||
vk.callFunction({
|
||||
url: 'admin/site_config/sys/detail',
|
||||
title: '请求中...',
|
||||
success: (res) => {
|
||||
this.form1.data = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
|
||||
@search="search"></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view>
|
||||
<el-row>
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<!-- 批量操作 -->
|
||||
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
||||
<!-- <el-button type="danger" size="small" style="margin-left: 20rpx;"
|
||||
:disabled="table1.multipleSelection.length === 0">
|
||||
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button> -->
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <el-dropdown-item :command="1">批量操作1</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">批量操作2</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-row>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']" :default-expand-all="false" @update="updateBtn"
|
||||
@delete="deleteBtn" @current-change="currentChange" @selection-change="selectionChange"></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="1000px" mode="form"
|
||||
:close-on-click-modal="false">
|
||||
<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
|
||||
:form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
|
||||
@success="form1.props.show = false;refresh();"></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/enquiry/attributes/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
// {
|
||||
// key: "_id",
|
||||
// title: "id",
|
||||
// type: "text",
|
||||
// width: 220
|
||||
// },
|
||||
{
|
||||
key: "label",
|
||||
title: "名称",
|
||||
type: "text",
|
||||
width: 220,
|
||||
align: "left",
|
||||
},
|
||||
{
|
||||
key:"values", title:"可选值", type:"tag",width: 500
|
||||
|
||||
},
|
||||
{ key: "enable", title: "启用", type: "switch", activeValue: true, inactiveValue: false, width: 100 },
|
||||
// {
|
||||
// key: "remark",
|
||||
// title: "备注",
|
||||
// type: "text",
|
||||
// align: "left",
|
||||
// width: 220
|
||||
// },
|
||||
{
|
||||
key: "sort",
|
||||
title: "排序",
|
||||
type: "number",
|
||||
align: "left",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
key: "_add_time",
|
||||
title: "添加时间",
|
||||
type: "time",
|
||||
align: "left",
|
||||
width: 160,
|
||||
sortable: "custom"
|
||||
},
|
||||
{
|
||||
key: "_add_time",
|
||||
title: "距离现在",
|
||||
type: "dateDiff",
|
||||
align: "left",
|
||||
width: 120
|
||||
},
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
// {
|
||||
// key: "name",
|
||||
// title: "名称",
|
||||
// type: "text",
|
||||
// width: 160,
|
||||
// mode: "%%"
|
||||
// },
|
||||
// {
|
||||
// key: "remark",
|
||||
// title: "备注",
|
||||
// type: "text",
|
||||
// width: 160,
|
||||
// mode: "%%"
|
||||
// },
|
||||
// {
|
||||
// key: "_add_time",
|
||||
// title: "添加时间",
|
||||
// type: "datetimerange",
|
||||
// width: 400,
|
||||
// mode: "[]"
|
||||
// },
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
sort: 0,
|
||||
enable: true
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{
|
||||
key:"label", title:"属性名称", type:"text", placeholder:"输入属性名称",
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{ key: "enable", title: "启用", type: "switch", activeValue: true, inactiveValue: false, width: 100 },
|
||||
{
|
||||
key:"values", title:"可选值", type:"tag", placeholder:"输入可选值",
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key: "sort",
|
||||
title: "排序",
|
||||
type: "number",
|
||||
precision: 0,
|
||||
placeholder: "请输入排序值",
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
sort: [{
|
||||
type: 'number',
|
||||
message: '排序值必须为数字'
|
||||
},{ required:true, message:'不能为空', trigger:'blur' },],
|
||||
label:[
|
||||
{ required:true, message:'属性名称不能为空', trigger:'blur' },
|
||||
],
|
||||
values:[
|
||||
{ required:true, message:'可选值不能为空', trigger:'blur' },
|
||||
],
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 是否显示表单的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 其他弹窗表单
|
||||
formDatas: {},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search() {
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow() {
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val) {
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn() {
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'admin/enquiry/attributes/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({
|
||||
item
|
||||
}) {
|
||||
that.form1.props.action = 'admin/enquiry/attributes/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({
|
||||
item,
|
||||
deleteFn
|
||||
}) {
|
||||
deleteFn({
|
||||
action: "admin/enquiry/attributes/sys/delete",
|
||||
data: {
|
||||
_id: item._id
|
||||
},
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
vk.toast("批量操作按钮1");
|
||||
break;
|
||||
case 2:
|
||||
vk.toast("批量操作按钮2");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
</style>
|
||||
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
|
||||
@search="search"></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view>
|
||||
<el-row>
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<!-- 批量操作 -->
|
||||
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
||||
<!-- <el-button type="danger" size="small" style="margin-left: 20rpx;"
|
||||
:disabled="table1.multipleSelection.length === 0">
|
||||
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button> -->
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <el-dropdown-item :command="1">批量操作1</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">批量操作2</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-row>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']" :default-expand-all="false" @update="updateBtn"
|
||||
@delete="deleteBtn" @current-change="currentChange" @selection-change="selectionChange"></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="1000px" mode="form"
|
||||
:close-on-click-modal="false">
|
||||
<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
|
||||
:form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
|
||||
@success="form1.props.show = false;refresh();"></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/enquiry/template/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
// {
|
||||
// key: "_id",
|
||||
// title: "id",
|
||||
// type: "text",
|
||||
// width: 220
|
||||
// },
|
||||
{
|
||||
key: "name",
|
||||
title: "名称",
|
||||
type: "text",
|
||||
width: 220,
|
||||
align: "left",
|
||||
},
|
||||
{ key: "enable", title: "启用", type: "switch", activeValue: true, inactiveValue: false, width: 100 },
|
||||
// {
|
||||
// key: "remark",
|
||||
// title: "备注",
|
||||
// type: "text",
|
||||
// align: "left",
|
||||
// width: 220
|
||||
// },
|
||||
{
|
||||
key: "sort",
|
||||
title: "排序",
|
||||
type: "number",
|
||||
align: "left",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
key: "_add_time",
|
||||
title: "添加时间",
|
||||
type: "time",
|
||||
align: "left",
|
||||
width: 160,
|
||||
sortable: "custom"
|
||||
},
|
||||
{
|
||||
key: "_add_time",
|
||||
title: "距离现在",
|
||||
type: "dateDiff",
|
||||
align: "left",
|
||||
width: 120
|
||||
},
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
// {
|
||||
// key: "name",
|
||||
// title: "名称",
|
||||
// type: "text",
|
||||
// width: 160,
|
||||
// mode: "%%"
|
||||
// },
|
||||
// {
|
||||
// key: "remark",
|
||||
// title: "备注",
|
||||
// type: "text",
|
||||
// width: 160,
|
||||
// mode: "%%"
|
||||
// },
|
||||
// {
|
||||
// key: "_add_time",
|
||||
// title: "添加时间",
|
||||
// type: "datetimerange",
|
||||
// width: 400,
|
||||
// mode: "[]"
|
||||
// },
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
sort: 0,
|
||||
enable: true
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "",
|
||||
// 表单字段显示规则
|
||||
columns: [{
|
||||
key: "name",
|
||||
title: "模板名称",
|
||||
type: "text",
|
||||
placeholder: "请输入模板名称"
|
||||
},
|
||||
{ key: "enable", title: "启用", type: "switch", activeValue: true, inactiveValue: false },
|
||||
{
|
||||
key: "sort",
|
||||
title: "排序",
|
||||
type: "number",
|
||||
precision: 0,
|
||||
placeholder: "请输入排序值",
|
||||
},
|
||||
{
|
||||
key:"extraAttributes", title:"额外属性", type:"array<object>", itemWidth:260,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
label:""
|
||||
},
|
||||
rightBtns:['copy', 'delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"label", title:"属性名称", type:"text", placeholder:"输入属性名称",
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"values", title:"可选值", type:"tag", placeholder:"输入可选值",
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
sort: [{
|
||||
type: 'number',
|
||||
message: '排序值必须为数字'
|
||||
},{ required:true, message:'不能为空', trigger:'blur' },],
|
||||
enable:[
|
||||
{ required:true, message:'不能为空', trigger:'blur' },
|
||||
],
|
||||
name:[
|
||||
{ required:true, message:'模板名称不能为空', trigger:'blur' },
|
||||
],
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 是否显示表单的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 其他弹窗表单
|
||||
formDatas: {},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search() {
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow() {
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val) {
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn() {
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'admin/enquiry/template/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({
|
||||
item
|
||||
}) {
|
||||
that.form1.props.action = 'admin/enquiry/template/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({
|
||||
item,
|
||||
deleteFn
|
||||
}) {
|
||||
deleteFn({
|
||||
action: "admin/enquiry/template/sys/delete",
|
||||
data: {
|
||||
_id: item._id
|
||||
},
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
vk.toast("批量操作按钮1");
|
||||
break;
|
||||
case 2:
|
||||
vk.toast("批量操作按钮2");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
这里是后台首页
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
|
||||
},
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
load(e){
|
||||
console.log(1,e);
|
||||
},
|
||||
error(e){
|
||||
console.log(2,e);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="page-body no-user-select">
|
||||
<view class="login-view">
|
||||
<image class="image" :src="vk.getVuex('$app.staticUrl.navBar.logo')" mode="aspectFit"></image>
|
||||
<text class="login-title">欢迎登录</text>
|
||||
|
||||
<el-form :model="form1" status-icon :rules="rules" ref="form1" label-width="60px" class="form-view">
|
||||
<el-form-item label="账 号" prop="pass" class="form-item"><el-input class="input" type="text" v-model="form1.username" placeholder="请输入用户名"></el-input></el-form-item>
|
||||
<el-form-item label="密 码" prop="checkPass" class="form-item">
|
||||
<el-input class="input" type="password" v-model="form1.password" show-password placeholder="请输入密码" maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<view class="password-box">
|
||||
<view class="remember-password">
|
||||
<el-checkbox v-model="checked"><text class="tips" style="font-size: 12px;">记住密码</text></el-checkbox>
|
||||
</view>
|
||||
<view class="forget-password"><text @click="forgetPassWord" style="font-size: 12px;">忘记密码？</text></view>
|
||||
</view>
|
||||
<el-button class="login_but" type="primary" @click="submit">登录</el-button>
|
||||
</el-form>
|
||||
|
||||
<view v-if="testUser && testUser.show && testUser.list && testUser.list.length > 0" class="test-user-list">
|
||||
<view>体验账号：</view>
|
||||
<view v-for="(item, index) in testUser.list" :key="index" class="test-user-item">
|
||||
<text class="test-user-item-nickname">{{ item.nickname }}</text>
|
||||
<text class="test-user-item-username">账号：{{ item.username }}</text>
|
||||
<text class="test-user-item-password">密码：{{ item.password }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="btns-box">
|
||||
<text @click="shortMessageLogin">短信验证码登录</text>
|
||||
<text @click="noCccount">没有账号？</text>
|
||||
<text class="register" @click="register">立即注册</text>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
import config from "@/app.config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
...config.staticUrl.navBar,
|
||||
testUser: (config.login && config.login.testUser) || {}, // 体验账号信息
|
||||
// 表单信息
|
||||
form1: {
|
||||
username: "",
|
||||
password: "",
|
||||
needPermission: true
|
||||
},
|
||||
checked: false, // 是否记录密码
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 页面初始化
|
||||
init() {
|
||||
let that = this;
|
||||
let { login } = vk.getVuex("$user");
|
||||
if (login) {
|
||||
if (login.username) that.form1.username = login.username;
|
||||
if (login.password) {
|
||||
that.form1.password = login.password;
|
||||
that.checked = true;
|
||||
}
|
||||
}
|
||||
if (!getApp().isAllowLoginBackground()) {
|
||||
return false;
|
||||
}
|
||||
// 执行以下函数,主要是为了使云函数提前热启动
|
||||
vk.userCenter.checkToken({
|
||||
loading: true,
|
||||
success: data => {
|
||||
that.login_success(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 表单提交
|
||||
submit() {
|
||||
let that = this;
|
||||
vk.userCenter.login({
|
||||
data: that.form1,
|
||||
success: data => {
|
||||
if (!getApp().isAllowLoginBackground(data.userInfo)) {
|
||||
vk.alert("您的账户无登陆权限");
|
||||
return false;
|
||||
}
|
||||
if (that.checked) {
|
||||
// 账号密码保存本地缓存
|
||||
vk.setVuex("$user.login.username", that.form1.username);
|
||||
vk.setVuex("$user.login.password", that.form1.password);
|
||||
} else {
|
||||
// 删除本地缓存
|
||||
vk.setVuex("$user.login.username", "");
|
||||
vk.setVuex("$user.login.password", "");
|
||||
}
|
||||
that.login_success(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
//登陆成功
|
||||
login_success(data={}) {
|
||||
let { userInfo={} } = data;
|
||||
// 先清空下菜单缓存
|
||||
vk.setVuex("$app.inited", false);
|
||||
vk.setVuex("$app.navMenu", []);
|
||||
// 再执行init函数
|
||||
getApp().init();
|
||||
// 最后跳转到首页或页面返回
|
||||
let pages = getCurrentPages();
|
||||
if (
|
||||
pages.length >= 2 &&
|
||||
pages[pages.length - 2] &&
|
||||
pages[pages.length - 2].route &&
|
||||
pages[pages.length - 2].route.indexOf("login/") == -1
|
||||
) {
|
||||
// 如果上一个页面不是login目录下的，则调上一个页面
|
||||
vk.reLaunch("/" + pages[pages.length - 2].route);
|
||||
} else {
|
||||
// 否则进入首页
|
||||
vk.navigateToHome();
|
||||
}
|
||||
},
|
||||
forgetPassWord() {
|
||||
console.log(`忘记密码了`);
|
||||
vk.toast("暂不支持", "none");
|
||||
},
|
||||
shortMessageLogin() {
|
||||
console.log(`短信登录`);
|
||||
},
|
||||
noCccount() {
|
||||
console.log(`没有账号`);
|
||||
},
|
||||
register() {
|
||||
console.log(`立即注册`);
|
||||
vk.toast("暂不支持注册", "none");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #46d0e7 url(../../static/bg/007.jpg?t=2) no-repeat fixed center center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.login-view:hover {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.login-view {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
border-radius: 7px;
|
||||
background-color: rgba(255, 255, 255, 0.97);
|
||||
padding: 40px 30px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #f5f5f5;
|
||||
box-shadow: 6px 6px 10px 0px #888888;
|
||||
|
||||
::v-deep .input .el-input__inner {
|
||||
border: 0 !important;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
.image {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.form-view {
|
||||
margin-top: 20px;
|
||||
.form-item {
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
}
|
||||
.login-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #121212;
|
||||
font-size: 22px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.login_but {
|
||||
width: 100%;
|
||||
letter-spacing: 4px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.password-box {
|
||||
font-size: 13px;
|
||||
color: #b1b1b1;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.remember-password {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.forget-password {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
&:active {
|
||||
color: #3a6ffd;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
color: #b1b1b1;
|
||||
}
|
||||
.btns-box {
|
||||
font-size: 13px;
|
||||
color: #b1b1b1;
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
text {
|
||||
cursor: pointer;
|
||||
|
||||
&:first-of-type {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.register {
|
||||
color: #46d0e7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.test-user-list {
|
||||
margin-top: 10px;
|
||||
user-select: text;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
.test-user-item {
|
||||
margin: 5px 0;
|
||||
.test-user-item-nickname {
|
||||
}
|
||||
.test-user-item-username {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.test-user-item-password {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
|
||||
@search="search"></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view>
|
||||
<el-row>
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<!-- 批量操作 -->
|
||||
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
||||
<!-- <el-button type="danger" size="small" style="margin-left: 20rpx;"
|
||||
:disabled="table1.multipleSelection.length === 0">
|
||||
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button> -->
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <el-dropdown-item :command="1">批量操作1</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">批量操作2</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-row>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']" :default-expand-all="false" @update="updateBtn"
|
||||
@delete="deleteBtn" @current-change="currentChange" @selection-change="selectionChange"></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="1000px" mode="form"
|
||||
:close-on-click-modal="false">
|
||||
<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
|
||||
:form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
|
||||
@success="form1.props.show = false;refresh();"></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/spot/goods/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
// {
|
||||
// key: "_id",
|
||||
// title: "id",
|
||||
// type: "text",
|
||||
// width: 220
|
||||
// },
|
||||
{
|
||||
key: "name",
|
||||
title: "名称",
|
||||
type: "text",
|
||||
width: 220,
|
||||
align: "left",
|
||||
},
|
||||
{
|
||||
key: "address",
|
||||
title: "供货地",
|
||||
type: "address",
|
||||
width: 220,
|
||||
align: "left",
|
||||
},
|
||||
|
||||
{
|
||||
key: "sort",
|
||||
title: "排序",
|
||||
type: "number",
|
||||
align: "left",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
key: "files",
|
||||
title: "附件",
|
||||
type: "file",
|
||||
// align: "left",
|
||||
width: 220
|
||||
},
|
||||
{
|
||||
key: "_add_time",
|
||||
title: "添加时间",
|
||||
type: "time",
|
||||
align: "left",
|
||||
width: 160,
|
||||
sortable: "custom"
|
||||
},
|
||||
{
|
||||
key: "_add_time",
|
||||
title: "距离现在",
|
||||
type: "dateDiff",
|
||||
align: "left",
|
||||
width: 120
|
||||
},
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
// {
|
||||
// key: "name",
|
||||
// title: "名称",
|
||||
// type: "text",
|
||||
// width: 160,
|
||||
// mode: "%%"
|
||||
// },
|
||||
// {
|
||||
// key: "remark",
|
||||
// title: "备注",
|
||||
// type: "text",
|
||||
// width: 160,
|
||||
// mode: "%%"
|
||||
// },
|
||||
// {
|
||||
// key: "_add_time",
|
||||
// title: "添加时间",
|
||||
// type: "datetimerange",
|
||||
// width: 400,
|
||||
// mode: "[]"
|
||||
// },
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
sort: 0,
|
||||
name: ''
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{
|
||||
key: "name",
|
||||
title: "名称",
|
||||
type: "text",
|
||||
placeholder: "请输入分类名称",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
key: "categoryIds",
|
||||
title: "分类",
|
||||
type: "checkbox",
|
||||
placeholder: "请选分类",
|
||||
action: "admin/spot/category/sys/getList",
|
||||
actionData: {level: 2},
|
||||
min:1,
|
||||
max: 5,
|
||||
props: {
|
||||
list: "rows",
|
||||
value: "_id",
|
||||
label: "name",
|
||||
children: "children"
|
||||
},
|
||||
watch: (obj)=> {
|
||||
console.log(obj);
|
||||
this.form1.data.name = obj.option.map(item => item.name),join("、")
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "address",
|
||||
title: "供货地",
|
||||
type: "address",
|
||||
placeholder: "请输入供货地",
|
||||
},
|
||||
{
|
||||
key: "files",
|
||||
title: "附件",
|
||||
type: "file",
|
||||
},
|
||||
{
|
||||
key: "remark",
|
||||
title: "备注",
|
||||
type: "textarea",
|
||||
maxlength: "99",
|
||||
showWordLimit: true,
|
||||
autosize: {
|
||||
minRows: 2,
|
||||
maxRows: 10
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "sort",
|
||||
title: "排序",
|
||||
type: "number",
|
||||
precision: 0,
|
||||
placeholder: "请输入排序值",
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
sort: [{
|
||||
type: 'number',
|
||||
message: '排序值必须为数字'
|
||||
}],
|
||||
name:[
|
||||
{ required:true, message:'分类名称不能为空', trigger:'blur' },
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 是否显示表单的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 其他弹窗表单
|
||||
formDatas: {},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search() {
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow() {
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val) {
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn() {
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'admin/spot/goods/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({
|
||||
item
|
||||
}) {
|
||||
that.form1.props.action = 'admin/spot/goods/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({
|
||||
item,
|
||||
deleteFn
|
||||
}) {
|
||||
deleteFn({
|
||||
action: "admin/product/category/sys/delete",
|
||||
data: {
|
||||
_id: item._id
|
||||
},
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
vk.toast("批量操作按钮1");
|
||||
break;
|
||||
case 2:
|
||||
vk.toast("批量操作按钮2");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
/deep/.el-checkbox-group .direction-row{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
|
||||
@search="search"></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view>
|
||||
<el-row>
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<!-- 批量操作 -->
|
||||
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
||||
<!-- <el-button type="danger" size="small" style="margin-left: 20rpx;"
|
||||
:disabled="table1.multipleSelection.length === 0">
|
||||
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button> -->
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <el-dropdown-item :command="1">批量操作1</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">批量操作2</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-row>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']" :default-expand-all="false" @update="updateBtn"
|
||||
@delete="deleteBtn" @current-change="currentChange" @selection-change="selectionChange"></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="500px" mode="form"
|
||||
:close-on-click-modal="false">
|
||||
<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
|
||||
:form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
|
||||
@success="form1.props.show = false;refresh();"></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/spot/category/sys/getTree",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
// {
|
||||
// key: "_id",
|
||||
// title: "id",
|
||||
// type: "text",
|
||||
// width: 220
|
||||
// },
|
||||
{
|
||||
key: "name",
|
||||
title: "名称",
|
||||
type: "text",
|
||||
width: 220,
|
||||
align: "left",
|
||||
},
|
||||
// {
|
||||
// key: "parent_id",
|
||||
// title: "上级id",
|
||||
// type: "text",
|
||||
// width: 220,
|
||||
// },
|
||||
{
|
||||
key: "remark",
|
||||
title: "备注",
|
||||
type: "text",
|
||||
align: "left",
|
||||
width: 220
|
||||
},
|
||||
{
|
||||
key: "sort",
|
||||
title: "排序",
|
||||
type: "number",
|
||||
align: "left",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
key: "_add_time",
|
||||
title: "添加时间",
|
||||
type: "time",
|
||||
align: "left",
|
||||
width: 160,
|
||||
sortable: "custom"
|
||||
},
|
||||
{
|
||||
key: "_add_time",
|
||||
title: "距离现在",
|
||||
type: "dateDiff",
|
||||
align: "left",
|
||||
width: 120
|
||||
},
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
// {
|
||||
// key: "name",
|
||||
// title: "名称",
|
||||
// type: "text",
|
||||
// width: 160,
|
||||
// mode: "%%"
|
||||
// },
|
||||
// {
|
||||
// key: "remark",
|
||||
// title: "备注",
|
||||
// type: "text",
|
||||
// width: 160,
|
||||
// mode: "%%"
|
||||
// },
|
||||
// {
|
||||
// key: "_add_time",
|
||||
// title: "添加时间",
|
||||
// type: "datetimerange",
|
||||
// width: 400,
|
||||
// mode: "[]"
|
||||
// },
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
sort: 0
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "",
|
||||
// 表单字段显示规则
|
||||
columns: [{
|
||||
key: "name",
|
||||
title: "名称",
|
||||
type: "text",
|
||||
placeholder: "请输入分类名称"
|
||||
},
|
||||
{
|
||||
key: "icon",
|
||||
title: "图标",
|
||||
type: "icon",
|
||||
placeholder: "请选择图标"
|
||||
},
|
||||
{
|
||||
key: "parent_id",
|
||||
title: "上级分类",
|
||||
type: "tree-select",
|
||||
placeholder: "请选择上级分类",
|
||||
action: "admin/spot/category/sys/getTree",
|
||||
props: {
|
||||
list: "rows",
|
||||
value: "_id",
|
||||
label: "name",
|
||||
children: "children"
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "remark",
|
||||
title: "备注",
|
||||
type: "textarea",
|
||||
maxlength: "99",
|
||||
showWordLimit: true,
|
||||
autosize: {
|
||||
minRows: 2,
|
||||
maxRows: 10
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "sort",
|
||||
title: "排序",
|
||||
type: "number",
|
||||
precision: 0,
|
||||
placeholder: "请输入排序值",
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
sort: [{
|
||||
type: 'number',
|
||||
message: '排序值必须为数字'
|
||||
}],
|
||||
name:[
|
||||
{ required:true, message:'分类名称不能为空', trigger:'blur' },
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 是否显示表单的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 其他弹窗表单
|
||||
formDatas: {},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search() {
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow() {
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val) {
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn() {
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'admin/spot/category/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({
|
||||
item
|
||||
}) {
|
||||
that.form1.props.action = 'admin/spot/category/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({
|
||||
item,
|
||||
deleteFn
|
||||
}) {
|
||||
deleteFn({
|
||||
action: "admin/product/category/sys/delete",
|
||||
data: {
|
||||
_id: item._id
|
||||
},
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
vk.toast("批量操作按钮1");
|
||||
break;
|
||||
case 2:
|
||||
vk.toast("批量操作按钮2");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
这里是页面内容
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<image src="../../static/icon/icon-403.svg"></image>
|
||||
<view class="title">
|
||||
<text class="code">403</text>
|
||||
<text class="tips">抱歉，你无权访问该页面</text>
|
||||
<text class="tips">{{ errMsg }}</text>
|
||||
<text class="btn" @tap="to_index_page">返回首页</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(query) {
|
||||
this.errMsg = query.errMsg || ''
|
||||
},
|
||||
methods: {
|
||||
to_index_page() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/index"
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F5F7F9;
|
||||
}
|
||||
.page-body {
|
||||
display: flex;
|
||||
padding-top: 250rpx;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 120rpx;
|
||||
margin-left: 200rpx;
|
||||
}
|
||||
.code{
|
||||
margin-bottom: 24px;
|
||||
color: #515a6e;
|
||||
font-weight: 600;
|
||||
font-size: 72px;
|
||||
line-height: 72px;
|
||||
}
|
||||
.tips{
|
||||
margin-bottom: 16px;
|
||||
color: #808695;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.btn{
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: #2d8cf0;
|
||||
border-color: #2d8cf0;
|
||||
width: 200rpx;
|
||||
height: 85rpx;
|
||||
border-radius: 6rpx;
|
||||
text-align: center;
|
||||
line-height: 85rpx;
|
||||
}
|
||||
.btn:hover{
|
||||
cursor: pointer;
|
||||
background-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<image src="../../static/icon/icon-404.svg"></image>
|
||||
<view class="title">
|
||||
<text class="code">404</text>
|
||||
<text class="tips">抱歉，你访问的页面不存在</text>
|
||||
<text class="tips">{{ errMsg }}</text>
|
||||
<text class="btn" @tap="to_index_page">返回首页</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(query) {
|
||||
this.errMsg = query.errMsg || ''
|
||||
},
|
||||
methods: {
|
||||
to_index_page() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/index"
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F5F7F9;
|
||||
}
|
||||
.page-body {
|
||||
display: flex;
|
||||
padding-top: 250rpx;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 120rpx;
|
||||
margin-left: 200rpx;
|
||||
}
|
||||
.code{
|
||||
margin-bottom: 24px;
|
||||
color: #515a6e;
|
||||
font-weight: 600;
|
||||
font-size: 72px;
|
||||
line-height: 72px;
|
||||
}
|
||||
.tips{
|
||||
margin-bottom: 16px;
|
||||
color: #808695;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.btn{
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: #2d8cf0;
|
||||
border-color: #2d8cf0;
|
||||
width: 200rpx;
|
||||
height: 85rpx;
|
||||
border-radius: 6rpx;
|
||||
text-align: center;
|
||||
line-height: 85rpx;
|
||||
}
|
||||
.btn:hover{
|
||||
cursor: pointer;
|
||||
background-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<image src="../../static/icon/icon-500.svg"></image>
|
||||
<view class="title">
|
||||
<text class="code">500</text>
|
||||
<text class="tips">抱歉，服务器出错了</text>
|
||||
<text class="tips">{{ errMsg }}</text>
|
||||
<text class="btn" @tap="to_index_page">返回首页</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(query) {
|
||||
this.errMsg = query.errMsg || ''
|
||||
},
|
||||
methods: {
|
||||
to_index_page() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/index"
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F5F7F9;
|
||||
}
|
||||
.page-body {
|
||||
display: flex;
|
||||
padding-top: 250rpx;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 120rpx;
|
||||
margin-left: 200rpx;
|
||||
}
|
||||
.code{
|
||||
margin-bottom: 24px;
|
||||
color: #515a6e;
|
||||
font-weight: 600;
|
||||
font-size: 72px;
|
||||
line-height: 72px;
|
||||
}
|
||||
.tips{
|
||||
margin-bottom: 16px;
|
||||
color: #808695;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.btn{
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: #2d8cf0;
|
||||
border-color: #2d8cf0;
|
||||
width: 200rpx;
|
||||
height: 85rpx;
|
||||
border-radius: 6rpx;
|
||||
text-align: center;
|
||||
line-height: 85rpx;
|
||||
}
|
||||
.btn:hover{
|
||||
cursor: pointer;
|
||||
background-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
:destroy-on-close="true"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var pageName = "";
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
var defaultFormData = {
|
||||
appid:"",
|
||||
name:"",
|
||||
title:"",
|
||||
contents:"",
|
||||
platform:[],
|
||||
platformRadio:"",
|
||||
type:"",
|
||||
version:"",
|
||||
min_uni_version:"",
|
||||
url:"",
|
||||
stable_publish:false,
|
||||
is_silently:false,
|
||||
is_mandatory:false,
|
||||
create_env:"upgrade-center",
|
||||
store_list:[],
|
||||
};
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {
|
||||
stable_publish:""
|
||||
},
|
||||
options:{}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "标题",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "2vh",
|
||||
width: "900px"
|
||||
},
|
||||
form1:{
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: defaultFormData,
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key: "appid", title: "AppID", type: "text", disabled:true },
|
||||
{ key: "name", title: "应用名称", type: "text", disabled:true },
|
||||
{ key: "title", title: "更新标题", type: "text" },
|
||||
{
|
||||
key:"contents", title:"更新内容", type:"textarea",
|
||||
autosize:{ minRows:4, maxRows:10 },
|
||||
maxlength:2000,
|
||||
showWordLimit:true,
|
||||
},
|
||||
{
|
||||
key:"platformRadio", title:"平台", type:"radio",
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:"Android", label:"安卓" },
|
||||
{ value:"iOS", label:"苹果" }
|
||||
],
|
||||
showRule:"type==native_app",
|
||||
disabled:["update"]
|
||||
},
|
||||
{
|
||||
key:"platform", title:"平台", type:"checkbox",
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:"Android", label:"安卓" },
|
||||
{ value:"iOS", label:"苹果" }
|
||||
],
|
||||
showRule:"type==wgt",
|
||||
disabled:["update"]
|
||||
},
|
||||
{ key: "version", title: "版本号", type: "text", tips:"必须大于当前线上发行的版本号", disabled:["update"] },
|
||||
{ key: "min_uni_version", title: "原生App最低版本", type: "text", showRule:"type==wgt" },
|
||||
{ key: "url", title: "AppStore", type: "text",
|
||||
showRule:(formData)=>{
|
||||
return formData.platformRadio === "iOS" && formData.type === "native_app";
|
||||
}
|
||||
},
|
||||
{ key:"apk", title:"上传apk包", type:"file", limit:1, accept:".apk",
|
||||
showRule:(formData)=>{
|
||||
return formData.platformRadio === "Android" && formData.type === "native_app";
|
||||
},
|
||||
watch: ({ value, formData, column, index, $set }) => {
|
||||
$set("url", value);
|
||||
},
|
||||
tips:"上传apk包到当前服务空间的云存储中，上传成功后，会自动使用云存储地址填充下载链接"
|
||||
},
|
||||
{ key:"wgt", title:"上传wgt包", type:"file", limit:1, accept:".wgt",
|
||||
showRule:(formData)=>{
|
||||
return formData.type === "wgt";
|
||||
},
|
||||
watch: ({ value, formData, column, index, $set }) => {
|
||||
$set("url", value);
|
||||
},
|
||||
tips:"上传wgt包到当前服务空间的云存储中，上传成功后，会自动使用云存储地址填充下载链接"
|
||||
},
|
||||
{ key: "url", title: "下载链接", type: "text",
|
||||
showRule:(formData)=>{
|
||||
return formData.platformRadio === "Android" || formData.type === "wgt";
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"store_list", title:"Android应用市场", type:"array<object>",
|
||||
showRule:(formData)=>{
|
||||
return formData.platformRadio === "Android" && formData.type === "native_app" && formData.store_list && formData.store_list.length>0 ? true : false;
|
||||
},
|
||||
rowKey:"id",
|
||||
showAdd:false,
|
||||
showClear:false,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
|
||||
},
|
||||
rightBtns:['delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{ key:"enable", title:"是否启用", type:"switch", width:80 },
|
||||
{
|
||||
key:"name", title:"商店名称", type:"text", minWidth:180,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
key:"scheme", title:"Scheme", type:"text", minWidth:280,
|
||||
disabled: true
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"is_silently", title:"静默更新", type:"switch", activeValue:true, inactiveValue:false, showRule:"type==wgt" },
|
||||
{ key:"is_mandatory", title:"强制更新", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"stable_publish", title:"上线发行", type:"switch", activeValue:true, inactiveValue:false,
|
||||
disabled: (formData)=>{
|
||||
return this.value.item.stable_publish && this.value.mode === "update";
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表单验证规则
|
||||
rules:{
|
||||
appid: [
|
||||
// 必填
|
||||
{ required: true, message: "appid不能为空", trigger: ['blur','change'] }
|
||||
],
|
||||
contents: [
|
||||
// 必填
|
||||
{ required: true, message: "更新内容不能为空", trigger: ['blur','change'] }
|
||||
],
|
||||
platform: [
|
||||
// 必填
|
||||
{ required: true, message: "平台不能为空", trigger: ['blur','change'] }
|
||||
],
|
||||
platformRadio: [
|
||||
// 必填
|
||||
{ required: true, message: "平台不能为空", trigger: ['blur','change'] }
|
||||
],
|
||||
version: [
|
||||
// 必填
|
||||
{ required: true, message: "版本号不能为空", trigger: ['blur','change'] },
|
||||
{ validator: vk.pubfn.validator("version"), message: '版本号格式必须为：xx.xx.xx（3个数字组成，数字范围1-99,0-99,0-99） 如1.0.1 不可以是1.0.01', trigger: 'blur' }
|
||||
],
|
||||
min_uni_version: [
|
||||
// 必填
|
||||
{ required: true, message: "最低版本号不能为空", trigger: ['blur','change'] },
|
||||
{ validator: vk.pubfn.validator("version"), message: '版本号格式必须为：xx.xx.xx（3个数字组成，数字范围1-99,0-99,0-99） 如1.0.1 不可以是1.0.01', trigger: 'blur' }
|
||||
],
|
||||
url: [
|
||||
// 必填
|
||||
{ required: true, message: "链接不能为空", trigger: ['blur','change'] }
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:"",
|
||||
// 左侧label的宽度
|
||||
labelWidth: "140px",
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = this;
|
||||
this.$emit("input", value);
|
||||
originalForms["form1"] = vk.pubfn.copyObject(this.form1);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
let { value={} } = this;
|
||||
let { item={} } = value;
|
||||
// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
|
||||
if(value.mode === "update"){
|
||||
this.form1.props.action = "admin/system/app-upgrade-center/sys/addUpdate";
|
||||
this.page.title = pageName + "修改";
|
||||
this.page.submitText = "修改";
|
||||
if (item.type === "native_app") {
|
||||
item.platformRadio = item.platform[0];
|
||||
}
|
||||
this.form1.data = vk.pubfn.objectAssign(vk.pubfn.copyObject(defaultFormData), vk.pubfn.copyObject(item));
|
||||
}else{
|
||||
this.form1.props.action = "admin/system/app-upgrade-center/sys/addUpdate";
|
||||
this.page.title = pageName + "添加";
|
||||
this.page.submitText = "添加";
|
||||
this.form1.data = vk.pubfn.objectAssign(vk.pubfn.copyObject(defaultFormData), vk.pubfn.copyObject(item));
|
||||
}
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
this.resetForm();
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
this.value.show = false; // 关闭页面
|
||||
this.$emit("success");
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, this);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<view class="page-body" v-loading="loading">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
:main-columns="['appid','title','type','stable_publish']"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view>
|
||||
<el-row>
|
||||
<el-dropdown placement="bottom-start" @command="addBtn">
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" :disabled="!queryForm1.formData.appid">添加</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="native_app">原生App安装包</el-dropdown-item>
|
||||
<el-dropdown-item command="wgt">wgt资源包</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
|
||||
<!-- 批量操作 -->
|
||||
<!-- <el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
||||
<el-button type="danger" size="small" style="margin-left: 20rpx;"
|
||||
:disabled="table1.multipleSelection.length === 0"
|
||||
>
|
||||
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="1">批量操作1</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">批量操作2</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown> -->
|
||||
</el-row>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']"
|
||||
:selection="false"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
:auto-action="false"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑 -->
|
||||
<addUpdate v-model="formDatas.addUpdate" @success="refresh"></addUpdate>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
import addUpdate from './form/addUpdate.vue'
|
||||
export default {
|
||||
components:{
|
||||
addUpdate,
|
||||
},
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
appList:[],
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"admin/system/app-upgrade-center/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns:[
|
||||
{ key:"appid", title:"AppID", type:"text", width:120 },
|
||||
{ key:"title", title:"更新标题", type:"text", width:120 },
|
||||
{
|
||||
key: "type", title: "安装包类型", type: "tag", width: 140, size: "small",
|
||||
data:[
|
||||
{ value:"native_app", label:"原生App安装包", tagType:"primary", effect:"light" },
|
||||
{ value:"wgt", label:"Wgt资源包", tagType:"success", effect:"light" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"platform", title:"平台", type:"checkbox", width:100, align:"left",
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:"Android", label:"安卓" },
|
||||
{ value:"iOS", label:"苹果" }
|
||||
],
|
||||
},
|
||||
{ key:"store_list", title:"已上架应用市场", type:"text", width:120, align:"left",
|
||||
formatter: (val=[], row, column, index) => {
|
||||
let str = "";
|
||||
val.map((item, index) => {
|
||||
str += item.name;
|
||||
if (index !== val.length - 1) {
|
||||
str += "、";
|
||||
}
|
||||
});
|
||||
if (!str) str = "-";
|
||||
return str;
|
||||
}
|
||||
},
|
||||
{ key:"version", title:"版本号", type:"text", width:100 },
|
||||
{
|
||||
key: "stable_publish", title: "安装包状态", type: "tag", width: 120, size: "small",
|
||||
data:[
|
||||
{ value:true, label:"已上线", tagType:"success", effect:"light" },
|
||||
{ value:false, label:"已下线", tagType:"info", effect:"light" }
|
||||
]
|
||||
},
|
||||
{ key:"create_date", title:"上传时间", type:"time", width:160, sortable:"custom" },
|
||||
{ key:"create_date", title:"距离现在", type:"dateDiff", width:120 },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
appid:""
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
{
|
||||
key:"appid", title:"所属应用", type:"select", placeholder:"请选择应用", width:140, mode:"=",
|
||||
props:{ value:'appid', label:'name' },
|
||||
data:()=>{
|
||||
return this.appList;
|
||||
}
|
||||
},
|
||||
{ key:"title", title:"标题", type:"text", width:140, mode:"%%" },
|
||||
{
|
||||
key: "type", title: "安装包类型", type: "select", width: 140, placeholder:"请选择类型",
|
||||
data:[
|
||||
{ value:"native_app", label:"原生App安装包" },
|
||||
{ value:"wgt", label:"Wgt资源包" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: "stable_publish", title: "安装包状态", type: "select", width: 140, placeholder:"请选择状态",
|
||||
data:[
|
||||
{ value:true, label:"已上线" },
|
||||
{ value:false, label:"已下线" }
|
||||
]
|
||||
},
|
||||
{ key:"create_date", title:"上传时间", type:"datetimerange", width:360, mode:"[]" },
|
||||
]
|
||||
},
|
||||
// 其他弹窗表单
|
||||
formDatas:{},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
vk.callFunction({
|
||||
url: 'admin/system/app/sys/getList',
|
||||
loading:true,
|
||||
data: {
|
||||
pageSize:500,
|
||||
formData:{
|
||||
enable_upgrade_center: true
|
||||
},
|
||||
columns:[
|
||||
{ key:"enable_upgrade_center", type:"select", mode:"=" },
|
||||
]
|
||||
},
|
||||
success: (data) => {
|
||||
that.appList = data.rows;
|
||||
if (options.appid) {
|
||||
that.queryForm1.formData.appid = options.appid;
|
||||
that.search();
|
||||
} else if (data.rows.length > 0) {
|
||||
that.queryForm1.formData.appid = data.rows[0].appid;
|
||||
that.search();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(){
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn(type){
|
||||
let appid = that.queryForm1.formData.appid;
|
||||
let appInfo = vk.pubfn.getListItem(that.appList, "appid", appid);
|
||||
let item = {
|
||||
appid,
|
||||
type,
|
||||
name: appInfo.name,
|
||||
store_list: appInfo.store_list
|
||||
};
|
||||
vk.pubfn.openForm('addUpdate',{ mode:"add", item });
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }){
|
||||
vk.pubfn.openForm('addUpdate',{ mode:"update", item });
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }){
|
||||
if (item.stable_publish) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '不可删除已上线的版本',
|
||||
type: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
deleteFn({
|
||||
action:"admin/system/app-upgrade-center/sys/delete",
|
||||
data:{
|
||||
_id: item._id
|
||||
},
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index){
|
||||
switch(index){
|
||||
case 1: vk.toast("批量操作按钮1"); break;
|
||||
case 2: vk.toast("批量操作按钮2"); break;
|
||||
default : break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,515 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
:destroy-on-close="true"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var pageName = "应用";
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {},
|
||||
options:{}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "标题",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: false,
|
||||
top: "1vh",
|
||||
width: "1200px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
name:"",
|
||||
enable_upgrade_center:false,
|
||||
app_ios:{
|
||||
enable:false
|
||||
}
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key:"", title:"基础信息", type:"bar-title" },
|
||||
{ key:"appid", title:"AppID", type:"text" },
|
||||
{
|
||||
key:"type", title:"应用类型", type:"cascader",
|
||||
data:[
|
||||
{
|
||||
value:"1000",
|
||||
label: "用户端",
|
||||
children:[
|
||||
{
|
||||
value:"1001",
|
||||
label: "通用",
|
||||
children:[
|
||||
{ value:"client", label:"用户端" },
|
||||
]
|
||||
},
|
||||
{
|
||||
value:"1002",
|
||||
label: "商家",
|
||||
children:[
|
||||
{ value:"rider", label:"骑手端" },
|
||||
{ value:"business", label:"商家端" },
|
||||
]
|
||||
},
|
||||
{
|
||||
value:"1003",
|
||||
label: "教育",
|
||||
children:[
|
||||
{ value:"student", label:"学生端" },
|
||||
{ value:"parent", label:"家长端" },
|
||||
{ value:"teacher", label:"教师端" },
|
||||
]
|
||||
},
|
||||
{
|
||||
value:"1999",
|
||||
label: "其他",
|
||||
children:[
|
||||
{ value:"other", label:"其他" },
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value:"2000",
|
||||
label: "管理端",
|
||||
children:[
|
||||
{
|
||||
value:"2001",
|
||||
label: "通用",
|
||||
children:[
|
||||
{ value:"admin", label:"管理端" },
|
||||
]
|
||||
},
|
||||
{
|
||||
value:"2002",
|
||||
label: "商家",
|
||||
children:[
|
||||
{ value:"rider-admin", label:"骑手管理端" },
|
||||
{ value:"business-admin", label:"商家管理端" },
|
||||
]
|
||||
},
|
||||
{
|
||||
value:"2003",
|
||||
label: "教育",
|
||||
children:[
|
||||
{ value:"student-admin", label:"学生管理端" },
|
||||
{ value:"parent-admin", label:"家长管理端" },
|
||||
{ value:"teacher-admin", label:"教师管理端" },
|
||||
]
|
||||
},
|
||||
{
|
||||
value:"2999",
|
||||
label: "其他",
|
||||
children:[
|
||||
{ value:"other-admin", label:"其他管理端" },
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
],
|
||||
props:{
|
||||
expandTrigger:"hover",
|
||||
emitPath:false,
|
||||
},
|
||||
onChange:(val, formData, column, index, option) => {
|
||||
this.form1.data.name = option.label;
|
||||
}
|
||||
},
|
||||
{ key:"name", title:"应用名称", type:"text",
|
||||
watch: ({ value, formData, column, index, $set }) => {
|
||||
// 此处演示根据选择的值动态改变text1的值
|
||||
let arr = [
|
||||
"app_ios",
|
||||
"app_android",
|
||||
"mp_weixin",
|
||||
"mp_alipay",
|
||||
"mp_baidu",
|
||||
"mp_toutiao",
|
||||
"mp_qq",
|
||||
"mp_kuaishou",
|
||||
"mp_lark",
|
||||
"mp_jd",
|
||||
"mp_dingtalk",
|
||||
"quickapp",
|
||||
];
|
||||
arr.map((item, index) => {
|
||||
this.$set(this.form1.data[item],"name", value);
|
||||
});
|
||||
}
|
||||
},
|
||||
{ key:"introduction", title:"应用简介", type:"text", tips:"一句话描述您的应用的用途" },
|
||||
{
|
||||
key:"description", title:"应用描述", type:"textarea", placeholder:"更详细的应用描述",
|
||||
autosize:{ minRows:4, maxRows:10 },
|
||||
maxlength:200,
|
||||
showWordLimit:true,
|
||||
},
|
||||
{ key:"", title:"App升级中心", type:"bar-title" },
|
||||
{ key:"enable_upgrade_center", title:"是否开启", type:"switch", activeValue:true, inactiveValue:false, tips:"下面的信息为制作统一发布页和APP升级中心所需，若你未用到，则只填上面的基础信息即可。" },
|
||||
{ key:"", title:"图标素材", type:"bar-title", showRule:"enable_upgrade_center==true" },
|
||||
{ key:"icon_url", title:"应用图标", type:"image", limit:1, tips:"建议尺寸：600*600", showRule:"enable_upgrade_center==true" },
|
||||
{ key:"screenshot", title:"应用截图", type:"image", limit:9, tips:"最多9张，建议尺寸：800*1380", showRule:"enable_upgrade_center==true" },
|
||||
{ key:"", title:"H5信息", type:"bar-title", showRule:"enable_upgrade_center==true" },
|
||||
{ key:"h5", title:"链接地址", type:"object", showLabel:false,
|
||||
columns:[
|
||||
{ key:"url", title:"链接地址", type:"text", tips:"您的h5首页访问地址" },
|
||||
],
|
||||
showRule:"enable_upgrade_center==true"
|
||||
},
|
||||
{ key:"", title:"App信息", type:"bar-title",showRule:"enable_upgrade_center==true" },
|
||||
{ key:"app_ios", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"IOS", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text", tips:"IOS应用的名称",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"app_ios.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"url", title:"AppStore", type:"text", tips:"AppStore商店的下载链接地址",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"app_ios.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"app_android", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"Android", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text", tips:"安卓应用的名称",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"app_android.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"apk", title:"上传apk包", type:"file", limit:1, accept:".apk",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"app_android.enable",false);
|
||||
},
|
||||
watch: ({ value, formData, column, index, $set }) => {
|
||||
$set("url", value);
|
||||
},
|
||||
tips:"上传apk到当前服务空间的云存储中，上传成功后，会自动使用云存储地址填充下载链接"
|
||||
},
|
||||
{ key:"url", title:"下载链接", type:"text", tips:"安卓应用apk的下载地址",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"app_android.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"store_list", title:"Android应用市场", type:"array<object>",
|
||||
tips:`<a href="https://ask.dcloud.net.cn/article/39960" target="_blank">常见应用商店schema汇总</a>`,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"app_android.enable",false) && form.enable_upgrade_center ? true : false;
|
||||
},
|
||||
rowKey:"id",
|
||||
showAdd:true,
|
||||
showClear:false,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
enable:true
|
||||
},
|
||||
rightBtns:['delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"scheme_select", title:"选择已知商店", type:"select", width:120,
|
||||
data:[
|
||||
{ value:"tmast://appdetails?r=XXX&pname=xxx", label:"应用宝" },
|
||||
{ value:"mimarket://details?id=com.xx.xx", label:"小米" },
|
||||
{ value:"samsungapps://ProductDetail/com.xx.xx", label:"三星" },
|
||||
{ value:"appmarket://details?id=com.xx.xx", label:"华为" },
|
||||
{ value:"oppomarket://details?packagename=com.xx.xx", label:"oppo" },
|
||||
{ value:"vivomarket://details?id=com.xx.xx", label:"vivo" },
|
||||
],
|
||||
watch: ({ value, formData, column, index, $set }) => {
|
||||
let item = vk.pubfn.getListItem(column.data, "value", value) || {};
|
||||
let { label="" } = item;
|
||||
$set("scheme", value);
|
||||
$set("name", label);
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"name", title:"商店名称", type:"text", minWidth:180,
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"scheme", title:"Scheme", type:"text", minWidth:280,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{ key:"enable", title:"是否启用", type:"switch", width:80 },
|
||||
]
|
||||
},
|
||||
{ key:"", title:"小程序/快应用信息", type:"bar-title", showRule:"enable_upgrade_center==true" },
|
||||
{ key:"mp_weixin", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"微信小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_weixin.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_weixin.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"mp_alipay", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"支付宝小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_alipay.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_alipay.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"mp_baidu", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"百度小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_baidu.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_baidu.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"mp_toutiao", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"头条小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_toutiao.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_toutiao.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"mp_qq", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"QQ小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_qq.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_qq.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"mp_kuaishou", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"快手小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_kuaishou.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_kuaishou.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"mp_lark", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"飞书小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_lark.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_lark.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"mp_jd", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"京东小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_jd.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_jd.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"mp_dingtalk", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"钉钉小程序", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_dingtalk.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"小程序码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"mp_dingtalk.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"quickapp", title:"", type:"object", showLabel:false, showRule:"enable_upgrade_center==true",
|
||||
columns:[
|
||||
{ key:"enable", title:"快应用", type:"switch", activeValue:true, inactiveValue:false },
|
||||
{ key:"name", title:"名称", type:"text",
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"quickapp.enable",false);
|
||||
}
|
||||
},
|
||||
{ key:"qrcode_url", title:"快应用码", type:"image", limit:1,
|
||||
showRule:(form)=>{
|
||||
return vk.pubfn.getData(form,"quickapp.enable",false);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules:{
|
||||
appid: [
|
||||
{ required: true, message: '应用的AppID为必填字段', trigger: 'blur' },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '应用名称为必填字段', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '应用类型为必填字段', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
// 左侧label的宽度
|
||||
labelWidth: "140px",
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = this;
|
||||
this.$emit("input", value);
|
||||
originalForms["form1"] = vk.pubfn.copyObject(this.form1);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
let { value={} } = this;
|
||||
let { item={} } = value;
|
||||
// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
|
||||
if(value.mode === "update"){
|
||||
this.form1.props.action = "admin/system/app/sys/update";
|
||||
this.page.title = pageName + "修改";
|
||||
this.page.submitText = "修改";
|
||||
this.form1.data = vk.pubfn.copyObject(item);
|
||||
}else{
|
||||
this.form1.props.action = "admin/system/app/sys/add";
|
||||
this.page.title = pageName + "添加";
|
||||
this.page.submitText = "添加";
|
||||
}
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
this.resetForm();
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
this.value.show = false; // 关闭页面
|
||||
this.$emit("success");
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, this);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
center
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<view class="uni-container">
|
||||
|
||||
<h3 class="text-separated" style="padding: 0 0 20rpx 0;">步骤1：了解“统一发布页”</h3>
|
||||
|
||||
<view style="margin-top: 20rpx;">
|
||||
<view class="text-separated">
|
||||
<text class="strong">uni-portal </text>
|
||||
<text>是 uni-app 提供的一套开箱即用的“统一发布页”。</text>
|
||||
</view>
|
||||
<view class="text-separated">
|
||||
<text class="strong">uni-portal </text>
|
||||
<text>可作为面向用户的统一业务名片，在一个页面集中展现：App下载地址、小程序二维码、H5访问链接等信息。</text>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="text-separated">
|
||||
<text style="font-size: 16px;">uni-app 官方示例的发布页就是基于<text class="strong">uni-portal </text> 制作的，<a
|
||||
href="https://hellouniapp.dcloud.net.cn/portal" target="_blank" class="a-label">点击体验</a>
|
||||
</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<h3 class="text-separated" style="padding: 40rpx 0 20rpx 0;">步骤2：获取“统一发布页”</h3>
|
||||
<view class="flex text-separated" style="margin-top: 20rpx;">
|
||||
<text>
|
||||
<view class="strong">uni-portal </view> 可根据「应用管理」中所填写的应用信息，一键生成发布页：
|
||||
</text>
|
||||
<button class="custom-button" size="mini" type="primary" @click="publish"
|
||||
style="margin: 0;">生成并下载发布页</button>
|
||||
</view>
|
||||
|
||||
<h3 class="text-separated" style="padding: 40rpx 0 20rpx 0;">步骤3：上传“统一发布页”</h3>
|
||||
|
||||
<view style="margin-top: 20rpx;">
|
||||
<view class="text-separated">
|
||||
<text>
|
||||
步骤2下载的“统一发布页”，是一个静态HTML页面，你可以直接在本地浏览器中打开访问。
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="text-separated">
|
||||
<text>
|
||||
为了让用户访问到这个“统一发布页”，你需要将该静态HTML文件上传到你的服务器中；推荐使用<a href="https://uniapp.dcloud.io/uniCloud/hosting"
|
||||
target="_blank" class="a-label" style="padding: 5px;">前端网页托管</a>，因为前端网页托管具备使用更简单、价格更便宜、访问更快等优点。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-slot:footer>
|
||||
<el-button :loading="page.loading" type="primary" size="small" style="width: 80px;" @click="close">{{ page.submitText }}</el-button>
|
||||
</template>
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var vk = uni.vk; // vk实例
|
||||
var download = function(content, filename) {
|
||||
let eleLink = document.createElement('a');
|
||||
eleLink.download = filename;
|
||||
eleLink.style.display = 'none';
|
||||
let blob = new Blob([content]);
|
||||
eleLink.href = URL.createObjectURL(blob);
|
||||
document.body.appendChild(eleLink);
|
||||
eleLink.click();
|
||||
document.body.removeChild(eleLink);
|
||||
};
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
item: {},
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "生成统一发布页",
|
||||
submitText: "关闭",
|
||||
top: "5vh",
|
||||
width: "800px",
|
||||
loading: false
|
||||
},
|
||||
id: ""
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = this;
|
||||
this.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
let { value = {} } = this;
|
||||
let { item={} } = value;
|
||||
this.id = item._id;
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
|
||||
},
|
||||
close(){
|
||||
this.$emit("input", false);
|
||||
},
|
||||
publish() {
|
||||
if (!this.id) {
|
||||
uni.showModal({
|
||||
content: '页面出错，请返回重进',
|
||||
showCancel: false,
|
||||
success(res) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/system/app/list'
|
||||
})
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
vk.callFunction({
|
||||
url: 'admin/system/app/sys/createPublishHtml',
|
||||
title: '生成中...',
|
||||
data: {
|
||||
id: this.id
|
||||
},
|
||||
success: (res) => {
|
||||
if ('download' in document.createElement('a')) {
|
||||
download(res.body, 'uni-publish.html');
|
||||
} else {
|
||||
vk.toast('浏览器不支持');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.strong {
|
||||
padding: 10rpx;
|
||||
display: inline-block;
|
||||
color: #c7254e;
|
||||
}
|
||||
|
||||
.a-label {
|
||||
text-decoration: none;
|
||||
color: #0366d6;
|
||||
font-weight: bold;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.text-separated {
|
||||
line-height: 2em;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: #f3f5f7;
|
||||
color: #2c3e50;
|
||||
padding: 10px;
|
||||
font-size: 32rpx;
|
||||
|
||||
border: {
|
||||
color: #409EFF;
|
||||
left-width: 8px;
|
||||
left-style: solid;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view style="display: flex;height: 32px;">
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<el-alert v-if="!appIdExist" :title="`⚠警告：当前项目的 appId：${currentAppId} 没有在下方表格中，请新增应用或修改应用！`" type="error" style="margin-left: 20px;"> </el-alert>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['update','delete']"
|
||||
:custom-right-btns="table1.customRightBtns"
|
||||
:selection="false"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑 -->
|
||||
<addUpdate v-model="formDatas.addUpdate" @success="refresh"></addUpdate>
|
||||
<!-- 生成发布页 -->
|
||||
<createPublishHtml v-model="formDatas.createPublishHtml" @success="refresh"></createPublishHtml>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
import addUpdate from './form/addUpdate.vue'
|
||||
import createPublishHtml from './form/createPublishHtml.vue'
|
||||
export default {
|
||||
components:{
|
||||
addUpdate,
|
||||
createPublishHtml,
|
||||
},
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"admin/system/app/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns:[
|
||||
{ key:"appid", title:"AppID", type:"text", width:160, sortable:"custom" },
|
||||
{ key:"type", title:"应用类型", type:"text", width:120, sortable:"custom" },
|
||||
{ key:"name", title:"应用名称", type:"text", width:240, sortable:"custom" },
|
||||
{ key:"description", title:"应用描述", type:"text", minWidth:260 },
|
||||
{ key:"_add_time", title:"添加时间", type:"time", width:160, sortable:"custom" }
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:"",
|
||||
customRightBtns: [
|
||||
{
|
||||
title: '发布页管理', type: 'primary',
|
||||
onClick:(item)=>{
|
||||
vk.pubfn.openForm('createPublishHtml',{ item });
|
||||
},
|
||||
disabled:"enable_upgrade_center!=true",
|
||||
},
|
||||
{
|
||||
title: '版本管理', type: 'primary',
|
||||
onClick:(item)=>{
|
||||
vk.navigateTo(`/pages_plugs/system/app-upgrade-center/list?appid=${item.appid}`);
|
||||
},
|
||||
disabled:"enable_upgrade_center!=true",
|
||||
}
|
||||
],
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
{ key:"appid", title:"AppID", type:"text", width:160, mode:"%%" },
|
||||
{ key:"name", title:"应用名称", type:"text", width:160, mode:"%%" },
|
||||
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
|
||||
]
|
||||
},
|
||||
// 其他弹窗表单
|
||||
formDatas:{},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
appIdExist: true
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
that.checkCurrentAppId();
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
that.checkCurrentAppId();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(){
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn(){
|
||||
vk.pubfn.openForm('addUpdate',{ mode:"add" });
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }){
|
||||
vk.pubfn.openForm('addUpdate',{ mode:"update", item });
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }){
|
||||
deleteFn({
|
||||
action:"admin/system/app/sys/delete",
|
||||
data:{
|
||||
_id: item._id
|
||||
},
|
||||
});
|
||||
},
|
||||
checkCurrentAppId(){
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
if (typeof systemInfo.appId !== "undefined") {
|
||||
that.currentAppId = systemInfo.appId;
|
||||
vk.callFunction({
|
||||
url: 'admin/system/app/sys/getInfo',
|
||||
data: {
|
||||
appid: systemInfo.appId,
|
||||
},
|
||||
success: (data) => {
|
||||
if (data.info && data.info.appid === systemInfo.appId) {
|
||||
that.appIdExist = true;
|
||||
} else {
|
||||
that.appIdExist = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:before-action="form1.props.beforeAction"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: ""
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "导入菜单",
|
||||
submitText: "导入",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "7vh",
|
||||
width:"800px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
mode: 1,
|
||||
jsonType: 1
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system/menu/sys/adds",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "jsonType", title: "json类型", type: "radio",
|
||||
data: [
|
||||
{ value: 1, label: "树形结构" },
|
||||
{ value: 2, label: "数组结构" },
|
||||
]
|
||||
},
|
||||
{ key:"parent_id", title:"父级菜单Id", type:"text",
|
||||
showRule:"jsonType=1"
|
||||
},
|
||||
{ key: "mode", title: "重复标识是否覆盖", type: "radio",
|
||||
data: [
|
||||
{ value: 1, label: "覆盖" },
|
||||
{ value: 2, label: "忽略" },
|
||||
]
|
||||
},
|
||||
{ key: "menus", title: "JSON内容", type: "textarea",
|
||||
autosize: { minRows: 18, maxRows: 18 }
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
menus: [
|
||||
{ required: true, message: "不能为空", trigger: "change" },
|
||||
]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 表单是否在请求中
|
||||
loading: false,
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
labelWidth:"140px",
|
||||
beforeAction(formData){
|
||||
try {
|
||||
let menus = JSON.parse(formData.menus);
|
||||
if(Object.prototype.toString.call(menus) === '[object Object]'){
|
||||
menus = [menus];
|
||||
}
|
||||
if(formData.jsonType == 1){
|
||||
menus.map((item, index) => {
|
||||
item.parent_id = formData.parent_id;
|
||||
});
|
||||
menus = vk.pubfn.treeToArray(menus,{
|
||||
id:"menu_id",
|
||||
parent_id:"parent_id",
|
||||
children:"children"
|
||||
});
|
||||
}
|
||||
return {
|
||||
menus
|
||||
};
|
||||
}catch(err){
|
||||
vk.toast("json解析失败","none");
|
||||
console.error(err);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { value={} } = that;
|
||||
let { menu_id } = value.item || {};
|
||||
that.form1.data.parent_id = menu_id;
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
},
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
v-loading="page.loading"
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:before-action="form1.props.beforeAction"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<template v-slot:refresh>
|
||||
<view style="margin-left: 30px;">
|
||||
<text style="color: #66b1ff;text-decoration: underline;cursor: pointer;" @click="getList()">刷新数据</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-slot:permissionList>
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="data.treeData"
|
||||
:node-key="data.nodeKey"
|
||||
:default-checked-keys="data.checkedKeys"
|
||||
:props="{
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
expand-on-click-node
|
||||
></el-tree>
|
||||
</template>
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: ""
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
data:{
|
||||
list:[],
|
||||
info:{},
|
||||
// 权限的树形结构数据
|
||||
treeData: [],
|
||||
// 默认选中的权限列表
|
||||
checkedKeys:[],
|
||||
// 树的唯一标识
|
||||
nodeKey:"permission_id",
|
||||
},
|
||||
page: {
|
||||
title: "权限赋予",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "7vh",
|
||||
width:"800px",
|
||||
loading: false
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
menu_id:"",
|
||||
reset:true,
|
||||
permissionList:[]
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system/menu/sys/bindPermission",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
// 常用字段类型
|
||||
{ key: "refresh", title: "", type: "text", showLabel:false },
|
||||
{ key: "permissionList", title: "权限列表", type: "text" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
labelWidth: "100px",
|
||||
beforeAction:function(formData){
|
||||
let checkedKeys = that.$refs.tree.getCheckedKeys();
|
||||
let halfCheckedKeys = that.$refs.tree.getHalfCheckedKeys();
|
||||
let allCheckedKeys = checkedKeys.concat(halfCheckedKeys);
|
||||
// 去除空属性
|
||||
for(let i = 0;i<allCheckedKeys.length;i++){
|
||||
if(vk.pubfn.isNull(allCheckedKeys[i])){
|
||||
allCheckedKeys.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
formData.permissionList = allCheckedKeys;
|
||||
return formData;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { value={} } = that;
|
||||
let { item } = value;
|
||||
let { menu_id, name, permission = [] } = item;
|
||||
that.page.title = `权限赋予（${name}）`;
|
||||
that.data.info = item;
|
||||
that.form1.data.menu_id = menu_id;
|
||||
that.form1.data.permissionList = permission;
|
||||
if (vk.pubfn.isNotNull(that.data.treeData)){
|
||||
that.initData();
|
||||
return;
|
||||
}
|
||||
that.getList();
|
||||
},
|
||||
getList(){
|
||||
// 执行请求
|
||||
vk.callFunction({
|
||||
url: 'admin/system/permission/sys/getAll',
|
||||
data: {},
|
||||
loading:{ that, name:"page.loading" },
|
||||
success: (data) => {
|
||||
let rows = [{
|
||||
label :"全选",
|
||||
permission_id :"",
|
||||
children : data.rows
|
||||
}];
|
||||
// 渲染树
|
||||
that.data.treeData = rows;
|
||||
that.data.list = data.list;
|
||||
that.initData();
|
||||
}
|
||||
});
|
||||
},
|
||||
initData(){
|
||||
let { value={} } = that;
|
||||
let { item } = value;
|
||||
let { menu_id, name, permission = [] } = item;
|
||||
let currentPermission = vk.pubfn.copyObject(permission);
|
||||
// 设置当前选中用户的权限列表
|
||||
// 去除所有含有子元素的权限
|
||||
for(let i in that.data.list){
|
||||
let item = that.data.list[i];
|
||||
let index = currentPermission.indexOf(item.parent_id);
|
||||
if(index > -1){
|
||||
currentPermission.splice(index, 1);
|
||||
}
|
||||
}
|
||||
that.data.checkedKeys = currentPermission;
|
||||
that.$refs.tree.setCheckedKeys(currentPermission);
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess(res) {
|
||||
that.$set(that.value.item, "permission", that.form1.data.permissionList);
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view class="vk-table-button-box">
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-s-tools" :disabled="!table1.selectItem" @click="bindPermissionBtn">设置内置权限</el-button>
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addMenuByJsonBtn">通过JSON数组批量导入菜单</el-button>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']"
|
||||
:default-expand-all="false"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<!-- 排序值 -->
|
||||
<template v-slot:sort="{ row, column, index }">
|
||||
<el-input v-model="row.sort" size="mini" @change="sortChange($event, row)"/>
|
||||
</template>
|
||||
</vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="700px"
|
||||
mode="form"
|
||||
>
|
||||
<vk-data-form
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
label-width="80px"
|
||||
@success="formSuccess"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 设置角色权限组件 -->
|
||||
<bindPermission v-model="formDatas.bindPermission"></bindPermission>
|
||||
|
||||
<!-- 通过JSON批量导入菜单 -->
|
||||
<addMenuByJson v-model="formDatas.addMenuByJson" @success="refresh"></addMenuByJson>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bindPermission from './form/bindPermission.vue'
|
||||
import addMenuByJson from './form/addMenuByJson.vue'
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
const matchModeData = [
|
||||
{ value:0, label:"完整路径" },
|
||||
{ value:1, label:"通配符" },
|
||||
{ value:2, label:"正则表达式" }
|
||||
];
|
||||
const curdCategoryData = [
|
||||
{ value:1, label:"增", tagType:"success" },
|
||||
{ value:2, label:"删", tagType:"danger" },
|
||||
{ value:3, label:"改", tagType:"" },
|
||||
{ value:4, label:"查", tagType:"info" },
|
||||
{ value:5, label:"特殊", icon:"info" },
|
||||
{ value:0, label:"其他", icon:"info" },
|
||||
];
|
||||
const levelDate = [
|
||||
{ value:1, label:"子弹级", tagType:"success" },
|
||||
{ value:2, label:"炸弹级", tagType:"" },
|
||||
{ value:3, label:"榴弹级", tagType:"warning" },
|
||||
{ value:4, label:"核弹级", tagType:"danger" },
|
||||
{ value:0, label:"其他", tagType:"info" },
|
||||
];
|
||||
export default {
|
||||
components:{
|
||||
bindPermission,
|
||||
addMenuByJson
|
||||
},
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"admin/system/menu/sys/getAll",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
/* { key:"icon", title:"图标", type:"icon", width:100, defaultValue: "el-icon-tickets"}, */
|
||||
{ key:"name", title:"菜单名称", type:"html", width:340, align:"left",
|
||||
formatter:function(val, row, column, index){
|
||||
let icon = row.icon || "el-icon-tickets";
|
||||
if(icon.indexOf("vk-icon") > -1) icon = "vk-icon " + icon;
|
||||
return `<i class="${icon}" style="margin-right: 10px;"></i><text>${row.name}</text>`;
|
||||
}
|
||||
},
|
||||
{ key:"menu_id", title:"菜单唯一标识", type:"text", width:350, align:"left" },
|
||||
{ key:"url", title:"菜单URL", type:"text", width:250, align:"left" },
|
||||
{ key:"comment", title:"备注", type:"text", width:200, align:"left" },
|
||||
{ key:"permission", title:"菜单内置权限表", type:"text", width:120, defaultValue:"无" },
|
||||
{ key:"sort", title:"排序值", type:"number", width:100 },
|
||||
{
|
||||
key: "enable", title: "是否启用", type: "switch",
|
||||
activeValue: true,
|
||||
inactiveValue: false,
|
||||
width: 80,
|
||||
watch: (res) => {
|
||||
let { value, row, change } = res;
|
||||
vk.callFunction({
|
||||
url: "admin/system/menu/sys/updateBase",
|
||||
title: value ? "启用中..." : "关闭中...",
|
||||
data: {
|
||||
_id: row._id,
|
||||
enable: value
|
||||
},
|
||||
success: data => {
|
||||
change(value); // 这一步是让表格行内的开关改变显示状态
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "hidden_menu", title: "是否显示", type: "switch",
|
||||
activeValue: false,
|
||||
inactiveValue: true,
|
||||
width: 80,
|
||||
watch: (res) => {
|
||||
let { value, row, change } = res;
|
||||
vk.callFunction({
|
||||
url: "admin/system/menu/sys/updateBase",
|
||||
title: "请求中...",
|
||||
data: {
|
||||
_id: row._id,
|
||||
hidden_menu: value
|
||||
},
|
||||
success: data => {
|
||||
change(value); // 这一步是让表格行内的开关改变显示状态
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
{ key:"parent_id", title:"父级菜单Id", type:"text", width:250, align:"left" },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:"",
|
||||
},
|
||||
formDatas:{},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
sort:0,
|
||||
enable:true,
|
||||
url:""
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key:"", title:"基础属性", type:"bar-title" },
|
||||
{ key:"menu_id", title:"菜单标识", type:"text", tips:"设置一个能表达唯一含义的标识", show:["add"] },
|
||||
{ key:"name", title:"菜单名称", type:"text", tips:"设置菜单的名称" },
|
||||
{ key:"icon", title:"图标", type:"icon", tips:"设置一个能表达权限含义的图标" },
|
||||
{ key:"url", title:"URL", type:"text", tips:"页面路径，本地路径需以 / 开头 网络路径需带http:// 或 https://" },
|
||||
{ key:"sort", title:"排序值", type:"number", tips:"越小越显示在前面" },
|
||||
{ key:"parent_id", title:"父级菜单", type:"tree-select", tips:"父级的menu_id" ,
|
||||
action:"admin/system/menu/sys/getAll",
|
||||
props: { list:"rows", value:"menu_id", label:"label", children:"children" },
|
||||
},
|
||||
{ key:"comment", title:"备注", type:"textarea",maxlength:"99",showWordLimit:true,autosize:{ minRows: 2, maxRows: 10 },
|
||||
tips:"设置一个备注来更详细的描述此权限的含义"
|
||||
},
|
||||
{ key:"enable", title:"是否启用", type:"switch",
|
||||
tips:"当关闭时，菜单将失效，再次启用时，菜单会恢复。"
|
||||
},
|
||||
{ key:"hidden_menu", title:"是否隐藏", type:"switch",
|
||||
tips:"当设为true时，菜单不显示在左侧菜单列表中。"
|
||||
},
|
||||
],
|
||||
// 表单对应的验证规则
|
||||
rules: {
|
||||
menu_id:[
|
||||
{ required:true, message:'菜单标识不能为空', trigger:'blur' },
|
||||
{ min: 2, max: 40, message:'长度在 2 到 40 个字符', trigger:'blur' },
|
||||
],
|
||||
name:[
|
||||
{ required:true, message:'菜单名称不能为空', trigger:'blur' },
|
||||
],
|
||||
sort:[
|
||||
{ type:'number', message:'排序值必须为数字'}
|
||||
]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show:false,
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.query();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(key){
|
||||
return that.$refs.table1.getCurrentRow(key);
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn(){
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'admin/system/menu/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
let currentRow = that.getCurrentRow();
|
||||
if(currentRow && currentRow.menu_id){
|
||||
that.$set(that.form1.data,"parent_id", currentRow.menu_id);
|
||||
that.$set(that.form1.data,"menu_id", currentRow.menu_id+"-");
|
||||
}
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }){
|
||||
that.form1.props.action = 'admin/system/menu/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
formSuccess(){
|
||||
that.form1.props.show = false;
|
||||
// 下面的写法是为了部分修改完成后，减少一次再次请求数据库的查询
|
||||
if(that.form1.props.formType === "update"){
|
||||
let item = that.getCurrentRow(true);
|
||||
if(item.parent_id !== that.form1.data.parent_id){
|
||||
that.refresh();
|
||||
}else{
|
||||
vk.pubfn.objectAssignForVue(item, that.form1.data, that);
|
||||
}
|
||||
}else{
|
||||
that.refresh();
|
||||
}
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }){
|
||||
deleteFn({
|
||||
action:"admin/system/menu/sys/delete",
|
||||
data:{
|
||||
menu_id: item.menu_id
|
||||
},
|
||||
});
|
||||
},
|
||||
// 设置内置权限
|
||||
bindPermissionBtn(){
|
||||
let item = that.getCurrentRow(true);
|
||||
vk.pubfn.openForm('bindPermission',{ item });
|
||||
},
|
||||
addMenuByJsonBtn(){
|
||||
let item = that.getCurrentRow();
|
||||
vk.pubfn.openForm('addMenuByJson',{ item });
|
||||
},
|
||||
// 修改排序值
|
||||
sortChange(sort, item){
|
||||
vk.callFunction({
|
||||
url: 'admin/system/menu/sys/updateBase',
|
||||
data: {
|
||||
_id: item._id,
|
||||
sort: Number(sort)
|
||||
},
|
||||
success: (data) => {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<vk-data-input-radio
|
||||
v-model="form1.curd_category"
|
||||
:localdata="localdata"
|
||||
option-type="button"
|
||||
@change="onChange"
|
||||
></vk-data-input-radio>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "修改权限分类",
|
||||
top: "20vh",
|
||||
width: "460px"
|
||||
},
|
||||
form1:{
|
||||
_id:"",
|
||||
},
|
||||
localdata:[
|
||||
{ value:1, label:"增加", tagType:"success" },
|
||||
{ value:2, label:"删除", tagType:"danger" },
|
||||
{ value:3, label:"修改", tagType:"" },
|
||||
{ value:4, label:"查询", tagType:"info" },
|
||||
{ value:5, label:"特殊", tagType:"warning" },
|
||||
{ value:0, label:"其他", tagType:"warning" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item={} } = that.value;
|
||||
// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
|
||||
that.form1 = {
|
||||
_id: item._id,
|
||||
curd_category: item.curd_category
|
||||
}
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
//that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
onChange(value){
|
||||
vk.callFunction({
|
||||
url: 'admin/system/permission/sys/updateCategory',
|
||||
title:'请求中...',
|
||||
data:that.form1,
|
||||
success:function(data){
|
||||
that.$set(that.value.item,"curd_category",value);
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<vk-data-input-radio
|
||||
v-model="form1.level"
|
||||
:localdata="localdata"
|
||||
option-type="button"
|
||||
@change="onChange"
|
||||
></vk-data-input-radio>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "修改权限分类",
|
||||
top: "20vh",
|
||||
width: "460px"
|
||||
},
|
||||
form1:{
|
||||
_id:"",
|
||||
},
|
||||
localdata:[
|
||||
{ value:1, label:"子弹级", tagType:"success" },
|
||||
{ value:2, label:"炸弹级", tagType:"" },
|
||||
{ value:3, label:"榴弹级", tagType:"warning" },
|
||||
{ value:4, label:"核弹级", tagType:"danger" },
|
||||
{ value:0, label:"其他", tagType:"info" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item={} } = that.value;
|
||||
// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
|
||||
that.form1 = {
|
||||
_id: item._id,
|
||||
level: item.level
|
||||
}
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
//that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
onChange(value){
|
||||
vk.callFunction({
|
||||
url: 'admin/system/permission/sys/updateLevel',
|
||||
title:'请求中...',
|
||||
data:that.form1,
|
||||
success:function(data){
|
||||
that.$set(that.value.item,"level",value);
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view class="vk-table-button-box">
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']"
|
||||
:default-expand-all="false"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
@cell-click="cellClick"
|
||||
>
|
||||
<!-- 排序值 -->
|
||||
<template v-slot:sort="{ row, column, index }">
|
||||
<el-input v-model="row.sort" size="mini" @change="sortChange($event, row)"/>
|
||||
</template>
|
||||
</vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="700px"
|
||||
mode="form"
|
||||
>
|
||||
<vk-data-form
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
label-width="80px"
|
||||
@success="formSuccess"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
<!-- 修改分类 -->
|
||||
<updateCategory v-model="formDatas.updateCategory"></updateCategory>
|
||||
<!-- 修改等级 -->
|
||||
<updateLevel v-model="formDatas.updateLevel"></updateLevel>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
const matchModeData = [
|
||||
{ value:0, label:"完整路径" },
|
||||
{ value:1, label:"通配符" },
|
||||
{ value:2, label:"正则表达式" }
|
||||
];
|
||||
|
||||
import updateCategory from './form/updateCategory'
|
||||
import updateLevel from './form/updateLevel'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
updateCategory,
|
||||
updateLevel
|
||||
},
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"admin/system/permission/sys/getAll",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key:"permission_id", title:"权限标识", type:"text", width:310, align:"left",
|
||||
treeNode:true
|
||||
},
|
||||
{ key:"permission_name", title:"权限名称", type:"text", width:120, align:"left" },
|
||||
{ key:"comment", title:"备注", type:"text", width:180, align:"left" },
|
||||
{ key:"url", title:"URL", type:"text", width:250, align:"left" },
|
||||
{ key:"match_mode", title:"匹配模式", type:"text", width:100,
|
||||
formatter:function(val, row, column, index){
|
||||
if(typeof val === "undefined" || row.type == 0 || !row.url || row.url.length == 0) return "";
|
||||
return matchModeData[val].label;
|
||||
}
|
||||
},
|
||||
{ key:"curd_category", title:"权限分类", type:"tag", width:100,
|
||||
data: [
|
||||
{ value:1, label:"增", tagType:"success" },
|
||||
{ value:2, label:"删", tagType:"danger" },
|
||||
{ value:3, label:"改", tagType:"" },
|
||||
{ value:4, label:"查", tagType:"info" },
|
||||
{ value:5, label:"特", tagType:"warning" },
|
||||
//{ value:0, label:"其他", tagType:"warning" },
|
||||
]
|
||||
},
|
||||
{ key:"level", title:"权限级别", type:"tag", width:100,
|
||||
data: [
|
||||
{ value:1, label:"子弹级", tagType:"success" },
|
||||
{ value:2, label:"炸弹级", tagType:"" },
|
||||
{ value:3, label:"榴弹级", tagType:"warning" },
|
||||
{ value:4, label:"核弹级", tagType:"danger" },
|
||||
]
|
||||
},
|
||||
{ key:"sort", title:"排序值", type:"number", width:80 },
|
||||
{
|
||||
key: "enable", title: "是否启用", type: "switch",
|
||||
activeValue: true,
|
||||
inactiveValue: false,
|
||||
width: 80,
|
||||
watch: (res) => {
|
||||
let { value, row, change } = res;
|
||||
vk.callFunction({
|
||||
url: "admin/system/permission/sys/updateBase",
|
||||
title: value ? "启用中..." : "关闭中...",
|
||||
data: {
|
||||
_id: row._id,
|
||||
enable: value
|
||||
},
|
||||
success: data => {
|
||||
change(value); // 这一步是让表格行内的开关改变显示状态
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:"",
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
sort:0,
|
||||
enable:true,
|
||||
match_mode:0,
|
||||
url:[""]
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key:"", title:"基础属性", type:"bar-title" },
|
||||
{ key:"permission_id", title:"标识", type:"text", disabled:["update"],
|
||||
tips:"全局唯一，添加后不可修改，请尽量语义化。如：user-manage、user-add"
|
||||
},
|
||||
{ key:"permission_name", title:"名称", type:"text",
|
||||
tips:"起一个容易表达权限含义的名称"
|
||||
},
|
||||
{
|
||||
key:"url", title:"URL", type:"array<string>", tips:"云函数路径，若该权限只是父权限分组用，点击清空即可。",
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{ key:"match_mode", title:"匹配模式", type:"radio", width:100,
|
||||
data:matchModeData,
|
||||
tips:"选择合适的匹配模式"
|
||||
},
|
||||
{ key:"parent_id", title:"父级权限", type:"tree-select", tips:"父级的permission_id" ,
|
||||
action:"admin/system/permission/sys/getAll",
|
||||
props: { list:"rows", value:"permission_id", label:"label", children:"children" },
|
||||
},
|
||||
{ key:"sort", title:"排序值", type:"number", tips:"越小越显示在前面" },
|
||||
{ key:"comment", title:"备注", type:"textarea",maxlength:"99",showWordLimit:true,autosize:{ minRows: 2, maxRows: 10 },
|
||||
tips:"设置一个备注来更详细的描述此权限的含义"
|
||||
},
|
||||
{ key:"enable", title:"是否启用", type:"switch",
|
||||
tips:"当关闭时，权限将失效，再次启用时，权限会恢复。"
|
||||
},
|
||||
{ key:"", title:"高级属性", type:"bar-title" },
|
||||
{ key:"curd_category", title:"权限分类", type:"radio", width:100,
|
||||
data:[
|
||||
{ value:1, label:"增", tagType:"success" },
|
||||
{ value:2, label:"删", tagType:"danger" },
|
||||
{ value:3, label:"改", tagType:"" },
|
||||
{ value:4, label:"查", tagType:"info" },
|
||||
{ value:5, label:"特", tagType:"warning" },
|
||||
{ value:0, label:"其他", tagType:"warning" },
|
||||
],
|
||||
tips:"给权限分一个类，方便查询和表达含义"
|
||||
},
|
||||
{ key:"level", title:"权限级别", type:"radio", width:100,
|
||||
data:[
|
||||
{ value:1, label:"子弹级", tagType:"success" },
|
||||
{ value:2, label:"炸弹级", tagType:"" },
|
||||
{ value:3, label:"榴弹级", tagType:"warning" },
|
||||
{ value:4, label:"核弹级", tagType:"danger" },
|
||||
{ value:0, label:"其他", tagType:"info" },
|
||||
],
|
||||
tips:"给权限（菜单）一个级别，方便查询和表达重要程度"
|
||||
},
|
||||
],
|
||||
// 表单对应的验证规则
|
||||
rules: {
|
||||
permission_id:[
|
||||
{ required:true, message:'权限标识不能为空', trigger:'blur' },
|
||||
],
|
||||
permission_name:[
|
||||
{ required:true, message:'权限名称不能为空', trigger:'blur' },
|
||||
],
|
||||
sort:[
|
||||
{ type:'number', message:'排序值必须为数字'}
|
||||
]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show:false,
|
||||
}
|
||||
},
|
||||
// 其他表单属性容器(请勿修改)
|
||||
formDatas:{},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.query();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(key){
|
||||
return that.$refs.table1.getCurrentRow(key);
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn(){
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'admin/system/permission/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
let currentRow = that.getCurrentRow();
|
||||
if(currentRow && currentRow.permission_id){
|
||||
// 设置的方法
|
||||
that.$set(that.form1.data,"parent_id", currentRow.permission_id);
|
||||
that.$set(that.form1.data,"permission_id", currentRow.permission_id+"-");
|
||||
}
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }){
|
||||
that.form1.props.action = 'admin/system/permission/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
formSuccess(){
|
||||
that.form1.props.show = false;
|
||||
// 下面的写法是为了部分修改完成后，减少一次再次请求数据库的查询
|
||||
if(that.form1.props.formType === "update"){
|
||||
let item = that.getCurrentRow(true);
|
||||
if(item.parent_id !== that.form1.data.parent_id){
|
||||
that.refresh();
|
||||
}else{
|
||||
vk.pubfn.objectAssign(item, that.form1.data);
|
||||
}
|
||||
}else{
|
||||
that.refresh();
|
||||
}
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }){
|
||||
deleteFn({
|
||||
action:"admin/system/permission/sys/delete",
|
||||
data:{
|
||||
permission_id: item.permission_id
|
||||
},
|
||||
});
|
||||
},
|
||||
cellClick(row, column, cell, event){
|
||||
let key = column.property;
|
||||
if(key === "curd_category"){
|
||||
// 修改分类
|
||||
let item = that.getCurrentRow(true);
|
||||
vk.pubfn.openForm('updateCategory', { item });
|
||||
}else if(key === "level"){
|
||||
// 修改等级
|
||||
let item = that.getCurrentRow(true);
|
||||
vk.pubfn.openForm('updateLevel', { item });
|
||||
}
|
||||
},
|
||||
// 修改排序值
|
||||
sortChange(sort, item){
|
||||
vk.callFunction({
|
||||
url: 'admin/system/permission/sys/updateBase',
|
||||
data: {
|
||||
_id: item._id,
|
||||
sort: Number(sort)
|
||||
},
|
||||
success: (data) => {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
v-loading="page.loading"
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:before-action="form1.props.beforeAction"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<template v-slot:menuList>
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="data.treeData"
|
||||
:node-key="data.nodeKey"
|
||||
:default-checked-keys="data.checkedKeys"
|
||||
:props="{
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
expand-on-click-node
|
||||
></el-tree>
|
||||
</template>
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: ""
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
data:{
|
||||
list:[],
|
||||
// 权限的树形结构数据
|
||||
treeData: [],
|
||||
// 默认选中的权限列表
|
||||
checkedKeys:[],
|
||||
// 树的唯一标识
|
||||
nodeKey:"menu_id",
|
||||
},
|
||||
page: {
|
||||
title: "菜单赋予",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "7vh",
|
||||
width:"800px",
|
||||
loading: false
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
role_id:"",
|
||||
reset:true,
|
||||
menuList:[],
|
||||
addPermission:true
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system/role/sys/bindMenu",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "addPermission", title: "同时赋予菜单内置权限", type: "switch" },
|
||||
{ key: "menuList", title: "菜单列表", type: "text", showLabel:false },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
labelWidth: "160px",
|
||||
beforeAction:function(formData){
|
||||
let checkedKeys = that.$refs.tree.getCheckedKeys();
|
||||
let halfCheckedKeys = that.$refs.tree.getHalfCheckedKeys();
|
||||
let allCheckedKeys = checkedKeys.concat(halfCheckedKeys);
|
||||
// 去除空属性
|
||||
for(let i = 0;i<allCheckedKeys.length;i++){
|
||||
if(vk.pubfn.isNull(allCheckedKeys[i])){
|
||||
allCheckedKeys.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
formData.menuList = allCheckedKeys;
|
||||
return formData;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { value={} } = that;
|
||||
let { item } = value;
|
||||
let { role_id, role_name, menu = [] } = item;
|
||||
|
||||
that.page.title = `菜单赋予（${role_name}）`;
|
||||
|
||||
that.form1.data.role_id = role_id;
|
||||
that.form1.data.menuList = menu;
|
||||
if (vk.pubfn.isNotNull(that.data.treeData)){
|
||||
that.initData();
|
||||
return;
|
||||
}
|
||||
that.getList();
|
||||
},
|
||||
getList(){
|
||||
vk.callFunction({
|
||||
url: 'admin/system/menu/sys/getAll',
|
||||
loading:{ that, name:"page.loading" },
|
||||
data: {},
|
||||
success: (data) => {
|
||||
let rows = [{
|
||||
label :"全选",
|
||||
menu_id :"",
|
||||
children : data.rows
|
||||
}];
|
||||
// 渲染树
|
||||
that.data.treeData = rows;
|
||||
that.data.list = data.list;
|
||||
that.initData();
|
||||
}
|
||||
});
|
||||
},
|
||||
initData(){
|
||||
let { value={} } = that;
|
||||
let { item } = value;
|
||||
let { role_id, role_name, menu = [] } = item;
|
||||
|
||||
let current = vk.pubfn.copyObject(menu);
|
||||
// 设置当前选中用户的权限列表
|
||||
// 去除所有含有子元素的权限
|
||||
for(let i in that.data.list){
|
||||
let item = that.data.list[i];
|
||||
let index = current.indexOf(item.parent_id);
|
||||
if(index > -1){
|
||||
current.splice(index, 1);
|
||||
}
|
||||
}
|
||||
that.data.checkedKeys = current;
|
||||
that.$refs.tree.setCheckedKeys(current);
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess(res) {
|
||||
if (res.data.info) {
|
||||
that.$set(that.value.item, "menu", res.data.info.menu);
|
||||
that.$set(that.value.item, "stats_count_info", res.data.info.stats_count_info);
|
||||
}
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
v-loading="page.loading"
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:before-action="form1.props.beforeAction"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<template v-slot:permissionList>
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="data.treeData"
|
||||
:node-key="data.nodeKey"
|
||||
:default-checked-keys="data.checkedKeys"
|
||||
:props="{
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
expand-on-click-node
|
||||
></el-tree>
|
||||
</template>
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: ""
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
data:{
|
||||
list:[],
|
||||
info:{},
|
||||
// 权限的树形结构数据
|
||||
treeData: [],
|
||||
// 默认选中的权限列表
|
||||
checkedKeys:[],
|
||||
// 树的唯一标识
|
||||
nodeKey:"permission_id",
|
||||
},
|
||||
page: {
|
||||
title: "权限赋予",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "7vh",
|
||||
width:"800px",
|
||||
loading: false
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
role_id:"",
|
||||
reset:true,
|
||||
permissionList:[],
|
||||
stats_count_info:{}
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system/role/sys/bindPermission",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
// 常用字段类型
|
||||
{ key: "permissionList", title: "权限列表", type: "text" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
labelWidth: "100px",
|
||||
beforeAction:function(formData){
|
||||
let checkedKeys = that.$refs.tree.getCheckedKeys();
|
||||
let halfCheckedKeys = that.$refs.tree.getHalfCheckedKeys();
|
||||
let allCheckedKeys = checkedKeys.concat(halfCheckedKeys);
|
||||
// 去除空属性
|
||||
for(let i = 0;i<allCheckedKeys.length;i++){
|
||||
if(vk.pubfn.isNull(allCheckedKeys[i])){
|
||||
allCheckedKeys.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
formData.permissionList = allCheckedKeys;
|
||||
let menuNum = vk.pubfn.getData(that.data,"info.stats_count_info.type[0].count",0);
|
||||
if(typeof menuNum !== "number") menuNum = 0;
|
||||
let list = vk.pubfn.treeToArray(that.data.treeData, {
|
||||
id:"permission_id",
|
||||
parent_id:"parent_id",
|
||||
children:"children",
|
||||
deleteChildren:true
|
||||
});
|
||||
let stats_count_info = {
|
||||
// 各个分类有多少个数量
|
||||
curd_category: [
|
||||
{ type: 0, label: "未分类", count: 0 },
|
||||
{ type: 1, label: "增", count: 0 },
|
||||
{ type: 2, label: "删", count: 0 },
|
||||
{ type: 3, label: "改", count: 0 },
|
||||
{ type: 4, label: "查", count: 0 },
|
||||
{ type: 5, label: "特殊", count: 0 }
|
||||
],
|
||||
// 各个等级有多少个数量
|
||||
level: [
|
||||
{ type: 0, label: "未分类", count: 0 },
|
||||
{ type: 1, label: "子弹级", count: 0 },
|
||||
{ type: 2, label: "炸弹级", count: 0 },
|
||||
{ type: 3, label: "榴弹级", count: 0 },
|
||||
{ type: 4, label: "核弹级", count: 0 }
|
||||
],
|
||||
// 各个模式有多少个数量
|
||||
match_mode: [
|
||||
{ type: 0, label: "完整路径", count: 0 },
|
||||
{ type: 1, label: "通配符", count: 0 },
|
||||
{ type: 2, label: "正则表达式", count: 0 }
|
||||
],
|
||||
// 菜单和权限分别多少个数量
|
||||
type: [
|
||||
{ type: 0, label: "菜单", count: menuNum },
|
||||
{ type: 1, label: "权限", count: 0 }
|
||||
]
|
||||
};
|
||||
allCheckedKeys.forEach((value,index,arr)=>{
|
||||
let res = vk.pubfn.getListItem(list,"permission_id",value);
|
||||
let { curd_category=0, level=0, match_mode=0, url } = res;
|
||||
if(vk.pubfn.isNotNull(url)){
|
||||
stats_count_info["type"][1].count++;
|
||||
stats_count_info["curd_category"][curd_category].count++;
|
||||
stats_count_info["level"][level].count++;
|
||||
stats_count_info["match_mode"][match_mode].count++;
|
||||
};
|
||||
});
|
||||
formData.stats_count_info = stats_count_info;
|
||||
return formData;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { value={} } = that;
|
||||
let { item } = value;
|
||||
let { role_id, role_name, permission = [] } = item;
|
||||
that.page.title = `权限赋予（${role_name}）`;
|
||||
that.data.info = item;
|
||||
that.form1.data.role_id = role_id;
|
||||
that.form1.data.permissionList = permission;
|
||||
if (vk.pubfn.isNotNull(that.data.treeData)){
|
||||
that.initData();
|
||||
return;
|
||||
}
|
||||
that.getList();
|
||||
},
|
||||
getList(){
|
||||
// 执行请求
|
||||
vk.callFunction({
|
||||
url: 'admin/system/permission/sys/getAll',
|
||||
data: {},
|
||||
loading:{ that, name:"page.loading" },
|
||||
success: (data) => {
|
||||
let rows = [{
|
||||
label :"全选",
|
||||
permission_id :"",
|
||||
children : data.rows
|
||||
}];
|
||||
// 渲染树
|
||||
that.data.treeData = rows;
|
||||
that.data.list = data.list;
|
||||
that.initData();
|
||||
}
|
||||
});
|
||||
},
|
||||
initData(){
|
||||
let { value={} } = that;
|
||||
let { item } = value;
|
||||
let { menu_id, name, permission = [] } = item;
|
||||
let current = vk.pubfn.copyObject(permission);
|
||||
// 设置当前选中用户的权限列表
|
||||
// 去除所有含有子元素的权限
|
||||
for(let i in that.data.list){
|
||||
let item = that.data.list[i];
|
||||
let index = current.indexOf(item.parent_id);
|
||||
if(index > -1){
|
||||
current.splice(index, 1);
|
||||
}
|
||||
}
|
||||
that.data.checkedKeys = current;
|
||||
that.$refs.tree.setCheckedKeys(current);
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess(res) {
|
||||
if (res.data.info) {
|
||||
that.$set(that.value.item, "permission", res.data.info.permission);
|
||||
that.$set(that.value.item, "stats_count_info", res.data.info.stats_count_info);
|
||||
}
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view class="vk-table-button-box">
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-s-tools" :disabled="!table1.selectItem" @click="bindPermissionBtn">权限赋予</el-button>
|
||||
<el-button type="danger" size="small" icon="el-icon-s-tools" :disabled="!table1.selectItem" @click="bindMenu">菜单赋予</el-button>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']"
|
||||
:selection="false"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="500px"
|
||||
mode="form"
|
||||
>
|
||||
<vk-data-form
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
label-width="80px"
|
||||
@success="form1.props.show = false;refresh();"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 角色赋予权限弹窗 -->
|
||||
<bindPermission v-model="formDatas.bindPermission"></bindPermission>
|
||||
<!-- 角色赋予菜单弹窗 -->
|
||||
<bindMenu v-model="formDatas.bindMenu"></bindMenu>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
import bindPermission from './form/bindPermission'
|
||||
import bindMenu from './form/bindMenu'
|
||||
export default {
|
||||
components:{
|
||||
bindPermission,
|
||||
bindMenu
|
||||
},
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"admin/system/role/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key:"role_id", title:"角色标识", type:"text", width:220 },
|
||||
{ key:"role_name", title:"角色名称", type:"text", width:130 },
|
||||
{ key:"comment", title:"备注", type:"text", minWidth:180 },
|
||||
{ key:"permissionList", title:"拥有的权限", type:"text", minWidth:290, align:"left",
|
||||
formatter:(val, row, column, index)=>{
|
||||
let str = "";
|
||||
if(row.role_id === "admin"){
|
||||
str = "系统内置角色 - 拥有所有权限";
|
||||
}else if(vk.pubfn.isNull(val)){
|
||||
str = "该角色未赋予任何权限";
|
||||
}else{
|
||||
val.map((item, index) => {
|
||||
if(vk.pubfn.isNotNull(item.url)){
|
||||
str += item.permission_name;
|
||||
if (index !== val.length - 1) {
|
||||
str += "、";
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
{ key:"menuList", title:"拥有的菜单", type:"text", minWidth:290, align:"left",
|
||||
formatter:(val, row, column, index)=>{
|
||||
let str = "";
|
||||
if(row.role_id === "admin"){
|
||||
str = "系统内置角色 - 拥有所有菜单";
|
||||
}else if(vk.pubfn.isNull(val)){
|
||||
str = "该角色未赋予任何菜单";
|
||||
}else{
|
||||
val.map((item, index) => {
|
||||
str += item.name;
|
||||
if (index !== val.length - 1) {
|
||||
str += "、";
|
||||
}
|
||||
});
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
// 系统
|
||||
{ key:"stats_count_info", title:"统计信息", type:"html", width:220, align:"left", show: ["detail"],
|
||||
formatter:(val, row, column, index)=>{
|
||||
console.log(`val`,val);
|
||||
let str = ``;
|
||||
if(row.role_id === "admin"){
|
||||
return "拥有所有权限";
|
||||
}
|
||||
for (let value in val) {
|
||||
switch(value){
|
||||
case "curd_category":
|
||||
str+= `分类: `;
|
||||
break;
|
||||
case "level":
|
||||
str+= `等级: `;
|
||||
break;
|
||||
case "match_mode":
|
||||
str+= `模式: `;
|
||||
break;
|
||||
default:
|
||||
str+= `菜单和权限: `;
|
||||
break;
|
||||
};
|
||||
for (let [index, item] of val[value].entries()) {
|
||||
str += `${item.label} : ${item.count}个 `;
|
||||
};
|
||||
str +=`<br/>`;
|
||||
};
|
||||
return str;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "enable", title: "是否启用", type: "switch",
|
||||
activeValue: true,
|
||||
inactiveValue: false,
|
||||
width: 80,
|
||||
watch: (res) => {
|
||||
let { value, row, change } = res;
|
||||
vk.callFunction({
|
||||
url: "admin/system/role/sys/updateBase",
|
||||
title: value ? "启用中..." : "关闭中...",
|
||||
data: {
|
||||
_id: row._id,
|
||||
enable: value
|
||||
},
|
||||
success: data => {
|
||||
change(value); // 这一步是让表格行内的开关改变显示状态
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:"",
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
{ key:"role_id", title:"角色标识", type:"text", width: 160, mode:"%%" },
|
||||
{ key:"role_name", title:"角色名称", type:"text", width: 160, mode:"%%" },
|
||||
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400 },
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
enable:true,
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key:"role_id", title:"角色标识", type:"text", show:["add"] },
|
||||
{ key:"role_name", title:"角色名称", type:"text" },
|
||||
{ key:"comment", title:"备注", type:"textarea",
|
||||
maxlength:"99", showWordLimit:true, autosize:{ minRows: 2, maxRows: 10 } ,
|
||||
},
|
||||
{ key:"enable", title:"是否启用", type:"switch" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules:{
|
||||
role_id:[
|
||||
{ required:true, message:'角色标识不能为空', trigger:'blur' },
|
||||
],
|
||||
role_name:[
|
||||
{ required:true, message:'角色名称不能为空', trigger:'change' }
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show:false,
|
||||
}
|
||||
},
|
||||
// 其他表单属性容器(请勿修改)
|
||||
formDatas:{},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.query();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(key){
|
||||
return that.$refs.table1.getCurrentRow(key);
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn(){
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'admin/system/role/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }){
|
||||
that.form1.props.action = 'admin/system/role/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }){
|
||||
deleteFn({
|
||||
action:"admin/system/role/sys/delete",
|
||||
data:{
|
||||
role_id: item.role_id
|
||||
},
|
||||
});
|
||||
},
|
||||
// 权限赋予按钮
|
||||
bindPermissionBtn(){
|
||||
let item = that.getCurrentRow(true);
|
||||
vk.pubfn.openForm('bindPermission',{ item });
|
||||
},
|
||||
// 菜单赋予绑定按钮
|
||||
bindMenu(){
|
||||
let item = that.getCurrentRow(true);
|
||||
vk.pubfn.openForm('bindMenu',{ item });
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-tree-node__content .el-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
:form-type="value.mode"
|
||||
v-loading="page.loading"
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<template v-slot:user_id>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<el-avatar v-if="data.avatar" :src="data.avatar" fit="cover"></el-avatar>
|
||||
<text style="margin-left: 10px;">{{ data.nickname }}（ID：{{ data._id }}）</text>
|
||||
</view>
|
||||
</template>
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: ""
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
// 页面基础数据
|
||||
page: {
|
||||
title: "角色绑定",
|
||||
submitText: "绑定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "7vh",
|
||||
width:"820px",
|
||||
loading: false
|
||||
},
|
||||
data:{
|
||||
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
user_id: "",
|
||||
roleList: [],
|
||||
reset: true
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system/user/sys/bindRole",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key:"user_id", title:"用户", type:"text" },
|
||||
{
|
||||
key: "roleList", 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:"comment", title:"备注", type:"text" },
|
||||
],
|
||||
formData:{
|
||||
enable:true
|
||||
},
|
||||
queryColumns:[
|
||||
{ key: "role_name", title: "角色昵称", type: "text", width: 150, mode: "%%" },
|
||||
{ key: "role_id", title: "角色标识", type: "text", width: 150, mode: "%%" },
|
||||
{ key: "enable", type: "text", mode: "=", hidden:true }
|
||||
],
|
||||
multiple:true,
|
||||
pageSize:10, // 只有5和10可以选
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
user_id: [
|
||||
{ "required": true, "message": "user_id不能为空", "trigger": "change" }
|
||||
]
|
||||
},
|
||||
// label宽度
|
||||
labelWidth:"100px",
|
||||
// label对其方式
|
||||
labelPosition:"left",
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { value } = that;
|
||||
let { role = [], _id } = value.item;
|
||||
that.data = value.item;
|
||||
that.form1.props.show = true;
|
||||
that.form1.data.user_id = _id;
|
||||
that.form1.data.roleList = role;
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 表单提交成功后
|
||||
onFormSuccess() {
|
||||
that.$set(that.value.item, "role", that.form1.data.roleList);
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
:form-type="value.mode"
|
||||
v-loading="page.loading"
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<template v-slot:user_id>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<el-avatar v-if="data.avatar" :src="data.avatar" fit="cover"></el-avatar>
|
||||
<text style="margin-left: 10px;">{{ data.nickname }}（ID：{{ data._id }}）</text>
|
||||
</view>
|
||||
</template>
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: ""
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
// 页面基础数据
|
||||
page: {
|
||||
title: "重置密码",
|
||||
submitText: "修改",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "7vh",
|
||||
width:"600px",
|
||||
loading: false
|
||||
},
|
||||
data:{
|
||||
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
user_id: "",
|
||||
password:""
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system/user/sys/resetPassword",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key:"user_id", title:"用户", type:"text" },
|
||||
{ key:"password", title:"新密码", type:"password", showPassword:true },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
user_id: [
|
||||
{ "required": true, "message": "user_id不能为空", "trigger": "change" }
|
||||
],
|
||||
password:[
|
||||
{ required:true, message:'新密码不能为空', trigger:'change' },
|
||||
{ validator:vk.pubfn.validator("password"), message: '密码长度在6~18之间，只能包含字母、数字和下划线', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
// label宽度
|
||||
labelWidth:"100px",
|
||||
// label对其方式
|
||||
labelPosition:"left",
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item={} } = that.value;
|
||||
let data = vk.pubfn.copyObject(item);
|
||||
that.data = data;
|
||||
that.form1.data = {
|
||||
user_id: data._id,
|
||||
password: ""
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 表单提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
},
|
||||
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
@open="onOpen"
|
||||
@closed="onClose"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:before-action="form1.props.beforeAction"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "标题",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "7vh",
|
||||
width: "800px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
login_appid_type:1,
|
||||
mode:1
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system/user/sys/batchUpdateAppLogin",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{
|
||||
key:"login_appid_type", title:"登录权限", type:"radio",
|
||||
optionType:"button",
|
||||
data:[
|
||||
{ value:1, label:"部分应用" },
|
||||
{ value:0, label:"全部应用" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"mode", title:"模式", type:"radio",
|
||||
optionType:"button",
|
||||
data:[
|
||||
{ value:1, label:"覆盖" },
|
||||
{ value:2, label:"新增" },
|
||||
{ value:3, label:"移除" }
|
||||
],
|
||||
showRule:"login_appid_type=1",
|
||||
},
|
||||
{
|
||||
key:"dcloud_appid", title:"可登录的应用", type:"checkbox",
|
||||
border:true,
|
||||
itemWidth:100,
|
||||
data:[],
|
||||
props:{ value:"appid", label:"name" },
|
||||
showRule:"login_appid_type=1&&mode=1"
|
||||
},
|
||||
{
|
||||
key:"dcloud_appid", title:"可登录的应用", type:"radio",
|
||||
border:true,
|
||||
itemWidth:100,
|
||||
data:[],
|
||||
props:{ value:"appid", label:"name" },
|
||||
showRule:"login_appid_type=1&&mode!=1"
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// 左侧label的宽度
|
||||
labelWidth: "100px",
|
||||
// 提交前执行
|
||||
beforeAction:function(formData){
|
||||
let allow_login_background = false;
|
||||
if(!formData.login_appid_type){
|
||||
allow_login_background = true;
|
||||
}else{
|
||||
if(typeof formData.dcloud_appid === "object"){
|
||||
formData.dcloud_appid.map((appid, index) => {
|
||||
let item = vk.pubfn.getListItem(that.value.item.dcloudAppidData, "appid", appid);
|
||||
if(item.type === "admin"){
|
||||
allow_login_background = true;
|
||||
}
|
||||
});
|
||||
}else{
|
||||
let item = vk.pubfn.getListItem(that.value.item.dcloudAppidData, "appid", formData.dcloud_appid);
|
||||
if(item.type === "admin"){
|
||||
allow_login_background = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
formData.user_ids = that.value.item.user_ids;
|
||||
formData.allow_login_background = allow_login_background;
|
||||
return formData;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item={} } = that.value;
|
||||
// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
|
||||
that.form1.props.columns[2].data = item.dcloudAppidData;
|
||||
that.form1.props.columns[3].data = item.dcloudAppidData;
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
//that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 请不要修改此页面的代码，因为更新后会覆盖，你自己系统的用户管理不应该在这个页面上开发，你应该复制整个页面，在别的目录创建用户管理。 -->
|
||||
<!-- 请不要修改此页面的代码，因为更新后会覆盖，你自己系统的用户管理不应该在这个页面上开发，你应该复制整个页面，在别的目录创建用户管理。 -->
|
||||
<!-- 请不要修改此页面的代码，因为更新后会覆盖，你自己系统的用户管理不应该在这个页面上开发，你应该复制整个页面，在别的目录创建用户管理。 -->
|
||||
<!-- 请不要修改此页面的代码，因为更新后会覆盖，你自己系统的用户管理不应该在这个页面上开发，你应该复制整个页面，在别的目录创建用户管理。 -->
|
||||
<!-- 请不要修改此页面的代码，因为更新后会覆盖，你自己系统的用户管理不应该在这个页面上开发，你应该复制整个页面，在别的目录创建用户管理。 -->
|
||||
<!-- 请不要修改此页面的代码，因为更新后会覆盖，你自己系统的用户管理不应该在这个页面上开发，你应该复制整个页面，在别的目录创建用户管理。 -->
|
||||
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view class="vk-table-button-box">
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<!-- 批量操作 -->
|
||||
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
||||
<el-button type="danger" size="small"
|
||||
:disabled="table1.multipleSelection.length === 0"
|
||||
>
|
||||
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="1">账号批量解冻</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">账号批量冻结</el-dropdown-item>
|
||||
<el-dropdown-item :command="3">批量设置可登录的应用</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-button type="primary" size="small" icon="el-icon-s-tools" :disabled="!table1.selectItem" @click="bindRoleBtn">角色绑定</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-warning-outline" :disabled="!table1.selectItem" @click="resetPasswordBtn">重置密码</el-button>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']"
|
||||
:selection="true"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="580px"
|
||||
top="4vh"
|
||||
mode="form"
|
||||
>
|
||||
<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'
|
||||
label-width="120px"
|
||||
max-height="700px"
|
||||
@success="form1.props.show = false;refresh();"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 用户角色授权弹窗 -->
|
||||
<bindRole v-model="formDatas.bindRole"></bindRole>
|
||||
<!-- 重置密码弹窗 -->
|
||||
<resetPassword v-model="formDatas.resetPassword"></resetPassword>
|
||||
<!-- 批量设置用户允许登录的客户端 -->
|
||||
<setAuthorizedAppLogin v-model="formDatas.setAuthorizedAppLogin" @success="refresh"></setAuthorizedAppLogin>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
var genderData = [
|
||||
{ value:1, label:"男"},
|
||||
{ value:2, label:"女"},
|
||||
{ value:0, label:"保密"}
|
||||
];
|
||||
var dcloudAppidData = [];
|
||||
|
||||
import bindRole from './form/bindRole'
|
||||
import resetPassword from './form/resetPassword'
|
||||
import setAuthorizedAppLogin from './form/setAuthorizedAppLogin'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
bindRole,
|
||||
resetPassword,
|
||||
setAuthorizedAppLogin
|
||||
},
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"admin/system/user/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key:"avatar", title:"头像", type:"avatar", width:80 },
|
||||
{ key:"username", title:"用户名", type:"text", width:180, defaultValue:'未设置' },
|
||||
{ key:"nickname", title:"昵称", type:"text", width:180, defaultValue:'未设置' },
|
||||
{ key:"mobile", title:"手机号", type:"text", width:120, defaultValue:"未绑定" },
|
||||
{ key:"appList", title:"可登录的应用", type:"html", width:220,
|
||||
formatter: function(val, row, column, index) {
|
||||
if(typeof row.dcloud_appid === "undefined") return "全部应用";
|
||||
if(row.dcloud_appid.length === 0) return "未绑定任何应用";
|
||||
if(val.length === 0 && row.dcloud_appid.length > 0) return row.dcloud_appid;
|
||||
let str = "";
|
||||
val.map((item, index) => {
|
||||
str += `、${item.name}`;
|
||||
});
|
||||
if(str) str = str.substring(1);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
{ key:"role", title:"角色", type:"text", width:120, defaultValue:'无' },
|
||||
{ key:"comment", title:"备注", type:"text", width:160 },
|
||||
{ key:"allow_login_background", title:"允许登录后台", type:"tag", width: 140, defaultValue:false, sortable:"custom",
|
||||
data:[
|
||||
{ value:true, label:"允许", tagType:"success" },
|
||||
{ value:false, label:"禁止", tagType:"danger" }
|
||||
]
|
||||
},
|
||||
{ key:"status", title:"账户状态", type:"tag", width:120, defaultValue:0, sortable:"custom",
|
||||
data:[
|
||||
{ value:0, label:"正常", tagType:"success" },
|
||||
{ value:1, label:"冻结", tagType:"danger" },
|
||||
{ value:2, label:"审核中", tagType:"primary" },
|
||||
{ value:3, label:"审核拒绝", tagType:"info" }
|
||||
]
|
||||
},
|
||||
{ key:"gender", title:"性别", type:"radio", width:80, defaultValue:0, sortable:"custom",
|
||||
data:genderData
|
||||
},
|
||||
{ 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:"_id", title:"id", type:"text", width:280 },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:"",
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
dcloud_appid:""
|
||||
//allow_login_background : true,
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
{ key:"dcloud_appid", title:"所属应用", type:"select", width:160, mode:"custom",
|
||||
data:[],
|
||||
props:{ value:"appid", label:"name" }
|
||||
},
|
||||
{ key:"username", title:"用户名", type:"text", width:160, mode:"%%" },
|
||||
{ key:"nickname", title:"昵称", type:"text", width:140, mode:"%%" },
|
||||
{ key:"mobile", title:"手机号", type:"text", width:140, mode:"%%" },
|
||||
{ key:"_id", title:"ID", type:"text", width:140, mode:"=" },
|
||||
{ key:"register_date", title:"注册时间", type:"datetimerange", width:380, mode:"[]" },
|
||||
{ key:"allow_login_background", hidden:true, mode:"=" },
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
gender:0,
|
||||
login_appid_type:1,
|
||||
allow_login_background:false
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key:"username", title:"用户名", type:"text", show:["add"] },
|
||||
{ key:"nickname", title:"昵称", type:"text" },
|
||||
{ key:"gender", title:"性别", type:"radio",
|
||||
data: genderData
|
||||
},
|
||||
{ key:"password", title:"密码", type:"text", tips:"若密码为空，则默认为234567", show:["add"] },
|
||||
{ key:"mobile", title:"手机号", type:"text" },
|
||||
{
|
||||
key:"login_appid_type", title:"登录权限", type:"radio",
|
||||
optionType:"button",
|
||||
data:[
|
||||
{ value:1, label:"部分应用" },
|
||||
{ value:0, label:"全部应用" }
|
||||
],
|
||||
onChange:function(val, formData, column, index, option){
|
||||
if(val === 1){
|
||||
that.form1.data.allow_login_background = false
|
||||
}else{
|
||||
that.form1.data.allow_login_background = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"dcloud_appid", title:"可登录的应用", type:"checkbox",
|
||||
border:true,
|
||||
itemWidth:100,
|
||||
data:[],
|
||||
props:{ value:"appid", label:"name" },
|
||||
showRule:"login_appid_type=1",
|
||||
onChange:function(val, formData, column, index, option=[]){
|
||||
let allow_login_background = false;
|
||||
option.map((item={}, index) => {
|
||||
if(item.type && item.type.indexOf("admin") > -1){
|
||||
allow_login_background = true;
|
||||
}
|
||||
});
|
||||
if(that.form1.data.login_appid_type === 1){
|
||||
that.form1.data.allow_login_background = allow_login_background;
|
||||
}else{
|
||||
that.form1.data.allow_login_background = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// key:"allow_login_background", title:"允许登录后台?", type:"switch",
|
||||
// tips:"只有同时设置可登录的应用有管理端以及允许登后台，该用户才能登录管理端"
|
||||
// },
|
||||
{ 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' }
|
||||
],
|
||||
password: [
|
||||
{ validator:vk.pubfn.validator("password"), message: '密码长度在6~18之间，只能包含字母、数字和下划线', trigger: 'blur' }
|
||||
],
|
||||
mobile:[
|
||||
{ validator:vk.pubfn.validator("mobile"), message: '手机号格式错误', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
// 其他表单属性容器(请勿修改)
|
||||
formDatas:{},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
that.getAppList();
|
||||
},
|
||||
// 获取应用列表
|
||||
getAppList(obj){
|
||||
// 请在store/modules/$app.js文件里增加代码 appList: lifeData.$app.appList || []
|
||||
vk.callFunction({
|
||||
url: 'admin/system/app/sys/getList',
|
||||
data:{},
|
||||
success:function(data){
|
||||
dcloudAppidData = data.rows;
|
||||
let dcloudAppidData1 = vk.pubfn.copyObject(data.rows);
|
||||
let dcloudAppidData2 = vk.pubfn.copyObject(data.rows);
|
||||
let index1 = vk.pubfn.getListIndex(that.form1.props.columns, "key", "dcloud_appid");
|
||||
that.form1.props.columns[index1].data = dcloudAppidData1;
|
||||
dcloudAppidData2.unshift({
|
||||
appid:"___error___",
|
||||
name:"不存在的应用"
|
||||
});
|
||||
dcloudAppidData2.unshift({
|
||||
appid:"___empty-array___",
|
||||
name:"未绑定应用"
|
||||
});
|
||||
dcloudAppidData2.unshift({
|
||||
appid:"___non-existent___",
|
||||
name:"全部应用"
|
||||
});
|
||||
let index2 = vk.pubfn.getListIndex(that.queryForm1.columns, "key", "dcloud_appid");
|
||||
that.queryForm1.columns[index2].data = dcloudAppidData2;
|
||||
let appids = [];
|
||||
dcloudAppidData.map((item, index) => {
|
||||
appids.push(item.appid);
|
||||
});
|
||||
that.queryForm1.formData.appids = appids;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.query();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(key){
|
||||
return that.$refs.table1.getCurrentRow(key);
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn(){
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'admin/system/user/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }){
|
||||
that.form1.props.action = 'admin/system/user/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
item.login_appid_type = typeof item.dcloud_appid === "undefined" ? 0 :1;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }){
|
||||
deleteFn({
|
||||
action:"admin/system/user/sys/delete",
|
||||
data:{
|
||||
_id: item._id
|
||||
}
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index){
|
||||
switch(index){
|
||||
case 1: that.frozen(0); break;
|
||||
case 2: that.frozen(1); break;
|
||||
case 3: that.setAuthorizedAppLogin(); break;
|
||||
default: break;
|
||||
}
|
||||
},
|
||||
// 角色绑定按钮
|
||||
bindRoleBtn(){
|
||||
let item = that.getCurrentRow(true);
|
||||
vk.pubfn.openForm('bindRole',{ item });
|
||||
},
|
||||
// 重置密码按钮
|
||||
resetPasswordBtn(){
|
||||
let item = that.getCurrentRow(true);
|
||||
vk.pubfn.openForm('resetPassword',{ item });
|
||||
},
|
||||
//账户批量冻结/解冻
|
||||
frozen(status){
|
||||
let user_ids = [];
|
||||
that.table1.multipleSelection.map((item,index)=>{
|
||||
user_ids.push(item._id);
|
||||
});
|
||||
vk.callFunction({
|
||||
url: 'admin/system/user/sys/batchUpdateStatus',
|
||||
title:'请求中...',
|
||||
data:{
|
||||
user_ids,
|
||||
status
|
||||
},
|
||||
success:function(data) {
|
||||
that.$notify({
|
||||
message:'批量操作成功!',
|
||||
type:'success'
|
||||
});
|
||||
that.refresh();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 批量设置允许登录的客户端
|
||||
setAuthorizedAppLogin(){
|
||||
let user_ids = [];
|
||||
that.table1.multipleSelection.map((item,index)=>{
|
||||
user_ids.push(item._id);
|
||||
});
|
||||
that.formDatas.setAuthorizedAppLogin = {
|
||||
show:true,
|
||||
item:{
|
||||
user_ids,
|
||||
dcloudAppidData
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto']"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/system_uni/admin-log/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key: "user_id", title: "操作者用户ID", type: "text", width: 120 },
|
||||
{ key: "user_name", title: "操作者用户昵称", type: "text", width: 120 },
|
||||
{ key: "title", title: "标题", type: "text", width: 140 },
|
||||
{ key: "url", title: "url", type: "text", width: 280 },
|
||||
{ key: "_add_time", title: "添加时间", type: "time", width: 140 },
|
||||
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
|
||||
{ key: "request_param", title: "请求参数", type: "json", width: 300 },
|
||||
{ key: "response", title: "返回参数", type: "json", width: 300 },
|
||||
{ key: "ip", title: "ip地址", type: "text", width: 140 },
|
||||
{ key: "request_id", title: "请求id", type: "text", width: 280 }
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
{ key: "user_id", title: "用户ID", type: "text", mode: "=" },
|
||||
{ key: "title", title: "标题", type: "text", mode: "%%" },
|
||||
{ key: "ip", title: "ip地址", type: "text", mode: "%%" },
|
||||
{ key: "_add_time", title: "添加时间", type: "datetimerange", width: 400, mode: "[]" }
|
||||
]
|
||||
}
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
// 搜索
|
||||
search(obj) {
|
||||
that.$refs.table1.query(obj);
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "添加分组",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/categories/sys/add",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
// 常用字段类型
|
||||
{ key: "name", title: "名称", type: "text" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'change' },
|
||||
{ max: 16, message: '最多16字', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
name: item.name
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
:show-fullscreen="false"
|
||||
:show-header="false"
|
||||
:destroy-on-close="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<image v-if="value.item.type === 'image'" :src="value.item.url" mode="widthFix" style="width: 100%;display: block;"></image>
|
||||
<view v-else-if="value.item.type === 'video' && value.show" :style="styleCom" style="margin: auto;">
|
||||
<video :src="value.item.url" autoplay object-fit="cover" style="width: 100%;height: 100%;display: block;"></video>
|
||||
</view>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "预览",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "2vh",
|
||||
width: "600px"
|
||||
},
|
||||
styleCom:{}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
let { width, height=700, type } = item;
|
||||
//if(type === "video"){
|
||||
let showWidth = width;
|
||||
let showHeight = height;
|
||||
let maxHeight = 700;
|
||||
if(height > maxHeight){
|
||||
showHeight = maxHeight;
|
||||
showWidth = width / height * maxHeight;
|
||||
}
|
||||
that.styleCom = {
|
||||
width : `${showWidth}px`,
|
||||
height : `${showHeight}px`
|
||||
};
|
||||
that.page.width = that.styleCom.width;
|
||||
that.$set(that.value.item,"play",true);
|
||||
//}
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$set(that.value.item,"play",false);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "修改分组名称",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/categories/sys/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
// 常用字段类型
|
||||
{ key: "name", title: "名称", type: "text" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'change' },
|
||||
{ max: 16, message: '最多16字', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
name: item.name
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
// that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
// 此代码用处是直接将修改结果显示到页面上，而不需要进行数据库查询。
|
||||
that.value.item.name = that.form1.data.name;
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<template v-slot:category_id="{ form, keyName }">
|
||||
<vk-data-input-radio
|
||||
width="100%"
|
||||
v-model="form[keyName]"
|
||||
:localdata="value.list"
|
||||
:props="{ value:'_id', label:'name' }"
|
||||
placeholder="请选择分组"
|
||||
border
|
||||
:item-width="300"
|
||||
></vk-data-input-radio>
|
||||
</template>
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {},
|
||||
list:[]
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "修改分组",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/files/kh/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{
|
||||
key:"category_id", title:"分组", type:"select", placeholder:"请选择分组",
|
||||
}
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
category_id: item.category_id
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
// that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "修改文件名称",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/files/kh/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "display_name", title: "名称", type: "text" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
display_name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'change' },
|
||||
{ max: 32, message: '最多32字', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
display_name: item.display_name
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
// that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.item.display_name = that.form1.data.display_name;
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "编辑视频信息",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/files/kh/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "display_name", title: "名称", type: "text" },
|
||||
{ key: "cover_image", title: "封面图", type: "image", limit:1 },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
display_name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'change' },
|
||||
{ max: 32, message: '最多32字', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
display_name: item.display_name,
|
||||
cover_image: item.cover_image
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
// that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.$set(that.value.item,"display_name",that.form1.data.display_name);
|
||||
that.$set(that.value.item,"cover_image",that.form1.data.cover_image);
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="false"
|
||||
:show-fullscreen="false"
|
||||
:show-close="false"
|
||||
:destroy-on-close="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<view class="body" v-if="total>1">
|
||||
<view>
|
||||
<text>总进度：{{ currentIndex+1 }} / {{ total }}</text>
|
||||
<el-progress :percentage="totalPercentage"></el-progress>
|
||||
</view>
|
||||
<view style="margin-top: 10px;">
|
||||
<text>文件{{currentIndex+1}}进度：</text>
|
||||
<el-progress :percentage="currentPercentage"></el-progress>
|
||||
</view>
|
||||
<view style="margin-top: 10px;text-align: center;">正在上传第 {{currentIndex+1}} 个文件</view>
|
||||
</view>
|
||||
<view class="body" v-else>
|
||||
<view style="text-align: center;">
|
||||
<el-progress :percentage="currentPercentage" type="circle"></el-progress>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "上传进度",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "40vh",
|
||||
width: "500px"
|
||||
},
|
||||
total:0,
|
||||
totalPercentage: 0, // 总进度
|
||||
currentPercentage: 0, // 当前文件进度
|
||||
currentIndex: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item={} } = that.value;
|
||||
that.upload(item);
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
|
||||
},
|
||||
async upload(item){
|
||||
let that = this;
|
||||
let { vk } = that;
|
||||
let { tempFilePaths, tempFiles, categoryId, fileType } = item;
|
||||
that.total = tempFilePaths.length;
|
||||
that.totalPercentage = 0;
|
||||
for (let i = 0; i < tempFilePaths.length; i++) {
|
||||
that.currentPercentage = 0;
|
||||
that.currentIndex = i;
|
||||
let percentage = vk.pubfn.toDecimal((i+1) / tempFilePaths.length * 100, 0);
|
||||
try {
|
||||
await vk.uploadFile({
|
||||
filePath: tempFilePaths[i],
|
||||
file: tempFiles[i],
|
||||
needSave: true,
|
||||
fileType,
|
||||
category_id: categoryId,
|
||||
onUploadProgress:(progressRes) => {
|
||||
// 上传过程中
|
||||
that.currentPercentage = progressRes.progress;
|
||||
},
|
||||
});
|
||||
that.totalPercentage = percentage;
|
||||
} catch(err){
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
that.onSuccess();
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.body{
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,704 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<view class="header">
|
||||
<view class="header-item" style="margin-left:0;">
|
||||
<el-button type="primary" :round="false" size="small" icon="el-icon-plus upload-btn" @click="uploadFile" > 上传 </el-button>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<el-radio-group v-model="queryForm1.formData.type" size="small" @change="getList">
|
||||
<el-radio-button label="image">图片</el-radio-button>
|
||||
<el-radio-button label="video">视频</el-radio-button>
|
||||
<el-radio-button label="other">其他</el-radio-button>
|
||||
</el-radio-group>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<el-input class="search-input input-border-radius-4004" size="small" type="text" clearable placeholder="请输入名称搜索..." v-model="queryForm1.formData.display_name" @keyup.enter.native="getList" @clear="getList" />
|
||||
<el-button type="primary" :loading="loading.main" :round="false" size="small" icon="el-icon-search" @click.stop="getList" style="border-radius: 0 4px 4px 0;" ></el-button>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<el-input class="search-input input-border-radius-4004" size="small" type="text" clearable placeholder="请输入URL搜索..." v-model="queryForm1.formData.url" @keyup.enter.native="getList" @clear="getList" />
|
||||
<el-button type="primary" :loading="loading.main" :round="false" size="small" icon="el-icon-search" @click.stop="getList" style="border-radius: 0 4px 4px 0;" ></el-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav" v-loading="loading.nav">
|
||||
<view
|
||||
class="nav-list"
|
||||
v-for="(item, index) of data.navList" :key="index"
|
||||
:class="queryForm1.formData.category_id == item._id ? 'selected-nav' : ''"
|
||||
@click.stop="queryByCategory(item._id)"
|
||||
>
|
||||
<text class="nav-name text-one">{{ item.name }}</text>
|
||||
<view class="nav-btn">
|
||||
<view v-if="index > 1" class="btn el-icon-edit" @click.stop="vk.pubfn.openForm('updateCategory', { item })" ></view>
|
||||
<el-popconfirm v-if="index > 1" title="确定删除该分组吗？（组内图片不会删除）" @confirm="deleteCategory(item._id, index)" >
|
||||
<view slot="reference" class="btn el-icon-delete" @click.stop="stop"></view>
|
||||
</el-popconfirm>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="add-group" @click.stop="vk.pubfn.openForm('addCategory')">添加分组</view>
|
||||
</view>
|
||||
<view class="main" v-loading="loading.main">
|
||||
<!-- 内容详情 -->
|
||||
<view
|
||||
class="content-item"
|
||||
:class="[selectedIds.includes(item._id) ? 'choose-image' : '']"
|
||||
v-for="(item, index) in data.content.rows" :key="index"
|
||||
@click.stop="clickFile(item)"
|
||||
>
|
||||
<view class="item-file">
|
||||
<image :src="item.url" mode="aspectFit" v-if="item.type === 'image'"></image>
|
||||
<view class="vk-contents" v-else-if="item.type === 'video'">
|
||||
<image :src="item | coverImageFilter" mode="aspectFit"></image>
|
||||
<view class="duration">{{ item.duration | durationFilter }}</view>
|
||||
<view class="size">{{ item.size | sizeFilter(["B","KB","MB","GB"],1024,1,"MB") }}</view>
|
||||
<vk-data-icon :name="item.play ?'el-icon-video-pause':'el-icon-video-play'" size="40" color="#d9d9d9" class="video-play-btn" @click="preview(item)"></vk-data-icon>
|
||||
</view>
|
||||
|
||||
<view :src="item.url" class="other-icon" v-else>
|
||||
<vk-data-icon name="el-icon-document" size="80" color="#d5d5de"></vk-data-icon>
|
||||
<view class="size">{{ item.size | sizeFilter(["B","KB","MB","GB"],1024,1) }}</view>
|
||||
<view class="suffix">{{ item.original_name | suffixFilter }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text class="title">{{ item.display_name }}</text>
|
||||
<text class="operation" v-if="item.type === 'video'" @click="vk.pubfn.openForm('updateVideo', { item })">编辑</text>
|
||||
<text class="operation" v-else @click="vk.pubfn.openForm('updateFileName', { item })">改名</text>
|
||||
<el-tooltip class="operation" placement="bottom">
|
||||
<text>链接</text>
|
||||
<view slot="content">
|
||||
<view style="text-align: center;">
|
||||
<el-button type="text" @click="copyFileUrl(item.url)" style="margin-left: 0px;"> 复制 </el-button>
|
||||
<el-button type="text" @click="preview(item)" style="margin-left: 30px;"> 预览 </el-button>
|
||||
</view>
|
||||
<view>{{ item.url }}</view>
|
||||
</view>
|
||||
</el-tooltip>
|
||||
<text class="operation" @click="vk.pubfn.openForm('updateFileCategory', { item, list: data.navList })" > 分组 </text>
|
||||
<el-popconfirm class="operation" title="确定删除吗？" @confirm="deleteFile(item._id)">
|
||||
<text slot="reference" @click.stop="stop">删除</text>
|
||||
</el-popconfirm>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 上传的按钮 -->
|
||||
<view class="update-img" @click.stop="uploadFile"></view>
|
||||
</view>
|
||||
<view class="footer" :class="selectedIds.length ? '' : 'no-selected'">
|
||||
<label :style="data.content.rows.length ? '' : 'pointer-events: none;'" class="footer-label" @click.stop="selectAll" >
|
||||
<checkbox style="transform: scale(0.6);" class="checkbox" :checked="selectedIds.length ? true : false" />
|
||||
<text>已选</text>
|
||||
<text class="num">{{ selectedIds.length }} / {{ data.content.rows.length }}</text>
|
||||
<text>项</text>
|
||||
</label>
|
||||
<text class="footer-item" @click.stop=" vk.pubfn.openForm('updateFileCategory', { item: { _id: selectedIds }, list: data.navList }) " >
|
||||
保存到组
|
||||
</text>
|
||||
<el-popconfirm class="footer-item" title="确定删除吗？" @confirm="deleteFile(selectedIds)" >
|
||||
<text slot="reference">删除</text>
|
||||
</el-popconfirm>
|
||||
<!-- 底部分页内容 -->
|
||||
<el-pagination
|
||||
class="paging"
|
||||
background
|
||||
:total="data.content.total"
|
||||
:current-page="queryForm1.pageIndex"
|
||||
:page-size="queryForm1.pageSize"
|
||||
:page-sizes="[30, 50, 100]"
|
||||
:pager-count="5"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change=" val => { queryForm1.pageSize = val; getList(); } "
|
||||
@current-change=" val => { queryForm1.pageIndex = val; getList(); } "
|
||||
></el-pagination>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
|
||||
<!-- 弹窗列表 -->
|
||||
<addCategory v-model="formDatas.addCategory" @success="getNavList"></addCategory>
|
||||
<updateCategory v-model="formDatas.updateCategory"></updateCategory>
|
||||
<updateFileCategory v-model="formDatas.updateFileCategory" @success="getList();selectedIds = [];"></updateFileCategory>
|
||||
<updateFileName v-model="formDatas.updateFileName"></updateFileName>
|
||||
<updateVideo v-model="formDatas.updateVideo"></updateVideo>
|
||||
<preview v-model="formDatas.preview"></preview>
|
||||
<uploadProgress v-model="formDatas.uploadProgress" @success="getList();"></uploadProgress>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
import addCategory from "./form/addCategory";
|
||||
import updateCategory from "./form/updateCategory";
|
||||
import updateFileCategory from "./form/updateFileCategory";
|
||||
import updateFileName from "./form/updateFileName";
|
||||
import updateVideo from "./form/updateVideo";
|
||||
import preview from "./form/preview";
|
||||
import uploadProgress from "./form/uploadProgress";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addCategory,
|
||||
updateCategory,
|
||||
updateFileCategory,
|
||||
updateFileName,
|
||||
updateVideo,
|
||||
preview,
|
||||
uploadProgress
|
||||
},
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 选中的
|
||||
selectedIds: [],
|
||||
// 页面是否请求中或加载中
|
||||
loading: {
|
||||
nav: false,
|
||||
main: false
|
||||
},
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
// 分组列表
|
||||
navList: [],
|
||||
// 文件数据
|
||||
content: {
|
||||
rows: [],
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
// 查询表单
|
||||
queryForm1: {
|
||||
pageIndex: 1,
|
||||
pageSize: 30,
|
||||
formData: {
|
||||
display_name: "",
|
||||
category_id: "",
|
||||
type: "image"
|
||||
},
|
||||
columns: [
|
||||
{ key: "display_name", title: "名称", type: "text", mode: "%%" },
|
||||
{ key: "url", title: "URL", type: "text", mode: "=" },
|
||||
{ key: "category_id", title: "分类id", type: "text", mode: "=" },
|
||||
{ key: "type", title: "文件类型", type: "text", mode: "=" }
|
||||
]
|
||||
},
|
||||
formDatas: {}
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
that.getNavList();
|
||||
that.getList();
|
||||
},
|
||||
// 获取文件列表
|
||||
getList() {
|
||||
let { queryForm1, selectedIds } = that;
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/uni-id-files/files/kh/getList",
|
||||
loading: { that, name: "loading.main" },
|
||||
data: queryForm1,
|
||||
success: function(data) {
|
||||
that.data.content = data;
|
||||
selectedIds.length = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取分类列表
|
||||
getNavList() {
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/uni-id-files/categories/kh/getList",
|
||||
loading: { that, name: "loading.nav" },
|
||||
data: {
|
||||
pageIndex: 1,
|
||||
pageSize: 100
|
||||
},
|
||||
success: function(data) {
|
||||
that.data.navList = [
|
||||
{ _id: "", name: "全部" },
|
||||
{ _id: "null", name: "未分组" },
|
||||
...data.rows
|
||||
];
|
||||
}
|
||||
});
|
||||
},
|
||||
// 查询指定分类下的文件列表
|
||||
queryByCategory(category_id) {
|
||||
if (that.queryForm1.formData.category_id != category_id) {
|
||||
that.queryForm1.formData.category_id = category_id;
|
||||
that.getList();
|
||||
}
|
||||
},
|
||||
// 删除分组
|
||||
deleteCategory(_id, index) {
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/uni-id-files/categories/sys/delete",
|
||||
loading: { that, name: "loading.nav" },
|
||||
data: {
|
||||
_id
|
||||
},
|
||||
success: function(data) {
|
||||
that.data.navList.splice(index, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteFile(ids) {
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/uni-id-files/files/kh/delete",
|
||||
title:"请求中...",
|
||||
data: {
|
||||
_id: ids
|
||||
},
|
||||
success: function(data) {
|
||||
if(data.num>0){
|
||||
if (typeof ids !== "object") ids = [ids];
|
||||
ids.map(id => {
|
||||
let index = vk.pubfn.getListIndex(that.data.content.rows, "_id", id);
|
||||
if (index > -1) {
|
||||
that.data.content.rows.splice(index, 1);
|
||||
}
|
||||
});
|
||||
that.selectedIds = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadFile(){
|
||||
let type = that.queryForm1.formData.type;
|
||||
let fileType;
|
||||
let extension = [];
|
||||
if(type === "image"){
|
||||
extension = ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp", "jfif", "dpg"];
|
||||
fileType = "image";
|
||||
}else if(type === "video"){
|
||||
extension = ["avi", "mp3", "mp4", "3gp", "mov", "rmvb", "rm", "flv", "mkv", "wmv", "m3u8", "mpg", "mpeg", "dat", "asf"];
|
||||
fileType = "video";
|
||||
}else if(type === "other"){
|
||||
extension = ["txt","pdf","xls","xlsx","ppt","pptx","doc","docx","rar","zip"];
|
||||
}
|
||||
uni.chooseFile({
|
||||
extension,
|
||||
success: async res => {
|
||||
let item = {
|
||||
tempFilePaths: res.tempFilePaths,
|
||||
tempFiles: res.tempFiles,
|
||||
categoryId: that.queryForm1.formData.category_id,
|
||||
fileType,
|
||||
};
|
||||
vk.pubfn.openForm('uploadProgress', { item });
|
||||
// vk.showLoading("上传中...");
|
||||
// for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||
// let percentage = vk.pubfn.toDecimal((i+1) / res.tempFilePaths.length * 100, 0);
|
||||
// try {
|
||||
// await vk.uploadFile({
|
||||
// filePath: res.tempFilePaths[i],
|
||||
// file: res.tempFiles[i],
|
||||
// needSave: true,
|
||||
// fileType,
|
||||
// category_id: that.queryForm1.formData.category_id,
|
||||
// onUploadProgress:function(progressRes){
|
||||
// // 上传过程中
|
||||
// vk.showLoading(`文件${i+1}：${progressRes.progress}%\n`);
|
||||
// },
|
||||
// });
|
||||
// vk.showLoading(`总上传进度：${percentage}%`);
|
||||
// } catch(err){
|
||||
// console.error(err);
|
||||
// }
|
||||
// }
|
||||
// vk.hideLoading();
|
||||
// that.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 复制文件的URL
|
||||
copyFileUrl(data) {
|
||||
uni.setClipboardData({
|
||||
data,
|
||||
success: res => {
|
||||
that.$message({
|
||||
message: "URL已复制",
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 预览
|
||||
preview(item){
|
||||
let { type, url } = item;
|
||||
if(type === "image"){
|
||||
vk.pubfn.openForm('preview', { item })
|
||||
}else if(type === "video"){
|
||||
vk.pubfn.openForm('preview', { item })
|
||||
}else{
|
||||
vk.toast("暂不支持该类型文件的预览");
|
||||
}
|
||||
},
|
||||
// 点击了文件
|
||||
clickFile(item) {
|
||||
let index = that.selectedIds.indexOf(item._id);
|
||||
if (index > -1) {
|
||||
that.selectedIds.splice(index, 1);
|
||||
} else {
|
||||
that.selectedIds.push(item._id);
|
||||
}
|
||||
},
|
||||
// 全选
|
||||
selectAll() {
|
||||
if (that.selectedIds.length &&that.data.content.rows.length == that.selectedIds.length) {
|
||||
that.selectedIds = [];
|
||||
} else {
|
||||
that.data.content.rows.forEach((value, index, arr) => {
|
||||
if (!that.selectedIds.includes(value._id)) {
|
||||
that.selectedIds.push(value._id);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
stop() {}
|
||||
},
|
||||
watch: {},
|
||||
// 过滤器
|
||||
filters: {
|
||||
suffixFilter(name=""){
|
||||
let arr = name.split(".");
|
||||
return arr[arr.length-1];
|
||||
},
|
||||
coverImageFilter(item){
|
||||
let src = "";
|
||||
let { cover_image, url, width=600, height=600 } = item;
|
||||
if(cover_image){
|
||||
src = cover_image;
|
||||
}else{
|
||||
src = `${url}?x-oss-process=video/snapshot,t_1000,f_jpg,w_${width},h_${height},m_fast`;
|
||||
}
|
||||
console.log('src: ', src)
|
||||
return src;
|
||||
},
|
||||
durationFilter(value){
|
||||
let result = parseInt(value);
|
||||
let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
|
||||
let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
|
||||
let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
|
||||
return `${h}:${m}:${s}`;
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.page-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
// 页面主体内容区域
|
||||
.page-body {
|
||||
display: grid;
|
||||
grid-template-columns: 180px auto;
|
||||
grid-template-rows: 35px auto 40px;
|
||||
grid-gap: 8px 0px;
|
||||
position: relative;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
.el-button {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
// 搜索
|
||||
.header-item {
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
.search-input {
|
||||
width: 200px;
|
||||
|
||||
}
|
||||
.el-button {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
height: 100%;
|
||||
grid-row: 2 / -1;
|
||||
border: 1px solid #e4e2e2;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(auto-fill, 40px);
|
||||
color: #59607b;
|
||||
font-size: 12px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.nav-list {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #e4e2e2;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
background-color: #f6f4f4;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> i {
|
||||
font-size: 13px;
|
||||
place-self: center;
|
||||
}
|
||||
&:hover {
|
||||
color: #108ee9;
|
||||
}
|
||||
.nav-name {
|
||||
flex: 1;
|
||||
}
|
||||
.nav-btn {
|
||||
width: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btn {
|
||||
width: 22px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选中的分栏
|
||||
.selected-nav {
|
||||
background-color: #ecf6fd !important;
|
||||
color: #108ee9 !important;
|
||||
}
|
||||
// 添加分组的按钮
|
||||
.add-group {
|
||||
width: 60%;
|
||||
margin: 5px auto;
|
||||
padding: 5px 0px;
|
||||
text-align: center;
|
||||
border: 1px dashed #108ee9;
|
||||
color: #108ee9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-group:hover {
|
||||
background-color: #108ee9;
|
||||
color: #ffffff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.add-group:active {
|
||||
background-color: #108ee9;
|
||||
color: #ffffff;
|
||||
}
|
||||
// 内容详情
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 135px);
|
||||
grid-template-rows: repeat(auto-fill, 180px);
|
||||
grid-gap: 20px;
|
||||
place-content: start center;
|
||||
overflow-y: auto;
|
||||
min-width: 700px;
|
||||
}
|
||||
.update-img,
|
||||
.content-item {
|
||||
width: 135px;
|
||||
height: 180px;
|
||||
border: 1px solid #e4e2e2;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
transition: all 0.25s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
// 被选中的
|
||||
.choose-image {
|
||||
background-color: #ecf6fd !important;
|
||||
border: 1px solid #daedff;
|
||||
.tips{
|
||||
background-color: #ecf6fd;
|
||||
}
|
||||
}
|
||||
.content-item:hover {
|
||||
background-color: #ecf6fd;
|
||||
border: 1px solid #daedff;
|
||||
}
|
||||
.item-file {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.suffix{
|
||||
position: absolute;
|
||||
top:2px;
|
||||
right: 6px;
|
||||
font-size: 12px;
|
||||
color: #a7a7a7;
|
||||
}
|
||||
.duration{
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
left: 0px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
background-color: #b2b2b2;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
.size{
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
right: 0px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
background-color: #b2b2b2;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
.video-play-btn{
|
||||
position: absolute;
|
||||
top:54px;
|
||||
left:47px;
|
||||
background-color: rgba(66,66,66,0.6);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.other-icon{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.content-item:hover > .tips {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
// 上传按钮
|
||||
.update-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #d5d5de;
|
||||
&::before {
|
||||
line-height: 1;
|
||||
font-size: 45px;
|
||||
content: "+";
|
||||
}
|
||||
&::after {
|
||||
content: "上传";
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background-color: #fff;
|
||||
transition: all 0.4s;
|
||||
transform: translateY(50%);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 5px 0px;
|
||||
font-size: 13px;
|
||||
place-items: center;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.operation {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
color: #108ee9;
|
||||
}
|
||||
}
|
||||
// 保存到组、删除、下载链接
|
||||
.footer {
|
||||
background-color: #f4faff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #3091f2;
|
||||
}
|
||||
.paging {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.footer-item {
|
||||
padding: 2px 9px;
|
||||
border: 1px solid #3091f2;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.no-selected {
|
||||
.footer-item {
|
||||
pointer-events: none;
|
||||
color: #ced0d5;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
color: #59607b;
|
||||
.checkbox {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.num {
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
margin: 0 10px;
|
||||
color: #3091f2;
|
||||
}
|
||||
::v-deep .input-border-radius-4004 .el-input__inner{
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto']"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var dcloudAppidData = [];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/system_uni/uni-id-log/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key:"appList", title:"登录的应用", type:"html", width:220,
|
||||
formatter: function(val, row, column, index) {
|
||||
if(typeof row.dcloud_appid === "undefined") return "全部应用";
|
||||
if(row.dcloud_appid.length === 0) return "未绑定任何应用";
|
||||
if(val.length === 0 && row.dcloud_appid.length > 0) return row.dcloud_appid;
|
||||
let str = "";
|
||||
val.map((item, index) => {
|
||||
str += `、${item.name}`;
|
||||
});
|
||||
if(str) str = str.substring(1);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
{ key: "userInfo", title: "用户信息", type: "userInfo", width: 150 },
|
||||
{ key: "ip", title: "ip地址", type: "text", width: 150 },
|
||||
{ key: "type", title: "日志类型", type: "text", width: 120 },
|
||||
{ key: "login_type", title: "登录类型", type: "select", width: 120,
|
||||
data:[
|
||||
{ value: "phone", label:"手机短信" },
|
||||
{ value: "password", label:"账号密码" },
|
||||
{ value: "weixin", label:"微信登录" },
|
||||
{ value: "alipay", label:"支付宝登录" },
|
||||
{ value: "weixinPhoneNumber", label:"微信手机号" },
|
||||
{ value: "token", label:"token" }
|
||||
]
|
||||
},
|
||||
{ key: "os", title: "操作系统", type: "text", width: 120 },
|
||||
{ key: "platform", title: "平台信息", type: "text", width: 120 },
|
||||
{ key: "device_id", title: "设备唯一标识", type: "text", width: 120 },
|
||||
{ key: "_add_time", title: "添加时间", type: "time", width: 160 },
|
||||
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
|
||||
{ key: "ua", title: "userAgent", type: "text", width: 400 },
|
||||
{ key: "user_id", title: "用户ID", type: "text", width: 220 },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {
|
||||
dcloud_appid:""
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
{ key:"dcloud_appid", title:"所属应用", type:"select", width:160, mode:"custom",
|
||||
data:[],
|
||||
props:{ value:"appid", label:"name" }
|
||||
},
|
||||
{ key: "user_id", title: "用户ID", type: "text", width:140, mode: "=" },
|
||||
{ key: "ip", title: "ip地址", type: "text", width:140, mode: "%%" },
|
||||
{ key: "device_id", title: "设备唯一标识", type: "text", width:180, mode: "%%" },
|
||||
{ key: "_add_time", title: "添加时间", type: "datetimerange", width: 380, mode: "[]" }
|
||||
]
|
||||
},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
that.getAppList();
|
||||
},
|
||||
// 获取应用列表
|
||||
getAppList(obj){
|
||||
// 请在store/modules/$app.js文件里增加代码 appList: lifeData.$app.appList || []
|
||||
vk.callFunction({
|
||||
url: 'admin/system/app/sys/getList',
|
||||
data:{},
|
||||
success:function(data){
|
||||
dcloudAppidData = data.rows;
|
||||
let dcloudAppidData2 = vk.pubfn.copyObject(data.rows);
|
||||
dcloudAppidData2.unshift({
|
||||
appid:"___error___",
|
||||
name:"不存在的应用"
|
||||
});
|
||||
dcloudAppidData2.unshift({
|
||||
appid:"___empty-array___",
|
||||
name:"未绑定应用"
|
||||
});
|
||||
dcloudAppidData2.unshift({
|
||||
appid:"___non-existent___",
|
||||
name:"全部应用"
|
||||
});
|
||||
let index2 = vk.pubfn.getListIndex(that.queryForm1.columns, "key", "dcloud_appid");
|
||||
that.queryForm1.columns[index2].data = dcloudAppidData2;
|
||||
let appids = [];
|
||||
dcloudAppidData.map((item, index) => {
|
||||
appids.push(item.appid);
|
||||
});
|
||||
that.queryForm1.formData.appids = appids;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 搜索
|
||||
search(obj) {
|
||||
that.$refs.table1.query(obj);
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
>
|
||||
<template slot="right-btns">
|
||||
<el-button type="success" icon="el-icon-circle-plus-outline" @click="addBtn">
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
</vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto', 'update', 'delete']"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<!-- 排序值 -->
|
||||
<template v-slot:sort="{ row, column, index }">
|
||||
<el-input v-model="row.sort" size="mini" @change="sortChange($event, row)"/>
|
||||
</template>
|
||||
</vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="800px"
|
||||
mode="form"
|
||||
>
|
||||
<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'
|
||||
label-width="100px"
|
||||
@success="form1.props.show = false;refresh();"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
var typeData = [
|
||||
{ value: "image", label: "图片" },
|
||||
{ value: "swiper", label: "图片轮播" },
|
||||
{ value: "grid-btn", label: "宫格按钮" },
|
||||
{ value: "notice", label: "通知" },
|
||||
{ value: "text", label: "文本" },
|
||||
{ value: "rich-text", label: "富文本" },
|
||||
{ value: "button", label: "按钮" },
|
||||
{ value: "custom", label: "自定义" }
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/system_uni/components-dynamic/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key: "sort", title: "排序值", type: "number", width: 100, sortable: "custom" },
|
||||
{ key: "data_id", title: "组件数据id", type: "text", width: 200 },
|
||||
{ key: "title", title: "数据标题", type: "text", width: 200 },
|
||||
{ key: "description", title: "数据描述", type: "textarea" },
|
||||
{ key: "data", title: "组件数据", type: "json", width: 200 },
|
||||
{
|
||||
key: "show", title: "是否显示", type: "switch",
|
||||
activeValue: true,
|
||||
inactiveValue: false,
|
||||
width: 80,
|
||||
watch: (res) => {
|
||||
let { value, row, change } = res;
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/components-dynamic/sys/update",
|
||||
title: "请求中...",
|
||||
data: {
|
||||
_id: row._id,
|
||||
show: value
|
||||
},
|
||||
success: data => {
|
||||
change(value); // 这一步是让表格行内的开关改变显示状态
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "type", title: "type", type: "select", width: 120,
|
||||
data: typeData
|
||||
},
|
||||
{ key: "name", title: "name", type: "text", width: 120 },
|
||||
{ key: "_add_time", title: "添加时间", type: "time", width: 200 },
|
||||
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 }
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
{ key: "data_id", title: "组件数据ID", type: "text", width: 180, mode: "%%" },
|
||||
{ key: "title", title: "数据标题", type: "text", width: 180, mode: "%%" },
|
||||
{
|
||||
key: "type", title: "type", type: "select", width: 160, mode: "=",
|
||||
data: [
|
||||
{ value: "", label: "全部" },
|
||||
...typeData
|
||||
]
|
||||
},
|
||||
{ key: "name", title: "name", type: "text", width: 160, mode: "%%" },
|
||||
{ key: "_add_time", title: "添加时间", type: "datetimerange", width: 380, mode: "[]" }
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
sort: 0,
|
||||
show: true
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key:"", title:"基础", type:"bar-title" },
|
||||
{ key: "data_id", title: "组件数据id", type: "text", show: ["add"] },
|
||||
{ key: "title", title: "数据标题", type: "text" },
|
||||
{ key: "data", title: "组件数据", type: "json" },
|
||||
{ key: "description", title: "数据描述", type: "textarea" },
|
||||
{ key:"", title:"扩展", type:"bar-title" },
|
||||
{ key: "sort", title: "排序值", type: "number" },
|
||||
{ key: "show", title: "是否显示", type: "switch", activeValue: true, inactiveValue: false },
|
||||
{
|
||||
key: "type", title: "type", type: "select",
|
||||
data: typeData
|
||||
},
|
||||
{ key: "name", title: "name", type: "text", tips:"同一页面可以设置相同的name" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [{ required: true, message: "数据标题不能为空", trigger: "blur" }],
|
||||
data_id: [{ required: true, message: "组件数据id不能为空", trigger: "change" }]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 是否显示表单的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(obj) {
|
||||
that.$refs.table1.query(obj);
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow() {
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val) {
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn() {
|
||||
that.resetForm();
|
||||
that.form1.props.action = "admin/system_uni/components-dynamic/sys/add";
|
||||
that.form1.props.formType = "add";
|
||||
that.form1.props.title = "添加";
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }) {
|
||||
that.form1.props.action = "admin/system_uni/components-dynamic/sys/update";
|
||||
that.form1.props.formType = "update";
|
||||
that.form1.props.title = "编辑";
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }) {
|
||||
deleteFn({
|
||||
action: "admin/system_uni/components-dynamic/sys/delete",
|
||||
data: {
|
||||
_id: item._id
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改排序值
|
||||
sortChange(sort, item){
|
||||
vk.callFunction({
|
||||
url: 'admin/system_uni/components-dynamic/sys/update',
|
||||
data: {
|
||||
_id: item._id,
|
||||
sort: Number(sort)
|
||||
},
|
||||
success: (data) => {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
>
|
||||
<template slot="right-btns">
|
||||
<el-button type="success" icon="el-icon-circle-plus-outline" @click="addBtn">
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
</vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto', 'update', 'delete']"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="800px"
|
||||
mode="form"
|
||||
>
|
||||
<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'
|
||||
label-width="80px"
|
||||
@success="form1.props.show = false;refresh();"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/system_uni/global-data/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key: "key", title: "键名", type: "text", width: 200 },
|
||||
{ key: "value", title: "键值", type: "json", width: 200 },
|
||||
{ key: "_add_time", title: "添加时间", type: "time", width: 160 },
|
||||
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
|
||||
{ key: "expired_at", title: "过期时间", type: "time", width: 160, defaultValue: "无" },
|
||||
{ key: "comment", title: "备注", type: "text", width: 300 }
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
{ key: "key", type: "text", title: "键名搜索", mode: "%%" },
|
||||
{ key: "value", type: "text", title: "键值搜索", mode: "%%" },
|
||||
{ key: "_add_time", type: "datetimerange", title: "添加时间", width: 400, mode: "[]" }
|
||||
]
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "key", title: "键名", type: "text", placeholder: "请输入键名", disabled:["update"], tips: "键名唯一，且不能修改" },
|
||||
{ key: "value", title: "键值", type: "json", placeholder: "请输入键值" },
|
||||
{ key: "expired_at", title: "过期时间", type: "date", dateType: "datetime", placeholder: "请选择过期时间", tips: "若不设置过期时间则代表永不过期" },
|
||||
{ key: "comment", title: "备注", type: "textarea", placeholder: "请输入备注" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
key: [{ required: true, message: "键名不能为空", trigger: "blur" }],
|
||||
value: [{ required: true, message: "键值不能为空", trigger: "change" }]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 是否显示表单的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(obj) {
|
||||
that.$refs.table1.query(obj);
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow() {
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val) {
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn() {
|
||||
that.resetForm();
|
||||
that.form1.props.action = "admin/system_uni/global-data/sys/add";
|
||||
that.form1.props.formType = "add";
|
||||
that.form1.props.title = "添加";
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }) {
|
||||
that.form1.props.action = "admin/system_uni/global-data/sys/update";
|
||||
that.form1.props.formType = "update";
|
||||
that.form1.props.title = "编辑";
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }) {
|
||||
deleteFn({
|
||||
action: "admin/system_uni/global-data/sys/delete",
|
||||
data: {
|
||||
_id: item._id
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
:main-columns="['out_trade_no', 'transaction_id', 'type', 'status', '_add_time']"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto']"
|
||||
:row-no="false"
|
||||
:pagination="true"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<template v-slot:button1="{ row }">
|
||||
<view v-if="row.status <= 0">-</view>
|
||||
<el-tag type="success" effect="dark" v-else-if="row.user_order_success">成功</el-tag>
|
||||
<el-button type="danger" size="mini" v-else-if="row.status === 1" @click="afreshNotice(row)">重新推送</el-button>
|
||||
<view v-else-if="row.refund_fee>0">失败，但已退款</view>
|
||||
<view v-else>未知</view>
|
||||
</template>
|
||||
</vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
const payTypeData = [
|
||||
{ label: "官方渠道 - 微信 - 小程序", value: "wxpay_mp-weixin", tagType: "success" },
|
||||
{ label: "官方渠道 - 微信 - APP", value: "wxpay_app-plus", tagType: "success" },
|
||||
{ label: "官方渠道 - 微信 - H5", value: "wxpay_h5", tagType: "success" },
|
||||
{ label: "官方渠道 - 微信 - MWEB", value: "wxpay_mweb", tagType: "success" },
|
||||
{ label: "官方渠道 - 微信 - 公众号", value: "wxpay_h5-weixin", tagType: "success" },
|
||||
{ label: "官方渠道 - 支付宝 - 小程序", value: "alipay_mp-alipay", tagType: "primary" },
|
||||
{ label: "官方渠道 - 支付宝 - APP", value: "alipay_app-plus", tagType: "primary" },
|
||||
{ label: "官方渠道 - 支付宝 - H5", value: "alipay_h5", tagType: "primary" },
|
||||
|
||||
{ label: "VksPay - 微信 - 小程序", value: "vkspay_mp-weixin", tagType: "success" },
|
||||
{ label: "VksPay - 微信 - APP", value: "vkspay_app-plus", tagType: "success" },
|
||||
{ label: "VksPay - 微信 - H5", value: "vkspay_h5", tagType: "success" }, // 收银台接口 公众号、H5、MWEB、PC扫码均为H5
|
||||
{ label: "VksPay - 微信 - MWEB", value: "vkspay_mweb", tagType: "success" },
|
||||
{ label: "VksPay - 微信 - 公众号", value: "vkspay_h5-weixin", tagType: "success" },
|
||||
{ label: "VksPay - 支付宝 - 小程序", value: "vkspay_mp-alipay", tagType: "primary" },
|
||||
{ label: "VksPay - 支付宝 - APP", value: "vkspay_app-plus", tagType: "primary" },
|
||||
{ label: "VksPay - 支付宝 - H5", value: "vkspay_h5", tagType: "primary" },
|
||||
|
||||
];
|
||||
const orderTypeData = [
|
||||
{ label: "商品订单", value: "goods" },
|
||||
{ label: "充值订单", value: "recharge" },
|
||||
{ label: "VIP购买订单", value: "vip" },
|
||||
{ label: "其他订单", value: "other" }
|
||||
];
|
||||
|
||||
const statusData = [
|
||||
{ label: "已关闭", value: -1, tagType: "info" },
|
||||
{ label: "未支付", value: 0, tagType: "info" },
|
||||
{ label: "已支付", value: 1, tagType: "success" },
|
||||
{ label: "已部分退款", value: 2, tagType: "warning" },
|
||||
{ label: "已全额退款", value: 3, tagType: "danger" },
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading: false,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1: {
|
||||
// 表格数据请求地址
|
||||
action: "admin/system_uni/pay-orders/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key: "button1", title: "回调通知状态", type: "text", width: 120, fixed:"right" },
|
||||
{ key: "out_trade_no", title: "商户订单号", type: "text", width: 200 },
|
||||
{ key: "type", title: "订单类型", type: "select", width: 100,
|
||||
data: orderTypeData
|
||||
},
|
||||
{
|
||||
key: "pay_type", title: "支付类型", type: "tag", width: 180,
|
||||
data: payTypeData
|
||||
},
|
||||
{ key: "status", title: "订单状态", type: "tag", width: 110,
|
||||
data: statusData
|
||||
},
|
||||
{ key: "create_date", title: "创建时间", type: "time", width: 160 },
|
||||
{ key: "pay_date", title: "支付时间", type: "time", width: 160 },
|
||||
{ key: "total_fee", title: "总金额", type: "money", width: 110 },
|
||||
{ key: "refund_fee", title: "总退款金额", type: "money", width: 110, defaultValue:"-" },
|
||||
{ key: "refund_num", title: "退款次数", type: "number", width: 80, defaultValue:"-" },
|
||||
{ key: "transaction_id", title: "支付平台订单号", type: "text", width: 260, defaultValue:"-" },
|
||||
{ key: "openid", title: "用户openid", type: "text", width: 280, show: ["detail"] },
|
||||
{
|
||||
key: "refund_list", title: "退款详情", type: "table", width: 360, show: ["detail"],
|
||||
columns:[
|
||||
{ key: "out_refund_no", title: "退款单号", type: "text", minWidth: 200 },
|
||||
{ key: "refund_date", title: "退款时间", type: "time", width: 180 },
|
||||
{ key: "refund_fee", title: "退款金额", type: "money", width: 140 },
|
||||
{ key: "refund_desc", title: "退款备注", type: "text", minWidth: 180 },
|
||||
]
|
||||
},
|
||||
{ key: "original_data", title: "原始数据", type: "json", width: 300, show: ["detail"] },
|
||||
//{ key: "wxpay_info", title: "微信支付特有数据", type: "json", width: 360, show: ["detail"] },
|
||||
//{ key: "alipay_info", title: "支付宝支付特有数据", type: "json", width: 300, show: ["detail"] },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection: [],
|
||||
// 当前高亮的记录
|
||||
selectItem: ""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1: {
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData: {},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns: [
|
||||
{ key: "out_trade_no", title: "商户订单号", type: "text", width:150, mode: "%%", },
|
||||
{ key: "transaction_id", title: "支付平台订单号", type: "text", width:150, mode: "%%", },
|
||||
{
|
||||
key: "type", title: "订单类型", type: "select", width:150, mode: "=",
|
||||
data: orderTypeData
|
||||
},
|
||||
{ key: "status", title: "订单状态", type: "select", width: 150, mode: "=",
|
||||
data: statusData
|
||||
},
|
||||
{ key: "_add_time", title: "添加时间", type: "datetimerange", width:340, mode: "[]" },
|
||||
{
|
||||
key: "pay_type", title: "支付类型", type: "select", mode: "=",
|
||||
data: payTypeData
|
||||
},
|
||||
{ key: "total_fee_min", title: "金额范围", type: "money", mode: ">=", fieldName:"total_fee" },
|
||||
{ key: "total_fee_max", title: "-", type: "money", mode: "<=", fieldName:"total_fee" }
|
||||
]
|
||||
}
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(obj) {
|
||||
that.$refs.table1.query(obj);
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow() {
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val) {
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 重新推送
|
||||
afreshNotice(row){
|
||||
vk.callFunction({
|
||||
url: 'admin/system_uni/pay-orders/sys/afreshNotice',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
_id: row._id
|
||||
},
|
||||
success: (data) => {
|
||||
// 刷新数据
|
||||
that.refresh();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单详情"
|
||||
subTitle="展示表单详情"
|
||||
></vk-data-page-header>
|
||||
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<vk-data-detail
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
size="medium"
|
||||
label-width="150px"
|
||||
></vk-data-detail>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
data:{
|
||||
text:"这是文本",
|
||||
money:10000,
|
||||
number:10000,
|
||||
radio:1,
|
||||
checkbox:[1,2],
|
||||
select:1,
|
||||
image:[
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
],
|
||||
province: {
|
||||
code: "11",
|
||||
name: "北京市"
|
||||
},
|
||||
address: {
|
||||
codes: [
|
||||
"33",
|
||||
"3301",
|
||||
"330110"
|
||||
],
|
||||
names: [
|
||||
"浙江省",
|
||||
"杭州市",
|
||||
"余杭区"
|
||||
],
|
||||
text: "浙江省杭州市余杭区",
|
||||
showText: "浙江省 / 杭州市 / 余杭区",
|
||||
province: {
|
||||
code: "33",
|
||||
name: "浙江省"
|
||||
},
|
||||
city: {
|
||||
code: "3301",
|
||||
name: "杭州市"
|
||||
},
|
||||
area: {
|
||||
code: "330110",
|
||||
name: "余杭区"
|
||||
}
|
||||
},
|
||||
textarea:"啊啊啊啊是的111123",
|
||||
json:{
|
||||
a:1,
|
||||
b:"aaa"
|
||||
},
|
||||
switch:true,
|
||||
object:{
|
||||
a:1,
|
||||
b:"aaa"
|
||||
}
|
||||
|
||||
},
|
||||
columns:[
|
||||
{ key:"text", title:"text类型字段", type:"text" },
|
||||
{ key:"money", title:"money类型字段", type:"money" },
|
||||
{ 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:"select", title:"select类型字段", type:"select",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{ key:"image", title:"image类型字段", type:"image",
|
||||
limit:6
|
||||
},
|
||||
{ key:"province", title:"province类型字段", type:"province" },
|
||||
{ key:"address", title:"address类型字段", type:"address" },
|
||||
{ key:"textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows:6, maxRows:10 },
|
||||
},
|
||||
{ key:"json", title:"json类型字段", type:"json" },
|
||||
{ key:"switch", title:"switch类型字段", type:"switch" },
|
||||
{ key:"object", title:"object类型字段", type:"object",
|
||||
columns:[
|
||||
{ key:"text", title:"text类型字段", type:"text" },
|
||||
{ key:"switch", title:"switch类型字段", type:"switch" }
|
||||
]
|
||||
}
|
||||
]
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
formSuccess(){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单详情"
|
||||
subTitle="展示表单详情"
|
||||
></vk-data-page-header>
|
||||
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<vk-data-detail-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
size="medium"
|
||||
label-width="150px"
|
||||
></vk-data-detail-table>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
data:{
|
||||
text:"这是文本",
|
||||
money:10000,
|
||||
number:10000,
|
||||
radio:1,
|
||||
checkbox:[1,2],
|
||||
select:1,
|
||||
image:[
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
],
|
||||
province: {
|
||||
code: "11",
|
||||
name: "北京市"
|
||||
},
|
||||
address: {
|
||||
codes: [
|
||||
"33",
|
||||
"3301",
|
||||
"330110"
|
||||
],
|
||||
names: [
|
||||
"浙江省",
|
||||
"杭州市",
|
||||
"余杭区"
|
||||
],
|
||||
text: "浙江省杭州市余杭区",
|
||||
showText: "浙江省 / 杭州市 / 余杭区",
|
||||
province: {
|
||||
code: "33",
|
||||
name: "浙江省"
|
||||
},
|
||||
city: {
|
||||
code: "3301",
|
||||
name: "杭州市"
|
||||
},
|
||||
area: {
|
||||
code: "330110",
|
||||
name: "余杭区"
|
||||
}
|
||||
},
|
||||
textarea:"啊啊啊啊是的111123",
|
||||
json:{
|
||||
a:1,
|
||||
b:"aaa"
|
||||
},
|
||||
switch:true,
|
||||
object:{
|
||||
a:1,
|
||||
b:"aaa"
|
||||
}
|
||||
|
||||
},
|
||||
columns:[
|
||||
{ key:"text", title:"text类型字段", type:"text" },
|
||||
{ key:"money", title:"money类型字段", type:"money" },
|
||||
{ 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:"select", title:"select类型字段", type:"select",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{ key:"image", title:"image类型字段", type:"image",
|
||||
limit:6
|
||||
},
|
||||
{ key:"province", title:"province类型字段", type:"province" },
|
||||
{ key:"address", title:"address类型字段", type:"address" },
|
||||
{ key:"textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows:6, maxRows:10 },
|
||||
},
|
||||
{ key:"json", title:"json类型字段", type:"json" },
|
||||
{ key:"switch", title:"switch类型字段", type:"switch" },
|
||||
{ key:"object", title:"object类型字段", type:"object",
|
||||
columns:[
|
||||
{ key:"text", title:"text类型字段", type:"text" },
|
||||
{ key:"switch", title:"switch类型字段", type:"switch" }
|
||||
]
|
||||
}
|
||||
]
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
formSuccess(){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Dialog 弹窗"
|
||||
subTitle="基础用法"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<el-button @click="dialog.show1 = true">显示弹窗1</el-button>
|
||||
<el-button @click="dialog.show2 = true">显示弹窗2</el-button>
|
||||
</view>
|
||||
<view class="page-dialog">
|
||||
<!-- 页面弹窗内容开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="dialog.show1"
|
||||
title="标题1"
|
||||
width="500px"
|
||||
top="14vh"
|
||||
center
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
这里是自定义内容
|
||||
<template v-slot:footer>
|
||||
<el-button @click="dialog.show1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialog.show1 = false">确 定</el-button>
|
||||
</template>
|
||||
</vk-data-dialog>
|
||||
|
||||
<vk-data-dialog
|
||||
v-model="dialog.show2"
|
||||
title="标题2"
|
||||
width="500px"
|
||||
top="14vh"
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
这里是自定义内容
|
||||
<template v-slot:footer="{ close }">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="close">确 定</el-button>
|
||||
</template>
|
||||
</vk-data-dialog>
|
||||
|
||||
<!-- 页面弹窗内容开始 -->
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
dialog:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header title="Form 表单" subTitle="弹窗表单"></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<el-button @click="form1.props.show = true">弹出表单</el-button>
|
||||
<el-button @click="resetForm">重置表单</el-button>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 弹窗开始 -->
|
||||
<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>
|
||||
<!-- 弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
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: "textarea", title: "textarea类型字段", type: "textarea",
|
||||
autosize: { minRows: 4, maxRows: 10 },
|
||||
maxlength: 200,
|
||||
showWordLimit: true
|
||||
},
|
||||
{ key: "switch", title: "switch类型字段", type: "switch" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
text: [
|
||||
{ required: true, message: "text不能为空", trigger: "change" },
|
||||
]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 表单是否在请求中
|
||||
loading: false,
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
// 表单提交成功时的回调
|
||||
onFormSuccess() {
|
||||
// that.form1.props.show = false;
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
let that = this;
|
||||
if (that.$refs.form1) that.$refs.form1.resetForm();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Dialog 弹窗"
|
||||
subTitle="弹窗表格"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<el-button @click="show = true">显示弹窗</el-button>
|
||||
</view>
|
||||
<view class="page-dialog">
|
||||
<!-- 页面弹窗内容开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="show"
|
||||
title="标题"
|
||||
width="900px"
|
||||
top="14vh"
|
||||
center
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
:data="table1.data"
|
||||
:columns="table1.columns"
|
||||
:max-height="500"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
<template v-slot:footer>
|
||||
<el-button @click="show = false">取 消</el-button>
|
||||
<el-button type="primary" @click="show = false">确 定</el-button>
|
||||
</template>
|
||||
</vk-data-dialog>
|
||||
<!-- 页面弹窗内容开始 -->
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
show:false,
|
||||
table1:{
|
||||
// 字段显示规则
|
||||
columns: [
|
||||
{ key: "_id" , title: "用户ID" , type: "text" , width: 200 },
|
||||
{ key: "username" , title: "用户名" , type: "text" , minWidth: 200 },
|
||||
{ key: "nickname" , title: "用户昵称" , type: "text" , minWidth: 200 },
|
||||
{ key: "mobile" , title: "手机号" , type: "text" , width: 200 },
|
||||
],
|
||||
// 表格数据
|
||||
data:[
|
||||
{
|
||||
_id:"001",
|
||||
username:`用户名001`,
|
||||
nickname:`用户昵001`,
|
||||
mobile:`尾号001`,
|
||||
},
|
||||
{
|
||||
_id:"002",
|
||||
username:`用户名002`,
|
||||
nickname:`用户昵002`,
|
||||
mobile:`尾号002`,
|
||||
},
|
||||
{
|
||||
_id:"003",
|
||||
username:`用户名003`,
|
||||
nickname:`用户昵003`,
|
||||
mobile:`尾号003`,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面头部内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="富文本编辑器"
|
||||
subTitle="editor"
|
||||
@back="pageBack"
|
||||
></vk-data-page-header>
|
||||
<!-- 页面头部内容结束 -->
|
||||
<view class="page-body">
|
||||
<!-- 页面主体内容开始 -->
|
||||
<view style="display: flex;">
|
||||
<vk-data-input-editor
|
||||
v-model="content"
|
||||
placeholder="开始输入"
|
||||
width="50%"
|
||||
></vk-data-input-editor>
|
||||
<view style="width: 50%;">
|
||||
<view style="padding: 20px;font-size: 35px;font-family: kaiti;color: red;">
|
||||
HTML效果展示
|
||||
</view>
|
||||
<view v-html="content" class="vk-data-input-editor-view" style="padding: 15px;"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
<view class="json-view" v-if="content">
|
||||
<pre>
|
||||
{{ content }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面主体内容结束 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
content:""
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch:{
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="子表单"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 1600px;margin: 0 auto;">
|
||||
<vk-data-form
|
||||
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"
|
||||
@cancel="onCancel"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key:"", title:"数组对象", type:"bar-title" },
|
||||
{
|
||||
key:"array1", 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的值,注意,此处text1必须要有默认值,即使是空字符串也行.
|
||||
row.text1 = "昵称" + val;
|
||||
}
|
||||
},
|
||||
{ key:"switch", title:"switch类型", type:"switch", width:160 },
|
||||
]
|
||||
},
|
||||
{ key:"", title:"递增递减", type:"bar-title" },
|
||||
{
|
||||
key:"array2", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
switch:true,
|
||||
text1:""
|
||||
},
|
||||
rightBtns:['copy','delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"number1", title:"递增[>]", type:"number", placeholder:"输入数字",
|
||||
incMode: 1, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number2", title:"递增[>=]", type:"number", placeholder:"输入数字",
|
||||
incMode: 2, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number3", title:"递减[<]", type:"number", placeholder:"输入数字",
|
||||
incMode: -1, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number4", title:"递减[<=]", type:"number", placeholder:"输入数字",
|
||||
incMode: -2, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"", title:"数组嵌套数组", type:"bar-title" },
|
||||
{
|
||||
key:"array3", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
switch:true,
|
||||
array:[]
|
||||
},
|
||||
rightBtns:['copy','delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"text1", title:"昵称", type:"text",
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number1", title:"数字", type:"number",
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{ key:"switch", title:"switch类型", type:"switch", width:160 },
|
||||
{
|
||||
key:"array", title:"数组<对象>类型", type:"array<object>", buttonText: "设置", dialog:true, width:140, dialogWidth:1000,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
|
||||
},
|
||||
rightBtns:['delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"text1", title:"昵称", type:"text", minWidth:160,
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number1", title:"数字", type:"number", minWidth:160,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{ key:"", title:"下方为纯字符串或纯数字类型数组", type:"bar-title" },
|
||||
{ key:"stringArray", title:"数组<字符串>类型", type:"array<string>", placeholder:"请输入字符串", width:400,
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"numberArray", title:"数组<数字>类型", type:"array<number>", placeholder:"请输入数字", width:400,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
onCancel(){
|
||||
console.log("关闭");
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
onFormSuccess(){
|
||||
console.log("表单提交成功");
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="基础表单"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<vk-data-form
|
||||
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"
|
||||
@cancel="onCancel"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
radio: 1,
|
||||
checkbox : [1,2]
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{
|
||||
key: "role", title: "通过表格选择(单选)", type: "table-select", placeholder:"请选择",
|
||||
action:"template/db_api/sys/getList",
|
||||
multiple:true,
|
||||
columns:[
|
||||
{ key:"_id", title:"id", type:"text", width:260, idKey:true },
|
||||
{ key:"name", title:"昵称", type:"text", width:260, nameKey:true },
|
||||
{ key:"money", title:"金额", type:"money", width:100, sortable:"custom", summaryKey:true, summaryUnit:"元" }, // summaryKey开启该字段为统计字段， summaryUnit：单位
|
||||
],
|
||||
queryColumns:[
|
||||
{ key: "name", title: "昵称", type: "text", width: 150, mode: "%%" },
|
||||
{ key: "_id", title: "标识", type: "text", width: 150, mode: "%%" }
|
||||
]
|
||||
},
|
||||
{ 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: "select", title:"select类型字段", type:"select",
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows: 4, maxRows: 10 }, showWordLimit:true,
|
||||
},
|
||||
{ key: "switch", title:"switch类型字段", type:"switch" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
onCancel(){
|
||||
console.log("关闭");
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
onFormSuccess(){
|
||||
console.log("表单提交成功");
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="证书转换"
|
||||
subTitle="快速将证书内容变成1行字符串"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<el-input v-model="form1.content" type="textarea" :rows="20" placeholder="请将证书内容粘贴到此处"></el-input>
|
||||
<view style="margin-top: 20px;">
|
||||
<el-button type="primary" @click="copy">复制证书内容（一行字符串形式）</el-button>
|
||||
</view>
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<view style="font-size: 14px;">证书内容</view>
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
content: "",
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
copy(){
|
||||
let str = JSON.stringify(this.form1);
|
||||
let content = str.substring(12,str.length-2);
|
||||
uni.setClipboardData({
|
||||
data: content,
|
||||
success: function () {
|
||||
vk.toast("复制成功");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="复用同一个表单实现添加和修改"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
|
||||
<view style="padding: 15px;color:#303133;">
|
||||
当两个表单内的字段有大部分相似时，同一个表单组件可以复用。<br/>
|
||||
通过控制 formType 可以切换表单的类型<br/>
|
||||
同时在 columns 中添加属性 show:["add"] 代表该字段只有 formType 为 "add" 时才显示
|
||||
</view>
|
||||
<el-button @click="showForm('add')">弹出添加表单</el-button>
|
||||
<el-button @click="showForm('update')">弹出修改表单</el-button>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.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"
|
||||
:submit-text='form1.props.submitText'
|
||||
label-width="140px"
|
||||
@success="form1.props.show = false;"
|
||||
@cancel="form1.props.show = false"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key: "text", title:"text类型字段", type:"text", show:["add"] },
|
||||
{ key: "number", title:"number类型字段", type:"number", show:["add"]},
|
||||
{ key: "radio", title:"radio类型字段", type:"radio" , show:["add"],
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "checkbox", title:"checkbox类型字段", type:"checkbox", show:["update"],
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows: 4, maxRows: 10 }, maxlength:200, showWordLimit:true,
|
||||
},
|
||||
{ key: "switch", title:"switch类型字段", type:"switch" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false,
|
||||
// 表单标题
|
||||
title: '',
|
||||
submitText:''
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
if (that.$refs.form1) that.$refs.form1.resetForm();
|
||||
},
|
||||
// 显示表单
|
||||
showForm(type){
|
||||
let { form1 } = that;
|
||||
// 先重置下表单
|
||||
that.resetForm();
|
||||
if(type === 'add'){
|
||||
form1.props.title = '添加表单';
|
||||
form1.props.submitText = '添加';
|
||||
// 此处添加的action和修改的action可以不一致
|
||||
form1.props.action = "template/test/sys/test";
|
||||
}else{
|
||||
form1.props.title = '修改表单';
|
||||
form1.props.submitText = '修改';
|
||||
// 此处添加的action和修改的action可以不一致
|
||||
form1.props.action = "template/test/sys/test";
|
||||
// 如果是修改 可以在此赋值
|
||||
form1.data = {
|
||||
checkbox: [1],
|
||||
textarea: '1111',
|
||||
switch: true
|
||||
};
|
||||
}
|
||||
form1.props.formType = type;
|
||||
form1.props.show = true;
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header title="Form 表单" subTitle="弹窗表单"></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<el-button @click="form1.props.show = true">弹出表单</el-button>
|
||||
<el-button @click="resetForm">重置表单</el-button>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
title="表单标题"
|
||||
width="950px"
|
||||
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>
|
||||
<!-- 弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
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: "textarea", title: "textarea类型字段", type: "textarea",
|
||||
autosize: { minRows: 4, maxRows: 10 },
|
||||
maxlength: 200,
|
||||
showWordLimit: true
|
||||
},
|
||||
{ key: "switch", title: "switch类型字段", type: "switch" },
|
||||
{ key:"editor", title:"富文本类型", type:"editor", width:"750px" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
text: [
|
||||
{ required: true, message: "text不能为空", trigger: "change" },
|
||||
]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 表单是否在请求中
|
||||
loading: false,
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
// 表单提交成功时的回调
|
||||
onFormSuccess() {
|
||||
// that.form1.props.show = false;
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
let that = this;
|
||||
if (that.$refs.form1) that.$refs.form1.resetForm();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="行内表单"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 1200px;margin: 0 auto;">
|
||||
<vk-data-form
|
||||
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"
|
||||
:inline="true"
|
||||
:columnsNumber="2"
|
||||
@cancel="onCancel"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
</view>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
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: "user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号",
|
||||
action:"admin/select/kh/user"
|
||||
},
|
||||
|
||||
{ key: "money", title:"money类型字段", type:"money" },
|
||||
{ key: "select", title:"select类型字段", type:"select",
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "number", title:"number类型字段", type:"number" },
|
||||
{ key: "switch", title:"switch类型字段", type:"switch" },
|
||||
{ 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: "textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows: 6, maxRows: 10 }, maxlength:200, showWordLimit:true,
|
||||
width:820
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
onCancel(){
|
||||
console.log("关闭");
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
onFormSuccess(){
|
||||
console.log("表单提交成功");
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="证书转换"
|
||||
subTitle="快速将证书内容变成1行字符串"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="width: 100%">
|
||||
<view style="color: red;font-size: 12px;">全程无网络请求（打开此页面后无网状态也能执行），直接在前端解析证书，没有证书泄露风险</view>
|
||||
<el-table :data="certList" style="width: 100%">
|
||||
<el-table-column prop="tips" label="说明" minWidth="300"> </el-table-column>
|
||||
<el-table-column prop="name" label="选择证书" minWidth="300">
|
||||
<template slot-scope="scope">
|
||||
<text style="margin-right: 20px;">{{ scope.row.name }}</text>
|
||||
<el-button type="success" @click="upload(scope.row)" size="mini" plain> {{ scope.row.content ? '已' : ''}}选择 {{ scope.row.file }} </el-button>
|
||||
<text style="margin-left: 20px;color: #c2e7b0;" v-if="scope.row.content && scope.row.file === scope.row.name"> √ </text>
|
||||
<text style="margin-left: 20px;color: red;" v-if="scope.row.content && scope.row.file !== scope.row.name"> × </text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="key4" label="选择后可复制" minWidth="200" >
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button type="success" @click="copy(scope.row.name)" size="mini" plain v-if="scope.row.content && scope.row.file === scope.row.name"> 复制 </el-button> -->
|
||||
<el-button type="success" size="mini" plain v-if="scope.row.content && scope.row.file === scope.row.name"> 请复制下方证书内容 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<view style="font-size: 14px;">证书内容</view>
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
certList: [
|
||||
{
|
||||
name: 'apiclient_cert.p12',
|
||||
tips: '微信支付v2需要用到的证书（wxpay.pfx）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'wxpay.pfx'
|
||||
},
|
||||
{
|
||||
name: 'apiclient_cert.pem',
|
||||
tips: '微信支付v3需要用到的证书（wxpay.appCertContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'wxpay.appCertContent'
|
||||
},
|
||||
{
|
||||
name: 'apiclient_key.pem',
|
||||
tips: '微信支付v3需要用到的证书（wxpay.appPrivateKeyContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'wxpay.appPrivateKeyContent'
|
||||
},
|
||||
{
|
||||
name: 'alipayCertPublicKey_RSA2.crt',
|
||||
tips: '支付宝支付 - 支付宝公钥证书（alipay.alipayPublicCertContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'alipay.alipayPublicCertContent'
|
||||
},
|
||||
{
|
||||
name: 'alipayRootCert.crt',
|
||||
tips: '支付宝支付 - 支付宝根证书（alipay.alipayRootCertContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'alipay.alipayRootCertContent'
|
||||
},
|
||||
{
|
||||
name: 'appCertPublicKey.crt',
|
||||
tips: '支付宝支付 - 应用公钥证书（alipay.appCertContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'alipay.appCertContent'
|
||||
}
|
||||
],
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
wxpay: {
|
||||
pfx: "",
|
||||
appCertContent: "",
|
||||
appPrivateKeyContent: "",
|
||||
},
|
||||
alipay: {
|
||||
alipayPublicCertContent: "",
|
||||
alipayRootCertContent: "",
|
||||
appCertContent: ""
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
upload(item={}){
|
||||
let { name, key } = item;
|
||||
let index = this.certList.findIndex((certItem) => {
|
||||
return name === certItem.name;
|
||||
});
|
||||
let suffix = name.substring(name.lastIndexOf(".") + 1);
|
||||
uni.chooseFile({
|
||||
count: 1, //默认100
|
||||
extension: [suffix],
|
||||
success: (res) => {
|
||||
let tempFile = res.tempFiles[0];
|
||||
if (name === "apiclient_cert.p12") {
|
||||
vk.pubfn.fileToBase64({
|
||||
file: tempFile,
|
||||
success: (base64) => {
|
||||
let base64Index = base64.indexOf("base64,");
|
||||
base64 = base64.substring(base64Index+"base64,".length);
|
||||
this.form1.wxpay.pfx = base64;
|
||||
this.certList[index].content = base64;
|
||||
this.certList[index].file = tempFile.name;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
let result = reader.result;
|
||||
result = result.replace(/\r\n/g, "\n");
|
||||
vk.pubfn.setData(this.form1, key, result);
|
||||
this.certList[index].content = result;
|
||||
};
|
||||
reader.readAsText(res.tempFiles[0]);
|
||||
if (tempFile.name.indexOf("appCertPublicKey_") == 0) {
|
||||
tempFile.name = "appCertPublicKey.crt";
|
||||
}
|
||||
this.certList[index].file = tempFile.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
copy(name){
|
||||
let contentItem = this.certList.find((item) => {
|
||||
return name === item.name;
|
||||
});
|
||||
let content = contentItem.content;
|
||||
uni.setClipboardData({
|
||||
data: content,
|
||||
success: () => {
|
||||
vk.toast("复制成功");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,543 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="高级表单"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<!-- 页面主体内容开始 -->
|
||||
<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"
|
||||
input-width="400px"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<!-- v-slot:editor 中的 editor 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
|
||||
<!-- <template v-slot:editor="{ form, keyName }">
|
||||
<vk-data-input-editor v-model="form[keyName]" placeholder="开始输入" width="750px"></vk-data-input-editor>
|
||||
</template> -->
|
||||
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</view>
|
||||
|
||||
<view class="page-footer">
|
||||
<!-- 页面底部内容开始 -->
|
||||
<el-button :loading="form1.props.loading" type="primary" class="footer-update-btn" @click="submitForm">确定</el-button>
|
||||
<el-button plain class="footer-back-btn" @click="onCancel" style="margin-left: 30px;">返回</el-button>
|
||||
<!-- 页面底部内容开始 -->
|
||||
</view>
|
||||
|
||||
<view class="tips" style="position: fixed;right: 0px;top:100px;bottom:15px; overflow: auto;max-width: 400px;">
|
||||
<view class="json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
radio:1,
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
// 基础字段类型
|
||||
{ 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",
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"checkbox1", title:"checkbox类型1", type:"checkbox",
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"radio2", title:"radio类型2", type:"radio",
|
||||
border:true,
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"checkbox2", title:"checkbox类型2", type:"checkbox",
|
||||
border:true,
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"radio3", title:"radio类型3", type:"radio" ,
|
||||
optionType:'button',
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"checkbox3", title:"checkbox类型3", type:"checkbox" ,
|
||||
optionType:'button',
|
||||
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:"select2", title:"select类型2", type:"select",
|
||||
multiple:true,
|
||||
multipleLimit:2,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" },
|
||||
{ value:3, label:"选项3" },
|
||||
{ value:4, label:"选项4" }
|
||||
]
|
||||
},
|
||||
{
|
||||
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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ key:"province", title:"province类型", type:"province" },
|
||||
{ key:"address", title:"address类型", type:"address" },
|
||||
{ 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:"古诗",
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"cascader2", title:"云端数据级联", type:"cascader",
|
||||
action:"admin/system/permission/sys/getAll",
|
||||
props:{
|
||||
list:"rows",
|
||||
value:"permission_id",
|
||||
label:"label",
|
||||
children:"children",
|
||||
multiple:true
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"cascader3", title:"云端数据级联懒加载", type:"cascader",
|
||||
action:"admin/system/menu/sys/getCascader",
|
||||
props:{
|
||||
list:"rows",
|
||||
value:"menu_id",
|
||||
label:"label",
|
||||
children:"children",
|
||||
lazy:true,
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"tree1", title:"树形选择(单选)", type:"tree-select", placeholder:"请选择学科",
|
||||
data:[
|
||||
{
|
||||
value:1,
|
||||
label:"数学",
|
||||
children:[
|
||||
{ value:11,label:"奥数" },
|
||||
{ value:12,label:"微积分" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
label:"语文",
|
||||
children:[
|
||||
{ value:21, label:"文言文" },
|
||||
{ value:22, label:"古诗" }
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"tree2", title:"树形选择(多选)", type:"tree-select", placeholder:"请选择学科",
|
||||
multiple:true,
|
||||
data:[
|
||||
{
|
||||
value:1,
|
||||
label:"数学",
|
||||
children:[
|
||||
{ value:11,label:"奥数" },
|
||||
{ value:12,label:"微积分" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
label:"语文",
|
||||
children:[
|
||||
{ value:21, label:"文言文" },
|
||||
{ value:22, label:"古诗" }
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{ 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:"icon1", title:"图标1", type:"icon" },
|
||||
{ key:"icon2", title:"图标2", type:"icon", filter:"vk-" },
|
||||
{ key:"icon3", title:"图标3", type:"icon",
|
||||
filter:(name)=>{
|
||||
// 不显示vk图标
|
||||
return name.indexOf("vk-icon") === 0 ? false : true;
|
||||
},
|
||||
},
|
||||
// 文件上传
|
||||
{ key:"", title:"文件上传", type:"bar-title" },
|
||||
{
|
||||
key:"image1", title:"image类型", type:"image",
|
||||
limit:6
|
||||
},
|
||||
{
|
||||
key:"image2", title:"拖拽上传", type:"image",
|
||||
limit:6, drag:true,
|
||||
fileSize:2,
|
||||
sizeUnit:"mb",
|
||||
tips:"图片大小限制：小于2M"
|
||||
},
|
||||
{
|
||||
key:"file", title:"文件类型", type:"file",
|
||||
limit:6,
|
||||
accept:".txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx,.pdf"
|
||||
},
|
||||
{ key:"image3", title:"从素材库多选图片", type:"file-select", placeholder:"请选择图片", fileType:"image", multiple:true, multipleLimit:5 },
|
||||
{ key:"image4", title:"从素材库单选图片", type:"file-select", placeholder:"请选择图片", fileType:"image" },
|
||||
{ key:"video1", title:"从素材库单选视频", type:"file-select", placeholder:"请选择视频", fileType:"video" },
|
||||
// 日期型字段
|
||||
{ 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:"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"
|
||||
}
|
||||
},
|
||||
// 数据库联动字段
|
||||
{ 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:"object1", title:"对象类型1", type:"object",
|
||||
columns:[
|
||||
{ key:"a", title:"对象内属性a", type:"text" },
|
||||
{ key:"b", title:"对象内属性b", type:"text" },
|
||||
]
|
||||
},
|
||||
// 可以通过设置showLabel:false, 隐藏左侧的label
|
||||
{ key:"object2", title:"对象类型2", type:"object", showLabel:false,
|
||||
columns:[
|
||||
{ key:"a", title:"对象内属性a", type:"text" },
|
||||
{ key:"b", title:"对象内属性b", type:"text" },
|
||||
]
|
||||
},
|
||||
// 多层嵌套object
|
||||
{ key:"object3", title:"对象类型3", type:"object", showLabel:true,
|
||||
columns:[
|
||||
{ key:"a", title:"对象内属性a", type:"text" },
|
||||
{ key:"b", title:"嵌套对象b", type:"object", showLabel:true,
|
||||
columns:[
|
||||
{ key:"b1", title:"嵌套对象b内属性b1", type:"text" },
|
||||
{ key:"b2", title:"嵌套对象b内属性b2", type:"text" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
// 特殊类型
|
||||
{ key:"", title:"特殊类型", type:"bar-title" },
|
||||
{ key:"editor", title:"富文本类型", type:"editor", width:"1000px" },
|
||||
{ key:"json", title:"json类型", type:"json" },
|
||||
{ key:"position", title:"地图位置", type:"map", width:600, height:300, defaultLocation:{ latitude: 30.224781, longitude: 120.12438 } },
|
||||
{ key:"array1", title:"数组字符串类型", type:"array<string>" },
|
||||
{ key:"array2", title:"数组数字类型", type:"array<number>" },
|
||||
{
|
||||
key:"array", title:"数组对象类型", type:"array<object>", itemWidth:260,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
select1:1
|
||||
},
|
||||
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"] },
|
||||
]
|
||||
},
|
||||
{ key:"switch", title:"switch类型", type:"switch", width:160 },
|
||||
]
|
||||
},
|
||||
{ key:"goods_tags", title:"商品标签", type:"tag" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules:{
|
||||
text:[
|
||||
{ required:true, message:'text不能为空', trigger:'change' }
|
||||
],
|
||||
money:[
|
||||
{ required:true, message:'金额不能为空', trigger:'change' },
|
||||
{ type:"number", message:'金额必须是数字', trigger:'change' },
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show:false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods:{
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
// 关闭按钮
|
||||
onCancel(){
|
||||
console.log("关闭");
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
// 表单提交
|
||||
submitForm(){
|
||||
that.$refs.form1.submitForm();
|
||||
},
|
||||
// 表单提交成功
|
||||
onFormSuccess(){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="使用插糟自定义表单"
|
||||
></vk-data-page-header>
|
||||
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<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>
|
||||
|
||||
<template v-slot:footer="{ loading }">
|
||||
<el-button plain style="margin-right: 20px;width: 80px;" @click="onCancel">返回</el-button>
|
||||
<el-button :loading="loading" type="primary" style="width: 80px;" @click="submitForm">添加</el-button>
|
||||
</template>
|
||||
|
||||
</vk-data-form>
|
||||
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key: "text", title:"text类型字段", type:"text" },
|
||||
{ key: "rate", title:"插糟用法", type:"text" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
// 页面返回
|
||||
onCancel(){
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
// 表单提交
|
||||
submitForm(){
|
||||
that.$refs.form1.submitForm();
|
||||
},
|
||||
// 表单提交成功后
|
||||
onFormSuccess(){
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!-- 与element-icons区别是没有left和top窗口 -->
|
||||
<template>
|
||||
<!-- 页面内容开始 -->
|
||||
<view class="page">
|
||||
<vk-data-page-header
|
||||
title="Element 图标"
|
||||
subTitle="点击图标即可复制图标代码"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body icons">
|
||||
<view v-for="(icon,index) in icons" :key="icon" class="icon-item pointer">
|
||||
<vk-data-icon :name="icon" size="30" @click="setClipboardData('tag',icon)"></vk-data-icon>
|
||||
<text @click="setClipboardData('class',icon)" class="icon-text">{{icon}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './js/element-icons.js'
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
icons,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {}
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
setClipboardData(type, icon) {
|
||||
let data = icon;
|
||||
if (type === 'tag') {
|
||||
data = `<vk-data-icon name="${icon}" size="30"></vk-data-icon>`;
|
||||
}
|
||||
vk.pubfn.setClipboardData({
|
||||
data,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制 ' + data + ' 成功！'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showModal({
|
||||
content: '复制 ' + data + ' 失败！',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
width: 16.6%;
|
||||
height: 120px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.icon-item:hover,
|
||||
.icon-item:hover .icon-text {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #99a9bf;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.icon-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<!-- 页面内容开始 -->
|
||||
<view class="page">
|
||||
<vk-data-page-header
|
||||
title="Element 图标"
|
||||
subTitle="点击图标即可复制图标代码"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body icons">
|
||||
<view v-for="(icon,index) in icons" :key="icon" class="icon-item pointer">
|
||||
<vk-data-icon :name="icon" size="30" @click="setClipboardData('tag',icon)"></vk-data-icon>
|
||||
<text @click="setClipboardData('class',icon)" class="icon-text">{{icon}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './js/element-icons.js'
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
icons,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {}
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
setClipboardData(type, icon) {
|
||||
let data = icon;
|
||||
if (type === 'tag') {
|
||||
data = `<vk-data-icon name="${icon}" size="30"></vk-data-icon>`;
|
||||
}
|
||||
vk.pubfn.setClipboardData({
|
||||
data,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制 ' + data + ' 成功！'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showModal({
|
||||
content: '复制 ' + data + ' 失败！',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
width: 16.6%;
|
||||
height: 120px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.icon-item:hover,
|
||||
.icon-item:hover .icon-text {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #99a9bf;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.icon-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
export default [
|
||||
"el-icon-platform-eleme",
|
||||
"el-icon-eleme",
|
||||
"el-icon-delete-solid",
|
||||
"el-icon-delete",
|
||||
"el-icon-s-tools",
|
||||
"el-icon-setting",
|
||||
"el-icon-user-solid",
|
||||
"el-icon-user",
|
||||
"el-icon-phone",
|
||||
"el-icon-phone-outline",
|
||||
"el-icon-more",
|
||||
"el-icon-more-outline",
|
||||
"el-icon-star-on",
|
||||
"el-icon-star-off",
|
||||
"el-icon-s-goods",
|
||||
"el-icon-goods",
|
||||
"el-icon-warning",
|
||||
"el-icon-warning-outline",
|
||||
"el-icon-question",
|
||||
"el-icon-info",
|
||||
"el-icon-remove",
|
||||
"el-icon-circle-plus",
|
||||
"el-icon-success",
|
||||
"el-icon-error",
|
||||
"el-icon-zoom-in",
|
||||
"el-icon-zoom-out",
|
||||
"el-icon-remove-outline",
|
||||
"el-icon-circle-plus-outline",
|
||||
"el-icon-circle-check",
|
||||
"el-icon-circle-close",
|
||||
"el-icon-s-help",
|
||||
"el-icon-help",
|
||||
"el-icon-minus",
|
||||
"el-icon-plus",
|
||||
"el-icon-check",
|
||||
"el-icon-close",
|
||||
"el-icon-picture",
|
||||
"el-icon-picture-outline",
|
||||
"el-icon-picture-outline-round",
|
||||
"el-icon-upload",
|
||||
"el-icon-upload2",
|
||||
"el-icon-download",
|
||||
"el-icon-camera-solid",
|
||||
"el-icon-camera",
|
||||
"el-icon-video-camera-solid",
|
||||
"el-icon-video-camera",
|
||||
"el-icon-message-solid",
|
||||
"el-icon-bell",
|
||||
"el-icon-s-cooperation",
|
||||
"el-icon-s-order",
|
||||
"el-icon-s-platform",
|
||||
"el-icon-s-fold",
|
||||
"el-icon-s-unfold",
|
||||
"el-icon-s-operation",
|
||||
"el-icon-s-promotion",
|
||||
"el-icon-s-home",
|
||||
"el-icon-s-release",
|
||||
"el-icon-s-ticket",
|
||||
"el-icon-s-management",
|
||||
"el-icon-s-open",
|
||||
"el-icon-s-shop",
|
||||
"el-icon-s-marketing",
|
||||
"el-icon-s-flag",
|
||||
"el-icon-s-comment",
|
||||
"el-icon-s-finance",
|
||||
"el-icon-s-claim",
|
||||
"el-icon-s-custom",
|
||||
"el-icon-s-opportunity",
|
||||
"el-icon-s-data",
|
||||
"el-icon-s-check",
|
||||
"el-icon-s-grid",
|
||||
"el-icon-menu",
|
||||
"el-icon-share",
|
||||
"el-icon-d-caret",
|
||||
"el-icon-caret-left",
|
||||
"el-icon-caret-right",
|
||||
"el-icon-caret-bottom",
|
||||
"el-icon-caret-top",
|
||||
"el-icon-bottom-left",
|
||||
"el-icon-bottom-right",
|
||||
"el-icon-back",
|
||||
"el-icon-right",
|
||||
"el-icon-bottom",
|
||||
"el-icon-top",
|
||||
"el-icon-top-left",
|
||||
"el-icon-top-right",
|
||||
"el-icon-arrow-left",
|
||||
"el-icon-arrow-right",
|
||||
"el-icon-arrow-down",
|
||||
"el-icon-arrow-up",
|
||||
"el-icon-d-arrow-left",
|
||||
"el-icon-d-arrow-right",
|
||||
"el-icon-video-pause",
|
||||
"el-icon-video-play",
|
||||
"el-icon-refresh",
|
||||
"el-icon-refresh-right",
|
||||
"el-icon-refresh-left",
|
||||
"el-icon-finished",
|
||||
"el-icon-sort",
|
||||
"el-icon-sort-up",
|
||||
"el-icon-sort-down",
|
||||
"el-icon-rank",
|
||||
"el-icon-loading",
|
||||
"el-icon-view",
|
||||
"el-icon-c-scale-to-original",
|
||||
"el-icon-date",
|
||||
"el-icon-edit",
|
||||
"el-icon-edit-outline",
|
||||
"el-icon-folder",
|
||||
"el-icon-folder-opened",
|
||||
"el-icon-folder-add",
|
||||
"el-icon-folder-remove",
|
||||
"el-icon-folder-delete",
|
||||
"el-icon-folder-checked",
|
||||
"el-icon-tickets",
|
||||
"el-icon-document-remove",
|
||||
"el-icon-document-delete",
|
||||
"el-icon-document-copy",
|
||||
"el-icon-document-checked",
|
||||
"el-icon-document",
|
||||
"el-icon-document-add",
|
||||
"el-icon-printer",
|
||||
"el-icon-paperclip",
|
||||
"el-icon-takeaway-box",
|
||||
"el-icon-search",
|
||||
"el-icon-monitor",
|
||||
"el-icon-attract",
|
||||
"el-icon-mobile",
|
||||
"el-icon-scissors",
|
||||
"el-icon-umbrella",
|
||||
"el-icon-headset",
|
||||
"el-icon-brush",
|
||||
"el-icon-mouse",
|
||||
"el-icon-coordinate",
|
||||
"el-icon-magic-stick",
|
||||
"el-icon-reading",
|
||||
"el-icon-data-line",
|
||||
"el-icon-data-board",
|
||||
"el-icon-pie-chart",
|
||||
"el-icon-data-analysis",
|
||||
"el-icon-collection-tag",
|
||||
"el-icon-film",
|
||||
"el-icon-suitcase",
|
||||
"el-icon-suitcase-1",
|
||||
"el-icon-receiving",
|
||||
"el-icon-collection",
|
||||
"el-icon-files",
|
||||
"el-icon-notebook-1",
|
||||
"el-icon-notebook-2",
|
||||
"el-icon-toilet-paper",
|
||||
"el-icon-office-building",
|
||||
"el-icon-school",
|
||||
"el-icon-table-lamp",
|
||||
"el-icon-house",
|
||||
"el-icon-no-smoking",
|
||||
"el-icon-smoking",
|
||||
"el-icon-shopping-cart-full",
|
||||
"el-icon-shopping-cart-1",
|
||||
"el-icon-shopping-cart-2",
|
||||
"el-icon-shopping-bag-1",
|
||||
"el-icon-shopping-bag-2",
|
||||
"el-icon-sold-out",
|
||||
"el-icon-sell",
|
||||
"el-icon-present",
|
||||
"el-icon-box",
|
||||
"el-icon-bank-card",
|
||||
"el-icon-money",
|
||||
"el-icon-coin",
|
||||
"el-icon-wallet",
|
||||
"el-icon-discount",
|
||||
"el-icon-price-tag",
|
||||
"el-icon-news",
|
||||
"el-icon-guide",
|
||||
"el-icon-male",
|
||||
"el-icon-female",
|
||||
"el-icon-thumb",
|
||||
"el-icon-cpu",
|
||||
"el-icon-link",
|
||||
"el-icon-connection",
|
||||
"el-icon-open",
|
||||
"el-icon-turn-off",
|
||||
"el-icon-set-up",
|
||||
"el-icon-chat-round",
|
||||
"el-icon-chat-line-round",
|
||||
"el-icon-chat-square",
|
||||
"el-icon-chat-dot-round",
|
||||
"el-icon-chat-dot-square",
|
||||
"el-icon-chat-line-square",
|
||||
"el-icon-message",
|
||||
"el-icon-postcard",
|
||||
"el-icon-position",
|
||||
"el-icon-turn-off-microphone",
|
||||
"el-icon-microphone",
|
||||
"el-icon-close-notification",
|
||||
"el-icon-bangzhu",
|
||||
"el-icon-time",
|
||||
"el-icon-odometer",
|
||||
"el-icon-crop",
|
||||
"el-icon-aim",
|
||||
"el-icon-switch-button",
|
||||
"el-icon-full-screen",
|
||||
"el-icon-copy-document",
|
||||
"el-icon-mic",
|
||||
"el-icon-stopwatch",
|
||||
"el-icon-medal-1",
|
||||
"el-icon-medal",
|
||||
"el-icon-trophy",
|
||||
"el-icon-trophy-1",
|
||||
"el-icon-first-aid-kit",
|
||||
"el-icon-discover",
|
||||
"el-icon-place",
|
||||
"el-icon-location",
|
||||
"el-icon-location-outline",
|
||||
"el-icon-location-information",
|
||||
"el-icon-add-location",
|
||||
"el-icon-delete-location",
|
||||
"el-icon-map-location",
|
||||
"el-icon-alarm-clock",
|
||||
"el-icon-timer",
|
||||
"el-icon-watch-1",
|
||||
"el-icon-watch",
|
||||
"el-icon-lock",
|
||||
"el-icon-unlock",
|
||||
"el-icon-key",
|
||||
"el-icon-service",
|
||||
"el-icon-mobile-phone",
|
||||
"el-icon-bicycle",
|
||||
"el-icon-truck",
|
||||
"el-icon-ship",
|
||||
"el-icon-basketball",
|
||||
"el-icon-football",
|
||||
"el-icon-soccer",
|
||||
"el-icon-baseball",
|
||||
"el-icon-wind-power",
|
||||
"el-icon-light-rain",
|
||||
"el-icon-lightning",
|
||||
"el-icon-heavy-rain",
|
||||
"el-icon-sunrise",
|
||||
"el-icon-sunrise-1",
|
||||
"el-icon-sunset",
|
||||
"el-icon-sunny",
|
||||
"el-icon-cloudy",
|
||||
"el-icon-partly-cloudy",
|
||||
"el-icon-cloudy-and-sunny",
|
||||
"el-icon-moon",
|
||||
"el-icon-moon-night",
|
||||
"el-icon-dish",
|
||||
"el-icon-dish-1",
|
||||
"el-icon-food",
|
||||
"el-icon-chicken",
|
||||
"el-icon-fork-spoon",
|
||||
"el-icon-knife-fork",
|
||||
"el-icon-burger",
|
||||
"el-icon-tableware",
|
||||
"el-icon-sugar",
|
||||
"el-icon-dessert",
|
||||
"el-icon-ice-cream",
|
||||
"el-icon-hot-water",
|
||||
"el-icon-water-cup",
|
||||
"el-icon-coffee-cup",
|
||||
"el-icon-cold-drink",
|
||||
"el-icon-goblet",
|
||||
"el-icon-goblet-full",
|
||||
"el-icon-goblet-square",
|
||||
"el-icon-goblet-square-full",
|
||||
"el-icon-refrigerator",
|
||||
"el-icon-grape",
|
||||
"el-icon-watermelon",
|
||||
"el-icon-cherry",
|
||||
"el-icon-apple",
|
||||
"el-icon-pear",
|
||||
"el-icon-orange",
|
||||
"el-icon-coffee",
|
||||
"el-icon-ice-tea",
|
||||
"el-icon-ice-drink",
|
||||
"el-icon-milk-tea",
|
||||
"el-icon-potato-strips",
|
||||
"el-icon-lollipop",
|
||||
"el-icon-ice-cream-square",
|
||||
"el-icon-ice-cream-round"
|
||||
];
|
||||
@@ -0,0 +1,468 @@
|
||||
export default [
|
||||
"vk-icon-activityfill",
|
||||
"vk-icon-crownfill",
|
||||
"vk-icon-crown",
|
||||
"vk-icon-goodsfill",
|
||||
"vk-icon-messagefill",
|
||||
"vk-icon-profilefill",
|
||||
"vk-icon-sound",
|
||||
"vk-icon-sponsorfill",
|
||||
"vk-icon-sponsor",
|
||||
"vk-icon-upblock",
|
||||
"vk-icon-weblock",
|
||||
"vk-icon-weunblock",
|
||||
"vk-icon-1111",
|
||||
"vk-icon-my",
|
||||
"vk-icon-myfill",
|
||||
"vk-icon-emojifill",
|
||||
"vk-icon-emojiflashfill",
|
||||
"vk-icon-flashbuyfill-copy",
|
||||
"vk-icon-text",
|
||||
"vk-icon-goodsfavor",
|
||||
"vk-icon-musicfill",
|
||||
"vk-icon-musicforbidfill",
|
||||
"vk-icon-roundleftfill",
|
||||
"vk-icon-triangledownfill",
|
||||
"vk-icon-triangleupfill",
|
||||
"vk-icon-roundleftfill-copy",
|
||||
"vk-icon-pulldown1",
|
||||
"vk-icon-emojilight",
|
||||
"vk-icon-keyboardlight",
|
||||
"vk-icon-recordfill",
|
||||
"vk-icon-recordlight",
|
||||
"vk-icon-appreciate",
|
||||
"vk-icon-record",
|
||||
"vk-icon-check",
|
||||
"vk-icon-roundaddlight",
|
||||
"vk-icon-close",
|
||||
"vk-icon-soundlight",
|
||||
"vk-icon-edit",
|
||||
"vk-icon-cardboardfill",
|
||||
"vk-icon-emoji",
|
||||
"vk-icon-cardboard",
|
||||
"vk-icon-favorfill",
|
||||
"vk-icon-formfill",
|
||||
"vk-icon-favor",
|
||||
"vk-icon-coin",
|
||||
"vk-icon-loading",
|
||||
"vk-icon-sortlight",
|
||||
"vk-icon-locationfill",
|
||||
"vk-icon-cardboardforbid",
|
||||
"vk-icon-location",
|
||||
"vk-icon-circlefill",
|
||||
"vk-icon-phone",
|
||||
"vk-icon-circle",
|
||||
"vk-icon-roundcheckfill",
|
||||
"vk-icon-attentionforbid",
|
||||
"vk-icon-roundcheck",
|
||||
"vk-icon-attentionforbidfill",
|
||||
"vk-icon-roundclosefill",
|
||||
"vk-icon-attentionfavorfill",
|
||||
"vk-icon-roundclose",
|
||||
"vk-icon-attentionfavor",
|
||||
"vk-icon-roundrightfill",
|
||||
"vk-icon-piclight",
|
||||
"vk-icon-roundright",
|
||||
"vk-icon-shoplight",
|
||||
"vk-icon-search",
|
||||
"vk-icon-voicelight",
|
||||
"vk-icon-taxi",
|
||||
"vk-icon-attentionfavorfill-copy",
|
||||
"vk-icon-timefill",
|
||||
"vk-icon-full",
|
||||
"vk-icon-time",
|
||||
"vk-icon-mail",
|
||||
"vk-icon-unfold",
|
||||
"vk-icon-peoplelist",
|
||||
"vk-icon-warnfill",
|
||||
"vk-icon-goodsnewfill",
|
||||
"vk-icon-warn",
|
||||
"vk-icon-goodsnew",
|
||||
"vk-icon-camerafill",
|
||||
"vk-icon-medalfill",
|
||||
"vk-icon-camera",
|
||||
"vk-icon-medal",
|
||||
"vk-icon-commentfill",
|
||||
"vk-icon-newsfill",
|
||||
"vk-icon-comment",
|
||||
"vk-icon-newshotfill",
|
||||
"vk-icon-likefill",
|
||||
"vk-icon-newshot",
|
||||
"vk-icon-like",
|
||||
"vk-icon-news",
|
||||
"vk-icon-notificationfill",
|
||||
"vk-icon-videofill",
|
||||
"vk-icon-notification",
|
||||
"vk-icon-video",
|
||||
"vk-icon-order",
|
||||
"vk-icon-askfill",
|
||||
"vk-icon-samefill",
|
||||
"vk-icon-ask",
|
||||
"vk-icon-same",
|
||||
"vk-icon-exit",
|
||||
"vk-icon-deliver",
|
||||
"vk-icon-skinfill",
|
||||
"vk-icon-evaluate",
|
||||
"vk-icon-skin",
|
||||
"vk-icon-pay",
|
||||
"vk-icon-moneybagfill",
|
||||
"vk-icon-send",
|
||||
"vk-icon-usefullfill",
|
||||
"vk-icon-shop",
|
||||
"vk-icon-usefull",
|
||||
"vk-icon-ticket",
|
||||
"vk-icon-moneybag",
|
||||
"vk-icon-wang",
|
||||
"vk-icon-redpacket_fill",
|
||||
"vk-icon-back",
|
||||
"vk-icon-subscription",
|
||||
"vk-icon-cascades",
|
||||
"vk-icon-home_light",
|
||||
"vk-icon-discover",
|
||||
"vk-icon-my_light",
|
||||
"vk-icon-list",
|
||||
"vk-icon-community_light",
|
||||
"vk-icon-more",
|
||||
"vk-icon-cart_light",
|
||||
"vk-icon-scan",
|
||||
"vk-icon-we_light",
|
||||
"vk-icon-settings",
|
||||
"vk-icon-home_fill_light",
|
||||
"vk-icon-questionfill",
|
||||
"vk-icon-cart_fill_light",
|
||||
"vk-icon-question",
|
||||
"vk-icon-community_fill_light",
|
||||
"vk-icon-shopfill",
|
||||
"vk-icon-my_fill_light",
|
||||
"vk-icon-form",
|
||||
"vk-icon-we_fill_light",
|
||||
"vk-icon-wangfill",
|
||||
"vk-icon-skin_light",
|
||||
"vk-icon-pic",
|
||||
"vk-icon-search_light",
|
||||
"vk-icon-filter",
|
||||
"vk-icon-scan_light",
|
||||
"vk-icon-footprint",
|
||||
"vk-icon-people_list_light",
|
||||
"vk-icon-top",
|
||||
"vk-icon-message_light",
|
||||
"vk-icon-pulldown",
|
||||
"vk-icon-close_light",
|
||||
"vk-icon-pullup",
|
||||
"vk-icon-add_light",
|
||||
"vk-icon-right",
|
||||
"vk-icon-profile_light",
|
||||
"vk-icon-refresh",
|
||||
"vk-icon-service_light",
|
||||
"vk-icon-moreandroid",
|
||||
"vk-icon-friend_add_light",
|
||||
"vk-icon-deletefill",
|
||||
"vk-icon-edit_light",
|
||||
"vk-icon-refund",
|
||||
"vk-icon-camera_light",
|
||||
"vk-icon-cart",
|
||||
"vk-icon-hot_light",
|
||||
"vk-icon-qrcode",
|
||||
"vk-icon-refresh_light",
|
||||
"vk-icon-remind",
|
||||
"vk-icon-back_light",
|
||||
"vk-icon-delete",
|
||||
"vk-icon-share_light",
|
||||
"vk-icon-profile",
|
||||
"vk-icon-comment_light",
|
||||
"vk-icon-home",
|
||||
"vk-icon-appreciate_light",
|
||||
"vk-icon-cartfill",
|
||||
"vk-icon-favor_light",
|
||||
"vk-icon-discoverfill",
|
||||
"vk-icon-appreciate_fill_light",
|
||||
"vk-icon-homefill",
|
||||
"vk-icon-comment_fill_light",
|
||||
"vk-icon-message",
|
||||
"vk-icon-wang_light",
|
||||
"vk-icon-addressbook",
|
||||
"vk-icon-more_android_light",
|
||||
"vk-icon-link",
|
||||
"vk-icon-friend_light",
|
||||
"vk-icon-lock",
|
||||
"vk-icon-more_light",
|
||||
"vk-icon-unlock",
|
||||
"vk-icon-goods_favor_light",
|
||||
"vk-icon-vip",
|
||||
"vk-icon-goods_new_fill_light",
|
||||
"vk-icon-weibo",
|
||||
"vk-icon-goods_new_light",
|
||||
"vk-icon-activity",
|
||||
"vk-icon-goods_light",
|
||||
"vk-icon-big",
|
||||
"vk-icon-medal_fill_light",
|
||||
"vk-icon-friendaddfill",
|
||||
"vk-icon-medal_light",
|
||||
"vk-icon-friendadd",
|
||||
"vk-icon-news_fill_light",
|
||||
"vk-icon-friendfamous",
|
||||
"vk-icon-news_hot_fill_light",
|
||||
"vk-icon-friend",
|
||||
"vk-icon-news_hot_light",
|
||||
"vk-icon-goods",
|
||||
"vk-icon-news_light",
|
||||
"vk-icon-selection",
|
||||
"vk-icon-video_fill_light",
|
||||
"vk-icon-tmall",
|
||||
"vk-icon-message_fill_light",
|
||||
"vk-icon-explore",
|
||||
"vk-icon-form_light",
|
||||
"vk-icon-present",
|
||||
"vk-icon-video_light",
|
||||
"vk-icon-squarecheckfill",
|
||||
"vk-icon-search_list_light",
|
||||
"vk-icon-square",
|
||||
"vk-icon-form_fill_light",
|
||||
"vk-icon-squarecheck",
|
||||
"vk-icon-global_light",
|
||||
"vk-icon-round",
|
||||
"vk-icon-global",
|
||||
"vk-icon-roundaddfill",
|
||||
"vk-icon-favor_fill_light",
|
||||
"vk-icon-roundadd",
|
||||
"vk-icon-delete_light",
|
||||
"vk-icon-add",
|
||||
"vk-icon-back_android",
|
||||
"vk-icon-notificationforbidfill",
|
||||
"vk-icon-back_android_light",
|
||||
"vk-icon-explorefill",
|
||||
"vk-icon-down_light",
|
||||
"vk-icon-fold",
|
||||
"vk-icon-round_close_light",
|
||||
"vk-icon-game",
|
||||
"vk-icon-round_close_fill_light",
|
||||
"vk-icon-redpacket",
|
||||
"vk-icon-expressman",
|
||||
"vk-icon-selectionfill",
|
||||
"vk-icon-punch_light",
|
||||
"vk-icon-similar",
|
||||
"vk-icon-evaluate_fill",
|
||||
"vk-icon-appreciatefill",
|
||||
"vk-icon-furniture",
|
||||
"vk-icon-infofill",
|
||||
"vk-icon-dress",
|
||||
"vk-icon-info",
|
||||
"vk-icon-coffee",
|
||||
"vk-icon-tao",
|
||||
"vk-icon-sports",
|
||||
"vk-icon-mobiletao",
|
||||
"vk-icon-group_light",
|
||||
"vk-icon-forwardfill",
|
||||
"vk-icon-location_light",
|
||||
"vk-icon-forward",
|
||||
"vk-icon-attention_light",
|
||||
"vk-icon-rechargefill",
|
||||
"vk-icon-group_fill_light",
|
||||
"vk-icon-recharge",
|
||||
"vk-icon-group_fill",
|
||||
"vk-icon-vipcard",
|
||||
"vk-icon-play_forward_fill",
|
||||
"vk-icon-voice",
|
||||
"vk-icon-subscription_light",
|
||||
"vk-icon-voicefill",
|
||||
"vk-icon-deliver_fill",
|
||||
"vk-icon-friendfavor",
|
||||
"vk-icon-notice_forbid_fill",
|
||||
"vk-icon-wifi",
|
||||
"vk-icon-qr_code_light",
|
||||
"vk-icon-share",
|
||||
"vk-icon-settings_light",
|
||||
"vk-icon-wefill",
|
||||
"vk-icon-pick",
|
||||
"vk-icon-we",
|
||||
"vk-icon-form_favor_light",
|
||||
"vk-icon-lightauto",
|
||||
"vk-icon-round_comment_light",
|
||||
"vk-icon-lightforbid",
|
||||
"vk-icon-phone_light",
|
||||
"vk-icon-lightfill",
|
||||
"vk-icon-round_down_light",
|
||||
"vk-icon-camerarotate",
|
||||
"vk-icon-friend_settings_light",
|
||||
"vk-icon-light",
|
||||
"vk-icon-change",
|
||||
"vk-icon-barcode",
|
||||
"vk-icon-round_list_light",
|
||||
"vk-icon-flashlightclose",
|
||||
"vk-icon-ticket_fill",
|
||||
"vk-icon-flashlightopen",
|
||||
"vk-icon-round_friend_fill",
|
||||
"vk-icon-searchlist",
|
||||
"vk-icon-round_crown_fill",
|
||||
"vk-icon-service",
|
||||
"vk-icon-round_link_fill",
|
||||
"vk-icon-sort",
|
||||
"vk-icon-round_light_fill",
|
||||
"vk-icon-1212",
|
||||
"vk-icon-round_favor_fill",
|
||||
"vk-icon-down",
|
||||
"vk-icon-round_menu_fill",
|
||||
"vk-icon-mobile",
|
||||
"vk-icon-round_location_fill",
|
||||
"vk-icon-mobilefill",
|
||||
"vk-icon-round_pay_fill",
|
||||
"vk-icon-copy",
|
||||
"vk-icon-round_like_fill",
|
||||
"vk-icon-countdownfill",
|
||||
"vk-icon-round_people_fill",
|
||||
"vk-icon-countdown",
|
||||
"vk-icon-round_pay",
|
||||
"vk-icon-noticefill",
|
||||
"vk-icon-round_rank_fill",
|
||||
"vk-icon-notice",
|
||||
"vk-icon-round_redpacket_fill",
|
||||
"vk-icon-qiang",
|
||||
"vk-icon-round_skin_fill",
|
||||
"vk-icon-upstagefill",
|
||||
"vk-icon-round_record_fill",
|
||||
"vk-icon-upstage",
|
||||
"vk-icon-round_ticket_fill",
|
||||
"vk-icon-babyfill",
|
||||
"vk-icon-round_redpacket",
|
||||
"vk-icon-baby",
|
||||
"vk-icon-round_text_fill",
|
||||
"vk-icon-brandfill",
|
||||
"vk-icon-round_ticket",
|
||||
"vk-icon-brand",
|
||||
"vk-icon-round_transfer_fill",
|
||||
"vk-icon-choicenessfill",
|
||||
"vk-icon-subtitle_block_light",
|
||||
"vk-icon-choiceness",
|
||||
"vk-icon-warn_light",
|
||||
"vk-icon-clothesfill",
|
||||
"vk-icon-round_transfer",
|
||||
"vk-icon-clothes",
|
||||
"vk-icon-vip_code_light",
|
||||
"vk-icon-creativefill",
|
||||
"vk-icon-subtitle_unblock_light",
|
||||
"vk-icon-creative",
|
||||
"vk-icon-round_shop_fill",
|
||||
"vk-icon-female",
|
||||
"vk-icon-oppose_fill_light",
|
||||
"vk-icon-keyboard",
|
||||
"vk-icon-oppose_light",
|
||||
"vk-icon-male",
|
||||
"vk-icon-living",
|
||||
"vk-icon-newfill",
|
||||
"vk-icon-goods_hot_fill",
|
||||
"vk-icon-new",
|
||||
"vk-icon-ticket_money_fill",
|
||||
"vk-icon-pullleft",
|
||||
"vk-icon-arrow_left_fill",
|
||||
"vk-icon-pullright",
|
||||
"vk-icon-arrow_up_fill",
|
||||
"vk-icon-rankfill",
|
||||
"vk-icon-xiaoheiqun",
|
||||
"vk-icon-rank",
|
||||
"vk-icon-auction",
|
||||
"vk-icon-bad",
|
||||
"vk-icon-return",
|
||||
"vk-icon-cameraadd",
|
||||
"vk-icon-mall_light",
|
||||
"vk-icon-focus",
|
||||
"vk-icon-mall_fill_light",
|
||||
"vk-icon-friendfill",
|
||||
"vk-icon-broadcast_fill",
|
||||
"vk-icon-cameraaddfill",
|
||||
"vk-icon-at",
|
||||
"vk-icon-apps",
|
||||
"vk-icon-card_fill",
|
||||
"vk-icon-paintfill",
|
||||
"vk-icon-paint",
|
||||
"vk-icon-picfill",
|
||||
"vk-icon-refresharrow",
|
||||
"vk-icon-markfill",
|
||||
"vk-icon-mark",
|
||||
"vk-icon-presentfill",
|
||||
"vk-icon-repeal",
|
||||
"vk-icon-album",
|
||||
"vk-icon-peoplefill",
|
||||
"vk-icon-people",
|
||||
"vk-icon-servicefill",
|
||||
"vk-icon-repair",
|
||||
"vk-icon-file",
|
||||
"vk-icon-repairfill",
|
||||
"vk-icon-taoxiaopu",
|
||||
"vk-icon-attentionfill",
|
||||
"vk-icon-attention",
|
||||
"vk-icon-commandfill",
|
||||
"vk-icon-command",
|
||||
"vk-icon-communityfill",
|
||||
"vk-icon-community",
|
||||
"vk-icon-read",
|
||||
"vk-icon-suan",
|
||||
"vk-icon-hua",
|
||||
"vk-icon-ju",
|
||||
"vk-icon-tian",
|
||||
"vk-icon-calendar",
|
||||
"vk-icon-cut",
|
||||
"vk-icon-magic",
|
||||
"vk-icon-backwardfill",
|
||||
"vk-icon-playfill",
|
||||
"vk-icon-stop",
|
||||
"vk-icon-tagfill",
|
||||
"vk-icon-tag",
|
||||
"vk-icon-group",
|
||||
"vk-icon-all",
|
||||
"vk-icon-backdelete",
|
||||
"vk-icon-hotfill",
|
||||
"vk-icon-hot",
|
||||
"vk-icon-post",
|
||||
"vk-icon-radiobox",
|
||||
"vk-icon-rounddown",
|
||||
"vk-icon-upload",
|
||||
"vk-icon-writefill",
|
||||
"vk-icon-write",
|
||||
"vk-icon-radioboxfill",
|
||||
"vk-icon-punch",
|
||||
"vk-icon-shake",
|
||||
"vk-icon-add1",
|
||||
"vk-icon-move",
|
||||
"vk-icon-safe",
|
||||
"vk-icon-qi",
|
||||
"vk-icon-ye",
|
||||
"vk-icon-cangku",
|
||||
"vk-icon-cangku1",
|
||||
"vk-icon-percentage",
|
||||
"vk-icon-select",
|
||||
"vk-icon-cascader",
|
||||
"vk-icon-radio1",
|
||||
"vk-icon-radio2",
|
||||
"vk-icon-checkbox1",
|
||||
"vk-icon-checkbox2",
|
||||
"vk-icon-checkbox3",
|
||||
"vk-icon-discount",
|
||||
"vk-icon-number",
|
||||
"vk-icon-color",
|
||||
"vk-icon-json",
|
||||
"vk-icon-text1",
|
||||
"vk-icon-textarea",
|
||||
"vk-icon-quyuguanli",
|
||||
"vk-icon-dengji",
|
||||
"vk-icon-jiagoufenxiao",
|
||||
"vk-icon-gudongfenhong",
|
||||
"vk-icon-tixianguanli",
|
||||
"vk-icon-miaosha",
|
||||
"vk-icon-youhuiquan",
|
||||
"vk-icon-jifen1",
|
||||
"vk-icon-shouqicaidan",
|
||||
"vk-icon-zhankaicaidan",
|
||||
"vk-icon-weixin",
|
||||
"vk-icon-weixin1",
|
||||
"vk-icon-zhifubaozhifu",
|
||||
"vk-icon-zhifubaozhifu1",
|
||||
"vk-icon-zhifubaozhifu2",
|
||||
"vk-icon-anzhuo",
|
||||
"vk-icon-iOS",
|
||||
"vk-icon-QQ",
|
||||
"vk-icon-APPku",
|
||||
"vk-icon-weixingongzhonghao",
|
||||
"vk-icon-weixinxiaochengxu",
|
||||
"vk-icon-heading-h5",
|
||||
"vk-icon-shengji3-xianxing"
|
||||
];
|
||||
@@ -0,0 +1,100 @@
|
||||
<!-- 与vk-icons区别是没有left和top窗口 -->
|
||||
<template>
|
||||
<view class="page">
|
||||
<vk-data-page-header
|
||||
title="VK框架图标"
|
||||
subTitle="点击图标即可复制图标代码，如需其他图标，欢迎提交需求。Q群：22466457"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body icons">
|
||||
<view v-for="(icon,index) in icons" :key="icon" class="icon-item pointer">
|
||||
<vk-data-icon :name="icon" size="30" @click="setClipboardData('tag',icon)"></vk-data-icon>
|
||||
<text @click="setClipboardData('class',icon)" class="icon-text">{{icon}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './js/vk-icons.js';
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
setClipboardData(type, icon) {
|
||||
let data = icon;
|
||||
if (type === 'tag') {
|
||||
data = `<vk-data-icon name="${icon}" size="30"></vk-data-icon>`;
|
||||
};
|
||||
vk.pubfn.setClipboardData({
|
||||
data,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制 ' + data + ' 成功！'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showModal({
|
||||
content: '复制 ' + data + ' 失败！',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
width: 16.6%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.icon-item:hover,
|
||||
.icon-item:hover .icon-text {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #99a9bf;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
.icon-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<vk-data-page-header
|
||||
title="VK框架图标"
|
||||
subTitle="点击图标即可复制图标代码，如需其他图标，欢迎提交需求。Q群：22466457"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body icons">
|
||||
<view v-for="(icon,index) in icons" :key="icon" class="icon-item pointer">
|
||||
<vk-data-icon :name="icon" size="30" @click="setClipboardData('tag',icon)"></vk-data-icon>
|
||||
<text @click="setClipboardData('class',icon)" class="icon-text">{{icon}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './js/vk-icons.js';
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
setClipboardData(type, icon) {
|
||||
let data = icon;
|
||||
if (type === 'tag') {
|
||||
data = `<vk-data-icon name="${icon}" size="30"></vk-data-icon>`;
|
||||
};
|
||||
vk.pubfn.setClipboardData({
|
||||
data,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制 ' + data + ' 成功！'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showModal({
|
||||
content: '复制 ' + data + ' 失败！',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
width: 16.6%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.icon-item:hover,
|
||||
.icon-item:hover .icon-text {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #99a9bf;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
.icon-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="address 省市区选择"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
同时支持下拉选择 和 输入搜索
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-address
|
||||
v-model="form1.address1"
|
||||
placeholder="请选择省市区"
|
||||
></vk-data-input-address>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-address
|
||||
v-model="form1.address2"
|
||||
placeholder="请选择省市"
|
||||
:level="2"
|
||||
></vk-data-input-address>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-address
|
||||
v-model="form1.address3"
|
||||
placeholder="请选择省"
|
||||
:level="1"
|
||||
></vk-data-input-address>
|
||||
</view>
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input JSON"
|
||||
subTitle="JSON编辑器"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="mt15">
|
||||
<vk-data-input-json
|
||||
v-model="form1.value1"
|
||||
mode="code"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-json>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="money 金额"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
金额 与 数字不一样的地方是 此处金额单位是分<br/>
|
||||
输入框显示的是1，但值其实是100
|
||||
</view>
|
||||
<view class="mt15">
|
||||
金额输入框：
|
||||
<vk-data-input-money
|
||||
v-model="form1.value1"
|
||||
placeholder="请输入金额"
|
||||
width="300px"
|
||||
></vk-data-input-money>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
表单绑定值：
|
||||
<vk-data-input-number
|
||||
class="mt15"
|
||||
v-model="form1.value1"
|
||||
:precision="0"
|
||||
width="300px"
|
||||
placeholder="请输入金额"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
value1:100
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="number-box 步进器"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
整数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number-box
|
||||
v-model="form1.value1"
|
||||
:precision="0"
|
||||
width="200px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number-box>
|
||||
</view>
|
||||
<view class="mt15 tips">
|
||||
2位小数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number-box
|
||||
v-model="form1.value2"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
width="200px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number-box>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="mt15 tips">
|
||||
只能输入1-10内的数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number-box
|
||||
ref="input-number-3"
|
||||
v-model="form1.value3"
|
||||
:precision="0"
|
||||
:max="10"
|
||||
:min="1"
|
||||
width="200px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number-box>
|
||||
</view>
|
||||
|
||||
<view class="mt15 tips">
|
||||
隐藏按钮
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number-box
|
||||
ref="input-number-3"
|
||||
v-model="form1.value4"
|
||||
:precision="0"
|
||||
:controls="false"
|
||||
width="200px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number-box>
|
||||
</view>
|
||||
|
||||
<view class="mt15 tips">
|
||||
<el-button @click="focus">使上方输入框获得焦点</el-button>
|
||||
<el-button @click="select">选中上方输入框中的文字</el-button>
|
||||
</view>
|
||||
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
focus(){
|
||||
that.$refs["input-number-3"].focus();
|
||||
},
|
||||
blur(){
|
||||
that.$refs["input-number-3"].blur();
|
||||
},
|
||||
select(){
|
||||
that.$refs["input-number-3"].select();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="number 数字"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
正整数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number
|
||||
v-model="form1.value1"
|
||||
:precision="0"
|
||||
width="300px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
<view class="mt15 tips">
|
||||
2位小数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number
|
||||
v-model="form1.value2"
|
||||
:precision="2"
|
||||
width="300px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="mt15 tips">
|
||||
最大值100
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number
|
||||
ref="input-number-3"
|
||||
v-model="form1.value3"
|
||||
:precision="0"
|
||||
width="300px"
|
||||
placeholder="请输入数字"
|
||||
:max="100"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
|
||||
<view class="mt15 tips">
|
||||
<el-button @click="focus">使上方输入框获得焦点</el-button>
|
||||
<el-button @click="blur">使上方输入框失去焦点</el-button>
|
||||
<el-button @click="select">选中上方输入框中的文字</el-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
focus(){
|
||||
that.$refs["input-number-3"].focus();
|
||||
},
|
||||
blur(){
|
||||
that.$refs["input-number-3"].blur();
|
||||
},
|
||||
select(){
|
||||
that.$refs["input-number-3"].select();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="percentage 百分比"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
百分比 与 数字不一样的地方是<br/>
|
||||
输入框显示的是1，但值其实是0.01<br/>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
百分比输入框：
|
||||
<vk-data-input-percentage
|
||||
v-model="form1.value1"
|
||||
placeholder="请输入百分比"
|
||||
:precision="2"
|
||||
:max="100"
|
||||
width="300px"
|
||||
></vk-data-input-percentage>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
表单绑定的值：
|
||||
<vk-data-input-number
|
||||
v-model="form1.value1"
|
||||
:precision="4"
|
||||
width="300px"
|
||||
placeholder="请输入金额"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
value1:0.01
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="province 省份选择"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
同时支持下拉选择 和 输入搜索
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-province
|
||||
v-model="form1.value"
|
||||
></vk-data-input-province>
|
||||
</view>
|
||||
<view class="mt15 tips">
|
||||
<view class="mt15 json-view" v-if="form1.value">
|
||||
<pre>
|
||||
{{ form1.value }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
value:""
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="remote-select 远程搜索选择器"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
主要用于选择 user_id 等外键字段
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-remote-select
|
||||
v-model="form1.user_id"
|
||||
placeholder="请输入用户名"
|
||||
action="admin/select/kh/user"
|
||||
width="300px"
|
||||
></vk-data-input-remote-select>
|
||||
</view>
|
||||
<view class="mt15 tips">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
user_id:"",
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="select 下拉选择"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="mt15">
|
||||
<vk-data-input-select
|
||||
class="width-box"
|
||||
v-model="form1.value1"
|
||||
:localdata='[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]'
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
></vk-data-input-select>
|
||||
</view>
|
||||
|
||||
<view class="mt15">
|
||||
<vk-data-input-select
|
||||
class="width-box"
|
||||
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" }
|
||||
]
|
||||
}
|
||||
]'
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
></vk-data-input-select>
|
||||
</view>
|
||||
|
||||
<view class="mt15 tips">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="聚合输入框"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
根据type自动渲染的不同的输入框
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<el-radio-group v-model="type">
|
||||
<el-radio label="number">数字输入框</el-radio>
|
||||
<el-radio label="money">金额输入框</el-radio>
|
||||
<el-radio label="percentage">百分比输入框</el-radio>
|
||||
<el-radio label="discount">折扣输入框</el-radio>
|
||||
<el-radio label="number-box">步进器</el-radio>
|
||||
<!-- <el-radio label="json">JSON输入框</el-radio> -->
|
||||
<el-radio label="textarea">多行文本输入框</el-radio>
|
||||
</el-radio-group>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input :type="type" v-model="form1.value" :precision="0" width="300px" placeholder="请输入"></vk-data-input>
|
||||
</view>
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
value:""
|
||||
},
|
||||
type:"number"
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!-- 基础用法 -->
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="表格基础用法"
|
||||
subTitle="高性能表格 - 万行数据如丝滑般流畅"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table ref="table1" :data="table1.data" :columns="table1.columns" :row-no="true"></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
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 }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
let list = [];
|
||||
for (let i = 1; i <= 10000; i++) {
|
||||
let s = i;
|
||||
if (i < 10) {
|
||||
s = "0" + i;
|
||||
}
|
||||
list.push({
|
||||
_id: i + "",
|
||||
username: `用户名${s}`,
|
||||
nickname: `用户昵称${s}`,
|
||||
mobile: `尾号${s}`,
|
||||
comment: `用户${s}的备注`
|
||||
});
|
||||
}
|
||||
that.table1.data = list;
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user