自定义分割线组件优化

package.json

@@ -32,6 +32,7 @@
     "axios": "1.6.8",
     "bin-ace-editor": "^3.2.0",
     "brace": "^0.11.1",
+    "canvg": "^4.0.2",
     "clipboard": "2.0.4",
     "codemirror": "^5.58.2",
     "core-js": "^3.25.1",

src/components/Generator/components/NewDivider/divider1.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="svg">
+    <!-- <canvas id="canvas"></canvas> -->
+    <img :src="url" alt="" />
+  </div>
+</template>
+
+<script>
+import { Canvg } from 'canvg'
+
+export default {
+  name: 'divider1',
+  props: ['bgColor', 'text', 'textStyle'],
+  computed: {
+    colorStyle() {
+      return this.bgColor
+    },
+    fontStyle() {
+      console.log(this.textStyle)
+      return this.textStyle
+    },
+    defaultValue() {
+      return this.text
+    }
+  },
+  watch: {
+    colorStyle: {
+      handler() {
+        this.init()
+      },
+      deep: true,
+      immediate: true
+    },
+    fontStyle: {
+      handler() {
+        this.init()
+      },
+      deep: true,
+      immediate: true
+    },
+    defaultValue: {
+      handler() {
+        this.init()
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      url: ''
+    }
+  },
+  methods: {
+    init() {
+      this.svg2png(
+        `<svg width="1440" height="35" xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>1</title>
+ <g>
+  <title>Layer 1</title>
+  <g stroke="null" fill-rule="evenodd" fill="none" id="1">
+   <rect stroke="null" height="15" width="1367.02575" y="18" x="54.97425" fill="#2C89FD" fill-opacity="0.5" id="矩形"/>
+   <path stroke="null" fill="${this.bgColor}" id="矩形备份" d="m11,3l108.97968,0c8.44742,0 15.29539,13.43145 15.29539,30l0,0l0,0l-108.97968,0c-8.44742,0 -15.29539,-13.43145 -15.29539,-30l0,0l0,0z"/>
+  </g>
+  <text transform="matrix(0.666672 0 0 0.711188 231.663 -4.58044)" stroke="red" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"  font-size="${this.textStyle.size * 3}" id="svg_2" y="38.60635" x="673.11341" stroke-width="0" fill="${this.textStyle.color}">${this.text}</text>
+ </g>
+</svg>`
+      ).then((r) => {
+        this.url = r
+      })
+    },
+    async svg2png(file) {
+      let canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      ctx.fillStyle = 'red'
+      let v = await Canvg.from(ctx, file)
+      v.start()
+      return canvas.toDataURL('img/png')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.svg {
+  width: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/Generator/components/NewDivider/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="new-divider" id="divider">
+    <!-- <div class="text" :style="textStyle">{{ defaultVal }}</div> -->
+    <div v-if="type == '0'">
+      <svg-divider1 v-if="svgModel == '1'" :text="defaultVal" :textStyle="fontStyle" :bgColor="bgColor"></svg-divider1>
+      <!-- <svg-divider2 v-if="svgModel == '2'" :text="defaultVal" :svgHeight="30" :bgColor="bgColor"></svg-divider2>
+      <svg-divider3 v-if="svgModel == '3'" :text="defaultVal" :svgHeight="30" :bgColor="bgColor"></svg-divider3> -->
+    </div>
+    <div v-else-if="type == '1'">
+      <img v-if="svgUrl != ''" :style="{ width: svgWidth + 'px', height: '40px' }" :src="define.comUrl + '/' + svgUrl" alt="" />
+      <div v-else style="height: 30px"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import svgDivider1 from './divider1.vue'
+// import svgDivider2 from './divider2.vue'
+// import svgDivider3 from './divider3.vue'
+export default {
+  components: {
+    svgDivider1,
+  },
+  props: {
+    defaultVal: {
+      type: String,
+      default: ''
+    },
+    bgColor: {
+      type: String,
+      default: '#FF5240'
+    },
+    fontStyle: {
+      type: Object,
+      default: {
+        color: '#000',
+        size: 14,
+        spacing: 4,
+        weight: false
+      }
+    },
+    type: {
+      type: String,
+      default: '0'
+    },
+    svgModel: {
+      type: String,
+      default: '1'
+    },
+    svgUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  name: 'new-divider',
+  computed: {
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.new-divider {
+  display: flex;
+  position: relative;
+  .text {
+    position: absolute;
+  }
+}
+</style>

src/components/Generator/generator/comConfig.js

@@ -25,7 +25,7 @@ const ruleTrigger = {
 // 动态options
 const dyOptionsList = ['radio', 'checkbox', 'select', 'cascader', 'treeSelect']
 // 不添加vModel
-const noVModelList = ['divider', 'JNPFText', 'groupTitle', 'relationFormAttr', 'relationFlowAttr', 'PlaceholderCom']
+const noVModelList = ['divider', 'JNPFText', 'groupTitle', 'relationFormAttr', 'relationFlowAttr', 'PlaceholderCom','new-divider']
 // 不可以添加到子表组件
 const noTableAllowList = [
   'serialNumber',

src/components/Generator/generator/config.js

@@ -701,15 +701,26 @@ export const inputComponents = [
       showLabel: false,
       tag: 'NewDivider',
       tagIcon: 'icon-ym icon-ym-generator-divider',
-      defaultValue: '自定义分割线',
+      defaultValue: null,
       bgColor: 'rgba(250, 129, 24,1)',
-      color: 'rgba(237, 237, 239,1)',
       required: false,
       layout: 'colFormItem',
+      type: '0',
       span: 24,
       dragDisabled: false,
+      fontStyle:{
+        color: 'rgba(0, 0, 0,1)',
+        size:14,
+        spacing:4,
+        weight:false
+      },
+      svgModel:'1',
+
+    },
+    displayNone: false,
+    __slot__: {
+      default: '我是分割线'
     },
-    displayNone: false
   },
   {
     __config__: {

src/components/Generator/index/Home.vue

@@ -248,6 +248,7 @@ export default {
     }
   },
   created() {
+    
     if (this.relationList && this.relationList.length) {
       this.relationData = deepClone(this.relationList)
     }

src/components/Generator/index/RightComponents/NewDivider.vue

@@ -1,36 +1,131 @@
 <template>
   <el-row>
-    <el-form-item label="展示文本">
-      <el-input :value="activeData.__config__.defaultValue" @input="onDefaultValueInput" placeholder="显示在分割线上的文字" />
+    <el-form-item label="控件栅格">
+      <el-slider v-model="activeData.__config__.span" :max="24" :min="6" show-stops :step="2" show-tooltip />
     </el-form-item>
-    <el-form-item label="背景颜色">
-      <el-color-picker v-model="activeData.__config__.bgColor" show-alpha @change="onBgColorChange"></el-color-picker>
+    <el-form-item label="展示文本">
+      <el-input :value="activeData.__slot__.default" @input="onDefaultValueInput" placeholder="显示在分割线上的文字" />
     </el-form-item>
-    <el-form-item label="文字颜色">
-      <el-color-picker v-model="activeData.__config__.color" show-alpha @change="onColorChange"></el-color-picker>
+    <el-form-item label="模式">
+      <el-radio-group v-model="activeData.__config__.type" size="mini">
+        <el-radio-button label="0">系统</el-radio-button>
+        <el-radio-button label="1">自定义</el-radio-button>
+      </el-radio-group>
     </el-form-item>
+
+    <div v-show="activeData.__config__.type == '0'">
+      <el-form-item label="模板列表">
+        <el-select v-model="activeData.__config__.svgModel" placeholder="请选择">
+          <el-option v-for="item in svgList" :key="item.value" :value="item.value" :label="item.label">
+            <div v-if="item.value == '1'">
+              <!-- <svg-divider1 :text="activeData.__slot__.default" :bgColor="activeData.__config__.bgColor"></svg-divider1> -->
+            </div>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="背景颜色">
+        <el-color-picker v-model="activeData.__config__.bgColor" show-alpha @change="onBgColorChange"></el-color-picker>
+      </el-form-item>
+      <el-form-item label="文字颜色">
+        <el-color-picker v-model="activeData.__config__.fontStyle.color" show-alpha @change="onColorChange($event, 'color')"></el-color-picker>
+      </el-form-item>
+      <!-- <el-form-item label="文字加粗">
+        <el-switch v-model="activeData.__config__.fontStyle.weight" @change="onColorChange($event, 'weight')"></el-switch>
+      </el-form-item> -->
+      <el-form-item label="文字大小">
+        <el-input-number v-model="activeData.__config__.fontStyle.size" :min="10" :max="40" @change="onColorChange($event, 'size')"></el-input-number>
+      </el-form-item>
+      <!-- <el-form-item label="文字间隔">
+        <el-input-number v-model="activeData.__config__.fontStyle.spacing" :min="0" :max="100" @change="onColorChange($event, 'spacing')"></el-input-number>
+      </el-form-item> -->
+    </div>
+    <div v-show="activeData.__config__.type == '1'">
+      <!-- <img  :src="'https://windata.platomix.net/uploads/owteeh2//2024//3//0404f0ef-9397-4771-ac42-9b48e527ecf1.svg'" alt="" /> -->
+      <el-form-item label="上传文件">
+        <el-upload :action="define.comUploadUrl" :headers="uploadHeaders" :on-success="handleSuccess" :show-file-list="false" accept="SVG/*" list-type="picture-card" :limit="1" class="upload-btn">
+          <div v-if="activeData.__config__.svgUrl != ''">
+            <img style="width: 148px" :src="define.comUrl + '/' + activeData.__config__.svgUrl" alt="" />
+          </div>
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+    </div>
+
+    <!-- <el-form-item label="文字位置">
+      <el-form-item label-width="40px" label="上">
+        <el-input-number v-model="activeData.__config__.positionStyle.top" size="mini" :min="-20" :max="100" @change="onPositionChange($event, 'top')"></el-input-number>
+      </el-form-item>
+      <el-form-item label-width="40px" label="下">
+        <el-input-number v-model="activeData.__config__.positionStyle.bottom" size="mini" :min="-20" :max="100" @change="onPositionChange($event, 'bottom')"></el-input-number>
+      </el-form-item>
+      <el-form-item label-width="40px" label="左">
+        <el-input-number v-model="activeData.__config__.positionStyle.left" size="mini" :min="-20" :max="100" @change="onPositionChange($event, 'left')"></el-input-number>
+      </el-form-item>
+      <el-form-item label-width="40px" label="右">
+        <el-input-number v-model="activeData.__config__.positionStyle.right" size="mini" :min="-20" :max="100" @change="onPositionChange($event, 'right')"></el-input-number>
+      </el-form-item>
+    </el-form-item> -->
   </el-row>
 </template>
 <script>
 import comMixin from './mixin'
+import { getToken } from '@/utils/auth'
+import svgDivider1 from '@/components/Generator/components/NewDivider/divider1.vue'
+// import svgDivider2 from '@/components/Generator/components/NewDivider/divider2.vue'
+// import svgDivider3 from '@/components/Generator/components/NewDivider/divider3.vue'
 export default {
   props: ['activeData'],
   mixins: [comMixin],
+  components: {
+    svgDivider1
+    // svgDivider2,
+    // svgDivider3
+  },
   data() {
-    return {}
+    return {
+      uploadHeaders: { 'Blade-Auth': 'bearer ' + getToken() },
+      svgList: [
+        {
+          value: '1',
+          label: '模板1'
+        }
+      ]
+    }
+  },
+  mounted() {
+    console.log(this.define.comUrl)
+
+    // let mySvg = document.getElementById('my-svg')
+    // let svg = mySvg.getElementsByTagName('svg')
+    // console.log(svg.style)
+    // let path = svg.getElementsByTagName('path')
+    // console.log(path)
   },
   methods: {
+    handleSuccess(res) {
+      if (res.code == 200) {
+        this.$set(this.activeData.__config__, 'svgUrl', res.data.filePath)
+      } else {
+        this.$message({ message: res.msg, type: 'error', duration: 5000 })
+      }
+    },
+    handleRemove() {
+      this.$set(this.activeData.__config__, 'svgUrl', '')
+    },
     // 按钮
     onDefaultValueInput(str) {
-      this.$set(this.activeData.__config__, 'defaultValue', str)
+      this.$set(this.activeData.__slot__, 'default', str)
     },
     onBgColorChange(val) {
       this.$set(this.activeData.__config__, 'bgColor', val)
-      //   console.log(this.activeData.__config__);
     },
-    onColorChange(val) {
-      this.$set(this.activeData.__config__, 'color', val)
+    onColorChange(val, type) {
+      this.$set(this.activeData.__config__.fontStyle, type, val)
+    },
+    onPositionChange(val, type) {
+      this.$set(this.activeData.__config__.positionStyle, type, val)
     }
   }
 }
 </script>
+<style lang="scss"></style>

src/components/Generator/index/RightPanel.vue

@@ -113,8 +113,7 @@
             <JNPFSlider v-if="activeData.__config__.jnpfKey === 'slider'" :active-data="activeData" />
             <JNPFDivider v-if="activeData.__config__.jnpfKey === 'divider'" :active-data="activeData" />
             <JNPFUploadFz v-if="activeData.__config__.jnpfKey === 'uploadFz'" :active-data="activeData" />
-            <JNPFUploadImg v-if="activeData.__config__.jnpfKey === 'uploadImg'" :active-data="activeData" />
-            <NewDivider v-if="activeData.__config__.jnpfKey === 'new-divider'" :active-data="activeData" />
+            <JNPFUploadImg v-if="activeData.__config__.jnpfKey === 'uploadImg'" :active-data="activeData" />           
             <JNPFComRight v-if="isCommon" :active-data="activeData" />
             <JNPFAddress v-if="activeData.__config__.jnpfKey === 'address'" :active-data="activeData" />
             <TreeSelect v-if="activeData.__config__.jnpfKey === 'treeSelect'" :active-data="activeData" />
@@ -129,6 +128,7 @@
             <Tab v-if="activeData.__config__.jnpfKey === 'tab'" :active-data="activeData" />
             <Collapse v-if="activeData.__config__.jnpfKey === 'collapse'" :active-data="activeData" />
             <Table v-if="activeData.__config__.jnpfKey === 'table'" :dbtable-list="tableList" :active-data="activeData" :dbSourceId="dbSourceId" :columnModelId="columnModelId" :allTabelList="allTabelList" />
+            <NewDivider v-if="activeData.__config__.jnpfKey === 'new-divider'" :active-data="activeData" />
             <PlaceholderCom v-if="activeData.__config__.jnpfKey === 'PlaceholderCom'" :active-data="activeData" />
             <template v-if="isSystem">
               <el-form-item label="控件标题">

src/components/Generator/render/render.js

@@ -87,9 +87,13 @@ function buildDataObject(confClone, dataObject, formData, primaryRow, flowForeig
     dataObject.attrs['field'] = confClone.__vModel__
   }
 
-  if (confClone.__config__.jnpfKey === 'new-divider' ) {
+  if (confClone.__config__.jnpfKey === 'new-divider') {
     dataObject.attrs['bgColor'] = confClone.__config__.bgColor
-    dataObject.attrs['color'] = confClone.__config__.color
+    dataObject.attrs['fontStyle'] = confClone.__config__.fontStyle
+    dataObject.attrs['type'] = confClone.__config__.type
+    dataObject.attrs['defaultVal'] = confClone.__slot__.default
+    dataObject.attrs['svgModel'] = confClone.__config__.svgModel
+    dataObject.attrs['svgUrl'] = confClone.__config__.svgUrl
   }
 
   // 清理属性

src/components/NewDivider/index.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="line">
-    <div :style="{ 'background-color': bgColor, color: color }" class="line-label">{{ value }}</div>
-    <div class="line-right">
-      <div class="right-triangle" :style="{ 'background-color': bgColor }"></div>
-      <div class="right-line" :style="{ 'border-color': bgColor }"></div>
-      <div :style="{ 'background-color': bgColor }" class="right-box right-left1"></div>
-      <div :style="{ 'background-color': bgColor }" class="right-box right-left2"></div>
-      <div :style="{ 'background-color': bgColor }" class="right-box right-left3"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    bgColor: {
-      type: String
-    },
-    color: {
-      type: String
-    }
-  },
-  name: 'NewDivider'
-}
-</script>
-
-<style lang="scss" scoped>
-.line {
-  width: 100%;
-  display: flex;
-  // padding: 20px 10px;
-  height: 28px;
-  position: relative;
-  .line-label {
-    box-sizing: content-box;
-    flex: none;
-    height: 100%;
-    line-height: 28px;
-    max-width: 80%;
-    min-width: 7%;
-    overflow: hidden;
-    padding: 0 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .line-right {
-    flex: 1;
-    position: relative;
-
-    .right-triangle {
-      height: 100%;
-      transform: skew(26deg) translateX(-50%);
-      width: 15px;
-    }
-    .right-line {
-      border-bottom: 3px solid;
-      bottom: 0;
-      height: 0;
-      left: 0;
-      position: absolute;
-      right: 0;
-    }
-    .right-left1 {
-      left: 15px;
-      opacity: 0.9;
-    }
-    .right-left2 {
-      left: 27px;
-      opacity: 0.6;
-    }
-    .right-left3 {
-      left: 39px;
-      opacity: 0.3;
-    }
-
-    .right-box {
-      height: 22px;
-      position: absolute;
-      top: 0;
-      transform: skew(26deg) translateX(-50%);
-      width: 8px;
-    }
-  }
-}
-</style>

src/components/index.js

@@ -35,7 +35,7 @@ import DatasetFilter from '@/components/Dataset-filter/dataset-filter'
 import ColumnFilter from '@/components/ColumnFilter/index'
 import PlaceholderCom from '@/components/Generator/components/PlaceholderCom'
 import NewInput from '@/components/Generator/components/NewInput'
-import NewDivider from '@/components/NewDivider/index.vue'
+import NewDivider from '@/components/Generator/components/NewDivider'
 export default {
   install(Vue) {
     Vue.component('JNPFTreeSelect', JNPFTreeSelect)