mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2025-12-08 17:12:28 +08:00
Compare commits
65 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| cb7ae9ca6f | |||
| e4b4898e27 | |||
| 5066ef526d | |||
| 088ff85dcc | |||
| dadf6a78a1 | |||
| 8a8e92cda3 | |||
| 4566e50dd2 | |||
| 01ce2e8dab | |||
| dc804d9372 | |||
| 9c64b9a8ed | |||
| d52979621f | |||
| 5ffc3e4d13 | |||
| ea7ac65814 | |||
| cdfa6f8ac6 | |||
| 6ce3a892b6 | |||
| 28e9a0ddfb | |||
| 1f27948814 | |||
| 3bff16a446 | |||
| d5bfccdeb0 | |||
| 9e046a07d4 | |||
| 046831e700 | |||
| e7ad502390 | |||
| 9f1a2b89b7 | |||
| 5878fcb12b | |||
| 27e280bd97 | |||
| 91594ddb1a | |||
| 4c0c0945a1 | |||
| 2b3e157d88 | |||
| e2d4bb29db | |||
| 865ace6db0 | |||
| 7bc3931e1a | |||
| 94a945291d | |||
| 49a303d5e8 | |||
| 1cabc94cea | |||
| 760f8e9f46 | |||
| 38e6586c84 | |||
| d7ca307fa2 | |||
| 188cec1646 | |||
| 4a4f236772 | |||
| 06847cd801 | |||
| 365810d4e6 | |||
| ed83135062 | |||
| beabf9b6dd | |||
| 238b4898c7 | |||
| 4372773924 | |||
| d399ec904a | |||
| 8ecc971940 | |||
| 66b3b290fb | |||
| a9c7f3e547 | |||
| b54dada91e | |||
| 3ead7c3ae1 | |||
| 9c44ffaa8e | |||
| ea5ef384f2 | |||
| 73f7acfd5a | |||
| 728d62f851 | |||
| cd471735d7 | |||
| 30b35af000 | |||
| 3372c88607 | |||
| ce95008fdd | |||
| bb54b20734 | |||
| bd790ee24b | |||
| 11018ab29f | |||
| 67c4f7b3d9 | |||
| 9bd67f9905 | |||
| 283be0480e |
10
.gitignore
vendored
Normal file
10
.gitignore
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
## ide
|
||||
**/.idea
|
||||
*.iml
|
||||
|
||||
## backend
|
||||
**/target
|
||||
**/logs
|
||||
|
||||
## front
|
||||
**/*.lock
|
||||
2
LICENSE
2
LICENSE
@ -186,7 +186,7 @@
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright (c) 2019 <a href="http://www.jeecg.org">Jeecg Boot</a> All rights reserved.
|
||||
Copyright (c) 2019 <a href="http://www.jeecg.com">Jeecg Boot</a> All rights reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
||||
128
README.md
128
README.md
@ -1,21 +1,18 @@
|
||||
|
||||
2019年度最受欢迎中国开源软件评选
|
||||
请给JeecgBoot 投票,谢谢支持。
|
||||
https://www.oschina.net/p/jeecg-boot
|
||||
|
||||
|
||||

|
||||

|
||||
|
||||
|
||||
|
||||
Jeecg-Boot 快速开发平台(前后端分离版本)
|
||||
JEECG BOOT 低代码开发平台(前后端分离版本)
|
||||
===============
|
||||
|
||||
当前最新版本: 2.1.1(发布日期:20191021)
|
||||
当前最新版本: 2.2.0(发布日期:2020-05-06)
|
||||
|
||||
|
||||
[](https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE)
|
||||
[](http://www.jeecg.com)
|
||||
[](https://github.com/zhangdaiscott/jeecg-boot)
|
||||
[](https://github.com/zhangdaiscott/jeecg-boot)
|
||||
[](https://github.com/zhangdaiscott/jeecg-boot)
|
||||
[](https://github.com/zhangdaiscott/jeecg-boot)
|
||||
|
||||
@ -24,18 +21,18 @@ Jeecg-Boot 快速开发平台(前后端分离版本)
|
||||
项目介绍:
|
||||
-----------------------------------
|
||||
|
||||
<h3 align="center">Java RAD framework for enterprise web applications</h3>
|
||||
<h3 align="center">Java Low Code Platform for Enterprise web applications</h3>
|
||||
|
||||
JeecgBoot 是一款基于代码生成器的J2EE快速开发平台!采用前后端分离架构:SpringBoot2.x,Ant Design&Vue,Mybatis-plus,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任何代码! JeecgBoot引领新的开发模式(Online Coding模式-> 代码生成器模式-> 手工MERGE智能开发), 帮助解决Java项目70%的重复工作,让开发更多关注业务逻辑。既能快速提高开发效率,帮助公司节省成本,同时又不失灵活性!JeecgBoot还独创在线开发模式(No代码概念):在线表单配置(表单设计器)、移动配置能力、工作流配置(在线设计流程)、报表配置能力、在线图表配置、插件能力(可插拔)等等!
|
||||
JeecgBoot 是一款基于代码生成器的`低代码`开发平台,零代码开发!采用前后端分离架构:SpringBoot2.x,Ant Design&Vue,Mybatis-plus,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任何代码! JeecgBoot引领新的开发模式(Online Coding模式-> 代码生成器模式-> 手工MERGE智能开发), 帮助解决Java项目70%的重复工作,让开发更多关注业务逻辑。既能快速提高开发效率,帮助公司节省成本,同时又不失灵活性!JeecgBoot还独创在线开发模式(No代码概念):在线表单配置(表单设计器)、移动配置能力、工作流配置(在线设计流程)、报表配置能力、在线图表配置、插件能力(可插拔)等等!
|
||||
|
||||
|
||||
JEECG宗旨是: 简单功能由Online Coding配置实现(在线配置表单、在线配置报表、在线图表设计、在线设计流程、在线设计表单),复杂功能由代码生成器生成进行手工Merge,既保证了智能又兼顾了灵活;
|
||||
`JEECG宗旨是:` 简单功能由Online Coding配置实现既`零代码开发`(在线配置表单、在线配置报表、在线图表设计、在线设计流程、在线设计表单),复杂功能由代码生成器生成进行手工Merge,既保证了`智能`又兼顾了`灵活`;
|
||||
业务流程采用工作流来实现、扩展出任务接口,供开发编写业务逻辑,表单提供多种解决方案: 表单设计器、online配置表单、编码表单。同时实现了流程与表单的分离设计(松耦合)、并支持任务节点灵活配置,既保证了公司流程的保密性,又减少了开发人员的工作量。
|
||||
|
||||
|
||||
适用项目
|
||||
-----------------------------------
|
||||
Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤其适合企业信息管理系统(MIS)、内部办公系统(OA)、企业资源计划系统(ERP)、客户关系管理系统(CRM)等,其半智能手工Merge的开发方式,可以显著提高开发效率70%以上,极大降低开发成本。
|
||||
Jeecg-Boot低代码开发平台,可以应用在任何J2EE项目的开发中,尤其适合SAAS项目、企业信息管理系统(MIS)、内部办公系统(OA)、企业资源计划系统(ERP)、客户关系管理系统(CRM)等,其半智能手工Merge的开发方式,可以显著提高开发效率70%以上,极大降低开发成本。
|
||||
|
||||
|
||||
|
||||
@ -46,13 +43,13 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
|
||||
|
||||
- 技术官网: [http://www.jeecg.com](http://www.jeecg.com)
|
||||
|
||||
- 开发文档: [http://doc.jeecg.com/1273753](http://doc.jeecg.com/1273753)
|
||||
- 开发文档: [http://doc.jeecg.com](http://doc.jeecg.com/1273753)
|
||||
|
||||
- 视频教程 :[JeecgBoot入门系列视频](https://space.bilibili.com/454617261/channel/detail?cid=84186)
|
||||
- 视频教程 :[JeecgBoot入门视频教程](http://www.jeecg.com/doc/video)
|
||||
|
||||
- 常见问题: [入门常见问题大全](http://www.jeecg.org/forum.php?mod=viewthread&tid=7816&extra=page%3D1)
|
||||
- 常见问题: [入门常见问题大全](http://bbs.jeecg.com/forum.php?mod=viewthread&tid=7816&extra=page%3D1)
|
||||
|
||||
- 更新日志: [版本日志](http://www.jeecg.com/#/doc/changelog)
|
||||
- 更新日志: [版本日志](http://www.jeecg.com/doc/log)
|
||||
|
||||
|
||||
|
||||
@ -63,46 +60,52 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
|
||||
|
||||
- 反馈问题: [反馈问题,请按格式发Issues](https://github.com/zhangdaiscott/jeecg-boot/issues/new)
|
||||
|
||||
- 参与开源: [欢迎加入JEECG开源团队,共同进步!!](http://www.jeecg.com/#/doc/canyu-os)
|
||||
- 参与开源: [欢迎加入JEECG开源团队,共同进步!!](http://www.jeecg.com/doc/join)
|
||||
|
||||
- Online一分钟: [1分钟快速学习](https://my.oschina.net/jeecg/blog/3083313)
|
||||
|
||||
|
||||
为什么选择JEECG-BOOT?
|
||||
-----------------------------------
|
||||
* 1.采用最新主流前后分离框架(Springboot+Mybatis+antd),容易上手; 代码生成器依赖性低,灵活的扩展能力,可灵活实现二次开发;
|
||||
* 2.开发效率很高,采用代码生成器,单表数据模型和一对多(父子表)数据模型,增删改查功能自动生成,菜单配置直接使用;
|
||||
* 3.代码生成器提供强大模板机制,支持自定义模板风格。目前提供四套风格模板(单表两套、一对多两套)
|
||||
* 4.封装完善的用户、角色、菜单、组织机构、数据字典、在线定时任务等基础功能,支持访问授权、按钮权限、数据权限等功能
|
||||
* 5.常用共通封装,各种工具类(定时任务,短信接口,邮件发送,Excel导入导出等),基本满足80%项目需求
|
||||
* 6.简易Excel导入导出,支持单表导出和一对多表模式导出,生成的代码自带导入导出功能
|
||||
* 7.集成简易报表工具,图像报表和数据导出非常方便,可极其方便的生成图形报表、pdf、excel、word等报表;
|
||||
* 8.采用前后分离技术,页面UI风格精美,针对常用组件做了封装:时间、行表格控件、截取显示控件、报表组件,编辑器等等
|
||||
* 9.查询过滤器:查询功能自动生成,后台动态拼SQL追加查询条件;支持多种匹配方式(全匹配/模糊查询/包含查询/不匹配查询);
|
||||
* 10.数据权限(精细化数据权限控制,控制到行级,列表级,表单字段级,实现不同人看不同数据,不同人对同一个页面操作不同字段
|
||||
* 11.在线配置报表(无需编码,通过在线配置方式,实现曲线图,柱状图,数据等报表)
|
||||
* 12.页面校验自动生成(必须输入、数字校验、金额校验、时间空间等);
|
||||
* 13.集成工作流activiti,并实现了只需在页面配置流程转向,可极大的简化bpm工作流的开发;用bpm的流程设计器画出了流程走向,一个工作流基本就完成了,只需写很少量的java代码;
|
||||
* 14.在线流程设计,采用开源Activiti流程引擎,实现在线画流程,自定义表单,表单挂靠,业务流转
|
||||
* 15.多数据源:及其简易的使用方式,在线配置数据源配置,便捷的从其他数据抓取数据;
|
||||
* 16.提供单点登录CAS集成方案,项目中已经提供完善的对接代码
|
||||
* 17.表单设计器,支持用户自定义表单布局,支持单表,一对多表单、支持select、radio、checkbox、textarea、date、popup、列表、宏等控件
|
||||
* 18.专业接口对接机制,统一采用restful接口方式,集成swagger-ui在线接口文档,Jwt token安全验证,方便客户端对接
|
||||
* 19.接口安全机制,可细化控制接口授权,非常简便实现不同客户端只看自己数据等控制
|
||||
* 20.高级组合查询功能,在线配置支持主子表关联查询,可保存查询历史
|
||||
* 21.提供各种系统监控,实时跟踪系统运行情况(监控 Redis、Tomcat、jvm、服务器信息、请求追踪、SQL监控)
|
||||
* 22.消息中心(支持短信、邮件、微信推送等等)
|
||||
* 21.集成Websocket消息通知机制
|
||||
* 22.提供APP发布方案国际化:
|
||||
* 23.支持多语言,提供国际化方案;
|
||||
* 24.数据变更记录日志,可记录数据每次变更内容,通过版本对比功能查看历史变化
|
||||
* 25.平台UI强大,实现了移动自适应
|
||||
* 26.平台首页风格,提供多种组合模式,支持自定义风格
|
||||
* 27.提供简单易用的打印插件,支持谷歌、IE浏览器等各种浏览器
|
||||
* 28.示例代码丰富,提供很多学习案例参考
|
||||
* 29.采用maven分模块开发方式
|
||||
* 30.支持菜单动态路由
|
||||
* 31.权限控制采用 RBAC(Role-Based Access Control,基于角色的访问控制)
|
||||
* 1.采用最新主流前后分离框架(Springboot+Mybatis+antd),容易上手; 代码生成器依赖性低,灵活的扩展能力,可快速实现二次开发;
|
||||
* 2.开发效率高,采用代码生成器,单表、树列表、一对多、一对一等数据模型,增删改查功能一键生成,菜单配置直接使用;
|
||||
* 3.代码生成器提供强大模板机制,支持自定义模板,目前提供四套风格模板(单表两套、树模型一套、一对多三套)
|
||||
* 4.代码生成器非常智能,在线业务建模、在线配置、所见即所得支持23种类控件,一键生成前后端代码,大幅度提升开发效率,不再为重复工作发愁。
|
||||
* 5.低代码能力:Online在线表单(无需编码,通过在线配置表单,实现表单的增删改查,支持单表、树、一对多、一对一等模型,实现人人皆可编码)
|
||||
* 5-1.低代码能力:Online在线报表(无需编码,通过在线配置方式,实现数据报表,可以快速抽取数据,减轻开发压力,实现人人皆可编码)
|
||||
* 5-2.低代码能力:Online在线图表(无需编码,通过在线配置方式,实现曲线图,柱状图,数据报表等,支持自定义排版布局,实现人人皆可编码)
|
||||
* 6.封装完善的用户、角色、菜单、组织机构、数据字典、在线定时任务等基础功能,支持访问授权、按钮权限、数据权限等功能
|
||||
* 7.常用共通封装,各种工具类(定时任务,短信接口,邮件发送,Excel导入导出等),基本满足80%项目需求
|
||||
* 8.简易Excel导入导出,支持单表导出和一对多表模式导出,生成的代码自带导入导出功能
|
||||
* 9.集成简易报表工具,图像报表和数据导出非常方便,可极其方便的生成图形报表、pdf、excel、word等报表;
|
||||
* 10.采用前后分离技术,页面UI风格精美,针对常用组件做了封装:时间、行表格控件、截取显示控件、报表组件,编辑器等等
|
||||
* 11.查询过滤器:查询功能自动生成,后台动态拼SQL追加查询条件;支持多种匹配方式(全匹配/模糊查询/包含查询/不匹配查询);
|
||||
* 12.数据权限(精细化数据权限控制,控制到行级,列表级,表单字段级,实现不同人看不同数据,不同人对同一个页面操作不同字段
|
||||
* 13.页面校验自动生成(必须输入、数字校验、金额校验、时间空间等);
|
||||
* 14.支持SAAS服务模式,提供SaaS多租户架构方案。
|
||||
* 15.分布式文件服务,集成minio、阿里OSS等优秀的第三方,提供便捷的文件上传与管理,同时也支持本地存储。
|
||||
* 16.主流数据库兼容,一套代码完全兼容Mysql、Postgresql、Oracle三大主流数据库。
|
||||
* 17.集成工作流activiti,并实现了只需在页面配置流程转向,可极大的简化bpm工作流的开发;用bpm的流程设计器画出了流程走向,一个工作流基本就完成了,只需写很少量的java代码;
|
||||
* 18.低代码能力:在线流程设计,采用开源Activiti流程引擎,实现在线画流程,自定义表单,表单挂靠,业务流转
|
||||
* 19.多数据源:及其简易的使用方式,在线配置数据源配置,便捷的从其他数据抓取数据;
|
||||
* 20.提供单点登录CAS集成方案,项目中已经提供完善的对接代码
|
||||
* 21.低代码能力:表单设计器,支持用户自定义表单布局,支持单表,一对多表单、支持select、radio、checkbox、textarea、date、popup、列表、宏等控件
|
||||
* 22.专业接口对接机制,统一采用restful接口方式,集成swagger-ui在线接口文档,Jwt token安全验证,方便客户端对接
|
||||
* 23.接口安全机制,可细化控制接口授权,非常简便实现不同客户端只看自己数据等控制
|
||||
* 24.高级组合查询功能,在线配置支持主子表关联查询,可保存查询历史
|
||||
* 25.提供各种系统监控,实时跟踪系统运行情况(监控 Redis、Tomcat、jvm、服务器信息、请求追踪、SQL监控)
|
||||
* 26.消息中心(支持短信、邮件、微信推送等等)
|
||||
* 27.集成Websocket消息通知机制
|
||||
* 28.移动自适应效果优秀,提供APP发布方案:
|
||||
* 29.支持多语言,提供国际化方案;
|
||||
* 30.数据变更记录日志,可记录数据每次变更内容,通过版本对比功能查看历史变化
|
||||
* 31.平台UI强大,实现了移动自适应
|
||||
* 32.平台首页风格,提供多种组合模式,支持自定义风格
|
||||
* 33.提供简单易用的打印插件,支持谷歌、火狐、IE11+ 等各种浏览器
|
||||
* 34.示例代码丰富,提供很多学习案例参考
|
||||
* 35.采用maven分模块开发方式
|
||||
* 36.支持菜单动态路由
|
||||
* 37.权限控制采用 RBAC(Role-Based Access Control,基于角色的访问控制)
|
||||
|
||||
|
||||
|
||||
@ -168,6 +171,8 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
|
||||
│ └─树分类字典
|
||||
│ └─系统公告
|
||||
│ └─我的组织机构
|
||||
│ └─职务管理
|
||||
│ └─通讯录
|
||||
├─消息中心
|
||||
│ ├─消息管理
|
||||
│ ├─模板管理
|
||||
@ -205,7 +210,12 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
|
||||
│ └─进度条
|
||||
│ └─排名列表
|
||||
│ └─等等
|
||||
│─大屏模板
|
||||
│ ├─作战指挥中心大屏
|
||||
│ └─物流服务中心大屏
|
||||
│─常用示例
|
||||
│ ├─自定义组件
|
||||
│ ├─对象存储(对接阿里云)
|
||||
│ ├─单表模型例子
|
||||
│ └─一对多模型例子
|
||||
│ └─打印例子
|
||||
@ -214,7 +224,10 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
|
||||
│ └─常用选择组件
|
||||
│ └─异步树table
|
||||
│ └─接口模拟测试
|
||||
│ └─表格合计示例
|
||||
│ └─异步树列表示例
|
||||
│ └─一对多JEditable
|
||||
│ └─JEditable组件示例
|
||||
│ └─图片拖拽排序
|
||||
│ └─图片翻页
|
||||
│ └─图片预览
|
||||
@ -246,15 +259,16 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
|
||||
│ └─异常页面
|
||||
│ └─个人页面
|
||||
├─高级功能
|
||||
│ ├─系统编码规则
|
||||
│ ├─提供单点登录CAS集成方案
|
||||
│ ├─提供APP发布方案
|
||||
│ ├─集成Websocket消息通知机制
|
||||
├─Online在线开发(暂未开源)
|
||||
├─Online在线低代码开发(暂未开源)
|
||||
│ ├─Online在线表单 - 功能已开放
|
||||
│ ├─在线代码生成器 - 功能已开放
|
||||
│ ├─Online在线报表 - 功能已开放
|
||||
│ ├─Online在线图表
|
||||
│ ├─Online图表模板配置
|
||||
│ ├─Online在线报表
|
||||
│ ├─高级表单设计器
|
||||
│─流程模块功能 (暂不开源)
|
||||
│ ├─流程设计器
|
||||
@ -275,6 +289,9 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
|
||||
```
|
||||
|
||||
|
||||
### Jeecg Boot 产品功能蓝图
|
||||

|
||||
|
||||
|
||||
后台开发环境和依赖
|
||||
----
|
||||
@ -283,7 +300,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
|
||||
- jdk8
|
||||
- mysql
|
||||
- redis
|
||||
- 数据库脚步:jeecg-boot\docs\jeecg-boot-mysql.sql
|
||||
- 数据库脚本:jeecg-boot\docs\jeecg-boot-mysql.sql
|
||||
- 默认登录账号: admin/123456
|
||||
|
||||
|
||||
@ -333,10 +350,13 @@ yarn run lint
|
||||
|
||||
系统效果
|
||||
----
|
||||
##### 大屏模板
|
||||

|
||||
|
||||

|
||||
|
||||
##### PC端
|
||||

|
||||

|
||||

|
||||

|
||||

|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
Ant Design Jeecg Vue
|
||||
====
|
||||
|
||||
当前最新版本: 2.0.2(发布日期:20190708)
|
||||
当前最新版本: 2.2.0(发布日期:2020-05-06)
|
||||
|
||||
Overview
|
||||
----
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
['@vue/app',
|
||||
{ useBuiltIns: 'entry' }]
|
||||
]
|
||||
}
|
||||
|
||||
17277
ant-design-vue-jeecg/package-lock.json
generated
17277
ant-design-vue-jeecg/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,19 +1,19 @@
|
||||
{
|
||||
"name": "vue-antd-jeecg",
|
||||
"version": "2.1.1",
|
||||
"version": "2.2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
|
||||
"pre": "yarn --registry https://registry.npm.taobao.org || cnpm install || npm install --registry https://registry.npm.taobao.org ",
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/data-set": "^0.10.2",
|
||||
"@jeecg/antd-online": "1.2.0",
|
||||
"@antv/data-set": "^0.11.2",
|
||||
"@jeecg/antd-online-beta220": "^1.0.1",
|
||||
"@tinymce/tinymce-vue": "^2.0.0",
|
||||
"ant-design-vue": "^1.4.0",
|
||||
"apexcharts": "^3.6.5",
|
||||
"ant-design-vue": "1.5.2",
|
||||
"area-data": "^5.0.6",
|
||||
"axios": "^0.18.0",
|
||||
"clipboard": "^2.0.4",
|
||||
"codemirror": "^5.46.0",
|
||||
@ -24,23 +24,20 @@
|
||||
"lodash.pick": "^4.4.0",
|
||||
"md5": "^2.2.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"tinymce": "^5.0.2",
|
||||
"tinymce": "^5.1.4",
|
||||
"viser-vue": "^2.4.4",
|
||||
"vue": "^2.6.10",
|
||||
"vue-apexcharts": "^1.3.2",
|
||||
"vue-class-component": "^6.0.0",
|
||||
"vue-area-linkage": "^5.1.0",
|
||||
"vue-cropper": "^0.4.8",
|
||||
"vue-i18n": "^8.7.0",
|
||||
"vue-loader": "^15.7.0",
|
||||
"vue-ls": "^3.2.0",
|
||||
"vue-photo-preview": "^1.1.3",
|
||||
"vue-print-nb-jeecg": "^1.0.8",
|
||||
"vue-property-decorator": "^7.3.0",
|
||||
"vue-print-nb-jeecg": "^1.0.9",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-splitpane": "^1.0.4",
|
||||
"vuedraggable": "^2.20.0",
|
||||
"vuex": "^3.0.1",
|
||||
"vuex-class": "^0.3.1"
|
||||
"vuex": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/polyfill": "^7.2.5",
|
||||
@ -49,12 +46,12 @@
|
||||
"@vue/cli-service": "^3.3.0",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"compression-webpack-plugin": "^3.1.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.1.0",
|
||||
"html-webpack-plugin": "^4.2.0",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"node-sass": "^4.11.0",
|
||||
"sass-loader": "^7.0.1",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"eslintConfig": {
|
||||
@ -64,7 +61,7 @@
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/strongly-recommended",
|
||||
"eslint:recommended"
|
||||
"@vue/standard"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
@ -92,7 +89,9 @@
|
||||
"vue/no-use-v-if-with-v-for": 0,
|
||||
"vue/html-closing-bracket-newline": 0,
|
||||
"vue/no-parsing-error": 0,
|
||||
"no-console": 0
|
||||
"no-console": 0,
|
||||
"no-tabs": 0,
|
||||
"indent": [1, 4]
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
@ -103,6 +102,6 @@
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
"not ie <= 10"
|
||||
]
|
||||
}
|
||||
|
||||
6953
ant-design-vue-jeecg/public/cdn/babel-polyfill/polyfill_7_2_5.js
Normal file
6953
ant-design-vue-jeecg/public/cdn/babel-polyfill/polyfill_7_2_5.js
Normal file
File diff suppressed because it is too large
Load Diff
20
ant-design-vue-jeecg/public/color.less
vendored
20
ant-design-vue-jeecg/public/color.less
vendored
@ -7679,3 +7679,23 @@ font.medium {
|
||||
font.weak {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
|
||||
// begin -------- JAreaLinkage 三级联动样式 --------------
|
||||
.cascader-menu-list .cascader-menu-option.hover,
|
||||
.cascader-menu-list .cascader-menu-option:hover {
|
||||
background-color: color(~`colorPalette("@{primary-color}", 1)`);
|
||||
}
|
||||
|
||||
.area-selectable-list .area-select-option.hover {
|
||||
background-color: color(~`colorPalette("@{primary-color}", 1)`);
|
||||
}
|
||||
|
||||
.area-select:hover {
|
||||
border-color: @primary-color;
|
||||
}
|
||||
|
||||
.area-select:active {
|
||||
box-shadow: 0 0 0 2px color(~`colorPalette("@{primary-color}", 1)`);
|
||||
}
|
||||
// end -------- JAreaLinkage 三级联动样式 --------------
|
||||
8
ant-design-vue-jeecg/public/index.html
vendored
8
ant-design-vue-jeecg/public/index.html
vendored
@ -5,9 +5,9 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Jeecg-Boot 快速开发平台</title>
|
||||
<title>Jeecg-Boot 企业级快速开发平台</title>
|
||||
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
||||
<script src="https://cdn.bootcss.com/babel-polyfill/7.6.0/polyfill.js"></script>
|
||||
<script src="/cdn/babel-polyfill/polyfill_7_2_5.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
@ -244,8 +244,8 @@
|
||||
window._CONFIG = {};
|
||||
window._CONFIG['domianURL'] = 'http://127.0.0.1:8080/jeecg-boot';
|
||||
window._CONFIG['casPrefixUrl'] = 'http://cas.example.org:8443/cas';
|
||||
window._CONFIG['imgDomainURL'] = window._CONFIG['domianURL'] + '/sys/common/view';
|
||||
window._CONFIG['downloadUrl'] = window._CONFIG['domianURL'] + '/sys/common/download';
|
||||
window._CONFIG['onlinePreviewDomainURL'] = 'http://fileview.jeecg.com/onlinePreview'
|
||||
window._CONFIG['staticDomainURL'] = window._CONFIG['domianURL'] + '/sys/common/static';
|
||||
window._CONFIG['pdfDomainURL'] = window._CONFIG['domianURL'] + '/sys/common/pdf/pdfPreviewIframe';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<a-locale-provider :locale="locale">
|
||||
<a-config-provider :locale="locale">
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</a-locale-provider>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
<script>
|
||||
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
|
||||
|
||||
30
ant-design-vue-jeecg/src/api/GroupRequest.js
Normal file
30
ant-design-vue-jeecg/src/api/GroupRequest.js
Normal file
@ -0,0 +1,30 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
/**
|
||||
* 将一个请求分组
|
||||
*
|
||||
* @param getPromise 传入一个可以获取到Promise对象的方法
|
||||
* @param groupId 分组ID,如果不传或者为空则不分组
|
||||
* @param expire 过期时间,默认 半分钟
|
||||
*/
|
||||
export function httpGroupRequest(getPromise, groupId, expire = 1000 * 30) {
|
||||
if (groupId == null || groupId === '') {
|
||||
console.log("--------popup----------getFrom DB-------with---no--groupId ")
|
||||
return getPromise()
|
||||
}
|
||||
|
||||
if (Vue.ls.get(groupId)) {
|
||||
console.log("---------popup--------getFrom Cache--------groupId = " + groupId)
|
||||
return Promise.resolve(Vue.ls.get(groupId));
|
||||
} else {
|
||||
console.log("--------popup----------getFrom DB---------groupId = " + groupId)
|
||||
}
|
||||
|
||||
// 还没有发出请求,就发出第一次的请求
|
||||
return getPromise().then(res => {
|
||||
Vue.ls.set(groupId, res, expire);
|
||||
return Promise.resolve(res);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
import { getAction,deleteAction,putAction,postAction} from '@/api/manage'
|
||||
import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'
|
||||
import Vue from 'vue'
|
||||
import {UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
|
||||
|
||||
////根路径
|
||||
// const doMian = "/jeecg-boot/";
|
||||
////图片预览请求地址
|
||||
// const imgView = "http://localhost:8080/jeecg-boot/sys/common/view/";
|
||||
|
||||
//角色管理
|
||||
const addRole = (params)=>postAction("/sys/role/add",params);
|
||||
const editRole = (params)=>putAction("/sys/role/edit",params);
|
||||
// const getRoleList = (params)=>getAction("/sys/role/list",params);
|
||||
// const deleteRole = (params)=>deleteAction("/sys/role/delete",params);
|
||||
// const deleteRoleList = (params)=>deleteAction("/sys/role/deleteBatch",params);
|
||||
const checkRoleCode = (params)=>getAction("/sys/role/checkRoleCode",params);
|
||||
const queryall = (params)=>getAction("/sys/role/queryall",params);
|
||||
|
||||
@ -19,31 +14,25 @@ const addUser = (params)=>postAction("/sys/user/add",params);
|
||||
const editUser = (params)=>putAction("/sys/user/edit",params);
|
||||
const queryUserRole = (params)=>getAction("/sys/user/queryUserRole",params);
|
||||
const getUserList = (params)=>getAction("/sys/user/list",params);
|
||||
// const deleteUser = (params)=>deleteAction("/sys/user/delete",params);
|
||||
// const deleteUserList = (params)=>deleteAction("/sys/user/deleteBatch",params);
|
||||
const frozenBatch = (params)=>putAction("/sys/user/frozenBatch",params);
|
||||
//验证用户是否存在
|
||||
const checkOnlyUser = (params)=>getAction("/sys/user/checkOnlyUser",params);
|
||||
//改变密码
|
||||
const changPassword = (params)=>putAction("/sys/user/changPassword",params);
|
||||
const changePassword = (params)=>putAction("/sys/user/changePassword",params);
|
||||
|
||||
//权限管理
|
||||
const addPermission= (params)=>postAction("/sys/permission/add",params);
|
||||
const editPermission= (params)=>putAction("/sys/permission/edit",params);
|
||||
const getPermissionList = (params)=>getAction("/sys/permission/list",params);
|
||||
/*update_begin author:wuxianquan date:20190908 for:添加查询一级菜单和子菜单查询api */
|
||||
const getSystemMenuList = (params)=>getAction("/sys/permission/getSystemMenuList",params);
|
||||
const getSystemSubmenu = (params)=>getAction("/sys/permission/getSystemSubmenu",params);
|
||||
/*update_end author:wuxianquan date:20190908 for:添加查询一级菜单和子菜单查询api */
|
||||
const getSystemSubmenuBatch = (params) => getAction('/sys/permission/getSystemSubmenuBatch', params)
|
||||
|
||||
// const deletePermission = (params)=>deleteAction("/sys/permission/delete",params);
|
||||
// const deletePermissionList = (params)=>deleteAction("/sys/permission/deleteBatch",params);
|
||||
const queryTreeList = (params)=>getAction("/sys/permission/queryTreeList",params);
|
||||
const queryTreeListForRole = (params)=>getAction("/sys/role/queryTreeList",params);
|
||||
const queryListAsync = (params)=>getAction("/sys/permission/queryListAsync",params);
|
||||
const queryRolePermission = (params)=>getAction("/sys/permission/queryRolePermission",params);
|
||||
const saveRolePermission = (params)=>postAction("/sys/permission/saveRolePermission",params);
|
||||
//const queryPermissionsByUser = (params)=>getAction("/sys/permission/queryByUser",params);
|
||||
const queryPermissionsByUser = (params)=>getAction("/sys/permission/getUserPermissionByToken",params);
|
||||
const loadAllRoleIds = (params)=>getAction("/sys/permission/loadAllRoleIds",params);
|
||||
const getPermissionRuleList = (params)=>getAction("/sys/permission/getPermRuleListByPermId",params);
|
||||
@ -56,25 +45,35 @@ const queryParentName = (params)=>getAction("/sys/sysDepart/queryParentName",p
|
||||
const searchByKeywords = (params)=>getAction("/sys/sysDepart/searchBy",params);
|
||||
const deleteByDepartId = (params)=>deleteAction("/sys/sysDepart/delete",params);
|
||||
|
||||
//二级部门管理
|
||||
const queryDepartPermission = (params)=>getAction("/sys/permission/queryDepartPermission",params);
|
||||
const saveDepartPermission = (params)=>postAction("/sys/permission/saveDepartPermission",params);
|
||||
const queryTreeListForDeptRole = (params)=>getAction("/sys/sysDepartPermission/queryTreeListForDeptRole",params);
|
||||
const queryDeptRolePermission = (params)=>getAction("/sys/sysDepartPermission/queryDeptRolePermission",params);
|
||||
const saveDeptRolePermission = (params)=>postAction("/sys/sysDepartPermission/saveDeptRolePermission",params);
|
||||
const queryMyDepartTreeList = (params)=>getAction("/sys/sysDepart/queryMyDeptTreeList",params);
|
||||
|
||||
//日志管理
|
||||
//const getLogList = (params)=>getAction("/sys/log/list",params);
|
||||
const deleteLog = (params)=>deleteAction("/sys/log/delete",params);
|
||||
const deleteLogList = (params)=>deleteAction("/sys/log/deleteBatch",params);
|
||||
|
||||
//数据字典
|
||||
const addDict = (params)=>postAction("/sys/dict/add",params);
|
||||
const editDict = (params)=>putAction("/sys/dict/edit",params);
|
||||
//const getDictList = (params)=>getAction("/sys/dict/list",params);
|
||||
const treeList = (params)=>getAction("/sys/dict/treeList",params);
|
||||
// const delDict = (params)=>deleteAction("/sys/dict/delete",params);
|
||||
//const getDictItemList = (params)=>getAction("/sys/dictItem/list",params);
|
||||
const addDictItem = (params)=>postAction("/sys/dictItem/add",params);
|
||||
const editDictItem = (params)=>putAction("/sys/dictItem/edit",params);
|
||||
//const delDictItem = (params)=>deleteAction("/sys/dictItem/delete",params);
|
||||
//const delDictItemList = (params)=>deleteAction("/sys/dictItem/deleteBatch",params);
|
||||
|
||||
//字典标签专用(通过code获取字典数组)
|
||||
export const ajaxGetDictItems = (code, params)=>getAction(`/sys/dict/getDictItems/${code}`,params);
|
||||
//从缓存中获取字典配置
|
||||
function getDictItemsFromCache(dictCode) {
|
||||
if (Vue.ls.get(UI_CACHE_DB_DICT_DATA) && Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode]) {
|
||||
let dictItems = Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode];
|
||||
console.log("-----------getDictItemsFromCache----------dictCode="+dictCode+"---- dictItems=",dictItems)
|
||||
return dictItems;
|
||||
}
|
||||
}
|
||||
|
||||
//系统通告
|
||||
const doReleaseData = (params)=>getAction("/sys/annountCement/doReleaseData",params);
|
||||
@ -82,22 +81,18 @@ const doReovkeData = (params)=>getAction("/sys/annountCement/doReovkeData",param
|
||||
//获取系统访问量
|
||||
const getLoginfo = (params)=>getAction("/sys/loginfo",params);
|
||||
const getVisitInfo = (params)=>getAction("/sys/visitInfo",params);
|
||||
//数据日志访问
|
||||
// const getDataLogList = (params)=>getAction("/sys/dataLog/list",params);
|
||||
|
||||
// 根据部门主键查询用户信息
|
||||
const queryUserByDepId = (params)=>getAction("/sys/user/queryUserByDepId",params);
|
||||
|
||||
// 查询用户角色表里的所有信息
|
||||
const queryUserRoleMap = (params)=>getAction("/sys/user/queryUserRoleMap",params);
|
||||
// 重复校验
|
||||
const duplicateCheck = (params)=>getAction("/sys/duplicate/check",params);
|
||||
// 加载分类字典
|
||||
const loadCategoryData = (params)=>getAction("/sys/category/loadAllData",params);
|
||||
const checkRuleByCode = (params) => getAction('/sys/checkRule/checkByCode', params)
|
||||
//我的通告
|
||||
const getUserNoticeInfo= (params)=>getAction("/sys/sysAnnouncementSend/getMyAnnouncementSend",params);
|
||||
|
||||
export {
|
||||
// imgView,
|
||||
// doMian,
|
||||
addRole,
|
||||
editRole,
|
||||
checkRoleCode,
|
||||
@ -108,7 +103,7 @@ export {
|
||||
queryall,
|
||||
frozenBatch,
|
||||
checkOnlyUser,
|
||||
changPassword,
|
||||
changePassword,
|
||||
getPermissionList,
|
||||
addPermission,
|
||||
editPermission,
|
||||
@ -137,12 +132,21 @@ export {
|
||||
getLoginfo,
|
||||
getVisitInfo,
|
||||
queryUserByDepId,
|
||||
queryUserRoleMap,
|
||||
duplicateCheck,
|
||||
queryTreeListForRole,
|
||||
getSystemMenuList,
|
||||
getSystemSubmenu,
|
||||
loadCategoryData
|
||||
getSystemSubmenuBatch,
|
||||
loadCategoryData,
|
||||
checkRuleByCode,
|
||||
queryDepartPermission,
|
||||
saveDepartPermission,
|
||||
queryTreeListForDeptRole,
|
||||
queryDeptRolePermission,
|
||||
saveDeptRolePermission,
|
||||
queryMyDepartTreeList,
|
||||
getUserNoticeInfo,
|
||||
getDictItemsFromCache
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -55,4 +55,19 @@ export function logout(logoutToken) {
|
||||
'X-Access-Token': logoutToken
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 第三方登录
|
||||
* @param token
|
||||
* @returns {*}
|
||||
*/
|
||||
export function thirdLogin(token) {
|
||||
return axios({
|
||||
url: `/thirdLogin/getLoginUser/${token}`,
|
||||
method: 'get',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=UTF-8'
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import { axios } from '@/utils/request'
|
||||
|
||||
const api = {
|
||||
@ -112,3 +113,65 @@ export function downFile(url,parameter){
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
* @param url 文件路径
|
||||
* @param fileName 文件名
|
||||
* @param parameter
|
||||
* @returns {*}
|
||||
*/
|
||||
export function downloadFile(url, fileName, parameter) {
|
||||
return downFile(url, parameter).then((data) => {
|
||||
if (!data || data.size === 0) {
|
||||
Vue.prototype['$message'].warning('文件下载失败')
|
||||
return
|
||||
}
|
||||
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
||||
window.navigator.msSaveBlob(new Blob([data]), fileName)
|
||||
} else {
|
||||
let url = window.URL.createObjectURL(new Blob([data]))
|
||||
let link = document.createElement('a')
|
||||
link.style.display = 'none'
|
||||
link.href = url
|
||||
link.setAttribute('download', fileName)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link) //下载完成移除元素
|
||||
window.URL.revokeObjectURL(url) //释放掉blob对象
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传 用于富文本上传图片
|
||||
* @param url
|
||||
* @param parameter
|
||||
* @returns {*}
|
||||
*/
|
||||
export function uploadAction(url,parameter){
|
||||
return axios({
|
||||
url: url,
|
||||
data: parameter,
|
||||
method:'post' ,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data', // 文件上传
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件服务访问路径
|
||||
* @param avatar
|
||||
* @param subStr
|
||||
* @returns {*}
|
||||
*/
|
||||
export function getFileAccessHttpUrl(avatar,subStr) {
|
||||
if(!subStr) subStr = 'http'
|
||||
if(avatar && avatar.startsWith(subStr)){
|
||||
return avatar;
|
||||
}else{
|
||||
if(avatar && avatar.length>0 && avatar.indexOf('[')==-1){
|
||||
return window._CONFIG['staticDomainURL'] + "/" + avatar;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
ant-design-vue-jeecg/src/assets/checkcode.png
Normal file
BIN
ant-design-vue-jeecg/src/assets/checkcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
ant-design-vue-jeecg/src/assets/daiban.png
Normal file
BIN
ant-design-vue-jeecg/src/assets/daiban.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
ant-design-vue-jeecg/src/assets/duban.png
Normal file
BIN
ant-design-vue-jeecg/src/assets/duban.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
ant-design-vue-jeecg/src/assets/guaz.png
Normal file
BIN
ant-design-vue-jeecg/src/assets/guaz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
259
ant-design-vue-jeecg/src/assets/less/JAreaLinkage.less
Normal file
259
ant-design-vue-jeecg/src/assets/less/JAreaLinkage.less
Normal file
@ -0,0 +1,259 @@
|
||||
.area-zoom-in-top-enter-active,
|
||||
.area-zoom-in-top-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.area-zoom-in-top-enter,
|
||||
.area-zoom-in-top-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.area-select {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
outline: 0;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-top-width: 1.02px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.area-select-wrap .area-select {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.area-select * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.area-select:hover {
|
||||
border-color: #40a9ff;
|
||||
border-right-width: 1px !important;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
.area-select:active {
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.area-select.small {
|
||||
width: 126px;
|
||||
}
|
||||
|
||||
.area-select.medium {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.area-select.large {
|
||||
width: 194px;
|
||||
}
|
||||
|
||||
.area-select.is-disabled {
|
||||
background: #eceff5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.area-select.is-disabled:hover {
|
||||
border-color: #e1e2e6;
|
||||
}
|
||||
|
||||
.area-select.is-disabled .area-selected-trigger {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.area-select .area-selected-trigger {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
height: 100%;
|
||||
padding: 8px 20px 7px 12px;
|
||||
}
|
||||
|
||||
.area-select .area-select-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
right: 6px;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
transition: all .3s linear;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.area-select .area-select-icon.active {
|
||||
margin-top: -8px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.area-selectable-list-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-height: 275px;
|
||||
z-index: 15000;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
margin: 2px 0;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
|
||||
transition: opacity 0.15s, transform 0.3s !important;
|
||||
transform-origin: center top !important;
|
||||
}
|
||||
|
||||
.area-selectable-list {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #565656;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.area-selectable-list .area-select-option {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: 0 15px 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.area-selectable-list .area-select-option.hover {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.area-selectable-list .area-select-option.selected {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-weight: 600;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.cascader-menu-list-wrap {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 15000;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
margin: 2px 0;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
|
||||
transition: opacity 0.15s, transform 0.3s !important;
|
||||
transform-origin: center top !important;
|
||||
}
|
||||
|
||||
.cascader-menu-list {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #565656;
|
||||
padding: 6px 0;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
height: 204px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
min-width: 160px;
|
||||
vertical-align: top;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.cascader-menu-list:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.cascader-menu-list .cascader-menu-option {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: 0 15px 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.cascader-menu-list .cascader-menu-option.hover,
|
||||
.cascader-menu-list .cascader-menu-option:hover {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.cascader-menu-list .cascader-menu-option.selected {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-weight: 600;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.cascader-menu-list .cascader-menu-option.cascader-menu-extensible:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -4px;
|
||||
right: 5px;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid transparent;
|
||||
border-left-color: #a1a4ad;
|
||||
}
|
||||
|
||||
.cascader-menu-list::-webkit-scrollbar,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:decremen,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:end:decrement,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:increment,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:start:increment,
|
||||
.cascader-menu-list::-webkit-scrollbar-button:vertical:decremen,
|
||||
.cascader-menu-list::-webkit-scrollbar-button:vertical:end:decrement,
|
||||
.cascader-menu-list::-webkit-scrollbar-button:vertical:increment,
|
||||
.cascader-menu-list::-webkit-scrollbar-button:vertical:start:increment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cascader-menu-list::-webkit-scrollbar-thumb:vertical,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical {
|
||||
background-color: #b8b8b8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cascader-menu-list::-webkit-scrollbar-thumb:vertical:hover,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
15
ant-design-vue-jeecg/src/assets/less/TableExpand.less
Normal file
15
ant-design-vue-jeecg/src/assets/less/TableExpand.less
Normal file
@ -0,0 +1,15 @@
|
||||
/** [表格主题样式一] 表格强制列不换行 */
|
||||
.j-table-force-nowrap {
|
||||
td, th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ant-table-selection-column {
|
||||
padding: 12px 22px !important;
|
||||
}
|
||||
|
||||
/** 列自适应,弊端会导致列宽失效 */
|
||||
&.ant-table-wrapper .ant-table-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,18 @@
|
||||
|
||||
/*列表上方操作按钮区域*/
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
/** Button按钮间距 */
|
||||
.table-operator .ant-btn {
|
||||
margin-right: 6px
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
.table-operator .ant-btn-group .ant-btn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-operator .ant-btn-group .ant-btn:last-child {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
/*列表td的padding设置 可以控制列表大小*/
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
@ -40,3 +47,12 @@
|
||||
/*列表中范围查询样式*/
|
||||
.query-group-cust{width: calc(50% - 10px)}
|
||||
.query-group-split-cust:before{content:"~";width: 20px;display: inline-block;text-align: center}
|
||||
|
||||
|
||||
/*erp风格子表外框padding设置*/
|
||||
.ant-card-wider-padding.cust-erp-sub-tab>.ant-card-body{padding:5px 12px}
|
||||
|
||||
/* 内嵌子表背景颜色 */
|
||||
.j-inner-table-wrapper /deep/ .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody .ant-table-row {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
BIN
ant-design-vue-jeecg/src/assets/nodata.png
Normal file
BIN
ant-design-vue-jeecg/src/assets/nodata.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
ant-design-vue-jeecg/src/assets/zaiban.png
Normal file
BIN
ant-design-vue-jeecg/src/assets/zaiban.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@ -8,14 +8,14 @@ const init = (callback) => {
|
||||
console.log("-------单点登录开始-------");
|
||||
let token = Vue.ls.get(ACCESS_TOKEN);
|
||||
let st = getUrlParam("ticket");
|
||||
var sevice = "http://"+window.location.host+"/";
|
||||
let sevice = "http://"+window.location.host+"/";
|
||||
if(token){
|
||||
loginSuccess(callback);
|
||||
}else{
|
||||
if(st){
|
||||
validateSt(st,sevice,callback);
|
||||
}else{
|
||||
var serviceUrl = encodeURIComponent(sevice);
|
||||
let serviceUrl = encodeURIComponent(sevice);
|
||||
window.location.href = window._CONFIG['casPrefixUrl']+"/login?service="+serviceUrl;
|
||||
}
|
||||
}
|
||||
@ -26,14 +26,14 @@ const SSO = {
|
||||
};
|
||||
|
||||
function getUrlParam(paraName) {
|
||||
var url = document.location.toString();
|
||||
var arrObj = url.split("?");
|
||||
let url = document.location.toString();
|
||||
let arrObj = url.split("?");
|
||||
|
||||
if (arrObj.length > 1) {
|
||||
var arrPara = arrObj[1].split("&");
|
||||
var arr;
|
||||
let arrPara = arrObj[1].split("&");
|
||||
let arr;
|
||||
|
||||
for (var i = 0; i < arrPara.length; i++) {
|
||||
for (let i = 0; i < arrPara.length; i++) {
|
||||
arr = arrPara[i].split("=");
|
||||
|
||||
if (arr != null && arr[0] == paraName) {
|
||||
@ -57,8 +57,8 @@ function validateSt(ticket,service,callback){
|
||||
if(res.success){
|
||||
loginSuccess(callback);
|
||||
}else{
|
||||
var sevice = "http://"+window.location.host+"/";
|
||||
var serviceUrl = encodeURIComponent(sevice);
|
||||
let sevice = "http://"+window.location.host+"/";
|
||||
let serviceUrl = encodeURIComponent(sevice);
|
||||
window.location.href = window._CONFIG['casPrefixUrl']+"/login?service="+serviceUrl;
|
||||
}
|
||||
}).catch((err) => {
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.chart-card-header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@ -1,31 +1,20 @@
|
||||
<script>
|
||||
import Tooltip from 'ant-design-vue/es/tooltip'
|
||||
import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil'
|
||||
/*
|
||||
const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
|
||||
|
||||
const TooltipOverlayStyle = {
|
||||
overflowWrap: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
};
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'Ellipsis',
|
||||
components: {
|
||||
Tooltip
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-ellipsis'
|
||||
},
|
||||
tooltip: {
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
length: {
|
||||
type: Number,
|
||||
required: true
|
||||
default: 25,
|
||||
},
|
||||
lines: {
|
||||
type: Number,
|
||||
@ -36,28 +25,25 @@
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStrDom (str) {
|
||||
return (
|
||||
<span>{ cutStrByFullLength(str, this.length) + '...' }</span>
|
||||
)
|
||||
},
|
||||
getTooltip ( fullStr) {
|
||||
return (
|
||||
<Tooltip>
|
||||
<template slot="title">{ fullStr }</template>
|
||||
{ this.getStrDom(fullStr) }
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
},
|
||||
render () {
|
||||
methods: {},
|
||||
render() {
|
||||
const { tooltip, length } = this.$props
|
||||
let str = this.$slots.default.map(vNode => vNode.text).join("")
|
||||
const strDom = tooltip && getStrFullLength(str) > length ? this.getTooltip(str) : this.getStrDom(str);
|
||||
return (
|
||||
strDom
|
||||
)
|
||||
let text = ''
|
||||
// 处理没有default插槽时的特殊情况
|
||||
if (this.$slots.default) {
|
||||
text = this.$slots.default.map(vNode => vNode.text).join('')
|
||||
}
|
||||
// 判断是否显示 tooltip
|
||||
if (tooltip && getStrFullLength(text) > length) {
|
||||
return (
|
||||
<a-tooltip>
|
||||
<template slot="title">{text}</template>
|
||||
<span>{cutStrByFullLength(text, this.length) + '…'}</span>
|
||||
</a-tooltip>
|
||||
)
|
||||
} else {
|
||||
return (<span>{text}</span>)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
79
ant-design-vue-jeecg/src/components/_util/Area.js
Normal file
79
ant-design-vue-jeecg/src/components/_util/Area.js
Normal file
@ -0,0 +1,79 @@
|
||||
import { pcaa } from 'area-data'
|
||||
|
||||
/**
|
||||
* 省市区
|
||||
*/
|
||||
export default class Area {
|
||||
/**
|
||||
* 构造器
|
||||
* @param express
|
||||
*/
|
||||
constructor() {
|
||||
let arr = []
|
||||
const province = pcaa['86']
|
||||
Object.keys(province).map(key=>{
|
||||
arr.push({id:key, text:province[key], pid:'86'});
|
||||
const city = pcaa[key];
|
||||
Object.keys(city).map(key2=>{
|
||||
arr.push({id:key2, text:city[key2], pid:key});
|
||||
const qu = pcaa[key2];
|
||||
Object.keys(qu).map(key3=>{
|
||||
arr.push({id:key3, text:qu[key3], pid:key2});
|
||||
})
|
||||
})
|
||||
})
|
||||
this.all = arr;
|
||||
}
|
||||
|
||||
get pca(){
|
||||
return this.all;
|
||||
}
|
||||
|
||||
getCode(text){
|
||||
if(!text || text.length==0){
|
||||
return ''
|
||||
}
|
||||
for(let item of this.all){
|
||||
if(item.text === text){
|
||||
return item.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getText(code){
|
||||
if(!code || code.length==0){
|
||||
return ''
|
||||
}
|
||||
let arr = []
|
||||
this.getAreaBycode(code,arr);
|
||||
return arr.join('/')
|
||||
}
|
||||
|
||||
getRealCode(code){
|
||||
let arr = []
|
||||
this.getPcode(code, arr)
|
||||
return arr;
|
||||
}
|
||||
|
||||
getPcode(id, arr){
|
||||
for(let item of this.all){
|
||||
if(item.id === id){
|
||||
arr.unshift(id)
|
||||
if(item.pid != '86'){
|
||||
this.getPcode(item.pid,arr)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getAreaBycode(code,arr){
|
||||
//console.log("this.all.length",this.all)
|
||||
for(let item of this.all){
|
||||
if(item.id === code){
|
||||
arr.unshift(item.text);
|
||||
this.getAreaBycode(item.pid,arr)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -83,6 +83,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
@import "chart";
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<div :style="{ padding: '0 50px 32px 0' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding" :onClick="handleClick">
|
||||
<v-tooltip/>
|
||||
<v-legend/>
|
||||
<v-axis/>
|
||||
@ -12,9 +12,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ChartEventMixins } from './mixins/ChartMixins'
|
||||
|
||||
export default {
|
||||
name: 'BarMultid',
|
||||
name: 'BarAndLine',
|
||||
mixins: [ChartEventMixins],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -23,13 +25,13 @@
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ type: '10:10', bar: 2, line: 2 },
|
||||
{ type: '10:15', bar: 6, line: 3 },
|
||||
{ type: '10:20', bar: 2, line: 5 },
|
||||
{ type: '10:25', bar: 9, line: 1 },
|
||||
{ type: '10:30', bar: 2, line: 3 },
|
||||
{ type: '10:35', bar: 2, line: 1 },
|
||||
{ type: '10:40', bar: 1, line: 2 }
|
||||
{ type: '10:10', bar: 200, line: 1000 },
|
||||
{ type: '10:15', bar: 600, line: 1000},
|
||||
{ type: '10:20', bar: 200, line: 1000},
|
||||
{ type: '10:25', bar: 900, line: 1000},
|
||||
{ type: '10:30', bar: 200, line: 1000},
|
||||
{ type: '10:35', bar: 200, line: 1000},
|
||||
{ type: '10:40', bar: 100, line: 1000}
|
||||
]
|
||||
},
|
||||
height: {
|
||||
@ -39,6 +41,7 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
padding: { top:50, right:50, bottom:100, left:50 },
|
||||
scale: [{
|
||||
dataKey: 'bar',
|
||||
min: 0
|
||||
|
||||
@ -1,36 +1,43 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :forceFit="true" :height="height" :data="data">
|
||||
<v-tooltip />
|
||||
<v-axis />
|
||||
<v-legend />
|
||||
<v-bar position="x*y" color="type" :adjust="adjust" />
|
||||
<v-chart :data="data" :height="height" :force-fit="true" :onClick="handleClick">
|
||||
<v-tooltip/>
|
||||
<v-axis/>
|
||||
<v-legend/>
|
||||
<v-bar position="x*y" color="type" :adjust="adjust"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DataSet } from '@antv/data-set'
|
||||
import { ChartEventMixins } from './mixins/ChartMixins'
|
||||
|
||||
export default {
|
||||
name: 'BarMultid',
|
||||
mixins: [ChartEventMixins],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataSource:{
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ type: 'Jeecg', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
|
||||
{ type: 'Jeebt', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 }
|
||||
]
|
||||
},
|
||||
fields:{
|
||||
fields: {
|
||||
type: Array,
|
||||
default: () => ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.']
|
||||
},
|
||||
// 别名,需要的格式:[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
|
||||
aliases: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
@ -55,13 +62,22 @@
|
||||
})
|
||||
|
||||
// bar 使用不了 - 和 / 所以替换下
|
||||
return dv.rows.map(row => {
|
||||
let rows = dv.rows.map(row => {
|
||||
if (typeof row.x === 'string') {
|
||||
row.x = row.x.replace(/[-/]/g, '_')
|
||||
}
|
||||
return row
|
||||
})
|
||||
|
||||
// 替换别名
|
||||
rows.forEach(row => {
|
||||
for (let item of this.aliases) {
|
||||
if (item.field === row.type) {
|
||||
row.type = item.alias
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
return rows
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<v-chart :forceFit="true" :height="350" :data="chartData" :scale="scale">
|
||||
<v-chart :forceFit="true" :height="300" :data="chartData" :scale="scale">
|
||||
<v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
|
||||
<v-axis
|
||||
dataKey="value"
|
||||
@ -32,7 +32,7 @@
|
||||
type="arc"
|
||||
:zIndex="1"
|
||||
:start="arcGuide2Start"
|
||||
:end="getArcGuide2End()"
|
||||
:end="getArcGuide2End"
|
||||
:vStyle="arcGuide2Style"
|
||||
></v-guide>
|
||||
<v-guide
|
||||
@ -88,7 +88,7 @@
|
||||
}];
|
||||
|
||||
const data = [
|
||||
{ value: 0},
|
||||
{ value: 7.0 },
|
||||
];
|
||||
|
||||
export default {
|
||||
@ -96,7 +96,7 @@
|
||||
props:{
|
||||
datasource:{
|
||||
type: Number,
|
||||
default:0
|
||||
default:7
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
|
||||
61
ant-design-vue-jeecg/src/components/chart/IndexBar.vue
Normal file
61
ant-design-vue-jeecg/src/components/chart/IndexBar.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart
|
||||
height="254"
|
||||
:data="datasource"
|
||||
:forceFit="true"
|
||||
:padding="['auto', 'auto', '40', '50']">
|
||||
<v-tooltip />
|
||||
<v-axis />
|
||||
<v-bar position="x*y"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const data = []
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
data.push({
|
||||
x: `${i + 1}月`,
|
||||
y: Math.floor(Math.random() * 1000) + 200
|
||||
})
|
||||
}
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
const scale = [{
|
||||
dataKey: 'x',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '时间',
|
||||
min: 1,
|
||||
max: 22
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: "Bar",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.datasource = data
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datasource:[],
|
||||
scale,
|
||||
tooltip
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :force-fit="true" :height="height" :data="data" :scale="scale">
|
||||
<v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
|
||||
<v-tooltip/>
|
||||
<v-axis/>
|
||||
<v-legend/>
|
||||
@ -13,9 +13,11 @@
|
||||
|
||||
<script>
|
||||
import { DataSet } from '@antv/data-set'
|
||||
import { ChartEventMixins } from './mixins/ChartMixins'
|
||||
|
||||
export default {
|
||||
name: 'LineChartMultid',
|
||||
mixins: [ChartEventMixins],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -42,6 +44,11 @@
|
||||
type: Array,
|
||||
default: () => ['jeecg', 'jeebt']
|
||||
},
|
||||
// 别名,需要的格式:[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
|
||||
aliases:{
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
@ -66,7 +73,17 @@
|
||||
key: 'x',
|
||||
value: 'y'
|
||||
})
|
||||
return dv.rows
|
||||
let rows = dv.rows
|
||||
// 替换别名
|
||||
rows.forEach(row => {
|
||||
for (let item of this.aliases) {
|
||||
if (item.field === row.x) {
|
||||
row.x = item.alias
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
return rows
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,6 +64,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
@import "chart";
|
||||
</style>
|
||||
@ -71,6 +71,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
@import "chart";
|
||||
</style>
|
||||
@ -34,7 +34,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.chart-mini-progress {
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
|
||||
<v-tooltip :showTitle="false" dataKey="item*percent"/>
|
||||
<v-axis/>
|
||||
<v-legend dataKey="item"/>
|
||||
@ -10,8 +10,11 @@
|
||||
|
||||
<script>
|
||||
const DataSet = require('@antv/data-set')
|
||||
import { ChartEventMixins } from './mixins/ChartMixins'
|
||||
|
||||
export default {
|
||||
name: 'Pie',
|
||||
mixins: [ChartEventMixins],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.rank {
|
||||
padding: 0 32px 32px 72px;
|
||||
|
||||
54
ant-design-vue-jeecg/src/components/chart/StackBar.vue
Normal file
54
ant-design-vue-jeecg/src/components/chart/StackBar.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-chart :forceFit="true" :height="height" :data="data">
|
||||
<v-coord type="rect" direction="LB" />
|
||||
<v-tooltip />
|
||||
<v-legend />
|
||||
<v-axis dataKey="State" :label="label" />
|
||||
<v-stack-bar position="State*流程数量" color="流程状态" />
|
||||
</v-chart>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const DataSet = require('@antv/data-set');
|
||||
|
||||
export default {
|
||||
name: 'StackBar',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [
|
||||
{ 'State': '请假', '流转中': 25, '已归档': 18 },
|
||||
{ 'State': '出差', '流转中': 30, '已归档': 20 },
|
||||
{ 'State': '加班', '流转中': 38, '已归档': 42},
|
||||
{ 'State': '用车', '流转中': 51, '已归档': 67}
|
||||
]
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: { offset: 12 }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data() {
|
||||
const dv = new DataSet.View().source(this.dataSource);
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: ['流转中', '已归档'],
|
||||
key: '流程状态',
|
||||
value: '流程数量',
|
||||
retains: ['State'],
|
||||
});
|
||||
return dv.rows;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -52,7 +52,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.chart-trend {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
export const ChartEventMixins = {
|
||||
methods: {
|
||||
handleClick(event, chart) {
|
||||
this.handleEvent('click', event, chart)
|
||||
},
|
||||
handleEvent(eventName, event, chart) {
|
||||
this.$emit(eventName, event, chart)
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<a-radio-group v-if="tagType=='radio'" @change="handleInput" :value="value" :disabled="disabled">
|
||||
<a-radio-group v-if="tagType=='radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
|
||||
<a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
|
||||
</a-radio-group>
|
||||
|
||||
<a-select v-else-if="tagType=='select'" :placeholder="placeholder" :disabled="disabled" :value="value" @change="handleInput">
|
||||
<a-select-option value="">请选择</a-select-option>
|
||||
<a-radio-group v-else-if="tagType=='radioButton'" buttonStyle="solid" @change="handleInput" :value="getValueSting" :disabled="disabled">
|
||||
<a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
|
||||
<a-select v-else-if="tagType=='select'" :getPopupContainer = "(target) => target.parentNode" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
|
||||
<a-select-option :value="undefined">请选择</a-select-option>
|
||||
<a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
|
||||
<span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
|
||||
{{ item.text || item.label }}
|
||||
@ -14,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ajaxGetDictItems} from '@/api/api'
|
||||
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: "JDictSelectTag",
|
||||
@ -23,7 +27,7 @@
|
||||
placeholder: String,
|
||||
triggerChange: Boolean,
|
||||
disabled: Boolean,
|
||||
value: String,
|
||||
value: [String, Number],
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
@ -50,8 +54,19 @@
|
||||
//获取字典数据
|
||||
// this.initDictData();
|
||||
},
|
||||
computed: {
|
||||
getValueSting(){
|
||||
return this.value != null ? this.value.toString() : null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initDictData() {
|
||||
//优先从缓存中读取字典配置
|
||||
if(getDictItemsFromCache(this.dictCode)){
|
||||
this.dictOptions = getDictItemsFromCache(this.dictCode);
|
||||
return
|
||||
}
|
||||
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dictCode, null).then((res) => {
|
||||
if (res.success) {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* date: 20190109
|
||||
*/
|
||||
|
||||
import {ajaxGetDictItems} from '@/api/api'
|
||||
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
/**
|
||||
@ -16,6 +16,13 @@ export async function initDictOptions(dictCode) {
|
||||
if (!dictCode) {
|
||||
return '字典Code不能为空!';
|
||||
}
|
||||
//优先从缓存中读取字典配置
|
||||
if(getDictItemsFromCache(dictCode)){
|
||||
let res = {}
|
||||
res.result = getDictItemsFromCache(dictCode);
|
||||
res.success = true;
|
||||
return res;
|
||||
}
|
||||
//获取字典数组
|
||||
let res = await ajaxGetDictItems(dictCode);
|
||||
return res;
|
||||
@ -28,13 +35,25 @@ export async function initDictOptions(dictCode) {
|
||||
* @return String
|
||||
*/
|
||||
export function filterDictText(dictOptions, text) {
|
||||
let re = "";
|
||||
dictOptions.forEach(function (option) {
|
||||
if (text === option.value) {
|
||||
re = option.text;
|
||||
// --update-begin----author:sunjianlei---date:20200323------for: 字典翻译 text 允许逗号分隔 ---
|
||||
if (text != null && dictOptions instanceof Array) {
|
||||
let result = []
|
||||
// 允许多个逗号分隔
|
||||
let splitText = text.toString().trim().split(',')
|
||||
for (let txt of splitText) {
|
||||
let dictText = txt
|
||||
for (let dictItem of dictOptions) {
|
||||
if (txt === dictItem.value.toString()) {
|
||||
dictText = dictItem.text
|
||||
break
|
||||
}
|
||||
}
|
||||
result.push(dictText)
|
||||
}
|
||||
});
|
||||
return re;
|
||||
return result.join(',')
|
||||
}
|
||||
return text
|
||||
// --update-end----author:sunjianlei---date:20200323------for: 字典翻译 text 允许逗号分隔 ---
|
||||
}
|
||||
|
||||
/**
|
||||
@ -44,21 +63,35 @@ export function filterDictText(dictOptions, text) {
|
||||
* @return String
|
||||
*/
|
||||
export function filterMultiDictText(dictOptions, text) {
|
||||
if(!text || !dictOptions || dictOptions.length==0){
|
||||
//js “!text” 认为0为空,所以做提前处理
|
||||
if(text === 0 || text === '0'){
|
||||
if(dictOptions){
|
||||
for (let dictItem of dictOptions) {
|
||||
if (text == dictItem.value) {
|
||||
return dictItem.text
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(!text || text=='null' || !dictOptions || dictOptions.length==0){
|
||||
return ""
|
||||
}
|
||||
let re = "";
|
||||
text = text.toString()
|
||||
let arr = text.split(",")
|
||||
dictOptions.forEach(function (option) {
|
||||
for(let i=0;i<arr.length;i++){
|
||||
if (arr[i] === option.value) {
|
||||
re += option.text+",";
|
||||
break;
|
||||
if(option){
|
||||
for(let i=0;i<arr.length;i++){
|
||||
if (arr[i] === option.value) {
|
||||
re += option.text+",";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
if(re==""){
|
||||
return "";
|
||||
return text;
|
||||
}
|
||||
return re.substring(0,re.length-1);
|
||||
}
|
||||
@ -68,20 +101,42 @@ export function filterMultiDictText(dictOptions, text) {
|
||||
* @param children
|
||||
* @returns string
|
||||
*/
|
||||
export async function ajaxFilterDictText(dictCode, key) {
|
||||
export function filterDictTextByCache(dictCode, key) {
|
||||
if(key==null ||key.length==0){
|
||||
return;
|
||||
}
|
||||
if (!dictCode) {
|
||||
return '字典Code不能为空!';
|
||||
}
|
||||
//console.log(`key : ${key}`);
|
||||
if (!key) {
|
||||
return '';
|
||||
}
|
||||
//通过请求读取字典文本
|
||||
let res = await getAction(`/sys/dict/getDictText/${dictCode}/${key}`);
|
||||
if (res.success) {
|
||||
// console.log('restult: '+ res.result);
|
||||
return res.result;
|
||||
} else {
|
||||
return '';
|
||||
//优先从缓存中读取字典配置
|
||||
if(getDictItemsFromCache(dictCode)){
|
||||
let item = getDictItemsFromCache(dictCode).filter(t => t["value"] == key)
|
||||
if(item && item.length>0){
|
||||
return item[0]["text"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 通过code获取字典数组 */
|
||||
export async function getDictItems(dictCode, params) {
|
||||
//优先从缓存中读取字典配置
|
||||
if(getDictItemsFromCache(dictCode)){
|
||||
let desformDictItems = getDictItemsFromCache(dictCode).map(item => ({...item, label: item.text}))
|
||||
return desformDictItems;
|
||||
}
|
||||
|
||||
//缓存中没有,就请求后台
|
||||
return await ajaxGetDictItems(dictCode, params).then(({success, result}) => {
|
||||
if (success) {
|
||||
let res = result.map(item => ({...item, label: item.text}))
|
||||
console.log('------- 从DB中获取到了字典-------dictCode : ', dictCode, res)
|
||||
return Promise.resolve(res)
|
||||
} else {
|
||||
console.error('getDictItems error: : ', res)
|
||||
return Promise.resolve([])
|
||||
}
|
||||
}).catch((res) => {
|
||||
console.error('getDictItems error: ', res)
|
||||
return Promise.resolve([])
|
||||
})
|
||||
}
|
||||
@ -10,6 +10,7 @@
|
||||
:disabled="disabled"
|
||||
mode="multiple"
|
||||
:placeholder="placeholder"
|
||||
:getPopupContainer="(node) => node.parentNode"
|
||||
allowClear>
|
||||
<a-select-option
|
||||
v-for="(item,index) in dictOptions"
|
||||
@ -24,7 +25,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ajaxGetDictItems} from '@/api/api'
|
||||
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
|
||||
export default {
|
||||
name: 'JMultiSelectTag',
|
||||
props: {
|
||||
@ -49,12 +50,18 @@
|
||||
this.tagType = this.type
|
||||
}
|
||||
//获取字典数据
|
||||
this.initDictData();
|
||||
//this.initDictData();
|
||||
},
|
||||
watch:{
|
||||
options: function(val){
|
||||
this.setCurrentDictOptions(val);
|
||||
},
|
||||
dictCode:{
|
||||
immediate:true,
|
||||
handler() {
|
||||
this.initDictData()
|
||||
},
|
||||
},
|
||||
value (val) {
|
||||
if(!val){
|
||||
this.arrayValue = []
|
||||
@ -68,6 +75,11 @@
|
||||
if(this.options && this.options.length>0){
|
||||
this.dictOptions = [...this.options]
|
||||
}else{
|
||||
//优先从缓存中读取字典配置
|
||||
if(getDictItemsFromCache(this.dictCode)){
|
||||
this.dictOptions = getDictItemsFromCache(this.dictCode);
|
||||
return
|
||||
}
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dictCode, null).then((res) => {
|
||||
if (res.success) {
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
v-if="async"
|
||||
showSearch
|
||||
labelInValue
|
||||
:disabled="disabled"
|
||||
:getPopupContainer="(node) => node.parentNode"
|
||||
@search="loadData"
|
||||
:placeholder="placeholder"
|
||||
v-model="selectedAsyncValue"
|
||||
@ -19,7 +21,9 @@
|
||||
|
||||
<a-select
|
||||
v-else
|
||||
:getPopupContainer="(node) => node.parentNode"
|
||||
showSearch
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
optionFilterProp="children"
|
||||
style="width: 100%"
|
||||
@ -35,7 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ajaxGetDictItems } from '@/api/api'
|
||||
import { ajaxGetDictItems,getDictItemsFromCache } from '@/api/api'
|
||||
import debounce from 'lodash/debounce';
|
||||
import { getAction } from '../../api/manage'
|
||||
|
||||
@ -43,7 +47,7 @@
|
||||
name: 'JSearchSelectTag',
|
||||
props:{
|
||||
disabled: Boolean,
|
||||
value: String,
|
||||
value: [String, Number],
|
||||
dict: String,
|
||||
dictOptions: Array,
|
||||
async: Boolean,
|
||||
@ -71,8 +75,12 @@
|
||||
immediate:true,
|
||||
handler(val){
|
||||
if(!val){
|
||||
this.selectedValue=[]
|
||||
this.selectedAsyncValue=[]
|
||||
if(val==0){
|
||||
this.initSelectValue()
|
||||
}else{
|
||||
this.selectedValue=[]
|
||||
this.selectedAsyncValue=[]
|
||||
}
|
||||
}else{
|
||||
this.initSelectValue()
|
||||
}
|
||||
@ -100,7 +108,7 @@
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.selectedValue = this.value
|
||||
this.selectedValue = this.value.toString()
|
||||
}
|
||||
},
|
||||
loadData(value){
|
||||
@ -132,11 +140,28 @@
|
||||
this.options = [...this.dictOptions]
|
||||
}else{
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dict, null).then((res) => {
|
||||
if (res.success) {
|
||||
this.options = res.result;
|
||||
}
|
||||
})
|
||||
let dictStr = ''
|
||||
if(this.dict){
|
||||
let arr = this.dict.split(',')
|
||||
if(arr[0].indexOf('where')>0){
|
||||
let tbInfo = arr[0].split('where')
|
||||
dictStr = tbInfo[0].trim()+','+arr[1]+','+arr[2]+','+encodeURIComponent(tbInfo[1])
|
||||
}else{
|
||||
dictStr = this.dict
|
||||
}
|
||||
if (this.dict.indexOf(",") == -1) {
|
||||
//优先从缓存中读取字典配置
|
||||
if (getDictItemsFromCache(this.dictCode)) {
|
||||
this.options = getDictItemsFromCache(this.dictCode);
|
||||
return
|
||||
}
|
||||
}
|
||||
ajaxGetDictItems(dictStr, null).then((res) => {
|
||||
if (res.success) {
|
||||
this.options = res.result;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
156
ant-design-vue-jeecg/src/components/jeecg/JAreaLinkage.vue
Normal file
156
ant-design-vue-jeecg/src/components/jeecg/JAreaLinkage.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div v-if="!reloading" class="j-area-linkage">
|
||||
<area-cascader
|
||||
v-if="_type === enums.type[0]"
|
||||
:value="innerValue"
|
||||
:data="pcaa"
|
||||
:level="1"
|
||||
:style="{width}"
|
||||
v-bind="$attrs"
|
||||
v-on="_listeners"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<area-select
|
||||
v-else-if="_type === enums.type[1]"
|
||||
:value="innerValue"
|
||||
:data="pcaa"
|
||||
:level="2"
|
||||
v-bind="$attrs"
|
||||
v-on="_listeners"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<div v-else>
|
||||
<span style="color:red;"> Bad type value: {{_type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pcaa } from 'area-data'
|
||||
import Area from '@/components/_util/Area'
|
||||
|
||||
export default {
|
||||
name: 'JAreaLinkage',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
required:false
|
||||
},
|
||||
// 组件的类型,可选值:
|
||||
// select 下拉样式
|
||||
// cascader 级联样式(默认)
|
||||
type: {
|
||||
type: String,
|
||||
default: 'cascader'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pcaa,
|
||||
innerValue: [],
|
||||
usedListeners: ['change'],
|
||||
enums: {
|
||||
type: ['cascader', 'select']
|
||||
},
|
||||
reloading: false,
|
||||
areaData:''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_listeners() {
|
||||
let listeners = { ...this.$listeners }
|
||||
// 去掉已使用的事件,防止冲突
|
||||
this.usedListeners.forEach(key => {
|
||||
delete listeners[key]
|
||||
})
|
||||
return listeners
|
||||
},
|
||||
_type() {
|
||||
if (this.enums.type.includes(this.type)) {
|
||||
return this.type
|
||||
} else {
|
||||
console.error(`JAreaLinkage的type属性只能接收指定的值(${this.enums.type.join('|')})`)
|
||||
return this.enums.type[0]
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.loadDataByValue(this.value)
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initAreaData();
|
||||
},
|
||||
methods: {
|
||||
/** 通过 value 反推 options */
|
||||
loadDataByValue(value) {
|
||||
if(!value || value.length==0){
|
||||
this.innerValue = []
|
||||
this.reloading = true;
|
||||
setTimeout(()=>{
|
||||
this.reloading = false
|
||||
},100)
|
||||
}else{
|
||||
this.initAreaData();
|
||||
let arr = this.areaData.getRealCode(value);
|
||||
this.innerValue = arr
|
||||
}
|
||||
},
|
||||
/** 通过地区code获取子级 */
|
||||
loadDataByCode(value) {
|
||||
let options = []
|
||||
let data = pcaa[value]
|
||||
if (data) {
|
||||
for (let key in data) {
|
||||
if (data.hasOwnProperty(key)) {
|
||||
options.push({ value: key, label: data[key], })
|
||||
}
|
||||
}
|
||||
return options
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
/** 判断是否有子节点 */
|
||||
hasChildren(options) {
|
||||
options.forEach(option => {
|
||||
let data = this.loadDataByCode(option.value)
|
||||
option.isLeaf = data.length === 0
|
||||
})
|
||||
},
|
||||
handleChange(values) {
|
||||
let value = values[values.length - 1]
|
||||
this.$emit('change', value)
|
||||
},
|
||||
initAreaData(){
|
||||
if(!this.areaData){
|
||||
this.areaData = new Area();
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
model: { prop: 'value', event: 'change' },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.j-area-linkage {
|
||||
height:40px;
|
||||
/deep/ .area-cascader-wrap .area-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .area-select .area-selected-trigger {
|
||||
line-height: 1.15;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -96,7 +96,7 @@
|
||||
loadRoot(){
|
||||
let param = {
|
||||
pid:this.pid,
|
||||
pcode:this.pcode,
|
||||
pcode:!this.pcode?'0':this.pcode,
|
||||
condition:this.condition
|
||||
}
|
||||
getAction(this.url,param).then(res=>{
|
||||
@ -119,11 +119,9 @@
|
||||
/** 数据回显*/
|
||||
loadItemByCode(){
|
||||
if(!this.value || this.value=="0"){
|
||||
this.treeValue = ""
|
||||
this.treeValue = []
|
||||
}else{
|
||||
getAction(this.view,{ids:this.value}).then(res=>{
|
||||
console.log(124345)
|
||||
console.log(124345,res)
|
||||
if(res.success){
|
||||
let values = this.value.split(',')
|
||||
this.treeValue = res.result.map((item, index) => ({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-bind="fullScreenParentProps">
|
||||
<a-icon v-if="fullScreen" class="full-screen-icon" type="fullscreen" @click="()=>fullCoder=!fullCoder"/>
|
||||
<a-icon v-if="fullScreen" class="full-screen-icon" :type="iconType" @click="()=>fullCoder=!fullCoder"/>
|
||||
|
||||
<div class="code-editor-cust full-screen-child">
|
||||
<textarea ref="textarea"></textarea>
|
||||
@ -91,6 +91,7 @@
|
||||
return {
|
||||
// 内部真实的内容
|
||||
code: '',
|
||||
iconType: 'fullscreen',
|
||||
hasCode:false,
|
||||
// 默认的语法类型
|
||||
mode: 'javascript',
|
||||
@ -155,6 +156,15 @@
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fullCoder:{
|
||||
handler(value) {
|
||||
if(value){
|
||||
this.iconType="fullscreen-exit"
|
||||
}else{
|
||||
this.iconType="fullscreen"
|
||||
}
|
||||
}
|
||||
},
|
||||
// value: {
|
||||
// immediate: false,
|
||||
// handler(value) {
|
||||
@ -408,6 +418,7 @@
|
||||
.full-screen-child {
|
||||
min-height: 120px;
|
||||
max-height: 320px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
},
|
||||
getCalendarContainer: {
|
||||
type: Function,
|
||||
default: () => document.body
|
||||
default: (node) => node.parentNode
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -14,6 +14,7 @@
|
||||
import Editor from '@tinymce/tinymce-vue'
|
||||
import 'tinymce/themes/silver/theme'
|
||||
import 'tinymce/plugins/image'
|
||||
import 'tinymce/plugins/link'
|
||||
import 'tinymce/plugins/media'
|
||||
import 'tinymce/plugins/table'
|
||||
import 'tinymce/plugins/lists'
|
||||
@ -22,6 +23,7 @@
|
||||
import 'tinymce/plugins/colorpicker'
|
||||
import 'tinymce/plugins/textcolor'
|
||||
import 'tinymce/plugins/fullscreen'
|
||||
import { uploadAction,getFileAccessHttpUrl } from '@/api/manage'
|
||||
export default {
|
||||
components: {
|
||||
Editor
|
||||
@ -42,11 +44,12 @@
|
||||
},
|
||||
plugins: {
|
||||
type: [String, Array],
|
||||
default: 'lists image media table textcolor wordcount contextmenu fullscreen'
|
||||
default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
|
||||
},
|
||||
toolbar: {
|
||||
type: [String, Array],
|
||||
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | fullscreen'
|
||||
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
|
||||
branding:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -61,9 +64,23 @@
|
||||
toolbar: this.toolbar,
|
||||
branding: false,
|
||||
menubar: false,
|
||||
toolbar_drawer: false,
|
||||
images_upload_handler: (blobInfo, success) => {
|
||||
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
|
||||
success(img)
|
||||
let formData = new FormData()
|
||||
formData.append('file', blobInfo.blob(), blobInfo.filename());
|
||||
formData.append('biz', "jeditor");
|
||||
formData.append("jeditor","1");
|
||||
uploadAction(window._CONFIG['domianURL']+"/sys/common/upload", formData).then((res) => {
|
||||
if (res.success) {
|
||||
if(res.message == 'local'){
|
||||
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
|
||||
success(img)
|
||||
}else{
|
||||
let img = getFileAccessHttpUrl(res.message)
|
||||
success(img)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
myValue: this.value
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="disabled?'jeecg-form-container-disabled':''">
|
||||
<fieldset disabled>
|
||||
<fieldset :disabled="disabled">
|
||||
<slot name="detail"></slot>
|
||||
</fieldset>
|
||||
<slot name="edit"></slot>
|
||||
@ -46,4 +46,16 @@
|
||||
-ms-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.jeecg-form-container-disabled .ant-upload-select{display:none}
|
||||
.jeecg-form-container-disabled .ant-upload-list{cursor:grabbing}
|
||||
.jeecg-form-container-disabled fieldset[disabled] .ant-upload-list{
|
||||
-ms-pointer-events: auto !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.jeecg-form-container-disabled .ant-upload-list-item-actions .anticon-delete,
|
||||
.jeecg-form-container-disabled .ant-upload-list-item .anticon-close{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,203 +0,0 @@
|
||||
<template>
|
||||
<div class="gc-canvas" @click="reloadPic">
|
||||
<canvas id="gc-canvas" :width="contentWidth" :height="contentHeight"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JGraphicCode',
|
||||
props: {
|
||||
length:{
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
fontSizeMin: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
fontSizeMax: {
|
||||
type: Number,
|
||||
default: 45
|
||||
},
|
||||
backgroundColorMin: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
backgroundColorMax: {
|
||||
type: Number,
|
||||
default: 240
|
||||
},
|
||||
colorMin: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
colorMax: {
|
||||
type: Number,
|
||||
default: 160
|
||||
},
|
||||
lineColorMin: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lineColorMax: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
dotColorMin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
dotColorMax: {
|
||||
type: Number,
|
||||
default: 255
|
||||
},
|
||||
contentWidth: {
|
||||
type: Number,
|
||||
default:136
|
||||
},
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 38
|
||||
},
|
||||
remote:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 生成一个随机数
|
||||
randomNum (min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
},
|
||||
// 生成一个随机的颜色
|
||||
randomColor (min, max) {
|
||||
let r = this.randomNum(min, max)
|
||||
let g = this.randomNum(min, max)
|
||||
let b = this.randomNum(min, max)
|
||||
return 'rgb(' + r + ',' + g + ',' + b + ')'
|
||||
},
|
||||
drawPic () {
|
||||
this.randomCode().then(()=>{
|
||||
let canvas = document.getElementById('gc-canvas')
|
||||
let ctx = canvas.getContext('2d')
|
||||
ctx.textBaseline = 'bottom'
|
||||
// 绘制背景
|
||||
ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
|
||||
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
|
||||
// 绘制文字
|
||||
for (let i = 0; i < this.code.length; i++) {
|
||||
this.drawText(ctx, this.code[i], i)
|
||||
}
|
||||
this.drawLine(ctx)
|
||||
this.drawDot(ctx)
|
||||
this.$emit("success",this.code)
|
||||
})
|
||||
},
|
||||
drawText (ctx, txt, i) {
|
||||
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
|
||||
let fontSize = this.randomNum(this.fontSizeMin, this.fontSizeMax)
|
||||
ctx.font = fontSize + 'px SimHei'
|
||||
let padding = 10;
|
||||
let offset = (this.contentWidth-40)/(this.code.length-1)
|
||||
let x=padding;
|
||||
if(i>0){
|
||||
x = padding+(i*offset)
|
||||
}
|
||||
//let x = (i + 1) * (this.contentWidth / (this.code.length + 1))
|
||||
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
|
||||
if(fontSize>40){
|
||||
y=40
|
||||
}
|
||||
var deg = this.randomNum(-10,10)
|
||||
// 修改坐标原点和旋转角度
|
||||
ctx.translate(x, y)
|
||||
ctx.rotate(deg * Math.PI / 180)
|
||||
ctx.fillText(txt, 0, 0)
|
||||
// 恢复坐标原点和旋转角度
|
||||
ctx.rotate(-deg * Math.PI / 180)
|
||||
ctx.translate(-x, -y)
|
||||
},
|
||||
drawLine (ctx) {
|
||||
// 绘制干扰线
|
||||
for (let i = 0; i <1; i++) {
|
||||
ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
|
||||
ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
|
||||
ctx.stroke()
|
||||
}
|
||||
},
|
||||
drawDot (ctx) {
|
||||
// 绘制干扰点
|
||||
for (let i = 0; i < 100; i++) {
|
||||
ctx.fillStyle = this.randomColor(0, 255)
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
|
||||
ctx.fill()
|
||||
}
|
||||
},
|
||||
reloadPic(){
|
||||
this.drawPic()
|
||||
},
|
||||
randomCode(){
|
||||
return new Promise((resolve)=>{
|
||||
if(this.remote==true){
|
||||
getAction("/sys/getCheckCode").then(res=>{
|
||||
console.log("aaaaa",res)
|
||||
if(res.success){
|
||||
this.checkKey = res.result.key
|
||||
this.code = res.result.code
|
||||
resolve();
|
||||
}else{
|
||||
this.$message.error("生成验证码错误,请联系系统管理员")
|
||||
this.code = 'BUG'
|
||||
resolve();
|
||||
}
|
||||
}).catch(()=>{
|
||||
console.log("生成验证码连接服务器异常")
|
||||
this.code = 'BUG'
|
||||
resolve();
|
||||
})
|
||||
}else{
|
||||
this.randomLocalCode();
|
||||
resolve();
|
||||
}
|
||||
})
|
||||
},
|
||||
randomLocalCode(){
|
||||
let random = ''
|
||||
//去掉了I l i o O
|
||||
let str = "QWERTYUPLKJHGFDSAZXCVBNMqwertyupkjhgfdsazxcvbnm1234567890"
|
||||
for(let i = 0; i < this.length; i++) {
|
||||
let index = Math.floor(Math.random()*57);
|
||||
random += str[index];
|
||||
}
|
||||
this.code = random
|
||||
},
|
||||
getLoginParam(){
|
||||
return {
|
||||
checkCode:this.code,
|
||||
checkKey:this.checkKey
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.drawPic()
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
code:"",
|
||||
checkKey:""
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
201
ant-design-vue-jeecg/src/components/jeecg/JImageUpload.vue
Normal file
201
ant-design-vue-jeecg/src/components/jeecg/JImageUpload.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<a-upload
|
||||
name="file"
|
||||
listType="picture-card"
|
||||
:multiple="isMultiple"
|
||||
:action="uploadAction"
|
||||
:headers="headers"
|
||||
:data="{biz:bizPath}"
|
||||
:fileList="fileList"
|
||||
:beforeUpload="beforeUpload"
|
||||
:disabled="disabled"
|
||||
:isMultiple="isMultiple"
|
||||
:showUploadList="isMultiple"
|
||||
@change="handleChange"
|
||||
@preview="handlePreview">
|
||||
<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="height:104px;max-width:300px"/>
|
||||
<div v-else >
|
||||
<a-icon :type="uploadLoading ? 'loading' : 'plus'" />
|
||||
<div class="ant-upload-text">{{ text }}</div>
|
||||
</div>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
|
||||
<img alt="example" style="width: 100%" :src="previewImage"/>
|
||||
</a-modal>
|
||||
</a-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
import { getFileAccessHttpUrl } from '@/api/manage'
|
||||
|
||||
const uidGenerator=()=>{
|
||||
return '-'+parseInt(Math.random()*10000+1,10);
|
||||
}
|
||||
const getFileName=(path)=>{
|
||||
if(path.lastIndexOf("\\")>=0){
|
||||
let reg=new RegExp("\\\\","g");
|
||||
path = path.replace(reg,"/");
|
||||
}
|
||||
return path.substring(path.lastIndexOf("/")+1);
|
||||
}
|
||||
export default {
|
||||
name: 'JImageUpload',
|
||||
data(){
|
||||
return {
|
||||
uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
|
||||
uploadLoading:false,
|
||||
picUrl:false,
|
||||
headers:{},
|
||||
fileList: [],
|
||||
previewImage:"",
|
||||
previewVisible: false,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
text:{
|
||||
type:String,
|
||||
required:false,
|
||||
default:"上传"
|
||||
},
|
||||
/*这个属性用于控制文件上传的业务路径*/
|
||||
bizPath:{
|
||||
type:String,
|
||||
required:false,
|
||||
default:"temp"
|
||||
},
|
||||
value:{
|
||||
type:[String,Array],
|
||||
required:false
|
||||
},
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
required:false,
|
||||
default: false
|
||||
},
|
||||
isMultiple:{
|
||||
type:Boolean,
|
||||
required:false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
if (val instanceof Array) {
|
||||
this.initFileList(val.join(','))
|
||||
} else {
|
||||
this.initFileList(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
},
|
||||
methods:{
|
||||
initFileList(paths){
|
||||
if(!paths || paths.length==0){
|
||||
this.fileList = [];
|
||||
return;
|
||||
}
|
||||
this.picUrl = true;
|
||||
let fileList = [];
|
||||
let arr = paths.split(",")
|
||||
for(var a=0;a<arr.length;a++){
|
||||
let url = getFileAccessHttpUrl(arr[a]);
|
||||
fileList.push({
|
||||
uid: uidGenerator(),
|
||||
name: getFileName(arr[a]),
|
||||
status: 'done',
|
||||
url: url,
|
||||
response:{
|
||||
status:"history",
|
||||
message:arr[a]
|
||||
}
|
||||
})
|
||||
}
|
||||
this.fileList = fileList
|
||||
},
|
||||
beforeUpload: function(file){
|
||||
var fileType = file.type;
|
||||
if(fileType.indexOf('image')<0){
|
||||
this.$message.warning('请上传图片');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
handleChange(info) {
|
||||
this.picUrl = false;
|
||||
let fileList = info.fileList
|
||||
if(info.file.status==='done'){
|
||||
if(info.file.response.success){
|
||||
this.picUrl = true;
|
||||
fileList = fileList.map((file) => {
|
||||
if (file.response) {
|
||||
file.url = file.response.message;
|
||||
}
|
||||
return file;
|
||||
});
|
||||
}
|
||||
//this.$message.success(`${info.file.name} 上传成功!`);
|
||||
}else if (info.file.status === 'error') {
|
||||
this.$message.error(`${info.file.name} 上传失败.`);
|
||||
}else if(info.file.status === 'removed'){
|
||||
this.handleDelete(info.file)
|
||||
}
|
||||
this.fileList = fileList
|
||||
if(info.file.status==='done' || info.file.status === 'removed'){
|
||||
this.handlePathChange()
|
||||
}
|
||||
},
|
||||
// 预览
|
||||
handlePreview (file) {
|
||||
this.previewImage = file.url || file.thumbUrl
|
||||
this.previewVisible = true
|
||||
},
|
||||
getAvatarView(){
|
||||
if(this.fileList.length>0){
|
||||
let url = this.fileList[0].url
|
||||
return getFileAccessHttpUrl(url)
|
||||
}
|
||||
},
|
||||
handlePathChange(){
|
||||
let uploadFiles = this.fileList
|
||||
let path = ''
|
||||
if(!uploadFiles || uploadFiles.length==0){
|
||||
path = ''
|
||||
}
|
||||
let arr = [];
|
||||
if(!this.isMultiple){
|
||||
arr.push(uploadFiles[uploadFiles.length-1].response.message)
|
||||
}else{
|
||||
for(var a=0;a<uploadFiles.length;a++){
|
||||
arr.push(uploadFiles[a].response.message)
|
||||
}
|
||||
}
|
||||
if(arr.length>0){
|
||||
path = arr.join(",")
|
||||
}
|
||||
this.$emit('change', path);
|
||||
},
|
||||
handleDelete(file){
|
||||
//如有需要新增 删除逻辑
|
||||
console.log(file)
|
||||
},
|
||||
handleCancel() {
|
||||
this.close();
|
||||
this.previewVisible = false;
|
||||
},
|
||||
close () {
|
||||
|
||||
},
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -42,6 +42,11 @@
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
biz:{
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@ -49,7 +54,8 @@
|
||||
visible:false,
|
||||
uploading:false,
|
||||
fileList:[],
|
||||
uploadAction:''
|
||||
uploadAction:'',
|
||||
foreignKeys:''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -67,10 +73,11 @@
|
||||
handleClose(){
|
||||
this.visible=false
|
||||
},
|
||||
show(){
|
||||
show(arg){
|
||||
this.fileList = []
|
||||
this.uploading = false
|
||||
this.visible = true
|
||||
this.foreignKeys = arg;
|
||||
},
|
||||
handleRemove(file) {
|
||||
const index = this.fileList.indexOf(file);
|
||||
@ -85,6 +92,12 @@
|
||||
handleImport() {
|
||||
const { fileList } = this;
|
||||
const formData = new FormData();
|
||||
if(this.biz){
|
||||
formData.append('isSingleTableImport',this.biz);
|
||||
}
|
||||
if(this.foreignKeys && this.foreignKeys.length>0){
|
||||
formData.append('foreignKeys',this.foreignKeys);
|
||||
}
|
||||
fileList.forEach((file) => {
|
||||
formData.append('files[]', file);
|
||||
});
|
||||
|
||||
@ -32,7 +32,12 @@
|
||||
handler:function(){
|
||||
this.initVal();
|
||||
}
|
||||
}
|
||||
},
|
||||
// update-begin author:sunjianlei date:20200225 for:当 type 变化的时候重新计算值 ------
|
||||
type() {
|
||||
this.backValue({ target: { value: this.inputVal } })
|
||||
},
|
||||
// update-end author:sunjianlei date:20200225 for:当 type 变化的时候重新计算值 ------
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
|
||||
225
ant-design-vue-jeecg/src/components/jeecg/JModal/index.vue
Normal file
225
ant-design-vue-jeecg/src/components/jeecg/JModal/index.vue
Normal file
@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<a-modal
|
||||
ref="modal"
|
||||
:class="getClass(modalClass)"
|
||||
:style="getStyle(modalStyle)"
|
||||
:visible="visible"
|
||||
v-bind="_attrs"
|
||||
v-on="$listeners"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
<template v-if="!isNoTitle" slot="title">
|
||||
<a-row class="j-modal-title-row" type="flex">
|
||||
<a-col class="left">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
</a-col>
|
||||
<a-col v-if="switchFullscreen" class="right" @click="toggleFullscreen">
|
||||
<a-button class="ant-modal-close ant-modal-close-x" ghost type="link" :icon="fullscreenButtonIcon"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<!-- 处理 scopedSlots -->
|
||||
<template v-for="slotName of scopedSlotsKeys" :slot="slotName">
|
||||
<slot :name="slotName"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 处理 slots -->
|
||||
<template v-for="slotName of slotsKeys" v-slot:[slotName]>
|
||||
<slot :name="slotName"></slot>
|
||||
</template>
|
||||
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getClass, getStyle } from '@/utils/props-util'
|
||||
|
||||
export default {
|
||||
name: 'JModal',
|
||||
props: {
|
||||
title: String,
|
||||
// 可使用 .sync 修饰符
|
||||
visible: Boolean,
|
||||
// 是否全屏弹窗,当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许切换全屏(允许后右上角会出现一个按钮)
|
||||
switchFullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 点击确定按钮的时候是否关闭弹窗
|
||||
okClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 内部使用的 slots ,不再处理
|
||||
usedSlots: ['title'],
|
||||
// 实际控制是否全屏的参数
|
||||
innerFullscreen: this.fullscreen,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 一些未处理的参数或特殊处理的参数绑定到 a-modal 上
|
||||
_attrs() {
|
||||
let attrs = { ...this.$attrs }
|
||||
// 如果全屏就将宽度设为 100%
|
||||
if (this.innerFullscreen) {
|
||||
attrs['width'] = '100%'
|
||||
}
|
||||
return attrs
|
||||
},
|
||||
modalClass() {
|
||||
return {
|
||||
'j-modal-box': true,
|
||||
'fullscreen': this.innerFullscreen,
|
||||
'no-title': this.isNoTitle,
|
||||
'no-footer': this.isNoFooter,
|
||||
}
|
||||
},
|
||||
modalStyle() {
|
||||
let style = {}
|
||||
// 如果全屏就将top设为 0
|
||||
if (this.innerFullscreen) {
|
||||
style['top'] = '0'
|
||||
}
|
||||
return style
|
||||
},
|
||||
isNoTitle() {
|
||||
return !this.title && !this.allSlotsKeys.includes('title')
|
||||
},
|
||||
isNoFooter() {
|
||||
return this._attrs['footer'] === null
|
||||
},
|
||||
slotsKeys() {
|
||||
return Object.keys(this.$slots).filter(key => !this.usedSlots.includes(key))
|
||||
},
|
||||
scopedSlotsKeys() {
|
||||
return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key))
|
||||
},
|
||||
allSlotsKeys() {
|
||||
return this.slotsKeys.concat(this.scopedSlotsKeys)
|
||||
},
|
||||
// 切换全屏的按钮图标
|
||||
fullscreenButtonIcon() {
|
||||
return this.innerFullscreen ? 'fullscreen-exit' : 'fullscreen'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
if (this.visible) {
|
||||
this.innerFullscreen = this.fullscreen
|
||||
}
|
||||
},
|
||||
innerFullscreen(val) {
|
||||
this.$emit('update:fullscreen', val)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
getClass(clazz) {
|
||||
return { ...getClass(this), ...clazz }
|
||||
},
|
||||
getStyle(style) {
|
||||
return { ...getStyle(this), ...style }
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
|
||||
handleOk() {
|
||||
if (this.okClose) {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
|
||||
/** 切换全屏 */
|
||||
toggleFullscreen() {
|
||||
this.innerFullscreen = !this.innerFullscreen
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.j-modal-box {
|
||||
|
||||
&.fullscreen {
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
|
||||
height: 100vh;
|
||||
|
||||
& .ant-modal-content {
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
|
||||
& .ant-modal-body {
|
||||
/* title 和 footer 各占 55px */
|
||||
height: calc(100% - 55px - 55px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-title, &.no-footer {
|
||||
.ant-modal-body {
|
||||
height: calc(100% - 55px);
|
||||
}
|
||||
}
|
||||
|
||||
&.no-title.no-footer {
|
||||
.ant-modal-body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.j-modal-title-row {
|
||||
.left {
|
||||
width: calc(100% - 56px - 56px);
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 56px;
|
||||
position: inherit;
|
||||
|
||||
.ant-modal-close {
|
||||
right: 56px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.j-modal-box.fullscreen {
|
||||
margin: 0;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,37 @@
|
||||
<template>
|
||||
<a-modal
|
||||
<div class="j-super-query-box">
|
||||
|
||||
<slot name="button" :isActive="superQueryFlag" :isMobile="izMobile" :open="handleOpen" :reset="handleReset">
|
||||
<a-tooltip v-if="superQueryFlag" v-bind="tooltipProps" :mouseLeaveDelay="0.2">
|
||||
<!-- begin 不知道为什么不加上这段代码就无法生效 -->
|
||||
<span v-show="false">{{tooltipProps}}</span>
|
||||
<!-- end 不知道为什么不加上这段代码就无法生效 -->
|
||||
<template slot="title">
|
||||
<span>已有高级查询条件生效</span>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="handleReset">清空</a>
|
||||
</template>
|
||||
<a-button-group>
|
||||
<a-button type="primary" @click="handleOpen">
|
||||
<a-icon type="appstore" theme="twoTone" spin/>
|
||||
<span>高级查询</span>
|
||||
</a-button>
|
||||
<a-button v-if="izMobile" type="primary" icon="delete" @click="handleReset"/>
|
||||
</a-button-group>
|
||||
</a-tooltip>
|
||||
<a-button v-else type="primary" icon="filter" @click="handleOpen">高级查询</a-button>
|
||||
</slot>
|
||||
|
||||
<j-modal
|
||||
title="高级查询构造器"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
@cancel="handleCancel"
|
||||
:mask="false"
|
||||
wrapClassName="ant-modal-cust-warp"
|
||||
:fullscreen="izMobile"
|
||||
class="j-super-query-modal"
|
||||
style="top:5%;max-height: 95%;">
|
||||
style="top:5%;max-height: 95%;"
|
||||
>
|
||||
|
||||
<template slot="footer">
|
||||
<div style="float: left">
|
||||
@ -22,7 +46,7 @@
|
||||
<a-row>
|
||||
<a-col :sm="24" :md="24-5">
|
||||
|
||||
<a-empty v-if="queryParamsModel.length === 0">
|
||||
<a-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;">
|
||||
<div slot="description">
|
||||
<span>没有任何查询条件</span>
|
||||
<a-divider type="vertical"/>
|
||||
@ -32,45 +56,104 @@
|
||||
|
||||
<a-form v-else layout="inline">
|
||||
|
||||
<a-form-item label="过滤条件匹配" style="margin-bottom: 12px;">
|
||||
<a-select v-model="selectValue">
|
||||
<a-select-option value="and">AND(所有条件都要求匹配)</a-select-option>
|
||||
<a-select-option value="or">OR(条件中的任意一个匹配)</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-row style="margin-bottom: 12px;">
|
||||
<a-col :md="12" :xs="24">
|
||||
<a-form-item label="过滤条件匹配" :labelCol="{md: 6,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
|
||||
<a-select v-model="matchType" :getPopupContainer="node=>node.parentNode" style="width: 100%;">
|
||||
<a-select-option value="and">AND(所有条件都要求匹配)</a-select-option>
|
||||
<a-select-option value="or">OR(条件中的任意一个匹配)</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
|
||||
|
||||
<a-col :span="8">
|
||||
<a-select placeholder="选择查询字段" v-model="item.field" @select="(val,option)=>handleSelected(option,item)">
|
||||
<a-select-option v-for="(f,fIndex) in fieldList" :key=" 'field'+fIndex" :value="f.value" :data-idx="fIndex">{{ f.text }}</a-select-option>
|
||||
</a-select>
|
||||
<a-col :md="8" :xs="24" style="margin-bottom: 12px;">
|
||||
<a-tree-select
|
||||
showSearch
|
||||
v-model="item.field"
|
||||
:treeData="fieldTreeData"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
placeholder="选择查询字段"
|
||||
allowClear
|
||||
treeDefaultExpandAll
|
||||
:getPopupContainer="node=>node.parentNode"
|
||||
style="width: 100%"
|
||||
@select="(val,option)=>handleSelected(option,item)"
|
||||
>
|
||||
</a-tree-select>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="4">
|
||||
<a-select placeholder="匹配规则" v-model="item.rule">
|
||||
<a-col :md="4" :xs="24" style="margin-bottom: 12px;">
|
||||
<a-select placeholder="匹配规则" :value="item.rule" :getPopupContainer="node=>node.parentNode" @change="handleRuleChange(item,$event)">
|
||||
<a-select-option value="eq">等于</a-select-option>
|
||||
<a-select-option value="like">包含</a-select-option>
|
||||
<a-select-option value="right_like">以..开始</a-select-option>
|
||||
<a-select-option value="left_like">以..结尾</a-select-option>
|
||||
<a-select-option value="in">在...中</a-select-option>
|
||||
<a-select-option value="ne">不等于</a-select-option>
|
||||
<a-select-option value="gt">大于</a-select-option>
|
||||
<a-select-option value="ge">大于等于</a-select-option>
|
||||
<a-select-option value="lt">小于</a-select-option>
|
||||
<a-select-option value="le">小于等于</a-select-option>
|
||||
<a-select-option value="right_like">以..开始</a-select-option>
|
||||
<a-select-option value="left_like">以..结尾</a-select-option>
|
||||
<a-select-option value="like">包含</a-select-option>
|
||||
<a-select-option value="in">在...中</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="8">
|
||||
<j-dict-select-tag v-if="item.dictCode" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
|
||||
<a-col :md="8" :xs="24" style="margin-bottom: 12px;">
|
||||
<template v-if="item.dictCode">
|
||||
<template v-if="item.type === 'table-dict'">
|
||||
<j-popup
|
||||
v-model="item.val"
|
||||
:code="item.dictTable"
|
||||
:field="item.dictCode"
|
||||
:orgFields="item.dictCode"
|
||||
:destFields="item.dictCode"
|
||||
></j-popup>
|
||||
</template>
|
||||
<template v-else>
|
||||
<j-multi-select-tag v-show="allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
|
||||
<j-dict-select-tag v-show="!allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
|
||||
</template>
|
||||
</template>
|
||||
<j-popup v-else-if="item.type === 'popup'" :value="item.val" v-bind="item.popup" group-id="superQuery" @input="(e,v)=>handleChangeJPopup(item,e,v)"/>
|
||||
<j-select-multi-user
|
||||
v-else-if="item.type === 'select-user' || item.type === 'sel_user'"
|
||||
v-model="item.val"
|
||||
:buttons="false"
|
||||
:multiple="false"
|
||||
placeholder="请选择用户"
|
||||
:returnKeys="['id', item.customReturnField || 'username']"
|
||||
/>
|
||||
<j-select-depart
|
||||
v-else-if="item.type === 'select-depart' || item.type === 'sel_depart'"
|
||||
v-model="item.val"
|
||||
:multi="false"
|
||||
placeholder="请选择部门"
|
||||
:customReturnField="item.customReturnField || 'id'"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="item.options instanceof Array"
|
||||
v-model="item.val"
|
||||
:options="item.options"
|
||||
allowClear
|
||||
placeholder="请选择"
|
||||
:mode="allowMultiple(item)?'multiple':''"
|
||||
/>
|
||||
<j-area-linkage v-model="item.val" v-else-if="item.type==='area-linkage' || item.type==='pca'" style="width: 100%"/>
|
||||
<j-date v-else-if=" item.type=='date' " v-model="item.val" placeholder="请选择日期" style="width: 100%"></j-date>
|
||||
<j-date v-else-if=" item.type=='datetime' " v-model="item.val" placeholder="请选择时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"></j-date>
|
||||
<a-time-picker v-else-if="item.type==='time'" :value="item.val ? moment(item.val,'HH:mm:ss') : null" format="HH:mm:ss" style="width: 100%" @change="(time,value)=>item.val=value"/>
|
||||
<a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/>
|
||||
<a-input v-else v-model="item.val" placeholder="请输入值"/>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="4">
|
||||
<a-col :md="4" :xs="0" style="margin-bottom: 12px;">
|
||||
<a-button @click="handleAdd" icon="plus"></a-button>
|
||||
<a-button @click="handleDel( index )" icon="minus"></a-button>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="0" :xs="24" style="margin-bottom: 12px;text-align: right;">
|
||||
<a-button @click="handleAdd" icon="plus"></a-button>
|
||||
<a-button @click="handleDel( index )" icon="minus"></a-button>
|
||||
</a-col>
|
||||
@ -86,12 +169,15 @@
|
||||
<div slot="title">
|
||||
保存的查询
|
||||
</div>
|
||||
|
||||
<a-empty v-if="saveTreeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/>
|
||||
<a-tree
|
||||
v-else
|
||||
class="j-super-query-history-tree"
|
||||
showIcon
|
||||
:treeData="treeData"
|
||||
:treeData="saveTreeData"
|
||||
:selectedKeys="[]"
|
||||
@select="handleTreeSelect"
|
||||
@rightClick="handleTreeRightClick"
|
||||
>
|
||||
</a-tree>
|
||||
</a-card>
|
||||
@ -107,16 +193,24 @@
|
||||
<a-input v-model="prompt.value"></a-input>
|
||||
</a-modal>
|
||||
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import * as utils from '@/utils/util'
|
||||
import { mixinDevice } from '@/utils/mixin'
|
||||
import JDate from '@/components/jeecg/JDate.vue'
|
||||
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
|
||||
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
|
||||
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
|
||||
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
|
||||
|
||||
export default {
|
||||
name: 'JSuperQuery',
|
||||
components: { JDate },
|
||||
mixins: [mixinDevice],
|
||||
components: { JAreaLinkage, JMultiSelectTag, JDate, JSelectDepart, JSelectMultiUser },
|
||||
props: {
|
||||
/*
|
||||
fieldList: [{
|
||||
@ -147,14 +241,17 @@
|
||||
},
|
||||
|
||||
// 保存查询条件的唯一 code,通过该 code 区分
|
||||
// 默认为 null,代表以当前路由全路径为区分Code
|
||||
saveCode: {
|
||||
type: String,
|
||||
default: 'testSaveCode'
|
||||
default: null
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moment,
|
||||
fieldTreeData: [],
|
||||
|
||||
prompt: {
|
||||
visible: false,
|
||||
@ -162,50 +259,107 @@
|
||||
},
|
||||
|
||||
visible: false,
|
||||
queryParamsModel: [{}],
|
||||
queryParamsModel: [],
|
||||
treeIcon: <a-icon type="file-text"/>,
|
||||
treeData: [],
|
||||
// 保存查询条件的treeData
|
||||
saveTreeData: [],
|
||||
// 保存查询条件的前缀名
|
||||
saveCodeBefore: 'JSuperQuerySaved_',
|
||||
selectValue: 'and',
|
||||
// 查询类型,过滤条件匹配(and、or)
|
||||
matchType: 'and',
|
||||
superQueryFlag: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
izMobile() {
|
||||
return this.device === 'mobile'
|
||||
},
|
||||
tooltipProps() {
|
||||
return this.izMobile ? { visible: false } : {}
|
||||
},
|
||||
fullSaveCode() {
|
||||
let saveCode = this.saveCode
|
||||
if (saveCode == null || saveCode === '') {
|
||||
saveCode = this.$route.fullPath
|
||||
}
|
||||
return this.saveCodeBefore + saveCode
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 当 saveCode 变化时,重新查询已保存的条件
|
||||
saveCode: {
|
||||
fullSaveCode: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
let list = this.$ls.get(this.fullSaveCode)
|
||||
if (list instanceof Array) {
|
||||
this.saveTreeData = list.map(i => this.renderSaveTreeData(i))
|
||||
}
|
||||
}
|
||||
},
|
||||
fieldList: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
let list = this.$ls.get(this.saveCodeBefore + val)
|
||||
if (list instanceof Array) {
|
||||
this.treeData = list.map(item => {
|
||||
item.icon = this.treeIcon
|
||||
return item
|
||||
})
|
||||
}
|
||||
console.log({ list })
|
||||
let mainData = [], subData = []
|
||||
val.forEach(item => {
|
||||
let data = { ...item }
|
||||
data.label = data.label || data.text
|
||||
let hasChildren = (data.children instanceof Array)
|
||||
data.disabled = hasChildren
|
||||
data.selectable = !hasChildren
|
||||
if (hasChildren) {
|
||||
data.children = data.children.map(item2 => {
|
||||
let child = { ...item2 }
|
||||
child.label = child.label || child.text
|
||||
child.label = data.label + '-' + child.label
|
||||
child.value = data.value + ',' + child.value
|
||||
child.val = ''
|
||||
return child
|
||||
})
|
||||
data.val = ''
|
||||
subData.push(data)
|
||||
} else {
|
||||
mainData.push(data)
|
||||
}
|
||||
})
|
||||
this.fieldTreeData = mainData.concat(subData)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
show() {
|
||||
if (!this.queryParamsModel || this.queryParamsModel.length == 0) {
|
||||
this.queryParamsModel = [{}]
|
||||
if (!this.queryParamsModel || this.queryParamsModel.length === 0) {
|
||||
this.resetLine()
|
||||
}
|
||||
this.visible = true
|
||||
},
|
||||
handleOk() {
|
||||
console.log('---高级查询参数--->', this.queryParamsModel)
|
||||
if (!this.isNullArray(this.queryParamsModel)) {
|
||||
let event = {
|
||||
matchType: this.selectValue,
|
||||
params: this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
|
||||
matchType: this.matchType,
|
||||
params: this.removeEmptyObject(this.queryParamsModel)
|
||||
}
|
||||
this.$emit(this.callback, event.params, event.matchType)
|
||||
// 移动端模式下关闭弹窗
|
||||
if (this.izMobile) {
|
||||
this.visible = false
|
||||
}
|
||||
this.emitCallback(event)
|
||||
} else {
|
||||
this.$emit(this.callback)
|
||||
this.$message.warn("不能查询空条件")
|
||||
}
|
||||
},
|
||||
emitCallback(event = {}) {
|
||||
let { params = [], matchType = this.matchType } = event
|
||||
this.superQueryFlag = (params && params.length > 0)
|
||||
for (let param of params) {
|
||||
if (Array.isArray(param.val)) {
|
||||
param.val = param.val.join(',')
|
||||
}
|
||||
}
|
||||
console.debug('---高级查询参数--->', { params, matchType })
|
||||
this.$emit(this.callback, params, matchType)
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
@ -214,24 +368,40 @@
|
||||
this.visible = false
|
||||
},
|
||||
handleAdd() {
|
||||
this.queryParamsModel.push({})
|
||||
this.addNewLine()
|
||||
},
|
||||
addNewLine() {
|
||||
this.queryParamsModel.push({ rule: 'eq' })
|
||||
},
|
||||
resetLine() {
|
||||
this.superQueryFlag = false
|
||||
this.queryParamsModel = []
|
||||
this.addNewLine()
|
||||
},
|
||||
handleDel(index) {
|
||||
this.queryParamsModel.splice(index, 1)
|
||||
},
|
||||
handleSelected(option, item) {
|
||||
let index = option.data.attrs['data-idx']
|
||||
|
||||
let { type, dictCode } = this.fieldList[index]
|
||||
handleSelected(node, item) {
|
||||
let { type, options, dictCode, dictTable, customReturnField, popup } = node.dataRef
|
||||
item['type'] = type
|
||||
item['options'] = options
|
||||
item['dictCode'] = dictCode
|
||||
item['dictTable'] = dictTable
|
||||
item['customReturnField'] = customReturnField
|
||||
if (popup) {
|
||||
item['popup'] = popup
|
||||
}
|
||||
this.$set(item, 'val', undefined)
|
||||
},
|
||||
handleOpen() {
|
||||
this.show()
|
||||
},
|
||||
handleReset() {
|
||||
this.queryParamsModel = [{}]
|
||||
this.$emit(this.callback)
|
||||
this.resetLine()
|
||||
this.emitCallback()
|
||||
},
|
||||
handleSave() {
|
||||
let queryParams = this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
|
||||
let queryParams = this.removeEmptyObject(this.queryParamsModel)
|
||||
if (this.isNullArray(queryParams)) {
|
||||
this.$message.warning('空条件不能保存')
|
||||
} else {
|
||||
@ -240,56 +410,65 @@
|
||||
}
|
||||
},
|
||||
handlePromptOk() {
|
||||
|
||||
let { value } = this.prompt
|
||||
// 判断有没有重名
|
||||
|
||||
let filterList = this.treeData.filter(i => i.title === value)
|
||||
if(!value){
|
||||
this.$message.warning('保存名称不能为空')
|
||||
return
|
||||
}
|
||||
// 取出查询条件
|
||||
let records = this.removeEmptyObject(this.queryParamsModel)
|
||||
// 判断有没有重名的
|
||||
let filterList = this.saveTreeData.filter(i => i.originTitle === value)
|
||||
if (filterList.length > 0) {
|
||||
this.$confirm({
|
||||
content: `${value} 已存在,是否覆盖?`,
|
||||
onOk: () => {
|
||||
this.prompt.visible = false
|
||||
filterList[0].records = this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
|
||||
filterList[0].records = records
|
||||
this.saveToLocalStore()
|
||||
this.$message.success('保存成功')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 没有重名的,直接添加
|
||||
this.prompt.visible = false
|
||||
this.treeData.push({
|
||||
// 添加到树列表中
|
||||
this.saveTreeData.push(this.renderSaveTreeData({
|
||||
title: value,
|
||||
icon: this.treeIcon,
|
||||
records: this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
|
||||
})
|
||||
matchType: this.matchType,
|
||||
records: records
|
||||
}))
|
||||
// 保存到 LocalStore
|
||||
this.saveToLocalStore()
|
||||
this.$message.success('保存成功')
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
handleTreeSelect(idx, event) {
|
||||
if (event.selectedNodes[0]) {
|
||||
this.queryParamsModel = utils.cloneObject(event.selectedNodes[0].data.props.records)
|
||||
let { matchType, records } = event.selectedNodes[0].data.props
|
||||
// 将保存的matchType取出,兼容旧数据,如果没有保存就还是使用原来的
|
||||
this.matchType = matchType || this.matchType
|
||||
this.queryParamsModel = utils.cloneObject(records)
|
||||
}
|
||||
},
|
||||
handleTreeRightClick(args) {
|
||||
handleRemoveSaveTreeItem(event, vNode) {
|
||||
// 阻止事件冒泡
|
||||
event.stopPropagation()
|
||||
|
||||
this.$confirm({
|
||||
content: '是否删除当前查询?',
|
||||
onOk: () => {
|
||||
let { node: { eventKey } } = args
|
||||
this.treeData.splice(Number.parseInt(eventKey.substring(2)), 1)
|
||||
let { eventKey } = vNode
|
||||
this.saveTreeData.splice(Number.parseInt(eventKey.substring(2)), 1)
|
||||
this.saveToLocalStore()
|
||||
this.$message.success('删除成功')
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 将查询保存到 LocalStore 里
|
||||
saveToLocalStore() {
|
||||
this.$ls.set(this.saveCodeBefore + this.saveCode, this.treeData.map(item => {
|
||||
return { title: item.title, records: item.records }
|
||||
}))
|
||||
let saveValue = this.saveTreeData.map(({ originTitle, matchType, records }) => ({ title: originTitle, matchType, records }))
|
||||
this.$ls.set(this.fullSaveCode, saveValue)
|
||||
},
|
||||
|
||||
isNullArray(array) {
|
||||
@ -299,51 +478,159 @@
|
||||
}
|
||||
if (array.length === 1) {
|
||||
let obj = array[0]
|
||||
if (!obj.field || !obj.val || !obj.rule) {
|
||||
if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
// 去掉数组中的空对象
|
||||
removeEmptyObject(array) {
|
||||
removeEmptyObject(arr) {
|
||||
let array = utils.cloneObject(arr)
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let item = array[i]
|
||||
if (item == null || Object.keys(item).length <= 0) {
|
||||
array.splice(i--, 1)
|
||||
} else {
|
||||
if (Array.isArray(item.options)) {
|
||||
// 如果有字典属性,就不需要保存 options 了
|
||||
if (item.dictCode) {
|
||||
// 去掉特殊属性
|
||||
delete item.options
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return array
|
||||
}
|
||||
},
|
||||
|
||||
/** 渲染保存查询条件的 title(加个删除按钮) */
|
||||
renderSaveTreeData(item) {
|
||||
item.icon = this.treeIcon
|
||||
item.originTitle = item['title']
|
||||
item.title = (fn, vNode) => {
|
||||
let { originTitle } = vNode.dataRef
|
||||
return (
|
||||
<div class="j-history-tree-title">
|
||||
<span>{originTitle}</span>
|
||||
|
||||
<div class="j-history-tree-title-closer" onClick={e => this.handleRemoveSaveTreeItem(e, vNode)}>
|
||||
<a-icon type="close-circle"/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return item
|
||||
},
|
||||
|
||||
/** 判断是否允许多选 */
|
||||
allowMultiple(item) {
|
||||
return item.rule === 'in'
|
||||
},
|
||||
|
||||
handleRuleChange(item, newValue) {
|
||||
let oldValue = item.rule
|
||||
this.$set(item, 'rule', newValue)
|
||||
// 上一个规则是否是 in,且type是字典或下拉
|
||||
if (oldValue === 'in') {
|
||||
if (item.dictCode || item.options instanceof Array) {
|
||||
let value = item.val
|
||||
if (typeof item.val === 'string') {
|
||||
value = item.val.split(',')[0]
|
||||
} else if (Array.isArray(item.val)) {
|
||||
value = item.val[0]
|
||||
}
|
||||
this.$set(item, 'val', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleChangeJPopup(item, e, values) {
|
||||
item.val = values[item.popup['destFields']]
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.j-super-query-box {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.j-super-query-modal {
|
||||
|
||||
/deep/ {
|
||||
}
|
||||
|
||||
.j-super-query-history-card /deep/ {
|
||||
.ant-card-body,
|
||||
.ant-card-head-title {
|
||||
.j-super-query-history-card {
|
||||
/deep/ .ant-card-body,
|
||||
/deep/ .ant-card-head-title {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
/deep/ .ant-card-head {
|
||||
padding: 4px 8px;
|
||||
min-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.j-super-query-history-tree /deep/ {
|
||||
.ant-tree-switcher {
|
||||
.j-super-query-history-empty {
|
||||
/deep/ .ant-empty-image {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 80px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
/deep/ .ant-empty-description {
|
||||
color: #afafaf;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.j-super-query-history-tree {
|
||||
|
||||
.j-history-tree-title {
|
||||
width: calc(100% - 24px);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&-closer {
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.j-history-tree-title-closer {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/deep/ .ant-tree-switcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
/deep/ .ant-tree-node-content-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
57
ant-design-vue-jeecg/src/components/jeecg/JSwitch.vue
Normal file
57
ant-design-vue-jeecg/src/components/jeecg/JSwitch.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<a-switch v-model="checkStatus" :disabled="disabled" @change="handleChange"/>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'JSwitch',
|
||||
props: {
|
||||
value:{
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
disabled:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
options:{
|
||||
type:Array,
|
||||
required:false,
|
||||
default:()=>['Y','N']
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checkStatus: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value:{
|
||||
immediate: true,
|
||||
handler(val){
|
||||
if(!val){
|
||||
this.checkStatus = false
|
||||
this.$emit('change', this.options[1]);
|
||||
}else{
|
||||
if(this.options[0]==val){
|
||||
this.checkStatus = true
|
||||
}else{
|
||||
this.checkStatus = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(checked){
|
||||
let flag = checked===false?this.options[1]:this.options[0];
|
||||
this.$emit('change', flag);
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -22,7 +22,7 @@
|
||||
data(){
|
||||
return {
|
||||
treeData:[],
|
||||
treeValue:"",
|
||||
treeValue: null,
|
||||
url_root:"/sys/category/loadTreeRoot",
|
||||
url_children:"/sys/category/loadTreeChildren",
|
||||
url_view:'/sys/category/loadOne',
|
||||
@ -97,7 +97,7 @@
|
||||
methods:{
|
||||
loadViewInfo(){
|
||||
if(!this.value || this.value=="0"){
|
||||
this.treeValue = ""
|
||||
this.treeValue = null
|
||||
}else{
|
||||
let param = {
|
||||
field:this.field,
|
||||
@ -180,7 +180,11 @@
|
||||
},
|
||||
onChange(value){
|
||||
console.log(value)
|
||||
this.$emit('change', value.value);
|
||||
if(!value){
|
||||
this.$emit('change', '');
|
||||
}else{
|
||||
this.$emit('change', value.value);
|
||||
}
|
||||
this.treeValue = value
|
||||
},
|
||||
onSearch(value){
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<a-tree-select
|
||||
allowClear
|
||||
labelInValue
|
||||
:getPopupContainer="(node) => node.parentNode"
|
||||
style="width: 100%"
|
||||
:disabled="disabled"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
@ -77,7 +78,7 @@
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
treeValue:"",
|
||||
treeValue: null,
|
||||
treeData:[],
|
||||
url:"/sys/dict/loadTreeData",
|
||||
view:'/sys/dict/loadDictItem/',
|
||||
@ -106,7 +107,7 @@
|
||||
methods: {
|
||||
loadItemByCode(){
|
||||
if(!this.value || this.value=="0"){
|
||||
this.treeValue = ""
|
||||
this.treeValue = null
|
||||
}else{
|
||||
getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{
|
||||
if(res.success){
|
||||
@ -211,7 +212,7 @@
|
||||
onChange(value){
|
||||
if(!value){
|
||||
this.$emit('change', '');
|
||||
this.treeValue = ''
|
||||
this.treeValue = null
|
||||
} else if (value instanceof Array) {
|
||||
this.$emit('change', value.map(item => item.value).join(','))
|
||||
this.treeValue = value
|
||||
|
||||
@ -1,24 +1,50 @@
|
||||
<template>
|
||||
<a-upload
|
||||
name="file"
|
||||
:multiple="true"
|
||||
:action="uploadAction"
|
||||
:headers="headers"
|
||||
:data="{'isup':1,'bizPath':bizPath}"
|
||||
:fileList="fileList"
|
||||
:beforeUpload="beforeUpload"
|
||||
@change="handleChange"
|
||||
:disabled="disabled">
|
||||
<a-button>
|
||||
<a-icon type="upload" />{{ text }}
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<div :id="containerId" style="position: relative">
|
||||
|
||||
<!-- ---------------------------- begin 图片左右换位置 ------------------------------------- -->
|
||||
<div class="movety-container" :style="{top:top+'px',left:left+'px',display:moveDisplay}" style="padding:0 8px;position: absolute;z-index: 91;height: 32px;width: 104px;text-align: center;">
|
||||
<div :id="containerId+'-mover'" :class="showMoverTask?'uploadty-mover-mask':'movety-opt'" style="margin-top: 12px">
|
||||
<a @click="moveLast" style="margin: 0 5px;"><a-icon type="arrow-left" style="color: #fff;font-size: 16px"/></a>
|
||||
<a @click="moveNext" style="margin: 0 5px;"><a-icon type="arrow-right" style="color: #fff;font-size: 16px"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ---------------------------- end 图片左右换位置 ------------------------------------- -->
|
||||
|
||||
<a-upload
|
||||
name="file"
|
||||
:multiple="true"
|
||||
:action="uploadAction"
|
||||
:headers="headers"
|
||||
:data="{'biz':bizPath}"
|
||||
:fileList="fileList"
|
||||
:beforeUpload="beforeUpload"
|
||||
@change="handleChange"
|
||||
:disabled="disabled"
|
||||
:returnUrl="returnUrl"
|
||||
:listType="complistType"
|
||||
@preview="handlePreview"
|
||||
:class="{'uploadty-disabled':disabled}">
|
||||
<template>
|
||||
<div v-if="isImageComp">
|
||||
<a-icon type="plus" />
|
||||
<div class="ant-upload-text">{{ text }}</div>
|
||||
</div>
|
||||
<a-button v-else-if="buttonVisible">
|
||||
<a-icon type="upload" />{{ text }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
import { getFileAccessHttpUrl } from '@/api/manage';
|
||||
|
||||
const FILE_TYPE_ALL = "all"
|
||||
const FILE_TYPE_IMG = "image"
|
||||
@ -38,9 +64,21 @@
|
||||
data(){
|
||||
return {
|
||||
uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
|
||||
urlDownload:window._CONFIG['domianURL'] + "/sys/common/download/",
|
||||
headers:{},
|
||||
fileList: []
|
||||
fileList: [],
|
||||
newFileList: [],
|
||||
uploadGoOn:true,
|
||||
previewVisible: false,
|
||||
//---------------------------- begin 图片左右换位置 -------------------------------------
|
||||
previewImage: '',
|
||||
containerId:'',
|
||||
top:'',
|
||||
left:'',
|
||||
moveDisplay:'none',
|
||||
showMoverTask:false,
|
||||
moverHold:false,
|
||||
currentImg:''
|
||||
//---------------------------- end 图片左右换位置 -------------------------------------
|
||||
}
|
||||
},
|
||||
props:{
|
||||
@ -61,7 +99,7 @@
|
||||
default:"temp"
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
type:[String,Array],
|
||||
required:false
|
||||
},
|
||||
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
|
||||
@ -77,18 +115,82 @@
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url,
|
||||
* true:仅返回url
|
||||
* false:返回fileName filePath fileSize
|
||||
*/
|
||||
returnUrl:{
|
||||
type:Boolean,
|
||||
required:false,
|
||||
default: true
|
||||
},
|
||||
number:{
|
||||
type:Number,
|
||||
required:false,
|
||||
default: 0
|
||||
},
|
||||
buttonVisible:{
|
||||
type:Boolean,
|
||||
required:false,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.initFileList(val)
|
||||
value:{
|
||||
immediate: true,
|
||||
handler() {
|
||||
let val = this.value
|
||||
if (val instanceof Array) {
|
||||
if(this.returnUrl){
|
||||
this.initFileList(val.join(','))
|
||||
}else{
|
||||
this.initFileListArr(val);
|
||||
}
|
||||
} else {
|
||||
this.initFileList(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
isImageComp(){
|
||||
return this.fileType === FILE_TYPE_IMG
|
||||
},
|
||||
complistType(){
|
||||
return this.fileType === FILE_TYPE_IMG?'picture-card':'text'
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
//---------------------------- begin 图片左右换位置 -------------------------------------
|
||||
this.headers = {"X-Access-Token":token};
|
||||
this.containerId = 'container-ty-'+new Date().getTime();
|
||||
//---------------------------- end 图片左右换位置 -------------------------------------
|
||||
},
|
||||
|
||||
methods:{
|
||||
initFileListArr(val){
|
||||
if(!val || val.length==0){
|
||||
this.fileList = [];
|
||||
return;
|
||||
}
|
||||
let fileList = [];
|
||||
for(var a=0;a<val.length;a++){
|
||||
let url = getFileAccessHttpUrl(val[a].filePath);
|
||||
fileList.push({
|
||||
uid:uidGenerator(),
|
||||
name:val[a].fileName,
|
||||
status: 'done',
|
||||
url: url,
|
||||
response:{
|
||||
status:"history",
|
||||
message:val[a].filePath
|
||||
}
|
||||
})
|
||||
}
|
||||
this.fileList = fileList
|
||||
},
|
||||
initFileList(paths){
|
||||
if(!paths || paths.length==0){
|
||||
//return [];
|
||||
@ -100,11 +202,12 @@
|
||||
let fileList = [];
|
||||
let arr = paths.split(",")
|
||||
for(var a=0;a<arr.length;a++){
|
||||
let url = getFileAccessHttpUrl(arr[a]);
|
||||
fileList.push({
|
||||
uid:uidGenerator(),
|
||||
name:getFileName(arr[a]),
|
||||
status: 'done',
|
||||
url: this.urlDownload+arr[a],
|
||||
url: url,
|
||||
response:{
|
||||
status:"history",
|
||||
message:arr[a]
|
||||
@ -130,15 +233,12 @@
|
||||
this.$emit('change', path);
|
||||
},
|
||||
beforeUpload(file){
|
||||
this.uploadGoOn=true
|
||||
var fileType = file.type;
|
||||
if(fileType===FILE_TYPE_IMG){
|
||||
if(this.fileType===FILE_TYPE_IMG){
|
||||
if(fileType.indexOf('image')<0){
|
||||
this.$message.warning('请上传图片');
|
||||
return false;
|
||||
}
|
||||
}else if(fileType===FILE_TYPE_TXT){
|
||||
if(fileType.indexOf('image')>=0){
|
||||
this.$message.warning('请上传文件');
|
||||
this.uploadGoOn=false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -147,17 +247,24 @@
|
||||
},
|
||||
handleChange(info) {
|
||||
console.log("--文件列表改变--")
|
||||
if(!info.file.status && this.uploadGoOn === false){
|
||||
info.fileList.pop();
|
||||
}
|
||||
let fileList = info.fileList
|
||||
if(info.file.status==='done'){
|
||||
if(this.number>0){
|
||||
fileList = fileList.slice(-this.number);
|
||||
}
|
||||
if(info.file.response.success){
|
||||
fileList = fileList.map((file) => {
|
||||
if (file.response) {
|
||||
file.url = this.urlDownload+file.response.message;
|
||||
let reUrl = file.response.message;
|
||||
file.url = getFileAccessHttpUrl(reUrl);
|
||||
}
|
||||
return file;
|
||||
});
|
||||
}
|
||||
this.$message.success(`${info.file.name} 上传成功!`);
|
||||
//this.$message.success(`${info.file.name} 上传成功!`);
|
||||
}else if (info.file.status === 'error') {
|
||||
this.$message.error(`${info.file.name} 上传失败.`);
|
||||
}else if(info.file.status === 'removed'){
|
||||
@ -165,13 +272,137 @@
|
||||
}
|
||||
this.fileList = fileList
|
||||
if(info.file.status==='done' || info.file.status === 'removed'){
|
||||
this.handlePathChange()
|
||||
//returnUrl为true时仅返回文件路径
|
||||
if(this.returnUrl){
|
||||
this.handlePathChange()
|
||||
}else{
|
||||
//returnUrl为false时返回文件名称、文件路径及文件大小
|
||||
this.newFileList = [];
|
||||
for(var a=0;a<fileList.length;a++){
|
||||
var fileJson = {
|
||||
fileName:fileList[a].name,
|
||||
filePath:fileList[a].response.message,
|
||||
fileSize:fileList[a].size
|
||||
};
|
||||
this.newFileList.push(fileJson);
|
||||
}
|
||||
this.$emit('change', this.newFileList);
|
||||
}
|
||||
}
|
||||
},
|
||||
handleDelete(file){
|
||||
//如有需要新增 删除逻辑
|
||||
console.log(file)
|
||||
},
|
||||
handlePreview(file){
|
||||
if(this.fileType === FILE_TYPE_IMG){
|
||||
this.previewImage = file.url || file.thumbUrl;
|
||||
this.previewVisible = true;
|
||||
}else{
|
||||
location.href=file.url
|
||||
}
|
||||
},
|
||||
handleCancel(){
|
||||
this.previewVisible = false;
|
||||
},
|
||||
//---------------------------- begin 图片左右换位置 -------------------------------------
|
||||
moveLast(){
|
||||
//console.log(ev)
|
||||
//console.log(this.fileList)
|
||||
//console.log(this.currentImg)
|
||||
let index = this.getIndexByUrl();
|
||||
if(index==0){
|
||||
this.$message.warn('未知的操作')
|
||||
}else{
|
||||
let curr = this.fileList[index].url;
|
||||
let last = this.fileList[index-1].url;
|
||||
let arr =[]
|
||||
for(let i=0;i<this.fileList.length;i++){
|
||||
if(i==index-1){
|
||||
arr.push(curr)
|
||||
}else if(i==index){
|
||||
arr.push(last)
|
||||
}else{
|
||||
arr.push(this.fileList[i].url)
|
||||
}
|
||||
}
|
||||
this.currentImg = last
|
||||
this.$emit('change',arr.join(','))
|
||||
}
|
||||
},
|
||||
moveNext(){
|
||||
let index = this.getIndexByUrl();
|
||||
if(index==this.fileList.length-1){
|
||||
this.$message.warn('已到最后~')
|
||||
}else{
|
||||
let curr = this.fileList[index].url;
|
||||
let next = this.fileList[index+1].url;
|
||||
let arr =[]
|
||||
for(let i=0;i<this.fileList.length;i++){
|
||||
if(i==index+1){
|
||||
arr.push(curr)
|
||||
}else if(i==index){
|
||||
arr.push(next)
|
||||
}else{
|
||||
arr.push(this.fileList[i].url)
|
||||
}
|
||||
}
|
||||
this.currentImg = next
|
||||
this.$emit('change',arr.join(','))
|
||||
}
|
||||
},
|
||||
getIndexByUrl(){
|
||||
for(let i=0;i<this.fileList.length;i++){
|
||||
if(this.fileList[i].url === this.currentImg || encodeURI(this.fileList[i].url) === this.currentImg){
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
const moverObj = document.getElementById(this.containerId+'-mover');
|
||||
moverObj.addEventListener('mouseover',()=>{
|
||||
this.moverHold = true
|
||||
this.moveDisplay = 'block';
|
||||
});
|
||||
moverObj.addEventListener('mouseout',()=>{
|
||||
this.moverHold = false
|
||||
this.moveDisplay = 'none';
|
||||
});
|
||||
let picList = document.getElementById(this.containerId)?document.getElementById(this.containerId).getElementsByClassName('ant-upload-list-picture-card'):[];
|
||||
if(picList && picList.length>0){
|
||||
picList[0].addEventListener('mouseover',(ev)=>{
|
||||
ev = ev || window.event;
|
||||
let target = ev.target || ev.srcElement;
|
||||
if('ant-upload-list-item-info' == target.className){
|
||||
this.showMoverTask=false
|
||||
let item = target.parentElement
|
||||
this.left = item.offsetLeft
|
||||
this.top=item.offsetTop+item.offsetHeight-50;
|
||||
this.moveDisplay = 'block';
|
||||
this.currentImg = target.getElementsByTagName('img')[0].src
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
picList[0].addEventListener('mouseout',(ev)=>{
|
||||
ev = ev || window.event;
|
||||
let target = ev.target || ev.srcElement;
|
||||
//console.log('移除',target)
|
||||
if('ant-upload-list-item-info' == target.className){
|
||||
this.showMoverTask=true
|
||||
setTimeout(()=>{
|
||||
if(this.moverHold === false)
|
||||
this.moveDisplay = 'none';
|
||||
},100)
|
||||
}
|
||||
if('ant-upload-list-item ant-upload-list-item-done' == target.className || 'ant-upload-list ant-upload-list-picture-card'== target.className){
|
||||
this.moveDisplay = 'none';
|
||||
}
|
||||
})
|
||||
//---------------------------- end 图片左右换位置 -------------------------------------
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
@ -180,6 +411,24 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="less">
|
||||
.uploadty-disabled{
|
||||
.ant-upload-list-item {
|
||||
.anticon-close{
|
||||
display: none;
|
||||
}
|
||||
.anticon-delete{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
//---------------------------- begin 图片左右换位置 -------------------------------------
|
||||
.uploadty-mover-mask{
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
opacity: .8;
|
||||
color: #fff;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
//---------------------------- end 图片左右换位置 -------------------------------------
|
||||
</style>
|
||||
@ -1,5 +1,9 @@
|
||||
import T from './JFormContainer.vue'
|
||||
let install = function (Vue) {
|
||||
Vue.component('JFormContainer',T);
|
||||
}
|
||||
export default { install };
|
||||
import JModal from './JModal'
|
||||
import JFormContainer from './JFormContainer.vue'
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.component('JFormContainer', JFormContainer)
|
||||
Vue.component(JModal.name, JModal)
|
||||
}
|
||||
}
|
||||
113
ant-design-vue-jeecg/src/components/jeecg/minipop/JFilePop.vue
Normal file
113
ant-design-vue-jeecg/src/components/jeecg/minipop/JFilePop.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
title="文件上传"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
@ok="ok"
|
||||
cancelText="取消"
|
||||
@cancel="close">
|
||||
<!--style="top: 20px;"-->
|
||||
<j-upload :file-type="fileType" :value="filePath" @change="handleChange" :disabled="disabled"></j-upload>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JUpload from '@/components/jeecg/JUpload'
|
||||
import { getFileAccessHttpUrl } from '@/api/manage';
|
||||
|
||||
const getFileName=(path)=>{
|
||||
if(path.lastIndexOf("\\")>=0){
|
||||
let reg=new RegExp("\\\\","g");
|
||||
path = path.replace(reg,"/");
|
||||
}
|
||||
return path.substring(path.lastIndexOf("/")+1);
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'JFilePop',
|
||||
components: { JUpload },
|
||||
props:{
|
||||
title:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
},
|
||||
position:{
|
||||
type:String,
|
||||
default:'right',
|
||||
required:false
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:200,
|
||||
required:false
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
default:520,
|
||||
required:false
|
||||
},
|
||||
|
||||
popContainer:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
},
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
filePath:'',
|
||||
id:'',
|
||||
fileType:'file'
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleChange(value){
|
||||
this.filePath = value;
|
||||
},
|
||||
show(id,value,flag){
|
||||
this.id = id;
|
||||
this.filePath = value;
|
||||
this.visible=true
|
||||
if(flag === 'img'){
|
||||
this.fileType = 'image'
|
||||
}else{
|
||||
this.fileType = 'file'
|
||||
}
|
||||
|
||||
},
|
||||
ok(){
|
||||
if(!this.filePath){
|
||||
this.$message.error("未上传任何文件")
|
||||
return false;
|
||||
}
|
||||
let arr = this.filePath.split(",")
|
||||
let obj = {
|
||||
name:getFileName(arr[0]),
|
||||
url:getFileAccessHttpUrl(arr[0]),
|
||||
path:this.filePath,
|
||||
status: 'done',
|
||||
id:this.id
|
||||
}
|
||||
this.$emit('ok',obj)
|
||||
this.visible=false
|
||||
},
|
||||
close(){
|
||||
this.visible=false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<a-popover trigger="contextmenu" v-model="visible" :placement="position">
|
||||
<!--"(node) => node.parentNode.parentNode"-->
|
||||
<div slot="title">
|
||||
<span>{{ title }}</span>
|
||||
<span style="float: right" title="关闭">
|
||||
<a-icon type="close" @click="visible=false"/>
|
||||
</span>
|
||||
</div>
|
||||
<a-input :value="inputContent" @change="handleInputChange">
|
||||
<a-icon slot="suffix" type="fullscreen" @click.stop="pop" />
|
||||
</a-input>
|
||||
<div slot="content">
|
||||
<textarea :value="inputContent" @input="handleInputChange" :style="{ height: height + 'px', width: width + 'px' }"></textarea>
|
||||
</div>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JInputPop',
|
||||
props:{
|
||||
title:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
},
|
||||
position:{
|
||||
type:String,
|
||||
default:'right',
|
||||
required:false
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:200,
|
||||
required:false
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
default:150,
|
||||
required:false
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
required:false
|
||||
},
|
||||
popContainer:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
}
|
||||
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
inputContent:''
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
watch:{
|
||||
value:{
|
||||
immediate:true,
|
||||
handler:function(){
|
||||
if(this.value && this.value.length>0){
|
||||
this.inputContent = this.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
methods:{
|
||||
handleInputChange(event){
|
||||
this.inputContent = event.target.value
|
||||
this.$emit('change',this.inputContent)
|
||||
},
|
||||
pop(){
|
||||
this.visible=true
|
||||
},
|
||||
getPopupContainer(node){
|
||||
if(!this.popContainer){
|
||||
return node.parentNode
|
||||
}else{
|
||||
return document.getElementById(this.popContainer)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -829,7 +829,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="less">
|
||||
.card-container {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
@ -877,7 +877,7 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.container-widthEn{
|
||||
width: 755px;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<a-modal
|
||||
centered
|
||||
:title="name + '选择'"
|
||||
:width="900"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
@ok="handleOk"
|
||||
@cancel="close"
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
<a-col :span="14">
|
||||
<a-form-item :label="(queryParamText||name)">
|
||||
<a-input :placeholder="'请输入' + (queryParamText||name)" v-model="queryParam[valueKey]"></a-input>
|
||||
<a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
@ -34,8 +34,8 @@
|
||||
<a-table
|
||||
size="small"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:rowKey="rowKey"
|
||||
:columns="innerColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@ -49,7 +49,7 @@
|
||||
<a-col :span="8">
|
||||
<a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
|
||||
|
||||
<a-table rowKey="id" size="small" bordered v-bind="selectedTable">
|
||||
<a-table size="small" :rowKey="rowKey" bordered v-bind="selectedTable">
|
||||
<span slot="action" slot-scope="text, record, index">
|
||||
<a @click="handleDeleteSelected(record, index)">删除</a>
|
||||
</span>
|
||||
@ -62,11 +62,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import Ellipsis from '@/components/Ellipsis'
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import { cloneObject, pushIfNotExist } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'JSelectBizComponentModal',
|
||||
mixins: [JeecgListMixin],
|
||||
components: { Ellipsis },
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
@ -84,6 +88,10 @@
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 900
|
||||
},
|
||||
|
||||
name: {
|
||||
type: String,
|
||||
@ -94,60 +102,127 @@
|
||||
required: true,
|
||||
default: ''
|
||||
},
|
||||
// 根据 value 获取显示文本的地址,例如存的是 username,可以通过该地址获取到 realname
|
||||
valueUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
displayKey: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
propColumns: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
// 查询条件Code
|
||||
queryParamCode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// 查询条件文字
|
||||
queryParamText: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
// 过长裁剪长度,设置为 -1 代表不裁剪
|
||||
ellipsisLength: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表头
|
||||
columns: this.propColumns,
|
||||
innerValue: [],
|
||||
// 已选择列表
|
||||
selectedTable: {
|
||||
pagination: false,
|
||||
scroll: { y: 240 },
|
||||
columns: [
|
||||
this.propColumns[0],
|
||||
{
|
||||
...this.columns[0],
|
||||
width: this.columns[0].widthRight || this.columns[0].width,
|
||||
},
|
||||
{ title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
|
||||
],
|
||||
dataSource: [],
|
||||
},
|
||||
url: { list: this.listUrl }
|
||||
renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>),
|
||||
url: { list: this.listUrl },
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['5', '10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
options: [],
|
||||
dataSourceMap: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 表头
|
||||
innerColumns() {
|
||||
let columns = cloneObject(this.columns)
|
||||
columns.forEach(column => {
|
||||
// 给所有的列加上过长裁剪
|
||||
if (this.ellipsisLength !== -1) {
|
||||
column.customRender = (text) => this.renderEllipsis(text)
|
||||
}
|
||||
})
|
||||
return columns
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.innerValue = cloneObject(val)
|
||||
this.selectedRowKeys = []
|
||||
this.valueWatchHandler(val)
|
||||
this.queryOptionsByValue(val)
|
||||
}
|
||||
},
|
||||
dataSource: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
let options = val.map(data => ({ label: data[this.displayKey || this.valueKey], value: data[this.valueKey] }))
|
||||
this.$emit('ok', options)
|
||||
this.valueWatchHandler(this.value)
|
||||
this.emitOptions(val)
|
||||
this.valueWatchHandler(this.innerValue)
|
||||
}
|
||||
},
|
||||
selectionRows: {
|
||||
selectedRowKeys: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.selectedTable.dataSource = val
|
||||
this.selectedTable.dataSource = val.map(key => {
|
||||
for (let data of this.dataSource) {
|
||||
if (data[this.rowKey] === key) {
|
||||
pushIfNotExist(this.innerValue, data[this.valueKey])
|
||||
return data
|
||||
}
|
||||
}
|
||||
for (let data of this.selectedTable.dataSource) {
|
||||
if (data[this.rowKey] === key) {
|
||||
pushIfNotExist(this.innerValue, data[this.valueKey])
|
||||
return data
|
||||
}
|
||||
}
|
||||
console.warn('未找到选择的行信息,key:' + key)
|
||||
return {}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -158,18 +233,63 @@
|
||||
},
|
||||
|
||||
valueWatchHandler(val) {
|
||||
let dataSource = []
|
||||
let selectedRowKeys = []
|
||||
val.forEach(item => {
|
||||
this.dataSource.forEach(data => {
|
||||
this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
|
||||
if (data[this.valueKey] === item) {
|
||||
dataSource.push(data)
|
||||
selectedRowKeys.push(data.id)
|
||||
pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
|
||||
}
|
||||
})
|
||||
})
|
||||
this.selectedTable.dataSource = dataSource
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
},
|
||||
|
||||
queryOptionsByValue(value) {
|
||||
if (!value || value.length === 0) {
|
||||
return
|
||||
}
|
||||
// 判断options是否存在value,如果已存在数据就不再请求后台了
|
||||
let notExist = false
|
||||
for (let val of value) {
|
||||
let find = false
|
||||
for (let option of this.options) {
|
||||
if (val === option.value) {
|
||||
find = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!find) {
|
||||
notExist = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!notExist) return
|
||||
getAction(this.valueUrl || this.listUrl, {
|
||||
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询,防止后台进行了模糊匹配,导致查询结果不准确
|
||||
[this.valueKey]: value.join(',') + ',',
|
||||
pageNo: 1,
|
||||
pageSize: value.length
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
let dataSource = res.result
|
||||
if (!(dataSource instanceof Array)) {
|
||||
dataSource = res.result.records
|
||||
}
|
||||
this.emitOptions(dataSource, (data) => {
|
||||
pushIfNotExist(this.innerValue, data[this.valueKey])
|
||||
pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
|
||||
pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
emitOptions(dataSource, callback) {
|
||||
dataSource.forEach(data => {
|
||||
let key = data[this.valueKey]
|
||||
this.dataSourceMap[key] = data
|
||||
pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value')
|
||||
typeof callback === 'function' ? callback(data) : ''
|
||||
})
|
||||
this.$emit('options', this.options, this.dataSourceMap)
|
||||
},
|
||||
|
||||
/** 完成选择 */
|
||||
@ -181,22 +301,30 @@
|
||||
|
||||
/** 删除已选择的 */
|
||||
handleDeleteSelected(record, index) {
|
||||
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1)
|
||||
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
|
||||
this.selectedTable.dataSource.splice(index, 1)
|
||||
},
|
||||
|
||||
customRowFn(record) {
|
||||
if (!this.multiple) {
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
this.selectedRowKeys = [record.id]
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
let key = record[this.rowKey]
|
||||
if (!this.multiple) {
|
||||
this.selectedRowKeys = [key]
|
||||
this.selectedTable.dataSource = [record]
|
||||
} else {
|
||||
let index = this.selectedRowKeys.indexOf(key)
|
||||
if (index === -1) {
|
||||
this.selectedRowKeys.push(key)
|
||||
this.selectedTable.dataSource.push(record)
|
||||
} else {
|
||||
this.handleDeleteSelected(record, index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@ -16,11 +16,21 @@ export default {
|
||||
|
||||
### 配置参数
|
||||
|
||||
- `name`:`String` 显示名字,例如选择部门就填写'部门'
|
||||
- `listUrl`:`String` 数据请求地址,必须是封装了分页的地址
|
||||
- `displayKey`:`String` 显示在标签上的字段 key
|
||||
- `returnKeys`:`Array` v-model 绑定的 keys,是个数组,默认使用第二项,当配置了 `returnId=true` 就返回第一项
|
||||
- `returnId`:`Boolean` 返回ID,设为true后将返回配置的 `returnKeys` 中的第一项
|
||||
- `selectButtonText`:`String` 选择按钮的文字
|
||||
- `queryParamText`:`String` 查询条件显示文字
|
||||
- `columns`:`Array` 列配置项,与a-table的列配置项相同,会将第一项配置成已选择的列表
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 备注 |
|
||||
|-----------------------|---------|------|--------------|--------------------------------------------------------------------------------------|
|
||||
| rowKey | String | | "id" | 唯一标识的字段名 |
|
||||
| value(v-model) | String | | "" | 默认选择的数据,多个用半角逗号分割 |
|
||||
| name | String | | "" | 显示名字,例如选择用户就填写"用户" |
|
||||
| listUrl | String | 是 | | 数据请求地址,必须是封装了分页的地址 |
|
||||
| valueUrl | String | | "" | 获取显示文本的地址,例如存的是 username,可以通过该地址获取到 realname |
|
||||
| displayKey | String | | null | 显示在标签上的字段 key ,不传则直接显示数据 |
|
||||
| returnKeys | Array | | ['id', 'id'] | v-model 绑定的 keys,是个数组,默认使用第二项,当配置了 `returnId=true` 就返回第一项 |
|
||||
| returnId | Boolean | | false | 返回ID,设为true后将返回配置的 `returnKeys` 中的第一项 |
|
||||
| selectButtonText | String | | "选择" | 选择按钮的文字 |
|
||||
| queryParamText | String | | null | 查询条件显示文字,不传则使用 `name` |
|
||||
| columns | Array | 是 | | 列配置项,与antd的table的配置完全一致。列的第一项会被配置成右侧已选择的列表上 |
|
||||
| columns[0].widthRight | String | | null | 仅列的第一项可以应用此配置,表示右侧已选择列表的宽度,建议 `70%`,不传则应用`width` |
|
||||
| placeholder | String | | "请选择" | 占位符 |
|
||||
| disabled | Boolean | | false | 是否禁用 |
|
||||
| multiple | Boolean | | false | 是否可多选 |
|
||||
| buttons | Boolean | | true | 是否显示"选择"按钮,如果不显示,可以直接点击文本框打开选择界面 |
|
||||
|
||||
@ -1,29 +1,31 @@
|
||||
<template>
|
||||
<a-row class="j-select-biz-component-box" type="flex" :gutter="8">
|
||||
<a-col class="left">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
:placeholder="placeholder"
|
||||
v-model="selectValue"
|
||||
:options="selectOptions"
|
||||
allowClear
|
||||
:disabled="disabled"
|
||||
:open="false"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
<a-col class="left" :class="{'full': !buttons}">
|
||||
<slot name="left">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
:placeholder="placeholder"
|
||||
v-model="selectValue"
|
||||
:options="selectOptions"
|
||||
allowClear
|
||||
:disabled="disabled"
|
||||
:open="selectOpen"
|
||||
style="width: 100%;"
|
||||
@dropdownVisibleChange="handleDropdownVisibleChange"
|
||||
@click.native="visible=(buttons?visible:true)"
|
||||
/>
|
||||
</slot>
|
||||
</a-col>
|
||||
|
||||
<a-col class="right">
|
||||
<a-col v-if="buttons" class="right">
|
||||
<a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button>
|
||||
</a-col>
|
||||
|
||||
<j-select-biz-component-modal
|
||||
v-model="selectValue"
|
||||
:name="name" :listUrl="listUrl" :returnKeys="returnKeys" :displayKey="displayKey"
|
||||
:propColumns="columns" :queryParamText="queryParamText" :multiple="multiple"
|
||||
:visible.sync="visible"
|
||||
:valueKey="valueKey"
|
||||
@ok="selectOptions=$event"
|
||||
v-bind="modalProps"
|
||||
@options="handleOptions"
|
||||
/>
|
||||
</a-row>
|
||||
</template>
|
||||
@ -57,19 +59,10 @@
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/* 可复用属性 */
|
||||
|
||||
// 被选择的名字,例如选择部门就填写'部门'
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// list 接口地址
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ''
|
||||
// 是否显示按钮,默认 true
|
||||
buttons: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 显示的 Key
|
||||
displayKey: {
|
||||
@ -86,29 +79,29 @@
|
||||
type: String,
|
||||
default: '选择'
|
||||
},
|
||||
// 查询条件文字
|
||||
queryParamText: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// columns
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectValue: [],
|
||||
selectOptions: [],
|
||||
visible: false
|
||||
dataSourceMap: {},
|
||||
visible: false,
|
||||
selectOpen: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
valueKey() {
|
||||
return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
|
||||
}
|
||||
},
|
||||
modalProps() {
|
||||
return Object.assign({
|
||||
valueKey: this.valueKey,
|
||||
multiple: this.multiple,
|
||||
returnKeys: this.returnKeys,
|
||||
displayKey: this.displayKey || this.valueKey
|
||||
}, this.$attrs)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
@ -124,34 +117,49 @@
|
||||
selectValue: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
const data = val.join(',')
|
||||
let rows = val.map(key => this.dataSourceMap[key])
|
||||
this.$emit('select', rows)
|
||||
let data = val.join(',')
|
||||
this.$emit('input', data)
|
||||
this.$emit('change', data)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
handleOptions(options, dataSourceMap) {
|
||||
this.selectOptions = options
|
||||
this.dataSourceMap = dataSourceMap
|
||||
},
|
||||
handleDropdownVisibleChange() {
|
||||
// 解决antdv自己的bug —— open 设置为 false 了,点击后还是添加了 open 样式,导致点击事件失效
|
||||
this.selectOpen = true
|
||||
this.$nextTick(() => {
|
||||
this.selectOpen = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.j-select-biz-component-box {
|
||||
.ant-select-search__field {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.j-select-biz-component-box {
|
||||
|
||||
$width: 82px;
|
||||
@width: 82px;
|
||||
|
||||
.left {
|
||||
width: calc(100% - #{$width} - 8px);
|
||||
width: calc(100% - @width - 8px);
|
||||
}
|
||||
|
||||
.right {
|
||||
width: #{$width};
|
||||
width: @width;
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .ant-select-search__field {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,7 +11,7 @@
|
||||
:modal-width="modalWidth"
|
||||
:multi="multi"
|
||||
:rootOpened="rootOpened"
|
||||
:depart-id="value"
|
||||
:depart-id="departIds"
|
||||
@ok="handleOK"
|
||||
@initComp="initComp"/>
|
||||
</div>
|
||||
@ -48,6 +48,11 @@
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 自定义返回字段,默认返回 id
|
||||
customReturnField: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@ -63,7 +68,9 @@
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.departIds = val
|
||||
if (this.customReturnField === 'id') {
|
||||
this.departIds = val
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@ -73,21 +80,17 @@
|
||||
openModal(){
|
||||
this.$refs.innerDepartSelectModal.show()
|
||||
},
|
||||
handleOK(rows,idstr){
|
||||
console.log("当前选中部门",rows)
|
||||
console.log("当前选中部门ID",idstr)
|
||||
if(!rows){
|
||||
handleOK(rows, idstr) {
|
||||
let value = ''
|
||||
if (!rows && rows.length <= 0) {
|
||||
this.departNames = ''
|
||||
this.departIds=''
|
||||
}else{
|
||||
let temp = ''
|
||||
for(let item of rows){
|
||||
temp+=','+item.departName
|
||||
}
|
||||
this.departNames = temp.substring(1)
|
||||
this.departIds=idstr
|
||||
this.departIds = ''
|
||||
} else {
|
||||
value = rows.map(row => row[this.customReturnField]).join(',')
|
||||
this.departNames = rows.map(row => row['departName']).join(',')
|
||||
this.departIds = idstr
|
||||
}
|
||||
this.$emit("change",this.departIds)
|
||||
this.$emit("change", value)
|
||||
},
|
||||
getDepartNames(){
|
||||
return this.departNames
|
||||
|
||||
@ -1,17 +1,12 @@
|
||||
<template>
|
||||
<!-- 定义在这里的参数都是不可在外部覆盖的,防止出现问题 -->
|
||||
<j-select-biz-component
|
||||
:value="value"
|
||||
|
||||
name="用户"
|
||||
displayKey="realname"
|
||||
|
||||
:returnKeys="returnKeys"
|
||||
:ellipsisLength="25"
|
||||
:listUrl="url.list"
|
||||
:columns="columns"
|
||||
queryParamText="账号"
|
||||
|
||||
v-on="$listeners"
|
||||
v-bind="$attrs"
|
||||
v-bind="attrs"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -24,17 +19,29 @@
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
returnKeys: ['id', 'username'],
|
||||
url: { list: '/sys/user/list' },
|
||||
columns: [
|
||||
{ title: '姓名', align: 'center', width: 100, dataIndex: 'realname' },
|
||||
{ title: '账号', align: 'center', width: 100, dataIndex: 'username' },
|
||||
{ title: '电话', align: 'center', width: 100, dataIndex: 'phone' },
|
||||
{ title: '出生日期', align: 'center', width: 100, dataIndex: 'birthday' }
|
||||
]
|
||||
{ title: '姓名', align: 'center', width: '25%', widthRight: '70%', dataIndex: 'realname' },
|
||||
{ title: '账号', align: 'center', width: '25%', dataIndex: 'username' },
|
||||
{ title: '电话', align: 'center', width: '20%', dataIndex: 'phone' },
|
||||
{ title: '出生日期', align: 'center', width: '20%', dataIndex: 'birthday' }
|
||||
],
|
||||
// 定义在这里的参数都是可以在外部传递覆盖的,可以更灵活的定制化使用的组件
|
||||
default: {
|
||||
name: '用户',
|
||||
width: 1200,
|
||||
displayKey: 'realname',
|
||||
returnKeys: ['id', 'username'],
|
||||
queryParamText: '账号',
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
attrs() {
|
||||
return Object.assign(this.default, this.$attrs)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="less" scoped></style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<j-select-biz-component v-bind="configs" v-on="$listeners"/>
|
||||
<j-select-biz-component :width="1000" v-bind="configs" v-on="$listeners"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -16,11 +16,12 @@
|
||||
displayKey: 'name',
|
||||
returnKeys: ['id', 'code'],
|
||||
listUrl: '/sys/position/list',
|
||||
queryParamText: '职务编码',
|
||||
queryParamCode: 'name',
|
||||
queryParamText: '职务名称',
|
||||
columns: [
|
||||
{ title: '职务名称', dataIndex: 'name', align: 'center', width: 100 },
|
||||
{ title: '职务编码', dataIndex: 'code', align: 'center', width: 100 },
|
||||
{ title: '职级', dataIndex: 'rank_dictText', align: 'center', width: 100 }
|
||||
{ title: '职务名称', dataIndex: 'name', align: 'center', width: '30%', widthRight: '70%' },
|
||||
{ title: '职务编码', dataIndex: 'code', align: 'center', width: '35%' },
|
||||
{ title: '职级', dataIndex: 'rank_dictText', align: 'center', width: '25%' }
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -33,4 +34,4 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="less" scoped></style>
|
||||
@ -35,4 +35,4 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="less" scoped></style>
|
||||
@ -3,7 +3,8 @@
|
||||
<a-input-search
|
||||
v-model="userNames"
|
||||
placeholder="请先选择用户"
|
||||
disabled
|
||||
readOnly
|
||||
unselectable="on"
|
||||
@search="onSearchDepUser">
|
||||
<a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
|
||||
</a-input-search>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
handler() {
|
||||
if (this.departId) {
|
||||
this.checkedKeys = this.departId.split(",");
|
||||
console.log('this.departId', this.departId)
|
||||
// console.log('this.departId', this.departId)
|
||||
} else {
|
||||
this.checkedKeys = [];
|
||||
}
|
||||
@ -75,7 +75,6 @@
|
||||
this.visible=true
|
||||
this.checkedRows=[]
|
||||
this.checkedKeys=[]
|
||||
console.log("this.multi",this.multi)
|
||||
},
|
||||
loadDepart(){
|
||||
queryDepartTreeList().then(res=>{
|
||||
@ -133,39 +132,29 @@
|
||||
},
|
||||
onCheck (checkedKeys,info) {
|
||||
if(!this.multi){
|
||||
let arr = checkedKeys.checked.filter(item=>{
|
||||
return this.checkedKeys.indexOf(item)<0
|
||||
})
|
||||
let arr = checkedKeys.checked.filter(item => this.checkedKeys.indexOf(item) < 0)
|
||||
this.checkedKeys = [...arr]
|
||||
this.checkedRows=[info.node.dataRef]
|
||||
this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef]
|
||||
}else{
|
||||
this.checkedKeys = checkedKeys.checked
|
||||
this.checkedRows.push(info.node.dataRef)
|
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys)
|
||||
}
|
||||
//this.$emit("input",this.checkedKeys.join(","))
|
||||
//console.log(this.checkedKeys.join(","))
|
||||
},
|
||||
onSelect (selectedKeys,info) {
|
||||
console.log(selectedKeys)
|
||||
onSelect(selectedKeys,info) {
|
||||
let keys = []
|
||||
keys.push(selectedKeys[0])
|
||||
if(!this.checkedKeys || this.checkedKeys.length==0 || !this.multi){
|
||||
if(!this.checkedKeys || this.checkedKeys.length===0 || !this.multi){
|
||||
this.checkedKeys = [...keys]
|
||||
this.checkedRows=[info.node.dataRef]
|
||||
}else{
|
||||
let currKey = info.node.dataRef.key
|
||||
if(this.checkedKeys.indexOf(currKey)>=0){
|
||||
this.checkedKeys = this.checkedKeys.filter(item=>{
|
||||
return item !=currKey
|
||||
})
|
||||
this.checkedRows=this.checkedRows.filter(item=>{
|
||||
return item.key !=currKey
|
||||
})
|
||||
this.checkedKeys = this.checkedKeys.filter(item=> item !==currKey)
|
||||
}else{
|
||||
this.checkedRows.push(info.node.dataRef)
|
||||
this.checkedKeys.push(...keys)
|
||||
}
|
||||
}
|
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys)
|
||||
},
|
||||
onExpand (expandedKeys) {
|
||||
this.expandedKeys = expandedKeys
|
||||
@ -215,6 +204,32 @@
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
// 根据 checkedKeys 获取 rows
|
||||
getCheckedRows(checkedKeys) {
|
||||
const forChildren = (list, key) => {
|
||||
for (let item of list) {
|
||||
if (item.id === key) {
|
||||
return item
|
||||
}
|
||||
if (item.children instanceof Array) {
|
||||
let value = forChildren(item.children, key)
|
||||
if (value != null) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
let rows = []
|
||||
for (let key of checkedKeys) {
|
||||
let row = forChildren(this.treeData, key)
|
||||
if (row != null) {
|
||||
rows.push(row)
|
||||
}
|
||||
}
|
||||
return rows
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,9 +17,11 @@
|
||||
selectable
|
||||
:selectedKeys="selectedDepIds"
|
||||
:checkStrictly="true"
|
||||
@select="onDepSelect"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
:treeData="departTree"
|
||||
:expandAction="false"
|
||||
:expandedKeys.sync="expandedKeys"
|
||||
@select="onDepSelect"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
@ -28,7 +30,7 @@
|
||||
用户账号:
|
||||
<a-input-search
|
||||
:style="{width:'150px',marginBottom:'15px'}"
|
||||
placeholder="请输入用户账号"
|
||||
placeholder="请输入账号"
|
||||
v-model="queryParam.username"
|
||||
@search="onSearch"
|
||||
></a-input-search>
|
||||
@ -43,6 +45,7 @@
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
</a-table>
|
||||
</a-card>
|
||||
@ -71,15 +74,10 @@
|
||||
dataIndex: 'username'
|
||||
},
|
||||
{
|
||||
title: '真实姓名',
|
||||
title: '用户姓名',
|
||||
align: 'center',
|
||||
dataIndex: 'realname'
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
align: 'center',
|
||||
dataIndex: 'roleName'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
@ -95,14 +93,14 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
title: '手机',
|
||||
align: 'center',
|
||||
dataIndex: 'phone'
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
title: '部门',
|
||||
align: 'center',
|
||||
dataIndex: 'email'
|
||||
dataIndex: 'orgCode'
|
||||
}
|
||||
],
|
||||
scrollTrigger: {},
|
||||
@ -129,56 +127,74 @@
|
||||
selectedDepIds: [],
|
||||
departTree: [],
|
||||
visible: false,
|
||||
form: this.$form.createForm(this)
|
||||
form: this.$form.createForm(this),
|
||||
loading: false,
|
||||
expandedKeys: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算属性的 getter
|
||||
getType: function () {
|
||||
console.log("multi: ", this.multi);
|
||||
return this.multi == true ? 'checkbox' : 'radio';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userIds() {
|
||||
this.initUserNames()
|
||||
}
|
||||
userIds: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.initUserNames()
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 该方法触发屏幕自适应
|
||||
this.resetScreenSize();
|
||||
this.loadData().then((res) => {
|
||||
this.initUserNames();
|
||||
})
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
initUserNames() {
|
||||
let names = ''
|
||||
console.log("props userIds: ", this.userIds)
|
||||
if (this.userIds) {
|
||||
let currUserIds = this.userIds
|
||||
for (let item of this.dataSource) {
|
||||
if (currUserIds.indexOf(item.username) >= 0) {
|
||||
names += "," + item.realname
|
||||
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询,防止后台进行了模糊匹配,导致查询结果不准确
|
||||
let values = this.userIds.split(',') + ','
|
||||
getUserList({
|
||||
username: values,
|
||||
pageNo: 1,
|
||||
pageSize: values.length
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
let selectedRowKeys = []
|
||||
let realNames = []
|
||||
res.result.records.forEach(user => {
|
||||
realNames.push(user['realname'])
|
||||
selectedRowKeys.push(user['id'])
|
||||
})
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.$emit('initComp', realNames.join(','))
|
||||
}
|
||||
}
|
||||
if (names) {
|
||||
names = names.substring(1)
|
||||
}
|
||||
this.$emit("initComp", names)
|
||||
})
|
||||
} else {
|
||||
// JSelectUserByDep组件bug issues/I16634
|
||||
this.$emit('initComp', '')
|
||||
}
|
||||
},
|
||||
async loadData(arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
let params = this.getQueryParams();//查询条件
|
||||
await getUserList(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
})
|
||||
if (this.selectedDepIds && this.selectedDepIds.length > 0) {
|
||||
await this.initQueryUserByDepId(this.selectedDepIds)
|
||||
} else {
|
||||
this.loading = true
|
||||
let params = this.getQueryParams()//查询条件
|
||||
await getUserList(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
// 触发屏幕自适应
|
||||
resetScreenSize() {
|
||||
@ -192,6 +208,7 @@
|
||||
showModal() {
|
||||
this.visible = true;
|
||||
this.queryDepartTree();
|
||||
this.initUserNames()
|
||||
this.loadData();
|
||||
this.form.resetFields();
|
||||
},
|
||||
@ -235,7 +252,6 @@
|
||||
handleSubmit() {
|
||||
let that = this;
|
||||
this.getSelectUserRows();
|
||||
console.log(that.selectUserRows)
|
||||
that.$emit('ok', that.selectUserRows, that.selectUserIds);
|
||||
that.searchReset(0)
|
||||
that.close();
|
||||
@ -271,17 +287,22 @@
|
||||
},
|
||||
// 根据选择的id来查询用户信息
|
||||
initQueryUserByDepId(selectedDepIds) {
|
||||
queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
|
||||
this.loading = true
|
||||
return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
this.ipagination.total = res.result.length;
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
queryDepartTree() {
|
||||
queryDepartTreeList().then((res) => {
|
||||
if (res.success) {
|
||||
this.departTree = res.result;
|
||||
// 默认展开父节点
|
||||
this.expandedKeys = this.departTree.map(item => item.id)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '用户真实姓名',
|
||||
title: '用户姓名',
|
||||
align: "center",
|
||||
dataIndex: 'realname',
|
||||
},
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="less">
|
||||
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
import PageLayout from '../page/PageLayout'
|
||||
import RouteView from './RouteView'
|
||||
|
||||
@ -40,6 +42,12 @@
|
||||
/*update_begin author:wuxianquan date:20190908 for:判断打开方式,新窗口打开时this.$route.meta.internalOrExternal==true */
|
||||
if(this.$route.meta.internalOrExternal != undefined && this.$route.meta.internalOrExternal==true){
|
||||
this.closeCurrent();
|
||||
//外部url加入token
|
||||
let tokenStr = "${token}";
|
||||
if(url.indexOf(tokenStr)!=-1){
|
||||
let token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.url = url.replace(tokenStr,token);
|
||||
}
|
||||
window.open(this.url);
|
||||
}
|
||||
/*update_end author:wuxianquan date:20190908 for:判断打开方式,新窗口打开时this.$route.meta.internalOrExternal==true */
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.extra-img {
|
||||
margin-top: -60px;
|
||||
text-align: center;
|
||||
|
||||
@ -80,30 +80,43 @@
|
||||
},
|
||||
created() {
|
||||
if (this.$route.path != indexKey) {
|
||||
this.pageList.push({
|
||||
name: 'dashboard-analysis',
|
||||
path: indexKey,
|
||||
fullPath: indexKey,
|
||||
meta: {
|
||||
icon: 'dashboard',
|
||||
title: '首页'
|
||||
}
|
||||
})
|
||||
this.linkList.push(indexKey)
|
||||
this.addIndexToFirst()
|
||||
}
|
||||
// update-begin-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
|
||||
let storeKey = 'route:title:' + this.$route.fullPath
|
||||
let routeTitle = this.$ls.get(storeKey)
|
||||
if (routeTitle) {
|
||||
this.$route.meta.title = routeTitle
|
||||
}
|
||||
// update-end-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
|
||||
this.pageList.push(this.$route)
|
||||
this.linkList.push(this.$route.fullPath)
|
||||
this.activePage = this.$route.fullPath
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
watch: {
|
||||
'$route': function(newRoute) {
|
||||
//console.log("新的路由",newRoute)
|
||||
this.activePage = newRoute.fullPath
|
||||
if (!this.multipage) {
|
||||
this.linkList = [newRoute.fullPath]
|
||||
this.pageList = [Object.assign({},newRoute)]
|
||||
} else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
|
||||
// update-begin-author:taoyan date:20200211 for: TASK #3368 【路由缓存】首页的缓存设置有问题,需要根据后台的路由配置来实现是否缓存
|
||||
} else if(indexKey==newRoute.fullPath) {
|
||||
//首页时 判断是否缓存 没有缓存 刷新之
|
||||
if (newRoute.meta.keepAlive === false) {
|
||||
this.routeReload()
|
||||
}
|
||||
// update-end-author:taoyan date:20200211 for: TASK #3368 【路由缓存】首页的缓存设置有问题,需要根据后台的路由配置来实现是否缓存
|
||||
}else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
|
||||
this.linkList.push(newRoute.fullPath)
|
||||
this.pageList.push(Object.assign({},newRoute))
|
||||
// update-begin-author:sunjianlei date:20200103 for: 如果新增的页面配置了缓存路由,那么就强制刷新一遍
|
||||
if (newRoute.meta.keepAlive) {
|
||||
this.routeReload()
|
||||
}
|
||||
// update-end-author:sunjianlei date:20200103 for: 如果新增的页面配置了缓存路由,那么就强制刷新一遍
|
||||
} else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
|
||||
let oldIndex = this.linkList.indexOf(newRoute.fullPath)
|
||||
let oldPositionRoute = this.pageList[oldIndex]
|
||||
@ -114,6 +127,7 @@
|
||||
let index = this.linkList.lastIndexOf(key)
|
||||
let waitRouter = this.pageList[index]
|
||||
this.$router.push(Object.assign({},waitRouter));
|
||||
this.changeTitle(waitRouter.meta.title)
|
||||
},
|
||||
'multipage': function(newVal) {
|
||||
if(this.reloadFlag){
|
||||
@ -122,9 +136,44 @@
|
||||
this.pageList = [this.$route]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// update-begin-author:sunjianlei date:20191223 for: 修复从单页模式切换回多页模式后首页不居第一位的 BUG
|
||||
device() {
|
||||
if (this.multipage && this.linkList.indexOf(indexKey) === -1) {
|
||||
this.addIndexToFirst()
|
||||
}
|
||||
},
|
||||
// update-end-author:sunjianlei date:20191223 for: 修复从单页模式切换回多页模式后首页不居第一位的 BUG
|
||||
},
|
||||
methods: {
|
||||
// update-begin-author:sunjianlei date:20191223 for: 修复从单页模式切换回多页模式后首页不居第一位的 BUG
|
||||
// 将首页添加到第一位
|
||||
addIndexToFirst() {
|
||||
this.pageList.splice(0, 0, {
|
||||
name: 'dashboard-analysis',
|
||||
path: indexKey,
|
||||
fullPath: indexKey,
|
||||
meta: {
|
||||
icon: 'dashboard',
|
||||
title: '首页'
|
||||
}
|
||||
})
|
||||
this.linkList.splice(0, 0, indexKey)
|
||||
},
|
||||
// update-end-author:sunjianlei date:20191223 for: 修复从单页模式切换回多页模式后首页不居第一位的 BUG
|
||||
|
||||
// update-begin-author:sunjianlei date:20200120 for: 动态更改页面标题
|
||||
changeTitle(title) {
|
||||
let projectTitle = "Jeecg-Boot 企业级快速开发平台"
|
||||
// 首页特殊处理
|
||||
if (this.$route.path === indexKey) {
|
||||
document.title = projectTitle
|
||||
} else {
|
||||
document.title = title + ' · ' + projectTitle
|
||||
}
|
||||
},
|
||||
// update-end-author:sunjianlei date:20200120 for: 动态更改页面标题
|
||||
|
||||
changePage(key) {
|
||||
this.activePage = key
|
||||
},
|
||||
@ -145,6 +194,7 @@
|
||||
this.$message.warning('这是最后一页,不能再关闭了啦')
|
||||
return
|
||||
}
|
||||
console.log("this.pageList ",this.pageList );
|
||||
this.pageList = this.pageList.filter(item => item.fullPath !== key)
|
||||
let index = this.linkList.indexOf(key)
|
||||
this.linkList = this.linkList.filter(item => item !== key)
|
||||
@ -236,6 +286,9 @@
|
||||
let currRouter = this.pageList[keyIndex]
|
||||
let meta = Object.assign({},currRouter.meta,{title:title})
|
||||
this.pageList.splice(keyIndex, 1, Object.assign({},currRouter,{meta:meta}))
|
||||
if (key === this.activePage) {
|
||||
this.changeTitle(title)
|
||||
}
|
||||
}
|
||||
},
|
||||
//update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
|
||||
@ -255,7 +308,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="less">
|
||||
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
@ -333,7 +386,7 @@
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
.ant-tabs-tab-active {
|
||||
border-color: #1890ff !important;
|
||||
border-color: @primary-color!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -17,12 +17,12 @@
|
||||
|
||||
<div class="footer">
|
||||
<div class="links">
|
||||
<a href="http://jeecg-boot.mydoc.io" target="_blank">帮助</a>
|
||||
<a href="http://doc.jeecg.com" target="_blank">帮助</a>
|
||||
<a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>
|
||||
<a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">条款</a>
|
||||
<a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
Copyright © 2019 <a href="http://www.jeecg.org" target="_blank">JEECG开源社区</a> 出品
|
||||
Copyright © 2019 <a href="http://www.jeecg.com" target="_blank">JEECG开源社区</a> 出品
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
#userLayout.user-layout-wrapper {
|
||||
height: 100%;
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
closeMenu (e) {
|
||||
if (['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
|
||||
if (this.visible === true && ['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
|
||||
this.$emit('update:visible', false)
|
||||
}
|
||||
},
|
||||
|
||||
@ -72,18 +72,18 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
|
||||
/* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
||||
.sider {
|
||||
$scrollBarSize: 10px;
|
||||
@scrollBarSize: 10px;
|
||||
|
||||
ul.ant-menu {
|
||||
|
||||
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
||||
&::-webkit-scrollbar {
|
||||
width: $scrollBarSize;
|
||||
height: $scrollBarSize;
|
||||
width: @scrollBarSize;
|
||||
height: @scrollBarSize;
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
}
|
||||
@ -109,7 +109,7 @@
|
||||
|
||||
/* 定义滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: $scrollBarSize;
|
||||
border-radius: @scrollBarSize;
|
||||
background-color: #eee;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
</style>
|
||||
|
||||
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|
||||
<style lang="scss">
|
||||
<style lang="less">
|
||||
.ant-menu.ant-menu-root {
|
||||
& > .ant-menu-item:first-child {
|
||||
background-color: transparent;
|
||||
@ -156,7 +156,7 @@
|
||||
|
||||
&.ant-menu-item-selected {
|
||||
& > a, & > a:hover {
|
||||
color: #1890ff;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="links">
|
||||
<a href="http://www.jeecg.org" target="_blank">JEECG 首页</a>
|
||||
<a href="http://www.jeecg.com" target="_blank">JEECG 首页</a>
|
||||
<a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">
|
||||
<a-icon type="github"/>
|
||||
</a>
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.footer {
|
||||
padding: 0 16px;
|
||||
margin: 48px 0 24px;
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
v-if="device==='mobile'"
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
|
||||
@click.native="toggle"></a-icon>
|
||||
@click="toggle"></a-icon>
|
||||
<a-icon
|
||||
v-else
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
||||
@click.native="toggle"/>
|
||||
@click="toggle"/>
|
||||
|
||||
<span v-if="device === 'desktop'">欢迎进入 Jeecg-Boot 企业级快速开发平台</span>
|
||||
<span v-else>Jeecg-Boot</span>
|
||||
@ -37,7 +37,7 @@
|
||||
v-else
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
|
||||
@click.native="toggle"></a-icon>
|
||||
@click="toggle"></a-icon>
|
||||
</div>
|
||||
<user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
|
||||
</div>
|
||||
@ -161,10 +161,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
|
||||
|
||||
$height: 59px;
|
||||
@height: 59px;
|
||||
|
||||
.layout {
|
||||
|
||||
@ -174,8 +174,8 @@
|
||||
margin-left: 10px;
|
||||
|
||||
.ant-menu.ant-menu-horizontal {
|
||||
height: $height;
|
||||
line-height: $height;
|
||||
height: @height;
|
||||
line-height: @height;
|
||||
}
|
||||
}
|
||||
.trigger {
|
||||
@ -189,8 +189,8 @@
|
||||
.header {
|
||||
z-index: 2;
|
||||
color: white;
|
||||
height: $height;
|
||||
background-color: #1890ff;
|
||||
height: @height;
|
||||
background-color: @primary-color;
|
||||
transition: background 300ms;
|
||||
|
||||
/* dark 样式 */
|
||||
@ -209,8 +209,8 @@
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
height: $height;
|
||||
line-height: $height;
|
||||
height: @height;
|
||||
line-height: @height;
|
||||
}
|
||||
|
||||
/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
|
||||
|
||||
@ -154,6 +154,10 @@
|
||||
//此处触发动态路由被点击事件
|
||||
this.findMenuBykey(this.menus,value.key)
|
||||
this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
|
||||
// update-begin-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
|
||||
let storeKey = 'route:title:' + this.activeMenu.path
|
||||
this.$ls.set(storeKey, this.activeMenu.meta.title)
|
||||
// update-end-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
|
||||
},
|
||||
findMenuBykey(menus,key){
|
||||
for(let i of menus){
|
||||
@ -170,7 +174,7 @@
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="less">
|
||||
body {
|
||||
// 打开滚动条固定显示
|
||||
overflow-y: scroll;
|
||||
@ -337,6 +341,10 @@
|
||||
font-size: 16px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -349,6 +357,10 @@
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.page-header {
|
||||
background: #fff;
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
margin: 24px 24px 0;
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.header-notice{
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
|
||||
@ -255,7 +255,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.setting-drawer-index-content {
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.setting-drawer-index-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
@ -149,8 +149,11 @@ export default {
|
||||
this.selectedRows = []
|
||||
},
|
||||
onClearSelected() {
|
||||
// 【TESTA-262】页面清空后还能才做所选行,增加 this.$emit('clearAll')
|
||||
this.selectedRowKeys = []
|
||||
this.selectedRows = []
|
||||
this.updateSelect([], [])
|
||||
this.$emit('clearAll')
|
||||
},
|
||||
renderMsg(h) {
|
||||
const _vm = this
|
||||
|
||||
@ -26,7 +26,7 @@ export default {
|
||||
console.log('this.$route.matched', this.$route.matched)
|
||||
|
||||
this.breadList = []
|
||||
this.breadList.push({ name: 'dashboard', path: '/dashboard/', meta: { title: '首页' } })
|
||||
this.breadList.push({ name: 'dashboard-analysis', path: '/dashboard/analysis', meta: { title: '首页' } })
|
||||
|
||||
this.name = this.$route.name
|
||||
this.$route.matched.forEach((item) => {
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="less">
|
||||
|
||||
.detail-list {
|
||||
|
||||
|
||||
36
ant-design-vue-jeecg/src/components/tools/DynamicNotice.vue
Normal file
36
ant-design-vue-jeecg/src/components/tools/DynamicNotice.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<component
|
||||
:is="comp"
|
||||
:formData="formData"
|
||||
ref="compModel"
|
||||
v-if="comp">
|
||||
</component>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'DynamicNotice',
|
||||
data () {
|
||||
return {
|
||||
compName: this.path
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
comp: function () {
|
||||
if(!this.path){
|
||||
return null;
|
||||
}
|
||||
return () => import(`@/views/${this.path}.vue`)
|
||||
}
|
||||
},
|
||||
props: ['path','formData'],
|
||||
methods: {
|
||||
detail () {
|
||||
setTimeout(() => {
|
||||
if(this.path){
|
||||
this.$refs.compModel.view(this.formData);
|
||||
}
|
||||
}, 200)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.toolbar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.head-info {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user