Merge pull request #510 from xinnan-tech/web-flashily

Web flashily
This commit is contained in:
欣南科技
2025-03-25 11:32:57 +08:00
committed by GitHub
+93 -35
View File
@@ -1,46 +1,68 @@
<template>
<div class="welcome">
<HeaderBar />
<el-main style="padding: 20px; display: flex; flex-direction: column;">
<el-card class="user-card" shadow="always" >
<div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
<el-button @click="handleSearch">查询</el-button>
<el-button type="danger" @click="batchDelete">批量删除</el-button>
<el-button type="danger" @click="batchDisable">批量禁用</el-button>
<el-main class="main" style="padding: 20px; display: flex; flex-direction: column;">
<div class="top-area">
<div class="page-title">用户管理</div>
<div class="page-search">
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
<el-button class="btn-search" @click="handleSearch">搜索</el-button>
<!-- <el-button type="danger" @click="batchDelete">批量删除</el-button>
<el-button type="danger" @click="batchDisable">批量禁用</el-button> -->
</div>
</div>
<el-table :data="userList" style="width: 100%;" border stripe>
<el-table-column label="用户Id" prop="userId"></el-table-column>
<el-table-column label="手机号码" prop="phone"></el-table-column>
<el-table-column label="Status" prop="status"></el-table-column>
<el-table-column label="设备数量" prop="deviceCount"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
<el-button size="mini"
<el-card class="user-card" shadow="never">
<!-- <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
<el-button @click="handleSearch">查询</el-button>
<el-button type="danger" @click="batchDelete">批量删除</el-button>
<el-button type="danger" @click="batchDisable">批量禁用</el-button>
</div> -->
<el-table :data="userList" style="width: 100%;">
<el-table-column label="选择"
type="selection"
width="55">
</el-table-column>
<el-table-column label="用户Id" prop="userId"></el-table-column>
<el-table-column label="手机号码" prop="phone"></el-table-column>
<el-table-column label="设备数量" prop="deviceCount"></el-table-column>
<el-table-column label="状态" prop="status"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="resetPassword(scope.row)">重置密码</el-button>
<el-button size="mini" type="text"
v-if="scope.row.status === '正常'"
@click="disableUser(scope.row)">禁用</el-button>
<el-button size="mini"
<el-button size="mini" type="text"
v-if="scope.row.status === '禁用'"
@click="restoreUser(scope.row)">恢复</el-button>
<el-button size="mini" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
</template>
</el-table-column>
</el-table>
<el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
</template>
</el-table-column>
</el-table>
<div class="table_bottom">
<div class="ctrl_btn">
<el-button size="mini" type="primary">全选</el-button>
<el-button size="mini" type="success" icon="el-icon-circle-check">启用</el-button>
<el-button size="mini" type="warning" icon="el-icon-circle-close">禁用</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15]"
:page-size="pageSize"
layout="prev, pager, next"
:total="total"
/>
</div>
</div>
</el-card>
<div class="pagination-container">
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15]"
:page-size="pageSize"
layout="prev, pager, next"
:total="total"
/>
</div>
<div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
©2025 xiaozhi-esp32-server
</div>
@@ -100,7 +122,32 @@ export default {
};
</script>
<style scoped>
<style lang="scss" scoped>
.main {
padding: 20px; display: flex; flex-direction: column;
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
}
.top-area {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.page-title {
font-size: 20px;
font-weight: 600;
color: #303133;
}
.page-search {
display: flex;
align-items: center;
.btn-search {
margin-left: 10px;
background: linear-gradient(to right, #5778ff, #c793f3);
width: 100px;
color: #fff;
}
}
}
.welcome {
min-width: 900px;
min-height: 506px;
@@ -133,11 +180,22 @@ export default {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
opacity: 0.9;
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.table_bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
.ctrl_btn {
display: flex;
align-items: center;
}
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}