feat：模板配置-报表模板添加报表元素

src/views/mes/printTemplate/ReportTemplateDesigner.vue

@@ -9,6 +9,12 @@
               <span>{{ item.label }}</span>
             </div>
           </div>
+          <div class="hiprint-title">报表元素</div>
+          <div :id="chartDragContainerId" class="hiprint-drag-wrap">
+            <div v-for="item in chartElements" :key="item.tid" class="ep-draggable-item hiprint-item" :tid="item.tid">
+              <span>{{ item.label }}</span>
+            </div>
+          </div>
         </div>
         <div class="hiprint-right-area">
           <div class="hiprint-toolbar">
@@ -150,6 +156,7 @@
 import { defaultElementTypeProvider, hiprint } from 'vue-plugin-hiprint'
 import { PrintTemplateApi } from '@/api/mes/printtemplate'
 import qrCodeImg from '@/assets/imgs/qrCode.png'
+import * as echarts from 'echarts'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -166,6 +173,12 @@ const baseElements = [
   { tid: 'defaultModule.oval', label: '圆形' }
 ]
 
+const chartElements = [
+  { tid: 'chartModule.lineChart', label: '折线图' },
+  { tid: 'chartModule.barChart', label: '柱状图' },
+  { tid: 'chartModule.donutChart', label: '环形图' }
+]
+
 const qrcodeProvider = function () {
   const addElementTypes = function (context: any) {
     context.removePrintElementTypes('qrcodeModule')
@@ -190,6 +203,139 @@ const qrcodeProvider = function () {
   return { addElementTypes }
 }
 
+const chartProvider = function () {
+  const addElementTypes = function (context: any) {
+    context.removePrintElementTypes('chartModule')
+    context.addPrintElementTypes('chartModule', [
+      new hiprint.PrintElementTypeGroup('图表', [
+        {
+          tid: 'chartModule.lineChart',
+          title: '折线图',
+          type: 'html',
+          options: {
+            left: 12,
+            top: 12,
+            height: 200,
+            width: 300,
+            formatter: `function(t, e, printData) {
+              if (window.echarts) {
+                var ptW = e.width || 300;
+                var ptH = e.height || 200;
+                var pxW = Math.round(ptW * 4 / 3);
+                var pxH = Math.round(ptH * 4 / 3);
+                var dom = document.createElement("div");
+                dom.style.width = pxW + "px";
+                dom.style.height = pxH + "px";
+                var chart = echarts.init(dom, null, {renderer: "svg"});
+                chart.setOption({
+                  animation: false,
+                  grid: { top: 20, right: 20, bottom: 30, left: 40 },
+                  xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] },
+                  yAxis: { type: 'value' },
+                  series: [{
+                    data: printData?.lineData || [120, 200, 150, 80, 70, 110],
+                    type: 'line',
+                    smooth: true,
+                    lineStyle: { color: '#5470c6', width: 2 },
+                    itemStyle: { color: '#5470c6' },
+                    areaStyle: { color: 'rgba(84,112,198,0.15)' }
+                  }]
+                });
+                return dom;
+              } else {
+                return '<div style="width:100%;height:100%;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;">ECharts 未加载，请刷新页面重试</div>';
+              }
+            }`
+          }
+        },
+        {
+          tid: 'chartModule.barChart',
+          title: '柱状图',
+          type: 'html',
+          options: {
+            left: 12,
+            top: 12,
+            height: 200,
+            width: 300,
+            formatter: `function(t, e, printData) {
+              if (window.echarts) {
+                var ptW = e.width || 300;
+                var ptH = e.height || 200;
+                var pxW = Math.round(ptW * 4 / 3);
+                var pxH = Math.round(ptH * 4 / 3);
+                var dom = document.createElement("div");
+                dom.style.width = pxW + "px";
+                dom.style.height = pxH + "px";
+                var chart = echarts.init(dom, null, {renderer: "svg"});
+                chart.setOption({
+                  animation: false,
+                  grid: { top: 20, right: 20, bottom: 30, left: 40 },
+                  xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] },
+                  yAxis: { type: 'value' },
+                  series: [{
+                    data: printData?.barData || [120, 200, 150, 80, 70, 110],
+                    type: 'bar',
+                    itemStyle: { color: '#91cc75' }
+                  }]
+                });
+                return dom;
+              } else {
+                return '<div style="width:100%;height:100%;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;">ECharts 未加载，请刷新页面重试</div>';
+              }
+            }`
+          }
+        },
+        {
+          tid: 'chartModule.donutChart',
+          title: '环形图',
+          type: 'html',
+          options: {
+            left: 12,
+            top: 12,
+            height: 200,
+            width: 200,
+            formatter: `function(t, e, printData) {
+              if (window.echarts) {
+                var ptW = e.width || 200;
+                var ptH = e.height || 200;
+                var pxW = Math.round(ptW * 4 / 3);
+                var pxH = Math.round(ptH * 4 / 3);
+                var dom = document.createElement("div");
+                dom.style.width = pxW + "px";
+                dom.style.height = pxH + "px";
+                var chart = echarts.init(dom, null, {renderer: "svg"});
+                chart.setOption({
+                  animation: false,
+                  tooltip: { trigger: 'item' },
+                  legend: { bottom: '0%', left: 'center' },
+                  series: [{
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    center: ['50%', '45%'],
+                    label: { show: false },
+                    emphasis: { scale: false },
+                    data: printData?.pieData || [
+                      { value: 1048, name: '分类一' },
+                      { value: 735, name: '分类二' },
+                      { value: 580, name: '分类三' },
+                      { value: 484, name: '分类四' },
+                      { value: 300, name: '分类五' }
+                    ]
+                  }]
+                });
+                return dom;
+              } else {
+                return '<div style="width:100%;height:100%;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;">ECharts 未加载，请刷新页面重试</div>';
+              }
+            }`
+          }
+        }
+      ])
+    ])
+  }
+  return { addElementTypes }
+}
+
 const dialogVisible = ref(false)
 const dialogTitle = ref('模板配置')
 const saveLoading = ref(false)
@@ -198,6 +344,7 @@ const currentTemplateJson = ref<Record<string, any> | undefined>(undefined)
 
 const instanceId = `hiprint-designer-${Math.random().toString(36).slice(2)}`
 const dragContainerId = `${instanceId}-drag`
+const chartDragContainerId = `${instanceId}-chart-drag`
 const designerContainerId = `${instanceId}-designer`
 const settingContainerId = `${instanceId}-setting`
 
@@ -242,8 +389,9 @@ const ensureInit = () => {
   if (hiprintInited) {
     return
   }
+  ;(window as any).echarts = echarts
   hiprint.init({
-    providers: [new defaultElementTypeProvider(), qrcodeProvider()]
+    providers: [new defaultElementTypeProvider(), qrcodeProvider(), chartProvider()]
   })
   hiprintInited = true
 }
@@ -255,6 +403,7 @@ const buildLeftElement = () => {
     return
   }
   hiprint.PrintElementTypeManager.buildByHtml(jquery(`#${dragContainerId} .ep-draggable-item`))
+  hiprint.PrintElementTypeManager.buildByHtml(jquery(`#${chartDragContainerId} .ep-draggable-item`))
 }
 
 const buildDesigner = () => {