|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+<template>
|
|
|
2
|
+ <div>
|
|
|
3
|
+ <div class="tableInfo">
|
|
|
4
|
+ <div class="flex">
|
|
|
5
|
+ <div class="totalCustom">共<span>{{tableData&&tableData.length ? tableData.length : '-'}}</span>个成员</div>
|
|
|
6
|
+ </div>
|
|
|
7
|
+ <div class="flex">
|
|
|
8
|
+ <selfinput :hasLabel="false" @inputChange="inputChange"></selfinput>
|
|
|
9
|
+ </div>
|
|
|
10
|
+ </div>
|
|
|
11
|
+ <div style="display: flex;">
|
|
|
12
|
+ <div style="width: 25%;flex-shrink: 0;margin-right: 1%;background-color: #fff;padding: 15px">
|
|
|
13
|
+ <div class="fWeight600">
|
|
|
14
|
+ 部门信息
|
|
|
15
|
+ </div>
|
|
|
16
|
+ <div>
|
|
|
17
|
+ <div v-for="c in checkList" :key="c.id" class="tMar20 flex-align-center">
|
|
|
18
|
+ <i class="el-icon-circle-check c-00B38A f16 rMar7 pointer" v-if="checkVals.indexOf(c.id)>-1" @click="checkDepartId(c.id)"></i>
|
|
|
19
|
+ <i class="el-icon-circle rMar7 pointer" @click="checkDepartId(c.id)" v-else></i>
|
|
|
20
|
+ {{c.name}}
|
|
|
21
|
+ </div>
|
|
|
22
|
+ </div>
|
|
|
23
|
+ </div>
|
|
|
24
|
+ <div style="flex: 1" v-loading="loading">
|
|
|
25
|
+ <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
|
|
|
26
|
+ <el-table-column label="成员列表" show-overflow-tooltip>
|
|
|
27
|
+ <template slot-scope="scope">
|
|
|
28
|
+ <div class="flex-align-center">
|
|
|
29
|
+ <div>
|
|
|
30
|
+ <img :src="scope.row.avatar" alt="" style="width: 40px;margin-right: 10px">
|
|
|
31
|
+ </div>
|
|
|
32
|
+ <div>
|
|
|
33
|
+ <div>{{scope.row.name}}</div>
|
|
|
34
|
+ <div>共有{{scope.row.customer_number}}个客户</div>
|
|
|
35
|
+ </div>
|
|
|
36
|
+ </div>
|
|
|
37
|
+ </template>
|
|
|
38
|
+ </el-table-column>
|
|
|
39
|
+ <el-table-column label="所属部门" align="center">
|
|
|
40
|
+ <template slot-scope="scope">
|
|
|
41
|
+ <div>
|
|
|
42
|
+ <span v-for="d in scope.row.department" class="rMar7">{{d}}</span>
|
|
|
43
|
+ </div>
|
|
|
44
|
+ </template>
|
|
|
45
|
+ </el-table-column>
|
|
|
46
|
+ <el-table-column label="授权状态" align="center">
|
|
|
47
|
+ <template slot-scope="scope">
|
|
|
48
|
+ <div class="flex-align-jus-center">
|
|
|
49
|
+ <i class="el-icon-circle-check f16 c-00B38A rMar7" v-if="scope.row.status == 1"></i>
|
|
|
50
|
+ <i class="el-icon-warning-outline f16 c-FF604D" v-if="scope.row.status == 4"></i>
|
|
|
51
|
+ {{scope.row.status == 1 ? '已授权' : '未授权'}}
|
|
|
52
|
+ </div>
|
|
|
53
|
+ </template>
|
|
|
54
|
+ </el-table-column>
|
|
|
55
|
+ </el-table>
|
|
|
56
|
+ <div class="pagination" v-show="total>0">
|
|
|
57
|
+ <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
|
|
|
58
|
+ </el-pagination>
|
|
|
59
|
+ </div>
|
|
|
60
|
+ </div>
|
|
|
61
|
+ </div>
|
|
|
62
|
+
|
|
|
63
|
+ </div>
|
|
|
64
|
+</template>
|
|
|
65
|
+
|
|
|
66
|
+<script>
|
|
|
67
|
+import selfinput from '../assembly/screen/input.vue'
|
|
|
68
|
+export default {
|
|
|
69
|
+ name:'memberManage',
|
|
|
70
|
+ components:{
|
|
|
71
|
+ selfinput
|
|
|
72
|
+ },
|
|
|
73
|
+ data () {
|
|
|
74
|
+ return {
|
|
|
75
|
+ loading: false,
|
|
|
76
|
+ page: 1,
|
|
|
77
|
+ pages: 0,
|
|
|
78
|
+ total: 0,
|
|
|
79
|
+ page_size: 20,
|
|
|
80
|
+ tableData: [],
|
|
|
81
|
+ checkVals:[],
|
|
|
82
|
+ checkList:[],
|
|
|
83
|
+
|
|
|
84
|
+ }
|
|
|
85
|
+ },
|
|
|
86
|
+ created () {
|
|
|
87
|
+ this.init(1)
|
|
|
88
|
+ },
|
|
|
89
|
+ methods: {
|
|
|
90
|
+ inputChange(keyword){
|
|
|
91
|
+ this.init(1,keyword)
|
|
|
92
|
+ },
|
|
|
93
|
+ init (page,keyword) {
|
|
|
94
|
+ console.log(this.checkVals);
|
|
|
95
|
+ this.page = page ? page : this.page;
|
|
|
96
|
+ this.loading = true
|
|
|
97
|
+ this.$axios.get(this.URL.BASEURL + this.URL.memberList, {
|
|
|
98
|
+ params: {
|
|
|
99
|
+ user_name:keyword,
|
|
|
100
|
+ page: this.page,
|
|
|
101
|
+ page_size: this.page_size
|
|
|
102
|
+ }
|
|
|
103
|
+ }).then((res) => {
|
|
|
104
|
+ var res = res.data
|
|
|
105
|
+ this.loading = false
|
|
|
106
|
+ if (res && res.errno == 0) {
|
|
|
107
|
+ this.tableData = res.rst.data;
|
|
|
108
|
+ this.total = res.rst.pageInfo.total;
|
|
|
109
|
+ this.pages = res.rst.pageInfo.pages;
|
|
|
110
|
+ } else if (res.errno != 4002) {
|
|
|
111
|
+ this.$message({
|
|
|
112
|
+ message: res.err,
|
|
|
113
|
+ type: "warning"
|
|
|
114
|
+ })
|
|
|
115
|
+ }
|
|
|
116
|
+ }).catch((err) => {
|
|
|
117
|
+ this.loading = false
|
|
|
118
|
+ });
|
|
|
119
|
+ },
|
|
|
120
|
+ handleCurrentChange (val) {
|
|
|
121
|
+ this.init(val)
|
|
|
122
|
+ },
|
|
|
123
|
+ checkDepartId(id){
|
|
|
124
|
+ if(this.checkVals.indexOf(id)==-1){
|
|
|
125
|
+ this.checkVals.push(id)
|
|
|
126
|
+ }else{
|
|
|
127
|
+ this.checkVals.splice(this.checkVals.indexOf(id),1)
|
|
|
128
|
+ }
|
|
|
129
|
+ },
|
|
|
130
|
+ }
|
|
|
131
|
+}
|
|
|
132
|
+</script>
|
|
|
133
|
+<style lang="scss" scoped>
|
|
|
134
|
+@import "@/style/list.scss";
|
|
|
135
|
+.tableInfo {
|
|
|
136
|
+ height: 50px;
|
|
|
137
|
+}
|
|
|
138
|
+.el-icon-circle{
|
|
|
139
|
+ width: 14px;
|
|
|
140
|
+ height: 14px;
|
|
|
141
|
+ margin: 0 1px;
|
|
|
142
|
+ border-radius: 50%;
|
|
|
143
|
+ border: 1px solid #999;
|
|
|
144
|
+ margin-right: 8px;
|
|
|
145
|
+}
|
|
|
146
|
+</style>
|
xiuli.gao