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/CardTemplate/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <div class="flex-card" v-if="cardInfo.value == 1" :style="cardBoxStyle">
+    <!-- 普通卡片布局 -->
+    <div v-if="cardInfo.value == 1" class="flex-card" :style="cardBoxStyle">
       <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
         <el-card :style="cardStyle">
           <div slot="header" :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}" class="clearfix">
@@ -82,26 +83,34 @@
                 <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
               </div>
             </div>
+            <div v-else>
+              <el-button size="mini" type="text">操作1 </el-button>
+              <el-button size="mini" type="text">操作2 </el-button>
+              <el-button size="mini" type="text">操作3 </el-button>
+            </div>
           </div>
         </el-card>
       </div>
     </div>
-    <div class="flex-card" v-else :style="cardBoxStyle">
-      <div v-for="(data, dataIndex) in cardList" :key="dataIndex" class="box-card">
-        <el-card>
-          <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(data)" alt="" />
-          <div class="title" :style="titleStyle">
-            <span v-if="cardInfo.title.text != ''">
-              {{ cardInfo.title.text + ':' }}
-            </span>
-            <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
-              <div slot="content">
-                {{ getModelName(cardInfo.title.model, data, 'title') }}
-              </div>
-              <span>
-                {{ getModelName(cardInfo.title.model, data, 'title') }}
+    <!-- 图文卡片布局(上下) -->
+    <div v-else-if="cardInfo.value == 2" class="flex-card" :style="cardBoxStyle">
+      <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
+        <el-card :style="cardStyle">
+          <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(dataInfo)" alt="" />
+          <div :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}">
+            <div :style="titleStyle">
+              <span v-if="cardInfo.title.text != ''">
+                {{ cardInfo.title.text + ':' }}
               </span>
-            </el-tooltip>
+              <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
+                <div slot="content">
+                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                </div>
+                <span>
+                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                </span>
+              </el-tooltip>
+            </div>
           </div>
           <div v-if="cardInfo.info.data.length > 0" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
@@ -111,10 +120,10 @@
                   <div class="right">
                     <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                       <div slot="content">
-                        {{ getModelName(item.model, data, 'info') }}
+                        {{ getModelName(item, dataInfo, 'info') }}
                       </div>
                       <span>
-                        {{ getModelName(item.model, data, 'info') }}
+                        {{ getModelName(item, dataInfo, 'info') }}
                       </span>
                     </el-tooltip>
                   </div>
@@ -122,32 +131,118 @@
               </el-col>
             </el-row>
             <div class="footer" v-if="btnList.length > 0">
-              <template v-for="(item, i) in btnList">
-                <template v-if="item.value == 'edit'">
-                  <el-button size="mini" type="text" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, data)"
-                    >{{ item.label }}
-                  </el-button>
-                </template>
-                <template v-if="item.value == 'remove'">
-                  <el-button
-                    size="mini"
-                    type="text"
-                    :key="i"
-                    class="JNPF-table-delBtn"
-                    :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(data.flowState) > -1"
-                    @click="columnBtnsHandel(item.value, data, item)"
-                    >{{ item.label }}
-                  </el-button>
-                </template>
-                <template v-if="item.value == 'detail'">
-                  <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, data)">
-                    {{ item.label }}
-                  </el-button>
-                </template>
-                <template v-if="item.value == 'rowJournal'">
-                  <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, data)">{{ item.label }}</el-button>
+              <div class="btns">
+                <template v-for="(item, i) in btnList">
+                  <template v-if="item.value == 'edit'">
+                    <el-button size="mini" type="text" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
+                      >{{ item.label }}
+                    </el-button>
+                  </template>
+                  <template v-if="item.value == 'remove'">
+                    <el-button
+                      size="mini"
+                      type="text"
+                      :key="i"
+                      class="JNPF-table-delBtn"
+                      :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
+                      @click="columnBtnsHandel(item.value, dataInfo, item)"
+                      >{{ item.label }}
+                    </el-button>
+                  </template>
+                  <template v-if="item.value == 'detail'">
+                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
+                      {{ item.label }}
+                    </el-button>
+                  </template>
+                  <template v-if="item.value == 'rowJournal'">
+                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">{{ item.label }}</el-button>
+                  </template>
                 </template>
-              </template>
+              </div>
+              <div class="check">
+                <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
+              </div>
+            </div>
+            <div v-else>
+              <el-button size="mini" type="text">操作1 </el-button>
+              <el-button size="mini" type="text">操作2 </el-button>
+              <el-button size="mini" type="text">操作3 </el-button>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </div>
+    <!-- 图文卡片布局(左右) -->
+    <div v-else-if="cardInfo.value == 3" class="flex-card" :style="cardBoxStyle">
+      <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
+        <el-card :style="cardStyle">
+          <div class="flex">
+            <div class="flex-left">
+              <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(dataInfo)" alt="" />
+            </div>
+            <div class="flex-right">
+              <div class="item-left" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
+                <div v-if="cardInfo.info.data.length > 0">
+                  <el-row :gutter="10">
+                    <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
+                      <div class="flex-row" :style="infoStyle">
+                        <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
+                        <div class="right">
+                          <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
+                            <div slot="content">
+                              {{ getModelName(item, dataInfo, 'info') }}
+                            </div>
+                            <span>
+                              {{ getModelName(item, dataInfo, 'info') }}
+                            </span>
+                          </el-tooltip>
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+              <div class="item-right">
+                <div class="item-footer" v-if="btnList.length > 0">
+                  <div class="item-btns" v-for="(item, i) in btnList" :key="i">
+                    <div v-if="item.value == 'edit'">
+                      <el-button size="mini" type="primary" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
+                        >{{ item.label }}
+                      </el-button>
+                    </div>
+                    <div v-if="item.value == 'remove'">
+                      <el-button size="mini" type="danger" :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo, item)"
+                        >{{ item.label }}
+                      </el-button>
+                    </div>
+                    <div v-if="item.value == 'detail'">
+                      <el-button size="mini" type="warning" @click="columnBtnsHandel(item.value, dataInfo)">
+                        {{ item.label }}
+                      </el-button>
+                    </div>
+                    <div v-if="item.value == 'rowJournal'">
+                      <el-button size="mini" type="success" @click="columnBtnsHandel(item.value, dataInfo)">{{ item.label }}</el-button>
+                    </div>
+                  </div>
+                  <div class="check">
+                    <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
+                  </div>
+                </div>
+                <div class="item-footer" v-else>
+                  <div class="item-btns">
+                    <el-button size="mini" type="primary">编辑 </el-button>
+                  </div>
+                  <div class="item-btns">
+                    <el-button size="mini" type="danger">删除 </el-button>
+                  </div>
+                  <div class="item-btns">
+                    <el-button size="mini" type="warning">详情 </el-button>
+                  </div>
+                  <div class="check">
+                    <el-checkbox disabled></el-checkbox>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </el-card>
@@ -158,6 +253,7 @@
 
 <script>
 import { dataapiDetail, dataapiUrl } from '@/api/systemData/dataInterface'
+import { comUrl } from '@/utils/define'
 export default {
   props: {
     cardInfo: {
@@ -241,6 +337,7 @@ export default {
     }
   },
   async created() {
+
     // console.log(this.columnList)
     await this.columnList.forEach(async (item) => {
       if (item.propsUrl && item.propsUrl.length) {
@@ -307,13 +404,15 @@ export default {
       let records = this.cardList.filter((item) => item.checked == true)
       this.$parent.handleSelectionChange({ records: records })
     },
-    imgVal(val) {
+    imgVal(data) {
       if (this.modelList.length > 0) {
         return 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
       } else {
         if (this.cardInfo.imgModel && this.cardInfo.imgModel != '') {
-          if (val[this.cardInfo.imgModel] != '' && val[this.cardInfo.imgModel] != undefined && val[this.cardInfo.imgModel] != null) {
-            return val[this.cardInfo.imgModel].split(',')[0]
+          let imgFiledId = this.columnList.find((val) => val.propId == this.cardInfo.imgModel)?.field
+          if (imgFiledId && data[imgFiledId] != '' && data[imgFiledId].length) {
+            let url = data[imgFiledId].split(',')[0]
+            return comUrl + '/api/file/getFileInputStreamById/' + url
           }
         }
       }
@@ -457,12 +556,13 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding-top: 10px;
-  border-top: 1px solid #ccc;
+  // border-top: 1px solid #ebeef5;
   .btns {
     width: 90%;
   }
   .check {
     flex: 1;
+    text-align: right;
   }
 }
 
@@ -472,4 +572,36 @@ export default {
 :deep(.el-card__body) {
   padding: 0 !important;
 }
+
+.flex-left {
+  width: 40%;
+}
+
+.flex-right {
+  flex: 1;
+  display: flex;
+  .item-left {
+    width: 70%;
+  }
+  .item-right {
+    flex: 1;
+    .item-footer {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 0 10px;
+      position: relative;
+
+      .item-btns {
+        margin-top: 10px;
+        text-align: right;
+      }
+      .check {
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+      }
+    }
+  }
+}
 </style>

src/components/ColumnDesign/index.vue

@@ -277,15 +277,15 @@
                       <el-form-item label="卡片类型">
                         <el-button type="primary" size="mini" plain @click="cardShow = true">选择卡片模板</el-button>
                         <div style="margin-top: 10px" v-if="columnData.cardTypeStyle.value != '' && cardImgUrl != ''">
-                          <el-image style="width: 150px; height: 100px; background: #ebeef5" :src="cardImgUrl" alt="" />
+                          <el-image style="width: 150px; height: 100px; background: #ebeef5" :src="cardImgUrl" :preview-src-list="[cardImgUrl]" alt="" />
                         </div>
                       </el-form-item>
-                      <el-form-item v-show="columnData.cardTypeStyle.value == 2" label="图片绑定字段">
-                        <el-select v-model="columnData.cardTypeStyle.imgModel" placeholder="请选择图片绑定字段">
+                      <el-form-item v-show="columnData.cardTypeStyle.value == 2 || columnData.cardTypeStyle.value == 3" label="图片绑定字段">
+                        <el-select v-model="columnData.cardTypeStyle.imgModel" clearable filterable placeholder="请选择图片绑定字段">
                           <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
                         </el-select>
                       </el-form-item>
-                      <el-form-item v-show="columnData.cardTypeStyle.value == 2" label="图片高度">
+                      <el-form-item v-show="columnData.cardTypeStyle.value == 2 || columnData.cardTypeStyle.value == 3" label="图片高度">
                         <el-input-number v-model="columnData.cardTypeStyle.imgHeight" :min="100" :max="1000"></el-input-number>
                       </el-form-item>
                       <el-form-item label="一行展示数">
@@ -294,7 +294,7 @@
                       <el-form-item label="卡片间隔">
                         <el-input-number v-model="columnData.cardTypeStyle.gap" :min="1" :max="10"></el-input-number>
                       </el-form-item>
-                      <el-form-item v-show="columnData.cardTypeStyle.value == 1" label="卡片表头样式">
+                      <el-form-item label="卡片表头样式" v-show="columnData.cardTypeStyle.value !== 3">
                         <el-button type="text" @click="editClass('title')" icon="el-icon-edit">编辑样式</el-button>
                       </el-form-item>
                       <el-form-item label="背景色">
@@ -311,36 +311,41 @@
                       </el-form-item>
                     </el-tab-pane>
                     <el-tab-pane label="数据设置" name="2">
-                      <el-divider>卡片主标题设置</el-divider>
-                      <el-form-item label="绑定值">
-                        <el-select v-model="columnData.cardTypeStyle.title.model" placeholder="请选择绑定字段">
-                          <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
-                        </el-select>
-                      </el-form-item>
-                      <el-form-item label="前缀">
-                        <el-input v-model="columnData.cardTypeStyle.title.text" placeholder="请输入value前缀"></el-input>
-                      </el-form-item>
-                      <el-form-item label="文字颜色">
-                        <el-color-picker v-model="columnData.cardTypeStyle.title.color"></el-color-picker>
-                      </el-form-item>
-                      <el-form-item label="文字大小">
-                        <el-input-number v-model="columnData.cardTypeStyle.title.size" :min="0" :max="99"></el-input-number>
-                      </el-form-item>
-                      <el-divider>卡片副标题设置</el-divider>
-                      <el-form-item label="绑定值">
-                        <el-select v-model="columnData.cardTypeStyle.subTitle.model" placeholder="请选择绑定字段">
-                          <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
-                        </el-select>
-                      </el-form-item>
-                      <el-form-item label="前缀">
-                        <el-input v-model="columnData.cardTypeStyle.subTitle.text" placeholder="请输入value前缀"></el-input>
-                      </el-form-item>
-                      <el-form-item label="文字颜色">
-                        <el-color-picker v-model="columnData.cardTypeStyle.subTitle.color"></el-color-picker>
-                      </el-form-item>
-                      <el-form-item label="文字大小">
-                        <el-input-number v-model="columnData.cardTypeStyle.subTitle.size" :min="0" :max="99"></el-input-number>
-                      </el-form-item>
+                      <div v-show="columnData.cardTypeStyle.value !== 3">
+                        <el-divider>卡片主标题设置</el-divider>
+                        <el-form-item label="绑定值">
+                          <el-select v-model="columnData.cardTypeStyle.title.model" clearable filterable placeholder="请选择绑定字段">
+                            <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
+                          </el-select>
+                        </el-form-item>
+                        <el-form-item label="前缀">
+                          <el-input v-model="columnData.cardTypeStyle.title.text" placeholder="请输入value前缀"></el-input>
+                        </el-form-item>
+                        <el-form-item label="文字颜色">
+                          <el-color-picker v-model="columnData.cardTypeStyle.title.color"></el-color-picker>
+                        </el-form-item>
+                        <el-form-item label="文字大小">
+                          <el-input-number v-model="columnData.cardTypeStyle.title.size" :min="0" :max="99"></el-input-number>
+                        </el-form-item>
+                        <div v-show="columnData.cardTypeStyle.value != 2">
+                          <el-divider>卡片副标题设置</el-divider>
+                          <el-form-item label="绑定值">
+                            <el-select v-model="columnData.cardTypeStyle.subTitle.model" clearable filterable placeholder="请选择绑定字段">
+                              <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
+                            </el-select>
+                          </el-form-item>
+                          <el-form-item label="前缀">
+                            <el-input v-model="columnData.cardTypeStyle.subTitle.text" placeholder="请输入value前缀"></el-input>
+                          </el-form-item>
+                          <el-form-item label="文字颜色">
+                            <el-color-picker v-model="columnData.cardTypeStyle.subTitle.color"></el-color-picker>
+                          </el-form-item>
+                          <el-form-item label="文字大小">
+                            <el-input-number v-model="columnData.cardTypeStyle.subTitle.size" :min="0" :max="99"></el-input-number>
+                          </el-form-item>
+                        </div>
+                      </div>
+
                       <el-divider>卡片详情 <el-button type="text" icon="el-icon-plus" @click="addCardInfo">添加</el-button> </el-divider>
                       <el-form-item label="卡片内容样式">
                         <el-button type="text" @click="editClass('content')" icon="el-icon-edit">编辑样式</el-button>
@@ -357,7 +362,7 @@
                       <div v-for="(item, index) in columnData.cardTypeStyle.info.data" :key="index">
                         <div>详情{{ index + 1 }} <el-button type="text" style="color: #f56c6c" size="small" icon="el-icon-delete" @click="deleteInfo(index)"></el-button></div>
                         <el-form-item label="绑定值">
-                          <el-select v-model="item.model" placeholder="请选择绑定字段">
+                          <el-select v-model="item.model" clearable filterable placeholder="请选择绑定字段">
                             <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
                           </el-select>
                         </el-form-item>
@@ -366,7 +371,7 @@
                         </el-form-item>
                       </div>
                     </el-tab-pane>
-                    <el-tab-pane label="条件设置" name="3"> 条件设置 </el-tab-pane>
+                    <!-- <el-tab-pane label="条件设置" name="3" > 条件设置 </el-tab-pane> -->
                   </el-tabs>
 
                   <el-form-item label="">
@@ -598,21 +603,21 @@ const defaultColumnData = {
     gap: 10,
     bgColor: '#fff', // 背景颜色
     shadowColor: 'rgba(0,0,0,1)', // 阴影颜色
-    borderColor: '#e6ebf5',
+    borderColor: '#ebeef5',
     shadowPx: 10,
     title: {
       text: '标题',
       model: '',
       color: '#000',
       size: 14,
-      class: '{"padding":"10px"}',
+      class: '{"padding":"10px"}'
     },
     subTitle: {
       text: '副标题',
       model: '',
       color: '#000',
       size: 14,
-      class: '{"padding":"10px"}',
+      class: '{"padding":"10px"}'
     },
     info: {
       color: '#000',
@@ -806,15 +811,20 @@ export default {
       cardShow: false,
       cardList: [
         {
-          url: require('@/assets/images/generator/card4.png'),
+          url: require('@/assets/images/generator/cardInfo.jpg'),
           value: 1,
           name: '普通卡片'
         },
-        // {
-        //   url: require('@/assets/images/generator/columnType3.png'),
-        //   value: 2,
-        //   name: '图文卡片'
-        // },
+        {
+          url: require('@/assets/images/generator/cardInfo1.jpg'),
+          value: 2,
+          name: '图文卡片'
+        },
+        {
+          url: require('@/assets/images/generator/cardInfo2.jpg'),
+          value: 3,
+          name: '图文卡片(左右布局)'
+        }
         // {
         //   url: require('@/assets/images/generator/columnType3.png'),
         //   value: 3,
@@ -834,7 +844,8 @@ export default {
       },
       styleShow: false,
       classJson: {},
-      classType: ''
+      classType: '',
+      previewImgShow: false
     }
   },
   filters: {

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)