feat(mes-cal): 新增排班计划和班次管理前端页面

- 新增班次管理独立页面(index.vue + CalShiftForm.vue),支持 CRUD + 导出
- 新增排班计划列表页(index.vue),支持按编码/名称/轮班方式/状态搜索
- 新增排班计划表单(CalPlanForm.vue),含编码生成、条件显示倒班方式/天数、确认计划操作
- 新增班次子表面板(CalShiftPanel.vue),嵌入计划表单 Tab
- 新增班组子表面板(CalPlanTeamPanel.vue),嵌入计划表单 Tab
- 新增 shift/plan/plan-team 三个 API 文件
- dict.ts 新增 4 个字典类型常量(shift_type/shift_method/calendar_type/plan_status)
pull/871/MERGE
YunaiV 2026-02-17 09:52:46 +08:00
parent 153fa2cf25
commit 9f5303aea6
9 changed files with 1256 additions and 0 deletions

View File

@ -0,0 +1,53 @@
import request from '@/config/axios'
// MES 排班计划 VO
export interface CalPlanVO {
id: number
code: string // 计划编码
name: string // 计划名称
calendarType: number // 班组类型
startDate: number // 开始日期
endDate: number // 结束日期
shiftType: number // 轮班方式
shiftMethod: number // 倒班方式
shiftCount: number // 倒班天数
status: number // 状态
remark: string // 备注
attribute1: string
attribute2: string
attribute3: number
attribute4: number
}
// MES 排班计划 API
export const CalPlanApi = {
// 查询排班计划分页
getPlanPage: async (params: any) => {
return await request.get({ url: `/mes/cal/plan/page`, params })
},
// 查询排班计划详情
getPlan: async (id: number) => {
return await request.get({ url: `/mes/cal/plan/get?id=` + id })
},
// 新增排班计划
createPlan: async (data: CalPlanVO) => {
return await request.post({ url: `/mes/cal/plan/create`, data })
},
// 修改排班计划
updatePlan: async (data: CalPlanVO) => {
return await request.put({ url: `/mes/cal/plan/update`, data })
},
// 删除排班计划
deletePlan: async (id: number) => {
return await request.delete({ url: `/mes/cal/plan/delete?id=` + id })
},
// 导出排班计划 Excel
exportPlan: async (params: any) => {
return await request.download({ url: `/mes/cal/plan/export-excel`, params })
}
}

View File

@ -0,0 +1,34 @@
import request from '@/config/axios'
// MES 计划班组关联 VO
// TODO @AI挪到 plan/team 目录下
export interface CalPlanTeamVO {
id: number
planId: number // 排班计划编号
teamId: number // 班组编号
teamCode: string // 班组编码
teamName: string // 班组名称
remark: string // 备注
attribute1: string
attribute2: string
attribute3: number
attribute4: number
}
// MES 计划班组关联 API
export const CalPlanTeamApi = {
// 查询指定排班计划的班组列表
getPlanTeamListByPlan: async (planId: number) => {
return await request.get({ url: `/mes/cal/plan-team/list-by-plan?planId=` + planId })
},
// 新增计划班组关联
createPlanTeam: async (data: CalPlanTeamVO) => {
return await request.post({ url: `/mes/cal/plan-team/create`, data })
},
// 删除计划班组关联
deletePlanTeam: async (id: number) => {
return await request.delete({ url: `/mes/cal/plan-team/delete?id=` + id })
}
}

View File

@ -0,0 +1,56 @@
import request from '@/config/axios'
// TODO @AI挪到 plan/shift 目录下
// MES 计划班次 VO
export interface CalShiftVO {
id: number
planId: number // 排班计划编号
sort: number // 显示顺序
name: string // 班次名称
startTime: string // 开始时间
endTime: string // 结束时间
remark: string // 备注
attribute1: string
attribute2: string
attribute3: number
attribute4: number
}
// MES 计划班次 API
export const CalShiftApi = {
// 查询计划班次分页
getShiftPage: async (params: any) => {
return await request.get({ url: `/mes/cal/shift/page`, params })
},
// 查询计划班次详情
getShift: async (id: number) => {
return await request.get({ url: `/mes/cal/shift/get?id=` + id })
},
// 查询指定排班计划的班次列表
getShiftListByPlan: async (planId: number) => {
return await request.get({ url: `/mes/cal/shift/list-by-plan?planId=` + planId })
},
// 新增计划班次
createShift: async (data: CalShiftVO) => {
return await request.post({ url: `/mes/cal/shift/create`, data })
},
// 修改计划班次
updateShift: async (data: CalShiftVO) => {
return await request.put({ url: `/mes/cal/shift/update`, data })
},
// 删除计划班次
deleteShift: async (id: number) => {
return await request.delete({ url: `/mes/cal/shift/delete?id=` + id })
},
// 导出计划班次 Excel
exportShift: async (params: any) => {
return await request.download({ url: `/mes/cal/shift/export-excel`, params })
}
}

View File

@ -0,0 +1,257 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-row>
<el-col :span="8">
<el-form-item label="计划编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入计划编码">
<template #append>
<el-button @click="generateCode" :disabled="formType === 'update'">
生成
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="计划名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入计划名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="班组类型" prop="calendarType">
<el-select v-model="formData.calendarType" placeholder="请选择班组类型" class="!w-1/1">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_CALENDAR_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="开始日期" prop="startDate">
<el-date-picker
v-model="formData.startDate"
type="date"
value-format="x"
placeholder="请选择开始日期"
class="!w-1/1"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="结束日期" prop="endDate">
<el-date-picker
v-model="formData.endDate"
type="date"
value-format="x"
placeholder="请选择结束日期"
class="!w-1/1"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="轮班方式" prop="shiftType">
<el-select v-model="formData.shiftType" placeholder="请选择轮班方式" class="!w-1/1">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_SHIFT_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- TODO @AI枚举类 -->
<el-col :span="8" v-if="formData.shiftType && formData.shiftType !== 1">
<el-form-item label="倒班方式" prop="shiftMethod">
<el-select v-model="formData.shiftMethod" placeholder="请选择倒班方式" class="!w-1/1">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_SHIFT_METHOD)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<!-- TODO @AI枚举类 -->
<el-col :span="8" v-if="formData.shiftMethod === 4">
<el-form-item label="倒班天数" prop="shiftCount">
<el-input-number
v-model="formData.shiftCount"
:min="1"
controls-position="right"
class="!w-1/1"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="状态" prop="status">
<dict-tag :type="DICT_TYPE.MES_CAL_PLAN_STATUS" :value="formData.status" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 编辑时显示子资源 Tab -->
<el-tabs v-if="formType === 'update'" v-model="activeTab" class="mt-10px">
<el-tab-pane label="班次" name="shift">
<CalShiftPanel :plan-id="formData.id!" />
</el-tab-pane>
<el-tab-pane label="班组" name="team">
<CalPlanTeamPanel :plan-id="formData.id!" />
</el-tab-pane>
</el-tabs>
<template #footer>
<!-- 确认按钮仅草稿状态显示 -->
<!-- TODO @AIstatus 枚举 -->
<el-button
v-if="formType === 'update' && formData.status === 0"
type="warning"
@click="handleConfirm"
:disabled="formLoading"
>
确认计划
</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { CalPlanApi, CalPlanVO } from '@/api/mes/cal/plan'
import { generateRandomStr } from '@/utils'
import CalShiftPanel from './CalShiftPanel.vue'
import CalPlanTeamPanel from './CalPlanTeamPanel.vue'
defineOptions({ name: 'CalPlanForm' })
const { t } = useI18n() //
const message = useMessage() //
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
const formLoading = ref(false) //
const formType = ref('') // create - update -
const activeTab = ref('shift') // Tab
const formData = ref({
id: undefined,
code: undefined,
name: undefined,
calendarType: undefined,
startDate: undefined,
endDate: undefined,
shiftType: undefined,
shiftMethod: undefined,
shiftCount: undefined,
status: 0,
remark: undefined
})
const formRules = reactive({
code: [{ required: true, message: '计划编码不能为空', trigger: 'blur' }],
name: [{ required: true, message: '计划名称不能为空', trigger: 'blur' }],
startDate: [{ required: true, message: '开始日期不能为空', trigger: 'change' }],
endDate: [{ required: true, message: '结束日期不能为空', trigger: 'change' }]
})
const formRef = ref()
/** 生成计划编码 */
const generateCode = () => {
formData.value.code = 'PLAN' + generateRandomStr(8)
}
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
//
if (id) {
formLoading.value = true
try {
formData.value = await CalPlanApi.getPlan(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open })
/** 提交表单 */
const emit = defineEmits(['success'])
const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = formData.value as unknown as CalPlanVO
if (formType.value === 'create') {
await CalPlanApi.createPlan(data)
message.success(t('common.createSuccess'))
} else {
await CalPlanApi.updatePlan(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
emit('success')
} finally {
formLoading.value = false
}
}
/** 确认计划 */
const handleConfirm = async () => {
try {
await message.confirm('确认该排班计划?确认后将不可删除。')
formLoading.value = true
// TODO @AI
const data = { ...formData.value, status: 1 } as unknown as CalPlanVO
await CalPlanApi.updatePlan(data)
message.success('确认成功')
dialogVisible.value = false
emit('success')
} catch {
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
code: undefined,
name: undefined,
calendarType: undefined,
startDate: undefined,
endDate: undefined,
shiftType: undefined,
shiftMethod: undefined,
shiftCount: undefined,
status: 0, // TODO @AI
remark: undefined
}
formRef.value?.resetFields()
}
</script>

View File

@ -0,0 +1,134 @@
<!-- TODO @AI晚点 review -->
<template>
<div>
<el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
<Icon icon="ep:plus" class="mr-5px" /> 添加班组
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
<el-table-column label="班组编号" align="center" prop="teamId" width="120" />
<el-table-column label="班组编码" align="center" prop="teamCode" min-width="120" />
<el-table-column label="班组名称" align="center" prop="teamName" min-width="120" />
<el-table-column label="备注" align="center" prop="remark" min-width="150" />
<el-table-column label="操作" align="center" width="80">
<template #default="scope">
<el-button link type="danger" @click="handleDelete(scope.row.id)"></el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加班组弹窗 -->
<Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" v-loading="formLoading">
<el-form-item label="班组" prop="teamId">
<!-- TODO @芋艿对接班组下拉列表 cal_team 迁移后对接 -->
<el-input-number
v-model="formData.teamId"
placeholder="请输入班组编号"
class="!w-1/1"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</div>
</template>
<script setup lang="ts">
import { CalPlanTeamApi, CalPlanTeamVO } from '@/api/mes/cal/plan/team'
const props = defineProps<{
planId: number //
}>()
const { t } = useI18n() //
const message = useMessage() //
const loading = ref(false) //
const list = ref<CalPlanTeamVO[]>([]) //
/** 加载列表 */
const getList = async () => {
loading.value = true
try {
list.value = await CalPlanTeamApi.getPlanTeamListByPlan(props.planId)
} finally {
loading.value = false
}
}
// ==================== ====================
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
const formLoading = ref(false) //
const formRef = ref() // Ref
const formData = ref({
id: undefined as number | undefined,
planId: undefined as number | undefined,
teamId: undefined as number | undefined,
remark: undefined as string | undefined
})
const formRules = reactive({
teamId: [{ required: true, message: '班组不能为空', trigger: 'blur' }]
})
/** 打开表单弹窗 */
const openForm = (type: string) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
resetForm()
}
/** 提交表单 */
const submitForm = async () => {
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
formLoading.value = true
try {
const data = formData.value as unknown as CalPlanTeamVO
await CalPlanTeamApi.createPlanTeam(data)
message.success(t('common.createSuccess'))
dialogVisible.value = false
await getList()
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
planId: props.planId,
teamId: undefined,
remark: undefined
}
formRef.value?.resetFields()
}
/** 删除 */
const handleDelete = async (id: number) => {
try {
await message.delConfirm()
await CalPlanTeamApi.deletePlanTeam(id)
message.success('删除成功')
await getList()
} catch {}
}
watch(
() => props.planId,
(val) => {
if (val) {
getList()
}
},
{ immediate: true }
)
</script>

View File

@ -0,0 +1,179 @@
<template>
<div>
<el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
<Icon icon="ep:plus" class="mr-5px" /> 添加班次
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
<el-table-column label="顺序" align="center" prop="sort" width="80" />
<el-table-column label="班次名称" align="center" prop="name" min-width="120" />
<el-table-column label="开始时间" align="center" prop="startTime" width="100" />
<el-table-column label="结束时间" align="center" prop="endTime" width="100" />
<el-table-column label="备注" align="center" prop="remark" min-width="150" />
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button link type="primary" @click="openForm('update', scope.row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)"></el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加/编辑班次弹窗 -->
<Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="80px"
v-loading="formLoading"
>
<el-form-item label="顺序" prop="sort">
<el-input-number
v-model="formData.sort"
:min="1"
controls-position="right"
class="!w-1/1"
/>
</el-form-item>
<el-form-item label="班次名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入班次名称" />
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-input v-model="formData.startTime" placeholder="请输入开始时间(如 08:00" />
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-input v-model="formData.endTime" placeholder="请输入结束时间(如 17:00" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</div>
</template>
<script setup lang="ts">
import { CalShiftApi, CalShiftVO } from '@/api/mes/cal/shift'
const props = defineProps<{
planId: number //
}>()
const { t } = useI18n() //
const message = useMessage() //
const loading = ref(false) //
const list = ref<CalShiftVO[]>([]) //
/** 加载列表 */
const getList = async () => {
loading.value = true
try {
list.value = await CalShiftApi.getShiftListByPlan(props.planId)
} finally {
loading.value = false
}
}
// ==================== / ====================
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
const formType = ref('') // create - update -
const formLoading = ref(false) //
const formRef = ref() // Ref
const formData = ref({
id: undefined as number | undefined,
planId: undefined as number | undefined,
sort: 1,
name: undefined as string | undefined,
startTime: undefined as string | undefined,
endTime: undefined as string | undefined,
remark: undefined as string | undefined
})
const formRules = reactive({
sort: [{ required: true, message: '顺序不能为空', trigger: 'blur' }],
name: [{ required: true, message: '班次名称不能为空', trigger: 'blur' }],
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
})
/** 打开表单弹窗 */
// TODO @AI
const openForm = (type: string, row?: CalShiftVO) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
if (type === 'update' && row) {
formData.value = {
id: row.id,
planId: row.planId,
sort: row.sort,
name: row.name,
startTime: row.startTime,
endTime: row.endTime,
remark: row.remark
}
}
}
/** 提交表单 */
// TODO @AI
const submitForm = async () => {
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
formLoading.value = true
try {
const data = formData.value as unknown as CalShiftVO
if (formType.value === 'create') {
await CalShiftApi.createShift(data)
message.success(t('common.createSuccess'))
} else {
await CalShiftApi.updateShift(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
await getList()
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
planId: props.planId,
sort: 1,
name: undefined,
startTime: undefined,
endTime: undefined,
remark: undefined
}
formRef.value?.resetFields()
}
/** 删除 */
const handleDelete = async (id: number) => {
try {
await message.delConfirm()
await CalShiftApi.deleteShift(id)
message.success('删除成功')
await getList()
} catch {}
}
watch(
() => props.planId,
(val) => {
if (val) {
getList()
}
},
{ immediate: true }
)
</script>

View File

@ -0,0 +1,230 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="85px"
>
<el-form-item label="计划编码" prop="code">
<el-input
v-model="queryParams.code"
placeholder="请输入计划编码"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="计划名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入计划名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="轮班方式" prop="shiftType">
<el-select
v-model="queryParams.shiftType"
placeholder="请选择轮班方式"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_SHIFT_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_PLAN_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:cal-plan:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['mes:cal-plan:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="计划编码" align="center" prop="code" min-width="120" />
<el-table-column label="计划名称" align="center" prop="name" min-width="150" />
<el-table-column label="班组类型" align="center" prop="calendarType" min-width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_CAL_CALENDAR_TYPE" :value="scope.row.calendarType" />
</template>
</el-table-column>
<el-table-column label="开始日期" align="center" prop="startDate" :formatter="dateFormatter" width="180px" />
<el-table-column label="结束日期" align="center" prop="endDate" :formatter="dateFormatter" width="180px" />
<el-table-column label="轮班方式" align="center" prop="shiftType" min-width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_CAL_SHIFT_TYPE" :value="scope.row.shiftType" />
</template>
</el-table-column>
<el-table-column label="倒班方式" align="center" prop="shiftMethod" min-width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_CAL_SHIFT_METHOD" :value="scope.row.shiftMethod" />
</template>
</el-table-column>
<el-table-column label="单据状态" align="center" prop="status" min-width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_CAL_PLAN_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['mes:cal-plan:update']"
>
编辑
</el-button>
<el-button
v-if="scope.row.status === 0"
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['mes:cal-plan:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<CalPlanForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { CalPlanApi, CalPlanVO } from '@/api/mes/cal/plan'
import CalPlanForm from './CalPlanForm.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
defineOptions({ name: 'MesCalPlan' })
const message = useMessage() //
const { t } = useI18n() //
const loading = ref(true) //
const list = ref<CalPlanVO[]>([]) //
const total = ref(0) //
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
code: undefined,
name: undefined,
shiftType: undefined,
status: undefined
})
const queryFormRef = ref() //
const exportLoading = ref(false) //
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await CalPlanApi.getPlanPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
await message.delConfirm()
await CalPlanApi.deletePlan(id)
message.success(t('common.delSuccess'))
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
await message.exportConfirm()
exportLoading.value = true
const data = await CalPlanApi.exportPlan(queryParams)
download.excel(data, '排班计划.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(async () => {
await getList()
})
</script>

View File

@ -0,0 +1,128 @@
<!-- TODO @AI是不是不用这个 -->
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="排班计划" prop="planId">
<el-input-number
v-model="formData.planId"
placeholder="请输入排班计划编号"
class="!w-1/1"
/>
</el-form-item>
<el-form-item label="显示顺序" prop="sort">
<el-input-number
v-model="formData.sort"
:min="1"
controls-position="right"
class="!w-1/1"
/>
</el-form-item>
<el-form-item label="班次名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入班次名称" />
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-input v-model="formData.startTime" placeholder="请输入开始时间(如 08:00" />
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-input v-model="formData.endTime" placeholder="请输入结束时间(如 17:00" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { CalShiftApi, CalShiftVO } from '@/api/mes/cal/shift'
defineOptions({ name: 'CalShiftForm' })
const { t } = useI18n() //
const message = useMessage() //
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
const formLoading = ref(false) //
const formType = ref('') // create - update -
const formData = ref({
id: undefined,
planId: undefined,
sort: 1,
name: undefined,
startTime: undefined,
endTime: undefined,
remark: undefined
})
const formRules = reactive({
planId: [{ required: true, message: '排班计划不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
name: [{ required: true, message: '班次名称不能为空', trigger: 'blur' }],
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
})
const formRef = ref()
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
//
if (id) {
formLoading.value = true
try {
formData.value = await CalShiftApi.getShift(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open })
/** 提交表单 */
const emit = defineEmits(['success'])
const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = formData.value as unknown as CalShiftVO
if (formType.value === 'create') {
await CalShiftApi.createShift(data)
message.success(t('common.createSuccess'))
} else {
await CalShiftApi.updateShift(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
planId: undefined,
sort: 1,
name: undefined,
startTime: undefined,
endTime: undefined,
remark: undefined
}
formRef.value?.resetFields()
}
</script>

View File

@ -0,0 +1,185 @@
<!-- TODO @AI是不是不用这个 -->
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="85px"
>
<el-form-item label="排班计划" prop="planId">
<el-input
v-model="queryParams.planId"
placeholder="请输入排班计划编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="班次名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入班次名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:cal-shift:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['mes:cal-shift:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="班次编号" align="center" prop="id" width="100" />
<el-table-column label="排班计划编号" align="center" prop="planId" width="120" />
<el-table-column label="显示顺序" align="center" prop="sort" width="100" />
<el-table-column label="班次名称" align="center" prop="name" min-width="120" />
<el-table-column label="开始时间" align="center" prop="startTime" width="100" />
<el-table-column label="结束时间" align="center" prop="endTime" width="100" />
<el-table-column label="备注" align="center" prop="remark" min-width="150" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['mes:cal-shift:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['mes:cal-shift:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<CalShiftForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { CalShiftApi, CalShiftVO } from '@/api/mes/cal/shift'
import CalShiftForm from './CalShiftForm.vue'
defineOptions({ name: 'MesCalShift' })
const message = useMessage() //
const { t } = useI18n() //
const loading = ref(true) //
const list = ref<CalShiftVO[]>([]) //
const total = ref(0) //
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
planId: undefined,
name: undefined
})
const queryFormRef = ref() //
const exportLoading = ref(false) //
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await CalShiftApi.getShiftPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
await message.delConfirm()
await CalShiftApi.deleteShift(id)
message.success(t('common.delSuccess'))
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
await message.exportConfirm()
exportLoading.value = true
const data = await CalShiftApi.exportShift(queryParams)
download.excel(data, '计划班次.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(async () => {
await getList()
})
</script>