feat: 修改文字组件样式

2021-06-21 12:39:24 +08:00 · 2021-06-21 12:39:24 +08:00 · a7b67c5c64
commit a7b67c5c64
parent 8aaf2aa0b6
12 changed files with 162 additions and 55 deletions
--- a/frontend/src/components/canvas/components/AttrList.vue
+++ b/frontend/src/components/canvas/components/AttrList.vue
@ -45,7 +45,7 @@
 export default {
  data() {
    return {
-      excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
+      excludes: ['Picture', 'Group', 'view'], // 这些组件不显示内容
      textAlignOptions: [
        {
          label: this.$t('panel.text_align_left'),
--- a/frontend/src/components/canvas/components/AttrListExtend.vue
+++ b/frontend/src/components/canvas/components/AttrListExtend.vue
@ -2,7 +2,7 @@
 <template>
  <div class="attr-list">
    <el-form label-width="80px" size="mini">
-      <el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]+':'">
+      <el-form-item v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))" :key="index" :label="map[key]+':'">
        <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
        <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
        <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
@ -34,18 +34,39 @@
        </el-select>
        <el-input v-else v-model="curComponent.style[key]" type="number" />
      </el-form-item>
-      <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" :label="$t('panel.content')+':'">
-        <el-input v-model="curComponent.propValue" type="textarea" />
+      <el-form-item :label="$t('panel.content_style')+':'">
+        <div v-if="curComponent.type==='v-text'" style="width: 100%;max-height: 400px;overflow: auto">
+          <VText
+            style="border: 1px solid #dcdfe6;border-radius:4px;background-color: #f7f8fa;"
+            :prop-value="curComponent.propValue"
+            :element="curComponent"
+            :edit-mode="'edit'"
+            :style="getComponentStyleDefault(curComponent.style)"
+          />
+        </div>
+        <rect-shape
+          v-if="curComponent.type==='rect-shape'"
+          style="width: 200px!important;height: 100px!important;"
+          :prop-value="curComponent.propValue"
+          :element="curComponent"
+          :style="getComponentStyleDefault(curComponent.style)"
+        />
      </el-form-item>
+
    </el-form>
  </div>
+
 </template>

 <script>
+import VText from '@/components/canvas/custom-component/VText'
+import RectShape from '@/components/canvas/custom-component/RectShape'
+import { getStyle } from '@/components/canvas/utils/style'
 export default {
+  components: { VText, RectShape },
  data() {
    return {
-      excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
+      excludes: ['Picture', 'Group', 'view'], // 这些组件不显示内容
      textAlignOptions: [
        {
          label: this.$t('panel.text_align_left'),
@ -113,6 +134,35 @@ export default {
    },
    curComponent() {
      return this.$store.state.curComponent
+    },
+    styleFilter() {
+      const filter = [
+        'fontSize',
+        'fontWeight',
+        'lineHeight',
+        'letterSpacing',
+        'textAlign',
+        'color',
+        'borderColor',
+        'borderWidth',
+        'backgroundColor',
+        'borderStyle',
+        'verticalAlign'
+      ]
+      if (this.$store.state.curComponent.type === 'v-text') {
+        filter.push('width', 'height')
+      }
+      return filter
+    }
+  },
+  methods: {
+    getComponentStyleDefault(style) {
+      if (this.$store.state.curComponent.type === 'v-text') {
+        return getStyle(style, ['top', 'left', 'rotate'])
+      } else {
+        return getStyle(style, ['top', 'left', 'rotate', 'height', 'width'])
+      }
+      // return style
    }
  }
 }
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@ -3,12 +3,12 @@
    <ul @mouseup="handleMouseUp">
      <template v-if="curComponent">
        <template v-if="!curComponent.isLock">
-          <li @click="edit"> {{ $t('panel.edit') }}</li>
-<!--          <li @click="copy"> {{ $t('panel.copy') }}</li>-->
+          <li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li>
+          <!--          <li @click="copy"> {{ $t('panel.copy') }}</li>-->
          <li @click="paste"> {{ $t('panel.paste') }}</li>
          <li @click="cut"> {{ $t('panel.cut') }}</li>
          <li @click="deleteComponent"> {{ $t('panel.delete') }}</li>
-<!--          <li @click="lock"> {{ $t('panel.lock') }}</li>-->
+          <!--          <li @click="lock"> {{ $t('panel.lock') }}</li>-->
          <li @click="topComponent"> {{ $t('panel.topComponent') }}</li>
          <li @click="bottomComponent"> {{ $t('panel.bottomComponent') }}</li>
          <li @click="upComponent"> {{ $t('panel.upComponent') }}</li>
@ -28,7 +28,13 @@ import bus from '@/utils/bus'
 export default {
  data() {
    return {
-      copyData: null
+      copyData: null,
+      editFilter: [
+        'view',
+        'v-text',
+        'rect-shape',
+        'custom'
+      ]
    }
  },
  computed: mapState([
@ -44,7 +50,7 @@ export default {
      // 编辑时临时保存 当前修改的画布
      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
-      if (this.curComponent.component === 'user-view') {
+      if (this.curComponent.type === 'view') {
        this.$store.dispatch('chart/setViewId', null)
        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId }})
@ -52,7 +58,12 @@ export default {
      if (this.curComponent.type === 'custom') {
        bus.$emit('component-dialog-edit')
      }
-      // 编辑组件
+
+      //编辑样式组件
+
+      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
+        bus.$emit('component-dialog-style')
+      }
    },
    lock() {
      this.$store.commit('lock')
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -29,6 +29,7 @@
      :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
      :snap="true"
      :snap-tolerance="1"
+      :change-style="customStyleHistory"
      @refLineParams="getRefLineParams"
    >
      <component
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@ -12,7 +12,7 @@
        <span>自适应画布区域 </span>
      </div>

-      <div class="canvas-config" style="margin-right: 40px">
+      <div class="canvas-config" style="margin-right: 55px">
        <span> {{ $t('panel.canvas_size') }} </span>
        <input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
        <span>*</span>
@ -27,13 +27,13 @@
        <el-button :class="styleButtonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
      </el-tooltip>

-      <el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">
-        <el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />
-      </el-tooltip>
+      <!--      <el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">-->
+      <!--        <el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />-->
+      <!--      </el-tooltip>-->

-      <el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">
-        <el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />
-      </el-tooltip>
+      <!--      <el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">-->
+      <!--        <el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />-->
+      <!--      </el-tooltip>-->

      <el-tooltip :content="$t('panel.undo') ">
        <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
--- a/frontend/src/components/canvas/custom-component/RectShape.vue
+++ b/frontend/src/components/canvas/custom-component/RectShape.vue
@ -1,16 +1,16 @@
 <template>
-    <div class="rect-shape">
-        <v-text :propValue="element.propValue" :element="element" />
-    </div>
+  <div class="rect-shape">
+    <v-text :prop-value="element.propValue" :element="element" />
+  </div>
 </template>

 <script>
 export default {
-    props: {
-        element: {
-            type: Object,
-        },
-    },
+  props: {
+    element: {
+      type: Object
+    }
+  }
 }
 </script>

@ -20,4 +20,4 @@ export default {
    height: 100%;
    overflow: auto;
 }
-</style>
+</style>
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@ -47,18 +47,18 @@ const list = [
    id: '10001',
    component: 'v-text',
    label: '文字',
-    propValue: '双击编辑文字',
+    propValue: '双击输入文字',
    icon: 'wenben',
    type: 'v-text',
    style: {
-      width: 200,
-      height: 22,
-      fontSize: 14,
+      width: 300,
+      height: 100,
+      fontSize: 18,
      fontWeight: 500,
      lineHeight: '',
      letterSpacing: 0,
      textAlign: '',
-      color: ''
+      color: '#000000'
    }
  },
  {
@ -119,22 +119,15 @@ const list = [
    style: {
      width: 200,
      height: 200,
-      fontSize: 14,
-      fontWeight: 500,
-      lineHeight: '',
-      letterSpacing: 0,
-      textAlign: 'center',
-      color: '',
      borderColor: '#000',
      borderWidth: 1,
      backgroundColor: '',
-      borderStyle: 'solid',
-      verticalAlign: 'middle'
+      borderStyle: 'solid'
    }
  },
  {
    id: '10005',
-    component: 'user-view',
+    component: 'view',
    label: '用户视图',
    propValue: '',
    icon: 'juxing',
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -996,7 +996,8 @@ export default {
    other_module: 'Other',
    content: 'Content',
    default_panel_name: 'Default Dashboard Name',
-    source_panel_name: 'Source Dashboard Name'
+    source_panel_name: 'Source Dashboard Name',
+    content_style: 'Content Style',
  },
  plugin: {
    local_install: 'Local installation',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -996,7 +996,8 @@ export default {
    other_module: '其他',
    content: '内容',
    default_panel_name: '默认仪表板名称',
-    source_panel_name: '原仪表板名称'
+    source_panel_name: '原仪表板名称',
+    content_style: '内容样式'
  },
  plugin: {
    local_install: '本地安裝',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -996,7 +996,8 @@ export default {
    other_module: '其他',
    content: '内容',
    default_panel_name: '默认仪表板名称',
-    source_panel_name: '原仪表板名称'
+    source_panel_name: '原仪表板名称',
+    content_style: '内容样式'
  },
  plugin: {
    local_install: '本地安装',
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@ -103,6 +103,24 @@ div:focus {
    }
 }

+.de-style-dialog {
+  min-width: 500px !important;
+  width: 300px !important;
+
+  .el-dialog__header{
+    // background-color: #f4f4f5;
+    padding: 10px 20px !important;
+
+    .el-dialog__headerbtn {
+      top: 15px !important;
+    }
+  }
+  .el-dialog__body{
+    padding: 1px 15px !important;
+
+  }
+}
+
 .preview-dialog {
  padding: 0px!important;
  .el-dialog--center{
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -104,10 +104,10 @@
          <Editor v-if="!previewVisible" :out-style="outStyle" />
        </div>
      </de-main-container>
-      <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
-        <AttrListExtend v-if="curComponent" />
-        <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>
-      </de-aside-container>
+      <!--      <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">-->
+      <!--        <AttrListExtend v-if="curComponent" />-->
+      <!--        <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>-->
+      <!--      </de-aside-container>-->

    </de-container>

@ -135,6 +135,21 @@
      </div>
    </el-dialog>

+    <!--文字组件对话框-->
+    <el-dialog
+      v-if="styleDialogVisible"
+      :title="$t('panel.style')"
+      :visible.sync="styleDialogVisible"
+      custom-class="de-style-dialog"
+    >
+      <AttrListExtend v-if="curComponent" />
+      <div style="text-align: center">
+        <span slot="footer">
+          <el-button size="mini" @click="closeStyleDialog">{{ $t('commons.confirm') }}</el-button>
+        </span>
+      </div>
+    </el-dialog>
+
    <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="previewVisible">
      <Preview v-if="previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
    </fullscreen>
@ -222,7 +237,8 @@ export default {
        width: null,
        height: null
      },
-      beforeDialogValue: []
+      beforeDialogValue: [],
+      styleDialogVisible: false
    }
  },

@ -234,7 +250,8 @@ export default {
      'curComponent',
      'isClickComponent',
      'canvasStyleData',
-      'curComponentIndex'
+      'curComponentIndex',
+      'componentData'
    ])
  },

@ -266,7 +283,10 @@ export default {
    })

    bus.$on('component-dialog-edit', () => {
-      this.eidtDialog()
+      this.editDialog()
+    })
+    bus.$on('component-dialog-style', () => {
+      this.styleDialogVisible = true
    })

    bus.$on('previewFullScreenClose', () => {
@ -400,7 +420,7 @@ export default {
        this.currentFilterCom.id = newComponentId
        if (this.currentWidget.filterDialog) {
          this.show = false
-          this.openFilterDiolog()
+          this.openFilterDialog()
          return
        }
        component = deepCopy(this.currentFilterCom)
@ -413,6 +433,14 @@ export default {
      this.$store.commit('addComponent', { component })
      this.$store.commit('recordSnapshot')
      this.clearCurrentInfo()
+
+      debugger
+      // 文字组件
+      if (component.type === 'v-text' || component.type === 'rect-shape') {
+        this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
+        this.styleDialogVisible = true
+        this.show = false
+      }
    },
    clearCurrentInfo() {
      this.currentWidget = null
@ -440,7 +468,7 @@ export default {
        this.$store.commit('hideContextMenu')
      }
    },
-    openFilterDiolog() {
+    openFilterDialog() {
      this.beforeDialogValue = []
      this.filterVisible = true
    },
@ -463,11 +491,11 @@ export default {
      this.currentFilterCom = component
      this.$forceUpdate()
    },
-    eidtDialog() {
+    editDialog() {
      const serviceName = this.curComponent.serviceName
      this.currentWidget = ApplicationContext.getService(serviceName)
      this.currentFilterCom = this.curComponent
-      this.openFilterDiolog()
+      this.openFilterDialog()
    },
    closeLeftPanel() {
      this.show = false
@ -494,6 +522,9 @@ export default {
          // console.log(canvasHeight + '--' + canvasWidth)
        })
      }
+    },
+    closeStyleDialog() {
+      this.styleDialogVisible = false
    }
  }
 }