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
| <template>
| <!-- 安全管理 ==> 智能安全帽 => 安全帽设备 -->
| <div class="main">
| <!-- main_left -->
| <div class="main_left">
| <div class="main_left_search">
| <div class="search_item">
| <span>姓名:</span>
| <el-input size="mini" v-model="queryInfo.userName" placeholder="请输入姓名" clearable></el-input>
| </div>
| <div class="search_item">
| <span>设备编号:</span>
| <el-input size="mini" v-model="queryInfo.deviceNum" placeholder="请输入设备编号" clearable></el-input>
| <el-button icon="el-icon-search" v-permission="'search'" @click="queryTable">查询</el-button>
| </div>
| </div>
| <div class="main_left_table">
| <cpnTable :table-loading="loading" :table-data="dataList" :table-columns="tableColumns"
| :row-click="rowClick">
| </cpnTable>
| </div>
| </div>
| </div>
| </template>
|
| <script>
| import cpnTable from '@/components/element/Table'
| export default {
| data() {
| return {
| loading: false,
| queryInfo: {
| pageNum: 1,
| pageSize: 9999,
| userName: '',
| deviceNum: '',
| },
| dataList: [],
| tableColumns: [],
| userId: '', // 用户id
| }
| },
| components: {
| cpnTable
| },
| created() {
| this.setTableColumn()
| this.getLists()
| },
| methods: {
| setTableColumn() {
| this.tableColumns = [
| {selection: true},
| {name: "用户ID", key: "userId"},
| {name: "姓名", key: "userName"},
| {name: "设备编号", key: "deviceNum"},
| ]
| },
| getLists() {
| this.loading = true
| this.$api.Safety.SmartHelmet.getLists(this.queryInfo).then(res => {
| if (res.statusMsg === 'ok') {
| this.dataList = res.data.list
| }
| }).finally(() => this.loading = false)
| },
| rowClick(row) {
| this.userId = row.userId
| },
| queryTable() {
| this.getLists()
| },
| }
| }
| </script>
|
| <style lang="scss" scoped>
| @import '@/style/layout-main.scss';
|
| .main {
| display: flex;
| flex-direction: row;
| color: #EBEBEB;
|
| .main_left {
| display: flex;
| flex-direction: column;
| width: 380px;
| padding: 14px;
| margin-right: 18px;
| border: 1px solid #39B5FE;
| border-radius: 10px;
| box-shadow: rgba(0, 145, 255, 0.7) 0 0 18px inset;
| box-sizing: content-box;
|
| .search_item {
| span {
| display: inline-block;
| min-width: 54px;
| margin-right: 6px;
| text-align: right;
| }
|
| .el-input {
| width: 220px;
| margin: 0 28px 16px 0;
| }
| }
|
| ::v-deep.main_left_table {
| overflow: hidden;
|
| .el-table__row {
| cursor: pointer
| }
|
| .el-table {
| display: flex;
| flex-direction: column;
|
| .el-table__body-wrapper {
| overflow-y: auto;
| flex: 1;
| }
| }
| }
| }
| }
| </style>
|
|
