image props

components.d.ts

@@ -44,6 +44,7 @@ declare module 'vue' {
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     GlobalSetting: typeof import('./src/components/GlobalSetting.vue')['default']
     Line: typeof import('./src/components/sketch-ruler/line.vue')['default']
     PagePalette: typeof import('./src/components/PagePalette.vue')['default']

src/components/config/globalConfig.ts

@@ -19,7 +19,7 @@ export const fontList = [
     {code: 'Microsoft_YaHei', name: '微软雅黑'},
 ]
 
-export const borderStyleList = [
+export const borderTypeList = [
     {code: 'none', name: '无', label: '无'},
     {code: 'solid', name: '实线', label: '实线'},
     {code: 'dotted', name: '点状', label: '点状'},
@@ -182,16 +182,15 @@ export const elementList = [
         code: 'image',
         name: '图片',
         component: 'YvanImage',
-        src: '',
+        src: '/default_image.png',
         title: '默认图片',
         style: {
-            borderRadius: 'inherit',
+            borderRadius: 0,
             borderWidth: 0,
             borderColor: '#212121',
             borderType: 'none',
             width: 200,
-            height: 200,
-            background: null,
+            height: 137,
             rotate: 0
         },
         groupStyle: {}

src/components/elements/YvanCircleProps.vue

@@ -12,7 +12,7 @@
       </el-form-item>
       <el-form-item label="边框类型">
         <el-select v-model="activeComponent.style.borderType" placeholder="请选择行高" filterable>
-          <el-option v-for="borderStyle in borderStyleList" :label="borderStyle.label" :value="borderStyle.code"/>
+          <el-option v-for="borderType in borderTypeList" :label="borderType.label" :value="borderType.code"/>
         </el-select>
       </el-form-item>
       <el-form-item label="边框颜色">
@@ -31,13 +31,13 @@
 <script lang="ts">
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
-import {borderStyleList} from "@/components/config/globalConfig";
+import {borderTypeList} from "@/components/config/globalConfig";
 
 export default {
   name: 'YvanCircleProps',
   data() {
     return {
-      borderStyleList
+      borderTypeList
     }
   },
   computed: {

src/components/elements/YvanImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="yvan-image">
     <StyledImage v-bind="style">
-      <img :alt="element.title || 'RoyImage'" :src="element.src" />
+      <img :alt="element.title || 'YvanImage'" :src="element.src" />
     </StyledImage>
   </div>
 </template>

src/components/elements/YvanImageProps.vue

@@ -2,37 +2,79 @@
   <section class="yvan-image-props">
     <el-form ref="form" label-position="top">
       <el-form-item label="标题">
-        <el-input/>
+        <el-input v-model="activeComponent.title" placeholder="请输入标题"/>
       </el-form-item>
-      <el-form-item label="图片地址">
-        <el-input/>
+      <el-form-item label="宽度">
+        <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="高度">
+        <el-input-number v-model="activeComponent.style.height" :min="0" controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="图片链接">
+        <el-input v-model="activeComponent.src" placeholder="请输入图片链接"/>
       </el-form-item>
       <el-form-item label="上传图片">
-        <el-input/>
+        <el-upload
+            class="file-upload"
+            action="/wms_api/print/com/galaxis/wms/print/CommonManager@uploadFile"
+            accept=".png,"
+            :limit="1"
+            :before-upload="handleBeforeFileUpload"
+            :on-success="handleFileUploadSuccess"
+        >
+          <component is="CloudUploadOutlined" :style="{fontSize: '20px'}"/>
+        </el-upload>
       </el-form-item>
       <el-form-item label="边框类型">
-        <el-select placeholder="请选择粗细">
-          <el-option label="font.name" value="font.code"/>
+        <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
+          <el-option v-for="borderType in borderTypeList" :label="borderType.label" :value="borderType.code"/>
         </el-select>
       </el-form-item>
       <el-form-item label="边框颜色">
-        <el-color-picker show-alpha/>
+        <el-color-picker v-model="activeComponent.style.borderColor"/>
+      </el-form-item>
+      <el-form-item label="边框圆角">
+        <el-input-number v-model="activeComponent.style.borderRadius" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="边框宽度">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.borderWidth" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="旋转角度(°)">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.rotate" controls-position="right"/>
       </el-form-item>
     </el-form>
   </section>
 </template>
 
 <script lang="ts">
+import {mapState} from "pinia";
+import {globalStore} from "@/store";
+import {borderTypeList} from "@/components/config/globalConfig";
+
 export default {
   name: 'YvanImageProps',
   data() {
-    return {}
+    return {
+      borderTypeList
+    }
+  },
+  computed: {
+    ...mapState(globalStore, {
+      activeComponent: (state) => {
+        console.log("activeComponent => ", state.curComponent)
+        return state.curComponent
+      }
+    }),
+  },
+  methods: {
+    handleBeforeFileUpload(rawFile) {
+      const fileName = rawFile.name
+      console.log('file name is ', fileName)
+      return true
+    },
+    handleFileUploadSuccess(response, uploadFile) {
+
+    },
   }
 }
 </script>
@@ -40,6 +82,13 @@ export default {
 <style lang="less">
 .yvan-image-props {
 
+  .file-upload {
+    height: 20px;
+    border-radius: 4px;
+    padding: 4px;
+    border: 1px solid var(--el-border-color);
+  }
+
   .el-input-number {
     width: 100%;
   }

src/components/elements/YvanRectProps.vue

@@ -12,7 +12,7 @@
       </el-form-item>
       <el-form-item label="边框类型">
         <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
-          <el-option v-for="borderStyle in borderStyleList" :label="borderStyle.label" :value="borderStyle.code"/>
+          <el-option v-for="borderType in borderTypeList" :label="borderType.label" :value="borderType.code"/>
         </el-select>
       </el-form-item>
       <el-form-item label="边框颜色">
@@ -34,13 +34,13 @@
 <script lang="ts">
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
-import {borderStyleList} from "@/components/config/globalConfig";
+import {borderTypeList} from "@/components/config/globalConfig";
 
 export default {
   name: 'YvanRectProps',
   data() {
     return {
-      borderStyleList
+      borderTypeList
     }
   },
   computed: {

src/components/elements/YvanRichTextProps.vue

@@ -12,7 +12,7 @@
       </el-form-item>
       <el-form-item label="边框类型">
         <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
-          <el-option v-for="borderStyle in borderStyleList" :label="borderStyle.label" :value="borderStyle.code"/>
+          <el-option v-for="borderType in borderTypeList" :label="borderType.label" :value="borderType.code"/>
         </el-select>
       </el-form-item>
       <el-form-item label="边框颜色">
@@ -31,13 +31,13 @@
 <script lang="ts">
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
-import {borderStyleList} from "@/components/config/globalConfig";
+import {borderTypeList} from "@/components/config/globalConfig";
 
 export default {
   name: 'YvanRichTextProps',
   data() {
     return {
-      borderStyleList
+      borderTypeList
     }
   },
   computed: {

src/components/elements/YvanSimpleTextProps.vue

@@ -84,7 +84,7 @@
       </el-form-item>
       <el-form-item label="边框类型">
         <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
-          <el-option v-for="borderStyle in borderStyleList" :label="borderStyle.label" :value="borderStyle.code"/>
+          <el-option v-for="borderType in borderTypeList" :label="borderType.label" :value="borderType.code"/>
         </el-select>
       </el-form-item>
       <el-form-item label="边框颜色">
@@ -106,14 +106,14 @@
 <script lang="ts">
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
-import {fontList, borderStyleList} from "@/components/config/globalConfig";
+import {fontList, borderTypeList} from "@/components/config/globalConfig";
 
 export default {
   name: 'YvanSimpleTextProps',
   data() {
     return {
       fontList,
-      borderStyleList
+      borderTypeList
     }
   },
   computed: {