[update] 删除不必要的代码
This commit is contained in:
danshihao
+16
@@ -13,6 +13,7 @@
|
||||
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
|
||||
import enquireScreen from '@/utils/device'
|
||||
import CommonEmpty from '@comp/CommonEmpty'
|
||||
import { isMobile } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
components: { CommonEmpty },
|
||||
@@ -21,6 +22,14 @@ export default {
|
||||
locale: zhCN
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
// 如果是移动端就给根节点字体大小
|
||||
if (isMobile()) {
|
||||
document.documentElement.classList.add('mobile-html')
|
||||
// document.body.style.fontSize = 'calc(100vw - 7.5)'
|
||||
// document.body.style['-webkit-text-size-adjust'] = '100%'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const that = this
|
||||
enquireScreen(deviceType => {
|
||||
@@ -48,3 +57,10 @@ export default {
|
||||
padding: 9px 8px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
html.mobile-html {
|
||||
font-size: calc(100vw / 7.5);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 922 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 576 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 282 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
|
||||
<v-chart ref="chart" :forceFit="true" :height="height" :data="dataSource" :scale="scale">
|
||||
<v-tooltip :shared="false"/>
|
||||
<v-axis/>
|
||||
<v-line position="x*y" :size="lineSize" :color="lineColor"/>
|
||||
<v-area position="x*y" :color="color"/>
|
||||
</v-chart>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { triggerWindowResizeEvent } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'AreaChartTy',
|
||||
props: {
|
||||
// 图表数据
|
||||
dataSource: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 图表标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// x 轴别名
|
||||
x: {
|
||||
type: String,
|
||||
default: 'x'
|
||||
},
|
||||
// y 轴别名
|
||||
y: {
|
||||
type: String,
|
||||
default: 'y'
|
||||
},
|
||||
// Y轴最小值
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// Y轴最大值
|
||||
max: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
// 图表高度
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
},
|
||||
// 线的粗细
|
||||
lineSize: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
// 面积的颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 线的颜色
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
scale () {
|
||||
return [
|
||||
{ dataKey: 'x', title: this.x, alias: this.x },
|
||||
{ dataKey: 'y', title: this.y, alias: this.y, min: this.min, max: this.max }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
triggerWindowResizeEvent()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "chart";
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
|
||||
<v-tooltip/>
|
||||
<v-axis/>
|
||||
<v-bar position="x*y"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { triggerWindowResizeEvent } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'Bar',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
yaxisText: {
|
||||
type: String,
|
||||
default: 'y'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return { padding: ['auto', 'auto', '40', '50'] }
|
||||
},
|
||||
computed: {
|
||||
scale () {
|
||||
return [{
|
||||
dataKey: 'y',
|
||||
alias: this.yaxisText
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
triggerWindowResizeEvent()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 50px 32px 0' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding" :onClick="handleClick">
|
||||
<v-tooltip/>
|
||||
<v-legend/>
|
||||
<v-axis/>
|
||||
<v-bar position="type*bar"/>
|
||||
<v-line position="type*line" color="#2fc25b" :size="3"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ChartEventMixins } from './mixins/ChartMixins'
|
||||
|
||||
export default {
|
||||
name: 'BarAndLine',
|
||||
mixins: [ChartEventMixins],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ type: '10:10', bar: 200, line: 1000 },
|
||||
{ type: '10:15', bar: 600, line: 1000 },
|
||||
{ type: '10:20', bar: 200, line: 1000 },
|
||||
{ type: '10:25', bar: 900, line: 1000 },
|
||||
{ type: '10:30', bar: 200, line: 1000 },
|
||||
{ type: '10:35', bar: 200, line: 1000 },
|
||||
{ type: '10:40', bar: 100, line: 1000 }
|
||||
]
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 400
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
padding: { top: 50, right: 50, bottom: 100, left: 50 },
|
||||
scale: [{
|
||||
dataKey: 'bar',
|
||||
min: 0
|
||||
}, {
|
||||
dataKey: 'line',
|
||||
min: 0
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data () {
|
||||
return this.dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :data="data" :height="height" :force-fit="true" :scale="scale" :onClick="handleClick">
|
||||
<v-tooltip/>
|
||||
<v-axis/>
|
||||
<v-legend/>
|
||||
<v-bar position="x*y" color="type" :adjust="adjust"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DataSet } from '@antv/data-set'
|
||||
import { ChartEventMixins } from './mixins/ChartMixins'
|
||||
|
||||
export default {
|
||||
name: 'BarMultid',
|
||||
mixins: [ChartEventMixins],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ type: 'JeroOne', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, May: 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
|
||||
{ type: 'JeroTwo', '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: {
|
||||
type: Array,
|
||||
default: () => ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.']
|
||||
},
|
||||
// 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
|
||||
aliases: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
adjust: [{
|
||||
type: 'dodge',
|
||||
marginRatio: 1 / 32
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data () {
|
||||
const dv = new DataSet.View().source(this.dataSource)
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: this.fields,
|
||||
key: 'x',
|
||||
value: 'y'
|
||||
})
|
||||
|
||||
// bar 使用不了 - 和 / 所以替换下
|
||||
const rows = dv.rows.map(row => {
|
||||
if (typeof row.x === 'string') {
|
||||
row.x = row.x.replace(/[-/]/g, '_')
|
||||
}
|
||||
return row
|
||||
})
|
||||
// 替换别名
|
||||
rows.forEach(row => {
|
||||
for (const item of this.aliases) {
|
||||
if (item.field === row.type) {
|
||||
row.type = item.alias
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
return rows
|
||||
},
|
||||
scale () {
|
||||
return [
|
||||
{
|
||||
type: 'cat',
|
||||
dataKey: 'x'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<v-chart :forceFit="true" :height="300" :data="chartData" :scale="scale">
|
||||
<v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
|
||||
<v-axis
|
||||
dataKey="value"
|
||||
:zIndex="2"
|
||||
:line="null"
|
||||
:label="axisLabel"
|
||||
:subTickCount="4"
|
||||
:subTickLine="axisSubTickLine"
|
||||
:tickLine="axisTickLine"
|
||||
:grid="null"
|
||||
></v-axis>
|
||||
<v-axis dataKey="1" :show="false"></v-axis>
|
||||
<v-series
|
||||
gemo="point"
|
||||
position="value*1"
|
||||
shape="pointer"
|
||||
color="#1890FF"
|
||||
:active="false"
|
||||
></v-series>
|
||||
<v-guide
|
||||
type="arc"
|
||||
:zIndex="0"
|
||||
:top="false"
|
||||
:start="arcGuide1Start"
|
||||
:end="arcGuide1End"
|
||||
:vStyle="arcGuide1Style"
|
||||
></v-guide>
|
||||
<v-guide
|
||||
type="arc"
|
||||
:zIndex="1"
|
||||
:start="arcGuide2Start"
|
||||
:end="getArcGuide2End"
|
||||
:vStyle="arcGuide2Style"
|
||||
></v-guide>
|
||||
<v-guide
|
||||
type="html"
|
||||
:position="htmlGuidePosition"
|
||||
:html="getHtmlGuideHtml()"
|
||||
></v-guide>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { registerShape } from 'viser-vue'
|
||||
|
||||
registerShape('point', 'pointer', {
|
||||
draw (cfg, container) {
|
||||
let point = cfg.points[0]
|
||||
point = this.parsePoint(point)
|
||||
const center = this.parsePoint({
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
container.addShape('line', {
|
||||
attrs: {
|
||||
x1: center.x,
|
||||
y1: center.y,
|
||||
x2: point.x,
|
||||
y2: point.y + 15,
|
||||
stroke: cfg.color,
|
||||
lineWidth: 5,
|
||||
lineCap: 'round'
|
||||
}
|
||||
})
|
||||
return container.addShape('circle', {
|
||||
attrs: {
|
||||
x: center.x,
|
||||
y: center.y,
|
||||
r: 9.75,
|
||||
stroke: cfg.color,
|
||||
lineWidth: 4.5,
|
||||
fill: '#fff'
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const scale = [{
|
||||
dataKey: 'value',
|
||||
min: 0,
|
||||
max: 9,
|
||||
tickInterval: 1,
|
||||
nice: false
|
||||
}]
|
||||
|
||||
const data = [
|
||||
{ value: 7.0 }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'DashChartDemo',
|
||||
props: {
|
||||
datasource: {
|
||||
type: Number,
|
||||
default: 7
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (!this.datasource) {
|
||||
this.chartData = data
|
||||
} else {
|
||||
this.chartData = [
|
||||
{ value: this.datasource }
|
||||
]
|
||||
}
|
||||
this.getChartData()
|
||||
},
|
||||
watch: {
|
||||
datasource: function (val) {
|
||||
this.chartData = [
|
||||
{ value: val }
|
||||
]
|
||||
this.getChartData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getChartData () {
|
||||
if (this.chartData && this.chartData.length > 0) {
|
||||
this.abcd = this.chartData[0].value * 10
|
||||
} else {
|
||||
this.abcd = 70
|
||||
}
|
||||
},
|
||||
getHtmlGuideHtml () {
|
||||
return '<div style="width: 300px;text-align: center;">\n' +
|
||||
'<p style="font-size: 14px;color: #545454;margin: 0;">' + this.title + '</p>\n' +
|
||||
'<p style="font-size: 36px;color: #545454;margin: 0;">' + this.abcd + '%</p>\n' +
|
||||
'</div>'
|
||||
},
|
||||
getArcGuide2End () {
|
||||
return [this.chartData[0].value, 0.945]
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [],
|
||||
height: 400,
|
||||
scale: scale,
|
||||
abcd: 70,
|
||||
axisLabel: {
|
||||
offset: -16,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle'
|
||||
}
|
||||
},
|
||||
axisSubTickLine: {
|
||||
length: -8,
|
||||
stroke: '#fff',
|
||||
strokeOpacity: 1
|
||||
},
|
||||
axisTickLine: {
|
||||
length: -17,
|
||||
stroke: '#fff',
|
||||
strokeOpacity: 1
|
||||
},
|
||||
arcGuide1Start: [0, 0.945],
|
||||
arcGuide1End: [9, 0.945],
|
||||
arcGuide1Style: {
|
||||
stroke: '#CBCBCB',
|
||||
lineWidth: 18
|
||||
},
|
||||
arcGuide2Start: [0, 0.945],
|
||||
arcGuide2Style: {
|
||||
stroke: '#1890FF',
|
||||
lineWidth: 18
|
||||
},
|
||||
htmlGuidePosition: ['50%', '100%'],
|
||||
htmlGuideHtml: `
|
||||
<div style="width: 300px;text-align: center;">
|
||||
<p style="font-size: 14px;color: #545454;margin: 0;">${this.title}</p>
|
||||
<p style="font-size: 36px;color: #545454;margin: 0;">${this.abcd}%</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,61 +0,0 @@
|
||||
<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>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
|
||||
<v-tooltip/>
|
||||
<v-axis/>
|
||||
<v-legend/>
|
||||
<v-line position="type*y" color="x"/>
|
||||
<v-point position="type*y" color="x" :size="4" :v-style="style" :shape="'circle'"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DataSet } from '@antv/data-set'
|
||||
import { ChartEventMixins } from './mixins/ChartMixins'
|
||||
|
||||
export default {
|
||||
name: 'LineChartMultid',
|
||||
mixins: [ChartEventMixins],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ type: 'Jan', jeroOne: 7.0, jeroTwo: 3.9 },
|
||||
{ type: 'Feb', jeroOne: 6.9, jeroTwo: 4.2 },
|
||||
{ type: 'Mar', jeroOne: 9.5, jeroTwo: 5.7 },
|
||||
{ type: 'Apr', jeroOne: 14.5, jeroTwo: 8.5 },
|
||||
{ type: 'May', jeroOne: 18.4, jeroTwo: 11.9 },
|
||||
{ type: 'Jun', jeroOne: 21.5, jeroTwo: 15.2 },
|
||||
{ type: 'Jul', jeroOne: 25.2, jeroTwo: 17.0 },
|
||||
{ type: 'Aug', jeroOne: 26.5, jeroTwo: 16.6 },
|
||||
{ type: 'Sep', jeroOne: 23.3, jeroTwo: 14.2 },
|
||||
{ type: 'Oct', jeroOne: 18.3, jeroTwo: 10.3 },
|
||||
{ type: 'Nov', jeroOne: 13.9, jeroTwo: 6.6 },
|
||||
{ type: 'Dec', jeroOne: 9.6, jeroTwo: 4.8 }
|
||||
]
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
default: () => ['jeroOne', 'jeroTwo']
|
||||
},
|
||||
// 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
|
||||
aliases: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
scale: [{
|
||||
type: 'cat',
|
||||
dataKey: 'x',
|
||||
min: 0,
|
||||
max: 1
|
||||
}],
|
||||
style: { stroke: '#fff', lineWidth: 1 }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data () {
|
||||
const dv = new DataSet.View().source(this.dataSource)
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: this.fields,
|
||||
key: 'x',
|
||||
value: 'y'
|
||||
})
|
||||
const rows = dv.rows
|
||||
// 替换别名
|
||||
rows.forEach(row => {
|
||||
for (const item of this.aliases) {
|
||||
if (item.field === row.x) {
|
||||
row.x = item.alias
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
return rows
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-chart
|
||||
:forceFit="true"
|
||||
:height="height"
|
||||
:width="width"
|
||||
:data="data"
|
||||
:scale="scale"
|
||||
:padding="0">
|
||||
<v-tooltip/>
|
||||
<v-interval
|
||||
:shape="['liquid-fill-gauge']"
|
||||
position="transfer*value"
|
||||
color=""
|
||||
:v-style="{
|
||||
lineWidth: 8,
|
||||
opacity: 0.75
|
||||
}"
|
||||
:tooltip="[
|
||||
'transfer*value',
|
||||
(transfer, value) => {
|
||||
return {
|
||||
name: transfer,
|
||||
value
|
||||
};
|
||||
},
|
||||
]"
|
||||
></v-interval>
|
||||
<v-guide
|
||||
v-for="(row, index) in data"
|
||||
:key="index"
|
||||
type="text"
|
||||
:top="true"
|
||||
:position="{
|
||||
gender: row.transfer,
|
||||
value: 45
|
||||
}"
|
||||
:content="row.value + '%'"
|
||||
:v-style="{
|
||||
fontSize: 100,
|
||||
textAlign: 'center',
|
||||
opacity: 0.75,
|
||||
}"
|
||||
/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const sourceDataConst = [
|
||||
{ transfer: '一月', value: 813 },
|
||||
{ transfer: '二月', value: 233 },
|
||||
{ transfer: '三月', value: 561 }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Liquid',
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: sourceDataConst,
|
||||
scale: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div class="antv-chart-mini">
|
||||
<div class="chart-wrapper" :style="{ height: 46 }">
|
||||
<v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :padding="[36, 0, 18, 0]">
|
||||
<v-tooltip/>
|
||||
<v-smooth-area position="x*y"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'dayjs'
|
||||
|
||||
const sourceData = []
|
||||
const beginDay = new Date().getTime()
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
sourceData.push({
|
||||
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
|
||||
y: Math.round(Math.random() * 10)
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MiniArea',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// x 轴别名
|
||||
x: {
|
||||
type: String,
|
||||
default: 'x'
|
||||
},
|
||||
// y 轴别名
|
||||
y: {
|
||||
type: String,
|
||||
default: 'y'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [],
|
||||
height: 100
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
scale () {
|
||||
return [
|
||||
{ dataKey: 'x', title: this.x, alias: this.x },
|
||||
{ dataKey: 'y', title: this.y, alias: this.y }
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.dataSource.length === 0) {
|
||||
this.data = sourceData
|
||||
} else {
|
||||
this.data = this.dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "chart";
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<div :style="{'width':width===null?'auto':width+'px'}">
|
||||
<v-chart :forceFit="typeof width !== 'number'" :height="height" :data="data" padding="0">
|
||||
<v-tooltip/>
|
||||
<v-bar position="x*y"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'dayjs'
|
||||
|
||||
const sourceData = []
|
||||
const beginDay = new Date().getTime()
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
sourceData.push({
|
||||
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
|
||||
y: Math.round(Math.random() * 10)
|
||||
})
|
||||
}
|
||||
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
|
||||
const scale = [{
|
||||
dataKey: 'x',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '时间',
|
||||
min: 1,
|
||||
max: 30
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: 'MiniBar',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.dataSource.length === 0) {
|
||||
this.data = sourceData
|
||||
} else {
|
||||
this.data = this.dataSource
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tooltip,
|
||||
data: [],
|
||||
scale
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "chart";
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div class="chart-mini-progress">
|
||||
<div class="target" :style="{ left: target + '%'}">
|
||||
<span :style="{ backgroundColor: color }"/>
|
||||
<span :style="{ backgroundColor: color }"/>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height+'px' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MiniProgress',
|
||||
props: {
|
||||
target: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#13C2C2'
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart-mini-progress {
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.target {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
span {
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
width: 2px;
|
||||
|
||||
&:last-child {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress-wrapper {
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
|
||||
.progress {
|
||||
transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
|
||||
border-radius: 1px 0 0 1px;
|
||||
background-color: #1890ff;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
|
||||
<v-tooltip :showTitle="false" dataKey="item*percent"/>
|
||||
<v-axis/>
|
||||
<v-legend dataKey="item"/>
|
||||
<v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig"/>
|
||||
<v-coord type="theta"/>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ChartEventMixins } from './mixins/ChartMixins'
|
||||
const DataSet = require('@antv/data-set')
|
||||
|
||||
export default {
|
||||
name: 'Pie',
|
||||
mixins: [ChartEventMixins],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ item: '示例一', count: 40 },
|
||||
{ item: '示例二', count: 21 },
|
||||
{ item: '示例三', count: 17 },
|
||||
{ item: '示例四', count: 13 },
|
||||
{ item: '示例五', count: 9 }
|
||||
]
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
scale: [{
|
||||
dataKey: 'percent',
|
||||
min: 0,
|
||||
formatter: '.0%'
|
||||
}],
|
||||
pieStyle: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 1
|
||||
},
|
||||
labelConfig: ['percent', {
|
||||
formatter: (val, item) => {
|
||||
return item.point.item + ': ' + val
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data () {
|
||||
const dv = new DataSet.View().source(this.dataSource)
|
||||
// 计算数据百分比
|
||||
dv.transform({
|
||||
type: 'percent',
|
||||
field: 'count',
|
||||
dimension: 'item',
|
||||
as: 'percent'
|
||||
})
|
||||
return dv.rows
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,367 +0,0 @@
|
||||
# 报表组件文档
|
||||
|
||||
## 柱状图
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import Bar from '@/components/chart/Bar'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|------------|--------|----|------------|
|
||||
| title | string | | 报表标题 |
|
||||
| dataSource | array | ✔️ | 报表数据源 |
|
||||
| height | number | | 报表高度，默认254 |
|
||||
|
||||
##### dataSource 示例
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"x": "1月",
|
||||
"y": 320
|
||||
},
|
||||
{
|
||||
"x": "2月",
|
||||
"y": 457
|
||||
},
|
||||
{
|
||||
"x": "3月",
|
||||
"y": 182
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
##### 代码示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<bar title="柱状图" :dataSource="dataSource" :height="420"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Bar from '@/components/chart/Bar'
|
||||
|
||||
export default {
|
||||
name: 'ChartDemo',
|
||||
components: {
|
||||
Bar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataSource: [
|
||||
{
|
||||
"x": "1月",
|
||||
"y": 320
|
||||
},
|
||||
{
|
||||
"x": "2月",
|
||||
"y": 457
|
||||
},
|
||||
{
|
||||
"x": "3月",
|
||||
"y": 182
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## 多列柱状图
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import BarMultid from '@/components/chart/BarMultid'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|------------|--------|----|------------|
|
||||
| title | string | | 报表标题 |
|
||||
| fields | array | | 主列字段列表 |
|
||||
| dataSource | array | | 报表数据源 |
|
||||
| height | number | | 报表高度，默认254 |
|
||||
|
||||
##### fields 示例
|
||||
|
||||
```json
|
||||
["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."]
|
||||
```
|
||||
|
||||
##### dataSource 示例
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"type": "jero", // 列名
|
||||
"Jan.": 18.9,
|
||||
"Feb.": 28.8,
|
||||
"Mar.": 39.3,
|
||||
"Apr.": 81.4,
|
||||
"May": 47,
|
||||
"Jun.": 20.3,
|
||||
"Jul.": 24,
|
||||
"Aug.": 35.6
|
||||
},
|
||||
{
|
||||
"type": "jeroTwo",
|
||||
"Jan.": 12.4,
|
||||
"Feb.": 23.2,
|
||||
"Mar.": 34.5,
|
||||
"Apr.": 99.7,
|
||||
"May": 52.6,
|
||||
"Jun.": 35.5,
|
||||
"Jul.": 37.4,
|
||||
"Aug.": 42.4
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 迷你柱状图
|
||||
|
||||
不带标题和数据轴的柱状图
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|------------|--------|----|---------------|
|
||||
| width | number | | 报表宽度度，默认自适应宽度 |
|
||||
| height | number | | 报表高度，默认200 |
|
||||
| dataSource | array | | 报表数据源 |
|
||||
|
||||
##### dataSource 示例
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"x": "1月",
|
||||
"y": 320
|
||||
},
|
||||
{
|
||||
"x": "2月",
|
||||
"y": 457
|
||||
},
|
||||
{
|
||||
"x": "3月",
|
||||
"y": 182
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 面积图
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import AreaChartTy from '@/components/chart/AreaChartTy'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|------------|--------|----|------------|
|
||||
| title | string | | 报表标题 |
|
||||
| dataSource | array | ✔️ | 报表数据源 |
|
||||
| height | number | | 报表高度，默认254 |
|
||||
| lineSize | number | | 线的粗细，默认2 |
|
||||
|
||||
##### dataSource 示例
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"x": "1月",
|
||||
"y": 320
|
||||
},
|
||||
{
|
||||
"x": "2月",
|
||||
"y": 457
|
||||
},
|
||||
{
|
||||
"x": "3月",
|
||||
"y": 182
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 多行折线图
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|------------|--------|----|------------|
|
||||
| title | string | | 报表标题 |
|
||||
| fields | array | | 主列字段列表 |
|
||||
| dataSource | array | | 报表数据源 |
|
||||
| height | number | | 报表高度，默认254 |
|
||||
|
||||
##### fields 示例
|
||||
|
||||
```json
|
||||
["jero", "jeroTwo"]
|
||||
```
|
||||
|
||||
##### dataSource 示例
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"type": "Jan", // 列名
|
||||
"jero": 7,
|
||||
"jeroTwo": 3.9
|
||||
},
|
||||
{ "type": "Feb", "jero": 6.9, "jeroTwo": 4.2 },
|
||||
{ "type": "Mar", "jero": 9.5, "jeroTwo": 5.7 },
|
||||
{ "type": "Apr", "jero": 14.5, "jeroTwo": 8.5 },
|
||||
{ "type": "May", "jero": 18.4, "jeroTwo": 11.9 },
|
||||
{ "type": "Jun", "jero": 21.5, "jeroTwo": 15.2 },
|
||||
{ "type": "Jul", "jero": 25.2, "jeroTwo": 17 },
|
||||
{ "type": "Aug", "jero": 26.5, "jeroTwo": 16.6 },
|
||||
{ "type": "Sep", "jero": 23.3, "jeroTwo": 14.2 },
|
||||
{ "type": "Oct", "jero": 18.3, "jeroTwo": 10.3 },
|
||||
{ "type": "Nov", "jero": 13.9, "jeroTwo": 6.6 },
|
||||
{ "type": "Dec", "jero": 9.6, "jeroTwo": 4.8 }
|
||||
]
|
||||
```
|
||||
|
||||
## 饼状图
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import Pie from '@/components/chart/Pie'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|------------|--------|----|------------|
|
||||
| dataSource | array | | 报表数据源 |
|
||||
| height | number | | 报表高度，默认254 |
|
||||
|
||||
##### dataSource 示例
|
||||
|
||||
```json
|
||||
[
|
||||
// 所有的 percent 相加等于 100
|
||||
{ "item": "一月", "percent": 40 },
|
||||
{ "item": "二月", "percent": 21 },
|
||||
{ "item": "三月", "percent": 17 },
|
||||
{ "item": "四月", "percent": 13 },
|
||||
{ "item": "五月", "percent": 9 }
|
||||
]
|
||||
```
|
||||
|
||||
## 雷达图
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import Radar from '@/components/chart/Radar'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|------------|--------|----|------------|
|
||||
| dataSource | array | | 报表数据源 |
|
||||
| height | number | | 报表高度，默认254 |
|
||||
|
||||
##### dataSource 示例
|
||||
|
||||
```json
|
||||
[
|
||||
// score 最小值为 0，最大值为 100
|
||||
{ "item": "一月", "score": 40 },
|
||||
{ "item": "二月", "score": 20 },
|
||||
{ "item": "三月", "score": 67 },
|
||||
{ "item": "四月", "score": 43 },
|
||||
{ "item": "五月", "score": 90 }
|
||||
]
|
||||
```
|
||||
|
||||
## 进度条
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import MiniProgress from '@/components/chart/MiniProgress'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|------------|--------|----|-------------------|
|
||||
| percentage | number | | 当前进度百分比，默认0，最高100 |
|
||||
| target | number | | 目标值，默认10 |
|
||||
| height | number | | 进度条高度，默认10 |
|
||||
| color | string | | 进度条颜色，默认 #13C2C2 |
|
||||
|
||||
## 仪表盘
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|--------|----|----------------|
|
||||
| title | string | | 报表标题 |
|
||||
| value | number | | 当前值，默认6.7，最大为9 |
|
||||
| height | number | | 报表高度，默认254 |
|
||||
|
||||
## 排名列表
|
||||
|
||||
##### 引用方式
|
||||
|
||||
```js
|
||||
import RankList from '@/components/chart/RankList'
|
||||
```
|
||||
|
||||
##### 参数列表
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|--------|----|--------------|
|
||||
| title | string | | 报表标题 |
|
||||
| list | array | | 排名列表数据 |
|
||||
| height | number | | 报表高度，默认自适应高度 |
|
||||
|
||||
##### list 示例
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"name": "北京朝阳 1 号店",
|
||||
"total": 1981
|
||||
},
|
||||
{ "name": "北京朝阳 2 号店", "total": 1359 },
|
||||
{ "name": "北京朝阳 3 号店", "total": 1354 },
|
||||
{ "name": "北京朝阳 4 号店", "total": 263 },
|
||||
{ "name": "北京朝阳 5 号店", "total": 446 },
|
||||
{ "name": "北京朝阳 6 号店", "total": 796 }
|
||||
]
|
||||
```
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
|
||||
<v-tooltip></v-tooltip>
|
||||
<v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid"/>
|
||||
<v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid"/>
|
||||
<v-legend dataKey="user" marker="circle" :offset="30"/>
|
||||
<v-coord type="polar" radius="0.8"/>
|
||||
<v-line position="item*score" color="user" :size="2"/>
|
||||
<v-point position="item*score" color="user" :size="4" shape="circle"/>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const axis1Opts = {
|
||||
dataKey: 'item',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
},
|
||||
hideFirstLine: false
|
||||
}
|
||||
}
|
||||
const axis2Opts = {
|
||||
dataKey: 'score',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
type: 'polygon',
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const scale = [
|
||||
{
|
||||
dataKey: 'score',
|
||||
min: 0,
|
||||
max: 100
|
||||
}, {
|
||||
dataKey: 'user',
|
||||
alias: '类型'
|
||||
}
|
||||
]
|
||||
|
||||
const sourceData = [
|
||||
{ item: '示例一', score: 40 },
|
||||
{ item: '示例二', score: 20 },
|
||||
{ item: '示例三', score: 67 },
|
||||
{ item: '示例四', score: 43 },
|
||||
{ item: '示例五', score: 90 }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Radar',
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
axis1Opts,
|
||||
axis2Opts,
|
||||
scale,
|
||||
data: sourceData
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataSource (newVal) {
|
||||
if (newVal.length === 0) {
|
||||
this.data = sourceData
|
||||
} else {
|
||||
this.data = newVal
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<div class="rank">
|
||||
<h4 class="title">{{ title }}</h4>
|
||||
<ul class="list" :style="{height:height?`${height}px`:'auto',overflow:'auto'}">
|
||||
<li :key="index" v-for="(item, index) in list">
|
||||
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.total }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RankList',
|
||||
// ['title', 'list']
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.rank {
|
||||
padding: 0 32px 32px 72px;
|
||||
|
||||
.list {
|
||||
margin: 25px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin-top: 16px;
|
||||
|
||||
span {
|
||||
color: rgba(0, 0, 0, .65);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
&:first-child {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-right: 24px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
&.active {
|
||||
background-color: #314659;
|
||||
color: #fff;
|
||||
}
|
||||
&:last-child {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile .rank {
|
||||
padding: 0 32px 32px 32px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-chart :forceFit="true" :height="height" :data="data">
|
||||
<v-coord type="rect" direction="LB" />
|
||||
<v-tooltip />
|
||||
<v-legend />
|
||||
<v-axis dataKey="State" :label="label" />
|
||||
<v-stack-bar position="State*流程数量" color="流程状态" />
|
||||
</v-chart>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const DataSet = require('@antv/data-set')
|
||||
|
||||
export default {
|
||||
name: 'StackBar',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [
|
||||
{ State: '请假', 流转中: 25, 已归档: 18 },
|
||||
{ State: '出差', 流转中: 30, 已归档: 20 },
|
||||
{ State: '加班', 流转中: 38, 已归档: 42 },
|
||||
{ State: '用车', 流转中: 51, 已归档: 67 }
|
||||
]
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
label: { offset: 12 }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data () {
|
||||
const dv = new DataSet.View().source(this.dataSource)
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: ['流转中', '已归档'],
|
||||
key: '流程状态',
|
||||
value: '流程数量',
|
||||
retains: ['State']
|
||||
})
|
||||
return dv.rows
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart
|
||||
:height="height"
|
||||
:data="data"
|
||||
:scale="scale"
|
||||
:forceFit="true"
|
||||
:padding="['auto', 'auto', '40', '50']">
|
||||
<v-tooltip/>
|
||||
<v-axis/>
|
||||
<v-bar position="x*y"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Bar',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
x: {
|
||||
type: String,
|
||||
default: 'x'
|
||||
},
|
||||
y: {
|
||||
type: String,
|
||||
default: 'y'
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
scale () {
|
||||
return [
|
||||
{ dataKey: 'x', title: this.x, alias: this.x },
|
||||
{ dataKey: 'y', title: this.y, alias: this.y }
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// this.getMonthBar()
|
||||
},
|
||||
methods: {
|
||||
// getMonthBar() {
|
||||
// this.$http.get('/analysis/month-bar')
|
||||
// .then(res => {
|
||||
// this.data = res.result
|
||||
// })
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div class="chart-trend">
|
||||
{{ term }}
|
||||
<span>{{ rate }}%</span>
|
||||
<span :class="['trend-icon', trend]"><a-icon :type="'caret-' + trend"/></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Trend',
|
||||
props: {
|
||||
// 同title
|
||||
term: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
},
|
||||
// 百分比
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
type: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
target: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
fixed: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
trend: (this.type && 'up') || 'down',
|
||||
rate: this.percentage
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const type = this.type === null ? this.value >= this.target : this.type
|
||||
this.trend = type ? 'up' : 'down'
|
||||
this.rate = (this.percentage === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percentage).toFixed(this.fixed)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart-trend {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
.trend-icon {
|
||||
font-size: 12px;
|
||||
|
||||
&.up, &.down {
|
||||
margin-left: 4px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
transform: scale(.83);
|
||||
}
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: #f5222d;
|
||||
}
|
||||
&.down {
|
||||
color: #52c41a;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +0,0 @@
|
||||
.antv-chart-mini {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
width: 100%;
|
||||
|
||||
/* margin: 0 -5px;
|
||||
overflow: hidden;*/
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
export const ChartEventMixins = {
|
||||
methods: {
|
||||
handleClick (event, chart) {
|
||||
this.handleEvent('click', event, chart)
|
||||
},
|
||||
handleEvent (eventName, event, chart) {
|
||||
this.$emit(eventName, event, chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -361,18 +361,6 @@ export const constantRouterMap = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
component: BlankLayout,
|
||||
redirect: '/test/home',
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
name: 'TestHome',
|
||||
component: () => import('@/views/Home')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="banner">
|
||||
<img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
|
||||
<h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2># Trend 组件 </h2>
|
||||
|
||||
<a-divider> 正常 </a-divider>
|
||||
|
||||
<a-card>
|
||||
|
||||
<trend flag="up" style="margin-right: 16px;">
|
||||
<span slot="term">工资</span>
|
||||
5%
|
||||
</trend>
|
||||
<trend flag="up" style="margin-right: 16px;">
|
||||
<span slot="term">工作量</span>
|
||||
50%
|
||||
</trend>
|
||||
<trend flag="down">
|
||||
<span slot="term">身体状态</span>
|
||||
50%
|
||||
</trend>
|
||||
|
||||
</a-card>
|
||||
|
||||
<a-divider> 颜色反转 </a-divider>
|
||||
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
|
||||
<trend flag="up" :reverse-color="true" style="margin-right: 16px;">
|
||||
<span slot="term">工资</span>
|
||||
5%
|
||||
</trend>
|
||||
<trend flag="down" :reverse-color="true" style="margin-right: 16px;">
|
||||
<span slot="term">工作量</span>
|
||||
50%
|
||||
</trend>
|
||||
|
||||
</a-card>
|
||||
|
||||
<h2># AvatarList 组件 </h2>
|
||||
|
||||
<a-divider> AvatarList </a-divider>
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
<avatar-list :max-length="3">
|
||||
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
||||
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
|
||||
</avatar-list>
|
||||
|
||||
<a-divider type="vertical" style="margin: 0 16px" />
|
||||
|
||||
<avatar-list size="mini">
|
||||
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
||||
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
</avatar-list>
|
||||
</a-card>
|
||||
|
||||
<h2># CountDown 组件 </h2>
|
||||
|
||||
<a-divider> CountDown </a-divider>
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
<count-down
|
||||
style="font-size: 2rem"
|
||||
:target="new Date().getTime() + 3000000"
|
||||
:on-end="onEndHandle">
|
||||
</count-down>
|
||||
|
||||
<a-divider type="vertical" style="margin: 0 16px" />
|
||||
|
||||
<count-down
|
||||
style="font-size: 2rem"
|
||||
:target="new Date().getTime() + 10000"
|
||||
:on-end="onEndHandle2">
|
||||
</count-down>
|
||||
</a-card>
|
||||
|
||||
<h2># Ellipsis 组件 </h2>
|
||||
|
||||
<a-divider> Ellipsis </a-divider>
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
<ellipsis :length="100" tooltip>
|
||||
There were injuries alleged in three cases in 2015, and a
|
||||
fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
|
||||
</ellipsis>
|
||||
</a-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
|
||||
import Trend from '@/components/Trend'
|
||||
import AvatarList from '@/components/AvatarList'
|
||||
import CountDown from '@/components/CountDown/CountDown'
|
||||
import Ellipsis from '@/components/Ellipsis'
|
||||
|
||||
const AvatarListItem = AvatarList.AvatarItem
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
Ellipsis,
|
||||
CountDown,
|
||||
Trend,
|
||||
AvatarList,
|
||||
AvatarListItem
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
targetTime: new Date().getTime() + 3900000
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEndHandle () {
|
||||
this.$message.success('CountDown callback!!!')
|
||||
},
|
||||
onEndHandle2 () {
|
||||
this.$notification.open({
|
||||
message: 'Notification Title',
|
||||
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 25px 0;
|
||||
}
|
||||
.home > .banner {
|
||||
text-align: center;
|
||||
padding: 25px 0;
|
||||
margin: 25px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,34 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<index-chart v-if="indexStyle===1"></index-chart>
|
||||
<index-bdc v-if="indexStyle===2"></index-bdc>
|
||||
<index-task v-if="indexStyle===3"></index-task>
|
||||
<div style="width: 100%;text-align: right;margin-top: 20px">
|
||||
请选择首页样式：
|
||||
<a-radio-group v-model="indexStyle">
|
||||
<a-radio :value="1">统计图表</a-radio>
|
||||
<a-radio :value="2">统计图表2</a-radio>
|
||||
<a-radio :value="3">任务表格</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
首页
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IndexChart from './IndexChart'
|
||||
import IndexTask from './IndexTask'
|
||||
import IndexBdc from './IndexBdc'
|
||||
|
||||
export default {
|
||||
name: 'Analysis',
|
||||
components: {
|
||||
IndexChart,
|
||||
IndexTask,
|
||||
IndexBdc
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
indexStyle: 1
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
@@ -1,517 +0,0 @@
|
||||
<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 :data-source="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 :data-source="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">
|
||||
<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">
|
||||
<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) {
|
||||
const 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="less" 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>
|
||||
@@ -1,268 +0,0 @@
|
||||
<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="true" />
|
||||
}
|
||||
},
|
||||
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) {
|
||||
this.visitInfo = res.result
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" 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>
|
||||
@@ -1,367 +0,0 @@
|
||||
<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" alt=""/>
|
||||
我的待办【{{ 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">
|
||||
<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" alt=""/>
|
||||
我的在办【{{ 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">
|
||||
<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" alt=""/>
|
||||
我的挂账【{{ 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">
|
||||
<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" alt=""/>
|
||||
我的督办【{{ 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">
|
||||
<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/jero/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 tipGreen = 'rgba(0, 255, 0, 1)'
|
||||
// 1-3天
|
||||
const tipYellow = 'rgba(255, 255, 0, 1)'
|
||||
// 超期
|
||||
const tipRed = '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) {
|
||||
const num = rd.restDay
|
||||
if (num <= 0) {
|
||||
return tipRed
|
||||
} else if (num >= 1 && num < 4) {
|
||||
return tipYellow
|
||||
} else if (num >= 4) {
|
||||
return tipGreen
|
||||
}
|
||||
},
|
||||
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) {
|
||||
const tmp = document.createElement('img')
|
||||
tmp.src = noDataPng
|
||||
tmp.width = 300
|
||||
const 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 0 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{
|
||||
position: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>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
Monitor
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Monitor'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,359 +0,0 @@
|
||||
<template>
|
||||
<page-layout :avatar="avatar">
|
||||
<div slot="headerContent">
|
||||
<div class="title">{{ timeFix }}，{{ nickname() }}<span class="welcome-text">，{{ welcome() }}</span></div>
|
||||
<div>前端工程师 | 蚂蚁金服 - 某某某事业群 - VUE平台</div>
|
||||
</div>
|
||||
<div slot="extra">
|
||||
<a-row class="more-info">
|
||||
<a-col :span="8">
|
||||
<head-info title="项目数" content="56" :center="false" :bordered="false"/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<head-info title="团队排名" content="8/24" :center="false" :bordered="false"/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<head-info title="项目访问" content="2,223" :center="false" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a-row :gutter="24">
|
||||
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
class="project-list"
|
||||
:loading="loading"
|
||||
style="margin-bottom: 24px;"
|
||||
:bordered="false"
|
||||
title="进行中的项目"
|
||||
:body-style="{ padding: 0 }">
|
||||
<a slot="extra">全部项目</a>
|
||||
<div>
|
||||
<a-card-grid class="project-card-grid" :key="i" v-for="(item, i) in projects">
|
||||
<a-card :bordered="false" :body-style="{ padding: 0 }">
|
||||
<a-card-meta>
|
||||
<div slot="title" class="card-title">
|
||||
<a-avatar size="small" :src="item.cover"/>
|
||||
<a>{{ item.title }}</a>
|
||||
</div>
|
||||
<div slot="description" class="card-description">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
</a-card-meta>
|
||||
<div class="project-item">
|
||||
<a href="/#/">科学搬砖组</a>
|
||||
<span class="datetime">9小时前</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-card-grid>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card :loading="loading" title="动态" :bordered="false">
|
||||
<a-list>
|
||||
<a-list-item :key="index" v-for="(item, index) in activities">
|
||||
<a-list-item-meta>
|
||||
<a-avatar slot="avatar" :src="item.user.avatar" />
|
||||
<div slot="title">
|
||||
<span>{{ item.user.nickname }}</span>
|
||||
在 <a href="#">{{ item.project.name }}</a>
|
||||
<span>{{ item.project.action }}</span>
|
||||
<a href="#">{{ item.project.event }}</a>
|
||||
</div>
|
||||
<div slot="description">{{ item.time }}</div>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
style="padding: 0 12px"
|
||||
:xl="8"
|
||||
:lg="24"
|
||||
:md="24"
|
||||
:sm="24"
|
||||
:xs="24">
|
||||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||
<div class="item-group">
|
||||
<a>操作一</a>
|
||||
<a>操作二</a>
|
||||
<a>操作三</a>
|
||||
<a>操作四</a>
|
||||
<a>操作五</a>
|
||||
<a>操作六</a>
|
||||
<a-button size="small" type="primary" ghost icon="plus">添加</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card title="XX 指数" style="margin-bottom: 24px" :loading="radarLoading" :bordered="false" :body-style="{ padding: 0 }">
|
||||
<div style="min-height: 400px;">
|
||||
<!-- :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts" -->
|
||||
<radar :data="radarData" />
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card :loading="loading" title="团队" :bordered="false">
|
||||
<div class="members">
|
||||
<a-row>
|
||||
<a-col :span="12" v-for="(item, index) in teams" :key="index">
|
||||
<a>
|
||||
<a-avatar size="small" :src="item.avatar" />
|
||||
<span class="member">{{ item.name }}</span>
|
||||
</a>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { timeFix } from '@/utils/util'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
import Radar from '@/components/chart/Radar'
|
||||
import { getRoleList, getServiceList, getFileAccessHttpUrl } from '@/api/manage'
|
||||
|
||||
const DataSet = require('@antv/data-set')
|
||||
|
||||
export default {
|
||||
name: 'Workplace',
|
||||
components: {
|
||||
PageLayout,
|
||||
HeadInfo,
|
||||
Radar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timeFix: timeFix(),
|
||||
avatar: '',
|
||||
user: {},
|
||||
|
||||
projects: [],
|
||||
loading: true,
|
||||
radarLoading: true,
|
||||
activities: [],
|
||||
teams: [],
|
||||
|
||||
// data
|
||||
axis1Opts: {
|
||||
dataKey: 'item',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
},
|
||||
hideFirstLine: false
|
||||
}
|
||||
},
|
||||
axis2Opts: {
|
||||
dataKey: 'score',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
type: 'polygon',
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: [{
|
||||
dataKey: 'score',
|
||||
min: 0,
|
||||
max: 80
|
||||
}],
|
||||
axisData: [
|
||||
{ item: '引用', a: 70, b: 30, c: 40 },
|
||||
{ item: '口碑', a: 60, b: 70, c: 40 },
|
||||
{ item: '产量', a: 50, b: 60, c: 40 },
|
||||
{ item: '贡献', a: 40, b: 50, c: 40 },
|
||||
{ item: '热度', a: 60, b: 70, c: 40 },
|
||||
{ item: '引用', a: 70, b: 50, c: 40 }
|
||||
],
|
||||
radarData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo () {
|
||||
return this.$store.getters.userInfo
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.user = this.userInfo
|
||||
this.avatar = getFileAccessHttpUrl(this.userInfo.avatar)
|
||||
console.log('this.avatar :' + this.avatar)
|
||||
|
||||
getRoleList().then(res => {
|
||||
console.log('workplace -> call getRoleList()', res)
|
||||
})
|
||||
|
||||
getServiceList().then(res => {
|
||||
console.log('workplace -> call getServiceList()', res)
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
this.getProjects()
|
||||
this.getActivity()
|
||||
this.getTeams()
|
||||
this.initRadar()
|
||||
},
|
||||
methods: {
|
||||
...mapGetters(['nickname', 'welcome']),
|
||||
getProjects () {
|
||||
this.$http.get('/mock/api/list/search/projects')
|
||||
.then(res => {
|
||||
this.projects = res.result && res.result.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
getActivity () {
|
||||
this.$http.get('/mock/api/workplace/activity')
|
||||
.then(res => {
|
||||
this.activities = res.result
|
||||
})
|
||||
},
|
||||
getTeams () {
|
||||
this.$http.get('/mock/api/workplace/teams')
|
||||
.then(res => {
|
||||
this.teams = res.result
|
||||
})
|
||||
},
|
||||
initRadar () {
|
||||
this.radarLoading = true
|
||||
|
||||
this.$http.get('/mock/api/workplace/radar')
|
||||
.then(res => {
|
||||
const dv = new DataSet.View().source(res.result)
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: ['个人', '团队', '部门'],
|
||||
key: 'user',
|
||||
value: 'score'
|
||||
})
|
||||
|
||||
this.radarData = dv.rows
|
||||
this.radarLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-list {
|
||||
|
||||
.card-title {
|
||||
font-size: 0;
|
||||
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-left: 12px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-description {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.project-item {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: inline-block;
|
||||
flex: 1 1 0;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
.datetime {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
flex: 0 0 auto;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
.members {
|
||||
a {
|
||||
display: block;
|
||||
margin: 12px 0;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
.member {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
line-height: 24px;
|
||||
max-width: 100px;
|
||||
vertical-align: top;
|
||||
margin-left: 12px;
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
|
||||
.project-list {
|
||||
|
||||
.project-card-grid {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.more-info {
|
||||
border: 0;
|
||||
padding-top: 16px;
|
||||
margin: 16px 0 16px;
|
||||
}
|
||||
|
||||
.headerContent .title .welcome-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,611 +0,0 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="model" v-show="model">
|
||||
<div class="model-show" @click="model = false">
|
||||
<img :src="modelSrc" alt="" @click="model = false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="show-info">
|
||||
<div class="test test1">
|
||||
<vueCropper
|
||||
ref="cropper"
|
||||
:img="option.img"
|
||||
:outputSize="option.size"
|
||||
:outputType="option.outputType"
|
||||
:info="true"
|
||||
:full="option.full"
|
||||
:canMove="option.canMove"
|
||||
:canMoveBox="option.canMoveBox"
|
||||
:fixedBox="option.fixedBox"
|
||||
:original="option.original"
|
||||
:autoCrop="option.autoCrop"
|
||||
:autoCropWidth="option.autoCropWidth"
|
||||
:autoCropHeight="option.autoCropHeight"
|
||||
:centerBox="option.centerBox"
|
||||
:high="option.high"
|
||||
:infoTrue="option.infoTrue"
|
||||
:maxImgSize="option.maxImgSize"
|
||||
@realTime="realTime"
|
||||
@imgLoad="imgLoad"
|
||||
@cropMoving="cropMoving"
|
||||
:enlarge="option.enlarge"
|
||||
:mode="option.mode"
|
||||
:limitMinSize="option.limitMinSize"
|
||||
></vueCropper>
|
||||
</div>
|
||||
<div class="test-button">
|
||||
<button @click="changeImg" class="btn">changeImg</button>
|
||||
<label class="btn" for="uploads">upload</label>
|
||||
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg"
|
||||
@change="uploadImg($event, 1)" ref="uploadImg">
|
||||
<button @click="startCrop" v-if="!crap" class="btn">start</button>
|
||||
<button @click="stopCrop" v-else class="btn">stop</button>
|
||||
<button @click="clearCrop" class="btn">clear</button>
|
||||
<button @click="refreshCrop" class="btn">refresh</button>
|
||||
<button @click="changeScale(1)" class="btn">+</button>
|
||||
<button @click="changeScale(-1)" class="btn">-</button>
|
||||
<button @click="rotateLeft" class="btn">rotateLeft</button>
|
||||
<button @click="rotateRight" class="btn">rotateRight</button>
|
||||
<button @click="finish('base64')" class="btn">preview(base64)</button>
|
||||
<button @click="finish('blob')" class="btn">preview(blob)</button>
|
||||
<button @click="() => option.img = ''" class="btn">清除图片</button>
|
||||
<a @click="down('base64')" class="btn">download(base64)</a>
|
||||
<a @click="down('blob')" class="btn">download(blob)</a>
|
||||
<a :href="downImg" download="demo.png" ref="downloadDom"></a>
|
||||
</div>
|
||||
|
||||
<div class="pre">
|
||||
<section class="pre-item">
|
||||
<p>截图框大小</p>
|
||||
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden','margin': '5px'}">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pre-item">
|
||||
<p>中等大小</p>
|
||||
<div :style="previewStyle1">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pre-item">
|
||||
<p>迷你大小</p>
|
||||
<div :style="previewStyle2">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pre-item" title="zoom: (100 / previews.w)">
|
||||
<p>固定为100宽度</p>
|
||||
<div :style="previewStyle3">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pre-item" title="zoom: (100 / previews.h)">
|
||||
<p>固定为100高度</p>
|
||||
<div :style="previewStyle4">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display:block; width: 100%;">
|
||||
<label class="c-item">
|
||||
<span>图片默认渲染方式</span>
|
||||
<select v-model="option.mode">
|
||||
<option value="contain">contain</option>
|
||||
<option value="cover">cover</option>
|
||||
<option value="400px auto">400px auto</option>
|
||||
<option value="auto 400px">auto 400px</option>
|
||||
<option value="50%">50%</option>
|
||||
<option value="auto 50%">auto 50%</option>
|
||||
</select>
|
||||
<section>
|
||||
类似css background属性设置 设置不符合规范不生效， 参照文档说明
|
||||
</section>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>上传时图片最大大小(默认会压缩尺寸到这个大小)</span>
|
||||
<input type="nubmer" v-model="option.maxImgSize">
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
|
||||
<input type="checkbox" v-model="option.original">
|
||||
<span>original: {{ option.original }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否根据dpr生成适合屏幕的高清图片</span>
|
||||
<input type="checkbox" v-model="option.high">
|
||||
<span>high: {{ option.high }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否输出原图比例的截图</span>
|
||||
<input type="checkbox" v-model="option.full">
|
||||
<span>full: {{ option.full }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图信息展示是否是真实的输出宽高</span>
|
||||
<input type="checkbox" v-model="option.infoTrue">
|
||||
<span>infoTrue: {{ option.infoTrue }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>能否拖动图片</span>
|
||||
<input type="checkbox" v-model="option.canMove">
|
||||
<span>canMove: {{ option.canMove }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>能否拖动截图框</span>
|
||||
<input type="checkbox" v-model="option.canMoveBox">
|
||||
<span>canMoveBox: {{ option.canMoveBox }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图框固定大小</span>
|
||||
<input type="checkbox" v-model="option.fixedBox">
|
||||
<span>fixedBox: {{ option.fixedBox }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否自动生成截图框</span>
|
||||
<input type="checkbox" v-model="option.autoCrop">
|
||||
<span>autoCrop: {{ option.autoCrop }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>自动生成截图框的宽高</span>
|
||||
<span>宽度: </span><input type="number" v-model="option.autoCropWidth">
|
||||
<span>高度: </span><input type="number" v-model="option.autoCropHeight">
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
|
||||
<input type="checkbox" v-model="option.centerBox">
|
||||
<span>centerBox: {{ option.centerBox }}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否按照截图框比例输出 默认为1 </span>
|
||||
<input type="number" v-model="option.enlarge">
|
||||
</label>
|
||||
<p>输出图片格式</p>
|
||||
<label class="c-item">
|
||||
<label>jpg <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
|
||||
<label>png <input type="radio" name="type" value="png" v-model="option.outputType"></label>
|
||||
<label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
|
||||
export default {
|
||||
name: 'ImagCropper',
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
model: false,
|
||||
modelSrc: '',
|
||||
crap: false,
|
||||
previews: {},
|
||||
lists: [
|
||||
{ img: 'https://avatars2.githubusercontent.com/u/15681693?s=460&v=4' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Landscape_1.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Landscape_2.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Landscape_3.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Landscape_4.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Portrait_1.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Portrait_2.jpg' }
|
||||
],
|
||||
option: {
|
||||
img: '',
|
||||
size: 1,
|
||||
full: false,
|
||||
outputType: 'png',
|
||||
canMove: true,
|
||||
fixedBox: false,
|
||||
original: false,
|
||||
canMoveBox: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 150,
|
||||
centerBox: false,
|
||||
high: false,
|
||||
cropData: {},
|
||||
enlarge: 1,
|
||||
mode: 'contain',
|
||||
maxImgSize: 3000,
|
||||
limitMinSize: [100, 120]
|
||||
},
|
||||
example2: {
|
||||
img: 'http://cdn.xyxiao.cn/Landscape_2.jpg',
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: 'jpeg',
|
||||
canScale: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 300,
|
||||
autoCropHeight: 250,
|
||||
fixed: true,
|
||||
// 真实的输出宽高
|
||||
infoTrue: true,
|
||||
fixedNumber: [4, 3]
|
||||
},
|
||||
example3: {
|
||||
img: 'http://cdn.xyxiao.cn/Landscape_1.jpg',
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true
|
||||
},
|
||||
downImg: '#',
|
||||
previewStyle1: {},
|
||||
previewStyle2: {},
|
||||
previewStyle3: {},
|
||||
previewStyle4: {},
|
||||
code0: '',
|
||||
code1: '',
|
||||
code2: '',
|
||||
code3: '',
|
||||
preview3: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeImg () {
|
||||
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
|
||||
},
|
||||
startCrop () {
|
||||
// start
|
||||
this.crap = true
|
||||
this.$refs.cropper.startCrop()
|
||||
},
|
||||
stopCrop () {
|
||||
// stop
|
||||
this.crap = false
|
||||
this.$refs.cropper.stopCrop()
|
||||
},
|
||||
clearCrop () {
|
||||
// clear
|
||||
this.$refs.cropper.clearCrop()
|
||||
},
|
||||
refreshCrop () {
|
||||
// clear
|
||||
this.$refs.cropper.refresh()
|
||||
},
|
||||
changeScale (num) {
|
||||
num = num || 1
|
||||
this.$refs.cropper.changeScale(num)
|
||||
},
|
||||
rotateLeft () {
|
||||
this.$refs.cropper.rotateLeft()
|
||||
},
|
||||
rotateRight () {
|
||||
this.$refs.cropper.rotateRight()
|
||||
},
|
||||
finish (type) {
|
||||
if (type === 'blob') {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
const img = window.URL.createObjectURL(data)
|
||||
this.model = true
|
||||
this.modelSrc = img
|
||||
})
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.model = true
|
||||
this.modelSrc = data
|
||||
})
|
||||
}
|
||||
},
|
||||
// 实时预览函数
|
||||
realTime (data) {
|
||||
const previews = data
|
||||
const h = 0.5
|
||||
const w = 0.2
|
||||
|
||||
this.previewStyle1 = {
|
||||
width: previews.w + 'px',
|
||||
height: previews.h + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: h
|
||||
}
|
||||
|
||||
this.previewStyle2 = {
|
||||
width: previews.w + 'px',
|
||||
height: previews.h + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: w
|
||||
}
|
||||
|
||||
this.previewStyle3 = {
|
||||
width: previews.w + 'px',
|
||||
height: previews.h + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: (100 / previews.w)
|
||||
}
|
||||
|
||||
this.previewStyle4 = {
|
||||
width: previews.w + 'px',
|
||||
height: previews.h + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: (100 / previews.h)
|
||||
}
|
||||
|
||||
this.previews = data
|
||||
},
|
||||
|
||||
finish2 () {
|
||||
this.$refs.cropper2.getCropData(data => {
|
||||
this.model = true
|
||||
this.modelSrc = data
|
||||
})
|
||||
},
|
||||
finish3 () {
|
||||
this.$refs.cropper3.getCropData(data => {
|
||||
this.model = true
|
||||
this.modelSrc = data
|
||||
})
|
||||
},
|
||||
down (type) {
|
||||
// 输出
|
||||
if (type === 'blob') {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
this.downImg = window.URL.createObjectURL(data)
|
||||
if (window.navigator.msSaveBlob) {
|
||||
const blobObject = new Blob([data])
|
||||
window.navigator.msSaveBlob(blobObject, 'demo.png')
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click()
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.downImg = data
|
||||
if (window.navigator.msSaveBlob) {
|
||||
const blobObject = new Blob([data])
|
||||
window.navigator.msSaveBlob(blobObject, 'demo.png')
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
uploadImg (e, num) {
|
||||
// 上传图片
|
||||
// this.option.img
|
||||
const file = e.target.files[0]
|
||||
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
||||
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
|
||||
return false
|
||||
}
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
let data
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data = window.URL.createObjectURL(new Blob([e.target.result]))
|
||||
} else {
|
||||
data = e.target.result
|
||||
}
|
||||
if (num === 1) {
|
||||
this.option.img = data
|
||||
} else if (num === 2) {
|
||||
this.example2.img = data
|
||||
}
|
||||
this.$refs.uploadImg.value = ''
|
||||
}
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file)
|
||||
},
|
||||
imgLoad (msg) {
|
||||
console.log(msg)
|
||||
},
|
||||
|
||||
cropMoving (data) {
|
||||
this.option.cropData = data
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeImg()
|
||||
const list = [].slice.call(document.querySelectorAll('pre code'))
|
||||
list.forEach((val) => {
|
||||
// 这个变量全局搜不到，就选择了单行不校验
|
||||
// eslint-disable-next-line no-undef
|
||||
hljs.highlightBlock(val)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 1200px;
|
||||
margin: auto auto 100px;
|
||||
}
|
||||
|
||||
.test-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
/*background: #fff;*/
|
||||
/*border: 1px solid #c0ccda;*/
|
||||
/*color: #1f2d3d;*/
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 20px 10px 0 0;
|
||||
padding: 9px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
background-color: #50bfff;
|
||||
border-color: #50bfff;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.des {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
code.language-html {
|
||||
padding: 10px 20px;
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
overflow-x: auto;
|
||||
font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo,
|
||||
Lucida, Sans, Type, Writer, Ubuntu, Mono;
|
||||
border-radius: 5px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.show-info {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.show-info h2 {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0;
|
||||
background-image: -webkit-linear-gradient(
|
||||
left,
|
||||
#3498db,
|
||||
#f47920 10%,
|
||||
#d71345 20%,
|
||||
#f7acbc 30%,
|
||||
#ffd400 40%,
|
||||
#3498db 50%,
|
||||
#f47920 60%,
|
||||
#d71345 70%,
|
||||
#f7acbc 80%,
|
||||
#ffd400 90%,
|
||||
#3498db
|
||||
);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-size: 200% 100%;
|
||||
animation: slide 5s infinite linear;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.test {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.model {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.model-show {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.model img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 80%;
|
||||
width: auto;
|
||||
user-select: none;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-size: 20px 20px;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
#eee 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
#eee 75%,
|
||||
#eee 100%
|
||||
),
|
||||
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
|
||||
}
|
||||
|
||||
.c-item {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pre {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pre-item {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.content {
|
||||
max-width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.test {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-col :span="18">
|
||||
<a-spin tip="Loading..." :spinning="spinning">
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<p>
|
||||
<a-divider orientation="left">组一</a-divider>
|
||||
</p>
|
||||
</a-col>
|
||||
<a-col :span="6"></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="12">
|
||||
<template>
|
||||
<div v-for="(fileDetail,index) in dataSource[0].fileDetails" :key="index">
|
||||
<div style="float: left;width:104px;height:104px;margin: 0 8px 8px 0;">
|
||||
<div
|
||||
style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="fileDetail.imgUrl" :preview="dataSource[0].key" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<p>
|
||||
<a-divider orientation="left">组二</a-divider>
|
||||
</p>
|
||||
</a-col>
|
||||
<a-col :span="6"></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="12">
|
||||
<template>
|
||||
<div v-for="(fileDetail,index) in dataSource[1].fileDetails" :key="index">
|
||||
<div style="float: left;width:104px;height:104px;margin: 0 8px 8px 0;">
|
||||
<div
|
||||
style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="fileDetail.imgUrl" :preview="dataSource[1].key" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
<p></p>
|
||||
</a-col>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
|
||||
export default {
|
||||
name: 'ImagPreview',
|
||||
components: {
|
||||
ARow
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '图片预览页面',
|
||||
spinning: false,
|
||||
// 数据集
|
||||
dataSource: [{
|
||||
key: 0,
|
||||
fileDetails: [
|
||||
{
|
||||
imgUrl: 'https://static.jero.com/upload/test/3a4490d5d1cd495b826e528537a47cc1.jpg'
|
||||
},
|
||||
{
|
||||
imgUrl: 'https://static.jero.com/temp/国炬软件logo_1606575029126.png'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
key: 1,
|
||||
fileDetails: [
|
||||
{
|
||||
imgUrl: 'https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
|
||||
},
|
||||
{
|
||||
imgUrl: 'https://static.jero.com/upload/test/1_1588149743473.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
url: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.table-operator {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||||
background-color: #1890FF !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<draggable @end="end" :options="{animation: 300}" v-model="dataSource" style="display: inline-block">
|
||||
<template v-for="(data,index) in dataSource">
|
||||
<div style="float: left;width:150px;height:150px;margin: 0 8px 8px 0;" :key="index">
|
||||
<div style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="data.filePath" preview="index" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-button @click="sureChange" type="primary" style="margin-top: 115px">确定</a-button>
|
||||
</draggable>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<p>拖拽前json数据：</p>
|
||||
<!-- 这个改成v-modal后无法按照展开的json样式进行展示-->
|
||||
<textarea rows="25" style="width: 780px">{{ oldDateSource }}</textarea>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<p>拖拽后json数据：</p>
|
||||
<textarea rows="25" style="width: 780px">{{ newDateSource }}</textarea>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
|
||||
export default {
|
||||
name: 'ImgDragSort',
|
||||
components: {
|
||||
ACol,
|
||||
ARow,
|
||||
draggable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '图片拖拽排序',
|
||||
spinning: false,
|
||||
// 数据集
|
||||
dataSource: [
|
||||
{ id: '000', sort: 0, filePath: 'https://static.jero.com/upload/test/1_1588149743473.jpg' },
|
||||
{ id: '111', sort: 1, filePath: 'https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg' },
|
||||
{ id: '222', sort: 2, filePath: 'https://static.jero.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg' },
|
||||
{ id: '333', sort: 3, filePath: 'https://static.jero.com/temp/国炬软件logo_1606575029126.png' },
|
||||
{ id: '444', sort: 4, filePath: 'https://static.jero.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg' }
|
||||
],
|
||||
oldDateSource: [],
|
||||
newDateSource: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.oldDateSource = this.dataSource
|
||||
},
|
||||
methods: {
|
||||
end: function (evt) {
|
||||
console.log('拖动前的位置' + evt.oldIndex)
|
||||
console.log('拖动后的位置' + evt.newIndex)
|
||||
},
|
||||
sureChange () {
|
||||
for (let i = 0; i < this.dataSource.length; i++) {
|
||||
this.dataSource[i].sort = i
|
||||
}
|
||||
this.newDateSource = this.dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<a-card title="树形结构图片翻页查看" style="min-width: 800px;overflow-x:auto ">
|
||||
<a-row>
|
||||
<!-- 左侧文件树 -->
|
||||
<a-col :span="5">
|
||||
<a-tree
|
||||
showLine
|
||||
:treeData="treeData"
|
||||
:expandedKeys="[expandedKeys[0]]"
|
||||
:selectedKeys="selectedKeys"
|
||||
:style="{'height':'500px','border-right':'2px solid #c1c1c1','overflow-y':'auto'}"
|
||||
@expand="onExpand"
|
||||
@select="this.onSelect"
|
||||
>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
|
||||
<!--右侧缩略图-->
|
||||
<a-col :span="19">
|
||||
<a-row style="margin-top: 10px">
|
||||
<a-col :span="24" style="padding-left: 2%;margin-bottom: 10px">
|
||||
<a-button @click="prev" type="primary"><a-icon type="left" />上一页</a-button>
|
||||
<a-button @click="next" type="primary" style="margin-left: 8px">下一页<a-icon type="right" /></a-button>
|
||||
<span style="margin-left: 15%;font-weight: bolder">{{ navName }}</span>
|
||||
</a-col>
|
||||
<a-col :span="24" style="padding-left: 2%;">
|
||||
<img :src="imgUrl" preview alt="">
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ImgTurnPage',
|
||||
data () {
|
||||
return {
|
||||
description: '图片翻页',
|
||||
// 数据集
|
||||
treeData: [{
|
||||
title: '第一页',
|
||||
key: '0-0',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-0-0',
|
||||
imgUrl: 'https://static.jero.com/upload/test/1_1588149743473.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-0-1',
|
||||
imgUrl: 'https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
|
||||
}]
|
||||
}, {
|
||||
title: '第二页',
|
||||
key: '0-1',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-1-0',
|
||||
imgUrl: 'https://static.jero.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-1-1',
|
||||
imgUrl: 'https://static.jero.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg'
|
||||
}]
|
||||
}, {
|
||||
title: '第三页',
|
||||
key: '0-2',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-2-0',
|
||||
imgUrl: 'https://static.jero.com/upload/test/1374962_1587621329085.jpg'
|
||||
}]
|
||||
}],
|
||||
selectedKeys: [],
|
||||
expandedKeys: [],
|
||||
sort: 0,
|
||||
imgUrl: '',
|
||||
navName: '',
|
||||
imgList: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getImgList()
|
||||
},
|
||||
methods: {
|
||||
getImgList () {
|
||||
let count = 0
|
||||
for (let i = 0; i < this.treeData.length; i++) {
|
||||
for (let j = 0; j < this.treeData[i].children.length; j++) {
|
||||
this.imgList.push({
|
||||
key: this.treeData[i].children[j].key,
|
||||
pkey: this.treeData[i].key,
|
||||
sort: count++,
|
||||
imgUrl: this.treeData[i].children[j].imgUrl,
|
||||
navName: this.treeData[i].title + '/' + this.treeData[i].children[j].title
|
||||
})
|
||||
}
|
||||
}
|
||||
this.setValue(this.imgList[this.sort])
|
||||
},
|
||||
onSelect (selectedKeys) {
|
||||
for (let i = 0; i < this.imgList.length; i++) {
|
||||
if (this.imgList[i].key === selectedKeys[0]) {
|
||||
this.sort = this.imgList[i].sort
|
||||
this.setValue(this.imgList[i])
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
onExpand (expandedKeys) {
|
||||
this.expandedKeys = []
|
||||
if (expandedKeys !== null && expandedKeys !== '') {
|
||||
this.expandedKeys[0] = expandedKeys[1]
|
||||
}
|
||||
},
|
||||
prev () {
|
||||
if (this.sort === 0) {
|
||||
this.sort = this.imgList.length - 1
|
||||
} else {
|
||||
this.sort = this.sort - 1
|
||||
}
|
||||
this.setValue(this.imgList[this.sort])
|
||||
},
|
||||
next () {
|
||||
if (this.sort === this.imgList.length - 1) {
|
||||
this.sort = 0
|
||||
} else {
|
||||
this.sort = this.sort + 1
|
||||
}
|
||||
this.setValue(this.imgList[this.sort])
|
||||
},
|
||||
// 设置受控节点值
|
||||
setValue (value) {
|
||||
this.selectedKeys = []
|
||||
this.imgUrl = value.imgUrl
|
||||
this.selectedKeys[0] = value.key
|
||||
this.expandedKeys[0] = value.pkey
|
||||
this.navName = value.navName
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-tabs>
|
||||
<a-tab-pane tab="基础示例" key="1" forceRender>
|
||||
<j-vxe-demo1/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="高级示例" key="2" forceRender>
|
||||
<j-vxe-demo2/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="联动示例" key="3" forceRender>
|
||||
<j-vxe-demo3/>
|
||||
</a-tab-pane>
|
||||
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JVxeDemo1 from '@views/demo/JVxeDemo/JVxeDemo1'
|
||||
import JVxeDemo2 from '@views/demo/JVxeDemo/JVxeDemo2'
|
||||
import JVxeDemo3 from '@views/demo/JVxeDemo/JVxeDemo3'
|
||||
|
||||
export default {
|
||||
name: 'JVXETableDemo',
|
||||
components: { JVxeDemo2, JVxeDemo1, JVxeDemo3 },
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,356 +0,0 @@
|
||||
<template>
|
||||
<j-vxe-table
|
||||
ref="vTable"
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:drag-sort="true"
|
||||
:keep-source="true"
|
||||
:height="580"
|
||||
:loading="loading"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
style="margin-top: 8px;"
|
||||
@valueChange="handleValueChange">
|
||||
|
||||
<template v-slot:toolbarSuffix>
|
||||
<a-button @click="handleTableCheck">表单验证</a-button>
|
||||
<a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
|
||||
<a-button @click="handleTableGet">获取值</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
|
||||
<a-button @click="handleTableSet">设置值</a-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-slot:checkbox="props">
|
||||
<a-checkbox />
|
||||
</template>
|
||||
|
||||
<template v-slot:action="props">
|
||||
<a @click="handleCK(props)">查看</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定删除吗？" @confirm="handleDL(props)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
|
||||
</j-vxe-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
export default {
|
||||
name: 'JVxeDemo1',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '不可编辑',
|
||||
key: 'normal',
|
||||
type: JVXETypes.normal,
|
||||
params: {
|
||||
key: 'normal',
|
||||
type: JVXETypes.normal
|
||||
},
|
||||
props: {
|
||||
key: 'normal',
|
||||
type: JVXETypes.normal
|
||||
},
|
||||
width: '180px',
|
||||
fixed: 'left',
|
||||
defaultValue: 'normal-new'
|
||||
},
|
||||
{
|
||||
title: '单行文本',
|
||||
key: 'input',
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
key: 'input',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
width: '180px',
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}', // 这是vxe-table的写法
|
||||
validateRules: [
|
||||
{
|
||||
required: true, // 必填
|
||||
message: '请输入${title}' // 显示的文本
|
||||
},
|
||||
{
|
||||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
|
||||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||||
},
|
||||
{
|
||||
unique: true,
|
||||
message: '${title}不能重复'
|
||||
},
|
||||
{
|
||||
handler ({ cellValue, row, column }, callback) {
|
||||
// cellValue 当前校验的值
|
||||
// callback(flag, message) 方法必须执行且只能执行一次
|
||||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||||
// message = 提示的类型，默认使用配置的 message
|
||||
// target 行编辑的实例对象
|
||||
if (cellValue === 'abc') {
|
||||
const flag = false
|
||||
callback(flag, new Error('${title}不能是abc')) // false = 未通过校验
|
||||
} else {
|
||||
const flag = true
|
||||
callback(flag) // true = 通过验证
|
||||
}
|
||||
},
|
||||
message: '${title}默认提示'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '多行文本',
|
||||
key: 'textarea',
|
||||
type: JVXETypes.textarea,
|
||||
params: {
|
||||
key: 'textarea',
|
||||
type: JVXETypes.textarea
|
||||
},
|
||||
width: '200px'
|
||||
},
|
||||
{
|
||||
title: '数字',
|
||||
key: 'number',
|
||||
type: JVXETypes.inputNumber,
|
||||
params: {
|
||||
key: 'number',
|
||||
type: JVXETypes.inputNumber,
|
||||
defaultValue: 32
|
||||
},
|
||||
width: '80px',
|
||||
// 【统计列】sum = 求和、average = 平均值
|
||||
statistics: ['sum', 'average']
|
||||
},
|
||||
{
|
||||
title: '下拉框',
|
||||
key: 'select',
|
||||
type: JVXETypes.select,
|
||||
params: {
|
||||
key: 'select',
|
||||
allowInput: true,
|
||||
type: JVXETypes.select,
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
]
|
||||
},
|
||||
width: '180px',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '下拉框_字典',
|
||||
key: 'select_dict',
|
||||
type: JVXETypes.select,
|
||||
params: {
|
||||
key: 'select_dict',
|
||||
type: JVXETypes.select,
|
||||
options: []
|
||||
},
|
||||
dictCode: 'sex',
|
||||
width: '180px',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '下拉框_多选',
|
||||
key: 'select_multiple',
|
||||
type: JVXETypes.selectMultiple,
|
||||
params: {
|
||||
key: 'select_multiple',
|
||||
defaultValue: ['int', 'boolean'], // 多个默认项
|
||||
type: JVXETypes.selectMultiple,
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
]
|
||||
},
|
||||
width: '205px',
|
||||
// defaultValue: 'string,double,int', // 也可使用这种方式
|
||||
placeholder: '多选'
|
||||
},
|
||||
|
||||
{
|
||||
title: '下拉框_搜索',
|
||||
key: 'select_search',
|
||||
type: JVXETypes.selectSearch,
|
||||
params: {
|
||||
key: 'select_search',
|
||||
type: JVXETypes.selectSearch,
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
]
|
||||
},
|
||||
width: '180px'
|
||||
},
|
||||
{
|
||||
title: '日期时间',
|
||||
key: 'datetime',
|
||||
type: JVXETypes.datetime,
|
||||
params: {
|
||||
key: 'datetime',
|
||||
type: JVXETypes.datetime,
|
||||
defaultValue: '2019-4-30 14:52:22'
|
||||
},
|
||||
width: '200px',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '复选框',
|
||||
key: 'checkbox',
|
||||
type: JVXETypes.checkbox,
|
||||
params: {
|
||||
key: 'checkbox',
|
||||
type: JVXETypes.checkbox,
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
width: '100px',
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
type: JVXETypes.slot,
|
||||
params: {
|
||||
key: 'action',
|
||||
type: JVXETypes.slot
|
||||
},
|
||||
fixed: 'right',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
slotName: 'action'
|
||||
}
|
||||
],
|
||||
dataSource: []
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.randomPage(0, 20, true)
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleCK (props) {
|
||||
this.$message.success('请在控制台查看输出')
|
||||
// 参数介绍：
|
||||
// props.value 当前单元格的值
|
||||
// props.row 当前行的数据
|
||||
// props.rowId 当前行ID
|
||||
// props.rowIndex 当前行下标
|
||||
// props.column 当前列的配置
|
||||
// props.columnIndex 当前列下标
|
||||
// props.$table vxe实例，可以调用vxe内置方法
|
||||
// props.target JVXE实例，可以调用JVXE内置方法
|
||||
// props.caseId JVXE实例唯一ID
|
||||
// props.scrolling 是否正在滚动
|
||||
// props.triggerChange 触发change事件，用于更改slot的值
|
||||
console.log('查看: ', { props })
|
||||
},
|
||||
|
||||
handleDL (props) {
|
||||
// 调用删除方法
|
||||
props.target.removeRows(props.row)
|
||||
},
|
||||
|
||||
handleValueChange (event) {
|
||||
console.log('handleValueChange.event: ', event)
|
||||
},
|
||||
|
||||
/** 表单验证 */
|
||||
handleTableCheck () {
|
||||
this.$refs.vTable.validateTable().then(errMap => {
|
||||
if (errMap) {
|
||||
console.log('表单验证未通过：', { errMap })
|
||||
this.$message.error('验证未通过，请在控制台查看详细')
|
||||
} else {
|
||||
this.$message.success('验证通过')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet () {
|
||||
const values = this.$refs.vTable.getTableData()
|
||||
console.log('获取值:', { values })
|
||||
this.$message.success('获取值成功，请看控制台输出')
|
||||
},
|
||||
|
||||
/** 模拟加载1000条数据 */
|
||||
handleTableSet () {
|
||||
this.randomPage(1, 1000, true)
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomPage (current, pageSize, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
const randomDatetime = () => {
|
||||
const time = randomNumber(1000, 9999999999999)
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
const limit = (current - 1) * pageSize
|
||||
|
||||
const options = ['string', 'int', 'double', 'boolean']
|
||||
|
||||
const begin = Date.now()
|
||||
const values = []
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
normal: `normal-${(limit + i) + 1}`,
|
||||
input: `text-${(limit + i) + 1}`,
|
||||
textarea: `textarea-${(limit + i) + 1}`,
|
||||
number: randomNumber(0, 233),
|
||||
select: options[randomNumber(0, 3)],
|
||||
select_dict: randomNumber(1, 2).toString(),
|
||||
select_multiple: (() => {
|
||||
const length = randomNumber(1, 4)
|
||||
const arr = []
|
||||
for (let j = 0; j < length; j++) {
|
||||
pushIfNotExist(arr, options[randomNumber(0, 3)])
|
||||
}
|
||||
return arr
|
||||
})(),
|
||||
select_search: options[randomNumber(0, 3)],
|
||||
datetime: randomDatetime(),
|
||||
checkbox: ['Y', 'N'][randomNumber(0, 1)]
|
||||
})
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
const end = Date.now()
|
||||
const diff = end - begin
|
||||
|
||||
if (loading && diff < pageSize) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, pageSize - diff)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<j-vxe-table
|
||||
ref="vTable"
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
keep-source
|
||||
:height="484"
|
||||
:loading="loading"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
style="margin-top: 8px;"
|
||||
@pageChange="handlePageChange">
|
||||
|
||||
<template v-slot:toolbarSuffix>
|
||||
<a-button @click="handleTableGet">获取值</a-button>
|
||||
</template>
|
||||
|
||||
</j-vxe-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import moment from 'moment'
|
||||
import { randomNumber, randomUUID } from '@/utils/util'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'JVxeDemo2',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '下拉框_字典表搜索',
|
||||
key: 'select_dict_search',
|
||||
type: JVXETypes.selectDictSearch,
|
||||
width: '200px',
|
||||
// 【字典表配置信息】：数据库表名,显示字段名,存储字段名
|
||||
dict: 'sys_user,realname,username',
|
||||
params: {
|
||||
key: 'select_dict_search',
|
||||
type: JVXETypes.selectDictSearch,
|
||||
dict: 'sys_user,realname,username'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'JPopup',
|
||||
key: 'popup',
|
||||
type: JVXETypes.popup,
|
||||
width: '180px',
|
||||
popupCode: 'demo',
|
||||
field: 'name,sex,age',
|
||||
orgFields: 'name,sex,age',
|
||||
destFields: 'popup,popup_sex,popup_age',
|
||||
params: {
|
||||
key: 'popup',
|
||||
type: JVXETypes.popup,
|
||||
popupCode: 'demo',
|
||||
field: 'name,sex,age',
|
||||
orgFields: 'name,sex,age',
|
||||
destFields: 'popup,popup_sex,popup_age'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'JP-性别',
|
||||
key: 'popup_sex',
|
||||
type: JVXETypes.select,
|
||||
dictCode: 'sex',
|
||||
disabled: true,
|
||||
width: '100px',
|
||||
params: {
|
||||
key: 'popup_sex',
|
||||
type: JVXETypes.select
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'JP-年龄',
|
||||
key: 'popup_age',
|
||||
type: JVXETypes.normal,
|
||||
width: '80px',
|
||||
params: {
|
||||
key: 'popup_age',
|
||||
type: JVXETypes.normal
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '进度条',
|
||||
key: 'progress',
|
||||
type: JVXETypes.progress,
|
||||
minWidth: '120px',
|
||||
params: {
|
||||
key: 'progress',
|
||||
type: JVXETypes.progress
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '单选',
|
||||
key: 'radio',
|
||||
type: JVXETypes.radio,
|
||||
width: '130px',
|
||||
options: [
|
||||
{ text: '男', value: '1' },
|
||||
{ text: '女', value: '2' }
|
||||
],
|
||||
// 允许清除选择（再点一次取消选择）
|
||||
allowClear: true,
|
||||
params: {
|
||||
key: 'radio',
|
||||
type: JVXETypes.radio,
|
||||
options: [
|
||||
{ text: '男', value: '1' },
|
||||
{ text: '女', value: '2' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '上传',
|
||||
key: 'upload',
|
||||
type: JVXETypes.upload,
|
||||
width: '180px',
|
||||
btnText: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG.domianURL + '/sys/common/upload',
|
||||
params: {
|
||||
key: 'upload',
|
||||
type: JVXETypes.upload,
|
||||
token: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '图片上传',
|
||||
key: 'image',
|
||||
type: JVXETypes.image,
|
||||
width: '180px',
|
||||
token: true,
|
||||
params: {
|
||||
key: 'image',
|
||||
type: JVXETypes.image,
|
||||
token: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '文件上传',
|
||||
key: 'file',
|
||||
type: JVXETypes.file,
|
||||
width: '180px',
|
||||
token: true,
|
||||
params: {
|
||||
key: 'file',
|
||||
type: JVXETypes.file,
|
||||
token: true
|
||||
}
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
total: 1000
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.randomPage(this.pagination.current, this.pagination.pageSize, true)
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 当分页参数变化时触发的事件
|
||||
handlePageChange (event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.randomPage(event.current, event.pageSize, true)
|
||||
},
|
||||
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet () {
|
||||
const values = this.$refs.vTable.getTableData()
|
||||
console.log('获取值:', { values })
|
||||
this.$message.success('获取值成功，请看控制台输出')
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomPage (current, pageSize, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
// const randomDatetime = () => {
|
||||
// const time = randomNumber(1000, 9999999999999)
|
||||
// return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
// }
|
||||
//
|
||||
// const limit = (current - 1) * pageSize
|
||||
|
||||
const begin = Date.now()
|
||||
const values = []
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
const radio = randomNumber(0, 2)
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
select_dict_search: ['', 'admin', '', 'jero', ''][randomNumber(0, 4)],
|
||||
progress: randomNumber(0, 100),
|
||||
radio: radio ? radio.toString() : null
|
||||
})
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
const end = Date.now()
|
||||
const diff = end - begin
|
||||
|
||||
if (loading && diff < pageSize) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, pageSize - diff)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,218 +0,0 @@
|
||||
<template>
|
||||
<j-vxe-table
|
||||
ref="vTable"
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
keep-source
|
||||
:height="484"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
:linkage-config="linkageConfig" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
export default {
|
||||
name: 'JVxeDemo3',
|
||||
data () {
|
||||
return {
|
||||
// 联动配置
|
||||
linkageConfig: [
|
||||
{ requestData: this.requestData, key: 's1' },
|
||||
// 可配置多个联动
|
||||
{ requestData: this.loadData, key: 'level1' }
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
params: {
|
||||
key: 'sex',
|
||||
type: JVXETypes.select,
|
||||
options: [],
|
||||
dictCode: 'sex'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '省/直辖市/自治区',
|
||||
key: 's1',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 's2',
|
||||
params: {
|
||||
key: 's1',
|
||||
type: JVXETypes.select,
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 's2'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
key: 's2',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 's3',
|
||||
params: {
|
||||
key: 's2',
|
||||
type: JVXETypes.select,
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 's3'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '县/区',
|
||||
key: 's3',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}',
|
||||
params: {
|
||||
key: 's3',
|
||||
type: JVXETypes.select
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '一级',
|
||||
key: 'level1',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 'level2',
|
||||
params: {
|
||||
key: 'level1',
|
||||
type: JVXETypes.select,
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 'level2'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '二级',
|
||||
key: 'level2',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 'level3',
|
||||
params: {
|
||||
key: 'level2',
|
||||
type: JVXETypes.select,
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 'level3'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '三级',
|
||||
key: 'level3',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
params: {
|
||||
key: 'level3',
|
||||
type: JVXETypes.select
|
||||
}
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{ sex: '1', s1: '110000', s2: '110100', s3: '110101', level1: '1', level2: '3', level3: '7' },
|
||||
{ sex: '2', s1: '130000', s2: '130300', s3: '130303', level1: '2', level2: '6', level3: '14' }
|
||||
],
|
||||
// 模拟数据
|
||||
mockData: [
|
||||
{ text: '北京市', value: '110000', parent: '' },
|
||||
{ text: '天津市', value: '120000', parent: '' },
|
||||
{ text: '河北省', value: '130000', parent: '' },
|
||||
{ text: '上海市', value: '310000', parent: '' },
|
||||
|
||||
{ text: '北京市', value: '110100', parent: '110000' },
|
||||
{ text: '天津市市', value: '120100', parent: '120000' },
|
||||
{ text: '石家庄市', value: '130100', parent: '130000' },
|
||||
{ text: '唐山市', value: '130200', parent: '130000' },
|
||||
{ text: '秦皇岛市', value: '130300', parent: '130000' },
|
||||
{ text: '上海市', value: '310100', parent: '310000' },
|
||||
|
||||
{ text: '东城区', value: '110101', parent: '110100' },
|
||||
{ text: '西城区', value: '110102', parent: '110100' },
|
||||
{ text: '朝阳区', value: '110105', parent: '110100' },
|
||||
{ text: '和平区', value: '120101', parent: '120100' },
|
||||
{ text: '河东区', value: '120102', parent: '120100' },
|
||||
{ text: '河西区', value: '120103', parent: '120100' },
|
||||
{ text: '黄浦区', value: '310101', parent: '310100' },
|
||||
{ text: '徐汇区', value: '310104', parent: '310100' },
|
||||
{ text: '长宁区', value: '310105', parent: '310100' },
|
||||
{ text: '长安区', value: '130102', parent: '130100' },
|
||||
{ text: '桥西区', value: '130104', parent: '130100' },
|
||||
{ text: '新华区', value: '130105', parent: '130100' },
|
||||
{ text: '路南区', value: '130202', parent: '130200' },
|
||||
{ text: '路北区', value: '130203', parent: '130200' },
|
||||
{ text: '古冶区', value: '130204', parent: '130200' },
|
||||
{ text: '海港区', value: '130302', parent: '130300' },
|
||||
{ text: '山海关区', value: '130303', parent: '130300' },
|
||||
{ text: '北戴河区', value: '130304', parent: '130300' }
|
||||
],
|
||||
mockData1: [
|
||||
{ id: '1', name: '图书馆', parentId: '0' },
|
||||
{ id: '2', name: '电影院', parentId: '0' },
|
||||
|
||||
{ id: '3', name: '一楼', parentId: '1' },
|
||||
{ id: '4', name: '二楼', parentId: '1' },
|
||||
{ id: '5', name: '中影星美', parentId: '2' },
|
||||
{ id: '6', name: '万达国际', parentId: '2' },
|
||||
|
||||
{ id: '7', name: '技术图书', parentId: '3' },
|
||||
{ id: '8', name: '财务图书', parentId: '3' },
|
||||
{ id: '9', name: '儿童图书', parentId: '4' },
|
||||
{ id: '10', name: '励志图书', parentId: '4' },
|
||||
{ id: '11', name: '1号厅', parentId: '5' },
|
||||
{ id: '12', name: '2号厅', parentId: '5' },
|
||||
{ id: '13', name: 'I-MAX厅', parentId: '6' },
|
||||
{ id: '14', name: '3D厅', parentId: '6' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 模拟从后台查询数据
|
||||
*/
|
||||
requestData (parent) {
|
||||
return new Promise((resolve) => {
|
||||
const data = this.mockData.filter(i => i.parent === parent)
|
||||
setTimeout(() => {
|
||||
resolve(data)
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
|
||||
// 模拟加载数据，模拟数据格式不同的情况下如何组装数据
|
||||
async loadData (parent) {
|
||||
return new Promise((resolve) => {
|
||||
const parentId = parent === '' ? '0' : parent
|
||||
let data = this.mockData1.filter(i => i.parentId === parentId)
|
||||
data = data.map(item => {
|
||||
return {
|
||||
// 必须包含以下两个字段
|
||||
value: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
resolve(data)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,242 +0,0 @@
|
||||
<template>
|
||||
<a-card title="即时保存示例" :bordered="false">
|
||||
<!--
|
||||
【即时保存大体思路】：
|
||||
1. JVxeTable 上必须加 keep-source 属性
|
||||
2. 监听 edit-closed事件，这个事件是在编辑完成后触发
|
||||
3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作
|
||||
-->
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:toolbarConfig="toolbarConfig"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
keep-source
|
||||
:async-remove="true"
|
||||
:height="340"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
|
||||
@save="handleTableSave"
|
||||
@remove="handleTableRemove"
|
||||
@edit-closed="handleEditClosed"
|
||||
@pageChange="handlePageChange"
|
||||
@selectRowChange="handleSelectRowChange" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 即时保存示例
|
||||
export default {
|
||||
name: 'JSBCDemo',
|
||||
data () {
|
||||
return {
|
||||
// 工具栏的按钮配置
|
||||
toolbarConfig: {
|
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
||||
btn: ['add', 'save', 'remove', 'clearSelection']
|
||||
},
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input, params: { defaultValue: 233, type: JVXETypes.input } },
|
||||
{
|
||||
key: 'payer',
|
||||
title: '付款方',
|
||||
width: '120px',
|
||||
defaultValue: '张三',
|
||||
type: JVXETypes.input,
|
||||
params: { defaultValue: '张三', type: JVXETypes.input }
|
||||
},
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
// 模拟保存单行数据（即时保存）
|
||||
saveRow: '/mock/vxe/immediateSaveRow',
|
||||
// 模拟保存整个表格的数据
|
||||
saveAll: '/mock/vxe/immediateSaveAll'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载数据
|
||||
loadData () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 【整体保存】点击保存按钮时触发的事件
|
||||
handleTableSave ({ $table, target }) {
|
||||
// 校验整个表格
|
||||
$table.validate().then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 获取所有数据
|
||||
const tableData = target.getTableData()
|
||||
console.log('当前保存的数据是：', tableData)
|
||||
// 获取新增的数据
|
||||
const newData = target.getNewData()
|
||||
console.log('-- 新增的数据：', newData)
|
||||
// 获取删除的数据
|
||||
const deleteData = target.getDeleteData()
|
||||
console.log('-- 删除的数据：', deleteData)
|
||||
|
||||
// 【模拟保存】
|
||||
this.loading = true
|
||||
postAction(this.url.saveAll, tableData).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(`保存成功！`)
|
||||
} else {
|
||||
this.$message.warn(`保存失败：` + res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 触发单元格删除事件
|
||||
handleTableRemove (event) {
|
||||
// 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
|
||||
console.log('待删除的数据: ', event.deleteRows)
|
||||
// 也可以只传ID，因为可以根据ID删除
|
||||
const deleteIds = event.deleteRows.map(row => row.id)
|
||||
console.log('待删除的数据ids: ', deleteIds)
|
||||
|
||||
// 模拟请求后台删除
|
||||
this.loading = true
|
||||
window.setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$message.success('删除成功')
|
||||
// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
|
||||
event.confirmRemove()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
// 单元格编辑完成之后触发的事件
|
||||
handleEditClosed (event) {
|
||||
const { $table, row, column } = event
|
||||
|
||||
const field = column.property
|
||||
// 判断单元格值是否被修改
|
||||
if ($table.isUpdateByRow(row, field)) {
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 【模拟保存】
|
||||
const hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
||||
console.log('即时保存数据：', row)
|
||||
postAction(this.url.saveRow, row).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(`"${column.title}"保存成功！`)
|
||||
// 局部更新单元格为已保存状态
|
||||
$table.reloadRow(row, null, field)
|
||||
} else {
|
||||
this.$message.warn(`"${column.title}"保存失败：` + res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
hideLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 当分页参数变化时触发的事件
|
||||
handlePageChange (event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
// 当选择的行变化时触发的事件
|
||||
handleSelectRowChange (event) {
|
||||
this.selectedRows = event.selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,266 +0,0 @@
|
||||
<template>
|
||||
<a-card title="弹出子表示例" :bordered="false">
|
||||
|
||||
<!--
|
||||
【弹出子表大体思路】
|
||||
1. 必须要有 click-row-show-sub-form 属性，如果该属性设为false，那么就不会弹出子表
|
||||
2. 必须要有 sub-form 插槽，用于规定弹出子表的内容
|
||||
3. highlight-current-row 属性可有可无，如果有则点击一行的时候，该行会背景色会常亮
|
||||
-->
|
||||
|
||||
<!--
|
||||
【弹出详细信息（既有主表的数据也有子表的）大体思路】
|
||||
1. 必须要有 click-row-show-main-form 属性，如果该属性设为false，那么就不会弹出详细信息
|
||||
2. 必须要有 main-form 插槽，用于规定弹出子表的内容
|
||||
3. 可选 click-row-show-sub-form 属性，如果有该属性，就会显示子表，否者不显示
|
||||
-->
|
||||
|
||||
<j-vxe-table
|
||||
:toolbar="true" :row-number="true" :row-selection="true"
|
||||
|
||||
highlight-current-row :click-row-show-sub-form="true" :click-row-show-main-form="true"
|
||||
|
||||
:height="750" :loading="loading" :columns="columns" :dataSource="dataSource" @detailsConfirm="handleDetailsConfirm">
|
||||
|
||||
<!-- 主表单 -->
|
||||
<template v-slot:mainForm="{row}">
|
||||
<template v-if="row">
|
||||
<a-form-model ref="form2" :model="row" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="ID" prop="id">
|
||||
<a-input v-model="row.id" disabled />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="序号" prop="num">
|
||||
<a-input v-model="row.num" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="船名" prop="ship_name">
|
||||
<a-input v-model="row.ship_name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="呼叫" prop="call">
|
||||
<a-input v-model="row.call" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="长" prop="len">
|
||||
<a-input v-model="row.len" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="吨" prop="ton">
|
||||
<a-input v-model="row.ton" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="付款方" prop="payer">
|
||||
<a-input v-model="row.payer" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="数" prop="count">
|
||||
<a-input v-model="row.count" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="公司" prop="company">
|
||||
<a-input v-model="row.company" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="动向" prop="trend">
|
||||
<a-input v-model="row.trend" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 子表单 -->
|
||||
<template v-slot:subForm="{row}">
|
||||
<template v-if="loadSubData(row)">
|
||||
<j-vxe-table
|
||||
ref="subFormTable"
|
||||
height="auto"
|
||||
:max-height="350"
|
||||
:loading="subTable.loading"
|
||||
:columns="subTable.columns"
|
||||
:dataSource="subTable.dataSource" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</j-vxe-table>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 弹出子表示例
|
||||
export default {
|
||||
name: 'PopupSubTable',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{ key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'call', title: '呼叫', width: '80px' },
|
||||
{ key: 'len', title: '长', width: '80px' },
|
||||
{ key: 'ton', title: '吨', width: '120px' },
|
||||
{ key: 'payer', title: '付款方', width: '120px' },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
minWidth: '180px',
|
||||
// 是否点击显示详细信息
|
||||
// 只有当前单元格不能编辑的时候才能生效
|
||||
// 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
|
||||
showDetails: true,
|
||||
params: {
|
||||
showDetails: true
|
||||
}
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px' }
|
||||
],
|
||||
// 子表的信息
|
||||
subTable: {
|
||||
currentRowId: null,
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
},
|
||||
// 主表form表单字段
|
||||
mainForm: {
|
||||
id: '',
|
||||
num: '',
|
||||
ship_name: '',
|
||||
call: '',
|
||||
len: '',
|
||||
ton: '',
|
||||
payer: '',
|
||||
count: '',
|
||||
company: '',
|
||||
trend: ''
|
||||
},
|
||||
// form表单 col
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 20 },
|
||||
rules: {
|
||||
num: [
|
||||
{ required: true, message: '必须输入序号' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
log: console.log,
|
||||
|
||||
// 加载数据
|
||||
loadData () {
|
||||
// 封装查询条件
|
||||
const formData = { pageNo: 1, pageSize: 30 }
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 查询子表数据
|
||||
loadSubData (row) {
|
||||
if (row) {
|
||||
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
||||
if (this.subTable.currentRowId === row.id) {
|
||||
return true
|
||||
}
|
||||
this.subTable.currentRowId = row.id
|
||||
const formData = { pageNo: 1, pageSize: 30, parentId: row.id }
|
||||
this.subTable.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.subTable.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.subTable.loading = false
|
||||
})
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
// 详细信息里点了确认按钮
|
||||
handleDetailsConfirm ({ row, $table, callback }) {
|
||||
console.log('保存的数据：', row)
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 校验子表，如果需要的话，可以操作下面这个对象：
|
||||
// this.$refs.subFormTable
|
||||
const flag = true
|
||||
callback(flag)
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$message.success('保存成功')
|
||||
}, 1000)
|
||||
} else {
|
||||
const flag = false
|
||||
callback(flag)
|
||||
this.$message.warn('校验失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<a-card title="无痕刷新示例" :bordered="false">
|
||||
|
||||
<div style="margin-bottom: 8px;">
|
||||
<span>启用数据变动特效：</span>
|
||||
<a-switch v-model="reloadEffect" />
|
||||
</div>
|
||||
|
||||
<!--
|
||||
【即时保存大体思路】：
|
||||
1. 该功能依赖于【即时保存】功能，请先看即时保存示例
|
||||
2. 必须要有 socket-reload 属性，且设为 true
|
||||
3. 必须要有 socket-key 属性，该属性为当前表格的唯一标识，
|
||||
系统会自动更新所有 socket-key 相同的表格
|
||||
4. 在局部保存 edit-closed 事件中，
|
||||
保存成功后调用 socketSendUpdateRow 方法，将当前 row 传递过去即可 （见第 108 行）
|
||||
-->
|
||||
<j-vxe-table
|
||||
ref="table"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
|
||||
keep-source
|
||||
socket-reload
|
||||
socket-key="demo-socket-reload"
|
||||
:reload-effect="reloadEffect"
|
||||
|
||||
:height="340"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
@edit-closed="handleEditClosed"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 无痕刷新示例
|
||||
export default {
|
||||
name: 'SocketReload',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{ key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{ key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
},
|
||||
// 是否启用日历刷新效果
|
||||
reloadEffect: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
// 加载数据
|
||||
loadData () {
|
||||
const formData = { pageNo: 1, pageSize: 200 }
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 单元格编辑完成之后触发的事件
|
||||
handleEditClosed (event) {
|
||||
const { $table, row, column } = event
|
||||
|
||||
const field = column.property
|
||||
// 判断单元格值是否被修改
|
||||
if ($table.isUpdateByRow(row, field)) {
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 【模拟保存】（此处需要替换成真实的请求）
|
||||
const hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
||||
setTimeout(() => {
|
||||
hideLoading()
|
||||
this.$message.success(`"${column.title}"保存成功！`)
|
||||
// 局部更新单元格为已保存状态
|
||||
$table.reloadRow(row, null, field)
|
||||
// 发送更新消息
|
||||
this.$refs.table.socketSendUpdateRow(row)
|
||||
}, 555)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,311 +0,0 @@
|
||||
<template>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:toolbarConfig="toolbarConfig"
|
||||
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
row-selection-type="radio"
|
||||
highlight-current-row
|
||||
:click-select-row="true"
|
||||
:height="tableHeight"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
:expand-config="expandConfig"
|
||||
style="margin-bottom: 8px"
|
||||
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange"></j-vxe-table>
|
||||
|
||||
<a-tabs v-show="subTabs.show" :class="{'sub-tabs':true, 'un-expand': !subTabs.expand}">
|
||||
<a-tab-pane tab="子表1" key="1">
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
height="auto"
|
||||
:maxHeight="350"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange"
|
||||
@selectRowChange="handleTable2SelectRowChange" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="子表2" key="2">
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
|
||||
export default {
|
||||
name: 'ErpTemplate',
|
||||
data () {
|
||||
return {
|
||||
toolbarConfig: {
|
||||
// prefix 前缀；suffix 后缀
|
||||
slot: ['prefix', 'suffix'],
|
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
||||
btn: ['add', 'remove', 'clearSelection']
|
||||
},
|
||||
|
||||
expandConfig: {
|
||||
// 是否只能同时展开一行
|
||||
accordion: true
|
||||
},
|
||||
|
||||
// 子表 tabs
|
||||
subTabs: {
|
||||
show: false,
|
||||
// 是否展开
|
||||
expand: true,
|
||||
// 是否自动展开
|
||||
autoExpand: true
|
||||
},
|
||||
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
showTotal: (total, range) => {
|
||||
// 此处为 jsx 语法
|
||||
const text = <span>{range[0] + '-' + range[1] + ' 共 ' + total + ' 条'}</span>
|
||||
// 判断子表是否显示，如果显示就渲染展开收起按钮
|
||||
if (this.subTabs.show) {
|
||||
const expand = (<span>
|
||||
<a-button type="link" onClick={this.handleToggleTabs}>
|
||||
<a-icon type={this.subTabs.expand ? 'up' : 'down'} />
|
||||
<span>{this.subTabs.expand ? '收起' : '展开'}</span>
|
||||
</a-button>
|
||||
<a-checkbox vModel={this.subTabs.autoExpand}>自动展开</a-checkbox>
|
||||
</span>)
|
||||
// 返回多个dom用数组
|
||||
return [expand, text]
|
||||
} else {
|
||||
// 直接返回单个dom
|
||||
return text
|
||||
}
|
||||
}
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
currentRowId: null,
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 10, pageSizeOptions: ['5', '10', '20', '30'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
currentSubRow: null,
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableHeight () {
|
||||
const { show, expand } = this.subTabs
|
||||
return show ? (expand ? 350 : 482) : 482
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 查询子表数据
|
||||
loadSubData (row) {
|
||||
if (row) {
|
||||
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
||||
if (this.table2.currentRowId === row.id) {
|
||||
return true
|
||||
}
|
||||
this.table2.currentRowId = row.id
|
||||
this.loadTable2Data()
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
// 查询子表数据
|
||||
loadTable2Data () {
|
||||
const table2 = this.table2
|
||||
const formData = {
|
||||
parentId: table2.currentRowId,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
table2.selectedRows = []
|
||||
table2.dataSource = res.result.records
|
||||
table2.pagination.total = res.result.total
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.table1.selectedRows = event.selectedRows
|
||||
this.subTabs.show = true
|
||||
if (this.subTabs.autoExpand) {
|
||||
this.subTabs.expand = true
|
||||
}
|
||||
this.loadSubData(event.selectedRows[0])
|
||||
},
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange (event) {
|
||||
this.table2.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// 展开或收起子表tabs
|
||||
handleToggleTabs () {
|
||||
this.subTabs.expand = !this.subTabs.expand
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sub-tabs {
|
||||
&.un-expand {
|
||||
/deep/ .ant-tabs-content {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/deep/ .ant-tabs-bar {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .ant-tabs-ink-bar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .ant-tabs-tab {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-tabs>
|
||||
<a-tab-pane tab="ERP布局模板" key="erp">
|
||||
<erp-template/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板1" key="1">
|
||||
<template1/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板2" key="2">
|
||||
<template2/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板3" key="3">
|
||||
<template3/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板4" key="4">
|
||||
<template4/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板5" key="5">
|
||||
<template5/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Template1 from './Template1'
|
||||
import Template2 from './Template2'
|
||||
import Template3 from './Template3'
|
||||
import Template4 from './Template4'
|
||||
import Template5 from './Template5'
|
||||
import ErpTemplate from './ErpTemplate'
|
||||
|
||||
export default {
|
||||
name: 'LayoutDemo',
|
||||
components: { Template5, Template4, Template3, Template2, Template1, ErpTemplate }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,331 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-row :gutter="8">
|
||||
<!-- 这里是父级节点 -->
|
||||
<a-col :span="24" style="margin-bottom: 4px;">
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="340"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange" />
|
||||
</a-col>
|
||||
<!-- 这里是子级节点 -->
|
||||
<a-col :span="12">
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="340"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange"
|
||||
@selectRowChange="handleTable2SelectRowChange"></j-vxe-table>
|
||||
</a-col>
|
||||
<!-- 这里是孙级节点 -->
|
||||
<a-col :span="12">
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:height="340"
|
||||
:loading="table3.loading"
|
||||
:columns="table3.columns"
|
||||
:dataSource="table3.dataSource"
|
||||
:pagination="table3.pagination"
|
||||
@pageChange="handleTable3PageChange"></j-vxe-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】上面父、左下子、右下孙
|
||||
export default {
|
||||
name: 'Template1',
|
||||
data () {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
formatter ({ cellValue, row }) {
|
||||
let foo = ''
|
||||
if (row.company === '佧伒侾佯有限公司') {
|
||||
foo += '-233'
|
||||
}
|
||||
return cellValue + foo
|
||||
},
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber, params: { type: JVXETypes.inputNumber } },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 孙级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table3: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'power', title: '马力', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'nature', title: '性质', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'departure_time', title: '发船时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
'table1.lastRow' () {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 监听table2 【子表】选择的数据发生了变化
|
||||
'table2.lastRow' () {
|
||||
this.loadTable3Data()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 当table1【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// 加载table2【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table2, event)
|
||||
},
|
||||
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// 加载table3【孙表】的数据，根据子表的id进行查询
|
||||
loadTable3Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table2.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table3.pagination.total = 0
|
||||
this.table3.dataSource = []
|
||||
this.table3.selectedRows = []
|
||||
return
|
||||
} else if (this.table2.lastRow == null) {
|
||||
this.table2.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table2.lastRow.id,
|
||||
pageNo: this.table3.pagination.current,
|
||||
pageSize: this.table3.pagination.pageSize
|
||||
}
|
||||
this.table3.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table3.pagination.total = res.result.total
|
||||
this.table3.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table3.loading = false
|
||||
})
|
||||
},
|
||||
// 当table3【孙表】分页参数变化时触发的事件
|
||||
handleTable3PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table3.pagination.current = event.current
|
||||
this.table3.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable3Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange (table, event) {
|
||||
const { row, action, selectedRows, $table } = event
|
||||
// 获取最后一个选中的
|
||||
const lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
@@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-row :gutter="8">
|
||||
<!-- 左侧父 -->
|
||||
<a-col :span="12">
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="790"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
|
||||
<!-- 左侧选择的数据展示在这里 -->
|
||||
<j-vxe-table
|
||||
:row-number="true" :height="381"
|
||||
|
||||
:columns="table1.columns" :dataSource="table1.selectedRows" style="margin: 40px 0 8px;" />
|
||||
|
||||
<!-- 右下子 -->
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
:height="361"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange"
|
||||
@selectRowChange="handleTable2SelectRowChange" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】 左边选择后，记录选到右侧，右侧是父、子
|
||||
export default {
|
||||
name: 'Template2',
|
||||
data () {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
'table1.lastRow' () {
|
||||
this.loadTable2Data()
|
||||
}
|
||||
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 加载table2【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange (event) {
|
||||
this.table2.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
// 当table1【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange (table, event) {
|
||||
const { row, action, selectedRows, $table } = event
|
||||
// 获取最后一个选中的
|
||||
const lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,240 +0,0 @@
|
||||
<template>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="12">
|
||||
<!-- 左上父 -->
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="357"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
style="margin-bottom: 8px;"
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange" />
|
||||
|
||||
<!-- 左下子 -->
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
:height="356"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange" />
|
||||
</a-col>
|
||||
<!-- 左侧父选择的数据展示在这里 -->
|
||||
<a-col :span="12">
|
||||
<j-vxe-table :row-number="true" :height="800" :columns="table1.columns" :dataSource="table1.selectedRows" style="margin-top: 40px;" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】左侧上边是主表、下边是子表，右侧是选中数据
|
||||
export default {
|
||||
name: 'Template3',
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
// 主表的配置信息
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{ key: 'company', title: '公司', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 子表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
'table1.lastRow' () {
|
||||
this.loadTable2Data()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1（主表）的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
// 加载table2（子表）的数据，根据主表的id进行查询
|
||||
loadTable2Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table1【主表】当分页参数变化时触发的事件
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
// 分页后重置选择
|
||||
this.table1.selectedRows = []
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// table2【子表】当分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange (table, event) {
|
||||
const { row, action, selectedRows, $table } = event
|
||||
// 获取最后一个选中的
|
||||
const lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,342 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="12">
|
||||
<!-- 左上父 -->
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="340"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
style="margin-bottom: 8px;"
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange" />
|
||||
<!-- 左下子 -->
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
:height="350"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange" />
|
||||
</a-col>
|
||||
<!-- 左侧父选择的数据展示在这里 -->
|
||||
<a-col :span="12">
|
||||
<!-- 右上父 -->
|
||||
<j-vxe-table
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="340"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.selectedRows"
|
||||
style="margin: 40px 0 8px;"
|
||||
@selectRowChange="handleTable3SelectRowChange" />
|
||||
<!-- 右下子 -->
|
||||
<j-vxe-table
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:click-select-row="true"
|
||||
:height="350"
|
||||
:loading="table4.loading"
|
||||
:columns="table4.columns"
|
||||
:dataSource="table4.dataSource"
|
||||
:pagination="table4.pagination"
|
||||
style="margin: 48px 0 0;" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'Template4',
|
||||
data () {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
table3: {
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: []
|
||||
},
|
||||
table4: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 左上【主表】选择的数据发生了变化
|
||||
'table1.lastRow' () {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 监听table3 右上【主表】选择的数据发生了变化
|
||||
'table3.lastRow' () {
|
||||
this.loadTable4Data()
|
||||
}
|
||||
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1左上【主表】的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 当table1左上【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
// table1左上【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// 加载table2左下【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 当table2左下【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// table3右上【主表】当选择的行变化时触发的事件
|
||||
handleTable3SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table3, event)
|
||||
},
|
||||
|
||||
// 加载table4右下【子表】的数据，根据主表的id进行查询
|
||||
loadTable4Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table3.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table4.pagination.total = 0
|
||||
this.table4.dataSource = []
|
||||
this.table4.selectedRows = []
|
||||
return
|
||||
} else if (this.table3.lastRow == null) {
|
||||
this.table3.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table3.lastRow.id,
|
||||
pageNo: this.table4.pagination.current,
|
||||
pageSize: this.table4.pagination.pageSize
|
||||
}
|
||||
this.table4.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table4.pagination.total = res.result.total
|
||||
this.table4.dataSource = res.result.records
|
||||
this.table4.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table4.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 当table4右下【子表】分页参数变化时触发的事件
|
||||
handleTable4PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table4.pagination.current = event.current
|
||||
this.table4.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable4Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange (table, event) {
|
||||
const { row, action, selectedRows, $table } = event
|
||||
// 获取最后一个选中的
|
||||
const lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,227 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="6">
|
||||
<!-- 加上 show-line 属性后，展开收起图标自动变成 +- 样式 -->
|
||||
<a-tree
|
||||
class="template-5-tree"
|
||||
:tree-data="treeData"
|
||||
:show-icon="true"
|
||||
show-line
|
||||
:expandedKeys="treeExpandedKeys"
|
||||
:selectedKeys="[pagination.current]"
|
||||
@expand="handleTreeExpand"
|
||||
@select="handleTreeSelect">
|
||||
<!-- 自定义子节点图标 -->
|
||||
<a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;" />
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<j-vxe-table
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
:height="750"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
@pageChange="handleTablePageChange" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】左侧为树，右侧为行编辑
|
||||
export default {
|
||||
name: 'Template5',
|
||||
data () {
|
||||
return {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 50,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['50'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input,
|
||||
params: {
|
||||
type: JVXETypes.input
|
||||
}
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input, params: { type: JVXETypes.input } }
|
||||
],
|
||||
// 树的数据，这里模拟分页固定数据，实际情况应该是后台查出来的数据
|
||||
treeData: [
|
||||
// 第1级数据
|
||||
{
|
||||
title: '1-10页',
|
||||
key: '1-10',
|
||||
// 第2级数据
|
||||
children: [
|
||||
{ title: '第 1 页', key: 1, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 2 页', key: 2, slots: { icon: 'myIcon' } },
|
||||
{
|
||||
title: '第 3 页',
|
||||
key: 3,
|
||||
slots: { icon: 'myIcon' },
|
||||
// 第3级数据
|
||||
children: [
|
||||
{ title: '第 333 页', key: 333, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 444 页', key: 444, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 555 页', key: 555, slots: { icon: 'myIcon' } }
|
||||
// 第4第5级以此类推，加上 children 属性即可
|
||||
]
|
||||
},
|
||||
{ title: '第 4 页', key: 4, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 5 页', key: 5, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 6 页', key: 6, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 7 页', key: 7, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 8 页', key: 8, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 9 页', key: 9, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 10 页', key: 10, slots: { icon: 'myIcon' } }
|
||||
],
|
||||
slots: { icon: 'myIcon' }
|
||||
},
|
||||
{
|
||||
title: '11-20页',
|
||||
key: '11-20',
|
||||
children: [
|
||||
{ title: '第 11 页', key: 11, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 12 页', key: 12, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 13 页', key: 13, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 14 页', key: 14, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 15 页', key: 15, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 16 页', key: 16, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 17 页', key: 17, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 18 页', key: 18, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 19 页', key: 19, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 20 页', key: 20, slots: { icon: 'myIcon' } }
|
||||
],
|
||||
slots: { icon: 'myIcon' }
|
||||
}
|
||||
],
|
||||
// 树展开的列，默认 1-10
|
||||
treeExpandedKeys: ['1-10'],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载行编辑的数据
|
||||
loadData () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleTablePageChange (event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadData()
|
||||
// 判断树展开的key
|
||||
if (event.current <= 10) {
|
||||
this.treeExpandedKeys = ['1-10']
|
||||
} else {
|
||||
this.treeExpandedKeys = ['11-20']
|
||||
}
|
||||
},
|
||||
|
||||
// 树被选择触发的事件
|
||||
handleTreeSelect (selectedKeys) {
|
||||
const key = selectedKeys[0]
|
||||
if (typeof key === 'string') {
|
||||
// 控制树展开为当前选择的列
|
||||
this.treeExpandedKeys = selectedKeys
|
||||
} else {
|
||||
this.pagination.current = key
|
||||
this.loadData()
|
||||
}
|
||||
},
|
||||
|
||||
// 树被选择触发的事件
|
||||
handleTreeExpand (expandedKeys) {
|
||||
this.treeExpandedKeys = expandedKeys
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/** 隐藏文件小图标 */
|
||||
.template-5-tree.ant-tree {
|
||||
li span.ant-tree-switcher.ant-tree-switcher-noop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,359 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="用户名">
|
||||
<j-input placeholder="请输入名称模糊查询" v-model="queryParam.name"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="年龄">
|
||||
<!-- <a-input placeholder="请输入名称查询" v-model="queryParam.age"></a-input>-->
|
||||
<a-input placeholder="最小年龄" type="ge" v-model="queryParam.age_begin" style="width:calc(50% - 15px);"></a-input>
|
||||
<span class="group-query-strig">~</span>
|
||||
<a-input placeholder="最大年龄" type="le" v-model="queryParam.age_end" style="width:calc(50% - 15px);"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="toggleSearchStatus">
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="生日">
|
||||
<a-range-picker v-model="queryParam.birthdayRange"
|
||||
format="YYYY-MM-DD"
|
||||
:placeholder="['开始时间', '结束时间']"
|
||||
@change="onBirthdayChange" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="性别">
|
||||
<j-dict-select-tag v-model="queryParam.sex" placeholder="请选择性别" dictCode="sex"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="选择用户">
|
||||
<j-dict-select-tag v-model="queryParam.id" placeholder="请选择用户" dictCode="demo,name,id"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a @click="handleToggleSearch" style="margin-right: 28px">
|
||||
{{ toggleSearchStatus ? '收起' : '展开' }}
|
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||
</a>
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" class="resetBtn">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="plus" @click="onetomany">一对多</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" :before-upload='beforeUpload'>
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<!-- 高级查询区域 -->
|
||||
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
|
||||
<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>
|
||||
<span style="float:right;">
|
||||
<a @click="loadData()"><a-icon type="sync" />刷新</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popover title="自定义列" trigger="click" placement="leftBottom">
|
||||
<template slot="content">
|
||||
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
|
||||
<a-row style="width: 400px">
|
||||
<template v-for="(item, i) in defColumns">
|
||||
<template v-if="item.key + '' !== 'rowIndex'&& item.dataIndex + '' !== 'action'">
|
||||
<a-col :key="i" :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
|
||||
</template>
|
||||
</template>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</template>
|
||||
<a><a-icon type="setting" />设置</a>
|
||||
</a-popover>
|
||||
</span>
|
||||
</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">
|
||||
|
||||
<div slot="filterDropdown">
|
||||
<a-card>
|
||||
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
|
||||
<a-row style="width: 400px">
|
||||
<template v-for="(item, i) in defColumns">
|
||||
<template v-if="item.key + '' !=='rowIndex'&& item.dataIndex + '' !== 'action'">
|
||||
<a-col :key="i" :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
|
||||
</template>
|
||||
</template>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</a-card>
|
||||
</div>
|
||||
<a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color: '#108ee9' }" />
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeroDemo-modal ref="modalForm" @ok="modalFormOk"></jeroDemo-modal>
|
||||
|
||||
<!-- 一对多表单区域 -->
|
||||
<JeroDemoTabsModal ref="jeroDemoTabsModal" @ok="modalFormOk"></JeroDemoTabsModal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroDemoModal from './modules/JeroDemoModal'
|
||||
import JSuperQuery from '@/components/jero/JSuperQuery.vue'
|
||||
import JInput from '@/components/jero/JInput.vue'
|
||||
import JeroDemoTabsModal from './modules/JeroDemoTabsModal'
|
||||
import { filterDictTextByCache, initDictOptions } from '@/components/dict/JDictSelectUtil'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import Vue from 'vue'
|
||||
import { filterObj } from '@/utils/util'
|
||||
|
||||
// 高级查询modal需要参数
|
||||
const superQueryFieldList = [
|
||||
{
|
||||
type: 'string',
|
||||
value: 'name',
|
||||
text: '用户名'
|
||||
}, {
|
||||
type: 'int',
|
||||
value: 'age',
|
||||
text: '年龄'
|
||||
}, {
|
||||
type: 'date',
|
||||
value: 'birthday',
|
||||
text: '生日'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'JeroDemoList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroDemoModal,
|
||||
JSuperQuery,
|
||||
JeroDemoTabsModal,
|
||||
JInput
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '单表示例列表',
|
||||
// 字典数组缓存
|
||||
sexDictOptions: [],
|
||||
importExcelUrl: `${window._CONFIG.domianURL}/test/jeroDemo/importExcel`,
|
||||
// 表头
|
||||
columns: [],
|
||||
// 列设置
|
||||
settingColumns: [],
|
||||
// 列定义
|
||||
defColumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
align: 'center',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '关键词',
|
||||
align: 'center',
|
||||
dataIndex: 'keyWord'
|
||||
},
|
||||
{
|
||||
title: '打卡时间',
|
||||
align: 'center',
|
||||
dataIndex: 'punchTime'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex',
|
||||
customRender: (text) => {
|
||||
// 字典值替换通用方法
|
||||
return filterDictTextByCache('sex', text)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
align: 'center',
|
||||
dataIndex: 'age'
|
||||
},
|
||||
{
|
||||
title: '生日',
|
||||
align: 'center',
|
||||
dataIndex: 'birthday'
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
align: 'center',
|
||||
dataIndex: 'email'
|
||||
},
|
||||
{
|
||||
title: '个人简介',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: {
|
||||
filterDropdown: 'filterDropdown',
|
||||
filterIcon: 'filterIcon',
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '/test/jeroDemo/list',
|
||||
delete: '/test/jeroDemo/delete',
|
||||
deleteBatch: '/test/jeroDemo/deleteBatch',
|
||||
exportXlsUrl: '/test/jeroDemo/exportXls'
|
||||
},
|
||||
fieldList: superQueryFieldList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams () {
|
||||
// 高级查询器
|
||||
const sqp = {}
|
||||
if (this.superQueryParams) {
|
||||
sqp.superQueryParams = encodeURI(this.superQueryParams)
|
||||
sqp.superQueryMatchType = this.superQueryMatchType
|
||||
}
|
||||
const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
|
||||
|
||||
param.field = this.getQueryField()
|
||||
param.pageNo = this.ipagination.current
|
||||
param.pageSize = this.ipagination.pageSize
|
||||
delete param.birthdayRange // 范围参数不传递后台
|
||||
return filterObj(param)
|
||||
},
|
||||
initDictConfig () {
|
||||
console.log('--我才是真的方法!--')
|
||||
// 初始化字典 - 性别
|
||||
initDictOptions('sex').then((res) => {
|
||||
if (res.success) {
|
||||
this.sexDictOptions = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
onetomany: function () {
|
||||
this.$refs.jeroDemoTabsModal.add()
|
||||
this.$refs.jeroDemoTabsModal.title = '编辑'
|
||||
},
|
||||
onBirthdayChange: function (value, dateString) {
|
||||
console.log(dateString[0], dateString[1])
|
||||
this.queryParam.birthday_begin = dateString[0]
|
||||
this.queryParam.birthday_end = dateString[1]
|
||||
},
|
||||
// 列设置更改事件
|
||||
onColSettingsChange (checkedValues) {
|
||||
const key = this.$route.name + ':colsettings'
|
||||
Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
|
||||
this.settingColumns = checkedValues
|
||||
this.columns = this.defColumns.filter(item => {
|
||||
if (item.key + '' === 'rowIndex' || item.dataIndex + '' === 'action') {
|
||||
return true
|
||||
}
|
||||
return this.settingColumns.includes(item.dataIndex)
|
||||
})
|
||||
},
|
||||
initColumns () {
|
||||
// 权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
|
||||
// this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
|
||||
|
||||
const key = this.$route.name + ':colsettings'
|
||||
const colSettings = Vue.ls.get(key)
|
||||
if (colSettings === null || colSettings === undefined) {
|
||||
const allSettingColumns = []
|
||||
this.defColumns.forEach(function (item) {
|
||||
allSettingColumns.push(item.dataIndex)
|
||||
})
|
||||
this.settingColumns = allSettingColumns
|
||||
this.columns = this.defColumns
|
||||
} else {
|
||||
this.settingColumns = colSettings
|
||||
this.columns = this.defColumns.filter(item => {
|
||||
if (item.key + '' === 'rowIndex' || item.dataIndex + '' === 'action') {
|
||||
return true
|
||||
}
|
||||
return !!colSettings.includes(item.dataIndex)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initColumns()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-tabs>
|
||||
|
||||
<a-tab-pane tab="普通列表" key="1">
|
||||
<default-table/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="只读列表" key="2">
|
||||
<read-only-table/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="三级联动" key="3">
|
||||
<three-linkage/>
|
||||
</a-tab-pane>
|
||||
|
||||
</a-tabs>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DefaultTable from './modules/JEditableTable/DefaultTable'
|
||||
import ReadOnlyTable from './modules/JEditableTable/ReadOnlyTable'
|
||||
import ThreeLinkage from './modules/JEditableTable/ThreeLinkage'
|
||||
|
||||
export default {
|
||||
name: 'JeroEditableTableExample',
|
||||
components: { DefaultTable, ReadOnlyTable, ThreeLinkage },
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,192 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="24" >
|
||||
<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" class="resetBtn">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('一对多示例')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel" :before-upload='beforeUpload'>
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
|
||||
<!-- <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
|
||||
<!-- <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeroOrderMain-modal ref="modalForm" @ok="modalFormOk"></jeroOrderMain-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderMainModal from './modules/JeroOrderMainModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: 'JeroOrderMainList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderMainModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
importExcelUrl: `${window._CONFIG.domianURL}/test/jeroOrderMain/importExcel`,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: 'center',
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = ''
|
||||
if (text === '1') {
|
||||
re = '国内订单'
|
||||
} else if (text === '2') {
|
||||
re = '国际订单'
|
||||
}
|
||||
return re
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: 'center',
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: 'center',
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
|
||||
url: {
|
||||
list: '/test/jeroOrderMain/list',
|
||||
delete: '/test/jeroOrderMain/delete',
|
||||
deleteBatch: '/test/jeroOrderMain/deleteBatch',
|
||||
exportXlsUrl: '/test/jeroOrderMain/exportXls'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
.ant-card-body .table-operator{
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.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>
|
||||
@@ -1,217 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<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" class="resetBtn">重置</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>-->
|
||||
<!-- <span>已选择</span>-->
|
||||
<!-- <a style="font-weight: 600">-->
|
||||
<!-- {{ selectedRowKeys.length }}-->
|
||||
<!-- </a>-->
|
||||
<!-- <span>项</span>-->
|
||||
<!-- <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jero-order-modal-for-j-editable-table ref="modalForm" @ok="modalFormOk"/>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import JeroOrderModalForJEditableTable from './modules/JeroOrderModalForJEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'JeroOrderMainListForJEditableTable',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderModalForJEditableTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
// 请求参数
|
||||
url: {
|
||||
list: '/test/jeroOrderMain/list',
|
||||
delete: '/test/jeroOrderMain/delete',
|
||||
deleteBatch: '/test/jeroOrderMain/deleteBatch'
|
||||
},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: 'center',
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = ''
|
||||
if (text === '1') {
|
||||
re = '国内订单'
|
||||
} else if (text === '2') {
|
||||
re = '国际订单'
|
||||
}
|
||||
return re
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: 'center',
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: 'center',
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
initDictConfig () {
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -1,307 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
:destroyOnClose="true"
|
||||
:maskClosable="false"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model">
|
||||
<!-- 主表单区域 -->
|
||||
<a-row class="form-row" :gutter="0">
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单号" prop="orderCode" :rules="[{ required: true, message: '请输入订单号!' }]">
|
||||
<a-input placeholder="请输入订单号" v-model="model.orderCode" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单类型">
|
||||
<a-select placeholder="请选择订单类型" v-model="model.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单日期">
|
||||
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-model="model.orderDate" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="0">
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单金额">
|
||||
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-model="model.orderMoney" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单备注">
|
||||
<a-input placeholder="请输入订单备注" v-model="model.content" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
|
||||
<!-- 子表单区域 -->
|
||||
<a-tabs v-model="activeKey" @change="handleChangeTabs">
|
||||
<a-tab-pane tab="客户信息" key="1" :forceRender="true">
|
||||
<j-vxe-table
|
||||
ref="editableTable1"
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
keep-source
|
||||
:height="300"
|
||||
:loading="table1.loading"
|
||||
:dataSource="table1.dataSource"
|
||||
:columns="table1.columns"
|
||||
style="margin-top: 8px;" />
|
||||
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="机票信息" key="2" :forceRender="true">
|
||||
<j-vxe-table
|
||||
ref="editableTable2"
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
keep-source
|
||||
:height="300"
|
||||
:loading="table2.loading"
|
||||
:dataSource="table2.dataSource"
|
||||
:columns="table2.columns"
|
||||
style="margin-top: 8px;" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { VALIDATE_FAILED, getRefPromise, validateFormModelAndTables } from '@/components/jero/JVxeTable/utils/vxeUtils'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
export default {
|
||||
name: 'jeroOrderModalForJvexTable',
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: JVXETypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: JVXETypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable () {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
},
|
||||
|
||||
add () {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
// editableTables[0].add()
|
||||
// editableTables[1].add()
|
||||
})
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
const params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.getAllTable().then(() => {
|
||||
this.table1.dataSource = []
|
||||
this.table2.dataSource = []
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData (url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs (key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields () {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form, this.model, tables)
|
||||
}).then(allValues => {
|
||||
const formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_FAILED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData (allValues) {
|
||||
const orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].tableData,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].tableData
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit (formData) {
|
||||
let url = this.url.add
|
||||
const method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
// method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,123 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 左侧文件树 -->
|
||||
<a-col :span="4" class="clName">
|
||||
<a-tree
|
||||
:treeData="treeData"
|
||||
:defaultExpandAll="defaultExpandAll"
|
||||
@select="this.onSelect"
|
||||
style="height: 500px;overflow-y: auto;"
|
||||
>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<!-- 中间面板 -->
|
||||
<a-col :span="2"/>
|
||||
<!--右侧缩略图-->
|
||||
<a-col :span="18">
|
||||
<a-spin tip="Loading..." :spinning="spinning">
|
||||
<div v-for="(file, key) in dataSource" :key="key">
|
||||
<a-row>
|
||||
<a-col :span="24"><p><a-divider orientation="left">{{ file.fileName }}</a-divider></p></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="24">
|
||||
<template v-if="file.filePdfPath">
|
||||
<div style="float: left;width:104px;height:104px;margin: 0 8px 8px 0;">
|
||||
<div style="width: 100%;height: 100%;position: relative;padding: 8px;" @click="pdfPreview(file.title)">
|
||||
<img style="width: 100%;" src="~@/assets/pdf4.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
(暂无材料，点击"选择文件"或"扫描上传"上传文件)
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-col>
|
||||
<pdf-preview-modal ref="pdfmodal"></pdf-preview-modal >
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getAction } from '@/api/manage'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
import Vue from 'vue'
|
||||
import PdfPreviewModal from './modules/PdfPreviewModal'
|
||||
const mockdata = [{
|
||||
id: '1',
|
||||
key: '1',
|
||||
title: '实例.pdf',
|
||||
fileCode: 'shili',
|
||||
fileName: '实例',
|
||||
filePdfPath: '实例'
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: 'JeroPdfView',
|
||||
components: {
|
||||
PdfPreviewModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: 'PDF预览页面',
|
||||
// 文件类型集
|
||||
treeData: [{
|
||||
title: '所有PDF电子档',
|
||||
key: '0-0',
|
||||
children: mockdata
|
||||
}],
|
||||
// 文件数据集
|
||||
dataSource: mockdata,
|
||||
allData: mockdata,
|
||||
// 上传文件集
|
||||
defaultExpandAll: true,
|
||||
// 加载中
|
||||
spinning: false,
|
||||
url: {
|
||||
pdfList: '/mock/api/pdfList'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// this.loadData();
|
||||
},
|
||||
methods: {
|
||||
loadData () {
|
||||
this.spinning = false
|
||||
getAction(this.url.pdfList).then((res) => {
|
||||
if (res.length > 0) {
|
||||
this.allData = res
|
||||
this.dataSource = res
|
||||
this.treeData[0].children = res
|
||||
}
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
pdfPreview: function (title) {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||||
this.headers = { 'X-Access-Token': token }
|
||||
this.$refs.pdfmodal.previewFiles(title, token)
|
||||
},
|
||||
// 选择文件类型
|
||||
onSelect (selectedKeys, info) {
|
||||
this.dataSource = []
|
||||
if (selectedKeys[0] === undefined || selectedKeys[0] === '0-0') {
|
||||
this.dataSource = this.allData
|
||||
} else {
|
||||
this.dataSource.push(info.node._props.dataRef)
|
||||
}
|
||||
console.log('SELECT-->dataSource', this.dataSource)
|
||||
},
|
||||
// model回调
|
||||
modalFormOk () {
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{width:10px}
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<j-tree-table
|
||||
:url="url"
|
||||
topValue="0"
|
||||
queryKey="id"
|
||||
:columns="columns"
|
||||
:tableProps="tableProps">
|
||||
|
||||
<template v-slot:action="props">
|
||||
<!-- 可使用的参数： -->
|
||||
<!-- props.text -->
|
||||
<!-- props.record -->
|
||||
<!-- props.index -->
|
||||
<a @click="()=>handleEdit(props.record)">编辑</a>
|
||||
</template>
|
||||
|
||||
</j-tree-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTreeTable from '@/components/jero/JTreeTable'
|
||||
|
||||
export default {
|
||||
name: 'JeroTreeTable',
|
||||
components: { JTreeTable },
|
||||
data () {
|
||||
return {
|
||||
url: '/mock/api/asynTreeList',
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
dataIndex: 'component'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'orderNum'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
selectedRowKeys: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableProps () {
|
||||
const _this = this
|
||||
return {
|
||||
// 列表项是否可选择
|
||||
// https://vue.ant.design/components/table-cn/#rowSelection
|
||||
rowSelection: {
|
||||
selectedRowKeys: _this.selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => {
|
||||
_this.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.$info({
|
||||
width: 600,
|
||||
title: '编辑',
|
||||
content: '编辑ID：' + record.id + '；名称：' + record.name,
|
||||
okText: '确定',
|
||||
maskClosable: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,171 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false" :class="{'abcdefg':true}">
|
||||
<div class="no-print" style="text-align: right">
|
||||
<a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
|
||||
</div>
|
||||
<section ref="print" id="printContent" class="abcdefg">
|
||||
<div style="text-align: center">
|
||||
<p style="font-size: 24px;font-weight: 800">打印测试表单</p>
|
||||
</div>
|
||||
<!--签字-->
|
||||
<a-col :md="24" :sm="24">
|
||||
<div class="sign" style="text-align: left;height: inherit">
|
||||
<a-col :span="24">
|
||||
<span>
|
||||
打印人员:
|
||||
</span>
|
||||
<a-input style="width: 30%" v-model="printer"/>
|
||||
<span style="margin-left: 12.5%">打印日期:</span>
|
||||
<a-input style="width: 30%" v-model="printTime"/>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
</a-col>
|
||||
<a-col :span="24" style="margin-top: 20px">
|
||||
<span>打印内容:</span>
|
||||
<a-input style="width: 80%" v-model="printContent"/>
|
||||
</a-col>
|
||||
<a-col :span="24" style="margin-top: 20px">
|
||||
<span>打印目的:</span>
|
||||
<a-input style="width: 80%" v-model="printReason"/>
|
||||
</a-col>
|
||||
<a-col style="margin-top: 20px" :span="24">
|
||||
<span>打印图片:</span>
|
||||
<br/>
|
||||
<a-upload
|
||||
action="/jsonplaceholder.typicode.com/posts/"
|
||||
listType="picture-card"
|
||||
:fileList="fileList"
|
||||
@preview="handlePreview"
|
||||
@change="handleChange">
|
||||
<div v-if="fileList.length < 3">
|
||||
<a-icon type="plus" />
|
||||
<div class="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</a-col>
|
||||
</div>
|
||||
</a-col>
|
||||
</section>
|
||||
</a-card>
|
||||
<!--</page-layout>-->
|
||||
</template>
|
||||
<script>
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ACol
|
||||
},
|
||||
name: 'Printgzsld',
|
||||
props: {
|
||||
reBizCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columns: [{
|
||||
}
|
||||
],
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 2 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 }
|
||||
},
|
||||
printer: '张三',
|
||||
printTime: '2019-02-01 12:00:00',
|
||||
printContent: '打印内容就是,做一个打印测试',
|
||||
printReason: '做一个打印测试',
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
fileList: [{
|
||||
uid: '-1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'pic1.png',
|
||||
status: 'done',
|
||||
url: 'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg'
|
||||
}
|
||||
],
|
||||
url: {
|
||||
loadApplicant: '/sps/register/loadApplicants',
|
||||
loadRegisterFiles: '/sps/register/getRegisterFilesConfig'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getDate()
|
||||
},
|
||||
methods: {
|
||||
loadData () {
|
||||
|
||||
},
|
||||
getDate () {
|
||||
// 当前时间
|
||||
},
|
||||
handleCancel () {
|
||||
this.previewVisible = false
|
||||
},
|
||||
handlePreview (file) {
|
||||
this.previewImage = file.url || file.thumbUrl
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleChange ({ fileList }) {
|
||||
this.fileList = fileList
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
|
||||
* {
|
||||
color: #000000!important;
|
||||
-webkit-tap-highlight-color: #000000!important;
|
||||
}
|
||||
/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */
|
||||
|
||||
.abcdefg .ant-card-body{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 1%;
|
||||
border:0 solid black;
|
||||
min-width: 800px;
|
||||
color:#000000!important;
|
||||
}
|
||||
.explain{
|
||||
text-align: left;
|
||||
margin-left: 50px;
|
||||
color:#000000!important;
|
||||
}
|
||||
.explain .ant-input,.sign .ant-input{
|
||||
font-weight:bolder;
|
||||
text-align:center;
|
||||
border-left-width:0 !important;
|
||||
border-top-width:0 !important;
|
||||
border-right-width:0 !important;
|
||||
}
|
||||
.explain div{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* you can make up upload button and sample style by using stylesheets */
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -1,282 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- table区域-begin -->
|
||||
<a-table
|
||||
ref="table"
|
||||
size="default"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:dataSource="dataSource">
|
||||
|
||||
</a-table>
|
||||
<!-- table区域-end -->
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'RowspanTable',
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '存放位置设置表管理页面',
|
||||
levelNum: {},
|
||||
gridNum: 0,
|
||||
boxNum: 0,
|
||||
cabinetNo: '',
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '分组一',
|
||||
align: 'center',
|
||||
dataIndex: 'cabinetNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {}
|
||||
}
|
||||
if (index === 0) {
|
||||
obj.attrs.rowSpan = this.dataSource.length
|
||||
} else {
|
||||
obj.attrs.rowSpan = 0
|
||||
}
|
||||
return obj
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '分组二',
|
||||
align: 'center',
|
||||
dataIndex: 'levelNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {}
|
||||
}
|
||||
// 当前列跨行的条数
|
||||
const a = parseInt(this.levelNum)
|
||||
const b = parseInt(this.gridNum) * parseInt(this.boxNum)
|
||||
console.log(a)
|
||||
for (let c = 0; c <= a; c++) {
|
||||
if (index === (c * b)) {
|
||||
console.log(1)
|
||||
console.log(c * b)
|
||||
obj.attrs.rowSpan = b
|
||||
break
|
||||
} else {
|
||||
obj.attrs.rowSpan = 0
|
||||
}
|
||||
}
|
||||
return obj
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '分组三',
|
||||
align: 'center',
|
||||
dataIndex: 'gridNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {}
|
||||
}
|
||||
const a = parseInt(this.levelNum) * parseInt(this.gridNum)
|
||||
const b = parseInt(this.boxNum)
|
||||
for (let c = 0; c <= a; c++) {
|
||||
if (index === (c * b)) {
|
||||
obj.attrs.rowSpan = b
|
||||
break
|
||||
} else {
|
||||
obj.attrs.rowSpan = 0
|
||||
}
|
||||
}
|
||||
return obj
|
||||
}
|
||||
}, {
|
||||
title: '字段一',
|
||||
align: 'center',
|
||||
dataIndex: 'boxNo'
|
||||
}, {
|
||||
title: '字段二',
|
||||
align: 'center',
|
||||
dataIndex: 'storedNum'
|
||||
}, {
|
||||
title: '字段三',
|
||||
align: 'center',
|
||||
dataIndex: 'maxNum'
|
||||
}],
|
||||
// 数据集
|
||||
dataSource: [{
|
||||
id: 'cb1dfd12cbeca3f8ba121439ee7e2411',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '1',
|
||||
gridNo: '1',
|
||||
boxNo: '1',
|
||||
storedNum: 2,
|
||||
maxNum: 2,
|
||||
unitNum: 2,
|
||||
assignStatus: '1',
|
||||
storageStatus: '1',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: 'f903d50d02904b14175dccf2a7948777',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '1',
|
||||
gridNo: '1',
|
||||
boxNo: '2',
|
||||
storedNum: 2,
|
||||
maxNum: 2,
|
||||
unitNum: 2,
|
||||
assignStatus: '1',
|
||||
storageStatus: '1',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: '4f04c0ca4202535d678871b07e706cf6',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '1',
|
||||
gridNo: '2',
|
||||
boxNo: '1',
|
||||
storedNum: 2,
|
||||
maxNum: 2,
|
||||
unitNum: 2,
|
||||
assignStatus: '1',
|
||||
storageStatus: '1',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: 'd0c91dabedfc03efad0126e50ea72e80',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '1',
|
||||
gridNo: '2',
|
||||
boxNo: '2',
|
||||
storedNum: 2,
|
||||
maxNum: 2,
|
||||
unitNum: 2,
|
||||
assignStatus: '1',
|
||||
storageStatus: '1',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-08'
|
||||
}, {
|
||||
id: '1e8bfcbe4352afbab8878f9fd368e007',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '2',
|
||||
gridNo: '1',
|
||||
boxNo: '1',
|
||||
storedNum: 1,
|
||||
maxNum: 2,
|
||||
unitNum: 1,
|
||||
assignStatus: '1',
|
||||
storageStatus: '0',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-08'
|
||||
}, {
|
||||
id: 'd76087d8d3ebc7a59d43458588f26941',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '2',
|
||||
gridNo: '1',
|
||||
boxNo: '2',
|
||||
storedNum: 0,
|
||||
maxNum: 2,
|
||||
unitNum: 0,
|
||||
assignStatus: '1',
|
||||
storageStatus: '0',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: '7bf7754f12e1bf95edcd501cc6b85e62',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '2',
|
||||
gridNo: '2',
|
||||
boxNo: '1',
|
||||
storedNum: 0,
|
||||
maxNum: 2,
|
||||
unitNum: 0,
|
||||
assignStatus: '1',
|
||||
storageStatus: '0',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: '9cd08d733657d5b286bec870f12f6ecf',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '2',
|
||||
gridNo: '2',
|
||||
boxNo: '2',
|
||||
storedNum: 0,
|
||||
maxNum: 2,
|
||||
unitNum: 0,
|
||||
assignStatus: '1',
|
||||
storageStatus: '0',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}],
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
},
|
||||
url: {
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
loadData () {
|
||||
this.levelNum = 4
|
||||
this.gridNum = 2
|
||||
this.boxNum = 2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator{
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.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>
|
||||
@@ -1,678 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="height:100%;padding-bottom:200px; ">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form-model ref="form" :model="formData" layout="inline">
|
||||
|
||||
<!-- 字典下拉 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="性别" prop="sex">
|
||||
<j-dict-select-tag v-model="formData.sex" title="性别" dictCode="sex" placeholder="请选择性别"/>
|
||||
<!-- <j-dict-select-tag title="性别" dictCode="sex" disabled/>-->
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.sex}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="性别2" prop="sex2">
|
||||
<j-dict-select-tag v-model="formData.sex2" type="radioButton" title="性别2" dictCode="sex" placeholder="请选择性别2"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.sex2}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 字典表下拉 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="字典表下拉" prop="user">
|
||||
<j-dict-select-tag v-model="formData.user" placeholder="请选择用户" dictCode="sys_user,realname,id"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.user}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 带条件字典表下拉 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="字典表下拉(带条件)" prop="user2">
|
||||
<j-dict-select-tag v-model="formData.user2" placeholder="请选择用户" dictCode="sys_user,realname,id,username!='admin' order by create_time"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.user2}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 字典搜索 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="字典搜索(同步)" prop="searchValue">
|
||||
<j-search-select-tag placeholder="请做出你的选择" v-model="formData.searchValue" :dictOptions="searchOptions">
|
||||
</j-search-select-tag>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.searchValue}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 字典搜索 异步加载 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="字典搜索(异步)" prop="asyncSelectValue">
|
||||
<j-search-select-tag
|
||||
placeholder="请做出你的选择"
|
||||
v-model="formData.asyncSelectValue"
|
||||
dict="sys_depart,depart_name,id"
|
||||
:pageSize="6"
|
||||
:async="true">
|
||||
</j-search-select-tag>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.asyncSelectValue}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JMultiSelectTag -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="字典下拉(多选)" prop="selMuti">
|
||||
<j-multi-select-tag
|
||||
v-model="formData.selMuti"
|
||||
dictCode="sex"
|
||||
placeholder="请选择">
|
||||
</j-multi-select-tag>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">多选组合(v-model)：{{ formData.selMuti }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 部门选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="选择部门 自定义返回值" prop="orgCodes">
|
||||
<j-select-depart v-model="formData.orgCodes" :trigger-change="true" customReturnField="orgCode" :multi="true"></j-select-depart>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的部门Code(v-model):{{ formData.orgCodes }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="选择部门" prop="departId">
|
||||
<j-select-depart v-model="formData.departId" :multi="true"></j-select-depart>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的部门ID(v-model):{{ formData.departId }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 通过部门选择用户控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="选择用户" prop="userIds">
|
||||
<j-select-user-by-dep v-model="formData.userIds" :multi="true"></j-select-user-by-dep>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的用户(v-model):{{ formData.userIds }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 用户选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="选择用户" prop="multiUser">
|
||||
<j-select-multi-user v-model="formData.multiUser" :query-config="selectUserQueryConfig"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的用户(v-model):{{ formData.multiUser }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 角色选择 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="选择角色" prop="selectRole">
|
||||
<j-select-role v-model="formData.selectRole" @change="changeMe"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.selectRole}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JCheckbox -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="多选组合" prop="jCheckbox">
|
||||
<j-checkbox
|
||||
v-model="formData.jCheckbox"
|
||||
:options="jCheckboxOptions"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">多选组合(v-model)：{{ formData.jCheckbox }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JCodeEditor -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="代码输入框" style="min-height: 120px" prop="jCodeEditor">
|
||||
<j-code-editor
|
||||
language="javascript"
|
||||
v-model="formData.jCodeEditor"
|
||||
:fullScreen="true"
|
||||
style="min-height: 100px"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">代码输入框(v-model)：{{ formData.jCodeEditor }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JDate -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="日期选择框" prop="jDate">
|
||||
<j-date v-model="formData.jDate" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">日期选择框(v-model)：{{ formData.jDate }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JEditor -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="富文本编辑器" style="min-height: 300px" prop="jEditor">
|
||||
<j-editor v-model="formData.jEditor"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">富文本编辑器(v-model)：{{ formData.jEditor }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JEllipsis -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="过长剪切" prop="jEllipsis">
|
||||
<j-ellipsis :value="formData.jEllipsis" :length="30"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">过长剪切：{{ formData.jEllipsis }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSlider -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="滑块验证码" prop="jSlider">
|
||||
<j-slider @onSuccess="handleJSliderSuccess"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">滑块验证码验证通过：{{ formData.jSlider }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSelectMultiple -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="多选下拉框" prop="jSelectMultiple">
|
||||
<j-select-multiple v-model="formData.jSelectMultiple" :options="jSelectMultipleOptions"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">多选下拉框(v-model)：{{ formData.jSelectMultiple }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSelectMultiple -->
|
||||
<a-row :gutter="24">
|
||||
<a-col>
|
||||
|
||||
<a-form-model-item label="JModal弹窗">
|
||||
<a-button style="margin-right: 8px;" @click="()=>modal.visible=true">点击弹出JModal</a-button>
|
||||
<span style="margin-right: 8px;">全屏化：<a-switch v-model="modal.fullscreen"/></span>
|
||||
<span style="margin-right: 8px;">允许切换全屏：<a-switch v-model="modal.switchFullscreen"/></span>
|
||||
|
||||
</a-form-model-item>
|
||||
|
||||
<j-modal
|
||||
:visible.sync="modal.visible"
|
||||
:width="1200"
|
||||
:title="modal.title"
|
||||
:fullscreen.sync="modal.fullscreen"
|
||||
:switchFullscreen="modal.switchFullscreen"
|
||||
>
|
||||
|
||||
<template v-for="(i,k) of 30">
|
||||
<p :key="k">这是主体内容，高度是自适应的</p>
|
||||
</template>
|
||||
|
||||
</j-modal>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="树字典" prop="treeDict">
|
||||
<j-tree-dict v-model="formData.treeDict" placeholder="请选择树字典" parentCode="A01"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.treeDict }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="下拉树选择" prop="treeSelect">
|
||||
<j-tree-select
|
||||
v-model="formData.treeSelect"
|
||||
placeholder="请选择菜单"
|
||||
dict="sys_permission,name,id"
|
||||
pidField="parent_id"
|
||||
pidValue=""
|
||||
:isAsync="true"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.treeSelect }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="下拉树多选" prop="treeSelectMultiple">
|
||||
<j-tree-select
|
||||
v-model="formData.treeSelectMultiple"
|
||||
placeholder="请选择菜单"
|
||||
dict="sys_permission,name,id"
|
||||
pidField="parent_id"
|
||||
pidValue=""
|
||||
multiple
|
||||
:isAsync="false"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.treeSelectMultiple }}</a-col>
|
||||
</a-row>
|
||||
<!-- 分类字典树 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="分类字典树" prop="selectCategory">
|
||||
<j-category-select v-model="formData.selectCategory" pCode="A01" :multiple="false"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.selectCategory }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- VueCron -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="cron表达式" prop="cronExpression">
|
||||
<j-easy-cron v-model="formData.cronExpression"></j-easy-cron>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="高级查询">
|
||||
<j-super-query :fieldList="superQuery.fieldList" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="高级查询（自定义按钮）">
|
||||
<j-super-query :fieldList="superQuery.fieldList">
|
||||
<!--
|
||||
v-slot:button 可以更高自由的定制按钮
|
||||
参数介绍：
|
||||
isActive: 是否是激活状态（已有高级查询条件生效）
|
||||
isMobile: 当前是否是移动端，可针对移动端展示不同的样式
|
||||
open: 打开弹窗，一个方法，可绑定点击事件
|
||||
reset: 重置所有查询条件，一个方法，可绑定点击事件
|
||||
-->
|
||||
<template v-slot:button="{isActive,isMobile,open,reset}">
|
||||
<!-- 定义的是普通状态下的按钮 -->
|
||||
<a-button v-if="!isActive" type="primary" ghost icon="clock-circle" @click="open()">高级查询</a-button>
|
||||
<!-- 定义的当有高级查询条件生效状态下的按钮 -->
|
||||
<a-button-group v-else>
|
||||
<a-button type="primary" ghost @click="open()">
|
||||
<a-icon type="plus-circle" :spin="true"/>
|
||||
<span>高级查询</span>
|
||||
</a-button>
|
||||
<a-button v-if="isMobile" type="primary" ghost icon="delete" @click="reset()"/>
|
||||
</a-button-group>
|
||||
</template>
|
||||
</j-super-query>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="图片上传" prop="imgList">
|
||||
<j-image-upload bizPath="scott/pic" v-model="formData.imgList"></j-image-upload>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.imgList }}</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24" style="margin-top: 65px;margin-bottom:50px;">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="文件上传" prop="fileList">
|
||||
<j-upload v-model="formData.fileList"></j-upload>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
选中的值(v-model)：
|
||||
<j-ellipsis :value="formData.fileList" :length="30" v-if="formData.fileList.length>0"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 特殊查询组件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="特殊查询组件" prop="jInput">
|
||||
<a-row>
|
||||
<a-col :span="15">
|
||||
<j-input v-model="formData.jInput" :type="jInput.type"/>
|
||||
</a-col>
|
||||
<a-col :span="4" style="text-align: right;" >查询类型：</a-col>
|
||||
<a-col :span="5">
|
||||
<a-select v-model="jInput.type" :options="jInput.options"></a-select>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">输入的值(v-model)：{{ formData.jInput }}</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="15">
|
||||
<a-form-model-item label="MarkdownEditor" prop="content" style="min-height: 300px">
|
||||
<j-markdown-editor v-model="formData.content"></j-markdown-editor>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="9">
|
||||
输入的值(v-model)：{{ formData.content }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 省市县级联 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="省市县级联" prop="areaLinkage1">
|
||||
<j-area-linkage v-model="formData.areaLinkage1" type="cascader"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">输入的值(v-model)：{{ formData.areaLinkage1 }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 省市县级联 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="省市县级联" prop="areaLinkage2">
|
||||
<j-area-linkage v-model="formData.areaLinkage2" type="select"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">输入的值(v-model)：{{ formData.areaLinkage2 }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 功能示例：关闭当前页面 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="功能示例：关闭当前页面">
|
||||
<a-button type="primary" @click="handleCloseCurrentPage">点击关闭当前页面</a-button>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JPopup示例 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="JPopup示例" prop="jPopup">
|
||||
<j-popup v-model="formData.jPopup" code="demo" field="name" orgFields="name" destFields="name" :multi="true"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选择的值(v-model)：{{ formData.jPopup }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="JSwitch示例">
|
||||
<j-switch v-model="formData.sw"></j-switch>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选择的值(v-model)：{{ formData.sw }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="JTime示例">
|
||||
<j-time v-model="formData.mm"></j-time>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选择的值(v-model)：{{ formData.mm }}</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
|
||||
import JSelectDepart from '@/components/jerobiz/JSelectDepart'
|
||||
import JSelectUserByDep from '@/components/jerobiz/JSelectUserByDep'
|
||||
import JSelectMultiUser from '@/components/jerobiz/JSelectMultiUser'
|
||||
import JSelectRole from '@/components/jerobiz/JSelectRole'
|
||||
import JCheckbox from '@/components/jero/JCheckbox'
|
||||
import JCodeEditor from '@/components/jero/JCodeEditor'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import JEditor from '@/components/jero/JEditor'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
import JSlider from '@/components/jero/JSlider'
|
||||
import JSelectMultiple from '@/components/jero/JSelectMultiple'
|
||||
import JTreeDict from '../../components/jero/JTreeDict.vue'
|
||||
import JEasyCron from '@/components/jero/JEasyCron'
|
||||
import JTreeSelect from '@/components/jero/JTreeSelect'
|
||||
import JSuperQuery from '@/components/jero/JSuperQuery'
|
||||
import JUpload from '@/components/jero/JUpload'
|
||||
import JImageUpload from '@/components/jero/JImageUpload'
|
||||
import JCategorySelect from '@comp/jero/JCategorySelect'
|
||||
import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
|
||||
import JInput from '@comp/jero/JInput'
|
||||
import JAreaLinkage from '@comp/jero/JAreaLinkage'
|
||||
import JMarkdownEditor from '@/components/jero/JMarkdownEditor/index'
|
||||
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
|
||||
import JSwitch from '@/components/jero/JSwitch.vue'
|
||||
import JTime from '@/components/jero/JTime.vue'
|
||||
|
||||
export default {
|
||||
name: 'SelectDemo',
|
||||
inject: ['closeCurrent'],
|
||||
components: {
|
||||
JMarkdownEditor,
|
||||
JAreaLinkage,
|
||||
JInput,
|
||||
JCategorySelect,
|
||||
JImageUpload,
|
||||
JUpload,
|
||||
JTreeDict,
|
||||
JDictSelectTag,
|
||||
JSelectDepart,
|
||||
JSelectUserByDep,
|
||||
JSelectMultiUser,
|
||||
JSelectRole,
|
||||
JCheckbox,
|
||||
JCodeEditor,
|
||||
JDate,
|
||||
JEditor,
|
||||
JEllipsis,
|
||||
JSlider,
|
||||
JSelectMultiple,
|
||||
JEasyCron,
|
||||
JTreeSelect,
|
||||
JSuperQuery,
|
||||
JMultiSelectTag,
|
||||
JSearchSelectTag,
|
||||
JSwitch,
|
||||
JTime
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sw: false,
|
||||
selectList: [],
|
||||
selectedDepUsers: '',
|
||||
formData: {
|
||||
areaLinkage1: '110105',
|
||||
areaLinkage2: '140221',
|
||||
sex: 1,
|
||||
orgCodes: 'A02A01,A02A02',
|
||||
departId: '57197590443c44f083d42ae24ef26a2c,a7d7e77e06c84325a40932163adcdaa6',
|
||||
userIds: 'admin',
|
||||
multiUser: 'admin,jero',
|
||||
jCheckbox: 'spring,jeroboot',
|
||||
jCodeEditor: `function sayHi(word) {\n alert(word)\n}\nsayHi('hello, world!')`,
|
||||
jDate: '2019-5-10 15:33:06',
|
||||
jEditor: '<h2 style="text-align: center;">富文本编辑器</h2> <p>这里是富文本编辑器。</p>',
|
||||
jEllipsis: '这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。',
|
||||
jSlider: false,
|
||||
jSelectMultiple: 'Integer,Boolean',
|
||||
imgList: [],
|
||||
fileList: [],
|
||||
content: '',
|
||||
cronExpression: '* * * * * ? *'
|
||||
},
|
||||
jCheckboxOptions: [
|
||||
{ label: 'jero', value: 'jero' },
|
||||
{ label: 'jero-Boot', value: 'jeroboot' },
|
||||
{ label: 'Spring', value: 'spring', disabled: true },
|
||||
{ label: 'MyBaits', value: 'mybatis' }
|
||||
],
|
||||
jSelectMultipleOptions: [
|
||||
{ text: '字符串', value: 'String' },
|
||||
{ text: '整数型', value: 'Integer' },
|
||||
{ text: '浮点型', value: 'Double' },
|
||||
{ text: '布尔型', value: 'Boolean' }
|
||||
],
|
||||
modal: {
|
||||
title: '这里是标题',
|
||||
visible: false,
|
||||
fullscreen: true,
|
||||
switchFullscreen: true
|
||||
},
|
||||
cron: '',
|
||||
superQuery: {
|
||||
fieldList: [
|
||||
{ type: 'input', value: 'name', text: '姓名' },
|
||||
{ type: 'select', value: 'sex', text: '性别', dictCode: 'sex' },
|
||||
{ type: 'number', value: 'age', text: '年龄' },
|
||||
{
|
||||
type: 'select',
|
||||
value: 'hobby',
|
||||
text: '爱好',
|
||||
options: [
|
||||
{ label: '音乐', value: '1' },
|
||||
{ label: '游戏', value: '2' },
|
||||
{ label: '电影', value: '3' },
|
||||
{ label: '读书', value: '4' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
jInput: {
|
||||
type: 'like',
|
||||
options: [
|
||||
{ value: 'like', label: '模糊（like）' },
|
||||
{ value: 'ne', label: '不等于（ne）' },
|
||||
{ value: 'ge', label: '大于等于（ge）' },
|
||||
{ value: 'le', label: '小于等于（le)' }
|
||||
]
|
||||
},
|
||||
searchOptions: [{
|
||||
text: '选项一',
|
||||
value: '1'
|
||||
}, {
|
||||
text: '选项二',
|
||||
value: '2'
|
||||
}, {
|
||||
text: '选项三',
|
||||
value: '3'
|
||||
}],
|
||||
|
||||
// 选择用户查询条件配置,queryModel有eq和like两种，
|
||||
// eq即精准查询，like即模糊查询，默认为like
|
||||
selectUserQueryConfig: [
|
||||
{ key: 'phone', label: '电话', queryModel: 'eq' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameList: function () {
|
||||
const names = []
|
||||
for (let a = 0; a < this.selectList.length; a++) {
|
||||
names.push(this.selectList[a].name)
|
||||
}
|
||||
return names
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDepartIdValue () {
|
||||
return this.formData.departId
|
||||
},
|
||||
getOrgCodesValue () {
|
||||
return this.formData.orgCodes
|
||||
},
|
||||
changeMe () {
|
||||
|
||||
},
|
||||
selectOK: function (data) {
|
||||
this.selectList = data
|
||||
},
|
||||
handleSelect: function () {
|
||||
this.$refs.selectDemoModal.add()
|
||||
},
|
||||
selectReset () {
|
||||
this.selectList = []
|
||||
},
|
||||
// 通过组织机构筛选选择用户
|
||||
onSearchDepUser () {
|
||||
this.$refs.JSearchUserByDep.showModal()
|
||||
this.selectedDepUsers = ''
|
||||
this.$refs.JSearchUserByDep.title = '根据部门查询用户'
|
||||
},
|
||||
onSearchDepUserCallBack (selectedDepUsers) {
|
||||
this.selectedDepUsers = selectedDepUsers
|
||||
},
|
||||
handleJSliderSuccess (value) {
|
||||
this.formData.jSlider = value
|
||||
},
|
||||
|
||||
handleCloseCurrentPage () {
|
||||
// 注意：以下代码必须存在
|
||||
// inject:['closeCurrent'],
|
||||
this.closeCurrent()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<a-button @click="splitPane" type="primary" icon="desktop">点我分屏</a-button>
|
||||
|
||||
<split-panel-modal ref="splitPanelModal"></split-panel-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SplitPanelModal from './modules/SplitPanelModal'
|
||||
|
||||
export default {
|
||||
name: 'SplitPanel',
|
||||
components: {
|
||||
SplitPanelModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '分屏'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
splitPane () {
|
||||
this.$refs.splitPanelModal.show()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,265 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<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" class="resetBtn">重置</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"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
:expandedRowKeys= "expandedRowKeys"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange"
|
||||
@expand="handleExpand"
|
||||
>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<a-table
|
||||
slot="expandedRowRender"
|
||||
:columns="innerColumns"
|
||||
:dataSource="innerData"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:loading="loading"
|
||||
>
|
||||
</a-table>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeroOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeroOrderDMain-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import JeroOrderDMainModal from '@views/demo/tablist/form/JeroOrderDMainModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: 'TableDemo',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderDMainModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 子表表头
|
||||
innerColumns: [
|
||||
{
|
||||
title: '客户名',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex',
|
||||
customRender: function (text) {
|
||||
if (text + '' === '1') {
|
||||
return '男'
|
||||
} else if (text + '' === '2') {
|
||||
return '女'
|
||||
} else {
|
||||
return text
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '身份证号码',
|
||||
align: 'center',
|
||||
dataIndex: 'idcard'
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'telphone',
|
||||
align: 'center'
|
||||
}
|
||||
|
||||
],
|
||||
innerData: [],
|
||||
expandedRowKeys: [],
|
||||
id: ' ',
|
||||
description: '列表展开子表Demo',
|
||||
// 列表表头
|
||||
columns: [{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: 'center',
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = ''
|
||||
if (text === '1') {
|
||||
re = '国内订单'
|
||||
} else if (text === '2') {
|
||||
re = '国际订单'
|
||||
}
|
||||
return re
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: 'center',
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: 'center',
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}],
|
||||
// 分页参数
|
||||
type: 'radio',
|
||||
url: {
|
||||
list: '/test/order/orderList',
|
||||
delete: '/test/order/delete',
|
||||
deleteBatch: '/test/order/deleteBatch',
|
||||
customerListByMainId: '/test/order/listOrderCustomerByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentId () {
|
||||
return this.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExpand (expanded, record) {
|
||||
this.expandedRowKeys = []
|
||||
this.innerData = []
|
||||
if (expanded === true) {
|
||||
this.loading = true
|
||||
this.expandedRowKeys.push(record.id)
|
||||
getAction(this.url.customerListByMainId, { mainId: record.id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.loading = false
|
||||
this.innerData = res.result.records
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-table
|
||||
rowKey="rowIndex"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableTotal',
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
width: '180px',
|
||||
align: 'center',
|
||||
dataIndex: 'rowIndex',
|
||||
customRender: function (text, r, index) {
|
||||
return (text !== '合计') ? (parseInt(index) + 1) : text
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '贡献点',
|
||||
dataIndex: 'point'
|
||||
},
|
||||
{
|
||||
title: '等级',
|
||||
dataIndex: 'level'
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime'
|
||||
}
|
||||
],
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
dataSource: [
|
||||
{ id: '1', name: '张三', point: 23, level: 3, updateTime: '2019-8-14' },
|
||||
{ name: '小王', point: 6, level: 1, updateTime: '2019-8-13' },
|
||||
{ name: '李四', point: 53, level: 8, updateTime: '2019-8-12' },
|
||||
{ name: '小红', point: 44, level: 5, updateTime: '2019-8-11' },
|
||||
{ name: '王五', point: 97, level: 10, updateTime: '2019-8-10' },
|
||||
{ name: '小明', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小张', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小六', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小五', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小赵', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '李华', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小康', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10' }
|
||||
],
|
||||
newArr: [],
|
||||
newDataSource: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// this.tableAddTotalRow(this.columns, this.dataSource)
|
||||
/* 新增分页合计方法 */
|
||||
this.newDataSource = this.dataSource
|
||||
this.dataHandling(this.ipagination.pageSize - 1)
|
||||
},
|
||||
watch: {
|
||||
'ipagination.pageSize': function (val) {
|
||||
this.dataHandling(val - 1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 表格增加合计行 */
|
||||
tableAddTotalRow (columns, dataSource) {
|
||||
const numKey = 'rowIndex'
|
||||
const totalRow = { [numKey]: '合计' }
|
||||
columns.forEach(column => {
|
||||
const { key, dataIndex } = column
|
||||
if (![key, dataIndex].includes(numKey)) {
|
||||
let total = 0
|
||||
dataSource.forEach(data => {
|
||||
total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
|
||||
console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN))
|
||||
})
|
||||
|
||||
if (Number.isNaN(total)) {
|
||||
total = '-'
|
||||
}
|
||||
totalRow[dataIndex] = total
|
||||
}
|
||||
})
|
||||
|
||||
dataSource.push(totalRow)
|
||||
},
|
||||
handleTableChange (pagination) {
|
||||
this.ipagination = pagination
|
||||
},
|
||||
/* 如果分页走这个方法 */
|
||||
dataHandling (num) {
|
||||
this.newArr = []
|
||||
const arrLength = this.newDataSource.length // 数组长度;
|
||||
let index = 0
|
||||
for (let i = 0; i < arrLength; i++) {
|
||||
if (i % num === 0 && i !== 0) {
|
||||
this.newArr.push(this.newDataSource.slice(index, i))
|
||||
index = i
|
||||
}
|
||||
if ((i + 1) === arrLength) {
|
||||
this.newArr.push(this.newDataSource.slice(index, (i + 1)))
|
||||
}
|
||||
}
|
||||
const arrs = this.newArr
|
||||
for (let i = 0; i < arrs.length; i++) {
|
||||
const arr = arrs[i]
|
||||
const newArr = { }
|
||||
newArr.name = '-'
|
||||
newArr.updateTime = '-'
|
||||
newArr.rowIndex = '合计'
|
||||
let level = 0
|
||||
let point = 0
|
||||
for (let j = 0; j < arr.length; j++) {
|
||||
level += arr[j].level
|
||||
point += arr[j].point
|
||||
}
|
||||
newArr.level = level
|
||||
newArr.point = point
|
||||
arrs[i].push(newArr)
|
||||
}
|
||||
const newDataSource = []
|
||||
for (let i = 0; i < arrs.length; i++) {
|
||||
const arr = arrs[i]
|
||||
for (const j in arr) {
|
||||
newDataSource.push(arr[j])
|
||||
}
|
||||
}
|
||||
console.log(this.dataSource)
|
||||
this.dataSource = Object.values(newDataSource)
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
||||
<a-form @submit="handleSubmit" :form="form">
|
||||
<a-form-item
|
||||
label="标题"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'name',
|
||||
{rules: [{ required: true, message: '请输入标题' }]}
|
||||
]"
|
||||
name="name"
|
||||
placeholder="给目标起个名字" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="起止日期"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-range-picker
|
||||
name="buildTime"
|
||||
style="width: 100%"
|
||||
v-decorator="[
|
||||
'buildTime',
|
||||
{rules: [{ required: true, message: '请选择起止日期' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="目标描述"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-textarea
|
||||
rows="4"
|
||||
placeholder="请输入你阶段性工作目标"
|
||||
v-decorator="[
|
||||
'description',
|
||||
{rules: [{ required: true, message: '请输入目标描述' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="衡量标准"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-textarea
|
||||
rows="4"
|
||||
placeholder="请输入衡量标准"
|
||||
v-decorator="[
|
||||
'type',
|
||||
{rules: [{ required: true, message: '请输入衡量标准' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="客户"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-input
|
||||
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
|
||||
v-decorator="[
|
||||
'customer',
|
||||
{rules: [{ required: true, message: '请描述你服务的客户' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="邀评人"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
>
|
||||
<a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="权重"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
>
|
||||
<a-input-number :min="0" :max="100" />
|
||||
<span> %</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="目标公开"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
help="客户、邀评人默认被分享"
|
||||
>
|
||||
<a-radio-group v-model="value">
|
||||
<a-radio :value="1">公开</a-radio>
|
||||
<a-radio :value="2">部分公开</a-radio>
|
||||
<a-radio :value="3">不公开</a-radio>
|
||||
</a-radio-group>
|
||||
<a-form-item>
|
||||
<a-select mode="multiple" v-if="value === 2">
|
||||
<a-select-option value="4">同事一</a-select-option>
|
||||
<a-select-option value="5">同事二</a-select-option>
|
||||
<a-select-option value="6">同事三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapperCol="{ span: 24 }"
|
||||
style="text-align: center"
|
||||
>
|
||||
<a-button htmlType="submit" type="primary">提交</a-button>
|
||||
<a-button style="margin-left: 8px">保存</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseForm',
|
||||
data () {
|
||||
return {
|
||||
description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
|
||||
value: 1,
|
||||
|
||||
// form
|
||||
form: this.$form.createForm(this)
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// handler
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,205 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card class="card" title="仓库管理" :bordered="false">
|
||||
<repository-form ref="repository" :showSubmit="false" />
|
||||
</a-card>
|
||||
<a-card class="card" title="任务管理" :bordered="false">
|
||||
<task-form ref="task" :showSubmit="false" />
|
||||
</a-card>
|
||||
|
||||
<!-- table -->
|
||||
<a-card>
|
||||
<form :autoFormCreate="(form) => this.form = form">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="data"
|
||||
:pagination="false"
|
||||
>
|
||||
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record">
|
||||
<a-input
|
||||
:key="col"
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
:placeholder="columns[i].title"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</template>
|
||||
<template slot="operation" slot-scope="text, record">
|
||||
<template v-if="record.editable">
|
||||
<span v-if="record.isNew">
|
||||
<a @click="saveRow(record.key)">添加</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a @click="saveRow(record.key)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="cancel(record.key)">取消</a>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>
|
||||
<a @click="toggle(record.key)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增成员</a-button>
|
||||
</form>
|
||||
</a-card>
|
||||
|
||||
<!-- fixed footer toolbar -->
|
||||
<footer-tool-bar>
|
||||
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
|
||||
</footer-tool-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RepositoryForm from './RepositoryForm'
|
||||
import TaskForm from './TaskForm'
|
||||
import FooterToolBar from '@/components/tools/FooterToolBar'
|
||||
|
||||
export default {
|
||||
name: 'AdvancedForm',
|
||||
components: {
|
||||
FooterToolBar,
|
||||
RepositoryForm,
|
||||
TaskForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '高级表单常见于一次性输入和提交大批量数据的场景。',
|
||||
loading: false,
|
||||
|
||||
// table
|
||||
columns: [
|
||||
{
|
||||
title: '成员姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: '工号',
|
||||
dataIndex: 'workId',
|
||||
key: 'workId',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'workId' }
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'department',
|
||||
key: 'department',
|
||||
width: '40%',
|
||||
scopedSlots: { customRender: 'department' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
name: '小明',
|
||||
workId: '001',
|
||||
editable: false,
|
||||
department: '行政部'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '李莉',
|
||||
workId: '002',
|
||||
editable: false,
|
||||
department: 'IT部'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '王小帅',
|
||||
workId: '003',
|
||||
editable: false,
|
||||
department: '财务部'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
},
|
||||
newMember () {
|
||||
this.data.push({
|
||||
key: '-1',
|
||||
name: '',
|
||||
workId: '',
|
||||
department: '',
|
||||
editable: true,
|
||||
isNew: true
|
||||
})
|
||||
},
|
||||
remove (key) {
|
||||
this.data = this.data.filter(item => item.key !== key)
|
||||
},
|
||||
saveRow (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
target.isNew = false
|
||||
},
|
||||
toggle (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = !target.editable
|
||||
},
|
||||
getRowByKey (key, newData) {
|
||||
const data = this.data
|
||||
return (newData || data).filter(item => item.key === key)[0]
|
||||
},
|
||||
cancel (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
},
|
||||
handleChange (value, key, column) {
|
||||
const newData = [...this.data]
|
||||
const target = newData.filter(item => key === item.key)[0]
|
||||
if (target) {
|
||||
target[column] = value
|
||||
this.data = newData
|
||||
}
|
||||
},
|
||||
|
||||
// 最终全页面提交
|
||||
validate () {
|
||||
this.$refs.repository.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification.error({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$refs.task.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification.error({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<a-form @submit="handleSubmit" :form="form" class="form">
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item label="仓库名">
|
||||
<a-input
|
||||
placeholder="请输入仓库名称"
|
||||
v-decorator="[
|
||||
'repository.name',
|
||||
{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库域名">
|
||||
<a-input
|
||||
addonBefore="http://"
|
||||
addonAfter=".com"
|
||||
placeholder="请输入"
|
||||
v-decorator="[
|
||||
'repository.domain',
|
||||
{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库管理员">
|
||||
<a-select placeholder="请选择管理员" v-decorator="[ 'repository.manager', {rules: [{ required: true, message: '请选择管理员'}]} ]">
|
||||
<a-select-option value="王同学">王同学</a-select-option>
|
||||
<a-select-option value="李同学">李同学</a-select-option>
|
||||
<a-select-option value="黄同学">黄同学</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item
|
||||
label="审批人">
|
||||
<a-select placeholder="请选择审批员" v-decorator="[ 'repository.auditor', {rules: [{ required: true, message: '请选择审批员'}]} ]">
|
||||
<a-select-option value="王晓丽">王晓丽</a-select-option>
|
||||
<a-select-option value="李军">李军</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="生效日期">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
v-decorator="[
|
||||
'repository.effectiveDate',
|
||||
{rules: [{ required: true, message: '请选择生效日期'}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库类型">
|
||||
<a-select
|
||||
placeholder="请选择仓库类型"
|
||||
v-decorator="[
|
||||
'repository.type',
|
||||
{rules: [{ required: true, message: '请选择仓库类型'}]}
|
||||
]" >
|
||||
<a-select-option value="公开">公开</a-select-option>
|
||||
<a-select-option value="私密">私密</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="showSubmit">
|
||||
<a-button htmlType="submit" >Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryForm',
|
||||
props: {
|
||||
showSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification.error({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
validate (rule, value, callback) {
|
||||
const regex = /^user-(.*)$/
|
||||
if (!regex.test(value)) {
|
||||
callback(new Error('需要以 user- 开头'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<a-form @submit="handleSubmit" :form="form" class="form">
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item
|
||||
label="任务名">
|
||||
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="任务描述">
|
||||
<a-input placeholder="请输入任务描述" v-decorator="[ 'task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="执行人">
|
||||
<a-select
|
||||
placeholder="请选择执行人"
|
||||
v-decorator="[
|
||||
'task.executor',
|
||||
{rules: [{ required: true, message: '请选择执行人'}]}
|
||||
]" >
|
||||
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
|
||||
<a-select-option value="李大刀">李大刀</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item
|
||||
label="责任人">
|
||||
<a-select
|
||||
placeholder="请选择责任人"
|
||||
v-decorator="[
|
||||
'task.manager',
|
||||
{rules: [{ required: true, message: '请选择责任人'}]}
|
||||
]" >
|
||||
<a-select-option value="王伟">王伟</a-select-option>
|
||||
<a-select-option value="李红军">李红军</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="提醒时间">
|
||||
<a-time-picker
|
||||
style="width: 100%"
|
||||
v-decorator="[
|
||||
'task.time',
|
||||
{rules: [{ required: true, message: '请选择提醒时间'}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="任务类型">
|
||||
<a-select
|
||||
placeholder="请选择任务类型"
|
||||
v-decorator="[ 'task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]" >
|
||||
<a-select-option value="定时执行">定时执行</a-select-option>
|
||||
<a-select-option value="周期执行">周期执行</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="showSubmit">
|
||||
<a-button htmlType="submit" >Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TaskForm',
|
||||
props: {
|
||||
showSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification.error({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;">
|
||||
<a-form-item
|
||||
label="付款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-select value="1" placeholder="ant-design@alipay.com">
|
||||
<a-select-option value="1">ant-design@alipay.com</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
|
||||
<a-select defaultValue="alipay" style="width: 100px">
|
||||
<a-select-option value="alipay">支付宝</a-select-option>
|
||||
<a-select-option value="wexinpay">微信</a-select-option>
|
||||
</a-select>
|
||||
<a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款人姓名"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input value="Alex" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="转账金额"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input prefix="￥" value="5000" />
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<a-button type="primary" @click="nextStep">下一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Step1',
|
||||
methods: {
|
||||
nextStep () {
|
||||
this.$emit('nextStep')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;">
|
||||
<a-alert
|
||||
:closable="true"
|
||||
message="确认转账后，资金将直接打入对方账户，无法退回。"
|
||||
style="margin-bottom: 24px;"
|
||||
/>
|
||||
<a-form-item
|
||||
label="付款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
ant-design@alipay.com
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
test@example.com
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款人姓名"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
Alex
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="转账金额"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
￥ 5,000.00
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
|
||||
<a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Step2',
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextStep () {
|
||||
const that = this
|
||||
that.loading = true
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep')
|
||||
}, 1500)
|
||||
},
|
||||
prevStep () {
|
||||
this.$emit('prevStep')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.stepFormText {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.ant-form-item-label,
|
||||
.ant-form-item-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="margin: 40px auto 0;">
|
||||
<result title="操作成功" :is-success="true" description="预计两小时内到账">
|
||||
<div class="information">
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">付款账户：</a-col>
|
||||
<a-col :sm="16" :xs="24">ant-design@alipay.com</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">收款账户：</a-col>
|
||||
<a-col :sm="16" :xs="24">test@example.com</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">收款人姓名：</a-col>
|
||||
<a-col :sm="16" :xs="24">辉夜</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">转账金额：</a-col>
|
||||
<a-col :sm="16" :xs="24"><span class="money">500</span> 元</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div slot="action">
|
||||
<a-button type="primary" @click="finish">再转一笔</a-button>
|
||||
<a-button style="margin-left: 8px" @click="toOrderList">查看账单</a-button>
|
||||
</div>
|
||||
</result>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from '../../../result/Result'
|
||||
|
||||
export default {
|
||||
name: 'Step3',
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
finish () {
|
||||
this.$emit('finish')
|
||||
},
|
||||
toOrderList () {
|
||||
this.$router.push('/list/query-list')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.information {
|
||||
line-height: 22px;
|
||||
|
||||
.ant-row:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
.money {
|
||||
font-family: "Helvetica Neue",sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-steps class="steps" :current="currentTab">
|
||||
<a-step title="填写转账信息" />
|
||||
<a-step title="确认转账信息" />
|
||||
<a-step title="完成" />
|
||||
</a-steps>
|
||||
<div class="content">
|
||||
<step1 v-if="currentTab === 0" @nextStep="nextStep"/>
|
||||
<step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
|
||||
<step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Step1 from './Step1'
|
||||
import Step2 from './Step2'
|
||||
import Step3 from './Step3'
|
||||
|
||||
export default {
|
||||
name: 'StepForm',
|
||||
components: {
|
||||
Step1,
|
||||
Step2,
|
||||
Step3
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
|
||||
currentTab: 0,
|
||||
|
||||
// form
|
||||
form: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// handler
|
||||
nextStep () {
|
||||
if (this.currentTab < 2) {
|
||||
this.currentTab += 1
|
||||
}
|
||||
},
|
||||
prevStep () {
|
||||
if (this.currentTab > 0) {
|
||||
this.currentTab -= 1
|
||||
}
|
||||
},
|
||||
finish () {
|
||||
this.currentTab = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.steps {
|
||||
max-width: 750px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<div class="card-list" ref="content">
|
||||
<a-list
|
||||
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
|
||||
:dataSource="dataSource"
|
||||
>
|
||||
<a-list-item slot="renderItem" slot-scope="item, index">
|
||||
<template v-if="index === 0">
|
||||
<a-button class="new-btn" type="dashed">
|
||||
<a-icon type="plus"/>
|
||||
新增产品
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-card :hoverable="true">
|
||||
<a-card-meta>
|
||||
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
|
||||
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
|
||||
<div class="meta-content" slot="description">{{ item.content }}</div>
|
||||
</a-card-meta>
|
||||
<template class="ant-card-actions" slot="actions">
|
||||
<a>操作一</a>
|
||||
<a>操作二</a>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const dataSource = []
|
||||
for (let i = 0; i < 12; i++) {
|
||||
dataSource.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'CardList',
|
||||
data () {
|
||||
return {
|
||||
description: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
|
||||
linkList: [
|
||||
{ icon: 'rocket', href: '#', title: '快速开始' },
|
||||
{ icon: 'info-circle-o', href: '#', title: '产品简介' },
|
||||
{ icon: 'file-text', href: '#', title: '产品文档' }
|
||||
],
|
||||
extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
.ant-card-actions {
|
||||
background: #f7f9fa;
|
||||
li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
width: 50%;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 186px;
|
||||
}
|
||||
|
||||
.meta-content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
height: 64px;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
@@ -1,195 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div>
|
||||
<div style="margin-bottom: 5px;">
|
||||
<a-button @click="resetTable">重置表格配置</a-button>
|
||||
<a-button @click="clearTableCache" style="margin-left: 5px;">清空本表缓存</a-button>
|
||||
<a-button @click="clearAllTableCache" style="margin-left: 5px;">清空全局JTable缓存</a-button>
|
||||
</div>
|
||||
<j-table bordered
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
:table-key="$route.name + '_table1'"
|
||||
ref="table"
|
||||
rowKey="key"
|
||||
:data-source="dataSource"
|
||||
:scroll.sync="scroll"
|
||||
:columns.sync="columns">
|
||||
<!-- 使用插槽 -->
|
||||
<a slot="name" slot-scope="{text}">{{ text }}</a>
|
||||
<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
|
||||
<span slot="tags" slot-scope="{text: tags}">
|
||||
<a-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
|
||||
>
|
||||
{{ tag.toUpperCase() }}
|
||||
</a-tag>
|
||||
</span>
|
||||
|
||||
<span slot="action" slot-scope="{record}">
|
||||
<a-popconfirm
|
||||
v-if="dataSource.length"
|
||||
title="是否删除?"
|
||||
@confirm="() => onDelete(record.key)"
|
||||
>
|
||||
<a href="javascript:">Delete</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
Footer：{{ currentPageData }}
|
||||
</template>
|
||||
</j-table>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTable from '@comp/jero/JTable'
|
||||
|
||||
export default {
|
||||
name: 'JTableList',
|
||||
components: { JTable },
|
||||
data () {
|
||||
const columns = [
|
||||
{
|
||||
// 是否在配置表中隐藏
|
||||
// hideSettingColumn: true,
|
||||
// 尽量都设置最小宽度，冻结列与拖拽时生效
|
||||
minWidth: 100,
|
||||
width: 100,
|
||||
// 禁用配置表中的隐藏或冻结
|
||||
disabledHide: true,
|
||||
disabledFreeze: true,
|
||||
// 可拖拽属性（不能fixed一起用）
|
||||
// resizable: true,
|
||||
// 默认冻结，值可以是 'left' 或 true
|
||||
fixed: true,
|
||||
title: '#',
|
||||
ellipsis: true,
|
||||
dataIndex: 'key'
|
||||
},
|
||||
{
|
||||
resizable: true,
|
||||
title: 'Date',
|
||||
dataIndex: 'date',
|
||||
minWidth: 200,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
// 标题使用插槽使用这个代替title（用于设置里显示列名）
|
||||
columnTitle: 'Name',
|
||||
dataIndex: 'name',
|
||||
resizable: true, // 可拖拽属性
|
||||
// fixed: true,
|
||||
key: 'name',
|
||||
minWidth: 100,
|
||||
width: 150,
|
||||
slots: { title: 'customTitle' },
|
||||
scopedSlots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
resizable: true, // 可拖拽属性
|
||||
title: 'Tags',
|
||||
key: 'tags',
|
||||
dataIndex: 'tags',
|
||||
minWidth: 200,
|
||||
width: 200,
|
||||
scopedSlots: { customRender: 'tags' }
|
||||
},
|
||||
{
|
||||
resizable: true, // 可拖拽属性
|
||||
title: 'Amount',
|
||||
dataIndex: 'amount',
|
||||
minWidth: 100,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
resizable: true, // 可拖拽属性
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Note',
|
||||
dataIndex: 'note',
|
||||
// 保留一列自适应
|
||||
// width: 100
|
||||
// 建议：没有宽度的列至少一列禁止自定义（解决冻结或隐藏列导致出现空列）
|
||||
// disabledHide: true,
|
||||
// disabledFreeze: true,
|
||||
hideSettingColumn: true
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
// filterIcon 和 filterDropdown 不能使用
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
const dataSource = [
|
||||
{
|
||||
key: 0,
|
||||
name: 'John Brown',
|
||||
tags: ['nice', 'developer'],
|
||||
date: '2018-02-11',
|
||||
amount: 120,
|
||||
type: 'income',
|
||||
note: 'transfer'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
name: 'Jim Green',
|
||||
tags: ['loser'],
|
||||
date: '2018-03-11',
|
||||
amount: 243,
|
||||
type: 'income',
|
||||
note: 'transfer'
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: 'Joe Black',
|
||||
tags: ['cool', 'teacher'],
|
||||
date: '2018-04-11',
|
||||
amount: 98,
|
||||
type: 'income',
|
||||
note: 'transfer'
|
||||
}
|
||||
]
|
||||
return {
|
||||
scroll: { x: 1400 },
|
||||
columns: columns,
|
||||
dataSource: dataSource,
|
||||
selectedRowKeys: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 还原表格初始配置
|
||||
resetTable () {
|
||||
this.$refs.table.resteColumns()
|
||||
},
|
||||
// 清除当前表格缓存
|
||||
clearTableCache () {
|
||||
this.$refs.table.clearSetting()
|
||||
},
|
||||
// 清除所有缓存
|
||||
clearAllTableCache () {
|
||||
this.$refs.table.clearAllCacheSetting()
|
||||
},
|
||||
onDelete (key) {
|
||||
this.$message.info(`del:${key}`)
|
||||
},
|
||||
onSelectChange (selectedRowKeys) {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys)
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -1,272 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="角色ID">
|
||||
<a-input placeholder="请输入"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button class="resetBtn">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table :columns="columns" :data="loadData">
|
||||
|
||||
<span slot="actions" slot-scope="text, record">
|
||||
<a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
|
||||
</span>
|
||||
|
||||
<span slot="status" slot-scope="text">
|
||||
{{ text | statusFilter }}
|
||||
</span>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
:hasFeedback="true"
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="权限名称"
|
||||
:hasFeedback="true"
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="起一个名字" v-model="mdl.name" id="permission_name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
:hasFeedback="true"
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select v-model="mdl.status">
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
:hasFeedback="true"
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="赋予权限"
|
||||
:hasFeedback="true"
|
||||
>
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
mode="multiple"
|
||||
v-model="mdl.actions"
|
||||
:allowClear="true"
|
||||
>
|
||||
<a-select-option v-for="(action, index) in permissionList" :key="index" :value="action.value">{{ action.label }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table'
|
||||
|
||||
export default {
|
||||
name: 'TableList',
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '权限名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '可操作权限',
|
||||
dataIndex: 'actions',
|
||||
scopedSlots: { customRender: 'actions' }
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
// 向后端拉取可以用的操作列表
|
||||
permissionList: null,
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/permission', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
const result = res.result
|
||||
result.data.map(permission => {
|
||||
permission.actionList = JSON.parse(permission.actionData)
|
||||
return permission
|
||||
})
|
||||
return result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter (status) {
|
||||
const statusMap = {
|
||||
1: '正常',
|
||||
2: '禁用'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissionList()
|
||||
},
|
||||
methods: {
|
||||
loadPermissionList () {
|
||||
// permissionList
|
||||
new Promise(resolve => {
|
||||
const data = [
|
||||
{ label: '新增', value: 'add', defaultChecked: false },
|
||||
{ label: '查询', value: 'get', defaultChecked: false },
|
||||
{ label: '修改', value: 'update', defaultChecked: false },
|
||||
{ label: '列表', value: 'query', defaultChecked: false },
|
||||
{ label: '删除', value: 'delete', defaultChecked: false },
|
||||
{ label: '导入', value: 'import', defaultChecked: false },
|
||||
{ label: '导出', value: 'export', defaultChecked: false }
|
||||
]
|
||||
setTimeout(resolve(data), 1500)
|
||||
}).then(res => {
|
||||
this.permissionList = res
|
||||
})
|
||||
},
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="我的待办" content="8个任务" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="本周完成任务数" content="24个"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<a-card
|
||||
style="margin-top: 24px"
|
||||
:bordered="false"
|
||||
title="标准列表">
|
||||
|
||||
<div slot="extra">
|
||||
<a-radio-group>
|
||||
<a-radio-button>全部</a-radio-button>
|
||||
<a-radio-button>进行中</a-radio-button>
|
||||
<a-radio-button>等待中</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input-search style="margin-left: 16px; width: 272px;" />
|
||||
</div>
|
||||
|
||||
<div class="operate">
|
||||
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
|
||||
</div>
|
||||
|
||||
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
|
||||
<a-list-item :key="index" v-for="(item, index) in data">
|
||||
<a-list-item-meta :description="item.description">
|
||||
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
|
||||
<a slot="title">{{ item.title }}</a>
|
||||
</a-list-item-meta>
|
||||
<div slot="actions">
|
||||
<a>编辑</a>
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<a-dropdown>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item><a>编辑</a></a-menu-item>
|
||||
<a-menu-item><a>删除</a></a-menu-item>
|
||||
</a-menu>
|
||||
<a>更多<a-icon type="down"/></a>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="list-content-item">
|
||||
<span>Owner</span>
|
||||
<p>{{ item.owner }}</p>
|
||||
</div>
|
||||
<div class="list-content-item">
|
||||
<span>开始时间</span>
|
||||
<p>{{ item.startAt }}</p>
|
||||
</div>
|
||||
<div class="list-content-item">
|
||||
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
|
||||
</div>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
|
||||
const data = []
|
||||
data.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
description: '那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
owner: '付晓晓',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 90
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Angular',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
|
||||
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
owner: '曲丽丽',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 54
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
|
||||
description: '生命就像一盒巧克力，结果往往出人意料',
|
||||
owner: '林东东',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 66
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design Pro',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
|
||||
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
owner: '周星星',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 30
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Bootstrap',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
|
||||
description: '那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
owner: '吴加好',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
status: 'exception',
|
||||
value: 100
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'StandardList',
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-avatar-lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.list-content-item {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
span {
|
||||
line-height: 20px;
|
||||
}
|
||||
p {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,296 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="规则编号">
|
||||
<a-input placeholder="" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="advanced">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="调用次数">
|
||||
<a-input-number style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="更新日期">
|
||||
<a-date-picker style="width: 100%" placeholder="请输入更新日期" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<a-col :md="!advanced && 8 || 24" :sm="24">
|
||||
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
|
||||
<a @click="toggleAdvanced" style="margin-right: 28px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'" />
|
||||
</a>
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button class="resetBtn">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="() => this.handleModalVisible(true)">新建</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1">
|
||||
<a-icon type="delete" />
|
||||
删除
|
||||
</a-menu-item>
|
||||
<!-- lock | unlock -->
|
||||
<a-menu-item key="2">
|
||||
<a-icon type="lock" />
|
||||
锁定
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px">
|
||||
批量操作
|
||||
<a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showAlertInfo="true"
|
||||
@onSelect="onChange"
|
||||
>
|
||||
<template v-for="(col, index) in columns" :slot="col.dataIndex" slot-scope="text, record">
|
||||
<div :key="index" v-if="col.scopedSlots">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="action" slot-scope="text, record">
|
||||
<div class="editable-row-operations">
|
||||
<span v-if="record.editable">
|
||||
<a @click="() => save(record)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
|
||||
<a>取消</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a class="edit" @click="() => edit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="delete" @click="() => del(record)">删除</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</s-table>
|
||||
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
|
||||
<!---->
|
||||
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
|
||||
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description"
|
||||
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}">
|
||||
<a-input placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table'
|
||||
|
||||
export default {
|
||||
name: 'TableList',
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '规则编号',
|
||||
dataIndex: 'no',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
scopedSlots: { customRender: 'description' }
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
needTotal: true,
|
||||
scopedSlots: { customRender: 'callNo' }
|
||||
// customRender: (text) => text + ' 次'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: '100px',
|
||||
needTotal: true,
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
scopedSlots: { customRender: 'updatedAt' }
|
||||
},
|
||||
{
|
||||
table: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '120px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/service', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
visibleCreateModal: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleChange (value, key, column) {
|
||||
console.log(value, key, column)
|
||||
},
|
||||
edit (row) {
|
||||
row.editable = true
|
||||
// row = Object.assign({}, row)
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
// eslint-disable-next-line
|
||||
del (row) {
|
||||
this.$confirm({
|
||||
title: '警告',
|
||||
content: '真的要删除吗?',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk () {
|
||||
console.log('OK')
|
||||
// 在这里调用删除接口
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
|
||||
}).catch(() => console.log('Oops errors!'))
|
||||
},
|
||||
onCancel () {
|
||||
console.log('Cancel')
|
||||
}
|
||||
})
|
||||
},
|
||||
save (row) {
|
||||
delete row.editable
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
cancel (row) {
|
||||
delete row.editable
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
// 添加逻辑
|
||||
handleModalVisible (isVisible) {
|
||||
this.visibleCreateModal = isVisible
|
||||
},
|
||||
handleCreateModalCancel () {
|
||||
this.visibleCreateModal = false
|
||||
},
|
||||
handleCreateModalOk () {
|
||||
this.visibleCreateModal = false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.fold {
|
||||
width: calc(100% - 216px);
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.fold {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,337 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="规则编号">
|
||||
<a-input v-model="queryParam.id" placeholder=""/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="advanced">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="调用次数">
|
||||
<a-input-number v-model="queryParam.callNo" style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="更新日期">
|
||||
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<a-col :md="!advanced && 8 || 24" :sm="24">
|
||||
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
|
||||
<a @click="toggleAdvanced" style="margin-right: 28px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'"/>
|
||||
</a>
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button class="resetBtn" @click="resetSearchForm">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="() => this.handleModalVisible(true)">新建</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
|
||||
<!-- lock | unlock -->
|
||||
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px">
|
||||
批量操作 <a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showAlertInfo="true"
|
||||
@onSelect="onChange"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则编号"
|
||||
:hasFeedback="true"
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="规则编号" v-model="mdl.no" id="no" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="服务调用次数"
|
||||
:hasFeedback="true"
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
:hasFeedback="true"
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select defaultValue="1" v-model="mdl.status">
|
||||
<a-select-option value="1">Option 1</a-select-option>
|
||||
<a-select-option value="2">Option 2</a-select-option>
|
||||
<a-select-option value="3">Option 3</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
:hasFeedback="true"
|
||||
help="请填写一段描述"
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.description" placeholder="..." id="description"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="更新时间"
|
||||
:hasFeedback="true"
|
||||
validateStatus="error"
|
||||
>
|
||||
<a-date-picker
|
||||
style="width: 100%"
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="Select Time"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
|
||||
<!---->
|
||||
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
|
||||
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}">
|
||||
<a-input placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table'
|
||||
import ATextarea from 'ant-design-vue/es/input/TextArea'
|
||||
import AInput from 'ant-design-vue/es/input/Input'
|
||||
import moment from 'moment'
|
||||
import axios from 'axios'
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'TableList',
|
||||
components: {
|
||||
AInput,
|
||||
ATextarea,
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visibleCreateModal: false,
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 12 }
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: true,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '规则编号',
|
||||
dataIndex: 'no'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description'
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
needTotal: true,
|
||||
customRender: (text) => text + ' 次'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
needTotal: true
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
table: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '150px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getServiceList(Object.assign(parameter, this.queryParam))
|
||||
.then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getRoleList({ t: new Date() })
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
|
||||
// 添加逻辑
|
||||
handleModalVisible (isVisible) {
|
||||
this.visibleCreateModal = isVisible
|
||||
},
|
||||
handleCreateModalOk () {
|
||||
this.createForm.validateFields((err) => {
|
||||
if (err) {
|
||||
return
|
||||
}
|
||||
const description = this.createForm.getFieldValue('description')
|
||||
axios.post('/saveRule', {
|
||||
desc: description
|
||||
}).then(() => {
|
||||
this.createForm.resetFields()
|
||||
this.visibleCreateModal = false
|
||||
// this.loadRuleData()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleCreateModalCancel () {
|
||||
this.visibleCreateModal = false
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
|
||||
console.log(this.$refs.table)
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
|
||||
resetSearchForm () {
|
||||
this.queryParam = {
|
||||
date: moment(new Date())
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,202 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
:hasFeedback="true"
|
||||
>
|
||||
<a-input placeholder="唯一识别码" disabled="disabled" v-decorator="[ 'id', {rules: []} ]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色名称"
|
||||
:hasFeedback="true" >
|
||||
<a-input placeholder="起一个名字" v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗？' }] }]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
:hasFeedback="true" >
|
||||
<a-select v-decorator="[ 'status', {rules: []} ]">
|
||||
<a-select-option :value="1">正常</a-select-option>
|
||||
<a-select-option :value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
:hasFeedback="true"
|
||||
>
|
||||
<a-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider/>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="拥有权限"
|
||||
:hasFeedback="true"
|
||||
>
|
||||
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
|
||||
<a-col :span="4">
|
||||
{{ permission.name }}：
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<a-checkbox
|
||||
v-if="permission.actionsOptions.length > 0"
|
||||
:indeterminate="permission.indeterminate"
|
||||
:checked="permission.checkedAll"
|
||||
@change="onChangeCheckAll($event, permission)">
|
||||
全选
|
||||
</a-checkbox>
|
||||
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPermissions } from '@/api/manage'
|
||||
import { actionToObject } from '@/utils/permissions'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
name: 'RoleModal',
|
||||
data () {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
mdl: {},
|
||||
|
||||
form: this.$form.createForm(this),
|
||||
permissions: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissions()
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({ id: 0 })
|
||||
},
|
||||
edit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
this.visible = true
|
||||
|
||||
// 有权限表，处理勾选
|
||||
if (this.mdl.permissions && this.permissions) {
|
||||
// 先处理要勾选的权限结构
|
||||
const permissionsAction = {}
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
|
||||
})
|
||||
// 把权限表遍历一遍，设定要勾选的权限 action
|
||||
this.permissions.forEach(permission => {
|
||||
permission.selected = permissionsAction[permission.id]
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
|
||||
})
|
||||
console.log('this.mdl', this.mdl)
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const _this = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
// 验证表单没错误
|
||||
if (!err) {
|
||||
console.log('form values', values)
|
||||
|
||||
_this.confirmLoading = true
|
||||
// 模拟后端请求 2000 毫秒延迟
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => resolve(), 2000)
|
||||
}).then(() => {
|
||||
// Do something
|
||||
_this.$message.success('保存成功')
|
||||
_this.$emit('ok')
|
||||
}).catch(() => {
|
||||
// Do something
|
||||
}).finally(() => {
|
||||
_this.confirmLoading = false
|
||||
_this.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
onChangeCheck (permission) {
|
||||
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
|
||||
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
|
||||
},
|
||||
onChangeCheckAll (e, permission) {
|
||||
Object.assign(permission, {
|
||||
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
|
||||
indeterminate: false,
|
||||
checkedAll: e.target.checked
|
||||
})
|
||||
},
|
||||
loadPermissions () {
|
||||
getPermissions().then(res => {
|
||||
const result = res.result
|
||||
this.permissions = result.map(permission => {
|
||||
const options = actionToObject(permission.actionData)
|
||||
permission.checkedAll = false
|
||||
permission.selected = []
|
||||
permission.indeterminate = false
|
||||
permission.actionsOptions = options.map(option => {
|
||||
return {
|
||||
label: option.describe,
|
||||
value: option.action
|
||||
}
|
||||
})
|
||||
return permission
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,301 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<a-button @click="handleTableCheck" type="primary">表单验证</a-button>
|
||||
<span style="padding-left:8px;"></span>
|
||||
<a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
|
||||
<a-button @click="handleTableGet" type="primary">获取值</a-button>
|
||||
</a-tooltip>
|
||||
<span style="padding-left:8px;"></span>
|
||||
<a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
|
||||
<a-button @click="handleTableSet" type="primary">设置值</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<j-editable-table
|
||||
ref="editableTable"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:actionButton="true"
|
||||
:dragSort="true"
|
||||
style="margin-top: 8px;"
|
||||
@selectRowChange="handleSelectRowChange">
|
||||
|
||||
<template v-slot:action="props">
|
||||
<a @click="handleDelete(props)">删除</a>
|
||||
</template>
|
||||
|
||||
</j-editable-table>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import { randomUUID, randomNumber } from '@/utils/util'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
export default {
|
||||
name: 'DefaultTable',
|
||||
components: { JEditableTable },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '字段名称',
|
||||
key: 'dbFieldName',
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [
|
||||
{
|
||||
required: true, // 必填
|
||||
message: '请输入${title}' // 显示的文本
|
||||
},
|
||||
{
|
||||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
|
||||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||||
},
|
||||
{
|
||||
unique: true,
|
||||
message: '${title}不能重复'
|
||||
},
|
||||
{
|
||||
handler (type, value, row, column, callback) {
|
||||
// type 触发校验的类型（input、change、blur）
|
||||
// value 当前校验的值
|
||||
// callback(flag, message) 方法必须执行且只能执行一次
|
||||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||||
// message = 提示的类型，默认使用配置的 message
|
||||
// target 行编辑的实例对象
|
||||
|
||||
if (type === 'blur') {
|
||||
if (value === 'abc') {
|
||||
const flag = false
|
||||
callback(flag, '${title}不能是abc') // false = 未通过校验
|
||||
} else {
|
||||
const flag = true
|
||||
callback(flag) // true = 通过验证
|
||||
}
|
||||
} else {
|
||||
const flag = true
|
||||
callback(flag) // 不填写或者填写 null 代表不进行任何操作
|
||||
}
|
||||
},
|
||||
message: '${title}默认提示'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '文件域',
|
||||
key: 'upload',
|
||||
type: FormTypes.upload,
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
placeholder: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG.domianURL + '/sys/common/upload',
|
||||
data: {
|
||||
biz: 'temp'
|
||||
// 更多扩展参数
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '字段类型',
|
||||
key: 'dbFieldType',
|
||||
// width: '18%',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
allowInput: true,
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '性别（字典）',
|
||||
key: 'sex_dict',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
options: [],
|
||||
dictCode: 'sex',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '多选测试',
|
||||
key: 'multipleSelect',
|
||||
// width: '18%',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
props: { mode: 'multiple' }, // 支持多选
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
defaultValue: ['int', 'boolean'], // 多个默认项
|
||||
// defaultValue: 'string,double,int', // 也可使用这种方式
|
||||
placeholder: '这里可以多选',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '字段长度',
|
||||
key: 'dbLength',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.inputNumber,
|
||||
defaultValue: 32,
|
||||
placeholder: '${title}',
|
||||
// 是否是统计列，只有 inputNumber 才能设置统计列
|
||||
statistics: true,
|
||||
validateRules: [{ required: true, message: '请输入${title}' }]
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'datetime',
|
||||
// width: '22%',
|
||||
width: '320px',
|
||||
type: FormTypes.datetime,
|
||||
defaultValue: '2019-4-30 14:52:22',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '数字',
|
||||
key: 'money',
|
||||
width: '320px',
|
||||
type: FormTypes.inputNumber,
|
||||
defaultValue: '100.32',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '可以为空',
|
||||
key: 'isNull',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
{
|
||||
type: FormTypes.popup,
|
||||
key: 'popup',
|
||||
title: 'JPopup',
|
||||
width: '180px',
|
||||
popupCode: 'demo',
|
||||
field: 'name',
|
||||
orgFields: 'name',
|
||||
destFields: 'name'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.slot,
|
||||
slotName: 'action'
|
||||
}
|
||||
|
||||
],
|
||||
dataSource: [],
|
||||
selectedRowIds: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.randomData(23, false)
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 表单验证 */
|
||||
handleTableCheck () {
|
||||
this.$refs.editableTable.getValues((error) => {
|
||||
if (error === 0) {
|
||||
this.$message.success('验证通过')
|
||||
} else {
|
||||
this.$message.error('验证未通过')
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet () {
|
||||
this.$refs.editableTable.getValues((error, values) => {
|
||||
console.log('error:', error)
|
||||
console.log('values:', values)
|
||||
}, false)
|
||||
console.log('deleteIds:', this.$refs.editableTable.getDeleteIds())
|
||||
|
||||
this.$message.info('获取值成功，请看控制台输出')
|
||||
},
|
||||
/** 模拟加载1000条数据 */
|
||||
handleTableSet () {
|
||||
this.randomData(1000, true)
|
||||
},
|
||||
|
||||
handleSelectRowChange (selectedRowIds) {
|
||||
this.selectedRowIds = selectedRowIds
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomData (size, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
const randomDatetime = () => {
|
||||
const time = parseInt(randomNumber(1000, 9999999999999))
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
const begin = Date.now()
|
||||
const values = []
|
||||
for (let i = 0; i < size; i++) {
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
dbFieldName: `name_${i + 1}`,
|
||||
// dbFieldTxt: randomString(10),
|
||||
multipleSelect: ['string', ['int', 'double', 'boolean'][randomNumber(0, 2)]],
|
||||
dbFieldType: ['string', 'int', 'double', 'boolean'][randomNumber(0, 3)],
|
||||
dbLength: randomNumber(0, 233),
|
||||
datetime: randomDatetime(),
|
||||
isNull: ['Y', 'N'][randomNumber(0, 1)]
|
||||
})
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
const end = Date.now()
|
||||
const diff = end - begin
|
||||
|
||||
if (loading && diff < size) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, size - diff)
|
||||
}
|
||||
},
|
||||
|
||||
handleDelete (props) {
|
||||
const { rowId, target } = props
|
||||
target.removeRows(rowId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,306 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
:destroyOnClose="true"
|
||||
:maskClosable="false"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" >
|
||||
<!-- 主表单区域 -->
|
||||
<a-row class="form-row" :gutter="0">
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单号" prop="orderCode" :rules="[{ required: true, message: '请输入订单号!' }]">
|
||||
<a-input placeholder="请输入订单号" v-model="model.orderCode"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单类型">
|
||||
<a-select placeholder="请选择订单类型" v-model="model.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单日期">
|
||||
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-model="model.orderDate"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="0">
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单金额">
|
||||
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-model="model.orderMoney"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单备注">
|
||||
<a-input placeholder="请输入订单备注" v-model="model.content"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
|
||||
<!-- 子表单区域 -->
|
||||
<a-tabs v-model="activeKey" @change="handleChangeTabs">
|
||||
<a-tab-pane tab="客户信息" key="1" :forceRender="true">
|
||||
<j-vxe-table
|
||||
ref="editableTable1"
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
keep-source
|
||||
:height="300"
|
||||
:loading="table1.loading"
|
||||
:dataSource="table1.dataSource"
|
||||
:columns="table1.columns"
|
||||
style="margin-top: 8px;"/>
|
||||
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="机票信息" key="2" :forceRender="true">
|
||||
<j-vxe-table
|
||||
ref="editableTable2"
|
||||
:toolbar="true"
|
||||
:row-number="true"
|
||||
:row-selection="true"
|
||||
keep-source
|
||||
:height="300"
|
||||
:loading="table2.loading"
|
||||
:dataSource="table2.dataSource"
|
||||
:columns="table2.columns"
|
||||
style="margin-top: 8px;"/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { VALIDATE_FAILED, getRefPromise, validateFormModelAndTables } from '@/components/jero/JVxeTable/utils/vxeUtils'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
export default {
|
||||
name: 'JeroOrderModalForJvexTable',
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: JVXETypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: JVXETypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable () {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
},
|
||||
|
||||
add () {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
// editableTables[0].add()
|
||||
// editableTables[1].add()
|
||||
})
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
const params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.getAllTable().then(() => {
|
||||
this.table1.dataSource = []
|
||||
this.table2.dataSource = []
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData (url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs (key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields () {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form, this.model, tables)
|
||||
}).then(allValues => {
|
||||
const formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_FAILED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData (allValues) {
|
||||
const orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].tableData,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].tableData
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit (formData) {
|
||||
let url = this.url.add; const method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
// method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<j-editable-table
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:maxHeight="400"
|
||||
:disabled="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'ReadOnlyTable',
|
||||
components: { JEditableTable },
|
||||
data () {
|
||||
return {
|
||||
|
||||
columns: [
|
||||
{
|
||||
title: '输入框',
|
||||
key: 'input',
|
||||
type: FormTypes.input,
|
||||
placeholder: '清输入'
|
||||
},
|
||||
{
|
||||
title: '下拉框',
|
||||
key: 'select',
|
||||
type: FormTypes.select,
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '多选框',
|
||||
key: 'checkbox',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: [true, false]
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'datetime',
|
||||
type: FormTypes.datetime
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{ input: 'hello', select: 'int', checkbox: true, datetime: '2019-6-17 14:50:48' },
|
||||
{ input: 'world', select: 'string', checkbox: false, datetime: '2019-6-16 14:50:48' },
|
||||
{ input: 'one', select: 'double', checkbox: true, datetime: '2019-6-17 15:50:48' },
|
||||
{ input: 'two', select: 'boolean', checkbox: false, datetime: '2019-6-14 14:50:48' },
|
||||
{ input: 'three', select: '', checkbox: false, datetime: '2019-6-13 14:50:48' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<j-editable-table
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowNumber="true"
|
||||
:actionButton="true"
|
||||
:rowSelection="true"
|
||||
:maxHeight="400"
|
||||
@valueChange="handleValueChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'ThreeLinkage',
|
||||
components: { JEditableTable },
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '省/直辖市/自治区',
|
||||
key: 's1',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
key: 's2',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '县/区',
|
||||
key: 's3',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
placeholder: '请选择${title}'
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
|
||||
mockData: [
|
||||
{ label: '北京市', value: '110000', parent: null },
|
||||
{ label: '天津市', value: '120000', parent: null },
|
||||
{ label: '河北省', value: '130000', parent: null },
|
||||
{ label: '上海市', value: '310000', parent: null },
|
||||
|
||||
{ label: '北京市', value: '110100', parent: '110000' },
|
||||
{ label: '天津市市', value: '120100', parent: '120000' },
|
||||
{ label: '石家庄市', value: '130100', parent: '130000' },
|
||||
{ label: '唐山市', value: '130200', parent: '130000' },
|
||||
{ label: '秦皇岛市', value: '130300', parent: '130000' },
|
||||
{ label: '上海市', value: '310100', parent: '310000' },
|
||||
|
||||
{ label: '东城区', value: '110101', parent: '110100' },
|
||||
{ label: '西城区', value: '110102', parent: '110100' },
|
||||
{ label: '朝阳区', value: '110105', parent: '110100' },
|
||||
{ label: '和平区', value: '120101', parent: '120000' },
|
||||
{ label: '河东区', value: '120102', parent: '120000' },
|
||||
{ label: '河西区', value: '120103', parent: '120000' },
|
||||
{ label: '黄浦区', value: '310101', parent: '310100' },
|
||||
{ label: '徐汇区', value: '310104', parent: '310100' },
|
||||
{ label: '长宁区', value: '310105', parent: '310100' },
|
||||
{ label: '长安区', value: '130102', parent: '130100' },
|
||||
{ label: '桥西区', value: '130104', parent: '130100' },
|
||||
{ label: '新华区', value: '130105', parent: '130100' },
|
||||
{ label: '路南区', value: '130202', parent: '130200' },
|
||||
{ label: '路北区', value: '130203', parent: '130200' },
|
||||
{ label: '古冶区', value: '130204', parent: '130200' },
|
||||
{ label: '海港区', value: '130302', parent: '130300' },
|
||||
{ label: '山海关区', value: '130303', parent: '130300' },
|
||||
{ label: '北戴河区', value: '130304', parent: '130300' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化数据
|
||||
this.columns[0].options = this.request(null)
|
||||
},
|
||||
methods: {
|
||||
|
||||
request (parentId) {
|
||||
return this.mockData.filter(i => i.parent === parentId)
|
||||
},
|
||||
|
||||
/** 当选项被改变时，联动其他组件 */
|
||||
handleValueChange (event) {
|
||||
const { type, row, column, value, target } = event
|
||||
|
||||
if (type === FormTypes.select) {
|
||||
// 第一列
|
||||
if (column.key === 's1') {
|
||||
// 设置第二列的 options
|
||||
this.columns[1].options = this.request(value)
|
||||
// 清空后两列的数据
|
||||
target.setValues([{
|
||||
rowKey: row.id,
|
||||
values: { s2: '', s3: '' }
|
||||
}])
|
||||
this.columns[2].options = []
|
||||
} else
|
||||
// 第二列
|
||||
if (column.key === 's2') {
|
||||
this.columns[2].options = this.request(value)
|
||||
target.setValues([{
|
||||
rowKey: row.id,
|
||||
values: { s3: '' }
|
||||
}])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" :rules="validatorRules">
|
||||
<a-form-model-item label="姓名" required prop="name" :hasFeedback="true">
|
||||
<a-input v-model="model.name" placeholder="请输入姓名"/>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="关键词" prop="keyWord" :hasFeedback="true">
|
||||
<a-input v-model="model.keyWord" placeholder="请输入关键词"/>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="打卡时间" prop="punchTime" :hasFeedback="true">
|
||||
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="model.punchTime" />
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="性别" prop="sex" :hasFeedback="true">
|
||||
<j-dict-select-tag type="radio" v-model="model.sex" :trigger-change="true" dictCode="sex"/>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="年龄" prop="age" :hasFeedback="true">
|
||||
<a-input placeholder="请输入年龄" v-model="model.age"/>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="生日" prop="age" :hasFeedback="true">
|
||||
<a-date-picker valueFormat="YYYY-MM-DD" v-model="model.birthday"/>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="邮箱" prop="email" :hasFeedback="true" >
|
||||
<a-input placeholder="请输入邮箱" v-model="model.email"/>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="个人简介" prop="content" :hasFeedback="true">
|
||||
<a-input type="textarea" placeholder="请输入个人简介" v-model="model.content"/>
|
||||
</a-form-model-item>
|
||||
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JeroDemoModal',
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
layout: {
|
||||
labelCol: { span: 3 },
|
||||
wrapperCol: { span: 14 }
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 3 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名!' },
|
||||
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: false, type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroDemo/add',
|
||||
edit: '/test/jeroDemo/edit'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
},
|
||||
close () {
|
||||
this.$refs.form.resetFields()
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true
|
||||
let httpUrl
|
||||
const method = 'post'
|
||||
if (!this.model.id) {
|
||||
httpUrl = this.url.add
|
||||
} else {
|
||||
httpUrl = this.url.edit
|
||||
// method = 'put'
|
||||
}
|
||||
|
||||
httpAction(httpUrl, this.model, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,283 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-card class="card" :bordered="false">
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="任务名">
|
||||
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="任务描述">
|
||||
<a-input placeholder="请输入任务描述" v-decorator="['task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="执行人">
|
||||
<a-select placeholder="请选择执行人" v-decorator="['task.executor',{rules: [{ required: true, message: '请选择执行人'}]} ]">
|
||||
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
|
||||
<a-select-option value="李大刀">李大刀</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="责任人">
|
||||
<a-select placeholder="请选择责任人" v-decorator="['task.manager', {rules: [{ required: true, message: '请选择责任人'}]} ]">
|
||||
<a-select-option value="王伟">王伟</a-select-option>
|
||||
<a-select-option value="李红军">李红军</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="提醒时间">
|
||||
<a-time-picker style="width: 100%" v-decorator="['task.time', {rules: [{ required: true, message: '请选择提醒时间'}]} ]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
label="任务类型">
|
||||
<a-select placeholder="请选择任务类型" v-decorator="['task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]">
|
||||
<a-select-option value="定时执行">定时执行</a-select-option>
|
||||
<a-select-option value="周期执行">周期执行</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<a-tabs defaultActiveKey="1" >
|
||||
<a-tab-pane tab="Tab 1" key="1">
|
||||
|
||||
<a-table :columns="columns" :dataSource="data" :pagination="false" size="middle">
|
||||
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record">
|
||||
<a-tooltip :key="col" title="必填项" :defaultVisible="false" :overlayStyle="{ color: 'red' }">
|
||||
<a-input :key="col" v-if="record.editable" style="margin: -5px 0" :value="text" :placeholder="columns[i].title" @change="e => handlerRowChange(e.target.value, record.key, col)"/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template slot="operation" slot-scope="text, record">
|
||||
<template v-if="record.editable">
|
||||
<span v-if="record.isNew">
|
||||
<a @click="saveRow(record.key)">添加</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)"><a>删除</a></a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a @click="saveRow(record.key)">保存</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="cancelEditRow(record.key)">取消</a>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>
|
||||
<a @click="editRow(record.key)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)"><a>删除</a></a-popconfirm>
|
||||
</span>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增成员</a-button>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="Tab 2" key="2" forceRender>
|
||||
Content of Tab Pane 2
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'JeroDemoTabsModal',
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
// table
|
||||
columns: [
|
||||
{
|
||||
title: '成员姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: '工号',
|
||||
dataIndex: 'workId',
|
||||
key: 'workId',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'workId' }
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'department',
|
||||
key: 'department',
|
||||
width: '40%',
|
||||
scopedSlots: { customRender: 'department' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
name: '小明',
|
||||
workId: '001',
|
||||
editable: false,
|
||||
department: '行政部'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '李莉',
|
||||
workId: '002',
|
||||
editable: false,
|
||||
department: 'IT部'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '王小帅',
|
||||
workId: '003',
|
||||
editable: false,
|
||||
department: '财务部'
|
||||
}
|
||||
],
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {},
|
||||
url: {
|
||||
add: '/test/jeroDemo/add',
|
||||
edit: '/test/jeroDemo/edit'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'name', 'keyWord', 'sex', 'age', 'email', 'content'))
|
||||
// 时间格式化
|
||||
this.form.setFieldsValue({ punchTime: this.model.punchTime ? moment(this.model.punchTime, 'YYYY-MM-DD HH:mm:ss') : null })
|
||||
this.form.setFieldsValue({ birthday: this.model.birthday ? moment(this.model.birthday) : null })
|
||||
})
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
let httpurl
|
||||
const method = 'post'
|
||||
if (!this.model.id) {
|
||||
httpurl = this.url.add
|
||||
// method = 'post'
|
||||
} else {
|
||||
httpurl = this.url.edit
|
||||
// method = 'put'
|
||||
}
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 时间格式化
|
||||
formData.punchTime = formData.punchTime ? formData.punchTime.format('YYYY-MM-DD HH:mm:ss') : null
|
||||
formData.birthday = formData.birthday ? formData.birthday.format() : null
|
||||
|
||||
console.log(formData)
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
newRow () {
|
||||
// 通过时间戳生成 UUID
|
||||
const uuid = Math.round(new Date().getTime()).toString()
|
||||
console.log('uuid: ' + uuid)
|
||||
this.data.push({
|
||||
key: uuid,
|
||||
name: '',
|
||||
workId: '',
|
||||
department: '',
|
||||
editable: true,
|
||||
isNew: true
|
||||
})
|
||||
},
|
||||
removeRow (key) {
|
||||
this.data = this.data.filter(item => item.key !== key)
|
||||
},
|
||||
saveRow (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
target.isNew = false
|
||||
},
|
||||
handlerRowChange (value, key, column) {
|
||||
const newData = [...this.data]
|
||||
const target = newData.filter(item => key === item.key)[0]
|
||||
if (target) {
|
||||
target[column] = value
|
||||
this.data = newData
|
||||
}
|
||||
},
|
||||
editRow (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = !target.editable
|
||||
},
|
||||
cancelEditRow (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-modal-body {
|
||||
padding: 8px!important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,295 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="orderMainModel" :rules="validatorRules">
|
||||
<!-- 主表单区域 -->
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单号" required prop="orderCode">
|
||||
<a-input v-model="orderMainModel.orderCode" placeholder="请输入订单号"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单类型" prop="ctype">
|
||||
<a-select placeholder="请选择订单类型" v-model="orderMainModel.ctype" >
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单日期" prop="orderDate">
|
||||
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="orderMainModel.orderDate"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单金额" prop="orderMoney">
|
||||
<a-input-number style="width: 200px" v-model="orderMainModel.orderMoney"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单备注" prop="content">
|
||||
<a-input placeholder="请输入订单备注" v-model="orderMainModel.content" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 子表单区域 -->
|
||||
<a-tabs defaultActiveKey="1" >
|
||||
<a-tab-pane tab="客户信息" key="1">
|
||||
<div>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16">
|
||||
<a-col :span="5">客户名</a-col>
|
||||
<a-col :span="5">性别</a-col>
|
||||
<a-col :span="6">身份证号码</a-col>
|
||||
<a-col :span="6">手机号</a-col>
|
||||
<a-col :span="2">操作</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeroOrderCustomerList" :key="index">
|
||||
<a-col :span="6" style="display: none">
|
||||
<a-form-model-item>
|
||||
<a-input placeholder="id" v-model="item.id" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-form-model-item>
|
||||
<a-input placeholder="客户名" v-model="item.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-form-model-item>
|
||||
<a-select placeholder="性别" v-model="item.sex" >
|
||||
<a-select-option value="1">男</a-select-option>
|
||||
<a-select-option value="2">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item :prop="'jeroOrderCustomerList.' + index + '.idcard'" :rules="[{required: true,message: '请输入身份证号',trigger: 'blur'},{ pattern: rules.IDCard, message: '身份证号格式不对!' }]">
|
||||
<a-input placeholder="身份证号" v-model="item.idcard" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item :prop="'jeroOrderCustomerList.' + index + '.telphone'" :rules="rules.mobile">
|
||||
<a-input placeholder="手机号" v-model="item.telphone"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-form-model-item>
|
||||
<a-icon type="minus-circle" @click="delRowCustom(index)" style="font-size :20px"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-button type="dashed" style="width: 98%;margin-top: 10px" @click="addRowCustom">
|
||||
<a-icon type="plus" /> 添加客户信息
|
||||
</a-button>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="机票信息" key="2" forceRender>
|
||||
<div>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16">
|
||||
<a-col :span="6">航班号</a-col>
|
||||
<a-col :span="6">航班时间</a-col>
|
||||
<a-col :span="6">操作</a-col>
|
||||
</a-row>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeroOrderTicketList" :key="index">
|
||||
<a-col :span="6" style="display: none">
|
||||
<a-form-model-item>
|
||||
<a-input placeholder="id" v-model="item.id" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item :prop="'jeroOrderTicketList.' + index + '.ticketCode'" :rules="{required: true,message: '请输入航班号',trigger: 'blur'}">
|
||||
<a-input placeholder="航班号" v-model="item.ticketCode"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item>
|
||||
<a-date-picker placeholder="航班时间" valueFormat="YYYY-MM-DD" v-model="item.tickectDate" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item>
|
||||
<a-icon type="minus-circle" @click="delRowTicket(index)" style="font-size :20px"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-button type="dashed" style="width: 98%;margin-top: 10px" @click="addRowTicket">
|
||||
<a-icon type="plus" /> 添加机票信息
|
||||
</a-button>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import { rules } from '@/utils/rules'
|
||||
|
||||
export default {
|
||||
name: 'JeroOrderMainModal',
|
||||
computed: {
|
||||
rules () {
|
||||
return rules
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
orderMainModel: {
|
||||
jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
orderCode: [
|
||||
{ required: true, message: '订单号不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.orderMainModel = Object.assign({
|
||||
jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]
|
||||
}, record)
|
||||
// --------------------------------------------------------
|
||||
// 初始化明细表数据
|
||||
console.log(this.orderMainModel.id)
|
||||
if (this.orderMainModel.id) {
|
||||
const params = { id: this.orderMainModel.id }
|
||||
// 初始化订单机票列表
|
||||
getAction(this.url.orderCustomerList, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.orderMainModel.jeroOrderCustomerList = res.result
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
// 初始化订单客户列表
|
||||
getAction(this.url.orderTicketList, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.orderMainModel.jeroOrderTicketList = res.result
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
}
|
||||
this.visible = true
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true
|
||||
let httpurl
|
||||
const method = 'post'
|
||||
if (!this.orderMainModel.id) {
|
||||
httpurl = this.url.add
|
||||
// method = 'post'
|
||||
} else {
|
||||
httpurl = this.url.edit
|
||||
// method = 'put'
|
||||
}
|
||||
|
||||
httpAction(httpurl, this.orderMainModel, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
addRowCustom () {
|
||||
this.orderMainModel.jeroOrderCustomerList.push({})
|
||||
this.$forceUpdate()
|
||||
},
|
||||
delRowCustom (index) {
|
||||
console.log(index)
|
||||
const all = this.orderMainModel
|
||||
all.jeroOrderCustomerList.splice(index, 1)
|
||||
this.orderMainModel.jeroOrderCustomerList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
addRowTicket () {
|
||||
this.orderMainModel.jeroOrderTicketList.push({})
|
||||
console.log(this.orderMainModel.jeroOrderTicketList)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
delRowTicket (index) {
|
||||
console.log(index)
|
||||
const all = this.orderMainModel
|
||||
all.jeroOrderTicketList.splice(index, 1)
|
||||
this.orderMainModel.jeroOrderTicketList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-btn {
|
||||
padding: 0 10px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.ant-form-item-control {
|
||||
line-height: 0;
|
||||
}
|
||||
/** 主表单行间距 */
|
||||
.ant-form .ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/** Tab页面行间距 */
|
||||
.ant-tabs-content .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,311 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" >
|
||||
<!-- 主表单区域 -->
|
||||
<a-row class="form-row" :gutter="0">
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单号" prop="orderCode" :rules="[{ required: true, message: '请输入订单号!' }]">
|
||||
<a-input placeholder="请输入订单号" v-model="model.orderCode"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单类型">
|
||||
<a-select placeholder="请选择订单类型" v-model="model.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单日期">
|
||||
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-model="model.orderDate"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="0">
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单金额">
|
||||
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-model="model.orderMoney"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-model-item label="订单备注">
|
||||
<a-input placeholder="请输入订单备注" v-model="model.content"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
|
||||
<!-- 子表单区域 -->
|
||||
<a-tabs v-model="activeKey" @change="handleChangeTabs">
|
||||
<a-tab-pane tab="客户信息" key="1" :forceRender="true">
|
||||
|
||||
<j-editable-table
|
||||
ref="editableTable1"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:maxHeight="300"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:actionButton="true"/>
|
||||
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="机票信息" key="2" :forceRender="true">
|
||||
|
||||
<j-editable-table
|
||||
ref="editableTable2"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:maxHeight="300"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:actionButton="true"/>
|
||||
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormModelAndTables } from '@/utils/JEditableTableUtil'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
export default {
|
||||
name: 'JeroOrderModalForJEditableTable',
|
||||
components: {
|
||||
JEditableTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: FormTypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: FormTypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable () {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
},
|
||||
|
||||
add () {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
editableTables[0].add()
|
||||
editableTables[1].add()
|
||||
})
|
||||
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
const params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.getAllTable().then(editableTables => {
|
||||
editableTables[0].initialize()
|
||||
editableTables[1].initialize()
|
||||
})
|
||||
this.$emit('close')
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData (url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs (key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields () {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form, this.model, tables)
|
||||
}).then(allValues => {
|
||||
const formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_NO_PASSED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData (allValues) {
|
||||
const orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].values,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].values
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit (formData) {
|
||||
let url = this.url.add
|
||||
const method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
// method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<div style="display: none">
|
||||
<iframe
|
||||
:id="id"
|
||||
:src="url"
|
||||
frameborder="0"
|
||||
width="100%"
|
||||
height="550px"
|
||||
scrolling="auto">
|
||||
</iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
|
||||
export default {
|
||||
name: 'PdfPreviewModal',
|
||||
data () {
|
||||
return {
|
||||
url: window._CONFIG.pdfDomainURL,
|
||||
id: 'pdfPreviewIframe',
|
||||
headers: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||||
this.headers = { 'X-Access-Token': token }
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('message', this.handleScanFileMessage)
|
||||
},
|
||||
methods: {
|
||||
handleScanFileMessage (event) {
|
||||
// 根据上面制定的结构来解析iframe内部发回来的数据
|
||||
const data = event.data
|
||||
console.log(data)
|
||||
},
|
||||
|
||||
previewFiles (title, token) {
|
||||
const iframe = document.getElementById('pdfPreviewIframe')
|
||||
const json = { title: title, token: token }
|
||||
iframe.contentWindow.postMessage(json, '*')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<a-card style="min-width: 500px;overflow-x: auto">
|
||||
<p>我是左侧页面</p>
|
||||
<img-turn-page></img-turn-page>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: 'SplitPanelAModal',
|
||||
components: {
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<a-card style="min-width: 500px;overflow-x: auto">
|
||||
<p>我是右侧页面</p>
|
||||
<img-turn-page></img-turn-page>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: 'SplitPanelAModal',
|
||||
components: {
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="分屏"
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:bodyStyle="bodyStyle"
|
||||
style="top: 0;"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<split-pane :min-percent='20' :default-percent='50' split="vertical">
|
||||
<template slot="paneL">
|
||||
<split-panel-a></split-panel-a>
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
<split-panel-b></split-panel-b>
|
||||
</template>
|
||||
</split-pane>
|
||||
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import splitPane from 'vue-splitpane'
|
||||
import SplitPanelA from './SplitPanelA'
|
||||
import SplitPanelB from './SplitPanelB'
|
||||
export default {
|
||||
name: 'SplitPanelModal',
|
||||
components: {
|
||||
splitPane,
|
||||
SplitPanelA,
|
||||
SplitPanelB
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
bodyStyle: {
|
||||
padding: '0',
|
||||
height: (window.innerHeight - 150) + 'px'
|
||||
},
|
||||
modalWidth: 800
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.modalWidth = window.innerWidth - 0
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="高级查询构造器"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
:mask="false"
|
||||
okText="查询"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form>
|
||||
<div>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
|
||||
<a-col :span="6">
|
||||
<a-select placeholder="选择查询字段" v-model="item.field">
|
||||
<a-select-option value="name">用户名</a-select-option>
|
||||
<a-select-option value="key_word">关键词</a-select-option>
|
||||
<a-select-option value="birthday">生日</a-select-option>
|
||||
<a-select-option value="age">年龄</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-select placeholder="选择匹配规则" v-model="item.rule">
|
||||
<a-select-option value="=">等于</a-select-option>
|
||||
<a-select-option value="!=">不等于</a-select-option>
|
||||
<a-select-option value=">">大于</a-select-option>
|
||||
<a-select-option value=">=">大于等于</a-select-option>
|
||||
<a-select-option value="<">小于</a-select-option>
|
||||
<a-select-option value="<=">小于等于</a-select-option>
|
||||
<a-select-option value="LEFT_LIKE">以..开始</a-select-option>
|
||||
<a-select-option value="RIGHT_LIKE">以..结尾</a-select-option>
|
||||
<a-select-option value="LIKE">包含</a-select-option>
|
||||
<a-select-option value="IN">在...中</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6"><a-input placeholder="请输入值" v-model="item.val"/></a-col>
|
||||
<a-col :span="6">
|
||||
<a-button @click="handleAdd" icon="plus"></a-button>
|
||||
<a-button @click="handleDel( index )" icon="minus"></a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'SuperQueryModal',
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
queryParamsModel: [{}, {}],
|
||||
confirmLoading: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
console.log(this.queryParamsModel)
|
||||
// 子组件中触发父组件方法ee并传值cc12345
|
||||
this.$emit('handleSuperQuery', this.queryParamsModel)
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
handleAdd () {
|
||||
this.queryParamsModel.push({})
|
||||
},
|
||||
handleDel (index) {
|
||||
console.log(index)
|
||||
this.queryParamsModel.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,729 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="cron表达式"
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="change"
|
||||
@cancel="close"
|
||||
cancelText="关闭">
|
||||
<div class="card-container">
|
||||
<a-tabs type="card">
|
||||
<a-tab-pane key="1" type="card">
|
||||
<span slot="tab"><a-icon type="schedule" /> 秒</span>
|
||||
<a-radio-group v-model="result.second.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一秒钟</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.second.incrementIncrement" :min="1" :max="60"></a-input-number>
|
||||
秒执行 从
|
||||
<a-input-number size="small" v-model="result.second.incrementStart" :min="0" :max="59"></a-input-number>
|
||||
秒开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="3">具体秒数(可多选)</a-radio>
|
||||
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.second.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">周期从
|
||||
<a-input-number size="small" v-model="result.second.rangeStart" :min="1" :max="60"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input-number>
|
||||
秒
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2">
|
||||
<span slot="tab"><a-icon type="schedule" />分</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.minute.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一分钟</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input-number>
|
||||
分执行 从
|
||||
<a-input-number size="small" v-model="result.minute.incrementStart" :min="0" :max="59"></a-input-number>
|
||||
分开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="3">具体分钟数(可多选)</a-radio>
|
||||
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.minute.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(60)" :key="index" :value="index"> {{ index }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">周期从
|
||||
<a-input-number size="small" v-model="result.minute.rangeStart" :min="1" :max="60"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input-number>
|
||||
分
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3">
|
||||
<span slot="tab"><a-icon type="schedule" /> 时</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.hour.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一小时</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input-number>
|
||||
小时执行 从
|
||||
<a-input-number size="small" v-model="result.hour.incrementStart" :min="0" :max="23"></a-input-number>
|
||||
小时开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="3">具体小时数(可多选)</a-radio>
|
||||
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.hour.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(24)" :key="index" >{{ index }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">周期从
|
||||
<a-input-number size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input-number>
|
||||
小时
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4">
|
||||
<span slot="tab"><a-icon type="schedule" /> 天</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.day.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一天</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input-number>
|
||||
周执行 从
|
||||
<a-select size="small" v-model="result.week.incrementStart">
|
||||
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
|
||||
</a-select>
|
||||
开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="3">每隔
|
||||
<a-input-number size="small" v-model="result.day.incrementIncrement" :min="1" :max="31"></a-input-number>
|
||||
天执行 从
|
||||
<a-input-number size="small" v-model="result.day.incrementStart" :min="1" :max="31"></a-input-number>
|
||||
天开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="4">具体星期几(可多选)</a-radio>
|
||||
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.week.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="5">具体天数(可多选)</a-radio>
|
||||
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index">{{ index+1 }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="6">在这个月的最后一天</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="7">在这个月的最后一个工作日</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="8">在这个月的最后一个
|
||||
<a-select size="small" v-model="result.day.cronLastSpecificDomDay">
|
||||
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
|
||||
</a-select>
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="9">
|
||||
<a-input-number size="small" v-model="result.day.cronDaysBeforeEomMinus" :min="1" :max="31"></a-input-number>
|
||||
在本月底前
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="10">最近的工作日（周一至周五）至本月
|
||||
<a-input-number size="small" v-model="result.day.cronDaysNearestWeekday" :min="1" :max="31"></a-input-number>
|
||||
日
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="11">在这个月的第
|
||||
<a-input-number size="small" v-model="result.week.cronNthDayNth" :min="1" :max="5"></a-input-number>
|
||||
个
|
||||
<a-select size="small" v-model="result.week.cronNthDayDay">
|
||||
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
|
||||
</a-select>
|
||||
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5">
|
||||
<span slot="tab"><a-icon type="schedule" /> 月</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.month.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一月</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input-number>
|
||||
月执行 从
|
||||
<a-input-number size="small" v-model="result.month.incrementStart" :min="0" :max="12"></a-input-number>
|
||||
月开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="3">具体月数(可多选)</a-radio>
|
||||
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.month.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(12)" :key="index" :value="index">{{ index+1 }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">从
|
||||
<a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input-number>
|
||||
月之间的每个月
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="6">
|
||||
<span slot="tab"><a-icon type="schedule" /> 年</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.year.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一年</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input-number>
|
||||
年执行 从
|
||||
<a-input-number size="small" v-model="result.year.incrementStart" :min="2019" :max="2119"></a-input-number>
|
||||
年开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="3">具体年份(可多选)</a-radio>
|
||||
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.year.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(100)" :key="index" :value="2019+index">{{ 2019+index }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">从
|
||||
<a-input-number size="small" v-model="result.year.rangeStart" :min="2019" :max="2119"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.year.rangeEnd" :min="2019" :max="2119"></a-input-number>
|
||||
年之间的每一年
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class="bottom">
|
||||
<span class="value">{{this.cron.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
// import pick from 'lodash.pick'
|
||||
export default {
|
||||
name: 'VueCron',
|
||||
props: ['data', 'i18n'],
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
size: 'large',
|
||||
weekDays: ['天', '一', '二', '三', '四', '五', '六'].map(val => '星期' + val),
|
||||
result: {
|
||||
second: {
|
||||
cronEvery: '',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 1,
|
||||
rangeEnd: 0,
|
||||
specificSpecific: []
|
||||
},
|
||||
minute: {
|
||||
cronEvery: '',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 1,
|
||||
rangeEnd: '0',
|
||||
specificSpecific: []
|
||||
},
|
||||
hour: {
|
||||
cronEvery: '',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: '0',
|
||||
rangeEnd: '0',
|
||||
specificSpecific: []
|
||||
},
|
||||
day: {
|
||||
cronEvery: '',
|
||||
incrementStart: 1,
|
||||
incrementIncrement: '1',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: [],
|
||||
cronLastSpecificDomDay: 1,
|
||||
cronDaysBeforeEomMinus: '',
|
||||
cronDaysNearestWeekday: ''
|
||||
},
|
||||
week: {
|
||||
cronEvery: '',
|
||||
incrementStart: 1,
|
||||
incrementIncrement: '1',
|
||||
specificSpecific: [],
|
||||
cronNthDayDay: 1,
|
||||
cronNthDayNth: '1'
|
||||
},
|
||||
month: {
|
||||
cronEvery: '',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 1,
|
||||
rangeEnd: 1,
|
||||
specificSpecific: []
|
||||
},
|
||||
year: {
|
||||
cronEvery: '',
|
||||
incrementStart: 2017,
|
||||
incrementIncrement: 1,
|
||||
rangeStart: 2019,
|
||||
rangeEnd: 2019,
|
||||
specificSpecific: []
|
||||
},
|
||||
label: ''
|
||||
},
|
||||
output: {
|
||||
second: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
},
|
||||
minute: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
},
|
||||
hour: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
},
|
||||
day: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: [],
|
||||
cronLastSpecificDomDay: '',
|
||||
cronDaysBeforeEomMinus: '',
|
||||
cronDaysNearestWeekday: ''
|
||||
},
|
||||
week: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
specificSpecific: [],
|
||||
cronNthDayDay: '',
|
||||
cronNthDayNth: ''
|
||||
},
|
||||
month: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
},
|
||||
year: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
modalWidth () {
|
||||
return 608
|
||||
},
|
||||
text () {
|
||||
return Language.cn
|
||||
},
|
||||
secondsText () {
|
||||
let seconds = ''
|
||||
const cronEvery = this.result.second.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
seconds = '*'
|
||||
break
|
||||
case '2':
|
||||
seconds = this.result.second.incrementStart + '/' + this.result.second.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.second.specificSpecific.map(val => { seconds += val + ',' })
|
||||
seconds = seconds.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
seconds = this.result.second.rangeStart + '-' + this.result.second.rangeEnd
|
||||
break
|
||||
}
|
||||
return seconds
|
||||
},
|
||||
minutesText () {
|
||||
let minutes = ''
|
||||
const cronEvery = this.result.minute.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
minutes = '*'
|
||||
break
|
||||
case '2':
|
||||
minutes = this.result.minute.incrementStart + '/' + this.result.minute.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.minute.specificSpecific.map(val => {
|
||||
minutes += val + ','
|
||||
})
|
||||
minutes = minutes.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
minutes = this.result.minute.rangeStart + '-' + this.result.minute.rangeEnd
|
||||
break
|
||||
}
|
||||
return minutes
|
||||
},
|
||||
hoursText () {
|
||||
let hours = ''
|
||||
const cronEvery = this.result.hour.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
hours = '*'
|
||||
break
|
||||
case '2':
|
||||
hours = this.result.hour.incrementStart + '/' + this.result.hour.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.hour.specificSpecific.map(val => {
|
||||
hours += val + ','
|
||||
})
|
||||
hours = hours.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
hours = this.result.hour.rangeStart + '-' + this.result.hour.rangeEnd
|
||||
break
|
||||
}
|
||||
return hours
|
||||
},
|
||||
daysText () {
|
||||
let days = ''
|
||||
const cronEvery = this.result.day.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
break
|
||||
case '2':
|
||||
case '4':
|
||||
case '11':
|
||||
days = '?'
|
||||
break
|
||||
case '3':
|
||||
days = this.result.day.incrementStart + '/' + this.result.day.incrementIncrement
|
||||
break
|
||||
case '5':
|
||||
this.result.day.specificSpecific.map(val => {
|
||||
days += val + ','
|
||||
})
|
||||
days = days.slice(0, -1)
|
||||
break
|
||||
case '6':
|
||||
days = 'L'
|
||||
break
|
||||
case '7':
|
||||
days = 'LW'
|
||||
break
|
||||
case '8':
|
||||
days = this.result.day.cronLastSpecificDomDay + 'L'
|
||||
break
|
||||
case '9':
|
||||
days = 'L-' + this.result.day.cronDaysBeforeEomMinus
|
||||
break
|
||||
case '10':
|
||||
days = this.result.day.cronDaysNearestWeekday + 'W'
|
||||
break
|
||||
}
|
||||
return days
|
||||
},
|
||||
weeksText () {
|
||||
let weeks = ''
|
||||
const cronEvery = this.result.day.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
case '3':
|
||||
case '5':
|
||||
weeks = '?'
|
||||
break
|
||||
case '2':
|
||||
weeks = this.result.week.incrementStart + '/' + this.result.week.incrementIncrement
|
||||
break
|
||||
case '4':
|
||||
this.result.week.specificSpecific.map(val => {
|
||||
weeks += val + ','
|
||||
})
|
||||
weeks = weeks.slice(0, -1)
|
||||
break
|
||||
case '6':
|
||||
case '7':
|
||||
case '8':
|
||||
case '9':
|
||||
case '10':
|
||||
weeks = '?'
|
||||
break
|
||||
case '11':
|
||||
weeks = this.result.week.cronNthDayDay + '#' + this.result.week.cronNthDayNth
|
||||
break
|
||||
}
|
||||
return weeks
|
||||
},
|
||||
monthsText () {
|
||||
let months = ''
|
||||
const cronEvery = this.result.month.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
months = '*'
|
||||
break
|
||||
case '2':
|
||||
months = this.result.month.incrementStart + '/' + this.result.month.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.month.specificSpecific.map(val => {
|
||||
months += val + ','
|
||||
})
|
||||
months = months.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
months = this.result.month.rangeStart + '-' + this.result.month.rangeEnd
|
||||
break
|
||||
}
|
||||
return months
|
||||
},
|
||||
yearsText () {
|
||||
let years = ''
|
||||
const cronEvery = this.result.year.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
years = '*'
|
||||
break
|
||||
case '2':
|
||||
years = this.result.year.incrementStart + '/' + this.result.year.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.year.specificSpecific.map(val => {
|
||||
years += val + ','
|
||||
})
|
||||
years = years.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
years = this.result.year.rangeStart + '-' + this.result.year.rangeEnd
|
||||
break
|
||||
}
|
||||
return years
|
||||
},
|
||||
cron () {
|
||||
return {
|
||||
value: this.result,
|
||||
label: `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '*'} ${this.yearsText || '*'}`
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
// this.rest(this.data);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
// this.rest(pick(this.data.value,'second','minute','hour','day','week','month','year'));
|
||||
// this.rest(this.data.value);
|
||||
Object.assign(this.data.value, this.result)
|
||||
console.log('data初始化', this.data)
|
||||
// this.result = this.data.value;
|
||||
this.visible = true
|
||||
},
|
||||
getValue () {
|
||||
return this.cron
|
||||
},
|
||||
change () {
|
||||
console.log('返回前', this.cron)
|
||||
this.$emit('change', this.cron)
|
||||
this.close()
|
||||
this.visible = false
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
// this.$emit('close')
|
||||
},
|
||||
rest (data) {
|
||||
for (const i in data) {
|
||||
console.log(data[i])
|
||||
if (data[i] instanceof Object) {
|
||||
this.rest(data[i])
|
||||
} else {
|
||||
switch (typeof data[i]) {
|
||||
case 'object':
|
||||
data[i] = []
|
||||
break
|
||||
case 'string':
|
||||
data[i] = ''
|
||||
break
|
||||
case 'number':
|
||||
data[i] = null
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
callback (key) {
|
||||
// console.log(key)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.card-container {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.ant-tabs{
|
||||
border:1px solid #e6ebf5;
|
||||
padding: 0;
|
||||
.ant-tabs-bar {
|
||||
margin: 0;
|
||||
outline: none;
|
||||
border-bottom: none;
|
||||
.ant-tabs-nav-container{
|
||||
margin: 0;
|
||||
.ant-tabs-tab {
|
||||
padding: 0 24px!important;
|
||||
background-color: #f5f7fa!important;
|
||||
margin-right: 0 !important;
|
||||
border-radius: 0;
|
||||
line-height: 38px;
|
||||
border: 1px solid transparent!important;
|
||||
border-bottom: 1px solid #e6ebf5!important;
|
||||
}
|
||||
.ant-tabs-tab-active.ant-tabs-tab{
|
||||
color: #409eff;
|
||||
background-color: #fff!important;
|
||||
border-right:1px solid #e6ebf5!important;
|
||||
border-left:1px solid #e6ebf5!important;
|
||||
border-bottom:1px solid #fff!important;
|
||||
font-weight: normal;
|
||||
transition:none!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-tabpane{
|
||||
padding: 15px;
|
||||
.ant-row{
|
||||
margin: 10px 0;
|
||||
}
|
||||
.ant-select,.ant-input-number{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.container-widthEn{
|
||||
width: 755px;
|
||||
}
|
||||
.container-widthCn{
|
||||
width: 608px;
|
||||
}
|
||||
.language{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 13px;
|
||||
border: 1px solid transparent;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
font-size: 16px;
|
||||
color: #409eff;
|
||||
z-index: 1;
|
||||
background: #f5f7fa;
|
||||
outline: none;
|
||||
width: 47px;
|
||||
border-bottom: 1px solid #e6ebf5;
|
||||
border-radius: 0;
|
||||
}
|
||||
.card-container{
|
||||
.bottom{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0 0 0;
|
||||
.cronButton{
|
||||
margin: 0 10px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabBody{
|
||||
.a-row{
|
||||
margin: 10px 0;
|
||||
.long{
|
||||
.a-select{
|
||||
width:354px;
|
||||
}
|
||||
}
|
||||
.a-input-number{
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,342 +0,0 @@
|
||||
<template>
|
||||
<page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
|
||||
|
||||
<detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
|
||||
<detail-list-item term="创建人">曲丽丽</detail-list-item>
|
||||
<detail-list-item term="订购产品">XX服务</detail-list-item>
|
||||
<detail-list-item term="创建时间">2018-08-07</detail-list-item>
|
||||
<detail-list-item term="关联单据"><a>12421</a></detail-list-item>
|
||||
<detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
|
||||
<detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
|
||||
</detail-list>
|
||||
<a-row slot="extra" class="status-list">
|
||||
<a-col :xs="12" :sm="12">
|
||||
<div class="text">状态</div>
|
||||
<div class="heading">待审批</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12">
|
||||
<div class="text">订单金额</div>
|
||||
<div class="heading">¥ 568.08</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- actions -->
|
||||
<template slot="action">
|
||||
<a-button-group style="margin-right: 4px;">
|
||||
<a-button>操作</a-button>
|
||||
<a-button>操作</a-button>
|
||||
<a-button><a-icon type="ellipsis"/></a-button>
|
||||
</a-button-group>
|
||||
<a-button type="primary" >主操作</a-button>
|
||||
</template>
|
||||
|
||||
<a-card :bordered="false" title="流程进度">
|
||||
<a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
|
||||
<a-step title="创建项目">
|
||||
</a-step>
|
||||
<a-step title="部门初审">
|
||||
</a-step>
|
||||
<a-step title="财务复核">
|
||||
</a-step>
|
||||
<a-step title="完成">
|
||||
</a-step>
|
||||
</a-steps>
|
||||
</a-card>
|
||||
|
||||
<a-card style="margin-top: 24px" :bordered="false" title="用户信息">
|
||||
<detail-list>
|
||||
<detail-list-item term="用户姓名">付晓晓</detail-list-item>
|
||||
<detail-list-item term="会员卡号">32943898021309809423</detail-list-item>
|
||||
<detail-list-item term="身份证">3321944288191034921</detail-list-item>
|
||||
<detail-list-item term="联系方式">18112345678</detail-list-item>
|
||||
<detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
|
||||
</detail-list>
|
||||
<detail-list title="信息组">
|
||||
<detail-list-item term="某某数据">725</detail-list-item>
|
||||
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item > </detail-list-item>
|
||||
<detail-list-item term="某某数据">725</detail-list-item>
|
||||
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item > </detail-list-item>
|
||||
</detail-list>
|
||||
<a-card type="inner" title="多层信息组">
|
||||
<detail-list title="组名称" size="small">
|
||||
<detail-list-item term="负责人">林东东</detail-list-item>
|
||||
<detail-list-item term="角色码">1234567</detail-list-item>
|
||||
<detail-list-item term="所属部门">XX公司-YY部</detail-list-item>
|
||||
<detail-list-item term="过期时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin: 16px 0" />
|
||||
<detail-list title="组名称" size="small" :col="1">
|
||||
<detail-list-item term="学名">Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin: 16px 0" />
|
||||
<detail-list title="组名称" size="small" :col="2">
|
||||
<detail-list-item term="负责人">付小小</detail-list-item>
|
||||
<detail-list-item term="角色码">1234567</detail-list-item>
|
||||
</detail-list>
|
||||
</a-card>
|
||||
|
||||
</a-card>
|
||||
|
||||
<a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
|
||||
<div class="no-data"><a-icon type="frown-o"/>暂无数据</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作 -->
|
||||
<a-card
|
||||
style="margin-top: 24px"
|
||||
:bordered="false"
|
||||
:tabList="tabList"
|
||||
:activeTabKey="activeTabKey"
|
||||
@tabChange="(key) => {this.activeTabKey = key}"
|
||||
>
|
||||
<a-table
|
||||
v-if="activeTabKey === '1'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation1"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table
|
||||
v-if="activeTabKey === '2'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation2"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table
|
||||
v-if="activeTabKey === '3'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation3"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
|
||||
const DetailListItem = DetailList.Item
|
||||
|
||||
export default {
|
||||
name: 'Advanced',
|
||||
components: {
|
||||
PageLayout,
|
||||
DetailList,
|
||||
DetailListItem
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
key: '1',
|
||||
tab: '操作日志一'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tab: '操作日志二'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
tab: '操作日志三'
|
||||
}
|
||||
],
|
||||
activeTabKey: '1',
|
||||
|
||||
operationColumns: [
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '执行结果',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'updatedAt',
|
||||
key: 'updatedAt'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
key: 'remark'
|
||||
}
|
||||
],
|
||||
operation1: [
|
||||
{
|
||||
key: 'op1',
|
||||
type: '订购关系生效',
|
||||
name: '曲丽丽',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
},
|
||||
{
|
||||
key: 'op5',
|
||||
type: '创建订单',
|
||||
name: '汗牙牙',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
],
|
||||
operation2: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
}
|
||||
],
|
||||
operation3: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter (status) {
|
||||
const statusMap = {
|
||||
agree: '成功',
|
||||
reject: '驳回'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusTypeFilter (type) {
|
||||
const statusTypeMap = {
|
||||
agree: 'success',
|
||||
reject: 'error'
|
||||
}
|
||||
return statusTypeMap[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.detail-layout {
|
||||
margin-left: 44px;
|
||||
}
|
||||
.text {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
color: rgba(0, 0, 0, .25);
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
font-size: 16px;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.detail-layout {
|
||||
margin-left: unset;
|
||||
}
|
||||
.text {
|
||||
|
||||
}
|
||||
.status-list {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user