From 9a3d84b683030eb05537078661025e2fb3288b40 Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期一, 14 十月 2024 08:37:12 +0800
Subject: [PATCH] 内容提交
---
src/views/device/key/index.vue | 180 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 178 insertions(+), 2 deletions(-)
diff --git a/src/views/device/key/index.vue b/src/views/device/key/index.vue
index 26fcbb6..ecb40bc 100644
--- a/src/views/device/key/index.vue
+++ b/src/views/device/key/index.vue
@@ -1,15 +1,191 @@
<script lang="ts">
import { defineComponent } from 'vue';
+import HdwCard from '@/components/HdwCard/index.vue';
export default defineComponent({
- name: 'KeyManage'
+ name: 'KeyManage',
+ components: { HdwCard },
+ data() {
+ return {
+ tableData: [
+ {
+ type: '钃濈墮',
+ keyName: '娴嬭瘯1',
+ keyNumber: '--369078',
+ userName: '婧愮晠绉戞妧',
+ bluetoothAddr: '',
+ createTime: '2024-08-14 17:01:56'
+ }
+ ],
+ filter: {
+ keyName: '',
+ userName: ''
+ },
+ 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>閽ュ寵绠＄悊</div>
+ <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.keyName" size="small"></el-input>
+ </div>
+ </div>
+ <div class="tools-filter-item">
+ <div class="filter-label">鍛樺伐鍚嶇О锛�</div>
+ <div class="filter-content">
+ <el-input v-model="filter.userName" size="small"></el-input>
+ </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="type" align="center" label="閽ュ寵绫诲瀷" width="120" />
+ <el-table-column prop="keyName" align="center" label="閽ュ寵鍚嶇О" width="180" />
+ <el-table-column prop="keyNumber" align="center" label="閽ュ寵缂栧彿" width="180" />
+ <el-table-column prop="userName" align="center" label="鍛樺伐鍚嶇О" width="180" />
+ <el-table-column prop="bluetoothAddr" label="钃濈墮鍦板潃" />
+ <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="180" />
+ <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>
--
Gitblit v1.9.1