补充应用管理页面
This commit is contained in:
parent
8df992dda5
commit
fc40e7663a
9
devcloud/web/src/api/index.js
Normal file
9
devcloud/web/src/api/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import MCENTER_API from './mcenter'
|
||||
import MPAAS_API from './mppas'
|
||||
|
||||
var API = {
|
||||
mcenter: MCENTER_API,
|
||||
mpaas: MPAAS_API,
|
||||
}
|
||||
|
||||
export default API
|
||||
@ -1,9 +1,9 @@
|
||||
import client from './client'
|
||||
|
||||
var API = {
|
||||
var MCENTER_API = {
|
||||
Login: (data) => {
|
||||
return client.post('/api/devcloud/v1/token', data)
|
||||
},
|
||||
}
|
||||
|
||||
export default API
|
||||
export default MCENTER_API
|
||||
|
||||
9
devcloud/web/src/api/mppas.js
Normal file
9
devcloud/web/src/api/mppas.js
Normal file
@ -0,0 +1,9 @@
|
||||
import client from './client'
|
||||
|
||||
var MPAAS_API = {
|
||||
AppList: (params) => {
|
||||
return client.get('/api/devcloud/v1/applications', { params })
|
||||
},
|
||||
}
|
||||
|
||||
export default MPAAS_API
|
||||
@ -74,7 +74,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import mcenter from '@/api/mcenter'
|
||||
import API from '@/api'
|
||||
import token from '@/storage/token'
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
@ -91,7 +91,7 @@ const router = useRouter();
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
if (data.errors == null) {
|
||||
const resp = await mcenter.Login(data.values);
|
||||
const resp = await API.mcenter.Login(data.values);
|
||||
token.value = resp;
|
||||
router.push({ name: 'DashBoard' });
|
||||
}
|
||||
|
||||
@ -1,113 +1,75 @@
|
||||
<template>
|
||||
<a-form layout="inline" :model="form">
|
||||
<a-form-item label="Border" field="border">
|
||||
<a-switch v-model="form.border" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Hover" field="hover">
|
||||
<a-switch v-model="form.hover" />
|
||||
</a-form-item>
|
||||
<a-form-item label="stripe" field="stripe">
|
||||
<a-switch v-model="form.stripe" />
|
||||
</a-form-item>
|
||||
<a-form-item label="checkbox" field="checkbox">
|
||||
<a-switch v-model="form.checkbox" />
|
||||
</a-form-item>
|
||||
<a-form-item label="checkAll" field="checkAll">
|
||||
<a-switch v-model="rowSelection.showCheckedAll" />
|
||||
</a-form-item>
|
||||
<a-form-item label="loading" field="loading">
|
||||
<a-switch v-model="form.loading" />
|
||||
</a-form-item>
|
||||
<a-form-item label="tableHeader" field="tableHeader">
|
||||
<a-switch v-model="form.tableHeader" />
|
||||
</a-form-item>
|
||||
<a-form-item label="noData" field="noData">
|
||||
<a-switch v-model="form.noData" />
|
||||
</a-form-item>
|
||||
<a-form layout="inline" :model="query">
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<a-form-item label="Hover" field="hover">
|
||||
<a-switch v-model="query.hover" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
<a-table :columns="columns" :data="form.noData ? [] : data" :bordered="form.border" :hoverable="form.hover"
|
||||
:stripe="form.stripe" :loading="form.loading" :show-header="form.tableHeader"
|
||||
:row-selection="form.checkbox ? rowSelection : undefined" />
|
||||
<a-table :data="data.items" :loading="fetchAppLoading">
|
||||
<template #columns>
|
||||
<a-table-column title="名称" data-index="name"></a-table-column>
|
||||
<a-table-column title="描述" data-index="description"></a-table-column>
|
||||
<a-table-column title="团队" data-index="label.team"></a-table-column>
|
||||
<a-table-column title="创建时间" data-index="create_at"></a-table-column>
|
||||
<a-table-column title="类型" data-index="type"></a-table-column>
|
||||
<a-table-column title="仓库地址" data-index="code_repository.ssh_url"></a-table-column>
|
||||
<a-table-column title="是否就绪" data-index="ready">
|
||||
<template #cell="{ record }">
|
||||
<a-switch type="round" disabled v-model="record.ready">
|
||||
<template #checked>
|
||||
就绪
|
||||
</template>
|
||||
<template #unchecked>
|
||||
未就绪
|
||||
</template>
|
||||
</a-switch>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="操作">
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="editApp(record)">编辑</a-button>
|
||||
<a-button @click="deleteApp(record)" type="primary">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive } from 'vue';
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import API from '@/api'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const form = reactive({
|
||||
border: true,
|
||||
borderCell: false,
|
||||
hover: true,
|
||||
stripe: false,
|
||||
checkbox: true,
|
||||
loading: false,
|
||||
tableHeader: true,
|
||||
noData: false
|
||||
});
|
||||
const query = reactive({
|
||||
page_size: 20,
|
||||
page_number: 1,
|
||||
|
||||
const rowSelection = reactive({
|
||||
type: 'checkbox',
|
||||
showCheckedAll: true
|
||||
});
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Salary',
|
||||
dataIndex: 'salary',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
dataIndex: 'email',
|
||||
},
|
||||
];
|
||||
// 通过API获取应用列表
|
||||
const data = ref({
|
||||
items: [],
|
||||
total: 0,
|
||||
});
|
||||
const fetchAppLoading = ref(false);
|
||||
const fetchAppList = async () => {
|
||||
try {
|
||||
fetchAppLoading.value = true;
|
||||
const resp = await API.mpaas.AppList(query);
|
||||
data.value = resp;
|
||||
console.log('Fetched app list:', data.value);
|
||||
} catch (error) {
|
||||
console.error('Error fetching app list:', error);
|
||||
} finally {
|
||||
fetchAppLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: 'Jane Doe',
|
||||
salary: 23000,
|
||||
address: '32 Park Road, London',
|
||||
email: 'jane.doe@example.com'
|
||||
}, {
|
||||
key: '2',
|
||||
name: 'Alisa Ross',
|
||||
salary: 25000,
|
||||
address: '35 Park Road, London',
|
||||
email: 'alisa.ross@example.com'
|
||||
}, {
|
||||
key: '3',
|
||||
name: 'Kevin Sandra',
|
||||
salary: 22000,
|
||||
address: '31 Park Road, London',
|
||||
email: 'kevin.sandra@example.com'
|
||||
}, {
|
||||
key: '4',
|
||||
name: 'Ed Hellen',
|
||||
salary: 17000,
|
||||
address: '42 Park Road, London',
|
||||
email: 'ed.hellen@example.com'
|
||||
}, {
|
||||
key: '5',
|
||||
name: 'William Smith',
|
||||
salary: 27000,
|
||||
address: '62 Park Road, London',
|
||||
email: 'william.smith@example.com'
|
||||
}];
|
||||
|
||||
return {
|
||||
form,
|
||||
rowSelection,
|
||||
columns,
|
||||
data
|
||||
}
|
||||
},
|
||||
}
|
||||
onMounted(() => {
|
||||
fetchAppList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<a-card class="project-card" :style="{ borderTop: `4px solid ${statusColor}` }" hoverable>
|
||||
<a-card class="project-card" hoverable>
|
||||
<a-card-meta :title="project.name">
|
||||
<template #description>
|
||||
<div class="project-meta">
|
||||
<div class="project-desc">{{ project.description }}</div>
|
||||
|
||||
<div class="project-desc">状态: {{ project.status }}</div>
|
||||
<div class="project-footer">
|
||||
<a-space>
|
||||
<a-avatar-group :max-count="3">
|
||||
@ -47,14 +47,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { } from 'vue';
|
||||
import {
|
||||
IconEdit,
|
||||
IconDelete,
|
||||
IconMore
|
||||
} from '@arco-design/web-vue/es/icon';
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
project: {
|
||||
type: Object,
|
||||
required: true,
|
||||
@ -71,14 +71,14 @@ const props = defineProps({
|
||||
|
||||
defineEmits(['edit', 'delete', 'archive']);
|
||||
|
||||
const statusColor = computed(() => {
|
||||
const map = {
|
||||
active: '#00B42A',
|
||||
archived: '#86909C',
|
||||
planning: '#FF7D00'
|
||||
};
|
||||
return map[props.project.status] || '#86909C';
|
||||
});
|
||||
// const statusColor = computed(() => {
|
||||
// const map = {
|
||||
// active: '#00B42A',
|
||||
// archived: '#86909C',
|
||||
// planning: '#FF7D00'
|
||||
// };
|
||||
// return map[props.project.status] || '#86909C';
|
||||
// });
|
||||
|
||||
const formatDate = (timestamp) => {
|
||||
return new Date(timestamp).toLocaleDateString('zh-CN');
|
||||
@ -90,7 +90,7 @@ const formatDate = (timestamp) => {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
height: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user