OneAuth/oaf/src/views/home.vue

<template>
  <div>
    <div v-if="ofApps.length > 0">
      <div class="flex justify-between">
        <h1 class="page-h1">我的应用</h1>
        <div class="my-5 mr-10">
          <n-button @click="new_flag=true" v-if="store.state.user.auth.Get(R.App, '').CanCreate()">创建应用</n-button>
        </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 v-for="(item, k) in ofApps" class="flex items-center justify-center" :key="k">
          <AppCard :core="item"></AppCard>
        </div>
      </div>
    </div>
    <div class="mt-20" v-if="apps.length > 0">
      <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 v-for="(item, k) in apps" class="flex items-center justify-center" :key="k">
          <AppCard :core="item"></AppCard>
        </div>
      </div>
    </div>
    <n-modal v-model:show="new_flag">
      <n-card class="w-4/5 md:w-96 rounded-2xl" title="创建应用" :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-input v-model:value="temp_app.name"></n-input>
          </n-form-item>
          <n-form-item required label="icon" path="icon">
            <uploader
              :url="new Date().toLocaleDateString()"
              @success="(e) => {temp_app.icon = e}"
            >
              <n-avatar size="large" round :src="util.addTokenOf(temp_app.icon)">
              </n-avatar>
            </uploader>
          </n-form-item>
        </n-form>
        <template #footer>
        <div class="flex justify-end">
          <n-button class="mx-3" @click="new_flag=false">取消</n-button>
          <n-button @click="create_new">创建</n-button>
        </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import api from '@/api'
import AppCard from '@/components/app.vue'
import {useStore} from '@/store'
import {R} from '@/auth'
import util from '@/libs/util'
import {useMessage, useLoadingBar} from 'naive-ui'
import {modelsApp} from '@/models'
import Uploader from '@/components/uploader'

let msg = useMessage()
let bar = useLoadingBar()
let store = useStore()
let apps = ref<modelsApp[]>([])
let ofApps = ref<modelsApp[]>([])

function getApps() {
  bar.start()
  api.app.list().Start(e => {
    apps.value = e
    api.app.user('').list(store.state.user.id).Start(e => {
      bar.finish()
      ofApps.value = []
      for (let i in e) {
        let ai = apps.value.findIndex(a => a.UUID === e[i].AppUUID)
        if (ai >= 0) {
          apps.value[ai].UserStatus = e[i].Status
          if (e[i].Status === 'ok') {
            ofApps.value.push(apps.value[ai])
            apps.value.splice(ai, 1)
          }
        }
      }
    }, () => {
      bar.error()
    })
  }, () => bar.error())
}

onMounted(() => {
  getApps()
})


let new_flag = ref(false)
let temp_app = ref({
  name: '',
  icon: '',
})
let form_ref = ref(null)
let rules = {
  name: [{
    required: true,
    validator(r: any, v: any) {
      return (v && v.length >= 2 && v.length <= 16) || new Error('长度要求2~16')
    },
    trigger: ['input', 'blur'],
  }],
}

function create_new() {
  // @ts-ignore
  form_ref.value.validate((e: any) => {
    if (!e) {
      api.app.create(temp_app.value.name, temp_app.value.icon).Start(e => {
        e.Status = 'ok'
        ofApps.value.push(e)
        msg.success('创建成功')
        new_flag.value = false
      }, e => {
        msg.warning('创建失败: ' + e)
      })
    }
  })
}
</script>

<style scoped>

</style>