yh-hiprint 2.2.9 → 2.3.1

package/HiprintDesigner.vue

@@ -1,766 +1,766 @@
-<template>
-  <section class="hiprint-designer">
-    <header class="hiprint-designer__header">
-      <el-radio-group
-        v-model="paperType"
-        @change="setPaperHandler">
-        <el-radio-button label="A3">A3</el-radio-button>
-        <el-radio-button label="A4">A4</el-radio-button>
-        <el-radio-button label="A5">A5</el-radio-button>
-        <el-radio-button label="B3">B3</el-radio-button>
-        <el-radio-button label="B4">B4</el-radio-button>
-        <el-radio-button label="B5">B5</el-radio-button>
-        <el-radio-button label="other">自定义</el-radio-button>
-      </el-radio-group>
-      <el-form
-        inline
-        v-if="paperType === 'other'">
-        <el-form-item>
-          <el-input
-            v-model="paperWidth"
-            type="number">
-            <template #prepend>宽</template>
-            <template #append>px</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-input
-            v-model="paperHeight"
-            type="number">
-            <template #prepend>高</template>
-            <template #append>px</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            @click="setPaperHandler('other')">
-            设置
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <el-input
-        class="percentage"
-        readonly
-        v-model="scalePercentage">
-        <template #prepend>
-          <el-button
-            :disabled="!canZoomIn"
-            @click="zoomIn">
-            <i class="iconfont icon-zoom-out"></i>
-          </el-button>
-        </template>
-        <template #append>
-          <el-button
-            :disabled="!canZoomOut"
-            @click="zoomOut">
-            <i class="iconfont icon-zoom-in"></i>
-          </el-button>
-        </template>
-      </el-input>
-      <el-select
-        placeholder="请选择数据源"
-        multiple
-        v-model="formCode">
-        <el-option
-          v-for="d in dataSourceForm"
-          :label="d.label"
-          :value="d.value"></el-option>
-      </el-select>
-      <el-button
-        type="primary"
-        @click="previewPrint">
-        <i class="iconfont icon-print"></i>
-        预览
-      </el-button>
-      <el-button
-        type="primary"
-        @click="saveConfig">
-        <i class="iconfont icon-save"></i>
-        保存
-      </el-button>
-      <el-button
-        type="danger"
-        @click="clearPrint">
-        <i class="iconfont icon-clear"></i>
-        清空
-      </el-button>
-    </header>
-    <main class="hiprint-designer__main">
-      <aside class="hiprint-designer__main_left">
-        <el-scrollbar noresize>
-          <div class="hiprint-designer_title">基础</div>
-          <el-row>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.text">
-                <i class="iconfont icon-font-size"></i>
-                <span>文本</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.textVal">
-                <i class="iconfont icon-font-size"></i>
-                <span>值（文本）</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.image">
-                <i class="iconfont icon-image-fill"></i>
-                <span>图片</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.longText">
-                <i class="iconfont icon-file-text"></i>
-                <span>长文本</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.table">
-                <i class="iconfont icon-table"></i>
-                <span>表格</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.emptyTable">
-                <i class="iconfont icon-layout"></i>
-                <span>空白表格</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.html">
-                <i class="iconfont icon-HTML"></i>
-                <span>html</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.customText">
-                <i class="iconfont icon-container-fill"></i>
-                <span>自定义文本</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.barcode">
-                <i class="iconfont icon-barcode"></i>
-                <span>条形码</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.qrcode">
-                <i class="iconfont icon-qrcode"></i>
-                <span>二维码</span>
-              </a>
-            </el-col>
-          </el-row>
-          <div class="hiprint-designer_title">辅助</div>
-          <el-row>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.hline">
-                <i class="iconfont icon-border-verticle"></i>
-                <span>横线</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.vline">
-                <i class="iconfont icon-border-horizontal"></i>
-                <span>竖线</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.rect">
-                <i class="iconfont icon-border"></i>
-                <span>矩形</span>
-              </a>
-            </el-col>
-            <el-col :span="8">
-              <a
-                class="ep-draggable-item"
-                tid="defaultModule.oval">
-                <i class="iconfont icon-round"></i>
-                <span>椭圆</span>
-              </a>
-            </el-col>
-          </el-row>
-        </el-scrollbar>
-      </aside>
-      <section class="hiprint-designer__main_canvas">
-        <el-scrollbar ref="canvasRef">
-          <div id="hiprint-printTemplate"></div>
-        </el-scrollbar>
-      </section>
-      <aside class="hiprint-designer__main_right">
-        <div id="PrintElementOptionSetting"></div>
-        <template v-if="currentElementObjColumns.length">
-          <div class="hiprint-designer_title">表格字段设置</div>
-          <el-form
-            label-position="top"
-            size="small">
-            <el-form-item label="表数据选择">
-              <template v-if="hasDataSource">
-                <el-select
-                  v-model="listCode"
-                  @change="tableFieldChange">
-                  <el-option
-                    v-for="d in dataSourceList"
-                    :label="d.label"
-                    :value="d.value"></el-option>
-                </el-select>
-              </template>
-              <template v-else>
-                <el-input
-                  v-model="listCode"
-                  @change="tableFieldChange"></el-input>
-              </template>
-            </el-form-item>
-            <el-row gutter="10">
-              <el-col
-                :span="12"
-                v-for="col in currentElementObjColumns">
-                <el-form-item :label="col.title">
-                  <template v-if="hasDataSource">
-                    <el-select v-model="col.field">
-                      <el-option
-                        v-for="d in listColumns"
-                        :value="d"></el-option>
-                    </el-select>
-                  </template>
-                  <template v-else>
-                    <el-input v-model="col.field"></el-input>
-                  </template>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row gutter="10">
-              <el-col :span="12">
-                <el-button
-                  @click="tableColumnCancel"
-                  type="warning">
-                  取消
-                </el-button>
-              </el-col>
-            </el-row>
-          </el-form>
-        </template>
-      </aside>
-    </main>
-  </section>
-  <el-dialog v-model="previewShow">
-    <div
-      class="print-preview"
-      v-html="previewHtml"></div>
-  </el-dialog>
-</template>
-<script setup lang="ts">
-// @ts-nocheck
-import {onMounted, ref, onActivated, onDeactivated, computed, watch} from 'vue';
-import {hiprint, defaultElementTypeProvider, fontSize, scale, zIndex, panel, usePaper, useScale, useDataSource, jquery as $} from 'yh-hiprint';
-import {useRoute, onBeforeRouteUpdate} from 'vue-router';
-import {ElMessageBox, ElMessage} from 'element-plus';
-import axios from '@/libs/api.request';
-
-interface HiprintTemplate {
-  setPaper: (width: number, height: number) => void;
-  zoom: (scale: number) => void;
-  getJson: () => any;
-  clear: () => void;
-}
-
-const route = useRoute();
-const hiprintTemplate = ref<HiprintTemplate | null>(null);
-
-const {paperType, paperWidth, paperHeight, setPaper} = usePaper();
-function setPaperHandler(type) {
-  setPaper(type, () => {
-    hiprintTemplate.value?.setPaper(paperWidth.value, paperHeight.value);
-  });
-}
-
-const canvasRef = ref();
-const {scaleValue, scalePercentage, canZoomIn, canZoomOut, zoomIn, zoomOut} = useScale(() => {
-  hiprintTemplate.value?.zoom(scaleValue.value);
-  canvasRef?.value.update();
-});
-
-const previewShow = ref(false);
-const previewHtml = ref('');
-async function previewPrint() {
-  let {
-    data: {list, json},
-  } = await axios.request({
-    url: `/printTemplate/data/${detailData.value.code}`,
-    method: 'post',
-    type: 'json',
-    data: [
-      {
-        code: '50101820',
-      },
-    ],
-  });
-  if (json) {
-    if (Array.isArray(list) && list.length > 0) {
-      list = list.map((item) => {
-        let printData = {};
-        let datas = Object.entries(item);
-        datas.forEach((arr) => {
-          if (Array.isArray(arr[1])) {
-            printData[arr[0]] = arr[1];
-          } else {
-            if (arr[1] !== null) {
-              let itemsEntries = Object.entries(arr[1]);
-              itemsEntries.forEach((cArr) => {
-                printData[`$${arr[0]}[${cArr[0]}]`] = cArr[1];
-              });
-            }
-          }
-        });
-        return printData;
-      });
-    } else {
-      list = [];
-    }
-    previewHtml.value = new hiprint.PrintTemplate({template: JSON.parse(json)}).getHtml(list)[0].innerHTML;
-    previewShow.value = true;
-  } else {
-    ElMessage.warning({
-      message: '模板配置不存在，请检查',
-    });
-  }
-}
-
-function saveConfig() {
-  let arr = [].concat(formCode.value);
-  let json = hiprintTemplate.value?.getJson();
-  json.panels[0].printElements.forEach((item) => {
-    if (item.printElementType.type === 'table') {
-      arr.push(item.options.field);
-    }
-  });
-
-  axios
-    .request({
-      url: '/printTemplate/save',
-      method: 'post',
-      type: 'json',
-      data: {
-        id: detailData.value.id,
-        json: JSON.stringify(json),
-        dsIds: arr.join(','),
-      },
-    })
-    .then((res) => {
-      ElMessage.success({
-        message: '恭喜模板保存成功',
-      });
-    });
-}
-
-function clearPrint() {
-  hiprintTemplate.value?.clear();
-}
-
-const {detailData, getDetail, listCode, dataSourceList, listColumns, formCode, formColumns, dataSourceForm, getDataSourceList} = useDataSource(axios);
-
-watch(
-  () => formColumns.value,
-  (val) => {
-    if (val && val.length && hiprintTemplate.value) {
-      hiprintTemplate.value.setFields(
-        val.map((item) => {
-          return {
-            field: item,
-            text: item,
-          };
-        })
-      );
-    } else {
-      hiprintTemplate.value?.setFields('');
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
-let currentElementObj = ref(null);
-let currentElementObjColumns = computed(() => {
-  if (currentElementObj.value?.printElementType.type === 'table') {
-    return currentElementObj.value.options.columns[0]['columns'] || [];
-  } else {
-    return [];
-  }
-});
-
-function tableFieldChange(val) {
-  currentElementObj.value.updateOption('field', val);
-}
-
-function tableColumnCancel() {
-  currentElementObj.value = null;
-}
-
-function init() {
-  try {
-    hiprint.init({
-      providers: [new defaultElementTypeProvider()],
-    });
-    hiprint.setConfig();
-    hiprint.setConfig({
-      optionItems: [fontSize, scale, zIndex],
-      movingDistance: 2.5,
-      text: {
-        tabs: [
-          {
-            options: [],
-          },
-          {
-            name: '样式',
-            options: [
-              {
-                name: 'scale',
-                after: 'transform',
-                hidden: false,
-              },
-            ],
-          },
-        ],
-        supportOptions: [
-          {
-            name: 'styler',
-            hidden: true,
-          },
-          {
-            name: 'scale',
-            after: 'transform',
-            hidden: false,
-          },
-          {
-            name: 'formatter',
-            hidden: true,
-          },
-        ],
-      },
-      image: {
-        tabs: [
-          {
-            replace: true,
-            name: '基本',
-            options: [
-              {
-                name: 'field',
-                hidden: false,
-              },
-              {
-                name: 'src',
-                hidden: false,
-              },
-              {
-                name: 'fit',
-                hidden: false,
-              },
-            ],
-          },
-        ],
-      },
-      table: {
-        tabs: [{options: [{name: 'field', hidden: true}]}],
-      },
-    });
-
-    hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
-    $('#hiprint-printTemplate').empty();
-    let template = JSON.parse(detailData.value.json) || panel;
-    hiprintTemplate.value = new hiprint.PrintTemplate({
-      template,
-      onImageChooseClick: (target) => {},
-      fontList: [
-        {title: '微软雅黑', value: 'Microsoft YaHei'},
-        {title: '黑体', value: 'STHeitiSC-Light'},
-        {title: '宋体', value: 'SimSun'},
-        {title: 'cursive', value: 'cursive'},
-      ],
-      dataMode: 1,
-      history: true,
-      onDataChanged: (type, json) => {},
-      onUpdateError: (e) => {
-        console.error(e);
-      },
-      settingContainer: '#PrintElementOptionSetting',
-      paginationContainer: '.hiprint-printPagination',
-    });
-
-    hiprintTemplate.value?.design('#hiprint-printTemplate', {grid: true});
-    scaleValue.value = hiprintTemplate.value.editingPanel.scale || 1;
-    window.ht = hiprintTemplate.value;
-
-    if (formColumns.value) {
-      hiprintTemplate.value?.setFields(
-        formColumns.value.map((item) => {
-          return {
-            field: item,
-            text: item,
-          };
-        })
-      );
-    }
-    $('.hiprint-designer').on('mousedown', '.hiprint-printElement', (e) => {
-      let t = e.currentTarget;
-      let pes = hiprintTemplate.value?.editingPanel.printElements;
-      let index = pes.map((item) => item.designTarget[0]).indexOf(t);
-      let pe = pes[index];
-      currentElementObj.value = pe;
-      if (pe.options.field) {
-        listCode.value = pe.options.field;
-      }
-    });
-    $('#PrintElementOptionSetting').on('input', 'input[type=number]', ($el) => {
-      let val = parseInt($el.target.value);
-      if (val < 1) {
-        $el.target.value = 1;
-      }
-      if (val > 2000) {
-        $el.target.value = 2000;
-      }
-    });
-  } catch (error) {
-    console.log(error.message);
-    clearPrint();
-    hiprintTemplate.value = null;
-    if (error.message.indexOf('setTemplateId') > -1) {
-      ElMessageBox.alert('模板有错误，请返回列表手动修改或这清空模板！');
-    }
-  }
-}
-
-let updateing = false;
-async function updateTemplate(code) {
-  if (updateing === true) {
-    return false;
-  }
-  updateing = true;
-  if (hiprintTemplate.value) {
-    await getDetail(code);
-    if (detailData.value && detailData.value.json) {
-      let jsonObj = JSON.parse(detailData.value.json);
-      hiprintTemplate.value?.update(jsonObj);
-      let {width, height} = jsonObj.panels[0];
-      paperWidth.value = width;
-      paperHeight.value = height;
-      hiprintTemplate.value?.setPaper(width, height);
-      scaleValue.value = 1;
-    } else {
-      hiprintTemplate.value?.update({
-        panels: [
-          {
-            index: 0,
-            name: 1,
-            height: 297,
-            width: 210,
-            paperHeader: 125,
-            paperFooter: 272.5,
-            paperNumberLeft: 430,
-            paperNumberTop: 5,
-            printElements: [],
-            watermarkOptions: {content: '', rotate: 25, timestamp: false, format: 'YYYY-MM-DD HH:mm'},
-          },
-        ],
-      });
-      paperWidth.value = 210;
-      paperHeight.value = 297;
-      hiprintTemplate.value?.setPaper(210, 297);
-      scaleValue.value = 1;
-    }
-  } else {
-    await getDetail(code);
-    init();
-  }
-  updateing = false;
-}
-
-const hasDataSource = computed(() => {
-  return Array.isArray(formCode.value) ? formCode.value.length > 0 : formCode.value;
-});
-onActivated(() => {
-  updateTemplate(route.query.code);
-});
-
-onBeforeRouteUpdate((to) => {
-  updateTemplate(to.query.code);
-});
-
-onDeactivated(() => {
-  clearPrint();
-});
-
-onMounted(async () => {
-  await getDataSourceList();
-});
-</script>
-<style lang="scss">
-.hiprint-designer {
-  width: calc(100% + 32px);
-  height: calc(100% - 30px);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--el-bg-color-page);
-  margin: 0 -16px;
-  &__header {
-    padding: 0 16px;
-    height: 50px;
-    display: flex;
-    background-color: var(--el-bg-color);
-    align-items: center;
-    box-shadow: var(--el-box-shadow-lighter);
-    position: relative;
-    z-index: 1;
-    > * {
-      margin-right: 10px;
-      margin-left: 0 !important;
-    }
-    .percentage {
-      width: 165px;
-    }
-    .el-select {
-      --el-select-width: auto;
-      min-width: 100px;
-    }
-    .el-form-item {
-      margin-bottom: 0;
-      margin-right: 10px;
-      .el-input {
-        width: 140px;
-        .el-input-group__prepend,
-        .el-input-group__append {
-          padding: 0 9px;
-        }
-      }
-    }
-  }
-  &_title {
-    font-size: 18px;
-    font-weight: bold;
-    line-height: 1.7em;
-    margin-bottom: 10px;
-  }
-  .ep-draggable-item {
-    user-select: none;
-    width: 100%;
-    height: 70px;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 10px;
-    .iconfont {
-      font-size: 30px;
-      width: 40px;
-      height: 40px;
-      text-align: center;
-      line-height: 40px;
-    }
-  }
-  &__main {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    &_left {
-      width: 300px;
-      overflow: hidden;
-      background-color: var(--el-color-white);
-      box-shadow: var(--el-box-shadow-lighter);
-      .el-scrollbar__view {
-        padding: 16px;
-      }
-    }
-    &_canvas {
-      flex: 1;
-      overflow: hidden;
-      .el-scrollbar__view {
-        padding: 20px 10px 40px 20px;
-      }
-    }
-    &_right {
-      width: 340px;
-      overflow: hidden;
-      background-color: var(--el-color-white);
-      box-shadow: var(--el-box-shadow-lighter);
-      display: flex;
-      flex-direction: column;
-      .prop-tabs {
-        height: 100%;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        .prop-tab-items {
-          display: flex;
-          height: 43px;
-          box-sizing: border-box;
-          .prop-tab-item {
-            height: 40px;
-            line-height: 40px;
-            flex: 1;
-            text-align: center;
-          }
-        }
-        .hiprint-option-items.active {
-          display: block;
-          padding: 0 6px 0 12px;
-        }
-      }
-      .hiprint-option-items {
-        height: 100%;
-        overflow: auto;
-        padding: 16px;
-        box-sizing: border-box;
-        &::-webkit-scrollbar {
-          width: 4px;
-          height: 4px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          border-radius: 4px;
-          background: #bbb;
-        }
-      }
-      .hiprint-designer_title {
-        padding: 0 10px;
-      }
-      #PrintElementOptionSetting {
-        flex: 1;
-        overflow: hidden;
-      }
-      .el-form {
-        padding: 10px;
-        .el-button {
-          width: 100%;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <section class="hiprint-designer">
+    <header class="hiprint-designer__header">
+      <el-radio-group
+        v-model="paperType"
+        @change="setPaperHandler">
+        <el-radio-button label="A3">A3</el-radio-button>
+        <el-radio-button label="A4">A4</el-radio-button>
+        <el-radio-button label="A5">A5</el-radio-button>
+        <el-radio-button label="B3">B3</el-radio-button>
+        <el-radio-button label="B4">B4</el-radio-button>
+        <el-radio-button label="B5">B5</el-radio-button>
+        <el-radio-button label="other">自定义</el-radio-button>
+      </el-radio-group>
+      <el-form
+        inline
+        v-if="paperType === 'other'">
+        <el-form-item>
+          <el-input
+            v-model="paperWidth"
+            type="number">
+            <template #prepend>宽</template>
+            <template #append>px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="paperHeight"
+            type="number">
+            <template #prepend>高</template>
+            <template #append>px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="setPaperHandler('other')">
+            设置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-input
+        class="percentage"
+        readonly
+        v-model="scalePercentage">
+        <template #prepend>
+          <el-button
+            :disabled="!canZoomIn"
+            @click="zoomIn">
+            <i class="iconfont icon-zoom-out"></i>
+          </el-button>
+        </template>
+        <template #append>
+          <el-button
+            :disabled="!canZoomOut"
+            @click="zoomOut">
+            <i class="iconfont icon-zoom-in"></i>
+          </el-button>
+        </template>
+      </el-input>
+      <el-select
+        placeholder="请选择数据源"
+        multiple
+        v-model="formCode">
+        <el-option
+          v-for="d in dataSourceForm"
+          :label="d.label"
+          :value="d.value"></el-option>
+      </el-select>
+      <el-button
+        type="primary"
+        @click="previewPrint">
+        <i class="iconfont icon-print"></i>
+        预览
+      </el-button>
+      <el-button
+        type="primary"
+        @click="saveConfig">
+        <i class="iconfont icon-save"></i>
+        保存
+      </el-button>
+      <el-button
+        type="danger"
+        @click="clearPrint">
+        <i class="iconfont icon-clear"></i>
+        清空
+      </el-button>
+    </header>
+    <main class="hiprint-designer__main">
+      <aside class="hiprint-designer__main_left">
+        <el-scrollbar noresize>
+          <div class="hiprint-designer_title">基础</div>
+          <el-row>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.text">
+                <i class="iconfont icon-font-size"></i>
+                <span>文本</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.textVal">
+                <i class="iconfont icon-font-size"></i>
+                <span>值（文本）</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.image">
+                <i class="iconfont icon-image-fill"></i>
+                <span>图片</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.longText">
+                <i class="iconfont icon-file-text"></i>
+                <span>长文本</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.table">
+                <i class="iconfont icon-table"></i>
+                <span>表格</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.emptyTable">
+                <i class="iconfont icon-layout"></i>
+                <span>空白表格</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.html">
+                <i class="iconfont icon-HTML"></i>
+                <span>html</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.customText">
+                <i class="iconfont icon-container-fill"></i>
+                <span>自定义文本</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.barcode">
+                <i class="iconfont icon-barcode"></i>
+                <span>条形码</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.qrcode">
+                <i class="iconfont icon-qrcode"></i>
+                <span>二维码</span>
+              </a>
+            </el-col>
+          </el-row>
+          <div class="hiprint-designer_title">辅助</div>
+          <el-row>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.hline">
+                <i class="iconfont icon-border-verticle"></i>
+                <span>横线</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.vline">
+                <i class="iconfont icon-border-horizontal"></i>
+                <span>竖线</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.rect">
+                <i class="iconfont icon-border"></i>
+                <span>矩形</span>
+              </a>
+            </el-col>
+            <el-col :span="8">
+              <a
+                class="ep-draggable-item"
+                tid="defaultModule.oval">
+                <i class="iconfont icon-round"></i>
+                <span>椭圆</span>
+              </a>
+            </el-col>
+          </el-row>
+        </el-scrollbar>
+      </aside>
+      <section class="hiprint-designer__main_canvas">
+        <el-scrollbar ref="canvasRef">
+          <div id="hiprint-printTemplate"></div>
+        </el-scrollbar>
+      </section>
+      <aside class="hiprint-designer__main_right">
+        <div id="PrintElementOptionSetting"></div>
+        <template v-if="currentElementObjColumns.length">
+          <div class="hiprint-designer_title">表格字段设置</div>
+          <el-form
+            label-position="top"
+            size="small">
+            <el-form-item label="表数据选择">
+              <template v-if="hasDataSource">
+                <el-select
+                  v-model="listCode"
+                  @change="tableFieldChange">
+                  <el-option
+                    v-for="d in dataSourceList"
+                    :label="d.label"
+                    :value="d.value"></el-option>
+                </el-select>
+              </template>
+              <template v-else>
+                <el-input
+                  v-model="listCode"
+                  @change="tableFieldChange"></el-input>
+              </template>
+            </el-form-item>
+            <el-row gutter="10">
+              <el-col
+                :span="12"
+                v-for="col in currentElementObjColumns">
+                <el-form-item :label="col.title">
+                  <template v-if="hasDataSource">
+                    <el-select v-model="col.field">
+                      <el-option
+                        v-for="d in listColumns"
+                        :value="d"></el-option>
+                    </el-select>
+                  </template>
+                  <template v-else>
+                    <el-input v-model="col.field"></el-input>
+                  </template>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row gutter="10">
+              <el-col :span="12">
+                <el-button
+                  @click="tableColumnCancel"
+                  type="warning">
+                  取消
+                </el-button>
+              </el-col>
+            </el-row>
+          </el-form>
+        </template>
+      </aside>
+    </main>
+  </section>
+  <el-dialog v-model="previewShow">
+    <div
+      class="print-preview"
+      v-html="previewHtml"></div>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+// @ts-nocheck
+import {onMounted, ref, onActivated, onDeactivated, computed, watch} from 'vue';
+import {hiprint, defaultElementTypeProvider, fontSize, scale, zIndex, panel, usePaper, useScale, useDataSource, jquery as $} from 'yh-hiprint';
+import {useRoute, onBeforeRouteUpdate} from 'vue-router';
+import {ElMessageBox, ElMessage} from 'element-plus';
+import axios from '@/libs/api.request';
+
+interface HiprintTemplate {
+  setPaper: (width: number, height: number) => void;
+  zoom: (scale: number) => void;
+  getJson: () => any;
+  clear: () => void;
+}
+
+const route = useRoute();
+const hiprintTemplate = ref<HiprintTemplate | null>(null);
+
+const {paperType, paperWidth, paperHeight, setPaper} = usePaper();
+function setPaperHandler(type) {
+  setPaper(type, () => {
+    hiprintTemplate.value?.setPaper(paperWidth.value, paperHeight.value);
+  });
+}
+
+const canvasRef = ref();
+const {scaleValue, scalePercentage, canZoomIn, canZoomOut, zoomIn, zoomOut} = useScale(() => {
+  hiprintTemplate.value?.zoom(scaleValue.value);
+  canvasRef?.value.update();
+});
+
+const previewShow = ref(false);
+const previewHtml = ref('');
+async function previewPrint() {
+  let {
+    data: {list, json},
+  } = await axios.request({
+    url: `/printTemplate/data/${detailData.value.code}`,
+    method: 'post',
+    type: 'json',
+    data: [
+      {
+        code: '50101820',
+      },
+    ],
+  });
+  if (json) {
+    if (Array.isArray(list) && list.length > 0) {
+      list = list.map((item) => {
+        let printData = {};
+        let datas = Object.entries(item);
+        datas.forEach((arr) => {
+          if (Array.isArray(arr[1])) {
+            printData[arr[0]] = arr[1];
+          } else {
+            if (arr[1] !== null) {
+              let itemsEntries = Object.entries(arr[1]);
+              itemsEntries.forEach((cArr) => {
+                printData[`$${arr[0]}[${cArr[0]}]`] = cArr[1];
+              });
+            }
+          }
+        });
+        return printData;
+      });
+    } else {
+      list = [];
+    }
+    previewHtml.value = new hiprint.PrintTemplate({template: JSON.parse(json)}).getHtml(list)[0].innerHTML;
+    previewShow.value = true;
+  } else {
+    ElMessage.warning({
+      message: '模板配置不存在，请检查',
+    });
+  }
+}
+
+function saveConfig() {
+  let arr = [].concat(formCode.value);
+  let json = hiprintTemplate.value?.getJson();
+  json.panels[0].printElements.forEach((item) => {
+    if (item.printElementType.type === 'table') {
+      arr.push(item.options.field);
+    }
+  });
+
+  axios
+    .request({
+      url: '/printTemplate/save',
+      method: 'post',
+      type: 'json',
+      data: {
+        id: detailData.value.id,
+        json: JSON.stringify(json),
+        dsIds: arr.join(','),
+      },
+    })
+    .then((res) => {
+      ElMessage.success({
+        message: '恭喜模板保存成功',
+      });
+    });
+}
+
+function clearPrint() {
+  hiprintTemplate.value?.clear();
+}
+
+const {detailData, getDetail, listCode, dataSourceList, listColumns, formCode, formColumns, dataSourceForm, getDataSourceList} = useDataSource(axios);
+
+watch(
+  () => formColumns.value,
+  (val) => {
+    if (val && val.length && hiprintTemplate.value) {
+      hiprintTemplate.value.setFields(
+        val.map((item) => {
+          return {
+            field: item,
+            text: item,
+          };
+        })
+      );
+    } else {
+      hiprintTemplate.value?.setFields('');
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+let currentElementObj = ref(null);
+let currentElementObjColumns = computed(() => {
+  if (currentElementObj.value?.printElementType.type === 'table') {
+    return currentElementObj.value.options.columns[0]['columns'] || [];
+  } else {
+    return [];
+  }
+});
+
+function tableFieldChange(val) {
+  currentElementObj.value.updateOption('field', val);
+}
+
+function tableColumnCancel() {
+  currentElementObj.value = null;
+}
+
+function init() {
+  try {
+    hiprint.init({
+      providers: [new defaultElementTypeProvider()],
+    });
+    hiprint.setConfig();
+    hiprint.setConfig({
+      optionItems: [fontSize, scale, zIndex],
+      movingDistance: 2.5,
+      text: {
+        tabs: [
+          {
+            options: [],
+          },
+          {
+            name: '样式',
+            options: [
+              {
+                name: 'scale',
+                after: 'transform',
+                hidden: false,
+              },
+            ],
+          },
+        ],
+        supportOptions: [
+          {
+            name: 'styler',
+            hidden: true,
+          },
+          {
+            name: 'scale',
+            after: 'transform',
+            hidden: false,
+          },
+          {
+            name: 'formatter',
+            hidden: true,
+          },
+        ],
+      },
+      image: {
+        tabs: [
+          {
+            replace: true,
+            name: '基本',
+            options: [
+              {
+                name: 'field',
+                hidden: false,
+              },
+              {
+                name: 'src',
+                hidden: false,
+              },
+              {
+                name: 'fit',
+                hidden: false,
+              },
+            ],
+          },
+        ],
+      },
+      table: {
+        tabs: [{options: [{name: 'field', hidden: true}]}],
+      },
+    });
+
+    hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
+    $('#hiprint-printTemplate').empty();
+    let template = JSON.parse(detailData.value.json) || panel;
+    hiprintTemplate.value = new hiprint.PrintTemplate({
+      template,
+      onImageChooseClick: (target) => {},
+      fontList: [
+        {title: '微软雅黑', value: 'Microsoft YaHei'},
+        {title: '黑体', value: 'STHeitiSC-Light'},
+        {title: '宋体', value: 'SimSun'},
+        {title: 'cursive', value: 'cursive'},
+      ],
+      dataMode: 1,
+      history: true,
+      onDataChanged: (type, json) => {},
+      onUpdateError: (e) => {
+        console.error(e);
+      },
+      settingContainer: '#PrintElementOptionSetting',
+      paginationContainer: '.hiprint-printPagination',
+    });
+
+    hiprintTemplate.value?.design('#hiprint-printTemplate', {grid: true});
+    scaleValue.value = hiprintTemplate.value.editingPanel.scale || 1;
+    window.ht = hiprintTemplate.value;
+
+    if (formColumns.value) {
+      hiprintTemplate.value?.setFields(
+        formColumns.value.map((item) => {
+          return {
+            field: item,
+            text: item,
+          };
+        })
+      );
+    }
+    $('.hiprint-designer').on('mousedown', '.hiprint-printElement', (e) => {
+      let t = e.currentTarget;
+      let pes = hiprintTemplate.value?.editingPanel.printElements;
+      let index = pes.map((item) => item.designTarget[0]).indexOf(t);
+      let pe = pes[index];
+      currentElementObj.value = pe;
+      if (pe.options.field) {
+        listCode.value = pe.options.field;
+      }
+    });
+    $('#PrintElementOptionSetting').on('input', 'input[type=number]', ($el) => {
+      let val = parseInt($el.target.value);
+      if (val < 1) {
+        $el.target.value = 1;
+      }
+      if (val > 2000) {
+        $el.target.value = 2000;
+      }
+    });
+  } catch (error) {
+    console.log(error.message);
+    clearPrint();
+    hiprintTemplate.value = null;
+    if (error.message.indexOf('setTemplateId') > -1) {
+      ElMessageBox.alert('模板有错误，请返回列表手动修改或这清空模板！');
+    }
+  }
+}
+
+let updateing = false;
+async function updateTemplate(code) {
+  if (updateing === true) {
+    return false;
+  }
+  updateing = true;
+  if (hiprintTemplate.value) {
+    await getDetail(code);
+    if (detailData.value && detailData.value.json) {
+      let jsonObj = JSON.parse(detailData.value.json);
+      hiprintTemplate.value?.update(jsonObj);
+      let {width, height} = jsonObj.panels[0];
+      paperWidth.value = width;
+      paperHeight.value = height;
+      hiprintTemplate.value?.setPaper(width, height);
+      scaleValue.value = 1;
+    } else {
+      hiprintTemplate.value?.update({
+        panels: [
+          {
+            index: 0,
+            name: 1,
+            height: 297,
+            width: 210,
+            paperHeader: 125,
+            paperFooter: 272.5,
+            paperNumberLeft: 430,
+            paperNumberTop: 5,
+            printElements: [],
+            watermarkOptions: {content: '', rotate: 25, timestamp: false, format: 'YYYY-MM-DD HH:mm'},
+          },
+        ],
+      });
+      paperWidth.value = 210;
+      paperHeight.value = 297;
+      hiprintTemplate.value?.setPaper(210, 297);
+      scaleValue.value = 1;
+    }
+  } else {
+    await getDetail(code);
+    init();
+  }
+  updateing = false;
+}
+
+const hasDataSource = computed(() => {
+  return Array.isArray(formCode.value) ? formCode.value.length > 0 : formCode.value;
+});
+onActivated(() => {
+  updateTemplate(route.query.code);
+});
+
+onBeforeRouteUpdate((to) => {
+  updateTemplate(to.query.code);
+});
+
+onDeactivated(() => {
+  clearPrint();
+});
+
+onMounted(async () => {
+  await getDataSourceList();
+});
+</script>
+<style lang="scss">
+.hiprint-designer {
+  width: calc(100% + 32px);
+  height: calc(100% - 30px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--el-bg-color-page);
+  margin: 0 -16px;
+  &__header {
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    background-color: var(--el-bg-color);
+    align-items: center;
+    box-shadow: var(--el-box-shadow-lighter);
+    position: relative;
+    z-index: 1;
+    > * {
+      margin-right: 10px;
+      margin-left: 0 !important;
+    }
+    .percentage {
+      width: 165px;
+    }
+    .el-select {
+      --el-select-width: auto;
+      min-width: 100px;
+    }
+    .el-form-item {
+      margin-bottom: 0;
+      margin-right: 10px;
+      .el-input {
+        width: 140px;
+        .el-input-group__prepend,
+        .el-input-group__append {
+          padding: 0 9px;
+        }
+      }
+    }
+  }
+  &_title {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.7em;
+    margin-bottom: 10px;
+  }
+  .ep-draggable-item {
+    user-select: none;
+    width: 100%;
+    height: 70px;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 10px;
+    .iconfont {
+      font-size: 30px;
+      width: 40px;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+    }
+  }
+  &__main {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    &_left {
+      width: 300px;
+      overflow: hidden;
+      background-color: var(--el-color-white);
+      box-shadow: var(--el-box-shadow-lighter);
+      .el-scrollbar__view {
+        padding: 16px;
+      }
+    }
+    &_canvas {
+      flex: 1;
+      overflow: hidden;
+      .el-scrollbar__view {
+        padding: 20px 10px 40px 20px;
+      }
+    }
+    &_right {
+      width: 340px;
+      overflow: hidden;
+      background-color: var(--el-color-white);
+      box-shadow: var(--el-box-shadow-lighter);
+      display: flex;
+      flex-direction: column;
+      .prop-tabs {
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        .prop-tab-items {
+          display: flex;
+          height: 43px;
+          box-sizing: border-box;
+          .prop-tab-item {
+            height: 40px;
+            line-height: 40px;
+            flex: 1;
+            text-align: center;
+          }
+        }
+        .hiprint-option-items.active {
+          display: block;
+          padding: 0 6px 0 12px;
+        }
+      }
+      .hiprint-option-items {
+        height: 100%;
+        overflow: auto;
+        padding: 16px;
+        box-sizing: border-box;
+        &::-webkit-scrollbar {
+          width: 4px;
+          height: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background: #bbb;
+        }
+      }
+      .hiprint-designer_title {
+        padding: 0 10px;
+      }
+      #PrintElementOptionSetting {
+        flex: 1;
+        overflow: hidden;
+      }
+      .el-form {
+        padding: 10px;
+        .el-button {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>