修改配置

package.json

@@ -12,7 +12,7 @@
   }
  },
  "publishConfig": {
-  "registry": "http://192.168.1.42:8081/repository/vue/",
+  "registry": "http://192.168.1.87:8081/repository/vue/",
   "access": "public"
  },
  "scripts": {

src/index.ts

 import type { App } from 'vue'
 import 'element-plus/dist/index.css'
 
-import PrintTemplate from './printTemplate/index.vue'
+import PrintTemplate from './printTemplate/components/printDrawer.vue'
 
 const components = [
     PrintTemplate

src/printTemplate/components/preview.vue

@@ -73,5 +73,4 @@ defineExpose({
 :deep(.el-dialog__wrapper) {
   margin-bottom: 24px;
 }
-
 </style>
\ No newline at end of file

src/printTemplate/components/printDrawer.vue

 <template>
-    <el-drawer v-model="props.modelValue" title="新增打印" size="80%" @close="handelClose">
+    <el-drawer v-model="props.modelValue" :title="paperTitle" size="80%" @close="handleClose">
         <div class="app-containter flex-col">
             <div class="header flex-row justify-center" style="margin-bottom: 10px">
                 <!-- 纸张大小 A3、A4 等 -->
@@ -30,7 +30,7 @@
                                     <el-input type="number" v-model="paperHeight"
                                         style="width: 100px; text-align: center; border-left: 0" placeholder="高(mm)" />
                                 </el-input-group>
-                                <el-button type="primary" style="width: 100%" @click="handleClose">确定</el-button>
+                                <el-button type="primary" style="width: 100%" @click="setPaperRule">确定</el-button>
                             </div>
                         </el-popover>
                     </el-button-group>
@@ -62,8 +62,15 @@
                 </el-button> -->
                 </el-button-group>
                 <el-button-group class="ml-10">
-                    <el-button type="success" icon="Finished" @click.stop="clearPaper">
+                    <el-button type="success" ref="buttonSaveRef" icon="Finished" @click.stop="savePaper">
                         保存
+                        <el-popover ref="popoverSaveRef" :virtual-ref="buttonSaveRef" trigger="click" title="设置模板名称"
+                            :width="300" virtual-triggering>
+                            <div class="input-group">
+                                <el-input v-model="paperTitle" style=" text-align: center" />
+                                <el-button type="primary" style="width: 100%" @click="setPaperTitle">确定</el-button>
+                            </div>
+                        </el-popover>
                     </el-button>
                     <el-button type="danger" @click.stop="clearPaper">
                         清空<el-icon class="el-icon--right">
@@ -98,11 +105,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, getCurrentInstance, unref } from "vue";
+import { ref, unref } from "vue";
 import { hiprint } from "vue-plugin-hiprint";
 import { provider1 } from "../ts/provider1";
 import { provider2 } from "../ts/provider2";
-import template from "../ts/template";
 // 组合式函数 hooks
 import { usePaper } from "../../hooks/use-paper";
 import { useZoom } from "../../hooks/use-zoom";
@@ -116,18 +122,29 @@ const props = defineProps({
     modelValue: {
         type: Boolean,
         defalut: false
+    },
+    templateData: {
+        type: Object,
+        default: {}
+    },
+    templateTitle: {
+        type: String,
+        default: ''
     }
 })
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue', 'savePrintData', 'update:templateTitle'])
 // const TEMPLATE_KEY = getCurrentInstance().type.name; // 存储模板对象的 key
 // console.log(TEMPLATE_KEY);
 const TEMPLATE_KEY = undefined
 
 const { paperTypes, curPaperType, paperWidth, paperHeight, setPaper, setPaperOther } = usePaper(TEMPLATE_KEY);
 const { scaleValue, changeScale } = useZoom(TEMPLATE_KEY);
-const buttonRef = ref()
+const paperTitle = ref('默认模板')
 const popoverRef = ref()
+const popoverSaveRef = ref()
+const buttonRef = ref()
+const buttonSaveRef = ref()
 const previewRef = ref()
 const jsonviewRef = ref()
 
@@ -175,7 +192,7 @@ const onClickOutside = () => {
     unref(popoverRef).popperRef?.delayHide?.()
 }
 
-const handleClose = () => {
+const setPaperRule = () => {
     setPaperOther()
     popoverRef.value.hide();
 }
@@ -213,7 +230,7 @@ const print = () => {
         },
     };
     const list = hiprintTemplate.getJson().panels
-    console.log(list);
+    console.log(list, 'list');
     let printData = {} as any
     if (list)
         list[0].printElements.map((item: any) => printData[item.options.field] = item.options.testData)
@@ -241,32 +258,22 @@ const print2 = () => {
 const rotatePaper = () => {
     hiprintTemplate.rotatePaper();
 };
+
 /**
  * 清空所有元素
  */
-const clearPaper = () => {
-    hiprintTemplate.clear();
-};
+const clearPaper = () => hiprintTemplate.clear();
+
 /**
- * 导出模板 json
- * 必须确保 hiprintTemplate 已成功创建
+ * 清空所有元素
  */
-const exportJson = () => {
-    jsonviewRef.value.show(hiprintTemplate)
-    // let json = hiprintTemplate.getJson();
-    // console.log(json);
-    // alert("导出成功! 请查看控制台输出");
-};
+const savePaper = () => unref(popoverSaveRef).popperRef?.delayHide?.()
+
 /**
- * 导出模板 json tid
- * 仅导出 options, 不导出 printElementType
+ * 导出模板 json
  * 必须确保 hiprintTemplate 已成功创建
  */
-const exportJsonTid = () => {
-    let json = hiprintTemplate.getJsonTid();
-    console.log(json);
-    alert("导出成功! 请查看控制台输出");
-};
+const exportJson = () => jsonviewRef.value.show(hiprintTemplate)
 
 // 预览
 const show = () => {
@@ -278,16 +285,21 @@ const show = () => {
     previewRef.value.show(hiprintTemplate, printData)
 }
 
-const handelClose = () => {
+const handleClose = () => {
     emits('update:modelValue', false)
 }
 
+const setPaperTitle = () => {
+    emits('savePrintData', hiprintTemplate.getJson())
+    popoverSaveRef.value.hide();
+}
+
 /**
  * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
  * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
  */
 const mounted = () => {
-    templateRef.value = template
+    templateRef.value = props.templateData
     setTimeout(() => {
         buildLeftElement();
         buildDesigner();
@@ -297,6 +309,7 @@ const mounted = () => {
 
 defineExpose({
     templateRef,
+    paperTitle,
     mounted
 })
 </script>

src/printTemplate/index.vue

@@ -17,13 +17,14 @@
                 </template>
             </el-table-column>
         </el-table>
-        <indexVue v-model="showDrawer" ref="printRef" />
+        <indexVue v-model="showDrawer" ref="printRef" :templateData="template" />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 import indexVue from './components/printDrawer.vue';
+import template from './ts/template';
 
 
 const showDrawer = ref(false)