From 8bbb8c7e9b503bdc02091f722ee3288605dc02f6 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Tue, 30 Mar 2021 19:01:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E8=A3=85=E6=9D=A1=E4=BB=B6?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widget/service/WidgetService.js | 15 +- .../serviceImpl/ButtonSureServiceImpl.js | 42 +++++ .../widget/serviceImpl/TimeYearServiceImpl.js | 40 +++++ .../widget/serviceImpl/WidgetServiceImpl.js | 30 ++-- frontend/src/views/panel/edit/index.vue | 16 +- frontend/src/views/panel/filter/index.vue | 159 +++++++++++++++--- 6 files changed, 260 insertions(+), 42 deletions(-) create mode 100644 frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js create mode 100644 frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js diff --git a/frontend/src/components/widget/service/WidgetService.js b/frontend/src/components/widget/service/WidgetService.js index ce6afea887..65f811a991 100644 --- a/frontend/src/components/widget/service/WidgetService.js +++ b/frontend/src/components/widget/service/WidgetService.js @@ -1,8 +1,21 @@ import store from '@/store' +export const commonStyle = { + rotate: 0, + opacity: 1 +} + +export const commonAttr = { + animations: [], + events: {}, + groupStyle: {}, // 当一个组件成为 Group 的子组件时使用 + isLock: false // 是否锁定组件 +} export class WidgetService { constructor(options) { this.name = options.name - console.log('init parent class WidgetService') + options = { ...commonAttr, ...options } + Object.assign(this, options) + this.style = { ...commonStyle, ...options.style } this.storeWidget() } storeWidget() { diff --git a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js new file mode 100644 index 0000000000..77bd73541e --- /dev/null +++ b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js @@ -0,0 +1,42 @@ +import { WidgetService } from '../service/WidgetService' +const defaultOptions = { + name: 'buttonSureWidget', + icon: null, + label: '确定', + style: { + width: 100, + height: 34, + borderWidth: '', + borderColor: '', + borderRadius: '', + fontSize: 14, + fontWeight: 500, + lineHeight: '', + letterSpacing: 0, + textAlign: '', + color: '', + backgroundColor: '' + }, + propValue: '按钮', + component: 'v-button' +} + +class ButtonSureServiceImpl extends WidgetService { + constructor(options) { + Object.assign(options, defaultOptions) + super(options) + } + + initWidget() { + // console.log('this is first initWidget') + } + toDrawWidget() { + // console.log('this is first toDrawWidget') + } + // 移动到画布之前回掉 + beforeToDraw() { + + } +} +const buttonSureServiceImpl = new ButtonSureServiceImpl({ name: 'buttonSureWidget' }) +export default buttonSureServiceImpl diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js new file mode 100644 index 0000000000..cdb5deda34 --- /dev/null +++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js @@ -0,0 +1,40 @@ +import { WidgetService } from '../service/WidgetService' +const defaultOptions = { + name: 'timeYearWidget', + icon: null, + label: '年份', + style: { + width: 200, + height: 22, + fontSize: 14, + fontWeight: 500, + lineHeight: '', + letterSpacing: 0, + textAlign: '', + color: '' + }, + deProp: { + type: 'year' + }, + component: 'el-date-picker' +} + +class TimeYearServiceImpl extends WidgetService { + constructor(options) { + Object.assign(options, defaultOptions) + super(options) + } + + initWidget() { + // console.log('this is first initWidget') + } + toDrawWidget() { + // console.log('this is first toDrawWidget') + } + // 移动到画布之前回掉 + beforeToDraw() { + + } +} +const timeYearServiceImpl = new TimeYearServiceImpl({ name: 'timeYearWidget' }) +export default timeYearServiceImpl diff --git a/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js b/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js index 0e4f28d254..8d437ba9af 100644 --- a/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js +++ b/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js @@ -1,16 +1,16 @@ -import { WidgetService } from '../service/WidgetService' -class WidgetServiceImpl extends WidgetService { - constructor(options) { - super(options) - console.log('init child class WidgetServiceImpl') - } +// import { WidgetService } from '../service/WidgetService' +// class WidgetServiceImpl extends WidgetService { +// constructor(options) { +// super(options) +// console.log('init child class WidgetServiceImpl') +// } - initWidget() { - console.log('this is first initWidget') - } - toDrawWidget() { - console.log('this is first toDrawWidget') - } -} -const widgetServiceImpl = new WidgetServiceImpl({ name: 'testWidget' }) -export default widgetServiceImpl +// initWidget() { +// console.log('this is first initWidget') +// } +// toDrawWidget() { +// console.log('this is first toDrawWidget') +// } +// } +// const widgetServiceImpl = new WidgetServiceImpl({ name: 'testWidget' }) +// export default widgetServiceImpl diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index e9b0d818c2..9c5b6da8c2 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -92,7 +92,7 @@ import '@/components/canvas/assets/iconfont/iconfont.css' import '@/components/canvas/styles/animate.css' import 'element-ui/lib/theme-chalk/index.css' import '@/components/canvas/styles/reset.css' - +import { ApplicationContext } from '@/utils/ApplicationContext' export default { components: { DeMainContainer, @@ -249,11 +249,13 @@ export default { debugger // 其他组件设置 - componentList.forEach(componentTemp => { - if (componentInfo.id === componentTemp.id) { - component = deepCopy(componentTemp) - } - }) + // componentList.forEach(componentTemp => { + // if (componentInfo.id === componentTemp.id) { + // component = deepCopy(componentTemp) + // } + // }) + + component = deepCopy(ApplicationContext.getService(componentInfo.id)) component.style.top = e.offsetY component.style.left = e.offsetX @@ -329,7 +331,7 @@ export default { .leftPanel { width: 100%; - max-width: 200px; + max-width: 240px; height: calc(100vh - 91px); position: fixed; top: 91px; diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue index e4f3c1cfe2..7b72888cc5 100644 --- a/frontend/src/views/panel/filter/index.vue +++ b/frontend/src/views/panel/filter/index.vue @@ -1,7 +1,8 @@ @@ -29,12 +46,25 @@ export default { name: 'FilterGroup', data() { return { - componentList + componentList, + widgetSubjects: { + '时间过滤组件': [ + 'timeYearWidget' + ], + '按钮': [ + 'buttonSureWidget' + ] + } } }, - mounted() { - const wid = ApplicationContext.getService('testWidget') - console.log(wid) + created() { + for (const key in this.widgetSubjects) { + const widgetNames = this.widgetSubjects[key] + this.widgetSubjects[key] = widgetNames.map(widgetName => { + const widget = ApplicationContext.getService(widgetName) + return widget + }) + } }, methods: { @@ -52,26 +82,117 @@ export default {