修改看板

src/views/boardGenerate/index1.vue

@@ -704,6 +704,22 @@
                 <el-form-item label="背景颜色" v-if="Object.keys(nodeAttrForm).includes('backgroundColor')">
                   <el-color-picker v-model="nodeAttrForm.backgroundColor" show-alpha />
                 </el-form-item>
+                <el-form-item label="背景图" v-if="Object.keys(nodeAttrForm).includes('backgroundImage')">
+                  <el-upload
+                    class="avatar-uploader"
+                    :action="uploadFileUrl"
+                    :show-file-list="false"
+                    :limit="1"
+                    accept=".jpg,.png"
+                    :headers="headers"
+                    :on-success="(res)=>nodeAttrForm.backgroundImage = res.data.url"
+                  >
+                    <img v-if="nodeAttrForm.backgroundImage" :src="nodeAttrForm.backgroundImage" class="avatar" />
+                    <el-icon v-else class="avatar-uploader-icon">
+                      <Plus />
+                    </el-icon>
+                  </el-upload>
+                </el-form-item>
                 <el-form-item label="是否显示边框" v-if="Object.keys(nodeAttrForm).includes('isBorder')">
                   <el-switch v-model="nodeAttrForm.isBorder" />
                 </el-form-item>
@@ -1400,17 +1416,6 @@ const clear = () => {
 
 };
 const pageBgUploadSuccess = (res) => {
-  // const getFileText = (file) => {
-  //   const reader = new FileReader();
-  //   reader.onload = function(e) {
-  //     const fileContent = e.target.result;
-  //     console.log(fileContent);
-  //     pageSettingForm.value.bg = fileContent;
-  //   };
-  //   reader.readAsDataURL(file);
-  // };
-  // getFileText(file);
-  // return false;
   if (res.code === 200) {
     pageSettingForm.value.bg = res.data.url;
   }

src/views/boardGenerate/nodes/form/backgroundNode.vue

@@ -7,8 +7,8 @@
     <div class="custom-node"
          :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
 
-      <div style="width: 100%; height: 100%;"
-           :style="{backgroundColor:props.data.options.backgroundColor,border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}">
+      <div style="width: 100%; height: 100%;background-repeat: no-repeat; background-size: 100% 100%;"
+           :style="{backgroundImage:props.data.options.backgroundImage,backgroundColor:props.data.options.backgroundColor,border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}">
 
       </div>
     </div>

src/views/boardGenerate/tool.js

@@ -76,7 +76,7 @@ const getOption = (e) => {
   } else if (e === 'carousel') {
     return { swiperOptions: {}, imageFit: 'contain', carouselImages: [] };
   } else if (e === 'background') {
-    return { backgroundColor: '#fff', isBorder: true, borderColor: '#fff' };
+    return { backgroundColor: '#fff', isBorder: true, borderColor: '#fff', backgroundImage: '' };
   } else if (e === 'digitalFlop') {
     return {
       field: '', number: 1111, backgroundColor: 'rgba(180, 180, 180, 0.2)', isBorder: true, borderColor: '#fff'