update
This commit is contained in:
dqjdda
117
src/views/components/Echarts.vue
Normal file
117
src/views/components/Echarts.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<heat-map />
|
||||
</el-row>
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<radar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<sunburst />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<gauge />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="12">
|
||||
<div class="chart-wrapper">
|
||||
<rich />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="chart-wrapper">
|
||||
<theme-river />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<graph />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<sankey />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<line3-d />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="12">
|
||||
<div class="chart-wrapper">
|
||||
<scatter />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="chart-wrapper">
|
||||
<point />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="chart-wrapper">
|
||||
<category />
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RadarChart from '@/components/Echarts/RadarChart'
|
||||
import HeatMap from '@/components/Echarts/HeatMap'
|
||||
import Gauge from '@/components/Echarts/Gauge'
|
||||
import Rich from '@/components/Echarts/Rich'
|
||||
import ThemeRiver from '@/components/Echarts/ThemeRiver'
|
||||
import Sunburst from '@/components/Echarts/Sunburst'
|
||||
import Graph from '@/components/Echarts/Graph'
|
||||
import Sankey from '@/components/Echarts/Sankey'
|
||||
import Scatter from '@/components/Echarts/Scatter'
|
||||
import Line3D from '@/components/Echarts/Line3D'
|
||||
import Category from '@/components/Echarts/Category'
|
||||
import Point from '@/components/Echarts/Point'
|
||||
|
||||
export default {
|
||||
name: 'Echarts',
|
||||
components: {
|
||||
Point,
|
||||
Category,
|
||||
Graph,
|
||||
HeatMap,
|
||||
RadarChart,
|
||||
Sunburst,
|
||||
Gauge,
|
||||
Rich,
|
||||
ThemeRiver,
|
||||
Sankey,
|
||||
Line3D,
|
||||
Scatter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 18px 22px 22px 22px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="editor" class="text"/>
|
||||
<div ref="editor" class="text" />
|
||||
<div style="margin: 12px 5px;font-size: 16px;font-weight: bold;color: #696969">HTML渲染如下：</div>
|
||||
<div class="editor-content" v-html="editorContent"/>
|
||||
<div class="editor-content" v-html="editorContent" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="icons-container">
|
||||
<p class="warn-content">
|
||||
使用教程参考 <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Documentation</a>
|
||||
</p>
|
||||
<div class="icons-wrapper">
|
||||
<div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<svg-icon :icon-class="item" class-name="disabled" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from '@/components/IconSelect/requireIcons'
|
||||
import clipboard from '@/utils/clipboard'
|
||||
|
||||
export default {
|
||||
name: 'Icons',
|
||||
data() {
|
||||
return {
|
||||
iconsMap: icons
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateIconCode(symbol) {
|
||||
return `<svg-icon icon-class="${symbol}" />`
|
||||
},
|
||||
handleClipboard(text, event) {
|
||||
clipboard(text, event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.icons-container {
|
||||
margin: 10px 20px 0;
|
||||
overflow: hidden;
|
||||
.icons-wrapper {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.icon-item {
|
||||
margin: 16px;
|
||||
height: 110px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
float: left;
|
||||
font-size: 30px;
|
||||
color: #24292e;
|
||||
cursor: pointer;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.disabled{
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
Markdown 基于
|
||||
<a href="https://github.com/hinesboy/mavonEditor" target="_blank">mavonEditor</a>
|
||||
</p>
|
||||
<mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" @imgDel="imgDel"/>
|
||||
<mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" @imgDel="imgDel" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
import axios from 'axios'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { del } from '@/api/picture'
|
||||
import { del } from '@/api/tools/picture'
|
||||
export default {
|
||||
name: 'Markdown',
|
||||
data() {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>，
|
||||
主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>
|
||||
</p>
|
||||
<Yaml :value="value" :height="height"/>
|
||||
<Yaml :value="value" :height="height" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
74
src/views/components/icons/element-icons.js
Normal file
74
src/views/components/icons/element-icons.js
Normal file
@@ -0,0 +1,74 @@
|
||||
const elementIcons = [
|
||||
'info',
|
||||
'error',
|
||||
'success',
|
||||
'warning',
|
||||
'question',
|
||||
'back',
|
||||
'arrow-left',
|
||||
'arrow-down',
|
||||
'arrow-right',
|
||||
'arrow-up',
|
||||
'caret-left',
|
||||
'caret-bottom',
|
||||
'caret-top',
|
||||
'caret-right',
|
||||
'd-arrow-left',
|
||||
'd-arrow-right',
|
||||
'minus',
|
||||
'plus',
|
||||
'remove',
|
||||
'circle-plus',
|
||||
'remove-outline',
|
||||
'circle-plus-outline',
|
||||
'close',
|
||||
'check',
|
||||
'circle-close',
|
||||
'circle-check',
|
||||
'circle-close-outline',
|
||||
'circle-check-outline',
|
||||
'zoom-out',
|
||||
'zoom-in',
|
||||
'd-caret',
|
||||
'sort',
|
||||
'sort-down',
|
||||
'sort-up',
|
||||
'tickets',
|
||||
'document',
|
||||
'goods',
|
||||
'sold-out',
|
||||
'news',
|
||||
'message',
|
||||
'date',
|
||||
'printer',
|
||||
'time',
|
||||
'bell',
|
||||
'mobile-phone',
|
||||
'service',
|
||||
'view',
|
||||
'menu',
|
||||
'more',
|
||||
'more-outline',
|
||||
'star-on',
|
||||
'star-off',
|
||||
'location',
|
||||
'location-outline',
|
||||
'phone',
|
||||
'phone-outline',
|
||||
'picture',
|
||||
'picture-outline',
|
||||
'delete',
|
||||
'search',
|
||||
'edit',
|
||||
'edit-outline',
|
||||
'rank',
|
||||
'refresh',
|
||||
'share',
|
||||
'setting',
|
||||
'upload',
|
||||
'upload2',
|
||||
'download',
|
||||
'loading'
|
||||
]
|
||||
|
||||
export default elementIcons
|
||||
91
src/views/components/icons/index.vue
Normal file
91
src/views/components/icons/index.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="icons-container">
|
||||
<aside>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
|
||||
</a>
|
||||
</aside>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="Icons">
|
||||
<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<svg-icon :icon-class="item" class-name="disabled" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element-UI Icons">
|
||||
<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateElementIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<i :class="'el-icon-' + item" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clipboard from '@/utils/clipboard'
|
||||
import svgIcons from './svg-icons'
|
||||
import elementIcons from './element-icons'
|
||||
|
||||
export default {
|
||||
name: 'Icons',
|
||||
data() {
|
||||
return {
|
||||
svgIcons,
|
||||
elementIcons
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateIconCode(symbol) {
|
||||
return `<svg-icon icon-class="${symbol}" />`
|
||||
},
|
||||
generateElementIconCode(symbol) {
|
||||
return `<i class="el-icon-${symbol}" />`
|
||||
},
|
||||
handleClipboard(text, event) {
|
||||
clipboard(text, event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icons-container {
|
||||
margin: 10px 20px 0;
|
||||
overflow: hidden;
|
||||
|
||||
.icon-item {
|
||||
margin: 20px;
|
||||
height: 85px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
float: left;
|
||||
font-size: 30px;
|
||||
color: #24292e;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
10
src/views/components/icons/svg-icons.js
Normal file
10
src/views/components/icons/svg-icons.js
Normal file
@@ -0,0 +1,10 @@
|
||||
const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
|
||||
const requireAll = requireContext => requireContext.keys()
|
||||
|
||||
const re = /\.\/(.*)\.svg/
|
||||
|
||||
const svgIcons = requireAll(req).map(i => {
|
||||
return i.match(re)[1]
|
||||
})
|
||||
|
||||
export default svgIcons
|
||||
@@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageB',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageC',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,438 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const dataMap = {}
|
||||
|
||||
function dataFormatter(obj) {
|
||||
const pList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆']
|
||||
let temp
|
||||
for (let year = 2002; year <= 2011; year++) {
|
||||
let max = 0
|
||||
let sum = 0
|
||||
temp = obj[year]
|
||||
for (let i = 0, l = temp.length; i < l; i++) {
|
||||
max = Math.max(max, temp[i])
|
||||
sum += temp[i]
|
||||
obj[year][i] = {
|
||||
name: pList[i],
|
||||
value: temp[i]
|
||||
}
|
||||
}
|
||||
obj[year + 'max'] = Math.floor(max / 100) * 100
|
||||
obj[year + 'sum'] = sum
|
||||
}
|
||||
return obj
|
||||
}
|
||||
|
||||
dataMap.dataGDP = dataFormatter({
|
||||
2011: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65, 17560.18, 11702.82, 45361.85, 26931.03, 19632.26, 19669.56, 53210.28, 11720.87, 2522.66, 10011.37, 21026.68, 5701.84, 8893.12, 605.83, 12512.3, 5020.37, 1670.44, 2102.21, 6610.05],
|
||||
2010: [14113.58, 9224.46, 20394.26, 9200.86, 11672, 18457.27, 8667.58, 10368.6, 17165.98, 41425.48, 27722.31, 12359.33, 14737.12, 9451.26, 39169.92, 23092.36, 15967.61, 16037.96, 46013.06, 9569.85, 2064.5, 7925.58, 17185.48, 4602.16, 7224.18, 507.46, 10123.48, 4120.75, 1350.43, 1689.65, 5437.47],
|
||||
2009: [12153.03, 7521.85, 17235.48, 7358.31, 9740.25, 15212.49, 7278.75, 8587, 15046.45, 34457.3, 22990.35, 10062.82, 12236.53, 7655.18, 33896.65, 19480.46, 12961.1, 13059.69, 39482.56, 7759.16, 1654.21, 6530.01, 14151.28, 3912.68, 6169.75, 441.36, 8169.8, 3387.56, 1081.27, 1353.31, 4277.05],
|
||||
2008: [11115, 6719.01, 16011.97, 7315.4, 8496.2, 13668.58, 6426.1, 8314.37, 14069.87, 30981.98, 21462.69, 8851.66, 10823.01, 6971.05, 30933.28, 18018.53, 11328.92, 11555, 36796.71, 7021, 1503.06, 5793.66, 12601.23, 3561.56, 5692.12, 394.85, 7314.58, 3166.82, 1018.62, 1203.92, 4183.21],
|
||||
2007: [9846.81, 5252.76, 13607.32, 6024.45, 6423.18, 11164.3, 5284.69, 7104, 12494.01, 26018.48, 18753.73, 7360.92, 9248.53, 5800.25, 25776.91, 15012.46, 9333.4, 9439.6, 31777.01, 5823.41, 1254.17, 4676.13, 10562.39, 2884.11, 4772.52, 341.43, 5757.29, 2703.98, 797.35, 919.11, 3523.16],
|
||||
2006: [8117.78, 4462.74, 11467.6, 4878.61, 4944.25, 9304.52, 4275.12, 6211.8, 10572.24, 21742.05, 15718.47, 6112.5, 7583.85, 4820.53, 21900.19, 12362.79, 7617.47, 7688.67, 26587.76, 4746.16, 1065.67, 3907.23, 8690.24, 2338.98, 3988.14, 290.76, 4743.61, 2277.35, 648.5, 725.9, 3045.26],
|
||||
2005: [6969.52, 3905.64, 10012.11, 4230.53, 3905.03, 8047.26, 3620.27, 5513.7, 9247.66, 18598.69, 13417.68, 5350.17, 6554.69, 4056.76, 18366.87, 10587.42, 6590.19, 6596.1, 22557.37, 3984.1, 918.75, 3467.72, 7385.1, 2005.42, 3462.73, 248.8, 3933.72, 1933.98, 543.32, 612.61, 2604.19],
|
||||
2004: [6033.21, 3110.97, 8477.63, 3571.37, 3041.07, 6672, 3122.01, 4750.6, 8072.83, 15003.6, 11648.7, 4759.3, 5763.35, 3456.7, 15021.84, 8553.79, 5633.24, 5641.94, 18864.62, 3433.5, 819.66, 3034.58, 6379.63, 1677.8, 3081.91, 220.34, 3175.58, 1688.49, 466.1, 537.11, 2209.09],
|
||||
2003: [5007.21, 2578.03, 6921.29, 2855.23, 2388.38, 6002.54, 2662.08, 4057.4, 6694.23, 12442.87, 9705.02, 3923.11, 4983.67, 2807.41, 12078.15, 6867.7, 4757.45, 4659.99, 15844.64, 2821.11, 713.96, 2555.72, 5333.09, 1426.34, 2556.02, 185.09, 2587.72, 1399.83, 390.2, 445.36, 1886.35],
|
||||
2002: [4315, 2150.76, 6018.28, 2324.8, 1940.94, 5458.22, 2348.54, 3637.2, 5741.03, 10606.85, 8003.67, 3519.72, 4467.55, 2450.48, 10275.5, 6035.48, 4212.82, 4151.54, 13502.42, 2523.73, 642.73, 2232.86, 4725.01, 1243.43, 2312.82, 162.04, 2253.39, 1232.03, 340.65, 377.16, 1612.6]
|
||||
})
|
||||
|
||||
dataMap.dataPI = dataFormatter({
|
||||
2011: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31, 1612.24, 1391.07, 3973.85, 3512.24, 2569.3, 2768.03, 2665.2, 2047.23, 659.23, 844.52, 2983.51, 726.22, 1411.01, 74.47, 1220.9, 678.75, 155.08, 184.14, 1139.03],
|
||||
2010: [124.36, 145.58, 2562.81, 554.48, 1095.28, 1631.08, 1050.15, 1302.9, 114.15, 2540.1, 1360.56, 1729.02, 1363.67, 1206.98, 3588.28, 3258.09, 2147, 2325.5, 2286.98, 1675.06, 539.83, 685.38, 2482.89, 625.03, 1108.38, 68.72, 988.45, 599.28, 134.92, 159.29, 1078.63],
|
||||
2009: [118.29, 128.85, 2207.34, 477.59, 929.6, 1414.9, 980.57, 1154.33, 113.82, 2261.86, 1163.08, 1495.45, 1182.74, 1098.66, 3226.64, 2769.05, 1795.9, 1969.69, 2010.27, 1458.49, 462.19, 606.8, 2240.61, 550.27, 1067.6, 63.88, 789.64, 497.05, 107.4, 127.25, 759.74],
|
||||
2008: [112.83, 122.58, 2034.59, 313.58, 907.95, 1302.02, 916.72, 1088.94, 111.8, 2100.11, 1095.96, 1418.09, 1158.17, 1060.38, 3002.65, 2658.78, 1780, 1892.4, 1973.05, 1453.75, 436.04, 575.4, 2216.15, 539.19, 1020.56, 60.62, 753.72, 462.27, 105.57, 118.94, 691.07],
|
||||
2007: [101.26, 110.19, 1804.72, 311.97, 762.1, 1133.42, 783.8, 915.38, 101.84, 1816.31, 986.02, 1200.18, 1002.11, 905.77, 2509.14, 2217.66, 1378, 1626.48, 1695.57, 1241.35, 361.07, 482.39, 2032, 446.38, 837.35, 54.89, 592.63, 387.55, 83.41, 97.89, 628.72],
|
||||
2006: [88.8, 103.35, 1461.81, 276.77, 634.94, 939.43, 672.76, 750.14, 93.81, 1545.05, 925.1, 1011.03, 865.98, 786.14, 2138.9, 1916.74, 1140.41, 1272.2, 1532.17, 1032.47, 323.48, 386.38, 1595.48, 382.06, 724.4, 50.9, 484.81, 334, 67.55, 79.54, 527.8],
|
||||
2005: [88.68, 112.38, 1400, 262.42, 589.56, 882.41, 625.61, 684.6, 90.26, 1461.51, 892.83, 966.5, 827.36, 727.37, 1963.51, 1892.01, 1082.13, 1100.65, 1428.27, 912.5, 300.75, 463.4, 1481.14, 368.94, 661.69, 48.04, 435.77, 308.06, 65.34, 72.07, 509.99],
|
||||
2004: [87.36, 105.28, 1370.43, 276.3, 522.8, 798.43, 568.69, 605.79, 83.45, 1367.58, 814.1, 950.5, 786.84, 664.5, 1778.45, 1649.29, 1020.09, 1022.45, 1248.59, 817.88, 278.76, 428.05, 1379.93, 334.5, 607.75, 44.3, 387.88, 286.78, 60.7, 65.33, 461.26],
|
||||
2003: [84.11, 89.91, 1064.05, 215.19, 420.1, 615.8, 488.23, 504.8, 81.02, 1162.45, 717.85, 749.4, 692.94, 560, 1480.67, 1198.7, 798.35, 886.47, 1072.91, 658.78, 244.29, 339.06, 1128.61, 298.69, 494.6, 40.7, 302.66, 237.91, 48.47, 55.63, 412.9],
|
||||
2002: [82.44, 84.21, 956.84, 197.8, 374.69, 590.2, 446.17, 474.2, 79.68, 1110.44, 685.2, 783.66, 664.78, 535.98, 1390, 1288.36, 707, 847.25, 1015.08, 601.99, 222.89, 317.87, 1047.95, 281.1, 463.44, 39.75, 282.21, 215.51, 47.31, 52.95, 305]
|
||||
})
|
||||
|
||||
dataMap.dataSI = dataFormatter({
|
||||
2011: [3752.48, 5928.32, 13126.86, 6635.26, 8037.69, 12152.15, 5611.48, 5962.41, 7927.89, 25203.28, 16555.58, 8309.38, 9069.2, 6390.55, 24017.11, 15427.08, 9815.94, 9361.99, 26447.38, 5675.32, 714.5, 5543.04, 11029.13, 2194.33, 3780.32, 208.79, 6935.59, 2377.83, 975.18, 1056.15, 3225.9],
|
||||
2010: [3388.38, 4840.23, 10707.68, 5234, 6367.69, 9976.82, 4506.31, 5025.15, 7218.32, 21753.93, 14297.93, 6436.62, 7522.83, 5122.88, 21238.49, 13226.38, 7767.24, 7343.19, 23014.53, 4511.68, 571, 4359.12, 8672.18, 1800.06, 3223.49, 163.92, 5446.1, 1984.97, 744.63, 827.91, 2592.15],
|
||||
2009: [2855.55, 3987.84, 8959.83, 3993.8, 5114, 7906.34, 3541.92, 4060.72, 6001.78, 18566.37, 11908.49, 4905.22, 6005.3, 3919.45, 18901.83, 11010.5, 6038.08, 5687.19, 19419.7, 3381.54, 443.43, 3448.77, 6711.87, 1476.62, 2582.53, 136.63, 4236.42, 1527.24, 575.33, 662.32, 1929.59],
|
||||
2008: [2626.41, 3709.78, 8701.34, 4242.36, 4376.19, 7158.84, 3097.12, 4319.75, 6085.84, 16993.34, 11567.42, 4198.93, 5318.44, 3554.81, 17571.98, 10259.99, 5082.07, 5028.93, 18502.2, 3037.74, 423.55, 3057.78, 5823.39, 1370.03, 2452.75, 115.56, 3861.12, 1470.34, 557.12, 609.98, 2070.76],
|
||||
2007: [2509.4, 2892.53, 7201.88, 3454.49, 3193.67, 5544.14, 2475.45, 3695.58, 5571.06, 14471.26, 10154.25, 3370.96, 4476.42, 2975.53, 14647.53, 8282.83, 4143.06, 3977.72, 16004.61, 2425.29, 364.26, 2368.53, 4648.79, 1124.79, 2038.39, 98.48, 2986.46, 1279.32, 419.03, 455.04, 1647.55],
|
||||
2006: [2191.43, 2457.08, 6110.43, 2755.66, 2374.96, 4566.83, 1915.29, 3365.31, 4969.95, 12282.89, 8511.51, 2711.18, 3695.04, 2419.74, 12574.03, 6724.61, 3365.08, 3187.05, 13469.77, 1878.56, 308.62, 1871.65, 3775.14, 967.54, 1705.83, 80.1, 2452.44, 1043.19, 331.91, 351.58, 1459.3],
|
||||
2005: [2026.51, 2135.07, 5271.57, 2357.04, 1773.21, 3869.4, 1580.83, 2971.68, 4381.2, 10524.96, 7164.75, 2245.9, 3175.92, 1917.47, 10478.62, 5514.14, 2852.12, 2612.57, 11356.6, 1510.68, 240.83, 1564, 3067.23, 821.16, 1426.42, 63.52, 1951.36, 838.56, 264.61, 281.05, 1164.79],
|
||||
2004: [1853.58, 1685.93, 4301.73, 1919.4, 1248.27, 3061.62, 1329.68, 2487.04, 3892.12, 8437.99, 6250.38, 1844.9, 2770.49, 1566.4, 8478.69, 4182.1, 2320.6, 2190.54, 9280.73, 1253.7, 205.6, 1376.91, 2489.4, 681.5, 1281.63, 52.74, 1553.1, 713.3, 211.7, 244.05, 914.47],
|
||||
2003: [1487.15, 1337.31, 3417.56, 1463.38, 967.49, 2898.89, 1098.37, 2084.7, 3209.02, 6787.11, 5096.38, 1535.29, 2340.82, 1204.33, 6485.05, 3310.14, 1956.02, 1777.74, 7592.78, 984.08, 175.82, 1135.31, 2014.8, 569.37, 1047.66, 47.64, 1221.17, 572.02, 171.92, 194.27, 719.54],
|
||||
2002: [1249.99, 1069.08, 2911.69, 1134.31, 754.78, 2609.85, 943.49, 1843.6, 2622.45, 5604.49, 4090.48, 1337.04, 2036.97, 941.77, 5184.98, 2768.75, 1709.89, 1523.5, 6143.4, 846.89, 148.88, 958.87, 1733.38, 481.96, 934.88, 32.72, 1007.56, 501.69, 144.51, 153.06, 603.15]
|
||||
})
|
||||
|
||||
dataMap.dataTI = dataFormatter({
|
||||
2011: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96, 6878.74, 3921.2, 17370.89, 7991.72, 7247.02, 7539.54, 24097.7, 3998.33, 1148.93, 3623.81, 7014.04, 2781.29, 3701.79, 322.57, 4355.81, 1963.79, 540.18, 861.92, 2245.12],
|
||||
2010: [10600.84, 4238.65, 7123.77, 3412.38, 4209.03, 6849.37, 3111.12, 4040.55, 9833.51, 17131.45, 12063.82, 4193.69, 5850.62, 3121.4, 14343.14, 6607.89, 6053.37, 6369.27, 20711.55, 3383.11, 953.67, 2881.08, 6030.41, 2177.07, 2892.31, 274.82, 3688.93, 1536.5, 470.88, 702.45, 1766.69],
|
||||
2009: [9179.19, 3405.16, 6068.31, 2886.92, 3696.65, 5891.25, 2756.26, 3371.95, 8930.85, 13629.07, 9918.78, 3662.15, 5048.49, 2637.07, 11768.18, 5700.91, 5127.12, 5402.81, 18052.59, 2919.13, 748.59, 2474.44, 5198.8, 1885.79, 2519.62, 240.85, 3143.74, 1363.27, 398.54, 563.74, 1587.72],
|
||||
2008: [8375.76, 2886.65, 5276.04, 2759.46, 3212.06, 5207.72, 2412.26, 2905.68, 7872.23, 11888.53, 8799.31, 3234.64, 4346.4, 2355.86, 10358.64, 5099.76, 4466.85, 4633.67, 16321.46, 2529.51, 643.47, 2160.48, 4561.69, 1652.34, 2218.81, 218.67, 2699.74, 1234.21, 355.93, 475, 1421.38],
|
||||
2007: [7236.15, 2250.04, 4600.72, 2257.99, 2467.41, 4486.74, 2025.44, 2493.04, 6821.11, 9730.91, 7613.46, 2789.78, 3770, 1918.95, 8620.24, 4511.97, 3812.34, 3835.4, 14076.83, 2156.76, 528.84, 1825.21, 3881.6, 1312.94, 1896.78, 188.06, 2178.2, 1037.11, 294.91, 366.18, 1246.89],
|
||||
2006: [5837.55, 1902.31, 3895.36, 1846.18, 1934.35, 3798.26, 1687.07, 2096.35, 5508.48, 7914.11, 6281.86, 2390.29, 3022.83, 1614.65, 7187.26, 3721.44, 3111.98, 3229.42, 11585.82, 1835.12, 433.57, 1649.2, 3319.62, 989.38, 1557.91, 159.76, 1806.36, 900.16, 249.04, 294.78, 1058.16],
|
||||
2005: [4854.33, 1658.19, 3340.54, 1611.07, 1542.26, 3295.45, 1413.83, 1857.42, 4776.2, 6612.22, 5360.1, 2137.77, 2551.41, 1411.92, 5924.74, 3181.27, 2655.94, 2882.88, 9772.5, 1560.92, 377.17, 1440.32, 2836.73, 815.32, 1374.62, 137.24, 1546.59, 787.36, 213.37, 259.49, 929.41],
|
||||
2004: [4092.27, 1319.76, 2805.47, 1375.67, 1270, 2811.95, 1223.64, 1657.77, 4097.26, 5198.03, 4584.22, 1963.9, 2206.02, 1225.8, 4764.7, 2722.4, 2292.55, 2428.95, 8335.3, 1361.92, 335.3, 1229.62, 2510.3, 661.8, 1192.53, 123.3, 1234.6, 688.41, 193.7, 227.73, 833.36],
|
||||
2003: [3435.95, 1150.81, 2439.68, 1176.65, 1000.79, 2487.85, 1075.48, 1467.9, 3404.19, 4493.31, 3890.79, 1638.42, 1949.91, 1043.08, 4112.43, 2358.86, 2003.08, 1995.78, 7178.94, 1178.25, 293.85, 1081.35, 2189.68, 558.28, 1013.76, 96.76, 1063.89, 589.91, 169.81, 195.46, 753.91],
|
||||
2002: [2982.57, 997.47, 2149.75, 992.69, 811.47, 2258.17, 958.88, 1319.4, 3038.9, 3891.92, 3227.99, 1399.02, 1765.8, 972.73, 3700.52, 1978.37, 1795.93, 1780.79, 6343.94, 1074.85, 270.96, 956.12, 1943.68, 480.37, 914.5, 89.56, 963.62, 514.83, 148.83, 171.14, 704.5]
|
||||
})
|
||||
|
||||
dataMap.dataEstate = dataFormatter({
|
||||
2011: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92, 911.16, 402.51, 1838.14, 987, 634.67, 518.04, 3321.31, 465.68, 208.71, 396.28, 620.62, 160.3, 222.31, 17.44, 398.03, 134.25, 29.05, 79.01, 176.22],
|
||||
2010: [1006.52, 377.59, 697.79, 192, 309.25, 733.37, 212.32, 391.89, 1002.5, 2600.95, 1618.17, 532.17, 679.03, 340.56, 1622.15, 773.23, 564.41, 464.21, 2813.95, 405.79, 188.33, 266.38, 558.56, 139.64, 223.45, 14.54, 315.95, 110.02, 25.41, 60.53, 143.44],
|
||||
2009: [1062.47, 308.73, 612.4, 173.31, 286.65, 605.27, 200.14, 301.18, 1237.56, 2025.39, 1316.84, 497.94, 656.61, 305.9, 1329.59, 622.98, 546.11, 400.11, 2470.63, 348.98, 121.76, 229.09, 548.14, 136.15, 205.14, 13.28, 239.92, 101.37, 23.05, 47.56, 115.23],
|
||||
2008: [844.59, 227.88, 513.81, 166.04, 273.3, 500.81, 182.7, 244.47, 939.34, 1626.13, 1052.03, 431.27, 506.98, 281.96, 1104.95, 512.42, 526.88, 340.07, 2057.45, 282.96, 95.6, 191.21, 453.63, 104.81, 195.48, 15.08, 193.27, 93.8, 19.96, 38.85, 89.79],
|
||||
2007: [821.5, 183.44, 467.97, 134.12, 191.01, 410.43, 153.03, 225.81, 958.06, 1365.71, 981.42, 366.57, 511.5, 225.96, 953.69, 447.44, 409.65, 301.8, 2029.77, 239.45, 67.19, 196.06, 376.84, 93.19, 193.59, 13.24, 153.98, 83.52, 16.98, 29.49, 91.28],
|
||||
2006: [658.3, 156.64, 397.14, 117.01, 136.5, 318.54, 131.01, 194.7, 773.61, 1017.91, 794.41, 281.98, 435.22, 184.67, 786.51, 348.7, 294.73, 254.81, 1722.07, 192.2, 44.45, 158.2, 336.2, 80.24, 165.92, 11.92, 125.2, 73.21, 15.17, 25.53, 68.9],
|
||||
2005: [493.73, 122.67, 330.87, 106, 98.75, 256.77, 112.29, 163.34, 715.97, 799.73, 688.86, 231.66, 331.8, 171.88, 664.9, 298.19, 217.17, 215.63, 1430.37, 165.05, 38.2, 143.88, 286.23, 76.38, 148.69, 10.02, 108.62, 63.78, 14.1, 22.97, 55.79],
|
||||
2004: [436.11, 106.14, 231.08, 95.1, 73.81, 203.1, 97.93, 137.74, 666.3, 534.17, 587.83, 188.28, 248.44, 167.2, 473.27, 236.44, 204.8, 191.5, 1103.75, 122.52, 30.64, 129.12, 264.3, 68.3, 116.54, 5.8, 95.9, 56.84, 13, 20.78, 53.55],
|
||||
2003: [341.88, 92.31, 185.19, 78.73, 61.05, 188.49, 91.99, 127.2, 487.82, 447.47, 473.16, 162.63, 215.84, 138.02, 418.21, 217.58, 176.8, 186.49, 955.66, 100.93, 25.14, 113.69, 231.72, 59.86, 103.79, 4.35, 83.9, 48.09, 11.41, 16.85, 47.84],
|
||||
2002: [298.02, 73.04, 140.89, 65.83, 51.48, 130.94, 76.11, 118.7, 384.86, 371.09, 360.63, 139.18, 188.09, 125.27, 371.13, 199.31, 145.17, 165.29, 808.16, 82.83, 21.45, 90.48, 210.82, 53.49, 95.68, 3.42, 77.68, 41.52, 9.74, 13.46, 43.04]
|
||||
})
|
||||
|
||||
dataMap.dataFinancial = dataFormatter({
|
||||
2011: [2215.41, 756.5, 746.01, 519.32, 447.46, 755.57, 207.65, 370.78, 2277.4, 2600.11, 2730.29, 503.85, 862.41, 357.44, 1640.41, 868.2, 674.57, 501.09, 2916.13, 445.37, 105.24, 704.66, 868.15, 297.27, 456.23, 31.7, 432.11, 145.05, 62.56, 134.18, 288.77],
|
||||
2010: [1863.61, 572.99, 615.42, 448.3, 346.44, 639.27, 190.12, 304.59, 1950.96, 2105.92, 2326.58, 396.17, 767.58, 241.49, 1361.45, 697.68, 561.27, 463.16, 2658.76, 384.53, 78.12, 496.56, 654.7, 231.51, 375.08, 27.08, 384.75, 100.54, 54.53, 97.87, 225.2],
|
||||
2009: [1603.63, 461.2, 525.67, 361.64, 291.1, 560.2, 180.83, 227.54, 1804.28, 1596.98, 1899.33, 359.6, 612.2, 165.1, 1044.9, 499.92, 479.11, 402.57, 2283.29, 336.82, 65.73, 389.97, 524.63, 194.44, 351.74, 23.17, 336.21, 88.27, 45.63, 75.54, 198.87],
|
||||
2008: [1519.19, 368.1, 420.74, 290.91, 219.09, 455.07, 147.24, 177.43, 1414.21, 1298.48, 1653.45, 313.81, 497.65, 130.57, 880.28, 413.83, 393.05, 334.32, 1972.4, 249.01, 47.33, 303.01, 411.14, 151.55, 277.66, 22.42, 287.16, 72.49, 36.54, 64.8, 171.97],
|
||||
2007: [1302.77, 288.17, 347.65, 218.73, 148.3, 386.34, 126.03, 155.48, 1209.08, 1054.25, 1251.43, 223.85, 385.84, 101.34, 734.9, 302.31, 337.27, 260.14, 1705.08, 190.73, 34.43, 247.46, 359.11, 122.25, 168.55, 11.51, 231.03, 61.6, 27.67, 51.05, 149.22],
|
||||
2006: [982.37, 186.87, 284.04, 169.63, 108.21, 303.41, 100.75, 74.17, 825.2, 653.25, 906.37, 166.01, 243.9, 79.75, 524.94, 219.72, 174.99, 204.72, 899.91, 129.14, 16.37, 213.7, 299.5, 89.43, 143.62, 6.44, 152.25, 50.51, 23.69, 36.99, 99.25],
|
||||
2005: [840.2, 147.4, 213.47, 135.07, 72.52, 232.85, 83.63, 35.03, 675.12, 492.4, 686.32, 127.05, 186.12, 69.55, 448.36, 181.74, 127.32, 162.37, 661.81, 91.93, 13.16, 185.18, 262.26, 73.67, 130.5, 7.57, 127.58, 44.73, 20.36, 32.25, 80.34],
|
||||
2004: [713.79, 136.97, 209.1, 110.29, 55.89, 188.04, 77.17, 32.2, 612.45, 440.5, 523.49, 94.1, 171, 65.1, 343.37, 170.82, 118.85, 118.64, 602.68, 74, 11.56, 162.38, 236.5, 60.3, 118.4, 5.4, 90.1, 42.99, 19, 27.92, 70.3],
|
||||
2003: [635.56, 112.79, 199.87, 118.48, 55.89, 145.38, 73.15, 32.2, 517.97, 392.11, 451.54, 87.45, 150.09, 64.31, 329.71, 165.11, 107.31, 99.35, 534.28, 61.59, 10.68, 147.04, 206.24, 48.01, 105.48, 4.74, 77.87, 42.31, 17.98, 24.8, 64.92],
|
||||
2002: [561.91, 76.86, 179.6, 124.1, 48.39, 137.18, 75.45, 31.6, 485.25, 368.86, 347.53, 81.85, 138.28, 76.51, 310.07, 158.77, 96.95, 92.43, 454.65, 35.86, 10.08, 134.52, 183.13, 41.45, 102.39, 2.81, 67.3, 42.08, 16.75, 21.45, 52.18]
|
||||
})
|
||||
|
||||
this.chart.setOption({
|
||||
baseOption: {
|
||||
timeline: {
|
||||
axisType: 'category',
|
||||
autoPlay: true,
|
||||
playInterval: 1000,
|
||||
data: [
|
||||
'2002-01-01', '2003-01-01', '2004-01-01',
|
||||
{
|
||||
value: '2005-01-01',
|
||||
tooltip: {
|
||||
formatter: '{b} GDP达到一个高度'
|
||||
},
|
||||
symbol: 'diamond',
|
||||
symbolSize: 16
|
||||
},
|
||||
'2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
|
||||
{
|
||||
value: '2011-01-01',
|
||||
tooltip: {
|
||||
formatter: function(params) {
|
||||
return params.name + 'GDP达到又一个高度'
|
||||
}
|
||||
},
|
||||
symbol: 'diamond',
|
||||
symbolSize: 18
|
||||
}
|
||||
],
|
||||
label: {
|
||||
formatter: function(s) {
|
||||
return (new Date(s)).getFullYear()
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
subtext: '数据来自国家统计局'
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
x: 'right',
|
||||
data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
|
||||
selected: {
|
||||
'GDP': false, '金融': false, '房地产': false
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
grid: {
|
||||
top: 80,
|
||||
bottom: 100,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function(params) {
|
||||
return params.value.replace('\n', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
'type': 'category',
|
||||
'axisLabel': {
|
||||
'interval': 0,
|
||||
rotate: 45
|
||||
},
|
||||
'data': [
|
||||
'北京', '\n天津', '河北', '\n山西', '内蒙古', '\n辽宁', '吉林', '\n黑龙江',
|
||||
'上海', '\n江苏', '浙江', '\n安徽', '福建', '\n江西', '山东', '\n河南',
|
||||
'湖北', '\n湖南', '广东', '\n广西', '海南', '\n重庆', '四川', '\n贵州',
|
||||
'云南', '\n西藏', '陕西', '\n甘肃', '青海', '\n宁夏', '新疆'
|
||||
],
|
||||
splitLine: { show: false }
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'GDP（亿元）'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{ name: 'GDP', type: 'bar' },
|
||||
{ name: '金融', type: 'bar' },
|
||||
{ name: '房地产', type: 'bar' },
|
||||
{ name: '第一产业', type: 'bar' },
|
||||
{ name: '第二产业', type: 'bar' },
|
||||
{ name: '第三产业', type: 'bar' },
|
||||
{
|
||||
name: 'GDP占比',
|
||||
type: 'pie',
|
||||
center: ['75%', '35%'],
|
||||
radius: '28%',
|
||||
z: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
options: [
|
||||
{
|
||||
title: { text: '2002全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2002'] },
|
||||
{ data: dataMap.dataFinancial['2002'] },
|
||||
{ data: dataMap.dataEstate['2002'] },
|
||||
{ data: dataMap.dataPI['2002'] },
|
||||
{ data: dataMap.dataSI['2002'] },
|
||||
{ data: dataMap.dataTI['2002'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2002sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2002sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2002sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2003全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2003'] },
|
||||
{ data: dataMap.dataFinancial['2003'] },
|
||||
{ data: dataMap.dataEstate['2003'] },
|
||||
{ data: dataMap.dataPI['2003'] },
|
||||
{ data: dataMap.dataSI['2003'] },
|
||||
{ data: dataMap.dataTI['2003'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2003sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2003sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2003sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2004全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2004'] },
|
||||
{ data: dataMap.dataFinancial['2004'] },
|
||||
{ data: dataMap.dataEstate['2004'] },
|
||||
{ data: dataMap.dataPI['2004'] },
|
||||
{ data: dataMap.dataSI['2004'] },
|
||||
{ data: dataMap.dataTI['2004'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2004sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2004sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2004sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2005全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2005'] },
|
||||
{ data: dataMap.dataFinancial['2005'] },
|
||||
{ data: dataMap.dataEstate['2005'] },
|
||||
{ data: dataMap.dataPI['2005'] },
|
||||
{ data: dataMap.dataSI['2005'] },
|
||||
{ data: dataMap.dataTI['2005'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2005sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2005sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2005sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2006全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2006'] },
|
||||
{ data: dataMap.dataFinancial['2006'] },
|
||||
{ data: dataMap.dataEstate['2006'] },
|
||||
{ data: dataMap.dataPI['2006'] },
|
||||
{ data: dataMap.dataSI['2006'] },
|
||||
{ data: dataMap.dataTI['2006'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2006sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2006sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2006sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2007全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2007'] },
|
||||
{ data: dataMap.dataFinancial['2007'] },
|
||||
{ data: dataMap.dataEstate['2007'] },
|
||||
{ data: dataMap.dataPI['2007'] },
|
||||
{ data: dataMap.dataSI['2007'] },
|
||||
{ data: dataMap.dataTI['2007'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2007sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2007sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2007sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2008全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2008'] },
|
||||
{ data: dataMap.dataFinancial['2008'] },
|
||||
{ data: dataMap.dataEstate['2008'] },
|
||||
{ data: dataMap.dataPI['2008'] },
|
||||
{ data: dataMap.dataSI['2008'] },
|
||||
{ data: dataMap.dataTI['2008'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2008sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2008sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2008sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2009全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2009'] },
|
||||
{ data: dataMap.dataFinancial['2009'] },
|
||||
{ data: dataMap.dataEstate['2009'] },
|
||||
{ data: dataMap.dataPI['2009'] },
|
||||
{ data: dataMap.dataSI['2009'] },
|
||||
{ data: dataMap.dataTI['2009'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2009sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2009sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2009sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2010全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2010'] },
|
||||
{ data: dataMap.dataFinancial['2010'] },
|
||||
{ data: dataMap.dataEstate['2010'] },
|
||||
{ data: dataMap.dataPI['2010'] },
|
||||
{ data: dataMap.dataSI['2010'] },
|
||||
{ data: dataMap.dataTI['2010'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2010sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2010sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2010sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2011全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2011'] },
|
||||
{ data: dataMap.dataFinancial['2011'] },
|
||||
{ data: dataMap.dataEstate['2011'] },
|
||||
{ data: dataMap.dataPI['2011'] },
|
||||
{ data: dataMap.dataSI['2011'] },
|
||||
{ data: dataMap.dataTI['2011'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2011sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2011sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2011sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '漏斗图',
|
||||
subtext: '纯属虚构'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['展现', '点击', '访问', '咨询', '订单']
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: '漏斗图',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '80%',
|
||||
// height: {totalHeight} - y - y2,
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '访问' },
|
||||
{ value: 40, name: '咨询' },
|
||||
{ value: 20, name: '订单' },
|
||||
{ value: 80, name: '点击' },
|
||||
{ value: 100, name: '展现' }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '业务指标',
|
||||
type: 'gauge',
|
||||
detail: { formatter: '{value}%' },
|
||||
data: [{ value: 50, name: '完成率' }]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const axisData = ['周一', '周二', '周三', '很长很长的周四', '周五', '周六', '周日']
|
||||
const data = axisData.map(function(item, i) {
|
||||
return Math.round(Math.random() * 1000 * (i + 1))
|
||||
})
|
||||
const links = data.map(function(item, i) {
|
||||
return {
|
||||
source: i,
|
||||
target: i + 1
|
||||
}
|
||||
})
|
||||
links.pop()
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '笛卡尔坐标系上的 Graph'
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: axisData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
coordinateSystem: 'cartesian2d',
|
||||
symbolSize: 40,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
data: data,
|
||||
links: links,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2f4554'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
height: '50%',
|
||||
y: '10%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'],
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'],
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
calculable: true,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
bottom: '15%'
|
||||
},
|
||||
series: [{
|
||||
name: 'Punch Card',
|
||||
type: 'heatmap',
|
||||
data: [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]].map(function(item) {
|
||||
return [item[1], item[0], item[2] || '-']
|
||||
}),
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const data = []
|
||||
for (let t = 0; t < 25; t += 0.001) {
|
||||
const x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t)
|
||||
const y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t)
|
||||
const z = t + 2.0 * Math.sin(75 * t)
|
||||
data.push([x, y, z])
|
||||
}
|
||||
this.chart.setOption({
|
||||
tooltip: {},
|
||||
backgroundColor: '#fff',
|
||||
visualMap: {
|
||||
show: false,
|
||||
dimension: 2,
|
||||
min: 0,
|
||||
max: 30,
|
||||
inRange: {
|
||||
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'value'
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'value'
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value'
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'orthographic'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'line3D',
|
||||
data: data,
|
||||
lineStyle: {
|
||||
width: 4
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
import { getChartData } from '@/api/visits'
|
||||
import { getChartData } from '@/api/monitor/visits'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">日流量</div>
|
||||
<count-to :start-val="0" :end-val="count.newVisits" :duration="2600" class="card-panel-num"/>
|
||||
<count-to :start-val="0" :end-val="count.newVisits" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">日IP量</div>
|
||||
<count-to :start-val="0" :end-val="count.newIp" :duration="3000" class="card-panel-num"/>
|
||||
<count-to :start-val="0" :end-val="count.newIp" :duration="3000" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">周流量</div>
|
||||
<count-to :start-val="0" :end-val="count.recentVisits" :duration="3200" class="card-panel-num"/>
|
||||
<count-to :start-val="0" :end-val="count.recentVisits" :duration="3200" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">周IP量</div>
|
||||
<count-to :start-val="0" :end-val="count.recentIp" :duration="3600" class="card-panel-num"/>
|
||||
<count-to :start-val="0" :end-val="count.recentIp" :duration="3600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
import { get } from '@/api/visits'
|
||||
import { get } from '@/api/monitor/visits'
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,149 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: 'Graph 简单示例'
|
||||
},
|
||||
tooltip: {},
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
symbolSize: 50,
|
||||
roam: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
edgeLabel: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
name: '节点1',
|
||||
x: 100,
|
||||
y: 300
|
||||
}, {
|
||||
name: '节点2',
|
||||
x: 1000,
|
||||
y: 300
|
||||
}, {
|
||||
name: '节点3',
|
||||
x: 550,
|
||||
y: 100
|
||||
}, {
|
||||
name: '节点4',
|
||||
x: 550,
|
||||
y: 500
|
||||
}],
|
||||
// links: [],
|
||||
links: [{
|
||||
source: 0,
|
||||
target: 1,
|
||||
symbolSize: [5, 20],
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
curveness: 0.2
|
||||
}
|
||||
}
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点1',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: { curveness: 0.2 }
|
||||
}
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点4'
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点4'
|
||||
}],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.9,
|
||||
width: 2,
|
||||
curveness: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '66%',
|
||||
center: ['50%', '42%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(127,95,132,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Techology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,149 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
radius: [0, '30%'],
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 335, name: '直达', selected: true },
|
||||
{ value: 679, name: '营销广告' },
|
||||
{ value: 1548, name: '搜索引擎' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: ['40%', '55%'],
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
|
||||
backgroundColor: '#eee',
|
||||
borderColor: '#aaa',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
shadowBlur: 3,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
shadowColor: '#999',
|
||||
padding: [0, 7],
|
||||
rich: {
|
||||
a: {
|
||||
color: '#999',
|
||||
lineHeight: 22,
|
||||
align: 'center'
|
||||
},
|
||||
abg: {
|
||||
backgroundColor: '#333',
|
||||
width: '100%',
|
||||
align: 'right',
|
||||
height: 22,
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
hr: {
|
||||
borderColor: '#aaa',
|
||||
width: '100%',
|
||||
borderWidth: 0.5,
|
||||
height: 0
|
||||
},
|
||||
b: {
|
||||
fontSize: 16,
|
||||
lineHeight: 33
|
||||
},
|
||||
per: {
|
||||
color: '#eee',
|
||||
backgroundColor: '#334455',
|
||||
padding: [2, 4],
|
||||
borderRadius: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 335, name: '直达' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 234, name: '联盟广告' },
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1048, name: '百度' },
|
||||
{ value: 251, name: '谷歌' },
|
||||
{ value: 147, name: '必应' },
|
||||
{ value: 102, name: '其他' }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
series: {
|
||||
type: 'sankey',
|
||||
layout: 'none',
|
||||
focusNodeAdjacency: 'allEdges',
|
||||
data: [{
|
||||
name: 'a'
|
||||
}, {
|
||||
name: 'b'
|
||||
}, {
|
||||
name: 'a1'
|
||||
}, {
|
||||
name: 'a2'
|
||||
}, {
|
||||
name: 'b1'
|
||||
}, {
|
||||
name: 'c'
|
||||
}],
|
||||
links: [{
|
||||
source: 'a',
|
||||
target: 'a1',
|
||||
value: 5
|
||||
}, {
|
||||
source: 'a',
|
||||
target: 'a2',
|
||||
value: 3
|
||||
}, {
|
||||
source: 'b',
|
||||
target: 'b1',
|
||||
value: 8
|
||||
}, {
|
||||
source: 'a',
|
||||
target: 'b1',
|
||||
value: 3
|
||||
}, {
|
||||
source: 'b1',
|
||||
target: 'a1',
|
||||
value: 1
|
||||
}, {
|
||||
source: 'b1',
|
||||
target: 'c',
|
||||
value: 2
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,143 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const data = [
|
||||
[[28604, 77, 17096869, 'Australia', 1990], [31163, 77.4, 27662440, 'Canada', 1990], [1516, 68, 1154605773, 'China', 1990], [13670, 74.7, 10582082, 'Cuba', 1990], [28599, 75, 4986705, 'Finland', 1990], [29476, 77.1, 56943299, 'France', 1990], [31476, 75.4, 78958237, 'Germany', 1990], [28666, 78.1, 254830, 'Iceland', 1990], [1777, 57.7, 870601776, 'India', 1990], [29550, 79.1, 122249285, 'Japan', 1990], [2076, 67.9, 20194354, 'North Korea', 1990], [12087, 72, 42972254, 'South Korea', 1990], [24021, 75.4, 3397534, 'New Zealand', 1990], [43296, 76.8, 4240375, 'Norway', 1990], [10088, 70.8, 38195258, 'Poland', 1990], [19349, 69.6, 147568552, 'Russia', 1990], [10670, 67.3, 53994605, 'Turkey', 1990], [26424, 75.7, 57110117, 'United Kingdom', 1990], [37062, 75.4, 252847810, 'United States', 1990]],
|
||||
[[44056, 81.8, 23968973, 'Australia', 2015], [43294, 81.7, 35939927, 'Canada', 2015], [13334, 76.9, 1376048943, 'China', 2015], [21291, 78.5, 11389562, 'Cuba', 2015], [38923, 80.8, 5503457, 'Finland', 2015], [37599, 81.9, 64395345, 'France', 2015], [44053, 81.1, 80688545, 'Germany', 2015], [42182, 82.8, 329425, 'Iceland', 2015], [5903, 66.8, 1311050527, 'India', 2015], [36162, 83.5, 126573481, 'Japan', 2015], [1390, 71.4, 25155317, 'North Korea', 2015], [34644, 80.7, 50293439, 'South Korea', 2015], [34186, 80.6, 4528526, 'New Zealand', 2015], [64304, 81.6, 5210967, 'Norway', 2015], [24787, 77.3, 38611794, 'Poland', 2015], [23038, 73.13, 143456918, 'Russia', 2015], [19360, 76.5, 78665830, 'Turkey', 2015], [38225, 81.4, 64715810, 'United Kingdom', 2015], [53354, 79.1, 321773631, 'United States', 2015]]
|
||||
]
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '1990 与 2015 年各国家人均寿命与 GDP'
|
||||
},
|
||||
legend: {
|
||||
right: 10,
|
||||
data: ['1990', '2015']
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
scale: true
|
||||
},
|
||||
series: [{
|
||||
name: '1990',
|
||||
data: data[0],
|
||||
type: 'scatter',
|
||||
symbolSize: function(data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function(param) {
|
||||
return param.data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '2015',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize: function(data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function(param) {
|
||||
return param.data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const data = [{
|
||||
name: 'Grandpa',
|
||||
children: [{
|
||||
name: 'Uncle Leo',
|
||||
value: 15,
|
||||
children: [{
|
||||
name: 'Cousin Jack',
|
||||
value: 2
|
||||
}, {
|
||||
name: 'Cousin Mary',
|
||||
value: 5,
|
||||
children: [{
|
||||
name: 'Jackson',
|
||||
value: 2
|
||||
}]
|
||||
}, {
|
||||
name: 'Cousin Ben',
|
||||
value: 4
|
||||
}]
|
||||
}, {
|
||||
name: 'Father',
|
||||
value: 10,
|
||||
children: [{
|
||||
name: 'Me',
|
||||
value: 5
|
||||
}, {
|
||||
name: 'Brother Peter',
|
||||
value: 1
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
name: 'Nancy',
|
||||
children: [{
|
||||
name: 'Uncle Nike',
|
||||
children: [{
|
||||
name: 'Cousin Betty',
|
||||
value: 1
|
||||
}, {
|
||||
name: 'Cousin Jenny',
|
||||
value: 2
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
this.chart.setOption({
|
||||
series: {
|
||||
type: 'sunburst',
|
||||
data: data,
|
||||
radius: [0, '90%'],
|
||||
label: {
|
||||
rotate: 'radial'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,0.2)',
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
|
||||
},
|
||||
|
||||
singleAxis: {
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
axisTick: {},
|
||||
axisLabel: {},
|
||||
type: 'time',
|
||||
axisPointer: {
|
||||
animation: true,
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
opacity: 0.2
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'themeRiver',
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.8)'
|
||||
}
|
||||
},
|
||||
data: [['2015/11/08', 10, 'DQ'], ['2015/11/09', 15, 'DQ'], ['2015/11/10', 35, 'DQ'],
|
||||
['2015/11/11', 38, 'DQ'], ['2015/11/12', 22, 'DQ'], ['2015/11/13', 16, 'DQ'],
|
||||
['2015/11/14', 7, 'DQ'], ['2015/11/15', 2, 'DQ'], ['2015/11/16', 17, 'DQ'],
|
||||
['2015/11/17', 33, 'DQ'], ['2015/11/18', 40, 'DQ'], ['2015/11/19', 32, 'DQ'],
|
||||
['2015/11/20', 26, 'DQ'], ['2015/11/21', 35, 'DQ'], ['2015/11/22', 40, 'DQ'],
|
||||
['2015/11/23', 32, 'DQ'], ['2015/11/24', 26, 'DQ'], ['2015/11/25', 22, 'DQ'],
|
||||
['2015/11/26', 16, 'DQ'], ['2015/11/27', 22, 'DQ'], ['2015/11/28', 10, 'DQ'],
|
||||
['2015/11/08', 35, 'TY'], ['2015/11/09', 36, 'TY'], ['2015/11/10', 37, 'TY'],
|
||||
['2015/11/11', 22, 'TY'], ['2015/11/12', 24, 'TY'], ['2015/11/13', 26, 'TY'],
|
||||
['2015/11/14', 34, 'TY'], ['2015/11/15', 21, 'TY'], ['2015/11/16', 18, 'TY'],
|
||||
['2015/11/17', 45, 'TY'], ['2015/11/18', 32, 'TY'], ['2015/11/19', 35, 'TY'],
|
||||
['2015/11/20', 30, 'TY'], ['2015/11/21', 28, 'TY'], ['2015/11/22', 27, 'TY'],
|
||||
['2015/11/23', 26, 'TY'], ['2015/11/24', 15, 'TY'], ['2015/11/25', 30, 'TY'],
|
||||
['2015/11/26', 35, 'TY'], ['2015/11/27', 42, 'TY'], ['2015/11/28', 42, 'TY'],
|
||||
['2015/11/08', 21, 'SS'], ['2015/11/09', 25, 'SS'], ['2015/11/10', 27, 'SS'],
|
||||
['2015/11/11', 23, 'SS'], ['2015/11/12', 24, 'SS'], ['2015/11/13', 21, 'SS'],
|
||||
['2015/11/14', 35, 'SS'], ['2015/11/15', 39, 'SS'], ['2015/11/16', 40, 'SS'],
|
||||
['2015/11/17', 36, 'SS'], ['2015/11/18', 33, 'SS'], ['2015/11/19', 43, 'SS'],
|
||||
['2015/11/20', 40, 'SS'], ['2015/11/21', 34, 'SS'], ['2015/11/22', 28, 'SS'],
|
||||
['2015/11/23', 26, 'SS'], ['2015/11/24', 37, 'SS'], ['2015/11/25', 41, 'SS'],
|
||||
['2015/11/26', 46, 'SS'], ['2015/11/27', 47, 'SS'], ['2015/11/28', 41, 'SS'],
|
||||
['2015/11/08', 10, 'QG'], ['2015/11/09', 15, 'QG'], ['2015/11/10', 35, 'QG'],
|
||||
['2015/11/11', 38, 'QG'], ['2015/11/12', 22, 'QG'], ['2015/11/13', 16, 'QG'],
|
||||
['2015/11/14', 7, 'QG'], ['2015/11/15', 2, 'QG'], ['2015/11/16', 17, 'QG'],
|
||||
['2015/11/17', 33, 'QG'], ['2015/11/18', 40, 'QG'], ['2015/11/19', 32, 'QG'],
|
||||
['2015/11/20', 26, 'QG'], ['2015/11/21', 35, 'QG'], ['2015/11/22', 40, 'QG'],
|
||||
['2015/11/23', 32, 'QG'], ['2015/11/24', 26, 'QG'], ['2015/11/25', 22, 'QG'],
|
||||
['2015/11/26', 16, 'QG'], ['2015/11/27', 22, 'QG'], ['2015/11/28', 10, 'QG'],
|
||||
['2015/11/08', 10, 'SY'], ['2015/11/09', 15, 'SY'], ['2015/11/10', 35, 'SY'],
|
||||
['2015/11/11', 38, 'SY'], ['2015/11/12', 22, 'SY'], ['2015/11/13', 16, 'SY'],
|
||||
['2015/11/14', 7, 'SY'], ['2015/11/15', 2, 'SY'], ['2015/11/16', 17, 'SY'],
|
||||
['2015/11/17', 33, 'SY'], ['2015/11/18', 40, 'SY'], ['2015/11/19', 32, 'SY'],
|
||||
['2015/11/20', 26, 'SY'], ['2015/11/21', 35, 'SY'], ['2015/11/22', 4, 'SY'],
|
||||
['2015/11/23', 32, 'SY'], ['2015/11/24', 26, 'SY'], ['2015/11/25', 22, 'SY'],
|
||||
['2015/11/26', 16, 'SY'], ['2015/11/27', 22, 'SY'], ['2015/11/28', 10, 'SY'],
|
||||
['2015/11/08', 10, 'DD'], ['2015/11/09', 15, 'DD'], ['2015/11/10', 35, 'DD'],
|
||||
['2015/11/11', 38, 'DD'], ['2015/11/12', 22, 'DD'], ['2015/11/13', 16, 'DD'],
|
||||
['2015/11/14', 7, 'DD'], ['2015/11/15', 2, 'DD'], ['2015/11/16', 17, 'DD'],
|
||||
['2015/11/17', 33, 'DD'], ['2015/11/18', 4, 'DD'], ['2015/11/19', 32, 'DD'],
|
||||
['2015/11/20', 26, 'DD'], ['2015/11/21', 35, 'DD'], ['2015/11/22', 40, 'DD'],
|
||||
['2015/11/23', 32, 'DD'], ['2015/11/24', 26, 'DD'], ['2015/11/25', 22, 'DD'],
|
||||
['2015/11/26', 16, 'DD'], ['2015/11/27', 22, 'DD'], ['2015/11/28', 10, 'DD']]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,39 +1,39 @@
|
||||
<template>
|
||||
<div class="errPage-container">
|
||||
<el-button icon="arrow-left" class="pan-back-btn" @click="back">
|
||||
返回
|
||||
</el-button>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h1 class="text-jumbo text-ginormous">Oops!</h1>
|
||||
图片来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
|
||||
<h2>你没有权限去操作</h2>
|
||||
<h1 class="text-jumbo text-ginormous">
|
||||
Oops!
|
||||
</h1>
|
||||
<h2>你没有权限去该页面</h2>
|
||||
<h6>如有不满请联系你领导</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>或者你可以去:</li>
|
||||
<li class="link-type">
|
||||
<router-link to="/dashboard">回首页</router-link>
|
||||
<router-link to="/dashboard">
|
||||
回首页
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="link-type"><a href="https://www.jianshu.com/">随便看看</a></li>
|
||||
<li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog :visible.sync="dialogVisible" title="随便看">
|
||||
<img :src="ewizardClap" class="pan-img">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import errGif from '@/assets/401_images/401.gif'
|
||||
|
||||
export default {
|
||||
name: 'Page401',
|
||||
data() {
|
||||
return {
|
||||
errGif: errGif + '?' + +new Date(),
|
||||
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
|
||||
dialogVisible: false
|
||||
errGif: errGif + '?' + +new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -48,9 +48,9 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.errPage-container {
|
||||
width: 600px;
|
||||
width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 100px auto;
|
||||
.pan-back-btn {
|
||||
|
||||
@@ -9,9 +9,6 @@
|
||||
</div>
|
||||
<div class="bullshit">
|
||||
<div class="bullshit__oops">OOPS!</div>
|
||||
<div class="bullshit__info">版权所有
|
||||
<a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
|
||||
</div>
|
||||
<div class="bullshit__headline">{{ message }}</div>
|
||||
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
|
||||
<a href="/" class="bullshit__return-home">返回首页</a>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
export default {
|
||||
beforeCreate() {
|
||||
created() {
|
||||
const { params, query } = this.$route
|
||||
const { path } = params
|
||||
this.$router.replace({ path: '/' + path, query })
|
||||
|
||||
278
src/views/generator/config.vue
Normal file
278
src/views/generator/config.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="15">
|
||||
<!--角色管理-->
|
||||
<el-col style="margin-bottom: 10px">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">字段配置：{{ tableName }}</span>
|
||||
<el-button
|
||||
:loading="columnLoading"
|
||||
icon="el-icon-check"
|
||||
size="mini"
|
||||
style="float: right; padding: 6px 9px"
|
||||
type="primary"
|
||||
@click="saveColumnConfig"
|
||||
>保存</el-button>
|
||||
</div>
|
||||
<el-form size="small" label-width="90px">
|
||||
<el-table v-loading="loading" :data="data" :max-height="tableHeight" size="small" style="width: 100%;margin-bottom: 15px">
|
||||
<el-table-column prop="columnName" label="字段名称" />
|
||||
<el-table-column prop="columnType" label="字段类型" />
|
||||
<el-table-column prop="remark" label="字段描述">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="data[scope.$index].remark" size="mini" class="edit-input" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="必填" width="70px">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="data[scope.$index].notNull" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="列表" width="70px">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="data[scope.$index].listShow" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="表单" width="70px">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="data[scope.$index].formShow" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单类型">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="data[scope.$index].formType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
|
||||
<el-option
|
||||
label="文本框"
|
||||
value="Input"
|
||||
/>
|
||||
<el-option
|
||||
label="文本域"
|
||||
value="Textarea"
|
||||
/>
|
||||
<el-option
|
||||
label="单选框"
|
||||
value="Radio"
|
||||
/>
|
||||
<el-option
|
||||
label="下拉框"
|
||||
value="Select"
|
||||
/>
|
||||
<el-option
|
||||
label="日期框"
|
||||
value="Date"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="data[scope.$index].queryType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
|
||||
<el-option
|
||||
label="="
|
||||
value="="
|
||||
/>
|
||||
<el-option
|
||||
label="!="
|
||||
value="!="
|
||||
/>
|
||||
<el-option
|
||||
label=">="
|
||||
value=">="
|
||||
/>
|
||||
<el-option
|
||||
label="<="
|
||||
value="<="
|
||||
/>
|
||||
<el-option
|
||||
label="Like"
|
||||
value="Like"
|
||||
/>
|
||||
<el-option
|
||||
label="DateRange"
|
||||
value="DateRange"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="日期注解">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="data[scope.$index].dateAnnotation" filterable class="edit-input" clearable size="mini" placeholder="请选择">
|
||||
<el-option
|
||||
label="自动创建时间"
|
||||
value="CreationTimestamp"
|
||||
/>
|
||||
<el-option
|
||||
label="自动更新时间"
|
||||
value="UpdateTimestamp"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联字典">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="data[scope.$index].dictName" filterable class="edit-input" clearable size="mini" placeholder="请选择">
|
||||
<el-option v-for="item in dicts" :key="item.id" :label="item.remark === '' ? item.name : item.remark" :value="item.name" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">生成配置</span>
|
||||
<el-button
|
||||
:loading="configLoading"
|
||||
icon="el-icon-check"
|
||||
size="mini"
|
||||
style="float: right; padding: 6px 9px"
|
||||
type="primary"
|
||||
@click="doSubmit"
|
||||
>保存</el-button>
|
||||
</div>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="78px">
|
||||
<el-form-item label="作者名称" prop="author">
|
||||
<el-input v-model="form.author" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块名称" prop="moduleName">
|
||||
<el-input v-model="form.moduleName" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">模块的名称，请选择项目中已存在的模块</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="至于包下" prop="pack">
|
||||
<el-input v-model="form.pack" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="前端路径" prop="path">
|
||||
<el-input v-model="form.path" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">输入views文件夹下的目录，不存在即创建</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="去表前缀" prop="prefix">
|
||||
<el-input v-model="form.prefix" placeholder="默认不去除表前缀" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">默认不去除表前缀，可自定义</span>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="Api路径">-->
|
||||
<!-- <el-input v-model="form.apiPath"/>-->
|
||||
<!-- <span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</span>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="是否覆盖" prop="cover">
|
||||
<el-radio-group v-model="form.cover" size="mini" style="width: 40%">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">谨防误操作，请慎重选择</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import initData from '@/mixins/initData'
|
||||
import { update, get } from '@/api/generator/genConfig'
|
||||
import { save } from '@/api/generator/generator'
|
||||
import { getDicts } from '@/api/system/dict'
|
||||
export default {
|
||||
name: 'GeneratorConfig',
|
||||
components: {},
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first', tableName: '', tableHeight: 550, columnLoading: false, configLoading: false, dicts: [],
|
||||
form: { id: null, tableName: '', author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '' },
|
||||
rules: {
|
||||
author: [
|
||||
{ required: true, message: '作者不能为空', trigger: 'blur' }
|
||||
],
|
||||
pack: [
|
||||
{ required: true, message: '包路径不能为空', trigger: 'blur' }
|
||||
],
|
||||
moduleName: [
|
||||
{ required: true, message: '包路径不能为空', trigger: 'blur' }
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: '前端代码生成路径不能为空', trigger: 'blur' }
|
||||
],
|
||||
cover: [
|
||||
{ required: true, message: '不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.tableHeight = document.documentElement.clientHeight - 385
|
||||
this.tableName = this.$route.params.tableName
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
get(this.tableName).then(data => {
|
||||
this.form = data
|
||||
this.form.cover = this.form.cover.toString()
|
||||
})
|
||||
getDicts().then(data => {
|
||||
this.dicts = data
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
beforeInit() {
|
||||
this.url = 'api/generator/columns'
|
||||
const tableName = this.tableName
|
||||
this.params = { tableName }
|
||||
return true
|
||||
},
|
||||
saveColumnConfig() {
|
||||
this.columnLoading = true
|
||||
save(this.data).then(res => {
|
||||
this.$notify({
|
||||
title: '保存成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.columnLoading = false
|
||||
}).catch(err => {
|
||||
this.columnLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.configLoading = true
|
||||
update(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '保存成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.form = res
|
||||
this.form.cover = this.form.cover.toString()
|
||||
this.configLoading = false
|
||||
}).catch(err => {
|
||||
this.configLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.edit-input {
|
||||
.el-input__inner {
|
||||
border: 1px solid #e5e6e7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,182 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" size="mini" @click="toGen">生成代码</el-button>
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" title="代码生成配置" append-to-body width="880px">
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="90px">
|
||||
<el-form-item label="模块名称" prop="moduleName">
|
||||
<el-input v-model="form.moduleName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="至于包下" prop="pack">
|
||||
<el-input v-model="form.pack"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="前端路径" prop="path">
|
||||
<el-input v-model="form.path"/>
|
||||
</el-form-item>
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;margin-bottom: 15px">
|
||||
<el-table-column label="序号" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ scope.$index + 1 }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="columnName" label="字段名称"/>
|
||||
<el-table-column prop="columnType" label="字段类型"/>
|
||||
<el-table-column prop="columnComment" label="字段标题">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="data[scope.$index].columnComment" class="edit-input"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="data[scope.$index].columnQuery" class="edit-input" clearable placeholder="请选择">
|
||||
<el-option
|
||||
label="模糊查询"
|
||||
value="1"/>
|
||||
<el-option
|
||||
label="精确查询"
|
||||
value="2"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="columnShow" label="列表显示">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip :content="scope.row.columnShow === 'true' ?'显示':'不显示'" placement="top">
|
||||
<el-switch
|
||||
v-model="data[scope.$index].columnShow"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="true"
|
||||
inactive-value="false"/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-form-item label="作者名称" prop="author">
|
||||
<el-input v-model="form.author"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="去表前缀" prop="prefix">
|
||||
<el-input v-model="form.prefix" placeholder="默认不去除表前缀"/>
|
||||
</el-form-item>
|
||||
<!-- 可自定义显示配置 -->
|
||||
<!-- <el-form-item label="Api路径">-->
|
||||
<!-- <el-input v-model="form.apiPath"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="是否覆盖" prop="cover">
|
||||
<el-radio-group v-model="form.cover" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="genLoading" type="primary" @click="doSubmit">生成</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import initData from '@/mixins/initData'
|
||||
import { update, get } from '@/api/genConfig'
|
||||
import { generator } from '@/api/generator'
|
||||
export default {
|
||||
name: 'Generator',
|
||||
mixins: [initData],
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
genLoading: false, dialog: false, columnQuery: '',
|
||||
form: { author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '' },
|
||||
rules: {
|
||||
author: [
|
||||
{ required: true, message: '作者不能为空', trigger: 'blur' }
|
||||
],
|
||||
pack: [
|
||||
{ required: true, message: '包路径不能为空', trigger: 'blur' }
|
||||
],
|
||||
moduleName: [
|
||||
{ required: true, message: '包路径不能为空', trigger: 'blur' }
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: '前端代码生成路径不能为空', trigger: 'blur' }
|
||||
],
|
||||
cover: [
|
||||
{ required: true, message: '不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toGen() {
|
||||
this.dialog = true
|
||||
this.time = 130
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
get().then(data => {
|
||||
this.form = data
|
||||
this.form.cover = this.form.cover.toString()
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeInit() {
|
||||
this.url = 'api/generator/columns'
|
||||
const tableName = this.name
|
||||
this.params = { tableName }
|
||||
return true
|
||||
},
|
||||
cancel() {
|
||||
this.dialog = false
|
||||
this.genLoading = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '' }
|
||||
},
|
||||
doSubmit() {
|
||||
this.genLoading = true
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
update(this.form).then(res => {
|
||||
generator(this.data, this.name).then(res => {
|
||||
this.$notify({
|
||||
title: '生成成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.cancel()
|
||||
}).catch(err => {
|
||||
this.cancel()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}).catch(err => {
|
||||
this.cancel()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.edit-input {
|
||||
.el-input__inner {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .el-dialog__body{
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
/deep/ .input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<el-input v-model="query.name" clearable placeholder="请输入表名" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.name" clearable size="small" placeholder="请输入表名" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
@@ -12,10 +12,10 @@
|
||||
<div>{{ scope.$index + 1 }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="tableName" label="表名"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="engine" label="数据库引擎"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="coding" label="字符编码集"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="remark" label="备注"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="tableName" label="表名" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="engine" label="数据库引擎" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="coding" label="字符编码集" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="remark" label="备注" />
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
@@ -23,7 +23,13 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="140px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<Generator :name="scope.row.tableName"/>
|
||||
<el-button size="mini" style="margin-right: 2px" type="text">预览</el-button>
|
||||
<el-button size="mini" style="margin-left: -1px;margin-right: 2px" type="text">
|
||||
<router-link :to="'/sys-tools/generator/config/' + scope.row.tableName">
|
||||
编辑
|
||||
</router-link>
|
||||
</el-button>
|
||||
<el-button type="text" style="margin-left: -1px" size="mini" @click="toGen(scope.row.tableName)">生成</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -34,17 +40,17 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import initData from '@/mixins/initData'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import Generator from './generator'
|
||||
import { generator } from '@/api/generator/generator'
|
||||
export default {
|
||||
name: 'GeneratorIndex',
|
||||
components: { Generator },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
@@ -87,17 +93,14 @@ export default {
|
||||
if (name) { this.params['name'] = name }
|
||||
return true
|
||||
},
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.doUpdate()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
toGen(tableName) {
|
||||
// 生成代码
|
||||
generator(tableName, 0).then(data => {
|
||||
this.$notify({
|
||||
title: '生成成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,117 +1,38 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-editor-container">
|
||||
<panel-group/>
|
||||
<panel-group />
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart/>
|
||||
<line-chart />
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="32">-->
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <radar-chart/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <pie-chart/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <bar-chart/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
|
||||
<!-- <heat-map/>-->
|
||||
<!-- </el-row>-->
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<radar-chart/>
|
||||
<radar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<sunburst/>
|
||||
<pie-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<gauge/>
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="12">-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <rich/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <theme-river/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- <el-row :gutter="32">-->
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <graph/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <sankey/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <line3-d/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- <el-row :gutter="12">-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <scatter/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <point/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <category/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-row>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import RadarChart from './dashboard/RadarChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
import { count } from '@/api/visits'
|
||||
import HeatMap from './dashboard/HeatMap'
|
||||
import Funnel from './dashboard/Funnel'
|
||||
import Gauge from './dashboard/Gauge'
|
||||
import Rich from './dashboard/Rich'
|
||||
import ThemeRiver from './dashboard/ThemeRiver'
|
||||
import Sunburst from './dashboard/Sunburst'
|
||||
import Graph from './dashboard/Graph'
|
||||
import Sankey from './dashboard/Sankey'
|
||||
import Scatter from './dashboard/Scatter'
|
||||
import Line3D from './dashboard/Line3D'
|
||||
import Category from './dashboard/Category'
|
||||
import Point from './dashboard/Point'
|
||||
import RadarChart from '@/components/Echarts/RadarChart'
|
||||
import PieChart from '@/components/Echarts/PieChart'
|
||||
import BarChart from '@/components/Echarts/BarChart'
|
||||
import { count } from '@/api/monitor/visits'
|
||||
|
||||
/**
|
||||
* 记录访问，只有页面刷新或者第一次加载才会记录
|
||||
@@ -122,28 +43,11 @@ count().then(res => {
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
Point,
|
||||
Category,
|
||||
Graph,
|
||||
HeatMap,
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RadarChart,
|
||||
PieChart,
|
||||
Funnel,
|
||||
Sunburst,
|
||||
Gauge,
|
||||
Rich,
|
||||
ThemeRiver,
|
||||
Sankey,
|
||||
Line3D,
|
||||
Scatter,
|
||||
BarChart
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,26 +1,30 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
|
||||
<h3 class="title">EL-ADMIN 后台管理系统</h3>
|
||||
<h3 class="title">
|
||||
EL-ADMIN 后台管理系统
|
||||
</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode">
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住我</el-checkbox>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">
|
||||
记住我
|
||||
</el-checkbox>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
@@ -30,7 +34,7 @@
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div v-if="$store.state.settings.showFooter" id="el-login-footer">
|
||||
<span v-html="$store.state.settings.footerTxt"/>
|
||||
<span v-html="$store.state.settings.footerTxt" />
|
||||
<span> ⋅ </span>
|
||||
<a href="http://www.beian.miit.gov.cn" target="_blank">{{ $store.state.settings.caseNumber }}</a>
|
||||
</div>
|
||||
@@ -39,7 +43,7 @@
|
||||
|
||||
<script>
|
||||
import { encrypt } from '@/utils/rsaEncrypt'
|
||||
import Config from '@/config'
|
||||
import Config from '@/settings'
|
||||
import { getCodeImg } from '@/api/login'
|
||||
import Cookies from 'js-cookie'
|
||||
export default {
|
||||
|
||||
@@ -158,7 +158,7 @@ export default {
|
||||
})
|
||||
},
|
||||
initWebSocket() {
|
||||
const wsUri = process.env.WS_API + '/webSocket/deploy'
|
||||
const wsUri = process.env.VUE_APP_WS_API + '/webSocket/deploy'
|
||||
this.websock = new WebSocket(wsUri)
|
||||
this.websock.onopen = this.webSocketOnOpen
|
||||
this.websock.onerror = this.webSocketOnError
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<Search :query="query"/>
|
||||
<Search :query="query" />
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="expand">
|
||||
@@ -15,11 +15,11 @@
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" label="用户名"/>
|
||||
<el-table-column prop="requestIp" label="IP"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源"/>
|
||||
<el-table-column prop="description" label="描述"/>
|
||||
<el-table-column prop="browser" label="浏览器"/>
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="requestIp" label="IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
@@ -43,19 +43,19 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import initData from '@/mixins/initData'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import { getErrDetail } from '@/api/log'
|
||||
import crud from '@/mixins/crud'
|
||||
import { getErrDetail } from '@/api/monitor/log'
|
||||
import Search from './search'
|
||||
export default {
|
||||
name: 'ErrorLog',
|
||||
components: { Search },
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
errorInfo: '', dialog: false
|
||||
@@ -67,21 +67,13 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/logs/error'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['blurry'] = value }
|
||||
this.params['logType'] = 'ERROR'
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 获取异常详情
|
||||
info(id) {
|
||||
this.dialog = true
|
||||
getErrDetail(id).then(res => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<Search :query="query"/>
|
||||
<Search :query="query" />
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="expand">
|
||||
@@ -15,11 +15,11 @@
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" label="用户名"/>
|
||||
<el-table-column prop="requestIp" label="IP"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源"/>
|
||||
<el-table-column prop="description" label="描述"/>
|
||||
<el-table-column prop="browser" label="浏览器"/>
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="requestIp" label="IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="time" label="请求耗时" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
|
||||
@@ -40,37 +40,28 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import initData from '@/mixins/initData'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import crud from '@/mixins/crud'
|
||||
import Search from './search'
|
||||
export default {
|
||||
name: 'Log',
|
||||
components: { Search },
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
// 获取数据前设置好接口地址
|
||||
methods: {
|
||||
parseTime,
|
||||
beforeInit() {
|
||||
this.url = 'api/logs'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['blurry'] = value }
|
||||
this.params['logType'] = 'INFO'
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,55 +1,37 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<el-input v-model="query.value" clearable placeholder="请输入你要搜索的内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入你要搜索的内容" style="width: 200px;" class="filter-item" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="$parent.toQuery">搜索</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="$parent.downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="$parent.downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { downloadFile } from '@/utils/index'
|
||||
import { downloadLog } from '@/api/log'
|
||||
export default {
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downloadLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
download() {
|
||||
this.$parent.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadLog(this.$parent.params).then(result => {
|
||||
downloadFile(result, '系统日志列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-input v-model="query.value" clearable placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.filter" clearable size="small" placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column prop="userName" label="用户名"/>
|
||||
<el-table-column prop="job" label="岗位"/>
|
||||
<el-table-column prop="ip" label="登录IP"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="登录地点"/>
|
||||
<el-table-column prop="browser" label="浏览器"/>
|
||||
<el-table-column prop="userName" label="用户名" />
|
||||
<el-table-column prop="job" label="岗位" />
|
||||
<el-table-column prop="ip" label="登录IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="登录地点" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="loginTime" label="登录时间">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.loginTime) }}</span>
|
||||
@@ -29,14 +28,15 @@
|
||||
<el-table-column prop="createTime" label="操作" width="100px" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
v-permission="['admin']"
|
||||
:ref="scope.$index"
|
||||
v-permission="['admin']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定踢出该用户吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.$index, scope.row.key)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.key, scope.$index)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" size="mini" type="text">踢出</el-button>
|
||||
</el-popover>
|
||||
@@ -50,20 +50,21 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import initData from '@/mixins/initData'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import { del, downloadOnline } from '@/api/online'
|
||||
import crud from '@/mixins/crud'
|
||||
import { del } from '@/api/monitor/online'
|
||||
export default {
|
||||
name: 'OnlineUser',
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false
|
||||
title: '在线用户',
|
||||
crudMethod: { del }
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -72,39 +73,23 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'auth/online'
|
||||
this.params = { page: this.page, size: this.size }
|
||||
if (this.query.value) { this.params['filter'] = this.query.value }
|
||||
return true
|
||||
},
|
||||
subDelete(index, key) {
|
||||
// 踢出用户
|
||||
delMethod(key, index) {
|
||||
this.delLoading = true
|
||||
del(key).then(res => {
|
||||
this.crudMethod.del(key).then(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[index].doClose()
|
||||
this.dleChangePage()
|
||||
this.notify('踢出成功', 'success')
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '踢出成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
}).catch(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[index].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadOnline(this.params).then(result => {
|
||||
downloadFile(result, '在线用户列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,26 +3,23 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入关键词搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.key" clearable size="small" placeholder="输入Key搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<div style="display: inline-block;">
|
||||
<!-- 清空缓存 -->
|
||||
<el-button v-permission="['admin','redis:del']" :loading="deleteAllLoading" type="danger" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空</el-button>
|
||||
</div>
|
||||
<!-- 清空缓存 -->
|
||||
<el-button v-permission="['admin','redis:del']" :loading="deleteAllLoading" type="danger" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column :show-overflow-tooltip="true" prop="key" label="KEY"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="key" label="KEY" />
|
||||
<el-table-column prop="value" label="VALUE">
|
||||
<template slot-scope="scope">
|
||||
<div style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
||||
@@ -33,16 +30,17 @@
|
||||
<el-table-column v-if="checkPermission(['admin','redis:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
v-permission="['admin','redis:del']"
|
||||
:ref="scope.$index"
|
||||
v-permission="['admin','redis:del']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.$index, scope.row)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.$index, scope.row)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -54,21 +52,22 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, delAll, downloadRedis } from '@/api/redis'
|
||||
import { downloadFile } from '@/utils/index'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudRedis from '@/api/monitor/redis'
|
||||
export default {
|
||||
name: 'Redis',
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false, permissions: [], deleteAllLoading: false
|
||||
title: '系统缓存',
|
||||
crudMethod: { ...crudRedis },
|
||||
deleteAllLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -77,35 +76,25 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
checkPermission,
|
||||
|
||||
beforeInit() {
|
||||
this.url = 'api/redis'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size }
|
||||
if (value) {
|
||||
this.params['key'] = value
|
||||
} else {
|
||||
if (!this.query.key) {
|
||||
this.params['key'] = '*'
|
||||
}
|
||||
return true
|
||||
},
|
||||
subDelete(index, row) {
|
||||
delMethod(index, row) {
|
||||
this.delLoading = true
|
||||
del(row.key).then(res => {
|
||||
this.crudMethod.del(row.key).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[index].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.notify('删除成功', 'success')
|
||||
}).catch(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[index].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
deleteAll() {
|
||||
@@ -115,22 +104,12 @@ export default {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.deleteAllLoading = true
|
||||
delAll().then(res => {
|
||||
this.crudMethod.delAll().then(res => {
|
||||
this.page = 0
|
||||
this.init()
|
||||
this.deleteAllLoading = false
|
||||
})
|
||||
})
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadRedis(this.params).then(result => {
|
||||
downloadFile(result, '缓存列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="名称" >
|
||||
<el-input v-model="form.name" style="width: 370px;"/>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址" >
|
||||
<el-input v-model="form.ip" style="width: 370px;"/>
|
||||
<el-form-item label="IP地址">
|
||||
<el-input v-model="form.ip" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="访问端口" >
|
||||
<el-input-number v-model="form.port"/>
|
||||
<el-form-item label="访问端口">
|
||||
<el-input-number v-model="form.port" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" >
|
||||
<el-input-number v-model="form.sort"/>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@@ -22,7 +22,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit } from '@/api/server'
|
||||
import { add, edit } from '@/api/monitor/server'
|
||||
export default {
|
||||
props: {
|
||||
isAdd: {
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
|
||||
<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
<el-input v-model="query.value" clearable size="small" placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-select v-model="query.type" clearable size="small" placeholder="类型" class="filter-item" style="width: 130px">
|
||||
<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
@@ -16,7 +16,8 @@
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="add">新增
|
||||
@click="add"
|
||||
>新增
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 刷新 -->
|
||||
@@ -26,29 +27,31 @@
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-refresh"
|
||||
@click="refresh">刷新
|
||||
@click="refresh"
|
||||
>刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd"/>
|
||||
<eForm ref="form" :is-add="isAdd" />
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column label="状态" width="50px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.state === '1' ? 'success' : 'info'"
|
||||
disable-transitions>
|
||||
<i v-if="scope.row.state === '1'" class="el-icon-success"/>
|
||||
<i v-if="scope.row.state === '0'" class="el-icon-error"/>
|
||||
disable-transitions
|
||||
>
|
||||
<i v-if="scope.row.state === '1'" class="el-icon-success" />
|
||||
<i v-if="scope.row.state === '0'" class="el-icon-error" />
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"/>
|
||||
<el-table-column prop="ip" label="IP地址"/>
|
||||
<el-table-column prop="port" label="访问端口" width="80px" align="center"/>
|
||||
<el-table-column :formatter="formatCpuRate" prop="cpuRate" label="CPU使用率" width="100px" align="center"/>
|
||||
<el-table-column prop="cpuCore" label="CPU内核数" width="100px" align="center"/>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="ip" label="IP地址" />
|
||||
<el-table-column prop="port" label="访问端口" width="80px" align="center" />
|
||||
<el-table-column :formatter="formatCpuRate" prop="cpuRate" label="CPU使用率" width="100px" align="center" />
|
||||
<el-table-column prop="cpuCore" label="CPU内核数" width="100px" align="center" />
|
||||
<el-table-column label="物理内存" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-row>
|
||||
@@ -56,7 +59,7 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-progress :percentage="percentNumber(scope.row.memUsed,scope.row.memTotal)" :status="percentStatus(scope.row.memUsed,scope.row.memTotal)" :show-text="false"/>
|
||||
<el-progress :percentage="percentNumber(scope.row.memUsed,scope.row.memTotal)" :status="percentStatus(scope.row.memUsed,scope.row.memTotal)" :show-text="false" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@@ -68,7 +71,7 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-progress :percentage="percentNumber(scope.row.diskUsed,scope.row.diskTotal)" :status="percentStatus(scope.row.diskUsed,scope.row.diskTotal)" :show-text="false"/>
|
||||
<el-progress :percentage="percentNumber(scope.row.diskUsed,scope.row.diskTotal)" :status="percentStatus(scope.row.diskUsed,scope.row.diskTotal)" :show-text="false" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@@ -80,25 +83,26 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-progress :percentage="percentNumber(scope.row.swapUsed,scope.row.swapTotal)" :status="percentStatus(scope.row.swapUsed,scope.row.swapTotal)" :show-text="false"/>
|
||||
<el-progress :percentage="percentNumber(scope.row.swapUsed,scope.row.swapTotal)" :status="percentStatus(scope.row.swapUsed,scope.row.swapTotal)" :show-text="false" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['admin','server:edit','server:del'])" label="操作" width="150px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','server:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-button v-permission="['admin','server:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
|
||||
<el-popover
|
||||
v-permission="['admin','server:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','server:del']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -110,14 +114,15 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del } from '@/api/server'
|
||||
import { del } from '@/api/monitor/server'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
name: 'ServerMonitor',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<elFrame :src="sqlApi"/>
|
||||
<elFrame :src="sqlApi" />
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template >
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template >
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="三级菜单1" type="success"/>
|
||||
<el-alert :closable="false" title="三级菜单1" type="success" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="三级菜单2" type="success"/>
|
||||
<el-alert :closable="false" title="三级菜单2" type="success" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="二级菜单"/>
|
||||
<el-alert :closable="false" title="二级菜单" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增部门' : '编辑部门'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dicts" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.pid !== 0" style="margin-bottom: 0px;" label="上级部门">
|
||||
<treeselect v-model="form.pid" :options="depts" style="width: 370px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit, getDepts } from '@/api/dept'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
dicts: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, depts: [],
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
pid: 1,
|
||||
enabled: 'true'
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.pid !== undefined) {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '上级部门不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = {
|
||||
id: '',
|
||||
name: '',
|
||||
pid: 1,
|
||||
enabled: 'true'
|
||||
}
|
||||
},
|
||||
getDepts() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -3,53 +3,70 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
<el-select v-model="query.enabled" clearable placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<div v-permission="['admin','dept:add']" style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="add">新增</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="showAddFormDialog"
|
||||
>新增</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd" :dicts="dict.dept_status"/>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.pid !== 0" style="margin-bottom: 0px;" label="上级部门" prop="pid">
|
||||
<treeselect v-model="form.pid" :options="depts" style="width: 370px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-expand-all="expand" :data="data" row-key="id" size="small">
|
||||
<el-table-column label="名称" prop="name"/>
|
||||
<el-table v-loading="loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all :data="data" row-key="id" size="small">
|
||||
<el-table-column label="名称" prop="name" />
|
||||
<el-table-column label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
:disabled="scope.row.id == 1"
|
||||
:disabled="scope.row.id === 1"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"/>
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
@@ -59,18 +76,19 @@
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['admin','dept:edit','dept:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','dept:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-button v-permission="['admin','dept:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
v-permission="['admin','dept:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','dept:del']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" :disabled="scope.row.id === 1" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" :disabled="scope.row.id === 1" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -79,24 +97,31 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, edit, downloadDept } from '@/api/dept'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import eForm from './form'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudDept from '@/api/system/dept'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
name: 'Dept',
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
components: { Treeselect },
|
||||
mixins: [crud],
|
||||
// 设置数据字典
|
||||
dicts: ['dept_status'],
|
||||
data() {
|
||||
return {
|
||||
title: '部门',
|
||||
crudMethod: { ...crudDept },
|
||||
depts: [],
|
||||
form: { id: null, name: null, pid: 1, enabled: 'true' },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', display_name: '正常' },
|
||||
{ key: 'false', display_name: '禁用' }
|
||||
],
|
||||
delLoading: false, expand: true
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -105,61 +130,30 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/dept'
|
||||
const sort = 'id,desc'
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
const enabled = query.enabled
|
||||
if (value) { this.params['name'] = value }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
if (enabled !== '' && enabled !== null) { this.params['enabled'] = enabled }
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
// 打开新增弹窗前做的操作
|
||||
beforeShowAddForm() {
|
||||
this.getDepts()
|
||||
},
|
||||
// 打开编辑弹窗前做的操作
|
||||
beforeShowEditForm(data) {
|
||||
this.getDepts()
|
||||
this.form.enabled = data.enabled.toString()
|
||||
},
|
||||
// 提交前先做下验证
|
||||
beforeSubmitMethod() {
|
||||
if (!this.form.pid) {
|
||||
this.$message({
|
||||
message: '上级部门不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
add() {
|
||||
this.isAdd = true
|
||||
const _this = this.$refs.form
|
||||
_this.getDepts()
|
||||
_this.dialog = true
|
||||
},
|
||||
changeExpand() {
|
||||
this.expand = !this.expand
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.getDepts()
|
||||
_this.form = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
pid: data.pid,
|
||||
createTime: data.createTime,
|
||||
enabled: data.enabled.toString()
|
||||
return false
|
||||
}
|
||||
_this.dialog = true
|
||||
return true
|
||||
},
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
@@ -168,12 +162,8 @@ export default {
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
edit(data).then(res => {
|
||||
this.$notify({
|
||||
title: this.dict.label.dept_status[val] + '成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.crudMethod.edit(data).then(res => {
|
||||
this.notify(this.dict.label.dept_status[val] + '成功', 'success')
|
||||
}).catch(err => {
|
||||
data.enabled = !data.enabled
|
||||
console.log(err.response.data.message)
|
||||
@@ -182,14 +172,10 @@ export default {
|
||||
data.enabled = !data.enabled
|
||||
})
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadDept(this.params).then(result => {
|
||||
downloadFile(result, '部门列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
// 获取所有部门
|
||||
getDepts() {
|
||||
this.crudMethod.getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
110
src/views/system/dict/dictDetail.vue
Normal file
110
src/views/system/dict/dictDetail.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="dictName === ''">
|
||||
<div class="my-code">点击字典查看详情</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.label" clearable size="small" placeholder="输入字典标签查询" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="字典标签" prop="label">
|
||||
<el-input v-model="form.label" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典值">
|
||||
<el-input v-model="form.value" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column label="所属字典">
|
||||
{{ dictName }}
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" label="字典标签" />
|
||||
<el-table-column prop="value" label="字典值" />
|
||||
<el-table-column prop="sort" label="排序" />
|
||||
<el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','dict:del']"
|
||||
placement="top"
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page + 1"
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crud from '@/mixins/crud'
|
||||
import crudDictDetail from '@/api/system/dictDetail'
|
||||
export default {
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
title: '字典详情',
|
||||
sort: ['sort,asc', 'id,desc'],
|
||||
crudMethod: { ...crudDictDetail },
|
||||
dictName: '',
|
||||
form: { id: null, label: null, value: null, dict: { id: null }, sort: 999 },
|
||||
rules: {
|
||||
label: [
|
||||
{ required: true, message: '请输入字典标签', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/dictDetail'
|
||||
if (this.dictName) {
|
||||
this.params['dictName'] = this.dictName
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增字典' : '编辑字典'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="字典名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.remark" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit } from '@/api/dict'
|
||||
export default {
|
||||
props: {
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
remark: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = {
|
||||
id: '',
|
||||
name: '',
|
||||
remark: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,12 +1,27 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd"/>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="字典名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.remark" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 字典列表 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>字典列表</span>
|
||||
<!-- 新增 -->
|
||||
<el-button
|
||||
v-permission="['admin','dict:add']"
|
||||
class="filter-item"
|
||||
@@ -14,42 +29,43 @@
|
||||
style="float: right;padding: 4px 10px"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.form.dialog = true;isAdd = true">新增</el-button>
|
||||
@click="showAddFormDialog"
|
||||
>新增</el-button>
|
||||
</div>
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" highlight-current-row style="width: 100%;" @current-change="handleCurrentChange">
|
||||
<el-table-column :show-overflow-tooltip="true" prop="name" label="名称"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="name" label="名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
|
||||
<el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
v-permission="['admin','dict:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','dict:del']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>此操作将删除字典与对应的字典详情，确定要删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -61,9 +77,11 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 字典详情列表 -->
|
||||
<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
@@ -75,9 +93,10 @@
|
||||
style="float: right;padding: 4px 10px"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.dictDetail.$refs.form.dialog = true;$refs.dictDetail.isAdd = true">新增</el-button>
|
||||
@click="$refs.dictDetail.showAddFormDialog"
|
||||
>新增</el-button>
|
||||
</div>
|
||||
<dictDetail ref="dictDetail"/>
|
||||
<dictDetail ref="dictDetail" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -85,23 +104,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, downloadDict } from '@/api/dict'
|
||||
import dictDetail from '../dictDetail/index'
|
||||
import { downloadFile } from '@/utils/index'
|
||||
import eForm from './form'
|
||||
import crud from '@/mixins/crud'
|
||||
import dictDetail from './dictDetail'
|
||||
import crudDict from '@/api/system/dict'
|
||||
export default {
|
||||
name: 'Dict',
|
||||
components: { dictDetail, eForm },
|
||||
mixins: [initData],
|
||||
components: { dictDetail },
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
title: '字典',
|
||||
crudMethod: { ...crudDict },
|
||||
queryTypeOptions: [
|
||||
{ key: 'name', display_name: '字典名称' },
|
||||
{ key: 'remark', display_name: '描述' }
|
||||
]
|
||||
],
|
||||
form: { id: null, name: null, remark: null },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -110,69 +133,26 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
checkPermission,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/dict'
|
||||
const sort = 'id,desc'
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
if (value) { this.params['blurry'] = value }
|
||||
if (this.$refs.dictDetail) {
|
||||
this.$refs.dictDetail.data = []
|
||||
this.$refs.dictDetail.dictName = ''
|
||||
}
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 选中字典后，设置字典详情数据
|
||||
handleCurrentChange(val) {
|
||||
if (val) {
|
||||
this.$refs.dictDetail.dictName = val.name
|
||||
this.$refs.dictDetail.dictId = val.id
|
||||
this.$refs.dictDetail.form.dict.id = val.id
|
||||
this.$refs.dictDetail.init()
|
||||
}
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.form = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
remark: data.remark
|
||||
}
|
||||
_this.dialog = true
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadDict(this.params).then(result => {
|
||||
downloadFile(result, '字典列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增字典详情' : '编辑字典详情'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="字典标签" prop="label">
|
||||
<el-input v-model="form.label" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典值">
|
||||
<el-input v-model="form.value" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit } from '@/api/dictDetail'
|
||||
export default {
|
||||
props: {
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
dictId: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
form: {
|
||||
id: '',
|
||||
label: '',
|
||||
value: '',
|
||||
sort: 999
|
||||
},
|
||||
rules: {
|
||||
label: [
|
||||
{ required: true, message: '请输入字典标签', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.form['dict'] = { id: this.dictId }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = {
|
||||
id: '',
|
||||
label: '',
|
||||
value: '',
|
||||
sort: '999'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -1,123 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="dictName === ''">
|
||||
<div class="my-code">点击字典查看详情</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入字典标签查询" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd" :dict-id="dictId"/>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column label="所属字典">
|
||||
<template slot-scope="scope">
|
||||
{{ dictName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" label="字典标签"/>
|
||||
<el-table-column prop="value" label="字典值"/>
|
||||
<el-table-column prop="sort" label="排序"/>
|
||||
<el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-popover
|
||||
v-permission="['admin','dict:del']"
|
||||
:ref="scope.row.id"
|
||||
placement="top"
|
||||
width="180">
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page + 1"
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del } from '@/api/dictDetail'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false, dictName: '', dictId: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loading = false
|
||||
},
|
||||
methods: {
|
||||
checkPermission,
|
||||
beforeInit() {
|
||||
this.url = 'api/dictDetail'
|
||||
this.params = { page: this.page, size: this.size, dictName: this.dictName }
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
if (value) { this.params['label'] = value }
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.form = {
|
||||
id: data.id,
|
||||
label: data.label,
|
||||
value: data.value,
|
||||
sort: data.sort
|
||||
}
|
||||
_this.dialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-code{
|
||||
padding: 15px;
|
||||
line-height: 20px;
|
||||
border-left: 3px solid #ddd;
|
||||
color: #333;
|
||||
font-family: Courier New;
|
||||
font-size: 12px
|
||||
}
|
||||
</style>
|
||||
@@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增岗位' : '编辑岗位'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dicts" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<treeselect v-model="deptId" :options="depts" style="width: 370px" placeholder="选择部门" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDepts } from '@/api/dept'
|
||||
import { add, edit } from '@/api/job'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
dicts: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, depts: [], deptId: null,
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
sort: 999,
|
||||
enabled: 'true',
|
||||
createTime: '',
|
||||
dept: { id: '' }
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.form.dept.id = this.deptId
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.deptId === null || this.deptId === undefined) {
|
||||
this.$message({
|
||||
message: '所属部门不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
} else {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.deptId = null
|
||||
this.form = {
|
||||
id: '',
|
||||
name: '',
|
||||
sort: 999,
|
||||
enabled: 'true',
|
||||
createTime: '',
|
||||
dept: { id: '' }
|
||||
}
|
||||
},
|
||||
getDepts() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -3,45 +3,65 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入岗位名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
<el-select v-model="query.enabled" clearable placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<div v-permission="['admin','job:add']" style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="add">新增</el-button>
|
||||
</div>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<!-- 新增按钮 -->
|
||||
<el-button
|
||||
v-permission="['admin','job:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="showAddFormDialog"
|
||||
>新增</el-button>
|
||||
<!-- 导出按钮 -->
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd" :dicts="dict.job_status"/>
|
||||
<!--表单渲染-->
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dict.job_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门" prop="dept.id">
|
||||
<treeselect v-model="form.dept.id" :options="depts" style="width: 370px" placeholder="选择部门" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column prop="name" label="名称"/>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column label="所属部门">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ scope.row.deptSuperiorName ? scope.row.deptSuperiorName + ' / ' : '' }}{{ scope.row.dept.name }}</div>
|
||||
@@ -58,7 +78,8 @@
|
||||
v-model="scope.row.enabled"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"/>
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
@@ -66,20 +87,22 @@
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 编辑与删除 -->
|
||||
<el-table-column v-if="checkPermission(['admin','job:edit','job:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','job:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-button v-permission="['admin','job:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
v-permission="['admin','job:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','job:del']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -91,29 +114,44 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, edit, downloadJob } from '@/api/job'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import eForm from './form'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudJob from '@/api/system/job'
|
||||
import { getDepts } from '@/api/system/dept'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
name: 'Job',
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
// 设置数据字典
|
||||
components: { Treeselect },
|
||||
mixins: [crud],
|
||||
// 数据字典
|
||||
dicts: ['job_status'],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
crudMethod: {
|
||||
...crudJob
|
||||
},
|
||||
sort: ['sort,asc', 'id,desc'],
|
||||
title: '岗位',
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', display_name: '正常' },
|
||||
{ key: 'false', display_name: '禁用' }
|
||||
]
|
||||
],
|
||||
form: { id: null, name: null, sort: 999, enabled: 'true', dept: { id: null }},
|
||||
depts: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -122,60 +160,27 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/job'
|
||||
const sort = 'sort,asc'
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
const enabled = query.enabled
|
||||
if (value) { this.params['name'] = value }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
if (enabled !== '' && enabled !== null) { this.params['enabled'] = enabled }
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
// 打开新增弹窗前做的操作
|
||||
beforeShowAddForm() {
|
||||
this.getDepts()
|
||||
},
|
||||
add() {
|
||||
this.isAdd = true
|
||||
this.$refs.form.getDepts()
|
||||
this.$refs.form.dialog = true
|
||||
// 打开编辑弹窗前做的操作
|
||||
beforeShowEditForm(data) {
|
||||
this.getDepts()
|
||||
this.form.enabled = data.enabled.toString()
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.getDepts()
|
||||
_this.form = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
sort: data.sort,
|
||||
enabled: data.enabled.toString(),
|
||||
createTime: data.createTime,
|
||||
dept: { id: data.dept.id }
|
||||
// 提交前的验证
|
||||
beforeSubmitMethod() {
|
||||
if (!this.form.dept.id) {
|
||||
this.notify('所属部门不能为空', 'warning')
|
||||
return false
|
||||
}
|
||||
_this.deptId = data.dept.id
|
||||
_this.dialog = true
|
||||
return true
|
||||
},
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
@@ -184,12 +189,8 @@ export default {
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
edit(data).then(res => {
|
||||
this.$notify({
|
||||
title: this.dict.label.job_status[val] + '成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.crudMethod.edit(data).then(() => {
|
||||
this.notify(this.dict.label.job_status[val] + '成功', 'success')
|
||||
}).catch(err => {
|
||||
data.enabled = !data.enabled
|
||||
console.log(err.response.data.message)
|
||||
@@ -198,20 +199,18 @@ export default {
|
||||
data.enabled = !data.enabled
|
||||
})
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadJob(this.params).then(result => {
|
||||
downloadFile(result, '岗位列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
// 获取部门数据
|
||||
getDepts() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,169 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增菜单' : '编辑菜单'" append-to-body width="580px">
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="form.type" size="mini" style="width: 178px">
|
||||
<el-radio-button label="0">目录</el-radio-button>
|
||||
<el-radio-button label="1">菜单</el-radio-button>
|
||||
<el-radio-button label="2">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单图标">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="450"
|
||||
trigger="click"
|
||||
@show="$refs['iconSelect'].reset()">
|
||||
<IconSelect ref="iconSelect" @selected="selected" />
|
||||
<el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
|
||||
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
|
||||
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="外链菜单">
|
||||
<el-radio-group v-model="form.iframe" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() === '1'" label="菜单缓存">
|
||||
<el-radio-group v-model="form.cache" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单可见">
|
||||
<el-radio-group v-model="form.hidden" size="mini">
|
||||
<el-radio-button label="false">是</el-radio-button>
|
||||
<el-radio-button label="true">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单标题" prop="name">
|
||||
<el-input v-model="form.name" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() === '2'" label="按钮名称">
|
||||
<el-input v-model="form.name" placeholder="按钮名称" style="width: 178px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '0'" label="权限标识">
|
||||
<el-input :disabled="form.iframe === 'true'" v-model="form.permission" placeholder="权限标识" style="width: 178px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
|
||||
<el-input v-model="form.path" placeholder="路由地址" style="width: 178px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序">
|
||||
<el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 178px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.iframe === 'false' && form.type.toString() === '1'" label="组件名称">
|
||||
<el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.iframe === 'false' && form.type.toString() === '1'" label="组件路径">
|
||||
<el-input v-model="form.component" style="width: 178px;" placeholder="组件路径"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级类目">
|
||||
<treeselect v-model="form.pid" :options="menus" style="width: 450px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, edit, getMenusTree } from '@/api/menu'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect, IconSelect },
|
||||
props: {
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, menus: [],
|
||||
form: { name: '', sort: 999, path: '', component: '', componentName: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false, type: 0, permission: '' },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: '请输入地址', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { name: '', sort: 999, path: '', component: '', componentName: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false, type: 0, permission: '' }
|
||||
},
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
},
|
||||
getMenus() {
|
||||
getMenusTree().then(res => {
|
||||
this.menus = []
|
||||
const menu = { id: 0, label: '顶级类目', children: [] }
|
||||
menu.children = res
|
||||
this.menus.push(menu)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -3,42 +3,112 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<div v-permission="['admin','menu:add']" style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="add">新增</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="showAddFormDialog"
|
||||
>新增</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd"/>
|
||||
<!--表单渲染-->
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="580px">
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-radio-group v-model="form.type" size="mini" style="width: 178px">
|
||||
<el-radio-button label="0">目录</el-radio-button>
|
||||
<el-radio-button label="1">菜单</el-radio-button>
|
||||
<el-radio-button label="2">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="450"
|
||||
trigger="click"
|
||||
@show="$refs['iconSelect'].reset()"
|
||||
>
|
||||
<IconSelect ref="iconSelect" @selected="selected" />
|
||||
<el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
|
||||
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
|
||||
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iframe">
|
||||
<el-radio-group v-model="form.iframe" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
|
||||
<el-radio-group v-model="form.cache" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
|
||||
<el-radio-group v-model="form.hidden" size="mini">
|
||||
<el-radio-button label="false">是</el-radio-button>
|
||||
<el-radio-button label="true">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单标题" prop="name">
|
||||
<el-input v-model="form.name" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() === '2'" label="按钮名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="按钮名称" style="width: 178px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
|
||||
<el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 178px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
|
||||
<el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="sort">
|
||||
<el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="!form.iframe && form.type.toString() === '1'" label="组件名称" prop="componentName">
|
||||
<el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="!form.iframe && form.type.toString() === '1'" label="组件路径" prop="component">
|
||||
<el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上级类目" prop="pid">
|
||||
<treeselect v-model="form.pid" :options="menus" style="width: 450px;" placeholder="选择上级类目" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-expand-all="expand" row-key="id" size="small">
|
||||
<el-table-column :show-overflow-tooltip="true" label="菜单名称" width="125px" prop="name"/>
|
||||
<el-table v-loading="loading" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" size="small">
|
||||
<el-table-column :show-overflow-tooltip="true" label="菜单名称" width="125px" prop="name" />
|
||||
<el-table-column prop="icon" label="图标" align="center" width="60px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
@@ -49,10 +119,10 @@
|
||||
{{ scope.row.sort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="path" label="路由地址"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="path" label="路由地址" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
|
||||
<!--<el-table-column :show-overflow-tooltip="true" prop="componentName" label="组件名称"/>-->
|
||||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
|
||||
<el-table-column prop="iframe" label="外链" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.iframe">是</span>
|
||||
@@ -78,18 +148,19 @@
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['admin','menu:edit','menu:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','menu:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-button v-permission="['admin','menu:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
v-permission="['admin','menu:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','menu:del']"
|
||||
placement="top"
|
||||
width="200">
|
||||
width="200"
|
||||
>
|
||||
<p>确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -98,18 +169,29 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, downloadMenu } from '@/api/menu'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import eForm from './form'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudMenu from '@/api/system/menu'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
name: 'Menu',
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
components: { Treeselect, IconSelect },
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false, expand: false
|
||||
title: '菜单',
|
||||
crudMethod: { ...crudMenu },
|
||||
menus: [],
|
||||
form: { name: null, sort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: '请输入地址', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -118,68 +200,38 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/menus'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['blurry'] = value }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
// 打开新增弹窗前做的操作
|
||||
beforeShowAddForm() {
|
||||
this.getMenus()
|
||||
},
|
||||
add() {
|
||||
this.isAdd = true
|
||||
this.$refs.form.getMenus()
|
||||
this.$refs.form.dialog = true
|
||||
// 打开新增弹窗前做的操作
|
||||
beforeShowEditForm() {
|
||||
this.getMenus()
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.getMenus()
|
||||
_this.form = { id: data.id, component: data.component, componentName: data.componentName, name: data.name, sort: data.sort, pid: data.pid, path: data.path, iframe: data.iframe.toString(), roles: [], icon: data.icon, cache: data.cache, hidden: data.hidden, type: data.type, permission: data.permission }
|
||||
_this.dialog = true
|
||||
// 选中图标
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
},
|
||||
changExpand() {
|
||||
this.expand = !this.expand
|
||||
this.init()
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadMenu(this.params).then(result => {
|
||||
downloadFile(result, '菜单列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
// 获取所有菜单
|
||||
getMenus() {
|
||||
this.crudMethod.getMenusTree().then(res => {
|
||||
this.menus = []
|
||||
const menu = { id: 0, label: '顶级类目', children: [] }
|
||||
menu.children = res
|
||||
this.menus.push(menu)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增角色' : '编辑角色'" append-to-body width="520px">
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 145px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色权限" prop="permission">
|
||||
<el-input v-model="form.permission" style="width: 145px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据范围">
|
||||
<el-select v-model="form.dataScope" style="width: 145px" placeholder="请选择数据范围" @change="changeScope">
|
||||
<el-option
|
||||
v-for="item in dateScopes"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色级别" prop="sort">
|
||||
<el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.dataScope === '自定义'" label="数据权限">
|
||||
<treeselect v-model="deptIds" :options="depts" multiple style="width: 380px" placeholder="请选择" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息">
|
||||
<el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDepts } from '@/api/dept'
|
||||
import { add, edit } from '@/api/role'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dateScopes: ['全部', '本级', '自定义'],
|
||||
loading: false, dialog: false, depts: [], deptIds: [],
|
||||
form: { name: '', depts: [], remark: '', dataScope: '本级', level: 3, permission: '' },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
permission: [
|
||||
{ required: true, message: '请输入权限', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
if (this.form.dataScope === '自定义' && this.deptIds.length === 0) {
|
||||
this.$message({
|
||||
message: '自定义数据权限不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
} else {
|
||||
this.form.depts = []
|
||||
if (this.form.dataScope === '自定义') {
|
||||
for (let i = 0; i < this.deptIds.length; i++) {
|
||||
this.form.depts.push({
|
||||
id: this.deptIds[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { name: '', depts: [], remark: '', dataScope: '本级', level: 3, permission: '' }
|
||||
},
|
||||
getDepts() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
},
|
||||
changeScope() {
|
||||
if (this.form.dataScope === '自定义') {
|
||||
this.getDepts()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +1,73 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd"/>
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<div v-permission="['admin','roles:add']" style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="add">新增</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="showAddFormDialog"
|
||||
>新增</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!-- 表单渲染 -->
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="520px">
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 145px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色权限" prop="permission">
|
||||
<el-input v-model="form.permission" style="width: 145px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据范围" prop="dataScope">
|
||||
<el-select v-model="form.dataScope" style="width: 145px" placeholder="请选择数据范围" @change="changeScope">
|
||||
<el-option
|
||||
v-for="item in dateScopes"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色级别" prop="level">
|
||||
<el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
|
||||
<treeselect v-model="form.depts" :options="depts" multiple style="width: 380px" placeholder="请选择" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述信息" prop="remark">
|
||||
<el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-row :gutter="15">
|
||||
<!--角色管理-->
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
|
||||
@@ -44,30 +76,31 @@
|
||||
<span class="role-span">角色列表</span>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="data" highlight-current-row size="small" style="width: 100%;" @current-change="handleCurrentChange">
|
||||
<el-table-column prop="name" label="名称"/>
|
||||
<el-table-column prop="dataScope" label="数据权限"/>
|
||||
<el-table-column prop="permission" label="角色权限"/>
|
||||
<el-table-column prop="level" label="角色级别"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述"/>
|
||||
<el-table-column :show-overflow-tooltip="true" width="130px" prop="createTime" label="创建日期">
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="dataScope" label="数据权限" />
|
||||
<el-table-column prop="permission" label="角色权限" />
|
||||
<el-table-column prop="level" label="角色级别" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
|
||||
<el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['admin','roles:edit','roles:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','roles:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-button v-permission="['admin','roles:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
v-permission="['admin','roles:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','roles:del']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -79,10 +112,11 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 授权 -->
|
||||
<!-- 菜单授权 -->
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
@@ -97,7 +131,8 @@
|
||||
size="mini"
|
||||
style="float: right; padding: 6px 9px"
|
||||
type="primary"
|
||||
@click="saveMenu">保存</el-button>
|
||||
@click="saveMenu"
|
||||
>保存</el-button>
|
||||
</div>
|
||||
<el-tree
|
||||
ref="menu"
|
||||
@@ -107,7 +142,8 @@
|
||||
check-strictly
|
||||
accordion
|
||||
show-checkbox
|
||||
node-key="id"/>
|
||||
node-key="id"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -115,25 +151,36 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del } from '@/api/role'
|
||||
import { getMenusTree } from '@/api/menu'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import eForm from './form'
|
||||
import { editMenu, get, downloadRole } from '@/api/role'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudRoles from '@/api/system/role'
|
||||
import { getDepts } from '@/api/system/dept'
|
||||
import { getMenusTree } from '@/api/system/menu'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
name: 'Role',
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
components: { Treeselect },
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
title: '角色',
|
||||
dateScopes: ['全部', '本级', '自定义'],
|
||||
crudMethod: { ...crudRoles },
|
||||
currentId: 0, menuLoading: false, showButton: false,
|
||||
delLoading: false, menus: [], menuIds: []
|
||||
menus: [], menuIds: [], depts: [],
|
||||
form: { name: null, depts: [], remark: null, dataScope: null, level: 3, permission: null },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
permission: [
|
||||
{ required: true, message: '请输入权限', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -143,47 +190,51 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.showButton = false
|
||||
this.url = 'api/roles'
|
||||
const sort = 'level,asc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['blurry'] = value }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
this.sort = 'level,asc'
|
||||
// 清空菜单的选中
|
||||
this.$refs.menu.setCheckedKeys([])
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
// 打开编辑弹窗前做的操作
|
||||
beforeShowEditForm(data) {
|
||||
if (data.dataScope === '自定义') {
|
||||
this.getDepts()
|
||||
}
|
||||
const depts = []
|
||||
data.depts.forEach(function(dept, index) {
|
||||
depts.push(dept.id)
|
||||
})
|
||||
this.form.depts = depts
|
||||
},
|
||||
// 提交前做的操作
|
||||
beforeSubmitMethod() {
|
||||
if (this.form.dataScope === '自定义' && this.form.depts.length === 0) {
|
||||
this.$message({
|
||||
message: '自定义数据权限不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
} else {
|
||||
const depts = []
|
||||
this.form.depts.forEach(function(data, index) {
|
||||
const dept = { id: data }
|
||||
depts.push(dept)
|
||||
})
|
||||
this.form.depts = depts
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 获取所有菜单
|
||||
getMenus() {
|
||||
getMenusTree().then(res => {
|
||||
this.menus = res
|
||||
})
|
||||
},
|
||||
// 触发单选
|
||||
handleCurrentChange(val) {
|
||||
if (val) {
|
||||
const _this = this
|
||||
@@ -201,6 +252,7 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
// 保存菜单
|
||||
saveMenu() {
|
||||
this.menuLoading = true
|
||||
const role = { id: this.currentId, menus: [] }
|
||||
@@ -214,12 +266,8 @@ export default {
|
||||
const menu = { id: data }
|
||||
role.menus.push(menu)
|
||||
})
|
||||
editMenu(role).then(res => {
|
||||
this.$notify({
|
||||
title: '保存成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.crudMethod.editMenu(role).then(res => {
|
||||
this.notify('保存成功', 'success')
|
||||
this.menuLoading = false
|
||||
this.update()
|
||||
}).catch(err => {
|
||||
@@ -227,9 +275,10 @@ export default {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 改变数据
|
||||
update() {
|
||||
// 无刷新更新 表格数据
|
||||
get(this.currentId).then(res => {
|
||||
this.crudMethod.get(this.currentId).then(res => {
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
if (res.id === this.data[i].id) {
|
||||
this.data[i] = res
|
||||
@@ -238,32 +287,17 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
add() {
|
||||
this.isAdd = true
|
||||
this.$refs.form.dialog = true
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.deptIds = []
|
||||
_this.form = { id: data.id, name: data.name, remark: data.remark, depts: data.depts, dataScope: data.dataScope, level: data.level, permission: data.permission }
|
||||
if (_this.form.dataScope === '自定义') {
|
||||
_this.getDepts()
|
||||
}
|
||||
for (let i = 0; i < _this.form.depts.length; i++) {
|
||||
_this.deptIds[i] = _this.form.depts[i].id
|
||||
}
|
||||
_this.dialog = true
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadRole(this.params).then(result => {
|
||||
downloadFile(result, '角色列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
// 获取部门数据
|
||||
getDepts() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
},
|
||||
// 如果数据权限为自定义则获取部门数据
|
||||
changeScope() {
|
||||
if (this.form.dataScope === '自定义') {
|
||||
this.getDepts()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -276,8 +310,8 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .el-tree-node__label{
|
||||
margin-left: 5px;
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,91 +3,90 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<div v-permission="['admin','timing:add']" style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="dialog = true;isAdd = true">新增</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="showAddFormDialog"
|
||||
>新增</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
<!-- 任务日志 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="info"
|
||||
icon="el-icon-tickets"
|
||||
@click="doLog">日志</el-button>
|
||||
<Log ref="log"/>
|
||||
</div>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="info"
|
||||
icon="el-icon-tickets"
|
||||
@click="doLog"
|
||||
>日志</el-button>
|
||||
<Log ref="log" />
|
||||
</div>
|
||||
<!--Form表单-->
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增任务' : '编辑任务'" append-to-body width="600px">
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="600px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
|
||||
<el-form-item label="任务名称" prop="jobName">
|
||||
<el-input v-model="form.jobName" style="width: 460px;"/>
|
||||
<el-input v-model="form.jobName" style="width: 460px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Bean名称" prop="beanName">
|
||||
<el-input v-model="form.beanName" style="width: 460px;"/>
|
||||
<el-input v-model="form.beanName" style="width: 460px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="执行方法" prop="methodName">
|
||||
<el-input v-model="form.methodName" style="width: 460px;"/>
|
||||
<el-input v-model="form.methodName" style="width: 460px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数内容">
|
||||
<el-input v-model="form.params" style="width: 460px;"/>
|
||||
<el-input v-model="form.params" style="width: 460px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Cron表达式" prop="cronExpression">
|
||||
<el-input v-model="form.cronExpression" style="width: 460px;"/>
|
||||
<el-input v-model="form.cronExpression" style="width: 460px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态">
|
||||
<el-radio v-model="form.isPause" label="false">启用</el-radio>
|
||||
<el-radio v-model="form.isPause" label="true" >暂停</el-radio>
|
||||
<el-radio v-model="form.isPause" :label="false">启用</el-radio>
|
||||
<el-radio v-model="form.isPause" :label="true">暂停</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述">
|
||||
<el-input v-model="form.remark" style="width: 460px;" rows="2" type="textarea"/>
|
||||
<el-input v-model="form.remark" style="width: 460px;" rows="2" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column :show-overflow-tooltip="true" prop="jobName" width="100px" label="任务名称"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="methodName" width="90px" label="执行方法"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="params" width="80px" label="参数"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" width="100px" label="cron表达式"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="jobName" width="100px" label="任务名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="methodName" width="90px" label="执行方法" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="params" width="80px" label="参数" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" width="100px" label="cron表达式" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="isPause" width="90px" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.isPause ? 'warning' : 'success'">{{ scope.row.isPause ? '已暂停' : '运行中' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
@@ -95,20 +94,21 @@
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['admin','timing:edit','timing:del'])" label="操作" width="180px" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','timing:edit']" size="mini" style="margin-right: 3px;" type="text" @click="edit(scope.row)">编辑</el-button>
|
||||
<el-button v-permission="['admin','timing:edit']" size="mini" style="margin-right: 3px;" type="text" @click="showEditFormDialog(scope.row)">编辑</el-button>
|
||||
<el-button v-permission="['admin','timing:edit']" style="margin-left: -2px" type="text" size="mini" @click="execute(scope.row.id)">执行</el-button>
|
||||
<el-button v-permission="['admin',,'timing:edit']" style="margin-left: 3px" type="text" size="mini" @click="updateStatus(scope.row.id,scope.row.isPause ? '恢复' : '暂停')">
|
||||
{{ scope.row.isPause ? '恢复' : '暂停' }}
|
||||
</el-button>
|
||||
<el-popover
|
||||
v-permission="['admin','timing:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','timing:del']"
|
||||
placement="top"
|
||||
width="200">
|
||||
width="200"
|
||||
>
|
||||
<p>确定停止并删除该任务吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="text" size="mini">删除</el-button>
|
||||
</el-popover>
|
||||
@@ -122,25 +122,24 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, updateIsPause, execution, add, edit, downloadJobs } from '@/api/timing'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudJob from '@/api/system/timing'
|
||||
import Log from './log'
|
||||
export default {
|
||||
name: 'Timing',
|
||||
components: { Log },
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false, isAdd: false,
|
||||
loading: false, dialog: false,
|
||||
form: { jobName: '', beanName: '', methodName: '', params: '', cronExpression: '', isPause: 'false', remark: '' }, permissionIds: [],
|
||||
title: '定时任务',
|
||||
crudMethod: { ...crudJob },
|
||||
form: { jobName: null, beanName: null, methodName: null, params: null, cronExpression: null, isPause: false, remark: null },
|
||||
rules: {
|
||||
jobName: [
|
||||
{ required: true, message: '请输入任务名称', trigger: 'blur' }
|
||||
@@ -163,23 +162,14 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/jobs'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['jobName'] = value }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 执行
|
||||
execute(id) {
|
||||
execution(id).then(res => {
|
||||
this.crudMethod.execution(id).then(res => {
|
||||
this.$notify({
|
||||
title: '执行成功',
|
||||
type: 'success',
|
||||
@@ -189,8 +179,9 @@ export default {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 改变状态
|
||||
updateStatus(id, status) {
|
||||
updateIsPause(id).then(res => {
|
||||
this.crudMethod.updateIsPause(id).then(res => {
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: status + '成功',
|
||||
@@ -201,96 +192,10 @@ export default {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
toQuery() {
|
||||
this.page = 0
|
||||
this.init()
|
||||
},
|
||||
// 显示日志
|
||||
doLog() {
|
||||
this.$refs.log.dialog = true
|
||||
this.$refs.log.doInit()
|
||||
},
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { jobName: '', beanName: '', methodName: '', params: '', cronExpression: '', isPause: 'false', remark: '' }
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
this.form = { id: data.id, jobName: data.jobName, beanName: data.beanName, methodName: data.methodName, params: data.params, cronExpression: data.cronExpression, isPause: data.isPause.toString(), remark: data.remark }
|
||||
this.dialog = true
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadJobs(this.params).then(result => {
|
||||
downloadFile(result, '任务列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,18 +2,20 @@
|
||||
<el-dialog :visible.sync="dialog" append-to-body title="执行日志" width="88%">
|
||||
<!-- 搜索 -->
|
||||
<div class="head-container">
|
||||
<el-input v-model="query.value" clearable placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
<el-select v-model="query.isSuccess" placeholder="日志状态" clearable class="filter-item" style="width: 110px" @change="toQuery">
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-select v-model="query.isSuccess" placeholder="日志状态" clearable size="small" class="filter-item" style="width: 110px" @change="toQuery">
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 导出 -->
|
||||
@@ -24,22 +26,23 @@
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;margin-top: -10px;">
|
||||
<el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="params" width="120px" label="参数"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="params" width="120px" label="参数" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
|
||||
<el-table-column prop="createTime" label="异常详情" width="110px">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-show="scope.row.exceptionDetail" size="mini" type="text" @click="info(scope.row.exceptionDetail)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" prop="time" width="100px" label="耗时(毫秒)"/>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" prop="time" width="100px" label="耗时(毫秒)" />
|
||||
<el-table-column align="center" prop="isSuccess" width="80px" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.isSuccess ? 'success' : 'danger'">{{ scope.row.isSuccess ? '成功' : '失败' }}</el-tag>
|
||||
@@ -52,9 +55,9 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
|
||||
<span>
|
||||
<pre>
|
||||
{{ errorInfo }}
|
||||
</span>
|
||||
</pre>
|
||||
</el-dialog>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
@@ -64,21 +67,19 @@
|
||||
style="margin-top:8px;"
|
||||
layout="total, prev, pager, next"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { downloadLogs } from '@/api/timing'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import crud from '@/mixins/crud'
|
||||
export default {
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
title: '任务日志',
|
||||
errorInfo: '', errorDialog: false,
|
||||
dialog: false, delLoading: false,
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', display_name: '成功' },
|
||||
{ key: 'false', display_name: '失败' }
|
||||
@@ -86,46 +87,21 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
doInit() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
toQuery() {
|
||||
this.page = 0
|
||||
this.doInit()
|
||||
},
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/jobs/logs'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
const isSuccess = query.isSuccess
|
||||
this.size = 6
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['jobName'] = value }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
if (isSuccess !== '' && isSuccess !== null) { this.params['isSuccess'] = isSuccess }
|
||||
return true
|
||||
},
|
||||
// 异常详情
|
||||
info(errorInfo) {
|
||||
this.errorInfo = errorInfo
|
||||
this.errorDialog = true
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadLogs(this.params).then(result => {
|
||||
downloadFile(result, '任务日志列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,8 @@
|
||||
:on-error="handleError"
|
||||
:headers="headers"
|
||||
:action="updateAvatarApi"
|
||||
class="avatar-uploader">
|
||||
class="avatar-uploader"
|
||||
>
|
||||
<img :src="user.avatar ? baseApi + '/avatar/' + user.avatar : Avatar" title="点击上传头像" class="avatar">
|
||||
</el-upload>
|
||||
</div>
|
||||
@@ -35,18 +36,19 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 用户日志 -->
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>操作日志</span>
|
||||
<div style="display:inline-block;float: right;cursor: pointer" @click="refresh"><i :class="ico"/></div>
|
||||
<div style="display:inline-block;float: right;cursor: pointer" @click="refresh"><i :class="ico" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column prop="description" label="行为"/>
|
||||
<el-table-column prop="requestIp" label="IP"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源"/>
|
||||
<el-table-column prop="browser" label="浏览器"/>
|
||||
<el-table-column prop="description" label="行为" />
|
||||
<el-table-column prop="requestIp" label="IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="time" label="请求耗时" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
|
||||
@@ -67,13 +69,14 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<updateEmail ref="email" :email="user.email"/>
|
||||
<updatePass ref="pass"/>
|
||||
<updateEmail ref="email" :email="user.email" />
|
||||
<updatePass ref="pass" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -86,7 +89,7 @@ import { getToken } from '@/utils/auth'
|
||||
import store from '@/store'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import initData from '@/mixins/initData'
|
||||
import Avatar from '@/assets/avatar/avatar.png'
|
||||
import Avatar from '@/assets/images/avatar.png'
|
||||
export default {
|
||||
name: 'Center',
|
||||
components: { updatePass, updateEmail },
|
||||
@@ -141,6 +144,7 @@ export default {
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
// 刷新日志
|
||||
refresh() {
|
||||
this.ico = 'el-icon-loading'
|
||||
this.init()
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="title" append-to-body width="475px" @close="cancel">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
|
||||
<el-form-item label="新邮箱" prop="email">
|
||||
<el-input v-model="form.email" auto-complete="on" style="width: 200px;"/>
|
||||
<el-input v-model="form.email" auto-complete="on" style="width: 200px;" />
|
||||
<el-button :loading="codeLoading" :disabled="isDisabled" size="small" @click="sendCode">{{ buttonName }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input v-model="form.code" style="width: 320px;"/>
|
||||
<el-input v-model="form.code" style="width: 320px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前密码" prop="pass">
|
||||
<el-input v-model="form.pass" type="password" style="width: 320px;"/>
|
||||
<el-input v-model="form.pass" type="password" style="width: 320px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@@ -23,9 +23,9 @@
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import { validatEmail } from '@/utils/validate'
|
||||
import { updateEmail } from '@/api/user'
|
||||
import { resetEmail } from '@/api/code'
|
||||
import { validEmail } from '@/utils/validate'
|
||||
import { updateEmail } from '@/api/system/user'
|
||||
import { resetEmail } from '@/api/system/code'
|
||||
export default {
|
||||
props: {
|
||||
email: {
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
callback(new Error('新邮箱不能为空'))
|
||||
} else if (value === this.email) {
|
||||
callback(new Error('新邮箱不能与旧邮箱相同'))
|
||||
} else if (validatEmail(value)) {
|
||||
} else if (validEmail(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('邮箱格式错误'))
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="title" append-to-body width="500px" @close="cancel">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
|
||||
<el-form-item label="旧密码" prop="oldPass">
|
||||
<el-input v-model="form.oldPass" type="password" auto-complete="on" style="width: 370px;"/>
|
||||
<el-input v-model="form.oldPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPass">
|
||||
<el-input v-model="form.newPass" type="password" auto-complete="on" style="width: 370px;"/>
|
||||
<el-input v-model="form.newPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPass">
|
||||
<el-input v-model="form.confirmPass" type="password" auto-complete="on" style="width: 370px;"/>
|
||||
<el-input v-model="form.confirmPass" type="password" auto-complete="on" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import { updatePass } from '@/api/user'
|
||||
import { updatePass } from '@/api/system/user'
|
||||
export default {
|
||||
data() {
|
||||
const confirmPass = (rule, value, callback) => {
|
||||
|
||||
@@ -1,216 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增用户' : '编辑用户'" append-to-body width="570px">
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dicts" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model.number="form.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门">
|
||||
<treeselect v-model="deptId" :options="depts" style="width: 178px" placeholder="选择部门" @select="selectFun" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位">
|
||||
<el-select v-model="jobId" style="width: 178px" placeholder="请先选择部门">
|
||||
<el-option
|
||||
v-for="(item, index) in jobs"
|
||||
:key="item.name + index"
|
||||
:label="item.name"
|
||||
:value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0px;" label="角色">
|
||||
<el-select v-model="roleIds" style="width: 450px;" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(item, index) in roles"
|
||||
:disabled="level !== 1 && item.level <= level"
|
||||
:key="item.name + index"
|
||||
:label="item.name"
|
||||
:value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { add, edit } from '@/api/user'
|
||||
import { getDepts } from '@/api/dept'
|
||||
import { getAll, getLevel } from '@/api/role'
|
||||
import { getAllJob } from '@/api/job'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
dicts: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const validPhone = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入电话号码'))
|
||||
} else if (!this.isvalidPhone(value)) {
|
||||
callback(new Error('请输入正确的11位手机号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
dialog: false, loading: false, form: { username: '', email: '', enabled: 'false', roles: [], job: { id: '' }, dept: { id: '' }, phone: null },
|
||||
roleIds: [], roles: [], depts: [], deptId: null, jobId: null, jobs: [], level: 3,
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, trigger: 'blur', validator: validPhone }
|
||||
],
|
||||
enabled: [
|
||||
{ required: true, message: '状态不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.form.dept.id = this.deptId
|
||||
this.form.job.id = this.jobId
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.deptId === null || this.deptId === undefined) {
|
||||
this.$message({
|
||||
message: '部门不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
} else if (this.jobId === null) {
|
||||
this.$message({
|
||||
message: '岗位不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
} else if (this.roleIds.length === 0) {
|
||||
this.$message({
|
||||
message: '角色不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
} else {
|
||||
this.loading = true
|
||||
this.form.roles = []
|
||||
const _this = this
|
||||
this.roleIds.forEach(function(data, index) {
|
||||
const role = { id: data }
|
||||
_this.form.roles.push(role)
|
||||
})
|
||||
if (this.isAdd) {
|
||||
this.doAdd()
|
||||
} else this.doEdit()
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
doAdd() {
|
||||
add(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '添加成功',
|
||||
message: '默认密码：123456',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.deptId = null
|
||||
this.jobId = null
|
||||
this.roleIds = []
|
||||
this.form = { username: '', email: '', enabled: 'false', roles: [], job: { id: '' }, dept: { id: '' }, phone: null }
|
||||
},
|
||||
getRoles() {
|
||||
getAll().then(res => {
|
||||
this.roles = res
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
getJobs(id) {
|
||||
getAllJob(id).then(res => {
|
||||
this.jobs = res.content
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
getDepts() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
},
|
||||
isvalidPhone(str) {
|
||||
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
|
||||
return reg.test(str)
|
||||
},
|
||||
selectFun(node, instanceId) {
|
||||
this.getJobs(node.id)
|
||||
},
|
||||
getRoleLevel() {
|
||||
getLevel().then(res => {
|
||||
this.level = res.level
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,59 +1,102 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--form 组件-->
|
||||
<eForm ref="form" :is-add="isAdd" :dicts="dict.user_status"/>
|
||||
<el-row :gutter="20">
|
||||
<!--部门数据-->
|
||||
<!--侧边部门数据-->
|
||||
<el-col :xs="9" :sm="6" :md="4" :lg="4" :xl="4">
|
||||
<div class="head-container">
|
||||
<el-input v-model="deptName" clearable placeholder="输入部门名称搜索" prefix-icon="el-icon-search" style="width: 100%;" class="filter-item" @input="getDeptDatas"/>
|
||||
<el-input v-model="deptName" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" class="filter-item" @input="getDeptDatas" />
|
||||
</div>
|
||||
<el-tree :data="depts" :props="defaultProps" :expand-on-click-node="false" default-expand-all @node-click="handleNodeClick"/>
|
||||
<el-tree :data="deptDatas" :props="defaultProps" :expand-on-click-node="false" default-expand-all @node-click="handleNodeClick" />
|
||||
</el-col>
|
||||
<!--用户数据-->
|
||||
<el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.blurry" clearable placeholder="输入名称或者邮箱搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者邮箱搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
<el-select v-model="query.enabled" clearable placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
|
||||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<div v-permission="['admin','user:add']" style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="add">新增</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="showAddFormDialog"
|
||||
>新增</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!--表单渲染-->
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="570px">
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dict.user_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model.number="form.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门" prop="dept.id">
|
||||
<treeselect v-model="form.dept.id" :options="depts" style="width: 178px" placeholder="选择部门" @select="selectFun" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位" prop="job.id">
|
||||
<el-select v-model="form.job.id" style="width: 178px" placeholder="请先选择部门">
|
||||
<el-option
|
||||
v-for="(item, index) in jobs"
|
||||
:key="item.name + index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0px;" label="角色" prop="roles">
|
||||
<el-select v-model="form.roles" style="width: 450px;" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in roles"
|
||||
:key="item.name"
|
||||
:disabled="level !== 1 && item.level <= level"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column prop="username" label="用户名"/>
|
||||
<el-table-column prop="phone" label="电话"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱"/>
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="phone" label="电话" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" />
|
||||
<el-table-column label="部门 / 岗位">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ scope.row.dept.name }} / {{ scope.row.job.name }}</div>
|
||||
@@ -65,7 +108,8 @@
|
||||
v-model="scope.row.enabled"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"/>
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
|
||||
@@ -75,18 +119,19 @@
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['admin','user:edit','user:del'])" label="操作" width="125" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','user:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-button v-permission="['admin','user:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
v-permission="['admin','user:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','user:del']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -98,42 +143,73 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, downloadUser, edit } from '@/api/user'
|
||||
import { getDepts } from '@/api/dept'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import eForm from './form'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudUser from '@/api/system/user'
|
||||
import { isvalidPhone } from '@/utils/validate'
|
||||
import { getDepts } from '@/api/system/dept'
|
||||
import { getAll, getLevel } from '@/api/system/role'
|
||||
import { getAllJob } from '@/api/system/job'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
name: 'User',
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
// 设置数据字典
|
||||
components: { Treeselect },
|
||||
mixins: [crud],
|
||||
// 数据字典
|
||||
dicts: ['user_status'],
|
||||
data() {
|
||||
// 自定义验证
|
||||
const validPhone = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入电话号码'))
|
||||
} else if (!isvalidPhone(value)) {
|
||||
callback(new Error('请输入正确的11位手机号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
height: document.documentElement.clientHeight - 180 + 'px;', isAdd: false,
|
||||
delLoading: false, deptName: '', depts: [], deptId: null,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
crudMethod: {
|
||||
...crudUser
|
||||
},
|
||||
title: '用户',
|
||||
height: document.documentElement.clientHeight - 180 + 'px;',
|
||||
deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
|
||||
defaultProps: { children: 'children', label: 'name' },
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', display_name: '激活' },
|
||||
{ key: 'false', display_name: '锁定' }
|
||||
]
|
||||
],
|
||||
form: { username: null, email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null },
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, trigger: 'blur', validator: validPhone }
|
||||
],
|
||||
enabled: [
|
||||
{ required: true, message: '状态不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDeptDatas()
|
||||
this.$nextTick(() => {
|
||||
this.getDeptDatas()
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
@@ -144,103 +220,82 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
beforeInit() {
|
||||
this.url = 'api/users'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const blurry = query.blurry
|
||||
const enabled = query.enabled
|
||||
this.params = { page: this.page, size: this.size, sort: sort, deptId: this.deptId }
|
||||
if (blurry) { this.params['blurry'] = blurry }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
if (enabled !== '' && enabled !== null) { this.params['enabled'] = enabled }
|
||||
return true
|
||||
},
|
||||
// 导出
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadUser(this.params).then(result => {
|
||||
downloadFile(result, '用户列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
// 打开新增弹窗前做的操作
|
||||
beforeShowAddForm() {
|
||||
this.getDepts()
|
||||
this.getRoles()
|
||||
this.getRoleLevel()
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
// 打开编辑弹窗前做的操作
|
||||
beforeShowEditForm(data) {
|
||||
this.getDepts()
|
||||
this.getRoles()
|
||||
this.getRoleLevel()
|
||||
this.getJobs(this.form.dept.id)
|
||||
this.form.enabled = data.enabled.toString()
|
||||
const roles = []
|
||||
data.roles.forEach(function(role, index) {
|
||||
roles.push(role.id)
|
||||
})
|
||||
this.form.roles = roles
|
||||
},
|
||||
// 提交前做的操作
|
||||
beforeSubmitMethod() {
|
||||
if (!this.form.dept.id) {
|
||||
this.$message({
|
||||
message: '部门不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
return false
|
||||
} else if (!this.form.job.id) {
|
||||
this.$message({
|
||||
message: '岗位不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
} else if (this.form.roles.length === 0) {
|
||||
this.$message({
|
||||
message: '角色不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const roles = []
|
||||
this.form.roles.forEach(function(data, index) {
|
||||
const role = { id: data }
|
||||
roles.push(role)
|
||||
})
|
||||
this.form.roles = roles
|
||||
return true
|
||||
},
|
||||
// 获取左侧部门数据
|
||||
getDeptDatas() {
|
||||
const sort = 'id,desc'
|
||||
const params = { sort: sort }
|
||||
if (this.deptName) { params['name'] = this.deptName }
|
||||
getDepts(params).then(res => {
|
||||
this.deptDatas = res.content
|
||||
})
|
||||
},
|
||||
// 获取弹窗内部门数据
|
||||
getDepts() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
},
|
||||
// 切换部门
|
||||
handleNodeClick(data) {
|
||||
if (data.pid === 0) {
|
||||
this.deptId = null
|
||||
this.query.deptId = null
|
||||
} else {
|
||||
this.deptId = data.id
|
||||
this.query.deptId = data.id
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
add() {
|
||||
this.isAdd = true
|
||||
this.$refs.form.getDepts()
|
||||
this.$refs.form.getRoles()
|
||||
this.$refs.form.getRoleLevel()
|
||||
this.$refs.form.dialog = true
|
||||
},
|
||||
// 数据转换
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'createTime' || j === 'lastPasswordResetTime') {
|
||||
return parseTime(v[j])
|
||||
} else if (j === 'enabled') {
|
||||
return parseTime(v[j]) ? '启用' : '禁用'
|
||||
} else {
|
||||
return v[j]
|
||||
}
|
||||
}))
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.getRoles()
|
||||
_this.getDepts()
|
||||
_this.getRoleLevel()
|
||||
_this.roleIds = []
|
||||
_this.form = { id: data.id, username: data.username, phone: data.phone, email: data.email, enabled: data.enabled.toString(), roles: [], dept: { id: data.dept.id }, job: { id: data.job.id }}
|
||||
data.roles.forEach(function(data, index) {
|
||||
_this.roleIds.push(data.id)
|
||||
})
|
||||
_this.deptId = data.dept.id
|
||||
_this.jobId = data.job.id
|
||||
_this.getJobs(_this.deptId)
|
||||
_this.dialog = true
|
||||
},
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
|
||||
@@ -248,19 +303,36 @@ export default {
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
edit(data).then(res => {
|
||||
this.$notify({
|
||||
title: this.dict.label.user_status[val] + '成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.crudMethod.edit(data).then(res => {
|
||||
this.notify(this.dict.label.user_status[val] + '成功', 'success')
|
||||
}).catch(() => {
|
||||
data.enabled = !data.enabled
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
data.enabled = !data.enabled
|
||||
})
|
||||
},
|
||||
// 获取弹窗内角色数据
|
||||
getRoles() {
|
||||
getAll().then(res => {
|
||||
this.roles = res
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 获取弹窗内岗位数据
|
||||
getJobs(id) {
|
||||
getAllJob(id).then(res => {
|
||||
this.jobs = res.content
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 点击部门搜索对应的岗位
|
||||
selectFun(node, instanceId) {
|
||||
this.getJobs(node.id)
|
||||
},
|
||||
// 获取权限级别
|
||||
getRoleLevel() {
|
||||
getLevel().then(res => {
|
||||
this.level = res.level
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="appID" prop="appID">
|
||||
<el-input v-model="form.appID" style="width: 40%"/>
|
||||
<el-input v-model="form.appID" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">应用APPID,收款账号既是APPID对应支付宝账号</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="商家账号" prop="sysServiceProviderId">
|
||||
<el-input v-model="form.sysServiceProviderId" style="width: 40%;"/>
|
||||
<el-input v-model="form.sysServiceProviderId" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">商家账号</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="商户私钥" prop="privateKey">
|
||||
<el-input v-model="form.privateKey" type="password" style="width: 40%;"/>
|
||||
<el-input v-model="form.privateKey" type="password" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">商户私钥，你的PKCS8格式RSA2私钥</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付宝公钥" prop="publicKey">
|
||||
<el-input v-model="form.publicKey" type="password" style="width: 40%;"/>
|
||||
<el-input v-model="form.publicKey" type="password" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">支付宝公钥</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="回调地址" prop="returnUrl">
|
||||
<el-input v-model="form.returnUrl" style="width: 40%;"/>
|
||||
<el-input v-model="form.returnUrl" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">订单完成后返回的地址</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="异步通知" prop="notifyUrl">
|
||||
<el-input v-model="form.notifyUrl" style="width: 40%;"/>
|
||||
<el-input v-model="form.notifyUrl" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">支付结果异步通知地址</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
@@ -31,7 +31,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get, update } from '@/api/alipay'
|
||||
import { get, update } from '@/api/tools/alipay'
|
||||
export default {
|
||||
name: 'Config',
|
||||
data() {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" style="padding-left: 5px;">
|
||||
<el-tab-pane label="参数配置" name="first">
|
||||
<Config/>
|
||||
<Config />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="支付测试" name="second">
|
||||
<ToPay/>
|
||||
<ToPay />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="使用说明" name="third">
|
||||
<div>
|
||||
@@ -33,7 +33,6 @@ if (/(Android)/i.test(navigator.userAgent)){ // 判断是否为Android手机
|
||||
<script>
|
||||
import Config from './config'
|
||||
import ToPay from './toPay'
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
name: 'AliPay',
|
||||
components: { Config, ToPay },
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="90px">
|
||||
<el-form-item label="商品名称" prop="subject">
|
||||
<el-input v-model="form.subject" style="width: 35%"/>
|
||||
<el-input v-model="form.subject" style="width: 35%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品价格" prop="totalAmount">
|
||||
<el-input v-model="form.totalAmount" style="width: 35%"/>
|
||||
<el-input v-model="form.totalAmount" style="width: 35%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">测试允许区间(0,5000]</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品描述" prop="body">
|
||||
<el-input v-model="form.body" style="width: 35%" rows="8" type="textarea"/>
|
||||
<el-input v-model="form.body" style="width: 35%" rows="8" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button :loading="loading" size="medium" type="primary" @click="doSubmit">去支付</el-button>
|
||||
@@ -19,7 +19,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toAliPay } from '@/api/alipay'
|
||||
import { toAliPay } from '@/api/tools/alipay'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="发件人邮箱" prop="fromUser">
|
||||
<el-input v-model="form.fromUser" style="width: 40%"/>
|
||||
<el-input v-model="form.fromUser" style="width: 40%" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="发件用户名" prop="user">
|
||||
<el-input v-model="form.user" style="width: 40%;"/>
|
||||
<el-input v-model="form.user" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">Sender usernamex</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱密码" prop="pass">
|
||||
<el-input v-model="form.pass" type="password" style="width: 40%;"/>
|
||||
<el-input v-model="form.pass" type="password" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">email Password</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP地址" prop="host">
|
||||
<el-input v-model="form.host" style="width: 40%;"/>
|
||||
<el-input v-model="form.host" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">SMTP address</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP端口" prop="port">
|
||||
<el-input v-model="form.port" style="width: 40%;"/>
|
||||
<el-input v-model="form.port" style="width: 40%;" />
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">SMTP port</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get, update } from '@/api/email'
|
||||
import { get, update } from '@/api/tools/email'
|
||||
export default {
|
||||
name: 'Config',
|
||||
data() {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" style="padding-left: 5px;">
|
||||
<el-tab-pane label="邮箱配置" name="first">
|
||||
<Config/>
|
||||
<Config />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="发送邮件" name="second">
|
||||
<Send/>
|
||||
<Send />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="使用说明" name="third">
|
||||
<div>
|
||||
@@ -26,7 +26,6 @@
|
||||
<script>
|
||||
import Config from './config'
|
||||
import Send from './send'
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
name: 'Email',
|
||||
components: { Config, Send },
|
||||
|
||||
@@ -2,17 +2,18 @@
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="邮件标题" prop="subject">
|
||||
<el-input v-model="form.subject" style="width: 40%"/>
|
||||
<el-input v-model="form.subject" style="width: 40%" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="(domain, index) in tos"
|
||||
:key="domain.key"
|
||||
:label="'收件邮箱' + (index === 0 ? '': index)"
|
||||
:key="domain.key">
|
||||
<el-input v-model="domain.value" style="width: 31%"/>
|
||||
>
|
||||
<el-input v-model="domain.value" style="width: 31%" />
|
||||
<el-button icon="el-icon-plus" @click="addDomain" />
|
||||
<el-button style="margin-left:0px;" icon="el-icon-minus" @click.prevent="removeDomain(domain)"/>
|
||||
<el-button style="margin-left:0px;" icon="el-icon-minus" @click.prevent="removeDomain(domain)" />
|
||||
</el-form-item>
|
||||
<div ref="editor" class="editor"/>
|
||||
<div ref="editor" class="editor" />
|
||||
<el-button :loading="loading" style="margin-left:1.6%;" size="medium" type="primary" @click="doSubmit">发送邮件</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -21,8 +22,8 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { send } from '@/api/email'
|
||||
import { validatEmail } from '@/utils/validate'
|
||||
import { send } from '@/api/tools/email'
|
||||
import { validEmail } from '@/utils/validate'
|
||||
import E from 'wangeditor'
|
||||
export default {
|
||||
name: 'Index',
|
||||
@@ -95,7 +96,7 @@ export default {
|
||||
type: 'warning'
|
||||
})
|
||||
sub = true
|
||||
} else if (validatEmail(data.value)) {
|
||||
} else if (validEmail(data.value)) {
|
||||
_this.form.tos.push(data.value)
|
||||
} else {
|
||||
_this.$message({
|
||||
|
||||
@@ -3,37 +3,38 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!--搜索-->
|
||||
<el-input v-model="query.filename" clearable placeholder="输入文件名" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.filename" clearable size="small" placeholder="输入文件名" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 上传 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-permission="['admin','pictures:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="dialog = true">上传图片</el-button>
|
||||
</div>
|
||||
<div v-permission="['admin','pictures:del']" style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="delAllLoading"
|
||||
:disabled="data.length === 0 || $refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="open">删除</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
v-permission="['admin','pictures:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="dialog = true"
|
||||
>上传图片</el-button>
|
||||
<el-button
|
||||
v-permission="['admin','pictures:del']"
|
||||
:loading="delAllLoading"
|
||||
:disabled="data.length === 0 || $refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="beforeDelAllMethod"
|
||||
>删除</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
@@ -42,7 +43,8 @@
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--上传图片-->
|
||||
@@ -55,8 +57,9 @@
|
||||
:headers="headers"
|
||||
:file-list="fileList"
|
||||
:action="imagesUploadApi"
|
||||
list-type="picture-card">
|
||||
<i class="el-icon-plus"/>
|
||||
list-type="picture-card"
|
||||
>
|
||||
<i class="el-icon-plus" />
|
||||
</el-upload>
|
||||
<el-dialog :append-to-body="true" :visible.sync="dialogVisible">
|
||||
<img :src="dialogImageUrl" width="100%" alt="">
|
||||
@@ -66,18 +69,24 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="filename" label="文件名"/>
|
||||
<el-table-column prop="username" label="上传者"/>
|
||||
<el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="filename" label="文件名" />
|
||||
<el-table-column prop="username" label="上传者" />
|
||||
<el-table-column ref="table" :show-overflow-tooltip="true" prop="url" label="缩略图">
|
||||
<template slot-scope="scope">
|
||||
<a :href="scope.row.url" style="color: #42b983" target="_blank"><img :src="scope.row.url" alt="点击打开" class="el-avatar"></a>
|
||||
<template slot-scope="{row}">
|
||||
<el-image
|
||||
:src="row.url"
|
||||
:preview-src-list="[row.url]"
|
||||
fit="contain"
|
||||
lazy
|
||||
class="el-avatar"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="size" label="文件大小"/>
|
||||
<el-table-column prop="height" label="高度"/>
|
||||
<el-table-column prop="width" label="宽度"/>
|
||||
<el-table-column prop="size" label="文件大小" />
|
||||
<el-table-column prop="height" label="高度" />
|
||||
<el-table-column prop="width" label="宽度" />
|
||||
<el-table-column width="180px" prop="createTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
@@ -88,13 +97,14 @@
|
||||
<el-popover
|
||||
:ref="scope.row.id"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -106,28 +116,26 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import initData from '@/mixins/initData'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import crud from '@/mixins/crud'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { del, delAll, downloadPicture } from '@/api/picture'
|
||||
import crudPic from '@/api/tools/picture'
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
name: 'Pictures',
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
delAllLoading: false,
|
||||
title: '图片',
|
||||
crudMethod: { ...crudPic },
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken()
|
||||
},
|
||||
dialog: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
fileList: [],
|
||||
@@ -145,69 +153,10 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
beforeInit() {
|
||||
this.url = 'api/pictures'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const filename = query.filename
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (filename) { this.params[filename] = filename }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doDelete() {
|
||||
this.delAllLoading = true
|
||||
const data = this.$refs.table.selection
|
||||
const ids = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids.push(data[i].id)
|
||||
}
|
||||
delAll(ids).then(res => {
|
||||
this.delAllLoading = false
|
||||
this.init()
|
||||
this.dleChangePage(ids.length)
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$confirm('你确定删除选中的数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.doDelete()
|
||||
})
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
const uid = file.uid
|
||||
const id = response.id
|
||||
@@ -216,7 +165,7 @@ export default {
|
||||
handleBeforeRemove(file, fileList) {
|
||||
for (let i = 0; i < this.pictures.length; i++) {
|
||||
if (this.pictures[i].uid === file.uid) {
|
||||
del(this.pictures[i].id).then(res => {})
|
||||
this.crudMethod.del(this.pictures[i].id).then(res => {})
|
||||
return true
|
||||
}
|
||||
}
|
||||
@@ -241,16 +190,6 @@ export default {
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadPicture(this.params).then(result => {
|
||||
downloadFile(result, '图片列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
|
||||
<el-tab-pane label="本地存储" name="first">
|
||||
<Local ref="local"/>
|
||||
<Local ref="local" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="七牛云存储" name="second">
|
||||
<QiNiu ref="qiNiu"/>
|
||||
<QiNiu ref="qiNiu" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
@@ -12,7 +12,6 @@
|
||||
<script>
|
||||
import QiNiu from './qiniu/index'
|
||||
import Local from './local/index'
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
name: 'Storage',
|
||||
components: { QiNiu, Local },
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '上传文件' : '编辑文件'" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="文件名" >
|
||||
<el-input v-model="form.name" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<!-- 上传文件 -->
|
||||
<el-form-item v-if="isAdd" label="上传">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
:before-upload="beforeUpload"
|
||||
:auto-upload="false"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:action="fileUploadApi + '?name=' + form.name">
|
||||
<div class="eladmin-upload"><i class="el-icon-upload"/> 添加文件</div>
|
||||
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { edit } from '@/api/localStorage'
|
||||
export default {
|
||||
props: {
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() },
|
||||
form: {
|
||||
id: '',
|
||||
name: ''
|
||||
},
|
||||
rules: {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'fileUploadApi'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.$refs.upload.submit()
|
||||
} else this.doEdit()
|
||||
},
|
||||
doEdit() {
|
||||
edit(this.form).then(res => {
|
||||
this.resetForm()
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
this.$parent.init()
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = {
|
||||
id: '',
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
let isLt2M = true
|
||||
isLt2M = file.size / 1024 / 1024 < 100
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传文件大小不能超过 100MB!')
|
||||
}
|
||||
this.loading = false
|
||||
return isLt2M
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.dialog = false
|
||||
this.resetForm()
|
||||
this.$refs.upload.clearFiles()
|
||||
this.$parent.init()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -3,57 +3,82 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.blurry" clearable size="small" placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.createTime"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-permission="['admin','storage:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="add">文件上传
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
v-permission="['admin','storage:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="showAddFormDialog"
|
||||
>文件上传
|
||||
</el-button>
|
||||
<!-- 多选删除 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-permission="['admin','storage:del']"
|
||||
:loading="delAllLoading"
|
||||
:disabled="data.length === 0 || $refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="open">删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
v-permission="['admin','storage:del']"
|
||||
:loading="delAllLoading"
|
||||
:disabled="data.length === 0 || $refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="beforeDelAllMethod"
|
||||
>删除
|
||||
</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="download">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd"/>
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
|
||||
<el-form ref="form" :model="form" size="small" label-width="80px">
|
||||
<el-form-item label="文件名">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<!-- 上传文件 -->
|
||||
<el-form-item v-if="isAdd" label="上传">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
:before-upload="beforeUpload"
|
||||
:auto-upload="false"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:action="fileUploadApi + '?name=' + form.name"
|
||||
>
|
||||
<div class="eladmin-upload"><i class="el-icon-upload" /> 添加文件</div>
|
||||
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" width="150px" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
@@ -61,13 +86,15 @@
|
||||
placement="top-start"
|
||||
title="路径"
|
||||
width="200"
|
||||
trigger="hover">
|
||||
trigger="hover"
|
||||
>
|
||||
<a
|
||||
slot="reference"
|
||||
:href="baseApi + '/file/' + scope.row.type + '/' + scope.row.realName"
|
||||
class="el-link--primary"
|
||||
style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: #1890ff;font-size: 13px;"
|
||||
target="_blank">
|
||||
target="_blank"
|
||||
>
|
||||
{{ scope.row.name }}
|
||||
</a>
|
||||
</el-popover>
|
||||
@@ -80,17 +107,18 @@
|
||||
:preview-src-list="[baseApi + '/file/' + row.type + '/' + row.realName]"
|
||||
fit="contain"
|
||||
lazy
|
||||
class="el-avatar">
|
||||
class="el-avatar"
|
||||
>
|
||||
<div slot="error">
|
||||
<i class="el-icon-document"/>
|
||||
<i class="el-icon-document" />
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="suffix" label="文件类型"/>
|
||||
<el-table-column prop="type" label="类别"/>
|
||||
<el-table-column prop="size" label="大小"/>
|
||||
<el-table-column prop="operate" label="操作人"/>
|
||||
<el-table-column prop="suffix" label="文件类型" />
|
||||
<el-table-column prop="type" label="类别" />
|
||||
<el-table-column prop="size" label="大小" />
|
||||
<el-table-column prop="operate" label="操作人" />
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
@@ -98,19 +126,20 @@
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['admin','storage:edit','storage:del'])" label="操作" width="150px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','storage:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
|
||||
<el-button v-permission="['admin','storage:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
v-permission="['admin','storage:del']"
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','storage:del']"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -122,34 +151,31 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, delAll, downloadStorage } from '@/api/localStorage'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import eForm from './form'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudFile from '@/api/tools/localStorage'
|
||||
export default {
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false, delAllLoading: false,
|
||||
queryTypeOptions: [
|
||||
{ key: 'name', display_name: '文件名' },
|
||||
{ key: 'suffix', display_name: '后缀' },
|
||||
{ key: 'type', display_name: '类型' },
|
||||
{ key: 'operate', display_name: '操作人' }
|
||||
]
|
||||
title: '文件',
|
||||
crudMethod: { ...crudFile },
|
||||
delAllLoading: false,
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() },
|
||||
form: { id: null, name: null }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'baseApi'
|
||||
'baseApi',
|
||||
'fileUploadApi'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
@@ -158,91 +184,39 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/localStorage'
|
||||
const sort = 'id,desc'
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
if (value) { this.params['blurry'] = value }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
// 上传文件
|
||||
addMethod() {
|
||||
this.$refs.upload.submit()
|
||||
},
|
||||
add() {
|
||||
this.isAdd = true
|
||||
this.$refs.form.dialog = true
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.form = {
|
||||
id: data.id,
|
||||
name: data.name
|
||||
beforeUpload(file) {
|
||||
let isLt2M = true
|
||||
isLt2M = file.size / 1024 / 1024 < 100
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传文件大小不能超过 100MB!')
|
||||
}
|
||||
_this.dialog = true
|
||||
this.loading = false
|
||||
return isLt2M
|
||||
},
|
||||
doDelete() {
|
||||
this.delAllLoading = true
|
||||
const data = this.$refs.table.selection
|
||||
const ids = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids.push(data[i].id)
|
||||
}
|
||||
delAll(ids).then(res => {
|
||||
this.delAllLoading = false
|
||||
this.dleChangePage(ids.length)
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.dialog = false
|
||||
this.cancel()
|
||||
this.$refs.upload.clearFiles()
|
||||
this.init()
|
||||
},
|
||||
open() {
|
||||
this.$confirm('你确定删除选中的数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.doDelete()
|
||||
})
|
||||
},
|
||||
download() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadStorage(this.params).then(result => {
|
||||
downloadFile(result, '文件列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<!--上传图片-->
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" title="七牛云配置" append-to-body width="580px">
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="110px">
|
||||
<el-form-item label="Access Key" prop="accessKey">
|
||||
<el-input v-model="form.accessKey" style="width: 95%" placeholder="accessKey，在安全中心，秘钥管理中查看"/>
|
||||
<el-input v-model="form.accessKey" style="width: 95%" placeholder="accessKey，在安全中心，秘钥管理中查看" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Secret Key" prop="secretKey">
|
||||
<el-input v-model="form.secretKey" type="password" style="width: 95%;" placeholder="secretKey，在安全中心，秘钥管理中查看"/>
|
||||
<el-input v-model="form.secretKey" type="password" style="width: 95%;" placeholder="secretKey，在安全中心，秘钥管理中查看" />
|
||||
</el-form-item>
|
||||
<el-form-item label="空间名称" prop="bucket">
|
||||
<el-input v-model="form.bucket" style="width: 95%;" placeholder="存储空间名称作为唯一的 Bucket 识别符"/>
|
||||
<el-input v-model="form.bucket" style="width: 95%;" placeholder="存储空间名称作为唯一的 Bucket 识别符" />
|
||||
</el-form-item>
|
||||
<el-form-item label="外链域名" prop="host">
|
||||
<el-input v-model="form.host" style="width: 95%;" placeholder = "外链域名，可自定义，需在七牛云绑定"/>
|
||||
<el-input v-model="form.host" style="width: 95%;" placeholder="外链域名，可自定义，需在七牛云绑定" />
|
||||
</el-form-item>
|
||||
<el-form-item label="存储区域" prop="port">
|
||||
<el-select v-model="form.zone" placeholder="请选择存储区域">
|
||||
@@ -20,12 +19,13 @@
|
||||
v-for="item in zones"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"/>
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="空间类型" prop="host">
|
||||
<el-radio v-model="form.type" label="公开">公开</el-radio>
|
||||
<el-radio v-model="form.type" label="私有" >私有</el-radio>
|
||||
<el-radio v-model="form.type" label="私有">私有</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@@ -36,7 +36,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get, update } from '@/api/qiniu'
|
||||
import { get, update } from '@/api/tools/qiniu'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,57 +1,54 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding: 8px;">
|
||||
<!--表单组件-->
|
||||
<eForm ref="form"/>
|
||||
<eForm ref="form" />
|
||||
<!-- 工具栏 -->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
v-model="query.c"
|
||||
:default-time="['00:00:00','23:59:59']"
|
||||
type="daterange"
|
||||
range-separator=":"
|
||||
class="el-range-editor--small filter-item"
|
||||
style="height: 30.5px;width: 220px"
|
||||
class="el-range-editor--small date-item"
|
||||
style="width: 220px;height: 30.5px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"/>
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 上传 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
|
||||
</div>
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
|
||||
<!-- 同步 -->
|
||||
<el-button :icon="icon" class="filter-item" size="mini" type="warning" @click="synchronize">同步数据</el-button>
|
||||
<!-- 配置 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-s-tools"
|
||||
@click="doConfig">七牛配置</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-s-tools"
|
||||
@click="doConfig"
|
||||
>七牛配置</el-button>
|
||||
<!-- 多选删除 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
:loading="delAllLoading"
|
||||
:disabled="data.length === 0 || $refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="open">删除</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="delAllLoading"
|
||||
:disabled="data.length === 0 || $refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="beforeDelAllMethod"
|
||||
>删除</el-button>
|
||||
<!-- 导出 -->
|
||||
<div style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadList">导出</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="downloadMethod"
|
||||
>导出</el-button>
|
||||
<!-- 文件上传 -->
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="500px" @close="doSubmit">
|
||||
<el-upload
|
||||
@@ -62,7 +59,8 @@
|
||||
:headers="headers"
|
||||
:action="qiNiuUploadApi"
|
||||
class="upload-demo"
|
||||
multiple>
|
||||
multiple
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
|
||||
</el-upload>
|
||||
@@ -71,17 +69,17 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column :show-overflow-tooltip="true" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<a href="JavaScript:;" class="el-link el-link--primary" target="_blank" type="primary" @click="download(scope.row.id)">{{ scope.row.key }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="suffix" label="文件类型"/>
|
||||
<el-table-column prop="bucket" label="空间名称"/>
|
||||
<el-table-column prop="size" label="文件大小"/>
|
||||
<el-table-column prop="type" label="空间类型"/>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="suffix" label="文件类型" />
|
||||
<el-table-column prop="bucket" label="空间名称" />
|
||||
<el-table-column prop="size" label="文件大小" />
|
||||
<el-table-column prop="type" label="空间类型" />
|
||||
<el-table-column width="180px" prop="updateTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime) }}</span>
|
||||
@@ -92,13 +90,14 @@
|
||||
<el-popover
|
||||
:ref="scope.row.id"
|
||||
placement="top"
|
||||
width="180">
|
||||
width="180"
|
||||
>
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -110,27 +109,28 @@
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, download, sync, delAll, downloadQiNiu } from '@/api/qiniu'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudQiNiu from '@/api/tools/qiniu'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import eForm from './form'
|
||||
export default {
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
icon: 'el-icon-refresh', delAllLoading: false,
|
||||
title: '文件',
|
||||
crudMethod: { ...crudQiNiu },
|
||||
icon: 'el-icon-refresh',
|
||||
url: '', headers: { 'Authorization': 'Bearer ' + getToken() }, dialog: false,
|
||||
dialogImageUrl: '', dialogVisible: false, fileList: [], files: [],
|
||||
newWin: null, downloadLoading: false, delLoading: false
|
||||
dialogImageUrl: '', dialogVisible: false, fileList: [], files: [], newWin: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -150,54 +150,17 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/qiNiuContent'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['key'] = value }
|
||||
if (query.date) {
|
||||
this.params['startTime'] = query.date[0]
|
||||
this.params['endTime'] = query.date[1]
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 七牛云配置
|
||||
doConfig() {
|
||||
const _this = this.$refs.form
|
||||
_this.init()
|
||||
_this.dialog = true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
download(id) {
|
||||
this.downloadLoading = true
|
||||
// 先打开一个空的新窗口，再请求
|
||||
this.newWin = window.open()
|
||||
download(id).then(res => {
|
||||
this.downloadLoading = false
|
||||
this.url = res.url
|
||||
}).catch(err => {
|
||||
this.downloadLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
const uid = file.uid
|
||||
const id = response.id
|
||||
@@ -206,7 +169,7 @@ export default {
|
||||
handleBeforeRemove(file, fileList) {
|
||||
for (let i = 0; i < this.files.length; i++) {
|
||||
if (this.files[i].uid === file.uid) {
|
||||
del(this.files[i].id).then(res => {})
|
||||
this.crudMethod.del(this.files[i].id).then(res => {})
|
||||
return true
|
||||
}
|
||||
}
|
||||
@@ -226,18 +189,26 @@ export default {
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
this.notify(msg.message, 'error')
|
||||
},
|
||||
// 下载文件
|
||||
download(id) {
|
||||
this.downloadLoading = true
|
||||
// 先打开一个空的新窗口，再请求
|
||||
this.newWin = window.open()
|
||||
this.crudMethod.download(id).then(res => {
|
||||
this.downloadLoading = false
|
||||
this.url = res.url
|
||||
}).catch(err => {
|
||||
this.downloadLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 同步数据
|
||||
synchronize() {
|
||||
this.icon = 'el-icon-loading'
|
||||
this.buttonName = '同步中'
|
||||
sync().then(res => {
|
||||
this.crudMethod.sync().then(res => {
|
||||
this.icon = 'el-icon-refresh'
|
||||
this.buttonName = '同步数据'
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '数据同步成功',
|
||||
@@ -247,49 +218,8 @@ export default {
|
||||
this.toQuery()
|
||||
}).catch(err => {
|
||||
this.icon = 'el-icon-refresh'
|
||||
this.buttonName = '同步数据'
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doDelete() {
|
||||
this.delAllLoading = true
|
||||
const data = this.$refs.table.selection
|
||||
const ids = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids.push(data[i].id)
|
||||
}
|
||||
delAll(ids).then(res => {
|
||||
this.delAllLoading = false
|
||||
this.dleChangePage(ids.length)
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$confirm('你确定删除选中的数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.doDelete()
|
||||
})
|
||||
},
|
||||
downloadList() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
downloadQiNiu(this.params).then(result => {
|
||||
downloadFile(result, '七牛云文件列表', 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<elFrame :src="swaggerApi"/>
|
||||
<elFrame :src="swaggerApi" />
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
Reference in New Issue
Block a user