Web/cn-rdms-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(加班申请、工作报告、我的绩效): 重构页面样式、修复一系列bug、对不合理的地方进行调整。

Browse Source
This commit is contained in:
dk
2026-06-22 23:07:21 +08:00
parent b1d52b852f
commit 632c123112
30 changed files with 1574 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/views/personal-center/my-performance/modules/performance-template-dialog.vue
View File

@@ -9,9 +9,10 @@ import {
uploadPerformanceTemplate
} from '@/service/api';
import { useUIPaginatedTable } from '@/hooks/common/table';
import { useAuth } from '@/hooks/business/auth';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessTableActionCell, { type BusinessTableAction } from '@/components/custom/business-table-action-cell';
import { formatDateTime } from './performance-shared';
import { PerformancePermission, formatDateTime } from './performance-shared';
defineOptions({ name: 'PerformanceTemplateDialog' });
@@ -22,6 +23,9 @@ const emit = defineEmits<{
}>();
type TemplatePageResponse = Awaited<ReturnType<typeof fetchPerformanceTemplatePage>>;
const { hasAuth } = useAuth();
const canQueryTemplate = computed(() => hasAuth(PerformancePermission.TemplateQuery));
const canUpdateTemplate = computed(() => hasAuth(PerformancePermission.TemplateUpdate));
const searchParams = reactive<Api.Performance.Template.SearchParams>({
pageNo: 1,
@@ -79,7 +83,7 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
prop: 'activeFlag',
label: '状态',
width: 100,
formatter: row => <ElTag type={row.activeFlag ? 'success' : 'info'}>{row.activeFlag ? '当前' : '历史'}</ElTag>
formatter: row => <ElTag type={row.activeFlag ? 'success' : 'info'}>{row.activeFlag ? '已启用' : '已禁用'}</ElTag>
},
{ prop: 'uploadUserName', label: '上传人', width: 110 },
{
@@ -101,7 +105,14 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
const selectedFileName = computed(() => uploadForm.file?.name || '');
async function loadTemplatePage(page = 1) {
if (!canQueryTemplate.value) return;
await getDataByPage(page);
}
function getTemplateActions(row: Api.Performance.Template.Template): BusinessTableAction[] {
if (!canUpdateTemplate.value) return [];
return [
{
key: 'activate',
@@ -125,6 +136,8 @@ function handleFileChange(file: UploadFile, _files: UploadFiles) {
}
async function handleUploadTemplate() {
if (!canUpdateTemplate.value) return;
if (!uploadForm.file) {
window.$message?.warning('请选择 Excel 模板文件');
return;
@@ -159,11 +172,13 @@ async function handleUploadTemplate() {
activeFlag: true,
file: null
});
await getDataByPage(1);
await loadTemplatePage(1);
emit('updated');
}
async function handleActivate(row: Api.Performance.Template.Template) {
if (!canUpdateTemplate.value) return;
activatingId.value = row.id;
const { error } = await activatePerformanceTemplate(row.id);
activatingId.value = '';
@@ -171,13 +186,13 @@ async function handleActivate(row: Api.Performance.Template.Template) {
if (error) return;
window.$message?.success('绩效模板已启用');
await getDataByPage(searchParams.pageNo ?? 1);
await loadTemplatePage(searchParams.pageNo ?? 1);
emit('updated');
}
watch(visible, isVisible => {
if (isVisible) {
getDataByPage(1);
if (isVisible && canQueryTemplate.value) {
loadTemplatePage(1);
}
});
</script>
@@ -192,32 +207,59 @@ watch(visible, isVisible => {
max-body-height="76vh"
>
<div class="performance-template-dialog">
<ElCard shadow="never">
<ElCard v-if="canUpdateTemplate" shadow="never">
<ElForm :model="uploadForm" label-position="top" class="performance-template-dialog__upload-form">
<div class="performance-template-dialog__upload-grid">
<ElFormItem label="模板名称" class="performance-template-dialog__field">
<ElInput v-model="uploadForm.templateName" placeholder="请输入模板名称" />
</ElFormItem>
<ElFormItem label="Excel 文件" class="performance-template-dialog__field">
<div class="performance-template-dialog__file-picker">
<ElFormItem class="performance-template-dialog__field">
<template #label>
<div class="performance-template-dialog__label">
<span>Excel 文件</span>
</div>
</template>
<div class="performance-template-dialog__file-row">
<ElUpload
class="performance-template-dialog__upload-trigger"
:auto-upload="false"
:show-file-list="false"
accept=".xlsx,.xls"
:limit="1"
:on-change="handleFileChange"
>
<ElButton plain>
<ElButton plain class="performance-template-dialog__upload-button">
<template #icon>
<icon-mdi-upload class="text-icon" />
</template>
选择文件
</ElButton>
</ElUpload>
<div class="performance-template-dialog__file-hint">
{{ selectedFileName || '支持 .xlsx、.xls，选择后会在这里显示文件名' }}
<div class="performance-template-dialog__file-name-wrapper">
<ElTooltip
:disabled="!selectedFileName"
:content="selectedFileName"
placement="top"
effect="light"
popper-class="performance-template-dialog__file-tooltip"
>
<div
class="performance-template-dialog__file-name"
:class="{ 'performance-template-dialog__file-name--placeholder': !selectedFileName }"
>
<span class="performance-template-dialog__file-name-text">
{{ selectedFileName || '未选择文件' }}
</span>
</div>
</ElTooltip>
</div>
<ElTooltip placement="top" effect="light">
<template #content>支持 .xlsx、.xls，选择后会在这里显示文件名</template>
<button type="button" class="performance-template-dialog__hint-button" aria-label="Excel 文件说明">
<icon-mdi-information-outline />
</button>
</ElTooltip>
</div>
</ElFormItem>
@@ -245,12 +287,12 @@ watch(visible, isVisible => {
</ElForm>
</ElCard>
<ElCard shadow="never" body-class="business-table-card-body">
<ElCard v-if="canQueryTemplate" shadow="never" body-class="business-table-card-body">
<template #header>
<div class="flex items-center justify-between gap-12px">
<p class="text-16px font-600">模板列表</p>
<ElSpace wrap alignment="center">
<ElButton @click="getDataByPage()">
<ElButton @click="loadTemplatePage(searchParams.pageNo ?? 1)">
<template #icon>
<icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
</template>
@@ -279,6 +321,8 @@ watch(visible, isVisible => {
/>
</div>
</ElCard>
<ElEmpty v-if="!canQueryTemplate && !canUpdateTemplate" :image-size="80" description="当前账号没有绩效模板权限" />
</div>
</BusinessFormDialog>
</template>
@@ -304,38 +348,122 @@ watch(visible, isVisible => {
margin-bottom: 0;
}
.performance-template-dialog__field :deep(.el-form-item__label) {
display: inline-flex;
align-items: center;
min-height: 22px;
padding-bottom: 6px;
line-height: 22px;
}
.performance-template-dialog__field :deep(.el-form-item__content) {
min-height: 36px;
align-items: stretch;
width: 100%;
}
.performance-template-dialog__field--full {
grid-column: 1 / -1;
}
.performance-template-dialog__file-picker {
display: grid;
gap: 10px;
.performance-template-dialog__label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.performance-template-dialog__file-hint {
min-height: 40px;
.performance-template-dialog__file-row {
display: grid;
grid-template-columns: 112px minmax(0, 1fr) 24px;
align-items: stretch;
gap: 6px;
min-height: 36px;
width: 100% !important;
min-width: 0 !important;
}
.performance-template-dialog__upload-trigger {
display: block;
}
.performance-template-dialog__upload-trigger :deep(.el-upload) {
display: block;
}
.performance-template-dialog__upload-button {
width: 100%;
height: 36px;
padding: 0 12px;
}
.performance-template-dialog__file-name-wrapper {
display: block;
width: 100%;
min-width: 0;
flex: 1 1 auto;
}
.performance-template-dialog__file-name-wrapper :deep(.el-tooltip__trigger) {
display: block;
width: 100% !important;
min-width: 0 !important;
}
.performance-template-dialog__file-name {
display: flex;
align-items: center;
min-width: 0;
width: 100% !important;
height: 36px;
padding: 0 12px;
overflow: hidden;
border: 1px dashed var(--el-border-color);
border: 1px solid var(--el-border-color);
border-radius: 8px;
background: var(--el-fill-color-light);
color: var(--el-text-color-secondary);
font-size: 12px;
line-height: 1.5;
background: var(--el-fill-color-blank);
color: var(--el-text-color-regular);
font-size: 13px;
}
.performance-template-dialog__file-name-text {
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.performance-template-dialog__file-name--placeholder {
color: var(--el-text-color-placeholder);
}
.performance-template-dialog__hint-button {
width: 24px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--el-text-color-secondary);
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.performance-template-dialog__hint-button:hover {
background: var(--el-fill-color-light);
color: var(--el-color-primary);
}
.performance-template-dialog__switch-field {
align-self: stretch;
}
.performance-template-dialog__switch-box {
height: 100%;
min-height: 72px;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
@@ -346,6 +474,7 @@ watch(visible, isVisible => {
background: var(--el-fill-color-blank);
color: var(--el-text-color-regular);
font-size: 13px;
line-height: 1;
}
.performance-template-dialog__actions {
@@ -378,7 +507,7 @@ watch(visible, isVisible => {
}
.performance-template-dialog__switch-box {
min-height: 56px;
height: 36px;
}
}
</style>