<script lang="ts">
|
import { defineComponent } from 'vue';
|
import HdwCard from '@/components/HdwCard/index.vue';
|
|
export default defineComponent({
|
name: 'AuthManage',
|
components: { HdwCard },
|
data() {
|
return {
|
tableData: [
|
{
|
userName: 'whyc',
|
authKey: '四楼蓝牙锁1',
|
authLock: '机柜蓝牙锁',
|
authTimeStart: '2024-10-11 14:25:51',
|
authTimeEnd: '2024-10-12 14:25:51',
|
jobDes: '测试',
|
state: '通过'
|
}
|
],
|
filter: {
|
name: '',
|
state: 0,
|
type: 0
|
},
|
page: {
|
currentPage: 1,
|
pageSize: 20,
|
total: 0
|
}
|
};
|
},
|
methods: {
|
|
}
|
});
|
</script>
|
|
<script lang="ts" setup>
|
import {
|
Search,
|
Plus
|
} from '@element-plus/icons-vue';
|
import HdwTree from '@/components/HdwTree/index.vue';
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
<div class="hdw-card-container">
|
<hdw-card title="区域列表" is-full>
|
<hdw-tree></hdw-tree>
|
</hdw-card>
|
</div>
|
</div>
|
<div class="page-content">
|
<hdw-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools">
|
<el-button type="primary" size="small" :icon="Plus">添加授权</el-button>
|
|
|
<div class="tools-filter">
|
<div class="tools-filter-item">
|
<div class="filter-label">授权人员：</div>
|
<div class="filter-content">
|
<el-input v-model="filter.name" size="small"></el-input>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">授权状态：</div>
|
<div class="filter-content">
|
<el-select
|
v-model="filter.state"
|
placeholder="请选择"
|
size="small"
|
style="width: 180px"
|
>
|
<el-option label="--请选择--" :value="0"/>
|
<el-option label="未安装" :value="1"/>
|
<el-option label="已安装" :value="2"/>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<el-button type="primary" size="small" :icon="Search">查询</el-button>
|
</div>
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table :data="tableData" border style="width: 100%; height: 100%">
|
<el-table-column type="index" width="50" />
|
<el-table-column prop="userName" align="center" label="授权人员" width="120" />
|
<el-table-column prop="authKey" align="center" label="授权钥匙" width="120" />
|
<el-table-column prop="authLock" align="center" label="授权锁具" width="120" />
|
<el-table-column prop="authTimeStart" align="center" label="授权时限开始" width="180" />
|
<el-table-column prop="authTimeEnd" align="center" label="授权时限结束" width="180" />
|
<el-table-column prop="jobDes" align="center" min-width="180" label="任务说明" />
|
<el-table-column prop="state" align="center" label="状态" width="80" />
|
<el-table-column align="center" fixed="right" label="操作" width="180">
|
<template #default>
|
<el-button type="primary" size="small">编辑</el-button>
|
<el-button type="danger" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<div class="el-page-container">
|
<el-pagination
|
v-model:current-page="page.currentPage"
|
v-model:page-size="page.pageSize"
|
:page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
|
size="small"
|
:disabled="disabled"
|
:background="background"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="page.total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</hdw-card>
|
</div>
|
<div class="page-footer"></div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
.page-content-table {
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
.filter-label {
|
display: inline-block;
|
}
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
