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

feat(我的绩效): 开发我的绩效功能。

Browse Source 
fix(加班申请、工作报告): 重构加班申请在审批时的样式，工作报告在新增时的对话框、报告详情页的样式。
This commit is contained in:
dk
2026-06-21 18:22:44 +08:00
parent cd64cf42cc
commit 9a5845708d
35 changed files with 4211 additions and 924 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/personal-center/overtime-application/index.vue
View File

@@ -179,7 +179,7 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
</ElTag>
)
},
{ prop: 'approverName', label: '审核人', minWidth: 80, showOverflowTooltip: true },
{ prop: 'approverName', label: '审批人', minWidth: 80, showOverflowTooltip: true },
{
prop: 'submitTime',
label: '提交时间',
@@ -188,7 +188,7 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
},
{
prop: 'approvalTime',
label: '审核时间',
label: '审批时间',
minWidth: 150,
formatter: row => formatOvertimeDateTime(row.approvalTime)
},

119
src/views/personal-center/overtime-application/modules/overtime-application-action-dialog.vue
View File

@@ -1,119 +0,0 @@
<script setup lang="ts">
import { computed, nextTick, reactive, watch } from 'vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
defineOptions({ name: 'OvertimeApplicationActionDialog' });
type ActionType = 'approve' | 'reject';
interface Props {
actionType: ActionType;
loading?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
loading: false
});
const emit = defineEmits<{
submit: [reason: string | null];
}>();
const visible = defineModel<boolean>('visible', {
default: false
});
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const model = reactive({
reason: ''
});
const title = computed(() => {
const map: Record<ActionType, string> = {
approve: '通过加班申请',
reject: '退回加班申请'
};
return map[props.actionType];
});
const reasonLabel = computed(() => {
const map: Record<ActionType, string> = {
approve: '审核意见',
reject: '退回原因'
};
return map[props.actionType];
});
const reasonRequired = computed(() => props.actionType === 'reject');
const reasonPlaceholder = computed(() => {
if (reasonRequired.value) {
return `请输入${reasonLabel.value}`;
}
return '可填写审核意见';
});
const rules = computed(() => ({
reason: reasonRequired.value
? [
createRequiredRule(`请输入${reasonLabel.value}`),
{
validator: (_rule, value: string, callback) => {
if (!value?.trim()) {
callback(new Error(`请输入${reasonLabel.value}`));
return;
}
callback();
},
trigger: 'blur'
}
]
: []
}));
async function handleSubmit() {
await validate();
emit('submit', model.reason.trim() || null);
}
watch(
() => visible.value,
async value => {
if (value) {
model.reason = '';
await nextTick();
formRef.value?.clearValidate();
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
:title="title"
preset="sm"
:confirm-loading="props.loading"
@confirm="handleSubmit"
>
<ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
<ElFormItem :label="reasonLabel" prop="reason">
<ElInput
v-model="model.reason"
type="textarea"
:rows="5"
maxlength="1000"
show-word-limit
:placeholder="reasonPlaceholder"
/>
</ElFormItem>
</ElForm>
</BusinessFormDialog>
</template>

205
src/views/personal-center/overtime-application/modules/overtime-application-batch-detail-dialog.vue
View File

@@ -1,15 +1,16 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { fetchGetOvertimeApplicationDetail } from '@/service/api';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import { formatOvertimeDate, formatOvertimeDateTime } from './overtime-application-shared';
import IconMdiCheckCircleOutline from '~icons/mdi/check-circle-outline';
import IconMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
import IconMdiChevronLeft from '~icons/mdi/chevron-left';
import IconMdiChevronRight from '~icons/mdi/chevron-right';
defineOptions({ name: 'OvertimeApplicationBatchDetailDialog' });
type ActionType = 'approve' | 'reject';
interface Props {
/** 选中的加班申请 id 列表（原始 id） */
selectedIds: string[];
@@ -23,8 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
});
const emit = defineEmits<{
approve: [];
reject: [];
submit: [payload: { actionType: ActionType; reason: string | null }];
}>();
const visible = defineModel<boolean>('visible', {
@@ -34,6 +34,13 @@ const visible = defineModel<boolean>('visible', {
const currentIndex = ref(0);
const detailData = ref<Api.OvertimeApplication.OvertimeApplication | null>(null);
const detailLoading = ref(false);
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const approvalModel = reactive({
conclusion: 'approve' as ActionType,
opinion: ''
});
const currentId = computed(() => props.selectedIds[currentIndex.value] ?? null);
@@ -74,12 +81,64 @@ function goNext() {
loadDetail();
}
const opinionLabel = computed(() => (approvalModel.conclusion === 'reject' ? '退回原因' : '审批意见'));
const opinionRequired = computed(() => approvalModel.conclusion === 'reject');
const opinionPlaceholder = computed(() => (opinionRequired.value ? `请输入${opinionLabel.value}` : '可填写审批意见'));
const rules = computed(() => ({
opinion: opinionRequired.value
? [
createRequiredRule(`请输入${opinionLabel.value}`),
{
validator: (_rule, value: string, callback) => {
if (!value?.trim()) {
callback(new Error(`请输入${opinionLabel.value}`));
return;
}
callback();
},
trigger: 'blur'
}
]
: []
}));
function resetApprovalForm() {
approvalModel.conclusion = 'approve';
approvalModel.opinion = '';
nextTick(() => {
formRef.value?.clearValidate();
});
}
watch(opinionRequired, async () => {
if (!visible.value) return;
await nextTick();
formRef.value?.clearValidate('opinion');
});
async function handleSubmit() {
try {
await validate();
} catch {
return;
}
emit('submit', {
actionType: approvalModel.conclusion,
reason: approvalModel.opinion.trim() || null
});
}
watch(
() => visible.value,
value => {
if (value) {
currentIndex.value = 0;
loadDetail();
resetApprovalForm();
} else {
detailData.value = null;
}
@@ -122,27 +181,75 @@ watch(
</ElDescriptions>
<ElEmpty v-else description="未获取到加班申请详情" />
<div class="batch-detail__approval-form">
<div class="audit-field">
<label>审批结论</label>
<div class="audit-conclusion">
<button
type="button"
class="conclusion-btn"
:class="{
active: approvalModel.conclusion === 'approve',
pass: approvalModel.conclusion === 'approve'
}"
@click="approvalModel.conclusion = 'approve'"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
<path
d="M5 8.5L7 10.5L11 6"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
通过
</button>
<button
type="button"
class="conclusion-btn"
:class="{
active: approvalModel.conclusion === 'reject',
reject: approvalModel.conclusion === 'reject'
}"
@click="approvalModel.conclusion = 'reject'"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
<path d="M6 6L10 10M10 6L6 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
退回
</button>
</div>
</div>
<ElForm ref="formRef" :model="approvalModel" :rules="rules" label-position="top" :validate-on-rule-change="false">
<ElFormItem :label="opinionLabel" prop="opinion">
<ElInput
v-model="approvalModel.opinion"
type="textarea"
:rows="5"
maxlength="1000"
show-word-limit
:placeholder="opinionPlaceholder"
/>
</ElFormItem>
</ElForm>
</div>
<template #footer>
<div class="batch-detail__footer">
<span class="batch-detail__footer-hint">将对全部 {{ total }} 项统一执行操作</span>
<div class="batch-detail__footer-actions">
<ElButton @click="visible = false">取消</ElButton>
<ElButton
class="batch-detail__approve-btn"
type="success"
type="primary"
:loading="props.actionLoading"
:disabled="props.actionLoading || !detailData"
@click="emit('approve')"
@click="handleSubmit"
>
<template #icon>
<IconMdiCheckCircleOutline />
</template>
通过
</ElButton>
<ElButton type="danger" plain :disabled="props.actionLoading || !detailData" @click="emit('reject')">
<template #icon>
<IconMdiCloseCircleOutline />
</template>
退回
确认提交
</ElButton>
</div>
</div>
@@ -208,13 +315,61 @@ watch(
gap: 12px;
}
.batch-detail__approve-btn {
--el-button-bg-color: #0f766e;
--el-button-border-color: #0f766e;
--el-button-hover-bg-color: #115e59;
--el-button-hover-border-color: #115e59;
--el-button-active-bg-color: #134e4a;
--el-button-active-border-color: #134e4a;
.batch-detail__approval-form {
display: grid;
gap: 18px;
margin-top: 16px;
}
.audit-field {
display: grid;
gap: 8px;
}
.audit-field label {
color: #475467;
font-size: 13px;
font-weight: 800;
}
.audit-conclusion {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.conclusion-btn {
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #d8e0e8;
border-radius: 8px;
background: #fff;
color: #475467;
font: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
transition: all 0.18s ease;
}
.conclusion-btn:hover {
border-color: var(--el-color-primary);
color: var(--el-color-primary);
}
.conclusion-btn.active.pass {
border-color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
}
.conclusion-btn.active.reject {
border-color: #dc2626;
background: #fef2f2;
color: #dc2626;
}
:deep(.overtime-application-detail-dialog__descriptions .el-descriptions__cell) {

214
src/views/personal-center/overtime-application/modules/overtime-application-detail-dialog.vue
View File

@@ -1,13 +1,14 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { fetchGetOvertimeApplicationDetail } from '@/service/api';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import { formatOvertimeDate, formatOvertimeDateTime } from './overtime-application-shared';
import IconMdiCheckCircleOutline from '~icons/mdi/check-circle-outline';
import IconMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
defineOptions({ name: 'OvertimeApplicationDetailDialog' });
type ActionType = 'approve' | 'reject';
interface Props {
rowData?: Api.OvertimeApplication.OvertimeApplication | null;
showApprovalActions?: boolean;
@@ -20,8 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
});
const emit = defineEmits<{
approve: [];
reject: [];
submit: [payload: { actionType: ActionType; reason: string | null }];
}>();
const visible = defineModel<boolean>('visible', {
@@ -30,6 +30,36 @@ const visible = defineModel<boolean>('visible', {
const loading = ref(false);
const detailData = ref<Api.OvertimeApplication.OvertimeApplication | null>(null);
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const approvalModel = reactive({
conclusion: 'approve' as ActionType,
opinion: ''
});
const opinionLabel = computed(() => (approvalModel.conclusion === 'reject' ? '退回原因' : '审批意见'));
const opinionRequired = computed(() => approvalModel.conclusion === 'reject');
const opinionPlaceholder = computed(() => (opinionRequired.value ? `请输入${opinionLabel.value}` : '可填写审批意见'));
const rules = computed(() => ({
opinion: opinionRequired.value
? [
createRequiredRule(`请输入${opinionLabel.value}`),
{
validator: (_rule, value: string, callback) => {
if (!value?.trim()) {
callback(new Error(`请输入${opinionLabel.value}`));
return;
}
callback();
},
trigger: 'blur'
}
]
: []
}));
async function loadDetail() {
if (!props.rowData?.id) {
@@ -44,24 +74,47 @@ async function loadDetail() {
detailData.value = error || !data ? props.rowData : data;
}
function resetApprovalForm() {
approvalModel.conclusion = 'approve';
approvalModel.opinion = '';
nextTick(() => {
formRef.value?.clearValidate();
});
}
watch(opinionRequired, async () => {
if (!visible.value || !props.showApprovalActions) return;
await nextTick();
formRef.value?.clearValidate('opinion');
});
async function handleSubmit() {
try {
await validate();
} catch {
return;
}
emit('submit', {
actionType: approvalModel.conclusion,
reason: approvalModel.opinion.trim() || null
});
}
watch(
() => visible.value,
value => {
if (value) {
loadDetail();
resetApprovalForm();
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
title="加班申请详情"
preset="md"
:loading="loading"
:show-footer="props.showApprovalActions"
>
<BusinessFormDialog v-model="visible" title="加班申请详情" preset="md" :loading="loading">
<ElDescriptions v-if="detailData" class="overtime-application-detail-dialog__descriptions" :column="2" border>
<ElDescriptionsItem label="申请人" label-class-name="overtime-application-detail-dialog__label">
{{ detailData.applicantName }}
@@ -84,25 +137,74 @@ watch(
</ElDescriptions>
<ElEmpty v-else description="未获取到加班申请详情" />
<div v-if="props.showApprovalActions" class="overtime-application-detail-dialog__approval-form">
<div class="audit-field">
<label>审批结论</label>
<div class="audit-conclusion">
<button
type="button"
class="conclusion-btn"
:class="{
active: approvalModel.conclusion === 'approve',
pass: approvalModel.conclusion === 'approve'
}"
@click="approvalModel.conclusion = 'approve'"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
<path
d="M5 8.5L7 10.5L11 6"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
通过
</button>
<button
type="button"
class="conclusion-btn"
:class="{
active: approvalModel.conclusion === 'reject',
reject: approvalModel.conclusion === 'reject'
}"
@click="approvalModel.conclusion = 'reject'"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
<path d="M6 6L10 10M10 6L6 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
退回
</button>
</div>
</div>
<ElForm ref="formRef" :model="approvalModel" :rules="rules" label-position="top" :validate-on-rule-change="false">
<ElFormItem :label="opinionLabel" prop="opinion">
<ElInput
v-model="approvalModel.opinion"
type="textarea"
:rows="5"
maxlength="1000"
show-word-limit
:placeholder="opinionPlaceholder"
/>
</ElFormItem>
</ElForm>
</div>
<template #footer>
<div class="overtime-application-detail-dialog__footer">
<ElButton @click="visible = false">取消</ElButton>
<ElButton
class="overtime-application-detail-dialog__approve-btn"
type="success"
v-if="props.showApprovalActions"
type="primary"
:loading="props.actionLoading"
:disabled="props.actionLoading || !detailData"
@click="emit('approve')"
@click="handleSubmit"
>
<template #icon>
<IconMdiCheckCircleOutline />
</template>
通过
</ElButton>
<ElButton type="danger" plain :disabled="props.actionLoading || !detailData" @click="emit('reject')">
<template #icon>
<IconMdiCloseCircleOutline />
</template>
退回
确认提交
</ElButton>
</div>
</template>
@@ -116,13 +218,61 @@ watch(
gap: 12px;
}
.overtime-application-detail-dialog__approve-btn {
--el-button-bg-color: #0f766e;
--el-button-border-color: #0f766e;
--el-button-hover-bg-color: #115e59;
--el-button-hover-border-color: #115e59;
--el-button-active-bg-color: #134e4a;
--el-button-active-border-color: #134e4a;
.overtime-application-detail-dialog__approval-form {
display: grid;
gap: 18px;
margin-top: 16px;
}
.audit-field {
display: grid;
gap: 8px;
}
.audit-field label {
color: #475467;
font-size: 13px;
font-weight: 800;
}
.audit-conclusion {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.conclusion-btn {
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #d8e0e8;
border-radius: 8px;
background: #fff;
color: #475467;
font: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
transition: all 0.18s ease;
}
.conclusion-btn:hover {
border-color: var(--el-color-primary);
color: var(--el-color-primary);
}
.conclusion-btn.active.pass {
border-color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
}
.conclusion-btn.active.reject {
border-color: #dc2626;
background: #fef2f2;
color: #dc2626;
}
:deep(.overtime-application-detail-dialog__descriptions .el-descriptions__cell) {

4
src/views/personal-center/overtime-application/modules/overtime-application-operate-dialog.vue
View File

@@ -80,7 +80,7 @@ const rules = computed(
trigger: 'blur'
}
],
approverId: [createRequiredRule('请选择审核人')]
approverId: [createRequiredRule('请选择审批人')]
}) satisfies Record<keyof Api.OvertimeApplication.SaveOvertimeApplicationParams, App.Global.FormRule[]>
);
@@ -189,7 +189,7 @@ watch(
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem label="审核人" prop="approverId">
<ElFormItem label="审批人" prop="approverId">
<ElInput
class="overtime-application-operate-dialog__readonly-input"
:model-value="approverName"

4
src/views/personal-center/overtime-application/modules/overtime-application-search.vue
View File

@@ -95,9 +95,9 @@ const fields = computed<SearchField[]>(() => [
},
{
key: 'approverName',
label: '审核人',
label: '审批人',
type: 'input',
placeholder: '请输入审核人'
placeholder: '请输入审批人'
}
]);