Skip to content

Commit

Permalink
feat(server-client): impl apps & functions pages;
Browse files Browse the repository at this point in the history
  • Loading branch information
@maslow
maslow committed Sep 2, 2021
1 parent 3abeb9d commit fe4ae60
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 84 deletions.
68 changes: 52 additions & 16 deletions packages/system-client/src/views/application/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,42 @@
新建
</el-button>
</div>
<el-table v-loading="loading" :data="applications.created" style="width: 100%;margin-top:30px;" border>
<el-table-column align="center" label="App ID" width="220">
<el-table v-loading="loading" empty-text="-" :data="applications.created" style="width: 100%;margin-top:10px;" stripe>
<el-table-column align="center" label="App ID" width="320">
<template slot-scope="scope">
{{ scope.row._id }}
<div class="table-row">
<div> {{ scope.row.appid }}</div>
<i v-clipboard:message="scope.row._id" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
</div>
</template>
</el-table-column>
<el-table-column align="center" label="应用名" width="220">
<el-table-column align="center" label="应用名" width="300">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column align="center" label="App Secret">
<el-table-column align="center" label="App Secret" width="300">
<template slot-scope="scope">
{{ scope.row.app_secret }}
<div class="table-row">
<div class="app-secret">{{ scope.row.app_secret }}</div>
<i v-clipboard:message="scope.row.app_secret" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
</div>
</template>
</el-table-column>
<el-table-column align="center" label="Status" width="100">
<el-table-column align="center" label="Status" width="300">
<template slot-scope="scope">
{{ scope.row.status }}
</template>
</el-table-column>
<el-table-column label="创建/更新时间" width="150px" align="center">
<el-table-column label="创建/更新时间" align="center">
<template slot-scope="{row}">
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
<span v-else>-</span>
<br>
<span v-if="row.updated_at">{{ row.updated_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="380" class-name="small-padding">
<template slot-scope="{row,$index}">
<el-button plain type="primary" size="mini" @click="showUpdateForm(row)">
编辑
</el-button>
<el-button plain type="primary" size="mini" @click="showUpdateForm(row)">
<el-button plain type="primary" size="mini" @click="toDetail(row)">
管理
</el-button>
<el-button plain size="mini" type="danger" @click="handleDelete(row,$index)">
Expand Down Expand Up @@ -82,8 +82,20 @@ export default {
this.applications.created = created
this.applications.joined = joined
},
toDetail(app) {
const route_url = this.$router.resolve({
path: `/app/${app.appid}/dashboard/index`
})
window.open(route_url.href, '_blank')
// this.$router.push({
// path: `/app/${app.appid}/dashboard/index`
// })
},
async deleteApp() {
this.$message('尚未实现此功能')
},
onCopy() {
this.$message.success('已复制')
}
}
}
Expand All @@ -92,5 +104,29 @@ export default {
<style scoped>
.application-container {
padding: 20px;
width: calc(100vw - 30px);
margin: 15px auto;
box-shadow: -1px -1px 5px 0 rgb(0 0 0 / 10%);
background: white;
}
.table-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.app-secret {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 240px;
}
.copy-btn {
display: block;
font-size: 16px;
margin-left: 10px;
cursor: pointer;
}
</style>
47 changes: 47 additions & 0 deletions packages/system-client/src/views/dashboard/index.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<template>
<div class="application-container">
<div class="welcome">
欢迎使用 LaF 云开发！
</div>
<div class="introduce">
使用文档:
<a style="color: blue" target="_blank" href="https://laf.laogen.site/">https://laf.laogen.site/</a>
</div>
</div>
</template>

<script>
export default {
name: 'Dashboard',
components: { },
data() {
return {}
},
async created() {
},
methods: {
}
}
</script>

<style scoped>
.application-container {
padding-top: 200px;
}
.welcome {
width: 400px;
margin: 0 auto;
font-size: 26px;
color: rgba(218, 165, 32)
}
.introduce {
width: 400px;
margin: 0 auto;
text-align: left;
margin-top: 20px;
color: rgb(126, 123, 123);
}
</style>
101 changes: 33 additions & 68 deletions packages/system-client/src/views/development/functions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<el-button size="mini" class="filter-item" type="default" icon="el-icon-search" @click="handleFilter">
搜索
</el-button>
<el-button v-permission="'function.create'" plain size="mini" class="filter-item" type="primary" icon="el-icon-plus" @click="showCreateForm">
<el-button plain size="mini" class="filter-item" type="primary" icon="el-icon-plus" @click="showCreateForm">
新建函数
</el-button>
<el-button type="default" size="mini" plain class="filter-item" @click="deployPanelVisible = true">远程部署</el-button>
Expand All @@ -32,7 +32,6 @@

<!-- 表格 -->
<el-table
:key="tableKey"
v-loading="listLoading"
:data="list"
border
Expand Down Expand Up @@ -88,19 +87,17 @@
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="380" class-name="small-padding">
<template slot-scope="{row,$index}">
<!-- <el-button v-permission="'function.edit'" type="primary" size="mini" @click="showUpdateForm(row)">
编辑
</el-button> -->
<el-button v-permission="'function.debug'" plain type="success" size="mini" @click="handleShowDetail(row)">

<el-button plain type="success" size="mini" @click="handleShowDetail(row)">
调试
</el-button>
<el-button v-permission="'function.debug'" plain type="info" size="mini" @click="handleShowLogs(row)">
<el-button plain type="info" size="mini" @click="handleShowLogs(row)">
日志
</el-button>
<el-button v-permission="'function.edit'" plain type="primary" size="mini" @click="handleTriggers(row)">
<el-button plain type="primary" size="mini" @click="handleTriggers(row)">
触发器
</el-button>
<el-button v-if="row.status!='deleted'" v-permission="'function.delete'" plain size="mini" type="danger" @click="handleDelete(row,$index)">
<el-button v-if="row.status!='deleted'" plain size="mini" type="danger" @click="handleDelete(row,$index)">
删除
</el-button>
</template>
Expand Down Expand Up @@ -165,15 +162,16 @@
</el-dialog>

<!-- 部署面板 -->
<deploy-panel v-model="deployPanelVisible" :functions="deploy_functions" />
<!-- <deploy-panel v-model="deployPanelVisible" :functions="deploy_functions" /> -->
</div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { db } from '../../api/cloud'
import DeployPanel from '../deploy/components/deploy-panel.vue'
// import DeployPanel from '../deploy/components/deploy-panel.vue'
import { Constants } from '../../api/constants'
import { createFunction, getFunctions } from '@/api/func'
const defaultCode = `
import cloud from '@/cloud-sdk'
Expand Down Expand Up @@ -205,6 +203,7 @@ function getDefaultFormValue() {
created_at: Date.now(),
updated_at: Date.now(),
code: defaultCode,
// 标签输入框绑定使用，不要提交到服务端
_tag_input: ''
}
}
Expand All @@ -216,7 +215,10 @@ const formRules = {
export default {
name: 'FunctionListPage',
components: { Pagination, DeployPanel },
components: {
Pagination
// DeployPanel
},
directives: { },
filters: {
statusFilter(status) {
Expand All @@ -230,7 +232,6 @@ export default {
},
data() {
return {
tableKey: 0,
list: null,
total: 0,
listLoading: true,
Expand All @@ -254,28 +255,27 @@ export default {
deployPanelVisible: false
}
},
computed: {
appid() {
return this.app.appid
},
app() {
return this.$store.state.app.application
}
},
watch: {
list() {
this.deploy_functions = this.list
}
},
created() {
async mounted() {
this.getList()
},
methods: {
/** 获取所有标签 */
async getAllTags() {
const r = await db.collection(Constants.cn.functions)
.field(['tags'])
.where({
tags: db.command.exists(true)
})
.get()
// TODO
const tags = []
for (const item of r.data) {
tags.push(...(item?.tags || []))
}
this.all_tags = Array.from(new Set(tags))
},
/**
Expand All @@ -284,44 +284,15 @@ export default {
async getList() {
this.listLoading = true
// 拼装查询条件 by this.listQuery
const { limit, page, keyword, tag, onlyEnabled } = this.listQuery
const query = { }
if (keyword) {
query['$or'] = [
{ name: db.RegExp({ regexp: `.*${keyword}.*` }) },
{ label: db.RegExp({ regexp: `.*${keyword}.*` }) },
{ description: db.RegExp({ regexp: `.*${keyword}.*` }) }
]
}
if (keyword) { query['keyword'] = keyword }
if (tag !== '') { query['tag'] = tag }
if (onlyEnabled) { query['status'] = 1 }
if (tag !== '') {
query['tags'] = tag
}
if (onlyEnabled) {
query['status'] = 1
}
// 执行数据查询
const res = await db.collection(Constants.cn.functions)
.where(query)
.limit(limit)
.skip((page - 1) * limit)
.get()
.catch(() => { this.listLoading = false })
this.list = res.data
// 获取数据总数
const { total } = await db.collection(Constants.cn.functions)
.where(query)
.limit(limit)
.skip((page - 1) * limit)
.count()
.catch(() => { this.listLoading = false })
this.total = total
const ret = await getFunctions(this.appid, query, page, limit)
this.total = ret.total
this.list = ret.data
this.listLoading = false
this.getAllTags()
},
Expand All @@ -343,29 +314,23 @@ export default {
handleCreate() {
this.$refs['dataForm'].validate(async(valid) => {
if (!valid) { return }
const data = Object.assign({}, this.form)
delete data['_tag_input']
// 执行创建请求
const r = await db.collection(Constants.cn.functions)
.add(data)
if (!r.id) {
const res = await createFunction(this.appid, data)
if (!res.data?.id) {
this.$notify({
type: 'error',
title: '操作失败',
message: '创建失败！' + r.error
message: '创建失败！' + res.error
})
return
}
this.$notify({
type: 'success',
title: '操作成功',
message: '创建成功！'
})
this.getList()
this.dialogFormVisible = false
})
Expand Down

0 comments on commit fe4ae60

Please sign in to comment.