memberInfoDialog.vue
4.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<template>
<div class="memberInfoDialogSty">
<el-dialog
:title="memberInfoForm.title"
:visible.sync="dialogVisible"
width="1200px"
height="500px"
:before-close="handleClose">
<el-row style="height: 100%">
<el-col :span="24" style="height: 100%;">
<el-tabs v-model='tabs.activeName' type="card" style="height: 100%" @tab-click="handleClick">
<template v-for='(item , index) in tabs.componentList' style="height: 100%;">
<el-tab-pane :label='item.name' :name='item.component' style="height: 100%;">
<component :is='item.component' :ref='item.component' style='height: 100%'></component>
</el-tab-pane>
</template>
</el-tabs>
<!-- <el-tabs v-model="memberInfoForm.activeName" style="height: 100%" type="card" @tab-click="handleClick">-->
<!-- <el-tab-pane label="会员信息" name="message">-->
<!-- <message-info></message-info>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="会员地址" name="address" style="height: 100%;">-->
<!-- <address-info style="height: 100%;"></address-info>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="会员用气记录" name="gasRecord" style="height: 100%;">-->
<!-- <gas-record-table style="height: 100%;"></gas-record-table>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="消费记录" name="expense" style="height: 100%;">-->
<!-- <expense-table style="height: 100%;"></expense-table>-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="安检记录" name="security" style="height: 100%;">-->
<!-- <security-table style="height: 100%;"></security-table>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import expenseTable from "./components/expenseTable";
import securityTable from "./components/securityTable";
import MessageInfo from "./components/messageInfo";
import gasRecordTable from "./components/gasRecordTable"
import AddressInfo from "./components/addressInfo";
export default {
name:'memberInfoDialog',
components: {AddressInfo,gasRecordTable, MessageInfo,expenseTable,securityTable},
data() {
return {
dialogVisible: false,
memberInfoForm:{
title:'会员详情-',
activeName:'message'
},
form:{},
tabs: {
activeName: 'MessageInfo',
componentList: [
{name: '会员信息', component: 'MessageInfo'},
{name: '会员地址', component: 'AddressInfo'},
{name: '会员用气记录', component: 'gasRecordTable'},
{name: '消费记录', component: 'expenseTable'},
{name: '安检记录', component: 'securityTable'}
]
}
}
},
methods: {
// handleClick(tab, event) {
// console.log(tab, event);
// },
//切换tab标签页面的事件
handleClick(){
console.log('打印是否触发这个事件',111)
this.handleQuery();
},
handleQuery() {
this.$refs[this.tabs.activeName][0].onInitData(this.form);
},
open(row) {
let openThis = this;
this.dialogVisible = true;
openThis.tabs.activeName = 'MessageInfo';
openThis.form = { ...row};
openThis.memberInfoForm.title = openThis.memberInfoForm.title + row.whyxxfhync;
console.log('打印row',row);
this.$nextTick(()=>{
this.handleClick();
})
},
handleClose(done) {
this.memberInfoForm.title ='会员详情-';
done();
this.$emit('handleRefresh');
},
handleSubmit() {
this.dialogVisible = false;
this.memberInfoForm.title ='会员详情-';
this.$emit('handleRefresh');
}
}
}
</script>
<style lang="scss" scoped>
.memberInfoDialogSty{
::v-deep.el-dialog__body{
border-top: 1px solid transparent !important;
padding: 0px 20px;
height: 590px;
}
::v-deep.el-dialog__footer{
border-top: 1px solid transparent !important;
}
::v-deep.el-tabs--card > .el-tabs__header{
background-color: #f0f2f5;
border-bottom: 1px solid transparent;
padding-top: 5px;
}
::v-deep.el-tabs__item{
background-color: #fff!important;
margin: 0px 2px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
::v-deep.el-tabs--card > .el-tabs__header .el-tabs__nav{
border: 1px solid transparent !important;
}
::v-deep.el-tabs__content{
padding: 0px !important;
height: calc(100% - 50px);
}
::v-deep.el-tabs__header{
margin: 0px 0px 5px;
}
}
</style>