{{ confirmText }}
-
@@ -101,9 +80,10 @@ import Api from "@/apis/api";
import HeaderBar from "@/components/HeaderBar.vue";
import VersionFooter from "@/components/VersionFooter.vue";
import ViewPasswordDialog from "@/components/ViewPasswordDialog.vue";
-import i18n from '@/i18n';
+import CustomButton from "@/components/CustomButton.vue";
+import CustomTable from "@/components/CustomTable.vue";
export default {
- components: { HeaderBar, ViewPasswordDialog, VersionFooter },
+ components: { HeaderBar, ViewPasswordDialog, VersionFooter, CustomButton, CustomTable },
data() {
return {
showViewPassword: false,
@@ -116,32 +96,43 @@ export default {
total: 0,
isAllSelected: false,
loading: false,
+ tableColumns: []
};
},
created() {
+ this.initTableColumns();
this.fetchUsers();
},
- computed: {
- pageCount() {
- return Math.ceil(this.total / 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;
- }
- },
methods: {
+ initTableColumns() {
+ this.tableColumns = [
+ {
+ prop: 'userid',
+ label: this.$t('user.userid'),
+ align: 'center'
+ },
+ {
+ prop: 'mobile',
+ label: this.$t('user.mobile'),
+ align: 'center'
+ },
+ {
+ prop: 'deviceCount',
+ label: this.$t('user.deviceCount'),
+ align: 'center'
+ },
+ {
+ prop: 'createDate',
+ label: this.$t('user.createDate'),
+ align: 'center'
+ },
+ {
+ prop: 'status',
+ label: this.$t('user.status'),
+ align: 'center'
+ }
+ ];
+ },
handlePageSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
@@ -245,10 +236,18 @@ export default {
},
batchEnable() {
const selectedUsers = this.userList.filter(user => user.selected);
+ if (selectedUsers.length === 0) {
+ this.$message.warning(this.$t('user.selectUsersToEnable'));
+ return;
+ }
this.handleChangeStatus(selectedUsers, 1);
},
batchDisable() {
const selectedUsers = this.userList.filter(user => user.selected);
+ if (selectedUsers.length === 0) {
+ this.$message.warning(this.$t('user.selectUsersToDisable'));
+ return;
+ }
this.handleChangeStatus(selectedUsers, 0);
},
resetPassword(row) {
@@ -281,6 +280,12 @@ export default {
}).then(() => {
Api.admin.deleteUser(row.userid, ({ data }) => {
if (data.code === 0) {
+ // 删除后检查是否需要调整页码
+ const newTotal = this.total - 1;
+ const maxPage = Math.max(1, Math.ceil(newTotal / this.pageSize));
+ if (this.currentPage > maxPage) {
+ this.currentPage = maxPage;
+ }
this.$message.success(this.$t('user.deleteUserSuccess'));
this.fetchUsers();
} else {
@@ -291,25 +296,11 @@ export default {
this.$message.info(this.$t('common.deleteCancelled'));
});
},
- goFirst() {
- this.currentPage = 1;
- this.fetchUsers();
- },
- goPrev() {
- if (this.currentPage > 1) {
- this.currentPage--;
- this.fetchUsers();
- }
- },
- goNext() {
- if (this.currentPage < this.pageCount) {
- this.currentPage++;
- this.fetchUsers();
- }
- },
goToPage(page) {
- this.currentPage = page;
- this.fetchUsers();
+ if (page !== this.currentPage) {
+ this.currentPage = page;
+ this.fetchUsers();
+ }
},
handleChangeStatus(row, status) {
// 处理单个用户或用户数组
@@ -357,7 +348,7 @@ export default {
this.$message.warning(this.$t('user.selectUsersFirst'));
return;
}
-
+
// Call the existing handleChangeStatus method which already handles both single and multiple users
this.handleChangeStatus(selectedUsers, status);
},
@@ -381,25 +372,24 @@ export default {
}
.main-wrapper {
- // 顶部 63px 底部 35px 查询72px
- height: calc(100vh - 63px - 35px - 72px);
- margin: 0 22px;
- border-radius: 15px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+ // 顶部 63px 底部 35px
+ height: calc(100vh - 63px - 35px);
+ padding: 20px 22px 0;
position: relative;
- background: rgba(237, 242, 255, 0.5);
display: flex;
flex-direction: column;
+ box-sizing: border-box;
}
-.operation-bar {
+.operation-header {
display: flex;
- justify-content: space-between;
align-items: center;
- padding: 16px 24px;
+ justify-content: space-between;
+ padding: 0 0 16px 0;
}
.page-title {
+ font-weight: 500;
font-size: 24px;
margin: 0;
}
@@ -421,7 +411,6 @@ export default {
}
.content-panel {
- flex: 1;
display: flex;
overflow: hidden;
height: 100%;
@@ -434,7 +423,7 @@ export default {
flex: 1;
height: 100%;
min-width: 600px;
- overflow-x: auto;
+ overflow: auto;
background-color: white;
display: flex;
flex-direction: column;
@@ -450,7 +439,7 @@ export default {
overflow: hidden;
::v-deep .el-card__body {
- padding: 15px;
+ padding: 14px 20px;
display: flex;
flex-direction: column;
flex: 1;
@@ -458,166 +447,8 @@ export default {
}
}
-.table_bottom {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 10px;
-}
-
.ctrl_btn {
display: flex;
- gap: 8px;
- padding-left: 26px;
-
- .el-button {
- min-width: 72px;
- height: 32px;
- padding: 7px 12px 7px 10px;
- font-size: 12px;
- border-radius: 4px;
- line-height: 1;
- font-weight: 500;
- border: none;
- transition: all 0.3s ease;
- 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;
- }
-
- .el-button--success {
- background: #5bc98c;
- color: white;
- }
-
- .el-button--warning {
- background: #f6d075;
- color: black;
- }
-
- .el-button--danger {
- background: #fd5b63;
- color: white;
- }
-}
-
-.rotated-icon {
- display: inline-block;
- transform: rotate(45deg);
- margin-right: 4px;
- color: black;
-}
-
-.custom-pagination {
- display: flex;
- align-items: center;
- gap: 8px;
-
- .el-select {
- margin-right: 8px;
- }
-
- .pagination-btn:first-child,
- .pagination-btn:nth-child(2),
- .pagination-btn:nth-child(3),
- .pagination-btn:nth-last-child(2) {
- min-width: 60px;
- 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;
-
- &:hover {
- background: #d7dce6;
- }
-
- &:disabled {
- opacity: 0.6;
- cursor: not-allowed;
- }
- }
-
- .pagination-btn:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-last-child(2)) {
- min-width: 28px;
- height: 32px;
- padding: 0;
- border-radius: 4px;
- border: 1px solid transparent;
- background: transparent;
- color: #606266;
- font-size: 14px;
- cursor: pointer;
- transition: all 0.3s ease;
-
- &:hover {
- background: rgba(245, 247, 250, 0.3);
- }
- }
-
- .pagination-btn.active {
- background: #5f70f3 !important;
- color: #ffffff !important;
- border-color: #5f70f3 !important;
-
- &:hover {
- background: #6d7cf5 !important;
- }
- }
-
- .total-text {
- color: #909399;
- font-size: 14px;
- margin-left: 10px;
- }
-}
-
-:deep(.transparent-table) {
- background: white;
- flex: 1;
- width: 100%;
- display: flex;
- flex-direction: column;
-
- .el-table__body-wrapper {
- flex: 1;
- overflow-y: auto;
- max-height: none !important;
- }
-
- .el-table__header-wrapper {
- flex-shrink: 0;
- }
-
- .el-table__header th {
- background: white !important;
- color: black;
- }
-
- &::before {
- display: none;
- }
-
- .el-table__body tr {
- background-color: white;
-
- td {
- border-top: 1px solid rgba(0, 0, 0, 0.04);
- border-bottom: 1px solid rgba(0, 0, 0, 0.04);
- }
- }
}
:deep(.el-table .el-button--text) {
@@ -627,124 +458,4 @@ export default {
:deep(.el-table .el-button--text:hover) {
color: #5a64b5 !important;
}
-
-
-:deep(.el-checkbox__inner) {
- background-color: #ffffff !important;
- border-color: #cccccc !important;
-}
-
-:deep(.el-checkbox__inner:hover) {
- border-color: #cccccc !important;
-}
-
-:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
- background-color: #5f70f3 !important;
- border-color: #5f70f3 !important;
-}
-
-@media (min-width: 1144px) {
- .table_bottom {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 40px;
- }
-
- :deep(.transparent-table) {
- .el-table__body tr {
- td {
- padding-top: 16px;
- padding-bottom: 16px;
- }
-
- &+tr {
- margin-top: 10px;
- }
- }
- }
-}
-
-.page-size-select {
- width: 100px;
- margin-right: 10px;
-
- :deep(.el-input__inner) {
- height: 32px;
- line-height: 32px;
- border-radius: 4px;
- border: 1px solid #e4e7ed;
- background: #dee7ff;
- color: #606266;
- font-size: 14px;
- }
-
- &.page-size-select-en {
- width: 130px;
-
- :deep(.el-input__inner) {
- height: 36px;
- line-height: 36px;
- font-size: 15px;
- }
- }
-
- :deep(.el-input__suffix) {
- right: 6px;
- width: 15px;
- height: 20px;
- display: flex;
- justify-content: center;
- align-items: center;
- top: 6px;
- border-radius: 4px;
- }
-
- :deep(.el-input__suffix-inner) {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- }
-
- :deep(.el-icon-arrow-up:before) {
- content: "";
- display: inline-block;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-top: 9px solid #606266;
- position: relative;
- transform: rotate(0deg);
- transition: transform 0.3s;
- }
-}
-
-.el-table {
- // --table-max-height: calc(100vh - 40vh);
- max-height: var(--table-max-height);
-
- .el-table__body-wrapper {
- max-height: calc(var(--table-max-height) - 40px);
- }
-}
-
-:deep(.el-loading-mask) {
- background-color: rgba(255, 255, 255, 0.6) !important;
- backdrop-filter: blur(2px);
-}
-
-:deep(.el-loading-spinner .circular) {
- width: 28px;
- height: 28px;
-}
-
-:deep(.el-loading-spinner .path) {
- stroke: #6b8cff;
-}
-
-:deep(.el-loading-text) {
- color: #6b8cff !important;
- font-size: 14px;
- margin-top: 8px;
-}
-
- {{ isAllSelected ? $t('user.deselectAll') : $t('user.selectAll') }}
-
- {{
- $t('user.enable')
- }}
- {{
- $t('user.disable') }}
- {{ $t('user.delete')
- }}
-
-
-
-
-
-
-
-
-
-
- {{ $t('modelConfig.totalRecords', { total: total }) }}
+
+
+ {{ $t('user.normal') }}
+ {{ $t('user.disabled') }}
+
+
+ {{ $t('user.resetPassword')
+ }}
+ {{ $t('user.disableAccount') }}
+ {{ $t('user.enableAccount') }}
+ {{ $t('user.deleteUser')
+ }}
+
+
+
+
+ {{ $t('header.userManagement') }}
+
+ {{ $t('user.search') }}
+
+ {{ isAllSelected ? $t('user.deselectAll') : $t('user.selectAll') }}
+
+ {{
+ $t('user.enable')
+ }}
+
+ {{$t('user.disable') }}
+
+ {{ $t('user.delete')
+ }}
+
+
+