rename: cutejava-ui to cutejava-front
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-divider>clipboard版</el-divider>
|
||||
<span>{{ msg }}</span>
|
||||
<div id="btn" @click="copy">复制</div>
|
||||
<el-divider>OneKeyCopy组件版</el-divider>
|
||||
<one-key-copy style="margin-left: 10pt" :content.sync="msg" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Clipboard from 'clipboard'
|
||||
import { Message } from 'element-ui'
|
||||
import OneKeyCopy from '@/views/components/base/OneKeyCopy.vue'
|
||||
export default {
|
||||
components: { OneKeyCopy },
|
||||
data() {
|
||||
return {
|
||||
msg: '来复制我吧'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 复制方法
|
||||
copy() {
|
||||
const that = this
|
||||
const clipboard = new Clipboard('#btn', {
|
||||
text(trigger) {
|
||||
console.log(trigger)
|
||||
// 返回字符串
|
||||
return that.msg
|
||||
}
|
||||
})
|
||||
// 复制成功
|
||||
clipboard.on('success', (e) => {
|
||||
Message.success('复制成功')
|
||||
console.log(e, '复制成功')
|
||||
clipboard.destroy()
|
||||
})
|
||||
// //复制失败
|
||||
clipboard.on('error', (e) => {
|
||||
Message.error('复制失败')
|
||||
console.log(e, '复制失败')
|
||||
clipboard.destroy()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#btn {
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
border-radius: 6px;
|
||||
background-color: #eee;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
#btn:active {
|
||||
background-color: #ddd;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<JavaEdit height="500px" :value="form.content" :read-only="false" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JavaEdit from '@/components/JavaEdit/index.vue'
|
||||
|
||||
export default {
|
||||
components: { JavaEdit },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="box-card text">
|
||||
<countTo :start-val="startVal" :end-val="endVal" :duration="3000" />
|
||||
</el-card>
|
||||
<el-card class="box-card text">
|
||||
<countTo :start-val="startVal" :end-val="endVal" :duration="3000" />
|
||||
</el-card>
|
||||
<el-card class="box-card text">
|
||||
<countTo :start-val="startVal" :end-val="endVal" :duration="3000" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
name: 'DragTable',
|
||||
components: { CountTo },
|
||||
data() {
|
||||
return {
|
||||
startVal: 0,
|
||||
endVal: 2024
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.text {
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
padding-top: 10%;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<!-- el-table中 添加 row-key="id" ，ref 创建拖拽时用到获取表格节点 -->
|
||||
<el-table
|
||||
ref="sortTable"
|
||||
height="300"
|
||||
:data="sortList"
|
||||
row-key="id"
|
||||
>
|
||||
<el-table-column width="50" align="center" prop="orderNum" label="序号" />
|
||||
<el-table-column width="100" align="center" prop="username" label="用户名" />
|
||||
<el-table-column align="center" prop="code" label="编号" />
|
||||
<el-table-column align="center" prop="code" label="编号" />
|
||||
<el-table-column align="center" prop="code" label="编号" />
|
||||
<el-table-column align="center" prop="code" label="编号" />
|
||||
<el-table-column align="center" prop="code" label="编号" />
|
||||
<el-table-column align="center" prop="code" label="编号" />
|
||||
<el-table-column align="center" prop="code" label="编号" />
|
||||
<el-table-column width="100" align="center" prop="sex" label="性别" />
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sortList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const list = []
|
||||
for (let i = 0; i < 10; i++) {
|
||||
list.push({
|
||||
orderNum: i + 1,
|
||||
id: i + 1,
|
||||
username: '用户名' + i,
|
||||
code: i,
|
||||
sex: i % 2 === 0 ? '男' : '女'
|
||||
})
|
||||
}
|
||||
this.sortList = list
|
||||
this.initDragTable()
|
||||
},
|
||||
methods: {
|
||||
// 初始化拖拽功能
|
||||
initDragTable() {
|
||||
const table = this.$refs.sortTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
||||
const that = this
|
||||
Sortable.create(table, {
|
||||
animation: 1000,
|
||||
onEnd({ newIndex, oldIndex }) {
|
||||
// 拖拽排序数据
|
||||
that.sortList.splice(newIndex, 0, that.sortList.splice(oldIndex, 1)[0])
|
||||
const newArray = that.sortList.slice(0)
|
||||
that.sortList = [] // 必须有此步骤，不然拖拽后回弹
|
||||
that.$nextTick(function() {
|
||||
that.sortList = newArray // 重新赋值，用新数据来刷新视图
|
||||
this.updateOrderNum(that.sortList)// 更改列表中的序号，使序号1.2.3.4.....显示，不然就是行拖拽后乱序显示如:3.2.4.1...
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
updateOrderNum(data) {
|
||||
data.forEach((item, index) => {
|
||||
item.orderNum = index + 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<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="12">
|
||||
<div class="chart-wrapper">
|
||||
<graph />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="12">
|
||||
<div class="chart-wrapper">
|
||||
<sankey />
|
||||
</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.vue'
|
||||
import HeatMap from '@/components/Echarts/HeatMap.vue'
|
||||
import Gauge from '@/components/Echarts/Gauge.vue'
|
||||
import Rich from '@/components/Echarts/Rich.vue'
|
||||
import ThemeRiver from '@/components/Echarts/ThemeRiver.vue'
|
||||
import Sunburst from '@/components/Echarts/Sunburst.vue'
|
||||
import Graph from '@/components/Echarts/Graph.vue'
|
||||
import Sankey from '@/components/Echarts/Sankey.vue'
|
||||
import Scatter from '@/components/Echarts/Scatter.vue'
|
||||
import Category from '@/components/Echarts/Category.vue'
|
||||
import Point from '@/components/Echarts/Point.vue'
|
||||
|
||||
export default {
|
||||
name: 'Echarts',
|
||||
components: {
|
||||
Point,
|
||||
Category,
|
||||
Graph,
|
||||
HeatMap,
|
||||
RadarChart,
|
||||
Sunburst,
|
||||
Gauge,
|
||||
Rich,
|
||||
ThemeRiver,
|
||||
Sankey,
|
||||
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>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<p class="warn-content">
|
||||
富文本基于
|
||||
<el-link type="primary" href="https://www.wangeditor.com/v5/getting-started.html" target="_blank">wangEditor</el-link>
|
||||
</p>
|
||||
<el-row :gutter="10">
|
||||
<wang-editor v-model="editorContent" style="height: 500px; overflow-y: hidden;" />
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import WangEditor from '@/components/WangEditor/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'Editor',
|
||||
components: { WangEditor },
|
||||
data() {
|
||||
return {
|
||||
editorContent:
|
||||
`更多帮助请查看官方文档`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi',
|
||||
'baseApi'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<p class="warn-content">
|
||||
Markdown 基于
|
||||
<el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank">MavonEditor</el-link>
|
||||
</p>
|
||||
<mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { upload } from '@/utils/upload'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { mavonEditor } from 'mavon-editor'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
|
||||
export default {
|
||||
name: 'Markdown',
|
||||
components: {
|
||||
mavonEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: document.documentElement.clientHeight - 200 + 'px'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi',
|
||||
'baseApi'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
const that = this
|
||||
window.onresize = function temp() {
|
||||
that.height = document.documentElement.clientHeight - 200 + 'px'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
imgAdd(pos, $file) {
|
||||
upload(this.imagesUploadApi, $file).then(res => {
|
||||
const data = res.data
|
||||
const url = this.baseApi + '/file/' + data.type + '/' + data.realName
|
||||
this.$refs.md.$img2Url(pos, url)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-note-wrapper.shadow {
|
||||
z-index: 5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- 一键复制组件 -->
|
||||
<!-- 使用方式： <one-key-copy style="margin-left: 10pt" :content.sync="data" /> -->
|
||||
<template>
|
||||
<!-- <el-tooltip class="item" effect="dark" content="复制" placement="right-end">-->
|
||||
<el-button
|
||||
v-clipboard:copy="content"
|
||||
v-clipboard:success="onCopy"
|
||||
v-clipboard:error="onError"
|
||||
size="mini"
|
||||
icon="el-icon-document-copy"
|
||||
/>
|
||||
<!-- </el-tooltip>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCopy(row) {
|
||||
const h = this.$createElement
|
||||
this.$notify({
|
||||
title: row.text + ' 复制成功',
|
||||
message: h('i', { style: 'color: teal' }, '已复制到剪贴板,请直接去 Ctrl+V 粘贴吧!')
|
||||
})
|
||||
},
|
||||
// 复制失败
|
||||
onError(row) {
|
||||
const h = this.$createElement
|
||||
this.$notify({
|
||||
title: row.text + ' 复制失败',
|
||||
message: h('i', { style: 'color: teal' }, '联系技术吧！')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-divider>分割成两列</el-divider>
|
||||
<div class="wrap">
|
||||
<split-pane :min-percent="20" :default-percent="30" split="vertical" @resize="resize">
|
||||
<template slot="paneL">
|
||||
<!-- 编辑自己的代码 -->
|
||||
<div class="paneL" />
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
<!-- 编辑自己的代码 -->
|
||||
<div class="paneR" />
|
||||
</template>
|
||||
</split-pane>
|
||||
</div>
|
||||
<el-divider>分割成三列</el-divider>
|
||||
<div class="wrap">
|
||||
<split-pane :min-percent="20" :default-percent="30" split="vertical" @resize="resize">
|
||||
<template slot="paneL">
|
||||
A
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
<split-pane split="horizontal">
|
||||
<template slot="paneL">
|
||||
B
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
C
|
||||
</template>
|
||||
</split-pane>
|
||||
</template>
|
||||
</split-pane>
|
||||
</div>
|
||||
<el-divider>水平分割</el-divider>
|
||||
<div class="wrap">
|
||||
<split-pane :min-percent="20" :default-percent="30" split="horizontal" @resize="resize">
|
||||
<div slot="first" style="width: 100%;height: 100%;background-color: red" />
|
||||
<div slot="second" style="width: 100%;height: 100%;background-color: blue" />
|
||||
</split-pane>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SplitPaneDemo',
|
||||
methods: {
|
||||
resize() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap{
|
||||
height:300px;
|
||||
.paneL{
|
||||
background-color:red;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
.paneR{
|
||||
background-color: blue;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div>
|
||||
<el-input v-model="sendVal" style="width: 300px" />
|
||||
<el-button @click="onConnectClick">连接</el-button>
|
||||
<el-button @click="onSendClick">发送</el-button>
|
||||
<el-button @click="onCloseClick">关闭</el-button>
|
||||
</div>
|
||||
<el-divider>返回内容</el-divider>
|
||||
<div style="width: 300px;min-height: 200px">{{ responseTxt }}</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import MyWebSocket from '@/utils/websocket'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
client: null,
|
||||
sendVal: '',
|
||||
responseTxt: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'websocketApi',
|
||||
'user'
|
||||
])
|
||||
},
|
||||
// mounted() {},
|
||||
destroyed() {
|
||||
if (this.client) {
|
||||
this.client.close()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConnectClick() {
|
||||
// 获取mapGetters中的值
|
||||
// console.error('userInfo', this.user)
|
||||
const that = this
|
||||
that.client = new MyWebSocket(that, that.websocketApi.replaceAll('{sid}', that.user.username))
|
||||
that.client.connect(function(event) {
|
||||
console.info('=============== MyWebSocket:event', event)
|
||||
}, function(msgEvent) {
|
||||
console.info('=============== MyWebSocket:msgEvent', msgEvent)
|
||||
that.responseTxt = that.responseTxt + msgEvent.data + ''
|
||||
})
|
||||
},
|
||||
onSendClick() {
|
||||
if (this.client) {
|
||||
this.client.sendData({
|
||||
msgType: 'sc',
|
||||
userIds: ['123456'],
|
||||
content: this.sendVal
|
||||
})
|
||||
this.client.sendData({
|
||||
msgType: 'gc',
|
||||
content: this.sendVal
|
||||
})
|
||||
}
|
||||
},
|
||||
onCloseClick() {
|
||||
if (this.client) {
|
||||
this.client.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#btn {
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
border-radius: 6px;
|
||||
background-color: #eee;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#btn:active {
|
||||
background-color: #ddd;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<p class="warn-content">
|
||||
Yaml编辑器 基于
|
||||
<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" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Yaml from '@/components/YamlEdit/index.vue'
|
||||
export default {
|
||||
name: 'YamlEdit',
|
||||
components: { Yaml },
|
||||
data() {
|
||||
return {
|
||||
height: document.documentElement.clientHeight - 210 + 'px',
|
||||
value: '# 展示数据，如需更换主题，请在src/components/YamlEdit 目录中搜索原主题名称进行替换\n' +
|
||||
'\n' +
|
||||
'# ===================================================================\n' +
|
||||
'# Spring Boot configuration.\n' +
|
||||
'#\n' +
|
||||
'# This configuration will be overridden by the Spring profile you use,\n' +
|
||||
'# for example application-dev.yml if you use the "dev" profile.\n' +
|
||||
'#\n' +
|
||||
'# More information on profiles: https://www.jhipster.tech/profiles/\n' +
|
||||
'# More information on configuration properties: https://www.jhipster.tech/common-application-properties/\n' +
|
||||
'# ===================================================================\n' +
|
||||
'\n' +
|
||||
'# ===================================================================\n' +
|
||||
'# Standard Spring Boot properties.\n' +
|
||||
'# Full reference is available at:\n' +
|
||||
'# http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html\n' +
|
||||
'# ===================================================================\n' +
|
||||
'\n' +
|
||||
'eureka:\n' +
|
||||
' client:\n' +
|
||||
' enabled: true\n' +
|
||||
' healthcheck:\n' +
|
||||
' enabled: true\n' +
|
||||
' fetch-registry: true\n' +
|
||||
' register-with-eureka: true\n' +
|
||||
' instance-info-replication-interval-seconds: 10\n' +
|
||||
' registry-fetch-interval-seconds: 10\n' +
|
||||
' instance:\n' +
|
||||
' appname: product\n' +
|
||||
' instanceId: product:${spring.application.instance-id:${random.value}}\n' +
|
||||
' #instanceId: 127.0.0.1:9080\n' +
|
||||
' lease-renewal-interval-in-seconds: 5\n' +
|
||||
' lease-expiration-duration-in-seconds: 10\n' +
|
||||
' status-page-url-path: ${management.endpoints.web.base-path}/info\n' +
|
||||
' health-check-url-path: ${management.endpoints.web.base-path}/health\n' +
|
||||
' metadata-map:\n' +
|
||||
' zone: primary # This is needed for the load balancer\n' +
|
||||
' profile: ${spring.profiles.active}\n' +
|
||||
' version: ${info.project.version:}\n' +
|
||||
' git-version: ${git.commit.id.describe:}\n' +
|
||||
' git-commit: ${git.commit.id.abbrev:}\n' +
|
||||
' git-branch: ${git.branch:}\n' +
|
||||
'ribbon:\n' +
|
||||
' ReadTimeout: 120000\n' +
|
||||
' ConnectTimeout: 300000\n' +
|
||||
' eureka:\n' +
|
||||
' enabled: true\n' +
|
||||
'zuul:\n' +
|
||||
' host:\n' +
|
||||
' connect-timeout-millis: 5000\n' +
|
||||
' max-per-route-connections: 10000\n' +
|
||||
' max-total-connections: 5000\n' +
|
||||
' socket-timeout-millis: 60000\n' +
|
||||
' semaphore:\n' +
|
||||
' max-semaphores: 500\n' +
|
||||
'\n' +
|
||||
'feign:\n' +
|
||||
' hystrix:\n' +
|
||||
' enabled: true\n' +
|
||||
' client:\n' +
|
||||
' config:\n' +
|
||||
' default:\n' +
|
||||
' connectTimeout: 500000\n' +
|
||||
' readTimeout: 500000\n' +
|
||||
'\n' +
|
||||
'# See https://github.com/Netflix/Hystrix/wiki/Configuration\n' +
|
||||
'hystrix:\n' +
|
||||
' command:\n' +
|
||||
' default:\n' +
|
||||
' circuitBreaker:\n' +
|
||||
' sleepWindowInMilliseconds: 100000\n' +
|
||||
' forceClosed: true\n' +
|
||||
' execution:\n' +
|
||||
' isolation:\n' +
|
||||
'# strategy: SEMAPHORE\n' +
|
||||
'# See https://github.com/spring-cloud/spring-cloud-netflix/issues/1330\n' +
|
||||
' thread:\n' +
|
||||
' timeoutInMilliseconds: 60000\n' +
|
||||
' shareSecurityContext: true\n' +
|
||||
'\n' +
|
||||
'management:\n' +
|
||||
' endpoints:\n' +
|
||||
' web:\n' +
|
||||
' base-path: /management\n' +
|
||||
' exposure:\n' +
|
||||
' include: ["configprops", "env", "health", "info", "threaddump"]\n' +
|
||||
' endpoint:\n' +
|
||||
' health:\n' +
|
||||
' show-details: when_authorized\n' +
|
||||
' info:\n' +
|
||||
' git:\n' +
|
||||
' mode: full\n' +
|
||||
' health:\n' +
|
||||
' mail:\n' +
|
||||
' enabled: false # When using the MailService, configure an SMTP server and set this to true\n' +
|
||||
' metrics:\n' +
|
||||
' enabled: false # http://micrometer.io/ is disabled by default, as we use http://metrics.dropwizard.io/ instead\n' +
|
||||
'\n' +
|
||||
'spring:\n' +
|
||||
' application:\n' +
|
||||
' name: product\n' +
|
||||
' jpa:\n' +
|
||||
' open-in-view: false\n' +
|
||||
' hibernate:\n' +
|
||||
' ddl-auto: update\n' +
|
||||
' naming:\n' +
|
||||
' physical-strategy: org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy\n' +
|
||||
' implicit-strategy: org.springframework.boot.orm.jpa.hibernate.SpringImplicitNamingStrategy\n' +
|
||||
' messages:\n' +
|
||||
' basename: i18n/messages\n' +
|
||||
' mvc:\n' +
|
||||
' favicon:\n' +
|
||||
' enabled: false\n' +
|
||||
' thymeleaf:\n' +
|
||||
' mode: HTML\n' +
|
||||
'security:\n' +
|
||||
' oauth2:\n' +
|
||||
' resource:\n' +
|
||||
' filter-order: 3\n' +
|
||||
'\n' +
|
||||
'server:\n' +
|
||||
' servlet:\n' +
|
||||
' session:\n' +
|
||||
' cookie:\n' +
|
||||
' http-only: true\n' +
|
||||
'\n' +
|
||||
'# Properties to be exposed on the /info management endpoint\n' +
|
||||
'info:\n' +
|
||||
' # Comma separated list of profiles that will trigger the ribbon to show\n' +
|
||||
' display-ribbon-on-profiles: "dev"\n' +
|
||||
'\n' +
|
||||
'# ===================================================================\n' +
|
||||
'# JHipster specific properties\n' +
|
||||
'#\n' +
|
||||
'# Full reference is available at: https://www.jhipster.tech/common-application-properties/\n' +
|
||||
'# ===================================================================\n' +
|
||||
'\n' +
|
||||
'jhipster:\n' +
|
||||
' async:\n' +
|
||||
' core-pool-size: 2\n' +
|
||||
' max-pool-size: 50\n' +
|
||||
' queue-capacity: 10000\n' +
|
||||
' # By default CORS is disabled. Uncomment to enable.\n' +
|
||||
' #cors:\n' +
|
||||
' #allowed-origins: "*"\n' +
|
||||
' #allowed-methods: "*"\n' +
|
||||
' #allowed-headers: "*"\n' +
|
||||
' #exposed-headers: "Authorization,Link,X-Total-Count"\n' +
|
||||
' #allow-credentials: true\n' +
|
||||
' #max-age: 1800\n' +
|
||||
' mail:\n' +
|
||||
' from: product@localhost\n' +
|
||||
' swagger:\n' +
|
||||
' default-include-pattern: /api/.*\n' +
|
||||
' title: product API\n' +
|
||||
' description: product API documentation\n' +
|
||||
' version: 0.0.1\n' +
|
||||
' terms-of-service-url:\n' +
|
||||
' contact-name:\n' +
|
||||
' contact-url:\n' +
|
||||
' contact-email:\n' +
|
||||
' license:\n' +
|
||||
' license-url:\n' +
|
||||
'\n' +
|
||||
'# ===================================================================\n' +
|
||||
'# Application specific properties\n' +
|
||||
'# Add your own application properties here, see the ApplicationProperties class\n' +
|
||||
'# to have type-safe configuration, like in the JHipsterProperties above\n' +
|
||||
'#\n' +
|
||||
'# More documentation is available at:\n' +
|
||||
'# https://www.jhipster.tech/common-application-properties/\n' +
|
||||
'# ===================================================================\n' +
|
||||
'\n' +
|
||||
'# application:\n'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const that = this
|
||||
window.onresize = function temp() {
|
||||
that.height = document.documentElement.clientHeight - 210 + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="deptName"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="输入部门名称搜索"
|
||||
prefix-icon="el-icon-search"
|
||||
class="filter-item"
|
||||
@input="getDeptDatas"
|
||||
/>
|
||||
</div>
|
||||
<el-tree
|
||||
:data="deptData"
|
||||
:load="getDeptData"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
lazy
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { describeDeptList } from '@/api/system/dept'
|
||||
|
||||
export default {
|
||||
name: 'CuteDeptTree',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deptName: '',
|
||||
deptData: [],
|
||||
defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
|
||||
currentDept: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听currentDept变量
|
||||
currentDept(newValue) {
|
||||
this.$emit('input', newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDeptData(node, resolve) {
|
||||
const params = {}
|
||||
if (typeof node !== 'object') {
|
||||
if (node) {
|
||||
params['name'] = node
|
||||
}
|
||||
} else if (node.level !== 0) {
|
||||
params['pid'] = node.data.id
|
||||
}
|
||||
setTimeout(() => {
|
||||
describeDeptList(params).then(res => {
|
||||
if (resolve) {
|
||||
resolve(res.content)
|
||||
} else {
|
||||
this.deptDatas = res.content
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.$emit('node-click', data)
|
||||
this.$emit('input', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="users"
|
||||
style="width: 100%"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="支持用户姓名、手机号、邮箱、用户名查询"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading"
|
||||
@change="onChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import UserService from '@/api/system/user'
|
||||
|
||||
export default {
|
||||
name: 'CuteUserSelect',
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
users: this.value,
|
||||
loading: false,
|
||||
options: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听users变量
|
||||
users(newValue) {
|
||||
this.$emit('input', newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.queryUserMetaPage(query)
|
||||
}, 200)
|
||||
} else {
|
||||
this.options = []
|
||||
}
|
||||
},
|
||||
queryUserMetaPage(query, options) {
|
||||
const that = this
|
||||
UserService.queryUserMetaPage(query).then(res => {
|
||||
that.options = res
|
||||
})
|
||||
},
|
||||
onChange(value) {
|
||||
this.$emit('change', value)
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div style="padding: 50px">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="用户" prop="user">
|
||||
<!-- v-model 本质上是 :value 和 @input 事件的语法糖 -->
|
||||
<cute-user-select v-model="form.user" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门" prop="dept">
|
||||
<cute-dept-tree v-model="form.dept" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <el-divider content-position="left">用户选择框</el-divider>-->
|
||||
<!-- <cute-user-select @change="onUserSelectChange" />-->
|
||||
<!-- <el-divider content-position="left">部门树</el-divider>-->
|
||||
<!-- <cute-dept-tree @node-click="onDeptTreeNodeClick" />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import CuteUserSelect from '@/views/components/business/CuteUserSelect'
|
||||
import CuteDeptTree from '@/views/components/business/CuteDeptTree'
|
||||
|
||||
export default {
|
||||
name: 'DemoShow',
|
||||
components: { CuteDeptTree, CuteUserSelect },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
user: null,
|
||||
dept: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUserSelectChange(data) {
|
||||
console.error('onUserSelectChange=', data)
|
||||
},
|
||||
onDeptTreeNodeClick(data) {
|
||||
console.error('onDeptTreeNodeClick=', data)
|
||||
},
|
||||
onSubmit() {
|
||||
console.error('this.form=', this.form)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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
|
||||
@@ -0,0 +1,97 @@
|
||||
<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 class="grid">
|
||||
<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>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element-UI Icons">
|
||||
<div class="grid">
|
||||
<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>
|
||||
</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;
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
}
|
||||
.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>
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user