From ebf90fb02afce5a8db5d037350724a1bac152dd3 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Wed, 31 Mar 2021 18:23:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E8=A7=A3=E5=81=B6=20?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=BB=A7=E6=89=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 1 + .../canvas/components/Editor/index.vue | 19 ++- .../components/widget/DeWidget/DeButton.vue | 43 ++++++ .../src/components/widget/DeWidget/DeDate.vue | 27 ++++ .../widget/DeWidget/DeDrawingWidget.vue | 20 +++ .../widget/DeWidget/DeInputSearch.vue | 34 +++++ .../components/widget/DeWidget/DeQuarter.vue | 24 +++ .../components/widget/DeWidget/DeSelect.vue | 38 +++++ .../src/components/widget/DeWidget/index.vue | 32 ---- .../widget/DeWidget/sources/ElQuarter.vue | 138 ++++++++++++++++++ frontend/src/components/widget/index.js | 32 ++++ .../widget/service/WidgetService.js | 1 + .../serviceImpl/ButtonSureServiceImpl.js | 11 +- .../serviceImpl/TextInputServiceImpl.js | 48 ++++++ .../serviceImpl/TextSelectServiceImpl.js | 67 +++++++++ .../serviceImpl/TimeDateRangeServiceImpl.js | 47 ++++++ .../widget/serviceImpl/TimeDateServiceImpl.js | 45 ++++++ .../serviceImpl/TimeMonthServiceImpl.js | 45 ++++++ .../serviceImpl/TimeQuarterServiceImpl.js | 45 ++++++ .../widget/serviceImpl/TimeYearServiceImpl.js | 11 +- .../widget/serviceImpl/WidgetServiceImpl.js | 16 -- frontend/src/main.js | 4 +- frontend/src/views/panel/filter/index.vue | 11 +- 23 files changed, 698 insertions(+), 61 deletions(-) create mode 100644 frontend/src/components/widget/DeWidget/DeButton.vue create mode 100644 frontend/src/components/widget/DeWidget/DeDate.vue create mode 100644 frontend/src/components/widget/DeWidget/DeDrawingWidget.vue create mode 100644 frontend/src/components/widget/DeWidget/DeInputSearch.vue create mode 100644 frontend/src/components/widget/DeWidget/DeQuarter.vue create mode 100644 frontend/src/components/widget/DeWidget/DeSelect.vue delete mode 100644 frontend/src/components/widget/DeWidget/index.vue create mode 100644 frontend/src/components/widget/DeWidget/sources/ElQuarter.vue create mode 100644 frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js create mode 100644 frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js create mode 100644 frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js create mode 100644 frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js create mode 100644 frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js create mode 100644 frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js delete mode 100644 frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js diff --git a/frontend/package.json b/frontend/package.json index 624bb6fe5f..7715db9315 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,6 +22,7 @@ "fit2cloud-ui": "^0.1.12", "js-cookie": "2.2.0", "jsencrypt": "^3.0.0-rc.1", + "lodash": "4.17.21", "normalize.css": "7.0.0", "nprogress": "0.2.0", "screenfull": "4.2.0", diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index 3a3d49283d..4a09bed1cd 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -24,14 +24,14 @@ :index="index" :class="{ lock: item.isLock }" > - + diff --git a/frontend/src/components/widget/DeWidget/DeButton.vue b/frontend/src/components/widget/DeWidget/DeButton.vue new file mode 100644 index 0000000000..3139c3a308 --- /dev/null +++ b/frontend/src/components/widget/DeWidget/DeButton.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue new file mode 100644 index 0000000000..a65add192b --- /dev/null +++ b/frontend/src/components/widget/DeWidget/DeDate.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue b/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue new file mode 100644 index 0000000000..e2bd714dd3 --- /dev/null +++ b/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue @@ -0,0 +1,20 @@ + diff --git a/frontend/src/components/widget/DeWidget/DeInputSearch.vue b/frontend/src/components/widget/DeWidget/DeInputSearch.vue new file mode 100644 index 0000000000..4626a4b688 --- /dev/null +++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/frontend/src/components/widget/DeWidget/DeQuarter.vue b/frontend/src/components/widget/DeWidget/DeQuarter.vue new file mode 100644 index 0000000000..4a12aab453 --- /dev/null +++ b/frontend/src/components/widget/DeWidget/DeQuarter.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue new file mode 100644 index 0000000000..bac27f0966 --- /dev/null +++ b/frontend/src/components/widget/DeWidget/DeSelect.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/frontend/src/components/widget/DeWidget/index.vue b/frontend/src/components/widget/DeWidget/index.vue deleted file mode 100644 index b7e3e949ae..0000000000 --- a/frontend/src/components/widget/DeWidget/index.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - diff --git a/frontend/src/components/widget/DeWidget/sources/ElQuarter.vue b/frontend/src/components/widget/DeWidget/sources/ElQuarter.vue new file mode 100644 index 0000000000..b9f92cd378 --- /dev/null +++ b/frontend/src/components/widget/DeWidget/sources/ElQuarter.vue @@ -0,0 +1,138 @@ + + diff --git a/frontend/src/components/widget/index.js b/frontend/src/components/widget/index.js index 6a389c4a8a..3c251de807 100644 --- a/frontend/src/components/widget/index.js +++ b/frontend/src/components/widget/index.js @@ -1,4 +1,36 @@ // import store from '@/store' + +import Vue from 'vue' +import upperFirst from 'lodash/upperFirst' +import camelCase from 'lodash/camelCase' + +const requireComponent = require.context('./DeWidget', true, /\.vue$/) + +requireComponent.keys().forEach(fileName => { + // 获取组件配置 + const componentConfig = requireComponent(fileName) + // 这个地方直接传入filename其实就是内部会调用了resolve方法，会返回对应的文件内容（不理解可以console一下看看） + // 获取组件的 PascalCase 命名 + const componentName = upperFirst( + camelCase( + // 获取和目录深度无关的文件名 + fileName + .split('/') + .pop() + .replace(/\.\w+$/, '') + ) + ) + + // 全局注册组件 + Vue.component( + componentName, + // 如果这个组件选项是通过 `export default` 导出的， + // 那么就会优先使用 `.default`， + // 否则回退到使用模块的根。 + componentConfig.default || componentConfig + ) +}) + const req = require.context('./serviceImpl', false, /\.js$/) const requireAll = requireContext => requireContext.keys() diff --git a/frontend/src/components/widget/service/WidgetService.js b/frontend/src/components/widget/service/WidgetService.js index 65f811a991..2962c5dd2a 100644 --- a/frontend/src/components/widget/service/WidgetService.js +++ b/frontend/src/components/widget/service/WidgetService.js @@ -16,6 +16,7 @@ export class WidgetService { options = { ...commonAttr, ...options } Object.assign(this, options) this.style = { ...commonStyle, ...options.style } + this.type = 'custom' this.storeWidget() } storeWidget() { diff --git a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js index 77bd73541e..46e32bfd69 100644 --- a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js +++ b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js @@ -17,8 +17,15 @@ const defaultOptions = { color: '', backgroundColor: '' }, - propValue: '按钮', - component: 'v-button' + component: 'de-button', + options: { + refId: '1234567890', + attrs: { + type: 'primary', + round: true + }, + value: '测试按钮' + } } class ButtonSureServiceImpl extends WidgetService { diff --git a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js new file mode 100644 index 0000000000..093fc1ce4a --- /dev/null +++ b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js @@ -0,0 +1,48 @@ +import { WidgetService } from '../service/WidgetService' +const defaultOptions = { + name: 'textInputWidget', + icon: null, + label: '文本搜索', + style: { + width: 100, + height: 34, + borderWidth: '', + borderColor: '', + borderRadius: '', + fontSize: 14, + fontWeight: 500, + lineHeight: '', + letterSpacing: 0, + textAlign: '', + color: '', + backgroundColor: '' + }, + component: 'de-input-search', + options: { + refId: '1234567890', + attrs: { + placeholder: '请输入关键字' + }, + value: '' + } +} + +class TextInputServiceImpl 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 textInputServiceImpl = new TextInputServiceImpl({ name: 'textInputWidget' }) +export default textInputServiceImpl diff --git a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js new file mode 100644 index 0000000000..8b1aef61fc --- /dev/null +++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js @@ -0,0 +1,67 @@ +import { WidgetService } from '../service/WidgetService' +const defaultOptions = { + name: 'textSelectWidget', + icon: null, + label: '文本下拉', + style: { + width: 200, + height: 22, + fontSize: 14, + fontWeight: 500, + lineHeight: '', + letterSpacing: 0, + textAlign: '', + color: '' + }, + options: { + refId: '1234567890', + attrs: { + multiple: false, + placeholder: '请选择', + datas: [ + { + id: '0', + text: '北京' + }, + { + id: '1', + text: '上海' + }, + { + id: '2', + text: '广东' + }, + { + id: '3', + text: '深圳' + } + + ], + key: 'id', + label: 'text', + value: 'id' + }, + value: '' + }, + component: 'de-select' +} + +class TextSelectServiceImpl 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 textSelectServiceImpl = new TextSelectServiceImpl({ name: 'textSelectWidget' }) +export default textSelectServiceImpl diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js new file mode 100644 index 0000000000..c33a47e36d --- /dev/null +++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js @@ -0,0 +1,47 @@ +import { WidgetService } from '../service/WidgetService' +const defaultOptions = { + name: 'timeDateRangeWidget', + icon: null, + label: '日期范围', + style: { + width: 200, + height: 22, + fontSize: 14, + fontWeight: 500, + lineHeight: '', + letterSpacing: 0, + textAlign: '', + color: '' + }, + options: { + refId: '1234567890', + attrs: { + type: 'daterange', + rangeSeparator: '至', + startPlaceholder: '开始日期', + endPlaceholder: '结束日期' + }, + value: '' + }, + component: 'de-date' +} + +class TimeDateRangeServiceImpl 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 timeDateRangeServiceImpl = new TimeDateRangeServiceImpl({ name: 'timeDateRangeWidget' }) +export default timeDateRangeServiceImpl diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js new file mode 100644 index 0000000000..4b60da71ab --- /dev/null +++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js @@ -0,0 +1,45 @@ +import { WidgetService } from '../service/WidgetService' +const defaultOptions = { + name: 'timeDateWidget', + icon: null, + label: '日期', + style: { + width: 200, + height: 22, + fontSize: 14, + fontWeight: 500, + lineHeight: '', + letterSpacing: 0, + textAlign: '', + color: '' + }, + options: { + refId: '1234567890', + attrs: { + type: 'date', + placeholder: '请选择日期' + }, + value: '' + }, + component: 'de-date' +} + +class TimeDateServiceImpl 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 timeDateServiceImpl = new TimeDateServiceImpl({ name: 'timeDateWidget' }) +export default timeDateServiceImpl diff --git a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js new file mode 100644 index 0000000000..a83d14b716 --- /dev/null +++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js @@ -0,0 +1,45 @@ +import { WidgetService } from '../service/WidgetService' +const defaultOptions = { + name: 'timeMonthWidget', + icon: null, + label: '年月', + style: { + width: 200, + height: 22, + fontSize: 14, + fontWeight: 500, + lineHeight: '', + letterSpacing: 0, + textAlign: '', + color: '' + }, + options: { + refId: '1234567890', + attrs: { + type: 'month', + placeholder: '请选择年月' + }, + value: '' + }, + component: 'de-date' +} + +class TimeMonthServiceImpl 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 timeMonthServiceImpl = new TimeMonthServiceImpl({ name: 'timeMonthWidget' }) +export default timeMonthServiceImpl diff --git a/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js new file mode 100644 index 0000000000..f56aae1cb8 --- /dev/null +++ b/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js @@ -0,0 +1,45 @@ +import { WidgetService } from '../service/WidgetService' +const defaultOptions = { + name: 'timeQuarterWidget', + icon: null, + label: '季度', + style: { + width: 200, + height: 22, + fontSize: 14, + fontWeight: 500, + lineHeight: '', + letterSpacing: 0, + textAlign: '', + color: '' + }, + options: { + refId: '1234567890', + attrs: { + + placeholder: '请选择季度' + }, + value: '' + }, + component: 'de-quarter' +} + +class TimeQuarterServiceImpl 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 timeQuarterServiceImpl = new TimeQuarterServiceImpl({ name: 'timeQuarterWidget' }) +export default timeQuarterServiceImpl diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js index cdb5deda34..ac097ab1f8 100644 --- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js +++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js @@ -13,10 +13,15 @@ const defaultOptions = { textAlign: '', color: '' }, - deProp: { - type: 'year' + options: { + refId: '1234567890', + attrs: { + type: 'year', + placeholder: '请选择年份' + }, + value: '' }, - component: 'el-date-picker' + component: 'de-date' } class TimeYearServiceImpl extends WidgetService { diff --git a/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js b/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js deleted file mode 100644 index 8d437ba9af..0000000000 --- a/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js +++ /dev/null @@ -1,16 +0,0 @@ -// 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 diff --git a/frontend/src/main.js b/frontend/src/main.js index 13568c7289..4889bf382e 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -64,9 +64,9 @@ Vue.use(message) Vue.config.productionTip = false new Vue({ - el: '#app', + router, store, i18n, render: h => h(App) -}) +}).$mount('#app') diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue index 7b72888cc5..46ce6b8e69 100644 --- a/frontend/src/views/panel/filter/index.vue +++ b/frontend/src/views/panel/filter/index.vue @@ -49,7 +49,16 @@ export default { componentList, widgetSubjects: { '时间过滤组件': [ - 'timeYearWidget' + 'timeYearWidget', + 'timeMonthWidget', + 'timeQuarterWidget', + 'timeDateWidget', + 'timeDateRangeWidget' + + ], + '文本过滤组件': [ + 'textSelectWidget', + 'textInputWidget' ], '按钮': [ 'buttonSureWidget'