@utogether/udp-core 1.0.0

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

@@ -0,0 +1,526 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-21 10:36:15
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-08 15:38:16
+ * @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"
+                  @click.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" tid="defaultModule.text">
+                    <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" tid="defaultModule.text">
+                    <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 { VXETable } from 'vxe-table';
+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 VXETable.modal.confirm('重绘操作不可逆,您确定继续吗?', '温馨提示');
+  if (type === 'confirm') {
+    hiprintTemplate.clear();
+  }
+};
+const handleShowImport = async () => {
+  showImportView.value = true;
+};
+const handleImportJson = async () => {
+  const type = await VXETable.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;
+}
+</style>

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

@@ -0,0 +1,65 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-22 16:09:36
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-04-08 09:14:23
+ * @Description: 打印预览
+-->
+<template>
+  <div class="ut-preview-contain">
+    <vxe-modal
+      v-model="showModal"
+      :loading="loading"
+      :width="paperWidth + 'mm'"
+      min-height="480"
+      :lock-scroll="false"
+      :show-footer="false"
+    >
+      <template #title>
+        <ut-button status="u-cyan" icon="ri-printer-line" content="print" @tap="handlePrint" />
+      </template>
+      <template #default>
+        <div id="preview_content" />
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue';
+
+const showModal = ref(false);
+const loading = ref(false);
+const printerTemplate = ref(null);
+const printerData = ref(null);
+const paperWidth = ref(220);
+
+const hanldePreview = (template, data) => {
+  loading.value = true;
+  printerTemplate.value = template;
+  printerData.value = data;
+  nextTick(() => {
+    $('#preview_content').html(template.getHtml(data));
+    loading.value = false;
+  });
+};
+const handlePrint = () => {
+  printerTemplate.value.print(printerData.value, {});
+};
+const show = (printerTemplate, printerData, width = 220) => {
+  showModal.value = true;
+  paperWidth.value = width;
+  hanldePreview(printerTemplate, printerData);
+};
+defineExpose({
+  show
+});
+</script>
+
+<style lang="scss" scoped>
+.ut-preview-contain {
+  ::v-deep(.vxe-modal--body) {
+    height: 85vh;
+  }
+}
+</style>