Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0ac0117

Browse files
author
zhuyihe
committed
优化
1 parent 6ce3a18 commit 0ac0117

25 files changed

Lines changed: 2477 additions & 139 deletions

File tree

‎.env‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
NODE_ENV="development"
2-
BASE_URL="http://test.jubao56.com/"
2+
BASE_URL="http://localhost:3000/"

‎.env.test‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
NODE_ENV="test"
2-
BASE_URL="http://test.jubao56.com/"
2+
BASE_URL="http://localhost:3000/"

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,18 @@
77
"build": "vue-cli-service build"
88
},
99
"dependencies": {
10+
"@riophae/vue-treeselect": "^0.0.38",
1011
"axios": "^0.18.0",
12+
"echarts": "^4.2.1",
1113
"element-ui": "^2.4.5",
14+
"elementui_treegrid": "^0.0.3",
1215
"nprogress": "^0.2.0",
1316
"vue": "^2.6.6",
1417
"vue-count-to": "^1.0.13",
18+
"vue-json-viewer": "^2.1.4",
1519
"vue-router": "^3.0.1",
20+
"vue2-editor": "^2.6.6",
21+
"vuedraggable": "^2.20.0",
1622
"vuex": "^3.0.1",
1723
"vuex-persistedstate": "^2.5.4"
1824
},

‎src/api/api.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import {get,post} from './request';
22
//登陆
3-
export const login=(login)=>post('/v1/admin/cmn/admin/login',login)
3+
export const login=(login)=>post('/api/post/user/login',login)
4+
export const upload=(upload)=>get('/api/get/upload',upload)

‎src/api/request.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ axios.interceptors.request.use(
2121
text: "正在加载中......",
2222
fullscreen: true
2323
});
24-
if (store.state.access_token) {
25-
config.headers["Authorization"] = "Bearer " + store.state.access_token;
24+
if (store.state.token) {
25+
config.headers["Authorization"] = "Bearer " + store.state.token;
2626
}
2727
return config;
2828
},
@@ -44,7 +44,7 @@ axios.interceptors.response.use(
4444
const res = response.data;
4545
if (res.err_code === 0) {
4646
resolve(res)
47-
} else{
47+
} else{
4848
reject(res)
4949
}
5050
})
@@ -71,17 +71,17 @@ axios.interceptors.response.use(
7171
const status = error.response.status;
7272
switch (status) {
7373
case 500:
74-
messages("error", "服务器内部错误,详情请咨询聚保服务热线:40080-59680");
74+
messages("error", "服务器内部错误");
7575
break;
7676
case 404:
7777
messages(
7878
"error",
79-
"未找到远程服务器,详情请咨询聚保服务热线:40080-59680"
79+
"未找到远程服务器"
8080
);
8181
break;
82-
case 403:
82+
case 401:
8383
messages("warning", "用户登陆过期,请重新登陆");
84-
localStorage.removeItem("access_token");
84+
localStorage.removeItem("token");
8585
setTimeout(() => {
8686
router.replace({
8787
path: "/login",

‎src/components/TreeTable/eval.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @Author: jianglei
3+
* @Date: 2017年10月12日 12:06:49
4+
*/
5+
'use strict'
6+
import Vue from 'vue'
7+
export default function treeToArray(data, expandAll, parent = null, level = null) {
8+
let tmp = []
9+
Array.from(data).forEach(function(record) {
10+
if (record._expanded === undefined) {
11+
Vue.set(record, '_expanded', expandAll)
12+
}
13+
let _level = 1
14+
if (level !== undefined && level !== null) {
15+
_level = level + 1
16+
}
17+
Vue.set(record, '_level', _level)
18+
// 如果有父元素
19+
if (parent) {
20+
Vue.set(record, 'parent', parent)
21+
}
22+
tmp.push(record)
23+
if (record.children && record.children.length > 0) {
24+
const children = treeToArray(record.children, expandAll, record, _level)
25+
tmp = tmp.concat(children)
26+
}
27+
})
28+
return tmp
29+
}

‎src/components/TreeTable/index.vue‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
<el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
3+
<el-table-column v-if="columns.length===0" width="150">
4+
<template slot-scope="scope">
5+
<span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
6+
<span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
7+
<i v-if="!scope.row._expanded" class="el-icon-plus"/>
8+
<i v-else class="el-icon-minus"/>
9+
</span>
10+
{{ scope.$index }}
11+
</template>
12+
</el-table-column>
13+
<el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width">
14+
<template slot-scope="scope">
15+
<!-- Todo -->
16+
<!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
17+
<span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
18+
<span v-if="iconShow(index,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
19+
<i v-if="!scope.row._expanded" class="el-icon-plus"/>
20+
<i v-else class="el-icon-minus"/>
21+
</span>
22+
{{ scope.row[column.value] }}
23+
</template>
24+
</el-table-column>
25+
<slot/>
26+
</el-table>
27+
</template>
28+
29+
<script>
30+
/**
31+
Auth: Lei.j1ang
32+
Created: 2018年1月19日-13:59
33+
*/
34+
import treeToArray from './eval'
35+
export default {
36+
name: 'TreeTable',
37+
props: {
38+
/* eslint-disable */
39+
data: {
40+
type: [Array, Object],
41+
required: true
42+
},
43+
columns: {
44+
type: Array,
45+
default: () => []
46+
},
47+
evalFunc: Function,
48+
evalArgs: Array,
49+
expandAll: {
50+
type: Boolean,
51+
default: false
52+
}
53+
},
54+
computed: {
55+
// 格式化数据源
56+
formatData: function() {
57+
let tmp
58+
if (!Array.isArray(this.data)) {
59+
tmp = [this.data]
60+
} else {
61+
tmp = this.data
62+
}
63+
const func = this.evalFunc || treeToArray
64+
const args = this.evalArgs ? Array.prototype.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
65+
return func.apply(null, args)
66+
}
67+
},
68+
methods: {
69+
showRow: function(row) {
70+
const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
71+
row.row._show = show
72+
return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
73+
},
74+
// 切换下级是否展开
75+
toggleExpanded: function(trIndex) {
76+
const record = this.formatData[trIndex]
77+
record._expanded = !record._expanded
78+
},
79+
// 图标显示
80+
iconShow(index, record) {
81+
return (index === 0 && record.children && record.children.length > 0)
82+
}
83+
}
84+
}
85+
</script>
86+
<style rel="stylesheet/css">
87+
@keyframes treeTableShow {
88+
from {opacity: 0;}
89+
to {opacity: 1;}
90+
}
91+
@-webkit-keyframes treeTableShow {
92+
from {opacity: 0;}
93+
to {opacity: 1;}
94+
}
95+
</style>
96+
97+
<style lang="scss" rel="stylesheet/scss" scoped>
98+
$color-blue: #2196F3;
99+
$space-width: 18px;
100+
.ms-tree-space {
101+
position: relative;
102+
top: 1px;
103+
display: inline-block;
104+
font-style: normal;
105+
font-weight: 400;
106+
line-height: 1;
107+
width: $space-width;
108+
height: 14px;
109+
&::before {
110+
content: ""
111+
}
112+
}
113+
.processContainer{
114+
width: 100%;
115+
height: 100%;
116+
}
117+
table td {
118+
line-height: 26px;
119+
}
120+
121+
.tree-ctrl{
122+
position: relative;
123+
cursor: pointer;
124+
color: $color-blue;
125+
margin-left: -$space-width;
126+
}
127+
</style>

‎src/components/TreeTable/readme.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
## 写在前面
2+
此组件仅提供一个创建TreeTable的解决思路
3+
4+
## prop说明
5+
#### *data*
6+
**必填**
7+
8+
原始数据,要求是一个数组或者对象
9+
```javascript
10+
[{
11+
key1: value1,
12+
key2: value2,
13+
children: [{
14+
key1: value1
15+
},
16+
{
17+
key1: value1
18+
}]
19+
},
20+
{
21+
key1: value1
22+
}]
23+
```
24+
或者
25+
```javascript
26+
{
27+
key1: value1,
28+
key2: value2,
29+
children: [{
30+
key1: value1
31+
},
32+
{
33+
key1: value1
34+
}]
35+
}
36+
```
37+
38+
#### columns
39+
列属性,要求是一个数组
40+
41+
1. text: 显示在表头的文字
42+
2. value: 对应data的key。treeTable将显示相应的value
43+
3. width: 每列的宽度,为一个数字(可选)
44+
45+
如果你想要每个字段都有自定义的样式或者嵌套其他组件,columns可不提供,直接像在el-table一样写即可,如果没有自定义内容,提供columns将更加的便捷方便
46+
47+
如果你有几个字段是需要自定义的,几个不需要,那么可以将不需要自定义的字段放入columns,将需要自定义的内容放入到slot中,详情见后文
48+
```javascript
49+
[{
50+
value:string,
51+
text:string,
52+
width:number
53+
},{
54+
value:string,
55+
text:string,
56+
width:number
57+
}]
58+
```
59+
60+
#### expandAll
61+
是否默认全部展开,boolean值,默认为false
62+
63+
#### evalFunc
64+
解析函数,function,非必须
65+
66+
如果不提供,将使用默认的[evalFunc](./eval.js)
67+
68+
如果提供了evalFunc,那么会用提供的evalFunc去解析data,并返回treeTable渲染所需要的值。如何编写一个evalFunc,请参考[*eval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customEval.js)
69+
70+
#### evalArgs
71+
解析函数的参数,是一个数组
72+
73+
**请注意,自定义的解析函数参数第一个为this.data,第二个参数为, this.expandAll,你不需要在evalArgs填写。一定记住,这两个参数是强制性的,并且位置不可颠倒** *this.data为需要解析的数据,this.expandAll为是否默认展开*
74+
75+
如你的解析函数需要的参数为`(this.data, this.expandAll,1,2,3,4)`,那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
76+
77+
如果你的解析函数参数只有`(this.data, this.expandAll)`,那么就可以不用填写evalArgs了
78+
79+
具体可参考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customEval.js)的函数参数和[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customTreeTable.vue)的`evalArgs`属性值
80+
81+
## slot
82+
这是一个自定义列的插槽。
83+
84+
默认情况下,treeTable只有一行行展示数据的功能。但是一般情况下,我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式,这时我们就需要自定义列了。请参考[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customTreeTable.vue),[实例效果](https://panjiachen.github.io/vue-element-admin/#/table/tree-table)
85+
86+
`slot`和`columns属性`可同时存在,columns里面的数据列会在slot自定义列的左边展示
87+
88+
## 其他
89+
如果有其他的需求,请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue

‎src/main.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@ import './plugins/element.js'
66
import './assets/css/normalize.css'
77
import './assets/css/public.css'
88
import '@/element-variables.scss'
9+
import {messages} from './assets/js/common'
910
// import './assets/scss/global.scss'
1011
// 引入字体文件
1112
import '@/assets/icon/iconfont.css'
1213
Vue.config.productionTip = false
14+
//全局挂载提示框
15+
Vue.prototype.$message=messages
1316
new Vue({
1417
router,
1518
store,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /