88 行
2.5 KiB
Vue
88 行
2.5 KiB
Vue
<script setup lang="ts">
|
|
// @ts-ignore
|
|
import API from "@/api/index.js"
|
|
import { ref } from "vue"
|
|
import { PriceTag } from "@element-plus/icons-vue"
|
|
import { ElMessage } from "element-plus"
|
|
|
|
const Api = API
|
|
const appList = ref([])
|
|
const init = () => {
|
|
Api.appList({ type: "APP" }).then((res) => {
|
|
appList.value = res
|
|
})
|
|
}
|
|
const appCreate = () => {
|
|
ElMessage.success("新建应用成功")
|
|
Api.appCreate({ type: "APP", appName: name.value }).then(() => {
|
|
init()
|
|
showDialog.value = false
|
|
})
|
|
}
|
|
const name = ref(undefined)
|
|
const showDialog = ref(false)
|
|
const detail = ref(undefined)
|
|
const showDetailsDialog = ref(false)
|
|
const addApp = () => {
|
|
name.value = undefined
|
|
showDialog.value = true
|
|
}
|
|
const showApp = (scope) => {
|
|
detail.value = undefined
|
|
// showDetailsDialog.value = true
|
|
}
|
|
init()
|
|
</script>
|
|
|
|
<template>
|
|
<el-card style="margin-top: 20px">
|
|
<template #header>
|
|
<el-button @click="addApp">新建应用</el-button>
|
|
</template>
|
|
<el-table :data="appList" style="width: 100%">
|
|
<el-table-column type="index" width="150" label="序号" />
|
|
<el-table-column prop="appName" label="应用名称" />
|
|
<el-table-column prop="createTime" label="创建时间" />
|
|
<el-table-column fixed="right" label="操作" min-width="120">
|
|
<template #default="scope">
|
|
<el-button link type="primary" size="small" @click="showApp(scope.row)"> 详情 </el-button>
|
|
<el-button link type="primary" size="small">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<el-dialog v-model="showDialog" title="新建应用" width="500">
|
|
<el-input
|
|
class="text item"
|
|
v-model="name"
|
|
style="width: 440px"
|
|
placeholder="请输入应用名称"
|
|
:prefix-icon="PriceTag"
|
|
:clearable="true"
|
|
/>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="showDialog = false">Cancel</el-button>
|
|
<el-button type="primary" @click="appCreate"> Confirm</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
<el-dialog v-model="showDetailsDialog" title="应用信息" width="500">
|
|
<el-input
|
|
class="text item"
|
|
v-model="name"
|
|
style="width: 440px"
|
|
placeholder="请输入应用名称"
|
|
:prefix-icon="PriceTag"
|
|
:clearable="true"
|
|
/>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="showDetailsDialog = false"> 关闭</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|
