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

2.1.3 大屏版本发布

上级 ea5ef384
...@@ -7,12 +7,12 @@ ...@@ -7,12 +7,12 @@
Jeecg-Boot 快速开发平台(前后端分离版本) 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) [![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/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 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) [![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 Ant Design Jeecg Vue
==== ====
当前最新版本: 2.1.2(发布日期:20191122 当前最新版本: 2.1.3(发布日期:20191226
Overview Overview
---- ----
......
{ {
"name": "vue-antd-jeecg", "name": "vue-antd-jeecg",
"version": "2.1.2", "version": "2.1.3",
"private": true, "private": true,
"scripts": { "scripts": {
"pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ", "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
}, },
"dependencies": { "dependencies": {
"@antv/data-set": "^0.10.2", "@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", "@tinymce/tinymce-vue": "^2.0.0",
"ant-design-vue": "^1.4.0", "ant-design-vue": "^1.4.0",
"apexcharts": "^3.6.5", "apexcharts": "^3.6.5",
...@@ -51,12 +51,12 @@ ...@@ -51,12 +51,12 @@
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-plugin-vue": "^5.1.0", "eslint-plugin-vue": "^5.1.0",
"html-webpack-plugin": "^4.0.0-beta.11",
"less": "^3.9.0", "less": "^3.9.0",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
"node-sass": "^4.11.0", "node-sass": "^4.11.0",
"sass-loader": "^7.0.1", "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": { "eslintConfig": {
"root": true, "root": true,
......
...@@ -40,3 +40,8 @@ ...@@ -40,3 +40,8 @@
/*列表中范围查询样式*/ /*列表中范围查询样式*/
.query-group-cust{width: calc(50% - 10px)} .query-group-cust{width: calc(50% - 10px)}
.query-group-split-cust:before{content:"~";width: 20px;display: inline-block;text-align: center} .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> <template>
<div :style="{ padding: '0 0 32px 32px' }"> <div :style="{ padding: '0 50px 32px 0' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4> <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-tooltip/>
<v-legend/> <v-legend/>
<v-axis/> <v-axis/>
...@@ -23,13 +23,13 @@ ...@@ -23,13 +23,13 @@
dataSource: { dataSource: {
type: Array, type: Array,
default: () => [ default: () => [
{ type: '10:10', bar: 2, line: 2 }, { type: '10:10', bar: 200, line: 1000 },
{ type: '10:15', bar: 6, line: 3 }, { type: '10:15', bar: 600, line: 1000},
{ type: '10:20', bar: 2, line: 5 }, { type: '10:20', bar: 200, line: 1000},
{ type: '10:25', bar: 9, line: 1 }, { type: '10:25', bar: 900, line: 1000},
{ type: '10:30', bar: 2, line: 3 }, { type: '10:30', bar: 200, line: 1000},
{ type: '10:35', bar: 2, line: 1 }, { type: '10:35', bar: 200, line: 1000},
{ type: '10:40', bar: 1, line: 2 } { type: '10:40', bar: 100, line: 1000}
] ]
}, },
height: { height: {
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
}, },
data() { data() {
return { return {
padding: { top:50, right:50, bottom:100, left:50 },
scale: [{ scale: [{
dataKey: 'bar', dataKey: 'bar',
min: 0 min: 0
......
<template> <template>
<div :style="{ padding: '0 0 32px 32px' }"> <div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4> <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-tooltip />
<v-axis /> <v-axis />
<v-legend /> <v-legend />
...@@ -13,6 +13,11 @@ ...@@ -13,6 +13,11 @@
<script> <script>
import { DataSet } from '@antv/data-set' 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 { export default {
name: 'BarMultid', name: 'BarMultid',
props: { props: {
...@@ -20,62 +25,47 @@ ...@@ -20,62 +25,47 @@
type: String, type: String,
default: '' default: ''
}, },
dataSource:{ sourceData:{
type: Array, type:Array,
default: () => [ default:()=>[]
{ type: 'Jeecg', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
{ type: 'Jeebt', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 }
]
}, },
fields:{ fields:{
type: Array, type:Array,
default: () => ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'] default:()=>[]
},
// 别名,需要的格式:[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
aliases:{
type: Array,
default: () => []
},
height: {
type: Number,
default: 254
} }
}, },
data() { data() {
return { return {
chartData:"",
height: 400,
adjust: [{ adjust: [{
type: 'dodge', type: 'dodge',
marginRatio: 1 / 32 marginRatio: 1 / 32,
}] }],
};
},
watch: {
'sourceData': function () {
this.drawChart();
} }
}, },
computed: { mounted(){
data() { this.drawChart()
const dv = new DataSet.View().source(this.dataSource) },
methods:{
drawChart(){
let temp = sourceDataConst;
if(this.sourceData && this.sourceData.length>0){
temp = this.sourceData
}
const dv = new DataSet.View().source(temp);
dv.transform({ dv.transform({
type: 'fold', type: 'fold',
fields: this.fields, fields:(!this.fields||this.fields.length==0)?fieldsConst:this.fields,
key: 'x', key: 'x',
value: 'y' value: 'y',
}) });
this.chartData=dv.rows;
// 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
} }
} }
} }
......
<template> <template>
<div :style="{ padding: '0 0 32px 32px' }"> <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-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
<v-axis <v-axis
dataKey="value" dataKey="value"
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
type="arc" type="arc"
:zIndex="1" :zIndex="1"
:start="arcGuide2Start" :start="arcGuide2Start"
:end="getArcGuide2End()" :end="getArcGuide2End"
:vStyle="arcGuide2Style" :vStyle="arcGuide2Style"
></v-guide> ></v-guide>
<v-guide <v-guide
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
}]; }];
const data = [ const data = [
{ value: 0}, { value: 7.0 },
]; ];
export default { export default {
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
props:{ props:{
datasource:{ datasource:{
type: Number, type: Number,
default:0 default:7
}, },
title: { title: {
type: String, 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 @@ ...@@ -3,7 +3,7 @@
<a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio> <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
</a-radio-group> </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 value="">请选择</a-select-option>
<a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value"> <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 "> <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
......
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
/** 数据回显*/ /** 数据回显*/
loadItemByCode(){ loadItemByCode(){
if(!this.value || this.value=="0"){ if(!this.value || this.value=="0"){
this.treeValue = "" this.treeValue = []
}else{ }else{
getAction(this.view,{ids:this.value}).then(res=>{ getAction(this.view,{ids:this.value}).then(res=>{
console.log(124345) console.log(124345)
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
import Editor from '@tinymce/tinymce-vue' import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme' import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image' import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/media' import 'tinymce/plugins/media'
import 'tinymce/plugins/table' import 'tinymce/plugins/table'
import 'tinymce/plugins/lists' import 'tinymce/plugins/lists'
...@@ -42,11 +43,12 @@ ...@@ -42,11 +43,12 @@
}, },
plugins: { plugins: {
type: [String, Array], type: [String, Array],
default: 'lists image media table textcolor wordcount contextmenu fullscreen' default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
}, },
toolbar: { toolbar: {
type: [String, Array], 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() { data() {
......
<template> <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 <a-modal
title="高级查询构造器" title="高级查询构造器"
:width="1000" :width="1000"
:visible="visible" :visible="visible"
@cancel="handleCancel" @cancel="handleCancel"
:mask="false" :mask="false"
wrapClassName="ant-modal-cust-warp"
class="j-super-query-modal" class="j-super-query-modal"
style="top:5%;max-height: 95%;"> style="top:5%;max-height: 95%;">
...@@ -33,7 +44,7 @@ ...@@ -33,7 +44,7 @@
<a-form v-else layout="inline"> <a-form v-else layout="inline">
<a-form-item label="过滤条件匹配" style="margin-bottom: 12px;"> <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="and">AND(所有条件都要求匹配)</a-select-option>
<a-select-option value="or">OR(条件中的任意一个匹配)</a-select-option> <a-select-option value="or">OR(条件中的任意一个匹配)</a-select-option>
</a-select> </a-select>
...@@ -42,13 +53,23 @@ ...@@ -42,13 +53,23 @@
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index"> <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
<a-col :span="8"> <a-col :span="8">
<a-select placeholder="选择查询字段" v-model="item.field" @select="(val,option)=>handleSelected(option,item)"> <a-tree-select
<a-select-option v-for="(f,fIndex) in fieldList" :key=" 'field'+fIndex" :value="f.value" :data-idx="fIndex">{{ f.text }}</a-select-option> showSearch
</a-select> 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>
<a-col :span="4"> <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="eq">等于</a-select-option>
<a-select-option value="ne">不等于</a-select-option> <a-select-option value="ne">不等于</a-select-option>
<a-select-option value="gt">大于</a-select-option> <a-select-option value="gt">大于</a-select-option>
...@@ -90,6 +111,7 @@ ...@@ -90,6 +111,7 @@
placeholder="请选择部门" placeholder="请选择部门"
:customReturnField="item.customReturnField || 'id'" :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=='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> <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"/> <a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/>
...@@ -137,6 +159,7 @@ ...@@ -137,6 +159,7 @@
</a-modal> </a-modal>
</a-modal> </a-modal>
</div>
</template> </template>
<script> <script>
...@@ -186,6 +209,7 @@ ...@@ -186,6 +209,7 @@
}, },
data() { data() {
return { return {
fieldTreeData: [],
prompt: { prompt: {
visible: false, visible: false,
...@@ -199,6 +223,7 @@ ...@@ -199,6 +223,7 @@
// 保存查询条件的前缀名 // 保存查询条件的前缀名
saveCodeBefore: 'JSuperQuerySaved_', saveCodeBefore: 'JSuperQuerySaved_',
selectValue: 'and', selectValue: 'and',
superQueryFlag: false
} }
}, },
watch: { watch: {
...@@ -214,6 +239,35 @@ ...@@ -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 @@ ...@@ -225,17 +279,21 @@
this.visible = true this.visible = true
}, },
handleOk() { handleOk() {
console.log('---高级查询参数--->', this.queryParamsModel)
if (!this.isNullArray(this.queryParamsModel)) { if (!this.isNullArray(this.queryParamsModel)) {
let event = { let event = {
matchType: this.selectValue, matchType: this.selectValue,
params: this.removeEmptyObject(utils.cloneObject(this.queryParamsModel)) 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 { } else {
this.$emit(this.callback) this.emitCallback()
} }
}, },
emitCallback(params, matchType) {
this.superQueryFlag = !!params
this.$emit(this.callback, params, matchType)
},
handleCancel() { handleCancel() {
this.close() this.close()
}, },
...@@ -249,19 +307,19 @@ ...@@ -249,19 +307,19 @@
handleDel(index) { handleDel(index) {
this.queryParamsModel.splice(index, 1) this.queryParamsModel.splice(index, 1)
}, },
handleSelected(option, item) { handleSelected(node, item) {
let index = option.data.attrs['data-idx'] let { type, options, dictCode, dictTable, customReturnField } = node.dataRef
let { type, dictCode, dictTable, customReturnField } = this.fieldList[index]
item['type'] = type item['type'] = type
item['options'] = options
item['dictCode'] = dictCode item['dictCode'] = dictCode
item['dictTable'] = dictTable item['dictTable'] = dictTable
item['customReturnField'] = customReturnField item['customReturnField'] = customReturnField
this.$set(item, 'val', '') this.$set(item, 'val', undefined)
}, },
handleReset() { handleReset() {
this.superQueryFlag = false
this.queryParamsModel = [{}] this.queryParamsModel = [{}]
this.$emit(this.callback) this.emitCallback()
}, },
handleSave() { handleSave() {
let queryParams = this.removeEmptyObject(utils.cloneObject(this.queryParamsModel)) let queryParams = this.removeEmptyObject(utils.cloneObject(this.queryParamsModel))
...@@ -332,7 +390,7 @@ ...@@ -332,7 +390,7 @@
} }
if (array.length === 1) { if (array.length === 1) {
let obj = array[0] let obj = array[0]
if (!obj.field || !obj.val || !obj.rule) { if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) {
return true return true
} }
} }
...@@ -344,6 +402,9 @@ ...@@ -344,6 +402,9 @@
let item = array[i] let item = array[i]
if (item == null || Object.keys(item).length <= 0) { if (item == null || Object.keys(item).length <= 0) {
array.splice(i--, 1) array.splice(i--, 1)
} else {
// 去掉特殊属性
delete item.options
} }
} }
return array return array
...@@ -354,10 +415,11 @@ ...@@ -354,10 +415,11 @@
<style lang="scss" scoped> <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/ { .j-super-query-history-card /deep/ {
.ant-card-body, .ant-card-body,
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
data(){ data(){
return { return {
treeData:[], treeData:[],
treeValue:"", treeValue: null,
url_root:"/sys/category/loadTreeRoot", url_root:"/sys/category/loadTreeRoot",
url_children:"/sys/category/loadTreeChildren", url_children:"/sys/category/loadTreeChildren",
url_view:'/sys/category/loadOne', url_view:'/sys/category/loadOne',
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
methods:{ methods:{
loadViewInfo(){ loadViewInfo(){
if(!this.value || this.value=="0"){ if(!this.value || this.value=="0"){
this.treeValue = "" this.treeValue = null
}else{ }else{
let param = { let param = {
field:this.field, field:this.field,
......
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
}, },
data () { data () {
return { return {
treeValue:"", treeValue: null,
treeData:[], treeData:[],
url:"/sys/dict/loadTreeData", url:"/sys/dict/loadTreeData",
view:'/sys/dict/loadDictItem/', view:'/sys/dict/loadDictItem/',
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
methods: { methods: {
loadItemByCode(){ loadItemByCode(){
if(!this.value || this.value=="0"){ if(!this.value || this.value=="0"){
this.treeValue = "" this.treeValue = null
}else{ }else{
getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{ getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{
if(res.success){ if(res.success){
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
onChange(value){ onChange(value){
if(!value){ if(!value){
this.$emit('change', ''); this.$emit('change', '');
this.treeValue = '' this.treeValue = null
} else if (value instanceof Array) { } else if (value instanceof Array) {
this.$emit('change', value.map(item => item.value).join(',')) this.$emit('change', value.map(item => item.value).join(','))
this.treeValue = value this.treeValue = value
......
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
default:"temp" default:"temp"
}, },
value:{ value:{
type:String, type:[String,Array],
required:false required:false
}, },
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击 // update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
...@@ -80,7 +80,11 @@ ...@@ -80,7 +80,11 @@
}, },
watch:{ watch:{
value(val){ value(val){
this.initFileList(val) if (val instanceof Array) {
this.initFileList(val.join(','))
} else {
this.initFileList(val)
}
} }
}, },
created(){ created(){
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<a-modal <a-modal
centered centered
:title="name + '选择'" :title="name + '选择'"
:width="900" :width="width"
:visible="visible" :visible="visible"
@ok="handleOk" @ok="handleOk"
@cancel="close" @cancel="close"
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<a-col :span="14"> <a-col :span="14">
<a-form-item :label="(queryParamText||name)"> <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-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
...@@ -34,8 +34,8 @@ ...@@ -34,8 +34,8 @@
<a-table <a-table
size="small" size="small"
bordered bordered
rowKey="id" :rowKey="rowKey"
:columns="columns" :columns="innerColumns"
:dataSource="dataSource" :dataSource="dataSource"
:pagination="ipagination" :pagination="ipagination"
:loading="loading" :loading="loading"
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<a-col :span="8"> <a-col :span="8">
<a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}"> <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"> <span slot="action" slot-scope="text, record, index">
<a @click="handleDeleteSelected(record, index)">删除</a> <a @click="handleDeleteSelected(record, index)">删除</a>
</span> </span>
...@@ -62,7 +62,9 @@ ...@@ -62,7 +62,9 @@
</template> </template>
<script> <script>
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin' import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { cloneObject, pushIfNotExist } from '@/utils/util'
export default { export default {
name: 'JSelectBizComponentModal', name: 'JSelectBizComponentModal',
...@@ -84,6 +86,10 @@ ...@@ -84,6 +86,10 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
width: {
type: Number,
default: 900
},
name: { name: {
type: String, type: String,
...@@ -94,60 +100,110 @@ ...@@ -94,60 +100,110 @@
required: true, required: true,
default: '' default: ''
}, },
// 根据 value 获取显示文本的地址,例如存的是 username,可以通过该地址获取到 realname
valueUrl: {
type: String,
default: ''
},
displayKey: { displayKey: {
type: String, type: String,
default: null default: null
}, },
propColumns: { columns: {
type: Array, type: Array,
required: true,
default: () => [] default: () => []
}, },
// 查询条件Code
queryParamCode: {
type: String,
default: null
},
// 查询条件文字 // 查询条件文字
queryParamText: { queryParamText: {
type: String, type: String,
default: null default: null
}, },
rowKey: {
type: String,
default: 'id'
},
}, },
data() { data() {
return { return {
innerValue: [],
// 表头 // 表头
columns: this.propColumns, innerColumns: this.columns,
// 已选择列表 // 已选择列表
selectedTable: { selectedTable: {
pagination: false, pagination: false,
scroll: { y: 240 }, scroll: { y: 240 },
columns: [ 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' }, } { title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
], ],
dataSource: [], 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: { watch: {
value: { value: {
deep: true,
immediate: true, immediate: true,
handler(val) { handler(val) {
this.innerValue = cloneObject(val)
this.selectedRowKeys = []
this.valueWatchHandler(val) this.valueWatchHandler(val)
this.queryOptionsByValue(val)
} }
}, },
dataSource: { dataSource: {
deep: true, deep: true,
handler(val) { handler(val) {
let options = val.map(data => ({ label: data[this.displayKey || this.valueKey], value: data[this.valueKey] })) this.emitOptions(val)
this.$emit('ok', options) this.valueWatchHandler(this.innerValue)
this.valueWatchHandler(this.value)
} }
}, },
selectionRows: { selectedRowKeys: {
immediate: true, immediate: true,
deep: true, deep: true,
handler(val) { 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: { methods: {
...@@ -158,18 +214,63 @@ ...@@ -158,18 +214,63 @@
}, },
valueWatchHandler(val) { valueWatchHandler(val) {
let dataSource = []
let selectedRowKeys = []
val.forEach(item => { val.forEach(item => {
this.dataSource.forEach(data => { this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
if (data[this.valueKey] === item) { if (data[this.valueKey] === item) {
dataSource.push(data) pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
selectedRowKeys.push(data.id)
} }
}) })
}) })
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 @@ ...@@ -181,22 +282,30 @@
/** 删除已选择的 */ /** 删除已选择的 */
handleDeleteSelected(record, index) { 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) this.selectedTable.dataSource.splice(index, 1)
}, },
customRowFn(record) { customRowFn(record) {
if (!this.multiple) { return {
return { on: {
on: { click: () => {
click: () => { let key = record[this.rowKey]
this.selectedRowKeys = [record.id] if (!this.multiple) {
this.selectedRowKeys = [key]
this.selectedTable.dataSource = [record] 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 { ...@@ -16,11 +16,21 @@ export default {
### 配置参数 ### 配置参数
- `name`:`String` 显示名字,例如选择部门就填写'部门' | 参数名 | 类型 | 必填 | 默认值 | 备注 |
- `listUrl`:`String` 数据请求地址,必须是封装了分页的地址 |-----------------------|---------|------|--------------|--------------------------------------------------------------------------------------|
- `displayKey`:`String` 显示在标签上的字段 key | rowKey | String | | "id" | 唯一标识的字段名 |
- `returnKeys`:`Array` v-model 绑定的 keys,是个数组,默认使用第二项,当配置了 `returnId=true` 就返回第一项 | value(v-model) | String | | "" | 默认选择的数据,多个用半角逗号分割 |
- `returnId`:`Boolean` 返回ID,设为true后将返回配置的 `returnKeys` 中的第一项 | name | String | | "" | 显示名字,例如选择用户就填写"用户" |
- `selectButtonText`:`String` 选择按钮的文字 | listUrl | String | 是 | | 数据请求地址,必须是封装了分页的地址 |
- `queryParamText`:`String` 查询条件显示文字 | valueUrl | String | | "" | 获取显示文本的地址,例如存的是 username,可以通过该地址获取到 realname |
- `columns`:`Array` 列配置项,与a-table的列配置项相同,会将第一项配置成已选择的列表 | displayKey | String | | null | 显示在标签上的字段 key ,不传则直接显示数据 |
\ No newline at end of file | 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> <template>
<a-row class="j-select-biz-component-box" type="flex" :gutter="8"> <a-row class="j-select-biz-component-box" type="flex" :gutter="8">
<a-col class="left" :class="{'full': !buttons}"> <a-col class="left" :class="{'full': !buttons}">
<a-select <slot name="left">
mode="multiple" <a-select
:placeholder="placeholder" mode="multiple"
v-model="selectValue" :placeholder="placeholder"
:options="selectOptions" v-model="selectValue"
allowClear :options="selectOptions"
:disabled="disabled" allowClear
:open="false" :disabled="disabled"
style="width: 100%;" :open="false"
@click.native="visible=(buttons?visible:true)" style="width: 100%;"
/> @click.native="visible=(buttons?visible:true)"
/>
</slot>
</a-col> </a-col>
<a-col v-if="buttons" class="right"> <a-col v-if="buttons" class="right">
...@@ -20,11 +22,9 @@ ...@@ -20,11 +22,9 @@
<j-select-biz-component-modal <j-select-biz-component-modal
v-model="selectValue" v-model="selectValue"
:name="name" :listUrl="listUrl" :returnKeys="returnKeys" :displayKey="displayKey"
:propColumns="columns" :queryParamText="queryParamText" :multiple="multiple"
:visible.sync="visible" :visible.sync="visible"
:valueKey="valueKey" v-bind="modalProps"
@ok="selectOptions=$event" @options="handleOptions"
/> />
</a-row> </a-row>
</template> </template>
...@@ -63,20 +63,6 @@ ...@@ -63,20 +63,6 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
/* 可复用属性 */
// 被选择的名字,例如选择部门就填写'部门'
name: {
type: String,
default: ''
},
// list 接口地址
listUrl: {
type: String,
required: true,
default: ''
},
// 显示的 Key // 显示的 Key
displayKey: { displayKey: {
type: String, type: String,
...@@ -92,29 +78,28 @@ ...@@ -92,29 +78,28 @@
type: String, type: String,
default: '选择' default: '选择'
}, },
// 查询条件文字
queryParamText: {
type: String,
default: null
},
// columns
columns: {
type: Array,
default: () => []
}
}, },
data() { data() {
return { return {
selectValue: [], selectValue: [],
selectOptions: [], selectOptions: [],
dataSourceMap: {},
visible: false visible: false
} }
}, },
computed: { computed: {
valueKey() { valueKey() {
return this.returnId ? this.returnKeys[0] : this.returnKeys[1] 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: { watch: {
value: { value: {
...@@ -130,23 +115,23 @@ ...@@ -130,23 +115,23 @@
selectValue: { selectValue: {
deep: true, deep: true,
handler(val) { 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('input', data)
this.$emit('change', data) this.$emit('change', data)
} }
} }
}, },
methods: {} methods: {
handleOptions(options, dataSourceMap) {
this.selectOptions = options
this.dataSourceMap = dataSourceMap
},
}
} }
</script> </script>
<style lang="scss">
.j-select-biz-component-box {
.ant-select-search__field {
display: none !important;
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.j-select-biz-component-box { .j-select-biz-component-box {
...@@ -163,5 +148,11 @@ ...@@ -163,5 +148,11 @@
.full { .full {
width: 100%; width: 100%;
} }
/deep/ {
.ant-select-search__field {
display: none !important;
}
}
} }
</style> </style>
\ No newline at end of file
<template> <template>
<!-- 定义在这里的参数都是不可在外部覆盖的,防止出现问题 -->
<j-select-biz-component <j-select-biz-component
:value="value" :value="value"
name="用户"
displayKey="realname"
:listUrl="url.list" :listUrl="url.list"
:columns="columns" :columns="columns"
queryParamText="账号"
v-on="$listeners" v-on="$listeners"
v-bind="$attrs" v-bind="attrs"
/> />
</template> </template>
...@@ -25,22 +20,24 @@ ...@@ -25,22 +20,24 @@
return { return {
url: { list: '/sys/user/list' }, url: { list: '/sys/user/list' },
columns: [ columns: [
{ title: '姓名', align: 'center', width: 100, dataIndex: 'realname' }, { title: '姓名', align: 'center', width: '20%', widthRight: '70%', dataIndex: 'realname' },
{ title: '账号', align: 'center', width: 100, dataIndex: 'username' }, { title: '账号', align: 'center', width: '20%', dataIndex: 'username' },
{ title: '电话', align: 'center', width: 100, dataIndex: 'phone' }, { title: '电话', align: 'center', width: '23%', dataIndex: 'phone' },
{ title: '出生日期', align: 'center', width: 100, dataIndex: 'birthday' } { title: '出生日期', align: 'center', width: '23%', dataIndex: 'birthday' }
] ],
// 定义在这里的参数都是可以在外部传递覆盖的,可以更灵活的定制化使用的组件
default: {
name: '用户',
width: 1000,
displayKey: 'realname',
returnKeys: ['id', 'username'],
queryParamText: '账号',
}
} }
}, },
watch: { computed: {
$attrs: { attrs() {
deep: true, return Object.assign(this.default, this.$attrs)
immediate: true,
handler(val) {
if (!val.returnKeys) {
val.returnKeys = ['id', 'username']
}
}
} }
} }
} }
......
<template> <template>
<j-select-biz-component v-bind="configs" v-on="$listeners"/> <j-select-biz-component :width="1000" v-bind="configs" v-on="$listeners"/>
</template> </template>
<script> <script>
...@@ -16,11 +16,12 @@ ...@@ -16,11 +16,12 @@
displayKey: 'name', displayKey: 'name',
returnKeys: ['id', 'code'], returnKeys: ['id', 'code'],
listUrl: '/sys/position/list', listUrl: '/sys/position/list',
queryParamText: '职务编码', queryParamCode: 'name',
queryParamText: '职务名称',
columns: [ columns: [
{ title: '职务名称', dataIndex: 'name', align: 'center', width: 100 }, { title: '职务名称', dataIndex: 'name', align: 'center', width: '30%', widthRight: '70%' },
{ title: '职务编码', dataIndex: 'code', align: 'center', width: 100 }, { title: '职务编码', dataIndex: 'code', align: 'center', width: '35%' },
{ title: '职级', dataIndex: 'rank_dictText', align: 'center', width: 100 } { title: '职级', dataIndex: 'rank_dictText', align: 'center', width: '25%' }
] ]
} }
} }
......
...@@ -75,11 +75,6 @@ ...@@ -75,11 +75,6 @@
align: 'center', align: 'center',
dataIndex: 'realname' dataIndex: 'realname'
}, },
{
title: '角色名称',
align: 'center',
dataIndex: 'roleName'
},
{ {
title: '性别', title: '性别',
align: 'center', align: 'center',
...@@ -167,6 +162,9 @@ ...@@ -167,6 +162,9 @@
names = names.substring(1) names = names.substring(1)
} }
this.$emit("initComp", names) this.$emit("initComp", names)
}else{
// JSelectUserByDep组件bug issues/I16634
this.$emit("initComp", "")
} }
}, },
async loadData(arg) { async loadData(arg) {
......
...@@ -255,7 +255,7 @@ ...@@ -255,7 +255,7 @@
} }
</script> </script>
<style lang="scss"> <style lang="less">
/* /*
* The following styles are auto-applied to elements with * The following styles are auto-applied to elements with
...@@ -333,7 +333,7 @@ ...@@ -333,7 +333,7 @@
border-bottom: 1px solid transparent !important; border-bottom: 1px solid transparent !important;
} }
.ant-tabs-tab-active { .ant-tabs-tab-active {
border-color: #1890ff !important; border-color: @primary-color!important;
} }
} }
......
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
</style> </style>
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 --> <!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
<style lang="scss"> <style lang="less">
.ant-menu.ant-menu-root { .ant-menu.ant-menu-root {
& > .ant-menu-item:first-child { & > .ant-menu-item:first-child {
background-color: transparent; background-color: transparent;
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
&.ant-menu-item-selected { &.ant-menu-item-selected {
& > a, & > a:hover { & > a, & > a:hover {
color: #1890ff; color: @primary-color;
} }
} }
} }
......
...@@ -161,10 +161,10 @@ ...@@ -161,10 +161,10 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/ /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
$height: 59px; @height: 59px;
.layout { .layout {
...@@ -174,8 +174,8 @@ ...@@ -174,8 +174,8 @@
margin-left: 10px; margin-left: 10px;
.ant-menu.ant-menu-horizontal { .ant-menu.ant-menu-horizontal {
height: $height; height: @height;
line-height: $height; line-height: @height;
} }
} }
.trigger { .trigger {
...@@ -189,15 +189,15 @@ ...@@ -189,15 +189,15 @@
.header { .header {
z-index: 2; z-index: 2;
color: white; color: white;
height: $height; height: @height;
background-color: #1890ff; background-color: @primary-color;
transition: background 300ms; transition: background 300ms;
/* dark 样式 */ /* dark 样式 */
&.dark { &.dark {
color: #000000; color: #000000;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
background-color: white !important; background-color: @primary-color;
} }
} }
...@@ -209,8 +209,8 @@ ...@@ -209,8 +209,8 @@
} }
.ant-layout-header { .ant-layout-header {
height: $height; height: @height;
line-height: $height; line-height: @height;
} }
/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/ /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<a-list> <a-list>
<a-list-item :key="index" v-for="(record, index) in announcement1"> <a-list-item :key="index" v-for="(record, index) in announcement1">
<div style="margin-left: 5%;width: 80%"> <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> <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
</div> </div>
<div style="text-align: right"> <div style="text-align: right">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<a-list> <a-list>
<a-list-item :key="index" v-for="(record, index) in announcement2"> <a-list-item :key="index" v-for="(record, index) in announcement2">
<div style="margin-left: 5%;width: 80%"> <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> <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
</div> </div>
<div style="text-align: right"> <div style="text-align: right">
...@@ -191,24 +191,24 @@ ...@@ -191,24 +191,24 @@
// WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https // WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
var userId = store.getters.userInfo.id; var userId = store.getters.userInfo.id;
var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId; 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 = new WebSocket(url);
this.websock.onopen = this.websocketonopen; this.websock.onopen = this.websocketOnopen;
this.websock.onerror = this.websocketonerror; this.websock.onerror = this.websocketOnerror;
this.websock.onmessage = this.websocketonmessage; this.websock.onmessage = this.websocketOnmessage;
this.websock.onclose = this.websocketclose; this.websock.onclose = this.websocketOnclose;
}, },
websocketonopen: function () { websocketOnopen: function () {
console.log("WebSocket连接成功"); console.log("WebSocket连接成功");
//心跳检测重置 //心跳检测重置
this.heartCheck.reset().start(); this.heartCheck.reset().start();
}, },
websocketonerror: function (e) { websocketOnerror: function (e) {
console.log("WebSocket连接发生错误"); console.log("WebSocket连接发生错误");
this.reconnect(); this.reconnect();
}, },
websocketonmessage: function (e) { websocketOnmessage: function (e) {
//console.log("-----接收消息-------",e.data); console.log("-----接收消息-------",e.data);
var data = eval("(" + e.data + ")"); //解析对象 var data = eval("(" + e.data + ")"); //解析对象
if(data.cmd == "topic"){ if(data.cmd == "topic"){
//系统通知 //系统通知
...@@ -217,22 +217,20 @@ ...@@ -217,22 +217,20 @@
//用户消息 //用户消息
this.loadData(); this.loadData();
} }
//心跳检测重置 //心跳检测重置
this.heartCheck.reset().start(); this.heartCheck.reset().start();
}, },
websocketsend(text) { // 数据发送 websocketOnclose: function (e) {
console.log("connection closed (" + e.code + ")");
this.reconnect();
},
websocketSend(text) { // 数据发送
try { try {
this.websock.send(text); this.websock.send(text);
} catch (err) { } catch (err) {
console.log("send failed (" + err.code + ")"); console.log("send failed (" + err.code + ")");
} }
}, },
websocketclose: function (e) {
console.log("connection closed (" + e.code + ")");
this.reconnect();
},
openNotification (data) { openNotification (data) {
var text = data.msgTxt; var text = data.msgTxt;
...@@ -284,7 +282,7 @@ ...@@ -284,7 +282,7 @@
this.timeoutObj = setTimeout(function(){ this.timeoutObj = setTimeout(function(){
//这里发送一个心跳,后端收到后,返回一个心跳消息, //这里发送一个心跳,后端收到后,返回一个心跳消息,
//onmessage拿到返回的心跳就说明连接正常 //onmessage拿到返回的心跳就说明连接正常
that.websocketsend("HeartBeat"); that.websocketSend("HeartBeat");
console.info("客户端发送心跳"); console.info("客户端发送心跳");
//self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了 //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了
// that.websock.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次 // that.websock.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
......
...@@ -32,15 +32,15 @@ ...@@ -32,15 +32,15 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
/*缩小首页布 局顶部的高度*/ /*缩小首页布 局顶部的高度*/
$height: 59px; @height: 59px;
.sider { .sider {
box-shadow: none !important; box-shadow: none !important;
.logo { .logo {
height: $height !important; height: @height !important;
line-height: $height !important; line-height: @height !important;
box-shadow: none !important; box-shadow: none !important;
transition: background 300ms; transition: background 300ms;
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
} }
&.light .logo { &.light .logo {
background-color: #1890ff; background-color: @primary-color;
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="user-wrapper" :class="theme"> <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"> <span class="action">
<a class="logout_title" target="_blank" href="http://jeecg-boot.mydoc.io"> <a class="logout_title" target="_blank" href="http://jeecg-boot.mydoc.io">
<a-icon type="question-circle-o"></a-icon> <a-icon type="question-circle-o"></a-icon>
...@@ -66,12 +87,19 @@ ...@@ -66,12 +87,19 @@
import UserPassword from './UserPassword' import UserPassword from './UserPassword'
import SettingDrawer from "@/components/setting/SettingDrawer"; import SettingDrawer from "@/components/setting/SettingDrawer";
import DepartSelect from './DepartSelect' import DepartSelect from './DepartSelect'
import { mapActions, mapGetters } from 'vuex' import { mapActions, mapGetters,mapState } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js' import { mixinDevice } from '@/utils/mixin.js'
export default { export default {
name: "UserMenu", name: "UserMenu",
mixins: [mixinDevice], mixins: [mixinDevice],
data(){
return{
//菜单搜索
search:[],
shows:false
}
},
components: { components: {
HeaderNotice, HeaderNotice,
UserPassword, UserPassword,
...@@ -85,7 +113,31 @@ ...@@ -85,7 +113,31 @@
default: 'dark' 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: { 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"]), ...mapActions(["Logout"]),
...mapGetters(["nickname", "avatar","userInfo"]), ...mapGetters(["nickname", "avatar","userInfo"]),
getAvatar(){ getAvatar(){
...@@ -122,11 +174,54 @@ ...@@ -122,11 +174,54 @@
}, },
systemSetting(){ systemSetting(){
this.$refs.settingDrawer.showDrawer() 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> </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> <style scoped>
.logout_title { .logout_title {
color: inherit; color: inherit;
......
...@@ -22,7 +22,7 @@ export default { ...@@ -22,7 +22,7 @@ export default {
fixSiderbar: false, // sticky siderbar fixSiderbar: false, // sticky siderbar
autoHideHeader: false, // auto hide header autoHideHeader: false, // auto hide header
colorWeak: false, colorWeak: false,
multipage: false, //默认多页签模式 multipage: true, //默认多页签模式
// vue-ls options // vue-ls options
storageOptions: { storageOptions: {
namespace: 'pro__', // key prefix namespace: 'pro__', // key prefix
......
...@@ -18,8 +18,8 @@ import VueApexCharts from 'vue-apexcharts' ...@@ -18,8 +18,8 @@ import VueApexCharts from 'vue-apexcharts'
import preview from 'vue-photo-preview' import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css' import 'vue-photo-preview/dist/skin.css'
import "@jeecg/antd-online" import "@jeecg/antd-online-re"
import '@jeecg/antd-online/dist/OnlineForm.css' import '@jeecg/antd-online-re/dist/OnlineForm.css'
import { import {
ACCESS_TOKEN, ACCESS_TOKEN,
...@@ -69,7 +69,7 @@ new Vue({ ...@@ -69,7 +69,7 @@ new Vue({
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak)) 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('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN)) 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) render: h => h(App)
}).$mount('#app') }).$mount('#app')
...@@ -80,10 +80,11 @@ export const JEditableTableMixin = { ...@@ -80,10 +80,11 @@ export const JEditableTableMixin = {
}, },
/** 查询某个tab的数据 */ /** 查询某个tab的数据 */
requestSubTableData(url, params, tab) { requestSubTableData(url, params, tab, success) {
tab.loading = true tab.loading = true
getAction(url, params).then(res => { getAction(url, params).then(res => {
tab.dataSource = res.result || [] tab.dataSource = res.result || []
typeof success === 'function' ? success(res) : ''
}).finally(() => { }).finally(() => {
tab.loading = false tab.loading = false
}) })
......
...@@ -8,7 +8,7 @@ import { ACCESS_TOKEN } from "@/store/mutation-types" ...@@ -8,7 +8,7 @@ import { ACCESS_TOKEN } from "@/store/mutation-types"
// 创建 axios 实例 // 创建 axios 实例
const service = axios.create({ const service = axios.create({
baseURL: '/jeecg-boot', // api base_url baseURL: '/jeecg-boot', // api base_url
timeout: 6000 // 请求超时时间 timeout: 9000 // 请求超时时间
}) })
const err = (error) => { const err = (error) => {
......
...@@ -276,4 +276,23 @@ export function validateDuplicateValue(tableName, fieldName, fieldVal, dataId, c ...@@ -276,4 +276,23 @@ export function validateDuplicateValue(tableName, fieldName, fieldVal, dataId, c
}).catch(err => { }).catch(err => {
callback(err.message || 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> <template>
<div class="page-header-index-wide"> <div>
<a-row :gutter="24"> <index-chart v-if="indexStyle==1"></index-chart>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> <index-bdc v-if="indexStyle==2"></index-bdc>
<chart-card :loading="loading" title="总销售额" total="¥126,560"> <index-task v-if="indexStyle==3"></index-task>
<a-tooltip title="指标说明" slot="action"> <div style="width: 100%;text-align: right;margin-top: 20px">
<a-icon type="info-circle-o" /> 请选择首页样式:
</a-tooltip> <a-radio-group v-model="indexStyle">
<div> <a-radio :value="1">统计图表</a-radio>
<trend flag="up" style="margin-right: 16px;"> <a-radio :value="2">统计图表2</a-radio>
<span slot="term">周同比</span> <a-radio :value="3">任务表格</a-radio>
12% </a-radio-group>
</trend> </div>
<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> </div>
</template> </template>
<script> <script>
import ChartCard from '@/components/ChartCard' import IndexChart from './IndexChart'
import ACol from "ant-design-vue/es/grid/Col" import IndexTask from "./IndexTask"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip" import IndexBdc from './IndexBdc'
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 { export default {
name: "Analysis", name: "Analysis",
components: { components: {
ATooltip, IndexChart,
ACol, IndexTask,
ChartCard, IndexBdc
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
LineChartMultid,
HeadInfo
}, },
data() { data() {
return { return {
loading: true, indexStyle:1
center: null,
rankList,
barData,
loginfo:{},
visitFields:['ip','visit'],
visitInfo:[],
indicator: <a-icon type="loading" style="font-size: 24px" spin />
} }
}, },
created() { created() {
setTimeout(() => {
this.loading = !this.loading
}, 1000)
this.initLogInfo();
}, },
methods: { methods: {
initLogInfo () {
getLoginfo(null).then((res)=>{
if(res.success){
Object.keys(res.result).forEach(key=>{
res.result[key] =res.result[key]+""
})
this.loginfo = res.result;
}
})
getVisitInfo().then(res=>{
if(res.success){
console.log("aaaaaa",res.result)
this.visitInfo = res.result;
}
})
},
}
}
</script>
<style lang="scss" scoped>
.circle-cust{
position: relative;
top: 28px;
left: -100%;
}
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
/* 首页访问量统计 */
.head-info {
position: relative;
text-align: left;
padding: 0 32px 0 0;
min-width: 125px;
&.center {
text-align: center;
padding: 0 32px;
}
span {
color: rgba(0, 0, 0, .45);
display: inline-block;
font-size: .95rem;
line-height: 42px;
margin-bottom: 4px;
}
p {
line-height: 42px;
margin: 0;
a {
font-weight: 600;
font-size: 1rem;
}
} }
} }
</style> </script>
\ No newline at end of file \ 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 @@ ...@@ -47,7 +47,7 @@
</span> </span>
<a-col :md="6" :sm="24"> <a-col :md="6" :sm="24">
<template v-if="superQueryFlag"> <!-- <template v-if="superQueryFlag">
<a-tooltip title="已有高级查询条件生效!"> <a-tooltip title="已有高级查询条件生效!">
<button :disabled="false" class="ant-btn ant-btn-primary" @click="superQuery"> <button :disabled="false" class="ant-btn ant-btn-primary" @click="superQuery">
<a-icon type="appstore" theme="twoTone" spin="true"></a-icon> <a-icon type="appstore" theme="twoTone" spin="true"></a-icon>
...@@ -56,6 +56,9 @@ ...@@ -56,6 +56,9 @@
</a-tooltip> </a-tooltip>
</template> </template>
<a-button v-else type="primary" @click="superQuery" icon="filter">高级查询</a-button> <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"> <a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }} {{ toggleSearchStatus ? '收起' : '展开' }}
...@@ -167,8 +170,6 @@ ...@@ -167,8 +170,6 @@
<!-- 一对多表单区域 --> <!-- 一对多表单区域 -->
<JeecgDemoTabsModal ref="jeecgDemoTabsModal" @ok="modalFormOk"></JeecgDemoTabsModal> <JeecgDemoTabsModal ref="jeecgDemoTabsModal" @ok="modalFormOk"></JeecgDemoTabsModal>
<!-- 高级查询区域 -->
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
</a-card> </a-card>
</template> </template>
...@@ -293,7 +294,14 @@ ...@@ -293,7 +294,14 @@
methods: { methods: {
getQueryParams(){ getQueryParams(){
console.log(this.queryParam.birthdayRange) 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.field = this.getQueryField();
param.pageNo = this.ipagination.current; param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize; param.pageSize = this.ipagination.pageSize;
......
...@@ -132,23 +132,32 @@ ...@@ -132,23 +132,32 @@
} }
</script> </script>
<style scoped> <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{ .abcdefg .ant-card-body{
margin-left: 0%; margin-left: 0%;
margin-right: 0%; margin-right: 0%;
margin-bottom: 1%; margin-bottom: 1%;
border:0px solid black; border:0px solid black;
min-width: 800px; min-width: 800px;
color:#000000!important;
} }
.explain{ .explain{
text-align: left; text-align: left;
margin-left: 50px; margin-left: 50px;
color:#000000!important;
} }
.explain .ant-input,.sign .ant-input{ .explain .ant-input,.sign .ant-input{
font-weight:bolder; font-weight:bolder;
text-align:center; text-align:center;
border-left-width:0px!important; border-left-width:0px!important;
border-top-width:0px!important;; border-top-width:0px!important;
border-right-width:0px!important;; border-right-width:0px!important;
} }
.explain div{ .explain div{
margin-bottom: 10px; margin-bottom: 10px;
......
...@@ -63,6 +63,10 @@ ...@@ -63,6 +63,10 @@
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则 pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
message: '${title}必须以字母开头,可包含数字、下划线、横杠' message: '${title}必须以字母开头,可包含数字、下划线、横杠'
}, },
{
unique: true,
message: '${title}不能重复'
},
{ {
handler(type, value, row, column, callback, target) { handler(type, value, row, column, callback, target) {
// type 触发校验的类型(input、change、blur) // type 触发校验的类型(input、change、blur)
...@@ -73,25 +77,13 @@ ...@@ -73,25 +77,13 @@
// target 行编辑的实例对象 // target 行编辑的实例对象
if (type === 'blur') { if (type === 'blur') {
let { values } = target.getValuesSync({ validate: false })
if (value === 'abc') { if (value === 'abc') {
callback(false, '${title}不能是abc') // false = 未验证 callback(false, '${title}不能是abc') // false = 未通过校验
return } else {
} callback(true) // true = 通过验证
let count = 0
for (let val of values) {
if (val['dbFieldName'] === value) {
if (++count >= 2) {
callback(false, '${title}不能重复==')
return
}
}
} }
callback(true) // true = 通过验证
} else { } else {
callback() // 不填写或者填写 null 代表不进行任何操作 callback(true) // 不填写或者填写 null 代表不进行任何操作
} }
}, },
message: '${title}默认提示' message: '${title}默认提示'
......
...@@ -179,6 +179,9 @@ ...@@ -179,6 +179,9 @@
if(text=='3') { if(text=='3') {
return "微信"; return "微信";
} }
if(text=='4') {
return "系统";
}
} }
}, },
{ {
......
...@@ -10,50 +10,70 @@ ...@@ -10,50 +10,70 @@
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<a-form :form="form"> <a-form :form="form">
<a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<a-form-item <a-col :span="12">
:labelCol="labelCol" <a-form-item
:wrapperCol="wrapperCol" :labelCol="labelCol"
label="模板CODE"> :wrapperCol="wrapperCol"
<a-input label="模板CODE"
:disabled="disable" style="margin-right: -35px"
placeholder="请输入模板编码" >
v-decorator="['templateCode', validatorRules.templateCode ]" <a-input
/> :disabled="disable"
</a-form-item> placeholder="请输入模板编码"
<a-form-item v-decorator="['templateCode', validatorRules.templateCode ]"
:labelCol="labelCol" />
:wrapperCol="wrapperCol" </a-form-item>
label="模板标题"> </a-col>
<a-input <a-col :span="12">
placeholder="请输入模板标题" <a-form-item
v-decorator="['templateName', validatorRules.templateName]" :labelCol="labelCol"
/> :wrapperCol="wrapperCol"
</a-form-item> label="模板类型">
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型">
<a-form-item </j-dict-select-tag>
:labelCol="labelCol" </a-form-item>
:wrapperCol="wrapperCol" </a-col>
label="模板类型"> </a-row>
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型"> <a-row class="form-row" :gutter="24" >
</j-dict-select-tag> <a-col :span="24" pull="2">
</a-form-item> <a-form-item
:labelCol="labelCol"
<a-form-item :wrapperCol="wrapperCol"
v-show="!useEditor" label="模板标题"
:labelCol="labelCol" style="margin-left: -15px">
:wrapperCol="wrapperCol" <a-input
label="模板内容"> placeholder="请输入模板标题"
<a-textarea placeholder="请输入模板内容" v-decorator="['templateContent', validatorRules.templateContent ]" :autosize="{ minRows: 8, maxRows: 8 }" /> v-decorator="['templateName', validatorRules.templateName]"
</a-form-item> style="width: 122%"
/>
<a-form-item </a-form-item>
v-show="useEditor" </a-col>
:labelCol="labelCol" </a-row>
:wrapperCol="wrapperCol" <a-row class="form-row" :gutter="24">
label="模板内容"> <a-col :span="24" pull="4">
<j-editor v-model="templateEditorContent"></j-editor> <a-form-item
</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-form>
</a-spin> </a-spin>
...@@ -111,7 +131,7 @@ ...@@ -111,7 +131,7 @@
edit(record) { edit(record) {
this.form.resetFields(); this.form.resetFields();
this.model = Object.assign({}, record); this.model = Object.assign({}, record);
this.useEditor = (record.templateType==2) this.useEditor = (record.templateType==2 || record.templateType==4)
if(this.useEditor){ if(this.useEditor){
this.templateEditorContent=record.templateContent this.templateEditorContent=record.templateContent
}else{ }else{
...@@ -191,7 +211,7 @@ ...@@ -191,7 +211,7 @@
}, },
handleChangeTemplateType(value){ handleChangeTemplateType(value){
//如果是邮件类型那么则改变模板内容是富文本编辑器 //如果是邮件类型那么则改变模板内容是富文本编辑器
this.useEditor = value==2 this.useEditor = (value==2 || value==4)
} }
} }
......
...@@ -177,7 +177,6 @@ ...@@ -177,7 +177,6 @@
import JDictSelectTag from '../../../../components/dict/JDictSelectTag.vue' import JDictSelectTag from '../../../../components/dict/JDictSelectTag.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin' import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Clipboard from 'clipboard' import Clipboard from 'clipboard'
import { filterObj } from '@/utils/util'; import { filterObj } from '@/utils/util';
export default { export default {
......
<template> <template>
<a-card :bordered="false" style="height: 100%"> <a-card :bordered="false" style="height: 100%">
<div class="table-page-search-wrapper"> <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"> <a-row :gutter="24" v-if="queryInfo && queryInfo.length>0">
<template v-for="(item,index) in queryInfo"> <template v-for="(item,index) in queryInfo">
<template v-if=" item.hidden==='1' "> <template v-if=" item.hidden==='1' ">
...@@ -63,6 +63,15 @@ ...@@ -63,6 +63,15 @@
</a-button> </a-button>
</template> </template>
<!-- 高级查询 -->
<j-super-query
ref="superQuery"
:fieldList="superQuery.fieldList"
:saveCode="$route.fullPath"
:loading="table.loading"
style="margin-left: 8px;"
@handleSuperQuery="handleSuperQuery"/>
<a-button <a-button
v-if="buttonSwitch.batch_delete" v-if="buttonSwitch.batch_delete"
@click="handleDelBatch" @click="handleDelBatch"
...@@ -179,11 +188,10 @@ ...@@ -179,11 +188,10 @@
</span> </span>
</a-table> </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> <j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
</div> </div>
</a-card> </a-card>
</template> </template>
...@@ -194,10 +202,12 @@ ...@@ -194,10 +202,12 @@
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil' import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { filterObj } from '@/utils/util'; import { filterObj } from '@/utils/util';
import JImportModal from '@/components/jeecg/JImportModal' import JImportModal from '@/components/jeecg/JImportModal'
import JSuperQuery from '@comp/jeecg/JSuperQuery'
export default { export default {
name: 'OnlCgFormAutoList', name: 'OnlCgFormAutoList',
components: { components: {
JSuperQuery,
JImportModal, JImportModal,
}, },
data() { data() {
...@@ -226,9 +236,8 @@ ...@@ -226,9 +236,8 @@
cgButtonLinkList:[], cgButtonLinkList:[],
cgButtonList:[], cgButtonList:[],
queryInfo:[], queryInfo:[],
queryParam:{ // 查询参数,多个页面的查询参数用 code 作为键来区分
queryParamsMap: {},
},
toggleSearchStatus:false, toggleSearchStatus:false,
table: { table: {
loading: true, loading: true,
...@@ -276,7 +285,16 @@ ...@@ -276,7 +285,16 @@
export:true export:true
}, },
hasBpmStatus:false, hasBpmStatus:false,
checkboxFlag:false checkboxFlag:false,
// 高级查询
superQuery: {
// 字段列表
fieldList: [],
// 查询参数
params: '',
// 查询条件拼接方式 'and' or 'or'
matchType: 'and'
}
} }
}, },
created() { created() {
...@@ -286,7 +304,8 @@ ...@@ -286,7 +304,8 @@
this.cgButtonJsHandler('mounted') this.cgButtonJsHandler('mounted')
}, },
watch: { watch: {
'$route'() { '$route.path'(newVal,oldVal) {
console.log('$route.path: ',oldVal)
// 刷新参数放到这里去触发,就可以刷新相同界面了 // 刷新参数放到这里去触发,就可以刷新相同界面了
this.initAutoList() this.initAutoList()
} }
...@@ -301,6 +320,14 @@ ...@@ -301,6 +320,14 @@
selectedRowKeys:this.table.selectedRowKeys, selectedRowKeys:this.table.selectedRowKeys,
onChange: this.handleChangeInTableSelect onChange: this.handleChangeInTableSelect
} }
},
queryParam: {
get() {
return this.queryParamsMap[this.code]
},
set(newVal) {
this.$set(this.queryParamsMap, this.code, newVal)
}
} }
}, },
methods: { methods: {
...@@ -354,8 +381,17 @@ ...@@ -354,8 +381,17 @@
if(!this.$route.params.code){ if(!this.$route.params.code){
return false return false
} }
// 清空高级查询条件
this.superQuery.params = ''
if (this.$refs.superQuery) {
this.$refs.superQuery.handleReset()
}
this.table.loading = true this.table.loading = true
this.code = this.$route.params.code this.code = this.$route.params.code
if (!this.queryParam) {
this.queryParam = {}
}
getAction(`${this.url.getColumns}${this.code}`).then((res)=>{ getAction(`${this.url.getColumns}${this.code}`).then((res)=>{
console.log("--onlineList-加载动态列>>",res); console.log("--onlineList-加载动态列>>",res);
if(res.success){ if(res.success){
...@@ -415,6 +451,7 @@ ...@@ -415,6 +451,7 @@
if(arg==1){ if(arg==1){
this.table.pagination.current=1 this.table.pagination.current=1
} }
this.table.loading = true
let params = this.getQueryParams();//查询条件 let params = this.getQueryParams();//查询条件
console.log("--onlineList-查询条件-->",params) console.log("--onlineList-查询条件-->",params)
getAction(`${this.url.getData}${this.code}`,params).then((res)=>{ getAction(`${this.url.getData}${this.code}`,params).then((res)=>{
...@@ -432,6 +469,7 @@ ...@@ -432,6 +469,7 @@
}else{ }else{
this.$message.warning(res.message) this.$message.warning(res.message)
} }
}).finally(() => {
this.table.loading = false this.table.loading = false
}) })
}else{ }else{
...@@ -439,7 +477,8 @@ ...@@ -439,7 +477,8 @@
} }
}, },
loadDataNoPage(){ loadDataNoPage(){
let param = Object.assign({}, this.queryParam,this.isorter); this.table.loading = true
let param = this.getQueryParams()//查询条件
param['pageSize'] = -521; param['pageSize'] = -521;
getAction(`${this.url.getData}${this.code}`,filterObj(param)).then((res)=>{ getAction(`${this.url.getData}${this.code}`,filterObj(param)).then((res)=>{
console.log("--onlineList-列表数据",res) console.log("--onlineList-列表数据",res)
...@@ -453,6 +492,7 @@ ...@@ -453,6 +492,7 @@
}else{ }else{
this.$message.warning(res.message) this.$message.warning(res.message)
} }
}).finally(() => {
this.table.loading = false this.table.loading = false
}) })
}, },
...@@ -460,6 +500,8 @@ ...@@ -460,6 +500,8 @@
let param = Object.assign({}, this.queryParam,this.isorter); let param = Object.assign({}, this.queryParam,this.isorter);
param.pageNo = this.table.pagination.current; param.pageNo = this.table.pagination.current;
param.pageSize = this.table.pagination.pageSize; param.pageSize = this.table.pagination.pageSize;
param.superQueryMatchType = this.superQuery.matchType
param.superQueryParams = encodeURIComponent(this.superQuery.params)
return filterObj(param); return filterObj(param);
}, },
handleChangeInTableSelect(selectedRowKeys, selectionRows) { handleChangeInTableSelect(selectedRowKeys, selectionRows) {
...@@ -548,6 +590,49 @@ ...@@ -548,6 +590,49 @@
handleFormSuccess(){ handleFormSuccess(){
this.loadData() 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(){ onClearSelected(){
this.table.selectedRowKeys = [] this.table.selectedRowKeys = []
this.table.selectionRows = [] this.table.selectionRows = []
...@@ -700,7 +785,18 @@ ...@@ -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 @@ ...@@ -132,7 +132,6 @@
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal> <j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
<process-inst-pic-modal ref="processInstPicModal"></process-inst-pic-modal>
</div> </div>
</a-card> </a-card>
</template> </template>
...@@ -147,7 +146,7 @@ ...@@ -147,7 +146,7 @@
export default { export default {
name: 'OnlCgformTreeList', name: 'OnlCgformTreeList',
components: { components: {
JImportModal, JImportModal
}, },
data() { data() {
return { return {
...@@ -692,13 +691,6 @@ ...@@ -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> </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 @@ ...@@ -68,7 +68,10 @@
<!-- 字符串超长截取省略号显示--> <!-- 字符串超长截取省略号显示-->
<span slot="description" slot-scope="text"> <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> </span>
...@@ -151,12 +154,14 @@ ...@@ -151,12 +154,14 @@
{ {
title: '参数', title: '参数',
align:"center", align:"center",
dataIndex: 'parameter' width: 150,
dataIndex: 'parameter',
scopedSlots: {customRender: 'parameterRender'},
}, },
{ {
title: '描述', title: '描述',
align:"center", align:"center",
width: 300, width: 250,
dataIndex: 'description', dataIndex: 'description',
scopedSlots: {customRender: 'description'}, scopedSlots: {customRender: 'description'},
}, },
......
...@@ -7,11 +7,20 @@ ...@@ -7,11 +7,20 @@
<!-- 搜索区域 --> <!-- 搜索区域 -->
<a-form layout="inline" @keyup.enter.native="searchQuery"> <a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24"> <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-form-item label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
<a-input placeholder="" v-model="queryParam.roleName"></a-input> <a-input placeholder="" v-model="queryParam.roleName"></a-input>
</a-form-item> </a-form-item>
</a-col> </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"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button> <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
...@@ -22,9 +31,9 @@ ...@@ -22,9 +31,9 @@
</a-form> </a-form>
</div> </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="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-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button> <a-button type="primary" icon="import">导入</a-button>
</a-upload> </a-upload>
...@@ -58,6 +67,12 @@ ...@@ -58,6 +67,12 @@
更多 <a-icon type="down"/> 更多 <a-icon type="down"/>
</a> </a>
<a-menu slot="overlay"> <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-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete1(record.id)"> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete1(record.id)">
<a>删除</a> <a>删除</a>
...@@ -68,10 +83,16 @@ ...@@ -68,10 +83,16 @@
</span> </span>
</a-table> </a-table>
</div> </div>
<!-- 右侧的角色权限配置 -->
<user-role-modal ref="modalUserRole"></user-role-modal>
<role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
</a-card> </a-card>
</a-col> </a-col>
<a-col :md="rightColMd" :sm="24"> <a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 1">
<a-card :bordered="false"> <a-card :bordered="false">
<div style="text-align: right;">
<a-icon type="close-circle" @click="hideUserList" />
</div>
<!-- 查询区域 --> <!-- 查询区域 -->
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline"> <a-form layout="inline">
...@@ -162,14 +183,18 @@ ...@@ -162,14 +183,18 @@
import RoleModal from './modules/RoleModal' import RoleModal from './modules/RoleModal'
import UserModal from './modules/UserModal' import UserModal from './modules/UserModal'
import { filterObj } from '@/utils/util' import { filterObj } from '@/utils/util'
import UserRoleModal from './modules/UserRoleModal'
import moment from 'moment'
export default { export default {
name: 'RoleUserList', name: 'RoleUserList',
mixins: [JeecgListMixin], mixins: [JeecgListMixin],
components: { components: {
UserRoleModal,
SelectUserModal, SelectUserModal,
RoleModal, RoleModal,
UserModal UserModal,
moment
}, },
data() { data() {
return { return {
...@@ -218,6 +243,8 @@ ...@@ -218,6 +243,8 @@
selectedRowKeys2: [], selectedRowKeys2: [],
selectionRows1: [], selectionRows1: [],
selectionRows2: [], selectionRows2: [],
test:{},
rightcolval:0,
columns: columns:
[ [
{ {
...@@ -230,6 +257,15 @@ ...@@ -230,6 +257,15 @@
align: 'center', align: 'center',
dataIndex: 'roleName' dataIndex: 'roleName'
}, },
{
title: '创建时间',
dataIndex: 'createTime',
align:"center",
sorter: true,
customRender: (text) => {
return moment(text).format('YYYY-MM-DD')
}
},
{ {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
...@@ -302,6 +338,7 @@ ...@@ -302,6 +338,7 @@
this.selectionRows1 = [] this.selectionRows1 = []
}, },
onSelectChange1(selectedRowKeys, selectionRows) { onSelectChange1(selectedRowKeys, selectionRows) {
this.rightcolval = 1
this.selectedRowKeys1 = selectedRowKeys this.selectedRowKeys1 = selectedRowKeys
this.selectionRows1 = selectionRows this.selectionRows1 = selectionRows
this.model1 = Object.assign({}, selectionRows[0]) this.model1 = Object.assign({}, selectionRows[0])
...@@ -455,21 +492,21 @@ ...@@ -455,21 +492,21 @@
} }
}, },
handleOpen(record) { handleOpen(record) {
this.rightcolval = 1
this.selectedRowKeys1 = [record.id] this.selectedRowKeys1 = [record.id]
this.model1 = Object.assign({}, record) this.model1 = Object.assign({}, record)
this.currentRoleId = record.id this.currentRoleId = record.id
this.onClearSelected2() this.onClearSelected2()
this.loadData2() this.loadData2()
}, },
/*handleEdit: function(record) {
handleEdit: function(record) {
if (this.currentRoleId == '') { if (this.currentRoleId == '') {
this.$message.error('请选择一个角色!') this.$message.error('请选择一个角色!')
} else { } else {
this.$refs.modalForm.edit(record) this.$refs.modalForm.edit(record)
this.$refs.modalForm.title = '编辑' this.$refs.modalForm.title = '编辑'
} }
}, },*/
searchQuery2() { searchQuery2() {
this.loadData2(1) this.loadData2(1)
}, },
...@@ -486,6 +523,13 @@ ...@@ -486,6 +523,13 @@
} }
this.ipagination2 = pagination this.ipagination2 = pagination
this.loadData2() this.loadData2()
},
hideUserList(){
//this.rightcolval = 0
this.selectedRowKeys1 = []
},
handlePerssion(roleId){
this.$refs.modalUserRole.show(roleId);
} }
} }
} }
......
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
<a-col :md="6" :sm="8"> <a-col :md="6" :sm="8">
<a-form-item label="性别"> <a-form-item label="性别">
<a-select v-model="queryParam.sex" placeholder="请选择性别查询"> <a-select v-model="queryParam.sex" placeholder="请选择性别">
<a-select-option value="">请选择性别查询</a-select-option> <a-select-option value="">请选择</a-select-option>
<a-select-option value="1">男性</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-select>
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
<template v-if="toggleSearchStatus"> <template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8"> <a-col :md="6" :sm="8">
<a-form-item label="邮箱"> <a-form-item label="真实名字">
<a-input placeholder="请输入邮箱查询" v-model="queryParam.email"></a-input> <a-input placeholder="请输入真实名字" v-model="queryParam.realname"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
...@@ -38,11 +38,11 @@ ...@@ -38,11 +38,11 @@
</a-col> </a-col>
<a-col :md="6" :sm="8"> <a-col :md="6" :sm="8">
<a-form-item label="状态"> <a-form-item label="用户状态">
<a-select v-model="queryParam.status" placeholder="请选择用户状态查询"> <a-select v-model="queryParam.status" placeholder="请选择">
<a-select-option value="">请选择用户状态</a-select-option> <a-select-option value="">请选择</a-select-option>
<a-select-option value="1">正常</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-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div class="table-operator" style="border-top: 5px"> <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-button type="primary" icon="download" @click="handleExportXls('用户信息')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel"> <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button> <a-button type="primary" icon="import">导入</a-button>
......
...@@ -34,16 +34,14 @@ ...@@ -34,16 +34,14 @@
<a-form-item <a-form-item
:labelCol="labelCol" :labelCol="labelCol"
:wrapperCol="wrapperCol" :wrapperCol="wrapperCol"
label="参数" label="参数">
hasFeedback > <a-textarea placeholder="请输入参数" :rows="5" v-decorator="['parameter', {}]" />
<a-input placeholder="请输入参数" v-decorator="['parameter', {}]" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:labelCol="labelCol" :labelCol="labelCol"
:wrapperCol="wrapperCol" :wrapperCol="wrapperCol"
label="描述" label="描述">
hasFeedback > <a-textarea placeholder="请输入描述" :rows="3" v-decorator="['description', {}]" />
<a-input placeholder="请输入描述" v-decorator="['description', {}]" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:labelCol="labelCol" :labelCol="labelCol"
......
...@@ -31,7 +31,6 @@ module.exports = { ...@@ -31,7 +31,6 @@ module.exports = {
.set('@views', resolve('src/views')) .set('@views', resolve('src/views'))
.set('@layout', resolve('src/layout')) .set('@layout', resolve('src/layout'))
.set('@static', resolve('src/static')) .set('@static', resolve('src/static'))
.set('@mobile', resolve('src/modules/mobile'))
}, },
css: { css: {
...@@ -39,12 +38,9 @@ module.exports = { ...@@ -39,12 +38,9 @@ module.exports = {
less: { less: {
modifyVars: { modifyVars: {
/* less 变量覆盖,用于自定义 ant design 主题 */ /* less 变量覆盖,用于自定义 ant design 主题 */
'primary-color': '#1890FF',
/* 'link-color': '#1890FF',
'primary-color': '#F5222D',
'link-color': '#F5222D',
'border-radius-base': '4px', 'border-radius-base': '4px',
*/
}, },
javascriptEnabled: true, javascriptEnabled: true,
} }
......
...@@ -856,10 +856,10 @@ ...@@ -856,10 +856,10 @@
cssnano-preset-default "^4.0.0" cssnano-preset-default "^4.0.0"
postcss "^7.0.0" postcss "^7.0.0"
"@jeecg/antd-online@2.1.2": "@jeecg/antd-online-re@2.1.2":
version "2.1.2" version "2.1.2"
resolved "https://registry.npmjs.org/@jeecg/antd-online/-/antd-online-2.1.2.tgz#4b03b5a7d09e91227e33797ab6018fe103ab2906" resolved "https://registry.npmjs.org/@jeecg/antd-online-re/-/antd-online-re-2.1.2.tgz#15e0f6f35d3427ddfec41bd39f504fdf1c63c5ba"
integrity sha512-h6cgnrEarE7m1KDOFuLGhSsw45XVgyZgalqBrymy/IslUyLy0h85DCj+GUrTL0OmcLNOR57zctqbnLjwukU5IQ== integrity sha512-LSG6Dt/4QoMBZh/jj9oVZ+1Nr3141rCCWzKg4Yo4hgtLuN8/pLFNWSCWaMh0B3gG6i2PUIiOinfHpJ80ODbWjA==
"@mrmlnc/readdir-enhanced@^2.2.1": "@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1" version "2.2.1"
......
Jeecg-Boot 快速开发平台 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.
先完成此消息的编辑!
想要评论请 注册