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

<!-- 亲本资源 CRUD：基于 module_example/demo 模板改写，去掉 status/json_val/批量启停 -->
<template>
  <div class="fa-full-height">
    <FaSearchBar
      v-show="showSearchBar"
      ref="searchBarRef"
      v-model="searchForm"
      :items="germplasmSearchItems"
      :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:germplasm:create']"
            :perm-import="['module_bre:germplasm:import']"
            :perm-export="['module_bre:germplasm:export']"
            :perm-delete="['module_bre:germplasm: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="germplasmDetailItems"
          max-height="70vh"
        />
      </template>
      <template v-else>
        <FaForm
          :key="germplasmFormRenderKey"
          scrollbar
          max-height="70vh"
          ref="dataFormRef"
          v-model="formData"
          :items="germplasmDialogFormItems"
          :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="germplasmImportContentConfig"
      default-template-file-name="germplasm_import_template.xlsx"
      @upload="handleCrudImportUpload"
    />

    <FaExportDialog
      v-model="exportVisible"
      :content-config="germplasmExportContentConfig"
      :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 GermplasmAPI, {
  type GermplasmForm,
  type GermplasmPageQuery,
  type GermplasmTable,
} from "@/api/module_bre/germplasm";
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: "Germplasm",
  inheritAttrs: false,
});

// 固定枚举选项（取自业务规划报告模块1，稳定；后续可改为后端字典下拉）
const VARIETY_TYPE_OPTIONS = [
  { label: "普通桃", value: "普通桃" },
  { label: "油桃", value: "油桃" },
  { label: "蟠桃", value: "蟠桃" },
  { label: "油蟠桃", value: "油蟠桃" },
  { label: "黄肉", value: "黄肉" },
] as const;

const MATURITY_PERIOD_OPTIONS = [
  { label: "早", value: "早" },
  { label: "中", value: "中" },
  { label: "晚", value: "晚" },
] as const;

const BOOLEAN_TAG = {
  true: { type: "success", text: "是" },
  false: { type: "danger", text: "否" },
} as const;

const createInitialFormData = (): GermplasmForm => ({
  id: undefined,
  cultivar_name: "",
  variety_type: undefined,
  origin: undefined,
  preservation_site: undefined,
  avg_fruit_weight: undefined,
  ssc: undefined,
  firmness: undefined,
  maturity_period: undefined,
  flowering_period: undefined,
  chilling_requirement: undefined,
  disease_resistance: undefined,
  can_be_female: false,
  can_be_male: false,
  pedigree_note: undefined,
  photo_path: undefined,
});

type GermplasmSearchFormParams = {
  cultivar_name?: string;
  variety_type?: string;
  origin?: string;
} & AuditSearchFormParams;

const searchForm = ref<GermplasmSearchFormParams>({
  cultivar_name: undefined,
  variety_type: undefined,
  origin: 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> = {};

/** 品种/种质名称、变种类型、来源；创建人/更新人/时间由 FaSearchBar 的 includeAudit 属性追加 */
const germplasmSearchItems = computed(() => [
  {
    label: "品种/种质名称",
    key: "cultivar_name",
    type: "input",
    placeholder: "请输入名称",
    clearable: true,
    span: 8,
  },
  {
    label: "变种类型",
    key: "variety_type",
    type: "select",
    props: {
      placeholder: "请选择变种类型",
      options: VARIETY_TYPE_OPTIONS,
      clearable: true,
    },
    span: 8,
  },
  {
    label: "来源",
    key: "origin",
    type: "input",
    placeholder: "请输入来源",
    clearable: true,
    span: 8,
  },
]);

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

const createLoading = ref(false);

const {
  columns,
  columnChecks,
  data,
  loading,
  pagination,
  searchParams,
  getData,
  replaceSearchParams,
  resetSearchParams,
  handleSizeChange,
  handleCurrentChange,
  refreshData,
  refreshCreate,
  refreshUpdate,
  refreshRemove,
} = useTable({
  core: {
    apiFn: GermplasmAPI.getGermplasmList,
    apiParams: {
      page_no: 1,
      page_size: 10,
    },
    columnsFactory: (): ColumnOption<GermplasmTable>[] => [
      { type: "globalIndex", width: 56, label: "序号" },
      { type: "selection", width: 48, fixed: "left" },
      { prop: "cultivar_name", label: "品种/种质名称", minWidth: 140, showOverflowTooltip: true },
      { prop: "variety_type", label: "变种类型", minWidth: 100, showOverflowTooltip: true },
      { prop: "origin", label: "来源", minWidth: 120, showOverflowTooltip: true },
      { prop: "preservation_site", label: "保存地", minWidth: 120, showOverflowTooltip: true },
      { prop: "avg_fruit_weight", label: "平均果重(g)", minWidth: 110 },
      { prop: "ssc", label: "可溶性固形物(%)", minWidth: 140 },
      { prop: "maturity_period", label: "成熟期", width: 80 },
      {
        prop: "can_be_female",
        label: "可作母本",
        width: 90,
        status: BOOLEAN_TAG,
      },
      {
        prop: "can_be_male",
        label: "可作父本",
        width: 90,
        status: BOOLEAN_TAG,
      },
      {
        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: GermplasmTable) => row.created_by?.name ?? "—",
      },
      {
        prop: "updated_by",
        label: "更新人",
        minWidth: 100,
        formatter: (row: GermplasmTable) => row.updated_by?.name ?? "—",
      },
      {
        prop: "operation",
        label: "操作",
        width: 180,
        fixed: "right",
        align: "center",
        formatter: (row: GermplasmTable) => formatGermplasmOperationCell(row),
      },
    ],
  },
});

/** 供 CrudImportModal / CrudExportModal 的列配置（与 CrudContent.cols 结构一致） */
const germplasmCrudCols = toCrudCols(columns);

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

const germplasmImportContentConfig = computed<IContentConfig>(() => ({
  permPrefix: "module_bre:germplasm",
  cols: germplasmCrudCols.value,
  indexAction: async () => ({}),
  importTemplate: () => GermplasmAPI.downloadTemplateGermplasm(),
}));

const germplasmExportContentConfig = computed(() => ({
  permPrefix: "module_bre:germplasm",
  cols: germplasmCrudCols.value,
  exportsBlobAction: async (params: IObject) => {
    const merged = {
      ...(exportQueryParams.value as unknown as Record<string, unknown>),
      ...params,
    } as unknown as GermplasmPageQuery;
    const res = await GermplasmAPI.exportGermplasm(merged);
    return res.data as Blob;
  },
}));

const { dialogVisible } = useCrudDialog();

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

const germplasmDetailItems: import("@/components/others/fa-descriptions/index.vue").DescriptionsItem[] =
  [
    { label: "品种/种质名称", prop: "cultivar_name" },
    { label: "UUID", prop: "uuid" },
    { label: "变种类型", prop: "variety_type" },
    { label: "来源", prop: "origin" },
    { label: "保存地", prop: "preservation_site" },
    { label: "平均果重(g)", prop: "avg_fruit_weight" },
    { label: "可溶性固形物(%)", prop: "ssc" },
    { label: "硬度", prop: "firmness" },
    { label: "成熟期", prop: "maturity_period" },
    { label: "花期", prop: "flowering_period" },
    { label: "需冷量(h)", prop: "chilling_requirement" },
    { label: "抗病性描述", prop: "disease_resistance" },
    { label: "可作母本", prop: "can_be_female", tag: { map: BOOLEAN_TAG } },
    { label: "可作父本", prop: "can_be_male", tag: { map: BOOLEAN_TAG } },
    { label: "系谱备注", prop: "pedigree_note" },
    { label: "照片地址", prop: "photo_path" },
    { label: "创建人", prop: "created_by.name" },
    { label: "更新人", prop: "updated_by.name" },
    { label: "创建时间", prop: "created_time" },
    { label: "更新时间", prop: "updated_time" },
  ];

// 新增/编辑表单
const germplasmDialogFormItems: FormItem[] = [
  {
    key: "cultivar_name",
    label: "品种/种质名称",
    type: "input",
    props: { placeholder: "请输入名称", maxlength: 100 },
    span: 12,
  },
  {
    key: "variety_type",
    label: "变种类型",
    type: "select",
    props: {
      placeholder: "请选择变种类型",
      options: VARIETY_TYPE_OPTIONS,
      clearable: true,
    },
    span: 12,
  },
  {
    key: "origin",
    label: "来源",
    type: "input",
    props: { placeholder: "请输入来源" },
    span: 12,
  },
  {
    key: "preservation_site",
    label: "保存地",
    type: "input",
    props: { placeholder: "请输入保存地" },
    span: 12,
  },
  {
    key: "avg_fruit_weight",
    label: "平均果重(g)",
    type: "number",
    props: { placeholder: "如 250.5" },
    span: 12,
  },
  {
    key: "ssc",
    label: "可溶性固形物(%)",
    type: "number",
    props: { placeholder: "0-100", step: 0.1 },
    span: 12,
  },
  {
    key: "firmness",
    label: "硬度",
    type: "input",
    props: { placeholder: "请输入硬度" },
    span: 12,
  },
  {
    key: "maturity_period",
    label: "成熟期",
    type: "select",
    props: {
      placeholder: "请选择成熟期",
      options: MATURITY_PERIOD_OPTIONS,
      clearable: true,
    },
    span: 12,
  },
  {
    key: "flowering_period",
    label: "花期",
    type: "input",
    props: { placeholder: "如 3月下旬" },
    span: 12,
  },
  {
    key: "chilling_requirement",
    label: "需冷量(h)",
    type: "number",
    props: { placeholder: "整数" },
    span: 12,
  },
  { key: "can_be_female", label: "可作母本", type: "switch", span: 12 },
  { key: "can_be_male", label: "可作父本", type: "switch", span: 12 },
  {
    key: "disease_resistance",
    label: "抗病性描述",
    type: "input",
    props: { type: "textarea", rows: 3, placeholder: "请输入抗病性描述" },
    span: 24,
  },
  {
    key: "pedigree_note",
    label: "系谱备注",
    type: "input",
    props: { type: "textarea", rows: 3, placeholder: "请输入系谱备注" },
    span: 24,
  },
  {
    key: "photo_path",
    label: "照片地址",
    type: "input",
    props: { placeholder: "请输入图片URL/地址" },
    span: 24,
  },
];

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

const rules = reactive({
  cultivar_name: [{ required: true, message: "请输入品种/种质名称", trigger: "blur" }],
});

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

const crud = useCrudForm<GermplasmForm>({
  formData,
  initialFormData: createInitialFormData(),
  dialogVisible,
  dataFormRef,
  formRenderKey: germplasmFormRenderKey,
  detailApi: GermplasmAPI.getGermplasmDetail,
  createApi: GermplasmAPI.createGermplasm,
  updateApi: GermplasmAPI.updateGermplasm,
  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: GermplasmSearchFormParams) => {
  await searchBarRef.value?.validate();
  replaceSearchParams({
    cultivar_name: params.cultivar_name,
    variety_type: params.variety_type,
    origin: params.origin,
    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 = {
    cultivar_name: undefined,
    variety_type: undefined,
    origin: undefined,
    created_id: undefined,
    updated_id: undefined,
    created_time: [],
    updated_time: [],
  };
  await resetSearchParams();
};

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

function formatGermplasmOperationCell(row: GermplasmTable) {
  return renderTableOperationCell(buildGermplasmRowActions(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 deleteGermplasmRow = async (row: GermplasmTable) => {
  if (!row.id) return;
  try {
    await confirmDelete(`确定删除「${row.cultivar_name ?? row.id}」吗？此操作不可恢复！`);
    await GermplasmAPI.deleteGermplasm([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 GermplasmAPI.deleteGermplasm(ids);
    faTableRef.value?.elTableRef?.clearSelection();
    await refreshRemove();
  } catch {
    // 用户取消
  } finally {
    batchDeleting.value = false;
  }
}

async function handleCrudImportUpload(formData: FormData) {
  try {
    const res = await GermplasmAPI.importGermplasm(formData);
    if (res.data.code === ResultEnum.SUCCESS) {
      ElMessage.success(res.data.msg || "导入成功");
      importVisible.value = false;
      await refreshData();
    }
    // 非 SUCCESS 分支提示由 axios 拦截器统一处理
  } catch (error: unknown) {
    if (import.meta.env.DEV) console.error("[Import]", error);
    /* 接口错误已由拦截器提示 */
  }
}
</script>