|
|
|
@ -4,38 +4,67 @@
|
|
|
|
<div class="flex justify-between">
|
|
|
|
<div class="flex justify-between">
|
|
|
|
<h1 class="page-h1">我的应用</h1>
|
|
|
|
<h1 class="page-h1">我的应用</h1>
|
|
|
|
<div class="my-5 mr-10">
|
|
|
|
<div class="my-5 mr-10">
|
|
|
|
<n-button @click="new_flag=true" v-if="store.state.user.auth.Get(R.App, '').CanCreate()">创建应用</n-button>
|
|
|
|
<n-button
|
|
|
|
|
|
|
|
@click="new_flag = true"
|
|
|
|
|
|
|
|
v-if="store.state.user.auth.Get(R.App, '').CanCreate()"
|
|
|
|
|
|
|
|
>创建应用
|
|
|
|
|
|
|
|
</n-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 text-center">
|
|
|
|
<div
|
|
|
|
<div v-for="(item, k) in ofApps" class="flex items-center justify-center" :key="k">
|
|
|
|
class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 text-center"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
v-for="(item, k) in ofApps"
|
|
|
|
|
|
|
|
class="flex items-center justify-center"
|
|
|
|
|
|
|
|
:key="k"
|
|
|
|
|
|
|
|
>
|
|
|
|
<AppCard :core="item"></AppCard>
|
|
|
|
<AppCard :core="item"></AppCard>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-20" v-if="apps.length > 0">
|
|
|
|
<div class="mt-20" v-if="apps.length > 0">
|
|
|
|
<h1 class="page-h1">应用中心</h1>
|
|
|
|
<h1 class="page-h1">应用中心</h1>
|
|
|
|
<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 text-center">
|
|
|
|
<div
|
|
|
|
<div v-for="(item, k) in apps" class="flex items-center justify-center" :key="k">
|
|
|
|
class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 text-center"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
v-for="(item, k) in apps"
|
|
|
|
|
|
|
|
class="flex items-center justify-center"
|
|
|
|
|
|
|
|
:key="k"
|
|
|
|
|
|
|
|
>
|
|
|
|
<AppCard :core="item"></AppCard>
|
|
|
|
<AppCard :core="item"></AppCard>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<n-modal v-model:show="new_flag">
|
|
|
|
<n-modal v-model:show="new_flag">
|
|
|
|
<n-card class="w-4/5 md:w-96 rounded-2xl" title="创建应用" :bordered="false"
|
|
|
|
<n-card
|
|
|
|
size="huge">
|
|
|
|
class="w-4/5 md:w-96 rounded-2xl"
|
|
|
|
<n-form label-width="70px" label-align="left" :model="temp_app" ref="form_ref" label-placement="left"
|
|
|
|
title="创建应用"
|
|
|
|
:rules="rules">
|
|
|
|
:bordered="false"
|
|
|
|
|
|
|
|
size="huge"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<n-form
|
|
|
|
|
|
|
|
label-width="70px"
|
|
|
|
|
|
|
|
label-align="left"
|
|
|
|
|
|
|
|
:model="temp_app"
|
|
|
|
|
|
|
|
ref="form_ref"
|
|
|
|
|
|
|
|
label-placement="left"
|
|
|
|
|
|
|
|
:rules="rules"
|
|
|
|
|
|
|
|
>
|
|
|
|
<n-form-item required label="应用名" path="name">
|
|
|
|
<n-form-item required label="应用名" path="name">
|
|
|
|
<n-input v-model:value="temp_app.name"></n-input>
|
|
|
|
<n-input v-model:value="temp_app.name"></n-input>
|
|
|
|
</n-form-item>
|
|
|
|
</n-form-item>
|
|
|
|
<n-form-item required label="icon" path="icon">
|
|
|
|
<n-form-item required label="icon" path="icon">
|
|
|
|
<uploader
|
|
|
|
<uploader
|
|
|
|
url="test.ico"
|
|
|
|
url="test.ico"
|
|
|
|
@success="(e) => {temp_app.icon = e}"
|
|
|
|
@success="
|
|
|
|
|
|
|
|
(e) => {
|
|
|
|
|
|
|
|
temp_app.icon = e;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<n-avatar size="large" round :src="temp_app.icon">
|
|
|
|
<n-avatar size="large" round :src="temp_app.icon"> </n-avatar>
|
|
|
|
</n-avatar>
|
|
|
|
|
|
|
|
</uploader>
|
|
|
|
</uploader>
|
|
|
|
</n-form-item>
|
|
|
|
</n-form-item>
|
|
|
|
</n-form>
|
|
|
|
</n-form>
|
|
|
|
@ -51,83 +80,95 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import {onMounted, ref} from 'vue'
|
|
|
|
import { onMounted, ref } from "vue";
|
|
|
|
import api from '@/api'
|
|
|
|
import api from "@/api";
|
|
|
|
import AppCard from '@/components/app.vue'
|
|
|
|
import AppCard from "@/components/app.vue";
|
|
|
|
import {useStore} from '@/store'
|
|
|
|
import { useStore } from "@/store";
|
|
|
|
import {R} from '@/auth'
|
|
|
|
import { R } from "@/auth";
|
|
|
|
import util from '@/libs/util'
|
|
|
|
import { useMessage, useLoadingBar } from "naive-ui";
|
|
|
|
import {useMessage, useLoadingBar} from 'naive-ui'
|
|
|
|
import { modelsApp } from "@/models";
|
|
|
|
import {modelsApp} from '@/models'
|
|
|
|
import Uploader from "@/components/uploader";
|
|
|
|
import Uploader from '@/components/uploader'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let msg = useMessage()
|
|
|
|
let msg = useMessage();
|
|
|
|
let bar = useLoadingBar()
|
|
|
|
let bar = useLoadingBar();
|
|
|
|
let store = useStore()
|
|
|
|
let store = useStore();
|
|
|
|
let apps = ref<modelsApp[]>([])
|
|
|
|
let apps = ref<modelsApp[]>([]);
|
|
|
|
let ofApps = ref<modelsApp[]>([])
|
|
|
|
let ofApps = ref<modelsApp[]>([]);
|
|
|
|
|
|
|
|
|
|
|
|
function getApps() {
|
|
|
|
function getApps() {
|
|
|
|
bar.start()
|
|
|
|
bar.start();
|
|
|
|
api.app.list().Start(e => {
|
|
|
|
api.app.list().Start(
|
|
|
|
apps.value = e
|
|
|
|
(e) => {
|
|
|
|
api.app.user('').list(store.state.user.id).Start(e => {
|
|
|
|
apps.value = e;
|
|
|
|
bar.finish()
|
|
|
|
api.app
|
|
|
|
ofApps.value = []
|
|
|
|
.user("")
|
|
|
|
|
|
|
|
.list(store.state.user.id)
|
|
|
|
|
|
|
|
.Start(
|
|
|
|
|
|
|
|
(e) => {
|
|
|
|
|
|
|
|
bar.finish();
|
|
|
|
|
|
|
|
ofApps.value = [];
|
|
|
|
for (let i in e) {
|
|
|
|
for (let i in e) {
|
|
|
|
let ai = apps.value.findIndex(a => a.UUID === e[i].AppUUID)
|
|
|
|
let ai = apps.value.findIndex((a) => a.UUID === e[i].AppUUID);
|
|
|
|
if (ai >= 0) {
|
|
|
|
if (ai >= 0) {
|
|
|
|
apps.value[ai].UserStatus = e[i].Status
|
|
|
|
apps.value[ai].UserStatus = e[i].Status;
|
|
|
|
if (e[i].Status === 'ok') {
|
|
|
|
if (e[i].Status === "ok") {
|
|
|
|
ofApps.value.push(apps.value[ai])
|
|
|
|
ofApps.value.push(apps.value[ai]);
|
|
|
|
apps.value.splice(ai, 1)
|
|
|
|
apps.value.splice(ai, 1);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
() => {
|
|
|
|
|
|
|
|
bar.error();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, () => {
|
|
|
|
);
|
|
|
|
bar.error()
|
|
|
|
},
|
|
|
|
})
|
|
|
|
() => bar.error()
|
|
|
|
}, () => bar.error())
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
getApps()
|
|
|
|
getApps();
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let new_flag = ref(false);
|
|
|
|
let new_flag = ref(false)
|
|
|
|
|
|
|
|
let temp_app = ref({
|
|
|
|
let temp_app = ref({
|
|
|
|
name: '',
|
|
|
|
name: "",
|
|
|
|
icon: '',
|
|
|
|
icon: "",
|
|
|
|
})
|
|
|
|
});
|
|
|
|
let form_ref = ref(null)
|
|
|
|
let form_ref = ref(null);
|
|
|
|
let rules = {
|
|
|
|
let rules = {
|
|
|
|
name: [{
|
|
|
|
name: [
|
|
|
|
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
validator(r: any, v: any) {
|
|
|
|
validator(r: any, v: any) {
|
|
|
|
return (v && v.length >= 2 && v.length <= 16) || new Error('长度要求2~16')
|
|
|
|
return (
|
|
|
|
|
|
|
|
(v && v.length >= 2 && v.length <= 16) || new Error("长度要求2~16")
|
|
|
|
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
trigger: ['input', 'blur'],
|
|
|
|
trigger: ["input", "blur"],
|
|
|
|
}],
|
|
|
|
},
|
|
|
|
}
|
|
|
|
],
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function create_new() {
|
|
|
|
function create_new() {
|
|
|
|
// @ts-ignore
|
|
|
|
// @ts-ignore
|
|
|
|
form_ref.value.validate((e: any) => {
|
|
|
|
form_ref.value.validate((e: any) => {
|
|
|
|
if (!e) {
|
|
|
|
if (!e) {
|
|
|
|
api.app.create(temp_app.value.name, temp_app.value.icon).Start(e => {
|
|
|
|
api.app.create(temp_app.value.name, temp_app.value.icon).Start(
|
|
|
|
e.Status = 'ok'
|
|
|
|
(e) => {
|
|
|
|
ofApps.value.push(e)
|
|
|
|
e.Status = "ok";
|
|
|
|
msg.success('创建成功')
|
|
|
|
ofApps.value.push(e);
|
|
|
|
new_flag.value = false
|
|
|
|
msg.success("创建成功");
|
|
|
|
}, e => {
|
|
|
|
new_flag.value = false;
|
|
|
|
msg.warning('创建失败: ' + e)
|
|
|
|
},
|
|
|
|
})
|
|
|
|
(e) => {
|
|
|
|
|
|
|
|
msg.warning("创建失败: " + e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped></style>
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
