taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.完成生产管理-电量分析静态界面

Browse Source 
2.完成综合管理-人员排班管理交互
3.修改部分逻辑和样式
This commit is contained in:
re-JZzzz
2025-09-22 16:15:50 +08:00
parent 55f2aeea39
commit f0609716bc
11 changed files with 894 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
src/views/integratedManage/attendManage/components/renyuanguanliDialog.vue Normal file
View File

@ -0,0 +1,257 @@
<template>
<!-- 人员排班弹窗 -->
<el-dialog
:model-value="manageAttendDialogVisible"
@update:model-value="handleDialogVisibleChange"
title="管理考勤"
width="500"
>
<el-form :model="attendForm" label-width="100px">
<el-form-item label="选择日期">
<el-date-picker
v-model="attendForm.date"
type="date"
placeholder="选择日期"
style="width: 100%;"
:disabled-date="(time) => time.getTime() < Date.now() - 8.64e7"
/>
</el-form-item>
<!-- 动态排班表单 -->
<div v-for="(item, index) in attendForm.shifts" :key="index" class="dynamic-shift-item">
<el-form-item :label="index === 0 ? '排班设置' : ''" :required="index === 0">
<div class="shift-form-row">
<!-- 排班类型选择 -->
<el-select
v-model="item.type"
placeholder="请选择排班类型"
style="width: 40%; margin-right: 10px;"
>
<el-option
v-for="option in availableShiftOptions"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
<!-- 人员选择 -->
<el-select
v-model="item.personnel"
placeholder="请选择人员"
style="width: 50%; margin-right: 10px;"
multiple
filterable
>
<el-option label="张三" value="1"></el-option>
<el-option label="李四" value="2"></el-option>
<el-option label="王五" value="3"></el-option>
<el-option label="赵六" value="4"></el-option>
<el-option label="钱七" value="5"></el-option>
</el-select>
<!-- 删除按钮 (仅在不是第一个项目时显示) -->
<el-button
v-if="index > 0"
type="danger"
icon="CircleCloseFilled"
circle
@click="removeShiftItem(index)"
></el-button>
</div>
</el-form-item>
</div>
<!-- 添加排班类型按钮 -->
<el-form-item>
<el-button
type="primary"
icon="CirclePlusFilled"
@click="addShiftItem"
:disabled="attendForm.shifts.length >= shiftTypes.length"
>
添加排班类型
</el-button>
<div v-if="attendForm.shifts.length > 0" class="form-tip">
提示：已添加 {{ attendForm.shifts.length }}/{{ shiftTypes.length }} 种排班类型
</div>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确认
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
// 定义组件的props
const props = defineProps({
manageAttendDialogVisible: {
type: Boolean,
default: false
}
});
// 定义组件的emits
const emit = defineEmits<{
'update:manageAttendDialogVisible': [value: boolean];
'confirm': [formData: any];
}>();
// 排班类型列表
const shiftTypes = [
{ label: '早班', value: '早班' },
{ label: '中班', value: '中班' },
{ label: '晚班', value: '晚班' },
{ label: '休息', value: '休息' }
];
// 考勤表单数据
const attendForm = ref({
date: '',
shifts: [
{ type: '', personnel: [] }
]
});
// 获取可用的排班类型选项（排除已添加的类型）
const availableShiftOptions = ref(shiftTypes);
// 监听排班类型变化，更新可用选项
const setupWatchers = () => {
attendForm.value.shifts.forEach((item) => {
watch(() => item.type, (newType) => {
updateAvailableShiftOptions();
});
});
};
// 初始化时设置监听器
setupWatchers();
// 更新可用的排班类型选项
const updateAvailableShiftOptions = () => {
const usedTypes = attendForm.value.shifts
.map(item => item.type)
.filter(type => type !== '');
availableShiftOptions.value = shiftTypes.filter(type =>
!usedTypes.includes(type.value)
);
};
// 添加新的排班类型项
const addShiftItem = () => {
// 检查是否还有可用的排班类型
if (attendForm.value.shifts.length < shiftTypes.length) {
attendForm.value.shifts.push({ type: '', personnel: [] });
// 为新添加的项添加监听器
const newItem = attendForm.value.shifts[attendForm.value.shifts.length - 1];
watch(() => newItem.type, (newType) => {
updateAvailableShiftOptions();
});
}
};
// 删除排班类型项
const removeShiftItem = (index: number) => {
if (attendForm.value.shifts.length > 1) {
attendForm.value.shifts.splice(index, 1);
updateAvailableShiftOptions();
}
};
// 处理取消
const handleCancel = () => {
emit('update:manageAttendDialogVisible', false);
resetForm();
};
// 处理弹窗可见性变化
const handleDialogVisibleChange = (newVisible: boolean) => {
emit('update:manageAttendDialogVisible', newVisible);
if (!newVisible) {
resetForm();
}
};
// 处理确认
const handleConfirm = () => {
// 提交表单数据给父组件
emit('confirm', attendForm.value);
emit('update:manageAttendDialogVisible', false);
resetForm();
};
// 重置表单
const resetForm = () => {
attendForm.value = {
date: '',
shifts: [
{ type: '', personnel: [] }
]
};
updateAvailableShiftOptions();
// 重新设置监听器
setupWatchers();
};
// 监听弹窗显示状态变化，在显示时重置表单
watch(() => props.manageAttendDialogVisible, (newVisible) => {
if (newVisible) {
resetForm();
}
});
</script>
<style scoped>
/* 动态排班表单样式 */
.dynamic-shift-item {
margin-bottom: 15px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 4px;
border: 1px solid #ebeef5;
}
.shift-form-row {
display: flex;
align-items: center;
width: 100%;
}
.form-tip {
color: #909399;
font-size: 12px;
margin-top: 8px;
margin-left: 10px;
}
/* 响应式调整 */
@media screen and (max-width: 768px) {
.shift-form-row {
flex-direction: column;
align-items: stretch;
}
.shift-form-row .el-select {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 8px;
}
.shift-form-row .el-button {
align-self: flex-start;
margin-top: 8px;
}
}
</style>

43
src/views/integratedManage/attendManage/components/renyuanpaiban.vue
View File

@ -26,6 +26,15 @@
<div class="week-day">{{ dateInfo.weekDay }}</div>
</div>
</template>
<template #default="scope">
<div
class="schedule-cell"
:style="{ color: getShiftColor(scope.row[`day${index + 1}`]) }"
@click="handleCellClick(scope.row, {...dateInfo, index}, scope)"
>
{{ scope.row[`day${index + 1}`] }}
</div>
</template>
</el-table-column>
</el-table>
</div>
@ -34,6 +43,10 @@
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
const emit = defineEmits<{
'edit-schedule': [rowData: any, columnData: any, cellEvent: any]
}>();
// 员工列表
const employees = [
{ name: '张三', position: '水泥工', weeklyHours: 142 },
@ -51,6 +64,19 @@ const employees = [
// 排班类型
const shifts = ['早班', '中班', '晚班', '休息'];
// 排班类型与颜色的映射关系
const shiftColorMap = {
'早班': '#67c23a', // 绿色
'中班': '#e6a23c', // 橙色
'晚班': '#409eff', // 蓝色
'休息': '#909399' // 灰色
};
// 根据排班类型获取对应的颜色
const getShiftColor = (shiftType: string) => {
return shiftColorMap[shiftType as keyof typeof shiftColorMap] || '#333';
};
// 获取当前月的日期信息
const currentMonthDates = ref<any[]>([]);
@ -112,6 +138,11 @@ const scheduleData = computed(() => {
onMounted(() => {
currentMonthDates.value = getCurrentMonthDates();
});
// 处理单元格点击事件
const handleCellClick = (rowData: any, columnData: any, cellEvent: any) => {
emit('edit-schedule', rowData, columnData, cellEvent);
};
</script>
<style scoped>
@ -165,6 +196,18 @@ onMounted(() => {
padding: 8px 0;
}
/* 排班单元格样式 */
.schedule-cell {
padding: 8px 0;
cursor: pointer;
transition: all 0.2s ease;
}
.schedule-cell:hover {
background-color: #f5f7fa;
transform: scale(1.05);
}
.date-number {
font-size: 16px;
font-weight: 600;

269
src/views/integratedManage/attendManage/index.vue
View File

@ -1,4 +1,5 @@
<template>
<!-- 考勤管理 -->
<div class="model">
<!-- 标题栏 -->
<el-row :gutter="24">
@ -38,19 +39,24 @@
<infoBox></infoBox>
</el-col>
</el-row>
<!-- 第二行：人员排班和出勤趋势分析 -->
<el-row :gutter="20">
<el-col :span="17">
<div class="analysis-content">
<attendTrend :attendData="attendData"></attendTrend>
<el-card>
<TitleComponent title="人员排班" :fontLevel="2" />
<renyuanpaiban></renyuanpaiban>
<div style="display: flex; justify-content: space-between; align-items: center;">
<TitleComponent title="人员排班" :fontLevel="2" />
<el-button type="primary" @click="manageAttendDialogVisible = true">
管理考勤
</el-button>
</div>
<renyuanpaiban @edit-schedule="handleEditSchedule"></renyuanpaiban>
</el-card>
</div>
</el-col>
<!-- 右侧日历卡片 -->
<el-col :span="7">
<div class="calendar-content">
@ -62,6 +68,40 @@
</div>
</el-col>
</el-row>
<!-- 人员排班弹窗组件 -->
<renyuanguanliDialog
v-model:manageAttendDialogVisible="manageAttendDialogVisible"
@confirm="handleAttendConfirm"
/>
<!-- 编辑排班弹窗 -->
<el-dialog v-model="editScheduleDialogVisible" title="修改排班" width="400">
<el-form :model="editScheduleForm" label-width="100px">
<el-form-item label="员工姓名">
<el-input v-model="editScheduleForm.name" disabled />
</el-form-item>
<el-form-item label="排班日期">
<el-input v-model="editScheduleForm.date" disabled />
</el-form-item>
<el-form-item label="当前排班">
<el-input v-model="editScheduleForm.currentShift" disabled />
</el-form-item>
<el-form-item label="修改为">
<el-select v-model="editScheduleForm.newShift" placeholder="请选择排班类型" style="width: 100%;">
<el-option v-for="option in shiftOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="editScheduleDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirmEditSchedule">
确认修改
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
@ -72,8 +112,69 @@ import approval from '@/views/integratedManage/attendManage/components/leftBox/a
import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
import renyuanguanliDialog from '@/views/integratedManage/attendManage/components/renyuanguanliDialog.vue'
import { ref } from 'vue';
// 人员排班弹窗
const manageAttendDialogVisible = ref(false);
// 处理考勤管理确认
const handleAttendConfirm = (formData: any) => {
console.log('考勤表单数据:', formData);
// 这里可以添加表单提交逻辑
};
// 编辑排班弹窗
const editScheduleDialogVisible = ref(false);
// 编辑排班表单数据
const editScheduleForm = ref({
name: '',
date: '',
currentShift: '',
newShift: ''
});
// 排班类型选项
const shiftOptions = [
{ label: '早班', value: '早班' },
{ label: '中班', value: '中班' },
{ label: '晚班', value: '晚班' },
{ label: '休息', value: '休息' }
];
// 处理编辑排班
const handleEditSchedule = (rowData: any, columnData: any) => {
// 设置表单数据
editScheduleForm.value = {
name: rowData.name,
date: `${columnData.fullDate}`,
currentShift: '',
newShift: ''
};
// 查找当前排班
Object.keys(rowData).forEach(key => {
if (key.startsWith('day')) {
const dayIndex = parseInt(key.replace('day', '')) - 1;
if (dayIndex === columnData.index) {
editScheduleForm.value.currentShift = rowData[key];
editScheduleForm.value.newShift = rowData[key];
}
}
});
// 显示弹窗
editScheduleDialogVisible.value = true;
};
// 确认修改排班
const handleConfirmEditSchedule = () => {
console.log('修改排班数据:', editScheduleForm.value);
// 这里可以添加修改排班的逻辑
editScheduleDialogVisible.value = false;
};
// 出勤数据 - 用于attendTrend组件
const attendData = ref(
{
@ -92,46 +193,46 @@ const attendData = ref(
// Mock数据 - 更新为循环生成所需的数据结构
const totalData = ref({
attendance: {
value: 248,
change: '+8.2%',
isPositive: true,
chartData: [150, 230, 224, 218, 135, 300, 220],
color: '#FF7D00',
title: '总出勤人数',
compareText: '较昨日同期',
chartType: 'bar'
},
rest: {
value: 8,
change: '+8.2%',
isPositive: true,
chartData: [10, 12, 15, 8, 7, 9, 10],
color: '#00C48C',
title: '调休',
compareText: '较上月同期',
chartType: 'line'
},
leave: {
value: 24,
change: '-10%',
isPositive: false,
chartData: [30, 25, 28, 22, 20, 26, 24],
color: '#FF5252',
title: '本月请假',
compareText: '较昨日同期',
chartType: 'line'
},
rate: {
value: '96.8%',
change: '+10%',
isPositive: true,
chartData: [90, 92, 94, 95, 97, 98, 96.8],
color: '#029CD4',
title: '平均出勤率',
compareText: '较昨日同期',
chartType: 'line'
}
attendance: {
value: 248,
change: '+8.2%',
isPositive: true,
chartData: [150, 230, 224, 218, 135, 300, 220],
color: '#FF7D00',
title: '总出勤人数',
compareText: '较昨日同期',
chartType: 'bar'
},
rest: {
value: 8,
change: '+8.2%',
isPositive: true,
chartData: [10, 12, 15, 8, 7, 9, 10],
color: '#00C48C',
title: '调休',
compareText: '较上月同期',
chartType: 'line'
},
leave: {
value: 24,
change: '-10%',
isPositive: false,
chartData: [30, 25, 28, 22, 20, 26, 24],
color: '#FF5252',
title: '本月请假',
compareText: '较昨日同期',
chartType: 'line'
},
rate: {
value: '96.8%',
change: '+10%',
isPositive: true,
chartData: [90, 92, 94, 95, 97, 98, 96.8],
color: '#029CD4',
title: '平均出勤率',
compareText: '较昨日同期',
chartType: 'line'
}
});
// 审批数据 - 用于approval组件
@ -185,47 +286,49 @@ const approvalData = ref([
// 今日出勤数据 - 用于todayAttend组件
const todayAttendData = ref({
attendance: {
count: 150,
icon: '/src/assets/demo/qin.png'
},
late: {
count: 5,
icon: '/src/assets/demo/chi.png'
},
earlyLeave: {
count: 2,
icon: '/src/assets/demo/tui.png'
},
absent: {
count: 8,
icon: '/src/assets/demo/que.png'
}
attendance: {
count: 150,
icon: '/src/assets/demo/qin.png'
},
late: {
count: 5,
icon: '/src/assets/demo/chi.png'
},
earlyLeave: {
count: 2,
icon: '/src/assets/demo/tui.png'
},
absent: {
count: 8,
icon: '/src/assets/demo/que.png'
}
});
// 日历数据 - 用于calendar组件
const calendarData = ref({
// 初始化当前日期
today: new Date(),
currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
selectedDate: new Date(2025, 8, 27),
// 模拟考勤数据
attendanceData: {
2025: {
9: {
1: 'normal',
4: 'late',
8: 'absent',
10: 'leave',
15: 'normal',
20: 'normal',
25: 'late',
27: 'normal'
}
// 初始化当前日期
today: new Date(),
currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
selectedDate: new Date(2025, 8, 27),
// 模拟考勤数据
attendanceData: {
2025: {
9: {
1: 'normal',
4: 'late',
8: 'absent',
10: 'leave',
15: 'normal',
20: 'normal',
25: 'late',
27: 'normal'
}
}
}
}
});
</script>
<style scoped lang="scss">
@ -260,11 +363,11 @@ const calendarData = ref({
height: 100%;
}
.calendar-content .el-card > * {
.calendar-content .el-card>* {
margin-bottom: 16px;
}
.calendar-content .el-card > *:last-child {
.calendar-content .el-card>*:last-child {
margin-bottom: 0;
flex: 1;
}
@ -300,9 +403,9 @@ const calendarData = ref({
.analysis-content {
gap: 16px;
}
/* 日历卡片内组件间距 */
.calendar-content .el-card > * {
.calendar-content .el-card>* {
margin-bottom: 12px;
}
}