Commit d1253bfe by zhangdaihao

JEECG-BOOT 2.0.2版本发布

parent 8b08589b
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
Jeecg-Boot 快速开发平台(前后端分离版本) Jeecg-Boot 快速开发平台(前后端分离版本)
=============== ===============
当前最新版本: 2.0.1(发布日期:20190603 当前最新版本: 2.0.2(发布日期:20190708
[![AUR](https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg)](https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE) [![AUR](https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg)](https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE)
[![](https://img.shields.io/badge/Author-Scott-orange.svg)](https://blog.csdn.net/zhangdaiscott) [![](https://img.shields.io/badge/Author-Scott-orange.svg)](https://blog.csdn.net/zhangdaiscott)
...@@ -21,7 +21,7 @@ Jeecg-Boot 快速开发平台(前后端分离版本) ...@@ -21,7 +21,7 @@ Jeecg-Boot 快速开发平台(前后端分离版本)
<h4 align="center">Java RAD framework for enterprise web applications</h4> <h4 align="center">Java RAD framework for enterprise web applications</h4>
Jeecg-Boot 是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&Ant Design。强大的代码生成器让前端和后台代码一键生成,不需要写任何代码,保持jeecg一贯的强大,绝对是全栈开发福音!! JeecgBoot在提高UI能力的同时,降低了前后分离的开发成本,JeecgBoot还独创在线开发模式(No代码概念),一系列在线智能开发:在线配置表单、在线配置报表、在线图表设计、在线设计流程等等。 Jeecg-Boot 是一款基于SpringBoot+代码生成器的快速开发平台!前后端分离架构:SpringBoot,Ant Design Vue,Mybatis,Shiro,JWT。强大的代码生成器让前端和后台代码一键生成,不需要写任何代码,保持jeecg一贯的强大,绝对是全栈开发福音!! JeecgBoot在提高UI能力的同时,降低了前后分离的开发成本,JeecgBoot还独创在线开发模式(No代码概念),一系列在线智能开发:在线配置表单、在线配置报表、在线图表设计、在线设计流程等等。
JEECG宗旨是: 简单功能由Online Coding配置实现(在线配置表单、在线配置报表、在线图表设计、在线设计流程、在线设计表单),复杂功能由代码生成器生成进行手工Merge,既保证了智能又兼顾了灵活; JEECG宗旨是: 简单功能由Online Coding配置实现(在线配置表单、在线配置报表、在线图表设计、在线设计流程、在线设计表单),复杂功能由代码生成器生成进行手工Merge,既保证了智能又兼顾了灵活;
业务流程采用工作流来实现、扩展出任务接口,供开发编写业务逻辑,表单提供多种解决方案: 表单设计器、online配置表单、编码表单。同时实现了流程与表单的分离设计(松耦合)、并支持任务节点灵活配置,既保证了公司流程的保密性,又减少了开发人员的工作量。 业务流程采用工作流来实现、扩展出任务接口,供开发编写业务逻辑,表单提供多种解决方案: 表单设计器、online配置表单、编码表单。同时实现了流程与表单的分离设计(松耦合)、并支持任务节点灵活配置,既保证了公司流程的保密性,又减少了开发人员的工作量。
...@@ -44,7 +44,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤 ...@@ -44,7 +44,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
- 入门必看: [JeecgBoot常见问题大全](http://www.jeecg.org/forum.php?mod=viewthread&tid=7816&extra=page%3D1) - 入门必看: [JeecgBoot常见问题大全](http://www.jeecg.org/forum.php?mod=viewthread&tid=7816&extra=page%3D1)
- QQ交流群 : ②769925425、①284271917 - QQ交流群 : ①284271917、②769925425
- 参与开源: [欢迎技术爱好者,加入JEECG开源团队](http://jeecg.com/#/doc/canyu-os) - 参与开源: [欢迎技术爱好者,加入JEECG开源团队](http://jeecg.com/#/doc/canyu-os)
...@@ -72,7 +72,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤 ...@@ -72,7 +72,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
* 14.在线流程设计,采用开源Activiti流程引擎,实现在线画流程,自定义表单,表单挂靠,业务流转 * 14.在线流程设计,采用开源Activiti流程引擎,实现在线画流程,自定义表单,表单挂靠,业务流转
* 15.多数据源:及其简易的使用方式,在线配置数据源配置,便捷的从其他数据抓取数据; * 15.多数据源:及其简易的使用方式,在线配置数据源配置,便捷的从其他数据抓取数据;
* 16.国际化:支持多语言,开发国际化项目非常方便; * 16.国际化:支持多语言,开发国际化项目非常方便;
* 17.自定义表单,支持用户自定义表单布局,支持单表,一对多表单、支持select、radio、checkbox、textarea、date、popup、列表、宏等控件 * 17.表单设计器,支持用户自定义表单布局,支持单表,一对多表单、支持select、radio、checkbox、textarea、date、popup、列表、宏等控件
* 18.专业接口对接机制,统一采用restful接口方式,集成swagger-ui在线接口文档,Jwt token安全验证,方便客户端对接 * 18.专业接口对接机制,统一采用restful接口方式,集成swagger-ui在线接口文档,Jwt token安全验证,方便客户端对接
* 19.接口安全机制,可细化控制接口授权,非常简便实现不同客户端只看自己数据等控制 * 19.接口安全机制,可细化控制接口授权,非常简便实现不同客户端只看自己数据等控制
* 20.高级组合查询功能,在线配置支持主子表关联查询,可保存查询历史 * 20.高级组合查询功能,在线配置支持主子表关联查询,可保存查询历史
...@@ -96,7 +96,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤 ...@@ -96,7 +96,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
#### 后端 #### 后端
- 基础框架:Spring Boot 2.1.3.RELEASE - 基础框架:Spring Boot 2.1.3.RELEASE
- 持久层框架:Mybatis-plus_3.0.6 - 持久层框架:Mybatis-plus_3.1.2
- 安全框架:Apache Shiro 1.4.0,Jwt_3.7.0 - 安全框架:Apache Shiro 1.4.0,Jwt_3.7.0
...@@ -111,7 +111,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤 ...@@ -111,7 +111,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
#### 前端 #### 前端
- [Vue 2.5.22](https://cn.vuejs.org/),[Vuex](https://vuex.vuejs.org/zh/),[Vue Router](https://router.vuejs.org/zh/) - [Vue 2.6.10](https://cn.vuejs.org/),[Vuex](https://vuex.vuejs.org/zh/),[Vue Router](https://router.vuejs.org/zh/)
- [Axios](https://github.com/axios/axios) - [Axios](https://github.com/axios/axios)
- [ant-design-vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) - [ant-design-vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/)
- [webpack](https://www.webpackjs.com/),[yarn](https://yarnpkg.com/zh-Hans/) - [webpack](https://www.webpackjs.com/),[yarn](https://yarnpkg.com/zh-Hans/)
...@@ -150,6 +150,12 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤 ...@@ -150,6 +150,12 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
│ ├─表单权限(控制字段禁用、隐藏) │ ├─表单权限(控制字段禁用、隐藏)
│ ├─部门管理 │ ├─部门管理
│ └─字典管理 │ └─字典管理
│ └─树分类字典
│ └─系统公告
│ └─我的组织机构
├─消息中心
│ ├─消息管理
│ ├─模板管理
├─智能化功能 ├─智能化功能
│ ├─代码生成器功能(一键生成前后端代码,生成后无需修改直接用,绝对是后端开发福音) │ ├─代码生成器功能(一键生成前后端代码,生成后无需修改直接用,绝对是后端开发福音)
│ ├─代码生成器模板(提供4套模板,分别支持单表和一对多模型,不同风格选择) │ ├─代码生成器模板(提供4套模板,分别支持单表和一对多模型,不同风格选择)
...@@ -204,8 +210,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤 ...@@ -204,8 +210,7 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
│ └─省略显示组件 │ └─省略显示组件
│ └─时间控件 │ └─时间控件
│ └─高级查询 │ └─高级查询
│ └─通用选择用户组件 │ └─用户选择组件
│ └─通过组织机构选择用户组件
│ └─报表组件封装 │ └─报表组件封装
│ └─字典组件 │ └─字典组件
│ └─下拉多选组件 │ └─下拉多选组件
...@@ -215,6 +220,9 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤 ...@@ -215,6 +220,9 @@ Jeecg-Boot快速开发平台,可以应用在任何J2EE项目的开发中,尤
│ └─封装曲线、柱状图、饼状图、折线图等等报表的组件(经过封装,使用简单) │ └─封装曲线、柱状图、饼状图、折线图等等报表的组件(经过封装,使用简单)
│ └─在线code编辑器 │ └─在线code编辑器
│ └─上传文件组件 │ └─上传文件组件
│ └─验证码组件
│ └─树列表组件
│ └─表单禁用组件
│ └─等等 │ └─等等
│─更多页面模板 │─更多页面模板
│ ├─各种高级表单 │ ├─各种高级表单
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
<title>Group 28 Copy 5</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="62.1023273%" y1="0%" x2="108.19718%" y2="37.8635764%" id="linearGradient-1">
<stop stop-color="#4285EB" offset="0%"></stop>
<stop stop-color="#2EC7FF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="69.644116%" y1="0%" x2="54.0428975%" y2="108.456714%" id="linearGradient-2">
<stop stop-color="#29CDFF" offset="0%"></stop>
<stop stop-color="#148EFF" offset="37.8600687%"></stop>
<stop stop-color="#0A60FF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="69.6908165%" y1="-12.9743587%" x2="16.7228981%" y2="117.391248%" id="linearGradient-3">
<stop stop-color="#FA816E" offset="0%"></stop>
<stop stop-color="#F74A5C" offset="41.472606%"></stop>
<stop stop-color="#F51D2C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-4">
<stop stop-color="#FA8E7D" offset="0%"></stop>
<stop stop-color="#F74A5C" offset="51.2635191%"></stop>
<stop stop-color="#F51D2C" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo" transform="translate(-20.000000, -20.000000)">
<g id="Group-28-Copy-5" transform="translate(20.000000, 20.000000)">
<g id="Group-27-Copy-3">
<g id="Group-25" fill-rule="nonzero">
<g id="2">
<path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C99.2571609,26.9692191 101.032305,26.9692191 102.20193,28.1378823 L129.985225,55.8983314 C134.193707,60.1033528 141.017005,60.1033528 145.225487,55.8983314 C149.433969,51.69331 149.433969,44.8756232 145.225487,40.6706018 L108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-1)"></path>
<path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C100.999864,25.6271836 105.751642,20.541824 112.729652,19.3524487 C117.915585,18.4685261 123.585219,20.4140239 129.738554,25.1889424 C125.624663,21.0784292 118.571995,14.0340304 108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-2)"></path>
</g>
<path d="M153.685633,135.854579 C157.894115,140.0596 164.717412,140.0596 168.925894,135.854579 L195.959977,108.842726 C200.659183,104.147384 200.659183,96.5636133 195.960527,91.8688194 L168.690777,64.7181159 C164.472332,60.5180858 157.646868,60.5241425 153.435895,64.7316526 C149.227413,68.936674 149.227413,75.7543607 153.435895,79.9593821 L171.854035,98.3623765 C173.02366,99.5310396 173.02366,101.304724 171.854035,102.473387 L153.685633,120.626849 C149.47715,124.83187 149.47715,131.649557 153.685633,135.854579 Z" id="Shape" fill="url(#linearGradient-3)"></path>
</g>
<ellipse id="Combined-Shape" fill="url(#linearGradient-4)" cx="100.519339" cy="100.436681" rx="23.6001926" ry="23.580786"></ellipse>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<template>
<component ref="compModel" :is="comp" :formData="formData" v-if="comp" @ok="callBackOk" @close="callBackClose"></component>
</template>
<script>
export default {
name: 'DynamicComponent',
data () {
return {
compName: this.path
}
},
computed: {
comp: function () {
return () => import(`@/views/${this.compName}.vue`)
}
},
props: ['path','formData'],
methods: {
add () {
this.$refs.compModel.add();
},
callBackClose () {
this.$emit('close');
},
handleOk () {
this.$refs.compModel.handleOk();
},
callBackOk(){
this.$emit('ok');
this.close();
},
}
}
</script>
\ No newline at end of file
<template>
<a-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
destroyOnClose
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<dynamic-component ref="dynamiclink" :path="path" :formData="formData" @ok="callBackOk" @close="callBackClose"></dynamic-component>
</a-spin>
</a-modal>
</template>
<script>
import DynamicComponent from "./DynamicComponent";
export default {
name: "FormCommonModal",
props: ['path'],
components: {
DynamicComponent
},
data () {
return {
title:"操作",
width:"80%",
visible: false,
confirmLoading: false,
formData:{},
}
},
created () {
},
methods: {
add () {
this.formData =[];
this.title = "新增";
this.visible = true;
this.$refs.dynamiclink.add();
},
edit (record) {
var data = {
dataId:record.id,
}
this.formData = data;
this.visible = true;
},
callBackClose () {
this.$emit('close');
this.visible = false;
},
handleOk () {
this.$refs.dynamiclink.handleOk();
},
callBackOk(){
this.$emit('ok');
this.callBackClose();
},
handleCancel () {
this.callBackClose()
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:width="280"
:visible="visible"
:confirmLoading="confirmLoading"
:bodyStyle ="bodyStyle"
:mask = "false"
destroyOnClose
:footer="null"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<div style="height: 300px;overflow: hidden;overflow-y: auto;overflow-x: auto;">
<template v-for="(item, key, index) in nodeInfos">
<table class="gridtable">
<tbody>
<tr>
<th width="90">任务名称</th>
<td width="150">{{ item.taskName}}</td>
</tr>
<tr>
<th width="90">执行人</th>
<td width="150">{{ item.taskAssigneeId}}</td>
</tr>
<tr>
<th width="90">开始时间</th>
<td width="150">{{ item.taskBeginTime }}</td>
</tr>
<tr>
<th width="90">结束时间</th>
<td width="150">{{ item.taskEndTime }}</td>
</tr>
<tr>
<th width="90">耗时</th>
<td width="150">{{ item.durationStr }}</td>
</tr>
<tr>
<th width="90">意见</th>
<td width="150">{{ item.remarks }}</td>
</tr>
</tbody>
</table>
</template>
</div>
</a-spin>
</a-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
export default {
name: "ProcNodeInfoModel",
data () {
return {
title:"任务审批详情",
visible: false,
bodyStyle:{
padding: "0",
},
confirmLoading: false,
validatorRules:{
},
nodeInfos:[],
}
},
created () {
},
methods: {
showInfo(record,taskId) {
this.nodeInfos = [];
for (var item of record) {
if(item.taskId == taskId){
this.nodeInfos.push(item);
}
}
this.visible = true;
},
close() {
this.nodeInfos = [];
this.visible = false;
},
handleCancel () {
this.nodeInfos = [];
this.visible = false;
},
}
}
</script>
<style scoped>
table.gridtable {
margin: 0 auto;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #ddd;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #ddd;
background-color: #eee;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #ddd;
background-color: #ffffff;
}
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:width="900"
:visible="visible"
:confirmLoading="confirmLoading"
@cancel="handleCancel"
:bodyStyle="bodyStyle"
style="top: 50px;"
destroyOnClose
:footer="null"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<img :src="picUrl" alt="流程图" usemap="#planetmap"/>
<map name="planetmap">
<template v-for="(item, key, index) in nodePositionInfo.positionList">
<area shape="rect" :coords="item.coords" title="Venus" @mouseover="showNodeInfo(nodePositionInfo.hisTasks,item.id)">
</template>
</map>
</a-spin>
<proc-node-info-model ref="nodeInfoModel"></proc-node-info-model>
</a-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import qs from 'qs';
import ProcNodeInfoModel from "./ProcNodeInfoModel.vue";
export default {
components: {ProcNodeInfoModel},
name: "ProcessInstPicModal",
data () {
return {
title:"操作",
visible: false,
nodePositionInfo:{},
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
bodyStyle:{
"overflow-y":"auto",
"overflow-x":"auto",
height:(window.innerHeight-280)+"px",
},
confirmLoading: false,
picUrl:"",
url: {
getProcessInfo: "/process/extActFlowData/getProcessInfo",
getNodePositionInfo:"/act/task/getNodePositionInfo",
},
}
},
created () {
},
methods: {
preview(flowCode,dataId){
this.visible = true;
var params = {
flowCode:flowCode,
dataId:dataId
};//查询条件
this.confirmLoading = true;
getAction(this.url.getProcessInfo,params).then((res)=>{
if(res.success){
var processInstanceId = res.result.processInstanceId;
this.picUrl = this.getResourceURL(processInstanceId);
this.getNodePositionInfoData(processInstanceId);
console.log("---流程图----",this.picUrl)
}else{
this.$message.warning(res.message);
}
}).catch(e => {
console.error(e)
}).then(() => {
this.confirmLoading = false;
})
},
close () {
this.$emit('close');
this.visible = false;
},
handleCancel () {
this.close()
},
// 获取静态资源访问地址
getResourceURL(processInstanceId) {
var params = qs.stringify({
//'token': Cookies.get('token'),
'_t': Date.parse(new Date())/1000,
'processInstanceId': processInstanceId
})
return `${window._CONFIG['domianURL']}/act/process/processPic?${params}`
},
// 获取静态资源访问地址
getResourceURL(processInstanceId) {
var params = qs.stringify({
//'token': Cookies.get('token'),
'_t': Date.parse(new Date())/1000,
'processInstanceId': processInstanceId
})
return `${window._CONFIG['domianURL']}/act/process/processPic?${params}`
},
// 查询坐标信息数据
getNodePositionInfoData(processInstanceId) {
var params = {processInstanceId:processInstanceId};//查询条件
getAction(this.url.getNodePositionInfo,params).then(res => {
if (res.success) {
this.nodePositionInfo = res.result
}
}).catch(e => {
console.error(e)
}).then(() => {
})
},
showNodeInfo(data,taskId){
this.$refs.nodeInfoModel.close();
this.$refs.nodeInfoModel.showInfo(data,taskId);
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
# JDictSelectTag 组件用法
----
- 从字典表获取数据,dictCode格式说明: 字典code
```html
<j-dict-select-tag v-model="queryParam.sex" placeholder="请输入用户性别"
dictCode="sex"/>
```
v-decorator用法:
```html
<j-dict-select-tag v-decorator="['sex', {}]" :triggerChange="true" placeholder="请输入用户性别"
dictCode="sex"/>
```
- 从数据库表获取字典数据,dictCode格式说明: 表名,文本字段,取值字段
```html
<j-dict-select-tag v-model="queryParam.username" placeholder="请选择用户名称"
dictCode="sys_user,realname,id"/>
```
# JDictSelectUtil.js 列表字典函数用法
----
- 第一步: 引入依赖方法
```html
import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
```
- 第二步: 在created()初始化方法执行字典配置方法
```html
//初始化字典配置
this.initDictConfig();
```
- 第三步: 实现initDictConfig方法,加载列表所需要的字典(列表上有多个字典项,就执行多次initDictOptions方法)
```html
initDictConfig() {
//初始化字典 - 性别
initDictOptions('sex').then((res) => {
if (res.success) {
this.sexDictOptions = res.result;
}
});
},
```
- 第四步: 实现字段的customRender方法
```html
customRender: (text, record, index) => {
//字典值替换通用方法
return filterDictText(this.sexDictOptions, text);
}
```
\ No newline at end of file
<template>
<a-modal
:width="modalWidth"
:visible="visible"
:title="title"
@ok="handleSubmit"
@cancel="close"
cancelText="关闭"
style="margin-top: -70px"
wrapClassName="ant-modal-cust-warp"
>
<a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
<a-col :md="6" :sm="24">
<a-card :bordered="false">
<!--组织机构-->
<a-directory-tree
selectable
:selectedKeys="selectedKeys"
:checkStrictly="true"
@select="this.onSelect"
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
:treeData="departTree"
/>
</a-card>
</a-col>
<a-col :md="18" :sm="24">
<a-card :bordered="false">
用户账号:
<a-input-search
:style="{width:'150px',marginBottom:'15px'}"
placeholder="请输入用户账号"
v-model="queryParam.username"
@search="onSearch"
></a-input-search>
<a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
<!--用户列表-->
<a-table
ref="table"
:scroll="scrollTrigger"
size="middle"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
</a-table>
</a-card>
</a-col>
</a-row>
</a-modal>
</template>
<script>
import { filterObj } from '@/utils/util'
import { queryDepartTreeList, getUserList, queryUserByDepId, queryUserRoleMap } from '@/api/api'
export default {
name: 'JSearchUserByDep',
components: {},
data() {
return {
queryParam: {
username:"",
},
columns: [
{
title: '用户账号',
align: 'center',
dataIndex: 'username'
},
{
title: '真实姓名',
align: 'center',
dataIndex: 'realname'
},
{
title: '角色名称',
align: 'center',
dataIndex: 'roleName'
},
{
title: '性别',
align: 'center',
dataIndex: 'sex',
customRender: function(text) {
if (text === 1) {
return '男'
} else if (text === 2) {
return '女'
} else {
return text
}
}
},
{
title: '手机号码',
align: 'center',
dataIndex: 'phone'
},
{
title: '邮箱',
align: 'center',
dataIndex: 'email'
}
],
scrollTrigger: {},
dataSource: [],
selectedKeys: [],
userNameArr: [],
departName: '',
userRolesMap: {},
title: '',
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
isorter: {
column: 'createTime',
order: 'desc'
},
selectedRowKeys: [],
selectedRows: [],
modalWidth: 1250,
departTree: [],
visible: false,
form: this.$form.createForm(this)
}
},
created() {
// 该方法触发屏幕自适应
this.resetScreenSize();
this.queryUserRoleMap();
},
methods: {
loadData(arg) {
if (arg === 1) {
this.ipagination.current = 1;
}
let params = this.getQueryParams();//查询条件
getUserList(params).then((res) => {
if (res.success) {
this.dataSource = res.result.records;
this.assignRoleName(this.dataSource);
this.ipagination.total = res.result.total;
}
})
},
queryUserRoleMap(){
queryUserRoleMap().then((res) => {
if (res.success) {
this.userRolesMap = res.result;
this.loadData();
}
})
},
// 触发屏幕自适应
resetScreenSize() {
let screenWidth = document.body.clientWidth;
if (screenWidth < 500) {
this.scrollTrigger = { x: 800 };
} else {
this.scrollTrigger = {};
}
},
showModal() {
this.visible = true;
this.assignRoleName(this.dataSource);
this.queryDepartTree();
this.form.resetFields();
},
getQueryParams() {
let param = Object.assign({}, this.queryParam, this.isorter);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
return filterObj(param);
},
getQueryField() {
let str = 'id,';
for (let a = 0; a < this.columns.length; a++) {
str += ',' + this.columns[a].dataIndex;
}
return str;
},
searchReset(num) {
let that = this;
if(num !== 0){
that.queryParam = {};
that.loadData(1);
}
that.selectedRowKeys = [];
that.userNameArr = [];
that.selectedKeys = [];
},
close() {
this.searchReset(0);
this.visible = false;
},
handleTableChange(pagination, filters, sorter) {
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
}
this.ipagination = pagination;
this.loadData();
},
handleSubmit() {
let that = this;
for (let i = 0, len = this.selectedRowKeys.length; i < len; i++) {
this.getUserNames(this.selectedRowKeys[i]);
}
that.$emit('ok', that.userNameArr.join(','));
that.close();
},
// 遍历匹配,获取用户真实姓名
getUserNames(rowId) {
let dataSource = this.dataSource;
for (let i = 0, len = dataSource.length; i < len; i++) {
if (rowId === dataSource[i].id) {
this.userNameArr.push(dataSource[i].realname);
}
}
},
// 点击树节点,筛选出对应的用户
onSelect(selectedKeys) {
if (selectedKeys[0] != null) {
this.queryUserByDepId(selectedKeys); // 调用方法根据选选择的id查询用户信息
if (this.selectedKeys[0] !== selectedKeys[0]) {
this.selectedKeys = [selectedKeys[0]];
}
}
},
onSelectChange(selectedRowKeys, selectionRows) {
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectionRows;
},
onSearch() {
this.loadData(1);
},
// 根据选择的id来查询用户信息
queryUserByDepId(selectedKeys) {
queryUserByDepId({ id: selectedKeys.toString() }).then((res) => {
if (res.success) {
this.dataSource = res.result;
this.ipagination.total = res.result.length;
this.assignRoleName(this.dataSource);
}
})
},
// 传入用户id,找到匹配的角色名称
queryUserRole(userId) {
let map = this.userRolesMap;
let roleName = [];
for (var key in map) {
if (userId === key) {
roleName.push(map[key]);
}
}
return roleName.join(',');
},
queryDepartTree() {
queryDepartTreeList().then((res) => {
if (res.success) {
this.departTree = res.result;
}
})
},
// 为角色名称赋值
assignRoleName(data) {
let userId = '';
let role = '';
for (let i = 0, length = data.length; i < length; i++) {
userId = this.dataSource[i].id;
role = this.queryUserRole(userId);
this.dataSource[i].roleName = role;
}
},
modalFormOk() {
this.loadData();
}
}
}
</script>
<style scoped>
.ant-table-tbody .ant-table-row td {
padding-top: 10px;
padding-bottom: 10px;
}
#components-layout-demo-custom-trigger .trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
}
</style>
\ No newline at end of file
<template>
<div>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel">
<div>
<a-form-item label="用户名:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input-search placeholder="点击右侧按钮选择用户" disabled @search="onSearch" v-model="userNames">
<a-button slot="enterButton" icon="search">选择</a-button>
</a-input-search>
</a-form-item>
</div>
</a-modal>
<!-- 用户查询列表 -->
<select-user-list-modal ref="selectUserListModal" @ok="getUserCallBack"></select-user-list-modal>
</div>
</template>
<script>
import {getUserList} from '@/api/api'
import SelectUserListModal from './modal/SelectUserListModal'
export default {
name: "SelectUserModal",
components: {
SelectUserListModal,
},
props: ['taskId'],
data() {
return {
title: "操作",
visible: false,
selectUserListVisible: false,
model: {},
confirmLoading: false,
userNames: '',
userKeys: '',
}
},
created() {
},
methods: {
open() {
this.userNames = ''
this.userKeys = ''
this.visible = true;
},
close() {
this.$emit('close');
this.visible = false;
},
handleCancel() {
this.close()
},
onSearch() {
this.$refs.selectUserListModal.open();
},
getUserCallBack(selectionRows) {
console.log(selectionRows)
let names = ''
let keys = ''
for (let row of selectionRows) {
names = row.realname + "," + names
keys = row.username + "," + keys
}
this.userNames = names
this.userKeys = keys
console.log('--userkeys--' + this.userKeys)
},
handleSubmit() {
console.log("taskId: "+ this.taskId)
this.$emit('ok', this.userKeys,this.taskId);
this.close()
},
}
}
</script>
<style>
</style>
import { UserLayout, TabLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
/**
* 走菜单,走权限控制
* @type {[null,null]}
*/
export const asyncRouterMap = [
{
path: '/',
name: 'dashboard',
component: TabLayout,
meta: { title: '首页' },
redirect: '/dashboard/workplace',
children: [
// // account
// {
// path: '/account',
// component: RouteView,
// name: 'account',
// meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
// children: [
// {
// path: '/account/center',
// name: 'center',
// component: () => import('@/views/account/center/Index'),
// meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
// },
// {
// path: '/account/settings',
// name: 'settings',
// component: () => import('@/views/account/settings/Index'),
// meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
// redirect: '/account/settings/base',
// alwaysShow: true,
// children: [
// {
// path: '/account/settings/base',
// name: 'BaseSettings',
// component: () => import('@/views/account/settings/BaseSetting'),
// meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
// },
// {
// path: '/account/settings/security',
// name: 'SecuritySettings',
// component: () => import('@/views/account/settings/Security'),
// meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
// },
// {
// path: '/account/settings/custom',
// name: 'CustomSettings',
// component: () => import('@/views/account/settings/Custom'),
// meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
// },
// {
// path: '/account/settings/binding',
// name: 'BindingSettings',
// component: () => import('@/views/account/settings/Binding'),
// meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
// },
// {
// path: '/account/settings/notification',
// name: 'NotificationSettings',
// component: () => import('@/views/account/settings/Notification'),
// meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
// },
// ]
// },
// ]
// }
]
},
{
path: '*', redirect: '/404', hidden: true
}
]
/**
* 基础路由
* @type { *[] }
*/
export const constantRouterMap = [
{
path: '/user',
component: UserLayout,
redirect: '/user/login',
hidden: true,
children: [
{
path: 'login',
name: 'login',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
},
{
path: 'register',
name: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
},
{
path: 'register-result',
name: 'registerResult',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
},
]
},
// {
// path: '/',
// name: 'index',
// component: TabLayout,
// meta: {title: '首页'},
// redirect: '/dashboard/workplace',
// children: [
// {
// path: '/online',
// name: 'online',
// redirect: '/online',
// component: RouteView,
// meta: {title: '在线开发', icon: 'dashboard', permission: ['dashboard']},
// children: [
// {
// path: '/online/auto/:code',
// name: 'report',
// component: () => import('@/views/modules/online/cgreport/OnlCgreportAutoList')
// },
// ]
// },
// ]
// },
{
path: '/test',
component: BlankLayout,
redirect: '/test/home',
children: [
{
path: 'home',
name: 'TestHome',
component: () => import('@/views/Home')
}
]
},
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
},
]
<template>
<div class="card-list" ref="content">
<a-list
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
:dataSource="dataSource"
>
<a-list-item slot="renderItem" slot-scope="item, index">
<template v-if="item === null">
<a-button class="new-btn" type="dashed">
<a-icon type="plus"/>
新增产品
</a-button>
</template>
<template v-else>
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
<div class="meta-content" slot="description">{{ item.content }}</div>
</a-card-meta>
<template class="ant-card-actions" slot="actions">
<a>操作一</a>
<a>操作二</a>
</template>
</a-card>
</template>
</a-list-item>
</a-list>
</div>
</template>
<script>
const dataSource = []
dataSource.push(null)
for (let i = 0; i < 11; i++) {
dataSource.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
content: '在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。'
})
}
export default {
name: "CardList",
data () {
return {
description: '段落示意:蚂蚁金服务设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态, 提供跨越设计与开发的体验解决方案。',
linkList: [
{ icon: 'rocket', href: '#', title: '快速开始' },
{ icon: 'info-circle-o', href: '#', title: '产品简介' },
{ icon: 'file-text', href: '#', title: '产品文档' }
],
extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
dataSource
}
}
}
</script>
<style lang="scss" scoped>
.card-avatar {
width: 48px;
height: 48px;
border-radius: 48px;
}
.ant-card-actions {
background: #f7f9fa;
li {
float: left;
text-align: center;
margin: 12px 0;
color: rgba(0, 0, 0, 0.45);
width: 50%;
&:not(:last-child) {
border-right: 1px solid #e8e8e8;
}
a {
color: rgba(0, 0, 0, .45);
line-height: 22px;
display: inline-block;
width: 100%;
&:hover {
color: #1890ff;
}
}
}
}
.new-btn {
background-color: #fff;
border-radius: 2px;
width: 100%;
height: 188px;
}
.meta-content {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 64px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
\ No newline at end of file
<template>
<div class="search-content">
<router-view />
</div>
</template>
<script>
export default {
name: "SearchLayout",
data () {
return {
tabs: {
items: [
{
key: '1',
title: '文章'
},
{
key: '2',
title: '项目'
},
{
key: '3',
title: '应用'
},
],
active: () => {
switch (this.$route.path) {
case '/list/search/article':
return '1'
case '/list/search/project':
return '2'
case '/list/search/application':
return '3'
default:
return '1'
}
},
callback: (key) => {
switch (key) {
case '1':
this.$router.push('/list/search/article')
break
case '2':
this.$router.push('/list/search/project')
break
case '3':
this.$router.push('/list/search/application')
break
default:
this.$router.push('/workplace')
}
}
},
search: true
}
},
computed: {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.search-head{
background-color: #fff;
margin: -25px -24px -24px;
.search-input{
text-align: center;
margin-bottom: 16px;
}
}
.search-content{
margin-top: 48px;
}
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板标题">
<a-input disabled v-model="templateName"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容">
<a-textarea disabled v-model="templateContent" :autosize="{ minRows: 5, maxRows: 8 }"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="测试数据">
<a-textarea placeholder="请输入json格式测试数据" v-model="testData" :autosize="{ minRows: 5, maxRows: 8 }"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息类型">
<j-dict-select-tag
v-model="msgType"
placeholder="请选择消息类型"
dictCode="msgType"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息接收方">
<a-input placeholder="请输入消息接收方" v-model="receiver"/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
export default {
name: "SysMessageTestModal",
data() {
return {
title: "操作",
visible: false,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
url: {
send: "/message/sysMessageTemplate/sendMsg",
},
templateName: "",
templateContent: "",
receiver: "",
msgType: "",
testData: "",
sendParams: {}
}
},
methods: {
open(record) {
this.sendParams.templateCode = record.templateCode;
this.templateName = record.templateName;
this.templateContent = record.templateContent;
this.testData = record.templateTestJson;
this.visible = true;
},
close() {
this.receiver = "";
this.msgType = "";
this.sendParams = {};
this.visible = false;
},
handleOk() {
let httpurl = this.url.send;
let method = 'post';
this.sendParams.testData = this.testData;
this.sendParams.receiver = this.receiver;
this.sendParams.msgType = this.msgType;
httpAction(httpurl, this.sendParams, method).then((res) => {
if (res.success) {
this.$message.success(res.message);
} else {
this.$message.warning(res.message);
}
}).finally(() => {
this.confirmLoading = false;
this.close();
})
},
handleCancel() {
this.close()
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-card title="磁盘监控">
<a-row>
<template v-if="diskInfo && diskInfo.length>0">
<a-col :span="8" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
<dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo>
</a-col>
</template>
</a-row>
</a-card>
</template>
<script>
import { getAction } from '@/api/manage'
import DashChartDemo from '@/components/chart/DashChartDemo'
import ARow from 'ant-design-vue/es/grid/Row'
export default {
name: 'DiskMonitoring',
components:{
ARow,
DashChartDemo,
},
data() {
return {
description: '磁盘监控',
//数据集
diskInfo:[],
url:{
queryDiskInfo:'actuator/redis/queryDiskInfo',
}
}
},
created() {
getAction(this.url.queryDiskInfo).then((res)=>{
if(res.success){
for(var i=0;i<res.result.length;i++){
res.result[i].restPPT = res.result[i].restPPT/10;
}
this.diskInfo = res.result;
}
})
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false" class="card-area">
<a-alert type="info" :showIcon="true">
<div slot="message">
共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即刷新</a>
</div>
</a-alert>
<!-- 表格区域 -->
<a-table
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:loading="tableLoading"
:scroll="{ x: 900 }"
style="margin-top: 20px;"
@change="handleTableChange">
<template slot="timeTaken" slot-scope="text">
<a-tag v-if="text < 500" color="green">{{ text }} ms</a-tag>
<a-tag v-else-if="text < 1000" color="cyan">{{ text }} ms</a-tag>
<a-tag v-else-if="text < 1500" color="orange">{{ text }} ms</a-tag>
<a-tag v-else color="red">{{ text }} ms</a-tag>
</template>
<template slot="responseStatus" slot-scope="text">
<a-tag v-if="text < 200" color="pink">{{ text }} ms</a-tag>
<a-tag v-else-if="text < 201" color="green">{{ text }} ms</a-tag>
<a-tag v-else-if="text < 399" color="cyan">{{ text }} ms</a-tag>
<a-tag v-else-if="text < 403" color="orange">{{ text }} ms</a-tag>
<a-tag v-else-if="text < 501" color="red">{{ text }} ms</a-tag>
<span v-else>{{ text }} ms</span>
</template>
<template slot="requestMethod" slot-scope="text">
<a-tag v-if="text === 'GET'" color="#87d068">{{ text }}</a-tag>
<a-tag v-else-if="text === 'POST'" color="#2db7f5">{{ text }}</a-tag>
<a-tag v-else-if="text === 'PUT'" color="#ffba5a">{{ text }}</a-tag>
<a-tag v-else-if="text === 'DELETE'" color="#f50">{{ text }}</a-tag>
<span v-else>{{ text }} ms</span>
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
advanced: false,
dataSource: [],
pagination: {
defaultPageSize: 10,
defaultCurrent: 1,
pageSizeOptions: ['10', '20', '30', '40', '100'],
showQuickJumper: true,
showSizeChanger: true,
showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录,共 ${total} 条记录`
},
loading: true,
tableLoading: true
}
},
computed: {
columns() {
return [{
title: '请求时间',
dataIndex: 'timestamp',
customRender(text) {
return moment(text).format('YYYY-MM-DD HH:mm:ss')
}
}, {
title: '请求方法',
dataIndex: 'request.method',
scopedSlots: { customRender: 'requestMethod' },
filters: [
{ text: 'GET', value: 'GET' },
{ text: 'POST', value: 'POST' },
{ text: 'PUT', value: 'PUT' },
{ text: 'DELETE', value: 'DELETE' }
],
filterMultiple: true,
onFilter: (value, record) => record.request.method.includes(value)
}, {
title: '请求URL',
dataIndex: 'request.uri',
customRender(text) {
return text.split('?')[0]
}
}, {
title: '响应状态',
dataIndex: 'response.status',
scopedSlots: { customRender: 'responseStatus' }
}, {
title: '请求耗时',
dataIndex: 'timeTaken',
scopedSlots: { customRender: 'timeTaken' }
}]
}
},
mounted() {
this.fetch()
},
methods: {
handleClickUpdate() {
this.fetch()
},
handleTableChange() {
this.fetch()
},
fetch() {
this.tableLoading = true
getAction('actuator/httptrace').then((data) => {
let filterData = []
for (let d of data.traces) {
if (d.request.method !== 'OPTIONS' && d.request.uri.indexOf('httptrace') === -1) {
filterData.push(d)
}
}
this.dataSource = filterData
}).catch((e) => {
console.error(e)
this.$message.error('获取HTTP信息失败')
}).finally(() => {
this.loading = false
this.tableLoading = false
})
}
}
}
</script>
<style></style>
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false">
<a-alert type="info" :showIcon="true">
<div slot="message">
上次更新时间:{{ this.time }}
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即更新</a>
</div>
</a-alert>
<a-table
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="tableLoading"
style="margin-top: 20px;">
<template slot="param" slot-scope="text, record">
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
</template>
<template slot="text" slot-scope="text, record">
{{ textInfo[record.param].text }}
</template>
<template slot="value" slot-scope="text, record">
{{ text }} {{ textInfo[record.param].unit }}
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
time: '',
loading: true,
tableLoading: true,
columns: [{
title: '参数',
width: '30%',
dataIndex: 'param',
scopedSlots: { customRender: 'param' }
}, {
title: '描述',
width: '40%',
dataIndex: 'text',
scopedSlots: { customRender: 'text' }
}, {
title: '当前值',
width: '30%',
dataIndex: 'value',
scopedSlots: { customRender: 'value' }
}],
dataSource: [],
// 列表通过 textInfo 渲染出颜色、描述和单位
textInfo: {
'jvm.memory.max': { color: 'purple', text: 'JVM 最大内存', unit: 'MB' },
'jvm.memory.committed': { color: 'purple', text: 'JVM 可用内存', unit: 'MB' },
'jvm.memory.used': { color: 'purple', text: 'JVM 已用内存', unit: 'MB' },
'jvm.buffer.memory.used': { color: 'cyan', text: 'JVM 缓冲区已用内存', unit: 'MB' },
'jvm.buffer.count': { color: 'cyan', text: '当前缓冲区数量', unit: '个' },
'jvm.threads.daemon': { color: 'green', text: 'JVM 守护线程数量', unit: '个' },
'jvm.threads.live': { color: 'green', text: 'JVM 当前活跃线程数量', unit: '个' },
'jvm.threads.peak': { color: 'green', text: 'JVM 峰值线程数量', unit: '个' },
'jvm.classes.loaded': { color: 'orange', text: 'JVM 已加载 Class 数量', unit: '个' },
'jvm.classes.unloaded': { color: 'orange', text: 'JVM 未加载 Class 数量', unit: '个' },
'jvm.gc.memory.allocated': { color: 'pink', text: 'GC 时, 年轻代分配的内存空间', unit: 'MB' },
'jvm.gc.memory.promoted': { color: 'pink', text: 'GC 时, 老年代分配的内存空间', unit: 'MB' },
'jvm.gc.max.data.size': { color: 'pink', text: 'GC 时, 老年代的最大内存空间', unit: 'MB' },
'jvm.gc.live.data.size': { color: 'pink', text: 'FullGC 时, 老年代的内存空间', unit: 'MB' },
'jvm.gc.pause.count': { color: 'blue', text: '系统启动以来GC 次数', unit: '次' },
'jvm.gc.pause.totalTime': { color: 'blue', text: '系统启动以来GC 总耗时', unit: '秒' }
},
// 当一条记录中需要取出多条数据的时候需要配置该字段
moreInfo: {
'jvm.gc.pause': ['.count', '.totalTime']
}
}
},
mounted() {
this.loadTomcatInfo()
},
methods: {
handleClickUpdate() {
this.loadTomcatInfo()
},
loadTomcatInfo() {
this.tableLoading = true
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
Promise.all([
getAction('actuator/metrics/jvm.memory.max'),
getAction('actuator/metrics/jvm.memory.committed'),
getAction('actuator/metrics/jvm.memory.used'),
getAction('actuator/metrics/jvm.buffer.memory.used'),
getAction('actuator/metrics/jvm.buffer.count'),
getAction('actuator/metrics/jvm.threads.daemon'),
getAction('actuator/metrics/jvm.threads.live'),
getAction('actuator/metrics/jvm.threads.peak'),
getAction('actuator/metrics/jvm.classes.loaded'),
getAction('actuator/metrics/jvm.classes.unloaded'),
getAction('actuator/metrics/jvm.gc.memory.allocated'),
getAction('actuator/metrics/jvm.gc.memory.promoted'),
getAction('actuator/metrics/jvm.gc.max.data.size'),
getAction('actuator/metrics/jvm.gc.live.data.size'),
getAction('actuator/metrics/jvm.gc.pause')
]).then((res) => {
let info = []
res.forEach((value, id) => {
let more = this.moreInfo[value.name]
if (!(more instanceof Array)) {
more = ['']
}
more.forEach((item, idx) => {
let param = value.name + item
let val = value.measurements[idx].value
if (param === 'jvm.memory.max'
|| param === 'jvm.memory.committed'
|| param === 'jvm.memory.used'
|| param === 'jvm.buffer.memory.used'
|| param === 'jvm.gc.memory.allocated'
|| param === 'jvm.gc.memory.promoted'
|| param === 'jvm.gc.max.data.size'
|| param === 'jvm.gc.live.data.size'
) {
val = this.convert(val, Number)
}
info.push({ id: param + id, param, text: 'false value', value: val })
})
})
this.dataSource = info
}).catch((e) => {
console.error(e)
this.$message.error('获取JVM信息失败')
}).finally(() => {
this.loading = false
this.tableLoading = false
})
},
convert(value, type) {
if (type === Number) {
return Number(value / 1048576).toFixed(3)
} else if (type === Date) {
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
}
return value
}
}
}
</script>
<style></style>
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card>
<!-- Radis 信息实时监控 -->
<a-row :gutter="8">
<a-col :sm="24" :xl="12">
<area-chart-ty v-bind="memory"/>
</a-col>
<a-col :sm="24" :xl="12">
<area-chart-ty v-bind="key"/>
</a-col>
</a-row>
<h3>Redis 详细信息</h3>
<a-table
:loading="tableLoading"
:columns="columns"
:dataSource="redisInfo"
:pagination="false"/>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
import AreaChartTy from '@/components/chart/AreaChartTy'
export default {
name: 'RedisInfo',
components: {
AreaChartTy
},
data() {
return {
loading: true,
tableLoading: true,
timer: null,
millisec: 3000,
key: {
title: 'Radis Key 实时数量(个)',
dataSource: [],
y: '数量(个)',
height: 340,
max: 100,
color: '#FF6987',
lineSize: 8,
lineColor: '#DC143C'
},
memory: {
title: 'Radis 内存实时占用情况(KB)',
dataSource: [],
y: '内存(KB)',
max: 3000,
height: 340,
lineSize: 8
},
redisInfo: [],
columns: [{
title: 'Key',
align: 'center',
dataIndex: 'key'
}, {
title: 'Description',
align: 'left',
dataIndex: 'description'
}, {
title: 'Value',
align: 'center',
dataIndex: 'value'
}],
url: {
keysSize: '/actuator/redis/keysSize',
memoryInfo: '/actuator/redis/memoryInfo',
info: '/actuator/redis/info'
}
}
},
watch: {
// '$route'(to, from) {
// console.log(to, from)
// let path = '/monitor/redis/info'
// if (to.path === path) this.openTimer(), console.log('to')
// if (from.path === path) this.closeTimer(), console.log('from'),
// this.$destroy()
// }
},
mounted() {
this.openTimer()
this.loadRedisInfo()
setTimeout(() => {
this.loadData()
}, 1000)
},
beforeDestroy() {
this.closeTimer()//, console.log('beforeDestroy')
},
methods: {
/** 开启定时器 */
openTimer() {
this.loadData()
this.closeTimer()
this.timer = setInterval(() => {
if (this.$route.path === '/monitor/redis/info') {
this.loadData()
}
}, this.millisec)
},
/** 关闭定时器 */
closeTimer() {
if (this.timer) clearInterval(this.timer)
},
/** 查询数据 */
loadData() {
Promise.all([
getAction(this.url.keysSize),
getAction(this.url.memoryInfo)
]).then((res) => {
let time = moment().format('hh:mm:ss')
let [{ dbSize: currentSize }, memoryInfo] = res
let currentMemory = memoryInfo.used_memory / 1000
// push 数据
this.key.dataSource.push({ x: time, y: currentSize })
this.memory.dataSource.push({ x: time, y: currentMemory })
// 最大长度为6
if (this.key.dataSource.length > 6) {
this.key.dataSource.splice(0, 1)
this.memory.dataSource.splice(0, 1)
}
// 计算最大值阈值
let maxKey = this.getMaxValue(this.key.dataSource, 'y')
this.key.max = Math.floor(maxKey) + 10
let maxMemory = this.getMaxValue(this.memory.dataSource, 'y')
this.memory.max = Math.floor(maxMemory) + 100
}).catch((e) => {
console.error(e)
this.closeTimer()
this.$message.error('获取 Redis 信息失败')
}).finally(() => {
this.loading = false
})
},
getMaxValue(dataSource, f) {
let maxValue = null
dataSource.forEach(item => {
let value = Number.parseInt(item[f])
if (maxValue == null) {
maxValue = value
} else if (value > maxValue) {
maxValue = value
}
})
return maxValue
},
loadRedisInfo() {
this.tableLoading = true
getAction(this.url.info).then((res) => {
this.redisInfo = res.result
}).finally(() => {
this.tableLoading = false
})
}
}
}
</script>
<style></style>
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false">
<a-alert type="info" :showIcon="true">
<div slot="message">
上次更新时间:{{ this.time }}
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即更新</a>
</div>
</a-alert>
<a-table
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="tableLoading"
style="margin-top: 20px;">
<template slot="param" slot-scope="text, record">
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
</template>
<template slot="text" slot-scope="text, record">
{{ textInfo[record.param].text }}
</template>
<template slot="value" slot-scope="text, record">
{{ text }} {{ textInfo[record.param].unit }}
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
time: '',
loading: true,
tableLoading: true,
columns: [{
title: '参数',
width: '30%',
dataIndex: 'param',
scopedSlots: { customRender: 'param' }
}, {
title: '描述',
width: '40%',
dataIndex: 'text',
scopedSlots: { customRender: 'text' }
}, {
title: '当前值',
width: '30%',
dataIndex: 'value',
scopedSlots: { customRender: 'value' }
}],
dataSource: [],
// 列表通过 textInfo 渲染出颜色、描述和单位
textInfo: {
'system.cpu.count': { color: 'green', text: 'CPU 数量', unit: '核' },
'system.cpu.usage': { color: 'green', text: '系统 CPU 使用率', unit: '%' },
'process.start.time': { color: 'purple', text: '应用启动时间点', unit: '' },
'process.uptime': { color: 'purple', text: '应用已运行时间', unit: '秒' },
'process.cpu.usage': { color: 'purple', text: '当前应用 CPU 使用率', unit: '%' }
},
// 当一条记录中需要取出多条数据的时候需要配置该字段
moreInfo: {}
}
},
mounted() {
this.loadTomcatInfo()
},
methods: {
handleClickUpdate() {
this.loadTomcatInfo()
},
loadTomcatInfo() {
this.tableLoading = true
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
Promise.all([
getAction('actuator/metrics/system.cpu.count'),
getAction('actuator/metrics/system.cpu.usage'),
getAction('actuator/metrics/process.start.time'),
getAction('actuator/metrics/process.uptime'),
getAction('actuator/metrics/process.cpu.usage')
]).then((res) => {
let info = []
res.forEach((value, id) => {
let more = this.moreInfo[value.name]
if (!(more instanceof Array)) {
more = ['']
}
more.forEach((item, idx) => {
let param = value.name + item
let val = value.measurements[idx].value
if (param === 'system.cpu.usage' || param === 'process.cpu.usage') {
val = this.convert(val, Number)
}
if (param === 'process.start.time') {
val = this.convert(val, Date)
}
info.push({ id: param + id, param, text: 'false value', value: val })
})
})
this.dataSource = info
}).catch((e) => {
console.error(e)
this.$message.error('获取服务器信息失败')
}).finally(() => {
this.loading = false
this.tableLoading = false
})
},
convert(value, type) {
if (type === Number) {
return Number(value * 100).toFixed(2)
} else if (type === Date) {
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
}
return value
}
}
}
</script>
<style></style>
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false">
<a-alert type="info" :showIcon="true">
<div slot="message">
上次更新时间:{{ this.time }}
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即更新</a>
</div>
</a-alert>
<a-table
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="tableLoading"
style="margin-top: 20px;">
<template slot="param" slot-scope="text, record">
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
</template>
<template slot="text" slot-scope="text, record">
{{ textInfo[record.param].text }}
</template>
<template slot="value" slot-scope="text, record">
{{ text }} {{ textInfo[record.param].unit }}
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
time: '',
loading: true,
tableLoading: true,
columns: [{
title: '参数',
width: '30%',
dataIndex: 'param',
scopedSlots: { customRender: 'param' }
}, {
title: '描述',
width: '40%',
dataIndex: 'text',
scopedSlots: { customRender: 'text' }
}, {
title: '当前值',
width: '30%',
dataIndex: 'value',
scopedSlots: { customRender: 'value' }
}],
dataSource: [],
// 列表通过 textInfo 渲染出颜色、描述和单位
textInfo: {
'tomcat.sessions.created': { color: 'green', text: 'tomcat 已创建 session 数', unit: '个' },
'tomcat.sessions.expired': { color: 'green', text: 'tomcat 已过期 session 数', unit: '个' },
'tomcat.sessions.active.current': { color: 'green', text: 'tomcat 当前活跃 session 数', unit: '个' },
'tomcat.sessions.active.max': { color: 'green', text: 'tomcat 活跃 session 数峰值', unit: '个' },
'tomcat.sessions.rejected': { color: 'green', text: '超过session 最大配置后,拒绝的 session 个数', unit: '个' },
'tomcat.global.sent': { color: 'purple', text: '发送的字节数', unit: 'bytes' },
'tomcat.global.request.max': { color: 'purple', text: 'request 请求最长耗时', unit: '秒' },
'tomcat.global.request.count': { color: 'purple', text: '全局 request 请求次数', unit: '次' },
'tomcat.global.request.totalTime': { color: 'purple', text: '全局 request 请求总耗时', unit: '秒' },
'tomcat.servlet.request.max': { color: 'cyan', text: 'servlet 请求最长耗时', unit: '秒' },
'tomcat.servlet.request.count': { color: 'cyan', text: 'servlet 总请求次数', unit: '次' },
'tomcat.servlet.request.totalTime': { color: 'cyan', text: 'servlet 请求总耗时', unit: '秒' },
'tomcat.threads.current': { color: 'pink', text: 'tomcat 当前线程数(包括守护线程)', unit: '个' },
'tomcat.threads.config.max': { color: 'pink', text: 'tomcat 配置的线程最大数', unit: '个' }
},
// 当一条记录中需要取出多条数据的时候需要配置该字段
moreInfo: {
'tomcat.global.request': ['.count', '.totalTime'],
'tomcat.servlet.request': ['.count', '.totalTime']
}
}
},
mounted() {
this.loadTomcatInfo()
},
methods: {
handleClickUpdate() {
this.loadTomcatInfo()
},
loadTomcatInfo() {
this.tableLoading = true
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
Promise.all([
getAction('actuator/metrics/tomcat.sessions.created'),
getAction('actuator/metrics/tomcat.sessions.expired'),
getAction('actuator/metrics/tomcat.sessions.active.current'),
getAction('actuator/metrics/tomcat.sessions.active.max'),
getAction('actuator/metrics/tomcat.sessions.rejected'),
getAction('actuator/metrics/tomcat.global.sent'),
getAction('actuator/metrics/tomcat.global.request.max'),
getAction('actuator/metrics/tomcat.global.request'),
// 2.1.3.RELEASE 无此API
//getAction('actuator/metrics/tomcat.servlet.request'),
// getAction('actuator/metrics/tomcat.servlet.request.max'),
getAction('actuator/metrics/tomcat.threads.current'),
getAction('actuator/metrics/tomcat.threads.config.max')
]).then((res) => {
let tomcatInfo = []
res.forEach((value, id) => {
let more = this.moreInfo[value.name]
if (!(more instanceof Array)) {
more = ['']
}
more.forEach((item, idx) => {
let param = value.name + item
tomcatInfo.push({
id: param + id, param,
text: 'false value',
value: value.measurements[idx].value
})
})
})
this.dataSource = tomcatInfo
}).catch((e) => {
console.error(e)
this.$message.error('获取Tomcat信息失败')
}).finally(() => {
this.loading = false
this.tableLoading = false
})
}
}
}
</script>
<style></style>
<template>
<page-layout :title="title">
<a-card :bordered="false">
<detail-list title="退款申请">
<detail-list-item term="取货单号">1000000000</detail-list-item>
<detail-list-item term="状态">已取货</detail-list-item>
<detail-list-item term="销售单号">1234123421</detail-list-item>
<detail-list-item term="子订单">3214321432</detail-list-item>
</detail-list>
<a-divider style="margin-bottom: 32px"/>
<detail-list title="用户信息">
<detail-list-item term="用户姓名">付小小</detail-list-item>
<detail-list-item term="联系电话">18100000000</detail-list-item>
<detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
<detail-list-item term="取货地址">浙江省杭州市西湖区万塘路18号</detail-list-item>
<detail-list-item term="备注"></detail-list-item>
</detail-list>
<a-divider style="margin-bottom: 32px"/>
<div class="title">退货商品</div>
<s-table
style="margin-bottom: 24px"
:columns="goodsColumns"
:data="loadGoodsData">
</s-table>
<div class="title">退货进度</div>
<s-table
style="margin-bottom: 24px"
:columns="scheduleColumns"
:data="loadScheduleData">
<template
slot="status"
slot-scope="status">
<a-badge :status="status" :text="status | statusFilter"/>
</template>
</s-table>
</a-card>
</page-layout>
</template>
<script>
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import ABadge from "ant-design-vue/es/badge/Badge"
const DetailListItem = DetailList.Item
export default {
components: {
PageLayout,
ABadge,
DetailList,
DetailListItem,
STable
},
data () {
return {
goodsColumns: [
{
title: '商品编号',
dataIndex: 'id',
key: 'id'
},
{
title: '商品名称',
dataIndex: 'name',
key: 'name'
},
{
title: '商品条码',
dataIndex: 'barcode',
key: 'barcode'
},
{
title: '单价',
dataIndex: 'price',
key: 'price',
align: 'right'
},
{
title: '数量(件)',
dataIndex: 'num',
key: 'num',
align: 'right'
},
{
title: '金额',
dataIndex: 'amount',
key: 'amount',
align: 'right'
}
],
// 加载数据方法 必须为 Promise 对象
loadGoodsData: () => {
return new Promise((resolve => {
resolve({
data: [
{
id: '1234561',
name: '矿泉水 550ml',
barcode: '12421432143214321',
price: '2.00',
num: '1',
amount: '2.00'
},
{
id: '1234562',
name: '凉茶 300ml',
barcode: '12421432143214322',
price: '3.00',
num: '2',
amount: '6.00'
},
{
id: '1234563',
name: '好吃的薯片',
barcode: '12421432143214323',
price: '7.00',
num: '4',
amount: '28.00'
},
{
id: '1234564',
name: '特别好吃的蛋卷',
barcode: '12421432143214324',
price: '8.50',
num: '3',
amount: '25.50'
}
],
pageSize: 10,
pageNo: 1,
totalPage: 1,
totalCount: 10
})
})).then(res => {
return res
})
},
scheduleColumns: [
{
title: '时间',
dataIndex: 'time',
key: 'time'
},
{
title: '当前进度',
dataIndex: 'rate',
key: 'rate'
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
scopedSlots: { customRender: 'status' },
},
{
title: '操作员ID',
dataIndex: 'operator',
key: 'operator'
},
{
title: '耗时',
dataIndex: 'cost',
key: 'cost'
}
],
loadScheduleData: () => {
return new Promise((resolve => {
resolve({
data: [
{
key: '1',
time: '2017-10-01 14:10',
rate: '联系客户',
status: 'processing',
operator: '取货员 ID1234',
cost: '5mins'
},
{
key: '2',
time: '2017-10-01 14:05',
rate: '取货员出发',
status: 'success',
operator: '取货员 ID1234',
cost: '1h'
},
{
key: '3',
time: '2017-10-01 13:05',
rate: '取货员接单',
status: 'success',
operator: '取货员 ID1234',
cost: '5mins'
},
{
key: '4',
time: '2017-10-01 13:00',
rate: '申请审批通过',
status: 'success',
operator: '系统',
cost: '1h'
},
{
key: '5',
time: '2017-10-01 12:00',
rate: '发起退货申请',
status: 'success',
operator: '用户',
cost: '5mins'
}
],
pageSize: 10,
pageNo: 1,
totalPage: 1,
totalCount: 10
})
})).then(res => {
return res
})
},
}
},
filters: {
statusFilter(status) {
const statusMap = {
'processing': '进行中',
'success': '完成',
'failed': '失败'
}
return statusMap[status]
}
},
computed: {
title () {
return this.$route.meta.title
}
},
}
</script>
<style lang="scss" scoped>
.title {
color: rgba(0,0,0,.85);
font-size: 16px;
font-weight: 500;
margin-bottom: 16px;
}
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<result :is-success="false" :title="title" :description="description">
<template slot="action">
<a-button type="primary" >返回修改</a-button>
</template>
<div>
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 16px">
您提交的内容有如下错误:
</div>
<div style="margin-bottom: 16px">
<a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
您的账户已被冻结
<a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
</div>
<div>
<a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
您的账户还不具备申请资格
<a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
</div>
</div>
</result>
</a-card>
</template>
<script>
import Result from './Result'
export default {
name: "Error",
components: {
Result
},
data () {
return {
title: '提交失败',
description: '请核对并修改以下信息后,再重新提交。'
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<div class="result">
<div>
<a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
</div>
<div class="title" v-if="title">{{ title }}</div>
<div class="description" v-if="description">{{ description }}</div>
<div class="content" v-if="content">
<slot></slot>
</div>
<div class="action">
<slot name="action"></slot>
</div>
</div>
</template>
<script>
export default {
name: "Result",
// 'isSuccess', 'title', 'description'
props: {
isSuccess: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
description: {
type: String,
default: ''
},
content: {
type: Boolean,
default: true
}
}
}
</script>
<style lang="scss" scoped>
.result {
text-align: center;
width: 72%;
margin: 0 auto;
padding: 24px 0 8px;
.icon {
font-size: 72px;
line-height: 72px;
margin-bottom: 24px;
}
.success {
color: #52c41a;
}
.error {
color: red;
}
.title {
font-size: 24px;
color: rgba(0, 0, 0, .85);
font-weight: 500;
line-height: 32px;
margin-bottom: 16px;
}
.description {
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.45);
margin-bottom: 24px;
}
.content {
background: #fafafa;
padding: 24px 40px;
border-radius: 2px;
text-align: left;
}
.action {
margin-top: 32px;
}
}
.mobile {
.result {
width: 100%;
margin: 0 auto;
padding: unset;
}
}
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<result :is-success="true" :description="description" :title="title">
<template slot="action">
<a-button type="primary">返回列表</a-button>
<a-button style="margin-left: 8px">查看项目</a-button>
<a-button style="margin-left: 8px">打印</a-button>
</template>
<div>
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
<a-row style="margin-bottom: 16px">
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
<span style="color: rgba(0, 0, 0, 0.85)">项目 ID:</span>
20180724089
</a-col>
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
<span style="color: rgba(0, 0, 0, 0.85)">负责人:</span>
曲丽丽是谁?
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
<span style="color: rgba(0, 0, 0, 0.85)">生效时间:</span>
2016-12-12 ~ 2017-12-12
</a-col>
</a-row>
<a-steps :current="1" :direction="isMobile() && directionType.vertical || directionType.horizontal" progressDot>
<a-step >
<span style="font-size: 14px" slot="title">创建项目</span>
<template slot="description">
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
<div style="margin: 8px 0 4px">
曲丽丽
<a-icon style="margin-left: 8px" type="dingding-o" />
</div>
<div>2016-12-12 12:32</div>
</div>
</template>
</a-step>
<a-step title="部门初审">
<span style="font-size: 14px" slot="title">部门初审</span>
<template slot="description">
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
<div style="margin: 8px 0 4px">
周毛毛
<a-icon style="margin-left: 8px; color: #00A0E9" type="dingding-o" />
</div>
<div><a href="">催一下</a></div>
</div>
</template>
</a-step>
<a-step title="财务复核">
<span style="font-size: 14px" slot="title">财务复核</span>
</a-step>
<a-step title="完成" >
<span style="font-size: 14px" slot="title">完成</span>
</a-step>
</a-steps>
</div>
</result>
</a-card>
</template>
<script>
import Result from './Result'
import { mixinDevice } from '@/utils/mixin.js'
const directionType = {
horizontal: 'horizontal',
vertical: 'vertical'
}
export default {
name: "Success",
components: {
Result
},
mixins: [mixinDevice],
data () {
return {
title: '提交成功',
description: '提交结果页用于反馈一系列操作任务的处理结果,\n' +
' 如果仅是简单操作,使用 Message 全局提示反馈即可。\n' +
' 本文字区域可以展示简单的补充说明,如果有类似展示\n' +
' “单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。',
directionType
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="表名">
<a-input placeholder="请输入表名" v-model="queryParam.dataTable"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="数据ID">
<a-input placeholder="请输入ID" v-model="queryParam.dataId"></a-input>
</a-form-item>
</a-col>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<a-button type="primary" @click="searchQuery">查询</a-button>
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleCompare()" type="primary" icon="plus">数据比较</a-button>
</div>
<!--table区 -->
<div>
<!--已选择的清空 -->
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>&nbsp;&nbsp;
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
@change="handleTableChange"
>
<!-- 字符串超长截取省略号显示-->
<span slot="dataContent" slot-scope="text, record">
<j-ellipsis :value="text" :length="80" />
</span>
</a-table>
</div>
<data-log-modal ref="modalForm" @ok="modalFormOk"></data-log-modal>
</a-card>
</template>
<script>
import DataLogModal from './modules/DataLogModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JEllipsis from "@/components/jeecg/JEllipsis";
export default {
name: 'DataLogList',
mixins: [JeecgListMixin],
components: {
JEllipsis,
DataLogModal
},
data() {
return {
description: '数据日志管理页面',
//表头
columns: [
{
title: '表名',
align: 'center',
dataIndex: 'dataTable'
}, {
title: '数据ID',
align: 'center',
dataIndex: 'dataId'
}, {
title: '版本号',
align: 'center',
dataIndex: 'dataVersion'
}, {
title: '数据内容',
align: 'center',
dataIndex: 'dataContent',
width: "120px",
scopedSlots: {customRender: 'dataContent'},
}, {
title: '创建人',
align: 'center',
dataIndex: 'createBy'
}
],
url: {
list: "/sys/dataLog/list",
},
}
},
methods: {
handleCompare: function () {
if (!this.selectionRows || this.selectionRows.length != 2) {
this.openNotifIcon('请选择两条数据');
return false;
} else if (this.selectionRows[0].dataId != this.selectionRows[1].dataId) {
this.openNotifIcon('请选择相同的数据库表和数据ID进行比较');
return false;
} else {
this.$refs.modalForm.addModal(this.selectionRows);
this.$refs.modalForm.title = "数据比较";
}
},
openNotifIcon(msg) {
this.$notification['warning']({
message: '提示信息',
description: msg,
});
},
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<!--
-->
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;" @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<sysDepart-modal ref="sysDepartModal" @ok="modalFormOk"></sysDepart-modal>
</a-card>
</template>
<script>
import SysDepartModal from './modules/DepartModal'
/* import { filterObj } from '@/utils/util'
, queryByFactories*/
import {queryDepartTreeList} from '@/api/api'
import {deleteAction} from '@/api/manage'
// 表头
const columns = [
{
title: '机构名称',
dataIndex: 'departName',
},
{
title: '机构类型',
align: "center",
dataIndex: 'orgType'
},
{
title: '机构编码',
dataIndex: 'orgCode'
},
{
title: '手机号',
dataIndex: 'mobile'
},
{
title: '传真',
dataIndex: 'fax'
},
{
title: '地址',
dataIndex: 'address'
},
{
title: '排序',
align: 'center',
dataIndex: 'departOrder'
},
{
title: '操作',
align: "center",
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
}
];
export default {
name: "DepartList2",
components: {
SysDepartModal
},
data() {
return {
description: 'jeecg 生成SysDepart代码管理页面',
// 查询条件
queryParam: {},
//数据集
factories: '',
dataSource: [],
columns: columns,
// 分页参数
/* ipagination:{
current: 1,
pageSize: 5,
pageSizeOptions: ['5', '10', '20'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},*/
isorter: {
column: 'createTime',
order: 'desc',
},
loading: false,
selectedRowKeys: [],
selectedRows: [],
url: {
list: "/sysdepart/sysDepart/list",
delete: "/sysdepart/sysDepart/delete",
deleteBatch: "/sysdepart/sysDepart/deleteBatch",
},
}
},
created() {
this.loadData();
},
methods: {
loadData() {
this.dataSource = [];
queryDepartTreeList().then((res) => {
if (res.success) {
this.dataSource = res.result;
}
})
},
getQueryField() {
//TODO 字段权限控制
var str = "id,";
for (var a = 0; a < this.columns.length; a++) {
str += "," + this.columns[a].dataIndex;
}
return str;
},
onSelectChange(selectedRowKeys, selectionRows) {
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectionRows;
},
onClearSelected() {
this.selectedRowKeys = [];
this.selectionRows = [];
},
//TODO getQueryParams
handleDelete: function (id) {
var that = this;
deleteAction(that.url.delete, {id: id}).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.loadData();
} else {
that.$message.warning(res.message);
}
});
},
handleDetail(record) {
this.$refs.sysDepartModal.edit(record);
this.$refs.sysDepartModal.title = "详情";
this.$refs.sysDepartModal.disableSubmit = true;
},
batchDel: function () {
if (this.selectedRowKeys.length <= 0) {
this.$message.warning('请选择一条记录!');
return;
} else {
var ids = "";
for (var a = 0; a < this.selectedRowKeys.length; a++) {
ids += this.selectedRowKeys[a] + ",";
}
var that = this;
this.$confirm({
title: "确认删除",
content: "是否删除选中数据?",
onOk: function () {
deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.loadData();
that.onClearSelected();
} else {
that.$message.warning(res.message);
}
});
}
});
}
},
handleEdit: function (record) {
this.$refs.sysDepartModal.edit(record);
this.$refs.sysDepartModal.title = "编辑";
},
handleAdd() {
this.$refs.sysDepartModal.add();
this.$refs.sysDepartModal.title = "新增";
},
handleTableChange(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
console.log(sorter);
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
/*this.ipagination = pagination;*/
this.loadData();
},
modalFormOk() {
// 新增/修改 成功时,重载列表
this.loadData();
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
<template>
<a-row :gutter="10">
<a-col :md="8" :sm="24">
<a-card :bordered="false">
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
<a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
<!-- 树-->
<template>
<!--组织机构-->
<a-directory-tree
selectable
:selectedKeys="selectedKeys"
:checkStrictly="true"
@select="onSelect"
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
:treeData="departTree"
/>
</template>
</div>
</a-card>
</a-col>
<a-col :md="16" :sm="24">
<a-card :bordered="false">
<a-tabs defaultActiveKey="2" @change="callback">
<a-tab-pane tab="基本信息" key="1" forceRender>
<Dept-Base-Info ref="DeptBaseInfo"></Dept-Base-Info>
</a-tab-pane>
<a-tab-pane tab="用户信息" key="2">
<Dept-User-Info ref="DeptUserInfo"></Dept-User-Info>
</a-tab-pane>
</a-tabs>
</a-card>
</a-col>
</a-row>
</template>
<script>
import DeptBaseInfo from './modules/DeptBaseInfo'
import DeptUserInfo from './modules/DeptUserInfo'
import {queryDepartTreeList, searchByKeywords} from '@/api/api'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
export default {
name: 'DepartUserList',
mixins: [JeecgListMixin],
components: {
DeptBaseInfo,
DeptUserInfo,
},
data() {
return {
currentDeptId: '',
iExpandedKeys: [],
loading: false,
autoExpandParent: true,
currFlowId: '',
currFlowName: '',
disable: true,
treeData: [],
visible: false,
departTree: [],
rightClickSelectedKey: '',
hiding: true,
model: {},
dropTrigger: '',
depart: {},
disableSubmit: false,
checkedKeys: [],
selectedKeys: [],
autoIncr: 1,
currSelected: {},
form: this.$form.createForm(this),
labelCol: {
xs: {span: 24},
sm: {span: 5}
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16}
},
graphDatasource: {
nodes: [],
edges: []
},
}
},
methods: {
callback(key) {
console.log(key)
},
loadData() {
this.refresh();
},
loadTree() {
var that = this
that.treeData = []
that.departTree = []
queryDepartTreeList().then((res) => {
if (res.success) {
for (let i = 0; i < res.result.length; i++) {
let temp = res.result[i]
that.treeData.push(temp)
that.departTree.push(temp)
that.setThisExpandedKeys(temp)
// console.log(temp.id)
}
this.loading = false
}
})
},
setThisExpandedKeys(node) {
if (node.children && node.children.length > 0) {
this.iExpandedKeys.push(node.key)
for (let a = 0; a < node.children.length; a++) {
this.setThisExpandedKeys(node.children[a])
}
}
},
refresh() {
this.loading = true
this.loadTree()
},
onExpand(expandedKeys) {
// console.log('onExpand', expandedKeys)
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.iExpandedKeys = expandedKeys
this.autoExpandParent = false
},
onSearch(value) {
let that = this
if (value) {
searchByKeywords({keyWord: value}).then((res) => {
if (res.success) {
that.departTree = []
for (let i = 0; i < res.result.length; i++) {
let temp = res.result[i]
that.departTree.push(temp)
}
} else {
that.$message.warning(res.message)
}
})
} else {
that.loadTree()
}
},
onCheck(checkedKeys, e) {
let record = e.node.dataRef;
// console.log('onCheck', checkedKeys, e);
this.checkedKeys = [];
// if (e.checked === true) {
this.currentDeptId = record.id;
this.checkedKeys.push(record.id);
this.$refs.DeptBaseInfo.open(record);
this.$refs.DeptUserInfo.open(record);
// }
// else {
// this.checkedKeys = [];
// this.$refs.DeptBaseInfo.clearForm();
// this.$refs.DeptUserInfo.clearList();
// }
this.hiding = false;
// this.checkedKeys = checkedKeys.checked
},
onSelect(selectedKeys, e) {
if (this.selectedKeys[0] !== selectedKeys[0]) {
this.selectedKeys = [selectedKeys[0]];
}
let record = e.node.dataRef;
this.checkedKeys.push(record.id);
this.$refs.DeptBaseInfo.open(record);
this.$refs.DeptUserInfo.onClearSelected();
this.$refs.DeptUserInfo.open(record);
},
},
created() {
this.currFlowId = this.$route.params.id
this.currFlowName = this.$route.params.name
// this.loadTree()
},
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 抽屉 -->
<a-drawer
title="字典列表"
:width="screenWidth"
@close="onClose"
:visible="visible"
>
<!-- 抽屉内容的border -->
<div
:style="{
padding:'10px',
border: '1px solid #e9e9e9',
background: '#fff',
}">
<div class="table-page-search-wrapper">
<a-form layout="inline" :form="form">
<a-row :gutter="10">
<a-col :md="8" :sm="12">
<a-form-item label="名称">
<a-input style="width: 120px;" placeholder="请输入名称" v-model="queryParam.itemText"></a-input>
</a-form-item>
</a-col>
<a-col :md="9" :sm="24">
<a-form-item label="状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select
placeholder="请选择"
v-model="queryParam.status"
>
<a-select-option value="1">正常</a-select-option>
<a-select-option value="0">禁用</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="7" :sm="24">
<span style="float: left;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery">搜索</a-button>
<a-button type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
<a-row>
<a-col :md="2" :sm="24">
<a-button style="margin-bottom: 10px" type="primary" @click="handleAdd">新增</a-button>
</a-col>
</a-row>
</a-form>
</div>
<div>
<a-table
ref="table"
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
@change="handleTableChange"
>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</span>
</a-table>
</div>
</div>
</a-drawer>
<dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
</a-card>
</template>
<script>
import pick from 'lodash.pick'
import {filterObj} from '@/utils/util';
import DictItemModal from './modules/DictItemModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
export default {
name: "DictItemList",
mixins: [JeecgListMixin],
components: {DictItemModal},
data() {
return {
columns: [
{
title: '名称',
align: "center",
dataIndex: 'itemText',
},
{
title: '数据值',
align: "center",
dataIndex: 'itemValue',
},
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}
],
queryParam: {
dictId: "",
dictName: "",
itemText: "",
delFlag: "1",
status: [],
},
title: "操作",
visible: false,
screenWidth: 800,
model: {},
dictId: "",
status: 1,
labelCol: {
xs: {span: 5},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 12},
sm: {span: 12},
},
form: this.$form.createForm(this),
validatorRules: {
itemText: {rules: [{required: true, message: '请输入名称!'}]},
itemValue: {rules: [{required: true, message: '请输入数据值!'}]},
},
url: {
list: "/sys/dictItem/list",
delete: "/sys/dictItem/delete",
deleteBatch: "/sys/dictItem/deleteBatch",
},
}
},
created() {
// 当页面初始化时,根据屏幕大小来给抽屉设置宽度
this.resetScreenSize();
},
methods: {
add(dictId) {
this.dictId = dictId;
this.edit({});
},
edit(record) {
if (record.id) {
this.dictId = record.id;
}
this.queryParam = {}
this.form.resetFields();
this.model = Object.assign({}, record);
this.model.dictId = this.dictId;
this.model.status = this.status;
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'itemText', 'itemValue'))
});
// 当其它模块调用该模块时,调用此方法加载字典数据
this.loadData();
},
getQueryParams() {
var param = Object.assign({}, this.queryParam);
param.dictId = this.dictId;
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
return filterObj(param);
},
// 添加字典数据
handleAdd() {
this.$refs.modalForm.add(this.dictId);
this.$refs.modalForm.title = "新增";
},
showDrawer() {
this.visible = true
},
onClose() {
this.visible = false
this.form.resetFields();
this.dataSource = [];
},
// 抽屉的宽度随着屏幕大小来改变
resetScreenSize() {
let screenWidth = document.body.clientWidth;
if (screenWidth < 600) {
this.screenWidth = screenWidth;
} else {
this.screenWidth = 600;
}
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 左侧面板 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="12">
<a-col :md="7" :sm="8">
<a-form-item label="字典名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
<a-input placeholder="请输入字典名称" v-model="queryParam.dictName"></a-input>
</a-form-item>
</a-col>
<a-col :md="7" :sm="8">
<a-form-item label="字典编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
<a-input placeholder="请输入字典编号" v-model="queryParam.dictCode"></a-input>
</a-form-item>
</a-col>
<a-col :md="7" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
<div class="table-operator" style="border-top: 5px">
<a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('字典信息')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
</div>
<a-table
ref="table"
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">
<a-icon type="edit"/>
编辑
</a>
<a-divider type="vertical"/>
<a @click="editDictItem(record)"><a-icon type="setting"/> 字典配置</a>
<a-divider type="vertical"/>
<a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</span>
</a-table>
</div>
<dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal> <!-- 字典类型 -->
<dict-item-list ref="dictItemList"></dict-item-list>
</a-card>
</template>
<script>
import { filterObj } from '@/utils/util';
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import DictModal from './modules/DictModal'
import DictItemList from './DictItemList'
export default {
name: "DictList",
mixins:[JeecgListMixin],
components: {DictModal, DictItemList},
data() {
return {
description: '这是数据字典页面',
visible: false,
// 查询条件
queryParam: {
dictCode: "",
dictName: "",
},
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 120,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '字典名称',
align: "left",
dataIndex: 'dictName',
},
{
title: '字典编号',
align: "left",
dataIndex: 'dictCode',
},
{
title: '描述',
align: "left",
dataIndex: 'description',
},
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}
],
dict: "",
labelCol: {
xs: {span: 8},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 16},
sm: {span: 19},
},
url: {
list: "/sys/dict/list",
delete: "/sys/dict/delete",
exportXlsUrl: "sys/dict/exportXls",
importExcelUrl: "sys/dict/importExcel",
},
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {
getQueryParams() {
var param = Object.assign({}, this.queryParam, this.isorter);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
return filterObj(param);
},
//取消选择
cancelDict() {
this.dict = "";
this.visible = false;
this.loadData();
},
//编辑字典数据
editDictItem(record) {
this.$refs.dictItemList.edit(record);
},
// 重置字典类型搜索框的内容
searchReset() {
var that = this;
that.queryParam.dictName = "";
that.queryParam.dictCode = "";
that.loadData(this.ipagination.current);
},
},
watch: {
openKeys(val) {
console.log('openKeys', val)
},
},
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!--导航区域-->
<div>
<a-tabs defaultActiveKey="1" @change="callback">
<a-tab-pane tab="登录日志" key="1"></a-tab-pane>
<a-tab-pane tab="操作日志" key="2"></a-tab-pane>
</a-tabs>
</div>
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="搜索日志">
<a-input placeholder="请输入搜索关键词" v-model="queryParam.keyWord"></a-input>
</a-form-item>
</a-col>
<a-col :md="8" :sm="10">
<a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-range-picker
style="width: 210px"
v-model="queryParam.createTimeRange"
format="YYYY-MM-DD"
:placeholder="['开始时间', '结束时间']"
@change="onDateChange"
@ok="onDateOk"
/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="10" >
<span style="float: right;" class="table-page-search-submitButtons">
<a-button type="primary" style="left: -35px" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px;left: -35px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- table区域-begin -->
<a-table
ref="table"
size="middle"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
@change="handleTableChange">
<p v-show="queryParam.logType==2" slot="expandedRowRender" slot-scope="record" style="margin: 0">
请求方法: {{ record.method }}
<a-divider dashed/>
请求参数: {{ record.requestParam }}
</p>
</a-table>
<!-- table区域-end -->
</a-card>
</template>
<script>
import { filterObj } from '@/utils/util';
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
name: "LogList",
mixins:[JeecgListMixin],
data () {
return {
description: '这是日志管理页面',
// 查询条件
queryParam: {
ipInfo:'',
createTimeRange:[],
logType:'1',
keyWord:'',
},
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title: '日志内容',
align:"left",
dataIndex: 'logContent',
sorter: true
},
{
title: '操作人ID',
dataIndex: 'userid',
align:"center",
sorter: true
},
{
title: '操作人名称',
dataIndex: 'username',
align:"center",
sorter: true
},
{
title: 'IP',
dataIndex: 'ip',
align:"center",
sorter: true
},
{
title: '耗时(毫秒)',
dataIndex: 'costTime',
align:"center",
sorter: true
},
{
title: '日志类型',
dataIndex: 'logType_dictText',
/*customRender:function (text) {
if(text==1){
return "登录日志";
}else if(text==2){
return "操作日志";
}else{
return text;
}
},*/
align:"center",
},
{
title: '创建时间',
dataIndex: 'createTime',
align:"center",
sorter: true
}
],
labelCol: {
xs: { span: 1 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 10 },
sm: { span: 16 },
},
url: {
list: "/sys/log/list",
},
}
},
methods: {
getQueryParams(){
console.log(this.queryParam.createTimeRange)
var param = Object.assign({}, this.queryParam,this.isorter);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
delete param.createTimeRange; // 时间参数不传递后台
return filterObj(param);
},
// 重置
searchReset(){
var that = this;
var logType = that.queryParam.logType;
that.queryParam = {}; //清空查询区域参数
that.queryParam.logType = logType;
that.loadData(this.ipagination.current);
},
// 日志类型
callback(key){
let that=this;
that.queryParam.logType=key;
that.loadData();
},
onDateChange: function (value, dateString) {
console.log(dateString[0],dateString[1]);
this.queryParam.createTime_begin=dateString[0];
this.queryParam.createTime_end=dateString[1];
},
onDateOk(value) {
console.log(value);
},
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
<template>
<a-drawer
title="数据权限规则"
:width="drawerWidth"
@close="onClose"
:visible="visible"
:wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
>
<!-- 抽屉内容的border -->
<div
:style="{
padding:'10px',
border: '1px solid #e9e9e9',
background: '#fff',
}">
<div class="table-page-search-wrapper">
<a-form>
<a-row :gutter="12">
<a-col :md="8" :sm="8">
<a-form-item label="规则名称" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
<a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
</a-form-item>
</a-col>
<a-col :md="8" :sm="8">
<a-form-item label="规则值" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
<a-input placeholder="请输入规则值" v-model="queryParam.ruleValue"></a-input>
</a-form-item>
</a-col>
<a-col :md="7" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
<a-row>
<a-col :md="24" :sm="24">
<a-button style="margin-bottom: 10px" @click="addPermissionRule" type="primary" icon="plus">添加</a-button>
</a-col>
</a-row>
</a-form>
<a-table
ref="table"
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:loading="loading"
:rowClassName="getRowClassname">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">
<a-icon type="edit"/>编辑
</a>
<a-divider type="vertical"/>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</span>
</a-table>
</div>
</div>
<permission-data-rule-modal @ok="modalFormOk" ref="modalForm"></permission-data-rule-modal>
</a-drawer>
</template>
<script>
import {getPermissionRuleList, queryPermissionRule} from '@/api/api'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import PermissionDataRuleModal from './modules/PermissionDataRuleModal'
const columns = [
{
title: '规则名称',
dataIndex: 'ruleName',
key: 'ruleName'
},
{
title: '规则字段',
dataIndex: 'ruleColumn',
key: 'ruleColumn'
},
{
title: '规则值',
dataIndex: 'ruleValue',
key: 'ruleValue'
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
align: 'center'
}
]
export default {
name: 'PermissionDataRuleList',
mixins: [JeecgListMixin],
components: {
PermissionDataRuleModal
},
data() {
return {
queryParam: {},
drawerWidth: 650,
columns: columns,
permId: '',
visible: false,
form: this.$form.createForm(this),
loading: false,
url: {
list: "/sys/permission/getPermRuleListByPermId",
delete: "/sys/permission/deletePermissionRule",
},
}
},
created() {
this.resetScreenSize()
},
methods: {
loadData() {
let that = this
this.dataSource = []
var params = this.getQueryParams()//查询条件
getPermissionRuleList(params).then((res) => {
if (res.success) {
that.dataSource = res.result
}
})
},
edit(record) {
if (record.id) {
this.visible = true
this.permId = record.id
}
this.queryParam = {}
this.queryParam.permissionId = record.id
this.visible = true
this.loadData()
this.resetScreenSize()
},
addPermissionRule() {
this.$refs.modalForm.add(this.permId)
this.$refs.modalForm.title = '新增'
},
searchQuery() {
var params = this.getQueryParams();
params.permissionId = this.permId;
queryPermissionRule(params).then((res) => {
if (res.success) {
this.dataSource = res.result
}
})
},
searchReset() {
this.queryParam = {}
this.queryParam.permissionId = this.permId
this.loadData(1);
},
onClose() {
this.visible = false
},
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize() {
let screenWidth = document.body.clientWidth
if (screenWidth < 500) {
this.drawerWidth = screenWidth
} else {
this.drawerWidth = 650
}
},
getRowClassname(record){
if(record.status!=1){
return "data-rule-invalid"
}
}
}
}
</script>
<style>
.data-rule-invalid{
background: #f4f4f4;
color: #bababa;
}
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button
@click="batchDel"
v-if="selectedRowKeys.length > 0"
ghost
type="primary"
icon="delete">批量删除
</a-button>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
selectedRowKeys.length }}</a>&nbsp;&nbsp;
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
:columns="columns"
size="middle"
:pagination="false"
:dataSource="dataSource"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;" @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" @click="handleDataRule(record)">数据规则</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
<!-- 字符串超长截取省略号显示 -->
<span slot="url" slot-scope="text">
<j-ellipsis :value="text" :length="25"/>
</span>
<!-- 字符串超长截取省略号显示-->
<span slot="component" slot-scope="text">
<j-ellipsis :value="text"/>
</span>
</a-table>
</div>
<!-- table区域-end -->
<permission-modal ref="modalForm" @ok="modalFormOk"></permission-modal>
<permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list>
</a-card>
</template>
<script>
import PermissionModal from './modules/PermissionModal'
import { getPermissionList } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import PermissionDataRuleList from './PermissionDataRuleList'
import JEllipsis from '@/components/jeecg/JEllipsis'
const columns = [
{
title: '菜单名称',
dataIndex: 'name',
key: 'name'
}, {
title: '菜单类型',
dataIndex: 'menuType',
key: 'menuType',
customRender: function(text) {
if (text == 0) {
return '菜单'
} else if (text == 1) {
return '菜单'
} else if (text == 2) {
return '按钮'
} else {
return text
}
}
},/*{
title: '权限编码',
dataIndex: 'perms',
key: 'permissionCode',
},*/{
title: 'icon',
dataIndex: 'icon',
key: 'icon'
},
{
title: '组件',
dataIndex: 'component',
key: 'component',
scopedSlots: { customRender: 'component' }
},
{
title: '路径',
dataIndex: 'url',
key: 'url',
scopedSlots: { customRender: 'url' }
},
{
title: '排序',
dataIndex: 'sortNo',
key: 'sortNo'
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 150
}
]
export default {
name: 'PermissionList',
mixins: [JeecgListMixin],
components: {
PermissionDataRuleList,
PermissionModal,
JEllipsis
},
data() {
return {
description: '这是菜单管理页面',
// 表头
columns: columns,
loading: false,
url: {
list: '/sys/permission/list',
delete: '/sys/permission/delete',
deleteBatch: '/sys/permission/deleteBatch'
}
}
},
methods: {
loadData() {
this.dataSource = []
getPermissionList().then((res) => {
if (res.success) {
console.log(res.result)
this.dataSource = res.result
}
})
},
// 打开数据规则编辑
handleDataRule(record) {
this.$refs.PermissionDataRuleList.edit(record)
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="10">
<a-form-item label="任务类名">
<a-input placeholder="请输入任务类名" v-model="queryParam.jobClassName"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="10">
<a-form-item label="任务状态">
<a-select style="width: 220px" v-model="queryParam.status" placeholder="请选择状态">
<a-select-option value="">全部</a-select-option>
<a-select-option value="0">正常</a-select-option>
<a-select-option value="-1">停止</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="10" >
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('定时任务信息')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<!-- 字符串超长截取省略号显示-->
<span slot="description" slot-scope="text">
<j-ellipsis :value="text" :length="25" />
</span>
<span slot="action" slot-scope="text, record">
<a @click="resumeJob(record)" v-if="record.status==-1">启动</a>
<a @click="pauseJob(record)" v-if="record.status==0">停止</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item><a @click="handleEdit(record)">编辑</a></a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
<!-- 状态渲染模板 -->
<template slot="customRenderStatus" slot-scope="status">
<a-tag v-if="status==0" color="green">已启动</a-tag>
<a-tag v-if="status==-1" color="orange">已暂停</a-tag>
</template>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
</a-card>
</template>
<script>
import QuartzJobModal from './modules/QuartzJobModal'
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from "@/components/jeecg/JEllipsis";
export default {
name: "QuartzJobList",
mixins:[JeecgListMixin],
components: {
QuartzJobModal,
JEllipsis
},
data () {
return {
description: '定时任务在线管理',
// 查询条件
queryParam: {},
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title: '任务类名',
align:"center",
dataIndex: 'jobClassName',
sorter: true,
/* customRender:function (text) {
return "*"+text.substring(9,text.length);
}*/
},
{
title: 'cron表达式',
align:"center",
dataIndex: 'cronExpression'
},
{
title: '参数',
align:"center",
dataIndex: 'parameter'
},
{
title: '描述',
align:"center",
width: 300,
dataIndex: 'description',
scopedSlots: {customRender: 'description'},
},
{
title: '状态',
align:"center",
dataIndex: 'status',
scopedSlots: { customRender: 'customRenderStatus' },
filterMultiple: false,
filters: [
{ text: '已启动', value: '0' },
{ text: '已暂停', value: '-1' },
]
},
{
title: '操作',
dataIndex: 'action',
align:"center",
width:180,
scopedSlots: { customRender: 'action' },
}
],
url: {
list: "/sys/quartzJob/list",
delete: "/sys/quartzJob/delete",
deleteBatch: "/sys/quartzJob/deleteBatch",
pause: "/sys/quartzJob/pause",
resume: "/sys/quartzJob/resume",
exportXlsUrl: "sys/quartzJob/exportXls",
importExcelUrl: "sys/quartzJob/importExcel",
},
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {
//筛选需要重写handleTableChange
handleTableChange(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
//这种筛选方式只支持单选
this.filters.status = filters.status[0];
this.ipagination = pagination;
this.loadData();
},
pauseJob: function(record){
var that = this;
//暂停定时任务
this.$confirm({
title:"确认暂停",
content:"是否暂停选中任务?",
onOk: function(){
getAction(that.url.pause,{jobClassName:record.jobClassName}).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.loadData();
that.onClearSelected();
}else{
that.$message.warning(res.message);
}
});
}
});
},
resumeJob: function(record){
var that = this;
//恢复定时任务
this.$confirm({
title:"确认启动",
content:"是否启动选中任务?",
onOk: function(){
getAction(that.url.resume,{jobClassName:record.jobClassName}).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.loadData();
that.onClearSelected();
}else{
that.$message.warning(res.message);
}
});
}
});
},
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
<template>
<a-card :bordered="false" class="card-area">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<!-- 搜索区域 -->
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
<a-input placeholder="请输入名称查询" v-model="queryParam.roleName"></a-input>
</a-form-item>
</a-col>
<a-col :md="10" :sm="12">
<a-form-item label="创建时间" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
<j-date v-model="queryParam.createTime_begin" :showTime="true" date-format="YYYY-MM-DD HH:mm:ss" style="width:45%" placeholder="请选择开始时间" ></j-date>
<span style="width: 10px;">~</span>
<j-date v-model="queryParam.createTime_end" :showTime="true" date-format="YYYY-MM-DD HH:mm:ss" style="width:45%" placeholder="请选择结束时间"></j-date>
</a-form-item>
</a-col>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<a-button type="primary" @click="searchQuery">查询</a-button>
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator" style="margin-top: 5px">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('角色信息')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px">
批量操作 <a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>&nbsp;&nbsp;
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down" />
</a>
<a-menu slot="overlay">
<a-menu-item>
<a @click="handlePerssion(record.id)">授权</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
<user-role-modal ref="modalUserRole"></user-role-modal>
</a-card>
</template>
<script>
import RoleModal from './modules/RoleModal'
import UserRoleModal from './modules/UserRoleModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate'
export default {
name: "RoleList",
mixins:[JeecgListMixin],
components: {
RoleModal,
UserRoleModal,
JDate
},
data () {
return {
description: '角色管理页面',
// 查询条件
queryParam: {roleName:'',},
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title: '角色名称',
align:"center",
dataIndex: 'roleName'
},
{
title: '角色编码',
align:"center",
dataIndex: 'roleCode'
},
{
title: '备注',
align:"center",
dataIndex: 'description'
},
{
title: '创建时间',
dataIndex: 'createTime',
align:"center",
sorter: true
},
{
title: '更新时间',
dataIndex: 'updateTime',
align:"center",
sorter: true
},
{
title: '操作',
dataIndex: 'action',
align:"center",
scopedSlots: { customRender: 'action' },
}
],
url: {
list: "/sys/role/list",
delete: "/sys/role/delete",
deleteBatch: "/sys/role/deleteBatch",
exportXlsUrl: "/sys/role/exportXls",
importExcelUrl: "sys/role/importExcel",
},
}
},
computed: {
importExcelUrl: function(){
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {
handlePerssion: function(roleId){
// alert(roleId);
this.$refs.modalUserRole.show(roleId);
},
onChangeDate(date, dateString) {
console.log(date, dateString);
},
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :span="6">
<a-form-item label="标题">
<a-input placeholder="请输入标题" v-model="queryParam.titile"></a-input>
</a-form-item>
</a-col>
<!--<a-col :span="6">
<a-form-item label="内容">
<a-input placeholder="请输入内容" v-model="queryParam.msgContent"></a-input>
</a-form-item>
</a-col>-->
<a-col :span="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('系统通告')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item v-if="record.sendStatus == 0">
<a-popconfirm title="确定发布吗?" @confirm="() => releaseData(record.id)">
<a>发布</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item v-if="record.sendStatus == 1">
<a-popconfirm title="确定撤销吗?" @confirm="() => reovkeData(record.id)">
<a>撤销</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<sysAnnouncement-modal ref="modalForm" @ok="modalFormOk"></sysAnnouncement-modal>
</a-card>
</template>
<script>
import SysAnnouncementModal from './modules/SysAnnouncementModal'
import {doReleaseData, doReovkeData} from '@/api/api'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
export default {
name: "SysAnnouncementList",
mixins: [JeecgListMixin],
components: {
SysAnnouncementModal
},
data() {
return {
description: '系统通告表管理页面',
// 查询条件
queryParam: {},
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '标题',
align: "center",
dataIndex: 'titile'
},
{
title: '消息类型',
align: "center",
dataIndex: 'msgCategory',
customRender: function (text) {
if (text == '1') {
return "通知公告";
} else if (text == "2") {
return "系统消息";
} else {
return text;
}
}
},
/*{
title: '开始时间',
align: "center",
dataIndex: 'startTime'
},
{
title: '结束时间',
align: "center",
dataIndex: 'endTime'
},*/
{
title: '发布人',
align: "center",
dataIndex: 'sender'
},
{
title: '优先级',
align: "center",
dataIndex: 'priority',
customRender: function (text) {
if (text == 'L') {
return "低";
} else if (text == "M") {
return "中";
} else if (text == "H") {
return "高";
} else {
return text;
}
}
},
{
title: '通告对象',
align: "center",
dataIndex: 'msgType',
customRender: function (text) {
if (text == 'USER') {
return "指定用户";
} else if (text == "ALL") {
return "全体用户";
} else {
return text;
}
}
},
{
title: '发布状态',
align: "center",
dataIndex: 'sendStatus',
customRender: function (text) {
if (text == 0) {
return "未发布";
} else if (text == 1) {
return "已发布";
} else if (text == 2) {
return "已撤销";
} else {
return text;
}
}
},
{
title: '发布时间',
align: "center",
dataIndex: 'sendTime'
},
{
title: '撤销时间',
align: "center",
dataIndex: 'cancelTime'
},
/*{
title: '删除状态(0,正常,1已删除)',
align:"center",
dataIndex: 'delFlag'
},*/
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}
],
url: {
list: "/sys/annountCement/list",
delete: "/sys/annountCement/delete",
deleteBatch: "/sys/annountCement/deleteBatch",
releaseDataUrl: "/sys/annountCement/doReleaseData",
reovkeDataUrl: "sys/annountCement/doReovkeData",
exportXlsUrl: "sys/annountCement/exportXls",
importExcelUrl: "sys/annountCement/importExcel",
},
}
},
computed: {
importExcelUrl: function(){
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {
//执行发布操作
releaseData: function (id) {
console.log(id);
var that = this;
doReleaseData({id: id}).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.loadData(1);
} else {
that.$message.warning(res.message);
}
});
},
//执行撤销操作
reovkeData: function (id) {
var that = this;
doReovkeData({id: id}).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.loadData(1);
} else {
that.$message.warning(res.message);
}
});
},
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment