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

<template>
  <div class="fa-full-height">
    <FaSearchBar
      v-show="showSearchBar"
      ref="searchBarRef"
      v-model="searchForm"
      :items="PersonnelSearchItems"
      :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:personnel:create']"
            :perm-import="['module_bre:personnel:import']"
            :perm-export="['module_bre:personnel:export']"
            :perm-delete="['module_bre:personnel: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="PersonnelDetailItems"
          max-height="70vh"
        />
      </template>
      <template v-else>
        <FaForm
          :key="PersonnelFormRenderKey"
          scrollbar
          max-height="70vh"
          ref="dataFormRef"
          v-model="formData"
          :items="PersonnelDialogFormItems"
          :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="PersonnelImportContentConfig"
      default-template-file-name="personnel_import_template.xlsx"
      @upload="handleCrudImportUpload"
    />

    <FaExportDialog
      v-model="exportVisible"
      :content-config="PersonnelExportContentConfig"
      :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 PersonnelAPI, { type PersonnelForm, type PersonnelPageQuery, type PersonnelTable } from "@/api/module_bre/personnel";
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: "Personnel",
  inheritAttrs: false,
});




const createInitialFormData = (): PersonnelForm => ({
  id: undefined,
  name: undefined,
  gender: undefined,
  role: undefined,
  phone: undefined,
  organization: undefined,
  join_date: undefined,
  remark: undefined,
});

type PersonnelSearchFormParams = {
  name?: string;
  gender?: string;
  role?: string;
  phone?: string;
  organization?: string;
} & AuditSearchFormParams;

const searchForm = ref<PersonnelSearchFormParams>({
  name: undefined,
  gender: undefined,
  role: undefined,
  phone: undefined,
  organization: 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 PersonnelSearchItems = computed(() => [
  {
    label: "姓名",
    key: "name",
    type: "input",
    placeholder: "请输入姓名",
    clearable: true,
    span: 8,
  },
  {
    label: "性别",
    key: "gender",
    type: "radiogroup",
    props: {
      placeholder: "请选择性别",
      options: [{ label: "男", value: "男" }, { label: "女", value: "女" }],
      clearable: true,
    },
    span: 8,
  },
  {
    label: "角色",
    key: "role",
    type: "radiogroup",
    props: {
      placeholder: "请选择角色",
      options: [{ label: "育种专家", value: "育种专家" }, { label: "技术员", value: "技术员" }, { label: "管理员", value: "管理员" }],
      clearable: true,
    },
    span: 8,
  },
  {
    label: "联系电话",
    key: "phone",
    type: "input",
    placeholder: "请输入联系电话",
    clearable: true,
    span: 8,
  },
  {
    label: "所属单位",
    key: "organization",
    type: "input",
    placeholder: "请输入所属单位",
    clearable: true,
    span: 8,
  },
]);

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

const createLoading = ref(false);

const {
  columns,
  columnChecks,
  data,
  loading,
  pagination,
  searchParams,
  getData,
  replaceSearchParams,
  resetSearchParams,
  handleSizeChange,
  handleCurrentChange,
  refreshData,
  refreshCreate,
  refreshUpdate,
  refreshRemove,
} = useTable({
  core: {
    apiFn: PersonnelAPI.getPersonnelList,
    apiParams: {
      page_no: 1,
      page_size: 10,
    },
    columnsFactory: (): ColumnOption<PersonnelTable>[] => [
      { type: "globalIndex", width: 56, label: "序号" },
      { type: "selection", width: 48, fixed: "left" },
      { prop: "name", label: "姓名", minWidth: 140, showOverflowTooltip: true },
      { prop: "gender", label: "性别", minWidth: 140, showOverflowTooltip: true },
      { prop: "role", label: "角色", minWidth: 140, showOverflowTooltip: true },
      { prop: "phone", label: "联系电话", minWidth: 140, showOverflowTooltip: true },
      { prop: "organization", label: "所属单位", minWidth: 140, showOverflowTooltip: true },
      { prop: "join_date", 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: PersonnelTable) => row.created_by?.name ?? "—",
      },
      {
        prop: "updated_by",
        label: "更新人",
        minWidth: 100,
        formatter: (row: PersonnelTable) => row.updated_by?.name ?? "—",
      },
      {
        prop: "operation",
        label: "操作",
        width: 180,
        fixed: "right",
        align: "center",
        formatter: (row: PersonnelTable) => formatPersonnelOperationCell(row),
      },
    ],
  },
});

const PersonnelCrudCols = toCrudCols(columns);

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

const PersonnelImportContentConfig = computed<IContentConfig>(() => ({
  permPrefix: "module_bre:personnel",
  cols: PersonnelCrudCols.value,
  indexAction: async () => ({}),
  importTemplate: () => PersonnelAPI.downloadTemplatePersonnel(),
}));

const PersonnelExportContentConfig = computed(() => ({
  permPrefix: "module_bre:personnel",
  cols: PersonnelCrudCols.value,
  exportsBlobAction: async (params: IObject) => {
    const merged = {
      ...(exportQueryParams.value as unknown as Record<string, unknown>),
      ...params,
    } as unknown as PersonnelPageQuery;
    const res = await PersonnelAPI.exportPersonnel(merged);
    return res.data as Blob;
  },
}));

const { dialogVisible } = useCrudDialog();

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

const PersonnelDetailItems: import("@/components/others/fa-descriptions/index.vue").DescriptionsItem[] = [
  { label: "姓名", prop: "name" },
  { label: "性别", prop: "gender" },
  { label: "角色", prop: "role" },
  { label: "联系电话", prop: "phone" },
  { label: "所属单位", prop: "organization" },
  { label: "入职日期", prop: "join_date" },
  { 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 PersonnelDialogFormItems = computed<FormItem[]>(() => [
  {
    key: "name",
    label: "姓名",
    type: "input",
    props: { placeholder: "请输入姓名", maxlength: 100 },
    span: 12,
  },
  {
    key: "gender",
    label: "性别",
    type: "radiogroup",
    props: {
      placeholder: "请选择性别",
      options: [{ label: "男", value: "男" }, { label: "女", value: "女" }],
      clearable: true,
    },
    span: 12,
  },
  {
    key: "role",
    label: "角色",
    type: "radiogroup",
    props: {
      placeholder: "请选择角色",
      options: [{ label: "育种专家", value: "育种专家" }, { label: "技术员", value: "技术员" }, { label: "管理员", value: "管理员" }],
      clearable: true,
    },
    span: 12,
  },
  {
    key: "phone",
    label: "联系电话",
    type: "input",
    props: { placeholder: "请输入联系电话", maxlength: 100 },
    span: 12,
  },
  {
    key: "organization",
    label: "所属单位",
    type: "input",
    props: { placeholder: "请输入所属单位", maxlength: 100 },
    span: 12,
  },
  {
    key: "join_date",
    label: "入职日期",
    type: "date",
    props: {
      type: "date",
      placeholder: "请选择入职日期",
    },
    span: 12,
  },
  {
    key: "remark",
    label: "备注",
    type: "input",
    props: { type: "textarea", rows: 3, placeholder: "请输入备注" },
    span: 24,
  },
]);

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

const rules = reactive({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
});

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

const crud = useCrudForm<PersonnelForm>({
  formData,
  initialFormData: createInitialFormData(),
  dialogVisible,
  dataFormRef,
  formRenderKey: PersonnelFormRenderKey,
  detailApi: PersonnelAPI.getPersonnelDetail,
  createApi: PersonnelAPI.createPersonnel,
  updateApi: PersonnelAPI.updatePersonnel,
  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: PersonnelSearchFormParams) => {
  await searchBarRef.value?.validate();
  replaceSearchParams({
    name: params.name,
    gender: params.gender,
    role: params.role,
    phone: params.phone,
    organization: params.organization,
    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 = {
    name: undefined,
    gender: undefined,
    role: undefined,
    phone: undefined,
    organization: undefined,
    created_id: undefined,
    updated_id: undefined,
    created_time: [],
    updated_time: [],
  };
  await resetSearchParams();
};

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

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

async function handleCrudImportUpload(uploadFormData: FormData) {
  try {
    const res = await PersonnelAPI.importPersonnel(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(() => {
});
</script>