From 0b0ab3df4883050b67809a78cee7bc612a91ddfc Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Tue, 26 May 2026 14:54:28 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=A8=A1=E6=9D=BF=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-=E6=8A=A5=E8=A1=A8=E9=85=8D=E7=BD=AE=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=E5=BC=B9=E6=A1=86=E6=B7=BB=E5=8A=A0=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../printTemplate/ReportTemplateDesigner.vue  | 204 +++++++++++++++++-
 1 file changed, 202 insertions(+), 2 deletions(-)

diff --git a/src/views/mes/printTemplate/ReportTemplateDesigner.vue b/src/views/mes/printTemplate/ReportTemplateDesigner.vue
index 7b766a99..44c127a2 100644
--- a/src/views/mes/printTemplate/ReportTemplateDesigner.vue
+++ b/src/views/mes/printTemplate/ReportTemplateDesigner.vue
@@ -140,6 +140,17 @@
             </div>
             <div class="hiprint-right">
               <div :id="settingContainerId"></div>
+              <div v-if="selectedIconElement" class="hiprint-custom-setting">
+                <div class="hiprint-title hiprint-title-inline">图标属性</div>
+                <el-form label-position="top" size="small">
+                  <el-form-item label="图标">
+                    <IconSelect v-model="selectedIconName" :persistent="false" :teleported="false" />
+                  </el-form-item>
+                  <el-form-item label="颜色">
+                    <el-color-picker v-model="selectedIconColor" show-alpha />
+                  </el-form-item>
+                </el-form>
+              </div>
             </div>
           </div>
         </div>
@@ -154,6 +165,7 @@
 
 <script setup lang="ts">
 import { defaultElementTypeProvider, hiprint } from 'vue-plugin-hiprint'
+import Iconify from '@purge-icons/generated'
 import { PrintTemplateApi } from '@/api/mes/printtemplate'
 import qrCodeImg from '@/assets/imgs/qrCode.png'
 import * as echarts from 'echarts'
@@ -165,6 +177,7 @@ const baseElements = [
   { tid: 'defaultModule.text', label: '文本' },
   { tid: 'defaultModule.image', label: '图片' },
   { tid: 'qrcodeModule.qrcode', label: '二维码' },
+  { tid: 'iconModule.icon', label: '图标' },
   { tid: 'defaultModule.longText', label: '长文' },
   { tid: 'defaultModule.table', label: '表格' },
   { tid: 'defaultModule.hline', label: '横线' },
@@ -173,6 +186,42 @@ const baseElements = [
   { tid: 'defaultModule.oval', label: '圆形' }
 ]
 
+const defaultIconName = 'ep:star-filled'
+const defaultIconColor = '#409EFF'
+
+const buildIconHtml = (iconName?: string, color?: string) => {
+  const finalIconName = iconName || defaultIconName
+  const finalColor = color || defaultIconColor
+  const svg = Iconify.renderSVG(finalIconName, {
+    height: '100%',
+    width: '100%'
+  })
+  if (svg) {
+    svg.setAttribute('color', finalColor)
+    svg.style.color = finalColor
+    svg.style.display = 'block'
+    svg.style.width = '100%'
+    svg.style.height = '100%'
+    return svg.outerHTML
+  }
+  return `<span class="iconify" data-icon="${finalIconName}" data-width="100%" data-height="100%" style="display:inline-block;width:100%;height:100%;color:${finalColor};"></span>`
+}
+
+const buildIconFormatter = () => {
+  return `function(value, options) {
+    const iconName = options.iconName || '${defaultIconName}';
+    const color = options.color || '${defaultIconColor}';
+    if (window.__hiprintBuildIconHtml) {
+      return window.__hiprintBuildIconHtml(iconName, color);
+    }
+    return '<span class="iconify" data-icon="' + iconName + '" data-width="100%" data-height="100%" style="display:inline-block;width:100%;height:100%;color:' + color + ';"></span>';
+  }`
+}
+
+const ensureIconRuntime = () => {
+  ;(window as any).__hiprintBuildIconHtml = buildIconHtml
+}
+
 const chartElements = [
   { tid: 'chartModule.lineChart', label: '折线图' },
   { tid: 'chartModule.barChart', label: '柱状图' },
@@ -203,6 +252,45 @@ const qrcodeProvider = function () {
   return { addElementTypes }
 }
 
+const iconProvider = function () {
+  const addElementTypes = function (context: any) {
+    context.removePrintElementTypes('iconModule')
+    context.addPrintElementTypes('iconModule', [
+      new hiprint.PrintElementTypeGroup('图标', [
+        {
+          tid: 'iconModule.icon',
+          title: '图标',
+          type: 'html',
+          options: {
+            left: 12,
+            top: 12,
+            width: 28,
+            height: 28,
+            iconName: defaultIconName,
+            color: defaultIconColor,
+            formatter: buildIconFormatter()
+          },
+          onRendered: function (target: any) {
+            const iconify = (window as any).Iconify
+            if (iconify?.scan) {
+              iconify.scan(target?.[0] || target)
+            }
+          },
+          supportOptions: [
+            { name: 'iconName' },
+            { name: 'color' },
+            { name: 'widthHeight' },
+            { name: 'coordinate' },
+            { name: 'transform' },
+            { name: 'zIndex' }
+          ]
+        }
+      ])
+    ])
+  }
+  return { addElementTypes }
+}
+
 const chartProvider = function () {
   const addElementTypes = function (context: any) {
     context.removePrintElementTypes('chartModule')
@@ -465,21 +553,112 @@ const scaleMin = 0.5
 
 const previewVisible = ref(false)
 const previewHtml = ref('')
+const selectedIconElement = shallowRef<any>(null)
+const selectedIconName = ref(defaultIconName)
+const selectedIconColor = ref(defaultIconColor)
 
 let hiprintInited = false
 let hiprintTemplate: any
+let iconSelectEventKey = ''
+let iconSelectHandler: ((payload: any) => void) | undefined
+let clearSettingHandler: (() => void) | undefined
 
 const ensureInit = () => {
   if (hiprintInited) {
     return
   }
   ;(window as any).echarts = echarts
+  ensureIconRuntime()
   hiprint.init({
-    providers: [new defaultElementTypeProvider(), qrcodeProvider(), chartProvider()]
+    providers: [new defaultElementTypeProvider(), qrcodeProvider(), chartProvider(), iconProvider()]
   })
   hiprintInited = true
 }
 
+const isIconPrintElement = (printElement: any) => {
+  if (!printElement) {
+    return false
+  }
+  if (printElement?.printElementType?.tid === 'iconModule.icon') {
+    return true
+  }
+  const formatter = String(printElement?.options?.formatter || printElement?.printElementType?.formatter || '')
+  return Boolean(
+    printElement?.printElementType?.type === 'html'
+      && (
+        typeof printElement?.options?.iconName === 'string'
+        || formatter.includes('__hiprintBuildIconHtml')
+      )
+  )
+}
+
+const normalizeIconPrintElement = (printElement: any) => {
+  if (!printElement?.options) {
+    return printElement
+  }
+  if (!printElement.options.iconName) {
+    printElement.options.iconName = defaultIconName
+  }
+  if (!printElement.options.color) {
+    printElement.options.color = defaultIconColor
+  }
+  if (!printElement.options.formatter) {
+    printElement.options.formatter = buildIconFormatter()
+  }
+  return printElement
+}
+
+const setSelectedIconState = (printElement: any | null) => {
+  const normalizedPrintElement = printElement ? normalizeIconPrintElement(printElement) : null
+  selectedIconElement.value = normalizedPrintElement
+  selectedIconName.value = normalizedPrintElement?.options?.iconName || defaultIconName
+  selectedIconColor.value = normalizedPrintElement?.options?.color || defaultIconColor
+}
+
+const updateSelectedIconElement = () => {
+  const printElement = selectedIconElement.value
+  if (!printElement) {
+    return
+  }
+  printElement.options.iconName = selectedIconName.value || defaultIconName
+  printElement.options.color = selectedIconColor.value || defaultIconColor
+  printElement.updateDesignViewFromOptions()
+  const iconify = (window as any).Iconify
+  if (iconify?.scan) {
+    iconify.scan(printElement.designTarget?.[0] || printElement.designTarget)
+  }
+  ;(window as any).hinnn?.event?.trigger(`hiprintTemplateDataChanged_${printElement.templateId}`, '元素修改')
+}
+
+const bindIconCustomPanel = (template: any) => {
+  const event = (window as any).hinnn?.event
+  if (!event) {
+    return
+  }
+  if (iconSelectEventKey && iconSelectHandler) {
+    event.off(iconSelectEventKey, iconSelectHandler)
+  }
+  if (clearSettingHandler) {
+    event.off('clearSettingContainer', clearSettingHandler)
+  }
+  iconSelectEventKey = template?.getPrintElementSelectEventKey?.() || ''
+  iconSelectHandler = (payload: any) => {
+    const printElement = payload?.printElement
+    if (isIconPrintElement(printElement)) {
+      setSelectedIconState(printElement)
+      return
+    }
+    setSelectedIconState(null)
+  }
+  clearSettingHandler = () => {
+    setSelectedIconState(null)
+  }
+  if (iconSelectEventKey) {
+    event.on(iconSelectEventKey, iconSelectHandler)
+  }
+  event.on('clearSettingContainer', clearSettingHandler)
+}
+
 const buildLeftElement = () => {
   const jquery = (window as any).$
   if (!jquery) {
@@ -503,6 +682,7 @@ const buildDesigner = () => {
     settingContainer: `#${settingContainerId}`,
     paginationContainer: '.hiprint-printPagination',
   })
+  bindIconCustomPanel(hiprintTemplate)
   hiprintTemplate.design(`#${designerContainerId}`)
   setPaper(curPaperType.value, { width: curPaper.value.width, height: curPaper.value.height })
   hiprintTemplate.zoom(scaleValue.value)
@@ -558,6 +738,7 @@ const clearPaper = () => {
   if (!hiprintTemplate) return
   try {
     hiprintTemplate.clear()
+    setSelectedIconState(null)
   } catch (error) {
     message.error('清空失败')
   }
@@ -606,6 +787,7 @@ const handleSave = async () => {
 
 const resetState = () => {
   scaleValue.value = 1
+  setSelectedIconState(null)
   curPaper.value = {
     type: 'A4',
     width: 210,
@@ -631,6 +813,14 @@ const open = async (row: any) => {
 const emit = defineEmits(['success'])
 
 defineExpose({ open })
+
+watch(selectedIconName, () => {
+  updateSelectedIconElement()
+})
+
+watch(selectedIconColor, () => {
+  updateSelectedIconElement()
+})
 </script>
 
 <style scoped lang="scss">
@@ -731,7 +921,7 @@ defineExpose({ open })
 }
 
 .hiprint-right {
-  width: 300px;
+  width: 400px;
   height: 100%;
   background: var(--el-bg-color);
   border: 1px solid var(--el-border-color-light);
@@ -740,11 +930,21 @@ defineExpose({ open })
   padding: 12px;
 }
 
+.hiprint-custom-setting {
+  margin-top: 12px;
+  border-top: 1px solid var(--el-border-color-light);
+  padding-top: 12px;
+}
+
 .hiprint-title {
   padding: 10px 10px 0;
   font-weight: 600;
 }
 
+.hiprint-title-inline {
+  padding: 0 0 12px;
+}
+
 .hiprint-drag-wrap {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));