| | |
|---|
| | | <template> |
|---|
| | | <div>安全帽设备</div> |
|---|
| | | <!-- 安全管理 ==> 智能安全帽 => 安全帽设备 -->
|
|---|
| | | <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> |
|---|
