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 20:47:13 +08:00
parent bc158f9bd5
commit 07c5dcde11
12 changed files with 566 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/renyuan/paiban/index.ts Normal file
View File

@ -0,0 +1,26 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
/**
* 查询排班人员列表
* @param deptId
*/
export function getPaibanRenYuanList(deptId:string | number): AxiosPromise<any> {
return request({
url: `/system/user/list/dept/`+deptId,
method: 'get',
});
}
/**
* 查询运维-人员排班列表
* @param deptId
*/
export function getPaibanRiLiList(deptId:string | number): AxiosPromise<any> {
return request({
url: `/ops/personnel/scheduling/getRiLiList/`+deptId,
method: 'get',
});
}

0
src/api/renyuan/paiban/types.ts Normal file
View File

63
src/api/renyuan/schedulingDate/index.ts Normal file
View File

@ -0,0 +1,63 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { SchedulingDateVO, SchedulingDateForm, SchedulingDateQuery } from '@/api/renyuan/schedulingDate/types';
/**
* 查询运维-排班时间类型列表
* @param query
* @returns {*}
*/
export const listSchedulingDate = (query?: SchedulingDateQuery): AxiosPromise<SchedulingDateVO[]> => {
return request({
url: '/ops/personnel/schedulingDate/list',
method: 'get',
params: query
});
};
/**
* 查询运维-排班时间类型详细
* @param id
*/
export const getSchedulingDate = (id: string | number): AxiosPromise<SchedulingDateVO> => {
return request({
url: '/ops/personnel/schedulingDate/' + id,
method: 'get'
});
};
/**
* 新增运维-排班时间类型
* @param data
*/
export const addSchedulingDate = (data: SchedulingDateForm) => {
return request({
url: '/ops/personnel/schedulingDate',
method: 'post',
data: data
});
};
/**
* 修改运维-排班时间类型
* @param data
*/
export const updateSchedulingDate = (data: SchedulingDateForm) => {
return request({
url: '/ops/personnel/schedulingDate',
method: 'put',
data: data
});
};
/**
* 删除运维-排班时间类型
* @param id
*/
export const delSchedulingDate = (id: string | number | Array<string | number>) => {
return request({
url: '/ops/personnel/schedulingDate/' + id,
method: 'delete'
});
};

86
src/api/renyuan/schedulingDate/types.ts Normal file
View File

@ -0,0 +1,86 @@
export interface SchedulingDateVO {
/**
* id
*/
id: string | number;
/**
* 排班名称
*/
schedulingName: string;
/**
* 开始时间
*/
startTime: string;
/**
* 结束时间
*/
endTime: string;
/**
* 部门ID
*/
projectId?: string | number;
}
export interface SchedulingDateForm extends BaseEntity {
/**
* id
*/
id?: string | number;
/**
* 排班名称
*/
schedulingName?: string;
/**
* 开始时间
*/
startTime?: string;
/**
* 结束时间
*/
endTime?: string;
/**
* 部门ID
*/
projectId?: string | number;
}
export interface SchedulingDateQuery extends PageQuery {
/**
* 排班名称
*/
schedulingName?: string;
/**
* 开始时间
*/
startTime?: string;
/**
* 结束时间
*/
endTime?: string;
/**
* 部门ID
*/
projectId?: string | number;
/**
* 日期范围参数
*/
params?: any;
}

4
src/views/integratedManage/attendManage/components/attendTrend.vue
View File

@ -242,7 +242,7 @@ onMounted(() => {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 500px;
height: 435px;
width: 100%;
padding: 10px;
box-sizing: border-box;
@ -288,7 +288,7 @@ onMounted(() => {
@media (max-width: 768px) {
.chart-container {
height: 450px;
height: 435px;
}
}

22
src/views/integratedManage/attendManage/components/renyuanguanliDialog.vue
View File

@ -43,11 +43,12 @@
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-option
v-for="person in props.personnelList"
:key="person.value"
:label="person.label"
:value="person.value"
></el-option>
</el-select>
<!-- 删除按钮 (仅在不是第一个项目时显示) -->
@ -97,6 +98,17 @@ const props = defineProps({
manageAttendDialogVisible: {
type: Boolean,
default: false
},
// 排班人员列表数据
personnelList: {
type: Array,
default: () => [
{ label: '张三', value: '1' },
{ label: '李四', value: '2' },
{ label: '王五', value: '3' },
{ label: '赵六', value: '4' },
{ label: '钱七', value: '5' }
]
}
});

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

@ -37,6 +37,19 @@
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
@ -110,9 +123,17 @@ const getCurrentMonthDates = () => {
return dates;
};
// 分页相关状态
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(50); // 总数据条数，模拟数据
// 生成排班数据
const scheduleData = computed(() => {
return Array.from({ length: 20 }, (_, index) => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return Array.from({ length: total.value }, (_, index) => {
// 循环使用员工数据
const employee = employees[index % employees.length];
@ -131,9 +152,20 @@ const scheduleData = computed(() => {
});
return rowData;
});
}).slice(startIndex, endIndex);
});
// 分页大小变化处理
const handleSizeChange = (size: number) => {
pageSize.value = size;
currentPage.value = 1; // 重置为第一页
};
// 当前页码变化处理
const handleCurrentChange = (current: number) => {
currentPage.value = current;
};
// 组件挂载时获取当前月数据
onMounted(() => {
currentMonthDates.value = getCurrentMonthDates();
@ -216,7 +248,20 @@ const handleCellClick = (rowData: any, columnData: any, cellEvent: any) => {
}
.week-day {
font-size: 12px;
color: #666;
}
font-size: 12px;
color: #666;
}
/* 分页容器样式 */
.pagination-container {
margin-top: 16px;
display: flex;
justify-content: flex-end;
align-items: center;
}
/* 分页组件样式优化 */
:deep(.el-pagination) {
font-size: 14px;
}
</style>

0
src/views/integratedManage/attendManage/components/leftBox/approval.vue → src/views/integratedManage/attendManage/components/rightBox/approval.vue
View File

0
src/views/integratedManage/attendManage/components/leftBox/calendar.vue → src/views/integratedManage/attendManage/components/rightBox/calendar.vue
View File

0
src/views/integratedManage/attendManage/components/leftBox/todayAttend.vue → src/views/integratedManage/attendManage/components/rightBox/todayAttend.vue
View File

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

@ -72,6 +72,7 @@
<renyuanguanliDialog
v-model:manageAttendDialogVisible="manageAttendDialogVisible"
@confirm="handleAttendConfirm"
:personnel-list="paibanRenYuanList"
/>
<!-- 编辑排班弹窗 -->
@ -107,13 +108,49 @@
<script setup lang="ts">
import infoBox from '@/views/integratedManage/attendManage/components/infoBox.vue'
import attendTrend from '@/views/integratedManage/attendManage/components/attendTrend.vue'
import todayAttend from '@/views/integratedManage/attendManage/components/leftBox/todayAttend.vue'
import approval from '@/views/integratedManage/attendManage/components/leftBox/approval.vue'
import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
import todayAttend from '@/views/integratedManage/attendManage/components/rightBox/todayAttend.vue'
import approval from '@/views/integratedManage/attendManage/components/rightBox/approval.vue'
import calendar from '@/views/integratedManage/attendManage/components/rightBox/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';
import { getPaibanRenYuanList } from '@/api/renyuan/paiban';
import { ref, onMounted } from 'vue';
// 导入用户store
import { useUserStore } from '@/store/modules/user';
// 排班人员列表
const paibanRenYuanList = ref([]);
// 获取排班人员列表
const fetchPaibanRenYuanList = async (deptId?: string) => {
try {
// 如果没有提供deptId，默认使用当前登录用户的部门ID
const targetDeptId = deptId || userStore.deptId;
if (!targetDeptId) {
console.warn('未提供部门ID，无法获取排班人员列表');
return;
}
const response = await getPaibanRenYuanList(targetDeptId);
// 格式化人员列表数据，确保每个人员对象包含label和value属性
paibanRenYuanList.value = response.data?.map((user: any) => ({
label: user.nickName || user.userName || '未知用户',
value: user.userId || user.id || ''
})) || [];
console.log('获取排班人员列表成功:', paibanRenYuanList.value);
} catch (error) {
console.error('获取排班人员列表失败:', error);
// 错误情况下提供模拟数据，确保功能可用
paibanRenYuanList.value = [
{ label: '张三', value: '1' },
{ label: '李四', value: '2' },
{ label: '王五', value: '3' },
{ label: '赵六', value: '4' },
{ label: '钱七', value: '5' }
];
}
};
// 人员排班弹窗
const manageAttendDialogVisible = ref(false);
@ -329,6 +366,13 @@ const calendarData = ref({
});
// 初始化用户store
const userStore = useUserStore();
onMounted(() => {
fetchPaibanRenYuanList(String(userStore.deptId));
});
</script>
<style scoped lang="scss">

274
src/views/integratedManage/paibanTimeType.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="排班名称" prop="schedulingName">
<el-input v-model="queryParams.schedulingName" placeholder="请输入排班名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['personnel:schedulingDate:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['personnel:schedulingDate:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['personnel:schedulingDate:remove']">删除</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" border :data="schedulingDateList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="排班名称" align="center" prop="schedulingName" />
<el-table-column label="开始时间" align="center" prop="startTime" width="180">
<template #default="scope">
<span>{{scope.row.startTime}}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" align="center" prop="endTime" width="180">
<template #default="scope">
<span>{{ scope.row.endTime}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['personnel:schedulingDate:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['personnel:schedulingDate:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改运维-排班时间类型对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="schedulingDateFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="排班名称" prop="schedulingName">
<el-input v-model="form.schedulingName" placeholder="请输入排班名称" />
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-time-select clearable
v-model="form.startTime"
value-format="HH:mm:ss"
step="00:10:00"
start="00:00"
end="23:59"
placeholder="请选择开始时间">
</el-time-select>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-time-select clearable
v-model="form.endTime"
value-format="HH:mm:ss"
step="00:10:00"
start="00:00"
end="23:59"
placeholder="请选择结束时间">
</el-time-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="SchedulingDate" lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue';
import { listSchedulingDate, getSchedulingDate, delSchedulingDate, addSchedulingDate, updateSchedulingDate } from '@/api/renyuan/schedulingDate';
import { SchedulingDateVO, SchedulingDateQuery, SchedulingDateForm } from '@/api/renyuan/schedulingDate/types';
// 导入用户store
import { useUserStore } from '@/store/modules/user';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取用户store
const userStore = useUserStore();
const schedulingDateList = ref<SchedulingDateVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const schedulingDateFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: SchedulingDateForm = {
id: undefined,
schedulingName: undefined,
startTime: undefined,
endTime: undefined,
projectId: undefined,
}
const data = reactive<PageData<SchedulingDateForm, SchedulingDateQuery>>({
form: {...initFormData},
queryParams: {
pageNum: 1,
pageSize: 10,
schedulingName: undefined,
startTime: undefined,
endTime: undefined,
projectId: undefined,
params: {
}
},
rules: {
schedulingName: [
{ required: true, message: "排班名称不能为空", trigger: "blur" }
],
startTime: [
{ required: true, message: "开始时间不能为空", trigger: "blur" }
],
endTime: [
{ required: true, message: "结束时间不能为空", trigger: "blur" }
]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询运维-排班时间类型列表 */
const getList = async () => {
loading.value = true;
const res = await listSchedulingDate(queryParams.value);
schedulingDateList.value = res.rows;
total.value = res.total;
loading.value = false;
}
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
form.value = {...initFormData};
schedulingDateFormRef.value?.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
/** 多选框选中数据 */
const handleSelectionChange = (selection: SchedulingDateVO[]) => {
ids.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
const handleAdd = () => {
reset();
// 显式设置projectId为当前选中的项目ID
if (userStore.selectedProject && userStore.selectedProject.id) {
form.value.projectId = userStore.selectedProject.id;
}
dialog.visible = true;
dialog.title = "添加运维-排班时间类型";
}
/** 修改按钮操作 */
const handleUpdate = async (row?: SchedulingDateVO) => {
reset();
const _id = row?.id || ids.value[0]
const res = await getSchedulingDate(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改运维-排班时间类型";
}
/** 提交按钮 */
const submitForm = () => {
schedulingDateFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateSchedulingDate(form.value).finally(() => buttonLoading.value = false);
} else {
await addSchedulingDate(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess("操作成功");
dialog.visible = false;
await getList();
}
});
}
/** 删除按钮操作 */
const handleDelete = async (row?: SchedulingDateVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除运维-排班时间类型编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
await delSchedulingDate(_ids);
proxy?.$modal.msgSuccess("删除成功");
await getList();
}
// 监听用户选择的项目变化
watch(() => userStore.selectedProject, (newProject) => {
if (newProject && newProject.id) {
queryParams.value.projectId = newProject.id;
// 只在新增表单时设置projectId，编辑表单保留原有值
if (!form.value.id) {
form.value.projectId = newProject.id;
}
// 调用getList刷新数据
getList();
}
}, { immediate: true, deep: true });
onMounted(() => {
getList();
});
// 组件卸载时清空projectId
onUnmounted(() => {
queryParams.value.projectId = undefined;
form.value.projectId = undefined;
});
</script>