663 lines
18 KiB
Plaintext
663 lines
18 KiB
Plaintext
<template>
|
|
<div class="fa-full-height">
|
|
<FaSearchBar
|
|
v-show="showSearchBar"
|
|
ref="searchBarRef"
|
|
v-model="searchForm"
|
|
:items="PlantingSearchItems"
|
|
: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:planting:create']"
|
|
:perm-import="['module_bre:planting:import']"
|
|
:perm-export="['module_bre:planting:export']"
|
|
:perm-delete="['module_bre:planting: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="PlantingDetailItems"
|
|
max-height="70vh"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<FaForm
|
|
:key="PlantingFormRenderKey"
|
|
scrollbar
|
|
max-height="70vh"
|
|
ref="dataFormRef"
|
|
v-model="formData"
|
|
:items="PlantingDialogFormItems"
|
|
: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="PlantingImportContentConfig"
|
|
default-template-file-name="planting_import_template.xlsx"
|
|
@upload="handleCrudImportUpload"
|
|
/>
|
|
|
|
<FaExportDialog
|
|
v-model="exportVisible"
|
|
:content-config="PlantingExportContentConfig"
|
|
: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 PlotAPI, { type PlotOption } from "@/api/module_bre/plot";
|
|
import PersonnelAPI, { type PersonnelOption } from "@/api/module_bre/personnel";
|
|
import SeedlingAPI, { type SeedlingOption } from "@/api/module_bre/seedling";
|
|
import PlantingAPI, { type PlantingForm, type PlantingPageQuery, type PlantingTable } from "@/api/module_bre/planting";
|
|
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: "Planting",
|
|
inheritAttrs: false,
|
|
});
|
|
|
|
const cross_combinationOptions = ref<CrossCombinationOption[]>([]);
|
|
const plotOptions = ref<PlotOption[]>([]);
|
|
const personnelOptions = ref<PersonnelOption[]>([]);
|
|
const seedlingOptions = ref<SeedlingOption[]>([]);
|
|
|
|
const cross_combinationOptionsMap = computed(() => {
|
|
const m: Record<number, string> = {};
|
|
for (const o of cross_combinationOptions.value) m[o.value] = o.label;
|
|
return m;
|
|
});
|
|
const plotOptionsMap = computed(() => {
|
|
const m: Record<number, string> = {};
|
|
for (const o of plotOptions.value) m[o.value] = o.label;
|
|
return m;
|
|
});
|
|
const personnelOptionsMap = computed(() => {
|
|
const m: Record<number, string> = {};
|
|
for (const o of personnelOptions.value) m[o.value] = o.label;
|
|
return m;
|
|
});
|
|
const seedlingOptionsMap = computed(() => {
|
|
const m: Record<number, string> = {};
|
|
for (const o of seedlingOptions.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("[Planting] loadCrossCombinationOptions", error);
|
|
}
|
|
}
|
|
async function loadPlotOptions() {
|
|
try {
|
|
const res = await PlotAPI.getPlotOptions();
|
|
if (res.data.code === ResultEnum.SUCCESS) {
|
|
plotOptions.value = res.data.data ?? [];
|
|
}
|
|
} catch (error: unknown) {
|
|
if (import.meta.env.DEV) console.error("[Planting] loadPlotOptions", error);
|
|
}
|
|
}
|
|
async function loadPersonnelOptions() {
|
|
try {
|
|
const res = await PersonnelAPI.getPersonnelOptions();
|
|
if (res.data.code === ResultEnum.SUCCESS) {
|
|
personnelOptions.value = res.data.data ?? [];
|
|
}
|
|
} catch (error: unknown) {
|
|
if (import.meta.env.DEV) console.error("[Planting] loadPersonnelOptions", error);
|
|
}
|
|
}
|
|
async function loadSeedlingOptions() {
|
|
try {
|
|
const res = await SeedlingAPI.getSeedlingOptions();
|
|
if (res.data.code === ResultEnum.SUCCESS) {
|
|
seedlingOptions.value = res.data.data ?? [];
|
|
}
|
|
} catch (error: unknown) {
|
|
if (import.meta.env.DEV) console.error("[Planting] loadSeedlingOptions", error);
|
|
}
|
|
}
|
|
|
|
const createInitialFormData = (): PlantingForm => ({
|
|
id: undefined,
|
|
combination_id: undefined,
|
|
plot_id: undefined,
|
|
planting_date: undefined,
|
|
tree_count: undefined,
|
|
row_no: undefined,
|
|
col_no: undefined,
|
|
bre_personnel_id: undefined,
|
|
seedling_id: undefined,
|
|
remark: undefined,
|
|
});
|
|
|
|
type PlantingSearchFormParams = {
|
|
combination_id?: number;
|
|
plot_id?: number;
|
|
bre_personnel_id?: number;
|
|
seedling_id?: number;
|
|
} & AuditSearchFormParams;
|
|
|
|
const searchForm = ref<PlantingSearchFormParams>({
|
|
combination_id: undefined,
|
|
plot_id: undefined,
|
|
bre_personnel_id: undefined,
|
|
seedling_id: 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 PlantingSearchItems = computed(() => [
|
|
{
|
|
label: "杂交组合",
|
|
key: "combination_id",
|
|
type: "select",
|
|
props: {
|
|
placeholder: "请选择杂交组合",
|
|
options: cross_combinationOptions.value,
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
span: 8,
|
|
},
|
|
{
|
|
label: "试验地块",
|
|
key: "plot_id",
|
|
type: "select",
|
|
props: {
|
|
placeholder: "请选择试验地块",
|
|
options: plotOptions.value,
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
span: 8,
|
|
},
|
|
{
|
|
label: "定植人",
|
|
key: "bre_personnel_id",
|
|
type: "select",
|
|
props: {
|
|
placeholder: "请选择定植人",
|
|
options: personnelOptions.value,
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
span: 8,
|
|
},
|
|
{
|
|
label: "育苗批次",
|
|
key: "seedling_id",
|
|
type: "select",
|
|
props: {
|
|
placeholder: "请选择育苗批次",
|
|
options: seedlingOptions.value,
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
span: 8,
|
|
},
|
|
]);
|
|
|
|
const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
|
|
const { selectedRows, selectedIds, batchDeleting, onTableSelectionChange } = useTableSelection<PlantingTable>();
|
|
|
|
const createLoading = ref(false);
|
|
|
|
const {
|
|
columns,
|
|
columnChecks,
|
|
data,
|
|
loading,
|
|
pagination,
|
|
searchParams,
|
|
getData,
|
|
replaceSearchParams,
|
|
resetSearchParams,
|
|
handleSizeChange,
|
|
handleCurrentChange,
|
|
refreshData,
|
|
refreshCreate,
|
|
refreshUpdate,
|
|
refreshRemove,
|
|
} = useTable({
|
|
core: {
|
|
apiFn: PlantingAPI.getPlantingList,
|
|
apiParams: {
|
|
page_no: 1,
|
|
page_size: 10,
|
|
},
|
|
columnsFactory: (): ColumnOption<PlantingTable>[] => [
|
|
{ type: "globalIndex", width: 56, label: "序号" },
|
|
{ type: "selection", width: 48, fixed: "left" },
|
|
{ prop: "combination_name", label: "杂交组合", minWidth: 140, showOverflowTooltip: true },
|
|
{ prop: "plot_name", label: "试验地块", minWidth: 140, showOverflowTooltip: true },
|
|
{ prop: "planting_date", label: "定植日期", minWidth: 140, showOverflowTooltip: true },
|
|
{ prop: "tree_count", label: "定植株数", minWidth: 100 },
|
|
{ prop: "row_no", label: "行号", minWidth: 100 },
|
|
{ prop: "col_no", label: "列号", minWidth: 100 },
|
|
{ prop: "bre_personnel_name", label: "定植人", minWidth: 140, showOverflowTooltip: true },
|
|
{ prop: "seedling_name", 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: PlantingTable) => row.created_by?.name ?? "—",
|
|
},
|
|
{
|
|
prop: "updated_by",
|
|
label: "更新人",
|
|
minWidth: 100,
|
|
formatter: (row: PlantingTable) => row.updated_by?.name ?? "—",
|
|
},
|
|
{
|
|
prop: "operation",
|
|
label: "操作",
|
|
width: 180,
|
|
fixed: "right",
|
|
align: "center",
|
|
formatter: (row: PlantingTable) => formatPlantingOperationCell(row),
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const PlantingCrudCols = toCrudCols(columns);
|
|
|
|
const exportQueryParams = computed(() => {
|
|
return stripPaginationParams(searchParams as Record<string, unknown>);
|
|
});
|
|
|
|
const PlantingImportContentConfig = computed<IContentConfig>(() => ({
|
|
permPrefix: "module_bre:planting",
|
|
cols: PlantingCrudCols.value,
|
|
indexAction: async () => ({}),
|
|
importTemplate: () => PlantingAPI.downloadTemplatePlanting(),
|
|
}));
|
|
|
|
const PlantingExportContentConfig = computed(() => ({
|
|
permPrefix: "module_bre:planting",
|
|
cols: PlantingCrudCols.value,
|
|
exportsBlobAction: async (params: IObject) => {
|
|
const merged = {
|
|
...(exportQueryParams.value as unknown as Record<string, unknown>),
|
|
...params,
|
|
} as unknown as PlantingPageQuery;
|
|
const res = await PlantingAPI.exportPlanting(merged);
|
|
return res.data as Blob;
|
|
},
|
|
}));
|
|
|
|
const { dialogVisible } = useCrudDialog();
|
|
|
|
const detailFormData = ref<PlantingTable>({});
|
|
|
|
const PlantingDetailItems: import("@/components/others/fa-descriptions/index.vue").DescriptionsItem[] = [
|
|
{ label: "杂交组合", prop: "combination_name" },
|
|
{ label: "试验地块", prop: "plot_name" },
|
|
{ label: "定植日期", prop: "planting_date" },
|
|
{ label: "定植株数", prop: "tree_count" },
|
|
{ label: "行号", prop: "row_no" },
|
|
{ label: "列号", prop: "col_no" },
|
|
{ label: "定植人", prop: "bre_personnel_name" },
|
|
{ label: "育苗批次", prop: "seedling_name" },
|
|
{ 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 PlantingDialogFormItems = computed<FormItem[]>(() => [
|
|
{
|
|
key: "combination_id",
|
|
label: "杂交组合",
|
|
type: "select",
|
|
props: {
|
|
placeholder: "请选择杂交组合",
|
|
options: cross_combinationOptions.value,
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
span: 12,
|
|
},
|
|
{
|
|
key: "plot_id",
|
|
label: "试验地块",
|
|
type: "select",
|
|
props: {
|
|
placeholder: "请选择试验地块",
|
|
options: plotOptions.value,
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
span: 12,
|
|
},
|
|
{
|
|
key: "planting_date",
|
|
label: "定植日期",
|
|
type: "date",
|
|
props: {
|
|
type: "date",
|
|
placeholder: "请选择定植日期",
|
|
},
|
|
span: 12,
|
|
},
|
|
{
|
|
key: "tree_count",
|
|
label: "定植株数",
|
|
type: "number",
|
|
props: { placeholder: "请输入定植株数" },
|
|
span: 12,
|
|
},
|
|
{
|
|
key: "row_no",
|
|
label: "行号",
|
|
type: "number",
|
|
props: { placeholder: "请输入行号" },
|
|
span: 12,
|
|
},
|
|
{
|
|
key: "col_no",
|
|
label: "列号",
|
|
type: "number",
|
|
props: { placeholder: "请输入列号" },
|
|
span: 12,
|
|
},
|
|
{
|
|
key: "bre_personnel_id",
|
|
label: "定植人",
|
|
type: "select",
|
|
props: {
|
|
placeholder: "请选择定植人",
|
|
options: personnelOptions.value,
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
span: 12,
|
|
},
|
|
{
|
|
key: "seedling_id",
|
|
label: "育苗批次",
|
|
type: "select",
|
|
props: {
|
|
placeholder: "请选择育苗批次",
|
|
options: seedlingOptions.value,
|
|
clearable: true,
|
|
filterable: true,
|
|
},
|
|
span: 12,
|
|
},
|
|
{
|
|
key: "remark",
|
|
label: "备注",
|
|
type: "input",
|
|
props: { type: "textarea", rows: 3, placeholder: "请输入备注" },
|
|
span: 24,
|
|
},
|
|
]);
|
|
|
|
const formData = ref<PlantingForm>(createInitialFormData());
|
|
|
|
const rules = reactive({
|
|
combination_id: [{ required: true, message: "请选择杂交组合", trigger: "change" }],
|
|
});
|
|
|
|
const dataFormRef = ref<InstanceType<typeof FaForm> | null>(null);
|
|
const PlantingFormRenderKey = ref(0);
|
|
|
|
const crud = useCrudForm<PlantingForm>({
|
|
formData,
|
|
initialFormData: createInitialFormData(),
|
|
dialogVisible,
|
|
dataFormRef,
|
|
formRenderKey: PlantingFormRenderKey,
|
|
detailApi: PlantingAPI.getPlantingDetail,
|
|
createApi: PlantingAPI.createPlanting,
|
|
updateApi: PlantingAPI.updatePlanting,
|
|
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: PlantingSearchFormParams) => {
|
|
await searchBarRef.value?.validate();
|
|
replaceSearchParams({
|
|
combination_id: params.combination_id,
|
|
plot_id: params.plot_id,
|
|
bre_personnel_id: params.bre_personnel_id,
|
|
seedling_id: params.seedling_id,
|
|
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,
|
|
plot_id: undefined,
|
|
bre_personnel_id: undefined,
|
|
seedling_id: undefined,
|
|
created_id: undefined,
|
|
updated_id: undefined,
|
|
created_time: [],
|
|
updated_time: [],
|
|
};
|
|
await resetSearchParams();
|
|
};
|
|
|
|
function buildPlantingRowActions(row: PlantingTable): TableOperationAction[] {
|
|
const all: TableOperationAction[] = [
|
|
{
|
|
key: "detail",
|
|
label: "详情",
|
|
artType: "view",
|
|
perm: "module_bre:planting:detail",
|
|
run: () => void crud.handleOpenDialog("detail", row.id),
|
|
},
|
|
{
|
|
key: "edit",
|
|
label: "编辑",
|
|
artType: "edit",
|
|
icon: "ri:edit-2-line",
|
|
perm: "module_bre:planting:update",
|
|
run: () => void crud.handleOpenDialog("update", row.id),
|
|
},
|
|
{
|
|
key: "delete",
|
|
label: "删除",
|
|
artType: "delete",
|
|
icon: "ri:delete-bin-4-line",
|
|
perm: "module_bre:planting:delete",
|
|
run: () => deletePlantingRow(row),
|
|
},
|
|
];
|
|
return all;
|
|
}
|
|
|
|
function formatPlantingOperationCell(row: PlantingTable) {
|
|
return renderTableOperationCell(buildPlantingRowActions(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 deletePlantingRow = async (row: PlantingTable) => {
|
|
if (!row.id) return;
|
|
try {
|
|
await confirmDelete(`确定删除「${row.id ?? row.id}」吗？此操作不可恢复！`);
|
|
await PlantingAPI.deletePlanting([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 PlantingAPI.deletePlanting(ids);
|
|
faTableRef.value?.elTableRef?.clearSelection();
|
|
await refreshRemove();
|
|
} catch {
|
|
// 用户取消
|
|
} finally {
|
|
batchDeleting.value = false;
|
|
}
|
|
}
|
|
|
|
async function handleCrudImportUpload(uploadFormData: FormData) {
|
|
try {
|
|
const res = await PlantingAPI.importPlanting(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();
|
|
loadPlotOptions();
|
|
loadPersonnelOptions();
|
|
loadSeedlingOptions();
|
|
});
|
|
</script>
|