增加分割线模板 卡片样式添加标签适配

src/components/CardTemplate/index.vue

@@ -96,7 +96,6 @@
     <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 != ''">
@@ -112,6 +111,7 @@
               </el-tooltip>
             </div>
           </div>
+          <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(dataInfo)" alt="" />
           <div v-if="cardInfo.info.data.length > 0" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
               <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
@@ -337,7 +337,6 @@ export default {
     }
   },
   async created() {
-    // console.log(this.columnList)
     await this.columnList.forEach(async (item) => {
       if (item.propsUrl && item.propsUrl.length) {
         await dataapiDetail(item.params.propsUrl).then(async (res) => {

src/components/ColumnDesign/index.vue

@@ -280,11 +280,6 @@
                           <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 || 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 || columnData.cardTypeStyle.value == 3" label="图片高度">
                         <el-input-number v-model="columnData.cardTypeStyle.imgHeight" :min="100" :max="1000"></el-input-number>
                       </el-form-item>
@@ -311,6 +306,11 @@
                       </el-form-item>
                     </el-tab-pane>
                     <el-tab-pane label="数据设置" name="2">
+                      <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>
                       <div v-show="columnData.cardTypeStyle.value !== 3">
                         <el-divider>卡片主标题设置</el-divider>
                         <el-form-item label="绑定值">
@@ -358,12 +358,12 @@
                       </el-form-item>
                       <el-form-item label="栅格布局">
                         <el-radio-group v-model="columnData.cardTypeStyle.info.col">
-                          <el-radio-button label="24">1</el-radio-button>
-                          <el-radio-button label="12">2</el-radio-button>
-                          <el-radio-button label="8">3</el-radio-button>
-                          <el-radio-button label="6">4</el-radio-button>
-                          <el-radio-button label="4.8">5</el-radio-button>
-                          <el-radio-button label="4">6</el-radio-button>
+                          <el-radio-button :label="24">1</el-radio-button>
+                          <el-radio-button :label="12">2</el-radio-button>
+                          <el-radio-button :label="8">3</el-radio-button>
+                          <el-radio-button :label="6">4</el-radio-button>
+                          <el-radio-button :label="4.8">5</el-radio-button>
+                          <el-radio-button :label="4">6</el-radio-button>
                         </el-radio-group>
                         <!-- <el-slider v-model="columnData.cardTypeStyle.info.col" :max="24" :min="2" show-stops :step="2" show-tooltip /> -->
                       </el-form-item>
@@ -379,7 +379,8 @@
                         </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-tab-pane label="副标题设置" name="4"> 副标题设置 </el-tab-pane> -->
                   </el-tabs>
 
                   <el-form-item label="">
@@ -606,7 +607,7 @@ const defaultColumnData = {
   cardTypeStyle: {
     imgModel: '',
     imgHeight: 150,
-    value: '', // 模板类型
+    value: 1, // 模板类型
     rowNum: 3, // 每行显示个数
     gap: 10,
     bgColor: '#fff', // 背景颜色
@@ -819,19 +820,24 @@ export default {
       cardShow: false,
       cardList: [
         {
-          url: require('@/assets/images/generator/cardInfo.jpg'),
+          url: require('@/assets/images/generator/cardInfo1.jpg'),
           value: 1,
           name: '普通卡片'
         },
         {
-          url: require('@/assets/images/generator/cardInfo1.jpg'),
+          url: require('@/assets/images/generator/cardInfo2.jpg'),
           value: 2,
           name: '图文卡片'
         },
         {
-          url: require('@/assets/images/generator/cardInfo2.jpg'),
+          url: require('@/assets/images/generator/cardInfo3.jpg'),
           value: 3,
           name: '图文卡片(左右布局)'
+        },
+        {
+          url: require('@/assets/images/generator/cardInfo4.jpg'),
+          value: 4,
+          name: '状态卡片'
         }
         // {
         //   url: require('@/assets/images/generator/columnType3.png'),

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

@@ -1,93 +0,0 @@
-<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

@@ -1,10 +1,7 @@
 <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> -->
+      <svg-divider :svgStyle="svgStyle"></svg-divider>
     </div>
     <div v-else-if="type == '1'">
       <img v-if="svgUrl != ''" :style="{ width: svgWidth + 'px', height: '40px' }" :src="define.comUrl + '/' + svgUrl" alt="" />
@@ -14,12 +11,10 @@
 </template>
 
 <script>
-import svgDivider1 from './divider1.vue'
-// import svgDivider2 from './divider2.vue'
-// import svgDivider3 from './divider3.vue'
+import svgDivider from './divider.vue'
 export default {
   components: {
-    svgDivider1,
+    svgDivider
   },
   props: {
     defaultVal: {
@@ -54,6 +49,14 @@ export default {
   },
   name: 'new-divider',
   computed: {
+    svgStyle() {
+      return {
+        bgColor: this.bgColor,
+        svgModel: this.svgModel,
+        text:this.defaultVal,
+        ...this.fontStyle
+      }
+    }
   },
   data() {
     return {}

src/components/Generator/generator/config.js

@@ -711,8 +711,6 @@ export const inputComponents = [
       fontStyle:{
         color: 'rgba(0, 0, 0,1)',
         size:14,
-        spacing:4,
-        weight:false
       },
       svgModel:'1',
 

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

@@ -1,105 +1,111 @@
 <template>
-  <el-row>
-    <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-input :value="activeData.__slot__.default" @input="onDefaultValueInput" placeholder="显示在分割线上的文字" />
-    </el-form-item>
-    <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>
+  <div>
+    <el-row>
+      <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__.fontStyle.color" show-alpha @change="onColorChange($event, 'color')"></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>
-      <!-- <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>
+      <div v-show="activeData.__config__.type == '0'">
+        <el-form-item label="模板列表">
+          <el-button type="primary" size="mini" plain @click="show = true">选择模板</el-button>
+          <div>
+            <svg-divider :svgStyle="{ ...svgStyle, ...{ svgModel: activeModel } }"></svg-divider>
+          </div>
+        </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-input-number v-model="activeData.__config__.fontStyle.size" :min="10" :max="40" @change="onColorChange($event, 'size')"></el-input-number>
+        </el-form-item>
+      </div>
+      <div v-show="activeData.__config__.type == '1'">
+        <el-form-item label="上传文件(请上传1440*60的svg文件)">
+          <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>
+          </el-upload>
+        </el-form-item>
+      </div>
+    </el-row>
+    <el-dialog title="分割线模板" :visible.sync="show" width="70%" append-to-body modal-append-to-body>
+      <div class="svgBody" v-if="show">
+        <div class="svg-list" :class="item.value == activeModel ? 'active' : ''" v-for="(item, index) in svgList" :key="index" @click="checkSvgModel(item.value)">
+          <svg-divider :svgStyle="{ ...svgStyle, ...{ svgModel: item.value } }"></svg-divider>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </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'
+import svgDivider from '@/components/Generator/components/NewDivider/divider.vue'
 export default {
   props: ['activeData'],
   mixins: [comMixin],
   components: {
-    svgDivider1
-    // svgDivider2,
-    // svgDivider3
+    svgDivider
   },
   data() {
     return {
+      activeModel: '1',
       uploadHeaders: { 'Blade-Auth': 'bearer ' + getToken() },
+      show: false,
       svgList: [
         {
           value: '1',
           label: '模板1'
+        },
+        {
+          value: '2',
+          label: '模板2'
+        },
+        {
+          value: '3',
+          label: '模板3'
+        },
+        {
+          value: '4',
+          label: '模板4'
+        },
+        {
+          value: '5',
+          label: '模板5'
+        },
+        {
+          value: '6',
+          label: '模板6'
+        },
+        {
+          value: '7',
+          label: '模板7'
         }
       ]
     }
   },
-  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)
+  computed: {
+    svgStyle() {
+      return {
+        bgColor: this.activeData.__config__.bgColor,
+        text: this.activeData.__slot__.default,
+        color: this.activeData.__config__.fontStyle.color,
+        size: this.activeData.__config__.fontStyle.size
+      }
+    }
   },
   methods: {
     handleSuccess(res) {
@@ -124,8 +130,31 @@ export default {
     },
     onPositionChange(val, type) {
       this.$set(this.activeData.__config__.positionStyle, type, val)
+    },
+
+    checkSvgModel(val) {
+      this.activeModel = val
+      this.$set(this.activeData.__config__, 'svgModel', val)
+      this.show = false
     }
   }
 }
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.svgBody {
+  padding: 0 20px;
+  .svg-list {
+    margin-top: 20px;
+    border: 1px solid #ebeef5;
+    padding: 15px;
+    border-radius: 10px;
+    cursor: pointer;
+    &:hover {
+      border: 1px solid #409eff;
+    }
+  }
+  .active {
+    border: 1px solid #409eff;
+  }
+}
+</style>

src/views/basic/dynamicModel/list/index.vue

@@ -376,6 +376,12 @@
             <el-button size="mini" type="text" :icon="item.icon" @click="customBtnsBatchHandel(item)">{{ item.label }}</el-button>
           </div>
         </div>
+        <div style="background: #ffffff;display:flex;padding:0 15px" v-if="permLabelList.length">
+              <el-button :style="{color:permLabelList[0].labelCss && JSON.parse(permLabelList[0].labelCss).defaultBgColor ? '#ffffff' : '',background: !paramLabelId && permLabelList[0].labelCss ? JSON.parse(permLabelList[0].labelCss).actionBgColor : JSON.parse(permLabelList[0].labelCss).defaultBgColor}" @click="permLabelList.forEach((item)=>{item.active = false});paramLabelId = '';search()">全部</el-button>
+              <div style="margin-left:10px" v-for="(item,index) in permLabelList" :key="index">
+                <el-button v-if="item.labelStatus !== 1" :key="item.id" :style="{color:JSON.parse(item.labelCss).defaultBgColor ? '#ffffff' : '', background: item.active ? JSON.parse(item.labelCss).actionBgColor : JSON.parse(item.labelCss).defaultBgColor}"  @click="permLabelSeach(item)">{{item.visualdevPermName}}</el-button>
+              </div>
+        </div>
         <CardTemplate
           v-if="cardData.length > 0"
           :columnList="columnData.columnList"