Skip to content

D
datax-cloud
Commit bf1004c0 by yuwei
Options

项目初始化

parent 6e45a2fe
Showing with 1998 additions and 2723 deletions
datax-common/datax-common-dictionary/src/main/java/cn/datax/common/dictionary/config/DictAnalysis.java
......@@ -4,10 +4,8 @@ import cn.datax.common.annotation.DictAop;
import cn.datax.common.core.JsonPage;
import cn.datax.common.core.R;
import cn.datax.common.dictionary.utils.DictUtil;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.node.ObjectNode;
import org.springframework.beans.factory.annotation.Autowired;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.server.ServerHttpRequest;
......@@ -22,20 +20,14 @@ import java.util.List;
@ControllerAdvice
public class DictAnalysis implements ResponseBodyAdvice {
@Autowired
private ObjectMapper objectMapper;
@Override
public Object beforeBodyWrite(Object o, MethodParameter methodParameter, MediaType mediaType, Class aClass, ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse) {
if (o instanceof R) {
if (((R) o).getData() instanceof JsonPage) {
List list = ((JsonPage) ((R) o).getData()).getData();
List<ObjectNode> items = new ArrayList<>();
List<JSONObject> items = new ArrayList<>();
for (Object record : list) {
ObjectNode item = null;
try {
item = (ObjectNode) objectMapper.readTree(objectMapper.writeValueAsString(record));
} catch (JsonProcessingException e) {}
JSONObject item = JSONObject.parseObject(JSON.toJSONString(record));
for (Field field : record.getClass().getDeclaredFields()) {
// 获取自定义注解
DictAop dictAop = field.getAnnotation(DictAop.class);
......@@ -47,7 +39,7 @@ public class DictAnalysis implements ResponseBodyAdvice {
// 字典翻译
Object dictValue = DictUtil.getInstance().getDictItemValue(code, object.toString());
if (null != dictValue) {
item.put(field.getName() + "_dictText", String.valueOf(dictValue));
item.put(field.getName() + "_dictText", dictValue);
}
}
}
......
datax-config/src/main/resources/config/datax-service-quartz-dev.yml
......@@ -18,6 +18,13 @@ spring:
username: root
password: 1234@abcd
url: jdbc:mysql://localhost:3306/data_cloud?useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
# quartz oracle数据库
# quartz:
# driver-class-name: oracle.jdbc.OracleDriver
# username: data_cloud_quartz
# password: data_cloud_quartz
# url: jdbc:oracle:thin:@192.168.174.130:1521:orcl
# quartz mysql数据库
quartz:
driver-class-name: com.mysql.cj.jdbc.Driver
username: root
......@@ -83,4 +90,4 @@ swagger:
contact:
name: yuwei
url: http://www.baidu.com
email: 312075478@qq.com
\ No newline at end of file
email: 312075478@qq.com
datax-config/src/main/resources/config/datax-service-workflow-dev.yml
......@@ -21,6 +21,13 @@ spring:
url: jdbc:p6spy:mysql://localhost:3306/data_cloud?useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
username: root
password: 1234@abcd
# flowable oracle数据库
# flowable:
# driver-class-name: oracle.jdbc.OracleDriver
# username: data_cloud_flowable
# password: data_cloud_flowable
# url: jdbc:oracle:thin:@192.168.174.130:1521:orcl
# flowable mysql数据库
flowable:
driver-class-name: com.mysql.cj.jdbc.Driver
username: root
......
datax-ui/.editorconfig deleted 100644 → 0
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
datax-ui/.eslintrc.js deleted 100644 → 0
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
datax-ui/README.md deleted 100644 → 0
# vue-template
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
datax-ui/babel.config.js deleted 100644 → 0
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
datax-ui/package-lock.json deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
datax-ui/package.json deleted 100644 → 0
{
"name": "vue-template",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@riophae/vue-treeselect": "^0.4.0",
"@ztree/ztree_v3": "^3.5.44",
"axios": "^0.19.1",
"core-js": "^3.4.4",
"echarts": "^4.8.0",
"element-ui": "^2.13.0",
"jquery": "^3.5.1",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.1.0",
"screenfull": "^5.0.0",
"sql-formatter": "^2.3.3",
"vue": "^2.6.10",
"vue-codemirror": "^4.0.6",
"vue-grid-layout": "^2.3.7",
"vue-router": "^3.1.3",
"vuedraggable": "^2.24.0",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-plugin-router": "^4.1.0",
"@vue/cli-plugin-vuex": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"svg-sprite-loader": "^4.1.6",
"vue-template-compiler": "^2.6.10"
}
}
datax-ui/src/components/RightPanel/index.vue deleted 100644 → 0
<template>
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
<div class="rightPanel-background" />
<div class="rightPanel">
<div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
<i :class="show?'el-icon-close':'el-icon-setting'" />
</div>
<div class="rightPanel-items">
<slot />
</div>
</div>
</div>
</template>
<script>
import { addClass, removeClass } from '@/utils'
export default {
name: 'RightPanel',
props: {
clickNotClose: {
default: false,
type: Boolean
},
buttonTop: {
default: 250,
type: Number
}
},
data () {
return {
show: false
}
},
computed: {
theme () {
return this.$store.state.settings.theme
}
},
watch: {
show (value) {
if (value && !this.clickNotClose) {
this.addEventClick()
}
if (value) {
addClass(document.body, 'showRightPanel')
} else {
removeClass(document.body, 'showRightPanel')
}
}
},
mounted () {
this.insertToBody()
},
beforeDestroy () {
const elx = this.$refs.rightPanel
elx.remove()
},
methods: {
addEventClick () {
window.addEventListener('click', this.closeSidebar)
},
closeSidebar (evt) {
const parent = evt.target.closest('.rightPanel')
if (!parent) {
this.show = false
window.removeEventListener('click', this.closeSidebar)
}
},
insertToBody () {
const elx = this.$refs.rightPanel
const body = document.querySelector('body')
body.insertBefore(elx, body.firstChild)
}
}
}
</script>
<style>
.showRightPanel {
overflow: hidden;
position: relative;
width: calc(100% - 15px);
}
</style>
<style lang="scss" scoped>
.rightPanel-background {
position: fixed;
top: 0;
left: 0;
opacity: 0;
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
background: rgba(0, 0, 0, .2);
z-index: -1;
}
.rightPanel {
width: 100%;
max-width: 260px;
height: 100vh;
position: fixed;
top: 0;
right: 0;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7, .3, .1, 1);
transform: translate(100%);
background: #fff;
z-index: 40000;
}
.show {
transition: all .3s cubic-bezier(.7, .3, .1, 1);
.rightPanel-background {
z-index: 20000;
opacity: 1;
width: 100%;
height: 100%;
}
.rightPanel {
transform: translate(0);
}
}
.handle-button {
width: 48px;
height: 48px;
position: absolute;
left: -48px;
text-align: center;
font-size: 24px;
border-radius: 6px 0 0 6px !important;
z-index: 0;
pointer-events: auto;
cursor: pointer;
color: #fff;
line-height: 48px;
i {
font-size: 24px;
line-height: 48px;
}
}
</style>
datax-ui/src/components/SizeSelect/index.vue deleted 100644 → 0
<template>
<el-dropdown trigger="click" @command="handleSetSize">
<div>
<svg-icon class-name="size-icon" icon-class="size" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
{{
item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
data () {
return {
sizeOptions: [
{ label: '默认', value: 'default' },
{ label: '正常', value: 'medium' },
{ label: '中等', value: 'small' },
{ label: '紧凑', value: 'mini' }
]
}
},
computed: {
size () {
return this.$store.getters.size
}
},
methods: {
handleSetSize (size) {
this.$ELEMENT.size = size
this.$store.dispatch('app/setSize', size)
this.refreshView()
this.$message({
message: 'Switch Size Success',
type: 'success'
})
},
refreshView () {
// In order to make the cached page re-rendered
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
const { fullPath } = this.$route
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
}
}
}
</script>
datax-ui/src/components/Ztree/index.vue deleted 100644 → 0
<template>
<div class="ztree" :id="ztreeId"></div>
</template>
<script>
import * as $ from "jquery";
if(!window.jQuery){
window.jQuery = $;
}
require("@ztree/ztree_v3/js/jquery.ztree.all");
require("@ztree/ztree_v3/css/metroStyle/metroStyle.css");
export default {
name: "Ztree",
props: {
setting: {
type: Object,
require: false,
default: function(){
return {}
}
},
nodes: {
type: Array,
require: true,
default: function(){
return []
}
}
},
data() {
return {
ztreeId: 'ztree_'+ parseInt(Math.random() * 1e10),
ztreeObj: null,
ztreeSetting: {
data: {
simpleData: {
enable: true,
pIdKey: "pid"
}
},
view: {
showIcon: false
},
callback: {
onAsyncError: (...arg) => {
this.$emit('onAsyncError', ...arg)
},
onAsyncSuccess: (...arg) => {
this.$emit('onAsyncSuccess', ...arg)
},
onCheck: (...arg) => {
this.$emit('onCheck', ...arg)
},
onClick: (...arg) => {
this.$emit('onClick', ...arg)
},
onCollapse: (...arg) => {
this.$emit('onCollapse', ...arg)
},
onDblClick: (...arg) => {
this.$emit('onDblClick', ...arg)
},
onDrag: (...arg) => {
this.$emit('onDrag', ...arg)
},
onDragMove: (...arg) => {
this.$emit('onDragMove', ...arg)
},
onDrop: (...arg) => {
this.$emit('onDrop', ...arg)
},
onExpand: (...arg) => {
this.$emit('onExpand', ...arg)
},
onMouseDown: (...arg) => {
this.$emit('onMouseDown', ...arg)
},
onMouseUp: (...arg) => {
this.$emit('onMouseUp', ...arg)
},
onRemove: (...arg) => {
this.$emit('onRemove', ...arg)
},
onRename: (...arg) => {
this.$emit('onRename', ...arg)
},
onRightClick: (...arg) => {
this.$emit('onRightClick', ...arg)
}
}
}
}
},
mounted() {
if(this.ztreeObj){
this.ztreeObj.destroy();
}
this.ztreeObj = $.fn.zTree.init($("#"+this.ztreeId), Object.assign({}, this.ztreeSetting, this.setting), this.nodes);
this.$emit('onCreated', this.ztreeObj)
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/layout/components/Settings/index.vue deleted 100644 → 0
<template>
<div class="drawer-container">
<div>
<h3 class="drawer-title">系统布局配置</h3>
<div class="drawer-item">
<span>主题色</span>
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
</div>
<div class="drawer-item">
<span>开启 Tags-View</span>
<el-switch v-model="tagsView" class="drawer-switch" />
</div>
<div class="drawer-item">
<span>固定 Header</span>
<el-switch v-model="fixedHeader" class="drawer-switch" />
</div>
<div class="drawer-item">
<span>侧边栏 Logo</span>
<el-switch v-model="sidebarLogo" class="drawer-switch" />
</div>
</div>
</div>
</template>
<script>
import ThemePicker from '@/components/ThemePicker'
export default {
components: { ThemePicker },
data () {
return {}
},
computed: {
fixedHeader: {
get () {
return this.$store.state.settings.fixedHeader
},
set (val) {
this.$store.dispatch('settings/changeSetting', {
key: 'fixedHeader',
value: val
})
}
},
tagsView: {
get () {
return this.$store.state.settings.tagsView
},
set (val) {
this.$store.dispatch('settings/changeSetting', {
key: 'tagsView',
value: val
})
}
},
sidebarLogo: {
get () {
return this.$store.state.settings.sidebarLogo
},
set (val) {
this.$store.dispatch('settings/changeSetting', {
key: 'sidebarLogo',
value: val
})
}
}
},
methods: {
themeChange (val) {
this.$store.dispatch('settings/changeSetting', {
key: 'theme',
value: val
})
}
}
}
</script>
<style lang="scss" scoped>
.drawer-container {
padding: 24px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
.drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, .85);
font-size: 14px;
line-height: 22px;
}
.drawer-item {
color: rgba(0, 0, 0, .65);
font-size: 14px;
padding: 12px 0;
}
.drawer-switch {
float: right
}
}
</style>
datax-ui/src/layout/components/TagsView/ScrollPane.vue deleted 100644 → 0
<template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot />
</el-scrollbar>
</template>
<script>
const tagAndTagSpacing = 4 // tagAndTagSpacing
export default {
name: 'ScrollPane',
data () {
return {
left: 0
}
},
computed: {
scrollWrapper () {
return this.$refs.scrollContainer.$refs.wrap
}
},
methods: {
handleScroll (e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
},
moveToTarget (currentTag) {
const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = this.scrollWrapper
const tagList = this.$parent.$refs.tag
let firstTag = null
let lastTag = null
// find first tag and last tag
if (tagList.length > 0) {
firstTag = tagList[0]
lastTag = tagList[tagList.length - 1]
}
if (firstTag === currentTag) {
$scrollWrapper.scrollLeft = 0
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else {
// find preTag and nextTag
const currentIndex = tagList.findIndex(item => item === currentTag)
const prevTag = tagList[currentIndex - 1]
const nextTag = tagList[currentIndex + 1]
// the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
// the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
}
}
}
}
}
</script>
<style lang="scss" scoped>
.scroll-container {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
::v-deep {
.el-scrollbar__bar {
bottom: 0px;
}
.el-scrollbar__wrap {
height: 49px;
}
}
}
</style>
datax-ui/src/layout/components/TagsView/index.vue deleted 100644 → 0
<template>
<div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper">
<router-link
v-for="tag in visitedViews"
ref="tag"
:key="tag.path"
:class="isActive(tag)?'active':''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span"
class="tags-view-item"
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)"
>
{{ tag.title }}
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
</scroll-pane>
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags(selectedTag)">关闭所有</li>
</ul>
</div>
</template>
<script>
import ScrollPane from './ScrollPane'
import path from 'path'
export default {
components: { ScrollPane },
data () {
return {
visible: false,
top: 0,
left: 0,
selectedTag: {},
affixTags: []
}
},
computed: {
visitedViews () {
return this.$store.state.tagsView.visitedViews
},
routes () {
return this.$store.state.permission.routes
}
},
watch: {
$route () {
this.addTags()
this.moveToCurrentTag()
},
visible (value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
},
mounted () {
this.initTags()
this.addTags()
},
methods: {
isActive (route) {
return route.path === this.$route.path
},
isAffix (tag) {
return tag.meta && tag.meta.affix
},
filterAffixTags (routes, basePath = '/') {
let tags = []
routes.forEach(route => {
if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path)
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
meta: { ...route.meta }
})
}
if (route.children) {
const tempTags = this.filterAffixTags(route.children, route.path)
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags]
}
}
})
return tags
},
initTags () {
const affixTags = this.affixTags = this.filterAffixTags(this.routes)
for (const tag of affixTags) {
// Must have tag name
if (tag.name) {
this.$store.dispatch('tagsView/addVisitedView', tag)
}
}
},
addTags () {
const { name } = this.$route
if (name) {
this.$store.dispatch('tagsView/addView', this.$route)
}
return false
},
moveToCurrentTag () {
const tags = this.$refs.tag
this.$nextTick(() => {
for (const tag of tags) {
if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag)
// when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch('tagsView/updateVisitedView', this.$route)
}
break
}
}
})
},
refreshSelectedTag (view) {
this.$store.dispatch('tagsView/delCachedView', view).then(() => {
const { fullPath } = view
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
})
},
closeSelectedTag (view) {
this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
if (this.isActive(view)) {
this.toLastView(visitedViews, view)
}
})
},
closeOthersTags () {
this.$router.push(this.selectedTag)
this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
this.moveToCurrentTag()
})
},
closeAllTags (view) {
this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
if (this.affixTags.some(tag => tag.path === view.path)) {
return
}
this.toLastView(visitedViews, view)
})
},
toLastView (visitedViews, view) {
const latestView = visitedViews.slice(-1)[0]
if (latestView) {
this.$router.push(latestView.fullPath)
} else {
// now the default is to redirect to the home page if there is no tags-view,
// you can adjust it according to your needs.
if (view.name === 'Dashboard') {
// to reload home page
this.$router.replace({ path: '/redirect' + view.fullPath })
} else {
this.$router.push('/')
}
}
},
openMenu (tag, e) {
const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
const offsetWidth = this.$el.offsetWidth // container width
const maxLeft = offsetWidth - menuMinWidth // left boundary
const left = e.clientX - offsetLeft + 15 // 15: margin right
if (left > maxLeft) {
this.left = maxLeft
} else {
this.left = left
}
this.top = e.clientY
this.visible = true
this.selectedTag = tag
},
closeMenu () {
this.visible = false
}
}
}
</script>
<style lang="scss" scoped>
.tags-view-container {
height: 34px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: '';
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
}
</style>
<style lang="scss">
//reset element css of el-icon-close
.tags-view-wrapper {
.tags-view-item {
.el-icon-close {
width: 16px;
height: 16px;
vertical-align: 2px;
border-radius: 50%;
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
color: #fff;
}
}
}
}
</style>
datax-ui/src/layout/components/index.js deleted 100644 → 0
export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Settings } from './Settings'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'
datax-ui/src/store/index.js deleted 100644 → 0
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
datax-ui/src/store/modules/tagsView.js deleted 100644 → 0
const state = {
visitedViews: [],
cachedViews: []
}
const mutations = {
ADD_VISITED_VIEW: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-name'
})
)
},
ADD_CACHED_VIEW: (state, view) => {
if (state.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
}
},
DEL_VISITED_VIEW: (state, view) => {
for (const [i, v] of state.visitedViews.entries()) {
if (v.path === view.path) {
state.visitedViews.splice(i, 1)
break
}
}
},
DEL_CACHED_VIEW: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
index > -1 && state.cachedViews.splice(index, 1)
},
DEL_OTHERS_VISITED_VIEWS: (state, view) => {
state.visitedViews = state.visitedViews.filter(v => {
return v.meta.affix || v.path === view.path
})
},
DEL_OTHERS_CACHED_VIEWS: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
if (index > -1) {
state.cachedViews = state.cachedViews.slice(index, index + 1)
} else {
// if index = -1, there is no cached tags
state.cachedViews = []
}
},
DEL_ALL_VISITED_VIEWS: state => {
// keep affix tags
const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
state.visitedViews = affixTags
},
DEL_ALL_CACHED_VIEWS: state => {
state.cachedViews = []
},
UPDATE_VISITED_VIEW: (state, view) => {
for (let v of state.visitedViews) {
if (v.path === view.path) {
v = Object.assign(v, view)
break
}
}
}
}
const actions = {
addView ({ dispatch }, view) {
dispatch('addVisitedView', view)
dispatch('addCachedView', view)
},
addVisitedView ({ commit }, view) {
commit('ADD_VISITED_VIEW', view)
},
addCachedView ({ commit }, view) {
commit('ADD_CACHED_VIEW', view)
},
delView ({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delVisitedView', view)
dispatch('delCachedView', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delVisitedView ({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_VISITED_VIEW', view)
resolve([...state.visitedViews])
})
},
delCachedView ({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_CACHED_VIEW', view)
resolve([...state.cachedViews])
})
},
delOthersViews ({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delOthersVisitedViews', view)
dispatch('delOthersCachedViews', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delOthersVisitedViews ({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_OTHERS_VISITED_VIEWS', view)
resolve([...state.visitedViews])
})
},
delOthersCachedViews ({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_OTHERS_CACHED_VIEWS', view)
resolve([...state.cachedViews])
})
},
delAllViews ({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delAllVisitedViews', view)
dispatch('delAllCachedViews', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delAllVisitedViews ({ commit, state }) {
return new Promise(resolve => {
commit('DEL_ALL_VISITED_VIEWS')
resolve([...state.visitedViews])
})
},
delAllCachedViews ({ commit, state }) {
return new Promise(resolve => {
commit('DEL_ALL_CACHED_VIEWS')
resolve([...state.cachedViews])
})
},
updateVisitedView ({ commit }, view) {
commit('UPDATE_VISITED_VIEW', view)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
datax-ui/src/styles/btn.scss deleted 100644 → 0
@import './variables.scss';
@mixin colorBtn($color) {
background: $color;
&:hover {
color: $color;
&:before,
&:after {
background: $color;
}
}
}
.blue-btn {
@include colorBtn($blue)
}
.light-blue-btn {
@include colorBtn($light-blue)
}
.red-btn {
@include colorBtn($red)
}
.pink-btn {
@include colorBtn($pink)
}
.green-btn {
@include colorBtn($green)
}
.tiffany-btn {
@include colorBtn($tiffany)
}
.yellow-btn {
@include colorBtn($yellow)
}
.pan-btn {
font-size: 14px;
color: #fff;
padding: 14px 36px;
border-radius: 8px;
border: none;
outline: none;
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
background: #fff;
&:before,
&:after {
width: 100%;
transition: 600ms ease all;
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
&::after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
}
.custom-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #fff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
padding: 10px 15px;
font-size: 14px;
border-radius: 4px;
}
datax-ui/src/styles/element-variables.scss deleted 100644 → 0
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #FFBA00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
// $--color-text-regular: #1f2d3d;
$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;
$--table-border:1px solid#dfe6ec;
/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
theme: $--color-primary;
}
datax-ui/src/styles/index.scss deleted 100644 → 0
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
label {
font-weight: 700;
}
html {
height: 100%;
box-sizing: border-box;
}
#app {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.no-padding {
padding: 0px !important;
}
.padding-content {
padding: 4px 0;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
div:focus {
outline: none;
}
.fr {
float: right;
}
.fl {
float: left;
}
.pr-5 {
padding-right: 5px;
}
.pl-5 {
padding-left: 5px;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
.inlineBlock {
display: block;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
aside {
background: #eef1f6;
padding: 8px 24px;
margin-bottom: 20px;
border-radius: 2px;
display: block;
line-height: 32px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
a {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
}
//main-container全局样式
.app-container {
padding: 20px;
}
.components-container {
margin: 30px 50px;
position: relative;
}
.pagination-container {
margin-top: 30px;
}
.text-center {
text-align: center
}
.sub-navbar {
height: 50px;
line-height: 50px;
position: relative;
width: 100%;
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
.subtitle {
font-size: 20px;
color: #fff;
}
&.draft {
background: #d0d0d0;
}
&.deleted {
background: #d0d0d0;
}
}
.link-type,
.link-type:focus {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
//refine vue-multiselect plugin
.multiselect {
line-height: 16px;
}
.multiselect--active {
z-index: 1000 !important;
}
datax-ui/src/utils/index.js deleted 100644 → 0
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* Parse the time to string
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string | null}
*/
export function parseTime (time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const timeStr = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return [ '日', '一', '二', '三', '四', '五', '六' ][ value ] }
return value.toString().padStart(2, '0')
})
return timeStr
}
/**
* @param {number} time
* @param {string} option
* @returns {string}
*/
export function formatTime (time, option) {
if (('' + time).length === 10) {
time = parseInt(time) * 1000
} else {
time = +time
}
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
}
}
/**
* @param {string} url
* @returns {Object}
*/
export function getQueryObject (url) {
url = url == null ? window.location.href : url
const search = url.substring(url.lastIndexOf('?') + 1)
const obj = {}
const reg = /([^?&=]+)=([^?&=]*)/g
search.replace(reg, (rs, $1, $2) => {
const name = decodeURIComponent($1)
let val = decodeURIComponent($2)
val = String(val)
obj[name] = val
return rs
})
return obj
}
/**
* @param {string} input value
* @returns {number} output value
*/
export function byteLength (str) {
// returns the byte length of an utf8 string
let s = str.length
for (var i = str.length - 1; i >= 0; i--) {
const code = str.charCodeAt(i)
if (code > 0x7f && code <= 0x7ff) s++
else if (code > 0x7ff && code <= 0xffff) s += 2
if (code >= 0xDC00 && code <= 0xDFFF) i--
}
return s
}
/**
* @param {Array} actual
* @returns {Array}
*/
export function cleanArray (actual) {
const newArray = []
for (let i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i])
}
}
return newArray
}
/**
* @param {Object} json
* @returns {Array}
*/
export function param (json) {
if (!json) return ''
return cleanArray(
Object.keys(json).map(key => {
if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
})
).join('&')
}
/**
* @param {string} url
* @returns {Object}
*/
export function param2Obj (url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"')
.replace(/\+/g, ' ') +
'"}'
)
}
/**
* @param {string} val
* @returns {string}
*/
export function html2Text (val) {
const div = document.createElement('div')
div.innerHTML = val
return div.textContent || div.innerText
}
/**
* Merges two objects, giving the last one precedence
* @param {Object} target
* @param {(Object|Array)} source
* @returns {Object}
*/
export function objectMerge (target, source) {
if (typeof target !== 'object') {
target = {}
}
if (Array.isArray(source)) {
return source.slice()
}
Object.keys(source).forEach(property => {
const sourceProperty = source[property]
if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty)
} else {
target[property] = sourceProperty
}
})
return target
}
/**
* @param {HTMLElement} element
* @param {string} className
*/
export function toggleClass (element, className) {
if (!element || !className) {
return
}
let classString = element.className
const nameIndex = classString.indexOf(className)
if (nameIndex === -1) {
classString += '' + className
} else {
classString =
classString.substr(0, nameIndex) +
classString.substr(nameIndex + className.length)
}
element.className = classString
}
/**
* @param {string} type
* @returns {Date}
*/
export function getTime (type) {
if (type === 'start') {
return new Date().getTime() - 3600 * 1000 * 24 * 90
} else {
return new Date(new Date().toDateString())
}
}
/**
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
* @return {*}
*/
export function debounce (func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function (...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}
/**
* 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}
*/
export function uniqueArr (arr) {
return Array.from(new Set(arr))
}
/**
* @returns {string}
*/
export function createUniqueString () {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
}
/**
* Check if an element has a class
* @param {HTMLElement} elm
* @param {string} cls
* @returns {boolean}
*/
export function hasClass (ele, cls) {
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}
/**
* Add class to element
* @param {HTMLElement} elm
* @param {string} cls
*/
export function addClass (ele, cls) {
if (!hasClass(ele, cls)) ele.className += ' ' + cls
}
/**
* Remove class from element
* @param {HTMLElement} elm
* @param {string} cls
*/
export function removeClass (ele, cls) {
if (hasClass(ele, cls)) {
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
ele.className = ele.className.replace(reg, ' ')
}
}
datax-ui/src/utils/storage.js deleted 100644 → 0
const ss = sessionStorage
const storage = {
ss: {
get (key) {
try {
return JSON.parse(ss.getItem(key))
} catch (e) {
return undefined
}
},
set (key, value) {
ss.setItem(key, JSON.stringify(value))
},
remove (key) {
ss.removeItem(key)
},
clear () {
ss.clear()
}
}
}
export default storage
datax-ui/src/utils/validate.js deleted 100644 → 0
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal (path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername (str) {
const validMap = ['admin', 'editor']
return validMap.indexOf(str.trim()) >= 0
}
/**
* @param {string} url
* @returns {Boolean}
*/
export function validURL (url) {
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validLowerCase (str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUpperCase (str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validAlphabets (str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function isString (str) {
if (typeof str === 'string' || str instanceof String) {
return true
}
return false
}
/**
* @param {Array} arg
* @returns {Boolean}
*/
export function isArray (arg) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
}
datax_ui/.editorconfig 0 → 100644
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
datax-ui/.env.development → datax_ui/.env.development
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
\ No newline at end of file
VUE_APP_BASE_API = '/dev-api'
datax-ui/.env.production → datax_ui/.env.production
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = '/prod-api'
\ No newline at end of file
VUE_APP_BASE_API = '/prod-api'
datax_ui/.env.staging 0 → 100644
NODE_ENV = production
# just a flag
ENV = 'staging'
# base api
VUE_APP_BASE_API = '/stage-api'
datax_ui/.eslintignore 0 → 100644
build/*.js
src/assets
public
dist
datax_ui/.eslintrc.js 0 → 100644
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline":"off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
'camelcase': [0, {
'properties': 'always'
}],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': ["error", "always", {"null": "ignore"}],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 2, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'
}],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, {
'initialized': 'never'
}],
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}],
'semi': [2, 'never'],
'semi-spacing': [2, {
'before': false,
'after': true
}],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never']
}
}
datax-ui/.gitignore → datax_ui/.gitignore
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
tests/**/coverage/
# Editor directories and files
.idea
......@@ -18,4 +14,3 @@ yarn-error.log*
*.ntvs*
*.njsproj
*.sln
*.sw?
datax_ui/.travis.yml 0 → 100644
language: node_js
node_js: 10
script: npm run test
notifications:
email: false
datax_ui/LICENSE 0 → 100644
MIT License
Copyright (c) 2017-present PanJiaChen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
datax_ui/README-zh.md 0 → 100644
# vue-admin-template
> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
[线上地址](http://panjiachen.github.io/vue-admin-template)
[国内访问](https://panjiachen.gitee.io/vue-admin-template)
目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
## Extra
如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
## GitAds
[<img src="https://images.gitads.io/PanJiaChen/vue-admin-template" alt="GitAds" />](https://tracking.gitads.io/?repo=PanJiaChen/vue-admin-template)
## 相关项目
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
## Build Setup
```bash
# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git
# 进入项目目录
cd vue-admin-template
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
```
浏览器访问 [http://localhost:9528](http://localhost:9528)
## 发布
```bash
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod
```
## 其它
```bash
# 预览发布环境效果
npm run preview
# 预览发布环境效果 + 静态资源分析
npm run preview -- --report
# 代码格式检查
npm run lint
# 代码格式检查并自动修复
npm run lint -- --fix
```
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
## 购买贴纸
你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，我们将获得 2 元的捐赠。
## Demo
![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
## Browsers support
Modern browsers and Internet Explorer 10+.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
## License
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
Copyright (c) 2017-present PanJiaChen
datax_ui/README.md 0 → 100644
# vue-admin-template
English | [简体中文](./README-zh.md)
> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
**Live demo:** http://panjiachen.github.io/vue-admin-template
**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
## GitAds
> vue-admin-template is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial
[<img src="https://images.gitads.io/vue-admin-template" alt="GitAds" />](https://tracking.gitads.io/?repo=vue-admin-template)
## Build Setup
```bash
# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git
# enter the project directory
cd vue-admin-template
# install dependency
npm install
# develop
npm run dev
```
This will automatically open http://localhost:9528
## Build
```bash
# build for test environment
npm run build:stage
# build for production environment
npm run build:prod
```
## Advanced
```bash
# preview the release environment effect
npm run preview
# preview the release environment effect + static resource analysis
npm run preview -- --report
# code format check
npm run lint
# code format check and auto fix
npm run lint -- --fix
```
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
## Demo
![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
## Extra
If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
## Related Project
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
## Browsers support
Modern browsers and Internet Explorer 10+.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
## License
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
Copyright (c) 2017-present PanJiaChen
datax_ui/babel.config.js 0 → 100644
module.exports = {
presets: [
// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
'@vue/cli-plugin-babel/preset'
],
'env': {
'development': {
// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
// https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
'plugins': ['dynamic-import-node']
}
}
}
datax_ui/jest.config.js 0 → 100644
module.exports = {
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: ['jest-serializer-vue'],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
coverageDirectory: '<rootDir>/tests/unit/coverage',
// 'collectCoverage': true,
'coverageReporters': [
'lcov',
'text-summary'
],
testURL: 'http://localhost/'
}
datax_ui/jsconfig.json 0 → 100644
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
datax_ui/package.json 0 → 100644
{
"name": "datax_ui",
"version": "1.0.0",
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
"author": "YuWei",
"scripts": {
"serve": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
},
"dependencies": {
"@riophae/vue-treeselect": "^0.4.0",
"axios": "0.18.1",
"core-js": "3.6.5",
"echarts": "^4.8.0",
"element-ui": "2.13.2",
"good-storage": "^1.1.1",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"screenfull": "^5.0.2",
"sql-formatter": "^2.3.3",
"vue": "2.6.10",
"vue-codemirror": "^4.0.6",
"vue-grid-layout": "^2.3.8",
"vue-router": "3.0.6",
"vuedraggable": "^2.24.0",
"vuex": "3.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
"@vue/cli-plugin-eslint": "4.4.4",
"@vue/cli-plugin-unit-jest": "4.4.4",
"@vue/cli-service": "4.4.4",
"@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "9.5.1",
"babel-eslint": "10.1.0",
"babel-jest": "23.6.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "2.4.2",
"connect": "3.6.6",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"html-webpack-plugin": "3.2.0",
"runjs": "4.3.2",
"sass": "1.26.8",
"sass-loader": "8.0.2",
"script-ext-html-webpack-plugin": "2.1.3",
"serve-static": "1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"vue-template-compiler": "2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"license": "MIT"
}
datax_ui/postcss.config.js 0 → 100644
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
'plugins': {
// to edit target browsers: use "browserslist" field in package.json
'autoprefixer': {}
}
}
datax-ui/public/index.html → datax_ui/public/index.html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-template</title>
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
......
datax-ui/src/api/system/user.js → datax_ui/src/api/system/user.js
import request from '@/utils/request'
import qs from 'qs'
export function login (username, password) {
let data = {
export function login(username, password) {
const data = {
username: username,
password: password,
grant_type: 'password',
......@@ -18,28 +18,28 @@ export function login (username, password) {
})
}
export function getRoutes (id) {
export function getRoutes(id) {
return request({
url: '/system/users/' + id + '/route',
url: `/system/users/${id}/route`,
method: 'get'
})
}
export function logout (token) {
export function logout(token) {
return request({
url: '/system/logout/' + token,
url: `/system/logout/${token}`,
method: 'delete'
})
}
export function log () {
export function log() {
return request({
url: '/system/login/logs',
method: 'post'
})
}
export function pageUser (data) {
export function pageUser(data) {
return request({
url: '/system/users/page',
method: 'get',
......@@ -47,28 +47,28 @@ export function pageUser (data) {
})
}
export function getUser (id) {
export function getUser(id) {
return request({
url: '/system/users/' + id,
method: 'get'
})
}
export function delUser (id) {
export function delUser(id) {
return request({
url: '/system/users/' + id,
method: 'delete'
})
}
export function delUsers (ids) {
export function delUsers(ids) {
return request({
url: '/system/users/batch/' + ids,
method: 'delete'
})
}
export function addUser (data) {
export function addUser(data) {
return request({
url: '/system/users',
method: 'post',
......@@ -76,7 +76,7 @@ export function addUser (data) {
})
}
export function updateUser (data) {
export function updateUser(data) {
return request({
url: '/system/users/' + data.id,
method: 'put',
......
datax-ui/src/components/Breadcrumb/index.vue → datax_ui/src/components/Breadcrumb/index.vue
......@@ -2,6 +2,7 @@
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="index === 0">当前位置：</span>
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
......@@ -10,51 +11,48 @@
</template>
<script>
import * as pathToRegexp from 'path-to-regexp'
import pathToRegexp from 'path-to-regexp'
export default {
data () {
data() {
return {
levelList: null
}
},
watch: {
$route (route) {
if (route.path.startsWith('/redirect/')) {
return
}
$route() {
this.getBreadcrumb()
}
},
created () {
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb () {
getBreadcrumb() {
// only show routes with meta.title
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
const first = matched[0]
if (!this.isDashboard(first)) {
matched = [{ path: '/dashboard', meta: { title: '首页' } }].concat(matched)
matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
},
isDashboard (route) {
isDashboard(route) {
const name = route && route.name
if (!name) {
return false
}
return name.trim() === '首页'
return name.trim().toLocaleLowerCase() === '首页'.toLocaleLowerCase()
},
pathCompile (path) {
pathCompile(path) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
const { params } = this.$route
var toPath = pathToRegexp.compile(path)
return toPath(params)
},
handleLink (item) {
handleLink(item) {
const { redirect, path } = item
if (redirect) {
this.$router.push(redirect)
......
datax-ui/src/components/Hamburger/index.vue → datax_ui/src/components/Hamburger/index.vue
<template>
<div style="padding: 0 15px;" @click="toggleClick">
<i
:class="{ 'el-icon-s-fold': isActive, 'el-icon-s-unfold': !isActive }"
></i>
<svg
:class="{'is-active':isActive}"
class="hamburger"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>
</div>
</template>
......@@ -16,9 +23,22 @@ export default {
}
},
methods: {
toggleClick () {
toggleClick() {
this.$emit('toggleClick')
}
}
}
</script>
<style scoped>
.hamburger {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
}
.hamburger.is-active {
transform: rotate(180deg);
}
</style>
datax-ui/src/components/Screenfull/index.vue → datax_ui/src/components/Screenfull/index.vue
<template>
<div @click="toggleFull">
<svg-icon class-name="size-icon" icon-class="screenfull" />
<div>
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
</div>
</template>
<script>
import screenfull from 'screenfull'
import { Message } from 'element-ui'
export default {
name: 'Screenfull',
data () {
data() {
return {
isFullscreen: false
}
},
mounted () {
mounted() {
this.init()
},
beforeDestroy () {
beforeDestroy() {
this.destroy()
},
methods: {
toggleFull () {
click() {
if (!screenfull.isEnabled) {
Message.warning('you browser can not work')
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
},
change () {
change() {
this.isFullscreen = screenfull.isFullscreen
},
init () {
init() {
if (screenfull.isEnabled) {
screenfull.on('change', this.change)
}
},
destroy () {
destroy() {
if (screenfull.isEnabled) {
screenfull.off('change', this.change)
}
......@@ -45,3 +47,14 @@ export default {
}
}
</script>
<style scoped>
.screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 20px;
height: 20px;
vertical-align: 10px;
}
</style>
datax-ui/src/components/SqlEditor/index.vue → datax_ui/src/components/SqlEditor/index.vue
......@@ -2,10 +2,9 @@
<div>
<textarea
ref="mycode"
class="codesql"
v-model="value"
>
</textarea>
class="codesql"
/>
</div>
</template>
......@@ -13,7 +12,7 @@
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/addon/hint/show-hint.css'
let CodeMirror = require('codemirror/lib/codemirror')
const CodeMirror = require('codemirror/lib/codemirror')
require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/sql/sql')
......@@ -22,11 +21,6 @@ require('codemirror/addon/hint/sql-hint')
export default {
name: 'SqlEditor',
data () {
return {
editor: null
}
},
props: {
value: {
type: String,
......@@ -40,23 +34,28 @@ export default {
type: [Boolean, String]
}
},
watch: {
newVal (newV, oldV) {
if (this.editor) {
this.$emit('changeTextarea', this.editor.getValue())
}
data() {
return {
editor: null
}
},
computed: {
newVal () {
newVal() {
if (this.editor) {
return this.editor.getValue()
}
}
},
mounted () {
let mime = 'text/x-mariadb'
let theme = 'blackboard'// 设置主题，不设置的会使用默认主题
watch: {
newVal(newV, oldV) {
if (this.editor) {
this.$emit('changeTextarea', this.editor.getValue())
}
}
},
mounted() {
const mime = 'text/x-mariadb'
const theme = 'blackboard'// 设置主题，不设置的会使用默认主题
this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
value: this.value,
mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
......@@ -70,7 +69,7 @@ export default {
theme: theme,
autofocus: true,
extraKeys: { 'Ctrl': 'autocomplete' }, // 自定义快捷键
hintOptions: {// 自定义提示选项
hintOptions: { // 自定义提示选项
// 当匹配只有一项的时候是否自动补全
completeSingle: false
// tables: {
......@@ -85,7 +84,7 @@ export default {
})
},
methods: {
setVal () {
setVal() {
if (this.editor) {
if (this.value === '') {
this.editor.setValue('')
......
datax-ui/src/components/SvgIcon/index.vue → datax_ui/src/components/SvgIcon/index.vue
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :href="iconName" />
<use :xlink:href="iconName" />
</svg>
</template>
......@@ -22,20 +22,20 @@ export default {
}
},
computed: {
isExternal () {
isExternal() {
return isExternal(this.iconClass)
},
iconName () {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass () {
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon () {
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
......
datax-ui/src/directive/permission/hasPerm.js → datax_ui/src/directive/permission/hasPerm.js
import store from '@/store'
export default {
inserted (el, binding, vnode) {
inserted(el, binding, vnode) {
const { value } = binding
const allPermission = '*:*:*'
const permissions = store.getters && store.getters.user_perm
const permissions = store.getters && store.getters.user_perms
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
......
datax-ui/src/directive/permission/hasRole.js → datax_ui/src/directive/permission/hasRole.js
import store from '@/store'
export default {
inserted (el, binding, vnode) {
inserted(el, binding, vnode) {
const { value } = binding
const superAdmin = 'admin'
const roles = store.getters && store.getters.user_role
const roles = store.getters && store.getters.user && store.getters.user.roles
if (value && value instanceof Array && value.length > 0) {
const roleFlag = value
......
datax-ui/src/directive/permission/index.js → datax_ui/src/directive/permission/index.js
import hasRole from './hasRole'
import hasPerm from './hasPerm'
const install = function (Vue) {
const install = function(Vue) {
Vue.directive('hasRole', hasRole)
Vue.directive('hasPerm', hasPerm)
}
......
datax_ui/src/icons/svg/example.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/exit-fullscreen.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/eye-open.svg 0 → 100644
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/eye.svg 0 → 100644
<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/form.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/fullscreen.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/link.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/nested.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/password.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/table.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>
\ No newline at end of file
datax_ui/src/icons/svg/tree.svg 0 → 100644
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>
\ No newline at end of file
datax-ui/src/layout/components/AppMain.vue → datax_ui/src/layout/components/AppMain.vue
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<div class="content">
<transition name="fade-transform" mode="out-in">
<router-view :key="key" />
</keep-alive>
</transition>
</transition>
</div>
</section>
</template>
......@@ -12,10 +12,7 @@
export default {
name: 'AppMain',
computed: {
cachedViews () {
return this.$store.state.tagsView.cachedViews
},
key () {
key() {
return this.$route.path
}
}
......@@ -23,28 +20,23 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
/*107 = navbar 50 + topbar 57 */
height: calc(100vh - 107px);
width: 100%;
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
.content {
padding: 6px;
min-height: calc(100vh - 39px - 107px);
}
}
.fixed-header+.app-main {
padding-top: 50px;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
}
.fixed-header+.app-main {
padding-top: 84px;
}
}
</style>
<style lang="scss">
......
datax-ui/src/layout/components/Navbar.vue → datax_ui/src/layout/components/Navbar.vue
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<hamburger v-if="!sidebar.hide" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu">
<template v-if="device!=='mobile'">
<el-tooltip effect="dark" content="全屏" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect">
<span class="avatar-wrapper">
<svg-icon class-name="size-icon" icon-class="user" />
<span>你好,{{nickname}}</span>
</span>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>首页</el-dropdown-item>
</router-link>
<el-dropdown-item divided>
<span style="display:block;" @click="logout">注销登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<breadcrumb class="breadcrumb-container" />
</div>
</template>
......@@ -38,31 +10,20 @@
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
export default {
components: {
Breadcrumb,
Hamburger,
Screenfull,
SizeSelect
Hamburger
},
computed: {
...mapGetters([
'nickname',
'sidebar',
'avatar',
'device'
'sidebar'
])
},
methods: {
toggleSideBar () {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
async logout () {
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
}
}
}
......@@ -92,62 +53,5 @@ export default {
.breadcrumb-container {
float: left;
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 15px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
}
</style>
datax-ui/src/layout/components/Sidebar/FixiOSBug.js → datax_ui/src/layout/components/Sidebar/FixiOSBug.js
export default {
computed: {
device () {
device() {
return this.$store.state.app.device
}
},
mounted () {
mounted() {
// In order to fix the click on menu on the ios device will trigger the mouseleave bug
// https://github.com/PanJiaChen/vue-element-admin/issues/1135
this.fixBugIniOS()
},
methods: {
fixBugIniOS () {
fixBugIniOS() {
const $subMenu = this.$refs.subMenu
if ($subMenu) {
const handleMouseleave = $subMenu.handleMouseleave
......
datax-ui/src/layout/components/Sidebar/Item.vue → datax_ui/src/layout/components/Sidebar/Item.vue
......@@ -12,7 +12,7 @@ export default {
default: ''
}
},
render (h, context) {
render(h, context) {
const { icon, title } = context.props
const vnodes = []
......
datax-ui/src/layout/components/Sidebar/Link.vue → datax_ui/src/layout/components/Sidebar/Link.vue
......@@ -17,7 +17,7 @@ export default {
}
},
methods: {
linkProps (url) {
linkProps(url) {
if (isExternal(url)) {
return {
is: 'a',
......
datax-ui/src/layout/components/Sidebar/Logo.vue → datax_ui/src/layout/components/Sidebar/Logo.vue
......@@ -22,9 +22,9 @@ export default {
required: true
}
},
data () {
data() {
return {
title: 'Vue Element Admin',
title: 'Vue Admin Template',
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
}
}
......
datax-ui/src/layout/components/Sidebar/SidebarItem.vue → datax_ui/src/layout/components/Sidebar/SidebarItem.vue
<template>
<div v-if="!item.hidden" class="menu-wrapper">
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
......@@ -50,14 +50,14 @@ export default {
default: ''
}
},
data () {
data() {
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// TODO: refactor with render function
this.onlyOneChild = null
return {}
},
methods: {
hasOneShowingChild (children = [], parent) {
hasOneShowingChild(children = [], parent) {
const showingChildren = children.filter(item => {
if (item.hidden) {
return false
......@@ -75,20 +75,23 @@ export default {
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
return true
}
return false
},
resolvePath (routePath) {
resolvePath(routePath) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(this.basePath)) {
return this.basePath
}
return path.resolve(this.basePath, routePath)
const currentRoute = this.$store.state.permission.currentRoute
if (currentRoute && currentRoute.path) {
return path.resolve(currentRoute.path, this.basePath, routePath)
}
}
}
}
......
datax-ui/src/layout/components/Sidebar/index.vue → datax_ui/src/layout/components/Sidebar/index.vue
......@@ -12,7 +12,7 @@
:collapse-transition="false"
mode="vertical"
>
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>
</div>
......@@ -28,10 +28,13 @@ export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters([
'permission_routes',
'sidebar'
]),
activeMenu () {
routes() {
// return this.$router.options.routes
return this.$store.state.permission.currentRoute.children
},
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
......@@ -40,13 +43,13 @@ export default {
}
return path
},
showLogo () {
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables () {
variables() {
return variables
},
isCollapse () {
isCollapse() {
return !this.sidebar.opened
}
}
......
datax_ui/src/layout/components/Topbar.vue 0 → 100644
<template>
<div class="top-nav">
<div class="log">管理系统</div>
<el-menu
:active-text-color="variables.menuActiveText"
:default-active="activeMenu"
mode="horizontal"
@select="handleSelect"
>
<div v-for="item in routes" :key="item.path" class="nav-item">
<app-link :to="resolvePath(item)">
<el-menu-item
v-if="!item.hidden"
:index="item.path"
>
<!-- <i class="el-icon-menu"></i>-->
<span slot="title">{{ item.meta ? item.meta.title : item.children[0].meta.title }}</span>
</el-menu-item>
</app-link>
</div>
</el-menu>
<div class="right-menu">
<screenfull id="screenfull" class="right-menu-btn" />
<span class="right-menu-btn">
<i class="el-icon-bell"></i>
</span>
<el-dropdown>
<span class="right-menu-btn">
{{ user.nickname }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<i style="padding-right: 8px" class="el-icon-user"></i>修改密码
</el-dropdown-item>
<el-dropdown-item @click.native="logout">
<i style="padding-right: 8px" class="el-icon-turn-off"></i>退出系统
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import AppLink from './Sidebar/Link'
import variables from '@/styles/variables.scss'
import { isExternal } from '@/utils/validate'
import Screenfull from '@/components/Screenfull'
import { mapGetters } from 'vuex'
export default {
name: 'Topbar',
components: {
AppLink,
Screenfull
},
data() {
return {
routes: this.$store.state.permission.routes
}
},
computed: {
...mapGetters([
'user'
]),
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
// 如果是首页，首页高亮
if (path === '/dashboard') {
return '/'
}
// 如果不是首页，高亮一级菜单
const activeMenu = '/' + path.split('/')[1]
return activeMenu
},
variables() {
return variables
},
sidebar() {
return this.$store.state.app.sidebar
}
},
mounted() {
this.initCurrentRoutes()
},
methods: {
// 通过当前路径找到二级菜单对应项，存到store，用来渲染左侧菜单
initCurrentRoutes() {
const { path } = this.$route
let route = this.routes.find(
item => item.path === '/' + path.split('/')[1]
)
// 如果找不到这个路由，说明是首页
if (!route) {
route = this.routes.find(item => item.path === '/')
}
this.$store.commit('permission/SET_CURRENT_ROUTE', route)
this.setSidebarHide(route)
},
// 判断该路由是否只有一个子项或者没有子项，如果是，则在一级菜单添加跳转路由
isOnlyOneChild(item) {
if (item.children && item.children.length === 1) {
return true
}
return false
},
resolvePath(item) {
// 如果是个完成的url直接返回
if (isExternal(item.path)) {
return item.path
}
// 如果是首页，就返回重定向路由
if (item.path === '/') {
const path = item.redirect
return path
}
// 如果有子项，默认跳转第一个子项路由
let path = ''
/**
* item 路由子项
* parent 路由父项
*/
const getDefaultPath = (item, parent) => {
// 如果path是个外部链接（不建议），直接返回链接，存在个问题：如果是外部链接点击跳转后当前页内容还是上一个路由内容
if (isExternal(item.path)) {
path = item.path
return
}
// 第一次需要父项路由拼接，所以只是第一个传parent
if (parent) {
path += (parent.path + '/' + item.path)
} else {
path += ('/' + item.path)
}
// 如果还有子项，继续递归
if (item.children) {
getDefaultPath(item.children[0])
}
}
if (item.children) {
getDefaultPath(item.children[0], item)
return path
}
return item.path
},
handleSelect(key, keyPath) {
// 把选中路由的子路由保存store
const route = this.routes.find(item => item.path === key)
this.$store.commit('permission/SET_CURRENT_ROUTE', route)
this.setSidebarHide(route)
},
// 设置侧边栏的显示和隐藏
setSidebarHide(route) {
if (!route.children || route.children.length === 1) {
this.$store.dispatch('app/toggleSideBarHide', true)
} else {
this.$store.dispatch('app/toggleSideBarHide', false)
}
},
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
}
}
}
</script>
datax_ui/src/layout/components/index.js 0 → 100644
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
export { default as Topbar } from './Topbar'
\ No newline at end of file
datax-ui/src/layout/index.vue → datax_ui/src/layout/index.vue
<template>
<div :class="classObj" class="app-wrapper">
<topbar />
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" />
<div :class="{hasTagsView:needTagsView}" class="main-container">
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{sidebarHide: sidebar.hide}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<tags-view v-if="needTagsView" />
</div>
<app-main />
<right-panel v-if="showSettings">
<settings />
</right-panel>
</div>
</div>
</template>
<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import { Navbar, Sidebar, AppMain, Topbar } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
RightPanel,
Settings,
Sidebar,
TagsView
AppMain,
Topbar
},
mixins: [ResizeMixin],
computed: {
...mapState({
sidebar: state => state.app.sidebar,
device: state => state.app.device,
showSettings: state => state.settings.showSettings,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
classObj () {
sidebar() {
return this.$store.state.app.sidebar
},
device() {
return this.$store.state.app.device
},
fixedHeader() {
return this.$store.state.settings.fixedHeader
},
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
......@@ -50,7 +45,7 @@ export default {
}
},
methods: {
handleClickOutside () {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
}
}
......@@ -64,20 +59,14 @@ export default {
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
// height: 100%;
height: $contentHeight;
width: 100%;
overflow: hidden;
&.mobile.openSidebar {
&.mobile.openSidebar{
position: fixed;
top: 0;
}
// 加入背景色
.main-container {
background-color: #f5f7f9;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
......
datax-ui/src/layout/mixin/ResizeHandler.js → datax_ui/src/layout/mixin/ResizeHandler.js
......@@ -5,19 +5,19 @@ const WIDTH = 992 // refer to Bootstrap's responsive design
export default {
watch: {
$route (route) {
$route(route) {
if (this.device === 'mobile' && this.sidebar.opened) {
store.dispatch('app/closeSideBar', { withoutAnimation: false })
}
}
},
beforeMount () {
beforeMount() {
window.addEventListener('resize', this.$_resizeHandler)
},
beforeDestroy () {
beforeDestroy() {
window.removeEventListener('resize', this.$_resizeHandler)
},
mounted () {
mounted() {
const isMobile = this.$_isMobile()
if (isMobile) {
store.dispatch('app/toggleDevice', 'mobile')
......@@ -27,11 +27,11 @@ export default {
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_isMobile () {
$_isMobile() {
const rect = body.getBoundingClientRect()
return rect.width - 1 < WIDTH
},
$_resizeHandler () {
$_resizeHandler() {
if (!document.hidden) {
const isMobile = this.$_isMobile()
store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
......
datax-ui/src/main.js → datax_ui/src/main.js
......@@ -3,18 +3,17 @@ import Vue from 'vue'
import 'normalize.css/normalize.css'
import ElementUI from 'element-ui'
import '@/styles/element-variables.scss'
import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/index.scss'
import '@/assets/icons/iconfont.css'
import App from './App'
import store from './store'
import router from './router'
import '@/permission'
import '@/icons'
import '@/permission'
import perms from '@/directive/permission'
......@@ -22,19 +21,18 @@ import { getDicts } from '@/api/system/dict'
import { getConfigKey } from '@/api/system/config'
import { selectDictLabel } from '@/utils/data-process'
// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.selectDictLabel = selectDictLabel
Vue.use(ElementUI)
Vue.use(perms)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
}).$mount('#app')
})
datax-ui/src/permission.js → datax_ui/src/permission.js
......@@ -3,23 +3,27 @@ import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login']
router.beforeEach(async (to, from, next) => {
router.beforeEach(async(to, from, next) => {
NProgress.start()
document.title = getPageTitle(to.meta.title)
const hasToken = store.getters.token
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
// 加载菜单
const hasMenus = store.getters.user_menu && store.getters.user_menu.length > 0
const hasMenus = store.getters.user_menus && store.getters.user_menus.length > 0
if (hasMenus) {
// 退出或刷新页面后重新动态加载路由
const hasAddRoutes = store.getters.permission_add_routes && store.getters.permission_add_routes.length > 0
......@@ -28,16 +32,14 @@ router.beforeEach(async (to, from, next) => {
} else {
const accessRoutes = await store.dispatch('permission/generateRoutes')
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
}
} else {
// 请求用户菜单后动态加载路由
try {
await store.dispatch('user/getRoutes')
await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes')
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
} catch (error) {
await store.dispatch('user/resetToken')
......
datax-ui/src/router/index.js → datax_ui/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'
Vue.use(Router)
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
......@@ -24,6 +24,11 @@ Vue.use(Router)
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/redirect',
......@@ -31,7 +36,7 @@ export const constantRoutes = [
hidden: true,
children: [
{
path: '/redirect/:path*',
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index')
}
]
......@@ -39,7 +44,7 @@ export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login'),
component: () => import('@/views/login/index'),
hidden: true
},
......@@ -50,18 +55,6 @@ export const constantRoutes = [
},
{
path: '/data/chart',
component: () => import('@/views/visual/datachart/chart'),
hidden: true
},
{
path: '/data/board',
component: () => import('@/views/visual/databoard/board'),
hidden: true
},
{
path: '/401',
component: () => import('@/views/error-page/401'),
hidden: true
......@@ -74,22 +67,26 @@ export const constantRoutes = [
children: [{
path: 'dashboard',
name: '首页',
component: () => import('@/views/dashboard'),
meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'dashboard' }
}]
}
// 404 page must be placed at the end !!!
// { path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
export function resetRouter () {
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher
router.matcher = newRouter.matcher // reset router
}
export default router
datax-ui/src/settings.js → datax_ui/src/settings.js
module.exports = {
title: 'Template',
port: 8081,
/**
* @type {boolean} true | false
* @description Whether show the settings right-panel
*/
showSettings: true,
/**
* @type {boolean} true | false
* @description Whether need tagsView
*/
tagsView: true,
title: 'datax_ui',
/**
* @type {boolean} true | false
* @description Whether fix the header
*/
fixedHeader: true,
fixedHeader: false,
/**
* @type {boolean} true | false
* @description Whether show the logo in sidebar
*/
sidebarLogo: true
sidebarLogo: false
}
datax-ui/src/store/getters.js → datax_ui/src/store/getters.js
const getters = {
sidebar: state => state.app.sidebar,
size: state => state.app.size,
device: state => state.app.device,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
token: state => state.user.token,
avatar: state => state.user.user_info.avatar,
username: state => state.user.user_info.username,
nickname: state => state.user.user_info.nickname,
user_id: state => state.user.user_info.user_id,
user_post: state => state.user.user_info.user_post,
user_dept: state => state.user.user_info.user_dept,
user_role: state => state.user.user_info.user_role,
user_menu: state => state.user.user_menu,
user_perm: state => state.user.user_perm,
user: state => state.user.detail,
user_menus: state => state.user.menus,
user_perms: state => state.user.perms,
permission_routes: state => state.permission.routes,
permission_add_routes: state => state.permission.addRoutes
}
......
datax_ui/src/store/index.js 0 → 100644
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user,
permission
},
getters
})
export default store
datax-ui/src/store/modules/app.js → datax_ui/src/store/modules/app.js
import storage from '@/utils/storage'
import Storage from 'good-storage'
const state = {
sidebar: {
opened: storage.ss.get('vue_template_sidebar_status') ? !!+storage.ss.get('vue_template_sidebar_status') : true,
withoutAnimation: false
opened: Storage.get('sidebarStatus') ? !!+Storage.get('sidebarStatus') : true,
withoutAnimation: false,
hide: false
},
device: 'desktop',
size: storage.ss.get('vue_template_size') || 'medium'
device: 'desktop'
}
const mutations = {
......@@ -14,37 +14,36 @@ const mutations = {
state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = false
if (state.sidebar.opened) {
storage.ss.set('vue_template_sidebar_status', 1)
Storage.set('sidebarStatus', 1)
} else {
storage.ss.set('vue_template_sidebar_status', 0)
Storage.set('sidebarStatus', 0)
}
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
storage.ss.set('vue_template_sidebar_status', 0)
Storage.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},
TOGGLE_DEVICE: (state, device) => {
state.device = device
},
SET_SIZE: (state, size) => {
state.size = size
storage.ss.set('vue_template_size', size)
SET_SIDEBAR_HIDE: (state, status) => {
state.sidebar.hide = status
}
}
const actions = {
toggleSideBar ({ commit }) {
toggleSideBarHide({ commit }, status) {
commit('SET_SIDEBAR_HIDE', status)
},
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar ({ commit }, { withoutAnimation }) {
closeSideBar({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation)
},
toggleDevice ({ commit }, device) {
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
},
setSize ({ commit }, size) {
commit('SET_SIZE', size)
}
}
......
datax-ui/src/store/modules/permission.js → datax_ui/src/store/modules/permission.js
import { constantRoutes } from '@/router'
import Layout from '@/layout'
import storage from '@/utils/storage'
import Storage from 'good-storage'
const state = {
routes: [],
addRoutes: []
addRoutes: [],
currentRoute: {}
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
},
SET_CURRENT_ROUTE: (state, route) => {
state.currentRoute = route
}
}
const actions = {
generateRoutes ({ commit }) {
generateRoutes({ commit }) {
return new Promise(resolve => {
let menus = storage.ss.get('vue_template_user_menu') || []
let accessedRoutes = filterAsyncRouter(menus)
const menus = Storage.get('data_ui_user_menus') || []
const accessedRoutes = filterAsyncRouter(menus)
accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
......@@ -26,8 +30,8 @@ const actions = {
}
}
function filterAsyncRouter (routers) {
let accessedRouters = routers.filter(router => {
function filterAsyncRouter(routers) {
const accessedRouters = routers.filter(router => {
if (router.component) {
if (router.component === 'Layout') {
router.component = Layout
......
datax-ui/src/store/modules/settings.js → datax_ui/src/store/modules/settings.js
import variables from '@/styles/element-variables.scss'
import defaultSettings from '@/settings'
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
const state = {
theme: variables.theme,
showSettings: showSettings,
tagsView: tagsView,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo
}
const mutations = {
CHANGE_SETTING: (state, { key, value }) => {
// eslint-disable-next-line no-prototype-builtins
if (state.hasOwnProperty(key)) {
state[key] = value
}
......@@ -20,7 +18,7 @@ const mutations = {
}
const actions = {
changeSetting ({ commit }, data) {
changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data)
}
}
......@@ -31,3 +29,4 @@ export default {
mutations,
actions
}
datax-ui/src/store/modules/user.js → datax_ui/src/store/modules/user.js
import { login, logout, getRoutes } from '@/api/system/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
import storage from '@/utils/storage'
import Storage from 'good-storage'
const getDefaultState = () => {
return {
token: getToken(),
detail: {},
menus: [],
perms: []
}
}
const state = {
token: storage.ss.get('vue_template_token') || '',
user_menu: storage.ss.get('vue_template_user_menu') || [],
user_perm: storage.ss.get('vue_template_user_perm') || [],
user_info: storage.ss.get('vue_template_user_info') || {}
token: getToken(),
detail: Storage.get('data_ui_user_detail') || {},
menus: Storage.get('data_ui_user_menus') || [],
perms: Storage.get('data_ui_user_perms') || []
}
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
SET_USER_MENU: (state, menus) => {
state.user_menu = menus
SET_DETAIL: (state, detail) => {
state.detail = detail
},
SET_USER_PERM: (state, perms) => {
state.user_perm = perms
SET_MENUS: (state, menus) => {
state.menus = menus
},
SET_USER_INFO: (state, info) => {
state.user_info = info
SET_PERMS: (state, perms) => {
state.perms = perms
}
}
const actions = {
// user login
login ({ commit }, userInfo) {
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login(username, password).then(response => {
const { access_token, username, nickname, user_id, user_dept, user_post, user_role, avatar } = response
const { access_token, username, nickname, user_id, user_dept, user_post, user_role } = response
commit('SET_TOKEN', access_token)
storage.ss.set('vue_template_token', access_token)
const info = {
setToken(access_token)
const detail = {
id: user_id || '',
username: username || '',
nickname: nickname || '',
avatar: avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
user_id: user_id || '',
user_dept: user_dept || '',
user_role: user_role ? user_role.map(role => role.id) : [],
user_post: user_post || []
dept: user_dept || '',
roles: user_role ? user_role.map(role => role.id) : [],
posts: user_post || []
}
commit('SET_USER_INFO', info)
storage.ss.set('vue_template_user_info', info)
commit('SET_DETAIL', detail)
Storage.set('data_ui_user_detail', detail)
resolve()
}).catch(error => {
reject(error)
......@@ -51,18 +62,16 @@ const actions = {
})
},
// user routes
getRoutes ({ commit, state }) {
let userId = state.user_info.user_id
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getRoutes(userId).then(response => {
getRoutes(state.detail.id).then(response => {
const { data } = response
let perms = data.perms || []
let routes = data.routes || []
commit('SET_USER_MENU', routes)
storage.ss.set('vue_template_user_menu', routes)
commit('SET_USER_PERM', perms)
storage.ss.set('vue_template_user_perm', perms)
const perms = data.perms || []
const routes = data.routes || []
commit('SET_MENUS', routes)
Storage.set('data_ui_user_menus', routes)
commit('SET_PERMS', perms)
Storage.set('data_ui_user_perms', perms)
resolve()
}).catch(error => {
reject(error)
......@@ -70,16 +79,12 @@ const actions = {
})
},
// user logout
logout ({ commit, state }) {
let token = state.token
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(token).then(response => {
commit('SET_TOKEN', '')
commit('SET_USER_MENU', [])
commit('SET_USER_INFO', {})
storage.ss.clear()
logout(state.token).then(() => {
removeToken()
resetRouter()
commit('RESET_STATE')
resolve()
}).catch(error => {
reject(error)
......@@ -87,11 +92,10 @@ const actions = {
})
},
// remove token
resetToken ({ commit }) {
resetToken({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
storage.ss.clear()
removeToken()
commit('RESET_STATE')
resolve()
})
}
......@@ -103,3 +107,4 @@ export default {
mutations,
actions
}
datax-ui/src/styles/element-ui.scss → datax_ui/src/styles/element-ui.scss
......@@ -15,36 +15,6 @@
display: none;
}
.cell {
.el-tag {
margin-right: 0px;
}
}
.small-padding {
.cell {
padding-left: 5px;
padding-right: 5px;
}
}
.fixed-width {
.el-button--mini {
padding: 7px 10px;
width: 60px;
}
}
.status-col {
.cell {
padding: 0 10px;
text-align: center;
.el-tag {
margin-right: 0px;
}
}
}
// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
......@@ -73,11 +43,6 @@
}
}
// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
display: inline-flex !important;
}
// to fix el-date-picker css style
.el-range-separator {
box-sizing: content-box;
......
datax_ui/src/styles/index.scss 0 → 100644
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './topbar.scss';
body {
height: $contentHeight;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
label {
font-weight: 700;
}
html {
height: 100%;
box-sizing: border-box;
}
#app {
height: $contentHeight;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
div:focus {
outline: none;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
// main-container global css
.app-container {
padding: 20px;
}
datax-ui/src/styles/mixin.scss → datax_ui/src/styles/mixin.scss
......@@ -26,41 +26,3 @@
width: 100%;
height: 100%;
}
@mixin pct($pct) {
width: #{$pct};
position: relative;
margin: 0 auto;
}
@mixin triangle($width, $height, $color, $direction) {
$width: $width/2;
$color-border-style: $height solid $color;
$transparent-border-style: $width solid transparent;
height: 0;
width: 0;
@if $direction==up {
border-bottom: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==right {
border-left: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
@else if $direction==down {
border-top: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==left {
border-right: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
}
datax-ui/src/styles/sidebar.scss → datax_ui/src/styles/sidebar.scss
#app {
.main-container {
min-height: 100%;
// min-height: 100%;
height: $contentHeight;
transition: margin-left .28s;
margin-left: $sideBarWidth;
margin-top: $topBarHeight;
position: relative;
}
.sidebarHide {
margin-left: 0!important;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: $menuBg;
height: 100%;
// height: 100%;
height: $contentHeight;
position: fixed;
font-size: 0px;
top: 0;
// top: 0;
top: $topBarHeight;
bottom: 0;
left: 0;
z-index: 1001;
......
datax_ui/src/styles/topbar.scss 0 → 100644
.top-nav {
width: 100%;
background-color: #0086f1;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
overflow: hidden;
.log {
padding: 0 20px;
line-height: 56px;
font-size: 24px;
font-weight: bold;
color: #fff;
float: left;
}
.el-menu {
float: left;
border: none!important;
background-color: #0086f1;
.nav-item {
display: inline-block;
.el-menu-item {
color: #fff;
&:hover {
background-color: mix(#000, #0086f1, 10%) !important;
}
&:focus {
background-color: mix(#000, #0086f1, 10%) !important;
}
}
}
}
.right-menu {
float: right;
height: 100%;
.right-menu-btn {
height: 56px;
display: inline-block;
text-align: center;
line-height: 56px;
cursor: pointer;
padding: 0 14px;
color: #fff;
&:hover {
background-color: mix(#000, #0086f1, 10%);
}
}
&:focus {
outline: none;
}
}
}
datax-ui/src/styles/variables.scss → datax_ui/src/styles/variables.scss
// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
......@@ -20,6 +10,8 @@ $subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 210px;
$topBarHeight: 56px;
$contentHeight: calc(100vh - 56px);
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
......
datax_ui/src/utils/auth.js 0 → 100644
import Storage from 'good-storage'
const TokenKey = 'data_ui_token'
export function getToken() {
return Storage.get(TokenKey)
}
export function setToken(token) {
return Storage.set(TokenKey, token)
}
export function removeToken() {
return Storage.remove(TokenKey)
}
datax-ui/src/utils/data-process.js → datax_ui/src/utils/data-process.js
// 回显数据字典
export function selectDictLabel (datas, value) {
export function selectDictLabel(datas, value) {
var actions = []
Object.keys(datas).map((key) => {
if (datas[key].itemText === ('' + value)) {
......
datax-ui/src/utils/get-page-title.js → datax_ui/src/utils/get-page-title.js
import defaultSettings from '@/settings'
const title = defaultSettings.title || 'Vue Template'
const title = defaultSettings.title || 'Vue Admin Template'
export default function getPageTitle (pageTitle) {
export default function getPageTitle(pageTitle) {
if (pageTitle) {
return `${pageTitle} - ${title}`
}
......
datax_ui/src/utils/index.js 0 → 100644
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* Parse the time to string
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string | null}
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0 || !time) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string')) {
if ((/^[0-9]+$/.test(time))) {
// support "1548221490638"
time = parseInt(time)
} else {
// support safari
// https://stackoverflow.com/questions/4310953/invalid-date-in-safari
time = time.replace(new RegExp(/-/gm), '/')
}
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
return value.toString().padStart(2, '0')
})
return time_str
}
/**
* @param {number} time
* @param {string} option
* @returns {string}
*/
export function formatTime(time, option) {
if (('' + time).length === 10) {
time = parseInt(time) * 1000
} else {
time = +time
}
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
}
}
/**
* @param {string} url
* @returns {Object}
*/
export function param2Obj(url) {
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
if (!search) {
return {}
}
const obj = {}
const searchArr = search.split('&')
searchArr.forEach(v => {
const index = v.indexOf('=')
if (index !== -1) {
const name = v.substring(0, index)
const val = v.substring(index + 1, v.length)
obj[name] = val
}
})
return obj
}
datax-ui/src/utils/json-tree.js → datax_ui/src/utils/json-tree.js
......@@ -4,7 +4,7 @@
* @param nodes 节点对象
* @param config 配置对象
*/
export function construct (nodes, config) {
export function construct(nodes, config) {
const id = (config && config.id) || 'id'
const pid = (config && config.pid) || 'pid'
const children = (config && config.children) || 'children'
......@@ -12,7 +12,7 @@ export function construct (nodes, config) {
const jsonTree = []
nodes.forEach(v => { idMap[v[id]] = v })
nodes.forEach(v => {
let parent = idMap[v[pid]]
const parent = idMap[v[pid]]
if (parent) {
!parent[children] && (parent[children] = [])
parent[children].push(v)
......@@ -29,16 +29,18 @@ export function construct (nodes, config) {
* @param forest 单个或者多个树型对象
* @param config 配置
*/
export function destruct (nodes, config) {
export function destruct(nodes, config) {
const id = (config && config.id) || 'id'
const pid = (config && config.pid) || 'pid'
const children = (config && config.children) || 'children'
function flatTree (tree) {
function flatTree(tree) {
const queue = [tree]
const result = []
while (queue.length) {
let currentNode = queue.shift()
// eslint-disable-next-line no-prototype-builtins
if (currentNode.hasOwnProperty(id)) {
// eslint-disable-next-line no-prototype-builtins
if (!currentNode.hasOwnProperty(pid)) {
currentNode = { ...currentNode, [pid]: null }
}
......
datax-ui/src/utils/request.js → datax_ui/src/utils/request.js
import axios from 'axios'
import { Loading, Message } from 'element-ui'
import storage from '@/utils/storage'
import router from '@/router'
import store from '@/store'
import router from '@/router'
const instance = axios.create({
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
let loadingInstance
instance.interceptors.request.use(
// request interceptor
service.interceptors.request.use(
config => {
const hasToken = storage.ss.get('vue_template_token')
const hasToken = store.getters.token
if (hasToken) {
config.headers['Authorization'] = 'Bearer ' + hasToken
}
......@@ -28,16 +29,17 @@ instance.interceptors.request.use(
error => {
loadingInstance.close()
Message.error('请求错误')
console.log(error)
return Promise.reject(error)
}
)
instance.interceptors.response.use(
// response interceptor
service.interceptors.response.use(
response => {
loadingInstance.close()
const code = response.data.code || 200
if (code === 500) {
// 系统错误
Message.error(response.data.msg || '系统错误')
return Promise.reject(new Error(response.data.msg))
} else {
......@@ -46,7 +48,6 @@ instance.interceptors.response.use(
},
error => {
loadingInstance.close()
console.log(error.response)
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
......@@ -88,4 +89,4 @@ instance.interceptors.response.use(
}
)
export default instance
export default service
datax_ui/src/utils/validate.js 0 → 100644
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
datax-ui/src/views/dashboard/index.vue → datax_ui/src/views/dashboard/index.vue
<template>
<div class="dashboard-container">
<!-- <div class="dashboard-text">nickname: {{ nickname }}</div>-->
<div class="dashboard-text">roles: <span v-for="role in user_role" :key="role">{{ role }}</span></div>
<div class="dashboard-text">nickname: {{ user.nickname }}</div>
</div>
</template>
......@@ -12,8 +11,7 @@ export default {
name: 'Dashboard',
computed: {
...mapGetters([
'nickname',
'user_role'
'user'
])
}
}
......
datax-ui/src/views/error-page/401.vue → datax_ui/src/views/error-page/401.vue
......@@ -39,7 +39,7 @@ import errGif from '@/assets/401_images/401.gif'
export default {
name: 'Page401',
data () {
data() {
return {
errGif: errGif + '?' + +new Date(),
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
......@@ -47,7 +47,7 @@ export default {
}
},
methods: {
back () {
back() {
if (this.$route.query.noGoBack) {
this.$router.push({ path: '/dashboard' })
} else {
......
datax-ui/src/views/error-page/404.vue → datax_ui/src/views/error-page/404.vue
......@@ -25,7 +25,7 @@
export default {
name: 'Page404',
computed: {
message () {
message() {
return 'The webmaster said that you can not enter this page...'
}
}
......
datax-ui/src/views/login/index.vue → datax_ui/src/views/login/index.vue
......@@ -7,10 +7,12 @@
</div>
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input
ref="username"
v-model="loginForm.username"
suffix-icon="el-icon-user"
placeholder="Username"
name="username"
type="text"
......@@ -20,20 +22,26 @@
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
suffix-icon="el-icon-lock"
type="password"
:type="passwordType"
placeholder="Password"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
<div class="tips">
<span style="margin-right:20px;">username: admin</span>
......@@ -46,11 +54,10 @@
<script>
import { validUsername } from '@/utils/validate'
import { log } from '@/api/system/user'
export default {
name: 'Login',
data () {
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error('Please enter the correct user name'))
......@@ -68,34 +75,43 @@ export default {
return {
loginForm: {
username: 'admin',
password: '123456'
password: '111111'
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
},
loading: false,
passwordType: 'password',
redirect: undefined
}
},
watch: {
$route: {
handler: function (route) {
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
methods: {
handleLogin () {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
}).then(() => {
log()
}).catch(() => {
this.loading = false
})
......@@ -128,6 +144,7 @@ $cursor: #fff;
.el-input {
display: inline-block;
height: 47px;
width: 85%;
input {
background: transparent;
......@@ -187,6 +204,14 @@ $light_gray:#eee;
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.title-container {
position: relative;
......@@ -198,5 +223,15 @@ $light_gray:#eee;
font-weight: bold;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
</style>
datax_ui/src/views/market/index.vue 0 → 100644
<template>
<div class="app-container">
Market
</div>
</template>
<script>
export default {
name: 'Market'
}
</script>
<style lang="scss" scoped>
</style>
datax_ui/src/views/metadata/index.vue 0 → 100644
<template>
<div class="app-container">
Metadata
</div>
</template>
<script>
export default {
name: 'Metadata'
}
</script>
<style lang="scss" scoped>
</style>
datax_ui/src/views/monitor/index.vue 0 → 100644
<template>
<div class="app-container">
Monitor
</div>
</template>
<script>
export default {
name: 'Monitor'
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/redirect/index.vue → datax_ui/src/views/redirect/index.vue
<script>
export default {
created () {
created() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({ path: '/' + path, query })
},
render: function (h) {
return h()
render: function(h) {
return h() // avoid warning message
}
}
</script>
datax_ui/src/views/scheduler/index.vue 0 → 100644
<template>
<div class="app-container">
Scheduler
</div>
</template>
<script>
export default {
name: 'Scheduler'
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/scheduler/job/JobList.vue → datax_ui/src/views/scheduler/job/JobList.vue
<template>
<div>
<el-card class="box-card" shadow="always">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form ref="queryForm" :model="queryParams" :inline="true">
<el-form-item label="任务名称" prop="jobName">
<el-input
v-model="queryParams.jobName"
......@@ -21,35 +21,35 @@
<el-col :span="12">
<el-button-group>
<el-button
v-hasPerm="['scheduler:job:add']"
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPerm="['scheduler:job:add']"
>新增</el-button>
<el-button
v-hasPerm="['scheduler:job:edit']"
type="success"
icon="el-icon-edit-outline"
size="mini"
:disabled="single"
@click="handleEdit"
v-hasPerm="['scheduler:job:edit']"
>修改</el-button>
<el-button
v-hasPerm="['scheduler:job:detail']"
type="info"
icon="el-icon-view"
size="mini"
:disabled="single"
@click="handleDetail"
v-hasPerm="['scheduler:job:detail']"
>详情</el-button>
<el-button
v-hasPerm="['scheduler:job:remove']"
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleBatchDelete"
v-hasPerm="['scheduler:job:remove']"
>删除</el-button>
</el-button-group>
</el-col>
......@@ -95,12 +95,12 @@
<el-table
v-loading="loading"
:data="jobList"
@selection-change="handleSelectionChange"
border
tooltip-effect="dark"
:size="tableSize"
:height="tableHeight"
style="width: 100%;margin: 15px 0;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" width="55" align="center">
......@@ -111,9 +111,9 @@
<template v-for="(item, index) in tableColumns">
<el-table-column
v-if="item.show"
:key="index"
:prop="item.prop"
:label="item.label"
:key="index"
:formatter="item.formatter"
align="center"
show-overflow-tooltip
......@@ -123,50 +123,51 @@
<template slot-scope="scope">
<el-popover
placement="left"
trigger="click">
trigger="click"
>
<el-button
v-hasPerm="['scheduler:job:edit']"
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
v-hasPerm="['scheduler:job:edit']"
>修改</el-button>
<el-button
v-hasPerm="['scheduler:job:detail']"
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
v-hasPerm="['scheduler:job:detail']"
>详情</el-button>
<el-button
v-hasPerm="['scheduler:job:pause']"
:disabled="scope.row.status !== '1'"
size="mini"
type="text"
icon="el-icon-view"
@click="handlePause(scope.row)"
v-hasPerm="['scheduler:job:pause']"
>暂停任务</el-button>
<el-button
v-hasPerm="['scheduler:job:resume']"
:disabled="scope.row.status === '1'"
size="mini"
type="text"
icon="el-icon-view"
@click="handleResume(scope.row)"
v-hasPerm="['scheduler:job:resume']"
>恢复任务</el-button>
<el-button
v-hasPerm="['scheduler:job:run']"
size="mini"
type="text"
icon="el-icon-view"
@click="handleRun(scope.row)"
v-hasPerm="['scheduler:job:run']"
>立即执行任务</el-button>
<el-button
v-hasPerm="['scheduler:job:remove']"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPerm="['scheduler:job:remove']"
>删除</el-button>
<el-button slot="reference">操作</el-button>
</el-popover>
......@@ -177,12 +178,12 @@
<el-pagination
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="queryParams.pageNum"
:page-size.sync="queryParams.pageSize"
:total="total"
></el-pagination>
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
</div>
</template>
......@@ -192,7 +193,7 @@ import { pageJob, delJob, pauseJob, resumeJob, runJob } from '@/api/scheduler/jo
export default {
name: 'JobList',
data () {
data() {
return {
tableHeight: document.body.offsetHeight - 340 + 'px',
// 展示切换
......@@ -243,7 +244,7 @@ export default {
}
}
},
created () {
created() {
this.getDicts('sys_job_status').then(response => {
if (response.success) {
this.statusOptions = response.data
......@@ -251,12 +252,12 @@ export default {
})
this.getList()
},
mounted () {
mounted() {
this.initCols()
},
methods: {
/** 查询参数列表 */
getList () {
getList() {
this.loading = true
pageJob(this.queryParams).then(response => {
this.loading = false
......@@ -267,10 +268,10 @@ export default {
}
})
},
initCols () {
initCols() {
this.checkedTableColumns = this.tableColumns.map(col => col.prop)
},
handleCheckedColsChange (val) {
handleCheckedColsChange(val) {
this.tableColumns.forEach(col => {
if (!this.checkedTableColumns.includes(col.prop)) {
col.show = false
......@@ -279,31 +280,31 @@ export default {
}
})
},
handleCommand (command) {
handleCommand(command) {
this.tableSize = command
},
/** 搜索按钮操作 */
handleQuery () {
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery () {
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 刷新列表 */
handleRefresh () {
handleRefresh() {
this.getList()
},
/** 多选框选中数据 */
handleSelectionChange (selection) {
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd () {
handleAdd() {
this.showOptions.data = {}
this.showOptions.showList = false
this.showOptions.showAdd = true
......@@ -312,7 +313,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 修改按钮操作 */
handleEdit (row) {
handleEdit(row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
......@@ -321,7 +322,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 详情按钮操作 */
handleDetail (row) {
handleDetail(row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
......@@ -330,7 +331,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 暂停任务按钮操作 */
handlePause (row) {
handlePause(row) {
this.$confirm('是否暂停该任务？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -344,7 +345,7 @@ export default {
})
},
/** 恢复任务按钮操作 */
handleResume (row) {
handleResume(row) {
this.$confirm('是否恢复该任务？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -358,7 +359,7 @@ export default {
})
},
/** 立即执行任务按钮操作 */
handleRun (row) {
handleRun(row) {
this.$confirm('是否立即执行该任务？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -372,7 +373,7 @@ export default {
})
},
/** 删除按钮操作 */
handleDelete (row) {
handleDelete(row) {
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -386,7 +387,7 @@ export default {
})
},
/** 批量删除按钮操作 */
handleBatchDelete () {
handleBatchDelete() {
if (!this.ids.length) {
this.$message({
message: '请先选择需要操作的数据',
......@@ -395,19 +396,19 @@ export default {
}
this.$message.warning('不支持批量删除')
},
handleSizeChange (val) {
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.queryParams.pageNum = 1
this.queryParams.pageSize = val
this.getList()
},
handleCurrentChange (val) {
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.queryParams.pageNum = val
this.getList()
},
statusFormatter (row, column, cellValue, index) {
let dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
statusFormatter(row, column, cellValue, index) {
const dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
if (cellValue === '1') {
return <el-tag type="success">{dictLabel}</el-tag>
} else {
......
datax-ui/src/views/scheduler/log/JobLogList.vue → datax_ui/src/views/scheduler/log/JobLogList.vue
<template>
<div>
<el-card class="box-card" shadow="always">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form ref="queryForm" :model="queryParams" :inline="true">
<el-form-item label="定时任务" prop="jobId">
<el-select
v-model="queryParams.jobId"
......@@ -28,20 +28,20 @@
<el-col :span="12">
<el-button-group>
<el-button
v-hasPerm="['scheduler:log:detail']"
type="info"
icon="el-icon-view"
size="mini"
:disabled="single"
@click="handleDetail"
v-hasPerm="['scheduler:log:detail']"
>详情</el-button>
<el-button
v-hasPerm="['scheduler:log:remove']"
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleBatchDelete"
v-hasPerm="['scheduler:log:remove']"
>删除</el-button>
</el-button-group>
</el-col>
......@@ -87,12 +87,12 @@
<el-table
v-loading="loading"
:data="logList"
@selection-change="handleSelectionChange"
border
tooltip-effect="dark"
:size="tableSize"
:height="tableHeight"
style="width: 100%;margin: 15px 0;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" width="55" align="center">
......@@ -103,9 +103,9 @@
<template v-for="(item, index) in tableColumns">
<el-table-column
v-if="item.show"
:key="index"
:prop="item.prop"
:label="item.label"
:key="index"
:formatter="item.formatter"
align="center"
show-overflow-tooltip
......@@ -115,20 +115,21 @@
<template slot-scope="scope">
<el-popover
placement="left"
trigger="click">
trigger="click"
>
<el-button
v-hasPerm="['scheduler:log:detail']"
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
v-hasPerm="['scheduler:log:detail']"
>详情</el-button>
<el-button
v-hasPerm="['scheduler:log:remove']"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPerm="['scheduler:log:remove']"
>删除</el-button>
<el-button slot="reference">操作</el-button>
</el-popover>
......@@ -139,12 +140,12 @@
<el-pagination
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="queryParams.pageNum"
:page-size.sync="queryParams.pageSize"
:total="total"
></el-pagination>
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
</div>
</template>
......@@ -155,7 +156,7 @@ import { listJob } from '@/api/scheduler/job'
export default {
name: 'JobLogList',
data () {
data() {
return {
tableHeight: document.body.offsetHeight - 340 + 'px',
// 展示切换
......@@ -202,7 +203,7 @@ export default {
jobOptions: []
}
},
created () {
created() {
this.getDicts('sys_normal_status').then(response => {
if (response.success) {
this.statusOptions = response.data
......@@ -211,11 +212,11 @@ export default {
this.getJobList()
this.getList()
},
mounted () {
mounted() {
this.initCols()
},
methods: {
getJobList () {
getJobList() {
listJob().then(response => {
if (response.success) {
this.jobOptions = response.data
......@@ -223,7 +224,7 @@ export default {
})
},
/** 查询参数列表 */
getList () {
getList() {
this.loading = true
pageLog(this.queryParams).then(response => {
this.loading = false
......@@ -234,10 +235,10 @@ export default {
}
})
},
initCols () {
initCols() {
this.checkedTableColumns = this.tableColumns.map(col => col.prop)
},
handleCheckedColsChange (val) {
handleCheckedColsChange(val) {
this.tableColumns.forEach(col => {
if (!this.checkedTableColumns.includes(col.prop)) {
col.show = false
......@@ -246,38 +247,38 @@ export default {
}
})
},
handleCommand (command) {
handleCommand(command) {
this.tableSize = command
},
/** 搜索按钮操作 */
handleQuery () {
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery () {
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 刷新列表 */
handleRefresh () {
handleRefresh() {
this.getList()
},
/** 多选框选中数据 */
handleSelectionChange (selection) {
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 详情按钮操作 */
handleDetail (row) {
handleDetail(row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showDetail = true
this.$emit('showCard', this.showOptions)
},
/** 删除按钮操作 */
handleDelete (row) {
handleDelete(row) {
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -291,7 +292,7 @@ export default {
})
},
/** 批量删除按钮操作 */
handleBatchDelete () {
handleBatchDelete() {
if (!this.ids.length) {
this.$message({
message: '请先选择需要操作的数据',
......@@ -300,23 +301,23 @@ export default {
}
this.$message.warning('不支持批量删除')
},
handleSizeChange (val) {
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.queryParams.pageNum = 1
this.queryParams.pageSize = val
this.getList()
},
handleCurrentChange (val) {
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.queryParams.pageNum = val
this.getList()
},
statusFormatter (row, column, cellValue, index) {
let dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
statusFormatter(row, column, cellValue, index) {
const dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
if (cellValue === '1') {
return <el-tag type="success">{dictLabel}</el-tag>
return <el-tag type='success'>{dictLabel}</el-tag>
} else {
return <el-tag type="warning">{dictLabel}</el-tag>
return <el-tag type='warning'>{dictLabel}</el-tag>
}
}
}
......
datax_ui/src/views/system/index.vue 0 → 100644
<template>
<div class="app-container">
System
</div>
</template>
<script>
export default {
name: 'System'
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/system/menu/MenuAdd.vue → datax_ui/src/views/system/menu/MenuAdd.vue
......@@ -46,6 +46,15 @@
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model="form.menuSort" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="隐藏" prop="menuHidden">
<el-radio-group v-model="form.menuHidden">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
......@@ -106,7 +115,8 @@ export default {
form: {
status: '1',
parentId: '0',
menuType: '0'
menuType: '0',
menuHidden: '0'
},
// 表单校验
rules: {
......
datax-ui/src/views/system/menu/MenuDetail.vue → datax_ui/src/views/system/menu/MenuDetail.vue
<template>
<div>
<el-card class="box-card" shadow="always">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<div :style="classCardbody">
<el-form ref="form" :model="form" label-width="80px" disabled>
<el-form-item label="上级资源" prop="parentId">
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" disabled/>
</el-form-item>
<el-form-item label="资源名称" prop="menuName">
<el-input v-model="form.menuName" />
</el-form-item>
<el-form-item label="资源类型" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio
v-for="dict in menuTypeOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="路由地址" prop="menuPath" v-if="form.menuType !== '2'">
<el-input v-model="form.menuPath" />
</el-form-item>
<el-form-item label="路由组件" prop="menuComponent" v-if="form.menuType !== '2'">
<el-input v-model="form.menuComponent" />
</el-form-item>
<el-form-item label="跳转地址" prop="menuRedirect" v-if="form.menuType === '0'">
<el-input v-model="form.menuRedirect" />
</el-form-item>
<el-form-item label="权限标识" prop="menuPerms" v-if="form.menuType === '2'">
<el-input v-model="form.menuPerms" />
</el-form-item>
<el-form-item label="资源图标" prop="menuIcon" v-if="form.menuType !== '2'">
<el-input v-model="form.menuIcon" />
</el-form-item>
<el-form-item label="资源编码" prop="menuCode" v-if="form.menuType !== '2'">
<el-input v-model="form.menuCode" />
</el-form-item>
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model="form.menuSort" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" />
</el-form-item>
</el-form>
</div>
</el-card>
</div>
<div>
<el-card class="box-card" shadow="always">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<div :style="classCardbody">
<el-form ref="form" :model="form" label-width="80px" disabled>
<el-form-item label="上级资源" prop="parentId">
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" disabled />
</el-form-item>
<el-form-item label="资源名称" prop="menuName">
<el-input v-model="form.menuName" />
</el-form-item>
<el-form-item label="资源类型" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio
v-for="dict in menuTypeOptions"
:key="dict.id"
:label="dict.itemText"
>{{ dict.itemValue }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.menuType !== '2'" label="路由地址" prop="menuPath">
<el-input v-model="form.menuPath" />
</el-form-item>
<el-form-item v-if="form.menuType !== '2'" label="路由组件" prop="menuComponent">
<el-input v-model="form.menuComponent" />
</el-form-item>
<el-form-item v-if="form.menuType === '0'" label="跳转地址" prop="menuRedirect">
<el-input v-model="form.menuRedirect" />
</el-form-item>
<el-form-item v-if="form.menuType === '2'" label="权限标识" prop="menuPerms">
<el-input v-model="form.menuPerms" />
</el-form-item>
<el-form-item v-if="form.menuType !== '2'" label="资源图标" prop="menuIcon">
<el-input v-model="form.menuIcon" />
</el-form-item>
<el-form-item v-if="form.menuType !== '2'" label="资源编码" prop="menuCode">
<el-input v-model="form.menuCode" />
</el-form-item>
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model="form.menuSort" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="隐藏" prop="menuHidden">
<el-radio-group v-model="form.menuHidden">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{ dict.itemValue }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{ dict.itemValue }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" />
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</template>
<script>
......@@ -75,12 +84,12 @@ export default {
props: {
data: {
type: Object,
default: function () {
default: function() {
return {}
}
}
},
data () {
data() {
return {
classCardbody: {
overflow: 'auto',
......@@ -105,7 +114,7 @@ export default {
menuOptions: []
}
},
created () {
created() {
console.log('id:' + this.data.id)
this.getDicts('sys_common_status').then(response => {
if (response.success) {
......@@ -119,14 +128,14 @@ export default {
})
this.getMenuTreeSelect()
},
mounted () {
mounted() {
this.getMenu(this.data.id)
},
methods: {
showCard () {
showCard() {
this.$emit('showCard', this.showOptions)
},
getMenuTreeSelect: function () {
getMenuTreeSelect: function() {
listMenu().then(response => {
if (response.success) {
const { data } = response
......@@ -142,7 +151,7 @@ export default {
})
},
/** 转换资源数据结构 */
normalizer (node) {
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
......@@ -153,7 +162,7 @@ export default {
}
},
/** 获取详情 */
getMenu: function (id) {
getMenu: function(id) {
getMenu(id).then(response => {
if (response.success) {
this.form = response.data
......
datax-ui/src/views/system/menu/MenuEdit.vue → datax_ui/src/views/system/menu/MenuEdit.vue
<template>
<div>
<el-card class="box-card" shadow="always">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-plus" round @click="submitForm" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled">{{loadingOptions.loadingText}}</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<div :style="classCardbody">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="上级资源" prop="parentId">
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" placeholder="请选择上级资源" />
</el-form-item>
<el-form-item label="资源名称" prop="menuName">
<el-input v-model="form.menuName" placeholder="请输入资源名称" />
</el-form-item>
<el-form-item label="资源类型" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio
v-for="dict in menuTypeOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="路由地址" prop="menuPath" v-if="form.menuType !== '2'">
<el-input v-model="form.menuPath" placeholder="请输入对应路由地址path" />
</el-form-item>
<el-form-item label="路由组件" prop="menuComponent" v-if="form.menuType !== '2'">
<el-input v-model="form.menuComponent" placeholder="请输入对应路由组件component" />
</el-form-item>
<el-form-item label="跳转地址" prop="menuRedirect" v-if="form.menuType === '0'">
<el-input v-model="form.menuRedirect" placeholder="请输入对应路由默认跳转地址redirect" />
</el-form-item>
<el-form-item label="权限标识" prop="menuPerms" v-if="form.menuType === '2'">
<el-input v-model="form.menuPerms" placeholder="请输入权限标识" />
</el-form-item>
<el-form-item label="资源图标" prop="menuIcon" v-if="form.menuType !== '2'">
<el-input v-model="form.menuIcon" placeholder="请输入资源图标" />
</el-form-item>
<el-form-item label="资源编码" prop="menuCode" v-if="form.menuType !== '2'">
<el-input v-model="form.menuCode" placeholder="请输入资源编码" />
</el-form-item>
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model="form.menuSort" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{dict.itemValue}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
</div>
</el-card>
</div>
<div>
<el-card class="box-card" shadow="always">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<div :style="classCardbody">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="上级资源" prop="parentId">
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" placeholder="请选择上级资源" />
</el-form-item>
<el-form-item label="资源名称" prop="menuName">
<el-input v-model="form.menuName" placeholder="请输入资源名称" />
</el-form-item>
<el-form-item label="资源类型" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio
v-for="dict in menuTypeOptions"
:key="dict.id"
:label="dict.itemText"
>{{ dict.itemValue }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.menuType !== '2'" label="路由地址" prop="menuPath">
<el-input v-model="form.menuPath" placeholder="请输入对应路由地址path" />
</el-form-item>
<el-form-item v-if="form.menuType !== '2'" label="路由组件" prop="menuComponent">
<el-input v-model="form.menuComponent" placeholder="请输入对应路由组件component" />
</el-form-item>
<el-form-item v-if="form.menuType === '0'" label="跳转地址" prop="menuRedirect">
<el-input v-model="form.menuRedirect" placeholder="请输入对应路由默认跳转地址redirect" />
</el-form-item>
<el-form-item v-if="form.menuType === '2'" label="权限标识" prop="menuPerms">
<el-input v-model="form.menuPerms" placeholder="请输入权限标识" />
</el-form-item>
<el-form-item v-if="form.menuType !== '2'" label="资源图标" prop="menuIcon">
<el-input v-model="form.menuIcon" placeholder="请输入资源图标" />
</el-form-item>
<el-form-item v-if="form.menuType !== '2'" label="资源编码" prop="menuCode">
<el-input v-model="form.menuCode" placeholder="请输入资源编码" />
</el-form-item>
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model="form.menuSort" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="隐藏" prop="menuHidden">
<el-radio-group v-model="form.menuHidden">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{ dict.itemValue }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{ dict.itemValue }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</template>
<script>
......@@ -76,12 +85,12 @@ export default {
props: {
data: {
type: Object,
default: function () {
default: function() {
return {}
}
}
},
data () {
data() {
return {
classCardbody: {
overflow: 'auto',
......@@ -124,7 +133,7 @@ export default {
menuOptions: []
}
},
created () {
created() {
console.log('id:' + this.data.id)
this.getDicts('sys_common_status').then(response => {
if (response.success) {
......@@ -138,14 +147,14 @@ export default {
})
this.getMenuTreeSelect()
},
mounted () {
mounted() {
this.getMenu(this.data.id)
},
methods: {
showCard () {
showCard() {
this.$emit('showCard', this.showOptions)
},
getMenuTreeSelect: function () {
getMenuTreeSelect: function() {
listMenu().then(response => {
if (response.success) {
const { data } = response
......@@ -161,7 +170,7 @@ export default {
})
},
/** 转换资源数据结构 */
normalizer (node) {
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
......@@ -172,7 +181,7 @@ export default {
}
},
/** 获取详情 */
getMenu: function (id) {
getMenu: function(id) {
getMenu(id).then(response => {
if (response.success) {
this.form = response.data
......@@ -180,7 +189,7 @@ export default {
})
},
/** 提交按钮 */
submitForm: function () {
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
this.loadingOptions.loading = true
......
datax-ui/src/views/system/user/UserList.vue → datax_ui/src/views/system/user/UserList.vue
......@@ -4,17 +4,17 @@
<el-row :gutter="20">
<el-col :span="4">
<el-tree
ref="dept"
:data="deptOptions"
default-expand-all
ref="dept"
node-key="id"
empty-text="加载中，请稍后"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
/>
</el-col>
<el-col :span="20" style="border-left: 2px solid #aaa;">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form ref="queryForm" :model="queryParams" :inline="true">
<el-form-item label="用户名称" prop="username">
<el-input
v-model="queryParams.username"
......@@ -41,7 +41,7 @@
{{ advanced ? '收起' : '展开' }}
<i
:class="{ 'el-icon-arrow-up': advanced, 'el-icon-arrow-down': !advanced }"
></i>
/>
</el-button>
</el-form-item>
</el-form>
......@@ -50,35 +50,35 @@
<el-col :span="12">
<el-button-group>
<el-button
v-hasPerm="['system:user:add']"
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPerm="['system:user:add']"
>新增</el-button>
<el-button
v-hasPerm="['system:user:edit']"
type="success"
icon="el-icon-edit-outline"
size="mini"
:disabled="single"
@click="handleEdit"
v-hasPerm="['system:user:edit']"
>修改</el-button>
<el-button
v-hasPerm="['system:user:detail']"
type="info"
icon="el-icon-view"
size="mini"
:disabled="single"
@click="handleDetail"
v-hasPerm="['system:user:detail']"
>详情</el-button>
<el-button
v-hasPerm="['system:user:remove']"
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleBatchDelete"
v-hasPerm="['system:user:remove']"
>删除</el-button>
</el-button-group>
</el-col>
......@@ -127,12 +127,12 @@
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
border
tooltip-effect="dark"
:size="tableSize"
:height="tableHeight"
style="width: 100%;margin: 15px 0;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" width="55" align="center">
......@@ -143,9 +143,9 @@
<template v-for="(item, index) in tableColumns">
<el-table-column
v-if="item.show"
:key="index"
:prop="item.prop"
:label="item.label"
:key="index"
:formatter="item.formatter"
align="center"
show-overflow-tooltip
......@@ -155,27 +155,28 @@
<template slot-scope="scope">
<el-popover
placement="left"
trigger="click">
trigger="click"
>
<el-button
v-hasPerm="['system:user:edit']"
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
v-hasPerm="['system:user:edit']"
>修改</el-button>
<el-button
v-hasPerm="['system:user:detail']"
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
v-hasPerm="['system:user:detail']"
>详情</el-button>
<el-button
v-hasPerm="['system:user:remove']"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPerm="['system:user:remove']"
>删除</el-button>
<el-button slot="reference">操作</el-button>
</el-popover>
......@@ -186,12 +187,12 @@
<el-pagination
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="queryParams.pageNum"
:page-size.sync="queryParams.pageSize"
:total="total"
></el-pagination>
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-col>
</el-row>
</el-card>
......@@ -205,7 +206,7 @@ import { construct } from '@/utils/json-tree'
export default {
name: 'UserList',
data () {
data() {
return {
tableHeight: document.body.offsetHeight - 340 + 'px',
// 展示切换
......@@ -281,16 +282,16 @@ export default {
}
}
},
created () {
created() {
this.getList()
this.getDeptTree()
},
mounted () {
mounted() {
this.initCols()
},
methods: {
/** 查询用户列表 */
getList () {
getList() {
this.loading = true
pageUser(this.queryParams).then(response => {
this.loading = false
......@@ -302,7 +303,7 @@ export default {
})
},
/** 查询部门树结构 */
getDeptTree () {
getDeptTree() {
listDept().then(response => {
if (response.success) {
const { data } = response
......@@ -314,10 +315,10 @@ export default {
}
})
},
initCols () {
initCols() {
this.checkedTableColumns = this.tableColumns.map(col => col.prop)
},
handleCheckedColsChange (val) {
handleCheckedColsChange(val) {
this.tableColumns.forEach(col => {
if (!this.checkedTableColumns.includes(col.prop)) {
col.show = false
......@@ -326,31 +327,31 @@ export default {
}
})
},
handleCommand (command) {
handleCommand(command) {
this.tableSize = command
},
/** 搜索按钮操作 */
handleQuery () {
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery () {
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 刷新列表 */
handleRefresh () {
handleRefresh() {
this.getList()
},
/** 多选框选中数据 */
handleSelectionChange (selection) {
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd () {
handleAdd() {
this.showOptions.data = {}
this.showOptions.showList = false
this.showOptions.showAdd = true
......@@ -359,7 +360,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 修改按钮操作 */
handleEdit (row) {
handleEdit(row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
......@@ -368,7 +369,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 详情按钮操作 */
handleDetail (row) {
handleDetail(row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
......@@ -377,7 +378,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 删除按钮操作 */
handleDelete (row) {
handleDelete(row) {
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -391,7 +392,7 @@ export default {
})
},
/** 批量删除按钮操作 */
handleBatchDelete () {
handleBatchDelete() {
if (!this.ids.length) {
this.$message({
message: '请先选择需要操作的数据',
......@@ -400,36 +401,36 @@ export default {
}
this.$message.warning('不支持批量删除')
},
handleSizeChange (val) {
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.queryParams.pageNum = 1
this.queryParams.pageSize = val
this.getList()
},
handleCurrentChange (val) {
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.queryParams.pageNum = val
this.getList()
},
/** 节点单击事件 */
handleNodeClick (data) {
handleNodeClick(data) {
this.queryParams.deptId = data.id
this.getList()
},
toggleAdvanced () {
toggleAdvanced() {
this.advanced = !this.advanced
},
deptFormatter (row, column, cellValue, index) {
deptFormatter(row, column, cellValue, index) {
return row.dept.deptName
},
roleFormatter (row, column, cellValue, index) {
roleFormatter(row, column, cellValue, index) {
return row.roles.map(item => item.roleName).join(',')
},
postFormatter (row, column, cellValue, index) {
postFormatter(row, column, cellValue, index) {
return row.posts.map(item => item.postName).join(',')
},
statusFormatter (row, column, cellValue, index) {
let dictText = row.status_dictText
statusFormatter(row, column, cellValue, index) {
const dictText = row.status_dictText
if (cellValue === '1') {
return <el-tag type="success">{dictText}</el-tag>
} else {
......
datax-ui/src/views/visual/dataset/DataSetList.vue → datax_ui/src/views/visual/dataset/DataSetList.vue
<template>
<div>
<el-card class="box-card" shadow="always">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form ref="queryForm" :model="queryParams" :inline="true">
<el-form-item label="数据集名称" prop="setName">
<el-input
v-model="queryParams.setName"
......@@ -91,12 +91,12 @@
<el-table
v-loading="loading"
:data="dataSetList"
@selection-change="handleSelectionChange"
border
tooltip-effect="dark"
:size="tableSize"
:height="tableHeight"
style="width: 100%;margin: 15px 0;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" width="55" align="center">
......@@ -107,9 +107,9 @@
<template v-for="(item, index) in tableColumns">
<el-table-column
v-if="item.show"
:key="index"
:prop="item.prop"
:label="item.label"
:key="index"
:formatter="item.formatter"
align="center"
show-overflow-tooltip
......@@ -119,7 +119,8 @@
<template slot-scope="scope">
<el-popover
placement="left"
trigger="click">
trigger="click"
>
<el-button
size="mini"
type="text"
......@@ -147,12 +148,12 @@
<el-pagination
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="queryParams.pageNum"
:page-size.sync="queryParams.pageSize"
:total="total"
></el-pagination>
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
</div>
</template>
......@@ -162,7 +163,7 @@ import { pageDataSet, delDataSet, delDataSets } from '@/api/visual/dataset'
export default {
name: 'DataSetList',
data () {
data() {
return {
tableHeight: document.body.offsetHeight - 340 + 'px',
// 展示切换
......@@ -209,7 +210,7 @@ export default {
}
}
},
created () {
created() {
this.getDicts('sys_common_status').then(response => {
if (response.success) {
this.statusOptions = response.data
......@@ -217,12 +218,12 @@ export default {
})
this.getList()
},
mounted () {
mounted() {
this.initCols()
},
methods: {
/** 查询数据集列表 */
getList () {
getList() {
this.loading = true
pageDataSet(this.queryParams).then(response => {
this.loading = false
......@@ -233,10 +234,10 @@ export default {
}
})
},
initCols () {
initCols() {
this.checkedTableColumns = this.tableColumns.map(col => col.prop)
},
handleCheckedColsChange (val) {
handleCheckedColsChange(val) {
this.tableColumns.forEach(col => {
if (!this.checkedTableColumns.includes(col.prop)) {
col.show = false
......@@ -245,31 +246,31 @@ export default {
}
})
},
handleCommand (command) {
handleCommand(command) {
this.tableSize = command
},
/** 搜索按钮操作 */
handleQuery () {
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery () {
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 刷新列表 */
handleRefresh () {
handleRefresh() {
this.getList()
},
/** 多选框选中数据 */
handleSelectionChange (selection) {
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd () {
handleAdd() {
this.showOptions.data = {}
this.showOptions.showList = false
this.showOptions.showAdd = true
......@@ -278,7 +279,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 修改按钮操作 */
handleEdit (row) {
handleEdit(row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
......@@ -287,7 +288,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 详情按钮操作 */
handleDetail (row) {
handleDetail(row) {
this.showOptions.data.id = row.id || this.ids[0]
this.showOptions.showList = false
this.showOptions.showAdd = false
......@@ -296,7 +297,7 @@ export default {
this.$emit('showCard', this.showOptions)
},
/** 删除按钮操作 */
handleDelete (row) {
handleDelete(row) {
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -310,7 +311,7 @@ export default {
})
},
/** 批量删除按钮操作 */
handleBatchDelete () {
handleBatchDelete() {
if (!this.ids.length) {
this.$message({
message: '请先选择需要操作的数据',
......@@ -319,23 +320,23 @@ export default {
}
this.$message.warning('不支持批量删除')
},
handleSizeChange (val) {
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.queryParams.pageNum = 1
this.queryParams.pageSize = val
this.getList()
},
handleCurrentChange (val) {
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.queryParams.pageNum = val
this.getList()
},
statusFormatter (row, column, cellValue, index) {
let dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
statusFormatter(row, column, cellValue, index) {
const dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
if (cellValue === '1') {
return <el-tag type="success">{dictLabel}</el-tag>
return <el-tag type='success'>{dictLabel}</el-tag>
} else {
return <el-tag type="warning">{dictLabel}</el-tag>
return <el-tag type='warning'>{dictLabel}</el-tag>
}
}
}
......
datax-ui/src/views/visual/dataset/index.vue → datax_ui/src/views/visual/dataset/index.vue
<template>
<div class="app-container">
<transition name="el-zoom-in-center">
<data-set-list v-if="options.showList" @showCard="showCard"></data-set-list>
<data-set-list v-if="options.showList" @showCard="showCard" />
</transition>
<transition name="el-zoom-in-top">
<data-set-add v-if="options.showAdd" :data="options.data" @showCard="showCard"></data-set-add>
<data-set-add v-if="options.showAdd" :data="options.data" @showCard="showCard" />
</transition>
<transition name="el-zoom-in-top">
<data-set-edit v-if="options.showEdit" :data="options.data" @showCard="showCard"></data-set-edit>
<data-set-edit v-if="options.showEdit" :data="options.data" @showCard="showCard" />
</transition>
<transition name="el-zoom-in-bottom">
<data-set-detail v-if="options.showDetail" :data="options.data" @showCard="showCard"></data-set-detail>
<data-set-detail v-if="options.showDetail" :data="options.data" @showCard="showCard" />
</transition>
</div>
</template>
......@@ -24,7 +24,7 @@ import DataSetDetail from './DataSetDetail'
export default {
name: 'DataSet',
components: { DataSetList, DataSetAdd, DataSetEdit, DataSetDetail },
data () {
data() {
return {
options: {
data: {},
......@@ -36,7 +36,7 @@ export default {
}
},
methods: {
showCard (data) {
showCard(data) {
Object.assign(this.options, data)
}
}
......
datax_ui/src/views/visual/index.vue 0 → 100644
<template>
<div class="app-container">
Visual
</div>
</template>
<script>
export default {
name: 'Visual'
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/vue.config.js → datax_ui/vue.config.js
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const resolve = function (dir) {
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'Template'
const name = defaultSettings.title || 'datax_ui' // page title
const port = defaultSettings.port || 9528
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/vue-template/' : '/',
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development', // 是否开启eslint保存检测
productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: false,
overlay: {
warnings: false,
errors: true
},
proxy: {
// change xxx-api/login => /login
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8612/`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src'),
'views': resolve('src/views')
'@': resolve('src')
}
}
},
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('views', resolve('src/views'))
chainWebpack(config) {
// it can improve the speed of the first screen, it is recommended to turn on preload
config.plugin('preload').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
// when there are many pages, it will cause too many meaningless requests
config.plugins.delete('prefetch')
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
......@@ -43,34 +88,45 @@ module.exports = {
symbolId: 'icon-[name]'
})
.end()
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config.optimization.runtimeChunk('single')
},
devServer: {
port: port,
open: false,
overlay: {
warnings: false,
errors: true
},
proxy: {
// change xxx-api/login => /login
[process.env.VUE_APP_BASE_API]: {
// easy-mock 1234@abcd
target: `http://localhost:8612/`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
}
}
)
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment