@utogether/udp-core 1.0.1-beta.9 → 1.0.2

package/src/views/urpt/design/DesignPanel.vue

@@ -1,507 +1,507 @@
-<!--
- * @Author: wei.li
- * @Date: 2022-03-21 10:36:15
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-08-12 09:57:22
- * @Description: 设计面板
--->
-<template>
-  <div v-spinning="loading" class="ut-design-panel">
-    <el-card class="design-panel-contain">
-      <el-space style="margin-bottom: 10px" fill>
-        <div class="flex justify-between">
-          <div>
-            <ut-button icon="ri-eye-line ri-1x" content="preview" @tap="handlePreView" />
-            <el-select
-              v-model="currentRecord.paperType"
-              size="small"
-              placeholder="Select Paper"
-              class="ml-1 mr-1"
-              style="width: 100px !important"
-              @change="handlePaperChange(currentRecord.paperType)"
-            >
-              <el-option
-                v-for="item in dataDict['SU.PRINT.PAPER'].children"
-                :key="item.dictCode"
-                :label="item.dictName"
-                :value="item.dictCode"
-              >
-                <span style="float: left">{{ item.dictName }}</span>
-                <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">{{
-                  item.dictDesc
-                }}</span>
-              </el-option>
-            </el-select>
-            <el-popover
-              v-if="currentRecord.paperType === 'customize'"
-              v-model:visible="paperPopVisible"
-              title="设置纸张宽高(mm)"
-              width="300"
-              size="small"
-              effect="light"
-              trigger="click"
-            >
-              <div>
-                <div class="flex justify-center mb-1" style="width: 100%">
-                  <vxe-input v-model="paperSize.width" type="number" class="w-40" placeholder="宽(mm)" />
-                  <div class="flex items-center justify-center w-8">~</div>
-                  <vxe-input v-model="paperSize.height" type="number" class="w-40" placeholder="高(mm)" />
-                </div>
-                <ut-button style="width: 100%" content="confirm" @tap="handleCustomSize" />
-              </div>
-              <template #reference>
-                <ut-button icon="ri-font-size" content="customSize" @tap.stop="paperPopVisible = true" />
-              </template>
-            </el-popover>
-            <ut-button
-              status="u-cyan"
-              icon="ri-upload-2-line"
-              content="importJSON"
-              auth="import"
-              @tap="handleShowImport()"
-            />
-            <vxe-button icon="ri-indeterminate-circle-line " class="design-custom-button" @click="handleScale('N')" />
-            <vxe-input v-model="scale.ration" disabled align="center" style="width: 70px; margin-left: 10px" />
-            <vxe-button icon="ri-add-circle-fill " class="design-custom-button" @click="handleScale('Y')" />
-            <ut-button
-              status="danger"
-              icon="ri-delete-bin-5-fill"
-              content="repaint"
-              auth="repaint"
-              @tap="handleClearPaper()"
-            />
-          </div>
-          <div>
-            <ut-button icon="ri-save-3-fill" content="save" @tap="handleSave()" />
-            <ut-button status="info" icon="ri-reply-fill" content="back" @tap="handleClose" />
-          </div>
-        </div>
-        <div style="font-size: 12px; color: red; text-align: center">
-          温馨提示: 蓝色线(页眉)以下,每张纸打印都会重复打印到页面底部;红色线(页尾)以下,每张纸打印都会重复打印到页面底部
-        </div>
-      </el-space>
-      <el-row>
-        <el-col :span="3">
-          <el-card class="ut-design-item">
-            <el-row>
-              <el-col :span="24" class="rect-printElement-types hiprintEpContainer">
-                <el-row class="drag_item_title">拖拽组件列表</el-row>
-                <el-row style="height: 60px">
-                  <el-col :span="12" class="drag_item_box">
-                    <div>
-                      <a class="ep-draggable-item" tid="defaultModule.text">
-                        <span class="ri-text" ariel-hidden="true" />
-                        <p class="glyphicon-class">文本</p>
-                      </a>
-                    </div>
-                  </el-col>
-                  <el-col :span="12" class="drag_item_box">
-                    <div>
-                      <a class="ep-draggable-item" tid="defaultModule.image">
-                        <span class="ri-image-line" ariel-hidden="true" />
-                        <p class="glyphicon-class">图片</p>
-                      </a>
-                    </div>
-                  </el-col>
-                </el-row>
-                <el-row style="height: 60px">
-                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
-                    <div>
-                      <a class="ep-draggable-item" tid="defaultModule.longText">
-                        <span class="ri-line-height" ariel-hidden="true" />
-                        <p class="glyphicon-class">长文</p>
-                      </a>
-                    </div>
-                  </el-col>
-                  <el-col :span="12" class="drag_item_box">
-                    <div>
-                      <a class="ep-draggable-item" tid="defaultModule.table">
-                        <span class="ri-table-line" ariel-hidden="true" />
-                        <p class="glyphicon-class">表格</p>
-                      </a>
-                    </div>
-                  </el-col>
-                </el-row>
-                <el-row class="drag_item_title">辅助</el-row>
-                <el-row style="height: 60px">
-                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
-                    <div>
-                      <a class="ep-draggable-item" tid="defaultModule.hline">
-                        <span class="ri-expand-horizontal-s-fill" ariel-hidden="true" />
-                        <p class="glyphicon-class">横线</p>
-                      </a>
-                    </div>
-                  </el-col>
-                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
-                    <div>
-                      <a class="ep-draggable-item" tid="defaultModule.vline">
-                        <span class="ri-expand-vertical-s-fill" ariel-hidden="true" />
-                        <p class="glyphicon-class">竖线</p>
-                      </a>
-                    </div>
-                  </el-col>
-                </el-row>
-                <el-row style="height: 60px">
-                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
-                    <div>
-                      <a class="ep-draggable-item" tid="defaultModule.rect">
-                        <span class="ri-square-line" ariel-hidden="true" />
-                        <p class="glyphicon-class">矩形</p>
-                      </a>
-                    </div>
-                  </el-col>
-                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
-                    <div>
-                      <a class="ep-draggable-item" tid="defaultModule.oval">
-                        <span class="ri-checkbox-blank-circle-line" ariel-hidden="true" />
-                        <p class="glyphicon-class">椭圆</p>
-                      </a>
-                    </div>
-                  </el-col>
-                </el-row>
-              </el-col>
-            </el-row>
-          </el-card>
-        </el-col>
-        <el-col :xs="15" :sm="15" :md="15" :lg="16" :xl="18">
-          <el-card class="card-design">
-            <div id="hiprint-printTemplate" class="hiprint-printTemplate" />
-          </el-card>
-        </el-col>
-        <el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="3">
-          <el-card class="design-setting-panel">
-            <el-row class="hinnn-layout-sider">
-              <div id="PrintElementOptionSetting" />
-            </el-row>
-          </el-card>
-        </el-col>
-      </el-row>
-    </el-card>
-    <vxe-modal v-model="showImportView" title="导入模板JSON数据" height="320" width="450" show-footer>
-      <template #default>
-        <p style="color: red">切勿随意修改JSON数据，可能导致模板加载出错</p>
-        <vxe-textarea v-model="templateContent" :rows="10" size="mini" />
-      </template>
-      <template #footer>
-        <ut-button icon="ri-close-fill" content="cancel" @tap="showImportView = false" />
-        <ut-button icon="ri-save-3-fill" status="u-cyan" content="confirm" @tap="handleImportJson" />
-      </template>
-    </vxe-modal>
-    <preview v-if="showPreviewModal" ref="previewRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, nextTick, onBeforeUnmount } from 'vue';
-import { VxeUI } from 'vxe-pc-ui';
-import { useGlobal } from '@utogether/utils';
-import to from 'await-to-js';
-import { clone } from 'xe-utils';
-import { useSystemStoreHook } from '../../../store/modules/system';
-import panel from './panel';
-import Preview from './Preview.vue';
-// import printData from './print-data';
-import { getServiceApi } from '../../../api';
-// import { errorMessage } from '@utogether/utils';
-
-import '../../../style/suprint.css';
-import '../../../style/print-lock.css';
-
-interface IProps {
-  record: IRecord;
-}
-const props = withDefaults(defineProps<IProps>(), {
-  record: (): IRecord => {
-    return {};
-  }
-});
-
-let { $printPlugin } = useGlobal();
-
-const systemStoreHook = useSystemStoreHook();
-const dataDict = systemStoreHook.getDataDict;
-
-const serviceApi = getServiceApi();
-let hiprintTemplate = null;
-const showPreviewModal = ref(false);
-const paperPopVisible = ref(false);
-const showImportView = ref(false);
-const loading = ref(false);
-const previewRef = ref(null);
-const templateContent = ref('');
-const currentRecord = ref<IRecord>({});
-const paperSize = reactive<IRecord>({});
-const scale = reactive({ max: 5, min: 0.5, value: 1, ration: '100%' });
-
-const handleCustomSize = () => {
-  paperPopVisible.value = false;
-  hiprintTemplate.setPaper(paperSize.width || 210, paperSize.height || 296.6);
-};
-// 直接打印(静默打印)
-// const handlePictBridge = async () => {
-//   if (window.hiwebSocket.opened) {
-//     const data = await serviceApi('CUS003', {});
-//     const printerList = hiprintTemplate.getPrinterList();
-//     hiprintTemplate.print2(data, { printer: '', title: 'hiprint测试打印' });
-//     return;
-//   }
-//   errorMessage('客户端未连接,无法直接打印');
-// };
-
-const handleSave = async (cb?) => {
-  const body = currentRecord.value;
-  let bt = templateContent.value;
-  if (!bt) {
-    const template = hiprintTemplate.getJson();
-    bt = JSON.stringify(template);
-  }
-  body.templateContent = bt;
-  loading.value = true;
-  const [err, data] = await to(serviceApi.put('/urpt/v1/printTemplate', [body]));
-  loading.value = false;
-  if (!err) {
-    templateContent.value = '';
-    currentRecord.value = data[0];
-  }
-  cb && cb();
-};
-
-const handleClose = () => {
-  // hiprint = null
-  emit('onClose');
-};
-
-const emit = defineEmits<{ (e: 'onClose'): void }>();
-
-// 放大缩小值
-const handleScale = max => {
-  let scaleValue = scale.value;
-  if (max === 'Y') {
-    scaleValue += 0.1;
-    if (scaleValue > scale.max) scaleValue = 5;
-  } else {
-    scaleValue -= 0.1;
-    if (scaleValue < scale.min) scaleValue = 0.5;
-  }
-  if (hiprintTemplate) {
-    // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
-    hiprintTemplate.zoom(scaleValue);
-    scale.value = scaleValue;
-    scale.ration = `${(scaleValue * 100).toFixed(0)}%`;
-  }
-};
-
-/**
- * @Author: liwei
- * @Date: 2021-09-01 11:21:05
- * @Desc: 参数设置drawer回调,将参数设置dom添加到弹出层中
- */
-const handleClearPaper = async () => {
-  const type = await VxeUI.modal.confirm('重绘操作不可逆,您确定继续吗?', '温馨提示');
-  if (type === 'confirm') {
-    hiprintTemplate.clear();
-  }
-};
-const handleShowImport = async () => {
-  showImportView.value = true;
-};
-const handleImportJson = async () => {
-  const type = await VxeUI.modal.confirm('导入后将覆盖原有的模板,您确定继续吗?', '温馨提示');
-  if (type === 'confirm') {
-    handleSave(handleClose);
-    showImportView.value = false;
-  }
-};
-const handlePreView = async () => {
-  showPreviewModal.value = true;
-  // const data = await serviceApi('CUS003', {});
-  const data = {};
-  // data.pageSize = 6789;
-  nextTick(() => {
-    previewRef.value.show(hiprintTemplate, data, paperSize.width || 220);
-  });
-};
-// 纸张切换
-const handlePaperChange = code => {
-  if ('customize' !== code) {
-    const { width, height } = getPaperSize(code);
-    paperSize.width = width;
-    paperSize.height = height;
-    hiprintTemplate.setPaper(paperSize.width, paperSize.height);
-  } else {
-    paperPopVisible.value = true;
-  }
-};
-const getPaperSize = code => {
-  const paper = {
-    A3: { width: 420, height: 296.6 },
-    A4: { width: 210, height: 296.6 },
-    A5: { width: 210, height: 147.6 },
-    bisect: { width: 241, height: 140 },
-    trisection: { width: 241, height: 93 }
-  };
-  return paper[code];
-};
-
-onMounted(() => {
-  const { record } = props;
-  loading.value = true;
-  currentRecord.value = clone(record, true);
-  const template = record.templateContent ? JSON.parse(record.templateContent) : panel;
-  $('#hiprint-printTemplate').empty();
-  $printPlugin.print.init({
-    providers: [new $printPlugin.provider()]
-  });
-  // 还原配置
-  $printPlugin.print.setConfig();
-  // 替换配置
-  $printPlugin.print.setConfig({
-    movingDistance: 2.5,
-    text: {
-      supportOptions: [
-        { name: 'styler', hidden: true },
-        { name: 'formatter', hidden: true }
-      ]
-    }
-  });
-
-  $printPlugin.print.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
-  hiprintTemplate = new $printPlugin.print.PrintTemplate({
-    template,
-    settingContainer: '#PrintElementOptionSetting',
-    paginationContainer: '.hiprint-printPagination',
-    history: false // 是否需要 撤销重做功能
-  });
-  hiprintTemplate.design('#hiprint-printTemplate', { grid: true });
-  scale.value = hiprintTemplate.editingPanel.scale || 1;
-  loading.value = false;
-});
-onBeforeUnmount(() => {
-  $printPlugin = null;
-  hiprintTemplate = null;
-});
-</script>
-
-<style lang="scss">
-.ut-design-panel {
-  //   .design-panel-contain > .el-card__body {
-  //     height: 85vh;
-  //     padding: 3px !important;
-  //   }
-
-  //   .card-design {
-  //     display: flex;
-  //     justify-content: center;
-  //     background: url('./bg.png');
-  //   }
-
-  //   ::v-deep(.ut-design-item > .el-card__body) {
-  //     padding: 3px;
-  //   }
-
-  //   ::v-deep(.card-design > .el-card__body) {
-  //     height: 75vh;
-  //     overflow: auto;
-  //   }
-
-  ::v-deep(.design-setting-panel > .el-card__body) {
-    height: 75vh;
-    padding: 3px;
-    overflow: auto;
-  }
-
-  //   .el-space {
-  //     width: 100%;
-  //     margin: 5px 0 0 !important;
-  //   }
-
-  //   ::v-deep(.el-space__item) {
-  //     width: 100%;
-  //     padding-right: 10px;
-  //     padding-bottom: 0 !important;
-  //   }
-}
-// 拖拽
-.drag_item_box {
-  height: 100%;
-  padding: 6px;
-}
-
-.drag_item_box > div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-}
-
-.drag_item_box > div > a {
-  text-align: center;
-  text-decoration-line: none;
-}
-
-.drag_item_box > div > a > span {
-  font-size: 28px;
-}
-
-.drag_item_box > div > a > p {
-  margin: 0;
-}
-
-.drag_item_title {
-  padding: 12px 6px 0;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-// 默认图片
-.design-custom-button {
-  font-size: 16px;
-}
-
-.el-card__body {
-  padding: 16px;
-}
-
-.design-setting-panel > .el-card__body {
-  height: 75vh;
-  padding: 3px;
-  overflow: auto;
-}
-
-.design-custom-button:not(.is--disabled):hover {
-  color: inherit !important;
-}
-
-// 辅助线样式
-.toplineOfPosition {
-  border: 0;
-  border-top: 1px dashed purple;
-}
-
-.bottomlineOfPosition {
-  border: 0;
-  border-top: 1px dashed purple;
-}
-
-.leftlineOfPosition {
-  border: 0;
-  border-left: 1px dashed purple;
-}
-
-.rightlineOfPosition {
-  border: 0;
-  border-left: 1px dashed purple;
-}
-
-// 设计容器
-.card-design {
-  overflow: hidden;
-  overflow: auto;
-}
-
-.hiprint-printElement-image-content img {
-  content: url('/logo.png');
-}
-</style>
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-21 10:36:15
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-08-12 09:57:22
+ * @Description: 设计面板
+-->
+<template>
+  <div v-spinning="loading" class="ut-design-panel">
+    <el-card class="design-panel-contain">
+      <el-space style="margin-bottom: 10px" fill>
+        <div class="flex justify-between">
+          <div>
+            <ut-button icon="ri-eye-line ri-1x" content="preview" @tap="handlePreView" />
+            <el-select
+              v-model="currentRecord.paperType"
+              size="small"
+              placeholder="Select Paper"
+              class="ml-1 mr-1"
+              style="width: 100px !important"
+              @change="handlePaperChange(currentRecord.paperType)"
+            >
+              <el-option
+                v-for="item in dataDict['SU.PRINT.PAPER'].children"
+                :key="item.dictCode"
+                :label="item.dictName"
+                :value="item.dictCode"
+              >
+                <span style="float: left">{{ item.dictName }}</span>
+                <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">{{
+                  item.dictDesc
+                }}</span>
+              </el-option>
+            </el-select>
+            <el-popover
+              v-if="currentRecord.paperType === 'customize'"
+              v-model:visible="paperPopVisible"
+              title="设置纸张宽高(mm)"
+              width="300"
+              size="small"
+              effect="light"
+              trigger="click"
+            >
+              <div>
+                <div class="flex justify-center mb-1" style="width: 100%">
+                  <vxe-input v-model="paperSize.width" type="number" class="w-40" placeholder="宽(mm)" />
+                  <div class="flex items-center justify-center w-8">~</div>
+                  <vxe-input v-model="paperSize.height" type="number" class="w-40" placeholder="高(mm)" />
+                </div>
+                <ut-button style="width: 100%" content="confirm" @tap="handleCustomSize" />
+              </div>
+              <template #reference>
+                <ut-button icon="ri-font-size" content="customSize" @tap.stop="paperPopVisible = true" />
+              </template>
+            </el-popover>
+            <ut-button
+              status="u-cyan"
+              icon="ri-upload-2-line"
+              content="importJSON"
+              auth="import"
+              @tap="handleShowImport()"
+            />
+            <vxe-button icon="ri-indeterminate-circle-line " class="design-custom-button" @click="handleScale('N')" />
+            <vxe-input v-model="scale.ration" disabled align="center" style="width: 70px; margin-left: 10px" />
+            <vxe-button icon="ri-add-circle-fill " class="design-custom-button" @click="handleScale('Y')" />
+            <ut-button
+              status="danger"
+              icon="ri-delete-bin-5-fill"
+              content="repaint"
+              auth="repaint"
+              @tap="handleClearPaper()"
+            />
+          </div>
+          <div>
+            <ut-button icon="ri-save-3-fill" content="save" @tap="handleSave()" />
+            <ut-button status="info" icon="ri-reply-fill" content="back" @tap="handleClose" />
+          </div>
+        </div>
+        <div style="font-size: 12px; color: red; text-align: center">
+          温馨提示: 蓝色线(页眉)以下,每张纸打印都会重复打印到页面底部;红色线(页尾)以下,每张纸打印都会重复打印到页面底部
+        </div>
+      </el-space>
+      <el-row>
+        <el-col :span="3">
+          <el-card class="ut-design-item">
+            <el-row>
+              <el-col :span="24" class="rect-printElement-types hiprintEpContainer">
+                <el-row class="drag_item_title">拖拽组件列表</el-row>
+                <el-row style="height: 60px">
+                  <el-col :span="12" class="drag_item_box">
+                    <div>
+                      <a class="ep-draggable-item" tid="defaultModule.text">
+                        <span class="ri-text" ariel-hidden="true" />
+                        <p class="glyphicon-class">文本</p>
+                      </a>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" class="drag_item_box">
+                    <div>
+                      <a class="ep-draggable-item" tid="defaultModule.image">
+                        <span class="ri-image-line" ariel-hidden="true" />
+                        <p class="glyphicon-class">图片</p>
+                      </a>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row style="height: 60px">
+                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                    <div>
+                      <a class="ep-draggable-item" tid="defaultModule.longText">
+                        <span class="ri-line-height" ariel-hidden="true" />
+                        <p class="glyphicon-class">长文</p>
+                      </a>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" class="drag_item_box">
+                    <div>
+                      <a class="ep-draggable-item" tid="defaultModule.table">
+                        <span class="ri-table-line" ariel-hidden="true" />
+                        <p class="glyphicon-class">表格</p>
+                      </a>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row class="drag_item_title">辅助</el-row>
+                <el-row style="height: 60px">
+                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                    <div>
+                      <a class="ep-draggable-item" tid="defaultModule.hline">
+                        <span class="ri-expand-horizontal-s-fill" ariel-hidden="true" />
+                        <p class="glyphicon-class">横线</p>
+                      </a>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                    <div>
+                      <a class="ep-draggable-item" tid="defaultModule.vline">
+                        <span class="ri-expand-vertical-s-fill" ariel-hidden="true" />
+                        <p class="glyphicon-class">竖线</p>
+                      </a>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row style="height: 60px">
+                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                    <div>
+                      <a class="ep-draggable-item" tid="defaultModule.rect">
+                        <span class="ri-square-line" ariel-hidden="true" />
+                        <p class="glyphicon-class">矩形</p>
+                      </a>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                    <div>
+                      <a class="ep-draggable-item" tid="defaultModule.oval">
+                        <span class="ri-checkbox-blank-circle-line" ariel-hidden="true" />
+                        <p class="glyphicon-class">椭圆</p>
+                      </a>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+        <el-col :xs="15" :sm="15" :md="15" :lg="16" :xl="18">
+          <el-card class="card-design">
+            <div id="hiprint-printTemplate" class="hiprint-printTemplate" />
+          </el-card>
+        </el-col>
+        <el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="3">
+          <el-card class="design-setting-panel">
+            <el-row class="hinnn-layout-sider">
+              <div id="PrintElementOptionSetting" />
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+    <vxe-modal v-model="showImportView" title="导入模板JSON数据" height="320" width="450" show-footer>
+      <template #default>
+        <p style="color: red">切勿随意修改JSON数据，可能导致模板加载出错</p>
+        <vxe-textarea v-model="templateContent" :rows="10" size="mini" />
+      </template>
+      <template #footer>
+        <ut-button icon="ri-close-fill" content="cancel" @tap="showImportView = false" />
+        <ut-button icon="ri-save-3-fill" status="u-cyan" content="confirm" @tap="handleImportJson" />
+      </template>
+    </vxe-modal>
+    <preview v-if="showPreviewModal" ref="previewRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, nextTick, onBeforeUnmount } from 'vue';
+import { VxeUI } from 'vxe-pc-ui';
+import { useGlobal } from '@utogether/utils';
+import to from 'await-to-js';
+import { clone } from 'xe-utils';
+import { useSystemStoreHook } from '../../../store/modules/system';
+import panel from './panel';
+import Preview from './Preview.vue';
+// import printData from './print-data';
+import { getServiceApi } from '../../../api';
+// import { errorMessage } from '@utogether/utils';
+
+import '../../../style/suprint.css';
+import '../../../style/print-lock.css';
+
+interface IProps {
+  record: IRecord;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  record: (): IRecord => {
+    return {};
+  }
+});
+
+let { $printPlugin } = useGlobal();
+
+const systemStoreHook = useSystemStoreHook();
+const dataDict = systemStoreHook.getDataDict;
+
+const serviceApi = getServiceApi();
+let hiprintTemplate = null;
+const showPreviewModal = ref(false);
+const paperPopVisible = ref(false);
+const showImportView = ref(false);
+const loading = ref(false);
+const previewRef = ref(null);
+const templateContent = ref('');
+const currentRecord = ref<IRecord>({});
+const paperSize = reactive<IRecord>({});
+const scale = reactive({ max: 5, min: 0.5, value: 1, ration: '100%' });
+
+const handleCustomSize = () => {
+  paperPopVisible.value = false;
+  hiprintTemplate.setPaper(paperSize.width || 210, paperSize.height || 296.6);
+};
+// 直接打印(静默打印)
+// const handlePictBridge = async () => {
+//   if (window.hiwebSocket.opened) {
+//     const data = await serviceApi('CUS003', {});
+//     const printerList = hiprintTemplate.getPrinterList();
+//     hiprintTemplate.print2(data, { printer: '', title: 'hiprint测试打印' });
+//     return;
+//   }
+//   errorMessage('客户端未连接,无法直接打印');
+// };
+
+const handleSave = async (cb?) => {
+  const body = currentRecord.value;
+  let bt = templateContent.value;
+  if (!bt) {
+    const template = hiprintTemplate.getJson();
+    bt = JSON.stringify(template);
+  }
+  body.templateContent = bt;
+  loading.value = true;
+  const [err, data] = await to(serviceApi.put('/urpt/v1/printTemplate', [body]));
+  loading.value = false;
+  if (!err) {
+    templateContent.value = '';
+    currentRecord.value = data[0];
+  }
+  cb && cb();
+};
+
+const handleClose = () => {
+  // hiprint = null
+  emit('onClose');
+};
+
+const emit = defineEmits<{ (e: 'onClose'): void }>();
+
+// 放大缩小值
+const handleScale = max => {
+  let scaleValue = scale.value;
+  if (max === 'Y') {
+    scaleValue += 0.1;
+    if (scaleValue > scale.max) scaleValue = 5;
+  } else {
+    scaleValue -= 0.1;
+    if (scaleValue < scale.min) scaleValue = 0.5;
+  }
+  if (hiprintTemplate) {
+    // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
+    hiprintTemplate.zoom(scaleValue);
+    scale.value = scaleValue;
+    scale.ration = `${(scaleValue * 100).toFixed(0)}%`;
+  }
+};
+
+/**
+ * @Author: liwei
+ * @Date: 2021-09-01 11:21:05
+ * @Desc: 参数设置drawer回调,将参数设置dom添加到弹出层中
+ */
+const handleClearPaper = async () => {
+  const type = await VxeUI.modal.confirm('重绘操作不可逆,您确定继续吗?', '温馨提示');
+  if (type === 'confirm') {
+    hiprintTemplate.clear();
+  }
+};
+const handleShowImport = async () => {
+  showImportView.value = true;
+};
+const handleImportJson = async () => {
+  const type = await VxeUI.modal.confirm('导入后将覆盖原有的模板,您确定继续吗?', '温馨提示');
+  if (type === 'confirm') {
+    handleSave(handleClose);
+    showImportView.value = false;
+  }
+};
+const handlePreView = async () => {
+  showPreviewModal.value = true;
+  // const data = await serviceApi('CUS003', {});
+  const data = {};
+  // data.pageSize = 6789;
+  nextTick(() => {
+    previewRef.value.show(hiprintTemplate, data, paperSize.width || 220);
+  });
+};
+// 纸张切换
+const handlePaperChange = code => {
+  if ('customize' !== code) {
+    const { width, height } = getPaperSize(code);
+    paperSize.width = width;
+    paperSize.height = height;
+    hiprintTemplate.setPaper(paperSize.width, paperSize.height);
+  } else {
+    paperPopVisible.value = true;
+  }
+};
+const getPaperSize = code => {
+  const paper = {
+    A3: { width: 420, height: 296.6 },
+    A4: { width: 210, height: 296.6 },
+    A5: { width: 210, height: 147.6 },
+    bisect: { width: 241, height: 140 },
+    trisection: { width: 241, height: 93 }
+  };
+  return paper[code];
+};
+
+onMounted(() => {
+  const { record } = props;
+  loading.value = true;
+  currentRecord.value = clone(record, true);
+  const template = record.templateContent ? JSON.parse(record.templateContent) : panel;
+  $('#hiprint-printTemplate').empty();
+  $printPlugin.print.init({
+    providers: [new $printPlugin.provider()]
+  });
+  // 还原配置
+  $printPlugin.print.setConfig();
+  // 替换配置
+  $printPlugin.print.setConfig({
+    movingDistance: 2.5,
+    text: {
+      supportOptions: [
+        { name: 'styler', hidden: true },
+        { name: 'formatter', hidden: true }
+      ]
+    }
+  });
+
+  $printPlugin.print.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
+  hiprintTemplate = new $printPlugin.print.PrintTemplate({
+    template,
+    settingContainer: '#PrintElementOptionSetting',
+    paginationContainer: '.hiprint-printPagination',
+    history: false // 是否需要 撤销重做功能
+  });
+  hiprintTemplate.design('#hiprint-printTemplate', { grid: true });
+  scale.value = hiprintTemplate.editingPanel.scale || 1;
+  loading.value = false;
+});
+onBeforeUnmount(() => {
+  $printPlugin = null;
+  hiprintTemplate = null;
+});
+</script>
+
+<style lang="scss">
+.ut-design-panel {
+  //   .design-panel-contain > .el-card__body {
+  //     height: 85vh;
+  //     padding: 3px !important;
+  //   }
+
+  //   .card-design {
+  //     display: flex;
+  //     justify-content: center;
+  //     background: url('./bg.png');
+  //   }
+
+  //   ::v-deep(.ut-design-item > .el-card__body) {
+  //     padding: 3px;
+  //   }
+
+  //   ::v-deep(.card-design > .el-card__body) {
+  //     height: 75vh;
+  //     overflow: auto;
+  //   }
+
+  ::v-deep(.design-setting-panel > .el-card__body) {
+    height: 75vh;
+    padding: 3px;
+    overflow: auto;
+  }
+
+  //   .el-space {
+  //     width: 100%;
+  //     margin: 5px 0 0 !important;
+  //   }
+
+  //   ::v-deep(.el-space__item) {
+  //     width: 100%;
+  //     padding-right: 10px;
+  //     padding-bottom: 0 !important;
+  //   }
+}
+// 拖拽
+.drag_item_box {
+  height: 100%;
+  padding: 6px;
+}
+
+.drag_item_box > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.drag_item_box > div > a {
+  text-align: center;
+  text-decoration-line: none;
+}
+
+.drag_item_box > div > a > span {
+  font-size: 28px;
+}
+
+.drag_item_box > div > a > p {
+  margin: 0;
+}
+
+.drag_item_title {
+  padding: 12px 6px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+// 默认图片
+.design-custom-button {
+  font-size: 16px;
+}
+
+.el-card__body {
+  padding: 16px;
+}
+
+.design-setting-panel > .el-card__body {
+  height: 75vh;
+  padding: 3px;
+  overflow: auto;
+}
+
+.design-custom-button:not(.is--disabled):hover {
+  color: inherit !important;
+}
+
+// 辅助线样式
+.toplineOfPosition {
+  border: 0;
+  border-top: 1px dashed purple;
+}
+
+.bottomlineOfPosition {
+  border: 0;
+  border-top: 1px dashed purple;
+}
+
+.leftlineOfPosition {
+  border: 0;
+  border-left: 1px dashed purple;
+}
+
+.rightlineOfPosition {
+  border: 0;
+  border-left: 1px dashed purple;
+}
+
+// 设计容器
+.card-design {
+  overflow: hidden;
+  overflow: auto;
+}
+
+.hiprint-printElement-image-content img {
+  content: url('/logo.png');
+}
+</style>