- {{
- $t("agentTemplateManagement.editTemplate")
- }}
- {{
- $t("agentTemplateManagement.deleteTemplate")
- }}
-
-
-
-
+
+
+ {{ $t("agentTemplateManagement.editTemplate") }}
+
+
+ {{ $t("agentTemplateManagement.deleteTemplate") }}
+
+
+
+
-
- {{
- isAllSelected
- ? $t("agentTemplateManagement.deselectAll")
- : $t("agentTemplateManagement.selectAll")
- }}
-
-
- {{ $t("agentTemplateManagement.createTemplate") }}
-
-
- {{ $t("agentTemplateManagement.batchDelete") }}
-
-
-
-
-
-
+
+ {{ $t("agentTemplateManagement.title") }}
+
+
+ {{ $t("agentTemplateManagement.search") }}
+
+
+ {{ isAllSelected ? $t("agentTemplateManagement.deselectAll") : $t("agentTemplateManagement.selectAll") }}
+
+
+ {{ $t("agentTemplateManagement.createTemplate") }}
+
+
+ {{ $t("agentTemplateManagement.batchDelete") }}
+
+
+
+
-
@@ -97,7 +69,7 @@
-
- {{ isAllSelected ? $t('otaManagement.deselectAll') : $t('otaManagement.selectAll') }}
-
- {{ $t('otaManagement.addNew') }}
- {{ $t('otaManagement.delete') }}
-
-
-
-
-
-
-
-
-
-
- {{ $t('otaManagement.totalRecords', { total }) }}
+
+
+ {{ $t('otaManagement.download') }}
+
+ {{ $t('otaManagement.edit') }}
+
+
+ {{ $t('otaManagement.delete') }}
+
+
+
+
+
+ {{ $t('otaManagement.firmwareManagement') }}
+
+
+ {{ $t('otaManagement.search') }}
+
+
+ {{ isAllSelected ? $t('otaManagement.deselectAll') : $t('otaManagement.selectAll') }}
+
+
+ {{ $t('otaManagement.addNew') }}
+
+
+ {{ $t('otaManagement.delete') }}
+
+
+
+
+
@@ -131,9 +96,11 @@ import Api from "@/apis/api";
import HeaderBar from "@/components/HeaderBar.vue";
import ProviderDialog from "@/components/ProviderDialog.vue";
import VersionFooter from "@/components/VersionFooter.vue";
+import CustomButton from "@/components/CustomButton.vue";
+import CustomTable from "@/components/CustomTable.vue";
export default {
- components: { HeaderBar, ProviderDialog, VersionFooter },
+ components: { HeaderBar, ProviderDialog, VersionFooter, CustomButton, CustomTable },
data() {
return {
searchName: "",
@@ -158,7 +125,7 @@ export default {
dialogVisible: false,
dialogTitle: "新增供应器",
isAllSelected: false,
- isDropdownOpen: false,
+ DropdownVisible: false,
sensitive_keys: ["api_key", "personal_access_token", "access_token", "token", "secret", "access_key_secret", "secret_key"],
providerForm: {
id: null,
@@ -168,10 +135,11 @@ export default {
fields: [],
sort: 0
},
- DropdownVisible: false,
+ tableColumns: []
};
},
created() {
+ this.initTableColumns();
this.fetchProviders();
},
computed: {
@@ -186,41 +154,43 @@ export default {
const selectedType = this.modelTypes.find(item => item.value === this.searchModelType);
return selectedType ? `（${this.$t(selectedType.labelKey)}）` : "";
},
- 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;
- },
filteredProvidersList() {
return this.providersList;
-
- // let list = this.providersList.filter(item => {
- // const nameMatch = item.name.toLowerCase().includes(this.searchName.toLowerCase());
- // const typeMatch = !this.searchModelType || item.model_type === this.searchModelType;
- // return nameMatch && typeMatch;
- // });
-
- // list.sort((a, b) => a.sort - b.sort);
-
- // // 分页处理
- // const start = (this.currentPage - 1) * this.pageSize;
- // return list.slice(start, start + this.pageSize);
}
},
methods: {
+ initTableColumns() {
+ this.tableColumns = [
+ {
+ prop: 'modelType',
+ label: this.$t('providerManagement.category'),
+ align: 'center',
+ width: 200
+ },
+ {
+ prop: 'providerCode',
+ label: this.$t('providerManagement.providerCode'),
+ align: 'center',
+ width: 150
+ },
+ {
+ prop: 'name',
+ label: this.$t('common.name'),
+ align: 'center'
+ },
+ {
+ prop: 'fields',
+ label: this.$t('providerManagement.fieldConfig'),
+ align: 'center'
+ },
+ {
+ prop: 'sort',
+ label: this.$t('common.sort'),
+ align: 'center',
+ width: 80
+ }
+ ];
+ },
fetchProviders() {
this.loading = true;
@@ -255,7 +225,6 @@ export default {
this.fetchProviders();
},
handleSelectModelType(value) {
- this.isDropdownOpen = false;
this.searchModelType = value;
this.handleSearch();
},
@@ -288,26 +257,23 @@ export default {
handleSubmit({ form, done }) {
this.loading = true;
if (form.id) {
- // 编辑
Api.model.updateModelProvider(form, ({ data }) => {
-
if (data.code === 0) {
- this.fetchProviders(); // 刷新表格
+ this.fetchProviders();
this.$message.success({
- message: this.$t('common.updateSuccess'),
- showClose: true
- });
+ message: this.$t('common.updateSuccess'),
+ showClose: true
+ });
}
});
} else {
- // 新增
Api.model.addModelProvider(form, ({ data }) => {
if (data.code === 0) {
- this.fetchProviders(); // 刷新表格
+ this.fetchProviders();
this.$message.success({
- message: this.$t('common.addSuccess'),
- showClose: true
- });
+ message: this.$t('common.addSuccess'),
+ showClose: true
+ });
this.total += 1;
}
});
@@ -339,10 +305,8 @@ export default {
const ids = providers.map(provider => provider.id);
Api.model.deleteModelProviderByIds(ids, ({ data }) => {
if (data.code === 0) {
-
this.isAllSelected = false;
- this.fetchProviders(); // 刷新表格
-
+ this.fetchProviders();
this.$message.success({
message: this.$t('common.deleteSuccess'),
showClose: true
@@ -390,57 +354,16 @@ export default {
this.currentPage = 1;
this.fetchProviders();
},
- headerCellClassName({ columnIndex }) {
- if (columnIndex === 0) {
- return "custom-selection-header";
- }
- return "";
- },
- selectionCellClassName() {
- return "custom-selection-cell";
- },
- updateSelectionHeaderText() {
- // 确保表格已渲染
- this.$nextTick(() => {
- if (this.$refs.providersTable && this.$refs.providersTable.$el) {
- const headerCheckbox = this.$refs.providersTable.$el.querySelector('.custom-selection-header .el-checkbox .el-checkbox__label');
- if (headerCheckbox) {
- headerCheckbox.textContent = this.$t('modelConfig.select');
- }
- }
- });
- },
- mounted() {
- this.updateSelectionHeaderText();
- },
- updated() {
- this.updateSelectionHeaderText();
- },
- goFirst() {
- this.currentPage = 1;
- this.fetchProviders();
- },
- goPrev() {
- if (this.currentPage > 1) {
- this.currentPage--;
- this.fetchProviders();
- }
- },
- goNext() {
- if (this.currentPage < this.pageCount) {
- console.log("this.currentPage", this.currentPage);
- this.currentPage++;
- this.fetchProviders();
- }
- },
goToPage(page) {
- this.currentPage = page;
- this.fetchProviders();
+ if (page !== this.currentPage) {
+ this.currentPage = page;
+ this.fetchProviders();
+ }
},
handleDropdownVisibleChange(visible) {
this.DropdownVisible = visible;
- },
- },
+ }
+ }
};
@@ -460,25 +383,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;
}
@@ -487,20 +409,14 @@ export default {
display: flex;
gap: 10px;
margin-left: auto;
+ align-items: center;
}
.search-input {
width: 240px;
}
-.btn-search {
- background: linear-gradient(135deg, #6b8cff, #a966ff);
- border: none;
- color: white;
-}
-
.content-panel {
- flex: 1;
display: flex;
overflow: hidden;
height: 100%;
@@ -519,20 +435,17 @@ export default {
flex-direction: column;
}
-.el-card {
- border: none;
-}
-
.provider-card {
background: white;
flex: 1;
display: flex;
flex-direction: column;
+ border: none;
box-shadow: none;
overflow: hidden;
::v-deep .el-card__body {
- padding: 15px;
+ padding: 14px 20px;
display: flex;
flex-direction: column;
flex: 1;
@@ -540,284 +453,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--danger {
- background: #fd5b63;
- color: white;
- }
-}
-
-.custom-pagination {
- display: flex;
- align-items: center;
- gap: 10px;
-
- .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 {
- 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-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;
- }
- }
- }
-}
-
-:deep(.el-table .el-button--text) {
- color: #7079aa;
-}
-
-:deep(.el-table .el-button--text:hover) {
- color: #5a64b5;
-}
-
-.el-button--success {
- background: #5bc98c;
- color: white;
-}
-
-:deep(.el-table .cell) {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.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(.el-table) {
- .el-table__body-wrapper {
- transition: height 0.3s ease;
- }
-}
-
-.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;
}
.field-item {
@@ -843,40 +480,6 @@ export default {
}
}
-.dropdown-trigger {
- font-size: 14px;
- color: #303133;
- cursor: pointer;
- display: flex;
- align-items: center;
-
- &:hover {
- color: #409EFF;
- }
-}
-
-.dropdown-trigger.active {
- color: #409EFF;
-}
-
-.dropdown-arrow {
- display: inline-block;
- margin-left: 5px;
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 7px solid black;
- position: relative;
- transition: transform 0.3s ease;
- transform: rotate(0deg);
-
- &.is-active {
- transform: rotate(180deg);
- border-top-color: #409EFF;
- }
-}
-
.rotate-down {
transform: rotate(180deg);
transition: transform 0.3s ease;
@@ -886,41 +489,11 @@ export default {
transition: transform 0.3s ease;
}
-.dropdown-trigger {
- font-size: 14px;
- color: #303133;
- cursor: pointer;
- display: flex;
- align-items: center;
-
- &:hover {
- color: #409EFF;
- }
+:deep(.el-table .el-button--text) {
+ color: #7079aa;
}
-.dropdown-trigger.active {
- color: #409EFF;
+:deep(.el-table .el-button--text:hover) {
+ color: #5a64b5;
}
-
-/* 确保选择列标题样式正确 */
-.custom-selection-header {
- position: relative;
-}
-
-:deep(.custom-selection-header .el-checkbox) {
- display: flex !important;
- align-items: center;
- justify-content: center;
-}
-
-:deep(.custom-selection-header .el-checkbox__label) {
- position: relative;
- white-space: nowrap;
-}
-
-:deep(.custom-selection-cell) {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
\ No newline at end of file
+
{{ $t('header.providerManagement') }}
+
+
+
+ {{ $t('providerManagement.categoryFilter') }}{{ selectedModelTypeLabel }}
+
{{ $t('common.all') }}
@@ -51,66 +22,60 @@
-
-
-
- {{ getModelTypeLabel(scope.row.modelType) }}
-
-
-
-
-
-
- {{ $t('providerManagement.viewFields') }}
-
-
-
-
-
- {{ $t('common.edit') }}
- {{ $t('common.delete') }}
-
-
-
-
-
+
+
+ {{ getModelTypeLabel(scope.row.modelType) }}
+
+
+
+
+ {{ $t('providerManagement.viewFields') }}
+
+
+
+ {{ $t('common.edit') }}
+ {{ $t('common.delete') }}
+
+
+
- {{ field.label }}:
- {{ field.type }}
- {{ $t('common.sensitive') }}
-
-
-
+
-
- {{ isAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
-
- {{ $t('common.add') }}
- {{ $t('common.delete') }}
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('common.totalRecords', { number: total }) }}
+ {{ $t('common.search') }}
+ {{ field.label }}:
+ {{ field.type }}
+ {{ $t('common.sensitive') }}
+
+
+
+ {{ isAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
+
+
+ {{ $t('common.add') }}
+
+
+ {{ $t('common.delete') }}
+
+
+
+