Skip to content

Commit

Permalink
Merge remote-tracking branch 'base/lesscode-develop' into lesscode-de…
Browse files Browse the repository at this point in the history 
…velop
  • Loading branch information
@ielgnaw
ielgnaw committed Aug 1, 2020
2 parents becc5c9 + 795d229 commit 1dfa1e4
Show file tree
Hide file tree
Showing 13 changed files with 216 additions and 26 deletions.
1 change: 1 addition & 0 deletions paas-ce/lesscode/lib/client/src/main.js
View file
Expand Up @@ -23,6 +23,7 @@ import { bus } from '@/common/bus'
import header from '@/components/header.vue'
import '@/common/bkmagic'
import '@icon-cool/bk-icon-vue-drag-vis'
import '@icon-cool/bk-icon-vue-drag-vis/src/index'
import VueContextMenu from '@xunlei/vue-context-menu'
import targetData from '@/common/targetData.js'

Expand Down
6 changes: 6 additions & 0 deletions paas-ce/lesscode/lib/client/src/store/modules/page.js
View file
Expand Up @@ -54,6 +54,12 @@ export default {
return http.post('/page/checkName', data).then(response => {
return response.data || ''
})
},
detail ({ commit }, { pageId }) {
return http.get(`/page/detail?pageId=${pageId}`).then(response => {
const data = response.data || ''
return data
})
}
}
}
11 changes: 11 additions & 0 deletions paas-ce/lesscode/lib/client/src/store/modules/project.js
View file
Expand Up @@ -14,10 +14,15 @@ import http from '@/api'
export default {
namespaced: true,
state: {
currentProject: {}
},
mutations: {
setCurrentProject (state, project) {
state.currentProject = Object.assign({}, project)
}
},
getters: {
getCurrentProject: state => state.currentProject
},
actions: {
create ({ commit }, { data, config }) {
Expand Down Expand Up @@ -54,6 +59,12 @@ export default {
return http.post('/project/checkname', data, config).then(response => {
return response
})
},
detail ({ commit }, { projectId }) {
return http.get(`/project/detail?projectId=${projectId}`).then(response => {
const data = response.data || ''
return data
})
}
}
}
43 changes: 40 additions & 3 deletions paas-ce/lesscode/lib/client/src/views/index/index.css
View file
Expand Up @@ -242,10 +242,47 @@ $headerHeight: 64px;
display: flex;
width: 300px;
align-items: center;
padding-left: 22px;
.page-name {
font-size: 16px;
color: #63656E;
.bk-drag-icon {
padding: 10px;
cursor: pointer;
}
.bk-drag-arrow-back {
font-size: 13px;
color: #3a84ff;
}
.template-logo svg{
vertical-align: middle;
}
.seperate-line {
width: 1px;
color: #d8d8d8;
margin: 0 -6px;
}
.name-content {
cursor: default;
margin-left: 10px;
width: 210px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span {
/* display: inline-block; */
display: inline-flex;
width: 105px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page-name-span {
font-size: 16px;
color: #313238;
}
.project-name-span {
font-size: 14px;
color: #979BA5;
}
}
}
}

Expand Down
105 changes: 87 additions & 18 deletions paas-ce/lesscode/lib/client/src/views/index/index.vue
View file
Expand Up @@ -13,8 +13,20 @@
<main class="app-main">
<div class="main-top">
<div class="page-title">
<div class="page-name" @click="generatePreviewImg">
可视化开发
<div class="page-name">
<i class="bk-drag-icon bk-drag-arrow-back" title="返回页面列表" @click="leavePage('pageList')"></i>
<span class="seperate-line">|</span>
<span class="bk-drag-icon template-logo" title="返回项目列表" @click="leavePage('projects')">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#bk-drag-template-logo"></use>
</svg>
</span>
<span class="seperate-line">|</span>
<span class="name-content" :title="`${pageDetail.pageName}【${projectDetail.projectName}】`">
{{ pageDetail.pageName }}【{{ projectDetail.projectName }}】
<!-- <span :title="pageDetail.pageName" class="page-name-span">{{ pageDetail.pageName }}</span>
【<span :title="projectDetail.projectName" class="project-name-span">{{ projectDetail.projectName }}</span>】 -->
</span>
</div>
</div>
<div class="function-and-tool">
Expand All @@ -26,6 +38,11 @@
<!-- <div class="action-item" v-bk-tooltips="{ content: '撤销', placements: ['bottom'] }">
<i class="bk-drag-icon bk-drag-undo"></i>
</div> -->
<div class="action-item" :class="actionSelected === 'save' ? 'active' : ''"
v-bk-tooltips="{ content: '保存', placements: ['bottom'] }"
@click="handleSave">
<i class="bk-drag-icon bk-drag-save"></i>
</div>
<div class="action-item" :class="actionSelected === 'preview' ? 'active' : ''"
v-bk-tooltips="{ content: '预览', placements: ['bottom'] }"
@click="handlePreview">
Expand Down Expand Up @@ -223,6 +240,8 @@
})
return {
pageDetail: {},
projectDetail: {},
componentList: componentList,
componentGroupList,
collapseSide: {
Expand Down Expand Up @@ -265,6 +284,14 @@
'copyData'
]),
projectId () {
return this.$route.params.projectId || ''
},
pageId () {
return this.$route.params.pageId || ''
},
mainContentClass () {
return {
'collapse-none': !this.collapseSide.left && !this.collapseSide.right,
Expand Down Expand Up @@ -304,7 +331,8 @@
return componentGroups
}
},
created () {
async created () {
this.pageDetail = await this.$store.dispatch('page/detail', { pageId: this.pageId }) || {}
const mockCurSelectComponentData = {
componentId: 'grid-' + uuid(),
renderKey: uuid(),
Expand All @@ -331,11 +359,22 @@
this.curDragingComponent = Object.assign({}, mockCurSelectComponentData)
// this.setCurSelectedComponentData(this.curDragingComponent)
this.setTargetData([this.curDragingComponent])
window.addEventListener('keydown', this.quickOperation)
window.addEventListener('keyup', this.judgeCtrl)
window.addEventListener('click', this.toggleQuickOperation, true)
// 设置初始targetData
let initData = []
try {
initData = this.pageDetail.content ? JSON.parse(this.pageDetail.content) : [this.curDragingComponent]
this.refreshDragAreaKey = +new Date()
} catch (err) {
initData = [this.curDragingComponent]
this.$bkMesseage({
theme: 'error',
message: 'targetData格式错误'
})
}
this.setTargetData(initData)
this.projectDetail = await this.$store.dispatch('project/detail', { projectId: this.projectId }) || {}
// for test
window.test = this.test
Expand All @@ -346,6 +385,11 @@
this.getAllGroupFuncs(projectId).catch((err) => {
this.$bkMessage({ theme: 'error', message: err.message || err })
})
window.addEventListener('keydown', this.quickOperation)
window.addEventListener('keyup', this.judgeCtrl)
window.addEventListener('click', this.toggleQuickOperation, true)
window.addEventListener('beforeunload', function (e) {
const confirmationMessage = '...';
(e || window.event).returnValue = confirmationMessage
Expand Down Expand Up @@ -847,19 +891,28 @@
})
},
generatePreviewImg () {
if (this.actionSelected !== 'edit' || !this.$route.params.pageId) return
html2canvas(document.querySelector('.main-content')).then((canvas) => {
const imgData = canvas.toDataURL('image/png')
this.$store.dispatch('page/update', {
data: {
pageData: {
id: parseInt(this.$route.params.pageId),
previewImg: imgData
handleSave () {
try {
html2canvas(document.querySelector('.main-content')).then((canvas) => {
const imgData = canvas.toDataURL('image/png')
const res = this.$store.dispatch('page/update', {
data: {
pageData: {
id: parseInt(this.$route.params.pageId),
content: JSON.stringify(this.targetData),
sourceCode: this.getCode(),
previewImg: this.actionSelected !== 'vueCode' ? imgData : undefined
}
}
}
})
res && this.$bkMessage({
theme: 'success',
message: '保存成功'
})
})
})
} catch (err) {
console.log(err)
}
},
/**
* 跳转到开源版 github
Expand All @@ -875,6 +928,22 @@
window.open(routerUrl.href, '_blank')
},
leavePage (routeName) {
this.$bkInfo({
title: '确认离开?',
subTitle: `离开页面前请确认相应的修改已保存`,
confirmFn: async () => {
this.$router.push({
name: routeName,
params: {
projectId: this.projectId,
pageId: this.pageId
}
})
}
})
},
test () {
console.warn(JSON.stringify(this.targetData))
console.warn(this.targetData)
Expand Down
25 changes: 24 additions & 1 deletion paas-ce/lesscode/lib/client/src/views/preview/index.vue
View file
Expand Up @@ -53,16 +53,27 @@
mixins: [codeMixin],
data () {
return {
pageDetail: {},
pageType: 'preview',
comp: 'LoadingComponent',
isLoading: false,
targetData: [],
minHeight: 0
}
},
computed: {
fromPageList () {
return this.$route.query.type && this.$route.query.type === 'fromList'
}
},
async created () {
const projectId = this.$route.params.projectId || 1
await this.getAllGroupFuncs(projectId)
if (this.fromPageList) {
this.pageDetail = await this.$store.dispatch('page/detail', { pageId: this.$route.params.pageId })
}
await this.loadFile()
},
mounted () {
Expand All @@ -79,7 +90,19 @@
async loadFile () {
this.isLoading = true
this.targetData = JSON.parse(localStorage.getItem('layout-target-data'))
try {
if (this.fromPageList) {
this.targetData = JSON.parse(this.pageDetail.content)
} else {
this.targetData = JSON.parse(localStorage.getItem('layout-target-data'))
}
} catch (err) {
this.$bkMesseage({
theme: 'error',
message: 'targetData格式错误'
})
}
let code = this.getCode().replace('export default', 'module.exports =')
code = code.replace('components: { chart: ECharts },', '')
const res = httpVueLoader(code)
Expand Down
2 changes: 1 addition & 1 deletion paas-ce/lesscode/lib/client/src/views/project/index.vue
View file
Expand Up @@ -38,7 +38,7 @@
{
title: '页面列表',
icon: 'list-fill',
toPath: 'page'
toPath: 'pages'
},
{
title: '函数库',
Expand Down
2 changes: 1 addition & 1 deletion paas-ce/lesscode/lib/client/src/views/project/page.vue
View file
Expand Up @@ -178,7 +178,7 @@
})
return
}
window.open('/preview', '_blank')
window.open(`/project/${this.projectId}/page/${page.id}/preview?type=fromList`, '_blank')
},
handleSearch (clear = false) {
if (clear) {
Expand Down
18 changes: 18 additions & 0 deletions paas-ce/lesscode/lib/server/controller/page.js
View file
Expand Up @@ -132,3 +132,21 @@ export const checkName = async (ctx) => {
})
}
}

// 页面详情
export const pageDetail = async (ctx) => {
try {
const { pageId } = ctx.request.query
const queryParams = Object.assign({}, { id: pageId }, { deleteFlag: 0 })
const detail = await getRepository(Page).findOne(queryParams)
ctx.send({
code: 0,
message: 'OK',
data: detail
})
} catch (err) {
ctx.throwError({
message: err.message || err
})
}
}
16 changes: 16 additions & 0 deletions paas-ce/lesscode/lib/server/controller/project.js
View file
Expand Up @@ -221,5 +221,21 @@ module.exports = {
} catch (e) {
ctx.throw(e)
}
},

async projectDetail (ctx) {
try {
const { projectId } = ctx.request.query
const detail = await projectModel.findProjectDetail({ id: projectId })
ctx.send({
code: 0,
message: 'OK',
data: detail
})
} catch (err) {
ctx.throwError({
message: err.message
})
}
}
}
5 changes: 5 additions & 0 deletions paas-ce/lesscode/lib/server/model/project.js
View file
Expand Up @@ -117,6 +117,11 @@ export default {
return getRepository(Project).findOne({ projectCode })
},

findProjectDetail (params) {
const queryParams = Object.assign({}, params, { deleteFlag: 0 })
return getRepository(Project).findOne(queryParams)
},

queryAllProject ({ condition = '', params = {} }) {
return getRepository(Project)
.createQueryBuilder('project')
Expand Down

0 comments on commit 1dfa1e4

Please sign in to comment.