103 行
3.3 KiB
Vue
103 行
3.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="page-header">
|
||
|
|
<h2>我的应用</h2>
|
||
|
|
<el-button type="primary" @click="showCreate = true">
|
||
|
|
<el-icon><Plus /></el-icon> 创建应用
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table :data="apps" v-loading="loading" style="width:100%">
|
||
|
|
<el-table-column prop="name" label="应用名称" />
|
||
|
|
<el-table-column prop="packageName" label="包名" />
|
||
|
|
<el-table-column prop="appKey" label="AppKey" show-overflow-tooltip />
|
||
|
|
<el-table-column prop="createdAt" label="创建时间" width="180">
|
||
|
|
<template #default="{ row }">{{ formatDate(row.createdAt) }}</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="180">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-button link type="primary" @click="$router.push(`/apps/${row.id}`)">详情</el-button>
|
||
|
|
<el-button link type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<el-dialog v-model="showCreate" title="创建应用" width="480px">
|
||
|
|
<el-form ref="createFormRef" :model="createForm" :rules="createRules" label-position="top">
|
||
|
|
<el-form-item label="包名" prop="packageName">
|
||
|
|
<el-input v-model="createForm.packageName" placeholder="com.example.app" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="应用名称" prop="name">
|
||
|
|
<el-input v-model="createForm.name" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="简述">
|
||
|
|
<el-input v-model="createForm.description" type="textarea" :rows="3" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<el-button @click="showCreate = false">取消</el-button>
|
||
|
|
<el-button type="primary" :loading="creating" @click="handleCreate">确定</el-button>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive, onMounted } from 'vue'
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
||
|
|
import { appApi, type App } from '@/api/app'
|
||
|
|
|
||
|
|
const apps = ref<App[]>([])
|
||
|
|
const loading = ref(false)
|
||
|
|
const showCreate = ref(false)
|
||
|
|
const creating = ref(false)
|
||
|
|
const createFormRef = ref<FormInstance>()
|
||
|
|
|
||
|
|
const createForm = reactive({ packageName: '', name: '', description: '' })
|
||
|
|
const createRules: FormRules = {
|
||
|
|
packageName: [{ required: true, message: '请输入包名' }],
|
||
|
|
name: [{ required: true, message: '请输入应用名' }],
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadApps() {
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
const res = await appApi.list()
|
||
|
|
apps.value = res.data.data
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleCreate() {
|
||
|
|
await createFormRef.value?.validate()
|
||
|
|
creating.value = true
|
||
|
|
try {
|
||
|
|
await appApi.create(createForm)
|
||
|
|
showCreate.value = false
|
||
|
|
ElMessage.success('应用创建成功')
|
||
|
|
loadApps()
|
||
|
|
} finally {
|
||
|
|
creating.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleDelete(id: string) {
|
||
|
|
await ElMessageBox.confirm('确定删除此应用？删除后不可恢复。', '警告', { type: 'warning' })
|
||
|
|
await appApi.delete(id)
|
||
|
|
ElMessage.success('已删除')
|
||
|
|
loadApps()
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatDate(d: string) {
|
||
|
|
return d ? new Date(d).toLocaleString('zh-CN') : '-'
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(loadApps)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||
|
|
</style>
|
