odboy/cutejava
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: 编码规范

Browse Source
This commit is contained in:
odboy
2025-03-24 20:10:58 +08:00
parent c3afa4361e
commit 8c65ac7d16
23 changed files with 920 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cutejava-ui/src/views/components/ClipboardDemo.vue
+61
View File
@@ -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/OneKeyCopy'
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>
cutejava-ui/src/views/components/CodemirrorDemo.vue
+18
View File
@@ -0,0 +1,18 @@
<template>
<JavaEdit height="500px" :value="form.content" :read-only="false" />
</template>
<script>
import JavaEdit from '@/components/JavaEdit'
export default {
components: { JavaEdit },
data() {
return {
form: {
content: ''
}
}
}
}
</script>
cutejava-ui/src/views/components/CountToDemo.vue
+40
View File
@@ -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>
cutejava-ui/src/views/components/DragTableDemo.vue
+71
View File
@@ -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>
cutejava-ui/src/views/components/OneKeyCopy.vue
+44
View File
@@ -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>
cutejava-ui/src/views/components/SplitPaneDemo.vue
+67
View File
@@ -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>
cutejava-ui/src/views/components/WebSocketDemo.vue
+80
View File
@@ -0,0 +1,80 @@
<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'
])
},
// mounted() {},
// destroyed() {
// if (this.client) {
// this.client.close()
// }
// },
methods: {
onConnectClick() {
const that = this
that.client = new MyWebSocket(that, that.websocketApi.replaceAll('{sid}', '101314'))
that.client.connect(function(event) {
console.error('=============== 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>
cutejava-ui/src/views/devops/demo.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="18" />
<el-col :span="6" />
</el-row></div>
</template>
<script>
export default {
name: 'DemoTemplate',
data() {
return {
}
},
mounted() {
this.initData()
},
methods: {
initData() {
}
}
}
</script>
cutejava-ui/src/views/login.vue
+50 -39
View File
@@ -168,47 +168,58 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
.login {
display: flex;
justify-content: flex-end;
height: 100%;
background-size: cover;
}
.title {
margin: 0 auto 30px auto;
text-align: center;
font-size: xx-large;
color: white;
}
.login-form {
background: rgba(255, 255, 255, 0.40);
width: 400px;
padding: 10% 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 385px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon{
height: 39px;width: 14px;margin-left: 2px;
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
img{
cursor: pointer;
vertical-align:middle
}
float: right;
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
</style>
cutejava-ui/src/views/monitor/online/index.vue
-1
View File
@@ -23,7 +23,6 @@
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" prop="uid" label="会话编号" />
<el-table-column prop="userName" label="用户名" />
<el-table-column prop="nickName" label="用户昵称" />
cutejava-ui/src/views/tools/storage/local/index.vue
+1 -1
View File
@@ -93,7 +93,7 @@
<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="createBy" label="操作人" />
<el-table-column prop="createTime" label="创建日期" />
</el-table>
<!--分页组件-->
cutejava-ui/src/views/tools/storage/qiniu/form.vue
+1 -1
View File
@@ -40,7 +40,7 @@ import { get, update } from '@/api/tools/qiniu'
export default {
data() {
return {
zones: ['华东', '华北', '华南', '北美', '东南亚'], dialog: false,
zones: ['华东', '华北', '东南亚'], dialog: false,
loading: false, form: { accessKey: '', secretKey: '', bucket: '', host: '', zone: '', type: '' },
rules: {
accessKey: [