mirror of https://github.com/jeecgboot/jeecg-boot
2.1.3 大屏版本发布
parent
ea5ef384f2
commit
9c44ffaa8e
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
Ant Design Jeecg Vue
|
Ant Design Jeecg Vue
|
||||||
====
|
====
|
||||||
|
|
||||||
当前最新版本: 2.1.2(发布日期:20191122)
|
当前最新版本: 2.1.3(发布日期:20191226)
|
||||||
|
|
||||||
Overview
|
Overview
|
||||||
----
|
----
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"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 @@
|
||||||
},
|
},
|
||||||
"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 @@
|
||||||
"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,
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
After Width: | Height: | Size: 7.3 KiB |
|
@ -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}
|
||||||
|
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
|
@ -1,7 +1,7 @@
|
||||||
<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 @@
|
||||||
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 @@
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
padding: { top:50, right:50, bottom:100, left:50 },
|
||||||
scale: [{
|
scale: [{
|
||||||
dataKey: 'bar',
|
dataKey: 'bar',
|
||||||
min: 0
|
min: 0
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<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 @@
|
||||||
<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 @@
|
||||||
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
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<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 @@
|
||||||
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 @@
|
||||||
}];
|
}];
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ value: 0},
|
{ value: 7.0 },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -96,7 +96,7 @@
|
||||||
props:{
|
props:{
|
||||||
datasource:{
|
datasource:{
|
||||||
type: Number,
|
type: Number,
|
||||||
default:0
|
default:7
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<div :style="{ padding: '0 0 32px 32px' }">
|
||||||
|
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||||
|
<v-chart
|
||||||
|
height="254"
|
||||||
|
:data="datasource"
|
||||||
|
:forceFit="true"
|
||||||
|
:padding="['auto', 'auto', '40', '50']">
|
||||||
|
<v-tooltip />
|
||||||
|
<v-axis />
|
||||||
|
<v-bar position="x*y"/>
|
||||||
|
</v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const data = []
|
||||||
|
for (let i = 0; i < 12; i += 1) {
|
||||||
|
data.push({
|
||||||
|
x: `${i + 1}月`,
|
||||||
|
y: Math.floor(Math.random() * 1000) + 200
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const tooltip = [
|
||||||
|
'x*y',
|
||||||
|
(x, y) => ({
|
||||||
|
name: x,
|
||||||
|
value: y
|
||||||
|
})
|
||||||
|
]
|
||||||
|
const scale = [{
|
||||||
|
dataKey: 'x',
|
||||||
|
min: 2
|
||||||
|
}, {
|
||||||
|
dataKey: 'y',
|
||||||
|
title: '时间',
|
||||||
|
min: 1,
|
||||||
|
max: 22
|
||||||
|
}]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Bar",
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.datasource = data
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
datasource:[],
|
||||||
|
scale,
|
||||||
|
tooltip
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -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 @@
|
||||||
/** 数据回显*/
|
/** 数据回显*/
|
||||||
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)
|
||||||
|
|
|
@ -76,7 +76,7 @@
|
||||||
<div v-if="rows.length===0" class="tr-nodata">
|
<div v-if="rows.length===0" class="tr-nodata">
|
||||||
<span>暂无数据</span>
|
<span>暂无数据</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- v-model="rows"-->
|
<!-- v-model="rows"-->
|
||||||
<draggable :value="rows" handle=".td-ds-icons" @end="handleDragMoveEnd">
|
<draggable :value="rows" handle=".td-ds-icons" @end="handleDragMoveEnd">
|
||||||
|
|
||||||
<!-- 动态生成tr -->
|
<!-- 动态生成tr -->
|
||||||
|
@ -96,10 +96,19 @@
|
||||||
<!-- 左侧固定td -->
|
<!-- 左侧固定td -->
|
||||||
|
|
||||||
<div v-if="dragSort" class="td td-ds" :style="style.tdLeftDs">
|
<div v-if="dragSort" class="td td-ds" :style="style.tdLeftDs">
|
||||||
<div class="td-ds-icons">
|
<a-dropdown :trigger="['click']" :getPopupContainer="getParentContainer">
|
||||||
<a-icon type="align-left"/>
|
<div class="td-ds-icons">
|
||||||
<a-icon type="align-right"/>
|
<a-icon type="align-left"/>
|
||||||
</div>
|
<a-icon type="align-right"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item key="0" :disabled="rowIndex===0" @click="_handleRowMoveUp(rowIndex)">向上移</a-menu-item>
|
||||||
|
<a-menu-item key="1" :disabled="rowIndex===(rows.length-1)" @click="_handleRowMoveDown(rowIndex)">向下移</a-menu-item>
|
||||||
|
<a-menu-divider/>
|
||||||
|
<a-menu-item key="3" @click="_handleRowInsertDown(rowIndex)">插入一行</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
|
<div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
|
||||||
|
@ -245,14 +254,24 @@
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template slot="addonAfter" style="width: 30px">
|
<template v-if="col.allowDownload!==false || col.allowRemove!==false" slot="addonAfter" style="width: 30px">
|
||||||
<a-tooltip title="删除并重新上传">
|
<a-dropdown :trigger="['click']" placement="bottomRight" :getPopupContainer="getParentContainer">
|
||||||
<a-icon
|
<a-tooltip title="操作" :getPopupContainer="getParentContainer">
|
||||||
v-if="file.status!=='uploading'"
|
<a-icon
|
||||||
type="close-circle"
|
v-if="file.status!=='uploading'"
|
||||||
style="cursor: pointer;"
|
type="setting"
|
||||||
@click="()=>handleClickDelFile(id)"/>
|
style="cursor: pointer;"/>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
|
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item v-if="col.allowDownload!==false" @click="handleClickDownloadFile(id)">
|
||||||
|
<span><a-icon type="download"/> 下载</span>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item v-if="col.allowRemove!==false" @click="handleClickDelFile(id)">
|
||||||
|
<span><a-icon type="delete"/> 删除</span>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</a-input>
|
</a-input>
|
||||||
|
@ -501,17 +520,33 @@
|
||||||
|
|
||||||
|
|
||||||
<div v-else-if="col.type === formTypes.slot" :key="i">
|
<div v-else-if="col.type === formTypes.slot" :key="i">
|
||||||
<slot
|
<a-tooltip
|
||||||
:name="(col.slot || col.slotName) || col.key"
|
:key="i"
|
||||||
:index="rowIndex"
|
:id="id"
|
||||||
:text="inputValues[rowIndex][col.key]"
|
placement="top"
|
||||||
:column="col"
|
:title="(tooltips[id] || {}).title"
|
||||||
:rowId="removeCaseId(row.id)"
|
:visible="(tooltips[id] || {}).visible || false"
|
||||||
:getValue="()=>_getValueForSlot(row.id)"
|
:autoAdjustOverflow="true">
|
||||||
:caseId="caseId"
|
|
||||||
:allValues="_getAllValuesForSlot()"
|
<span
|
||||||
:target="getVM()"
|
@mouseover="()=>{handleMouseoverCommono(row,col)}"
|
||||||
/>
|
@mouseout="()=>{handleMouseoutCommono(row,col)}">
|
||||||
|
<slot
|
||||||
|
:name="(col.slot || col.slotName) || col.key"
|
||||||
|
:index="rowIndex"
|
||||||
|
:text="slotValues[id]"
|
||||||
|
:value="slotValues[id]"
|
||||||
|
:column="col"
|
||||||
|
:rowId="removeCaseId(row.id)"
|
||||||
|
:getValue="()=>_getValueForSlot(row.id)"
|
||||||
|
:caseId="caseId"
|
||||||
|
:allValues="_getAllValuesForSlot()"
|
||||||
|
:target="getVM()"
|
||||||
|
:handleChange="(v)=>handleChangeSlotCommon(v,id,row,col)"
|
||||||
|
:isNotPass="notPassedIds.includes(col.key+row.id)"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- else (normal) -->
|
<!-- else (normal) -->
|
||||||
|
@ -636,15 +671,17 @@
|
||||||
checkboxValues: {},
|
checkboxValues: {},
|
||||||
// 绑定 jdate 的值
|
// 绑定 jdate 的值
|
||||||
jdateValues: {},
|
jdateValues: {},
|
||||||
|
// 绑定插槽数据
|
||||||
|
slotValues: {},
|
||||||
// file 信息
|
// file 信息
|
||||||
uploadValues: {},
|
uploadValues: {},
|
||||||
//popup信息
|
//popup信息
|
||||||
popupValues:{},
|
popupValues: {},
|
||||||
|
|
||||||
radioValues:{},
|
radioValues: {},
|
||||||
metaCheckboxValues:{},
|
metaCheckboxValues: {},
|
||||||
multiSelectValues:{},
|
multiSelectValues: {},
|
||||||
searchSelectValues:{},
|
searchSelectValues: {},
|
||||||
// 绑定左侧选择框已选择的id
|
// 绑定左侧选择框已选择的id
|
||||||
selectedRowIds: [],
|
selectedRowIds: [],
|
||||||
// 存储被删除行的id
|
// 存储被删除行的id
|
||||||
|
@ -717,9 +754,9 @@
|
||||||
},
|
},
|
||||||
// 侦听器
|
// 侦听器
|
||||||
watch: {
|
watch: {
|
||||||
rows:{
|
rows: {
|
||||||
immediate:true,
|
immediate: true,
|
||||||
handler(val,old) {
|
handler(val, old) {
|
||||||
// val.forEach(item => {
|
// val.forEach(item => {
|
||||||
// for (let inputValue of this.inputValues) {
|
// for (let inputValue of this.inputValues) {
|
||||||
// if (inputValue.id === item.id) {
|
// if (inputValue.id === item.id) {
|
||||||
|
@ -740,8 +777,9 @@
|
||||||
let checkboxValues = {}
|
let checkboxValues = {}
|
||||||
let selectValues = {}
|
let selectValues = {}
|
||||||
let jdateValues = {}
|
let jdateValues = {}
|
||||||
|
let slotValues = {}
|
||||||
let uploadValues = {}
|
let uploadValues = {}
|
||||||
let popupValues={}
|
let popupValues = {}
|
||||||
let radioValues = {}
|
let radioValues = {}
|
||||||
let multiSelectValues = {}
|
let multiSelectValues = {}
|
||||||
let searchSelectValues = {}
|
let searchSelectValues = {}
|
||||||
|
@ -783,9 +821,9 @@
|
||||||
|
|
||||||
} else if (column.type === FormTypes.slot) {
|
} else if (column.type === FormTypes.slot) {
|
||||||
if (sourceValue !== 0 && !sourceValue) {
|
if (sourceValue !== 0 && !sourceValue) {
|
||||||
value[column.key] = column.defaultValue
|
slotValues[inputId] = column.defaultValue
|
||||||
} else {
|
} else {
|
||||||
value[column.key] = sourceValue
|
slotValues[inputId] = sourceValue
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (column.type === FormTypes.popup) {
|
} else if (column.type === FormTypes.popup) {
|
||||||
|
@ -795,18 +833,18 @@
|
||||||
} else if (column.type === FormTypes.sel_search) {
|
} else if (column.type === FormTypes.sel_search) {
|
||||||
searchSelectValues[inputId] = sourceValue
|
searchSelectValues[inputId] = sourceValue
|
||||||
} else if (column.type === FormTypes.list_multi) {
|
} else if (column.type === FormTypes.list_multi) {
|
||||||
if(sourceValue.length>0){
|
if (sourceValue.length > 0) {
|
||||||
multiSelectValues[inputId] = sourceValue.split(",")
|
multiSelectValues[inputId] = sourceValue.split(',')
|
||||||
}else{
|
} else {
|
||||||
multiSelectValues[inputId] = []
|
multiSelectValues[inputId] = []
|
||||||
}
|
}
|
||||||
} else if (column.type === FormTypes.file || column.type === FormTypes.image) {
|
} else if (column.type === FormTypes.upload || column.type === FormTypes.file || column.type === FormTypes.image) {
|
||||||
if(sourceValue){
|
if (sourceValue) {
|
||||||
let fileName = sourceValue.substring(sourceValue.lastIndexOf("/")+1)
|
let fileName = sourceValue.substring(sourceValue.lastIndexOf('/') + 1)
|
||||||
uploadValues[inputId] = {
|
uploadValues[inputId] = {
|
||||||
name: fileName,
|
name: fileName,
|
||||||
status: 'done',
|
status: 'done',
|
||||||
path:sourceValue
|
path: sourceValue
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -839,6 +877,7 @@
|
||||||
this.checkboxValues = checkboxValues
|
this.checkboxValues = checkboxValues
|
||||||
this.selectValues = selectValues
|
this.selectValues = selectValues
|
||||||
this.jdateValues = jdateValues
|
this.jdateValues = jdateValues
|
||||||
|
this.slotValues = slotValues
|
||||||
this.rows = rows
|
this.rows = rows
|
||||||
this.uploadValues = uploadValues
|
this.uploadValues = uploadValues
|
||||||
this.popupValues = popupValues
|
this.popupValues = popupValues
|
||||||
|
@ -935,12 +974,13 @@
|
||||||
this.selectValues = {}
|
this.selectValues = {}
|
||||||
this.checkboxValues = {}
|
this.checkboxValues = {}
|
||||||
this.jdateValues = {}
|
this.jdateValues = {}
|
||||||
|
this.slotValues = {}
|
||||||
this.selectedRowIds = []
|
this.selectedRowIds = []
|
||||||
this.tooltips = {}
|
this.tooltips = {}
|
||||||
this.notPassedIds = []
|
this.notPassedIds = []
|
||||||
this.uploadValues=[]
|
this.uploadValues = []
|
||||||
this.popupValues=[]
|
this.popupValues = []
|
||||||
this.radioValues=[]
|
this.radioValues = []
|
||||||
this.multiSelectValues = []
|
this.multiSelectValues = []
|
||||||
this.searchSelectValues = []
|
this.searchSelectValues = []
|
||||||
this.scrollTop = 0
|
this.scrollTop = 0
|
||||||
|
@ -987,7 +1027,7 @@
|
||||||
return `${this.caseId}${timestamp}${rows.length}`
|
return `${this.caseId}${timestamp}${rows.length}`
|
||||||
},
|
},
|
||||||
/** push 一条数据 */
|
/** push 一条数据 */
|
||||||
push(record, update = true, rows) {
|
push(record, update = true, rows, insertIndex = null) {
|
||||||
if (!(rows instanceof Array)) {
|
if (!(rows instanceof Array)) {
|
||||||
rows = cloneObject(this.rows) || []
|
rows = cloneObject(this.rows) || []
|
||||||
}
|
}
|
||||||
|
@ -1005,6 +1045,7 @@
|
||||||
let checkboxValues = Object.assign({}, this.checkboxValues)
|
let checkboxValues = Object.assign({}, this.checkboxValues)
|
||||||
let selectValues = Object.assign({}, this.selectValues)
|
let selectValues = Object.assign({}, this.selectValues)
|
||||||
let jdateValues = Object.assign({}, this.jdateValues)
|
let jdateValues = Object.assign({}, this.jdateValues)
|
||||||
|
let slotValues = Object.assign({}, this.slotValues)
|
||||||
this.columns.forEach(column => {
|
this.columns.forEach(column => {
|
||||||
let key = column.key
|
let key = column.key
|
||||||
let inputId = key + row.id
|
let inputId = key + row.id
|
||||||
|
@ -1039,17 +1080,23 @@
|
||||||
jdateValues[inputId] = recordHasValue ? record[key] : column.defaultValue
|
jdateValues[inputId] = recordHasValue ? record[key] : column.defaultValue
|
||||||
|
|
||||||
} else if (column.type === FormTypes.slot) {
|
} else if (column.type === FormTypes.slot) {
|
||||||
value[key] = recordHasValue ? record[key] : (column.defaultValue || '')
|
slotValues[inputId] = recordHasValue ? record[key] : (column.defaultValue || '')
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
value[key] = recordHasValue ? record[key] : ''
|
value[key] = recordHasValue ? record[key] : ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
rows.push(row)
|
if (typeof insertIndex === 'number') {
|
||||||
this.inputValues.push(value)
|
rows.splice(insertIndex, 0, row)
|
||||||
|
this.inputValues.splice(insertIndex, 0, value)
|
||||||
|
} else {
|
||||||
|
rows.push(row)
|
||||||
|
this.inputValues.push(value)
|
||||||
|
}
|
||||||
this.checkboxValues = checkboxValues
|
this.checkboxValues = checkboxValues
|
||||||
this.selectValues = selectValues
|
this.selectValues = selectValues
|
||||||
this.jdateValues = jdateValues
|
this.jdateValues = jdateValues
|
||||||
|
this.slotValues = slotValues
|
||||||
|
|
||||||
if (this.dragSort) {
|
if (this.dragSort) {
|
||||||
this.inputValues.forEach((item, index) => {
|
this.inputValues.forEach((item, index) => {
|
||||||
|
@ -1097,17 +1144,16 @@
|
||||||
}
|
}
|
||||||
this.rows = rows
|
this.rows = rows
|
||||||
|
|
||||||
let rowValue = this.getValuesSync({
|
|
||||||
validate: false,
|
|
||||||
rowIds: [this.removeCaseId(row.id)]
|
|
||||||
}).values[0]
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateFormValues()
|
this.updateFormValues()
|
||||||
})
|
})
|
||||||
// 触发add事件
|
// 触发add事件
|
||||||
this.$emit('added', {
|
this.$emit('added', {
|
||||||
row: rowValue,
|
row: (() => {
|
||||||
|
let r = Object.assign({}, row)
|
||||||
|
r.id = this.removeCaseId(r.id)
|
||||||
|
return r
|
||||||
|
})(),
|
||||||
target: this
|
target: this
|
||||||
})
|
})
|
||||||
// 设置滚动条位置
|
// 设置滚动条位置
|
||||||
|
@ -1124,6 +1170,36 @@
|
||||||
tbody.scrollTop = tbody.scrollHeight
|
tbody.scrollTop = tbody.scrollHeight
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* 在指定位置添加一行
|
||||||
|
* @param insertIndex 添加位置下标
|
||||||
|
* @param num 添加的行数,默认1
|
||||||
|
*/
|
||||||
|
insert(insertIndex, num = 1) {
|
||||||
|
if (!insertIndex && num < 1) return
|
||||||
|
let rows = this.rows
|
||||||
|
let newRows = []
|
||||||
|
for (let i = 0; i < num; i++) {
|
||||||
|
let row = { id: this.generateId(rows) }
|
||||||
|
rows = this.push(row, false, rows, insertIndex)
|
||||||
|
newRows.push(row)
|
||||||
|
}
|
||||||
|
// 同步更改
|
||||||
|
this.rows = rows
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.updateFormValues()
|
||||||
|
})
|
||||||
|
// 触发 insert 事件
|
||||||
|
this.$emit('inserted', {
|
||||||
|
rows: newRows.map(row => {
|
||||||
|
let r = cloneObject(row)
|
||||||
|
r.id = this.removeCaseId(r.id)
|
||||||
|
return r
|
||||||
|
}),
|
||||||
|
num, insertIndex,
|
||||||
|
target: this
|
||||||
|
})
|
||||||
|
},
|
||||||
/** 删除被选中的行 */
|
/** 删除被选中的行 */
|
||||||
removeSelectedRows() {
|
removeSelectedRows() {
|
||||||
this.removeRows(this.selectedRowIds)
|
this.removeRows(this.selectedRowIds)
|
||||||
|
@ -1161,7 +1237,7 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.rows = rows
|
this.rows = rows
|
||||||
this.$emit('deleted', this.getDeleteIds())
|
this.$emit('deleted', this.getDeleteIds(), this)
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
// 更新formValues
|
// 更新formValues
|
||||||
this.updateFormValues()
|
this.updateFormValues()
|
||||||
|
@ -1225,24 +1301,26 @@
|
||||||
|
|
||||||
} else if (column.type === FormTypes.image || column.type === FormTypes.file) {
|
} else if (column.type === FormTypes.image || column.type === FormTypes.file) {
|
||||||
let currUploadObj = cloneObject(this.uploadValues[inputId] || null)
|
let currUploadObj = cloneObject(this.uploadValues[inputId] || null)
|
||||||
if(currUploadObj){
|
if (currUploadObj) {
|
||||||
value[column.key] = currUploadObj['path'] || null
|
value[column.key] = currUploadObj['path'] || null
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (column.type === FormTypes.popup) {
|
} else if (column.type === FormTypes.popup) {
|
||||||
if(!value[column.key]){
|
if (!value[column.key]) {
|
||||||
value[column.key] = this.popupValues[inputId] || null
|
value[column.key] = this.popupValues[inputId] || null
|
||||||
}
|
}
|
||||||
} else if (column.type === FormTypes.radio) {
|
} else if (column.type === FormTypes.radio) {
|
||||||
value[column.key] = this.radioValues[inputId]
|
value[column.key] = this.radioValues[inputId]
|
||||||
}else if (column.type === FormTypes.sel_search) {
|
} else if (column.type === FormTypes.sel_search) {
|
||||||
value[column.key] = this.searchSelectValues[inputId]
|
value[column.key] = this.searchSelectValues[inputId]
|
||||||
}else if (column.type === FormTypes.list_multi) {
|
} else if (column.type === FormTypes.list_multi) {
|
||||||
if(!this.multiSelectValues[inputId] || this.multiSelectValues[inputId].length==0){
|
if (!this.multiSelectValues[inputId] || this.multiSelectValues[inputId].length == 0) {
|
||||||
value[column.key] = ''
|
value[column.key] = ''
|
||||||
}else{
|
} else {
|
||||||
value[column.key] = this.multiSelectValues[inputId].join(",")
|
value[column.key] = this.multiSelectValues[inputId].join(',')
|
||||||
}
|
}
|
||||||
|
} else if (column.type === FormTypes.slot) {
|
||||||
|
value[column.key] = this.slotValues[inputId]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -1326,6 +1404,7 @@
|
||||||
selectValues: this.selectValues,
|
selectValues: this.selectValues,
|
||||||
checkboxValues: this.checkboxValues,
|
checkboxValues: this.checkboxValues,
|
||||||
jdateValues: this.jdateValues,
|
jdateValues: this.jdateValues,
|
||||||
|
slotValues: this.slotValues,
|
||||||
uploadValues: this.uploadValues,
|
uploadValues: this.uploadValues,
|
||||||
popupValues: this.popupValues,
|
popupValues: this.popupValues,
|
||||||
radioValues: this.radioValues,
|
radioValues: this.radioValues,
|
||||||
|
@ -1371,6 +1450,11 @@
|
||||||
this.jdateValues[modelKey] = newValue
|
this.jdateValues[modelKey] = newValue
|
||||||
edited = true
|
edited = true
|
||||||
}
|
}
|
||||||
|
// 在 slotValues 中寻找值
|
||||||
|
if (!edited && this.slotValues.hasOwnProperty(modelKey)) {
|
||||||
|
this.slotValues[modelKey] = newValue
|
||||||
|
edited = true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -1397,7 +1481,7 @@
|
||||||
let inputId = column.key + row.id
|
let inputId = column.key + row.id
|
||||||
tooltips[inputId] = tooltips[inputId] ? tooltips[inputId] : {}
|
tooltips[inputId] = tooltips[inputId] ? tooltips[inputId] : {}
|
||||||
|
|
||||||
let [passed, message] = this.validateValue(column.validateRules, value)
|
let [passed, message] = this.validateValue(column, value)
|
||||||
|
|
||||||
const nextThen = res => {
|
const nextThen = res => {
|
||||||
let [passed, message] = res
|
let [passed, message] = res
|
||||||
|
@ -1433,6 +1517,9 @@
|
||||||
}
|
}
|
||||||
element.style.borderColor = borderColor
|
element.style.borderColor = borderColor
|
||||||
element.style.boxShadow = boxShadow
|
element.style.boxShadow = boxShadow
|
||||||
|
if (element.tagName === 'SPAN') {
|
||||||
|
element.style.display = 'block'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// 是否更新到data
|
// 是否更新到data
|
||||||
if (update) {
|
if (update) {
|
||||||
|
@ -1450,23 +1537,22 @@
|
||||||
if (typeof msg === 'string') {
|
if (typeof msg === 'string') {
|
||||||
message = msg
|
message = msg
|
||||||
}
|
}
|
||||||
if (flag == null) {
|
if (flag == null || flag === true) {
|
||||||
nextThen([null, message])
|
|
||||||
}else if (typeof flag === 'boolean' && flag) {
|
|
||||||
nextThen([true, message])
|
nextThen([true, message])
|
||||||
} else {
|
} else {
|
||||||
nextThen([false, message])
|
nextThen([false, message])
|
||||||
}
|
}
|
||||||
|
|
||||||
}, this)
|
}, this)
|
||||||
} else {
|
} else {
|
||||||
nextThen([passed, message])
|
nextThen([passed, message])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return [tooltips[inputId], notPassedIds]
|
return [tooltips[inputId], notPassedIds]
|
||||||
},
|
},
|
||||||
/** 通过规则验证值是否正确 */
|
/** 通过规则验证值是否正确 */
|
||||||
validateValue(rules, value) {
|
validateValue(column, value) {
|
||||||
|
let rules = column.validateRules
|
||||||
let passed = true, message = ''
|
let passed = true, message = ''
|
||||||
// 判断有没有验证规则或验证规则格式正不正确,若条件不符合则默认通过
|
// 判断有没有验证规则或验证规则格式正不正确,若条件不符合则默认通过
|
||||||
if (rules instanceof Array) {
|
if (rules instanceof Array) {
|
||||||
|
@ -1477,12 +1563,24 @@
|
||||||
if (rule.required === true && isNull) {
|
if (rule.required === true && isNull) {
|
||||||
passed = false
|
passed = false
|
||||||
} else // 使用 else-if 是为了防止一个 rule 中出现两个规则
|
} else // 使用 else-if 是为了防止一个 rule 中出现两个规则
|
||||||
|
// 验证规则:唯一校验
|
||||||
|
if (rule.unique === true || rule.pattern === 'only') {
|
||||||
|
let { values } = this.getValuesSync({ validate: false })
|
||||||
|
let findCount = 0
|
||||||
|
for (let val of values) {
|
||||||
|
if (val[column.key] === value) {
|
||||||
|
if (++findCount >= 2) {
|
||||||
|
passed = false
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else
|
||||||
// 验证规则:正则表达式
|
// 验证规则:正则表达式
|
||||||
if (!!rule.pattern && !isNull) {
|
if (!!rule.pattern && !isNull) {
|
||||||
|
|
||||||
// 兼容 online 的规则
|
// 兼容 online 的规则
|
||||||
let foo = [
|
let foo = [
|
||||||
{ title: '唯一校验', value: 'only', pattern: null },
|
|
||||||
{ title: '6到16位数字', value: 'n6-16', pattern: /\d{6,18}/ },
|
{ title: '6到16位数字', value: 'n6-16', pattern: /\d{6,18}/ },
|
||||||
{ title: '6到16位任意字符', value: '*6-16', pattern: /^.{6,16}$/ },
|
{ title: '6到16位任意字符', value: '*6-16', pattern: /^.{6,16}$/ },
|
||||||
{ title: '网址', value: 'url', pattern: /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/ },
|
{ title: '网址', value: 'url', pattern: /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/ },
|
||||||
|
@ -1491,7 +1589,7 @@
|
||||||
{ title: '邮政编码', value: 'p', pattern: /^[1-9]\d{5}$/ },
|
{ title: '邮政编码', value: 'p', pattern: /^[1-9]\d{5}$/ },
|
||||||
{ title: '字母', value: 's', pattern: /^[A-Z|a-z]+$/ },
|
{ title: '字母', value: 's', pattern: /^[A-Z|a-z]+$/ },
|
||||||
{ title: '数字', value: 'n', pattern: /^-?\d+\.?\d*$/ },
|
{ title: '数字', value: 'n', pattern: /^-?\d+\.?\d*$/ },
|
||||||
{ title: '整数', value: 'z', pattern: /^[1-9]\d*$/ },
|
{ title: '整数', value: 'z', pattern: /^-?\d+$/ },
|
||||||
{ title: '非空', value: '*', pattern: /^.+$/ },
|
{ title: '非空', value: '*', pattern: /^.+$/ },
|
||||||
{ title: '6到18位字符串', value: 's6-18', pattern: /^.{6,18}$/ },
|
{ title: '6到18位字符串', value: 's6-18', pattern: /^.{6,18}$/ },
|
||||||
{ title: '金额', value: 'money', pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/ },
|
{ title: '金额', value: 'money', pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/ },
|
||||||
|
@ -1505,7 +1603,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!flag) passed = new RegExp(rule.pattern).test(value)
|
if (!flag) passed = new RegExp(rule.pattern).test(value)
|
||||||
} else if (typeof rule.handler === 'function') {
|
} else
|
||||||
|
// 校验规则:自定义函数校验
|
||||||
|
if (typeof rule.handler === 'function') {
|
||||||
return [rule.handler, rule.message]
|
return [rule.handler, rule.message]
|
||||||
}
|
}
|
||||||
// 如果没有通过验证,则跳出循环。如果通过了验证,则继续验证下一条规则
|
// 如果没有通过验证,则跳出循环。如果通过了验证,则继续验证下一条规则
|
||||||
|
@ -1652,6 +1752,11 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/** 触发已拖动事件 */
|
||||||
|
emitDragged(oldIndex, newIndex) {
|
||||||
|
this.$emit('dragged', { oldIndex, newIndex, target: this })
|
||||||
|
},
|
||||||
|
|
||||||
/** 拖动结束,交换inputValue中的值 */
|
/** 拖动结束,交换inputValue中的值 */
|
||||||
handleDragMoveEnd(event) {
|
handleDragMoveEnd(event) {
|
||||||
let { oldIndex, newIndex, item: { dataset: { idx: dataIdx } } } = event
|
let { oldIndex, newIndex, item: { dataset: { idx: dataIdx } } } = event
|
||||||
|
@ -1662,13 +1767,7 @@
|
||||||
newIndex += diff
|
newIndex += diff
|
||||||
|
|
||||||
this.rowResort(oldIndex, newIndex)
|
this.rowResort(oldIndex, newIndex)
|
||||||
|
this.emitDragged(oldIndex, newIndex)
|
||||||
// 触发已拖动事件
|
|
||||||
this.$emit('dragged', {
|
|
||||||
oldIndex,
|
|
||||||
newIndex,
|
|
||||||
target: this
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 行重新排序 */
|
/** 行重新排序 */
|
||||||
|
@ -1690,6 +1789,30 @@
|
||||||
this.forceUpdateFormValues()
|
this.forceUpdateFormValues()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/** 当前行向上移一位 */
|
||||||
|
_handleRowMoveUp(rowIndex) {
|
||||||
|
if (rowIndex > 0) {
|
||||||
|
let newIndex = rowIndex - 1
|
||||||
|
this.rowResort(rowIndex, newIndex)
|
||||||
|
this.emitDragged(rowIndex, newIndex)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 当前行向下移一位 */
|
||||||
|
_handleRowMoveDown(rowIndex) {
|
||||||
|
if (rowIndex < (this.rows.length - 1)) {
|
||||||
|
let newIndex = rowIndex + 1
|
||||||
|
this.rowResort(rowIndex, newIndex)
|
||||||
|
this.emitDragged(rowIndex, newIndex)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 在当前行下面插入一行 */
|
||||||
|
_handleRowInsertDown(rowIndex) {
|
||||||
|
let insertIndex = (rowIndex + 1)
|
||||||
|
this.insert(insertIndex)
|
||||||
|
},
|
||||||
|
|
||||||
/* --- common function begin --- */
|
/* --- common function begin --- */
|
||||||
|
|
||||||
/** 鼠标移入 */
|
/** 鼠标移入 */
|
||||||
|
@ -1732,6 +1855,14 @@
|
||||||
this.elemValueChange(type, row, column, value)
|
this.elemValueChange(type, row, column, value)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
/** slot Change */
|
||||||
|
handleChangeSlotCommon(value, id, row, column) {
|
||||||
|
this.slotValues = this.bindValuesChange(value, id, 'slotValues')
|
||||||
|
// 做单个表单验证
|
||||||
|
this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
|
||||||
|
// 触发valueChange 事件
|
||||||
|
this.elemValueChange(FormTypes.slot, row, column, value)
|
||||||
|
},
|
||||||
handleBlurCommono(target, index, row, column) {
|
handleBlurCommono(target, index, row, column) {
|
||||||
let { value } = target
|
let { value } = target
|
||||||
// 做单个表单验证
|
// 做单个表单验证
|
||||||
|
@ -1775,16 +1906,18 @@
|
||||||
if (column.responseName && file.response) {
|
if (column.responseName && file.response) {
|
||||||
value['responseName'] = file.response[column.responseName]
|
value['responseName'] = file.response[column.responseName]
|
||||||
}
|
}
|
||||||
if(file.status =='done'){
|
if (file.status == 'done') {
|
||||||
value['path'] = file.response[column.responseName]
|
value['path'] = file.response[column.responseName]
|
||||||
}
|
}
|
||||||
this.uploadValues = this.bindValuesChange(value, id, 'uploadValues')
|
this.uploadValues = this.bindValuesChange(value, id, 'uploadValues')
|
||||||
},
|
},
|
||||||
/** 记录用到数据绑定的组件的值 */
|
/** 记录用到数据绑定的组件的值 */
|
||||||
bindValuesChange(value, id, key) {
|
bindValuesChange(value, id, key) {
|
||||||
let values = Object.assign({}, this[key])
|
// let values = Object.assign({}, this[key])
|
||||||
values[id] = value
|
// values[id] = value
|
||||||
return values
|
// return values
|
||||||
|
this.$set(this[key], id, value)
|
||||||
|
return this[key]
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 显示或隐藏tooltip */
|
/** 显示或隐藏tooltip */
|
||||||
|
@ -1823,7 +1956,13 @@
|
||||||
handleClickDelFile(id) {
|
handleClickDelFile(id) {
|
||||||
this.uploadValues[id] = null
|
this.uploadValues[id] = null
|
||||||
},
|
},
|
||||||
|
handleClickDownloadFile(id) {
|
||||||
|
let { path } = this.uploadValues[id] || {}
|
||||||
|
if (path) {
|
||||||
|
let url = window._CONFIG['downloadUrl'] + '/' + path
|
||||||
|
window.open(url)
|
||||||
|
}
|
||||||
|
},
|
||||||
/** 加载数据字典并合并到 options */
|
/** 加载数据字典并合并到 options */
|
||||||
_loadDictConcatToOptions(column) {
|
_loadDictConcatToOptions(column) {
|
||||||
initDictOptions(column.dictCode).then((res) => {
|
initDictOptions(column.dictCode).then((res) => {
|
||||||
|
@ -1980,42 +2119,42 @@
|
||||||
return headers
|
return headers
|
||||||
},
|
},
|
||||||
/** 上传请求地址 */
|
/** 上传请求地址 */
|
||||||
getUploadAction(value){
|
getUploadAction(value) {
|
||||||
if(!value){
|
if (!value) {
|
||||||
return window._CONFIG['domianURL']+"/sys/common/upload"
|
return window._CONFIG['domianURL'] + '/sys/common/upload'
|
||||||
}else{
|
} else {
|
||||||
return value
|
return value
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/** 预览图片地址 */
|
/** 预览图片地址 */
|
||||||
getCellImageView(id){
|
getCellImageView(id) {
|
||||||
let currUploadObj = this.uploadValues[id] || null
|
let currUploadObj = this.uploadValues[id] || null
|
||||||
if(currUploadObj && currUploadObj['path']){
|
if (currUploadObj && currUploadObj['path']) {
|
||||||
return window._CONFIG['domianURL']+"/sys/common/view/"+currUploadObj['path']
|
return window._CONFIG['domianURL'] + '/sys/common/view/' + currUploadObj['path']
|
||||||
}else{
|
} else {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/** popup回调 */
|
/** popup回调 */
|
||||||
popupCallback(value,others,id,row,column,index){
|
popupCallback(value, others, id, row, column, index) {
|
||||||
// 存储输入的值
|
// 存储输入的值
|
||||||
this.popupValues[id]=value
|
this.popupValues[id] = value
|
||||||
if(others){
|
if (others) {
|
||||||
Object.keys(others).map((key)=>{
|
Object.keys(others).map((key) => {
|
||||||
this.inputValues[index][key] = others[key]
|
this.inputValues[index][key] = others[key]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 做单个表单验证
|
// 做单个表单验证
|
||||||
this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
|
this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
|
||||||
// 触发valueChange 事件
|
// 触发valueChange 事件
|
||||||
this.elemValueChange("input", row, column, value)
|
this.elemValueChange('input', row, column, value)
|
||||||
// 更新form表单的值
|
// 更新form表单的值
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.forceUpdateFormValues()
|
this.forceUpdateFormValues()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
/** popup输入框回显 */
|
/** popup输入框回显 */
|
||||||
getPopupValue(id){
|
getPopupValue(id) {
|
||||||
return this.popupValues[id]
|
return this.popupValues[id]
|
||||||
},
|
},
|
||||||
handleRadioChange(value, id, row, column) {
|
handleRadioChange(value, id, row, column) {
|
||||||
|
|
|
@ -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 @@
|
||||||
},
|
},
|
||||||
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() {
|
||||||
|
|
|
@ -1,11 +1,22 @@
|
||||||
<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 @@
|
||||||
<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 @@
|
||||||
<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 @@
|
||||||
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 @@
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -186,6 +209,7 @@
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
fieldTreeData: [],
|
||||||
|
|
||||||
prompt: {
|
prompt: {
|
||||||
visible: false,
|
visible: false,
|
||||||
|
@ -199,6 +223,7 @@
|
||||||
// 保存查询条件的前缀名
|
// 保存查询条件的前缀名
|
||||||
saveCodeBefore: 'JSuperQuerySaved_',
|
saveCodeBefore: 'JSuperQuerySaved_',
|
||||||
selectValue: 'and',
|
selectValue: 'and',
|
||||||
|
superQueryFlag: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -214,6 +239,35 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
fieldList: {
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
let mainData = [], subData = []
|
||||||
|
val.forEach(item => {
|
||||||
|
let data = { ...item }
|
||||||
|
data.label = data.label || data.text
|
||||||
|
let hasChildren = (data.children instanceof Array)
|
||||||
|
data.disabled = hasChildren
|
||||||
|
data.selectable = !hasChildren
|
||||||
|
if (hasChildren) {
|
||||||
|
data.children = data.children.map(item2 => {
|
||||||
|
let child = { ...item2 }
|
||||||
|
child.label = child.label || child.text
|
||||||
|
child.label = data.label + '-' + child.label
|
||||||
|
child.value = data.value + ',' + child.value
|
||||||
|
child.val = ''
|
||||||
|
return child
|
||||||
|
})
|
||||||
|
data.val = ''
|
||||||
|
subData.push(data)
|
||||||
|
} else {
|
||||||
|
mainData.push(data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.fieldTreeData = mainData.concat(subData)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -225,17 +279,21 @@
|
||||||
this.visible = true
|
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 @@
|
||||||
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 @@
|
||||||
}
|
}
|
||||||
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 @@
|
||||||
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 @@
|
||||||
|
|
||||||
<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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
},
|
},
|
||||||
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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
},
|
},
|
||||||
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 @@
|
||||||
<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 @@
|
||||||
|
|
||||||
<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 @@
|
||||||
<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 @@
|
||||||
<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 @@
|
||||||
</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 @@
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
default: 900
|
||||||
|
},
|
||||||
|
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -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 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
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 @@
|
||||||
|
|
||||||
/** 删除已选择的 */
|
/** 删除已选择的 */
|
||||||
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 {
|
||||||
|
|
||||||
### 配置参数
|
### 配置参数
|
||||||
|
|
||||||
- `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 ,不传则直接显示数据 |
|
||||||
|
| 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 | 是否显示"选择"按钮,如果不显示,可以直接点击文本框打开选择界面 |
|
||||||
|
|
|
@ -1,17 +1,19 @@
|
||||||
<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 @@
|
||||||
|
|
||||||
<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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
.full {
|
.full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/ {
|
||||||
|
.ant-select-search__field {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,16 +1,11 @@
|
||||||
<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 @@
|
||||||
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']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<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 @@
|
||||||
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 @@
|
||||||
align: 'center',
|
align: 'center',
|
||||||
dataIndex: 'realname'
|
dataIndex: 'realname'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: '角色名称',
|
|
||||||
align: 'center',
|
|
||||||
dataIndex: 'roleName'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: '性别',
|
title: '性别',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
|
@ -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 @@
|
||||||
}
|
}
|
||||||
</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 @@
|
||||||
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 @@
|
||||||
</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 @@
|
||||||
|
|
||||||
&.ant-menu-item-selected {
|
&.ant-menu-item-selected {
|
||||||
& > a, & > a:hover {
|
& > a, & > a:hover {
|
||||||
color: #1890ff;
|
color: @primary-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 @@
|
||||||
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 @@
|
||||||
.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 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 @@
|
||||||
<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 @@
|
||||||
<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 @@
|
||||||
// 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 @@
|
||||||
//用户消息
|
//用户消息
|
||||||
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 @@
|
||||||
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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</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 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.light .logo {
|
&.light .logo {
|
||||||
background-color: #1890ff;
|
background-color: @primary-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,5 +1,26 @@
|
||||||
<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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
},
|
},
|
||||||
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 {
|
||||||
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'
|
||||||
|
|
||||||
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({
|
||||||
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 = {
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 查询某个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"
|
||||||
// 创建 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
|
||||||
}).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
|
||||||
}
|
}
|
|
@ -1,269 +1,41 @@
|
||||||
<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>
|
</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>
|
|
|
@ -0,0 +1,519 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-header-index-wide">
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||||
|
<chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
|
||||||
|
<a-tooltip title="指标说明" slot="action">
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
|
</a-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-area :datasource="chartData.sll" />
|
||||||
|
</div>
|
||||||
|
<template slot="footer">今日受理量:<span>{{ todaySll }}</span></template>
|
||||||
|
</chart-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||||
|
<chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
|
||||||
|
<a-tooltip title="指标说明" slot="action">
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
|
</a-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-area :datasource="chartData.bjl"/>
|
||||||
|
</div>
|
||||||
|
<template slot="footer">今日办结量:<span>{{ todayBjl }}</span></template>
|
||||||
|
</chart-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||||
|
<chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
|
||||||
|
<a-tooltip title="指标说明" slot="action">
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
|
</a-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-bar :datasource="chartData.isll" :height="50"/>
|
||||||
|
</div>
|
||||||
|
<template slot="footer">用户今日受理量:<span>{{ todayISll }}</span></template>
|
||||||
|
</chart-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||||
|
<chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
|
||||||
|
<a-tooltip title="指标说明" slot="action">
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
|
</a-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-bar :datasource="chartData.ibjl" :height="50"/>
|
||||||
|
</div>
|
||||||
|
<template slot="footer">用户今日办结量:<span>{{ todayIBjl }}</span></template>
|
||||||
|
</chart-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
|
||||||
|
<div class="salesCard">
|
||||||
|
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||||
|
<div class="extra-wrapper" slot="tabBarExtraContent">
|
||||||
|
<div class="extra-item">
|
||||||
|
<a>今日</a>
|
||||||
|
<a>本周</a>
|
||||||
|
<a>本月</a>
|
||||||
|
<a>本年</a>
|
||||||
|
</div>
|
||||||
|
<a-range-picker :style="{width: '256px'}" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-tab-pane loading="true" tab="受理监管" key="1">
|
||||||
|
<a-row>
|
||||||
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
<index-bar title="受理量统计" />
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
|
||||||
|
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||||
|
<div class="item-group">
|
||||||
|
<a-row>
|
||||||
|
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||||||
|
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<a-tab-pane tab="交互监管" key="2">
|
||||||
|
<a-row>
|
||||||
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
<bar-multid :sourceData="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
|
||||||
|
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||||
|
<div class="item-group">
|
||||||
|
<a-row>
|
||||||
|
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||||||
|
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<a-tab-pane tab="存储监管" key="4">
|
||||||
|
<a-row>
|
||||||
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
<a-row>
|
||||||
|
<template v-if="diskInfo && diskInfo.length>0">
|
||||||
|
<a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
|
||||||
|
<dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo>
|
||||||
|
</a-col>
|
||||||
|
</template>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
|
||||||
|
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||||
|
<div class="item-group">
|
||||||
|
<a-row>
|
||||||
|
<a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||||||
|
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
</a-tabs>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-row :gutter="12">
|
||||||
|
<a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">
|
||||||
|
|
||||||
|
<a-tabs v-model="indexBottomTab" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||||
|
<div class="extra-wrapper" slot="tabBarExtraContent">
|
||||||
|
<a-radio-group v-model="indexRegisterType" @change="changeRegisterType">
|
||||||
|
<a-radio-button value="转移登记">转移登记</a-radio-button>
|
||||||
|
<a-radio-button value="抵押登记">抵押登记</a-radio-button>
|
||||||
|
<a-radio-button value="">所有</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-tab-pane loading="true" tab="业务流程限时监管" key="1">
|
||||||
|
|
||||||
|
<a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1">
|
||||||
|
<template slot="flowRate" slot-scope="text, record, index">
|
||||||
|
<a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<a-tab-pane loading="true" tab="业务节点限时监管" key="2">
|
||||||
|
<a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination2" @change="tableChange2">
|
||||||
|
<template slot="flowRate" slot-scope="text, record, index">
|
||||||
|
<span style="color: red;">{{ record.flowRate }}小时</span>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
</a-tabs>
|
||||||
|
|
||||||
|
|
||||||
|
</a-card>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import ACol from "ant-design-vue/es/grid/Col"
|
||||||
|
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
|
||||||
|
import ChartCard from '@/components/ChartCard'
|
||||||
|
import MiniBar from '@/components/chart/MiniBar'
|
||||||
|
import MiniArea from '@/components/chart/MiniArea'
|
||||||
|
import IndexBar from '@/components/chart/IndexBar'
|
||||||
|
import BarMultid from '@/components/chart/BarMultid'
|
||||||
|
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||||
|
|
||||||
|
const jhjgData = [
|
||||||
|
{ type: '房管', '1月': 900, '2月': 1120, '3月': 1380, '4月': 1480, '5月': 1450, '6月': 1100, '7月':1300, '8月':900,'9月':1000 ,'10月':1200 ,'11月':600 ,'12月':900 },
|
||||||
|
{ type: '税务', '1月':1200, '2月': 1500, '3月': 1980, '4月': 2000, '5月': 1000, '6月': 600, '7月':900, '8月':1100,'9月':1300 ,'10月':2000 ,'11月':900 ,'12月':1100 },
|
||||||
|
{ type: '不动产', '1月':2000, '2月': 1430, '3月': 1300, '4月': 1400, '5月': 900, '6月': 500, '7月':600, '8月':1000,'9月':600 ,'10月':1000 ,'11月':1500 ,'12月':1200 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const jhjgFields=[
|
||||||
|
'1月','2月','3月','4月','5月','6月',
|
||||||
|
'7月','8月','9月','10月','11月','12月'
|
||||||
|
]
|
||||||
|
|
||||||
|
const xljgData = [
|
||||||
|
{type:'一月',"房管":1.12,"税务":1.55,"不动产":1.2},
|
||||||
|
{type:'二月',"房管":1.65,"税务":1.32,"不动产":1.42},
|
||||||
|
{type:'三月',"房管":1.85,"税务":1.1,"不动产":1.5},
|
||||||
|
|
||||||
|
{type:'四月',"房管":1.33,"税务":1.63,"不动产":1.4},
|
||||||
|
{type:'五月',"房管":1.63,"税务":1.8,"不动产":1.7},
|
||||||
|
{type:'六月',"房管":1.85,"税务":1.98,"不动产":1.8},
|
||||||
|
|
||||||
|
{type:'七月',"房管":1.98,"税务":1.5,"不动产":1.76},
|
||||||
|
{type:'八月',"房管":1.48,"税务":1.2,"不动产":1.3},
|
||||||
|
{type:'九月',"房管":1.41,"税务":1.9,"不动产":1.6},
|
||||||
|
|
||||||
|
{type:'十月',"房管":1.1,"税务":1.1,"不动产":1.4},
|
||||||
|
{type:'十一月',"房管":1.85,"税务":1.6,"不动产":1.5},
|
||||||
|
{type:'十二月',"房管":1.5,"税务":1.4,"不动产":1.3}
|
||||||
|
]
|
||||||
|
const xljgFields=["房管","税务","不动产"]
|
||||||
|
|
||||||
|
const dataCol1 = [{
|
||||||
|
title: '业务号',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'reBizCode'
|
||||||
|
},{
|
||||||
|
title: '业务类型',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'type'
|
||||||
|
},{
|
||||||
|
title: '受理人',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'acceptBy'
|
||||||
|
},{
|
||||||
|
title: '受理时间',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'acceptDate'
|
||||||
|
},{
|
||||||
|
title: '当前节点',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'curNode'
|
||||||
|
},{
|
||||||
|
title: '办理时长',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'flowRate',
|
||||||
|
scopedSlots: { customRender: 'flowRate' }
|
||||||
|
}];
|
||||||
|
const dataSource1=[
|
||||||
|
{reBizCode:"1",type:"转移登记",acceptBy:'张三',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:60},
|
||||||
|
{reBizCode:"2",type:"抵押登记",acceptBy:'李四',acceptDate:"2019-01-23",curNode:"领导审核",flowRate:30},
|
||||||
|
{reBizCode:"3",type:"转移登记",acceptBy:'王武',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:20},
|
||||||
|
{reBizCode:"4",type:"转移登记",acceptBy:'赵楼',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:80},
|
||||||
|
{reBizCode:"5",type:"转移登记",acceptBy:'钱就',acceptDate:"2019-12-12",curNode:"任务分派",flowRate:90},
|
||||||
|
{reBizCode:"6",type:"转移登记",acceptBy:'孙吧',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
|
||||||
|
{reBizCode:"7",type:"抵押登记",acceptBy:'周大',acceptDate:"2019-04-13",curNode:"任务分派",flowRate:100},
|
||||||
|
{reBizCode:"8",type:"抵押登记",acceptBy:'吴二',acceptDate:"2019-05-09",curNode:"任务上报",flowRate:50},
|
||||||
|
{reBizCode:"9",type:"抵押登记",acceptBy:'郑爽',acceptDate:"2019-07-12",curNode:"任务处理",flowRate:63},
|
||||||
|
{reBizCode:"20",type:"抵押登记",acceptBy:'林有',acceptDate:"2019-12-12",curNode:"任务打回",flowRate:59},
|
||||||
|
{reBizCode:"11",type:"转移登记",acceptBy:'码云',acceptDate:"2019-09-10",curNode:"任务签收",flowRate:87},
|
||||||
|
]
|
||||||
|
|
||||||
|
const dataCol2 = [{
|
||||||
|
title: '业务号',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'reBizCode'
|
||||||
|
},{
|
||||||
|
title: '受理人',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'acceptBy'
|
||||||
|
},{
|
||||||
|
title: '发起时间',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'acceptDate'
|
||||||
|
},{
|
||||||
|
title: '当前节点',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'curNode'
|
||||||
|
},{
|
||||||
|
title: '超时时间',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'flowRate',
|
||||||
|
scopedSlots: { customRender: 'flowRate' }
|
||||||
|
}];
|
||||||
|
const dataSource2=[
|
||||||
|
{reBizCode:"A001",type:"转移登记",acceptBy:'张四',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:12},
|
||||||
|
{reBizCode:"A002",type:"抵押登记",acceptBy:'李吧',acceptDate:"2019-01-23",curNode:"任务签收",flowRate:3},
|
||||||
|
{reBizCode:"A003",type:"转移登记",acceptBy:'王三',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:24},
|
||||||
|
{reBizCode:"A004",type:"转移登记",acceptBy:'赵二',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:10},
|
||||||
|
{reBizCode:"A005",type:"转移登记",acceptBy:'钱大',acceptDate:"2019-12-12",curNode:"任务签收",flowRate:8},
|
||||||
|
{reBizCode:"A006",type:"转移登记",acceptBy:'孙就',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
|
||||||
|
{reBizCode:"A007",type:"抵押登记",acceptBy:'周晕',acceptDate:"2019-04-13",curNode:"部门审核",flowRate:24},
|
||||||
|
{reBizCode:"A008",type:"抵押登记",acceptBy:'吴有',acceptDate:"2019-05-09",curNode:"部门审核",flowRate:30},
|
||||||
|
{reBizCode:"A009",type:"抵押登记",acceptBy:'郑武',acceptDate:"2019-07-12",curNode:"任务分派",flowRate:1},
|
||||||
|
{reBizCode:"A0010",type:"抵押登记",acceptBy:'林爽',acceptDate:"2019-12-12",curNode:"部门审核",flowRate:16},
|
||||||
|
{reBizCode:"A0011",type:"转移登记",acceptBy:'码楼',acceptDate:"2019-09-10",curNode:"部门审核",flowRate:7},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "IndexBdc",
|
||||||
|
components: {
|
||||||
|
ATooltip,
|
||||||
|
ACol,
|
||||||
|
ChartCard,
|
||||||
|
MiniArea,
|
||||||
|
MiniBar,
|
||||||
|
DashChartDemo,
|
||||||
|
BarMultid,
|
||||||
|
IndexBar
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
cardCount:{
|
||||||
|
sll:100,
|
||||||
|
bjl:87,
|
||||||
|
isll:15,
|
||||||
|
ibjl:9
|
||||||
|
},
|
||||||
|
|
||||||
|
todaySll:60,
|
||||||
|
todayBjl:54,
|
||||||
|
todayISll:13,
|
||||||
|
todayIBjl:7,
|
||||||
|
|
||||||
|
chartData:{
|
||||||
|
sll:[],
|
||||||
|
bjl:[],
|
||||||
|
isll:[],
|
||||||
|
ibjl:[]
|
||||||
|
},
|
||||||
|
jhjgFields,
|
||||||
|
jhjgData,
|
||||||
|
|
||||||
|
xljgData,
|
||||||
|
xljgFields,
|
||||||
|
|
||||||
|
diskInfo:[
|
||||||
|
{name:"C盘",restPPT:7},
|
||||||
|
{name:"D盘",restPPT:5}
|
||||||
|
],
|
||||||
|
|
||||||
|
registerTypeList:[{
|
||||||
|
text:"业务受理"
|
||||||
|
},{
|
||||||
|
text:"业务管理"
|
||||||
|
},{
|
||||||
|
text:"文件管理"
|
||||||
|
},{
|
||||||
|
text:"信息查询"
|
||||||
|
}],
|
||||||
|
|
||||||
|
dataSource1:[],
|
||||||
|
dataSource2:[],
|
||||||
|
columns:dataCol1,
|
||||||
|
columns2:dataCol2,
|
||||||
|
ipagination1:{
|
||||||
|
current: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
|
showTotal: (total, range) => {
|
||||||
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||||
|
},
|
||||||
|
showQuickJumper: true,
|
||||||
|
showSizeChanger: true,
|
||||||
|
total: 0,
|
||||||
|
|
||||||
|
},
|
||||||
|
ipagination2:{
|
||||||
|
current: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
|
showTotal: (total, range) => {
|
||||||
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||||
|
},
|
||||||
|
showQuickJumper: true,
|
||||||
|
showSizeChanger: true,
|
||||||
|
total: 0,
|
||||||
|
},
|
||||||
|
indexRegisterType:"转移登记",
|
||||||
|
indexBottomTab:"1"
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
goPage(){
|
||||||
|
this.$message.success("根据业务自行处理跳转页面!")
|
||||||
|
},
|
||||||
|
changeRegisterType(e){
|
||||||
|
this.indexRegisterType = e.target.value
|
||||||
|
if(this.indexBottomTab=="1"){
|
||||||
|
this.loadDataSource1()
|
||||||
|
}else{
|
||||||
|
this.loadDataSource2()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tableChange1(pagination){
|
||||||
|
this.ipagination1.current = pagination.current
|
||||||
|
this.ipagination1.pageSize = pagination.pageSize
|
||||||
|
this.queryTimeoutInfo()
|
||||||
|
},
|
||||||
|
tableChange2(pagination){
|
||||||
|
this.ipagination2.current = pagination.current
|
||||||
|
this.ipagination2.pageSize = pagination.pageSize
|
||||||
|
this.queryNodeTimeoutInfo()
|
||||||
|
},
|
||||||
|
getFlowRateNumber(value){
|
||||||
|
return Number(value)
|
||||||
|
},
|
||||||
|
getPercentFormat(value){
|
||||||
|
if(value==100){
|
||||||
|
return "超时"
|
||||||
|
}else{
|
||||||
|
return value+"%"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getPercentColor(value){
|
||||||
|
let p = Number(value)
|
||||||
|
if(p>=90 && p<100){
|
||||||
|
return 'rgb(244, 240, 89)'
|
||||||
|
}else if(p>=100){
|
||||||
|
return 'red'
|
||||||
|
}else{
|
||||||
|
return 'rgb(16, 142, 233)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
loadDataSource1(){
|
||||||
|
this.dataSource1 = dataSource1.filter(item=>{
|
||||||
|
if(!this.indexRegisterType){
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return item.type==this.indexRegisterType
|
||||||
|
})
|
||||||
|
},
|
||||||
|
loadDataSource2(){
|
||||||
|
this.dataSource2 = dataSource2.filter(item=>{
|
||||||
|
if(!this.indexRegisterType){
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return item.type==this.indexRegisterType
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loadDataSource1()
|
||||||
|
this.loadDataSource2()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = !this.loading
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.extra-wrapper {
|
||||||
|
line-height: 55px;
|
||||||
|
padding-right: 24px;
|
||||||
|
|
||||||
|
.extra-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 24px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-group {
|
||||||
|
padding: 20px 0 8px 24px;
|
||||||
|
font-size: 0;
|
||||||
|
a {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-group {
|
||||||
|
.more-btn {
|
||||||
|
margin-bottom: 13px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-content-item {
|
||||||
|
color: rgba(0, 0, 0, .45);
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1600px) {
|
||||||
|
.list-content-item{
|
||||||
|
margin-left:60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1300px) {
|
||||||
|
.list-content-item{
|
||||||
|
margin-left:20px;
|
||||||
|
}
|
||||||
|
.width-hidden4{
|
||||||
|
display:none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-content-item{
|
||||||
|
span{line-height: 20px;}
|
||||||
|
}
|
||||||
|
.list-content-item{
|
||||||
|
p{margin-top: 4px;margin-bottom:0;line-height:22px;}
|
||||||
|
}
|
||||||
|
.anty-list-cust {
|
||||||
|
.ant-list-item-meta{flex: 0.3 !important;}
|
||||||
|
}
|
||||||
|
.anty-list-cust {
|
||||||
|
.ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,269 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-header-index-wide">
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||||
|
<chart-card :loading="loading" title="总销售额" total="¥126,560">
|
||||||
|
<a-tooltip title="指标说明" slot="action">
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
|
</a-tooltip>
|
||||||
|
<div>
|
||||||
|
<trend flag="up" style="margin-right: 16px;">
|
||||||
|
<span slot="term">周同比</span>
|
||||||
|
12%
|
||||||
|
</trend>
|
||||||
|
<trend flag="down">
|
||||||
|
<span slot="term">日同比</span>
|
||||||
|
11%
|
||||||
|
</trend>
|
||||||
|
</div>
|
||||||
|
<template slot="footer">日均销售额<span>¥ 234.56</span></template>
|
||||||
|
</chart-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||||
|
<chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
|
||||||
|
<a-tooltip title="指标说明" slot="action">
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
|
</a-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-area />
|
||||||
|
</div>
|
||||||
|
<template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
|
||||||
|
</chart-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||||
|
<chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
|
||||||
|
<a-tooltip title="指标说明" slot="action">
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
|
</a-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-bar :height="40" />
|
||||||
|
</div>
|
||||||
|
<template slot="footer">转化率 <span>60%</span></template>
|
||||||
|
</chart-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||||
|
<chart-card :loading="loading" title="运营活动效果" total="78%">
|
||||||
|
<a-tooltip title="指标说明" slot="action">
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
|
</a-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
|
||||||
|
</div>
|
||||||
|
<template slot="footer">
|
||||||
|
<trend flag="down" style="margin-right: 16px;">
|
||||||
|
<span slot="term">同周比</span>
|
||||||
|
12%
|
||||||
|
</trend>
|
||||||
|
<trend flag="up">
|
||||||
|
<span slot="term">日环比</span>
|
||||||
|
80%
|
||||||
|
</trend>
|
||||||
|
</template>
|
||||||
|
</chart-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
|
||||||
|
<div class="salesCard">
|
||||||
|
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||||
|
<div class="extra-wrapper" slot="tabBarExtraContent">
|
||||||
|
<div class="extra-item">
|
||||||
|
<a>今日</a>
|
||||||
|
<a>本周</a>
|
||||||
|
<a>本月</a>
|
||||||
|
<a>本年</a>
|
||||||
|
</div>
|
||||||
|
<a-range-picker :style="{width: '256px'}" />
|
||||||
|
</div>
|
||||||
|
<a-tab-pane loading="true" tab="销售额" key="1">
|
||||||
|
<a-row>
|
||||||
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
<bar title="销售额排行" :dataSource="barData"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
<rank-list title="门店销售排行榜" :list="rankList"/>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane tab="访问量" key="2">
|
||||||
|
<a-row>
|
||||||
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
<bar title="销售额趋势" :dataSource="barData"/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
|
<rank-list title="门店销售排行榜" :list="rankList"/>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="6">
|
||||||
|
<head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="2">
|
||||||
|
<a-spin class='circle-cust'>
|
||||||
|
<a-icon slot="indicator" type="environment" style="font-size: 24px" />
|
||||||
|
</a-spin>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="2">
|
||||||
|
<a-spin class='circle-cust'>
|
||||||
|
<a-icon slot="indicator" type="team" style="font-size: 24px" />
|
||||||
|
</a-spin>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="2">
|
||||||
|
<a-spin class='circle-cust'>
|
||||||
|
<a-icon slot="indicator" type="rise" style="font-size: 24px" />
|
||||||
|
</a-spin>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ChartCard from '@/components/ChartCard'
|
||||||
|
import ACol from "ant-design-vue/es/grid/Col"
|
||||||
|
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
|
||||||
|
import MiniArea from '@/components/chart/MiniArea'
|
||||||
|
import MiniBar from '@/components/chart/MiniBar'
|
||||||
|
import MiniProgress from '@/components/chart/MiniProgress'
|
||||||
|
import RankList from '@/components/chart/RankList'
|
||||||
|
import Bar from '@/components/chart/Bar'
|
||||||
|
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||||||
|
import HeadInfo from '@/components/tools/HeadInfo.vue'
|
||||||
|
|
||||||
|
import Trend from '@/components/Trend'
|
||||||
|
import { getLoginfo,getVisitInfo } from '@/api/api'
|
||||||
|
|
||||||
|
const rankList = []
|
||||||
|
for (let i = 0; i < 7; i++) {
|
||||||
|
rankList.push({
|
||||||
|
name: '白鹭岛 ' + (i+1) + ' 号店',
|
||||||
|
total: 1234.56 - i * 100
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const barData = []
|
||||||
|
for (let i = 0; i < 12; i += 1) {
|
||||||
|
barData.push({
|
||||||
|
x: `${i + 1}月`,
|
||||||
|
y: Math.floor(Math.random() * 1000) + 200
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
name: "IndexChart",
|
||||||
|
components: {
|
||||||
|
ATooltip,
|
||||||
|
ACol,
|
||||||
|
ChartCard,
|
||||||
|
MiniArea,
|
||||||
|
MiniBar,
|
||||||
|
MiniProgress,
|
||||||
|
RankList,
|
||||||
|
Bar,
|
||||||
|
Trend,
|
||||||
|
LineChartMultid,
|
||||||
|
HeadInfo
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
center: null,
|
||||||
|
rankList,
|
||||||
|
barData,
|
||||||
|
loginfo:{},
|
||||||
|
visitFields:['ip','visit'],
|
||||||
|
visitInfo:[],
|
||||||
|
indicator: <a-icon type="loading" style="font-size: 24px" spin />
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = !this.loading
|
||||||
|
}, 1000)
|
||||||
|
this.initLogInfo();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initLogInfo () {
|
||||||
|
getLoginfo(null).then((res)=>{
|
||||||
|
if(res.success){
|
||||||
|
Object.keys(res.result).forEach(key=>{
|
||||||
|
res.result[key] =res.result[key]+""
|
||||||
|
})
|
||||||
|
this.loginfo = res.result;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
getVisitInfo().then(res=>{
|
||||||
|
if(res.success){
|
||||||
|
console.log("aaaaaa",res.result)
|
||||||
|
this.visitInfo = res.result;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.circle-cust{
|
||||||
|
position: relative;
|
||||||
|
top: 28px;
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
.extra-wrapper {
|
||||||
|
line-height: 55px;
|
||||||
|
padding-right: 24px;
|
||||||
|
|
||||||
|
.extra-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 24px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 首页访问量统计 */
|
||||||
|
.head-info {
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0 32px 0 0;
|
||||||
|
min-width: 125px;
|
||||||
|
|
||||||
|
&.center {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: rgba(0, 0, 0, .45);
|
||||||
|
display: inline-block;
|
||||||
|
font-size: .95rem;
|
||||||
|
line-height: 42px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
line-height: 42px;
|
||||||
|
margin: 0;
|
||||||
|
a {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,372 @@
|
||||||
|
<template>
|
||||||
|
<div class="index-container-ty">
|
||||||
|
<a-spin :spinning="loading">
|
||||||
|
<a-row type="flex" justify="start" :gutter="3">
|
||||||
|
<a-col :sm="24" :lg="12">
|
||||||
|
<a-card>
|
||||||
|
<div slot="title" class="index-md-title">
|
||||||
|
<img src="../../assets/daiban.png"/>
|
||||||
|
我的待办【{{ dataSource1.length }}】
|
||||||
|
</div>
|
||||||
|
<div slot="extra">
|
||||||
|
<a v-if="dataSource1 && dataSource1.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
|
||||||
|
</div>
|
||||||
|
<a-table
|
||||||
|
:class="'my-index-table tytable1'"
|
||||||
|
ref="table1"
|
||||||
|
size="small"
|
||||||
|
rowKey="id"
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="dataSource1"
|
||||||
|
:pagination="false">
|
||||||
|
<template slot="ellipsisText" slot-scope="text">
|
||||||
|
<j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="dayWarnning" slot-scope="text,record">
|
||||||
|
<a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<span slot="action" slot-scope="text, record">
|
||||||
|
<a @click="handleData">办理</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :sm="24" :lg="12">
|
||||||
|
<a-card>
|
||||||
|
<div slot="title" class="index-md-title">
|
||||||
|
<img src="../../assets/zaiban.png"/>
|
||||||
|
我的在办【{{ dataSource2.length }}】
|
||||||
|
</div>
|
||||||
|
<div slot="extra">
|
||||||
|
<a v-if="dataSource2 && dataSource2.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
|
||||||
|
</div>
|
||||||
|
<a-table
|
||||||
|
:class="'my-index-table tytable2'"
|
||||||
|
ref="table2"
|
||||||
|
size="small"
|
||||||
|
rowKey="id"
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="dataSource2"
|
||||||
|
:pagination="false">
|
||||||
|
<template slot="ellipsisText" slot-scope="text">
|
||||||
|
<j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="dayWarnning" slot-scope="text,record">
|
||||||
|
<a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<span slot="action" slot-scope="text, record">
|
||||||
|
<a @click="handleData">办理</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="24">
|
||||||
|
<div style="height: 5px;"></div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :sm="24" :lg="12">
|
||||||
|
<a-card>
|
||||||
|
<div slot="title" class="index-md-title">
|
||||||
|
<img src="../../assets/guaz.png"/>
|
||||||
|
我的挂账【{{ dataSource4.length }}】
|
||||||
|
</div>
|
||||||
|
<a-table
|
||||||
|
:class="'my-index-table tytable4'"
|
||||||
|
ref="table4"
|
||||||
|
size="small"
|
||||||
|
rowKey="id"
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="dataSource4"
|
||||||
|
:pagination="false">
|
||||||
|
<template slot="ellipsisText" slot-scope="text">
|
||||||
|
<j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="dayWarnning" slot-scope="text,record">
|
||||||
|
<a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<span slot="action" slot-scope="text, record">
|
||||||
|
<a @click="handleData">办理</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :sm="24" :lg="12">
|
||||||
|
<a-card>
|
||||||
|
<div slot="title" class="index-md-title">
|
||||||
|
<img src="../../assets/duban.png"/>
|
||||||
|
我的督办【{{ dataSource3.length }}】
|
||||||
|
</div>
|
||||||
|
<a-table
|
||||||
|
:class="'my-index-table tytable3'"
|
||||||
|
ref="table3"
|
||||||
|
size="small"
|
||||||
|
rowKey="id"
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="dataSource3"
|
||||||
|
:pagination="false">
|
||||||
|
<template slot="ellipsisText" slot-scope="text">
|
||||||
|
<j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="dayWarnning" slot-scope="text,record">
|
||||||
|
<a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<span slot="action" slot-scope="text, record">
|
||||||
|
<a @click="handleData">办理</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
</a-row>
|
||||||
|
</a-spin>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import noDataPng from '@/assets/nodata.png'
|
||||||
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
||||||
|
|
||||||
|
const tempSs1=[{
|
||||||
|
id:"001",
|
||||||
|
orderNo:"电[1]1267102",
|
||||||
|
orderTitle:"药品出问题了",
|
||||||
|
restDay:1
|
||||||
|
},{
|
||||||
|
id:"002",
|
||||||
|
orderNo:"电[4]5967102",
|
||||||
|
orderTitle:"吃了xxx医院的药,病情越来越严重",
|
||||||
|
restDay:0
|
||||||
|
},{
|
||||||
|
id:"003",
|
||||||
|
orderNo:"电[3]5988987",
|
||||||
|
orderTitle:"今天去超市买鸡蛋,鸡蛋都是坏的",
|
||||||
|
restDay:7
|
||||||
|
},{
|
||||||
|
id:"004",
|
||||||
|
orderNo:"电[2]5213491",
|
||||||
|
orderTitle:"xx宝实体店高价售卖xx",
|
||||||
|
restDay:5
|
||||||
|
},{
|
||||||
|
id:"005",
|
||||||
|
orderNo:"电[1]1603491",
|
||||||
|
orderTitle:"以红利相诱,答应退保后扣一年费用",
|
||||||
|
restDay:0
|
||||||
|
}]
|
||||||
|
|
||||||
|
const tempSs2=[{
|
||||||
|
id:"001",
|
||||||
|
orderTitle:"我要投诉这个大超市",
|
||||||
|
orderNo:"电[1]10299456",
|
||||||
|
restDay:6
|
||||||
|
},{
|
||||||
|
id:"002",
|
||||||
|
orderTitle:"xxx医院乱开药方,售卖假药",
|
||||||
|
orderNo:"电[2]20235691",
|
||||||
|
restDay:0
|
||||||
|
},{
|
||||||
|
id:"003",
|
||||||
|
orderTitle:"我想问问这家店是干啥的",
|
||||||
|
orderNo:"电[3]495867322",
|
||||||
|
restDay:7
|
||||||
|
},{
|
||||||
|
id:"004",
|
||||||
|
orderTitle:"我要举报朝阳区奥森公园酒店",
|
||||||
|
orderNo:"电[2]1193849",
|
||||||
|
restDay:3
|
||||||
|
},{
|
||||||
|
id:"005",
|
||||||
|
orderTitle:"我今天吃饭吃到一个石头子",
|
||||||
|
orderNo:"电[4]56782344",
|
||||||
|
restDay:9
|
||||||
|
}]
|
||||||
|
|
||||||
|
//4-7天
|
||||||
|
const tip_green = "rgba(0, 255, 0, 1)"
|
||||||
|
//1-3天
|
||||||
|
const tip_yellow = "rgba(255, 255, 0, 1)"
|
||||||
|
//超期
|
||||||
|
const tip_red = "rgba(255, 0, 0, 1)"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "IndexTask",
|
||||||
|
components:{ JEllipsis },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
textMaxLength:8,
|
||||||
|
dataSource1:[],
|
||||||
|
dataSource2:[],
|
||||||
|
dataSource3:[],
|
||||||
|
dataSource4:[],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '',
|
||||||
|
dataIndex: '',
|
||||||
|
key:'rowIndex',
|
||||||
|
width:50,
|
||||||
|
fixed:'left',
|
||||||
|
align:"center",
|
||||||
|
scopedSlots: {customRender: "dayWarnning"}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'剩余天数',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'restDay',
|
||||||
|
width:80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'工单标题',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'orderTitle',
|
||||||
|
scopedSlots: {customRender: "ellipsisText"}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'工单编号',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'orderNo',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
align:"center",
|
||||||
|
scopedSlots: { customRender: 'action' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.mock();
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTipColor(rd){
|
||||||
|
let num = rd.restDay
|
||||||
|
if(num<=0){
|
||||||
|
return tip_red
|
||||||
|
}else if(num>=1 && num<4){
|
||||||
|
return tip_yellow
|
||||||
|
}else if(num>=4){
|
||||||
|
return tip_green
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goPage(){
|
||||||
|
this.$message.success("请根据具体业务跳转页面")
|
||||||
|
//this.$router.push({ path: '/comp/mytask' })
|
||||||
|
},
|
||||||
|
mock(){
|
||||||
|
this.dataSource1=tempSs1
|
||||||
|
this.dataSource2=tempSs2
|
||||||
|
this.dataSource3=tempSs1
|
||||||
|
this.dataSource4=[]
|
||||||
|
this.ifNullDataSource(this.dataSource4,'.tytable4')
|
||||||
|
},
|
||||||
|
|
||||||
|
ifNullDataSource(ds,tb){
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
if(!ds || ds.length==0){
|
||||||
|
var tmp = document.createElement('img');
|
||||||
|
tmp.src=noDataPng
|
||||||
|
tmp.width=300
|
||||||
|
let tbclass=`${tb} .ant-table-placeholder`
|
||||||
|
document.querySelector(tbclass).innerHTML=""
|
||||||
|
document.querySelector(tbclass).appendChild(tmp)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleData(){
|
||||||
|
this.$message.success("办理完成")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.my-index-table{height:270px}
|
||||||
|
.my-index-table table{font-size: 14px !important;}
|
||||||
|
|
||||||
|
.index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;}
|
||||||
|
.index-container-ty .ant-card-extra{padding:0}
|
||||||
|
.index-container-ty .ant-card-extra a{color:#fff}
|
||||||
|
.index-container-ty .ant-card-extra a:hover{color:#152ede}
|
||||||
|
.index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{
|
||||||
|
line-height:24px;
|
||||||
|
min-height:24px;
|
||||||
|
/*background: #90aeff;*/
|
||||||
|
background: #7196fb;
|
||||||
|
}
|
||||||
|
.index-container-ty .ant-card-body{padding: 10px 12px 0px 12px}
|
||||||
|
|
||||||
|
/* .index-container-ty .ant-card-actions{background: #fff}
|
||||||
|
.index-container-ty .ant-card-actions li {margin:2px 0;}
|
||||||
|
.index-container-ty .ant-card-actions > li > span{width: 100%}*/
|
||||||
|
|
||||||
|
|
||||||
|
.index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}
|
||||||
|
|
||||||
|
.index-md-title{
|
||||||
|
postion:relative;
|
||||||
|
padding-left:24px;
|
||||||
|
width: 100%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 21px;
|
||||||
|
font-family: cursive;
|
||||||
|
}
|
||||||
|
.index-md-title img{
|
||||||
|
position: absolute;
|
||||||
|
height:32px;
|
||||||
|
top: 2px;
|
||||||
|
left:14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-container-ty .ant-card-body{
|
||||||
|
/*border-left:1px solid #90aeff;
|
||||||
|
/*border-right:1px solid #90aeff;
|
||||||
|
border-bottom:1px solid #90aeff;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.index-container-ty .ant-table-thead > tr > th,
|
||||||
|
.index-container-ty .ant-table-tbody > tr > td{
|
||||||
|
border-bottom: 1px solid #90aeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
|
||||||
|
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{
|
||||||
|
border-bottom: 1px solid #90aeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{
|
||||||
|
border-bottom: 1px solid #90aeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-container-ty .ant-table-small{
|
||||||
|
border: 1px solid #90aeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-container-ty .ant-table-placeholder {
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -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 @@
|
||||||
</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 @@
|
||||||
<!-- 一对多表单区域 -->
|
<!-- 一对多表单区域 -->
|
||||||
<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 @@
|
||||||
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 @@
|
||||||
}
|
}
|
||||||
</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 @@
|
||||||
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 @@
|
||||||
// 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 @@
|
||||||
if(text=='3') {
|
if(text=='3') {
|
||||||
return "微信";
|
return "微信";
|
||||||
}
|
}
|
||||||
|
if(text=='4') {
|
||||||
|
return "系统";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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 @@
|
||||||
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 @@
|
||||||
},
|
},
|
||||||
handleChangeTemplateType(value){
|
handleChangeTemplateType(value){
|
||||||
//如果是邮件类型那么则改变模板内容是富文本编辑器
|
//如果是邮件类型那么则改变模板内容是富文本编辑器
|
||||||
this.useEditor = value==2
|
this.useEditor = (value==2 || value==4)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<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 @@
|
||||||
</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 @@
|
||||||
</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 @@
|
||||||
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 @@
|
||||||
cgButtonLinkList:[],
|
cgButtonLinkList:[],
|
||||||
cgButtonList:[],
|
cgButtonList:[],
|
||||||
queryInfo:[],
|
queryInfo:[],
|
||||||
queryParam:{
|
// 查询参数,多个页面的查询参数用 code 作为键来区分
|
||||||
|
queryParamsMap: {},
|
||||||
},
|
|
||||||
toggleSearchStatus:false,
|
toggleSearchStatus:false,
|
||||||
table: {
|
table: {
|
||||||
loading: true,
|
loading: true,
|
||||||
|
@ -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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
}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 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
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 @@
|
||||||
}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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
|
||||||
|
// 高级查询
|
||||||
|
handleSuperQuery(params, matchType) {
|
||||||
|
if (!params || params.length === 0) {
|
||||||
|
this.superQuery.params = ''
|
||||||
|
} else {
|
||||||
|
this.superQuery.params = JSON.stringify(params)
|
||||||
|
}
|
||||||
|
this.superQuery.matchType = matchType
|
||||||
|
this.loadData()
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -132,7 +132,6 @@
|
||||||
|
|
||||||
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
|
<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 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'OnlCgformTreeList',
|
name: 'OnlCgformTreeList',
|
||||||
components: {
|
components: {
|
||||||
JImportModal,
|
JImportModal
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -692,13 +691,6 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handlePreviewPic: function(record){
|
|
||||||
var flowCode = this.flowCodePre+this.currentTableName;
|
|
||||||
var dataId = record.id;
|
|
||||||
this.$refs.processInstPicModal.preview(flowCode,dataId);
|
|
||||||
this.$refs.processInstPicModal.title="流程图";
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,256 @@
|
||||||
|
<template>
|
||||||
|
<a-card :bordered="false">
|
||||||
|
|
||||||
|
<!-- 查询区域 -->
|
||||||
|
<div class="table-page-search-wrapper">
|
||||||
|
<a-form layout="inline">
|
||||||
|
<a-row :gutter="24">
|
||||||
|
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-form-item label="报表编码">
|
||||||
|
<a-input placeholder="请输入报表编码" v-model="queryParam.code"></a-input>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-form-item label="报表名字">
|
||||||
|
<a-input placeholder="请输入报表名字" v-model="queryParam.name"></a-input>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="8">
|
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||||
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||||
|
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||||
|
</span>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮区域 -->
|
||||||
|
<div class="table-operator">
|
||||||
|
<a-button @click="handleAdd" type="primary" icon="plus">录入</a-button>
|
||||||
|
|
||||||
|
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item key="1" @click="batchDel">
|
||||||
|
<a-icon type="delete"/>
|
||||||
|
删除
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
<a-button style="margin-left: 8px"> 批量操作
|
||||||
|
<a-icon type="down"/>
|
||||||
|
</a-button>
|
||||||
|
</a-dropdown>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- table区域-begin -->
|
||||||
|
<div>
|
||||||
|
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||||
|
<i class="anticon anticon-info-circle ant-alert-icon"></i>
|
||||||
|
已选择
|
||||||
|
<a style="font-weight: 600">
|
||||||
|
{{ selectedRowKeys.length }}
|
||||||
|
</a>
|
||||||
|
项
|
||||||
|
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-table
|
||||||
|
ref="table"
|
||||||
|
size="middle"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="dataSource"
|
||||||
|
:pagination="ipagination"
|
||||||
|
:loading="loading"
|
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||||
|
@change="handleTableChange">
|
||||||
|
|
||||||
|
<span slot="action" slot-scope="text, record">
|
||||||
|
<a @click="handleEdit(record)">编辑</a>
|
||||||
|
|
||||||
|
<a-divider type="vertical"/>
|
||||||
|
<a-dropdown>
|
||||||
|
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item @click="popReportURL(record.id)">
|
||||||
|
配置地址
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item>
|
||||||
|
<a @click="goPageOnline(record.id)">功能测试</a>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item>
|
||||||
|
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||||
|
<a>删除</a>
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
<!-- table区域-end -->
|
||||||
|
|
||||||
|
<!-- 表单区域 -->
|
||||||
|
<onlCgreportHead-modal ref="modalForm" @ok="modalFormOk"></onlCgreportHead-modal>
|
||||||
|
|
||||||
|
<!-- 提示online报表链接 -->
|
||||||
|
<a-modal
|
||||||
|
title="报表访问链接"
|
||||||
|
:visible="visible"
|
||||||
|
@cancel="handleCancel">
|
||||||
|
<template slot="footer">
|
||||||
|
<a-button @click="handleCancel">关闭</a-button>
|
||||||
|
<a-button type="primary" class="copy-this-text" :data-clipboard-text="reportUrlText" @click="onCopyUrl">复制</a-button>
|
||||||
|
</template>
|
||||||
|
<p>{{ reportUrlText }}</p>
|
||||||
|
</a-modal>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||||
|
import Clipboard from 'clipboard'
|
||||||
|
import { getAction } from '@/api/manage'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'OnlCgreportHeadList',
|
||||||
|
mixins: [JeecgListMixin],
|
||||||
|
components: {
|
||||||
|
Clipboard
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
description: '在线报表配置管理页面',
|
||||||
|
visible:false,
|
||||||
|
reportUrlText:'',
|
||||||
|
// 表头
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '报表名称',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '编码',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'code'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '查询SQL',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'cgrSql'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据源',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'dbSource'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'createTime'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '描述',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'content'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
align: 'center',
|
||||||
|
scopedSlots: { customRender: 'action' }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
url: {
|
||||||
|
list: '/online/cgreport/head/list',
|
||||||
|
delete: '/online/cgreport/head/delete',
|
||||||
|
deleteBatch: '/online/cgreport/head/deleteBatch',
|
||||||
|
getParamsInfo:'/online/cgreport/api/getParamsInfo/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initReportUrlText(id){
|
||||||
|
getAction(this.url.getParamsInfo+id).then((res) => {
|
||||||
|
let textUrl = ""
|
||||||
|
if (res.success) {
|
||||||
|
if(res.result && res.result.length>0){
|
||||||
|
for(let i of res.result){
|
||||||
|
textUrl+=i.paramName+"=${"+i.paramName+"}&"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
if(textUrl.length>0){
|
||||||
|
textUrl = textUrl.substring(0,textUrl.length-1)
|
||||||
|
this.reportUrlText = `/online/cgreport/${id}?${textUrl}`
|
||||||
|
}else{
|
||||||
|
this.reportUrlText = `/online/cgreport/${id}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goPageOnline(id){
|
||||||
|
this.$router.push({path: '/online/cgreport/'+id})
|
||||||
|
},
|
||||||
|
popReportURL(id){
|
||||||
|
this.visible = true;
|
||||||
|
this.initReportUrlText(id)
|
||||||
|
},
|
||||||
|
handleCancel(){
|
||||||
|
this.visible = false
|
||||||
|
this.reportUrlText = '';
|
||||||
|
},
|
||||||
|
onCopyUrl(){
|
||||||
|
var clipboard = new Clipboard('.copy-this-text')
|
||||||
|
clipboard.on('success', () => {
|
||||||
|
clipboard.destroy()
|
||||||
|
this.$message.success('复制成功')
|
||||||
|
this.handleCancel()
|
||||||
|
})
|
||||||
|
clipboard.on('error', () => {
|
||||||
|
this.$message.error('该浏览器不支持自动复制')
|
||||||
|
clipboard.destroy()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.ant-card-body .table-operator {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody .ant-table-row td {
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anty-row-operator button {
|
||||||
|
margin: 0 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn-danger {
|
||||||
|
background-color: #ffffff
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal-cust-warp {
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal-cust-warp .ant-modal-body {
|
||||||
|
height: calc(100% - 110px) !important;
|
||||||
|
overflow-y: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal-cust-warp .ant-modal-content {
|
||||||
|
height: 90% !important;
|
||||||
|
overflow-y: hidden
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,293 @@
|
||||||
|
<template>
|
||||||
|
<a-card :bordered="false" style="height: 100%">
|
||||||
|
|
||||||
|
<div class="table-page-search-wrapper">
|
||||||
|
<a-form layout="inline">
|
||||||
|
<a-row :gutter="24" v-if="queryInfo && queryInfo.length>0">
|
||||||
|
<template v-for="(item,index) in queryInfo">
|
||||||
|
<template v-if=" item.hidden==='1' ">
|
||||||
|
<a-col v-if="item.view.indexOf('Date')>=0" :md="12" :sm="16" :key=" 'query'+index " v-show="toggleSearchStatus">
|
||||||
|
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col v-else :md="6" :sm="8" :key=" 'query'+index " v-show="toggleSearchStatus">
|
||||||
|
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
|
||||||
|
</a-col>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<a-col v-if="item.view.indexOf('Date')>=0" :md="12" :sm="16" :key=" 'query'+index ">
|
||||||
|
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col v-else :md="6" :sm="8" :key=" 'query'+index ">
|
||||||
|
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
|
||||||
|
</a-col>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<a-col :md="6" :sm="8">
|
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||||
|
<a-button type="primary" @click="searchByQuery" icon="search">查询</a-button>
|
||||||
|
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px">
|
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }}
|
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="table-operator" style="margin-bottom: 10px">
|
||||||
|
<a-button type="primary" icon="plus" @click="exportExcel">导出</a-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<a-table
|
||||||
|
ref="table"
|
||||||
|
size="middle"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
:columns="table.columns"
|
||||||
|
:dataSource="table.dataSource"
|
||||||
|
:pagination="table.pagination"
|
||||||
|
:loading="table.loading"
|
||||||
|
:scroll="table.scroll"
|
||||||
|
:rowSelection="{fixed:true, selectedRowKeys: table.selectedRowKeys, onChange: handleChangeInTableSelect}"
|
||||||
|
@change="handleChangeInTable"
|
||||||
|
style="min-height: 300px"
|
||||||
|
>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getAction,downFile } from '@/api/manage'
|
||||||
|
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
|
||||||
|
import {filterObj} from '@/utils/util';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'OnlCgreportAutoList',
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 查询参数
|
||||||
|
queryInfo: [],
|
||||||
|
// 查询参数,多个页面的查询参数用 code 作为键来区分
|
||||||
|
queryParamsMap: {},
|
||||||
|
selfParam:{
|
||||||
|
},
|
||||||
|
sorter: {
|
||||||
|
column: '',
|
||||||
|
order: 'desc',
|
||||||
|
},
|
||||||
|
dictOptions: {},
|
||||||
|
toggleSearchStatus: false, // 高级搜索 展开/关闭
|
||||||
|
reportCode: '',
|
||||||
|
description: '在线报表功能测试页面',
|
||||||
|
url: {
|
||||||
|
getColumns: '/online/cgreport/api/getColumns/',
|
||||||
|
getData: '/online/cgreport/api/getData/',
|
||||||
|
getQueryInfo: '/online/cgreport/api/getQueryInfo/',
|
||||||
|
getParamsInfo:'/online/cgreport/api/getParamsInfo/'
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
loading: true,
|
||||||
|
// 表头
|
||||||
|
columns: [],
|
||||||
|
//数据集
|
||||||
|
dataSource: [],
|
||||||
|
// 选择器
|
||||||
|
selectedRowKeys: [],
|
||||||
|
selectionRows: [],
|
||||||
|
scroll: { x: false },
|
||||||
|
// 分页参数
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
|
showTotal: (total, range) => {
|
||||||
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||||
|
},
|
||||||
|
showQuickJumper: true,
|
||||||
|
showSizeChanger: true,
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cgreportHeadName:""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initParamsInfo()
|
||||||
|
this.initQueryInfo();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'$route'() {
|
||||||
|
// 刷新参数放到这里去触发,就可以刷新相同界面了
|
||||||
|
this.initParamsInfo()
|
||||||
|
this.initQueryInfo();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
queryParam: {
|
||||||
|
get() {
|
||||||
|
return this.queryParamsMap[this.reportCode]
|
||||||
|
},
|
||||||
|
set(newVal) {
|
||||||
|
this.$set(this.queryParamsMap, this.reportCode, newVal)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initParamsInfo(){
|
||||||
|
if(!this.$route.params.code){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
//获取报表ID
|
||||||
|
this.reportCode = this.$route.params.code;
|
||||||
|
if (!this.queryParam) {
|
||||||
|
this.queryParam = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selfParam={}
|
||||||
|
getAction(`${this.url.getParamsInfo}${this.$route.params.code}`).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
if(res.result && res.result.length>0){
|
||||||
|
for(let i of res.result){
|
||||||
|
this.selfParam['self_'+i.paramName]=(!this.$route.query[i.paramName])?"":this.$route.query[i.paramName]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
this.loadData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initQueryInfo() {
|
||||||
|
if(!this.$route.params.code){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
getAction(`${this.url.getQueryInfo}${this.$route.params.code}`).then((res) => {
|
||||||
|
console.log("获取查询条件", res);
|
||||||
|
if (res.success) {
|
||||||
|
this.queryInfo = res.result
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
loadData(arg) {
|
||||||
|
if(!this.$route.params.code){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (arg == 1) {
|
||||||
|
this.table.pagination.current = 1
|
||||||
|
}
|
||||||
|
let params = this.getQueryParams();//查询条件
|
||||||
|
console.log(params)
|
||||||
|
|
||||||
|
console.log(' 动态报表 reportCode : ' + this.reportCode);
|
||||||
|
this.table.loading = true
|
||||||
|
Promise.all([
|
||||||
|
getAction(`${this.url.getColumns}${this.reportCode}`),
|
||||||
|
getAction(`${this.url.getData}${this.reportCode}`, params)
|
||||||
|
]).then(results => {
|
||||||
|
let [{result: {columns,cgreportHeadName,dictOptions}}, {result: data}] = results
|
||||||
|
let columnWidth = 230
|
||||||
|
this.dictOptions = dictOptions
|
||||||
|
for(let a=0;a<columns.length;a++){
|
||||||
|
if(columns[a].customRender){
|
||||||
|
let field_name = columns[a].customRender;
|
||||||
|
columns[a].customRender=(text)=>{
|
||||||
|
if(!text){
|
||||||
|
return ''
|
||||||
|
}else{
|
||||||
|
return filterMultiDictText(this.dictOptions[field_name], text+"");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
columns.width = columnWidth
|
||||||
|
}
|
||||||
|
this.table.scroll.x = columns.length * columnWidth
|
||||||
|
this.table.columns = [...columns]
|
||||||
|
this.cgreportHeadName = cgreportHeadName
|
||||||
|
if (data) {
|
||||||
|
this.table.pagination.total = Number(data.total)
|
||||||
|
this.table.dataSource = data.records
|
||||||
|
} else {
|
||||||
|
this.table.pagination.total = 0
|
||||||
|
this.table.dataSource = []
|
||||||
|
}
|
||||||
|
}).catch((e) => {
|
||||||
|
console.error(e)
|
||||||
|
this.$message.error('查询失败')
|
||||||
|
}).then(() => {
|
||||||
|
this.table.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getQueryParams() {
|
||||||
|
let param = Object.assign({}, this.queryParam, this.sorter,this.selfParam);
|
||||||
|
param.pageNo = this.table.pagination.current;
|
||||||
|
param.pageSize = this.table.pagination.pageSize;
|
||||||
|
return filterObj(param);
|
||||||
|
},
|
||||||
|
searchByQuery() {
|
||||||
|
this.loadData(1);
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.queryParam = {}
|
||||||
|
this.loadData(1);
|
||||||
|
},
|
||||||
|
handleToggleSearch() {
|
||||||
|
this.toggleSearchStatus = !this.toggleSearchStatus;
|
||||||
|
},
|
||||||
|
exportExcel() {
|
||||||
|
let fileName = this.cgreportHeadName
|
||||||
|
downFile(`/online/cgreport/api/exportXls/${this.reportCode}`,this.queryParam).then((data)=>{
|
||||||
|
if (!data) {
|
||||||
|
this.$message.warning("文件下载失败")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
||||||
|
window.navigator.msSaveBlob(new Blob([data]), fileName+'.xls')
|
||||||
|
}else{
|
||||||
|
let url = window.URL.createObjectURL(new Blob([data]))
|
||||||
|
let link = document.createElement('a')
|
||||||
|
link.style.display = 'none'
|
||||||
|
link.href = url
|
||||||
|
link.setAttribute('download', fileName+'.xls')
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link); //下载完成移除元素
|
||||||
|
window.URL.revokeObjectURL(url); //释放掉blob对象
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChangeInTableSelect(selectedRowKeys, selectionRows) {
|
||||||
|
this.table.selectedRowKeys = selectedRowKeys
|
||||||
|
this.table.selectionRows = selectionRows
|
||||||
|
},
|
||||||
|
handleChangeInTable(pagination, filters, sorter) {
|
||||||
|
//分页、排序、筛选变化时触发
|
||||||
|
if (Object.keys(sorter).length > 0) {
|
||||||
|
this.sorter.column = sorter.field
|
||||||
|
this.sorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
|
||||||
|
}
|
||||||
|
this.table.pagination = pagination
|
||||||
|
this.loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 500px
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
|
@ -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 @@
|
||||||
{
|
{
|
||||||
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 @@
|
||||||
<!-- 搜索区域 -->
|
<!-- 搜索区域 -->
|
||||||
<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 @@
|
||||||
</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 @@
|
||||||
更多 <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 @@
|
||||||
</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 @@
|
||||||
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 @@
|
||||||
selectedRowKeys2: [],
|
selectedRowKeys2: [],
|
||||||
selectionRows1: [],
|
selectionRows1: [],
|
||||||
selectionRows2: [],
|
selectionRows2: [],
|
||||||
|
test:{},
|
||||||
|
rightcolval:0,
|
||||||
columns:
|
columns:
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
|
@ -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 @@
|
||||||
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 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
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 @@
|
||||||
}
|
}
|
||||||
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 @@
|
||||||
|
|
||||||
<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 @@
|
||||||
|
|
||||||
<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 @@
|
||||||
</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 @@
|
||||||
|
|
||||||
<!-- 操作按钮区域 -->
|
<!-- 操作按钮区域 -->
|
||||||
<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 @@
|
||||||
<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"
|
||||||
|
|
|
@ -1,94 +1,132 @@
|
||||||
<template>
|
<template>
|
||||||
<a-modal
|
<a-modal
|
||||||
:title="title"
|
:title="title"
|
||||||
:width="800"
|
|
||||||
|
:width="900"
|
||||||
:visible="visible"
|
:visible="visible"
|
||||||
:confirmLoading="confirmLoading"
|
:confirmLoading="confirmLoading"
|
||||||
@ok="handleOk"
|
@ok="handleOk"
|
||||||
@cancel="handleCancel"
|
@cancel="handleCancel"
|
||||||
:okButtonProps="{ props: {disabled: disabled} }"
|
:okButtonProps="{ props: {disabled: disabled} }"
|
||||||
cancelText="关闭">
|
cancelText="关闭">
|
||||||
|
|
||||||
<a-spin :spinning="confirmLoading">
|
<a-spin :spinning="confirmLoading">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
|
<a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
|
||||||
<a-form-item
|
<a-col :lg="12">
|
||||||
:labelCol="labelCol"
|
<a-form-item
|
||||||
:wrapperCol="wrapperCol"
|
:labelCol="labelCol"
|
||||||
label="标题">
|
:wrapperCol="wrapperCol"
|
||||||
<a-input placeholder="请输入标题" v-decorator="['titile', validatorRules.title]" :readOnly="disableSubmit" />
|
label="标题">
|
||||||
</a-form-item>
|
<a-input placeholder="请输入标题" v-decorator="['titile', validatorRules.title]" :readOnly="disableSubmit" style="width: 90%"/>
|
||||||
<a-form-item
|
</a-form-item>
|
||||||
:labelCol="labelCol"
|
</a-col>
|
||||||
:wrapperCol="wrapperCol"
|
<a-col :lg="12">
|
||||||
label="消息类型">
|
<a-form-item
|
||||||
<a-select
|
:labelCol="labelCol"
|
||||||
v-decorator="[ 'msgCategory', validatorRules.msgCategory]"
|
:wrapperCol="wrapperCol"
|
||||||
placeholder="请选择消息类型"
|
label="消息类型">
|
||||||
:disabled="disableSubmit">
|
<a-select
|
||||||
<a-select-option value="1">通知公告</a-select-option>
|
v-decorator="[ 'msgCategory', validatorRules.msgCategory]"
|
||||||
<a-select-option value="2">系统消息</a-select-option>
|
placeholder="请选择消息类型"
|
||||||
</a-select>
|
:disabled="disableSubmit"
|
||||||
</a-form-item>
|
:getPopupContainer = "(target) => target.parentNode"
|
||||||
<a-form-item
|
style="width: 80%" >
|
||||||
:labelCol="labelCol"
|
<a-select-option value="1">通知公告</a-select-option>
|
||||||
:wrapperCol="wrapperCol"
|
<a-select-option value="2">系统消息</a-select-option>
|
||||||
label="内容">
|
</a-select>
|
||||||
<j-editor v-decorator="[ 'msgContent', {} ]" triggerChange></j-editor>
|
</a-form-item>
|
||||||
</a-form-item>
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
<a-form-item
|
<a-row class="form-row" :gutter="24">
|
||||||
:labelCol="labelCol"
|
<a-col :lg="12">
|
||||||
:wrapperCol="wrapperCol"
|
<a-form-item
|
||||||
label="开始时间">
|
:labelCol="labelCol"
|
||||||
<j-date v-decorator="[ 'startTime', validatorRules.startTime]" placeholder="请选择开始时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
|
:wrapperCol="wrapperCol"
|
||||||
</a-form-item>
|
label="开始时间:"
|
||||||
<a-form-item
|
style="margin-left: 27px">
|
||||||
:labelCol="labelCol"
|
<j-date v-decorator="[ 'startTime', validatorRules.startTime]" placeholder="请选择开始时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss" ></j-date>
|
||||||
:wrapperCol="wrapperCol"
|
</a-form-item>
|
||||||
label="结束时间">
|
</a-col>
|
||||||
<j-date v-decorator="[ 'endTime', validatorRules.endTime]" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
|
<a-col :lg="12">
|
||||||
</a-form-item>
|
<a-form-item
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
label="结束时间"
|
||||||
|
class="endTime">
|
||||||
|
<j-date v-decorator="[ 'endTime', validatorRules.endTime]" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
<a-form-item
|
<a-row class="form-row" :gutter="32">
|
||||||
:labelCol="labelCol"
|
<a-col :lg="9">
|
||||||
:wrapperCol="wrapperCol"
|
<a-form-item
|
||||||
label="优先级">
|
:labelCol="labelCol"
|
||||||
<a-select
|
:wrapperCol="wrapperCol"
|
||||||
v-decorator="[ 'priority', {}]"
|
label="优先级"
|
||||||
placeholder="请选择优先级"
|
style="margin-left: 27px">
|
||||||
:disabled="disableSubmit">
|
<a-select
|
||||||
<a-select-option value="L">低</a-select-option>
|
v-decorator="[ 'priority', {}]"
|
||||||
<a-select-option value="M">中</a-select-option>
|
placeholder="请选择优先级"
|
||||||
<a-select-option value="H">高</a-select-option>
|
:disabled="disableSubmit"
|
||||||
</a-select>
|
:getPopupContainer = "(target) => target.parentNode"
|
||||||
</a-form-item>
|
style="margin-left: 5px;width: 135%">
|
||||||
<a-form-item
|
<a-select-option value="L">低</a-select-option>
|
||||||
:labelCol="labelCol"
|
<a-select-option value="M">中</a-select-option>
|
||||||
:wrapperCol="wrapperCol"
|
<a-select-option value="H">高</a-select-option>
|
||||||
label="通告对象类型">
|
</a-select>
|
||||||
<a-select
|
</a-form-item>
|
||||||
v-decorator="[ 'msgType', validatorRules.msgType]"
|
</a-col>
|
||||||
placeholder="请选择通告对象类型"
|
<a-col :lg="15" push="3">
|
||||||
:disabled="disableSubmit"
|
<a-form-item
|
||||||
@change="chooseMsgType">
|
:labelCol="labelCol"
|
||||||
<a-select-option value="USER">指定用户</a-select-option>
|
:wrapperCol="wrapperCol"
|
||||||
<a-select-option value="ALL">全体用户</a-select-option>
|
label="通告对象类型"
|
||||||
</a-select>
|
style="margin-left: -14px">
|
||||||
</a-form-item>
|
<a-select
|
||||||
<a-form-item
|
v-decorator="[ 'msgType', validatorRules.msgType]"
|
||||||
:labelCol="labelCol"
|
placeholder="请选择通告对象类型"
|
||||||
:wrapperCol="wrapperCol"
|
:disabled="disableSubmit"
|
||||||
label="指定用户"
|
@change="chooseMsgType"
|
||||||
v-if="userType">
|
:getPopupContainer = "(target) => target.parentNode"
|
||||||
<a-select
|
style="width: 200px;margin-left: 5px">
|
||||||
mode="multiple"
|
<a-select-option value="USER">指定用户</a-select-option>
|
||||||
style="width: 100%"
|
<a-select-option value="ALL">全体用户</a-select-option>
|
||||||
placeholder="请选择用户"
|
</a-select>
|
||||||
v-model="selectedUser"
|
</a-form-item>
|
||||||
@dropdownVisibleChange="selectUserIds">
|
</a-col>
|
||||||
</a-select>
|
</a-row>
|
||||||
</a-form-item>
|
<a-row>
|
||||||
|
<a-col :lg="24" pull="2">
|
||||||
|
<a-form-item
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
label="指定用户"
|
||||||
|
v-if="userType">
|
||||||
|
<a-select
|
||||||
|
mode="multiple"
|
||||||
|
placeholder="请选择用户"
|
||||||
|
v-model="selectedUser"
|
||||||
|
@dropdownVisibleChange="selectUserIds"
|
||||||
|
style="width: 119%"
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :lg="24" pull="3">
|
||||||
|
<a-form-item
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
label="内容"
|
||||||
|
style="margin-left: 5px">
|
||||||
|
<j-editor style="width: 130%" v-decorator="[ 'msgContent', {} ]" triggerChange></j-editor>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-spin>
|
</a-spin>
|
||||||
<select-user-list-modal ref="UserListModal" @choseUser="choseUser"></select-user-list-modal>
|
<select-user-list-modal ref="UserListModal" @choseUser="choseUser"></select-user-list-modal>
|
||||||
|
|
|
@ -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 = {
|
||||||
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 @@
|
||||||
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"
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
Jeecg-Boot 快速开发平台
|
Jeecg-Boot 快速开发平台
|
||||||
===============
|
===============
|
||||||
|
|
||||||
当前最新版本: 2.1.2(发布日期:20191122)
|
当前最新版本: 2.1.3(发布日期:20191226)
|
||||||
|
|
||||||
|
|
||||||
## 后端技术架构
|
## 后端技术架构
|
||||||
|
|
Loading…
Reference in New Issue