qhmes/jeecgboot-vue3/src/views/xslmes/mesXslRawMaterialEntry/MesXslRawMaterialEntryList.vue

<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button type="primary" v-auth="'xslmes:mes_xsl_raw_material_entry:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
        <a-button type="primary" v-auth="'xslmes:mes_xsl_raw_material_entry:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
        <j-upload-button type="primary" v-auth="'xslmes:mes_xsl_raw_material_entry:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
        <a-button type="primary" v-auth="'xslmes:mes_xsl_raw_material_entry:stockIn'" preIcon="ant-design:check-circle-outlined" @click="handleStockIn"> 结存入库</a-button>
        <a-checkbox v-model:checked="printDotEnabled" style="margin-left: 8px" @change="onPrintDotEnabledChange">
          PrintDot 桥接
        </a-checkbox>
        <a-input
          v-model:value="printDotWsUrl"
          style="width: 220px; margin-left: 8px"
          placeholder="ws://127.0.0.1:1122/ws"
          @blur="persistPrintDotConfig"
        />
        <a-input-password
          v-model:value="printDotKey"
          style="width: 130px; margin-left: 8px"
          placeholder="密钥(可选)"
          autocomplete="new-password"
          @blur="persistPrintDotConfig"
        />
        <a-button @click="downloadPrintPlugin">下载打印插件</a-button>
        <a-select
          v-model:value="selectedPrinterName"
          :options="printerOptions"
          style="width: 220px; margin-left: 8px"
          allow-clear
          show-search
          option-filter-prop="label"
          :placeholder="printerSelectPlaceholder"
        />
        <a-button @click="() => refreshPrinterOptions(true)">刷新打印机</a-button>
        <a-input
          v-model:value="manualPrinterName"
          style="width: 150px; margin-left: 8px"
          placeholder="手动输入打印机名"
          @press-enter="addManualPrinter"
        />
        <a-button @click="addManualPrinter">添加</a-button>
        <a-button
          type="primary"
          ghost
          v-auth="'xslmes:mes_xsl_raw_material_entry:edit'"
          :loading="printLoading"
          :disabled="selectedRowKeys.length === 0 || !printDotEnabled"
          @click="handlePrintSelected"
        >
          <Icon icon="ant-design:printer-outlined" />
          打印选中
        </a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button v-auth="'xslmes:mes_xsl_raw_material_entry:deleteBatch'">批量操作
            <Icon icon="mdi:chevron-down" />
          </a-button>
        </a-dropdown>
        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <MesXslRawMaterialEntryModal @register="registerModal" @success="handleSuccess" />
    <RawMaterialEntryPrintPreviewModal
      v-model:open="printPreviewOpen"
      :entry-id="printPreviewEntryId"
      :barcode="printPreviewBarcode"
    />
  </div>
</template>

<script lang="ts" name="xslmes-mesXslRawMaterialEntry" setup>
  import { onMounted, ref, reactive, watch } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage';
  import MesXslRawMaterialEntryModal from './components/MesXslRawMaterialEntryModal.vue';
  import RawMaterialEntryPrintPreviewModal from './components/RawMaterialEntryPrintPreviewModal.vue';
  import { columns, searchFormSchema, superQuerySchema } from './MesXslRawMaterialEntry.data';
  import {
    list,
    deleteOne,
    batchDelete,
    batchStockIn,
    getImportUrl,
    getExportUrl,
    prepareNativePrint,
  } from './MesXslRawMaterialEntry.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import {
    PRINT_TEMPLATE_SELECTED_PRINTER_KEY,
    printNativeSchemaViaPrintDot,
  } from '/@/views/print/template/utils/printNativeViaPrintDot';
  import { normalizeImportedNativeSchema } from '/@/views/print/template/native/core/nativeSchemaNormalize';
  import {
    fetchPrintDotPrinters,
    getPrintDotBridgeConfig,
    setPrintDotBridgeConfig,
  } from '/@/views/print/template/utils/printDotBridge';

  const { createConfirm, createMessage } = useMessage();
  const LS_PRINT_DOT_ENABLED = 'qhmes_print_dot_enabled';
  const printDotEnabled = ref(localStorage.getItem(LS_PRINT_DOT_ENABLED) !== '0');
  const printDotCfg = getPrintDotBridgeConfig();
  const printDotWsUrl = ref(printDotCfg.wsUrl);
  const printDotKey = ref(printDotCfg.key);

  function persistPrintDotConfig() {
    setPrintDotBridgeConfig(printDotWsUrl.value, printDotKey.value);
    void refreshPrinterOptions(false);
  }

  function onPrintDotEnabledChange() {
    localStorage.setItem(LS_PRINT_DOT_ENABLED, printDotEnabled.value ? '1' : '0');
  }

  function downloadPrintPlugin() {
    const base = import.meta.env.BASE_URL || '/';
    const normalizedBase = base.endsWith('/') ? base : `${base}/`;
    const url = `${normalizedBase}print-plugin/XSL-PrintDot.exe`;
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'XSL-PrintDot.exe');
    link.rel = 'noopener';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  const queryParam = reactive<any>({});
  const [registerModal, { openModal }] = useModal();

  const { tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '原料入场记录',
      api: list,
      columns,
      canResize: true,
      formConfig: {
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToTime: [
          ['entryTime', ['entryTime_begin', 'entryTime_end'], 'YYYY-MM-DD HH:mm:ss'],
        ],
      },
      actionColumn: {
        width: 320,
        fixed: 'right',
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      beforeFetch: (params) => {
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: '原料入场记录',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });

  const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
  const superQueryConfig = reactive(superQuerySchema);

  /** 打印预览弹窗 */
  const printPreviewOpen = ref(false);
  const printPreviewEntryId = ref<string | null>(null);
  const printPreviewBarcode = ref<string | undefined>(undefined);

  function handlePrintPreview(record: Recordable) {
    printPreviewEntryId.value = record.id as string;
    printPreviewBarcode.value = record.barcode as string | undefined;
    printPreviewOpen.value = true;
  }

  const printerOptions = ref<Array<{ label: string; value: string }>>([]);
  const selectedPrinterName = ref<string>('__system_default__');
  const manualPrinterName = ref('');
  const printLoading = ref(false);
  const printerSelectPlaceholder = '选择打印机（PrintDot 桥接）';

  watch(selectedPrinterName, (v) => {
    if (v) {
      localStorage.setItem(PRINT_TEMPLATE_SELECTED_PRINTER_KEY, v);
    }
  });

  async function refreshPrinterOptions(showMessage = true) {
    const optionMap = new Map<string, { label: string; value: string }>();
    optionMap.set('__system_default__', { label: '系统默认打印机', value: '__system_default__' });
    try {
      const dotList = await fetchPrintDotPrinters();
      dotList.forEach((p) => {
        const name = String(p.name || '').trim();
        if (!name) return;
        const defMark = p.isDefault ? '（默认）' : '';
        optionMap.set(name, { label: `${name}${defMark}`, value: name });
      });
      if (selectedPrinterName.value && !optionMap.has(selectedPrinterName.value)) {
        optionMap.set(selectedPrinterName.value, {
          label: `${selectedPrinterName.value}（手动）`,
          value: selectedPrinterName.value,
        });
      }
      printerOptions.value = Array.from(optionMap.values());
      if (showMessage) {
        if (dotList.length) {
          createMessage.success(`已从 PrintDot 桥接识别 ${dotList.length} 台打印机`);
        } else {
          createMessage.warning('PrintDot 已连接但未返回打印机列表');
        }
      }
    } catch (e: unknown) {
      if (selectedPrinterName.value && !optionMap.has(selectedPrinterName.value)) {
        optionMap.set(selectedPrinterName.value, {
          label: `${selectedPrinterName.value}（手动）`,
          value: selectedPrinterName.value,
        });
      }
      printerOptions.value = Array.from(optionMap.values());
      if (showMessage) {
        createMessage.warning(`PrintDot：${e instanceof Error ? e.message : String(e)}`);
      }
    }
  }

  function addManualPrinter() {
    const name = String(manualPrinterName.value || '').trim();
    if (!name) return;
    const exists = printerOptions.value.some((item) => item.value === name);
    if (!exists) {
      printerOptions.value = [...printerOptions.value, { label: `${name}（手动）`, value: name }];
    }
    selectedPrinterName.value = name;
    manualPrinterName.value = '';
    createMessage.success('已添加打印机');
  }

  async function executePrint(record: Recordable, options?: { silentSuccess?: boolean }) {
    try {
      const prep = (await prepareNativePrint(record.id as string)) as Record<string, unknown>;
      const templateJsonRaw = prep.templateJson as string;
      const printData = prep.printData as Record<string, unknown>;
      const paperWidthMm = Number((prep as any).paperWidthMm ?? 0);
      const paperHeightMm = Number((prep as any).paperHeightMm ?? 0);
      const paperOrientation = String((prep as any).paperOrientation || '').toLowerCase();
      if (!templateJsonRaw) {
        throw new Error('模板 JSON 为空');
      }
      let raw: unknown;
      try {
        raw = typeof templateJsonRaw === 'string' ? JSON.parse(templateJsonRaw) : templateJsonRaw;
      } catch {
        throw new Error('模板 JSON 格式错误');
      }
      const schema = normalizeImportedNativeSchema(raw);
      if (paperWidthMm > 0 && paperHeightMm > 0) {
        const orient = paperOrientation === 'landscape' ? 'landscape' : paperOrientation === 'portrait' ? 'portrait' : '';
        const normalized =
          orient === 'landscape'
            ? {
                width: Math.max(paperWidthMm, paperHeightMm),
                height: Math.min(paperWidthMm, paperHeightMm),
              }
            : orient === 'portrait'
              ? {
                  width: Math.min(paperWidthMm, paperHeightMm),
                  height: Math.max(paperWidthMm, paperHeightMm),
                }
              : {
                  width: paperWidthMm,
                  height: paperHeightMm,
                };
        schema.page.width = normalized.width;
        schema.page.height = normalized.height;
      }
      await printNativeSchemaViaPrintDot({
        schema,
        data: printData as Record<string, unknown>,
        jobName: `原料入场记录-${(record.barcode as string) || record.id}.pdf`,
        printerSelection:
          selectedPrinterName.value ||
          localStorage.getItem(PRINT_TEMPLATE_SELECTED_PRINTER_KEY) ||
          '__system_default__',
      });
      if (!options?.silentSuccess) {
        createMessage.success('已通过 PrintDot 提交打印');
      }
    } catch (e: unknown) {
      throw new Error(e instanceof Error ? e.message : String(e));
    }
  }

  function handlePrintSelected() {
    if (!printDotEnabled.value) {
      createMessage.warning('请先开启 PrintDot 桥接');
      return;
    }
    const rows = selectedRows.value || [];
    if (!rows.length) {
      createMessage.warning('请至少勾选一条记录后再点击「打印选中」');
      return;
    }
    printLoading.value = true;
    const hideLoadingMsg = createMessage.loading(`正在打印 ${rows.length} 条记录，请稍候…`, 0);
    (async () => {
      let ok = 0;
      let firstError = '';
      for (const row of rows) {
        try {
          await executePrint(row, { silentSuccess: true });
          ok += 1;
        } catch (e: unknown) {
          if (!firstError) {
            firstError = e instanceof Error ? e.message : String(e);
          }
        }
      }
      if (ok === rows.length) {
        createMessage.success(`已通过 PrintDot 提交 ${ok} 条打印任务`);
      } else {
        createMessage.warning(`打印完成：成功 ${ok}，失败 ${rows.length - ok}${firstError ? `。首条错误：${firstError}` : ''}`);
      }
      hideLoadingMsg();
      printLoading.value = false;
    })();
  }

  function handlePrintRow(record: Recordable) {
    if (!printDotEnabled.value) {
      createMessage.warning('请先开启 PrintDot 桥接');
      return;
    }
    printLoading.value = true;
    const hideLoadingMsg = createMessage.loading('正在生成 PDF 并提交打印，版面复杂时可能需数十秒，请稍候…', 0);
    executePrint(record)
      .then(() => {
        createMessage.success('已通过 PrintDot 提交打印');
      })
      .catch((e: unknown) => {
        createMessage.error(e instanceof Error ? e.message : String(e));
      })
      .finally(() => {
        hideLoadingMsg();
        printLoading.value = false;
      });
  }

  onMounted(() => {
    const saved = localStorage.getItem(PRINT_TEMPLATE_SELECTED_PRINTER_KEY);
    if (saved) {
      selectedPrinterName.value = saved;
    }
    refreshPrinterOptions(false);
  });

  function handleSuperQuery(params) {
    Object.keys(params).map((k) => {
      queryParam[k] = params[k];
    });
    reload();
  }

  function handleAdd() {
    openModal(true, { isUpdate: false, showFooter: true });
  }

  function handleEdit(record: Recordable) {
    openModal(true, { record, isUpdate: true, showFooter: true });
  }

  function handleDetail(record: Recordable) {
    openModal(true, { record, isUpdate: true, showFooter: false });
  }

  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }

  async function batchHandleDelete() {
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  }

  function handleStockIn() {
    if (!selectedRowKeys.value.length) {
      createMessage.warning('请先勾选要结存入库的记录');
      return;
    }
    createConfirm({
      iconType: 'warning',
      title: '结存入库',
      content: `是否将选中的 ${selectedRowKeys.value.length} 条记录结存入库`,
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        await batchStockIn(selectedRowKeys.value.join(','));
        createMessage.success('结存入库成功！');
        handleSuccess();
      },
    });
  }

  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }

  function getTableAction(record) {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
        auth: 'xslmes:mes_xsl_raw_material_entry:edit',
      },
      {
        label: '打印预览',
        onClick: handlePrintPreview.bind(null, record),
        auth: 'xslmes:mes_xsl_raw_material_entry:edit',
      },
      {
        label: '打印',
        onClick: handlePrintRow.bind(null, record),
        auth: 'xslmes:mes_xsl_raw_material_entry:edit',
      },
    ];
  }

  function getDropDownAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
          placement: 'topLeft',
        },
        auth: 'xslmes:mes_xsl_raw_material_entry:delete',
      },
    ];
  }
</script>

<style lang="less" scoped>
  :deep(.ant-picker-range) {
    width: 100%;
  }
</style>