perf(style): codex-skills/cowa-admin-list-ui
This commit is contained in:
zhangheng
@@ -1,81 +1,116 @@
|
||||
.modalContent {
|
||||
border-radius: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
|
||||
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
padding: 20px 24px 0;
|
||||
padding: 16px 20px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.modalTitle {
|
||||
color: #1f2329;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #1d2129;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
padding: 16px 24px 24px;
|
||||
background: #f8fafc;
|
||||
padding: 16px 20px 20px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.formSurface {
|
||||
border-color: #e6ebf2;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
|
||||
border-color: #e5e6eb;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-InputWrapper-label) {
|
||||
color: #1f2329;
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
margin-bottom: 6px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-input),
|
||||
.formPanel :global(.mantine-DateInput-input),
|
||||
.formPanel :global(.mantine-Select-input),
|
||||
.formPanel :global(.mantine-NumberInput-input),
|
||||
.formPanel :global(.mantine-Textarea-input) {
|
||||
min-height: 36px;
|
||||
border-color: #d0d5dd;
|
||||
background: #ffffff;
|
||||
color: #31373d;
|
||||
min-height: 32px;
|
||||
border-color: #e5e6eb;
|
||||
border-radius: 4px;
|
||||
background: #f7f8fa;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
background-color 0.15s ease;
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-input::placeholder),
|
||||
.formPanel :global(.mantine-DateInput-input::placeholder),
|
||||
.formPanel :global(.mantine-Select-input::placeholder),
|
||||
.formPanel :global(.mantine-NumberInput-input::placeholder),
|
||||
.formPanel :global(.mantine-Textarea-input::placeholder) {
|
||||
color: #98a2b3;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-input:focus),
|
||||
.formPanel :global(.mantine-DateInput-input:focus),
|
||||
.formPanel :global(.mantine-Select-input:focus),
|
||||
.formPanel :global(.mantine-NumberInput-input:focus),
|
||||
.formPanel :global(.mantine-Textarea-input:focus) {
|
||||
border-color: #69c0ff;
|
||||
box-shadow: 0 0 0 3px rgba(105, 192, 255, 0.14);
|
||||
border-color: #1874ff;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-input[readonly]),
|
||||
.formPanel :global(.mantine-NumberInput-input[readonly]) {
|
||||
background: #f8fafc;
|
||||
color: #667085;
|
||||
.formPanel :global(.mantine-DateInput-input[readonly]),
|
||||
.formPanel :global(.mantine-NumberInput-input[readonly]),
|
||||
.formPanel :global(.mantine-Textarea-input[readonly]) {
|
||||
background: #f7f8fa;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-section),
|
||||
.formPanel :global(.mantine-DateInput-section),
|
||||
.formPanel :global(.mantine-Select-section),
|
||||
.formPanel :global(.mantine-NumberInput-section) {
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Button-root) {
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
padding-inline: 14px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
padding-inline: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Button-root[data-variant="filled"]) {
|
||||
--button-bg: #1874ff;
|
||||
--button-hover: #0f6ae8;
|
||||
--button-color: #ffffff;
|
||||
--button-bd: transparent;
|
||||
background: #1874ff !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Button-root[data-variant="filled"]:hover) {
|
||||
background: #0f6ae8 !important;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Button-root[data-variant="default"]) {
|
||||
border-color: #e5e6eb;
|
||||
background: #ffffff;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
@@ -358,12 +358,7 @@ export default function DailyReportModal(props: {
|
||||
}}
|
||||
closeOnClickOutside={false}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Paper
|
||||
withBorder
|
||||
radius="lg"
|
||||
p="md"
|
||||
shadow="xs"
|
||||
className={classes.formSurface}>
|
||||
<Paper withBorder radius="sm" p="md" className={classes.formSurface}>
|
||||
<Stack gap="md" className={classes.formPanel}>
|
||||
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
|
||||
<TextInput label="姓名" value={form.values.user_name} readOnly />
|
||||
@@ -547,7 +542,9 @@ export default function DailyReportModal(props: {
|
||||
}}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="submit">提交</Button>
|
||||
<Button type="submit" color="#1874ff">
|
||||
提交
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
177
app/person/report/page.module.css
Normal file
177
app/person/report/page.module.css
Normal file
@@ -0,0 +1,177 @@
|
||||
.pageIntro {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: #86909c;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.breadcrumbCurrent {
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.filterTopRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filterExpandedGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px 20px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
.filterField {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
flex: 0 0 80px;
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.filterControl {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filterControl :global(.mantine-InputWrapper-root) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filterControl :global(.mantine-PillsInput-root) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filterControl :global(.mantine-InputWrapper-label) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filterActions {
|
||||
display: inline-flex;
|
||||
justify-self: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.collapseToggle {
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
min-width: auto;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.contentPanelBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tableActionBar {
|
||||
padding: 4px 16px 0;
|
||||
}
|
||||
|
||||
.operationGroup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.operationLink {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #1874ff;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.operationLinkDanger {
|
||||
color: #f53f3f;
|
||||
}
|
||||
|
||||
.operationLinkDisabled {
|
||||
color: #c9cdd4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.operationDivider {
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: #e5e6eb;
|
||||
}
|
||||
|
||||
.statusBadge {
|
||||
min-height: 24px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.statusPositive {
|
||||
background: #e8ffea;
|
||||
color: #00b42a;
|
||||
}
|
||||
|
||||
.statusNegative {
|
||||
background: #ffece8;
|
||||
color: #f53f3f;
|
||||
}
|
||||
|
||||
.ellipsisText {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filterTopRow {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.filterActions {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.filterExpandedGrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.filterTopRow,
|
||||
.filterExpandedGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.filterField {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
@@ -17,7 +17,6 @@ import {
|
||||
SettingPage,
|
||||
} from "@/components/setting/PageSurface"
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Button,
|
||||
Collapse,
|
||||
@@ -25,7 +24,6 @@ import {
|
||||
Modal,
|
||||
MultiSelect,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
@@ -35,11 +33,9 @@ import { notifications } from "@mantine/notifications"
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconChevronUp,
|
||||
IconPencil,
|
||||
IconPlus,
|
||||
IconRefresh,
|
||||
IconSearch,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react"
|
||||
|
||||
import { DateInput } from "@mantine/dates"
|
||||
@@ -58,6 +54,7 @@ import {
|
||||
setTypeOpts,
|
||||
workTypeOpts,
|
||||
} from "./config"
|
||||
import classes from "./page.module.css"
|
||||
|
||||
type LeaderTreeNode = {
|
||||
title?: string
|
||||
@@ -114,6 +111,21 @@ function toNumber(value?: string) {
|
||||
|
||||
const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
|
||||
|
||||
function InlineFilterField({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className={classes.filterField}>
|
||||
<Text className={classes.filterLabel}>{label}</Text>
|
||||
<div className={classes.filterControl}>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function PersonReportPage() {
|
||||
const treeData = useAllUserStore((s) => s.treeData)
|
||||
|
||||
@@ -342,12 +354,8 @@ export default function PersonReportPage() {
|
||||
render: (record) => (
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
maxWidth: 220,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}>
|
||||
className={classes.ellipsisText}
|
||||
style={{ maxWidth: 220 }}>
|
||||
{record.project_name ?? "-"}
|
||||
</Text>
|
||||
),
|
||||
@@ -358,9 +366,19 @@ export default function PersonReportPage() {
|
||||
width: 110,
|
||||
render: (record) => {
|
||||
if (record.performance_accounting === true)
|
||||
return <Badge color="green">{performanceTextMap.get(true)}</Badge>
|
||||
return (
|
||||
<Badge
|
||||
className={`${classes.statusBadge} ${classes.statusPositive}`}>
|
||||
{performanceTextMap.get(true)}
|
||||
</Badge>
|
||||
)
|
||||
if (record.performance_accounting === false)
|
||||
return <Badge color="gray">{performanceTextMap.get(false)}</Badge>
|
||||
return (
|
||||
<Badge
|
||||
className={`${classes.statusBadge} ${classes.statusNegative}`}>
|
||||
{performanceTextMap.get(false)}
|
||||
</Badge>
|
||||
)
|
||||
return "-"
|
||||
},
|
||||
},
|
||||
@@ -419,12 +437,8 @@ export default function PersonReportPage() {
|
||||
render: (record) => (
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
maxWidth: 200,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}>
|
||||
className={classes.ellipsisText}
|
||||
style={{ maxWidth: 200 }}>
|
||||
{record.remarks ?? "-"}
|
||||
</Text>
|
||||
),
|
||||
@@ -437,47 +451,54 @@ export default function PersonReportPage() {
|
||||
render: (record) => {
|
||||
const disabled = !!record.lock_status
|
||||
return (
|
||||
<Group gap={6} justify="center" wrap="nowrap">
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="blue"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (disabled) return
|
||||
setEditingRecord(record)
|
||||
setModalOpened(true)
|
||||
}}>
|
||||
<IconPencil size={16} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="red"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (disabled || !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>
|
||||
<Group gap={0} justify="center" wrap="nowrap">
|
||||
<div className={classes.operationGroup}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${classes.operationLink} ${
|
||||
disabled ? classes.operationLinkDisabled : ""
|
||||
}`}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (disabled) return
|
||||
setEditingRecord(record)
|
||||
setModalOpened(true)
|
||||
}}>
|
||||
编辑
|
||||
</button>
|
||||
<span className={classes.operationDivider} />
|
||||
<button
|
||||
type="button"
|
||||
className={`${classes.operationLink} ${classes.operationLinkDanger} ${
|
||||
disabled ? classes.operationLinkDisabled : ""
|
||||
}`}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (disabled || !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()
|
||||
},
|
||||
})
|
||||
}}>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</Group>
|
||||
)
|
||||
},
|
||||
@@ -509,13 +530,55 @@ export default function PersonReportPage() {
|
||||
|
||||
return (
|
||||
<SettingPage>
|
||||
<Stack className={classes.pageIntro}>
|
||||
<Text className={classes.breadcrumb}>
|
||||
个人工作台 / 日报管理 /{" "}
|
||||
<span className={classes.breadcrumbCurrent}>我的日报</span>
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<SettingFilterPanel>
|
||||
<Stack gap="sm">
|
||||
<Group justify="space-between" wrap="wrap" gap="sm">
|
||||
<Group gap="xs">
|
||||
<Text fw={700}>筛选条件</Text>
|
||||
<Stack gap={12}>
|
||||
<div className={classes.filterTopRow}>
|
||||
<InlineFilterField label="开始日期">
|
||||
<DateInput
|
||||
locale="zh-cn"
|
||||
value={filters.date_start}
|
||||
onChange={(e) =>
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
date_start: dayjs(e).format("YYYY-MM-DD"),
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="结束日期">
|
||||
<DateInput
|
||||
locale="zh-cn"
|
||||
value={filters.date_end}
|
||||
onChange={(e) => {
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
date_end: dayjs(e).format("YYYY-MM-DD"),
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="项目名称">
|
||||
<MultiSelect
|
||||
data={projectOptions}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择项目"
|
||||
value={filters.project_id}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, project_id: v }))}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
|
||||
<SettingFilterActions mt={0} className={classes.filterActions}>
|
||||
<Button
|
||||
variant="transparent"
|
||||
className={classes.collapseToggle}
|
||||
rightSection={
|
||||
searchExpanded ? (
|
||||
<IconChevronUp size={16} />
|
||||
@@ -526,9 +589,6 @@ export default function PersonReportPage() {
|
||||
onClick={() => setSearchExpanded((v) => !v)}>
|
||||
{searchExpanded ? "收起" : "展开"}
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<SettingFilterActions mt={0}>
|
||||
<Button
|
||||
variant="default"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
@@ -541,6 +601,7 @@ export default function PersonReportPage() {
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
color="#1874ff"
|
||||
leftSection={<IconSearch size={16} />}
|
||||
onClick={() => {
|
||||
setAppliedFilters(filters)
|
||||
@@ -550,111 +611,98 @@ export default function PersonReportPage() {
|
||||
查询
|
||||
</Button>
|
||||
</SettingFilterActions>
|
||||
</Group>
|
||||
</div>
|
||||
<Collapse in={searchExpanded} transitionDuration={150} animateOpacity>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
|
||||
<DateInput
|
||||
label="开始日期"
|
||||
locale="zh-cn"
|
||||
value={filters.date_start}
|
||||
onChange={(e) =>
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
date_start: dayjs(e).format("YYYY-MM-DD"),
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<DateInput
|
||||
label="结束日期"
|
||||
locale="zh-cn"
|
||||
value={filters.date_end}
|
||||
onChange={(e) => {
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
date_end: dayjs(e).format("YYYY-MM-DD"),
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="项目名称"
|
||||
data={projectOptions}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.project_id}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, project_id: v }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="任务组长"
|
||||
data={leaderOptions}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.leader_uid}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, leader_uid: v }))}
|
||||
/>
|
||||
<Select
|
||||
label="规定类型"
|
||||
data={setTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.set_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, set_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
label="出勤类型"
|
||||
data={actualTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.actual_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, actual_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
label="工作类别"
|
||||
data={workTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.work_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, work_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
label="核算方式"
|
||||
data={accountTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.accounting_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, accounting_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
label="绩效核算"
|
||||
data={performanceOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.performance_accounting || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
performance_accounting: value ?? "",
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
label="对象类型"
|
||||
data={objTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.obj_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, obj_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
<div className={classes.filterExpandedGrid}>
|
||||
<InlineFilterField label="任务组长">
|
||||
<MultiSelect
|
||||
data={leaderOptions}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择组长"
|
||||
value={filters.leader_uid}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, leader_uid: v }))}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="规定类型">
|
||||
<Select
|
||||
data={setTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.set_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, set_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="出勤类型">
|
||||
<Select
|
||||
data={actualTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.actual_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, actual_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="工作类别">
|
||||
<Select
|
||||
data={workTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.work_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, work_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="核算方式">
|
||||
<Select
|
||||
data={accountTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.accounting_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
accounting_type: value ?? "",
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="绩效核算">
|
||||
<Select
|
||||
data={performanceOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.performance_accounting || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
performance_accounting: value ?? "",
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="对象类型">
|
||||
<Select
|
||||
data={objTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.obj_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, obj_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
</div>
|
||||
</Collapse>
|
||||
</Stack>
|
||||
</SettingFilterPanel>
|
||||
@@ -663,81 +711,87 @@ export default function PersonReportPage() {
|
||||
style={{
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
padding: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 12,
|
||||
}}>
|
||||
<SettingListHeader
|
||||
title="我的日报"
|
||||
count={`${totalItems} 条`}
|
||||
actions={
|
||||
<SettingHeaderActions>
|
||||
<Button
|
||||
leftSection={<IconPlus size={16} />}
|
||||
onClick={() => {
|
||||
setEditingRecord(null)
|
||||
setModalOpened(true)
|
||||
}}>
|
||||
填写日报
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
onClick={load}
|
||||
loading={loading}>
|
||||
刷新
|
||||
</Button>
|
||||
</SettingHeaderActions>
|
||||
}
|
||||
/>
|
||||
<Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
|
||||
<SettingDataTable<Daily.DailyWorkList>
|
||||
width="100%"
|
||||
minHeight={0}
|
||||
style={{ width: "100%", flex: 1 }}
|
||||
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={recordsPerPageOptions}
|
||||
sortStatus={sortStatus}
|
||||
onSortStatusChange={(s) => {
|
||||
setSortStatus(s)
|
||||
setPage(1)
|
||||
}}
|
||||
renderPagination={({ Controls }) => (
|
||||
<Group
|
||||
justify="space-between"
|
||||
align="center"
|
||||
w="100%"
|
||||
gap="sm"
|
||||
wrap="wrap">
|
||||
<Group gap="xs" align="center" wrap="wrap">
|
||||
<Controls.Text />
|
||||
<Controls.PageSizeSelector />
|
||||
<div className={classes.contentPanelBody}>
|
||||
<div className={classes.tableActionBar}>
|
||||
<SettingListHeader
|
||||
title="日报列表"
|
||||
count={`共 ${totalItems} 条记录`}
|
||||
actions={
|
||||
<SettingHeaderActions>
|
||||
<Button
|
||||
variant="light"
|
||||
color="gray"
|
||||
size="xs"
|
||||
onClick={openCustomPageSizeModal}>
|
||||
自定义每页条数
|
||||
color="#1874ff"
|
||||
leftSection={<IconPlus size={16} />}
|
||||
onClick={() => {
|
||||
setEditingRecord(null)
|
||||
setModalOpened(true)
|
||||
}}>
|
||||
新建日报
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
onClick={load}
|
||||
loading={loading}>
|
||||
刷新
|
||||
</Button>
|
||||
</SettingHeaderActions>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
|
||||
<SettingDataTable<Daily.DailyWorkList>
|
||||
width="100%"
|
||||
minHeight={0}
|
||||
style={{ width: "100%", flex: 1 }}
|
||||
pinFirstColumn
|
||||
pinLastColumn
|
||||
scrollAreaProps={{ type: "auto" }}
|
||||
fetching={loading}
|
||||
records={records}
|
||||
columns={columns}
|
||||
totalRecords={totalItems}
|
||||
recordsPerPage={pageSize}
|
||||
page={page}
|
||||
paginationText={({ from, to, totalRecords }) =>
|
||||
`显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
|
||||
}
|
||||
onPageChange={setPage}
|
||||
onRecordsPerPageChange={(v) => {
|
||||
setPageSize(v)
|
||||
setPage(1)
|
||||
}}
|
||||
recordsPerPageOptions={recordsPerPageOptions}
|
||||
sortStatus={sortStatus}
|
||||
onSortStatusChange={(s) => {
|
||||
setSortStatus(s)
|
||||
setPage(1)
|
||||
}}
|
||||
renderPagination={({ Controls }) => (
|
||||
<Group
|
||||
justify="space-between"
|
||||
align="center"
|
||||
w="100%"
|
||||
gap="sm"
|
||||
wrap="wrap">
|
||||
<Group gap="xs" align="center" wrap="wrap">
|
||||
<Controls.Text />
|
||||
<Controls.PageSizeSelector />
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={openCustomPageSizeModal}>
|
||||
自定义每页条数
|
||||
</Button>
|
||||
</Group>
|
||||
<Controls.Pagination />
|
||||
</Group>
|
||||
<Controls.Pagination />
|
||||
</Group>
|
||||
)}
|
||||
/>
|
||||
{/* <SettingPanel radius="md" p="sm">
|
||||
)}
|
||||
/>
|
||||
{/* <SettingPanel radius="md" p="sm">
|
||||
<Group justify="space-between" wrap="wrap">
|
||||
<Text size="sm" fw={700}>
|
||||
当前页总计
|
||||
@@ -755,7 +809,8 @@ export default function PersonReportPage() {
|
||||
</Group>
|
||||
</Group>
|
||||
</SettingPanel> */}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
</SettingContentPanel>
|
||||
|
||||
<DailyReportModal
|
||||
@@ -789,7 +844,9 @@ export default function PersonReportPage() {
|
||||
<Button variant="default" onClick={closeCustomPageSizeModal}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddCustomPageSize}>添加</Button>
|
||||
<Button color="#1874ff" onClick={handleAddCustomPageSize}>
|
||||
添加
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
Reference in New Issue
Block a user