feat: 封装条件组件类

2021-03-30 19:01:46 +08:00 · 2021-03-30 19:01:46 +08:00 · 8bbb8c7e9b
commit 8bbb8c7e9b
parent 59163995e8
6 changed files with 260 additions and 42 deletions
--- 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() {
--- a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
+++ 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
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ 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
--- 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
--- 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;
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@ -1,7 +1,8 @@
 <template>

-  <div>
-    <el-card class="filter-card-class">
+  <div class="filter-container" @dragstart="handleDragStart">
+
+    <!-- <el-card class="filter-card-class">
      <div slot="header">
        <span>卡片名称</span>
      </div>
@ -18,7 +19,23 @@
        </div>
      </div>

-    </el-card>
+    </el-card> -->
+
+    <div v-for="(item, key) in widgetSubjects" :key="key" class="widget-subject">
+      <div class="filter-header">
+        <div class="filter-header-text"> {{ key }} </div>
+      </div>
+
+      <div class="filter-widget-content">
+        <div v-for="(widget, index) in item" :key="widget.name+index" :data-id="widget.name" draggable :data-index="index" class="filter-widget">
+          <div class="filter-widget-icon">
+            <i :class="(widget.icon || 'el-icon-setting') + ' widget-icon-i'" />
+          </div>
+          <div class="filter-widget-text">{{ widget.label }}</div>
+        </div>
+      </div>
+    </div>
+
  </div>

 </template>
@ -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 {

 <style lang="scss" scoped>

-  .item {
-    font-size: 12px;
-    width: 100px;
-    height: 36px;
+  .filter-container {
+      width: 240px;
+        overflow: hidden auto;
+        min-height: 24px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        position: relative;
+        height: 940px;
+        max-height: 976px;
+  }
+  .filter-header {
+      overflow: hidden;
    position: relative;
+    margin-top: 24px;
+    margin-left: 15px;
+    align-items: center;
+    word-break: break-all;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+  }
+
+  .filter-header-text {
+      font-size: 14px;
+      max-width: 100%;
+      color: gray;
+    text-align: left;
+    white-space: pre;
+    text-overflow: ellipsis;
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    word-break: break-all;
+  }
+
+  .filter-widget-content {
+      position: relative;
+      margin-left: 5px;
+  }
+
+  .filter-widget {
+      width: 100px;
+      height: 36px;
+      position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
+    background-color: rgba(54,133,242,.1);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a3685f2,endColorstr=#1a3685f2);
+    font-size: 12px;
+    border-radius: 2px;
+    cursor: pointer;
+    :hover {
+        background-color: #3685f2;
+        color: #fff;
+    }
  }

-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
+  .filter-widget-icon {
+      width: 40px;
+    height: 36px;
+    text-align: center;
+    line-height: 1;
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    display: flex;
+
+    .widget-icon-i {
+        width: 24px;
+        height: 24px;
+        position: relative;
+        flex-shrink: 0;
+        font-size: 24px;
+        margin: auto;
+        font-family: fineui;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        text-align: center;
+    }
  }
-  .clearfix:after {
-    clear: both
+  .filter-widget-text {
+      font-size: 14px;
+      height: 36px;
+    line-height: 36px;
+    text-align: left;
+    white-space: pre;
+    text-overflow: ellipsis;
+    position: absolute;
+    inset: 0px 0px 0px 40px;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    word-break: break-all;
+    cursor: pointer;
+    color: #3d4d66;
+
  }

-  .box-card {
-    width: 480px;
+  .widget-subject {
+      display: flow-root;
  }
+
 </style>