标签打印

src/views/modules/labelSetting/label_draw.vue

@@ -246,7 +246,9 @@ export default {
   },
   methods: {
     dataFromShow () {
+      // 此处正式使用，应该获取对应标签类型的数据源（视图）
       this.dataKeyList=Object.keys(this.elements[0])
+      this.checkedKeys = [];
       this.dataFromFlag = true;
     },
     dataConfirm () {
@@ -537,6 +539,8 @@ export default {
   width: 600px;
   //border-left: 1px solid #ddd;
   padding: 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .image-zpl-uploader {

src/views/modules/labelSetting/label_draw2.vue

@@ -110,28 +110,32 @@
             <h3 style="width: 100px">属性配置 <i class="el-icon-info"></i></h3>
           </el-tooltip>
           <div v-if="selectedElement.type === 'text'">
-            <label>文本内容：<input v-model="selectedElement.data"/></label><br><br>
-            <label>字体大小：<input type="number" v-model="selectedElement.fontSize"/></label>
+            <label>文本内容：<el-input style="width: 200px" v-model="selectedElement.data"/></label>
+            <el-button style="margin-left: 5px" type="primary" @click="dataFromShow">数据源</el-button>
+            <br><br>
+            <label>字体大小：<el-input style="width: 200px" type="number" v-model="selectedElement.fontSize"/></label>
             <br><br>
             <label style="font: bold">加粗：<el-checkbox v-model="selectedElement.bold"></el-checkbox></label>
             <label style="margin-left: 10px">自动换行：<el-checkbox v-model="selectedElement.newline"></el-checkbox></label>
             <label v-if="selectedElement.newline">
-              文本宽度：<input type="number" v-model="selectedElement.lineWidth"/></label>
+              文本宽度：<el-input type="number" style="width: 80px" v-model="selectedElement.lineWidth"/></label>
             <label v-if="selectedElement.newline">
-              文本行数：<input type="number"  v-model="selectedElement.lineRows"/></label>
+              文本行数：<el-input type="number" style="width: 80px"  v-model="selectedElement.lineRows"/></label>
           </div>
           <div v-if="selectedElement.type === 'hLine' || selectedElement.type === 'vLine'">
-            <label>宽度：<input type="number" v-model="selectedElement.width"/></label><br><br>
-            <label>高度：<input type="number" v-model="selectedElement.height"/></label>
+            <label>宽度：<el-input type="number" style="width: 200px" v-model="selectedElement.width"/></label><br><br>
+            <label>高度：<el-input type="number" style="width: 200px" v-model="selectedElement.height"/></label>
           </div>
           <div v-if="selectedElement.type === 'barcode' || selectedElement.type === 'onecode'">
-            <label>数据：<input v-model="selectedElement.data"/></label><br><br>
-            <label>宽度：<input type="number" v-model="selectedElement.width"/></label><br><br>
-            <label>高度：<input type="number" v-model="selectedElement.height"/></label>
+            <label>数据：<el-input style="width: 200px" v-model="selectedElement.data"/></label>
+            <el-button style="margin-left: 5px" type="primary" @click="dataFromShow">数据源</el-button><br><br>
+            <label>宽度：<el-input type="number" style="width: 200px" v-model="selectedElement.width"/></label><br><br>
+            <label>高度：<el-input type="number" style="width: 200px" v-model="selectedElement.height"/></label>
           </div>
           <div v-if="selectedElement.type === 'qrcode'">
-            <label>数据：<input v-model="selectedElement.data"/></label><br><br>
-            <label>高度：<input type="number" @change="checkValue" v-model="selectedElement.height"/></label>
+            <label>数据：<el-input style="width: 200px" v-model="selectedElement.data"/></label>
+            <el-button style="margin-left: 5px" type="primary" @click="dataFromShow">数据源</el-button><br><br>
+            <label>高度：<el-input type="number" style="width: 200px" @change="checkValue" v-model="selectedElement.height"/></label>
           </div>
           <div v-if="selectedElement.type === 'pic'">
             <i icon="el-icon-upload"></i><input type="file" ref="uploadFile" accept="image/*" @change="handleImageUpload"/>
@@ -159,6 +163,21 @@
         <pre id="zplcode" style="font-size: 14px">{{ generatedZPL }}</pre>
       </div>
     </div>
+    <el-dialog title="数据源" :close-on-click-modal="false" v-drag :visible.sync="dataFromFlag" width="500px">
+      <el-form label-position="top" >
+        <el-checkbox-group v-model="checkedKeys">
+          <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;margin-left: 10px;margin-top: 10px">
+            <el-checkbox v-for="key in dataKeyList" :key="key" :label="key"
+                         style="margin: 0; align-items: center; display: flex;">{{ key }}</el-checkbox>
+          </div>
+        </el-checkbox-group>
+
+      </el-form>
+      <el-footer style="height:40px;margin-top: 80px;text-align:center">
+        <el-button type="primary" @click="dataConfirm">确定</el-button>
+        <el-button type="primary" @click="dataFromFlag=false">关闭</el-button>
+      </el-footer>
+    </el-dialog>
   </div>
 </template>
 
@@ -190,6 +209,9 @@ export default {
       snapToGrid: true,
       gridSize: 20,
       labelSet: {},
+      dataFromFlag:false,
+      dataKeyList:[],
+      checkedKeys :[],
     }
   },
   computed: {
@@ -225,6 +247,15 @@ export default {
     }
   },
   methods: {
+    dataFromShow () {
+      this.dataKeyList=Object.keys(this.elements[0])
+      this.checkedKeys = [];
+      this.dataFromFlag = true;
+    },
+    dataConfirm () {
+      this.elements[this.selectedIndex].data = this.checkedKeys.map(key => `#{${key}}`).join('');;
+      this.dataFromFlag = false;
+    },
     handleImageUpload(event) {
       const file = event.target.files[0];
       if (!file) return;

src/views/modules/labelSetting/label_setting.vue

@@ -390,7 +390,7 @@ export default {
           // this.columnList = []
           this.columnList = data.rows
         } else {
-          this.getColumnList()
+          //this.getColumnList()
         }
       })
     },