diff --git a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/controller/template/TemplateController.java b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/controller/template/TemplateController.java
index 005f3ae..e1dfebb 100644
--- a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/controller/template/TemplateController.java
+++ b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/controller/template/TemplateController.java
@@ -37,6 +37,17 @@ public class TemplateController {
         return new ResponseEntity<>(HttpStatus.OK);
     }
 
+    @GetMapping("/getTemplateList")
+    @Log("前端打印模板名称下拉选列表")
+    public ResponseEntity<Object> getTemplateList() {
+        return new ResponseEntity<>(templateService.getTemplateList(), HttpStatus.OK);
+    }
+
+    @GetMapping("/getTicketList")
+    @Log("前端模板需要关联的工单下拉选列表")
+    public ResponseEntity<Object> getTicketList() {
+        return new ResponseEntity<>(templateService.getTicketList(), HttpStatus.OK);
+    }
 
     @GetMapping("/id")
     @Log("根据id查询模板")
diff --git a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/TemplateService.java b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/TemplateService.java
index 8713fc8..246374f 100644
--- a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/TemplateService.java
+++ b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/TemplateService.java
@@ -1,5 +1,6 @@
 package org.nl.system.service.template;
 
+import com.alibaba.fastjson.JSONArray;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.service.IService;
 import org.nl.common.domain.query.PageQuery;
@@ -15,6 +16,19 @@ public interface TemplateService extends IService<Template> {
 
     Template selectById(String id);
 
+    /**
+     * 前端打印模板名称下拉选列表
+     *
+     * @return
+     */
+    JSONArray getTemplateList();
+
+    /**
+     *前端模板需要关联的工单下拉选列表
+     *
+     * @return
+     */
+    JSONArray getTicketList();
 
     IPage<Template> query(Map param, PageQuery page);
 
diff --git a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/dto/Template.java b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/dto/Template.java
index e2f7036..e339664 100644
--- a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/dto/Template.java
+++ b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/dto/Template.java
@@ -13,7 +13,6 @@ import lombok.EqualsAndHashCode;
 @TableName("acs_template")
 public class Template {
 
-
     /**
      * 模板id
      */
@@ -58,4 +57,8 @@ public class Template {
      * 是否删除
      */
     private String is_delete;
+    /**
+     * 工单号
+     */
+    private String ticket_code;
 }
diff --git a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/dto/mapper/TemplateMapper.java b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/dto/mapper/TemplateMapper.java
index ccb94e0..e61dd0a 100644
--- a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/dto/mapper/TemplateMapper.java
+++ b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/dto/mapper/TemplateMapper.java
@@ -4,4 +4,5 @@ import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import org.nl.system.service.template.dto.Template;
 
 public interface TemplateMapper extends BaseMapper<Template> {
+    Template selectByName(String name);
 }
diff --git a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/impl/TemplateServiceImpl.java b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/impl/TemplateServiceImpl.java
index 3823b40..68ebe79 100644
--- a/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/impl/TemplateServiceImpl.java
+++ b/acs/nladmin-system/nlsso-server/src/main/java/org/nl/system/service/template/impl/TemplateServiceImpl.java
@@ -6,23 +6,28 @@ import cn.hutool.core.util.ObjectUtil;
 import cn.hutool.core.util.RandomUtil;
 import cn.hutool.core.util.StrUtil;
 import com.alibaba.fastjson.JSON;
+import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
+import com.baomidou.mybatisplus.extension.conditions.query.LambdaQueryChainWrapper;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import org.nl.acs.device.domain.Device;
 import org.nl.common.domain.query.PageQuery;
 import org.nl.common.utils.SecurityUtils;
 import org.nl.system.service.template.TemplateService;
 import org.nl.system.service.template.dto.Template;
 import org.nl.system.service.template.dto.mapper.TemplateMapper;
 import org.nl.system.service.tickets.dto.Tickets;
+import org.nl.system.service.tickets.dto.mapper.TicketsMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
 @Service
@@ -31,20 +36,24 @@ public class TemplateServiceImpl extends ServiceImpl<TemplateMapper, Template> i
 
     @Autowired
     private TemplateMapper templateMapper;
+    @Autowired
+    private TicketsMapper ticketsMapper;
 
     @Override
     public void addTemplate(Map map) {
         String template_name =(String) map.get("template_name");
-        String panels1 = CollUtil.toList(map.get("panels")).get(0).toString();
-        String replace = panels1.replace("=", ":").substring(1, panels1.length() - 1);
+        Map panels=new HashMap();
+        panels.put("panels",map.get("panels"));
+//        String replace = panels1.replace("=", ":").substring(1, panels1.length() - 1);
         Template template = new Template();
         template.setTemplate_id(RandomUtil.randomNumbers(16));
         template.setTemplate_name(template_name);
-        template.setTemplate(replace);
+        template.setTemplate(JSON.toJSONString(panels));
         template.setCreate_by(SecurityUtils.getCurrentUsername());
         template.setCreate_time(DateUtil.now());
         template.setUpdate_by(SecurityUtils.getCurrentUsername());
         template.setUpdate_time(DateUtil.now());
+        template.setIs_delete("1");
         templateMapper.insert(template);
     }
 
@@ -61,12 +70,49 @@ public class TemplateServiceImpl extends ServiceImpl<TemplateMapper, Template> i
         return template;
     }
 
+    @Override
+    public JSONArray getTicketList() {
+        //设备基础信息表【acs_device】
+//        JSONArray arr = WQLObject.getWQLObject("acs_device").query("is_delete= '0' AND is_active= '1' AND device_type = 'conveyor'").getResultJSONArray(0);
+        List<Tickets> getTicketList = new LambdaQueryChainWrapper<>(ticketsMapper)
+                .apply("is_delete= '1'")
+                .list();
+        JSONArray arr = JSONArray.parseArray(JSON.toJSONString(getTicketList));
+        JSONArray result = new JSONArray();
+        for (int i = 0; i < arr.size(); i++) {
+            JSONObject obj = arr.getJSONObject(i);
+            JSONObject json = new JSONObject();
+            json.put("ticket_code", obj.getString("ticket_code"));
+            result.add(json);
+        }
+        return result;
+    }
+    @Override
+    public JSONArray getTemplateList() {
+        //设备基础信息表【acs_device】
+//        JSONArray arr = WQLObject.getWQLObject("acs_device").query("is_delete= '0' AND is_active= '1' AND device_type = 'conveyor'").getResultJSONArray(0);
+        List<Template> getTemplateList = new LambdaQueryChainWrapper<>(templateMapper)
+                .apply("is_delete= '1'")
+                .list();
+        JSONArray arr = JSONArray.parseArray(JSON.toJSONString(getTemplateList));
+        JSONArray result = new JSONArray();
+        for (int i = 0; i < arr.size(); i++) {
+            JSONObject obj = arr.getJSONObject(i);
+            JSONObject json = new JSONObject();
+            json.put("template_id", obj.getString("template_id"));
+            json.put("template_name", obj.getString("template_name"));
+            result.add(json);
+        }
+        return result;
+    }
+
     @Override
     public IPage<Template> query(Map param, PageQuery page) {
         QueryWrapper<Template> wrapper = new QueryWrapper<>();
         wrapper.like(ObjectUtil.isNotEmpty(param.get("template_name")),"template_name",param.get("template_name"))
                 .eq(ObjectUtil.isNotEmpty(param.get("template_status")),"template_status",1)
                 .orderByAsc("create_time");
+        wrapper.eq("is_delete", 1);
         Page<Template> templatePage = this.page(new Page<>(page.getPage() + 1, page.getSize()), wrapper);
         return templatePage;
     }
diff --git a/acs/nladmin-ui/src/api/acs/order/order.js b/acs/nladmin-ui/src/api/acs/order/order.js
index 0e7ca33..511cb2f 100644
--- a/acs/nladmin-ui/src/api/acs/order/order.js
+++ b/acs/nladmin-ui/src/api/acs/order/order.js
@@ -1,34 +1,34 @@
 import request from '@/utils/request'
 
 export function add(data) {
-  return request({
-    url: 'api/tickets',
-    method: 'post',
-    data
-  })
+    return request({
+        url: 'api/tickets',
+        method: 'post',
+        data
+    })
 }
 
 export function del(ids) {
-  return request({
-    url: 'api/tickets/',
-    method: 'delete',
-    data: ids
-  })
+    return request({
+        url: 'api/tickets/',
+        method: 'delete',
+        data: ids
+    })
 }
 
 export function edit(data) {
-  return request({
-    url: 'api/tickets',
-    method: 'put',
-    data
-  })
+    return request({
+        url: 'api/tickets',
+        method: 'put',
+        data
+    })
 }
 
 export function query(id) {
-  return request({
-    url: 'api/tickets/selectOne?id =' + id,
-    method: 'get'
-  })
+    return request({
+        url: 'api/tickets/selectOne?id =' + id,
+        method: 'get'
+    })
 }
 
-export default { add, del, edit, query }
+export default { add, del, edit, query }
\ No newline at end of file
diff --git a/acs/nladmin-ui/src/api/acs/order/template.js b/acs/nladmin-ui/src/api/acs/order/template.js
index c89ec51..ff21f67 100644
--- a/acs/nladmin-ui/src/api/acs/order/template.js
+++ b/acs/nladmin-ui/src/api/acs/order/template.js
@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-export function savePdf(data) {
+export function create(data) {
     return request({
         url: 'api/template',
         method: 'post',
@@ -22,5 +22,17 @@ export function del(ids) {
         data: ids
     })
 }
+export function getTemplateList() {
+    return request({
+        url: 'api/template/getTemplateList',
+        method: 'get',
+    })
+}
+export function getTicketList() {
+    return request({
+        url: 'api/template/getTicketList',
+        method: 'get',
+    })
+}
 
-export default { savePdf, see }
\ No newline at end of file
+export default { create, see, del, getTemplateList, getTicketList }
\ No newline at end of file
diff --git a/acs/nladmin-ui/src/views/acs/order/app.vue b/acs/nladmin-ui/src/views/acs/order/app.vue
index bbd3f63..b5dc175 100644
--- a/acs/nladmin-ui/src/views/acs/order/app.vue
+++ b/acs/nladmin-ui/src/views/acs/order/app.vue
@@ -151,6 +151,7 @@ export default {
       template.see(id).then((data) => {
         console.log('====================', data.printElements)
         this.printElements = JSON.parse(data.printElements)
+        console.log(this.printElements)
         // 确保 data 对象中的 printElements 是数组
         if (Array.isArray(this.printElements)) {
           this.isModalVisible = true
diff --git a/acs/nladmin-ui/src/views/acs/order/template.vue b/acs/nladmin-ui/src/views/acs/order/template.vue
index 13fad5b..e41829e 100644
--- a/acs/nladmin-ui/src/views/acs/order/template.vue
+++ b/acs/nladmin-ui/src/views/acs/order/template.vue
@@ -1,77 +1,236 @@
 <template>
   <div class="flex-col">
     <div class="flex-row justify-center" style="margin-bottom: 10px">
-      <button class="secondary circle-10" @click.stop="print">
-        <i class="iconfont sv-printer" />
-        浏览器打印
-      </button>
-      <!-- <button class="secondary circle-10 ml-10" @click.stop="getHtml">
-        <i class="iconfont sv-preview" />
-        预览
-      </button> -->
-      <el-button type="primary" @click="PreviewData"> 导出 </el-button>
-      <el-button type="primary" @click="addTable"> 保存 </el-button>
+      <div>
+        <el-radio-group v-model="radio1" @input="setPaper">
+          <el-radio-button
+            v-for="(value,type) in paperTypes"
+            :key="type"
+            :label="type"
+            name="name"
+          />
+        </el-radio-group>
+
+        <el-popover
+          placement="right"
+          width="400"
+          title="置纸张宽高(mm)"
+          trigger="click"
+        >
+          <el-input-number
+            v-model="paperWidth"
+            :controls="false"
+            :min="1"
+            :max="10000"
+            label="描述文字"
+            @change="otherPaper"
+          />
+          <el-input-number
+            v-model="paperHeight"
+            :controls="false"
+            :min="1"
+            :max="10000"
+            label="描述文字"
+            @change="otherPaper"
+          />
+          <el-button slot="reference">自定义纸张1</el-button>
+        </el-popover>
+<!-- 
+        <el-select
+          v-model="templateId"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="模板名称"
+          :remote-method="getTemplateList"
+          @change="getTemplateById"
+        >
+          <el-option
+            v-for="item in templateList"
+            :key="item.templateId"
+            :label="item.templateName"
+            :value="item.templateId"
+          />
+        </el-select> -->
+                  <el-select
+              v-model="templateId"
+              filterable
+              placeholder="请选择模板"
+              style="width: 150px;"
+              @change="getTemplateById"
+            >
+              <el-option
+                v-for="item in templateList"
+                :key="item.template_name"
+                :label="item.template_name"
+                :value="item.template_id"
+              />
+            </el-select>
+            <el-select
+              v-model="ticketId"
+              filterable
+              placeholder="请选择模板需要关联的工单"
+              style="width: 200px;"
+              @change="getTemplateList"
+            >
+              <el-option
+                v-for="item in ticketList"
+                :key="item.ticket_code"
+                :label="item.ticket_code"
+                :value="item.ticket_code"
+              />
+            </el-select>
+      </div>
+
+      <el-button type="primary" icon="el-icon-printer" @click="print"> 浏览器打印</el-button>
+      <el-button type="primary" @click="preview"> 预览</el-button>
+      <el-button type="primary" @click="PreviewData"> 导出</el-button>
+      <el-button type="primary" @click="addTable"> 保存</el-button>
+      <el-button type="primary" @click="clear"> 清空</el-button>
       <!-- <button class="warning circle-10 ml-10" @click.stop="print2">
         直接打印(需要连接客户端)
         <i class="iconfont sv-printer" />
       </button> -->
     </div>
-    <div class="flex-row" style="height: 87vh">
-      <div class="flex-2 left">
-        <div class="flex-row justify-center flex-wrap">
-          <div class="title">基础元素</div>
-          <div class="ep-draggable-item item" tid="defaultModule.text">
-            <i class="iconfont sv-text" />
-            <span>文本</span>
-          </div>
-          <div class="ep-draggable-item item" tid="defaultModule.image">
-            <i class="iconfont sv-image" />
-            <span>图片</span>
-          </div>
-          <div class="ep-draggable-item item" tid="defaultModule.longText">
-            <i class="iconfont sv-longText" />
-            <span>长文</span>
-          </div>
-          <div class="ep-draggable-item item" tid="defaultModule.table">
-            <i class="iconfont sv-table" />
-            <span>表格</span>
-          </div>
-          <div class="ep-draggable-item item" tid="defaultModule.qrcode">
-            <i class="iconfont sv-qrcode" />
-            <span>html</span>
-          </div>
-          <div class="ep-draggable-item item" tid="defaultModule.barcode">
-            <i class="iconfont sv-barcode" />
-            <span>自定义</span>
-          </div>
-          <div class="title">辅助元素</div>
-          <div class="ep-draggable-item item" tid="defaultModule.hline">
-            <i class="iconfont sv-hline" />
-            <span>横线</span>
-          </div>
-          <div class="ep-draggable-item item" tid="defaultModule.vline">
-            <i class="iconfont sv-vline" />
-            <span>竖线</span>
-          </div>
-          <div class="ep-draggable-item item" tid="defaultModule.rect">
-            <i class="iconfont sv-rect" />
-            <span>矩形</span>
-          </div>
-          <div class="ep-draggable-item item" tid="defaultModule.oval">
-            <i class="iconfont sv-oval" />
-            <span>圆形</span>
-          </div>
+
+    <el-row :gutter="5">
+      <el-col :span="4">
+        <div>
+          <div class="title" style="font-weight: bold;">基础元素</div>
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.text">
+                  <i class="iconfont sv-text" />
+                  <span>文本</span>
+                </div>
+              </div>
+            </el-col>
+
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.image">
+                  <i class="iconfont sv-image" />
+                  <span>图片</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.longText">
+                  <i class="iconfont sv-longText" />
+                  <span>长文</span>
+                </div>
+              </div>
+            </el-col>
+
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.table">
+                  <i class="iconfont sv-table" />
+                  <span>表格</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.emptyTable">
+                  <i class="iconfont sv-table" />
+                  <span>空白表格</span>
+                </div>
+              </div>
+            </el-col>
+
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.customText">
+                  <i class="iconfont sv-text" />
+                  <span>自定义</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+
+          <div class="title" style="font-weight: bold;">辅助元素</div>
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.hline">
+                  <i class="iconfont sv-hline" />
+                  <span>横线</span>
+                </div>
+              </div>
+            </el-col>
+
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.vline">
+                  <i class="iconfont sv-vline" />
+                  <span>竖线</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.rect">
+                  <i class="iconfont sv-rect" />
+                  <span>矩形</span>
+                </div>
+              </div>
+            </el-col>
+
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.oval">
+                  <i class="iconfont sv-oval" />
+                  <span>圆形</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.barcode">
+                  <i class="iconfont sv-barcode" />
+                  <span>条形码</span>
+                </div>
+              </div>
+            </el-col>
+
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <div class="ep-draggable-item item" tid="defaultModule.qrcode">
+                  <i class="iconfont sv-qrcode" />
+                  <span>二维码</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+
         </div>
-      </div>
-      <div class="flex-5 center">
+      </el-col>
+
+      <el-col :span="16" style="margin-top: 15px;">
         <!-- 设计器的 容器 -->
         <div id="hiprint-printTemplate" />
-      </div>
-      <div class="flex-2 right">
+      </el-col>
+      <el-col :span="4">
         <!-- 元素参数的 容器 -->
         <div id="PrintElementOptionSetting" />
-      </div>
-    </div>
+      </el-col>
+    </el-row>
+
     <div>
       <el-dialog :close-on-click-modal="false" :visible.sync="formDias" title="模板" width="550px">
         <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
@@ -89,10 +248,13 @@
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="formDias=false">{{ $t('task.select.Cancel') }}</el-button>
-          <el-button :disabled="isDisabled" type="primary" @click="editBtn">{{ $t('task.select.Confirm') }}</el-button>
+          <el-button :disabled="isDisabled" type="primary" @click="create">{{ $t('task.select.Confirm') }}</el-button>
         </div>
       </el-dialog>
     </div>
+
+    <Preview ref="preView" :preview-show.sync="previewShow" />
+
   </div>
 </template>
 
@@ -100,6 +262,7 @@
 import $ from 'jquery'
 import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
 import template from '@/api/acs/order/template'
+import Preview from '@/views/acs/order/preview.vue'
 
 // 初始化 provider
 hiprint.init({
@@ -107,12 +270,56 @@ hiprint.init({
 })
 export default {
   name: 'Hrprint',
+  components: { Preview },
   data() {
     return {
+      previewShow: false,
+      radio1:null,
+      ticketList: [],
+      templateList: [],
+       ticketId: null,
+      templateId: null,
+      templateLoading: false,
+      curPaper: {
+        type: 'A4',
+        width: 210,
+        height: 296.6
+      },
+
+      paperTypes: {
+        'A3': {
+          width: 420,
+          height: 296.6
+        },
+        'A4': {
+          width: 210,
+          height: 296.6
+        },
+        'A5': {
+          width: 210,
+          height: 147.6
+        },
+        'B3': {
+          width: 500,
+          height: 352.6
+        },
+        'B4': {
+          width: 250,
+          height: 352.6
+        },
+        'B5': {
+          width: 250,
+          height: 175.6
+        }
+      },
+
       formDias: false,
       hiprintTemplate: null, // 声明 hiprintTemplate 以便在 buildDesigner 中使用
       printResults: [],
       isDisabled: false,
+      paperWidth: 220,
+      paperHeight: 80,
+
       form: {
         template_name: '',
         template_status: '',
@@ -133,11 +340,35 @@ export default {
       this.buildDesigner()
     })
   },
+  created() {
+      template.getTemplateList().then(data => {
+        this.templateList = data
+      })
+      template.getTicketList().then(data => {
+        this.ticketList = data
+      })
+  },
   methods: {
     addTable() {
       this.formDias = true
       this.isDisabled = false
     },
+    clear() {
+      this.hiprintTemplate.clear()
+    },
+    preview() {
+      this.previewShow = true
+      /*     const str = '{ "panels": [{ "index": 0, "height": 30, "width": 50, "paperHeader": 0, "paperFooter": 82.5, "printElements": [{ "options": { "left": 7.5, "top": 9, "height": 15, "width": 127.5, "field": "product", "testData": "加多老吉茶 100889", "hideTitle": true }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 120, "top": 27, "height": 33, "width": 13.5, "field": "ptype", "testData": "酒水222", "hideTitle": true }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 7.5, "top": 28.5, "height": 30, "width": 105, "field": "code", "testData": "100889", "textAlign": "center", "textType": "barcode" }, "printElementType": { "title": "文本", "type": "text" } }], "paperNumberLeft": 111, "paperNumberTop": 63, "paperNumberDisabled": true }] }'
+
+      const hiprintTemplate = new hiprint.PrintTemplate({
+        template: JSON.parse(str)
+      })
+      hiprintTemplate.design('#hiprint-printTemplate')
+
+      const printData = { product: '测试数量', ptype: '测试酒水', code: '100889' }*/
+      const printData = { dd: '测试数量' }
+      this.$refs.preView.show(this.hiprintTemplate, printData)
+    },
     /**
      * 构建左侧可拖拽元素
      * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
@@ -161,13 +392,48 @@ export default {
         this.hiprintTemplate = new hiprint.PrintTemplate({
           settingContainer: '#PrintElementOptionSetting' // 元素参数容器
         })
-        this.hiprintTemplate.addPrintPanel({ width: 200, height: 300, paperFooter: 340, paperHeader: 10 });
         // 构建 并填充到 容器中
         this.hiprintTemplate.design('#hiprint-printTemplate')
-        //
-        this.hiprintTemplate_.add
       }
     },
+    // 根据搜索获取模板列表
+    getTemplateById() {
+    //  if (hiprintTemplate) {
+        template.see(this.templateId).then(res => {
+        try {
+          this.hiprintTemplate.update(JSON.parse(res.template))
+        } catch (e) { 
+          this.$message.error(`更新失败: ${e}`)
+        }
+    })
+    // }
+  },
+
+    otherPaper() {
+      this.hiprintTemplate.setPaper(this.paperWidth, this.paperHeight)
+    },
+
+    /**
+     * 设置纸张大小
+     * @param type [A3, A4, A5, B3, B4, B5, other]
+     * @param value {width,height} mm
+     */
+    setPaper(type) {
+      try {
+        // debugger
+        if (Object.keys(this.paperTypes).includes(type)) {
+          // this.curPaper = {type: type, width: value.width, height: value.height}
+          const value = this.paperTypes[type]
+          this.hiprintTemplate.setPaper(value.width, value.height)
+        } else {
+          this.curPaper = { type: 'other', width: value.width, height: value.height }
+          this.hiprintTemplate.setPaper(value.width, value.height)
+        }
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`)
+      }
+    },
+
     /**
      * 浏览器打印
      */
@@ -189,6 +455,7 @@ export default {
       // 调用浏览器打印
       if (this.hiprintTemplate) {
         console.log('准备打印，参数：', { printData, options, ext })
+        debugger
         this.hiprintTemplate.print(printData, options, ext)
       }
     },
@@ -228,14 +495,15 @@ export default {
         console.error('PDF 生成失败:', error)
       })
     },
-    editBtn() {
+    create() {
       // console.log('保存数据', this.hiprintTemplate.getJson())
       this.isDisabled = true
+      // debugger
       this.form = {
         ...this.form, // 保留原有属性
         ...this.hiprintTemplate.getJson() // 赋值新属性
       }
-      template.savePdf(this.form).then((data) => {
+      template.create(JSON.stringify(this.form)).then((data) => {
         this.formDias = false
         // 设置定时器，等待一定时间后再次允许请求
         setTimeout(() => {
@@ -247,39 +515,36 @@ export default {
 }
 </script>
 
-<style scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
 /* 字体样式 */
 @import "../../../assets/css/iconfont.css";
 
-/* 定义全局样式 */
-/* 在 main.js 入库文件引入 */
-body {
-  margin: 0;
-}
-
 /* scrollbar */
 ::-webkit-scrollbar {
   height: 4px;
   width: 4px;
 }
+
 ::-webkit-scrollbar-corner {
   height: 4px;
   width: 4px;
 }
-::-webkit-scrollbar-thumb {
+
+/*::-webkit-scrollbar-thumb {
   background: purple;
   border-radius: 2px;
   background-image: -webkit-linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.2) 25%,
-    transparent 25%,
-    transparent 50%,
-    rgba(255, 255, 255, 0.2) 50%,
-    rgba(255, 255, 255, 0.2) 75%,
-    transparent 75%,
-    transparent
+      45deg,
+      rgba(255, 255, 255, 0.2) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.2) 50%,
+      rgba(255, 255, 255, 0.2) 75%,
+      transparent 75%,
+      transparent
   );
-}
+}*/
+
 ::-webkit-scrollbar-thumb:hover {
   background: purple;
 }
@@ -288,146 +553,25 @@ body {
 .flex-row {
   display: flex;
 }
+
 .flex-col {
   display: flex;
   -ms-flex-direction: column; /* 旧版 IE */
   flex-direction: column;
 }
+
 .flex-wrap {
   flex-wrap: wrap;
 }
+
 .align-center {
   align-items: center;
 }
+
 .justify-center {
   justify-content: center;
 }
 
-.flex-1 {
-  -ms-flex: 1;
-  flex: 1;
-}
-.flex-2 {
-  -ms-flex: 2;
-  flex: 2;
-}
-.flex-3 {
-  -ms-flex: 3;
-  flex: 3;
-}
-.flex-4 {
-  -ms-flex: 4;
-  flex: 4;
-}
-.flex-5 {
-  -ms-flex: 5;
-  flex: 5;
-}
-
-.ml-10 {
-  margin-left: 10px;
-}
-.mr-10 {
-  margin-right: 10px;
-}
-.mt-10 {
-  margin-top: 10px;
-}
-.mb-10 {
-  margin-bottom: 10px;
-}
-
-/* button 样式 为了好看点 */
-button {
-  padding: 10px;
-  min-width: 40px;
-  color: white;
-  opacity: 0.9;
-  cursor: pointer;
-  border-width: 0;
-  border: 1px solid #d9d9d9;
-}
-button:hover {
-  opacity: 1;
-}
-button i {
-  font-size: 16px !important;
-}
-.circle,
-.circle-4 {
-  border-radius: 4px !important;
-}
-.circle-10 {
-  border-radius: 10px !important;
-}
-/* 按钮颜色 */
-.primary {
-  background: purple;
-}
-.info {
-  color: #000;
-  background: none;
-}
-.info:hover {
-  color: purple;
-  border-color: purple;
-}
-.secondary {
-  background: #1976d2;
-}
-.warning {
-  background: #d32f2f;
-}
-
-/* modal */
-.modal {
-  padding: 0;
-  margin: 0;
-}
-.modal .mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  height: 100%;
-  background-color: #00000073;
-}
-.modal .wrap {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  overflow: auto;
-  background-color: #00000073;
-  outline: 0;
-}
-.modal .wrap .box {
-  position: relative;
-  margin: 10% auto;
-  width: 40%;
-  background: #fff;
-  border-radius: 4px;
-  z-index: 1001;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
-}
-.modal-box__header {
-  padding: 10px 14px;
-  border-bottom: 1px solid #e9e9e9;
-}
-.modal-box__footer {
-  text-align: end;
-}
-.modal-box__footer button {
-  min-width: 100px;
-}
-.modal-box__footer button:not(:last-child) {
-  margin-right: 10px;
-}
 /* 重写全局 hiprint 样式 */
 .hiprint-headerLine,
 .hiprint-footerLine {
@@ -458,32 +602,7 @@ button i {
   top: -14px;
   font-size: 12px;
 }
-/* 区域 */
-.left {
-  background: white;
-  border-radius: 4px;
-  border: 1px solid #d9d9d9;
-  padding: 10px 0;
-  box-shadow: 2px 2px 2px 0px rgba(181, 16, 181, 0.2);
-  overflow: auto;
-}
-.center {
-  margin: 0 10px;
-  background: white;
-  border-radius: 4px;
-  border: 1px solid #d9d9d9;
-  padding: 20px;
-  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
-  overflow: auto;
-}
-.right {
-  background: white;
-  border-radius: 4px;
-  border: 1px solid #d9d9d9;
-  padding: 10px 0;
-  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
-  overflow: auto;
-}
+
 /* 左侧拖拽元素样式 */
 .title {
   font-size: 16px;
@@ -491,6 +610,7 @@ button i {
   width: 100%;
   margin: 10px 0 0 24px;
 }
+
 .item {
   display: flex;
   flex-direction: column;
@@ -498,15 +618,18 @@ button i {
   background: white;
   padding: 4px 10px;
   margin: 10px 8px 4px 8px;
-  width: 38%;
+  /*width: 38%;*/
   min-height: 60px;
   border-radius: 4px;
   box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
 }
+
 .item .iconfont {
   font-size: 1.5rem;
 }
+
 .item span {
   font-size: 14px;
 }
+
 </style>