feat:增加图片样式组件，统一样式组件设置

frontend/src/components/canvas/components/TextAttr.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card class="el-card-main" :style="mainStyle">
     <div id="main-attr" style="position: relative;">
-      <div style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div v-if="attrShow('textAlign')" style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-radio-group v-model="styleInfo.textAlign" size="mini" @change="styleChange">
           <el-radio-button
             v-for="item in textAlignOptions"
@@ -16,47 +16,77 @@
           </el-radio-button>
         </el-radio-group>
       </div>
-      <el-tooltip :content="$t('panel.fontSize')">
+      <div v-if="attrShow('borderStyle')" style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
+        <el-tooltip content="边框风格">
+          <el-select v-model="styleInfo.borderStyle" size="mini" @change="styleChange">
+            <el-option
+              v-for="item in lineStyle"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+              <span style="float: left;">
+                <i :class="item.icon" />
+              </span>
+              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+        </el-tooltip>
+      </div>
+
+      <div v-if="attrShow('borderWidth')" style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-tooltip content="边框宽度">
+          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="" @change="styleChange">
+            <el-option
+              v-for="item in lineFont"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-tooltip>
+      </div>
+      <el-tooltip v-if="attrShow('fontSize')" :content="$t('panel.fontSize')">
         <i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
       </el-tooltip>
 
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div v-if="attrShow('fontSize')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange" />
       </div>
 
-      <el-tooltip :content="$t('panel.fontWeight')">
+      <el-tooltip v-if="attrShow('fontWeight')" :content="$t('panel.fontWeight')">
         <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-font-weight-bold" />
       </el-tooltip>
 
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div v-if="attrShow('fontWeight')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange" />
       </div>
 
-      <el-tooltip :content="$t('panel.letterSpacing')">
+      <el-tooltip v-if="attrShow('letterSpacing')" :content="$t('panel.letterSpacing')">
         <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-letter_spacing" />
       </el-tooltip>
 
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div v-if="attrShow('letterSpacing')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange" />
       </div>
 
-      <el-tooltip :content="$t('panel.opacity')">
+      <el-tooltip v-if="attrShow('opacity')" :content="$t('panel.opacity')">
         <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
       </el-tooltip>
 
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div v-if="attrShow('opacity')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" @change="styleChange" />
       </div>
 
-      <el-tooltip :content="$t('panel.borderRadius')">
+      <el-tooltip v-if="attrShow('borderRadius')" :content="$t('panel.borderRadius')">
         <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
       </el-tooltip>
 
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div v-if="attrShow('borderRadius')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" @change="styleChange" />
       </div>
 
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div v-if="attrShow('color')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip :content="$t('panel.color')">
             <i class="icon iconfont icon-zimua" @click="goColor" />
@@ -65,8 +95,17 @@
           <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
         </div>
       </div>
+      <div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+        <div style="width: 16px;height: 18px">
+          <el-tooltip content="边框颜色">
+            <i class="iconfont icon-huabi" @click="goBoardColor" />
+          </el-tooltip>
+          <div :style="boardDivColor" />
+          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+        </div>
+      </div>
 
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+      <div v-if="attrShow('backgroundColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip content="背景颜色">
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
@@ -76,12 +115,14 @@
         </div>
       </div>
 
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
+      <div v-if="attrShow('hyperlinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-tooltip v-if="curComponent.hyperlinks" content="超链接">
           <Hyperlinks :link-info="curComponent.hyperlinks" />
         </el-tooltip>
+      </div>
 
-        <el-tooltip v-if="curComponent.type === 'de-show-date'" content="日期格式">
+      <div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-tooltip content="日期格式">
           <date-format :format-info="curComponent.formatInfo" />
         </el-tooltip>
       </div>
@@ -109,8 +150,8 @@ export default {
   },
   data() {
     return {
+      showMain: true,
       innerOpacity: 0,
-      mainWidthOffset: 600,
       textAlignOptions: [
         {
           icon: 'iconfont icon-juzuo',
@@ -128,6 +169,82 @@ export default {
           label: 'right'
         }
       ],
+      lineStyle: [{
+        icon: 'iconfont icon-solid_line',
+        value: 'solid',
+        label: '实线'
+      }, {
+        icon: 'iconfont icon-xuxian',
+        value: 'dashed',
+        label: '虚线'
+      }, {
+        icon: 'iconfont icon-dianxian',
+        value: 'dotted',
+        label: '点线'
+      }],
+      lineFont: [{
+        value: '0',
+        label: '0'
+      }, {
+        value: '1',
+        label: '1'
+      }, {
+        value: '2',
+        label: '2'
+      }, {
+        value: '3',
+        label: '3'
+      }, {
+        value: '4',
+        label: '4'
+      }, {
+        value: '5',
+        label: '5'
+      }],
+      // 矩形组件显示的属性
+      'picture-add': [
+        'borderStyle',
+        'borderWidth',
+        'borderRadius',
+        'opacity',
+        'borderColor'
+      ],
+      // 过滤组件显示的属性
+      'custom': [
+        'fontSize',
+        'fontWeight',
+        'letterSpacing',
+        'color',
+        'backgroundColor'
+      ],
+      // tab组件显示的属性
+      'de-tabs': [
+        'borderStyle',
+        'borderWidth',
+        'borderRadius',
+        'opacity',
+        'borderColor'
+      ],
+      // 矩形组件显示的属性
+      'rect-shape': [
+        'borderStyle',
+        'borderWidth',
+        'borderRadius',
+        'opacity',
+        'borderColor'
+      ],
+      // 时间组件显示的属性
+      'de-show-date': [
+        'textAlign',
+        'fontSize',
+        'fontWeight',
+        'opacity',
+        'borderRadius',
+        'color',
+        'backgroundColor',
+        'date-format'
+      ],
+      // 文本组件显示的属性
       'v-text': [
         'textAlign',
         'fontSize',
@@ -138,24 +255,33 @@ export default {
         'color',
         'backgroundColor',
         'hyperlinks'
-      ] }
+      ]
+    }
   },
   watch: {
     innerOpacity: {
       handler(oldVal, newVal) {
         this.styleInfo['opacity'] = this.innerOpacity / 100
       }
+    },
+    curComponent: {
+      handler(oldVal, newVal) {
+        this.$nextTick(() => {
+          this.init()
+        })
+        // console.log('curComponent change')
+      }
     }
   },
   mounted() {
-    if (this.styleInfo['opacity']) {
-      this.innerOpacity = this.styleInfo['opacity'] * 100
-    }
-    this.mainWidthOffset = document.getElementById('main-attr').offsetWidth - 50
-    // console.log('mainWidthOffset:' + this.mainWidthOffset)
+    this.init()
   },
   computed: {
-    attrShow(attr) {
+    boardDivColor() {
+      const style = {
+        height: '2px',
+        background: this.styleInfo.borderColor
+      }
       return style
     },
     letterDivColor() {
@@ -198,9 +324,23 @@ export default {
 
   },
   methods: {
+    init() {
+      if (this.styleInfo['opacity']) {
+        this.innerOpacity = this.styleInfo['opacity'] * 100
+      }
+      this.mainWidthOffset = document.getElementById('main-attr').offsetWidth - 50
+      // console.log('mainWidthOffset:' + this.mainWidthOffset)
+    },
+    attrShow(attr) {
+      // console.log('attr:' + attr + this[this.curComponent.type].includes(attr))
+      return this[this.curComponent.type].includes(attr)
+    },
     goColor() {
       this.$refs.colorPicker.handleTrigger()
     },
+    goBoardColor() {
+      this.$refs.boardColorPicker.handleTrigger()
+    },
     goBackgroundColor() {
       this.$refs.backgroundColorPicker.handleTrigger()
     },

frontend/src/components/canvas/custom-component/component-list.js

@@ -1,7 +1,10 @@
 // 公共样式
 export const commonStyle = {
   rotate: 0,
-  opacity: 1
+  opacity: 1,
+  borderStyle: 'solid',
+  borderWidth: 0,
+  borderRadius: 0
 }
 
 export const commonAttr = {
@@ -143,6 +146,8 @@ const list = [
     type: 'Picture',
     propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
     style: {
+      borderStyle: 'solid',
+      borderWidth: 0,
       width: 600,
       height: 300,
       borderRadius: ''
@@ -198,7 +203,7 @@ const list = [
       width: 200,
       height: 200,
       borderStyle: 'solid',
-      borderWidth: 1,
+      borderWidth: 0,
       borderColor: '#000000',
       backgroundColor: '#ffffff',
       borderRadius: 0

frontend/src/views/panel/edit/index.vue

@@ -162,9 +162,9 @@
     <input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
 
     <!--矩形样式组件-->
-    <RectangleAttr v-if="curComponent&&(curComponent.type==='rect-shape'||curComponent.type==='de-tabs')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
-    <TextAttr v-if="curComponent && (curComponent.type==='v-text' || curComponent.type==='de-show-date')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
-    <FilterTextAttr v-if="curComponent&&curComponent.type==='custom'&&curComponent.options.attrs.title" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
+    <!--    <RectangleAttr v-if="curComponent&&(curComponent.type==='rect-shape'||curComponent.type==='de-tabs')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />-->
+    <TextAttr v-if="showAttr" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
+    <!--    <FilterTextAttr v-if="curComponent&&curComponent.type==='custom'&&curComponent.options.attrs.title" :scroll-left="scrollLeft" :scroll-top="scrollTop" />-->
     <!--复用ChartGroup组件 不做显示-->
     <ChartGroup
       ref="chartGroup"
@@ -280,11 +280,33 @@ export default {
       scrollLeft: 0,
       scrollTop: 0,
       timeMachine: null,
-      dropComponentInfo: null
+      dropComponentInfo: null,
+      // 需要展示属性设置的组件类型
+      showAttrComponent: [
+        'custom',
+        'v-text',
+        'picture-add',
+        'de-tabs',
+        'rect-shape',
+        'de-show-date'
+      ]
     }
   },
 
   computed: {
+    showAttr() {
+      // console.log('showAttr：' + JSON.stringify(this.curComponent))
+      if (this.curComponent && this.showAttrComponent.includes(this.curComponent.type)) {
+        // 过滤组件有标题才显示
+        if (this.curComponent.type === 'custom' && !this.curComponent.options.attrs.title) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    },
     customCanvasStyle() {
       let style = {}
 
@@ -687,6 +709,7 @@ export default {
             ...commonAttr,
             id: generateID(),
             component: 'Picture',
+            type: 'picture-add',
             label: '图片',
             icon: '',
             propValue: fileResult,