fix: 精简考核删除弹窗并恢复背景模糊
This commit is contained in:
chenpei
parent
c7d1a31a72
commit
191b897b58
@ -218,8 +218,10 @@ describe('PerformanceSurveyAdminConfig', () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: '删除岗位' }))
|
||||
const dialog = await screen.findByRole('alertdialog', { name: '删除岗位“品牌设计师”？' })
|
||||
const dialogQueries = within(dialog)
|
||||
expect(dialog).toHaveTextContent('当前仍有 6 人属于该岗位')
|
||||
expect(dialog).toHaveTextContent('历史调研记录会保留')
|
||||
expect(dialog).toHaveTextContent('6 人将变为待分配')
|
||||
expect(dialog).not.toHaveTextContent('历史调研记录会保留')
|
||||
expect(dialog).not.toHaveTextContent('原因将记录在管理操作日志中')
|
||||
expect(dialog.parentElement).toHaveClass('backdrop-blur-[2px]')
|
||||
expect(dialogQueries.getByRole('button', { name: '删除岗位' })).toBeDisabled()
|
||||
|
||||
fireEvent.change(dialogQueries.getByLabelText(/删除原因/), { target: { value: '岗位合并' } })
|
||||
@ -426,7 +428,11 @@ describe('PerformanceSurveyAdminConfig', () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: '删除模板' }))
|
||||
const dialog = await screen.findByRole('alertdialog', { name: '删除模板“视觉案例评分”？' })
|
||||
const dialogQueries = within(dialog)
|
||||
expect(dialog).toHaveTextContent('历史调研中的模板和评分数据会继续保留')
|
||||
expect(dialog).not.toHaveAttribute('aria-describedby')
|
||||
expect(dialog).not.toHaveTextContent('历史调研中的模板和评分数据会继续保留')
|
||||
expect(dialog).not.toHaveTextContent('如果岗位仍在使用该模板')
|
||||
expect(dialog).not.toHaveTextContent('原因将记录在管理操作日志中')
|
||||
expect(dialog.parentElement).toHaveClass('backdrop-blur-[2px]')
|
||||
fireEvent.change(dialogQueries.getByLabelText(/删除原因/), { target: { value: '模板重复' } })
|
||||
fireEvent.click(dialogQueries.getByRole('button', { name: '删除模板' }))
|
||||
|
||||
|
||||
@ -980,24 +980,19 @@ function PositionConfigWorkspace({
|
||||
|
||||
const removeGroup = async () => {
|
||||
if (!selected) return
|
||||
const memberWarning = selected.memberCount > 0
|
||||
? `当前仍有 ${selected.memberCount} 人属于该岗位，删除后这些人员会变为待分配。`
|
||||
: '该岗位当前没有人员。'
|
||||
const impactMessages = [
|
||||
selected.memberCount > 0 ? `${selected.memberCount} 人将变为待分配。` : '',
|
||||
dirty ? '未保存的修改会一并丢失。' : '',
|
||||
].filter(Boolean)
|
||||
await confirmAction({
|
||||
title: `删除岗位“${selected.name}”？`,
|
||||
description: (
|
||||
<div className="grid gap-1">
|
||||
<p>{memberWarning}</p>
|
||||
<p>历史调研记录会保留，但该岗位将不再出现在当前管理列表中。</p>
|
||||
{dirty && <p className="font-semibold text-[#93000a]">当前未保存的岗位修改也会同时放弃。</p>}
|
||||
</div>
|
||||
),
|
||||
description: impactMessages.length > 0 ? impactMessages.join(' ') : undefined,
|
||||
confirmLabel: '删除岗位',
|
||||
loadingLabel: '删除中...',
|
||||
tone: 'danger',
|
||||
reason: {
|
||||
label: '删除原因',
|
||||
placeholder: '例如：岗位合并、岗位不再参与考核',
|
||||
placeholder: '简要说明原因',
|
||||
required: true,
|
||||
},
|
||||
action: async (reason) => {
|
||||
@ -1373,19 +1368,13 @@ function TemplateConfigWorkspace({
|
||||
const displayName = version?.definition.name || selectedTemplate.versions[0]?.definition.name || selectedTemplate.name
|
||||
await confirmAction({
|
||||
title: `删除模板“${displayName}”？`,
|
||||
description: (
|
||||
<div className="grid gap-1">
|
||||
<p>历史调研中的模板和评分数据会继续保留。</p>
|
||||
<p>如果岗位仍在使用该模板，需要先从岗位考核项中移除后才能删除。</p>
|
||||
{dirty && <p className="font-semibold text-[#93000a]">当前未保存的模板修改也会同时放弃。</p>}
|
||||
</div>
|
||||
),
|
||||
description: dirty ? '未保存的修改会一并丢失。' : undefined,
|
||||
confirmLabel: '删除模板',
|
||||
loadingLabel: '删除中...',
|
||||
tone: 'danger',
|
||||
reason: {
|
||||
label: '删除原因',
|
||||
placeholder: '例如：模板重复、考核规则已停用',
|
||||
placeholder: '简要说明原因',
|
||||
required: true,
|
||||
},
|
||||
action: async (reason) => {
|
||||
|
||||
@ -13,7 +13,7 @@ import { createPortal } from 'react-dom'
|
||||
|
||||
export type ConfirmActionOptions = {
|
||||
title: string
|
||||
description: ReactNode
|
||||
description?: ReactNode
|
||||
confirmLabel?: string
|
||||
loadingLabel?: string
|
||||
cancelLabel?: string
|
||||
@ -148,7 +148,7 @@ export function ConfirmActionDialog({
|
||||
return createPortal(
|
||||
<div
|
||||
ref={backdropRef}
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4"
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 p-4 backdrop-blur-[2px]"
|
||||
onMouseDown={(event) => {
|
||||
if (!loading && event.target === event.currentTarget) onCancel()
|
||||
}}
|
||||
@ -158,7 +158,7 @@ export function ConfirmActionDialog({
|
||||
role={tone === 'danger' ? 'alertdialog' : 'dialog'}
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
aria-describedby={descriptionId}
|
||||
aria-describedby={description ? descriptionId : undefined}
|
||||
aria-busy={loading}
|
||||
tabIndex={-1}
|
||||
onKeyDown={handleKeyDown}
|
||||
@ -188,9 +188,11 @@ export function ConfirmActionDialog({
|
||||
<h2 id={titleId} className="text-[16px] font-bold leading-6">
|
||||
{title}
|
||||
</h2>
|
||||
<div id={descriptionId} className="mt-1 text-[13px] leading-6 text-[#5f5e5e]">
|
||||
{description}
|
||||
</div>
|
||||
{description && (
|
||||
<div id={descriptionId} className="mt-1 text-[13px] leading-5 text-[#5f5e5e]">
|
||||
{description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -209,14 +211,16 @@ export function ConfirmActionDialog({
|
||||
required={reasonRequired}
|
||||
disabled={loading}
|
||||
maxLength={500}
|
||||
rows={3}
|
||||
rows={2}
|
||||
placeholder={reason.placeholder || '请填写操作原因'}
|
||||
className="w-full resize-y rounded border border-[#c2c6d8] px-3 py-2 text-[13px] font-normal leading-5 text-[#1a1c1c] outline-none placeholder:text-[#676767] focus:border-[#0050cb] focus:ring-2 focus:ring-[#dbe6ff]"
|
||||
/>
|
||||
</label>
|
||||
<p className="mt-1.5 text-[12px] leading-5 text-[#5f5e5e]">
|
||||
{reason.helperText || '原因将记录在管理操作日志中。'}
|
||||
</p>
|
||||
{reason.helperText && (
|
||||
<p className="mt-1.5 text-[12px] leading-5 text-[#5f5e5e]">
|
||||
{reason.helperText}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user