提交 9c44ffaa 编写于 作者: JEECG低代码平台's avatar JEECG低代码平台

2.1.3 大屏版本发布

上级 ea5ef384
......@@ -7,12 +7,12 @@
Jeecg-Boot 快速开发平台(前后端分离版本)
===============
当前最新版本: 2.1.2(发布日期:20191122
当前最新版本: 2.1.3(发布日期:20191226
[![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-JEECG团队-orange.svg)](http://www.jeecg.com)
[![](https://img.shields.io/badge/version-2.1.2-brightgreen.svg)](https://github.com/zhangdaiscott/jeecg-boot)
[![](https://img.shields.io/badge/version-2.1.3-brightgreen.svg)](https://github.com/zhangdaiscott/jeecg-boot)
[![GitHub stars](https://img.shields.io/github/stars/zhangdaiscott/jeecg-boot.svg?style=social&label=Stars)](https://github.com/zhangdaiscott/jeecg-boot)
[![GitHub forks](https://img.shields.io/github/forks/zhangdaiscott/jeecg-boot.svg?style=social&label=Fork)](https://github.com/zhangdaiscott/jeecg-boot)
......
Ant Design Jeecg Vue
====
当前最新版本: 2.1.2(发布日期:20191122
当前最新版本: 2.1.3(发布日期:20191226
Overview
----
......
{
"name": "vue-antd-jeecg",
"version": "2.1.2",
"version": "2.1.3",
"private": true,
"scripts": {
"pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
......@@ -10,7 +10,7 @@
},
"dependencies": {
"@antv/data-set": "^0.10.2",
"@jeecg/antd-online": "2.1.2",
"@jeecg/antd-online-re": "2.1.3",
"@tinymce/tinymce-vue": "^2.0.0",
"ant-design-vue": "^1.4.0",
"apexcharts": "^3.6.5",
......@@ -51,12 +51,12 @@
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.1.0",
"html-webpack-plugin": "^4.0.0-beta.11",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.6.10"
"vue-template-compiler": "^2.6.10",
"html-webpack-plugin": "^4.0.0-beta.11"
},
"eslintConfig": {
"root": true,
......
......@@ -40,3 +40,8 @@
/*列表中范围查询样式*/
.query-group-cust{width: calc(50% - 10px)}
.query-group-split-cust:before{content:"~";width: 20px;display: inline-block;text-align: center}
/*erp风格子表外框padding设置*/
.ant-card-wider-padding.cust-erp-sub-tab>.ant-card-body{padding:5px 12px}
<template>
<div :style="{ padding: '0 0 32px 32px' }">
<div :style="{ padding: '0 50px 32px 0' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding">
<v-tooltip/>
<v-legend/>
<v-axis/>
......@@ -23,13 +23,13 @@
dataSource: {
type: Array,
default: () => [
{ type: '10:10', bar: 2, line: 2 },
{ type: '10:15', bar: 6, line: 3 },
{ type: '10:20', bar: 2, line: 5 },
{ type: '10:25', bar: 9, line: 1 },
{ type: '10:30', bar: 2, line: 3 },
{ type: '10:35', bar: 2, line: 1 },
{ type: '10:40', bar: 1, line: 2 }
{ type: '10:10', bar: 200, line: 1000 },
{ type: '10:15', bar: 600, line: 1000},
{ type: '10:20', bar: 200, line: 1000},
{ type: '10:25', bar: 900, line: 1000},
{ type: '10:30', bar: 200, line: 1000},
{ type: '10:35', bar: 200, line: 1000},
{ type: '10:40', bar: 100, line: 1000}
]
},
height: {
......@@ -39,6 +39,7 @@
},
data() {
return {
padding: { top:50, right:50, bottom:100, left:50 },
scale: [{
dataKey: 'bar',
min: 0
......
<template>
<div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart :forceFit="true" :height="height" :data="data">
<v-chart :forceFit="true" :height="254" :data="chartData" :padding="['auto', 'auto', '40', '50']">
<v-tooltip />
<v-axis />
<v-legend />
......@@ -13,6 +13,11 @@
<script>
import { DataSet } from '@antv/data-set'
const sourceDataConst = [
{ type: 'Jeecg', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
{ type: 'Jeebt', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 },
];
const fieldsConst = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'];
export default {
name: 'BarMultid',
props: {
......@@ -20,62 +25,47 @@
type: String,
default: ''
},
dataSource:{
type: Array,
default: () => [
{ type: 'Jeecg', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
{ type: 'Jeebt', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 }
]
sourceData:{
type:Array,
default:()=>[]
},
fields:{
type: Array,
default: () => ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.']
},
// 别名,需要的格式:[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
aliases:{
type: Array,
default: () => []
},
height: {
type: Number,
default: 254
type:Array,
default:()=>[]
}
},
data() {
return {
chartData:"",
height: 400,
adjust: [{
type: 'dodge',
marginRatio: 1 / 32
}]
marginRatio: 1 / 32,
}],
};
},
watch: {
'sourceData': function () {
this.drawChart();
}
},
computed: {
data() {
const dv = new DataSet.View().source(this.dataSource)
mounted(){
this.drawChart()
},
methods:{
drawChart(){
let temp = sourceDataConst;
if(this.sourceData && this.sourceData.length>0){
temp = this.sourceData
}
const dv = new DataSet.View().source(temp);
dv.transform({
type: 'fold',
fields: this.fields,
fields:(!this.fields||this.fields.length==0)?fieldsConst:this.fields,
key: 'x',
value: 'y'
})
// bar 使用不了 - 和 / 所以替换下
let rows = dv.rows.map(row => {
if (typeof row.x === 'string') {
row.x = row.x.replace(/[-/]/g, '_')
}
return row
})
// 替换别名
rows.forEach(row => {
for (let item of this.aliases) {
if (item.field === row.type) {
row.type = item.alias
break
}
}
})
return rows
value: 'y',
});
this.chartData=dv.rows;
}
}
}
......
<template>
<div :style="{ padding: '0 0 32px 32px' }">
<v-chart :forceFit="true" :height="350" :data="chartData" :scale="scale">
<v-chart :forceFit="true" :height="300" :data="chartData" :scale="scale">
<v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
<v-axis
dataKey="value"
......@@ -32,7 +32,7 @@
type="arc"
:zIndex="1"
:start="arcGuide2Start"
:end="getArcGuide2End()"
:end="getArcGuide2End"
:vStyle="arcGuide2Style"
></v-guide>
<v-guide
......@@ -88,7 +88,7 @@
}];
const data = [
{ value: 0},
{ value: 7.0 },
];
export default {
......@@ -96,7 +96,7 @@
props:{
datasource:{
type: Number,
default:0
default:7
},
title: {
type: String,
......
<template>
<div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart
height="254"
:data="datasource"
:forceFit="true"
:padding="['auto', 'auto', '40', '50']">
<v-tooltip />
<v-axis />
<v-bar position="x*y"/>
</v-chart>
</div>
</template>
<script>
const data = []
for (let i = 0; i < 12; i += 1) {
data.push({
x: `${i + 1}月`,
y: Math.floor(Math.random() * 1000) + 200
})
}
const tooltip = [
'x*y',
(x, y) => ({
name: x,
value: y
})
]
const scale = [{
dataKey: 'x',
min: 2
}, {
dataKey: 'y',
title: '时间',
min: 1,
max: 22
}]
export default {
name: "Bar",
props: {
title: {
type: String,
default: ''
}
},
mounted(){
this.datasource = data
},
data () {
return {
datasource:[],
scale,
tooltip
}
}
}
</script>
\ No newline at end of file
......@@ -3,7 +3,7 @@
<a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
</a-radio-group>
<a-select v-else-if="tagType=='select'" :placeholder="placeholder" :disabled="disabled" :value="value" @change="handleInput">
<a-select v-else-if="tagType=='select'" :getPopupContainer = "(target) => target.parentNode" :placeholder="placeholder" :disabled="disabled" :value="value" @change="handleInput">
<a-select-option value="">请选择</a-select-option>
<a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
<span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
......
......@@ -119,7 +119,7 @@
/** 数据回显*/
loadItemByCode(){
if(!this.value || this.value=="0"){
this.treeValue = ""
this.treeValue = []
}else{
getAction(this.view,{ids:this.value}).then(res=>{
console.log(124345)
......
......@@ -14,6 +14,7 @@
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
......@@ -42,11 +43,12 @@
},
plugins: {
type: [String, Array],
default: 'lists image media table textcolor wordcount contextmenu fullscreen'
default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
},
toolbar: {
type: [String, Array],
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | fullscreen'
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
branding:false
}
},
data() {
......
<template>
<div class="j-super-query-box">
<slot>
<a-tooltip v-if="superQueryFlag" title="已有高级查询条件生效">
<a-button type="primary" @click="visible=true">
<a-icon type="appstore" theme="twoTone" :spin="true"></a-icon>
<span>高级查询</span>
</a-button>
</a-tooltip>
<a-button v-else type="primary" icon="filter" @click="visible=true">高级查询</a-button>
</slot>
<a-modal
title="高级查询构造器"
:width="1000"
:visible="visible"
@cancel="handleCancel"
:mask="false"
wrapClassName="ant-modal-cust-warp"
class="j-super-query-modal"
style="top:5%;max-height: 95%;">
......@@ -33,7 +44,7 @@
<a-form v-else layout="inline">
<a-form-item label="过滤条件匹配" style="margin-bottom: 12px;">
<a-select v-model="selectValue">
<a-select v-model="selectValue" :getPopupContainer="node=>node.parentNode">
<a-select-option value="and">AND(所有条件都要求匹配)</a-select-option>
<a-select-option value="or">OR(条件中的任意一个匹配)</a-select-option>
</a-select>
......@@ -42,13 +53,23 @@
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
<a-col :span="8">
<a-select placeholder="选择查询字段" v-model="item.field" @select="(val,option)=>handleSelected(option,item)">
<a-select-option v-for="(f,fIndex) in fieldList" :key=" 'field'+fIndex" :value="f.value" :data-idx="fIndex">{{ f.text }}</a-select-option>
</a-select>
<a-tree-select
showSearch
v-model="item.field"
:treeData="fieldTreeData"
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="选择查询字段"
allowClear
treeDefaultExpandAll
:getPopupContainer="node=>node.parentNode"
style="width: 100%"
@select="(val,option)=>handleSelected(option,item)"
>
</a-tree-select>
</a-col>
<a-col :span="4">
<a-select placeholder="匹配规则" v-model="item.rule">
<a-select placeholder="匹配规则" v-model="item.rule" :getPopupContainer="node=>node.parentNode">
<a-select-option value="eq">等于</a-select-option>
<a-select-option value="ne">不等于</a-select-option>
<a-select-option value="gt">大于</a-select-option>
......@@ -90,6 +111,7 @@
placeholder="请选择部门"
:customReturnField="item.customReturnField || 'id'"
/>
<a-select v-else-if="item.options instanceof Array" v-model="item.val" :options="item.options" allowClear placeholder="请选择"/>
<j-date v-else-if=" item.type=='date' " v-model="item.val" placeholder="请选择日期" style="width: 100%"></j-date>
<j-date v-else-if=" item.type=='datetime' " v-model="item.val" placeholder="请选择时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"></j-date>
<a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/>
......@@ -137,6 +159,7 @@
</a-modal>
</a-modal>
</div>
</template>
<script>
......@@ -186,6 +209,7 @@
},
data() {
return {
fieldTreeData: [],
prompt: {
visible: false,
......@@ -199,6 +223,7 @@
// 保存查询条件的前缀名
saveCodeBefore: 'JSuperQuerySaved_',
selectValue: 'and',
superQueryFlag: false
}
},
watch: {
......@@ -214,6 +239,35 @@
})
}
}
},
fieldList: {
deep: true,
immediate: true,
handler(val) {
let mainData = [], subData = []
val.forEach(item => {
let data = { ...item }
data.label = data.label || data.text
let hasChildren = (data.children instanceof Array)
data.disabled = hasChildren
data.selectable = !hasChildren
if (hasChildren) {
data.children = data.children.map(item2 => {
let child = { ...item2 }
child.label = child.label || child.text
child.label = data.label + '-' + child.label
child.value = data.value + ',' + child.value
child.val = ''
return child
})
data.val = ''
subData.push(data)
} else {
mainData.push(data)
}
})
this.fieldTreeData = mainData.concat(subData)
}
}
},
......@@ -225,17 +279,21 @@
this.visible = true
},
handleOk() {
console.log('---高级查询参数--->', this.queryParamsModel)
if (!this.isNullArray(this.queryParamsModel)) {
let event = {
matchType: this.selectValue,
params: this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
}
this.$emit(this.callback, event.params, event.matchType)
console.log('---高级查询参数--->', event)
this.emitCallback(event.params, event.matchType)
} else {
this.$emit(this.callback)
this.emitCallback()
}
},
emitCallback(params, matchType) {
this.superQueryFlag = !!params
this.$emit(this.callback, params, matchType)
},
handleCancel() {
this.close()
},
......@@ -249,19 +307,19 @@
handleDel(index) {
this.queryParamsModel.splice(index, 1)
},
handleSelected(option, item) {
let index = option.data.attrs['data-idx']
let { type, dictCode, dictTable, customReturnField } = this.fieldList[index]
handleSelected(node, item) {
let { type, options, dictCode, dictTable, customReturnField } = node.dataRef
item['type'] = type
item['options'] = options
item['dictCode'] = dictCode
item['dictTable'] = dictTable
item['customReturnField'] = customReturnField
this.$set(item, 'val', '')
this.$set(item, 'val', undefined)
},
handleReset() {
this.superQueryFlag = false
this.queryParamsModel = [{}]
this.$emit(this.callback)
this.emitCallback()
},
handleSave() {
let queryParams = this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
......@@ -332,7 +390,7 @@
}
if (array.length === 1) {
let obj = array[0]
if (!obj.field || !obj.val || !obj.rule) {
if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) {
return true
}
}
......@@ -344,6 +402,9 @@
let item = array[i]
if (item == null || Object.keys(item).length <= 0) {
array.splice(i--, 1)
} else {
// 去掉特殊属性
delete item.options
}
}
return array
......@@ -354,10 +415,11 @@
<style lang="scss" scoped>
.j-super-query-modal {
.j-super-query-box {
display: inline-block;
}
/deep/ {
}
.j-super-query-modal {
.j-super-query-history-card /deep/ {
.ant-card-body,
......
......@@ -22,7 +22,7 @@
data(){
return {
treeData:[],
treeValue:"",
treeValue: null,
url_root:"/sys/category/loadTreeRoot",
url_children:"/sys/category/loadTreeChildren",
url_view:'/sys/category/loadOne',
......@@ -97,7 +97,7 @@
methods:{
loadViewInfo(){
if(!this.value || this.value=="0"){
this.treeValue = ""
this.treeValue = null
}else{
let param = {
field:this.field,
......
......@@ -77,7 +77,7 @@
},
data () {
return {
treeValue:"",
treeValue: null,
treeData:[],
url:"/sys/dict/loadTreeData",
view:'/sys/dict/loadDictItem/',
......@@ -106,7 +106,7 @@
methods: {
loadItemByCode(){
if(!this.value || this.value=="0"){
this.treeValue = ""
this.treeValue = null
}else{
getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{
if(res.success){
......@@ -211,7 +211,7 @@
onChange(value){
if(!value){
this.$emit('change', '');
this.treeValue = ''
this.treeValue = null
} else if (value instanceof Array) {
this.$emit('change', value.map(item => item.value).join(','))
this.treeValue = value
......
......@@ -61,7 +61,7 @@
default:"temp"
},
value:{
type:String,
type:[String,Array],
required:false
},
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
......@@ -80,7 +80,11 @@
},
watch:{
value(val){
this.initFileList(val)
if (val instanceof Array) {
this.initFileList(val.join(','))
} else {
this.initFileList(val)
}
}
},
created(){
......
......@@ -2,7 +2,7 @@
<a-modal
centered
:title="name + '选择'"
:width="900"
:width="width"
:visible="visible"
@ok="handleOk"
@cancel="close"
......@@ -17,7 +17,7 @@
<a-col :span="14">
<a-form-item :label="(queryParamText||name)">
<a-input :placeholder="'请输入' + (queryParamText||name)" v-model="queryParam[valueKey]"></a-input>
<a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/>
</a-form-item>
</a-col>
<a-col :span="8">
......@@ -34,8 +34,8 @@
<a-table
size="small"
bordered
rowKey="id"
:columns="columns"
:rowKey="rowKey"
:columns="innerColumns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
......@@ -49,7 +49,7 @@
<a-col :span="8">
<a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
<a-table rowKey="id" size="small" bordered v-bind="selectedTable">
<a-table size="small" :rowKey="rowKey" bordered v-bind="selectedTable">
<span slot="action" slot-scope="text, record, index">
<a @click="handleDeleteSelected(record, index)">删除</a>
</span>
......@@ -62,7 +62,9 @@
</template>
<script>
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { cloneObject, pushIfNotExist } from '@/utils/util'
export default {
name: 'JSelectBizComponentModal',
......@@ -84,6 +86,10 @@
type: Boolean,
default: true
},
width: {
type: Number,
default: 900
},
name: {
type: String,
......@@ -94,60 +100,110 @@
required: true,
default: ''
},
// 根据 value 获取显示文本的地址,例如存的是 username,可以通过该地址获取到 realname
valueUrl: {
type: String,
default: ''
},
displayKey: {
type: String,
default: null
},
propColumns: {
columns: {
type: Array,
required: true,
default: () => []
},
// 查询条件Code
queryParamCode: {
type: String,
default: null
},
// 查询条件文字
queryParamText: {
type: String,
default: null
},
rowKey: {
type: String,
default: 'id'
},
},
data() {
return {
innerValue: [],
// 表头
columns: this.propColumns,
innerColumns: this.columns,
// 已选择列表
selectedTable: {
pagination: false,
scroll: { y: 240 },
columns: [
this.propColumns[0],
{
...this.columns[0],
width: this.columns[0].widthRight || this.columns[0].width,
},
{ title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
],
dataSource: [],
},
url: { list: this.listUrl }
url: { list: this.listUrl },
/* 分页参数 */
ipagination: {
current: 1,
pageSize: 5,
pageSizeOptions: ['5', '10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + '' + total + ''
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
options: [],
dataSourceMap: {},
}
},
watch: {
value: {
deep: true,
immediate: true,
handler(val) {
this.innerValue = cloneObject(val)
this.selectedRowKeys = []
this.valueWatchHandler(val)
this.queryOptionsByValue(val)
}
},
dataSource: {
deep: true,
handler(val) {
let options = val.map(data => ({ label: data[this.displayKey || this.valueKey], value: data[this.valueKey] }))
this.$emit('ok', options)
this.valueWatchHandler(this.value)
this.emitOptions(val)
this.valueWatchHandler(this.innerValue)
}
},
selectionRows: {
selectedRowKeys: {
immediate: true,
deep: true,
handler(val) {
this.selectedTable.dataSource = val
this.selectedTable.dataSource = val.map(key => {
for (let data of this.dataSource) {
if (data[this.rowKey] === key) {
pushIfNotExist(this.innerValue, data[this.valueKey])
return data
}
}
for (let data of this.selectedTable.dataSource) {
if (data[this.rowKey] === key) {
pushIfNotExist(this.innerValue, data[this.valueKey])
return data
}
}
console.warn('未找到选择的行信息,key:' + key)
return {}
})
},
},
}
},
methods: {
......@@ -158,18 +214,63 @@
},
valueWatchHandler(val) {
let dataSource = []
let selectedRowKeys = []
val.forEach(item => {
this.dataSource.forEach(data => {
this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
if (data[this.valueKey] === item) {
dataSource.push(data)
selectedRowKeys.push(data.id)
pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
}
})
})
this.selectedTable.dataSource = dataSource
this.selectedRowKeys = selectedRowKeys
},
queryOptionsByValue(value) {
if (!value || value.length === 0) {
return
}
// 判断options是否存在value,如果已存在数据就不再请求后台了
let notExist = false
for (let val of value) {
let find = false
for (let option of this.options) {
if (val === option.value) {
find = true
break
}
}
if (!find) {
notExist = true
break
}
}
if (!notExist) return
getAction(this.valueUrl || this.listUrl, {
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询,防止后台进行了模糊匹配,导致查询结果不准确
[this.valueKey]: value.join(',') + ',',
pageNo: 1,
pageSize: value.length
}).then((res) => {
if (res.success) {
let dataSource = res.result
if (!(dataSource instanceof Array)) {
dataSource = res.result.records
}
this.emitOptions(dataSource, (data) => {
pushIfNotExist(this.innerValue, data[this.valueKey])
pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)
})
}
})
},
emitOptions(dataSource, callback) {
dataSource.forEach(data => {
let key = data[this.valueKey]
this.dataSourceMap[key] = data
pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value')
typeof callback === 'function' ? callback(data) : ''
})
this.$emit('options', this.options, this.dataSourceMap)
},
/** 完成选择 */
......@@ -181,22 +282,30 @@
/** 删除已选择的 */
handleDeleteSelected(record, index) {
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1)
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
this.selectedTable.dataSource.splice(index, 1)
},
customRowFn(record) {
if (!this.multiple) {
return {
on: {
click: () => {
this.selectedRowKeys = [record.id]
return {
on: {
click: () => {
let key = record[this.rowKey]
if (!this.multiple) {
this.selectedRowKeys = [key]
this.selectedTable.dataSource = [record]
} else {
let index = this.selectedRowKeys.indexOf(key)
if (index === -1) {
this.selectedRowKeys.push(key)
this.selectedTable.dataSource.push(record)
} else {
this.handleDeleteSelected(record, index)
}
}
}
}
}
return {}
},
}
......
......@@ -16,11 +16,21 @@ export default {
### 配置参数
- `name`:`String` 显示名字,例如选择部门就填写'部门'
- `listUrl`:`String` 数据请求地址,必须是封装了分页的地址
- `displayKey`:`String` 显示在标签上的字段 key
- `returnKeys`:`Array` v-model 绑定的 keys,是个数组,默认使用第二项,当配置了 `returnId=true` 就返回第一项
- `returnId`:`Boolean` 返回ID,设为true后将返回配置的 `returnKeys` 中的第一项
- `selectButtonText`:`String` 选择按钮的文字
- `queryParamText`:`String` 查询条件显示文字
- `columns`:`Array` 列配置项,与a-table的列配置项相同,会将第一项配置成已选择的列表
\ No newline at end of file
| 参数名 | 类型 | 必填 | 默认值 | 备注 |
|-----------------------|---------|------|--------------|--------------------------------------------------------------------------------------|
| rowKey | String | | "id" | 唯一标识的字段名 |
| value(v-model) | String | | "" | 默认选择的数据,多个用半角逗号分割 |
| name | String | | "" | 显示名字,例如选择用户就填写"用户" |
| listUrl | String | 是 | | 数据请求地址,必须是封装了分页的地址 |
| valueUrl | String | | "" | 获取显示文本的地址,例如存的是 username,可以通过该地址获取到 realname |
| displayKey | String | | null | 显示在标签上的字段 key ,不传则直接显示数据 |
| returnKeys | Array | | ['id', 'id'] | v-model 绑定的 keys,是个数组,默认使用第二项,当配置了 `returnId=true` 就返回第一项 |
| returnId | Boolean | | false | 返回ID,设为true后将返回配置的 `returnKeys` 中的第一项 |
| selectButtonText | String | | "选择" | 选择按钮的文字 |
| queryParamText | String | | null | 查询条件显示文字,不传则使用 `name` |
| columns | Array | 是 | | 列配置项,与antd的table的配置完全一致。列的第一项会被配置成右侧已选择的列表上 |
| columns[0].widthRight | Array | | null | 仅列的第一项可以应用此配置,表示右侧已选择列表的宽度,建议 `70%`,不传则应用`width` |
| placeholder | String | | "请选择" | 占位符 |
| disabled | Boolean | | false | 是否禁用 |
| multiple | Boolean | | false | 是否可多选 |
| buttons | Boolean | | true | 是否显示"选择"按钮,如果不显示,可以直接点击文本框打开选择界面 |
<template>
<a-row class="j-select-biz-component-box" type="flex" :gutter="8">
<a-col class="left" :class="{'full': !buttons}">
<a-select
mode="multiple"
:placeholder="placeholder"
v-model="selectValue"
:options="selectOptions"
allowClear
:disabled="disabled"
:open="false"
style="width: 100%;"
@click.native="visible=(buttons?visible:true)"
/>
<slot name="left">
<a-select
mode="multiple"
:placeholder="placeholder"
v-model="selectValue"
:options="selectOptions"
allowClear
:disabled="disabled"
:open="false"
style="width: 100%;"
@click.native="visible=(buttons?visible:true)"
/>
</slot>
</a-col>
<a-col v-if="buttons" class="right">
......@@ -20,11 +22,9 @@
<j-select-biz-component-modal
v-model="selectValue"
:name="name" :listUrl="listUrl" :returnKeys="returnKeys" :displayKey="displayKey"
:propColumns="columns" :queryParamText="queryParamText" :multiple="multiple"
:visible.sync="visible"
:valueKey="valueKey"
@ok="selectOptions=$event"
v-bind="modalProps"
@options="handleOptions"
/>
</a-row>
</template>
......@@ -63,20 +63,6 @@
type: Boolean,
default: true
},
/* 可复用属性 */
// 被选择的名字,例如选择部门就填写'部门'
name: {
type: String,
default: ''
},
// list 接口地址
listUrl: {
type: String,
required: true,
default: ''
},
// 显示的 Key
displayKey: {
type: String,
......@@ -92,29 +78,28 @@
type: String,
default: '选择'
},
// 查询条件文字
queryParamText: {
type: String,
default: null
},
// columns
columns: {
type: Array,
default: () => []
}
},
data() {
return {
selectValue: [],
selectOptions: [],
dataSourceMap: {},
visible: false
}
},
computed: {
valueKey() {
return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
}
},
modalProps() {
return Object.assign({
valueKey: this.valueKey,
multiple: this.multiple,
returnKeys: this.returnKeys,
displayKey: this.displayKey || this.valueKey
}, this.$attrs)
},
},
watch: {
value: {
......@@ -130,23 +115,23 @@
selectValue: {
deep: true,
handler(val) {
const data = val.join(',')
let rows = val.map(key => this.dataSourceMap[key])
this.$emit('select', rows)
let data = val.join(',')
this.$emit('input', data)
this.$emit('change', data)
}
}
},
methods: {}
methods: {
handleOptions(options, dataSourceMap) {
this.selectOptions = options
this.dataSourceMap = dataSourceMap
},
}
}
</script>
<style lang="scss">
.j-select-biz-component-box {
.ant-select-search__field {
display: none !important;
}
}
</style>
<style lang="scss" scoped>
.j-select-biz-component-box {
......@@ -163,5 +148,11 @@
.full {
width: 100%;
}
/deep/ {
.ant-select-search__field {
display: none !important;
}
}
}
</style>
\ No newline at end of file
<template>
<!-- 定义在这里的参数都是不可在外部覆盖的,防止出现问题 -->
<j-select-biz-component
:value="value"
name="用户"
displayKey="realname"
:listUrl="url.list"
:columns="columns"
queryParamText="账号"
v-on="$listeners"
v-bind="$attrs"
v-bind="attrs"
/>
</template>
......@@ -25,22 +20,24 @@
return {
url: { list: '/sys/user/list' },
columns: [
{ title: '姓名', align: 'center', width: 100, dataIndex: 'realname' },
{ title: '账号', align: 'center', width: 100, dataIndex: 'username' },
{ title: '电话', align: 'center', width: 100, dataIndex: 'phone' },
{ title: '出生日期', align: 'center', width: 100, dataIndex: 'birthday' }
]
{ title: '姓名', align: 'center', width: '20%', widthRight: '70%', dataIndex: 'realname' },
{ title: '账号', align: 'center', width: '20%', dataIndex: 'username' },
{ title: '电话', align: 'center', width: '23%', dataIndex: 'phone' },
{ title: '出生日期', align: 'center', width: '23%', dataIndex: 'birthday' }
],
// 定义在这里的参数都是可以在外部传递覆盖的,可以更灵活的定制化使用的组件
default: {
name: '用户',
width: 1000,
displayKey: 'realname',
returnKeys: ['id', 'username'],
queryParamText: '账号',
}
}
},
watch: {
$attrs: {
deep: true,
immediate: true,
handler(val) {
if (!val.returnKeys) {
val.returnKeys = ['id', 'username']
}
}
computed: {
attrs() {
return Object.assign(this.default, this.$attrs)
}
}
}
......
<template>
<j-select-biz-component v-bind="configs" v-on="$listeners"/>
<j-select-biz-component :width="1000" v-bind="configs" v-on="$listeners"/>
</template>
<script>
......@@ -16,11 +16,12 @@
displayKey: 'name',
returnKeys: ['id', 'code'],
listUrl: '/sys/position/list',
queryParamText: '职务编码',
queryParamCode: 'name',
queryParamText: '职务名称',
columns: [
{ title: '职务名称', dataIndex: 'name', align: 'center', width: 100 },
{ title: '职务编码', dataIndex: 'code', align: 'center', width: 100 },
{ title: '职级', dataIndex: 'rank_dictText', align: 'center', width: 100 }
{ title: '职务名称', dataIndex: 'name', align: 'center', width: '30%', widthRight: '70%' },
{ title: '职务编码', dataIndex: 'code', align: 'center', width: '35%' },
{ title: '职级', dataIndex: 'rank_dictText', align: 'center', width: '25%' }
]
}
}
......
......@@ -75,11 +75,6 @@
align: 'center',
dataIndex: 'realname'
},
{
title: '角色名称',
align: 'center',
dataIndex: 'roleName'
},
{
title: '性别',
align: 'center',
......@@ -167,6 +162,9 @@
names = names.substring(1)
}
this.$emit("initComp", names)
}else{
// JSelectUserByDep组件bug issues/I16634
this.$emit("initComp", "")
}
},
async loadData(arg) {
......
......@@ -255,7 +255,7 @@
}
</script>
<style lang="scss">
<style lang="less">
/*
* The following styles are auto-applied to elements with
......@@ -333,7 +333,7 @@
border-bottom: 1px solid transparent !important;
}
.ant-tabs-tab-active {
border-color: #1890ff !important;
border-color: @primary-color!important;
}
}
......
......@@ -145,7 +145,7 @@
</style>
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
<style lang="scss">
<style lang="less">
.ant-menu.ant-menu-root {
& > .ant-menu-item:first-child {
background-color: transparent;
......@@ -156,7 +156,7 @@
&.ant-menu-item-selected {
& > a, & > a:hover {
color: #1890ff;
color: @primary-color;
}
}
}
......
......@@ -161,10 +161,10 @@
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
$height: 59px;
@height: 59px;
.layout {
......@@ -174,8 +174,8 @@
margin-left: 10px;
.ant-menu.ant-menu-horizontal {
height: $height;
line-height: $height;
height: @height;
line-height: @height;
}
}
.trigger {
......@@ -189,15 +189,15 @@
.header {
z-index: 2;
color: white;
height: $height;
background-color: #1890ff;
height: @height;
background-color: @primary-color;
transition: background 300ms;
/* dark 样式 */
&.dark {
color: #000000;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
background-color: white !important;
background-color: @primary-color;
}
}
......@@ -209,8 +209,8 @@
}
.ant-layout-header {
height: $height;
line-height: $height;
height: @height;
line-height: @height;
}
/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
......
......@@ -31,7 +31,7 @@
<a-list>
<a-list-item :key="index" v-for="(record, index) in announcement1">
<div style="margin-left: 5%;width: 80%">
<p><a @click="showAnnouncement(record)">标题:{{ record.titile }}</a></p>
<p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
<p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
</div>
<div style="text-align: right">
......@@ -49,7 +49,7 @@
<a-list>
<a-list-item :key="index" v-for="(record, index) in announcement2">
<div style="margin-left: 5%;width: 80%">
<p><a @click="showAnnouncement(record)">标题:{{ record.titile }}</a></p>
<p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
<p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
</div>
<div style="text-align: right">
......@@ -191,24 +191,24 @@
// WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
var userId = store.getters.userInfo.id;
var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
//console.log(url);
console.log(url);
this.websock = new WebSocket(url);
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
this.websock.onopen = this.websocketOnopen;
this.websock.onerror = this.websocketOnerror;
this.websock.onmessage = this.websocketOnmessage;
this.websock.onclose = this.websocketOnclose;
},
websocketonopen: function () {
websocketOnopen: function () {
console.log("WebSocket连接成功");
//心跳检测重置
this.heartCheck.reset().start();
},
websocketonerror: function (e) {
websocketOnerror: function (e) {
console.log("WebSocket连接发生错误");
this.reconnect();
},
websocketonmessage: function (e) {
//console.log("-----接收消息-------",e.data);
websocketOnmessage: function (e) {
console.log("-----接收消息-------",e.data);
var data = eval("(" + e.data + ")"); //解析对象
if(data.cmd == "topic"){
//系统通知
......@@ -217,22 +217,20 @@
//用户消息
this.loadData();
}
//心跳检测重置
this.heartCheck.reset().start();
},
websocketsend(text) { // 数据发送
websocketOnclose: function (e) {
console.log("connection closed (" + e.code + ")");
this.reconnect();
},
websocketSend(text) { // 数据发送
try {
this.websock.send(text);
} catch (err) {
console.log("send failed (" + err.code + ")");
}
},
websocketclose: function (e) {
console.log("connection closed (" + e.code + ")");
this.reconnect();
},
openNotification (data) {
var text = data.msgTxt;
......@@ -284,7 +282,7 @@
this.timeoutObj = setTimeout(function(){
//这里发送一个心跳,后端收到后,返回一个心跳消息,
//onmessage拿到返回的心跳就说明连接正常
that.websocketsend("HeartBeat");
that.websocketSend("HeartBeat");
console.info("客户端发送心跳");
//self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了
// that.websock.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
......
......@@ -32,15 +32,15 @@
}
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
/*缩小首页布 局顶部的高度*/
$height: 59px;
@height: 59px;
.sider {
box-shadow: none !important;
.logo {
height: $height !important;
line-height: $height !important;
height: @height !important;
line-height: @height !important;
box-shadow: none !important;
transition: background 300ms;
......@@ -53,7 +53,7 @@
}
&.light .logo {
background-color: #1890ff;
background-color: @primary-color;
}
}
</style>
\ No newline at end of file
<template>
<div class="user-wrapper" :class="theme">
<!-- update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
<!-- update-begin author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 -->
<span class="action" @click="showClick">
<a-icon type="search"></a-icon>
</span>
<span v-show="shows" class="borders">
<a-select
class="search-input"
showSearch
:showArrow="false"
placeholder="搜索菜单"
optionFilterProp="children"
:filterOption="filterOption"
@change="searchMethods"
@blur="hiddenClick"
>
<a-select-option v-for="site in search " :value="site.id">{{site.meta.title}}</a-select-option>
</a-select>
</span>
<!-- update-end author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 -->
<!-- update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
<span class="action">
<a class="logout_title" target="_blank" href="http://jeecg-boot.mydoc.io">
<a-icon type="question-circle-o"></a-icon>
......@@ -66,12 +87,19 @@
import UserPassword from './UserPassword'
import SettingDrawer from "@/components/setting/SettingDrawer";
import DepartSelect from './DepartSelect'
import { mapActions, mapGetters } from 'vuex'
import { mapActions, mapGetters,mapState } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js'
export default {
name: "UserMenu",
mixins: [mixinDevice],
data(){
return{
//菜单搜索
search:[],
shows:false
}
},
components: {
HeaderNotice,
UserPassword,
......@@ -85,7 +113,31 @@
default: 'dark'
}
},
/* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
created() {
let lists = []
console.log("permissionMenuList: ",this.permissionMenuList)
this.searchMenus(lists,this.permissionMenuList)
this.search=[...lists]
console.log(this.search)
},
computed: {
...mapState({
// 后台菜单
permissionMenuList: state => state.user.permissionList
})
},
/* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
methods: {
/* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
showClick(){
this.shows = !this.shows
},
hiddenClick(){
this.shows = false
},
/* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
...mapActions(["Logout"]),
...mapGetters(["nickname", "avatar","userInfo"]),
getAvatar(){
......@@ -122,11 +174,54 @@
},
systemSetting(){
this.$refs.settingDrawer.showDrawer()
},
/* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
searchMenus(arr,menus){
for(let i of menus){
if(!i.hidden && "layouts/RouteView"!==i.component){
arr.push(i)
}
if(i.children&& i.children.length>0){
this.searchMenus(arr,i.children)
}
}
},
filterOption(input, option) {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
searchMethods(value){
let jump = this.search.filter(item=>item.id==value)
this.$router.push({ path:jump[0].path})
}
/*update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
}
}
</script>
<style lang="scss" scoped>
/* update_begin author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
/* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
.user-wrapper .search-input {
width: 180px;
color: white;
/deep/ {
.ant-select-selection {
background-color: inherit;
border: 0;
border-bottom: 1px solid white;
}
.ant-select-selection__placeholder,
.ant-select-search__field__placeholder {
color: inherit;
}
}
}
/* update-end author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
/* update_end author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
</style>
<style scoped>
.logout_title {
color: inherit;
......
......@@ -22,7 +22,7 @@ export default {
fixSiderbar: false, // sticky siderbar
autoHideHeader: false, // auto hide header
colorWeak: false,
multipage: false, //默认多页签模式
multipage: true, //默认多页签模式
// vue-ls options
storageOptions: {
namespace: 'pro__', // key prefix
......
......@@ -18,8 +18,8 @@ import VueApexCharts from 'vue-apexcharts'
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
import "@jeecg/antd-online"
import '@jeecg/antd-online/dist/OnlineForm.css'
import "@jeecg/antd-online-re"
import '@jeecg/antd-online-re/dist/OnlineForm.css'
import {
ACCESS_TOKEN,
......@@ -69,7 +69,7 @@ new Vue({
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,true))
store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,config.multipage))
},
render: h => h(App)
}).$mount('#app')
......@@ -80,10 +80,11 @@ export const JEditableTableMixin = {
},
/** 查询某个tab的数据 */
requestSubTableData(url, params, tab) {
requestSubTableData(url, params, tab, success) {
tab.loading = true
getAction(url, params).then(res => {
tab.dataSource = res.result || []
typeof success === 'function' ? success(res) : ''
}).finally(() => {
tab.loading = false
})
......
......@@ -8,7 +8,7 @@ import { ACCESS_TOKEN } from "@/store/mutation-types"
// 创建 axios 实例
const service = axios.create({
baseURL: '/jeecg-boot', // api base_url
timeout: 6000 // 请求超时时间
timeout: 9000 // 请求超时时间
})
const err = (error) => {
......
......@@ -276,4 +276,23 @@ export function validateDuplicateValue(tableName, fieldName, fieldVal, dataId, c
}).catch(err => {
callback(err.message || err)
})
}
/**
* 如果值不存在就 push 进数组,反之不处理
* @param array 要操作的数据
* @param value 要添加的值
* @param key 可空,如果比较的是对象,可能存在地址不一样但值实际上是一样的情况,可以传此字段判断对象中唯一的字段,例如 id。不传则直接比较实际值
* @returns {boolean} 成功 push 返回 true,不处理返回 false
*/
export function pushIfNotExist(array, value, key) {
for (let item of array) {
if (key && (item[key] === value[key])) {
return false
} else if (item === value) {
return false
}
}
array.push(value)
return true
}
\ No newline at end of file
<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 Trend from '@/components/Trend'
import { getLoginfo,getVisitInfo } from '@/api/api'
import IndexChart from './IndexChart'
import IndexTask from "./IndexTask"
import IndexBdc from './IndexBdc'
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>
\ No newline at end of file
</script>
\ No newline at end of file
<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>
\ No newline at end of file
<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>
\ No newline at end of file
<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>
\ No newline at end of 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;
......
......@@ -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;
......
......@@ -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
}
let count = 0
for (let val of values) {
if (val['dbFieldName'] === value) {
if (++count >= 2) {
callback(false, '${title}不能重复==')
return
}
}
callback(false, '${title}不能是abc') // false = 未通过校验
} else {
callback(true) // true = 通过验证
}
callback(true) // true = 通过验证
} else {
callback() // 不填写或者填写 null 代表不进行任何操作
callback(true) // 不填写或者填写 null 代表不进行任何操作
}
},
message: '${title}默认提示'
......
......@@ -179,6 +179,9 @@
if(text=='3') {
return "微信";
}
if(text=='4') {
return "系统";
}
}
},
{
......
......@@ -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)
}
}
......
......@@ -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 {
......
<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()
},
}
}
......
......@@ -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>
......
<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>
\ No newline at end of file
<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>
\ No newline at end of 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'},
},
......
......@@ -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);
}
}
}
......
......@@ -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>
......
......@@ -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"
......
......@@ -31,7 +31,6 @@ module.exports = {
.set('@views', resolve('src/views'))
.set('@layout', resolve('src/layout'))
.set('@static', resolve('src/static'))
.set('@mobile', resolve('src/modules/mobile'))
},
css: {
......@@ -39,12 +38,9 @@ module.exports = {
less: {
modifyVars: {
/* less 变量覆盖,用于自定义 ant design 主题 */
/*
'primary-color': '#F5222D',
'link-color': '#F5222D',
'primary-color': '#1890FF',
'link-color': '#1890FF',
'border-radius-base': '4px',
*/
},
javascriptEnabled: true,
}
......
......@@ -856,10 +856,10 @@
cssnano-preset-default "^4.0.0"
postcss "^7.0.0"
"@jeecg/antd-online@2.1.2":
"@jeecg/antd-online-re@2.1.2":
version "2.1.2"
resolved "https://registry.npmjs.org/@jeecg/antd-online/-/antd-online-2.1.2.tgz#4b03b5a7d09e91227e33797ab6018fe103ab2906"
integrity sha512-h6cgnrEarE7m1KDOFuLGhSsw45XVgyZgalqBrymy/IslUyLy0h85DCj+GUrTL0OmcLNOR57zctqbnLjwukU5IQ==
resolved "https://registry.npmjs.org/@jeecg/antd-online-re/-/antd-online-re-2.1.2.tgz#15e0f6f35d3427ddfec41bd39f504fdf1c63c5ba"
integrity sha512-LSG6Dt/4QoMBZh/jj9oVZ+1Nr3141rCCWzKg4Yo4hgtLuN8/pLFNWSCWaMh0B3gG6i2PUIiOinfHpJ80ODbWjA==
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
......
Jeecg-Boot 快速开发平台
===============
当前最新版本: 2.1.2(发布日期:20191122
当前最新版本: 2.1.3(发布日期:20191226
## 后端技术架构
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册