2.1.3 大屏版本发布

This commit is contained in:
zhangdaihao
2019-12-25 13:25:10 +08:00
parent 131cdc87c9
commit c9f407c6b3
60 changed files with 2970 additions and 806 deletions

View File

@ -1,269 +1,41 @@
<template>
<div class="page-header-index-wide">
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="总销售额" total="126,560">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<trend flag="up" style="margin-right: 16px;">
<span slot="term">周同比</span>
12%
</trend>
<trend flag="down">
<span slot="term">日同比</span>
11%
</trend>
</div>
<template slot="footer">日均销售额<span>¥ 234.56</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area />
</div>
<template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-bar :height="40" />
</div>
<template slot="footer">转化率 <span>60%</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="运营活动效果" total="78%">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
</div>
<template slot="footer">
<trend flag="down" style="margin-right: 16px;">
<span slot="term">同周比</span>
12%
</trend>
<trend flag="up">
<span slot="term">日环比</span>
80%
</trend>
</template>
</chart-card>
</a-col>
</a-row>
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}" />
</div>
<a-tab-pane loading="true" tab="销售额" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额排行" :dataSource="barData"/>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<rank-list title="门店销售排行榜" :list="rankList"/>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="访问量" key="2">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额趋势" :dataSource="barData"/>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<rank-list title="门店销售排行榜" :list="rankList"/>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</div>
</a-card>
<a-row>
<a-col :span="24">
<a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
<a-row>
<a-col :span="6">
<head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="environment" style="font-size: 24px" />
</a-spin>
</a-col>
<a-col :span="6">
<head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="team" style="font-size: 24px" />
</a-spin>
</a-col>
<a-col :span="6">
<head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="rise" style="font-size: 24px" />
</a-spin>
</a-col>
</a-row>
<line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
</a-card>
</a-col>
</a-row>
<div>
<index-chart v-if="indexStyle==1"></index-chart>
<index-bdc v-if="indexStyle==2"></index-bdc>
<index-task v-if="indexStyle==3"></index-task>
<div style="width: 100%;text-align: right;margin-top: 20px">
请选择首页样式
<a-radio-group v-model="indexStyle">
<a-radio :value="1">统计图表</a-radio>
<a-radio :value="2">统计图表2</a-radio>
<a-radio :value="3">任务表格</a-radio>
</a-radio-group>
</div>
</div>
</template>
<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import IndexChart from './IndexChart'
import IndexTask from "./IndexTask"
import IndexBdc from './IndexBdc'
import Trend from '@/components/Trend'
import { getLoginfo,getVisitInfo } from '@/api/api'
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '白鹭岛 ' + (i+1) + ' 号店',
total: 1234.56 - i * 100
})
}
const barData = []
for (let i = 0; i < 12; i += 1) {
barData.push({
x: `${i + 1}月`,
y: Math.floor(Math.random() * 1000) + 200
})
}
export default {
name: "Analysis",
components: {
ATooltip,
ACol,
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
LineChartMultid,
HeadInfo
IndexChart,
IndexTask,
IndexBdc
},
data() {
return {
loading: true,
center: null,
rankList,
barData,
loginfo:{},
visitFields:['ip','visit'],
visitInfo:[],
indicator: <a-icon type="loading" style="font-size: 24px" spin />
indexStyle:1
}
},
created() {
setTimeout(() => {
this.loading = !this.loading
}, 1000)
this.initLogInfo();
},
methods: {
initLogInfo () {
getLoginfo(null).then((res)=>{
if(res.success){
Object.keys(res.result).forEach(key=>{
res.result[key] =res.result[key]+""
})
this.loginfo = res.result;
}
})
getVisitInfo().then(res=>{
if(res.success){
console.log("aaaaaa",res.result)
this.visitInfo = res.result;
}
})
},
}
}
</script>
<style lang="scss" scoped>
.circle-cust{
position: relative;
top: 28px;
left: -100%;
}
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
/* 首页访问量统计 */
.head-info {
position: relative;
text-align: left;
padding: 0 32px 0 0;
min-width: 125px;
&.center {
text-align: center;
padding: 0 32px;
}
span {
color: rgba(0, 0, 0, .45);
display: inline-block;
font-size: .95rem;
line-height: 42px;
margin-bottom: 4px;
}
p {
line-height: 42px;
margin: 0;
a {
font-weight: 600;
font-size: 1rem;
}
}
}
</style>
</script>

View File

@ -0,0 +1,519 @@
<template>
<div class="page-header-index-wide">
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area :datasource="chartData.sll" />
</div>
<template slot="footer">今日受理量:<span>{{ todaySll }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area :datasource="chartData.bjl"/>
</div>
<template slot="footer">今日办结量:<span>{{ todayBjl }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-bar :datasource="chartData.isll" :height="50"/>
</div>
<template slot="footer">用户今日受理量:<span>{{ todayISll }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-bar :datasource="chartData.ibjl" :height="50"/>
</div>
<template slot="footer">用户今日办结量:<span>{{ todayIBjl }}</span></template>
</chart-card>
</a-col>
</a-row>
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}" />
</div>
<a-tab-pane loading="true" tab="受理监管" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<index-bar title="受理量统计" />
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a-row>
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="交互监管" key="2">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar-multid :sourceData="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a-row>
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="存储监管" key="4">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<a-row>
<template v-if="diskInfo && diskInfo.length>0">
<a-col :span="12" 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-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a-row>
<a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</div>
</a-card>
<a-row :gutter="12">
<a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">
<a-tabs v-model="indexBottomTab" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<a-radio-group v-model="indexRegisterType" @change="changeRegisterType">
<a-radio-button value="转移登记">转移登记</a-radio-button>
<a-radio-button value="抵押登记">抵押登记</a-radio-button>
<a-radio-button value="">所有</a-radio-button>
</a-radio-group>
</div>
<a-tab-pane loading="true" tab="业务流程限时监管" key="1">
<a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1">
<template slot="flowRate" slot-scope="text, record, index">
<a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
</template>
</a-table>
</a-tab-pane>
<a-tab-pane loading="true" tab="业务节点限时监管" key="2">
<a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination2" @change="tableChange2">
<template slot="flowRate" slot-scope="text, record, index">
<span style="color: red;">{{ record.flowRate }}小时</span>
</template>
</a-table>
</a-tab-pane>
</a-tabs>
</a-card>
</a-row>
</div>
</template>
<script>
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import ChartCard from '@/components/ChartCard'
import MiniBar from '@/components/chart/MiniBar'
import MiniArea from '@/components/chart/MiniArea'
import IndexBar from '@/components/chart/IndexBar'
import BarMultid from '@/components/chart/BarMultid'
import DashChartDemo from '@/components/chart/DashChartDemo'
const jhjgData = [
{ type: '房管', '1月': 900, '2月': 1120, '3月': 1380, '4月': 1480, '5月': 1450, '6月': 1100, '7月':1300, '8月':900,'9月':1000 ,'10月':1200 ,'11月':600 ,'12月':900 },
{ type: '税务', '1月':1200, '2月': 1500, '3月': 1980, '4月': 2000, '5月': 1000, '6月': 600, '7月':900, '8月':1100,'9月':1300 ,'10月':2000 ,'11月':900 ,'12月':1100 },
{ type: '不动产', '1月':2000, '2月': 1430, '3月': 1300, '4月': 1400, '5月': 900, '6月': 500, '7月':600, '8月':1000,'9月':600 ,'10月':1000 ,'11月':1500 ,'12月':1200 }
]
const jhjgFields=[
'1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'
]
const xljgData = [
{type:'一月',"房管":1.12,"税务":1.55,"不动产":1.2},
{type:'二月',"房管":1.65,"税务":1.32,"不动产":1.42},
{type:'三月',"房管":1.85,"税务":1.1,"不动产":1.5},
{type:'四月',"房管":1.33,"税务":1.63,"不动产":1.4},
{type:'五月',"房管":1.63,"税务":1.8,"不动产":1.7},
{type:'六月',"房管":1.85,"税务":1.98,"不动产":1.8},
{type:'七月',"房管":1.98,"税务":1.5,"不动产":1.76},
{type:'八月',"房管":1.48,"税务":1.2,"不动产":1.3},
{type:'九月',"房管":1.41,"税务":1.9,"不动产":1.6},
{type:'十月',"房管":1.1,"税务":1.1,"不动产":1.4},
{type:'十一月',"房管":1.85,"税务":1.6,"不动产":1.5},
{type:'十二月',"房管":1.5,"税务":1.4,"不动产":1.3}
]
const xljgFields=["房管","税务","不动产"]
const dataCol1 = [{
title: '业务号',
align:"center",
dataIndex: 'reBizCode'
},{
title: '业务类型',
align:"center",
dataIndex: 'type'
},{
title: '受理人',
align:"center",
dataIndex: 'acceptBy'
},{
title: '受理时间',
align:"center",
dataIndex: 'acceptDate'
},{
title: '当前节点',
align:"center",
dataIndex: 'curNode'
},{
title: '办理时长',
align:"center",
dataIndex: 'flowRate',
scopedSlots: { customRender: 'flowRate' }
}];
const dataSource1=[
{reBizCode:"1",type:"转移登记",acceptBy:'张三',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:60},
{reBizCode:"2",type:"抵押登记",acceptBy:'李四',acceptDate:"2019-01-23",curNode:"领导审核",flowRate:30},
{reBizCode:"3",type:"转移登记",acceptBy:'王武',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:20},
{reBizCode:"4",type:"转移登记",acceptBy:'赵楼',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:80},
{reBizCode:"5",type:"转移登记",acceptBy:'钱就',acceptDate:"2019-12-12",curNode:"任务分派",flowRate:90},
{reBizCode:"6",type:"转移登记",acceptBy:'孙吧',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
{reBizCode:"7",type:"抵押登记",acceptBy:'周大',acceptDate:"2019-04-13",curNode:"任务分派",flowRate:100},
{reBizCode:"8",type:"抵押登记",acceptBy:'吴二',acceptDate:"2019-05-09",curNode:"任务上报",flowRate:50},
{reBizCode:"9",type:"抵押登记",acceptBy:'郑爽',acceptDate:"2019-07-12",curNode:"任务处理",flowRate:63},
{reBizCode:"20",type:"抵押登记",acceptBy:'林有',acceptDate:"2019-12-12",curNode:"任务打回",flowRate:59},
{reBizCode:"11",type:"转移登记",acceptBy:'码云',acceptDate:"2019-09-10",curNode:"任务签收",flowRate:87},
]
const dataCol2 = [{
title: '业务号',
align:"center",
dataIndex: 'reBizCode'
},{
title: '受理人',
align:"center",
dataIndex: 'acceptBy'
},{
title: '发起时间',
align:"center",
dataIndex: 'acceptDate'
},{
title: '当前节点',
align:"center",
dataIndex: 'curNode'
},{
title: '超时时间',
align:"center",
dataIndex: 'flowRate',
scopedSlots: { customRender: 'flowRate' }
}];
const dataSource2=[
{reBizCode:"A001",type:"转移登记",acceptBy:'张四',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:12},
{reBizCode:"A002",type:"抵押登记",acceptBy:'李吧',acceptDate:"2019-01-23",curNode:"任务签收",flowRate:3},
{reBizCode:"A003",type:"转移登记",acceptBy:'王三',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:24},
{reBizCode:"A004",type:"转移登记",acceptBy:'赵二',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:10},
{reBizCode:"A005",type:"转移登记",acceptBy:'钱大',acceptDate:"2019-12-12",curNode:"任务签收",flowRate:8},
{reBizCode:"A006",type:"转移登记",acceptBy:'孙就',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
{reBizCode:"A007",type:"抵押登记",acceptBy:'周晕',acceptDate:"2019-04-13",curNode:"部门审核",flowRate:24},
{reBizCode:"A008",type:"抵押登记",acceptBy:'吴有',acceptDate:"2019-05-09",curNode:"部门审核",flowRate:30},
{reBizCode:"A009",type:"抵押登记",acceptBy:'郑武',acceptDate:"2019-07-12",curNode:"任务分派",flowRate:1},
{reBizCode:"A0010",type:"抵押登记",acceptBy:'林爽',acceptDate:"2019-12-12",curNode:"部门审核",flowRate:16},
{reBizCode:"A0011",type:"转移登记",acceptBy:'码楼',acceptDate:"2019-09-10",curNode:"部门审核",flowRate:7},
]
export default {
name: "IndexBdc",
components: {
ATooltip,
ACol,
ChartCard,
MiniArea,
MiniBar,
DashChartDemo,
BarMultid,
IndexBar
},
data() {
return {
loading: true,
cardCount:{
sll:100,
bjl:87,
isll:15,
ibjl:9
},
todaySll:60,
todayBjl:54,
todayISll:13,
todayIBjl:7,
chartData:{
sll:[],
bjl:[],
isll:[],
ibjl:[]
},
jhjgFields,
jhjgData,
xljgData,
xljgFields,
diskInfo:[
{name:"C盘",restPPT:7},
{name:"D盘",restPPT:5}
],
registerTypeList:[{
text:"业务受理"
},{
text:"业务管理"
},{
text:"文件管理"
},{
text:"信息查询"
}],
dataSource1:[],
dataSource2:[],
columns:dataCol1,
columns2:dataCol2,
ipagination1:{
current: 1,
pageSize: 5,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " " + total + ""
},
showQuickJumper: true,
showSizeChanger: true,
total: 0,
},
ipagination2:{
current: 1,
pageSize: 5,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " " + total + ""
},
showQuickJumper: true,
showSizeChanger: true,
total: 0,
},
indexRegisterType:"转移登记",
indexBottomTab:"1"
}
},
methods:{
goPage(){
this.$message.success("根据业务自行处理跳转页面!")
},
changeRegisterType(e){
this.indexRegisterType = e.target.value
if(this.indexBottomTab=="1"){
this.loadDataSource1()
}else{
this.loadDataSource2()
}
},
tableChange1(pagination){
this.ipagination1.current = pagination.current
this.ipagination1.pageSize = pagination.pageSize
this.queryTimeoutInfo()
},
tableChange2(pagination){
this.ipagination2.current = pagination.current
this.ipagination2.pageSize = pagination.pageSize
this.queryNodeTimeoutInfo()
},
getFlowRateNumber(value){
return Number(value)
},
getPercentFormat(value){
if(value==100){
return "超时"
}else{
return value+"%"
}
},
getPercentColor(value){
let p = Number(value)
if(p>=90 && p<100){
return 'rgb(244, 240, 89)'
}else if(p>=100){
return 'red'
}else{
return 'rgb(16, 142, 233)'
}
},
loadDataSource1(){
this.dataSource1 = dataSource1.filter(item=>{
if(!this.indexRegisterType){
return true
}
return item.type==this.indexRegisterType
})
},
loadDataSource2(){
this.dataSource2 = dataSource2.filter(item=>{
if(!this.indexRegisterType){
return true
}
return item.type==this.indexRegisterType
})
}
},
created() {
this.loadDataSource1()
this.loadDataSource2()
setTimeout(() => {
this.loading = !this.loading
}, 1000)
}
}
</script>
<style lang="scss" scoped>
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
.item-group {
padding: 20px 0 8px 24px;
font-size: 0;
a {
color: rgba(0, 0, 0, 0.65);
display: inline-block;
font-size: 14px;
margin-bottom: 13px;
width: 25%;
}
}
.item-group {
.more-btn {
margin-bottom: 13px;
text-align: center;
}
}
.list-content-item {
color: rgba(0, 0, 0, .45);
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin-left: 40px;
}
@media only screen and (min-width: 1600px) {
.list-content-item{
margin-left:60px;
}
}
@media only screen and (max-width: 1300px) {
.list-content-item{
margin-left:20px;
}
.width-hidden4{
display:none
}
}
.list-content-item{
span{line-height: 20px;}
}
.list-content-item{
p{margin-top: 4px;margin-bottom:0;line-height:22px;}
}
.anty-list-cust {
.ant-list-item-meta{flex: 0.3 !important;}
}
.anty-list-cust {
.ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
}
</style>

View File

@ -0,0 +1,269 @@
<template>
<div class="page-header-index-wide">
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="总销售额" total="126,560">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<trend flag="up" style="margin-right: 16px;">
<span slot="term">周同比</span>
12%
</trend>
<trend flag="down">
<span slot="term">日同比</span>
11%
</trend>
</div>
<template slot="footer">日均销售额<span>¥ 234.56</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area />
</div>
<template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-bar :height="40" />
</div>
<template slot="footer">转化率 <span>60%</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="运营活动效果" total="78%">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
</div>
<template slot="footer">
<trend flag="down" style="margin-right: 16px;">
<span slot="term">同周比</span>
12%
</trend>
<trend flag="up">
<span slot="term">日环比</span>
80%
</trend>
</template>
</chart-card>
</a-col>
</a-row>
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}" />
</div>
<a-tab-pane loading="true" tab="销售额" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额排行" :dataSource="barData"/>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<rank-list title="门店销售排行榜" :list="rankList"/>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="访问量" key="2">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额趋势" :dataSource="barData"/>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<rank-list title="门店销售排行榜" :list="rankList"/>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</div>
</a-card>
<a-row>
<a-col :span="24">
<a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
<a-row>
<a-col :span="6">
<head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="environment" style="font-size: 24px" />
</a-spin>
</a-col>
<a-col :span="6">
<head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="team" style="font-size: 24px" />
</a-spin>
</a-col>
<a-col :span="6">
<head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="rise" style="font-size: 24px" />
</a-spin>
</a-col>
</a-row>
<line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import Trend from '@/components/Trend'
import { getLoginfo,getVisitInfo } from '@/api/api'
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '白鹭岛 ' + (i+1) + ' 号店',
total: 1234.56 - i * 100
})
}
const barData = []
for (let i = 0; i < 12; i += 1) {
barData.push({
x: `${i + 1}月`,
y: Math.floor(Math.random() * 1000) + 200
})
}
export default {
name: "IndexChart",
components: {
ATooltip,
ACol,
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
LineChartMultid,
HeadInfo
},
data() {
return {
loading: true,
center: null,
rankList,
barData,
loginfo:{},
visitFields:['ip','visit'],
visitInfo:[],
indicator: <a-icon type="loading" style="font-size: 24px" spin />
}
},
created() {
setTimeout(() => {
this.loading = !this.loading
}, 1000)
this.initLogInfo();
},
methods: {
initLogInfo () {
getLoginfo(null).then((res)=>{
if(res.success){
Object.keys(res.result).forEach(key=>{
res.result[key] =res.result[key]+""
})
this.loginfo = res.result;
}
})
getVisitInfo().then(res=>{
if(res.success){
console.log("aaaaaa",res.result)
this.visitInfo = res.result;
}
})
},
}
}
</script>
<style lang="scss" scoped>
.circle-cust{
position: relative;
top: 28px;
left: -100%;
}
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
/* 首页访问量统计 */
.head-info {
position: relative;
text-align: left;
padding: 0 32px 0 0;
min-width: 125px;
&.center {
text-align: center;
padding: 0 32px;
}
span {
color: rgba(0, 0, 0, .45);
display: inline-block;
font-size: .95rem;
line-height: 42px;
margin-bottom: 4px;
}
p {
line-height: 42px;
margin: 0;
a {
font-weight: 600;
font-size: 1rem;
}
}
}
</style>

View File

@ -0,0 +1,372 @@
<template>
<div class="index-container-ty">
<a-spin :spinning="loading">
<a-row type="flex" justify="start" :gutter="3">
<a-col :sm="24" :lg="12">
<a-card>
<div slot="title" class="index-md-title">
<img src="../../assets/daiban.png"/>
我的待办【{{ dataSource1.length }}】
</div>
<div slot="extra">
<a v-if="dataSource1 && dataSource1.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
</div>
<a-table
:class="'my-index-table tytable1'"
ref="table1"
size="small"
rowKey="id"
:columns="columns"
:dataSource="dataSource1"
:pagination="false">
<template slot="ellipsisText" slot-scope="text">
<j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
</template>
<template slot="dayWarnning" slot-scope="text,record">
<a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
</template>
<span slot="action" slot-scope="text, record">
<a @click="handleData">办理</a>
</span>
</a-table>
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
<a-card>
<div slot="title" class="index-md-title">
<img src="../../assets/zaiban.png"/>
我的在办【{{ dataSource2.length }}】
</div>
<div slot="extra">
<a v-if="dataSource2 && dataSource2.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
</div>
<a-table
:class="'my-index-table tytable2'"
ref="table2"
size="small"
rowKey="id"
:columns="columns"
:dataSource="dataSource2"
:pagination="false">
<template slot="ellipsisText" slot-scope="text">
<j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
</template>
<template slot="dayWarnning" slot-scope="text,record">
<a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
</template>
<span slot="action" slot-scope="text, record">
<a @click="handleData">办理</a>
</span>
</a-table>
</a-card>
</a-col>
<a-col :span="24">
<div style="height: 5px;"></div>
</a-col>
<a-col :sm="24" :lg="12">
<a-card>
<div slot="title" class="index-md-title">
<img src="../../assets/guaz.png"/>
我的挂账【{{ dataSource4.length }}】
</div>
<a-table
:class="'my-index-table tytable4'"
ref="table4"
size="small"
rowKey="id"
:columns="columns"
:dataSource="dataSource4"
:pagination="false">
<template slot="ellipsisText" slot-scope="text">
<j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
</template>
<template slot="dayWarnning" slot-scope="text,record">
<a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
</template>
<span slot="action" slot-scope="text, record">
<a @click="handleData">办理</a>
</span>
</a-table>
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
<a-card>
<div slot="title" class="index-md-title">
<img src="../../assets/duban.png"/>
我的督办【{{ dataSource3.length }}】
</div>
<a-table
:class="'my-index-table tytable3'"
ref="table3"
size="small"
rowKey="id"
:columns="columns"
:dataSource="dataSource3"
:pagination="false">
<template slot="ellipsisText" slot-scope="text">
<j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
</template>
<template slot="dayWarnning" slot-scope="text,record">
<a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
</template>
<span slot="action" slot-scope="text, record">
<a @click="handleData">办理</a>
</span>
</a-table>
</a-card>
</a-col>
</a-row>
</a-spin>
</div>
</template>
<script>
import noDataPng from '@/assets/nodata.png'
import JEllipsis from '@/components/jeecg/JEllipsis'
const tempSs1=[{
id:"001",
orderNo:"[1]1267102",
orderTitle:"药品出问题了",
restDay:1
},{
id:"002",
orderNo:"[4]5967102",
orderTitle:"吃了xxx医院的药病情越来越严重",
restDay:0
},{
id:"003",
orderNo:"[3]5988987",
orderTitle:"今天去超市买鸡蛋鸡蛋都是坏的",
restDay:7
},{
id:"004",
orderNo:"[2]5213491",
orderTitle:"xx宝实体店高价售卖xx",
restDay:5
},{
id:"005",
orderNo:"[1]1603491",
orderTitle:"以红利相诱答应退保后扣一年费用",
restDay:0
}]
const tempSs2=[{
id:"001",
orderTitle:"我要投诉这个大超市",
orderNo:"[1]10299456",
restDay:6
},{
id:"002",
orderTitle:"xxx医院乱开药方,售卖假药",
orderNo:"[2]20235691",
restDay:0
},{
id:"003",
orderTitle:"我想问问这家店是干啥的",
orderNo:"[3]495867322",
restDay:7
},{
id:"004",
orderTitle:"我要举报朝阳区奥森公园酒店",
orderNo:"[2]1193849",
restDay:3
},{
id:"005",
orderTitle:"我今天吃饭吃到一个石头子",
orderNo:"[4]56782344",
restDay:9
}]
//4-7天
const tip_green = "rgba(0, 255, 0, 1)"
//1-3天
const tip_yellow = "rgba(255, 255, 0, 1)"
//超期
const tip_red = "rgba(255, 0, 0, 1)"
export default {
name: "IndexTask",
components:{ JEllipsis },
data() {
return {
loading:false,
textMaxLength:8,
dataSource1:[],
dataSource2:[],
dataSource3:[],
dataSource4:[],
columns: [
{
title: '',
dataIndex: '',
key:'rowIndex',
width:50,
fixed:'left',
align:"center",
scopedSlots: {customRender: "dayWarnning"}
},
{
title:'剩余天数',
align:"center",
dataIndex: 'restDay',
width:80
},
{
title:'工单标题',
align:"center",
dataIndex: 'orderTitle',
scopedSlots: {customRender: "ellipsisText"}
},
{
title:'工单编号',
align:"center",
dataIndex: 'orderNo',
},
{
title: '操作',
dataIndex: 'action',
align:"center",
scopedSlots: { customRender: 'action' }
}
]
}
},
created() {
this.mock();
},
mounted(){
},
methods: {
getTipColor(rd){
let num = rd.restDay
if(num<=0){
return tip_red
}else if(num>=1 && num<4){
return tip_yellow
}else if(num>=4){
return tip_green
}
},
goPage(){
this.$message.success("请根据具体业务跳转页面")
//this.$router.push({ path: '/comp/mytask' })
},
mock(){
this.dataSource1=tempSs1
this.dataSource2=tempSs2
this.dataSource3=tempSs1
this.dataSource4=[]
this.ifNullDataSource(this.dataSource4,'.tytable4')
},
ifNullDataSource(ds,tb){
this.$nextTick(()=>{
if(!ds || ds.length==0){
var tmp = document.createElement('img');
tmp.src=noDataPng
tmp.width=300
let tbclass=`${tb} .ant-table-placeholder`
document.querySelector(tbclass).innerHTML=""
document.querySelector(tbclass).appendChild(tmp)
}
})
},
handleData(){
this.$message.success("办理完成")
}
}
}
</script>
<style>
.my-index-table{height:270px}
.my-index-table table{font-size: 14px !important;}
.index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;}
.index-container-ty .ant-card-extra{padding:0}
.index-container-ty .ant-card-extra a{color:#fff}
.index-container-ty .ant-card-extra a:hover{color:#152ede}
.index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{
line-height:24px;
min-height:24px;
/*background: #90aeff;*/
background: #7196fb;
}
.index-container-ty .ant-card-body{padding: 10px 12px 0px 12px}
/* .index-container-ty .ant-card-actions{background: #fff}
.index-container-ty .ant-card-actions li {margin:2px 0;}
.index-container-ty .ant-card-actions > li > span{width: 100%}*/
.index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}
.index-md-title{
postion:relative;
padding-left:24px;
width: 100%;
color: #fff;
font-size: 21px;
font-family: cursive;
}
.index-md-title img{
position: absolute;
height:32px;
top: 2px;
left:14px;
}
.index-container-ty .ant-card-body{
/*border-left:1px solid #90aeff;
/*border-right:1px solid #90aeff;
border-bottom:1px solid #90aeff;*/
}
.index-container-ty .ant-table-thead > tr > th,
.index-container-ty .ant-table-tbody > tr > td{
border-bottom: 1px solid #90aeff;
}
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{
border-bottom: 1px solid #90aeff;
}
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{
border-bottom: 1px solid #90aeff;
}
.index-container-ty .ant-table-small{
border: 1px solid #90aeff;
}
.index-container-ty .ant-table-placeholder {
padding: 0
}
</style>

View File

@ -47,7 +47,7 @@
</span>
<a-col :md="6" :sm="24">
<template v-if="superQueryFlag">
<!-- <template v-if="superQueryFlag">
<a-tooltip title="已有高级查询条件生效!">
<button :disabled="false" class="ant-btn ant-btn-primary" @click="superQuery">
<a-icon type="appstore" theme="twoTone" spin="true"></a-icon>
@ -56,6 +56,9 @@
</a-tooltip>
</template>
<a-button v-else type="primary" @click="superQuery" icon="filter">高级查询</a-button>
-->
<!-- 高级查询区域 -->
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
@ -167,8 +170,6 @@
<!-- 一对多表单区域 -->
<JeecgDemoTabsModal ref="jeecgDemoTabsModal" @ok="modalFormOk"></JeecgDemoTabsModal>
<!-- 高级查询区域 -->
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
</a-card>
</template>
@ -293,7 +294,14 @@
methods: {
getQueryParams(){
console.log(this.queryParam.birthdayRange)
var param = Object.assign({}, this.queryParam,this.isorter);
//高级查询器
let sqp = {}
if(this.superQueryParams){
sqp['superQueryParams']=encodeURI(this.superQueryParams)
}
var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;

View File

@ -132,23 +132,32 @@
}
</script>
<style scoped>
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
* {
color: #000000!important;
-webkit-tap-highlight-color: #000000!important;
}
/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */
.abcdefg .ant-card-body{
margin-left: 0%;
margin-right: 0%;
margin-bottom: 1%;
border:0px solid black;
min-width: 800px;
color:#000000!important;
}
.explain{
text-align: left;
margin-left: 50px;
color:#000000!important;
}
.explain .ant-input,.sign .ant-input{
font-weight:bolder;
text-align:center;
border-left-width:0px!important;
border-top-width:0px!important;;
border-right-width:0px!important;;
border-top-width:0px!important;
border-right-width:0px!important;
}
.explain div{
margin-bottom: 10px;

View File

@ -63,6 +63,10 @@
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
message: '${title}必须以字母开头可包含数字下划线横杠'
},
{
unique: true,
message: '${title}不能重复'
},
{
handler(type, value, row, column, callback, target) {
// type 触发校验的类型input、change、blur
@ -73,25 +77,13 @@
// target 行编辑的实例对象
if (type === 'blur') {
let { values } = target.getValuesSync({ validate: false })
if (value === 'abc') {
callback(false, '${title}不能是abc') // false = 未验
return
callback(false, '${title}不能是abc') // false = 未通过校
} else {
callback(true) // true = 通过验证
}
let count = 0
for (let val of values) {
if (val['dbFieldName'] === value) {
if (++count >= 2) {
callback(false, '${title}不能重复==')
return
}
}
}
callback(true) // true = 通过验证
} else {
callback() // 不填写或者填写 null 代表不进行任何操作
callback(true) // 不填写或者填写 null 代表不进行任何操作
}
},
message: '${title}默认提示'

View File

@ -179,6 +179,9 @@
if(text=='3') {
return "微信";
}
if(text=='4') {
return "系统";
}
}
},
{

View File

@ -10,50 +10,70 @@
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板CODE">
<a-input
:disabled="disable"
placeholder="请输入模板编码"
v-decorator="['templateCode', validatorRules.templateCode ]"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板标题">
<a-input
placeholder="请输入模板标题"
v-decorator="['templateName', validatorRules.templateName]"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板类型">
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型">
</j-dict-select-tag>
</a-form-item>
<a-form-item
v-show="!useEditor"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容">
<a-textarea placeholder="请输入模板内容" v-decorator="['templateContent', validatorRules.templateContent ]" :autosize="{ minRows: 8, maxRows: 8 }" />
</a-form-item>
<a-form-item
v-show="useEditor"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容">
<j-editor v-model="templateEditorContent"></j-editor>
</a-form-item>
<a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<a-col :span="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板CODE"
style="margin-right: -35px"
>
<a-input
:disabled="disable"
placeholder="请输入模板编码"
v-decorator="['templateCode', validatorRules.templateCode ]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板类型">
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型">
</j-dict-select-tag>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24" >
<a-col :span="24" pull="2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板标题"
style="margin-left: -15px">
<a-input
placeholder="请输入模板标题"
v-decorator="['templateName', validatorRules.templateName]"
style="width: 122%"
/>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :span="24" pull="4">
<a-form-item
v-show="!useEditor"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容"
style="margin-left: 4px;width: 126%">
<a-textarea placeholder="请输入模板内容" v-decorator="['templateContent', validatorRules.templateContent ]" :autosize="{ minRows: 8, maxRows: 8 }"/>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :span="24" pull="4">
<a-form-item
v-show="useEditor"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容"
style="margin-left: 4px;width: 126%">
<j-editor v-model="templateEditorContent"></j-editor>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
@ -111,7 +131,7 @@
edit(record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.useEditor = (record.templateType==2)
this.useEditor = (record.templateType==2 || record.templateType==4)
if(this.useEditor){
this.templateEditorContent=record.templateContent
}else{
@ -191,7 +211,7 @@
},
handleChangeTemplateType(value){
//如果是邮件类型那么则改变模板内容是富文本编辑器
this.useEditor = value==2
this.useEditor = (value==2 || value==4)
}
}

View File

@ -177,7 +177,6 @@
import JDictSelectTag from '../../../../components/dict/JDictSelectTag.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Clipboard from 'clipboard'
import { filterObj } from '@/utils/util';
export default {

View File

@ -1,7 +1,7 @@
<template>
<a-card :bordered="false" style="height: 100%">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-form layout="inline" @keyup.enter.native="searchByquery">
<a-row :gutter="24" v-if="queryInfo && queryInfo.length>0">
<template v-for="(item,index) in queryInfo">
<template v-if=" item.hidden==='1' ">
@ -63,6 +63,15 @@
</a-button>
</template>
<!-- 高级查询 -->
<j-super-query
ref="superQuery"
:fieldList="superQuery.fieldList"
:saveCode="$route.fullPath"
:loading="table.loading"
style="margin-left: 8px;"
@handleSuperQuery="handleSuperQuery"/>
<a-button
v-if="buttonSwitch.batch_delete"
@click="handleDelBatch"
@ -179,11 +188,10 @@
</span>
</a-table>
<onl-cgform-auto-modal @success="handleFormSuccess" ref="modal" :code="code"></onl-cgform-auto-modal>
<onl-cgform-auto-modal @success="handleFormSuccess" ref="modal" :code="code" @schema="handleGetSchema" />
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
</div>
</a-card>
</template>
@ -194,10 +202,12 @@
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { filterObj } from '@/utils/util';
import JImportModal from '@/components/jeecg/JImportModal'
import JSuperQuery from '@comp/jeecg/JSuperQuery'
export default {
name: 'OnlCgFormAutoList',
components: {
JSuperQuery,
JImportModal,
},
data() {
@ -226,9 +236,8 @@
cgButtonLinkList:[],
cgButtonList:[],
queryInfo:[],
queryParam:{
},
// 查询参数,多个页面的查询参数用 code 作为键来区分
queryParamsMap: {},
toggleSearchStatus:false,
table: {
loading: true,
@ -276,7 +285,16 @@
export:true
},
hasBpmStatus:false,
checkboxFlag:false
checkboxFlag:false,
// 高级查询
superQuery: {
// 字段列表
fieldList: [],
// 查询参数
params: '',
// 查询条件拼接方式 'and' or 'or'
matchType: 'and'
}
}
},
created() {
@ -286,7 +304,8 @@
this.cgButtonJsHandler('mounted')
},
watch: {
'$route'() {
'$route.path'(newVal,oldVal) {
console.log('$route.path ',oldVal)
// 刷新参数放到这里去触发,就可以刷新相同界面了
this.initAutoList()
}
@ -301,6 +320,14 @@
selectedRowKeys:this.table.selectedRowKeys,
onChange: this.handleChangeInTableSelect
}
},
queryParam: {
get() {
return this.queryParamsMap[this.code]
},
set(newVal) {
this.$set(this.queryParamsMap, this.code, newVal)
}
}
},
methods: {
@ -354,8 +381,17 @@
if(!this.$route.params.code){
return false
}
// 清空高级查询条件
this.superQuery.params = ''
if (this.$refs.superQuery) {
this.$refs.superQuery.handleReset()
}
this.table.loading = true
this.code = this.$route.params.code
if (!this.queryParam) {
this.queryParam = {}
}
getAction(`${this.url.getColumns}${this.code}`).then((res)=>{
console.log("--onlineList-加载动态列>>",res);
if(res.success){
@ -415,6 +451,7 @@
if(arg==1){
this.table.pagination.current=1
}
this.table.loading = true
let params = this.getQueryParams();//查询条件
console.log("--onlineList-查询条件-->",params)
getAction(`${this.url.getData}${this.code}`,params).then((res)=>{
@ -432,6 +469,7 @@
}else{
this.$message.warning(res.message)
}
}).finally(() => {
this.table.loading = false
})
}else{
@ -439,7 +477,8 @@
}
},
loadDataNoPage(){
let param = Object.assign({}, this.queryParam,this.isorter);
this.table.loading = true
let param = this.getQueryParams()//查询条件
param['pageSize'] = -521;
getAction(`${this.url.getData}${this.code}`,filterObj(param)).then((res)=>{
console.log("--onlineList-列表数据",res)
@ -453,6 +492,7 @@
}else{
this.$message.warning(res.message)
}
}).finally(() => {
this.table.loading = false
})
},
@ -460,6 +500,8 @@
let param = Object.assign({}, this.queryParam,this.isorter);
param.pageNo = this.table.pagination.current;
param.pageSize = this.table.pagination.pageSize;
param.superQueryMatchType = this.superQuery.matchType
param.superQueryParams = encodeURIComponent(this.superQuery.params)
return filterObj(param);
},
handleChangeInTableSelect(selectedRowKeys, selectionRows) {
@ -548,6 +590,49 @@
handleFormSuccess(){
this.loadData()
},
// 查询完 schema 后,生成高级查询的字段列表
handleGetSchema(schema) {
if (schema && schema.properties) {
let setField = (array, field) => {
let type = field.type || 'string'
type = (type === 'inputNumber' ? 'number' : type)
array.push({
type: type,
value: field.key,
text: field.title,
// 额外字典参数
dictCode: field.dictCode,
dictTable: field.dictTable,
dictText: field.dictText,
options: field.enum || field.options
})
}
let fieldList = []
for (let key in schema.properties) {
if (!schema.properties.hasOwnProperty(key)) {
continue
}
let field = schema.properties[key]
// tab = 子表
if (field.view === 'tab') {
let subTable = {
type: 'sub-table',
value: field.key,
text: field.describe,
children: []
}
for (let column of field.columns) {
setField(subTable.children, column)
}
fieldList.push(subTable)
} else {
field.key = key
setField(fieldList, field)
}
}
this.superQuery.fieldList = fieldList
}
},
onClearSelected(){
this.table.selectedRowKeys = []
this.table.selectionRows = []
@ -700,7 +785,18 @@
})
}
}
},
// 高级查询
handleSuperQuery(params, matchType) {
if (!params || params.length === 0) {
this.superQuery.params = ''
} else {
this.superQuery.params = JSON.stringify(params)
}
this.superQuery.matchType = matchType
this.loadData()
},
}
}

View File

@ -132,7 +132,6 @@
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
<process-inst-pic-modal ref="processInstPicModal"></process-inst-pic-modal>
</div>
</a-card>
</template>
@ -147,7 +146,7 @@
export default {
name: 'OnlCgformTreeList',
components: {
JImportModal,
JImportModal
},
data() {
return {
@ -692,13 +691,6 @@
}
});
},
handlePreviewPic: function(record){
var flowCode = this.flowCodePre+this.currentTableName;
var dataId = record.id;
this.$refs.processInstPicModal.preview(flowCode,dataId);
this.$refs.processInstPicModal.title="流程图";
}
}
}
</script>

View File

@ -0,0 +1,256 @@
<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.code"></a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="报表名字">
<a-input placeholder="请输入报表名字" v-model="queryParam.name"></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-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 @click="popReportURL(record.id)">
配置地址
</a-menu-item>
<a-menu-item>
<a @click="goPageOnline(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 -->
<!-- 表单区域 -->
<onlCgreportHead-modal ref="modalForm" @ok="modalFormOk"></onlCgreportHead-modal>
<!-- 提示online报表链接 -->
<a-modal
title="报表访问链接"
:visible="visible"
@cancel="handleCancel">
<template slot="footer">
<a-button @click="handleCancel">关闭</a-button>
<a-button type="primary" class="copy-this-text" :data-clipboard-text="reportUrlText" @click="onCopyUrl">复制</a-button>
</template>
<p>{{ reportUrlText }}</p>
</a-modal>
</a-card>
</template>
<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import Clipboard from 'clipboard'
import { getAction } from '@/api/manage'
export default {
name: 'OnlCgreportHeadList',
mixins: [JeecgListMixin],
components: {
Clipboard
},
data() {
return {
description: '在线报表配置管理页面',
visible:false,
reportUrlText:'',
// 表头
columns: [
{
title: '报表名称',
align: 'center',
dataIndex: 'name'
},
{
title: '编码',
align: 'center',
dataIndex: 'code'
},
{
title: '查询SQL',
align: 'center',
dataIndex: 'cgrSql'
},
{
title: '数据源',
align: 'center',
dataIndex: 'dbSource'
},
{
title: '创建时间',
align: 'center',
dataIndex: 'createTime'
},
{
title: '描述',
align: 'center',
dataIndex: 'content'
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
}
],
url: {
list: '/online/cgreport/head/list',
delete: '/online/cgreport/head/delete',
deleteBatch: '/online/cgreport/head/deleteBatch',
getParamsInfo:'/online/cgreport/api/getParamsInfo/'
}
}
},
methods: {
initReportUrlText(id){
getAction(this.url.getParamsInfo+id).then((res) => {
let textUrl = ""
if (res.success) {
if(res.result && res.result.length>0){
for(let i of res.result){
textUrl+=i.paramName+"=${"+i.paramName+"}&"
}
}
} else {
this.$message.warning(res.message)
}
if(textUrl.length>0){
textUrl = textUrl.substring(0,textUrl.length-1)
this.reportUrlText = `/online/cgreport/${id}?${textUrl}`
}else{
this.reportUrlText = `/online/cgreport/${id}`
}
})
},
goPageOnline(id){
this.$router.push({path: '/online/cgreport/'+id})
},
popReportURL(id){
this.visible = true;
this.initReportUrlText(id)
},
handleCancel(){
this.visible = false
this.reportUrlText = '';
},
onCopyUrl(){
var clipboard = new Clipboard('.copy-this-text')
clipboard.on('success', () => {
clipboard.destroy()
this.$message.success('复制成功')
this.handleCancel()
})
clipboard.on('error', () => {
this.$message.error('该浏览器不支持自动复制')
clipboard.destroy()
})
}
}
}
</script>
<style lang="less" scoped>
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
</style>

View File

@ -0,0 +1,293 @@
<template>
<a-card :bordered="false" style="height: 100%">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24" v-if="queryInfo && queryInfo.length>0">
<template v-for="(item,index) in queryInfo">
<template v-if=" item.hidden==='1' ">
<a-col v-if="item.view.indexOf('Date')>=0" :md="12" :sm="16" :key=" 'query'+index " v-show="toggleSearchStatus">
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
</a-col>
<a-col v-else :md="6" :sm="8" :key=" 'query'+index " v-show="toggleSearchStatus">
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
</a-col>
</template>
<template v-else>
<a-col v-if="item.view.indexOf('Date')>=0" :md="12" :sm="16" :key=" 'query'+index ">
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
</a-col>
<a-col v-else :md="6" :sm="8" :key=" 'query'+index ">
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
</a-col>
</template>
</template>
<a-col :md="6" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchByQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="table-operator" style="margin-bottom: 10px">
<a-button type="primary" icon="plus" @click="exportExcel">导出</a-button>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="table.columns"
:dataSource="table.dataSource"
:pagination="table.pagination"
:loading="table.loading"
:scroll="table.scroll"
:rowSelection="{fixed:true, selectedRowKeys: table.selectedRowKeys, onChange: handleChangeInTableSelect}"
@change="handleChangeInTable"
style="min-height: 300px"
>
</a-table>
</a-card>
</template>
<script>
import { getAction,downFile } from '@/api/manage'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import {filterObj} from '@/utils/util';
export default {
name: 'OnlCgreportAutoList',
components: {
},
data() {
return {
// 查询参数
queryInfo: [],
// 查询参数,多个页面的查询参数用 code 作为键来区分
queryParamsMap: {},
selfParam:{
},
sorter: {
column: '',
order: 'desc',
},
dictOptions: {},
toggleSearchStatus: false, // 高级搜索 展开/关闭
reportCode: '',
description: '在线报表功能测试页面',
url: {
getColumns: '/online/cgreport/api/getColumns/',
getData: '/online/cgreport/api/getData/',
getQueryInfo: '/online/cgreport/api/getQueryInfo/',
getParamsInfo:'/online/cgreport/api/getParamsInfo/'
},
table: {
loading: true,
// 表头
columns: [],
//数据集
dataSource: [],
// 选择器
selectedRowKeys: [],
selectionRows: [],
scroll: { x: false },
// 分页参数
pagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
}
},
cgreportHeadName:""
}
},
mounted() {
this.initParamsInfo()
this.initQueryInfo();
},
watch: {
'$route'() {
// 刷新参数放到这里去触发,就可以刷新相同界面了
this.initParamsInfo()
this.initQueryInfo();
}
},
computed: {
queryParam: {
get() {
return this.queryParamsMap[this.reportCode]
},
set(newVal) {
this.$set(this.queryParamsMap, this.reportCode, newVal)
}
}
},
methods: {
initParamsInfo(){
if(!this.$route.params.code){
return false
}
//获取报表ID
this.reportCode = this.$route.params.code;
if (!this.queryParam) {
this.queryParam = {}
}
this.selfParam={}
getAction(`${this.url.getParamsInfo}${this.$route.params.code}`).then((res) => {
if (res.success) {
if(res.result && res.result.length>0){
for(let i of res.result){
this.selfParam['self_'+i.paramName]=(!this.$route.query[i.paramName])?"":this.$route.query[i.paramName]
}
}
} else {
this.$message.warning(res.message)
}
this.loadData()
})
},
initQueryInfo() {
if(!this.$route.params.code){
return false
}
getAction(`${this.url.getQueryInfo}${this.$route.params.code}`).then((res) => {
console.log("获取查询条件", res);
if (res.success) {
this.queryInfo = res.result
} else {
this.$message.warning(res.message)
}
})
},
loadData(arg) {
if(!this.$route.params.code){
return false
}
if (arg == 1) {
this.table.pagination.current = 1
}
let params = this.getQueryParams();//查询条件
console.log(params)
console.log(' 动态报表 reportCode ' + this.reportCode);
this.table.loading = true
Promise.all([
getAction(`${this.url.getColumns}${this.reportCode}`),
getAction(`${this.url.getData}${this.reportCode}`, params)
]).then(results => {
let [{result: {columns,cgreportHeadName,dictOptions}}, {result: data}] = results
let columnWidth = 230
this.dictOptions = dictOptions
for(let a=0;a<columns.length;a++){
if(columns[a].customRender){
let field_name = columns[a].customRender;
columns[a].customRender=(text)=>{
if(!text){
return ''
}else{
return filterMultiDictText(this.dictOptions[field_name], text+"");
}
}
}
columns.width = columnWidth
}
this.table.scroll.x = columns.length * columnWidth
this.table.columns = [...columns]
this.cgreportHeadName = cgreportHeadName
if (data) {
this.table.pagination.total = Number(data.total)
this.table.dataSource = data.records
} else {
this.table.pagination.total = 0
this.table.dataSource = []
}
}).catch((e) => {
console.error(e)
this.$message.error('查询失败')
}).then(() => {
this.table.loading = false
})
},
getQueryParams() {
let param = Object.assign({}, this.queryParam, this.sorter,this.selfParam);
param.pageNo = this.table.pagination.current;
param.pageSize = this.table.pagination.pageSize;
return filterObj(param);
},
searchByQuery() {
this.loadData(1);
},
searchReset() {
this.queryParam = {}
this.loadData(1);
},
handleToggleSearch() {
this.toggleSearchStatus = !this.toggleSearchStatus;
},
exportExcel() {
let fileName = this.cgreportHeadName
downFile(`/online/cgreport/api/exportXls/${this.reportCode}`,this.queryParam).then((data)=>{
if (!data) {
this.$message.warning("文件下载失败")
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data]), fileName+'.xls')
}else{
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName+'.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
})
},
handleChangeInTableSelect(selectedRowKeys, selectionRows) {
this.table.selectedRowKeys = selectedRowKeys
this.table.selectionRows = selectionRows
},
handleChangeInTable(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
if (Object.keys(sorter).length > 0) {
this.sorter.column = sorter.field
this.sorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
}
this.table.pagination = pagination
this.loadData()
}
}
}
</script>
<style scoped>
.div {
display: flex;
align-items: center;
height: 500px
}
</style>

View File

@ -68,7 +68,10 @@
<!-- 字符串超长截取省略号显示-->
<span slot="description" slot-scope="text">
<j-ellipsis :value="text" :length="25" />
<j-ellipsis :value="text" :length="20" />
</span>
<span slot="parameterRender" slot-scope="text">
<j-ellipsis :value="text" :length="20" />
</span>
@ -151,12 +154,14 @@
{
title: '参数',
align:"center",
dataIndex: 'parameter'
width: 150,
dataIndex: 'parameter',
scopedSlots: {customRender: 'parameterRender'},
},
{
title: '描述',
align:"center",
width: 300,
width: 250,
dataIndex: 'description',
scopedSlots: {customRender: 'description'},
},

View File

@ -7,11 +7,20 @@
<!-- 搜索区域 -->
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="12" :sm="12">
<a-col :md="12" :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="11" :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="12" :sm="24">
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
@ -22,9 +31,9 @@
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator" style="margin: -8px 0 10px 2px">
<div class="table-operator" style="margin: 5px 0 10px 2px">
<a-button @click="handleAdd" type="primary" icon="plus">角色录入</a-button>
<a-button @click="handleEdit(model1)" type="primary" icon="plus">角色编辑</a-button>
<!--<a-button @click="handleEdit(model1)" type="primary" icon="plus">角色编辑</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>
@ -58,6 +67,12 @@
更多 <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 @click="handleEdit(record)">编辑</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete1(record.id)">
<a>删除</a>
@ -68,10 +83,16 @@
</span>
</a-table>
</div>
<!-- 右侧的角色权限配置 -->
<user-role-modal ref="modalUserRole"></user-role-modal>
<role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
</a-card>
</a-col>
<a-col :md="rightColMd" :sm="24">
<a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 1">
<a-card :bordered="false">
<div style="text-align: right;">
<a-icon type="close-circle" @click="hideUserList" />
</div>
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
@ -162,14 +183,18 @@
import RoleModal from './modules/RoleModal'
import UserModal from './modules/UserModal'
import { filterObj } from '@/utils/util'
import UserRoleModal from './modules/UserRoleModal'
import moment from 'moment'
export default {
name: 'RoleUserList',
mixins: [JeecgListMixin],
components: {
UserRoleModal,
SelectUserModal,
RoleModal,
UserModal
UserModal,
moment
},
data() {
return {
@ -218,6 +243,8 @@
selectedRowKeys2: [],
selectionRows1: [],
selectionRows2: [],
test:{},
rightcolval:0,
columns:
[
{
@ -230,6 +257,15 @@
align: 'center',
dataIndex: 'roleName'
},
{
title: '创建时间',
dataIndex: 'createTime',
align:"center",
sorter: true,
customRender: (text) => {
return moment(text).format('YYYY-MM-DD')
}
},
{
title: '操作',
dataIndex: 'action',
@ -302,6 +338,7 @@
this.selectionRows1 = []
},
onSelectChange1(selectedRowKeys, selectionRows) {
this.rightcolval = 1
this.selectedRowKeys1 = selectedRowKeys
this.selectionRows1 = selectionRows
this.model1 = Object.assign({}, selectionRows[0])
@ -455,21 +492,21 @@
}
},
handleOpen(record) {
this.rightcolval = 1
this.selectedRowKeys1 = [record.id]
this.model1 = Object.assign({}, record)
this.currentRoleId = record.id
this.onClearSelected2()
this.loadData2()
},
handleEdit: function(record) {
/*handleEdit: function(record) {
if (this.currentRoleId == '') {
this.$message.error('请选择一个角色!')
} else {
this.$refs.modalForm.edit(record)
this.$refs.modalForm.title = '编辑'
}
},
},*/
searchQuery2() {
this.loadData2(1)
},
@ -486,6 +523,13 @@
}
this.ipagination2 = pagination
this.loadData2()
},
hideUserList(){
//this.rightcolval = 0
this.selectedRowKeys1 = []
},
handlePerssion(roleId){
this.$refs.modalUserRole.show(roleId);
}
}
}

View File

@ -15,8 +15,8 @@
<a-col :md="6" :sm="8">
<a-form-item label="性别">
<a-select v-model="queryParam.sex" placeholder="请选择性别查询">
<a-select-option value="">请选择性别查询</a-select-option>
<a-select v-model="queryParam.sex" placeholder="请选择性别">
<a-select-option value="">请选择</a-select-option>
<a-select-option value="1">男性</a-select-option>
<a-select-option value="2">女性</a-select-option>
</a-select>
@ -26,8 +26,8 @@
<template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8">
<a-form-item label="邮箱">
<a-input placeholder="请输入邮箱查询" v-model="queryParam.email"></a-input>
<a-form-item label="真实名字">
<a-input placeholder="请输入真实名字" v-model="queryParam.realname"></a-input>
</a-form-item>
</a-col>
@ -38,11 +38,11 @@
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="状态">
<a-select v-model="queryParam.status" placeholder="请选择用户状态查询">
<a-select-option value="">请选择用户状态</a-select-option>
<a-form-item label="用户状态">
<a-select v-model="queryParam.status" placeholder="请选择">
<a-select-option value="">请选择</a-select-option>
<a-select-option value="1">正常</a-select-option>
<a-select-option value="2">冻</a-select-option>
<a-select-option value="2">冻</a-select-option>
</a-select>
</a-form-item>
</a-col>
@ -65,7 +65,7 @@
<!-- 操作按钮区域 -->
<div class="table-operator" style="border-top: 5px">
<a-button @click="handleAdd" type="primary" icon="plus" v-has="'user:add'">添加用户</a-button>
<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>

View File

@ -34,16 +34,14 @@
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="参数"
hasFeedback >
<a-input placeholder="请输入参数" v-decorator="['parameter', {}]" />
label="参数">
<a-textarea placeholder="请输入参数" :rows="5" v-decorator="['parameter', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="描述"
hasFeedback >
<a-input placeholder="请输入描述" v-decorator="['description', {}]" />
label="描述">
<a-textarea placeholder="请输入描述" :rows="3" v-decorator="['description', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"

View File

@ -1,94 +1,132 @@
<template>
<a-modal
:title="title"
:width="800"
:width="900"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
:okButtonProps="{ props: {disabled: disabled} }"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="标题">
<a-input placeholder="请输入标题" v-decorator="['titile', validatorRules.title]" :readOnly="disableSubmit" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息类型">
<a-select
v-decorator="[ 'msgCategory', validatorRules.msgCategory]"
placeholder="请选择消息类型"
:disabled="disableSubmit">
<a-select-option value="1">通知公告</a-select-option>
<a-select-option value="2">系统消息</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="内容">
<j-editor v-decorator="[ 'msgContent', {} ]" triggerChange></j-editor>
</a-form-item>
<a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="标题">
<a-input placeholder="请输入标题" v-decorator="['titile', validatorRules.title]" :readOnly="disableSubmit" style="width: 90%"/>
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息类型">
<a-select
v-decorator="[ 'msgCategory', validatorRules.msgCategory]"
placeholder="请选择消息类型"
:disabled="disableSubmit"
:getPopupContainer = "(target) => target.parentNode"
style="width: 80%" >
<a-select-option value="1">通知公告</a-select-option>
<a-select-option value="2">系统消息</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="开始时间">
<j-date v-decorator="[ 'startTime', validatorRules.startTime]" placeholder="请选择开始时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="结束时间">
<j-date v-decorator="[ 'endTime', validatorRules.endTime]" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
</a-form-item>
<a-row class="form-row" :gutter="24">
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="开始时间:"
style="margin-left: 27px">
<j-date v-decorator="[ 'startTime', validatorRules.startTime]" placeholder="请选择开始时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss" ></j-date>
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="结束时间"
class="endTime">
<j-date v-decorator="[ 'endTime', validatorRules.endTime]" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="优先级">
<a-select
v-decorator="[ 'priority', {}]"
placeholder="请选择优先级"
:disabled="disableSubmit">
<a-select-option value="L"></a-select-option>
<a-select-option value="M"></a-select-option>
<a-select-option value="H"></a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="通告对象类型">
<a-select
v-decorator="[ 'msgType', validatorRules.msgType]"
placeholder="请选择通告对象类型"
:disabled="disableSubmit"
@change="chooseMsgType">
<a-select-option value="USER">指定用户</a-select-option>
<a-select-option value="ALL">全体用户</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="指定用户"
v-if="userType">
<a-select
mode="multiple"
style="width: 100%"
placeholder="请选择用户"
v-model="selectedUser"
@dropdownVisibleChange="selectUserIds">
</a-select>
</a-form-item>
<a-row class="form-row" :gutter="32">
<a-col :lg="9">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="优先级"
style="margin-left: 27px">
<a-select
v-decorator="[ 'priority', {}]"
placeholder="请选择优先级"
:disabled="disableSubmit"
:getPopupContainer = "(target) => target.parentNode"
style="margin-left: 5px;width: 135%">
<a-select-option value="L">低</a-select-option>
<a-select-option value="M">中</a-select-option>
<a-select-option value="H">高</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="15" push="3">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="通告对象类型"
style="margin-left: -14px">
<a-select
v-decorator="[ 'msgType', validatorRules.msgType]"
placeholder="请选择通告对象类型"
:disabled="disableSubmit"
@change="chooseMsgType"
:getPopupContainer = "(target) => target.parentNode"
style="width: 200px;margin-left: 5px">
<a-select-option value="USER">指定用户</a-select-option>
<a-select-option value="ALL">全体用户</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="24" pull="2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="指定用户"
v-if="userType">
<a-select
mode="multiple"
placeholder="请选择用户"
v-model="selectedUser"
@dropdownVisibleChange="selectUserIds"
style="width: 119%"
>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="24" pull="3">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="内容"
style="margin-left: 5px">
<j-editor style="width: 130%" v-decorator="[ 'msgContent', {} ]" triggerChange></j-editor>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
<select-user-list-modal ref="UserListModal" @choseUser="choseUser"></select-user-list-modal>