自定义文本,属性,条码 2022-04-21 sxm

src/components/panel/layers.vue

@@ -8,7 +8,7 @@
       :type="layer === activeElement?'':'info'"
       @click="(e) => {activeLayer(e, layer)}"
       @close="(e) => {dele(e, layer)}"
-    >{{ layer.value }}</el-tag>
+    >{{ layer.title }}</el-tag>
   </div>
 </template>
 

src/components/panel/options/index.vue

@@ -12,7 +12,7 @@
           <el-checkbox-group v-model="item.selectCol">
             <el-row>
               <el-col v-for="col in item.columnsAttr" :key="col.name" :span="12">
-                <el-checkbox :label="col.name">{{ col.title }}</el-checkbox>
+                <el-checkbox :label="col.name">{{ col.name }}</el-checkbox>
               </el-col>
             </el-row>
           </el-checkbox-group>
@@ -74,7 +74,7 @@ export default {
           defaultValue: "属性",
           dragable: true,
           height: 40,
-          id: 335,
+          id: 336,
           isEdit: 1,
           left: 50,
           lodopStyle: null,
@@ -106,7 +106,7 @@ export default {
           defaultValue:"CK-1234567890",
           dragable:true,
           height:40,
-          id:338,
+          id:337,
           isEdit:1,
           left:50,
           lodopStyle: {
@@ -134,7 +134,40 @@ export default {
           type:"bar-code",
           value:"{单号}",
           width:120
-        }
+        },
+        {
+          columnsAttr:null,
+          defaultValue:"http://192.168.1.83:9100/iamge/666.jpg",
+          dragable:true,
+          height:40,
+          id:338,
+          isEdit:1,
+          left:50,
+          lodopStyle: {
+            id:5,
+            qrCodeErrorlevel:"L",
+            qrCodeVersion:"1",
+            site:null,
+            supplierId:338
+          },
+          name:"图片",
+          remark:null,
+          resizable:true,
+          site:null,
+          status:null,
+          style: {
+            ItemType:0,
+            zIndex:0,
+            height: 100,
+            width: 100
+          },
+          supplierId:1,
+          title:"图片",
+          top:0,
+          type:"braid-image",
+          value:"",
+          width:120
+        },
       ]
     }
   },

src/components/panel/style.vue

@@ -160,29 +160,68 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row v-if=" activeElement.isEdit==1">
         <el-col :span="12">
-         <el-form-item label="文本内容">
-           <el-input v-model="activeElement.value"></el-input>
+         <el-form-item label="控件名称">
+           <el-input v-model="activeElement.title"></el-input>
          </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item v-if="activeElement.isEdit==1" label="属性值">
+          <el-form-item v-if=" activeElement.type != 'braid-image' " label="属性值">
+            <el-input v-model="activeElement.value"></el-input>
+          </el-form-item>
+          <el-form-item v-if=" activeElement.type == 'braid-image' " label="文件名">
             <el-input v-model="activeElement.name"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row v-if=" activeElement.isEdit==0">
+        <el-col :span="12">
+          <el-form-item label="控件名称">
+            <el-input v-model="activeElement.title"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="文本内容">
+            <el-input v-model="activeElement.value"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </div>
 </template>
 <script>
 import { getCodeTypeArray, getItemTypeArray } from '../../libs/props.js'
-
+//activeElement.value
 export default {
   data() {
     return {
+      imageName: '',
+      value: '',
       codeTypeArray: getCodeTypeArray(),
       itemTypeArray: getItemTypeArray(),
+      url: 'http://192.168.1.83:9100/iamge/'
+    }
+  },
+  watch :{
+    imageName:{
+      handler: function (newV, oldV) {
+        this.activeElement.value = 'http://192.168.1.83:9100/iamge/'+this.imageName
+      }
+    },
+    activeElement:{
+      deep: true,
+      handler: function (newV, oldV) {
+        if (this.activeElement.isEdit == 1 &&  this.activeElement.type != 'braid-image'){
+          this.activeElement.name = this.activeElement.value.substring(1,this.activeElement.value.length-1)
+        }
+        if (this.activeElement.isEdit == 1 &&  this.activeElement.type == 'braid-image'){
+          this.activeElement.value = 'http://192.168.1.83:9100/iamge/'+this.activeElement.name
+        }
+        if (this.activeElement.isEdit == 0){
+          this.activeElement.defaultValue = this.activeElement.value
+        }
+      }
     }
   },
   computed: {