mirror of
				https://github.com/1Panel-dev/1Panel.git
				synced 2025-10-31 11:15:58 +08:00 
			
		
		
		
	feat: 修改应用商店 已安装列表
This commit is contained in:
		
							parent
							
								
									2ed62864b8
								
							
						
					
					
						commit
						45cda28d01
					
				
					 5 changed files with 362 additions and 189 deletions
				
			
		
							
								
								
									
										10
									
								
								frontend/components.d.ts
									
										
									
									
										vendored
									
									
								
							
							
						
						
									
										10
									
								
								frontend/components.d.ts
									
										
									
									
										vendored
									
									
								
							|  | @ -21,7 +21,7 @@ declare module 'vue' { | |||
|     ElAside: typeof import('element-plus/es')['ElAside'] | ||||
|     ElAvatar: typeof import('element-plus/es')['ElAvatar'] | ||||
|     ElButton: typeof import('element-plus/es')['ElButton'] | ||||
|     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']; | ||||
|     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'] | ||||
|     ElCard: typeof import('element-plus/es')['ElCard'] | ||||
|     ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] | ||||
|     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] | ||||
|  | @ -37,6 +37,9 @@ declare module 'vue' { | |||
|     ElDivider: typeof import('element-plus/es')['ElDivider'] | ||||
|     ElDraw: typeof import('element-plus/es')['ElDraw'] | ||||
|     ElDrawer: typeof import('element-plus/es')['ElDrawer'] | ||||
|     ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ||||
|     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | ||||
|     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] | ||||
|     ElFooter: typeof import('element-plus/es')['ElFooter'] | ||||
|     ElForm: typeof import('element-plus/es')['ElForm'] | ||||
|     ElFormItem: typeof import('element-plus/es')['ElFormItem'] | ||||
|  | @ -44,7 +47,7 @@ declare module 'vue' { | |||
|     ElIcon: typeof import('element-plus/es')['ElIcon'] | ||||
|     ElImage: typeof import('element-plus/es')['ElImage'] | ||||
|     ElInput: typeof import('element-plus/es')['ElInput'] | ||||
|     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']; | ||||
|     ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] | ||||
|     ElLink: typeof import('element-plus/es')['ElLink'] | ||||
|     ElMain: typeof import('element-plus/es')['ElMain'] | ||||
|     ElMenu: typeof import('element-plus/es')['ElMenu'] | ||||
|  | @ -66,10 +69,13 @@ declare module 'vue' { | |||
|     ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ||||
|     ElTabs: typeof import('element-plus/es')['ElTabs'] | ||||
|     ElTag: typeof import('element-plus/es')['ElTag'] | ||||
|     ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ||||
|     ElTree: typeof import('element-plus/es')['ElTree'] | ||||
|     ElUpload: typeof import('element-plus/es')['ElUpload'] | ||||
|     FileList: typeof import('./src/components/file-list/index.vue')['default'] | ||||
|     FileRole: typeof import('./src/components/file-role/index.vue')['default'] | ||||
|     Footer: typeof import('./src/components/app-layout/footer/index.vue')['default'] | ||||
|     InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] | ||||
|     Loading: typeof import('element-plus/es')['ElLoadingDirective'] | ||||
|     Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default'] | ||||
|     Menu: typeof import('./src/components/app-layout/menu/index.vue')['default'] | ||||
|  |  | |||
|  | @ -855,6 +855,7 @@ export default { | |||
|         toInstall: '去安装', | ||||
|         param: '参数配置', | ||||
|         syncAppList: '更新应用列表', | ||||
|         syncAppListSuccess: '更新成功', | ||||
|     }, | ||||
|     website: { | ||||
|         website: '网站', | ||||
|  |  | |||
|  | @ -1,37 +1,32 @@ | |||
| <template> | ||||
|     <LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('website.website')"> | ||||
|     <LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')"> | ||||
|         <template #toolbar> | ||||
|             <el-row :gutter="5"> | ||||
|                 <el-col :span="20"> | ||||
|                     <div> | ||||
|                         <el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'"> | ||||
|                             {{ $t('app.all') }} | ||||
|                     <el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'"> | ||||
|                         {{ $t('app.all') }} | ||||
|                     </el-button> | ||||
|                     <div v-for="item in tags" :key="item.key" style="display: inline"> | ||||
|                         <el-button | ||||
|                             class="tag-button" | ||||
|                             @click="changeTag(item.key)" | ||||
|                             type="primary" | ||||
|                             :plain="activeTag !== item.key" | ||||
|                         > | ||||
|                             {{ item.name }} | ||||
|                         </el-button> | ||||
|                         <div v-for="item in tags" :key="item.key" style="display: inline"> | ||||
|                             <el-button | ||||
|                                 class="tag-button" | ||||
|                                 @click="changeTag(item.key)" | ||||
|                                 type="primary" | ||||
|                                 :plain="activeTag !== item.key" | ||||
|                             > | ||||
|                                 {{ item.name }} | ||||
|                             </el-button> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </el-col> | ||||
|                 <el-col :span="4"> | ||||
|                     <div style="float: right"> | ||||
|                         <el-input | ||||
|                             class="table-button" | ||||
|                             v-model="req.name" | ||||
|                             clearable | ||||
|                             @clear="searchByName('')" | ||||
|                             suffix-icon="Search" | ||||
|                             @keyup.enter="searchByName(req.name)" | ||||
|                             @blur="searchByName(req.name)" | ||||
|                             :placeholder="$t('commons.button.search')" | ||||
|                         ></el-input> | ||||
|                     </div> | ||||
|                     <el-input | ||||
|                         v-model="req.name" | ||||
|                         clearable | ||||
|                         @clear="searchByName('')" | ||||
|                         suffix-icon="Search" | ||||
|                         @keyup.enter="searchByName(req.name)" | ||||
|                         @blur="searchByName(req.name)" | ||||
|                         :placeholder="$t('commons.button.search')" | ||||
|                     ></el-input> | ||||
|                 </el-col> | ||||
|             </el-row> | ||||
|         </template> | ||||
|  | @ -42,25 +37,33 @@ | |||
|             <div class="divider"></div> | ||||
|             <el-row :gutter="5"> | ||||
|                 <el-col v-for="(app, index) in apps" :key="index" :span="8"> | ||||
|                     <div class="a-card"> | ||||
|                     <div class="app-card"> | ||||
|                         <el-row :gutter="24"> | ||||
|                             <el-col :span="5"> | ||||
|                                 <div class="icon"> | ||||
|                                 <div class="app-icon"> | ||||
|                                     <el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" /> | ||||
|                                 </div> | ||||
|                             </el-col> | ||||
|                             <el-col :span="19"> | ||||
|                                 <div class="a-detail"> | ||||
|                                     <div class="d-name"> | ||||
|                                         <span class="name">{{ app.name }}</span> | ||||
|                                         <el-button class="h-button" round @click="getAppDetail(app.id)">安装</el-button> | ||||
|                                 <div class="app-content"> | ||||
|                                     <div class="app-header"> | ||||
|                                         <span class="app-title">{{ app.name }}</span> | ||||
|                                         <el-button | ||||
|                                             class="app-button" | ||||
|                                             type="primary" | ||||
|                                             plain | ||||
|                                             round | ||||
|                                             @click="getAppDetail(app.id)" | ||||
|                                         > | ||||
|                                             安装 | ||||
|                                         </el-button> | ||||
|                                     </div> | ||||
|                                     <div class="d-description"> | ||||
|                                         <span class="description"> | ||||
|                                     <div class="app-desc"> | ||||
|                                         <span class="desc"> | ||||
|                                             {{ app.shortDesc }} | ||||
|                                         </span> | ||||
|                                     </div> | ||||
|                                     <div class="d-tag" style="margin-top: 5px"> | ||||
|                                     <div class="app-tag"> | ||||
|                                         <el-tag v-for="(tag, ind) in app.tags" :key="ind" :colr="getColor(ind)"> | ||||
|                                             {{ tag.name }} | ||||
|                                         </el-tag> | ||||
|  | @ -153,67 +156,60 @@ onMounted(() => { | |||
|     padding-bottom: 10px; | ||||
| } | ||||
| 
 | ||||
| .a-card { | ||||
| .app-card { | ||||
|     height: 120px; | ||||
|     margin-top: 10px; | ||||
|     cursor: pointer; | ||||
|     padding: 5px; | ||||
| 
 | ||||
|     .icon { | ||||
|     .app-icon { | ||||
|         margin-top: 10px; | ||||
|         margin-left: 10px; | ||||
|         width: 80px; | ||||
|         height: 80%; | ||||
|         padding: 5px; | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         text-align: center; | ||||
|         .image { | ||||
|             width: 80%; | ||||
|             height: 80%; | ||||
|             margin: 0 auto; | ||||
|         } | ||||
|     } | ||||
| 
 | ||||
|     .a-detail { | ||||
|     .app-content { | ||||
|         margin-top: 10px; | ||||
|         height: 100%; | ||||
|         width: 100%; | ||||
| 
 | ||||
|         .d-name { | ||||
|         .app-header { | ||||
|             height: 20%; | ||||
|             .name { | ||||
|             .app-title { | ||||
|                 font-weight: 500; | ||||
|                 font-size: 16px; | ||||
|                 color: #1f2329; | ||||
|             } | ||||
|             .h-button { | ||||
|             .app-button { | ||||
|                 float: right; | ||||
|                 margin-right: 20px; | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         .d-description { | ||||
|         .app-desc { | ||||
|             margin-top: 10px; | ||||
|             overflow: hidden; | ||||
|             display: -webkit-box; | ||||
|             -webkit-line-clamp: 2; | ||||
|             -webkit-box-orient: vertical; | ||||
|             .description { | ||||
| 
 | ||||
|             text-overflow: ellipsis; | ||||
| 
 | ||||
|             .desc { | ||||
|                 font-size: 14px; | ||||
|                 color: #646a73; | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         .app-tag { | ||||
|             margin-top: 5px; | ||||
|         } | ||||
|     } | ||||
| } | ||||
| 
 | ||||
| .a-card:hover { | ||||
| .app-card:hover { | ||||
|     background-color: rgba(0, 94, 235, 0.03); | ||||
| } | ||||
| 
 | ||||
| .table-button { | ||||
|     display: inline; | ||||
|     margin-right: 5px; | ||||
| } | ||||
| 
 | ||||
| .tag-button { | ||||
|     margin-left: 10px; | ||||
| } | ||||
|  | @ -221,6 +217,6 @@ onMounted(() => { | |||
| .divider { | ||||
|     margin-top: 5px; | ||||
|     border: 0; | ||||
|     border-top: 1px solid #ccc; | ||||
|     border-top: 1px solid #f2f2f2; | ||||
| } | ||||
| </style> | ||||
|  |  | |||
							
								
								
									
										75
									
								
								frontend/src/views/app-store/index.scss
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										75
									
								
								frontend/src/views/app-store/index.scss
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,75 @@ | |||
| .app-card { | ||||
|     height: 140px; | ||||
|     margin-top: 10px; | ||||
|     cursor: pointer; | ||||
|     padding: 5px; | ||||
| 
 | ||||
|     .icon { | ||||
|         margin-top: 10px; | ||||
|         margin-left: 20px; | ||||
|     } | ||||
| 
 | ||||
|     .a-detail { | ||||
|         margin-top: 10px; | ||||
|         height: 100%; | ||||
|         width: 100%; | ||||
| 
 | ||||
|         .d-name { | ||||
|             height: 20%; | ||||
|             .name { | ||||
|                 font-weight: 500; | ||||
|                 font-size: 18px; | ||||
|                 color: #1f2329; | ||||
|             } | ||||
|             .status { | ||||
|                 margin-left: 10px; | ||||
|             } | ||||
|             .h-button { | ||||
|                 float: right; | ||||
|                 margin-right: 10px; | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         .d-description { | ||||
|             margin-top: 10px; | ||||
|             overflow: hidden; | ||||
|             display: -webkit-box; | ||||
|             -webkit-line-clamp: 2; | ||||
|             -webkit-box-orient: vertical; | ||||
|             .el-tag { | ||||
|                 margin-right: 5px; | ||||
|             } | ||||
|             .description { | ||||
|                 margin-top: 10px; | ||||
|                 font-size: 14px; | ||||
|                 color: #646a73; | ||||
|             } | ||||
|         } | ||||
|         .d-button { | ||||
|             margin-top: 10px; | ||||
|         } | ||||
|     } | ||||
| } | ||||
| 
 | ||||
| .app-card:hover { | ||||
|     background-color: rgba(0, 94, 235, 0.03); | ||||
| } | ||||
| 
 | ||||
| .table-button { | ||||
|     display: inline; | ||||
|     margin-right: 5px; | ||||
| } | ||||
| 
 | ||||
| .tag-button { | ||||
|     margin-left: 10px; | ||||
| } | ||||
| 
 | ||||
| .divider { | ||||
|     margin-top: 5px; | ||||
|     border: 0; | ||||
|     border-top: 1px solid #f2f2f2; | ||||
| } | ||||
| 
 | ||||
| .el-avatar { | ||||
|     --el-avatar-bg-color: #eaeaea; | ||||
| } | ||||
|  | @ -1,111 +1,218 @@ | |||
| <template> | ||||
|     <el-card> | ||||
|         <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" v-loading="loading"> | ||||
|             <template #toolbar> | ||||
|                 <el-row> | ||||
|                     <el-col :span="18"> | ||||
|                         <el-button @click="sync" type="primary" :plain="true">{{ $t('app.sync') }}</el-button> | ||||
|                     </el-col> | ||||
|                     <el-col :span="6"> | ||||
|                         <div style="float: right"> | ||||
|                             <el-input class="table-button" v-model="searchName" clearable @clear="search()"></el-input> | ||||
|                             <el-button class="table-button" @click="search()" icon="Search"> | ||||
|                                 {{ $t('app.search') }} | ||||
|     <LayoutContent v-loading="loading" :title="$t('app.installed')"> | ||||
|         <template #toolbar> | ||||
|             <el-row :gutter="5"> | ||||
|                 <el-col :span="20"> | ||||
|                     <!-- <div> | ||||
|                         <el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'"> | ||||
|                             {{ $t('app.all') }} | ||||
|                         </el-button> | ||||
|                         <div v-for="item in tags" :key="item.key" style="display: inline"> | ||||
|                             <el-button | ||||
|                                 class="tag-button" | ||||
|                                 @click="changeTag(item.key)" | ||||
|                                 type="primary" | ||||
|                                 :plain="activeTag !== item.key" | ||||
|                             > | ||||
|                                 {{ item.name }} | ||||
|                             </el-button> | ||||
|                         </div> | ||||
|                     </el-col> | ||||
|                 </el-row> | ||||
|             </template> | ||||
|             <el-table-column :label="$t('app.name')" prop="name" min-width="150px" show-overflow-tooltip> | ||||
|                 <template #default="{ row }"> | ||||
|                     <el-link :underline="false" @click="openParam(row.id)" type="primary"> | ||||
|                         {{ row.name }} | ||||
|                     </el-link> | ||||
|                     <el-tag round effect="dark" v-if="row.canUpdate">{{ $t('app.canUpdate') }}</el-tag> | ||||
|                 </template> | ||||
|             </el-table-column> | ||||
|             <el-table-column :label="$t('app.app')" prop="app.name" show-overflow-tooltip></el-table-column> | ||||
|             <el-table-column :label="$t('app.version')" prop="version" show-overflow-tooltip></el-table-column> | ||||
|             <el-table-column :label="$t('website.port')" prop="httpPort"></el-table-column> | ||||
|             <el-table-column :label="$t('app.backup')"> | ||||
|                 <template #default="{ row }"> | ||||
|                     <el-link :underline="false" @click="openBackups(row.id, row.name)" type="primary"> | ||||
|                         {{ $t('app.backup') }} ({{ row.backups.length }}) | ||||
|                     </el-link> | ||||
|                 </template> | ||||
|             </el-table-column> | ||||
| 
 | ||||
|             <el-table-column :label="$t('app.status')"> | ||||
|                 <template #default="{ row }"> | ||||
|                     <el-popover | ||||
|                         v-if="row.status === 'Error'" | ||||
|                         placement="bottom" | ||||
|                         :width="400" | ||||
|                         trigger="hover" | ||||
|                         :content="row.message" | ||||
|                     > | ||||
|                         <template #reference><Status :key="row.status" :status="row.status"></Status></template> | ||||
|                     </el-popover> | ||||
|                     <div v-else> | ||||
|                         <el-icon v-if="row.status === 'Installing'" class="is-loading"> | ||||
|                             <Loading /> | ||||
|                         </el-icon> | ||||
|                         <Status :key="row.status" :status="row.status"></Status> | ||||
|                     </div> --> | ||||
|                 </el-col> | ||||
|                 <el-col :span="4"> | ||||
|                     <div style="float: right"> | ||||
|                         <el-input | ||||
|                             class="table-button" | ||||
|                             v-model="searchName" | ||||
|                             clearable | ||||
|                             @clear="search()" | ||||
|                             suffix-icon="Search" | ||||
|                             @keyup.enter="search()" | ||||
|                             @blur="search()" | ||||
|                             :placeholder="$t('commons.button.search')" | ||||
|                         ></el-input> | ||||
|                     </div> | ||||
|                 </template> | ||||
|             </el-table-column> | ||||
|             <el-table-column | ||||
|                 prop="createdAt" | ||||
|                 :label="$t('commons.table.date')" | ||||
|                 :formatter="dateFromat" | ||||
|                 show-overflow-tooltip | ||||
|             /> | ||||
|             <fu-table-operations | ||||
|                 width="300px" | ||||
|                 :ellipsis="10" | ||||
|                 :buttons="buttons" | ||||
|                 :label="$t('commons.table.operate')" | ||||
|                 fixed="right" | ||||
|                 fix | ||||
|             /> | ||||
|         </ComplexTable> | ||||
|         <el-dialog | ||||
|             v-model="open" | ||||
|             :title="$t('commons.msg.operate')" | ||||
|             :destroy-on-close="true" | ||||
|             :close-on-click-modal="false" | ||||
|             :before-close="handleClose" | ||||
|             width="30%" | ||||
|         > | ||||
|             <div style="text-align: center"> | ||||
|                 <p>{{ $t('app.versioneSelect') }}</p> | ||||
|                 <el-select v-model="operateReq.detailId"> | ||||
|                     <el-option | ||||
|                         v-for="(version, index) in versions" | ||||
|                         :key="index" | ||||
|                         :value="version.detailId" | ||||
|                         :label="version.version" | ||||
|                     ></el-option> | ||||
|                 </el-select> | ||||
|             </div> | ||||
|             <template #footer> | ||||
|                 <span class="dialog-footer"> | ||||
|                     <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button> | ||||
|                     <el-button | ||||
|                         type="primary" | ||||
|                         @click="operate" | ||||
|                         :disabled="operateReq.operate == 'update' && versions == null" | ||||
|                     > | ||||
|                         {{ $t('commons.button.confirm') }} | ||||
|                     </el-button> | ||||
|                 </span> | ||||
|             </template> | ||||
|         </el-dialog> | ||||
|         <Backups ref="backupRef" @close="search"></Backups> | ||||
|         <AppResources ref="checkRef"></AppResources> | ||||
|         <AppDelete ref="deleteRef" @close="search"></AppDelete> | ||||
|         <AppParams ref="appParamRef"></AppParams> | ||||
|     </el-card> | ||||
|                 </el-col> | ||||
|             </el-row> | ||||
|         </template> | ||||
|         <template #rightButton> | ||||
|             <el-button @click="sync" type="primary" link>{{ $t('app.sync') }}</el-button> | ||||
|         </template> | ||||
|         <template #main> | ||||
|             <div class="divider"></div> | ||||
|             <el-row :gutter="5"> | ||||
|                 <el-col v-for="(installed, index) in data" :key="index" :span="12"> | ||||
|                     <div class="app-card"> | ||||
|                         <el-row :gutter="24"> | ||||
|                             <el-col :span="4"> | ||||
|                                 <div class="icon"> | ||||
|                                     <el-avatar | ||||
|                                         shape="square" | ||||
|                                         :size="66" | ||||
|                                         :src="'data:image/png;base64,' + installed.app.icon" | ||||
|                                     /> | ||||
|                                 </div> | ||||
|                             </el-col> | ||||
|                             <el-col :span="20"> | ||||
|                                 <div class="a-detail"> | ||||
|                                     <div class="d-name"> | ||||
|                                         <span class="name">{{ installed.name }}</span> | ||||
|                                         <span class="status"> | ||||
|                                             <el-popover | ||||
|                                                 v-if="installed.status === 'Error'" | ||||
|                                                 placement="bottom" | ||||
|                                                 :width="400" | ||||
|                                                 trigger="hover" | ||||
|                                                 :content="installed.message" | ||||
|                                             > | ||||
|                                                 <template #reference> | ||||
|                                                     <Status :key="installed.status" :status="installed.status"></Status> | ||||
|                                                 </template> | ||||
|                                             </el-popover> | ||||
|                                             <span v-else> | ||||
|                                                 <el-icon v-if="installed.status === 'Installing'" class="is-loading"> | ||||
|                                                     <Loading /> | ||||
|                                                 </el-icon> | ||||
|                                                 <Status :key="installed.status" :status="installed.status"></Status> | ||||
|                                             </span> | ||||
|                                         </span> | ||||
| 
 | ||||
|                                         <el-button | ||||
|                                             class="h-button" | ||||
|                                             type="primary" | ||||
|                                             link | ||||
|                                             @click="openBackups(installed.id, installed.name)" | ||||
|                                         > | ||||
|                                             备份 | ||||
|                                         </el-button> | ||||
|                                     </div> | ||||
|                                     <div class="d-description"> | ||||
|                                         <el-tag>版本:{{ installed.version }}</el-tag> | ||||
|                                         <el-tag>HTTP端口:{{ installed.httpPort }}</el-tag> | ||||
|                                         <!-- <span class="description"> | ||||
|                                             {{ app.shortDesc }} | ||||
|                                         </span> --> | ||||
|                                         <div class="description"> | ||||
|                                             <span>已运行:12天</span> | ||||
|                                         </div> | ||||
|                                     </div> | ||||
|                                     <div class="divider"></div> | ||||
|                                     <div class="d-button"> | ||||
|                                         <el-button | ||||
|                                             v-for="(button, key) in buttons" | ||||
|                                             :key="key" | ||||
|                                             type="primary" | ||||
|                                             plain | ||||
|                                             round | ||||
|                                             size="small" | ||||
|                                             @click="button.click(installed)" | ||||
|                                             :disabled="button.disabled && button.disabled(installed)" | ||||
|                                         > | ||||
|                                             {{ button.label }} | ||||
|                                         </el-button> | ||||
|                                         <!-- <el-tag v-for="(tag, ind) in app.tags" :key="ind" :colr="getColor(ind)"> | ||||
|                                             {{ tag.name }} | ||||
|                                         </el-tag> --> | ||||
|                                     </div> | ||||
|                                 </div> | ||||
|                             </el-col> | ||||
|                         </el-row> | ||||
|                     </div> | ||||
|                 </el-col> | ||||
|             </el-row> | ||||
| 
 | ||||
|             <!-- <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" v-loading="loading"> | ||||
|                 <el-table-column :label="$t('app.name')" prop="name" min-width="150px" show-overflow-tooltip> | ||||
|                     <template #default="{ row }"> | ||||
|                         <el-link :underline="false" @click="openParam(row.id)" type="primary"> | ||||
|                             {{ row.name }} | ||||
|                         </el-link> | ||||
|                         <el-tag round effect="dark" v-if="row.canUpdate">{{ $t('app.canUpdate') }}</el-tag> | ||||
|                     </template> | ||||
|                 </el-table-column> | ||||
|                 <el-table-column :label="$t('app.app')" prop="app.name" show-overflow-tooltip></el-table-column> | ||||
|                 <el-table-column :label="$t('app.version')" prop="version" show-overflow-tooltip></el-table-column> | ||||
|                 <el-table-column :label="$t('website.port')" prop="httpPort"></el-table-column> | ||||
|                 <el-table-column :label="$t('app.backup')"> | ||||
|                     <template #default="{ row }"> | ||||
|                         <el-link :underline="false" @click="openBackups(row.id, row.name)" type="primary"> | ||||
|                             {{ $t('app.backup') }} ({{ row.backups.length }}) | ||||
|                         </el-link> | ||||
|                     </template> | ||||
|                 </el-table-column> | ||||
| 
 | ||||
|                 <el-table-column :label="$t('app.status')"> | ||||
|                     <template #default="{ row }"> | ||||
|                         <el-popover | ||||
|                             v-if="row.status === 'Error'" | ||||
|                             placement="bottom" | ||||
|                             :width="400" | ||||
|                             trigger="hover" | ||||
|                             :content="row.message" | ||||
|                         > | ||||
|                             <template #reference><Status :key="row.status" :status="row.status"></Status></template> | ||||
|                         </el-popover> | ||||
|                         <div v-else> | ||||
|                             <el-icon v-if="row.status === 'Installing'" class="is-loading"> | ||||
|                                 <Loading /> | ||||
|                             </el-icon> | ||||
|                             <Status :key="row.status" :status="row.status"></Status> | ||||
|                         </div> | ||||
|                     </template> | ||||
|                 </el-table-column> | ||||
|                 <el-table-column | ||||
|                     prop="createdAt" | ||||
|                     :label="$t('commons.table.date')" | ||||
|                     :formatter="dateFromat" | ||||
|                     show-overflow-tooltip | ||||
|                 /> | ||||
|                 <fu-table-operations | ||||
|                     width="300px" | ||||
|                     :ellipsis="10" | ||||
|                     :buttons="buttons" | ||||
|                     :label="$t('commons.table.operate')" | ||||
|                     fixed="right" | ||||
|                     fix | ||||
|                 /> | ||||
|             </ComplexTable> --> | ||||
|         </template> | ||||
|     </LayoutContent> | ||||
|     <el-dialog | ||||
|         v-model="open" | ||||
|         :title="$t('commons.msg.operate')" | ||||
|         :destroy-on-close="true" | ||||
|         :close-on-click-modal="false" | ||||
|         :before-close="handleClose" | ||||
|         width="30%" | ||||
|     > | ||||
|         <div style="text-align: center"> | ||||
|             <p>{{ $t('app.versioneSelect') }}</p> | ||||
|             <el-select v-model="operateReq.detailId"> | ||||
|                 <el-option | ||||
|                     v-for="(version, index) in versions" | ||||
|                     :key="index" | ||||
|                     :value="version.detailId" | ||||
|                     :label="version.version" | ||||
|                 ></el-option> | ||||
|             </el-select> | ||||
|         </div> | ||||
|         <template #footer> | ||||
|             <span class="dialog-footer"> | ||||
|                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button> | ||||
|                 <el-button | ||||
|                     type="primary" | ||||
|                     @click="operate" | ||||
|                     :disabled="operateReq.operate == 'update' && versions == null" | ||||
|                 > | ||||
|                     {{ $t('commons.button.confirm') }} | ||||
|                 </el-button> | ||||
|             </span> | ||||
|         </template> | ||||
|     </el-dialog> | ||||
|     <Backups ref="backupRef" @close="search"></Backups> | ||||
|     <AppResources ref="checkRef"></AppResources> | ||||
|     <AppDelete ref="deleteRef" @close="search"></AppDelete> | ||||
|     <AppParams ref="appParamRef"></AppParams> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts" setup> | ||||
|  | @ -116,9 +223,10 @@ import { | |||
|     GetAppUpdateVersions, | ||||
|     AppInstalledDeleteCheck, | ||||
| } from '@/api/modules/app'; | ||||
| import LayoutContent from '@/layout/layout-content.vue'; | ||||
| import { onMounted, onUnmounted, reactive, ref } from 'vue'; | ||||
| import ComplexTable from '@/components/complex-table/index.vue'; | ||||
| import { dateFromat } from '@/utils/util'; | ||||
| // import ComplexTable from '@/components/complex-table/index.vue'; | ||||
| // import { dateFromat } from '@/utils/util'; | ||||
| import i18n from '@/lang'; | ||||
| import { ElMessage, ElMessageBox } from 'element-plus'; | ||||
| import Backups from './backups.vue'; | ||||
|  | @ -273,6 +381,12 @@ const buttons = [ | |||
|             openOperate(row, 'delete'); | ||||
|         }, | ||||
|     }, | ||||
|     { | ||||
|         label: i18n.global.t('app.detail'), | ||||
|         click: (row: any) => { | ||||
|             openParam(row.id); | ||||
|         }, | ||||
|     }, | ||||
| ]; | ||||
| 
 | ||||
| const openBackups = (installId: number, installName: string) => { | ||||
|  | @ -300,24 +414,5 @@ onUnmounted(() => { | |||
| </script> | ||||
| 
 | ||||
| <style scoped lang="scss"> | ||||
| .i-card { | ||||
|     height: 60px; | ||||
|     cursor: pointer; | ||||
|     .content { | ||||
|         .image { | ||||
|             width: auto; | ||||
|             height: auto; | ||||
|         } | ||||
|     } | ||||
| } | ||||
| .i-card:hover { | ||||
|     border: 1px solid; | ||||
|     border-color: $primary-color; | ||||
|     z-index: 1; | ||||
| } | ||||
| 
 | ||||
| .table-button { | ||||
|     display: inline; | ||||
|     margin-right: 5px; | ||||
| } | ||||
| @import '../index.scss'; | ||||
| </style> | ||||
|  |  | |||
		Loading…
	
	Add table
		
		Reference in a new issue