Skip to content

Commit 9883e0e

Browse files
wocwinwocwin
committedAug 14, 2020
feat:新增基于elementUI再次封装组件
1 parent f525ce3 commit 9883e0e

File tree

17 files changed

+652
-896
lines changed

17 files changed

+652
-896
lines changed
 

‎.eslintrc.js

+2-13
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,7 @@ module.exports = {
1111
parser: 'babel-eslint'
1212
},
1313
rules: {
14-
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
14+
'no-console': 'off',
1515
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
16-
},
17-
overrides: [
18-
{
19-
files: [
20-
'**/__tests__/*.{j,t}s?(x)',
21-
'**/tests/unit/**/*.spec.{j,t}s?(x)'
22-
],
23-
env: {
24-
mocha: true
25-
}
26-
}
27-
]
16+
}
2817
}

‎README.md

+11-278
Original file line numberDiff line numberDiff line change
@@ -1,290 +1,23 @@
1-
# t-table
1+
# t-ui
22

3-
## 项目启动
4-
5-
```
3+
## 安装依赖
4+
```shell
65
npm install
7-
npm run serve
86
```
97

10-
### 项目打包
11-
```
12-
npm run build
13-
```
14-
15-
16-
# TTable简单使用
178

18-
## 1. 简介
19-
HTML一行代码，可以实现表格分页/表格内/外按钮操作/行内文字变色/动态字典展示/filters格式化数据/排序/显示隐藏表格内操作按钮等
20-
==
21-
> **新增隐藏某列及某单元格内容过长是否换行（默认内容过长省略号显示鼠标移入有tip提示）**
22-
==========================================
23-
> **代码示例：**
9+
## 本地运行src中组件示例
10+
```shell
11+
npm run serve
2412
```
25-
<t-table
26-
:table="table"
27-
@size-change="handlesSizeChange"
28-
@page-change="handlesCurrentChange"
29-
/>
13+
## 本地运行docs中组件文档
14+
```shell
15+
npm run docs:dev
3016
```
31-
## 2. 结构
32-
##### 2.1 顶部
33-
展示头部选项栏
34-
```
35-
<div class="toolbar"
36-
v-if="isShow('toolbar')">
37-
<slot name="toolbar"></slot>
38-
<div class="toolbar">
39-
<el-button
40-
v-for="(item, index) in getToolbarBtn"
41-
:key="index"
42-
@click="toolbarFun(item)"
43-
:icon="item.icon?item.icon:'el-icon-search'"
44-
:type="item.type||'primary'"
45-
size="small"
46-
>{{item.text}}</el-button>
47-
<el-popover
48-
ref="popoverClose"
49-
popper-class="operator_popover operator_pop"
50-
class="operator_popover operator_pop"
51-
placement="bottom-start"
52-
trigger="hover"
53-
v-if="getToolbarDown.length"
54-
>
55-
<ul class="ulClose">
56-
<li
57-
v-for="(item, index) in getToolbarDown"
58-
:key="index"
59-
@click="toolbarFun(item)"
60-
>{{item.text}}</li>
61-
</ul>
62-
<el-button size="small" type="primary" icon="el-icon-setting" slot="reference">
63-
操作
64-
<i class="el-icon-arrow-down"></i>
65-
</el-button>
66-
</el-popover>
67-
</div>
68-
</div>
69-
```
70-
##### 2.2 中间
71-
展示表格数据
72-
```
73-
<el-table
74-
ref="el-table"
75-
:data="table.data"
76-
:height="height? fixHeight? fixHeight: undefined: $store.getters.tableHeight - otherHeight"
77-
v-bind="$attrs"
78-
v-on="$listeners"
79-
border
80-
@row-click="rowClick"
81-
>
82-
......
83-
</el-table>
84-
```
85-
##### 2.3 底部
86-
展示分页
87-
```
88-
<el-pagination
89-
v-show="table.data && table.data.length && isShowPagination"
90-
:current-page="table.currentPage"
91-
@current-change="handlesCurrentChange"
92-
:page-sizes="[10, 20, 50, 100]"
93-
:page-size="table.pageSize"
94-
:layout="size?'total, prev, pager, next':'total, sizes, prev, pager, next, jumper'"
95-
:total="table.total"
96-
v-bind="$attrs"
97-
v-on="$listeners"
98-
background
99-
></el-pagination>
100-
```
101-
## events 其他事件按照el-table直接使用（如sort-change排序事件）
102-
103-
| 事件名 | 说明 | 返回值 |
104-
| :---------: | :------- | :------------: |
105-
| page-change | 当前页码 | 当前选中的页码 |
106-
## 3. 配置参数
107-
108-
| 参数 | 说明 | 类型 | 是否必须 |
109-
| ----------------- | ------------------------------------------ | ------------- | -------- |
110-
| table | 表格数据对象 | Object | 是 |
111-
| ---data | 展示数据 | Array | 是 |
112-
| ---column | 表头信息 | Array | 是 |
113-
| -------sort | 排序 （设置：sort:true） | Boolean | 否 |
114-
| -------noShowTip | 是否换行 （设置：noShowTip:true） | Boolean | 否 |
115-
| -------noShowColumn | 是否隐藏当前列（设置：noShowColumn:true） | Boolean | 否 |
116-
| -------filters | filters转义（后台返回数字转中文，时间戳转时间）| Object | 否 |
117-
| ---toolbar | 表格外操作栏选中表格某行，可以将其数据传出 | Array | 否 |
118-
| ---operator | 表格内操作栏数据 | Array | 否 |
119-
| -------show | 表格内操作栏根据状态显示 | Object | 否 |
120-
| -------noshow | 表格内操作栏根据多种状态不显示 | Array | 否 |
121-
| -------resCode | 表格内操作栏按钮权限资源（路由path） 暂不支持| String | 否 |
122-
| ---operatorConfig | 操作栏样式 | Object | 否 |
123-
| ---changeColor | 整行文字颜色样式控制 | Object | 否 |
124-
| ---firstColumn | 表格首列(序号 index,复选框 selection）排列 | object | 否 |
125-
| ---total | 数据总条数 | Number | 否 |
126-
| ---pageSize | 页数量 | Number | 否 |
127-
| ---currentPage | 是否需要显示切换页条数 | Number | 否 |
128-
| height | 是否固定高度 | Boolean | 否 |
129-
| fixHeight | 走固定高度时候表格高度 | String/Number | 否 |
130-
| size | 分页类型选项 | Boolean | 否 |
131-
| isShowPagination | 是否显示分页(默认显示分页) | Boolean | 否 |
132-
| isCopy | 是否允许双击单元格复制 暂不支持 | Boolean | 否 |
133-
134-
135-
## 4. 使用帮助
13617

137-
#### 4.1 关于顶部工具栏
138-
使用插槽toolbar传入即可
139-
```
140-
<template #toolbar>
141-
<el-select v-model="optValue"
142-
placeholder="请选择"
143-
size="small"
144-
@change="optionChange">
145-
<el-option v-for="item in options"
146-
:key="item.value"
147-
:label="item.label"
148-
:value="item.value">
149-
</el-option>
150-
</el-select>
151-
</template>
152-
```
153-
##### 若需要表格外操作栏(超过3个按钮，第4个按钮会以下拉的方式展示)
154-
配置toolbar即可（前提条件是，必须使用插槽toolbar）
155-
```
156-
toolbar: [
157-
{
158-
text: '返回上一个页面',
159-
icon: 'el-icon-circle-plus-outline',
160-
type: 'danger',
161-
fun: this.getBack
162-
}
163-
]
164-
```
165-
#### 4.2 关于表格内操作栏
166-
配置operator即可
167-
```
168-
operator: [
169-
{
170-
text: '预览',
171-
type: 'primary',
172-
fun: this.preview
173-
},
174-
{
175-
text: '编辑',
176-
type: 'danger',
177-
fun: this.edit,
178-
show: { key: 'status', val: [3,4] } // 表status值为3或者4时，显示此操作健 根据后台字段返回是数字还是字符串来显示
179-
},
180-
{
181-
text: '撤销',
182-
fun: this.revoke,
183-
show: { key: 'status', val: ['1'] }
184-
}
185-
]
186-
```
187-
###### 补充说明：多种状态控制按钮的显示与隐藏
188-
```
189-
operator: [
190-
{
191-
text: '预览',
192-
type: 'primary',
193-
fun: this.preview,
194-
noshow:[{key:'fields',val:'isHasVal'},{key:'status',val:[0,1,99]},{key:'channelCode',val:['bank']}]
195-
// noshow中的key值(fields/status/channelCode)是表格后台返回的字段
196-
// 当val等于字符串'isHasVal'时,字段'fields'返回为空时，此行操作按钮隐藏
197-
// 以上综合：当'status'为0/1/99并且'channelCode'为'bank'及'fields'为空时,隐藏按钮
198-
}
199-
]
200-
```
201-
#### 4.3 关于表格操作栏样式，如固定右侧，宽度
202-
```
203-
operatorConfig: {
204-
fixed: 'right',
205-
width: 200,
206-
label: '操作'
207-
}
208-
```
209-
#### 4.4 关于表格某行文字颜色
210-
```
211-
changeColor: {
212-
key: 'status', // 状态
213-
val: '0', // 状态值
214-
txtStyle: '#ef473a' // 设置文字颜色也可以用“#ef473a”
215-
}
216-
```
217-
#### 4.5 关于表格状态filters方法使用（在表头column对象里添加如下字段）
218-
```
219-
{ prop: 'loanInterest', label: '利息', width: '120' , filters: { method: '%' }},
220-
filters: { method: '%' }：表显示百分比
221-
filters: { method: '￥' }：表显示金额
222-
filters: { param: 'REPAYMENT_STATES' } ：表状态对应的canstants对应的字段
223-
```
224-
#### 4.6 新增翻页选中功能（2020-02-27添加）
225-
**页面代码新增：:row-key属性和selection-change复选框事件**
226-
```
227-
<t-table
228-
:table="table"
229-
@size-change="handlesSizeChange"
230-
@page-change="handlesCurrentChange"
231-
:row-key="getRowKey"
232-
@selection-change="handlesSelectionChange"
233-
/>
234-
```
235-
**js代码**
236-
```
237-
// 获取列表数据的唯一标识
238-
getRowKey (row) {
239-
return row.id
240-
},
241-
// 选中的数据
242-
handlesSelectionChange (val) {
243-
this.chosenIds = val.map(item => item.id)
244-
},
245-
```
246-
==注意：==（参考配置参数）
247-
firstColumn: { type: 'selection', isPaging: true },
248-
type: 'selection' 表复选框
249-
isPaging: true 表可以跨页勾选
250-
251-
**组件代码新增了:reserve-selection属性**
18+
### 项目打包
25219
```
253-
<!-- 序列号/复选框 -->
254-
<div v-if="table.firstColumn">
255-
<el-table-column
256-
:type="table.firstColumn.type"
257-
width="50"
258-
:label="table.firstColumn.label"
259-
align="center"
260-
v-if="table.firstColumn.type!=='index'"
261-
></el-table-column>
262-
<el-table-column
263-
:type="table.firstColumn.type"
264-
width="50"
265-
:reserve-selection="table.firstColumn.isPaging||false"
266-
:label="table.firstColumn.label"
267-
align="center"
268-
v-if="table.firstColumn.type==='index'"
269-
>
270-
<template slot-scope="scope">
271-
<span>{{isShowPagination?((table.currentPage - 1) * table.pageSize + scope.$index + 1):scope.$index + 1}}</span>
272-
</template>
273-
</el-table-column>
274-
</div>
20+
npm run build
27521
```
276-
#### 4.7 关于element-ui el-table提供的一些方法，样式如何添加
277-
按照el-table写法直接使用即可，无需其他配置
278-
279-
## 5. Dome
280-
参考：demo页面
281-
******
282-
## 最后
283-
[组件地址](https://github.com/wocwin/t-table)
284-
285-
## 相关文章
286-
[axios二次封装，接口统一存放,满足RESTful风格](https://blog.csdn.net/cwin8951/article/details/104415090)
287-
******
288-
[keep-alive不能缓存多层级路由(vue-router)菜单问题解决](https://blog.csdn.net/cwin8951/article/details/106644118)
28922

29023
[基于ElementUi再次封装基础组件文档](https://wocwin.github.io/blog/)

‎package.json

+19-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "t-table",
2+
"name": "t-ui",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
@@ -11,29 +11,34 @@
1111
"dependencies": {
1212
"axios": "^0.19.2",
1313
"babel-polyfill": "^6.26.0",
14-
"core-js": "^3.6.4",
15-
"element-ui": "^2.4.5",
14+
"core-js": "^3.6.5",
15+
"dayjs": "^1.8.33",
16+
"element-ui": "^2.13.2",
1617
"es6-promise": "^4.2.8",
18+
"js-cookie": "^2.2.1",
19+
"screenfull": "^4.2.0",
1720
"vue": "^2.6.11",
18-
"vue-router": "^3.1.5",
19-
"vuex": "^3.1.2"
21+
"vue-clipboard2": "^0.3.1",
22+
"vue-router": "^3.4.3",
23+
"vuex": "^3.5.1",
24+
"xlsx": "^0.16.6"
2025
},
2126
"devDependencies": {
22-
"@vue/cli-plugin-babel": "^4.2.0",
23-
"@vue/cli-plugin-eslint": "^4.2.0",
24-
"@vue/cli-plugin-unit-mocha": "^4.2.0",
25-
"@vue/cli-service": "^4.2.0",
27+
"@vue/cli-plugin-babel": "^4.5.3",
28+
"@vue/cli-plugin-eslint": "^4.5.3",
29+
"@vue/cli-plugin-unit-mocha": "^4.5.3",
30+
"@vue/cli-service": "^4.5.3",
2631
"@vue/eslint-config-standard": "^5.1.0",
2732
"@vue/test-utils": "1.0.0-beta.31",
28-
"babel-eslint": "^10.0.3",
33+
"babel-eslint": "^10.1.0",
2934
"chai": "^4.1.2",
3035
"eslint": "^6.7.2",
31-
"eslint-plugin-import": "^2.20.1",
32-
"eslint-plugin-node": "^11.0.0",
36+
"eslint-plugin-import": "^2.22.0",
37+
"eslint-plugin-node": "^11.1.0",
3338
"eslint-plugin-promise": "^4.2.1",
3439
"eslint-plugin-standard": "^4.0.0",
35-
"eslint-plugin-vue": "^6.1.2",
36-
"sass": "^1.25.0",
40+
"eslint-plugin-vue": "^6.2.2",
41+
"sass": "^1.26.10",
3742
"sass-loader": "^8.0.2",
3843
"vue-cli-plugin-element": "^1.0.1",
3944
"vue-template-compiler": "^2.6.11"

‎public/favicon.ico

0 Bytes
Binary file not shown.

‎public/mock/getEntUserList.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{
77
"id": 518,
88
"userName": "妲己",
9-
"loginName": "jdh9151",
9+
"loginName": "t9151",
1010
"dataStatus": 1,
1111
"phone": "18700000002",
1212
"description": "融资企业管理员,企业法人",
@@ -19,7 +19,7 @@
1919
{
2020
"id": 519,
2121
"userName": "孙悟空",
22-
"loginName": "jdh9098",
22+
"loginName": "t9098",
2323
"dataStatus": 1,
2424
"phone": "18700000000",
2525
"description": "融资企业管理员",
@@ -110,7 +110,7 @@
110110
{
111111
"id": 526,
112112
"userName": "狂铁",
113-
"loginName": "jdh9132",
113+
"loginName": "t9132",
114114
"dataStatus": 1,
115115
"phone": "17688399669",
116116
"description": "融资企业复核员,企业出纳员,融资企业经办员,企业法人,融资企业管理员,企业法人,融资企业管理员,融资企业管理员,企业管理员,企业法人,企业管理员,企业法人,融资企业复核员,融资企业管理员,企业法人,企业风险经理,融资企业经办员,融资企业管理员,融资企业管理员,融资企业管理员,企业法人,企业法人,融资企业管理员,融资企业复核员,融资企业经办员,融资企业管理员,融资企业复核员,企业复核员,企业法人,企业法人,企业复核员,企业法人,融资企业管理员,融资企业管理员,融资企业管理员,融资企业复核员,融资企业管理员,融资企业经办员,融资企业经办员,企业经办员,企业法人,融资企业管理员,企业经办员,企业担保人,融资企业管理员,融资企业复核员,企业法人",
@@ -123,7 +123,7 @@
123123
{
124124
"id": 527,
125125
"userName": "墨子",
126-
"loginName": "jdh9132",
126+
"loginName": "t9132",
127127
"dataStatus": 1,
128128
"phone": "17688399669",
129129
"description": "企业法人,企业法人,企业复核员,企业法人,融资企业管理员,融资企业管理员,融资企业管理员,融资企业复核员,融资企业管理员,融资企业经办员,融资企业经办员,企业经办员,企业法人,融资企业管理员,企业经办员,企业担保人,融资企业管理员,融资企业复核员,企业法人,融资企业复核员,企业出纳员,融资企业经办员,企业法人,融资企业管理员,企业法人,融资企业管理员,融资企业管理员,企业管理员,企业法人,企业管理员,企业法人,融资企业复核员,融资企业管理员,企业法人,企业风险经理,融资企业经办员,融资企业管理员,融资企业管理员,融资企业管理员,企业法人,企业法人,融资企业管理员,融资企业复核员,融资企业经办员,融资企业管理员,融资企业复核员,企业复核员",

‎public/mock/tempContextJson.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"email": "00",
1515
"idNo": "440582199312******",
1616
"idType": "01",
17-
"terminalCode": "jdh_ent",
17+
"terminalCode": "t_ent",
1818
"portalId": "B00000001999",
1919
"authTypes": "KD",
2020
"authType": "D",
@@ -44,7 +44,7 @@
4444
"roleCode": "200",
4545
"roleName": "管理员",
4646
"description": "供应链企业管理员",
47-
"terminalCode": "jdh_ent",
47+
"terminalCode": "t_ent",
4848
"roleState": "0",
4949
"roleType": null,
5050
"creatorId": "",
@@ -58,7 +58,7 @@
5858
"roleCode": "201",
5959
"roleName": "经办员",
6060
"description": "供应链企业经办员",
61-
"terminalCode": "jdh_ent",
61+
"terminalCode": "t_ent",
6262
"roleState": "0",
6363
"roleType": null,
6464
"creatorId": "",
@@ -72,7 +72,7 @@
7272
"roleCode": "202",
7373
"roleName": "复核员",
7474
"description": "供应链企业复核员",
75-
"terminalCode": "jdh_ent",
75+
"terminalCode": "t_ent",
7676
"roleState": "0",
7777
"roleType": null,
7878
"creatorId": "",
@@ -624,7 +624,7 @@
624624
"creditCode": "91440300MA5EQK8Q9R",
625625
"parentId": "b7ac148f3bfb41beaf9fd46d26d8d2e2",
626626
"commAddr": "朝阳区朝阳区123",
627-
"urlSource": "https://www.jdh.com.cn/app/visitor/index/index.html#/home",
627+
"urlSource": "https://www.t.com.cn/app/visitor/index/index.html#/home",
628628
"reason": null,
629629
"legalPersonType": "02",
630630
"applyTime": "2018-12-01 00:32:52",

‎src/App.vue

+45-23
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,66 @@
11
<template>
22
<div id="app">
3-
<div id="nav">
4-
Nav路由
5-
<router-link to="/">table组件</router-link>|
6-
<router-link to="/query">查询条件组件</router-link>|
7-
<router-link to="/form">form表单组件</router-link>
8-
</div>
9-
<hr />
10-
<router-view />
3+
<router-view v-if="isRouterAlive"></router-view>
114
</div>
125
</template>
136

147
<script>
158
169
export default {
17-
name: 'app'
10+
name: 'app',
11+
provide () {
12+
return {
13+
reload: this.reload
14+
}
15+
},
16+
data () {
17+
return {
18+
isRouterAlive: true
19+
}
20+
},
21+
created () {
22+
document.title = '基础组件'
23+
},
24+
methods: {
25+
reload () {
26+
this.isRouterAlive = false
27+
this.$nextTick(() => {
28+
this.isRouterAlive = true
29+
})
30+
}
31+
}
1832
}
1933
</script>
2034

21-
<style lang='scss'>
35+
<style>
2236
#app {
23-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
2437
-webkit-font-smoothing: antialiased;
2538
-moz-osx-font-smoothing: grayscale;
2639
text-align: center;
27-
color: #2c3e50;
28-
// margin-top: 10px;
40+
color: #333;
41+
font-family: SourceHanSansCN-Normal, PingFangSC-Regular, Microsoft YaHei,
42+
SimSun, Arial, Helvetica, Verdana, sans-serif !important;
43+
font-size: 12px;
44+
background-color: #ededed;
45+
/* margin-top: 60px; */
2946
}
30-
* {
47+
html {
3148
margin: 0;
3249
padding: 0;
3350
}
34-
#nav {
35-
padding: 15px;
36-
a {
37-
font-weight: bold;
38-
color: #2c3e50;
39-
&.router-link-exact-active {
40-
color: #42b983;
41-
}
42-
}
51+
body {
52+
margin: 0;
53+
padding: 0;
54+
background: #fff;
4355
}
56+
/* 滚动条的宽度*/
57+
/* ::-webkit-scrollbar {
58+
width: 17px;
59+
height: 17px;
60+
} */
61+
/* 滚动条的滑块*/
62+
/* ::-webkit-scrollbar-thumb {
63+
background-color: #b3b3b3;
64+
border-radius: 3px;
65+
} */
4466
</style>

‎src/assets/css/element-ui.scss

+6
Original file line numberDiff line numberDiff line change
@@ -121,3 +121,9 @@
121121
border-left-color: #f56c6c !important;
122122
}
123123
}
124+
125+
126+
// 修复keep-live后的页面表格操作栏的高度不一致
127+
.el-table__fixed-right{
128+
height: 100%!important;
129+
}

‎src/assets/css/index.scss

+191-477
Large diffs are not rendered by default.

‎src/assets/css/variables.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ $green: #30b08f;
77
$tiffany: #4ab7bd;
88
$yellow: #fec171;
99
$panGreen: #30b08f;
10+
$--color-nomal:#409eff !default;
1011

1112
// sidebar
1213
$menuText: #333;
@@ -20,7 +21,7 @@ $menuHover: #ef473a;
2021
$subMenuBg: #fff;
2122
$subMenuHover: #ef473a;
2223

23-
$sideBarWidth: 190px;
24+
$sideBarWidth: 210px;
2425
$hideSidebarWidth: 64px;
2526

2627
:export {

‎src/components/baseComponents/TForm/index.vue

+36-18
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@
66
:model="formData"
77
:rules="rules"
88
:label-width="labelWidth"
9+
v-bind="$attrs"
10+
v-on="$listeners"
911
>
1012
<el-form-item
1113
v-for="(item, index) in getConfigList()"
1214
:key="index"
1315
:prop="item.value"
1416
:label="item.label"
1517
:class="item.className"
18+
:rules="item.rules"
19+
v-bind="$attrs"
20+
v-on="$listeners"
1621
>
1722
<!-- solt -->
1823
<template v-if="item.type === 'slot'">
@@ -26,7 +31,7 @@
2631
:disabled="item.disabled"
2732
:clearable="item.clearable === false ? item.clearable : true"
2833
:placeholder="getPlaceholder(item)"
29-
@change="handleEvent(item.event)"
34+
@change="handleEvent(item.event, formData[item.value])"
3035
/>
3136
<!-- 文本输入框 -->
3237
<el-input
@@ -36,7 +41,7 @@
3641
:disabled="item.disabled"
3742
:placeholder="getPlaceholder(item)"
3843
:autosize="item.autosize || {minRows: 2, maxRows: 10}"
39-
@change="handleEvent(item.event)"
44+
@change="handleEvent(item.event, formData[item.value])"
4045
/>
4146
<!-- 计数器 -->
4247
<el-input-number
@@ -46,7 +51,7 @@
4651
:clearable="item.clearable === false ? item.clearable : true"
4752
:min="item.min"
4853
:max="item.max"
49-
@change="handleEvent(item.event)"
54+
@change="handleEvent(item.event, formData[item.value])"
5055
/>
5156
<!-- 复选框 -->
5257
<el-checkbox-group
@@ -56,12 +61,11 @@
5661
@change="handleEvent(item.event, formData[item.value])"
5762
>
5863
<el-checkbox
59-
v-for="(val,index) in listTypeInfo[item.list]"
60-
:key="index"
61-
:label="val.label"
62-
:name="val.value"
64+
v-for="val in listTypeInfo[item.list]"
65+
:key="val.value"
66+
:label="val.value"
6367
:disabled="val.disabled"
64-
></el-checkbox>
68+
>{{val.label}}</el-checkbox>
6569
</el-checkbox-group>
6670
<!-- 选择框 -->
6771
<el-select
@@ -81,16 +85,27 @@
8185
:value="childItem.value"
8286
/>
8387
</el-select>
84-
<!-- 日期选择框 -->
88+
<!-- 单个日期选择框 -->
8589
<el-date-picker
8690
v-if="item.type === 'date'"
8791
v-model="formData[item.value]"
8892
:type="item.dateType"
8993
:picker-options="item.TimePickerOptions"
9094
:clearable="item.clearable === false ? item.clearable : true"
9195
:disabled="item.disabled"
96+
value-format="yyyy-MM-dd"
9297
:placeholder="getPlaceholder(item)"
93-
@change="handleEvent(item.event)"
98+
@change="handleEvent(item.event,$event,item.value)"
99+
/>
100+
<!-- 开始——结束日期选择框 -->
101+
<t-date-picker
102+
v-if="item.type === 't-date'"
103+
:plusTime="item.plusTime === false ? item.plusTime : true"
104+
:clearable="item.clearable === false ? item.clearable : true"
105+
:startDate="formData[item.startDate]"
106+
:endDate="formData[item.endDate]"
107+
@startChange="handleEvent(item.event,$event,item.startDate)"
108+
@endChange="handleEvent(item.event,$event,item.endDate)"
94109
/>
95110
</el-form-item>
96111
<!-- 按钮 -->
@@ -108,8 +123,10 @@
108123
</template>
109124

110125
<script>
126+
import TDatePicker from '../TDatePicker'
111127
export default {
112128
name: 'TForm',
129+
components: { TDatePicker },
113130
props: {
114131
// 自定义类名
115132
className: {
@@ -136,6 +153,7 @@ export default {
136153
return {}
137154
}
138155
},
156+
// 操作按钮list
139157
operatorList: {
140158
type: Array,
141159
default: () => {
@@ -195,22 +213,22 @@ export default {
195213
// 得到placeholder的显示
196214
getPlaceholder (row) {
197215
let placeholder
198-
if (row.type === 'input' || row.type === 'textarea') {
216+
// 请输入type
217+
const inputArr = ['input', 'textarea']
218+
// 请选择type
219+
const selectArr = ['select', 'time', 'date', 't-date']
220+
if (inputArr.includes(row.type)) {
199221
placeholder = '请输入' + row.label
200-
} else if (row.type === 'select' || row.type === 'time' || row.type === 'date') {
222+
} else if (selectArr.includes(row.type)) {
201223
placeholder = '请选择' + row.label
202224
} else {
203225
placeholder = row.label
204226
}
205227
return placeholder
206228
},
207229
// 绑定的相关事件
208-
handleEvent (evnet) {
209-
this.$emit('handleEvent', evnet)
210-
},
211-
// 派发按钮点击事件
212-
handleClick (event, data) {
213-
this.$emit('handleClick', event, data)
230+
handleEvent (type, val, key) {
231+
this.$emit('handleEvent', type, val, key)
214232
}
215233
}
216234
}

‎src/components/baseComponents/TQueryCondition/index.vue

+43-10
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
:disabled="item.disabled"
1717
:clearable="item.clearable === false ? item.clearable : true"
1818
:placeholder="getPlaceholder(item)"
19-
@focus="handleEvent(item.event)"
19+
@change="handleEvent(item.event,$event)"
2020
/>
2121
<!-- 选择框 -->
2222
<el-select
@@ -28,7 +28,7 @@
2828
:clearable="item.clearable === false ? item.clearable : true"
2929
:filterable="item.filterable === false ? item.filterable : true"
3030
:placeholder="getPlaceholder(item)"
31-
@change="handleEvent(item.event)"
31+
@change="handleEvent(item.event,$event)"
3232
>
3333
<el-option
3434
v-for="(childItem, childIndex) in listTypeInfo[item.list]"
@@ -56,8 +56,19 @@
5656
:type="item.dateType"
5757
:clearable="item.clearable === false ? item.clearable : true"
5858
:disabled="item.disabled"
59+
:value-format="item.valueFormat||'yyyy-MM-dd'"
5960
:placeholder="getPlaceholder(item)"
60-
@change="handleEvent($event,item.event)"
61+
@change="handleEvent(item.event,$event,item.value)"
62+
/>
63+
<!-- 开始——结束日期选择框 -->
64+
<t-date-picker
65+
v-if="item.type === 't-date'"
66+
:plusTime="item.plusTime === false ? item.plusTime : true"
67+
:clearable="item.clearable === false ? item.clearable : true"
68+
:startDate="searchQuery[item.startDate]"
69+
:endDate="searchQuery[item.endDate]"
70+
@startChange="handleEvent(item.event,$event,item.startDate)"
71+
@endChange="handleEvent(item.event,$event,item.endDate)"
6172
/>
6273
</div>
6374
</div>
@@ -82,8 +93,10 @@
8293
</template>
8394

8495
<script>
96+
import TDatePicker from '../TDatePicker'
8597
export default {
8698
name: 'TQueryCondition',
99+
components: { TDatePicker },
87100
props: {
88101
// 自定义类名
89102
className: {
@@ -158,10 +171,18 @@ export default {
158171
this.$set(item, 'show', true)
159172
remainderArr.push(item)
160173
} else {
161-
if (!this.query[item.value]) {
162-
this.$set(item, 'show', false)
174+
if (item.type === 't-date') {
175+
if (!this.query[item.startDate] && !this.query[item.endDate]) {
176+
this.$set(item, 'show', false)
177+
} else {
178+
remainderArr.push(item)
179+
}
163180
} else {
164-
remainderArr.push(item)
181+
if (!this.query[item.value]) {
182+
this.$set(item, 'show', false)
183+
} else {
184+
remainderArr.push(item)
185+
}
165186
}
166187
this.operatorList.map(item => {
167188
if (item.label === '收起') {
@@ -172,6 +193,7 @@ export default {
172193
})
173194
}
174195
})
196+
console.log(7788, this.query)
175197
this.remainder = remainderArr.length % 3
176198
},
177199
// 收起与展开
@@ -212,6 +234,13 @@ export default {
212234
// 按钮位置
213235
initBtn () {
214236
this.remainder = Object.keys(this.query).length % 3
237+
if (Object.keys(this.query).length <= 2) {
238+
this.operatorList.map(item => {
239+
if (item.label === '收起' || item.label === '展开') {
240+
this.$set(item, 'show', false)
241+
}
242+
})
243+
}
215244
},
216245
// 初始化参数
217246
initParams () {
@@ -236,18 +265,22 @@ export default {
236265
// placeholder的显示
237266
getPlaceholder (row) {
238267
let placeholder
239-
if (row.type === 'input' || row.type === 'textarea') {
268+
// 请输入type
269+
const inputArr = ['input', 'textarea']
270+
// 请选择type
271+
const selectArr = ['select', 'time', 'date', 't-date']
272+
if (inputArr.includes(row.type)) {
240273
placeholder = '请输入' + row.label
241-
} else if (row.type === 'select' || row.type === 'time' || row.type === 'date') {
274+
} else if (selectArr.includes(row.type)) {
242275
placeholder = '请选择' + row.label
243276
} else {
244277
placeholder = row.label
245278
}
246279
return placeholder
247280
},
248281
// 绑定的相关事件
249-
handleEvent (event, type) {
250-
this.$emit('handleEvent', event, type)
282+
handleEvent (type, val, key) {
283+
this.$emit('handleEvent', type, val, key)
251284
}
252285
}
253286
}

‎src/main.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,28 @@ import store from './store'
55
import 'babel-polyfill'
66
import Es6Promise from 'es6-promise'
77
import './components/index.js'
8-
import './assets/css/index.scss'
8+
import './assets/css/index.scss' // 全局样式
9+
import './assets/css/iconfont/iconfont.css' // 字体图标样式
10+
import './assets/css/fonts/fonts.css' // 文字字体
11+
import './utils/directive'
912
import * as filters from './utils/filters' // global filters
1013
import PromiseHttp from './api/apiPath/index'
1114
import vueImgAlart from './utils/directive/imgAlart/index'// 图片弹窗指令
15+
import VueClipboard from 'vue-clipboard2' // 复制插件
16+
// import './permission' // 全局路由守卫
17+
// 解决低版本浏览器不支持es6
1218
Es6Promise.polyfill()
1319

1420
Vue.use(vueImgAlart)
15-
16-
Vue.config.productionTip = false
21+
Vue.use(VueClipboard)
1722

1823
Vue.prototype.$http = PromiseHttp
1924
// 过滤器
2025
Object.keys(filters).forEach(key => {
2126
Vue.filter(key, filters[key])
2227
})
28+
Vue.config.productionTip = false
29+
2330
new Vue({
2431
router,
2532
store,

‎src/router/index.js

+67-27
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,78 @@
11
import Vue from 'vue'
2-
import VueRouter from 'vue-router'
2+
import Router from 'vue-router'
3+
import Layout from '@/layout'
4+
/* Router 模块 */
5+
// 动态加载的路由
6+
const asyncRouterList = []
7+
// 静态路由
8+
const staticRouter = []
9+
// demo路由
10+
const demoRouter = []
11+
// 自动加载路由
12+
const modulesRouter = require.context('./modules', true, /\.js$/)
13+
modulesRouter.keys().forEach(key => {
14+
// console.log(1111, modulesRouter(key).default.name)
15+
if (modulesRouter(key).default.name === 'Demo') {
16+
demoRouter.push(modulesRouter(key).default)
17+
} else if (modulesRouter(key).default.isStatic) {
18+
staticRouter.push(modulesRouter(key).default)
19+
} else {
20+
asyncRouterList.push(modulesRouter(key).default)
21+
}
22+
})
323

4-
Vue.use(VueRouter)
5-
const TableDemo = () => import('@/views/demo.vue')
6-
const CheckboxTable = () => import('@/views/checkboxTable.vue')
7-
const QueryData = () => import('@/views/query.vue')
8-
const FormData = () => import('@/views/form.vue')
9-
const routes = [
24+
Vue.use(Router)
25+
/**
26+
*
27+
* isShow: false 是否显示菜单（默认为false,若不显示则设为true）——单个菜单
28+
* isStatic: false 是否是静态路由
29+
* redirect: 重定向
30+
* meta : {
31+
title: 'title' 菜单名渲染————若不想显示菜单则无需设置title
32+
icon: 'icon-name' 字体图标
33+
noCache: true 如果设置为true，页面将不会被缓存(默认为false)
34+
}
35+
*/
36+
export const constantRoutes = [
1037
{
1138
path: '/',
12-
name: 'TTable',
13-
component: TableDemo
39+
component: Layout,
40+
redirect: '/index',
41+
children: [
42+
{
43+
path: 'index',
44+
name: '首页',
45+
component: () => import('@/views/index/index.vue'),
46+
meta: {
47+
title: '首页',
48+
name: 'index'
49+
}
50+
}
51+
]
1452
},
15-
{
16-
path: '/checkbox-table',
17-
name: 'checkboxTable',
18-
component: CheckboxTable
19-
},
20-
{
21-
path: '/query',
22-
name: '筛选条件查询',
23-
component: QueryData
24-
},
25-
{
26-
path: '/form',
27-
name: 'form表单',
28-
component: FormData
29-
}
53+
...demoRouter,
54+
...staticRouter
3055
]
31-
32-
const router = new VueRouter({
56+
export const asyncRouterMap = [
57+
...asyncRouterList
58+
]
59+
const createRouter = () => new Router({
3360
mode: 'history',
3461
scrollBehavior: () => ({ y: 0 }),
35-
routes
62+
routes: constantRoutes
3663
})
3764

65+
// 解决动态加载路由报Duplicate named routes definition警告
66+
const router = createRouter()
67+
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
68+
export function resetRouter () {
69+
const newRouter = createRouter()
70+
router.matcher = newRouter.matcher // reset router
71+
}
72+
// 解决NavigationDuplicated（Unhandled promise rejection） 报错
73+
const originalPush = Router.prototype.push
74+
Router.prototype.push = function push (location, onResolve, onReject) {
75+
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
76+
return originalPush.call(this, location).catch(err => err)
77+
}
3878
export default router

‎src/store/index.js

+17-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import Vue from 'vue'
22
import Vuex from 'vuex'
3+
import getters from './getters'
34

45
Vue.use(Vuex)
56

6-
export default new Vuex.Store({
7-
state: {
8-
},
9-
mutations: {
10-
},
11-
actions: {
12-
},
13-
modules: {
14-
}
7+
// https://webpack.js.org/guides/dependency-management/#requirecontext
8+
const modulesFiles = require.context('./modules', true, /\.js$/)
9+
10+
// 此方法不需要import app from './modules/app'会自动将所有vuex模块文件列出来
11+
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
12+
// set './app.js' => 'app'
13+
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
14+
const value = modulesFiles(modulePath)
15+
modules[moduleName] = value.default
16+
return modules
17+
}, {})
18+
19+
const store = new Vuex.Store({
20+
modules,
21+
getters
1522
})
23+
export default store

‎src/utils/filters.js

+194-13
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,140 @@
11

22
import GlobalConstant from './constants.js' // 静态字典
33

4+
/**
5+
* 如果时间是复数，则显示复数标签
6+
* @param {number} time
7+
* @param {string} label
8+
* @return {string}
9+
*/
10+
function pluralize (time, label) {
11+
if (time === 1) {
12+
return time + label
13+
}
14+
return time + label + 's'
15+
}
16+
17+
/**
18+
* @param {number} time
19+
*/
20+
export function timeAgo (time) {
21+
const between = Date.now() / 1000 - Number(time)
22+
if (between < 3600) {
23+
return pluralize(~~(between / 60), ' minute')
24+
} else if (between < 86400) {
25+
return pluralize(~~(between / 3600), ' hour')
26+
} else {
27+
return pluralize(~~(between / 86400), ' day')
28+
}
29+
}
30+
31+
/**
32+
* Number formatting
33+
* like 10000 => 10k
34+
* @param {number} num
35+
* @param {number} digits
36+
*/
37+
export function numberFormatter (num, digits) {
38+
const si = [
39+
{ value: 1E18, symbol: 'E' },
40+
{ value: 1E15, symbol: 'P' },
41+
{ value: 1E12, symbol: 'T' },
42+
{ value: 1E9, symbol: 'G' },
43+
{ value: 1E6, symbol: 'M' },
44+
{ value: 1E3, symbol: 'k' }
45+
]
46+
for (let i = 0; i < si.length; i++) {
47+
if (num >= si[i].value) {
48+
return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
49+
}
50+
}
51+
return num.toString()
52+
}
53+
54+
/**
55+
* 10000 => "10,000"
56+
* @param {number} num
57+
*/
58+
export function toThousandFilter (num) {
59+
return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
60+
}
61+
462
/**
563
* 数字金额格式过滤 10000 => "￥10,000.00"
664
* @param {number} num 被转换数字
765
* @param {number} n 保留小数位
866
*/
967
export function currencyFilter (num, n) {
10-
const reg = /((^[1-9]\d*)|^0)(\.\d+)?$/
11-
if (!reg.test(num)) {
68+
// const reg = /((^[1-9]\d*)|^0)(\.\d+)?$/
69+
// console.log(111, reg.test(num))
70+
// if (!reg.test(num)) {
71+
// return ''
72+
// } else {
73+
n = n > 0 && n <= 20 ? n : 2
74+
if (num || num === 0) {
75+
num = parseFloat((num + '').replace(/^\d\.-/g, '')).toFixed(n) + ''
76+
let l = ''
77+
let r = ''
78+
let y = false
79+
if (num.indexOf('-') !== -1) {
80+
l = num.split('-')[1].split('.')[0].split('').reverse()
81+
r = num.split('-')[1].split('.')[1]
82+
if (num.split('-')[0] === '') {
83+
y = true
84+
}
85+
} else {
86+
l = num.split('.')[0].split('').reverse()
87+
r = num.split('.')[1]
88+
}
89+
let t = ''
90+
for (let i = 0; i < l.length; i++) {
91+
t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? ',' : '')
92+
}
93+
return num ? (y ? ('￥ -' + t.split('').reverse().join('') + '.' + r) : ('￥ ' + t.split('').reverse().join('') + '.' + r)) : ''
94+
} else {
1295
return ''
96+
}
97+
// }
98+
}
99+
100+
/**
101+
* 数字金额格式过滤(转汉字大写) 12000.34 => "壹万贰千叁角肆分"
102+
* @param {number} num 被转换数字
103+
*/
104+
export function digitUppercase (num) {
105+
const reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
106+
if (!reg.test(num)) {
107+
return '请输入正确的金额格式'
13108
} else {
14-
n = n > 0 && n <= 20 ? n : 2
15-
if (num || num === 0) {
16-
num = parseFloat((num + '').replace(/^\d\.-/g, '')).toFixed(n) + ''
17-
const l = num.split('.')[0].split('').reverse()
18-
const r = num.split('.')[1]
19-
let t = ''
20-
for (let i = 0; i < l.length; i++) {
21-
t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? ',' : '')
109+
const fraction = ['角', '分']
110+
const digit = [
111+
'零', '壹', '贰', '叁', '肆',
112+
'伍', '陆', '柒', '捌', '玖'
113+
]
114+
const unit = [
115+
['元', '万', '亿', '兆'],
116+
['', '拾', '佰', '仟']
117+
]
118+
const head = num < 0 ? '欠' : ''
119+
num = Math.abs(num)
120+
let s = ''
121+
fraction.forEach((item, index) => {
122+
s += (digit[Math.floor(num * 10 * Math.pow(10, index)) % 10] + item).replace(/零./, '')
123+
})
124+
// for (let i = 0; i < fraction.length; i++) {
125+
// s += (digit[Math.floor(num * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
126+
// }
127+
s = s || '整'
128+
num = Math.floor(num)
129+
for (let i = 0; i < unit[0].length && num > 0; i++) {
130+
let p = ''
131+
for (let j = 0; j < unit[1].length && num > 0; j++) {
132+
p = digit[num % 10] + unit[1][j] + p
133+
num = Math.floor(num / 10)
22134
}
23-
return num ? ('￥ ' + t.split('').reverse().join('') + '.' + r) : ''
24-
} else {
25-
return ''
135+
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
26136
}
137+
return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
27138
}
28139
}
29140

@@ -36,6 +147,62 @@ export function percentFilter (num) {
36147
return percentStr
37148
}
38149

150+
/**
151+
* 大写首字符
152+
* @param {String} string
153+
*/
154+
export function uppercaseFirst (string) {
155+
return string.charAt(0).toUpperCase() + string.slice(1)
156+
}
157+
158+
/**
159+
* 日期格式过滤器 13位时间戳转日期+时间格式 YYYY-MM-DD HH:mm:ss
160+
* @param {String} time
161+
*/
162+
export function timeFormatFilter (time) {
163+
let date = new Date(time)
164+
const year = date.getFullYear()
165+
let month = date.getMonth() + 1
166+
let day = date.getDate()
167+
let h = date.getHours()
168+
let minute = date.getMinutes()
169+
let second = date.getSeconds()
170+
month = month < 10 ? '0' + month : month
171+
day = day < 10 ? '0' + day : day
172+
h = h < 10 ? ('0' + h) : h
173+
minute = minute < 10 ? ('0' + minute) : minute
174+
second = second < 10 ? ('0' + second) : second
175+
date = year + '-' + month + '-' + day + ' ' + h + ':' + minute + ':' + second
176+
return date
177+
}
178+
179+
/**
180+
* 日期格式过滤器 13位时间戳转日期格式 YYYY-MM-DD
181+
* @param {String} time
182+
*/
183+
export function dateFormatFilter (time) {
184+
let date = new Date(time)
185+
const year = date.getFullYear()
186+
let month = date.getMonth() + 1
187+
let day = date.getDate()
188+
month = month < 10 ? '0' + month : month
189+
day = day < 10 ? '0' + day : day
190+
date = year + '-' + month + '-' + day
191+
return date
192+
}
193+
194+
/**
195+
* 日期格式过滤器 YYYYMMDD 戳转日期格式 YYYY-MM-DD
196+
* @param {String} dateStr
197+
*/
198+
export function dateStrFormat (dateStr) {
199+
if (dateStr !== undefined && dateStr !== null && dateStr !== '') {
200+
return dateStr.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3')
201+
} else {
202+
return ''
203+
}
204+
}
205+
39206
/**
40207
* 列表常量value key过滤器
41208
* @param {String} status
@@ -45,3 +212,17 @@ export function constantKey2Value (status, constantName) {
45212
const statusMap = GlobalConstant[constantName]
46213
return statusMap[status] || ''
47214
}
215+
216+
/**
217+
* 显示上传文件名过滤器
218+
* @param {String} cellValue
219+
*/
220+
export function formatFileName (cellValue) {
221+
if (cellValue && cellValue.length > 9) {
222+
const index = cellValue.lastIndexOf('/')
223+
const formatName = cellValue.substring(index + 1, cellValue.length)
224+
return formatName
225+
} else {
226+
return cellValue
227+
}
228+
}

‎src/utils/utils.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* Created by Win on 20/02/21.
33
*/
4-
54
// 时间戳转化为年 月 日
65
export function getLocalTime (nS) {
76
// 将时间戳（十三位时间搓，也就是带毫秒的时间搓）转换成时间格式

0 commit comments

Comments
 (0)
Please sign in to comment.