dpb/backend/scripts/_backup_query_param/pedigree__index.vue.bak

<template>
  <div class="fa-full-height">
    <FaSearchBar
      v-show="showSearchBar"
      ref="searchBarRef"
      v-model="searchForm"
      :items="PedigreeSearchItems"
      :rules="searchBarRules"
      :is-expand="false"
      :show-expand="true"
      :show-reset="true"
      :show-search="true"
      :disabled-search="false"
      :default-expanded="false"
      include-audit
      @search="handleSearch"
      @reset="onResetSearch"
    />

    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
      <FaTableHeader
        v-model:columns="columnChecks"
        v-model:showSearchBar="showSearchBar"
        :loading="loading"
        @refresh="refreshData"
      >
        <template #left>
          <FaTableHeaderLeft
            :remove-ids="selectedIds"
            :perm-create="['module_bre:pedigree:create']"
            :perm-import="['module_bre:pedigree:import']"
            :perm-export="['module_bre:pedigree:export']"
            :perm-delete="['module_bre:pedigree:delete']"
            :delete-loading="batchDeleting"
            :create-loading="createLoading"
            @add="handleAdd"
            @import="openImport"
            @export="openExport"
            @delete="handleBatchDelete"
          />
        </template>
      </FaTableHeader>

      <FaTable
        ref="faTableRef"
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @selection-change="onTableSelectionChange"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      />
    </ElCard>

    <FaDialog
      v-model="dialogVisible.visible"
      :title="dialogVisible.title"
      width="920px"
      dialog-class="crud-embed-dialog"
      modal-class="crud-embed-dialog"
      :form-mode="dialogVisible.type"
      :confirm-loading="submitLoading"
      :close-on-click-modal="false"
      @cancel="crud.handleCloseDialog"
      @close="crud.handleCloseDialog"
      @confirm="crud.handleSubmit"
    >
      <template v-if="dialogVisible.type === 'detail'">
        <FaDescriptions
          :column="4"
          :data="detailFormData"
          :items="PedigreeDetailItems"
          max-height="70vh"
        />
      </template>
      <template v-else>
        <FaForm
          :key="PedigreeFormRenderKey"
          scrollbar
          max-height="70vh"
          ref="dataFormRef"
          v-model="formData"
          :items="PedigreeDialogFormItems"
          :rules="rules"
          label-suffix=":"
          :label-width="120"
          label-position="right"
          :span="12"
          :gutter="16"
          :show-reset="false"
          :show-submit="false"
          class="crud-dialog-art-form"
        />
      </template>
    </FaDialog>

    <FaImportDialog
      v-model="importVisible"
      :content-config="PedigreeImportContentConfig"
      default-template-file-name="pedigree_import_template.xlsx"
      @upload="handleCrudImportUpload"
    />

    <FaExportDialog
      v-model="exportVisible"
      :content-config="PedigreeExportContentConfig"
      :query-params="exportQueryParams"
      :page-data="data"
      :selection-data="selectedRows"
    />
  </div>
</template>

<script setup lang="ts">
import type { TableOperationAction } from "@/utils/table";
import { renderTableOperationCell, stripPaginationParams, toCrudCols } from "@utils";
import { useCrudForm } from "@/hooks/core/useCrudForm";
import { ResultEnum } from "@/enums/api/result.enum";
import type { IContentConfig, IObject } from "@/components/modal/types";
import type { AuditSearchFormParams } from "@/components/forms/fa-search-bar/auditSearchFormItems";
import type { FormItem } from "@/components/forms/fa-form/index.vue";
import CrossCombinationAPI, { type CrossCombinationOption } from "@/api/module_bre/cross_combination";
import PedigreeAPI, { type PedigreeForm, type PedigreePageQuery, type PedigreeTable } from "@/api/module_bre/pedigree";
import type { ColumnOption } from "@/types/component";
import FaDescriptions from "@/components/others/fa-descriptions/index.vue";
import FaForm from "@/components/forms/fa-form/index.vue";
import FaTableHeader from "@/components/tables/fa-table-header/index.vue";

defineOptions({
  name: "Pedigree",
  inheritAttrs: false,
});

const cross_combinationOptions = ref<CrossCombinationOption[]>([]);

const cross_combinationOptionsMap = computed(() => {
  const m: Record<number, string> = {};
  for (const o of cross_combinationOptions.value) m[o.value] = o.label;
  return m;
});

async function loadCrossCombinationOptions() {
  try {
    const res = await CrossCombinationAPI.getCrossCombinationOptions();
    if (res.data.code === ResultEnum.SUCCESS) {
      cross_combinationOptions.value = res.data.data ?? [];
    }
  } catch (error: unknown) {
    if (import.meta.env.DEV) console.error("[Pedigree] loadCrossCombinationOptions", error);
  }
}

const createInitialFormData = (): PedigreeForm => ({
  id: undefined,
  combination_id: undefined,
  child_code: undefined,
  generation: undefined,
  remark: undefined,
});

type PedigreeSearchFormParams = {
  combination_id?: number;
  child_code?: string;
  generation?: string;
} & AuditSearchFormParams;

const searchForm = ref<PedigreeSearchFormParams>({
  combination_id: undefined,
  child_code: undefined,
  generation: undefined,
  created_id: undefined,
  updated_id: undefined,
  created_time: [],
  updated_time: [],
});

const showSearchBar = ref(true);
const searchBarRef = ref<{ validate: () => Promise<boolean> } | null>(null);
const searchBarRules: Record<string, unknown> = {};

const PedigreeSearchItems = computed(() => [
  {
    label: "来源杂交组合",
    key: "combination_id",
    type: "select",
    props: {
      placeholder: "请选择来源杂交组合",
      options: cross_combinationOptions.value,
      clearable: true,
      filterable: true,
    },
    span: 8,
  },
  {
    label: "子代种质编号",
    key: "child_code",
    type: "input",
    placeholder: "请输入子代种质编号",
    clearable: true,
    span: 8,
  },
  {
    label: "世代",
    key: "generation",
    type: "input",
    placeholder: "请输入世代",
    clearable: true,
    span: 8,
  },
]);

const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
const { selectedRows, selectedIds, batchDeleting, onTableSelectionChange } = useTableSelection<PedigreeTable>();

const createLoading = ref(false);

const {
  columns,
  columnChecks,
  data,
  loading,
  pagination,
  searchParams,
  getData,
  replaceSearchParams,
  resetSearchParams,
  handleSizeChange,
  handleCurrentChange,
  refreshData,
  refreshCreate,
  refreshUpdate,
  refreshRemove,
} = useTable({
  core: {
    apiFn: PedigreeAPI.getPedigreeList,
    apiParams: {
      page_no: 1,
      page_size: 10,
    },
    columnsFactory: (): ColumnOption<PedigreeTable>[] => [
      { type: "globalIndex", width: 56, label: "序号" },
      { type: "selection", width: 48, fixed: "left" },
      { prop: "combination_name", label: "来源杂交组合", minWidth: 140, showOverflowTooltip: true },
      { prop: "child_code", label: "子代种质编号", minWidth: 140, showOverflowTooltip: true },
      { prop: "generation", label: "世代", minWidth: 140, showOverflowTooltip: true },
      {
        prop: "created_time",
        label: "创建时间",
        width: 168,
        sortable: true,
        showOverflowTooltip: true,
      },
      {
        prop: "updated_time",
        label: "更新时间",
        width: 168,
        sortable: true,
        showOverflowTooltip: true,
      },
      {
        prop: "created_by",
        label: "创建人",
        minWidth: 100,
        formatter: (row: PedigreeTable) => row.created_by?.name ?? "—",
      },
      {
        prop: "updated_by",
        label: "更新人",
        minWidth: 100,
        formatter: (row: PedigreeTable) => row.updated_by?.name ?? "—",
      },
      {
        prop: "operation",
        label: "操作",
        width: 180,
        fixed: "right",
        align: "center",
        formatter: (row: PedigreeTable) => formatPedigreeOperationCell(row),
      },
    ],
  },
});

const PedigreeCrudCols = toCrudCols(columns);

const exportQueryParams = computed(() => {
  return stripPaginationParams(searchParams as Record<string, unknown>);
});

const PedigreeImportContentConfig = computed<IContentConfig>(() => ({
  permPrefix: "module_bre:pedigree",
  cols: PedigreeCrudCols.value,
  indexAction: async () => ({}),
  importTemplate: () => PedigreeAPI.downloadTemplatePedigree(),
}));

const PedigreeExportContentConfig = computed(() => ({
  permPrefix: "module_bre:pedigree",
  cols: PedigreeCrudCols.value,
  exportsBlobAction: async (params: IObject) => {
    const merged = {
      ...(exportQueryParams.value as unknown as Record<string, unknown>),
      ...params,
    } as unknown as PedigreePageQuery;
    const res = await PedigreeAPI.exportPedigree(merged);
    return res.data as Blob;
  },
}));

const { dialogVisible } = useCrudDialog();

const detailFormData = ref<PedigreeTable>({});

const PedigreeDetailItems: import("@/components/others/fa-descriptions/index.vue").DescriptionsItem[] = [
  { label: "来源杂交组合", prop: "combination_name" },
  { label: "子代种质编号", prop: "child_code" },
  { label: "世代", prop: "generation" },
  { label: "备注", prop: "remark" },
  { label: "UUID", prop: "uuid" },
  { label: "创建人", prop: "created_by.name" },
  { label: "更新人", prop: "updated_by.name" },
  { label: "创建时间", prop: "created_time" },
  { label: "更新时间", prop: "updated_time" },
];

const PedigreeDialogFormItems = computed<FormItem[]>(() => [
  {
    key: "combination_id",
    label: "来源杂交组合",
    type: "select",
    props: {
      placeholder: "请选择来源杂交组合",
      options: cross_combinationOptions.value,
      clearable: true,
      filterable: true,
    },
    span: 12,
  },
  {
    key: "child_code",
    label: "子代种质编号",
    type: "input",
    props: { placeholder: "请输入子代种质编号", maxlength: 100 },
    span: 12,
  },
  {
    key: "generation",
    label: "世代",
    type: "input",
    props: { placeholder: "请输入世代", maxlength: 100 },
    span: 12,
  },
  {
    key: "remark",
    label: "备注",
    type: "input",
    props: { type: "textarea", rows: 3, placeholder: "请输入备注" },
    span: 24,
  },
]);

const formData = ref<PedigreeForm>(createInitialFormData());

const rules = reactive({
  combination_id: [{ required: true, message: "请选择来源杂交组合", trigger: "change" }],
  child_code: [{ required: true, message: "请输入子代种质编号", trigger: "blur" }],
});

const dataFormRef = ref<InstanceType<typeof FaForm> | null>(null);
const PedigreeFormRenderKey = ref(0);

const crud = useCrudForm<PedigreeForm>({
  formData,
  initialFormData: createInitialFormData(),
  dialogVisible,
  dataFormRef,
  formRenderKey: PedigreeFormRenderKey,
  detailApi: PedigreeAPI.getPedigreeDetail,
  createApi: PedigreeAPI.createPedigree,
  updateApi: PedigreeAPI.updatePedigree,
  titles: { create: "新增系谱管理", update: "修改系谱管理", detail: "系谱管理详情" },
  detailFormData,
  onCreateSuccess: async () => {
    await refreshCreate();
  },
  onUpdateSuccess: async () => {
    await refreshUpdate();
  },
});

const { submitLoading } = crud;

const { importVisible, exportVisible, openImport, openExport } = useImportExport();

const handleSearch = async (params: PedigreeSearchFormParams) => {
  await searchBarRef.value?.validate();
  replaceSearchParams({
    combination_id: params.combination_id,
    child_code: params.child_code,
    generation: params.generation,
    created_id: params.created_id ?? undefined,
    updated_id: params.updated_id ?? undefined,
    created_time:
      Array.isArray(params.created_time) && params.created_time.length === 2
        ? params.created_time
        : undefined,
    updated_time:
      Array.isArray(params.updated_time) && params.updated_time.length === 2
        ? params.updated_time
        : undefined,
  } as Record<string, unknown>);
  await getData();
};

const onResetSearch = async () => {
  searchForm.value = {
    combination_id: undefined,
    child_code: undefined,
    generation: undefined,
    created_id: undefined,
    updated_id: undefined,
    created_time: [],
    updated_time: [],
  };
  await resetSearchParams();
};

function buildPedigreeRowActions(row: PedigreeTable): TableOperationAction[] {
  const all: TableOperationAction[] = [
    {
      key: "detail",
      label: "详情",
      artType: "view",
      perm: "module_bre:pedigree:detail",
      run: () => void crud.handleOpenDialog("detail", row.id),
    },
    {
      key: "edit",
      label: "编辑",
      artType: "edit",
      icon: "ri:edit-2-line",
      perm: "module_bre:pedigree:update",
      run: () => void crud.handleOpenDialog("update", row.id),
    },
    {
      key: "delete",
      label: "删除",
      artType: "delete",
      icon: "ri:delete-bin-4-line",
      perm: "module_bre:pedigree:delete",
      run: () => deletePedigreeRow(row),
    },
  ];
  return all;
}

function formatPedigreeOperationCell(row: PedigreeTable) {
  return renderTableOperationCell(buildPedigreeRowActions(row), {
    wrapperClass: "inline-flex flex-wrap items-center justify-end gap-1",
  });
}

async function handleAdd() {
  createLoading.value = true;
  try {
    await crud.handleOpenDialog("create");
  } finally {
    createLoading.value = false;
  }
}

const deletePedigreeRow = async (row: PedigreeTable) => {
  if (!row.id) return;
  try {
    await confirmDelete(`确定删除「${row.child_code ?? row.id}」吗？此操作不可恢复！`);
    await PedigreeAPI.deletePedigree([row.id!]);
    faTableRef.value?.elTableRef?.clearSelection();
    await refreshRemove();
  } catch {
    // 用户取消
  }
};

async function handleBatchDelete() {
  const ids = selectedIds.value;
  if (ids.length === 0) return;
  try {
    await confirmBatchDelete(ids.length);
    batchDeleting.value = true;
    await PedigreeAPI.deletePedigree(ids);
    faTableRef.value?.elTableRef?.clearSelection();
    await refreshRemove();
  } catch {
    // 用户取消
  } finally {
    batchDeleting.value = false;
  }
}

async function handleCrudImportUpload(uploadFormData: FormData) {
  try {
    const res = await PedigreeAPI.importPedigree(uploadFormData);
    if (res.data.code === ResultEnum.SUCCESS) {
      ElMessage.success(res.data.msg || "导入成功");
      importVisible.value = false;
      await refreshData();
    }
  } catch (error: unknown) {
    if (import.meta.env.DEV) console.error("[Import]", error);
  }
}

onMounted(() => {
  loadCrossCombinationOptions();
});
</script>