Skip to content

Commit 7eb6470

Browse files
陈鑫陈鑫
陈鑫
authored and
陈鑫
committed
添加table Mixins
1 parent 29c1e0a commit 7eb6470

File tree

9 files changed

+303
-40
lines changed

9 files changed

+303
-40
lines changed

‎src/main.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import router from "./router";
44
import store from "./store";
55
import i18n from "./i18n";
66
import { Modal } from "ant-design-vue";
7+
import { Message, Notification } from "@/utils/resetMessage";
78

89
// 导入视频播放组件
910
import VueVideoPlayer from "vue-video-player";
@@ -23,6 +24,8 @@ Es6Promise.polyfill();
2324

2425
Vue.config.productionTip = false;
2526
Vue.prototype.$URL = window.config;
27+
Vue.prototype.$message = Message;
28+
Vue.prototype.$notification = Notification;
2629

2730
new Vue({
2831
router,

‎src/mixins/table.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/**
2+
* 将table组件公共操作（删除，查询，分页查询）封装到mixin
3+
*/
4+
import Vue from 'vue'
5+
import { Component } from "vue-property-decorator"
6+
import { Pagination } from "@/utils/const"
7+
import { Modal, message } from "ant-design-vue"
8+
9+
@Component
10+
export default class TableMixin extends Vue {
11+
public tableData = [] //table列表数据
12+
public loading: boolean = false //加载loading
13+
public selectedRowKeys: (string | number)[] = [] //勾选项key
14+
public selectedRows: any = [] //勾选项
15+
public mixinOptions: StoreState.TableMixinOptions = { //公共操作请求api方法
16+
queryTableApi: () => { },
17+
deleteApi: () => { }
18+
}
19+
public pagination: StoreState.Pagination = new Pagination({}).init(); //分页
20+
public queryData: StoreState.TableQueryOptions = { //table列表请求参数
21+
pageNo: 1,
22+
pageSize: 10
23+
};
24+
25+
//inital methods
26+
27+
//查询列表
28+
public async query() {
29+
this.loading = true
30+
try {
31+
let { data } = await this.mixinOptions['queryTableApi'](this.queryData)
32+
this.tableData = data['list']
33+
this.pagination.current = data["pageNum"];
34+
this.pagination.total = data['total']
35+
this.loading = false
36+
} catch (error) {
37+
this.loading = false
38+
}
39+
}
40+
//分页查询
41+
public tableChange(pagination: StoreState.Pagination) {
42+
this.queryData.pageNo = pagination.current as number
43+
this.query()
44+
}
45+
/**
46+
* 批量删除
47+
* @param deleteParams //api参数
48+
*/
49+
public batchHandleDetele(deleteParams: any) {
50+
if (!this.selectedRows.length) {
51+
message.warning("请选择要删除的数据！")
52+
return
53+
}
54+
this.handleDetele(deleteParams)
55+
}
56+
//删除确认
57+
public handleDetele(deleteParams: any) {
58+
Modal.confirm({
59+
title: "确定进行[删除]操作?",
60+
okText: "确定",
61+
class: "my-modal",
62+
cancelText: "取消",
63+
onOk: async () => {
64+
this.onDetele(deleteParams)
65+
},
66+
onCancel: () => {
67+
console.log("Cancel");
68+
}
69+
});
70+
}
71+
//开始删除
72+
public async onDetele(deleteParams: any) {
73+
await this.mixinOptions['deleteApi'](deleteParams);
74+
let pageNo = this.queryData.pageNo;
75+
if (this.tableData.length == 1) {
76+
this.queryData.pageNo = pageNo - 1 <= 0 ? 1 : pageNo - 1;
77+
}
78+
this.query()
79+
}
80+
//勾选
81+
public onSelectChange(selectedRowKeys: Array<string | number>, selectedRows: any) {
82+
console.log("selectedRowKeys changed: ", selectedRowKeys);
83+
this.selectedRowKeys = selectedRowKeys;
84+
this.selectedRows = selectedRows
85+
}
86+
87+
mounted() {
88+
this.query()
89+
}
90+
}

‎src/types/interfaces.d.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,18 @@ declare namespace StoreState {
5858
url: string;
5959
id: string;
6060
}
61+
62+
//列表mixin
63+
export interface TableMixinOptions {
64+
queryTableApi: ({ }) => any;
65+
deleteApi: ({ }) => any;
66+
}
67+
68+
//列表查询参数
69+
export interface TableQueryOptions {
70+
orgId?: string;
71+
pageNo: number;
72+
pageSize: number;
73+
[propName: string]: any;
74+
}
6175
}

‎src/types/shims-vue.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ declare module 'crypto-js'
77
declare module 'spark-md5'
88
declare module "mockjs"
99
declare module "vue-video-player"
10+
declare module '@/utils/*'

‎src/utils/fetch.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
22
import { getToken, removeToken } from "@/utils/token";
3-
import { Modal, message, notification } from "ant-design-vue";
3+
import { Modal } from "ant-design-vue";
4+
import { Message, Notification } from "@/utils/resetMessage";
45
import router from "@/router";
56

67
/**
@@ -113,16 +114,16 @@ axios.interceptors.response.use(
113114
} else if (code == 200) {
114115
if (status) {
115116
//接口请求成功
116-
msg && message.success(msg); //后台如果返回了msg，则将msg提示出来
117+
msg && Message.success(msg); //后台如果返回了msg，则将msg提示出来
117118
return Promise.resolve(response); //返回成功数据
118119
} else {
119120
//接口异常
120-
msg && message.warning(msg); //后台如果返回了msg，则将msg提示出来
121+
msg && Message.warning(msg); //后台如果返回了msg，则将msg提示出来
121122
return Promise.reject(response); //返回异常数据
122123
}
123124
} else {
124125
//接口异常
125-
msg && message.error(msg);
126+
msg && Message.error(msg);
126127
return Promise.reject(response);
127128
}
128129
}
@@ -132,32 +133,32 @@ axios.interceptors.response.use(
132133
if (error.response.status) {
133134
switch (error.response.status) {
134135
case 500:
135-
notification.error({
136+
Notification.error({
136137
message: "Forbidden",
137138
description: error.response.data
138139
});
139140
break;
140141
case 401:
141-
notification.error({
142+
Notification.error({
142143
message: "Forbidden",
143144
description: "暂无权限"
144145
});
145146
break;
146147
case 403:
147-
notification.error({
148+
Notification.error({
148149
message: "Forbidden",
149150
description: "登录过期，请重新登录"
150151
});
151152
break;
152153
// 404请求不存在
153154
case 404:
154-
notification.error({
155+
Notification.error({
155156
message: "Forbidden",
156157
description: "网络请求不存在"
157158
});
158159
break;
159160
default:
160-
notification.error({
161+
Notification.error({
161162
message: "Forbidden",
162163
description: error.response.data.msg
163164
});

‎src/utils/resetMessage.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { message } from "ant-design-vue";
2+
import notification from "ant-design-vue/es/notification";
3+
4+
const Message = options => {
5+
message.destroy();
6+
message[options.type](options);
7+
};
8+
9+
const Notification = options => {
10+
notification.destroy();
11+
notification[options.type](options);
12+
};
13+
14+
["success", "info", "warning", "error", "loading"].forEach(type => {
15+
Message[type] = options => {
16+
if (typeof options === "string") {
17+
options = {
18+
content: options
19+
};
20+
}
21+
options.type = type;
22+
return Message(options);
23+
};
24+
});
25+
26+
["success", "info", "warning", "error", "loading", "warn", "open"].forEach(
27+
type => {
28+
Notification[type] = options => {
29+
if (typeof options === "string") {
30+
options = {
31+
message: "温馨提示",
32+
description: options
33+
};
34+
}
35+
options.type = type;
36+
return Notification(options);
37+
};
38+
}
39+
);
40+
41+
export { Message, Notification };

‎src/views/eoms/fault/index.vue‎

Lines changed: 115 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,123 @@
11
<template>
2-
<div></div>
2+
<div class="piece-con">
3+
<a-table :row-key="(record) => record.guid"
4+
:row-selection="{
5+
selectedRowKeys: selectedRowKeys,
6+
onChange: onSelectChange,
7+
}"
8+
@change="tableChange"
9+
:pagination="pagination"
10+
:columns="columns"
11+
:data-source="tableData">
12+
<template slot="index"
13+
slot-scope="text, record, index">
14+
<span>{{ index + 1 }}</span>
15+
</template>
16+
<template slot="operation"
17+
slot-scope="text, record">
18+
<a href="#">详情</a>
19+
<a-divider type="vertical" />
20+
<a href="#"
21+
@click="deleteOut(record)">删除</a>
22+
</template>
23+
</a-table>
24+
</div>
325
</template>
426

527
<script lang="ts">
6-
import { Component, Vue } from "vue-property-decorator";
28+
import { Component, Vue, Mixins } from "vue-property-decorator";
29+
import { Table, Divider } from "ant-design-vue";
30+
import { FaultInterface } from "../fault/interfaces";
31+
import TableMixin from "@/mixins/table";
732
8-
@Component
9-
export default class Fault extends Vue {}
33+
@Component({
34+
components: {
35+
ATable: Table,
36+
ADivider: Divider,
37+
},
38+
})
39+
export default class Fault extends Mixins(TableMixin) {
40+
//table mixins参数
41+
mixinOptions: StoreState.TableMixinOptions = {
42+
queryTableApi: () => {},
43+
deleteApi: () => {},
44+
};
45+
private columns: object[] = [
46+
{
47+
title: "序号",
48+
dataIndex: "index",
49+
key: "index",
50+
width: 60,
51+
//根据宽度自动省略
52+
ellipsis: true,
53+
align: "center",
54+
scopedSlots: { customRender: "index" },
55+
},
56+
{
57+
title: "设备名称",
58+
width: 150,
59+
ellipsis: true,
60+
align: "center",
61+
dataIndex: "deviceName",
62+
key: "deviceName",
63+
},
64+
{
65+
title: "设备SN",
66+
width: 180,
67+
ellipsis: true,
68+
align: "center",
69+
dataIndex: "sn",
70+
key: "sn",
71+
},
72+
{
73+
title: "MAC",
74+
align: "center",
75+
width: 200,
76+
ellipsis: true,
77+
dataIndex: "mac",
78+
key: "mac",
79+
},
80+
{
81+
title: "组织架构",
82+
align: "center",
83+
width: 180,
84+
ellipsis: true,
85+
dataIndex: "orgName",
86+
key: "orgName",
87+
},
88+
{
89+
title: "网络组名称",
90+
align: "center",
91+
width: 150,
92+
ellipsis: true,
93+
dataIndex: "groupName",
94+
key: "groupName",
95+
},
96+
{
97+
title: "负责人",
98+
align: "center",
99+
width: 150,
100+
ellipsis: true,
101+
dataIndex: "createName",
102+
key: "createName",
103+
},
104+
{
105+
title: "操作",
106+
align: "center",
107+
dataIndex: "operation",
108+
key: "operation",
109+
width: 220,
110+
scopedSlots: { customRender: "operation" },
111+
},
112+
];
113+
114+
//删除
115+
private deleteOut(row: any) {
116+
this.handleDetele({
117+
guid: row.guid,
118+
});
119+
}
120+
}
10121
</script>
11122

12123
<style lang="less" scope>

‎src/views/eoms/fault/interfaces.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export module FaultInterface {
2+
export interface TableParams {
3+
guid: string
4+
}
5+
}

0 commit comments

Comments
 (0)