upd: 编码规范
This commit is contained in:
@@ -56,7 +56,8 @@
|
||||
"qs": "^6.10.1",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"vue": "^2.6.14",
|
||||
"vue": "2.7.16",
|
||||
"vue-clipboard2": "^0.3.3",
|
||||
"vue-count-to": "^1.0.13",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-echarts": "^5.0.0-beta.0",
|
||||
@@ -102,7 +103,7 @@
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.0",
|
||||
"tasksfile": "^5.1.1",
|
||||
"vue-template-compiler": "2.7.15"
|
||||
"vue-template-compiler": "2.7.16"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
|
||||
@@ -47,7 +47,7 @@ export default {
|
||||
cursorHeight: 0.9,
|
||||
// 替换主题这里需修改名称
|
||||
theme: 'idea',
|
||||
readOnly: true
|
||||
readOnly: false
|
||||
})
|
||||
this.editor.setSize('auto', this.height)
|
||||
this.editor.setValue(this.value)
|
||||
|
||||
@@ -9,6 +9,15 @@ import Element from 'element-ui'
|
||||
// 数据字典
|
||||
import dict from './components/Dict'
|
||||
|
||||
// 防止二次提交
|
||||
import { preventReClick } from '@/utils/commands'
|
||||
|
||||
// 一键复制插件
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
|
||||
// 窗口分割组件
|
||||
import SplitPane from 'vue-splitpane'
|
||||
|
||||
// 权限指令
|
||||
import checkPer from '@/utils/permission'
|
||||
import permission from './components/Permission'
|
||||
@@ -27,10 +36,56 @@ import './router/index' // permission control
|
||||
Vue.use(checkPer)
|
||||
Vue.use(permission)
|
||||
Vue.use(dict)
|
||||
Vue.use(preventReClick)
|
||||
Vue.use(VueClipboard)
|
||||
Vue.use(Element, {
|
||||
size: Cookies.get('size') || 'small' // set element-ui default size
|
||||
})
|
||||
|
||||
Vue.component('split-pane', SplitPane)
|
||||
|
||||
/**
|
||||
* 日期格式化<br/>
|
||||
* 例子: <el-tag>{{ scope.row.createTime | dateFormat }}</el-tag>
|
||||
*/
|
||||
Vue.filter('dateFormat', function(originVal) {
|
||||
if (originVal === undefined) {
|
||||
return ''
|
||||
}
|
||||
const dt = new Date(originVal)
|
||||
const y = dt.getFullYear()
|
||||
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
|
||||
const d = (dt.getDate() + '').padStart(2, '0')
|
||||
return `${y}-${m}-${d}`
|
||||
})
|
||||
|
||||
/**
|
||||
* 日期时间格式化
|
||||
*/
|
||||
Vue.filter('dateTimeFormat', function(originVal) {
|
||||
if (originVal === undefined) {
|
||||
return ''
|
||||
}
|
||||
const dt = new Date(originVal)
|
||||
const y = dt.getFullYear()
|
||||
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
|
||||
const d = (dt.getDate() + '').padStart(2, '0')
|
||||
const hh = (dt.getHours() + '').padStart(2, '0')
|
||||
const mm = (dt.getMinutes() + '').padStart(2, '0')
|
||||
const ss = (dt.getSeconds() + '').padStart(2, '0')
|
||||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
|
||||
})
|
||||
|
||||
/**
|
||||
* 金额格式化
|
||||
*/
|
||||
Vue.filter('priceFormat', function(data) {
|
||||
if (data !== undefined && data != null) {
|
||||
return data.toFixed(2)
|
||||
}
|
||||
return 0.00
|
||||
})
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
|
||||
@@ -2,10 +2,6 @@
|
||||
const baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
|
||||
const api = {
|
||||
state: {
|
||||
// 部署包上传
|
||||
deployUploadApi: baseUrl + '/api/deploy/upload',
|
||||
// SQL脚本上传
|
||||
databaseUploadApi: baseUrl + '/api/database/upload',
|
||||
// 图片上传
|
||||
imagesUploadApi: baseUrl + '/api/localStorage/pictures',
|
||||
// 修改头像
|
||||
@@ -14,6 +10,8 @@ const api = {
|
||||
qiNiuUploadApi: baseUrl + '/api/qiNiuContent',
|
||||
// Sql 监控
|
||||
sqlApi: baseUrl + '/druid/index.html',
|
||||
// websocket
|
||||
websocketApi: baseUrl + '/webSocket/{sid}',
|
||||
// swagger
|
||||
swaggerApi: baseUrl + '/doc.html',
|
||||
// 文件上传
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
/**
|
||||
* 防止重复提交指令<br/>
|
||||
* 例子: <el-button v-prevent-re-click >提交</el-button>
|
||||
*/
|
||||
const preventReClick = Vue.directive('preventReClick', {
|
||||
inserted(el, binding) {
|
||||
el.addEventListener('click', () => {
|
||||
if (!el.disabled) {
|
||||
el.disabled = true
|
||||
setTimeout(() => {
|
||||
el.disabled = false
|
||||
}, binding.value || 3000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export { preventReClick }
|
||||
@@ -281,28 +281,6 @@ export function debounce(func, wait, immediate) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This is just a simple version of deep copy
|
||||
* Has a lot of edge cases bug
|
||||
* If you want to use a perfect deep copy, use lodash's _.cloneDeep
|
||||
* @param {Object} source
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function deepClone(source) {
|
||||
if (!source && typeof source !== 'object') {
|
||||
throw new Error('error arguments', 'deepClone')
|
||||
}
|
||||
const targetObj = source.constructor === Array ? [] : {}
|
||||
Object.keys(source).forEach(keys => {
|
||||
if (source[keys] && typeof source[keys] === 'object') {
|
||||
targetObj[keys] = deepClone(source[keys])
|
||||
} else {
|
||||
targetObj[keys] = source[keys]
|
||||
}
|
||||
})
|
||||
return targetObj
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array} arr
|
||||
* @returns {Array}
|
||||
@@ -386,3 +364,12 @@ export function downloadFile(obj, name, suffix) {
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
// 数组去重
|
||||
export const uniqueArrays = (arr) => [...new Set(arr)]
|
||||
|
||||
// 获取变量类型
|
||||
export const type = (value) => Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
|
||||
|
||||
// 深拷贝对象
|
||||
export const deepClone = (obj) => JSON.parse(JSON.stringify(obj))
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
/**
|
||||
* 防止重复提交指令<br/>
|
||||
* 例子: <el-button v-prevent-re-click >提交</el-button>
|
||||
*/
|
||||
const preventReClick = Vue.directive('preventReClick', {
|
||||
inserted(el, binding) {
|
||||
el.addEventListener('click', () => {
|
||||
if (!el.disabled) {
|
||||
el.disabled = true
|
||||
setTimeout(() => {
|
||||
el.disabled = false
|
||||
}, binding.value || 3000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export { preventReClick }
|
||||
@@ -0,0 +1,183 @@
|
||||
/**
|
||||
* 消息提示工具
|
||||
* @type {{success: MessageUtil.success, warning: MessageUtil.warning, error: MessageUtil.error, info: MessageUtil.info}}
|
||||
*/
|
||||
const MessageUtil = {
|
||||
info: function(context, content) {
|
||||
context.$message(content)
|
||||
},
|
||||
success: function(context, content) {
|
||||
context.$message({
|
||||
message: content,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
warning: function(context, content) {
|
||||
context.$message({
|
||||
message: content,
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
error: function(context, content) {
|
||||
context.$message.error(content)
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 通知工具类
|
||||
* @type {{success: NotificationUtil.success, warning: NotificationUtil.warning, error: NotificationUtil.error, info: NotificationUtil.info}}
|
||||
*/
|
||||
const NotificationUtil = {
|
||||
info: function(context, content) {
|
||||
context.$notify({
|
||||
message: content
|
||||
})
|
||||
},
|
||||
success: function(context, content) {
|
||||
context.$notify({
|
||||
message: content,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
successDuration: function(context, content, durationTime) {
|
||||
context.$notify({
|
||||
message: content,
|
||||
type: 'success',
|
||||
duration: durationTime
|
||||
})
|
||||
},
|
||||
warning: function(context, content) {
|
||||
context.$notify({
|
||||
message: content,
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
error: function(context, content) {
|
||||
context.$notify({
|
||||
message: content,
|
||||
type: 'error'
|
||||
})
|
||||
},
|
||||
errorDuration: function(context, content, durationTime) {
|
||||
context.$notify({
|
||||
message: content,
|
||||
type: 'error',
|
||||
duration: durationTime
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const MessageBoxUtil = {
|
||||
/**
|
||||
* 确认消息对话框<br/>
|
||||
* 提示用户确认其已经触发的动作, 并询问是否进行此操作时会用到此对话框
|
||||
* @param context 上下文
|
||||
* @param questionText 提示语
|
||||
* @param msgType 消息类型(w、i、e、s)
|
||||
* @param confirmCallBack 确认回调
|
||||
* @param cancelCallBack 取消回调
|
||||
*/
|
||||
fullConfirm: function(context, questionText, msgType, confirmCallBack, cancelCallBack) {
|
||||
let currentType = 'info'
|
||||
if (msgType === 's') {
|
||||
currentType = 'success'
|
||||
} else if (msgType === 'e') {
|
||||
currentType = 'error'
|
||||
} else if (msgType === 'i') {
|
||||
currentType = 'info'
|
||||
} else if (msgType === 'w') {
|
||||
currentType = 'warning'
|
||||
}
|
||||
context.$confirm(questionText, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: currentType
|
||||
}).then(() => {
|
||||
if (confirmCallBack != null) {
|
||||
confirmCallBack()
|
||||
}
|
||||
}).catch(() => {
|
||||
if (cancelCallBack != null) {
|
||||
cancelCallBack()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 数据删除确认对话框
|
||||
* @param context 上下文
|
||||
* @param confirmCallBack 确认回调
|
||||
* @param cancelCallBack 取消回调
|
||||
*/
|
||||
deleteConfirm: function(context, confirmCallBack, cancelCallBack) {
|
||||
this.fullConfirm(context, '确定删除本条数据吗？', 'w', confirmCallBack, cancelCallBack)
|
||||
},
|
||||
/**
|
||||
* 数据删除确认对话框(自定义提示内容)
|
||||
* @param context 上下文
|
||||
* @param message 提示内容
|
||||
* @param confirmCallBack 确认回调
|
||||
* @param cancelCallBack 取消回调
|
||||
*/
|
||||
deleteMessageConfirm: function(context, message, confirmCallBack, cancelCallBack) {
|
||||
this.fullConfirm(context, message, 'w', confirmCallBack, cancelCallBack)
|
||||
},
|
||||
/**
|
||||
* 数据输入对话框
|
||||
* @param context 上下文
|
||||
* @param title 标题提示
|
||||
* @param patternText 正则表达式
|
||||
* @param errorMsg 校验失败消息内容
|
||||
* @param confirmCallBack 校验通过回调
|
||||
* @param cancelCallBack 取消回调
|
||||
*/
|
||||
textInputConfirm: function(context, title, patternText, errorMsg, confirmCallBack, cancelCallBack) {
|
||||
context.$prompt('', title, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: patternText,
|
||||
inputErrorMessage: errorMsg
|
||||
}).then(({ value }) => {
|
||||
if (confirmCallBack != null) {
|
||||
confirmCallBack(value)
|
||||
}
|
||||
}).catch(() => {
|
||||
if (cancelCallBack != null) {
|
||||
cancelCallBack()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 确认内容消息框
|
||||
* @param context 上下文
|
||||
* @param title 标题
|
||||
* @param content 内容
|
||||
*/
|
||||
showConfirm: function(context, title, content) {
|
||||
context.$alert(content, title, {
|
||||
confirmButtonText: '关闭'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 全屏加载动画<br/>
|
||||
* const loading = LoadingUtil.product()
|
||||
* loading.close()
|
||||
* @type {{product: (function(*): *)}}
|
||||
*/
|
||||
const LoadingUtil = {
|
||||
product: function(context) {
|
||||
return context.$loading({
|
||||
lock: true,
|
||||
text: '数据加载中',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
MessageUtil,
|
||||
MessageBoxUtil,
|
||||
NotificationUtil,
|
||||
LoadingUtil
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* 构造方法式
|
||||
* @param context
|
||||
* @param wsUri
|
||||
* @constructor
|
||||
*/
|
||||
function MyWebSocket(context, wsUri) {
|
||||
this.context = context
|
||||
this.wsUri = wsUri
|
||||
this.webSocket = null
|
||||
/**
|
||||
* 初始化WebSocket连接
|
||||
* @param handleError -> function (e) { e是异常本身 }
|
||||
* @param handleMessage -> function (e) { e.data是message }
|
||||
*/
|
||||
this.connect = function(handleError, handleMessage) {
|
||||
this.webSocket = new WebSocket(this.wsUri)
|
||||
// 连接发生错误
|
||||
this.webSocket.onerror = handleError
|
||||
// 收到消息
|
||||
this.webSocket.onmessage = handleMessage
|
||||
return this
|
||||
}
|
||||
/**
|
||||
* 发送客户端数据
|
||||
* @param data 客户端数据
|
||||
*/
|
||||
this.sendData = function(data) {
|
||||
this.webSocket.send(JSON.stringify(data))
|
||||
}
|
||||
/**
|
||||
* 用于关闭ws连接
|
||||
*/
|
||||
this.close = function() {
|
||||
console.info('关闭连接')
|
||||
if (this.webSocket.readyState === 1) {
|
||||
this.sendData([{}])
|
||||
this.webSocket.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default MyWebSocket
|
||||
@@ -0,0 +1,83 @@
|
||||
import store from '@/store'
|
||||
|
||||
const PermissionUtil = {
|
||||
/**
|
||||
* 权限校验
|
||||
* @param value
|
||||
* @returns {boolean|*}
|
||||
*/
|
||||
validate: function(value) {
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
// 拥有的权限
|
||||
const roles = store.getters && store.getters.roles
|
||||
// 需要的权限
|
||||
const permissionRoles = value
|
||||
return roles.some(role => {
|
||||
return permissionRoles.includes(role)
|
||||
})
|
||||
} else {
|
||||
console.error(`need roles! Like v-permission="['admin','editor']"`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const StringUtil = {
|
||||
/**
|
||||
* 字符串转数字
|
||||
* @param value
|
||||
* @returns {Number|*}
|
||||
*/
|
||||
toNumber: function(value) {
|
||||
if (value) {
|
||||
return Number(value)
|
||||
}
|
||||
return 0
|
||||
},
|
||||
/**
|
||||
* 保留几位小数
|
||||
* @param num Number
|
||||
* @param accuracy 精度
|
||||
* @returns {string|number}
|
||||
*/
|
||||
retailNum: function(num, accuracy) {
|
||||
return num instanceof Number ? num.toFixed(accuracy) : 0
|
||||
}
|
||||
}
|
||||
|
||||
const ObjectUtil = {
|
||||
/**
|
||||
* 浅拷贝
|
||||
* @param source 源对象
|
||||
* @param target 目标对象
|
||||
* @returns {*}
|
||||
*/
|
||||
copy: function(source, target) {
|
||||
return Object.assign(target, source)
|
||||
}
|
||||
}
|
||||
|
||||
const LabelUtil = {
|
||||
/**
|
||||
* 根据value获取label
|
||||
* @param options /
|
||||
* @param value /
|
||||
* @returns {*}
|
||||
*/
|
||||
getLabel: function(options, value) {
|
||||
if (options instanceof Array) {
|
||||
const find = options.find(f => f.value === value)
|
||||
if (find) {
|
||||
return find.label
|
||||
}
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
PermissionUtil,
|
||||
StringUtil,
|
||||
ObjectUtil,
|
||||
LabelUtil
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* @param context 上下文，例如 this
|
||||
* @param wsUri websocket地址
|
||||
* @constructor
|
||||
*/
|
||||
function EasyWebSocket(context, wsUri) {
|
||||
this.context = context
|
||||
this.wsUri = wsUri
|
||||
this.webSocket = null
|
||||
/**
|
||||
* 初始化WebSocket连接
|
||||
* @param handleError -> function (e) { e是异常本身 }
|
||||
* @param handleMessage -> function (e) { e.data是message }
|
||||
*/
|
||||
this.connect = function(handleError, handleMessage) {
|
||||
this.webSocket = new WebSocket(this.wsUri)
|
||||
// 连接发生错误
|
||||
this.webSocket.onerror = handleError
|
||||
// 收到消息
|
||||
this.webSocket.onmessage = handleMessage
|
||||
return this
|
||||
}
|
||||
/**
|
||||
* 发送客户端数据
|
||||
* @param data 客户端数据
|
||||
*/
|
||||
this.sendData = function(data) {
|
||||
this.webSocket.send(JSON.stringify(data))
|
||||
}
|
||||
/**
|
||||
* 用于关闭ws连接
|
||||
*/
|
||||
this.close = function() {
|
||||
console.info('关闭连接')
|
||||
if (this.webSocket.readyState === 1) {
|
||||
this.sendData([{}])
|
||||
this.webSocket.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default EasyWebSocket
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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,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,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>
|
||||
@@ -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>
|
||||
|
||||
@@ -168,47 +168,58 @@ export default {
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
font-size: xx-large;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
background: rgba(255, 255, 255, 0.40);
|
||||
width: 400px;
|
||||
padding: 10% 25px 5px 25px;
|
||||
|
||||
.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 {
|
||||
|
||||
float: right;
|
||||
}
|
||||
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
}
|
||||
|
||||
.login-code {
|
||||
width: 33%;
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img{
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align:middle
|
||||
}
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -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="用户昵称" />
|
||||
|
||||
@@ -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>
|
||||
<!--分页组件-->
|
||||
|
||||
@@ -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: [
|
||||
|
||||
Reference in New Issue
Block a user