diff --git a/main/manager-web/src/components/FirmwareDialog.vue b/main/manager-web/src/components/FirmwareDialog.vue index 657d21c9..fab04124 100644 --- a/main/manager-web/src/components/FirmwareDialog.vue +++ b/main/manager-web/src/components/FirmwareDialog.vue @@ -1,18 +1,25 @@ - - + + - + - + - + + :placeholder="$t('firmwareDialog.remarkPlaceholder')" /> - - + - \ No newline at end of file + diff --git a/main/manager-web/src/views/OtaManagement.vue b/main/manager-web/src/views/OtaManagement.vue index b45bed1e..aaa325c1 100644 --- a/main/manager-web/src/views/OtaManagement.vue +++ b/main/manager-web/src/views/OtaManagement.vue @@ -1,95 +1,67 @@ - - - {{ $t('otaManagement.firmwareManagement') }} - - - {{ $t('otaManagement.search') }} - - - - - - - - - - - - - {{ getFirmwareTypeName(scope.row.type) }} - - - - - - {{ formatFileSize(scope.row.size) }} - - - - - - {{ formatDate(scope.row.createDate) }} - - - - - {{ formatDate(scope.row.updateDate) }} - - - - - {{ $t('otaManagement.download') }} - {{ $t('otaManagement.edit') }} - {{ $t('otaManagement.delete') }} - - - - - - - - {{ isAllSelected ? $t('otaManagement.deselectAll') : $t('otaManagement.selectAll') }} - - {{ $t('otaManagement.addNew') }} - {{ $t('otaManagement.delete') }} - - - - - - - - {{ $t('otaManagement.firstPage') }} - - - {{ $t('otaManagement.prevPage') }} - - - {{ page }} - - - {{ $t('otaManagement.nextPage') }} - - {{ $t('otaManagement.totalRecords', { total }) }} + + {{ $t('otaManagement.firmwareManagement') }} + + + + {{ $t('otaManagement.search') }} + + + + + + + {{ getFirmwareTypeName(scope.row.type) }} + + + {{ formatFileSize(scope.row.size) }} + + + {{ formatDate(scope.row.createDate) }} + + + {{ formatDate(scope.row.updateDate) }} + + + {{ $t('otaManagement.download') }} + + {{ $t('otaManagement.edit') }} + + + {{ $t('otaManagement.delete') }} + + + + + + {{ isAllSelected ? $t('otaManagement.deselectAll') : $t('otaManagement.selectAll') }} + + + {{ $t('otaManagement.addNew') }} + + + {{ $t('otaManagement.delete') }} + + + + @@ -97,7 +69,7 @@ + :firmware-types="firmwareTypes" @submit="handleSubmit" @cancel="dialogVisible = false" /> @@ -109,11 +81,12 @@ import Api from "@/apis/api"; import FirmwareDialog from "@/components/FirmwareDialog.vue"; import HeaderBar from "@/components/HeaderBar.vue"; import VersionFooter from "@/components/VersionFooter.vue"; +import CustomButton from "@/components/CustomButton.vue"; +import CustomTable from "@/components/CustomTable.vue"; import { formatDate, formatFileSize } from "@/utils/format"; -import i18n from '@/i18n'; export default { - components: { HeaderBar, FirmwareDialog, VersionFooter }, + components: { HeaderBar, FirmwareDialog, VersionFooter, CustomButton, CustomTable }, data() { return { searchName: "", @@ -137,34 +110,26 @@ export default { firmwarePath: "" }, firmwareTypes: [], + tableColumns: [] }; }, created() { + this.initTableColumns(); this.fetchFirmwareList(); this.getFirmwareTypes(); }, - - 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: 'firmwareName', label: this.$t('otaManagement.firmwareName'), align: 'center' }, + { prop: 'type', label: this.$t('otaManagement.firmwareType'), align: 'center' }, + { prop: 'version', label: this.$t('otaManagement.version'), align: 'center' }, + { prop: 'size', label: this.$t('otaManagement.fileSize'), align: 'center' }, + { prop: 'remark', label: this.$t('otaManagement.remark'), align: 'center' }, + { prop: 'createDate', label: this.$t('otaManagement.createTime'), align: 'center' }, + { prop: 'updateDate', label: this.$t('otaManagement.updateTime'), align: 'center' } + ]; + }, handlePageSizeChange(val) { this.pageSize = val; this.currentPage = 1; @@ -194,7 +159,7 @@ export default { this.paramsList = []; this.total = 0; this.$message.error({ - message: res?.data?.msg || this.$t('otaManagement.getFirmwareListFailed'), + message: res?.data?.msg || this.$t('otaManagement.fetchFirmwareListFailed'), showClose: true }); } @@ -212,7 +177,6 @@ export default { }, showAddDialog() { this.dialogTitle = this.$t('otaManagement.addFirmware'); - // 完全重置表单数据 this.firmwareForm = { id: null, firmwareName: "", @@ -222,12 +186,6 @@ export default { remark: "", firmwarePath: "" }; - this.$nextTick(() => { - // 重置表单的校验状态 - if (this.$refs.firmwareDialog && this.$refs.firmwareDialog.$refs.form) { - this.$refs.firmwareDialog.$refs.form.clearValidate(); - } - }); this.dialogVisible = true; }, editParam(row) { @@ -237,7 +195,6 @@ export default { }, handleSubmit(form) { if (form.id) { - // 编辑 Api.ota.updateOta(form.id, form, (res) => { res = res.data; if (res.code === 0) { @@ -255,7 +212,6 @@ export default { } }); } else { - // 新增 Api.ota.saveOta(form, (res) => { res = res.data; if (res.code === 0) { @@ -274,7 +230,6 @@ export default { }); } }, - deleteSelectedParams() { const selectedRows = this.firmwareList.filter(row => row.selected); if (selectedRows.length === 0) { @@ -287,7 +242,6 @@ export default { this.deleteParam(selectedRows); }, deleteParam(row) { - // 处理单个参数或参数数组 const params = Array.isArray(row) ? row : [row]; if (Array.isArray(row) && row.length === 0) { @@ -345,38 +299,17 @@ export default { } }); }, - headerCellClassName({ columnIndex }) { - if (columnIndex === 0) { - return "custom-selection-header"; - } - return ""; - }, - goFirst() { - this.currentPage = 1; - this.fetchFirmwareList(); - }, - goPrev() { - if (this.currentPage > 1) { - this.currentPage--; - this.fetchFirmwareList(); - } - }, - goNext() { - if (this.currentPage < this.pageCount) { - this.currentPage++; - this.fetchFirmwareList(); - } - }, goToPage(page) { - this.currentPage = page; - this.fetchFirmwareList(); + if (page !== this.currentPage) { + this.currentPage = page; + this.fetchFirmwareList(); + } }, downloadFirmware(firmware) { if (!firmware || !firmware.id) { this.$message.error(this.$t('otaManagement.incompleteFirmwareInfo')); return; } - // 先获取下载链接 Api.ota.getDownloadUrl(firmware.id, (res) => { if (res.data.code === 0) { const uuid = res.data.data; @@ -422,25 +355,23 @@ 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); + 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; } @@ -455,14 +386,7 @@ export default { width: 240px; } -.btn-search { - background: linear-gradient(135deg, #6b8cff, #a966ff); - border: none; - color: white; -} - .content-panel { - flex: 1; display: flex; overflow: hidden; height: 100%; @@ -491,7 +415,7 @@ export default { overflow: hidden; ::v-deep .el-card__body { - padding: 15px; + padding: 14px 20px; display: flex; flex-direction: column; flex: 1; @@ -499,267 +423,15 @@ 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--danger { - background: #fd5b63; - color: white; - } -} - -.custom-pagination { - display: flex; - align-items: center; - gap: 5px; - - .el-select { - margin-right: 8px; - } - - .pagination-btn:first-child, - .pagination-btn:nth-child(2), - .pagination-btn:nth-last-child(2), - .pagination-btn:nth-child(3) { - 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(3)):not(:nth-child(2)):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 { - margin-left: 10px; - color: #606266; - font-size: 14px; -} - -.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; - } - - :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; - } -} - -: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; - font-weight: 600; - height: 40px; - padding: 8px 0; - font-size: 14px; - border-bottom: 1px solid #e4e7ed; - } - - .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); - padding: 8px 0; - height: 40px; - color: #606266; - font-size: 14px; - } - } - - .el-table__row:hover>td { - background-color: #f5f7fa !important; - } - - &::before { - display: none; - } } :deep(.el-table .el-button--text) { - color: #7079aa !important; + color: #7079aa; } :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; -} - -:deep(.el-loading-mask) { - background-color: rgba(255, 255, 255, 0.6) !important; - backdrop-filter: blur(2px); -} - -:deep(.el-loading-spinner .path) { - stroke: #6b8cff; -} - -.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); - } -} - -@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; - } - } - } + color: #5a64b5; }