Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
800ba85e by 任超
Options

style:用户中心

1 parent cac15baf
Inline Side-by-side
Showing 1 changed file with 62 additions and 197 deletions
...@@ -3,35 +3,20 @@ ...@@ -3,35 +3,20 @@
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-row class="mb-5"> 5 <el-row class="mb-5">
6
7 <el-col :span="3"> 6 <el-col :span="3">
8 <el-select v-model="selectType" placeholder="请选择" class="select"> 7 <el-select v-model="selectType" placeholder="请选择" class="select">
9 <el-option 8 <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
10 v-for="item in typeOptions"
11 :key="item.value"
12 :label="item.label"
13 :value="item.value"
14 />
15 </el-select> 9 </el-select>
16 </el-col> 10 </el-col>
17 <el-col :span="3"> 11 <el-col :span="3">
18 <el-input 12 <el-input v-model="queryName" class="selectName" clearable placeholder="请输入">
19 v-model="queryName" 13 <el-button slot="append" icon="el-icon-search" @click="searchQuery()" />
20 class="selectName"
21 clearable
22 placeholder="请输入"
23 >
24 <el-button
25 slot="append"
26 icon="el-icon-search"
27 @click="searchQuery()"
28 />
29 </el-input> 14 </el-input>
30 </el-col> 15 </el-col>
31 <!-- 按钮操作 --> 16 <!-- 按钮操作 -->
32 <el-col :span="6" class="btnColRight"> 17 <el-col :span="6" class="btnColRight">
33 <el-form-item> 18 <el-form-item>
34 <btn nativeType="cz" @click="handleAdd" >添加人员</btn> 19 <btn nativeType="cz" @click="handleAdd">添加人员</btn>
35 <btn nativeType="cx" @click="resetPassword(selectionRows)">重置密码</btn> 20 <btn nativeType="cx" @click="resetPassword(selectionRows)">重置密码</btn>
36 <btn nativeType="sb" @click="resetSearch()">重置</btn> 21 <btn nativeType="sb" @click="resetSearch()">重置</btn>
37 </el-form-item> 22 </el-form-item>
...@@ -41,191 +26,72 @@ ...@@ -41,191 +26,72 @@
41 </el-form> 26 </el-form>
42 </div> 27 </div>
43 <div class="from-clues-content"> 28 <div class="from-clues-content">
44 <vxe-table 29 <vxe-table ref="xTree" v-loading="loading" class="header-bg-type1" :data="tableData" show-overflow border
45 ref="xTree" 30 :checkbox-config="{ highlight: true }" :empty-render="{ name: 'NotData' }" highlight-hover-row max-height="90%"
46 v-loading="loading" 31 @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
47 class="header-bg-type1"
48 :data="tableData"
49 show-overflow
50 border
51 :checkbox-config="{ highlight: true }"
52 :empty-render="{ name: 'NotData' }"
53 highlight-hover-row
54 max-height="90%"
55 @checkbox-all="selectAllEvent"
56 @checkbox-change="selectChangeEvent"
57 >
58 <template #empty> 32 <template #empty>
59 <table-empty /> 33 <table-empty />
60 </template> 34 </template>
61 <vxe-table-column 35 <vxe-table-column type="checkbox" width="36" align="center" fixed="left" />
62 type="checkbox" 36 <vxe-table-column field="code" title="工号" width="80" align="left" show-header-overflow="tooltip"
63 width="36" 37 show-overflow="tooltip" fixed="left" />
64 align="center" 38 <vxe-table-column title="姓名" width="140" align="left" show-header-overflow="tooltip" show-overflow="tooltip"
65 fixed="left" 39 fixed="left">
66 />
67 <vxe-table-column
68 field="code"
69 title="工号"
70 width="80"
71 align="left"
72 show-header-overflow="tooltip"
73 show-overflow="tooltip"
74 fixed="left"
75 />
76 <vxe-table-column
77 title="姓名"
78 width="140"
79 align="left"
80 show-header-overflow="tooltip"
81 show-overflow="tooltip"
82 fixed="left"
83 >
84 <template slot-scope="scope"> 40 <template slot-scope="scope">
85 <svg-icon 41 <svg-icon :icon-class="
86 :icon-class=" 42 scope.row.sex === '0'
87 scope.row.sex === '0' 43 ? 'male'
88 ? 'male' 44 : scope.row.sex === '1'
89 : scope.row.sex === '1'
90 ? 'female' 45 ? 'female'
91 : 'secrecy' 46 : 'secrecy'
92 " 47 " />
93 />
94 {{ scope.row.name }} 48 {{ scope.row.name }}
95 </template> 49 </template>
96 </vxe-table-column> 50 </vxe-table-column>
97 <vxe-table-column 51 <vxe-table-column field="loginName" title="用户名" width="110" align="left" show-header-overflow="tooltip"
98 field="loginName" 52 show-overflow="tooltip" fixed="left" />
99 title="用户名" 53 <vxe-table-column title="负责人" align="left" show-header-overflow="tooltip" show-overflow="tooltip">
100 width="110"
101 align="left"
102 show-header-overflow="tooltip"
103 show-overflow="tooltip"
104 fixed="left"
105 />
106 <vxe-table-column
107 title="负责人"
108 align="left"
109 show-header-overflow="tooltip"
110 show-overflow="tooltip"
111 >
112 <template slot-scope="scope"> 54 <template slot-scope="scope">
113 <i v-if="scope.row.isDuty" class="el-icon-check" /> 55 <i v-if="scope.row.isDuty" class="el-icon-check" />
114 </template> 56 </template>
115 </vxe-table-column> 57 </vxe-table-column>
116 <vxe-table-column 58 <vxe-table-column field="departmentName" title="所属部门" align="left" width="140" min-width="140"
117 field="departmentName" 59 show-header-overflow="tooltip" show-overflow="tooltip" />
118 title="所属部门" 60 <vxe-table-column field="jobLevel" :formatter="formatterjobLevel" title="职位" align="left" width="140"
119 align="left" 61 min-width="140" show-header-overflow="tooltip" show-overflow="tooltip" />
120 width="140" 62 <vxe-table-column field="mobilePhone" title="电话" width="140" show-header-overflow="tooltip"
121 min-width="140" 63 show-overflow="tooltip" align="left" />
122 show-header-overflow="tooltip"
123 show-overflow="tooltip"
124 />
125 <vxe-table-column
126 field="jobLevel"
127 :formatter="formatterjobLevel"
128 title="职位"
129 align="left"
130 width="140"
131 min-width="140"
132 show-header-overflow="tooltip"
133 show-overflow="tooltip"
134 />
135 <vxe-table-column
136 field="mobilePhone"
137 title="电话"
138 width="140"
139 show-header-overflow="tooltip"
140 show-overflow="tooltip"
141 align="left"
142 />
143 <vxe-table-column title="状态" width="50"> 64 <vxe-table-column title="状态" width="50">
144 <template scope="scope"> 65 <template scope="scope">
145 <el-switch 66 <el-switch v-model="scope.row.switch" class="switch" active-color="#32BAD4" inactive-color="#B1B9C5"
146 v-model="scope.row.switch" 67 active-text="启" inactive-text="禁" @change="changeStatus(scope.row)" />
147 class="switch"
148 active-color="#32BAD4"
149 inactive-color="#B1B9C5"
150 active-text="启"
151 inactive-text="禁"
152 @change="changeStatus(scope.row)"
153 />
154 </template> 68 </template>
155 </vxe-table-column> 69 </vxe-table-column>
156 <vxe-table-column 70 <vxe-table-column title="排序" width="148" min-width="148" align="left" fixed="right">
157 title="排序"
158 width="148"
159 min-width="148"
160 align="left"
161 fixed="right"
162 >
163 <template #header> 71 <template #header>
164 <p class="ml8">排序</p> 72 <p class="ml8">排序</p>
165 </template> 73 </template>
166 <template slot-scope="scope"> 74 <template slot-scope="scope">
167 <sort-table 75 <sort-table :scope-data="scope" :sort-url="tableUrl" @sortOk="getTableList" />
168 :scope-data="scope"
169 :sort-url="tableUrl"
170 @sortOk="getTableList"
171 />
172 </template> 76 </template>
173 </vxe-table-column> 77 </vxe-table-column>
174 <vxe-table-column 78 <vxe-table-column title="操作" width="148" min-width="148" align="left" fixed="right">
175 title="操作"
176 width="148"
177 min-width="148"
178 align="left"
179 fixed="right"
180 >
181 <template #header> 79 <template #header>
182 <p class="ml8">操作</p> 80 <p class="ml8">操作</p>
183 </template> 81 </template>
184 <template slot-scope="scope"> 82 <template slot-scope="scope">
185 <el-button type="text" size="small"> 83 <el-button type="text" size="small">
186 <el-tooltip 84 <el-tooltip class="item" effect="dark" content="解锁" placement="top">
187 class="item" 85 <i class="icon-platform-unlock iconfont" @click="updateLock(scope.row.id, scope.row.name)" />
188 effect="dark"
189 content="解锁"
190 placement="top"
191 >
192 <i
193 class="icon-platform-unlock iconfont"
194 @click="updateLock(scope.row.id, scope.row.name)"
195 />
196 </el-tooltip> 86 </el-tooltip>
197 <el-tooltip 87 <el-tooltip class="item" effect="dark" content="重置" placement="top">
198 class="item" 88 <i class="icon-platform-reset iconfont" @click="resetPassword(scope.row.id)" />
199 effect="dark"
200 content="重置"
201 placement="top"
202 >
203 <i
204 class="icon-platform-reset iconfont"
205 @click="resetPassword(scope.row.id)"
206 />
207 </el-tooltip> 89 </el-tooltip>
208 <el-tooltip 90 <el-tooltip class="item" effect="dark" content="修改" placement="top">
209 class="item" 91 <i class="icon-platform-edit iconfont" @click="handleEdit(scope.row)" />
210 effect="dark"
211 content="修改"
212 placement="top"
213 >
214 <i
215 class="icon-platform-edit iconfont"
216 @click="handleEdit(scope.row)"
217 />
218 </el-tooltip> 92 </el-tooltip>
219 <el-tooltip 93 <el-tooltip class="item" effect="dark" content="删除" placement="top">
220 class="item" 94 <i class="icon-platform-delete iconfont" @click="handleDelete(scope.row.id, scope.row.name)" />
221 effect="dark"
222 content="删除"
223 placement="top"
224 >
225 <i
226 class="icon-platform-delete iconfont"
227 @click="handleDelete(scope.row.id, scope.row.name)"
228 />
229 </el-tooltip> 95 </el-tooltip>
230 </el-button> 96 </el-button>
231 </template> 97 </template>
...@@ -236,11 +102,10 @@ ...@@ -236,11 +102,10 @@
236 </template> 102 </template>
237 <script> 103 <script>
238 // 定时任务 104 // 定时任务
239
240 export default { 105 export default {
241 name: "users", 106 name: "users",
242 components: {}, 107 components: {},
243 data() { 108 data () {
244 return { 109 return {
245 title: '', 110 title: '',
246 queryParam: {}, 111 queryParam: {},
...@@ -279,7 +144,7 @@ export default { ...@@ -279,7 +144,7 @@ export default {
279 }, 144 },
280 }; 145 };
281 }, 146 },
282 created() { 147 created () {
283 // 获取区域和组织机构id 148 // 获取区域和组织机构id
284 eventBus.$on('getSelectedId', (res) => { 149 eventBus.$on('getSelectedId', (res) => {
285 if (!res.organizationId) { 150 if (!res.organizationId) {
...@@ -295,13 +160,13 @@ export default { ...@@ -295,13 +160,13 @@ export default {
295 this.initDictConfig() 160 this.initDictConfig()
296 }) 161 })
297 }, 162 },
298 updated() { 163 updated () {
299 this.tableData.forEach((element) => { 164 this.tableData.forEach((element) => {
300 element.switch = element.status === 'ACTIVE' 165 element.switch = element.status === 'ACTIVE'
301 }) 166 })
302 }, 167 },
303 methods: { 168 methods: {
304 initDictConfig() { 169 initDictConfig () {
305 getDictItems('XB').then((res) => { 170 getDictItems('XB').then((res) => {
306 if (res.status === 1) { 171 if (res.status === 1) {
307 this.sexList = res.content 172 this.sexList = res.content
...@@ -317,7 +182,7 @@ export default { ...@@ -317,7 +182,7 @@ export default {
317 } 182 }
318 }) 183 })
319 }, 184 },
320 getDepartData() { 185 getDepartData () {
321 getDeptsByIdAction(this.organizationId).then((res) => { 186 getDeptsByIdAction(this.organizationId).then((res) => {
322 if (res.status === 1) { 187 if (res.status === 1) {
323 this.departmentList = res.content 188 this.departmentList = res.content
...@@ -326,7 +191,7 @@ export default { ...@@ -326,7 +191,7 @@ export default {
326 } 191 }
327 }) 192 })
328 }, 193 },
329 getTableList() { 194 getTableList () {
330 this.loading = true 195 this.loading = true
331 this.queryParam = { 196 this.queryParam = {
332 organizationId: this.organizationId, 197 organizationId: this.organizationId,
...@@ -342,7 +207,7 @@ export default { ...@@ -342,7 +207,7 @@ export default {
342 }) 207 })
343 }, 208 },
344 // 查询 209 // 查询
345 searchQuery() { 210 searchQuery () {
346 switch (this.selectType) { 211 switch (this.selectType) {
347 case '0': 212 case '0':
348 this.queryParam.type = 'NAME' 213 this.queryParam.type = 'NAME'
...@@ -369,7 +234,7 @@ export default { ...@@ -369,7 +234,7 @@ export default {
369 }) 234 })
370 }, 235 },
371 // 重置搜索 236 // 重置搜索
372 resetSearch() { 237 resetSearch () {
373 this.selectType = '0' 238 this.selectType = '0'
374 this.queryName = '' 239 this.queryName = ''
375 this.queryParam = { 240 this.queryParam = {
...@@ -379,7 +244,7 @@ export default { ...@@ -379,7 +244,7 @@ export default {
379 this.getTableList() 244 this.getTableList()
380 }, 245 },
381 // 性别 246 // 性别
382 formatterSex({ cellValue }) { 247 formatterSex ({ cellValue }) {
383 if (this.sexList.length !== 0) { 248 if (this.sexList.length !== 0) {
384 if (cellValue !== null) { 249 if (cellValue !== null) {
385 const sex = this.sexList.find((item) => item.value === cellValue).name 250 const sex = this.sexList.find((item) => item.value === cellValue).name
...@@ -390,7 +255,7 @@ export default { ...@@ -390,7 +255,7 @@ export default {
390 } 255 }
391 }, 256 },
392 // 职务级别 257 // 职务级别
393 formatterjobLevel({ cellValue }) { 258 formatterjobLevel ({ cellValue }) {
394 if (this.levelList.length !== 0) { 259 if (this.levelList.length !== 0) {
395 if (cellValue) { 260 if (cellValue) {
396 const jobLevel = this.levelList.find( 261 const jobLevel = this.levelList.find(
...@@ -403,7 +268,7 @@ export default { ...@@ -403,7 +268,7 @@ export default {
403 } 268 }
404 }, 269 },
405 // 删除 270 // 删除
406 handleDelete(id, content) { 271 handleDelete (id, content) {
407 this.$confirm(deleteDomStr(content), '执行确认', { 272 this.$confirm(deleteDomStr(content), '执行确认', {
408 dangerouslyUseHTMLString: true, 273 dangerouslyUseHTMLString: true,
409 customClass: 'customer-delete', 274 customClass: 'customer-delete',
...@@ -421,10 +286,10 @@ export default { ...@@ -421,10 +286,10 @@ export default {
421 this.getTableList() 286 this.getTableList()
422 }) 287 })
423 }) 288 })
424 .catch(() => {}) 289 .catch(() => { })
425 }, 290 },
426 // 修改状态 291 // 修改状态
427 changeStatus(row) { 292 changeStatus (row) {
428 this.$confirm('确定要修改状态吗?', '提示', { 293 this.$confirm('确定要修改状态吗?', '提示', {
429 customClass: 'customer-update', 294 customClass: 'customer-update',
430 confirmButtonText: '确定', 295 confirmButtonText: '确定',
...@@ -448,7 +313,7 @@ export default { ...@@ -448,7 +313,7 @@ export default {
448 }) 313 })
449 }, 314 },
450 // 更新用户解锁状态 315 // 更新用户解锁状态
451 updateLock(id, name) { 316 updateLock (id, name) {
452 this.$confirm( 317 this.$confirm(
453 `<div class="customer-message-wrapper"> 318 `<div class="customer-message-wrapper">
454 <h5 class="title">确定要更新用户解锁状态吗</h5> 319 <h5 class="title">确定要更新用户解锁状态吗</h5>
...@@ -475,10 +340,10 @@ export default { ...@@ -475,10 +340,10 @@ export default {
475 } 340 }
476 }) 341 })
477 }) 342 })
478 .catch(() => {}) 343 .catch(() => { })
479 }, 344 },
480 // 重置用户密码 345 // 重置用户密码
481 resetPassword(data) { 346 resetPassword (data) {
482 const ids = [] 347 const ids = []
483 if (data instanceof Array) { 348 if (data instanceof Array) {
484 data.forEach((item) => { 349 data.forEach((item) => {
...@@ -521,20 +386,20 @@ export default { ...@@ -521,20 +386,20 @@ export default {
521 } 386 }
522 }) 387 })
523 }) 388 })
524 .catch(() => {}) 389 .catch(() => { })
525 }, 390 },
526 // 新增回显 391 // 新增回显
527 reloadTableData() { 392 reloadTableData () {
528 this.getTableList() 393 this.getTableList()
529 }, 394 },
530 showimport() { 395 showimport () {
531 this.$refs.leadingIn.import(this.tableUrl, '人员') 396 this.$refs.leadingIn.import(this.tableUrl, '人员')
532 } 397 }
533 } 398 }
534 } 399 }
535 </script> 400 </script>
536 401
537 <style scoped lang="less"> 402 <style scoped lang="scss">
538 .content { 403 .content {
539 .top-wrapper { 404 .top-wrapper {
540 .el-button + .el-button { 405 .el-button + .el-button {
......