qhmes/jeecgboot-vue3/src/views/xslmes/mesXslMixingSpec/components/MesXslMixingSpecSelectModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    title="选取混炼示方"
    :width="960"
    :zIndex="1500"
    :showOkBtn="false"
    :showCancelBtn="false"
    wrapClassName="mixing-spec-picker-modal-wrap"
    @register="registerModal"
  >
    <div class="mixing-spec-picker">
      <div class="mixing-spec-picker-toolbar">
        <span class="mixing-spec-picker-label">关键字</span>
        <a-input
          v-model:value="keyword"
          allow-clear
          placeholder="规格/用途/发行编号/机台"
          style="width: 240px"
          @pressEnter="reloadTable"
        />
        <span class="mixing-spec-picker-label">机台</span>
        <a-select
          v-model:value="machineId"
          allow-clear
          show-search
          option-filter-prop="label"
          placeholder="==请选择=="
          style="width: 160px"
          :options="machineOptions"
          :loading="machineLoading"
          :getPopupContainer="getSelectPopupContainer"
          popupClassName="mixing-spec-picker-machine-dropdown"
          @click.stop
        />
        <a-button type="primary" @click="reloadTable">搜索</a-button>
      </div>
      <BasicTable @register="registerTable" />
    </div>
    <template #footer>
      <a-button @click="handleClose">关闭</a-button>
      <a-button type="primary" :loading="confirmLoading" @click="handleConfirm">确认</a-button>
      <a-button type="primary" :loading="referenceLoading" @click="handleReferenceAdd">参照选中示方新增</a-button>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { list as mixingSpecList, queryById as queryMixingSpecById } from '../MesXslMixingSpec.api';
  import { mixingSpecHistorySelectColumns } from '../MesXslMixingSpec.data';
  import { list as equipmentList } from '/@/views/xslmes/mesXslEquipmentLedger/MesXslEquipmentLedger.api';

  const emit = defineEmits(['register', 'edit', 'referenceAdd']);

  const { createMessage } = useMessage();

  const keyword = ref('');
  const machineId = ref<string | undefined>(undefined);
  const machineOptions = ref<Array<{ label: string; value: string }>>([]);
  const machineLoading = ref(false);
  const confirmLoading = ref(false);
  const referenceLoading = ref(false);
  const selectedRow = ref<Recordable | null>(null);

  function getSelectPopupContainer() {
    return document.body;
  }

  const [registerTable, { reload, getSelectRowKeys, getSelectRows, setSelectedRowKeys, clearSelectedRowKeys }] = useTable({
    api: mixingSpecList,
    columns: mixingSpecHistorySelectColumns,
    rowKey: 'id',
    useSearchForm: false,
    pagination: { pageSize: 30 },
    canResize: false,
    showIndexColumn: true,
    immediate: false,
    beforeFetch: (params) => ({
      ...params,
      keyword: keyword.value?.trim() || undefined,
      machineId: machineId.value || undefined,
    }),
    rowSelection: {
      type: 'radio',
      columnWidth: 48,
      onChange: (_keys, rows) => {
        selectedRow.value = rows?.[0] ?? null;
      },
    },
    clickToRowSelect: true,
  });

  async function loadMachineOptions() {
    machineLoading.value = true;
    try {
      const optionMap = new Map<string, { label: string; value: string }>();
      const raw = await mixingSpecList({ pageNo: 1, pageSize: 500 });
      const page = (raw as Recordable)?.records != null ? raw : (raw as Recordable)?.result;
      const specRecords = ((page?.records || page || []) as Recordable[]).filter(Boolean);
      specRecords.forEach((row) => {
        if (!row?.machineId) {
          return;
        }
        const value = String(row.machineId);
        optionMap.set(value, {
          value,
          label: row.machineName || value,
        });
      });
      if (!optionMap.size) {
        const eqRaw = await equipmentList({ pageNo: 1, pageSize: 500 });
        const eqPage = (eqRaw as Recordable)?.records != null ? eqRaw : (eqRaw as Recordable)?.result;
        const eqRecords = ((eqPage?.records || eqPage || []) as Recordable[]).filter(Boolean);
        eqRecords.forEach((row) => {
          if (!row?.id) {
            return;
          }
          const value = String(row.id);
          optionMap.set(value, {
            value,
            label: row.equipmentName || row.equipmentCode || value,
          });
        });
      }
      machineOptions.value = Array.from(optionMap.values()).sort((a, b) =>
        a.label.localeCompare(b.label, 'zh-CN'),
      );
    } catch {
      machineOptions.value = [];
    } finally {
      machineLoading.value = false;
    }
  }

  function reloadTable() {
    reload();
  }

  async function resolveSelectedRow(): Promise<Recordable | null> {
    const keys = (getSelectRowKeys?.() || []) as string[];
    let row = selectedRow.value || ((getSelectRows?.() || []) as Recordable[])[0];
    if (!row?.id && keys.length) {
      try {
        const raw = await queryMixingSpecById({ id: keys[0] });
        row = (raw as Recordable)?.specName != null ? raw : (raw as Recordable)?.result;
      } catch {
        row = null;
      }
    }
    return row?.id ? row : null;
  }

  function handleClose() {
    closeModal();
  }

  async function handleConfirm() {
    const row = await resolveSelectedRow();
    if (!row) {
      createMessage.warning('请选择一条混炼示方');
      return;
    }
    confirmLoading.value = true;
    try {
      emit('edit', {
        mixingSpecId: row.id,
        specName: row.specName || '',
      });
      closeModal();
    } finally {
      confirmLoading.value = false;
    }
  }

  async function handleReferenceAdd() {
    const row = await resolveSelectedRow();
    if (!row) {
      createMessage.warning('请选择一条混炼示方');
      return;
    }
    referenceLoading.value = true;
    try {
      emit('referenceAdd', {
        mixingSpecId: row.id,
        specName: row.specName || '',
      });
      closeModal();
    } finally {
      referenceLoading.value = false;
    }
  }

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    keyword.value = '';
    machineId.value = data?.machineId || undefined;
    selectedRow.value = null;
    confirmLoading.value = false;
    referenceLoading.value = false;
    clearSelectedRowKeys?.();
    setModalProps({ confirmLoading: false });
    await loadMachineOptions();
    reload();
  });
</script>

<style lang="less" scoped>
  .mixing-spec-picker-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .mixing-spec-picker-label {
    color: #333;
    font-size: 13px;
    white-space: nowrap;
  }
</style>

<style lang="less">
  .mixing-spec-picker-modal-wrap {
    .ant-modal {
      top: 40px;
    }
  }

  .mixing-spec-picker-machine-dropdown {
    z-index: 2100 !important;
  }
</style>