打印配置管理

src/locales/en.ts

@@ -3234,6 +3234,10 @@ export default {
       designTitle: 'Template Design'
     },
     PrintConfig: {
+      moduleName: 'Printer Config',
+      currentHostName: 'Current Host Name',
+      unknownHostName: 'Not detected',
+      currentHostTip: 'This page only displays and manages printer configurations for the current host.',
       hostName: 'Host Name',
       systemPrinterName: 'Printer Name',
       defaultStatus: 'Is Default',
@@ -3245,6 +3249,7 @@ export default {
       placeholderHostName: 'Please input host name',
       placeholderSystemPrinterName: 'Please input printer name',
       placeholderRemark: 'Please input printer remark',
+      testPrint:'Test Print'
     }
   },
   QualityManagement: {

src/locales/zh-CN.ts

@@ -2725,6 +2725,10 @@ export default {
       designTitle: '模板配置'
     },
     PrintConfig: {
+      moduleName: '打印机配置',
+      currentHostName: '当前主机名',
+      unknownHostName: '未获取到',
+      currentHostTip: '当前页面仅展示和管理当前主机的打印机配置。',
       hostName: '主机名',
       systemPrinterName: '打印机名称',
       defaultStatus: '是否默认',
@@ -2742,7 +2746,8 @@ export default {
       validatorNameRequired: '模板名称不能为空',
       validatorTypeRequired: '模板类型不能为空',
       design: '配置',
-      designTitle: '模板配置'
+      designTitle: '模板配置',
+      testPrint:'测试打印'
     }
   },
   QualityManagement: {

src/views/mes/printconfig/ConfigForm.vue

@@ -8,10 +8,24 @@
       v-loading="formLoading"
     >
       <el-form-item :label="t('TemplateManagement.PrintConfig.hostName')" prop="hostName">
-        <el-input v-model="formData.hostName" :placeholder="t('TemplateManagement.PrintConfig.placeholderHostName')" />
+        <el-input v-model="formData.hostName" :disabled="true" :placeholder="t('TemplateManagement.PrintConfig.placeholderHostName')" />
       </el-form-item>
       <el-form-item :label="t('TemplateManagement.PrintConfig.systemPrinterName')" prop="systemPrinterName">
-        <el-input v-model="formData.systemPrinterName" :placeholder="t('TemplateManagement.PrintConfig.placeholderSystemPrinterName')"  />
+<!--        <el-input v-model="formData.systemPrinterName" :placeholder="t('TemplateManagement.PrintConfig.placeholderSystemPrinterName')"  />-->
+        <el-select
+          v-model="formData.systemPrinterName"
+          clearable
+          filterable
+          :placeholder="t('TemplateManagement.PrintConfig.placeholderSystemPrinterName')"
+          class="hiprint-printer-select"
+        >
+          <el-option
+            v-for="printer in printerList"
+            :key="printer.name"
+            :label="printer.name"
+            :value="printer.name"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item :label="t('TemplateManagement.PrintConfig.defaultStatus')" prop="isDefault">
         <el-switch v-model="formData.isDefault" />
@@ -24,6 +38,7 @@
       </el-form-item>
     </el-form>
     <template #footer>
+      <el-button @click="handleClientPrint" type="primary" plain :disabled="formLoading">{{ t('TemplateManagement.PrintConfig.testPrint') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
       <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
     </template>
@@ -31,13 +46,18 @@
 </template>
 <script setup lang="ts">
 import { ConfigApi, ConfigVO } from '@/api/mes/printconfig/index'
-
+import {
+  autoConnect,
+  defaultElementTypeProvider,
+  hiwebSocket,
+  hiprint
+} from 'vue-plugin-hiprint'
 /** 打印机配置 表单 */
 defineOptions({ name: 'ConfigForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const printerList = ref<Array<{ name: string; [key: string]: any }>>([])
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -53,21 +73,47 @@ const formData = ref({
   updatedAt: undefined,
 })
 const formRules = reactive({
-  hostName: [{ required: true, message: '主机名（如PACKING-PC-01），不可修改不能为空', trigger: 'blur' }],
+  hostName: [{ required: false, message: '主机名（如PACKING-PC-01），不可修改不能为空', trigger: 'blur' }],
   systemPrinterName: [{ required: true, message: '系统打印机名称，关联下拉选项不能为空', trigger: 'blur' }],
-  isDefault: [{ required: true, message: '是否默认：0-否，1-是不能为空', trigger: 'blur' }],
-  isEnabled: [{ required: true, message: '是否启用：0-禁用，1-启用不能为空', trigger: 'blur' }],
-  createdAt: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
-  updatedAt: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
+  isDefault: [{ required: false, message: '是否默认：0-否，1-是不能为空', trigger: 'blur' }],
+  isEnabled: [{ required: false, message: '是否启用：0-禁用，1-启用不能为空', trigger: 'blur' }],
+  createdAt: [{ required: false, message: '创建时间不能为空', trigger: 'blur' }],
+  updatedAt: [{ required: false, message: '更新时间不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
+let hiprintTemplate: any
+const selectedPrinter = ref('')
+const clientConnected = ref(false)
+const clientPrinting = ref(false)
+let hiprintInited = false
+let printEventBound = false
+let autoConnectTried = false
+const clientConnecting = ref(false)
+const clientHostStorageKey = 'hiprint-client-host'
+const defaultClientHost = 'http://192.168.2.58:17521'
+let item = localStorage.getItem(clientHostStorageKey);
+const clientHost = ref(localStorage.getItem(clientHostStorageKey) || defaultClientHost)
+const getHiwebSocket = () => {
+  return ((hiwebSocket as any) || (window as any).hiwebSocket) as any
+}
+const syncClientState = (printersFromCallback?: Array<{ name: string; [key: string]: any }>) => {
+  const socket = getHiwebSocket()
+  clientConnected.value = !!socket?.opened
+  const printers = printersFromCallback || hiprintTemplate?.getPrinterList?.() || socket?.printerList || []
+  printerList.value = Array.isArray(printers) ? printers : []
+  if (selectedPrinter.value && !printerList.value.some((printer) => printer.name === selectedPrinter.value)) {
+    selectedPrinter.value = ''
+  }
+}
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, host: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+  formData.value.hostName = host
+  syncClientState()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
@@ -103,7 +149,105 @@ const submitForm = async () => {
     formLoading.value = false
   }
 }
+const printData = ref({
+  orderNo: 'TEST-20231125-001',
+  customerName: '测试客户',
+  amount: 199.99,
+  address: '北京市朝阳区测试街道123号'
+
+});
+const handleClientPrint = () => {
+  if (!hiprintTemplate) {
+    return
+  }
+  syncClientState()
+  if (!clientConnected.value) {
+    connectClient()
+    message.warning('正在连接本地打印客户端，请连接成功后重试')
+    return
+  }
+  clientPrinting.value = true
+  try {
+    hiprintTemplate.print2(printData.value, {
+      printer: selectedPrinter.value,
+      title: dialogTitle.value
+    })
+  } catch (error: any) {
+    clientPrinting.value = false
+    message.error(error?.message || '本地客户端打印失败')
+  }
+}
+const applyClientHost = () => {
+  const socket = getHiwebSocket()
+  let host = normalizeClientHost()
+  clientHost.value = host
+  localStorage.setItem(clientHostStorageKey, host)
+  if (!socket) {
+    return false
+  }
+  if (socket?.host !== host) {
+    socket?.stop?.()
+    socket.host = host
+  }
+  return true
+}
 
+const normalizeClientHost = () => {
+  const host = clientHost.value.trim()
+  if (!host) {
+    return defaultClientHost
+  }
+  if (/^https?:\/\//i.test(host)) {
+    return host
+  }
+  return `http://${host}`
+}
+const refreshPrinterList = () => {
+  let item = localStorage.getItem(clientHostStorageKey);
+  message.success('本地打印客户端已连接'+item)
+  if (!clientConnected.value) {
+    applyClientHost()
+    message.warning('请先连接本地打印客户端')
+    return
+  }
+  const socket = getHiwebSocket()
+  if (typeof socket?.refreshPrinterList === 'function') {
+    socket.refreshPrinterList()
+    window.setTimeout(syncClientState, 500)
+    return
+  }
+  syncClientState()
+}
+const connectClient = () => {
+  ensureInit()
+  if (!applyClientHost()) {
+    message.warning('打印客户端连接对象未初始化，请刷新页面后重试')
+    return
+  }
+  clientConnecting.value = true
+  autoConnect((status: boolean, msg?: string) => {
+    clientConnecting.value = false
+    clientConnected.value = !!status
+    syncClientState()
+    if (status) {
+      message.success('本地打印客户端已连接')
+      refreshPrinterList()
+      return
+    }
+    message.warning(msg || '未连接到本地打印客户端，请确认 electron-hiprint 已启动')
+  })
+}
+
+const ensureInit = () => {
+  if (hiprintInited) {
+    return
+  }
+  hiprint.init({
+    host: normalizeClientHost(),
+    providers: [defaultElementTypeProvider()]
+  })
+  hiprintInited = true
+}
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {

src/views/mes/printconfig/index.vue

@@ -1,5 +1,22 @@
 <template>
   <ContentWrap>
+    <div class="print-config-header">
+      <div class="print-config-title-row">
+        <div class="print-config-title">{{ t('TemplateManagement.PrintConfig.moduleName') }}</div>
+        <el-tag
+          class="print-config-host-tag"
+          :type="currentHostName ? 'primary' : 'info'"
+          effect="plain"
+        >
+          <span class="print-config-host-label">
+            {{ t('TemplateManagement.PrintConfig.currentHostName') }}：
+          </span>
+          <span>{{ currentHostName || t('TemplateManagement.PrintConfig.unknownHostName') }}</span>
+        </el-tag>
+      </div>
+      <div class="print-config-tip">{{ t('TemplateManagement.PrintConfig.currentHostTip') }}</div>
+    </div>
+
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -12,7 +29,8 @@
         <el-input
           v-model="queryParams.hostName"
           :placeholder="t('TemplateManagement.PrintConfig.placeholderHostName')"
-          clearable
+          :clearable="!currentHostName"
+          :disabled="!!currentHostName"
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
@@ -109,6 +127,7 @@
 </template>
 
 <script setup lang="ts">
+import { autoConnect, defaultElementTypeProvider, hiprint, hiwebSocket } from 'vue-plugin-hiprint'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { ConfigApi, ConfigVO } from '@/api/mes/printconfig'
@@ -123,7 +142,19 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<ConfigVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
-const queryParams = reactive({
+
+interface QueryParams {
+  pageNo: number
+  pageSize: number
+  hostName?: string
+  systemPrinterName?: string
+  isDefault?: boolean
+  isEnabled?: boolean
+  remark?: string
+}
+
+const currentHostName = ref('')
+const queryParams = reactive<QueryParams>({
   pageNo: 1,
   pageSize: 10,
   hostName: undefined,
@@ -134,6 +165,178 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const clientHostStorageKey = 'hiprint-client-host'
+const defaultClientHost = 'http://127.0.0.1:17521'
+let hiprintInited = false
+
+
+
+const normalizeClientHost = () => {
+  const host = (localStorage.getItem(clientHostStorageKey) || defaultClientHost).trim()
+  if (!host) {
+    return defaultClientHost
+  }
+  if (/^https?:\/\//i.test(host)) {
+    return host
+  }
+  return `http://${host}`
+}
+
+const getHiwebSocket = () => {
+  return ((hiwebSocket as any) || (window as any).hiwebSocket) as any
+}
+
+const ensureHiprintInit = () => {
+  if (hiprintInited) {
+    return
+  }
+  hiprint.init({
+    host: normalizeClientHost(),
+    providers: [defaultElementTypeProvider()]
+  })
+  hiprintInited = true
+}
+
+const applyClientHost = () => {
+  const socket = getHiwebSocket()
+  if (!socket) {
+    return
+  }
+  const host = normalizeClientHost()
+  if (socket.host !== host) {
+    socket.stop?.()
+    socket.host = host
+  }
+}
+
+const sanitizeHostName = (hostName?: unknown) => {
+  if (typeof hostName !== 'string') {
+    return ''
+  }
+  const value = hostName.trim()
+  if (!value || /^https?:\/\//i.test(value) || /[/:\\]/.test(value)) {
+    return ''
+  }
+  return value
+}
+
+const extractHostName = (source?: any) => {
+  if (!source || typeof source !== 'object') {
+    return ''
+  }
+  const fields = [
+    'hostName',
+    'hostname',
+    'computerName',
+    'machineName',
+    'pcName',
+    'clientName',
+    'name'
+  ]
+  for (const field of fields) {
+    const hostName = sanitizeHostName(source[field])
+    if (hostName) {
+      return hostName
+    }
+  }
+  return ''
+}
+
+const getActiveXComputerName = () => {
+  try {
+    const ActiveXObjectCtor = (window as any).ActiveXObject
+    if (!ActiveXObjectCtor) {
+      return ''
+    }
+    const network = new ActiveXObjectCtor('WScript.Network')
+    return sanitizeHostName(network?.ComputerName)
+  } catch {
+    return ''
+  }
+}
+
+const getSocketHostName = () => {
+  const socket = getHiwebSocket()
+  const clients = socket?.clients
+  const clientList = Array.isArray(clients) ? clients : Object.values(clients || {})
+
+  for (const client of clientList) {
+    const hostName =
+      extractHostName(client) ||
+      extractHostName(client?.client) ||
+      extractHostName(client?.clientInfo) ||
+      extractHostName(client?.info)
+    if (hostName) {
+      return hostName
+    }
+  }
+
+  const printerList = Array.isArray(socket?.printerList) ? socket.printerList : []
+  for (const printer of printerList) {
+    const hostName =
+      extractHostName(printer?.client) ||
+      extractHostName(printer?.clientInfo) ||
+      extractHostName(clients?.[printer?.clientId])
+    if (hostName) {
+      return hostName
+    }
+  }
+
+  return ''
+}
+
+const resolveCurrentHostName = async () => {
+  const activeXHostName = getActiveXComputerName()
+  if (activeXHostName) {
+    return activeXHostName
+  }
+
+  try {
+    ensureHiprintInit()
+    applyClientHost()
+    const socketHostName = getSocketHostName()
+    if (socketHostName) {
+      return socketHostName
+    }
+
+    return await new Promise<string>((resolve) => {
+      let settled = false
+      const finish = (hostName?: string) => {
+        if (settled) {
+          return
+        }
+        settled = true
+        window.clearTimeout(timer)
+        resolve(hostName || getSocketHostName())
+      }
+      const timer = window.setTimeout(() => finish(), 1500)
+      autoConnect((status: boolean) => {
+        if (!status) {
+          finish()
+          return
+        }
+        const socket = getHiwebSocket()
+        socket?.refreshPrinterList?.()
+        window.setTimeout(() => finish(getSocketHostName()), 300)
+      })
+    })
+  } catch {
+    return ''
+  }
+}
+
+const initCurrentHostName = async () => {
+  const hostName = await resolveCurrentHostName()
+  if (!hostName) {
+    let s = normalizeClientHost();
+    currentHostName.value = s
+    queryParams.hostName = s
+  }else{
+    currentHostName.value = hostName
+    queryParams.hostName = hostName || undefined
+  }
+
+}
 
 /** 查询列表 */
 const getList = async () => {
@@ -149,6 +352,9 @@ const getList = async () => {
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
+  if (currentHostName.value) {
+    queryParams.hostName = currentHostName.value
+  }
   queryParams.pageNo = 1
   getList()
 }
@@ -156,13 +362,15 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()
+  queryParams.hostName = currentHostName.value || undefined
   handleQuery()
 }
 
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  let host = normalizeClientHost();
+  formRef.value.open(type,host, id)
 }
 
 /** 删除按钮操作 */
@@ -194,7 +402,47 @@ const handleExport = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
+onMounted(async () => {
+  await initCurrentHostName()
   getList()
 })
 </script>
+
+<style scoped lang="scss">
+.print-config-header {
+  margin-bottom: 22px;
+}
+
+.print-config-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.print-config-title {
+  color: var(--el-text-color-primary);
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.print-config-host-tag {
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.print-config-host-label {
+  font-weight: 700;
+}
+
+.print-config-tip {
+  margin-top: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>