mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 07:03:53 +08:00
Merge pull request #748 from xinnan-tech/web--vue-device-modify
Web vue device modify
This commit is contained in:
hrz
@@ -4,10 +4,8 @@
|
||||
<el-main style="padding: 20px; display: flex; flex-direction: column;">
|
||||
<div class="table-container">
|
||||
<h3 class="device-list-title">设备列表</h3>
|
||||
<el-button type="primary" class="add-device-btn" @click="handleAddDevice">
|
||||
+ 添加设备
|
||||
</el-button>
|
||||
<el-table :data="paginatedDeviceList" style="width: 100%; margin-top: 20px" border stripe>
|
||||
<el-table ref="deviceTable" :data="paginatedDeviceList" @selection-change="handleSelectionChange" style="width: 100%; margin-top: 20px" border stripe>
|
||||
<el-table-column type="selection" align="center" width="60"></el-table-column>
|
||||
<el-table-column label="设备型号" prop="model" flex></el-table-column>
|
||||
<el-table-column label="固件版本" prop="firmwareVersion" width="120"></el-table-column>
|
||||
<el-table-column label="Mac地址" prop="macAddress"></el-table-column>
|
||||
@@ -39,9 +37,31 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="deviceList.length"></el-pagination>
|
||||
<div class="table_bottom">
|
||||
<div class="ctrl_btn">
|
||||
<el-button size="mini" type="primary" class="select-all-btn" @click="toggleAllSelection">
|
||||
{{ isAllSelected ? '取消全选' : '全选' }}
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" class="add-device-btn" @click="handleAddDevice">
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="custom-pagination">
|
||||
<button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
|
||||
<button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
|
||||
<button
|
||||
v-for="page in visiblePages"
|
||||
:key="page"
|
||||
class="pagination-btn"
|
||||
:class="{ active: page === currentPage }"
|
||||
@click="goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
|
||||
<span class="total-text">共{{ deviceList.length }}条记录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
©2025 xiaozhi-esp32-server
|
||||
@@ -62,6 +82,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
addDeviceDialogVisible: false,
|
||||
selectedDevices: [],
|
||||
isAllSelected: false,
|
||||
currentAgentId: this.$route.query.agentId || '',
|
||||
currentPage: 1,
|
||||
pageSize: 5,
|
||||
@@ -75,7 +97,25 @@ export default {
|
||||
const start = (this.currentPage - 1) * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.deviceList.slice(start, end);
|
||||
}
|
||||
},
|
||||
pageCount() {
|
||||
return Math.ceil(this.deviceList.length / this.pageSize);
|
||||
},
|
||||
visiblePages() {
|
||||
const pages = [];
|
||||
const maxVisible = 3;
|
||||
let start = Math.max(1, this.currentPage - 1);
|
||||
let end = Math.min(this.pageCount, start + maxVisible - 1);
|
||||
|
||||
if (end - start + 1 < maxVisible) {
|
||||
start = Math.max(1, end - maxVisible + 1);
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
return pages;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const agentId = this.$route.query.agentId;
|
||||
@@ -84,6 +124,16 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleSelectionChange(val) {
|
||||
this.selectedDevices = val;
|
||||
this.isAllSelected = val.length === this.paginatedDeviceList.length;
|
||||
},
|
||||
toggleAllSelection() {
|
||||
this.$refs.deviceTable.toggleAllSelection();
|
||||
},
|
||||
|
||||
|
||||
handleAddDevice() {
|
||||
this.addDeviceDialogVisible = true;
|
||||
},
|
||||
@@ -115,12 +165,19 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
goFirst() {
|
||||
this.currentPage = 1;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
goPrev() {
|
||||
if (this.currentPage > 1) this.currentPage--;
|
||||
},
|
||||
goNext() {
|
||||
if (this.currentPage < this.pageCount) this.currentPage++;
|
||||
},
|
||||
goToPage(page) {
|
||||
this.currentPage = page;
|
||||
},
|
||||
|
||||
fetchBindDevices(agentId) {
|
||||
this.loading = true;
|
||||
Api.device.getAgentBindDevices(agentId, ({ data }) => {
|
||||
@@ -180,21 +237,18 @@ export default {
|
||||
}
|
||||
|
||||
.add-device-btn {
|
||||
float: right;
|
||||
background: #409eff;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
width: 105px;
|
||||
background: linear-gradient(135deg, #6b8cff, #a966ff) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 4px !important;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
background: #3a8ee6;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -213,8 +267,85 @@ export default {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
.custom-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
min-width: 28px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e4e7ed;
|
||||
background: #dee7ff;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination-btn:first-child,
|
||||
.pagination-btn:nth-child(2),
|
||||
.pagination-btn:nth-last-child(2) {
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.pagination-btn:hover {
|
||||
background: #d7dce6;
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination-btn.active {
|
||||
background: #5f70f3 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #5f70f3 !important;
|
||||
}
|
||||
|
||||
.total-text {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.table_bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.ctrl_btn {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-left: 26px;
|
||||
|
||||
.el-button {
|
||||
min-width: 72px;
|
||||
height: 32px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background: #5f70f3;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user