feat: 应用详情页改为路由跳转

This commit is contained in:
zhengkunwang223 2023-02-08 17:09:21 +08:00 committed by zhengkunwang223
parent 20cf2a53da
commit 2b89a8ddff
10 changed files with 52 additions and 50 deletions

View File

@ -45,20 +45,20 @@ func (b *BaseApi) SyncApp(c *gin.Context) {
}
// @Tags App
// @Summary Search app by id
// @Description 通过 id 获取应用信息
// @Summary Search app by key
// @Description 通过 key 获取应用信息
// @Accept json
// @Param id path integer true "app id"
// @Param key path string true "app key"
// @Success 200 {object} response.AppDTO
// @Security ApiKeyAuth
// @Router /apps/:id [get]
// @Router /apps/:key [get]
func (b *BaseApi) GetApp(c *gin.Context) {
id, err := helper.GetParamID(c)
appKey, err := helper.GetStrParamByKey(c, "key")
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
appDTO, err := appService.GetApp(id)
appDTO, err := appService.GetApp(appKey)
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return

View File

@ -111,6 +111,14 @@ func GetIntParamByKey(c *gin.Context, key string) (uint, error) {
return uint(intNum), nil
}
func GetStrParamByKey(c *gin.Context, key string) (string, error) {
idParam, ok := c.Params.Get(key)
if !ok {
return "", fmt.Errorf("error %s in path", key)
}
return idParam, nil
}
func GetTxAndContext() (tx *gorm.DB, ctx context.Context) {
tx = global.DB.Begin()
ctx = context.WithValue(context.Background(), constant.DB, tx)

View File

@ -106,9 +106,9 @@ func (a AppService) GetAppTags() ([]response.TagDTO, error) {
return res, nil
}
func (a AppService) GetApp(id uint) (*response.AppDTO, error) {
func (a AppService) GetApp(key string) (*response.AppDTO, error) {
var appDTO response.AppDTO
app, err := appRepo.GetFirst(commonRepo.WithByID(id))
app, err := appRepo.GetFirst(appRepo.WithKey(key))
if err != nil {
return nil, err
}

View File

@ -17,7 +17,7 @@ func (a *AppRouter) InitAppRouter(Router *gin.RouterGroup) {
{
appRouter.POST("/sync", baseApi.SyncApp)
appRouter.POST("/search", baseApi.SearchApp)
appRouter.GET("/:id", baseApi.GetApp)
appRouter.GET("/:key", baseApi.GetApp)
appRouter.GET("/detail/:appId/:version", baseApi.GetAppDetail)
appRouter.POST("/install", baseApi.InstallApp)
appRouter.GET("/tags", baseApi.GetAppTags)

View File

@ -10,8 +10,8 @@ export const SearchApp = (req: App.AppReq) => {
return http.post<App.AppResPage>('apps/search', req);
};
export const GetApp = (id: number) => {
return http.get<App.AppDTO>('apps/' + id);
export const GetApp = (key: string) => {
return http.get<App.AppDTO>('apps/' + key);
};
export const GetAppTags = () => {

View File

@ -27,6 +27,16 @@ const appStoreRouter = {
activeMenu: '/apps',
},
},
{
path: 'detail/:appKey',
name: 'AppDetail',
component: () => import('@/views/app-store/detail/index.vue'),
props: true,
hidden: true,
meta: {
activeMenu: '/apps',
},
},
{
path: 'installed',
name: 'AppInstalled',

View File

@ -62,7 +62,7 @@
plain
round
size="small"
@click="getAppDetail(app.id)"
@click="getAppDetail(app.key)"
>
{{ $t('app.install') }}
</el-button>
@ -97,6 +97,7 @@ import { GetAppTags, SearchApp, SyncApp } from '@/api/modules/app';
import { ElMessage } from 'element-plus';
import i18n from '@/lang';
import Detail from '../detail/index.vue';
import router from '@/routers';
let req = reactive({
name: '',
@ -131,9 +132,8 @@ const search = async (req: App.AppReq) => {
});
};
const getAppDetail = (id: number) => {
showDetail.value = true;
appId.value = id;
const getAppDetail = (key: string) => {
router.push({ name: 'AppDetail', params: { appKey: key } });
};
const sync = () => {

View File

@ -1,5 +1,5 @@
<template>
<LayoutContent :title="$t('app.detail')" :reload="true" :v-loading="loadingDetail" :divider="true">
<LayoutContent :title="$t('app.detail')" :back-name="'App'" :v-loading="loadingDetail" :divider="true">
<template #main>
<div class="brief">
<el-row :gutter="20">
@ -20,7 +20,7 @@
</div>
<div class="version">
<el-form-item :label="$t('app.version')">
<el-select v-model="version" @change="getDetail(version)">
<el-select v-model="version" @change="getDetail(app.id, version)">
<el-option
v-for="(v, index) in app.versions"
:key="index"
@ -97,28 +97,32 @@ import { onMounted, ref } from 'vue';
import Install from './install/index.vue';
interface OperateProps {
id: number;
// id: number;
appKey: string;
}
const props = withDefaults(defineProps<OperateProps>(), {
id: 0,
// id: 0,
appKey: '',
});
let app = ref<any>({});
let appDetail = ref<any>({});
let version = ref('');
let loadingDetail = ref(false);
// let appKey = ref();
const installRef = ref();
const getApp = () => {
GetApp(props.id).then((res) => {
GetApp(props.appKey).then((res) => {
app.value = res.data;
version.value = app.value.versions[0];
getDetail(version.value);
getDetail(app.value.id, version.value);
});
};
const getDetail = (version: string) => {
const getDetail = (id: number, version: string) => {
loadingDetail.value = true;
GetAppDetail(props.id, version)
GetAppDetail(id, version)
.then((res) => {
appDetail.value = res.data;
})
@ -146,8 +150,6 @@ onMounted(() => {
<style lang="scss">
.brief {
// height: 30vh;
.name {
span {
font-weight: 500;

View File

@ -36,7 +36,7 @@
></el-option>
</el-select>
<span v-if="p.type === 'service' && !p.services" style="margin-left: 5px">
<el-link type="primary" :underline="false" @click="toPage()">
<el-link type="primary" :underline="false" @click="toPage(p.key)">
{{ $t('app.toInstall') }}
</el-link>
</span>
@ -44,7 +44,7 @@
</div>
</template>
<script lang="ts" setup>
import { computed, inject, onMounted, reactive, ref } from 'vue';
import { computed, onMounted, reactive, ref } from 'vue';
import { getRandomStr } from '@/utils/util';
import { GetAppService } from '@/api/modules/app';
import { Rules } from '@/global/form-rules';
@ -180,14 +180,8 @@ const getLabel = (row: ParamObj): string => {
}
};
let reloadPage: Function = inject('reload');
const toPage = () => {
router.push({ name: 'App' });
const nowPath = router.currentRoute.value.path;
if (nowPath && nowPath == '/apps/all') {
reloadPage();
}
const toPage = (appKey: string) => {
router.push({ name: 'AppDetail', params: { appKey: appKey } });
};
onMounted(() => {

View File

@ -16,20 +16,6 @@
{{ item.label }}
</el-button>
</template>
<!-- <el-button
type="primary"
:plain="website.type !== 'deployment'"
@click="website.type = 'deployment'"
>
{{ $t('website.deployment') }}
</el-button>
<el-button type="primary" :plain="website.type !== 'static'" @click="website.type = 'static'">
{{ $t('website.static') }}
</el-button>
<el-button type="primary" :plain="website.type !== 'proxy'" @click="website.type = 'proxy'">
{{ $t('website.proxy') }}
</el-button> -->
</span>
</template>
</DrawerHeader>
@ -227,6 +213,7 @@ const website = ref({
appDetailId: 0,
params: {},
version: '',
appkey: '',
},
});
let rules = reactive({
@ -282,13 +269,14 @@ const searchApp = () => {
apps.value = res.data.items;
if (res.data.items.length > 0) {
website.value.appinstall.appId = res.data.items[0].id;
website.value.appinstall.appkey = res.data.items[0].key;
getApp();
}
});
};
const getApp = () => {
GetApp(website.value.appinstall.appId).then((res) => {
GetApp(website.value.appinstall.appkey).then((res) => {
appVersions.value = res.data.versions;
if (res.data.versions.length > 0) {
website.value.appinstall.version = res.data.versions[0];