feat(team): add page
This commit is contained in:
@@ -1,5 +1,730 @@
|
||||
"use client"
|
||||
|
||||
export default function DailypaperPage() {
|
||||
return <></>
|
||||
import {
|
||||
deleteDailyWorkData,
|
||||
getDailyWorkList,
|
||||
lockDailyWorkData,
|
||||
} from "@/components/label/api/daily"
|
||||
import { Daily } from "@/components/label/api/daily/typing"
|
||||
import { getSelfProjectList } from "@/components/label/api/project"
|
||||
import useAuth from "@/components/label/hooks/useAuth"
|
||||
import { useAllUserStore } from "@/components/label/store/auth"
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Button,
|
||||
Collapse,
|
||||
Flex,
|
||||
Group,
|
||||
MultiSelect,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core"
|
||||
import { modals } from "@mantine/modals"
|
||||
import { notifications } from "@mantine/notifications"
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconChevronUp,
|
||||
IconEdit,
|
||||
IconLock,
|
||||
IconLockOpen,
|
||||
IconRefresh,
|
||||
IconSearch,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react"
|
||||
import dayjs from "dayjs"
|
||||
import {
|
||||
DataTable,
|
||||
DataTableColumn,
|
||||
DataTableSortStatus,
|
||||
} from "mantine-datatable"
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import * as XLSX from "xlsx-js-style"
|
||||
import DailyReportModal from "../../person/report/components/DailyReportModal"
|
||||
import {
|
||||
accountTypeOpts,
|
||||
actualTypeOpts,
|
||||
objTypeOpts,
|
||||
objTypeTextMap,
|
||||
performanceOpts,
|
||||
performanceTextMap,
|
||||
setTypeOpts,
|
||||
workTypeOpts,
|
||||
} from "../../person/report/config"
|
||||
import { flattenLeaderTree, toNumberArray, weekDayText } from "../utils"
|
||||
|
||||
function toBoolean(value?: string) {
|
||||
if (value === "true") return true
|
||||
if (value === "false") return false
|
||||
return undefined
|
||||
}
|
||||
|
||||
function toNumber(value?: string) {
|
||||
if (!value) return undefined
|
||||
const n = Number(value)
|
||||
return Number.isFinite(n) ? n : undefined
|
||||
}
|
||||
|
||||
const setTypeMap = new Map(setTypeOpts.map((i) => [i.value, i.label]))
|
||||
const actualTypeMap = new Map(actualTypeOpts.map((i) => [i.value, i.label]))
|
||||
const workTypeMap = new Map(workTypeOpts.map((i) => [i.value, i.label]))
|
||||
const accountTypeMap = new Map(accountTypeOpts.map((i) => [i.value, i.label]))
|
||||
|
||||
export default function TeamDailypaperPage() {
|
||||
const { isShow } = useAuth()
|
||||
const treeData = useAllUserStore((s) => s.treeData)
|
||||
|
||||
const leaderOptions = useMemo(() => flattenLeaderTree(treeData ?? []), [treeData])
|
||||
|
||||
const defaultFilters = useMemo(() => {
|
||||
return {
|
||||
date_start: dayjs().subtract(6, "day").format("YYYY-MM-DD"),
|
||||
date_end: dayjs().format("YYYY-MM-DD"),
|
||||
uid: [] as string[],
|
||||
set_type: "",
|
||||
actual_type: "",
|
||||
leader_uid: [] as string[],
|
||||
work_type: "",
|
||||
accounting_type: "",
|
||||
project_id: [] as string[],
|
||||
performance_accounting: "",
|
||||
obj_type: "",
|
||||
}
|
||||
}, [])
|
||||
|
||||
const [projectOptions, setProjectOptions] = useState<
|
||||
Array<{ label: string; value: string }>
|
||||
>([])
|
||||
|
||||
const [filters, setFilters] = useState(defaultFilters)
|
||||
const [appliedFilters, setAppliedFilters] = useState(defaultFilters)
|
||||
const [queryTrigger, setQueryTrigger] = useState(0)
|
||||
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(20)
|
||||
const [totalItems, setTotalItems] = useState(0)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [records, setRecords] = useState<Daily.DailyWorkList[]>([])
|
||||
const [summary, setSummary] = useState<Daily.Summary | null>(null)
|
||||
|
||||
const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
|
||||
columnAccessor: "id",
|
||||
direction: "desc",
|
||||
})
|
||||
|
||||
const [modalOpened, setModalOpened] = useState(false)
|
||||
const [editingRecord, setEditingRecord] = useState<Daily.DailyWorkList | null>(null)
|
||||
const [searchExpanded, setSearchExpanded] = useState(false)
|
||||
|
||||
const queryParams = useMemo(() => {
|
||||
const params: Daily.Request = {
|
||||
page_number: page,
|
||||
page_size: pageSize,
|
||||
flag: 1,
|
||||
date_start: appliedFilters.date_start || undefined,
|
||||
date_end: appliedFilters.date_end || undefined,
|
||||
uid: toNumberArray(appliedFilters.uid),
|
||||
set_type: appliedFilters.set_type || undefined,
|
||||
actual_type: appliedFilters.actual_type || undefined,
|
||||
leader_uid: toNumberArray(appliedFilters.leader_uid),
|
||||
work_type: appliedFilters.work_type || undefined,
|
||||
accounting_type: appliedFilters.accounting_type || undefined,
|
||||
project_id: toNumberArray(appliedFilters.project_id),
|
||||
performance_accounting: toBoolean(appliedFilters.performance_accounting),
|
||||
obj_type: toNumber(appliedFilters.obj_type),
|
||||
order_by: `${sortStatus.columnAccessor} ${sortStatus.direction}`,
|
||||
}
|
||||
Object.keys(params).forEach((k) => {
|
||||
const key = k as keyof Daily.Request
|
||||
const value = params[key]
|
||||
if (value === "" || value === null) delete params[key]
|
||||
if (Array.isArray(value) && value.length === 0) delete params[key]
|
||||
if (value !== 0 && value !== false && value !== "" && !value) {
|
||||
delete params[key]
|
||||
}
|
||||
})
|
||||
return params
|
||||
}, [appliedFilters, page, pageSize, sortStatus.columnAccessor, sortStatus.direction])
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!queryTrigger) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await getDailyWorkList(queryParams)
|
||||
setRecords(res?.daily_work_list ?? [])
|
||||
setTotalItems(res?.total_items ?? 0)
|
||||
setSummary(res?.total_summary ?? null)
|
||||
} catch (e) {
|
||||
setRecords([])
|
||||
setTotalItems(0)
|
||||
setSummary(null)
|
||||
notifications.show({
|
||||
color: "red",
|
||||
title: "加载失败",
|
||||
message: e instanceof Error ? e.message : "请求失败",
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [queryParams, queryTrigger])
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
}, [load])
|
||||
|
||||
useEffect(() => {
|
||||
queueMicrotask(() => setQueryTrigger((v) => v + 1))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const run = async () => {
|
||||
const res = await getSelfProjectList()
|
||||
setProjectOptions((res ?? []).map((p) => ({ label: p.label, value: String(p.value) })))
|
||||
}
|
||||
queueMicrotask(run)
|
||||
}, [])
|
||||
|
||||
const handleExportData = () => {
|
||||
if (!records.length) {
|
||||
notifications.show({
|
||||
color: "yellow",
|
||||
title: "暂无数据",
|
||||
message: "当前无可导出日报数据",
|
||||
})
|
||||
return
|
||||
}
|
||||
const exportTableHeader = [
|
||||
"员工姓名",
|
||||
"日期",
|
||||
"星期",
|
||||
"规定类型",
|
||||
"实际类型",
|
||||
"任务组长",
|
||||
"工作类别",
|
||||
"核算方式",
|
||||
"项目名称",
|
||||
"绩效核算",
|
||||
"对象类型",
|
||||
"余量正负",
|
||||
"开始时间",
|
||||
"结束时间",
|
||||
"工时",
|
||||
"额定倍率",
|
||||
"标准量",
|
||||
"完成量",
|
||||
"余量",
|
||||
"余量工时",
|
||||
"备注",
|
||||
]
|
||||
const exportData = records.map((item) => [
|
||||
item.username ?? "-",
|
||||
item.date ?? "-",
|
||||
item.date ? weekDayText(dayjs(item.date).day()) : "-",
|
||||
setTypeMap.get(item.set_type ?? "") ?? "-",
|
||||
actualTypeMap.get(item.actual_type ?? "") ?? "-",
|
||||
item.leader_name ?? "-",
|
||||
workTypeMap.get(item.work_type ?? "") ?? "-",
|
||||
accountTypeMap.get(item.accounting_type ?? "") ?? "-",
|
||||
item.project_name ?? "-",
|
||||
item.performance_accounting === true
|
||||
? "是"
|
||||
: item.performance_accounting === false
|
||||
? "否"
|
||||
: "-",
|
||||
item.obj_type === 0 || item.obj_type === 1
|
||||
? (objTypeTextMap.get(item.obj_type) ?? "-")
|
||||
: "-",
|
||||
item.residual_pm === true ? "正" : item.residual_pm === false ? "负" : "-",
|
||||
item.start_time ?? "-",
|
||||
item.end_time ?? "-",
|
||||
item.work_time ?? 0,
|
||||
item.rate ?? 0,
|
||||
item.standard_size ?? 0,
|
||||
item.completed_size ?? 0,
|
||||
item.residual_size ?? 0,
|
||||
item.residual_work_time ?? 0,
|
||||
item.remarks ?? "-",
|
||||
])
|
||||
const wb = XLSX.utils.book_new()
|
||||
const ws = XLSX.utils.aoa_to_sheet([exportTableHeader, ...exportData])
|
||||
XLSX.utils.book_append_sheet(wb, ws, "团队日报数据")
|
||||
XLSX.writeFile(wb, "团队日报数据.xlsx")
|
||||
}
|
||||
|
||||
const columns = useMemo(() => {
|
||||
const cols: DataTableColumn<Daily.DailyWorkList>[] = [
|
||||
{ accessor: "id", title: "ID", width: 80, sortable: true },
|
||||
{
|
||||
accessor: "username",
|
||||
title: "员工姓名",
|
||||
width: 120,
|
||||
render: (record) => record.username ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "date",
|
||||
title: "日期",
|
||||
width: 120,
|
||||
sortable: true,
|
||||
render: (record) => record.date ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "week",
|
||||
title: "星期",
|
||||
width: 90,
|
||||
render: (record) => (record.date ? weekDayText(dayjs(record.date).day()) : "-"),
|
||||
},
|
||||
{
|
||||
accessor: "set_type",
|
||||
title: "规定类型",
|
||||
width: 120,
|
||||
render: (record) => setTypeMap.get(record.set_type ?? "") ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "actual_type",
|
||||
title: "实际类型",
|
||||
width: 120,
|
||||
render: (record) => actualTypeMap.get(record.actual_type ?? "") ?? "-",
|
||||
},
|
||||
{ accessor: "leader_name", title: "任务组长", width: 120 },
|
||||
{
|
||||
accessor: "work_type",
|
||||
title: "工作类别",
|
||||
width: 140,
|
||||
render: (record) => workTypeMap.get(record.work_type ?? "") ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "accounting_type",
|
||||
title: "核算方式",
|
||||
width: 140,
|
||||
render: (record) => accountTypeMap.get(record.accounting_type ?? "") ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "project_name",
|
||||
title: "项目名称",
|
||||
width: 220,
|
||||
render: (record) => (
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
maxWidth: 220,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}>
|
||||
{record.project_name ?? "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "performance_accounting",
|
||||
title: "绩效核算",
|
||||
width: 110,
|
||||
render: (record) => {
|
||||
if (record.performance_accounting === true) {
|
||||
return <Badge color="green">{performanceTextMap.get(true)}</Badge>
|
||||
}
|
||||
if (record.performance_accounting === false) {
|
||||
return <Badge color="gray">{performanceTextMap.get(false)}</Badge>
|
||||
}
|
||||
return "-"
|
||||
},
|
||||
},
|
||||
{
|
||||
accessor: "obj_type",
|
||||
title: "对象类型",
|
||||
width: 100,
|
||||
render: (record) => {
|
||||
if (record.obj_type === 0 || record.obj_type === 1) {
|
||||
return objTypeTextMap.get(record.obj_type) ?? "-"
|
||||
}
|
||||
return "-"
|
||||
},
|
||||
},
|
||||
{
|
||||
accessor: "residual_pm",
|
||||
title: "余量正负",
|
||||
width: 100,
|
||||
render: (record) =>
|
||||
record.residual_pm === true ? "正" : record.residual_pm === false ? "负" : "-",
|
||||
},
|
||||
{ accessor: "start_time", title: "开始时间", width: 120 },
|
||||
{ accessor: "end_time", title: "结束时间", width: 120 },
|
||||
{ accessor: "work_time", title: "工时", width: 90, sortable: true },
|
||||
{ accessor: "rate", title: "额定倍率", width: 90 },
|
||||
{ accessor: "standard_size", title: "标准量", width: 90, sortable: true },
|
||||
{ accessor: "completed_size", title: "完成量", width: 90, sortable: true },
|
||||
{ accessor: "residual_size", title: "余量", width: 90, sortable: true },
|
||||
{
|
||||
accessor: "residual_work_time",
|
||||
title: "余量工时",
|
||||
width: 110,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
accessor: "remarks",
|
||||
title: "备注",
|
||||
width: 200,
|
||||
render: (record) => (
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
maxWidth: 200,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}>
|
||||
{record.remarks ?? "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "operation",
|
||||
title: "操作",
|
||||
width: 120,
|
||||
textAlign: "center",
|
||||
render: (record) => {
|
||||
const locked = !!record.lock_status
|
||||
return (
|
||||
<Group gap={4} justify="center" wrap="nowrap">
|
||||
{isShow("edit") ? (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="blue"
|
||||
disabled={locked}
|
||||
onClick={() => {
|
||||
if (locked) return
|
||||
setEditingRecord(record)
|
||||
setModalOpened(true)
|
||||
}}>
|
||||
<IconEdit size={16} />
|
||||
</ActionIcon>
|
||||
) : null}
|
||||
{isShow("lock") ? (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color={locked ? "yellow" : "gray"}
|
||||
onClick={async () => {
|
||||
if (!record.id) return
|
||||
await lockDailyWorkData(!locked, record.id)
|
||||
notifications.show({
|
||||
color: "green",
|
||||
title: "操作成功",
|
||||
message: locked ? "已解锁日报" : "已锁定日报",
|
||||
})
|
||||
load()
|
||||
}}>
|
||||
{locked ? <IconLock size={16} /> : <IconLockOpen size={16} />}
|
||||
</ActionIcon>
|
||||
) : null}
|
||||
{isShow("delete") ? (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="red"
|
||||
disabled={locked}
|
||||
onClick={() => {
|
||||
if (locked || !record.id) return
|
||||
modals.openConfirmModal({
|
||||
title: "删除日报",
|
||||
centered: true,
|
||||
children: (
|
||||
<Text size="sm">删除后不可恢复，你确定删除该日报吗？</Text>
|
||||
),
|
||||
labels: { confirm: "删除", cancel: "取消" },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: async () => {
|
||||
await deleteDailyWorkData(record.id as number)
|
||||
notifications.show({
|
||||
color: "green",
|
||||
title: "操作成功",
|
||||
message: "已删除日报",
|
||||
})
|
||||
load()
|
||||
},
|
||||
})
|
||||
}}>
|
||||
<IconTrash size={16} />
|
||||
</ActionIcon>
|
||||
) : null}
|
||||
</Group>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
return cols
|
||||
}, [isShow, load])
|
||||
|
||||
const summaryText = useMemo(() => {
|
||||
return {
|
||||
total_work_time: summary?.total_work_time ?? 0,
|
||||
total_standard_size: summary?.total_standard_size ?? 0,
|
||||
total_completed_size: summary?.total_completed_size ?? 0,
|
||||
total_residual_size: summary?.total_residual_size ?? 0,
|
||||
total_residual_work_time: summary?.total_residual_work_time ?? 0,
|
||||
}
|
||||
}, [summary])
|
||||
|
||||
return (
|
||||
<Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
|
||||
<Paper
|
||||
withBorder
|
||||
p="md"
|
||||
radius="md"
|
||||
style={{
|
||||
borderColor:
|
||||
"light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
}}>
|
||||
<Stack gap="sm">
|
||||
<Group justify="space-between" wrap="wrap" gap="sm">
|
||||
<Group gap="xs">
|
||||
<Text fw={700}>搜索条件</Text>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="transparent"
|
||||
rightSection={
|
||||
searchExpanded ? (
|
||||
<IconChevronUp size={16} />
|
||||
) : (
|
||||
<IconChevronDown size={16} />
|
||||
)
|
||||
}
|
||||
onClick={() => setSearchExpanded((v) => !v)}>
|
||||
{searchExpanded ? "收起" : "展开"}
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm">
|
||||
<Button
|
||||
variant="default"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
onClick={() => {
|
||||
setFilters(defaultFilters)
|
||||
setAppliedFilters(defaultFilters)
|
||||
setPage(1)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}>
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="xs"
|
||||
leftSection={<IconSearch size={16} />}
|
||||
onClick={() => {
|
||||
setAppliedFilters(filters)
|
||||
setPage(1)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}>
|
||||
查询
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
<Collapse in={searchExpanded} transitionDuration={150} animateOpacity>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
|
||||
<TextInput
|
||||
label="开始日期"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
type="date"
|
||||
value={filters.date_start}
|
||||
onChange={(e) => setFilters((s) => ({ ...s, date_start: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="结束日期"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
type="date"
|
||||
value={filters.date_end}
|
||||
onChange={(e) => setFilters((s) => ({ ...s, date_end: e.target.value }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="员工姓名"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={leaderOptions}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.uid}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, uid: v }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="项目名称"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={projectOptions}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.project_id}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, project_id: v }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="任务组长"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={leaderOptions}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.leader_uid}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, leader_uid: v }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="规定类型"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={setTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.set_type ? [filters.set_type] : []}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, set_type: v[0] ?? "" }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="出勤类型"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={actualTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.actual_type ? [filters.actual_type] : []}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, actual_type: v[0] ?? "" }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="工作类别"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={workTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.work_type ? [filters.work_type] : []}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, work_type: v[0] ?? "" }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="核算方式"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={accountTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.accounting_type ? [filters.accounting_type] : []}
|
||||
onChange={(v) =>
|
||||
setFilters((s) => ({ ...s, accounting_type: v[0] ?? "" }))
|
||||
}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="绩效核算"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={performanceOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={
|
||||
filters.performance_accounting ? [filters.performance_accounting] : []
|
||||
}
|
||||
onChange={(v) =>
|
||||
setFilters((s) => ({ ...s, performance_accounting: v[0] ?? "" }))
|
||||
}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="对象类型"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
data={objTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.obj_type ? [filters.obj_type] : []}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, obj_type: v[0] ?? "" }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Collapse>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
p="md"
|
||||
radius="md"
|
||||
style={{
|
||||
borderColor:
|
||||
"light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 12,
|
||||
}}>
|
||||
<Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
|
||||
<Flex justify="space-between" align="center" w="100%">
|
||||
<Button
|
||||
size="xs"
|
||||
radius="xs"
|
||||
onClick={handleExportData}>
|
||||
导出日报
|
||||
</Button>
|
||||
<ActionIcon onClick={load} variant="transparent">
|
||||
<IconRefresh size={16} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
|
||||
<DataTable<Daily.DailyWorkList>
|
||||
width="100%"
|
||||
style={{ width: "100%" }}
|
||||
withTableBorder
|
||||
withRowBorders
|
||||
pinFirstColumn
|
||||
pinLastColumn
|
||||
scrollAreaProps={{ type: "auto" }}
|
||||
fetching={loading}
|
||||
records={records}
|
||||
columns={columns}
|
||||
totalRecords={totalItems}
|
||||
recordsPerPage={pageSize}
|
||||
page={page}
|
||||
onPageChange={setPage}
|
||||
onRecordsPerPageChange={(v) => {
|
||||
setPageSize(v)
|
||||
setPage(1)
|
||||
}}
|
||||
recordsPerPageOptions={[10, 15, 20, 50]}
|
||||
noRecordsText="暂无数据"
|
||||
recordsPerPageLabel="当前页数"
|
||||
sortStatus={sortStatus}
|
||||
onSortStatusChange={(s) => {
|
||||
setSortStatus(s)
|
||||
setPage(1)
|
||||
}}
|
||||
/>
|
||||
|
||||
<Paper withBorder radius="xs" p="sm">
|
||||
<Group justify="space-between" wrap="wrap">
|
||||
<Text size="sm" fw={700}>
|
||||
当前页总计
|
||||
</Text>
|
||||
<Group gap="md">
|
||||
<Text size="sm">工时：{summaryText.total_work_time}</Text>
|
||||
<Text size="sm">标准量：{summaryText.total_standard_size}</Text>
|
||||
<Text size="sm">完成量：{summaryText.total_completed_size}</Text>
|
||||
<Text size="sm">余量：{summaryText.total_residual_size}</Text>
|
||||
<Text size="sm">
|
||||
余量工时：{summaryText.total_residual_work_time}
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<DailyReportModal
|
||||
opened={modalOpened}
|
||||
record={editingRecord}
|
||||
projectOptions={projectOptions}
|
||||
onCloseAction={(refresh) => {
|
||||
setModalOpened(false)
|
||||
setEditingRecord(null)
|
||||
if (refresh) load()
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user