template div classworktime-container !-- 筛选区域 -- div classsearch-area a-form layoutinline :modelsearchForm a-form-item label任务类型 a-select v-model:valuesearchForm.taskType placeholder请选择任务类型 allowClear stylewidth: 180px :optionstaskTypeOptions / /a-form-item a-form-item label创建时间 a-range-picker v-model:valuesearchForm.dateRange / /a-form-item a-form-item a-button typeprimary clickhandleSearch查询/a-button /a-form-item a-form-item a-button clickhandleReset重置/a-button /a-form-item a-form-item a-button typeprimary clickhandleAdd新增/a-button /a-form-item /a-form /div !-- 表格区域 -- div classtable-area vxe-grid refgridRef v-bindgridOptions template #operation{ row } a-button typelink sizesmall clickhandleEdit(row)编辑/a-button a-popconfirm title确认删除该条记录 confirmhandleDelete(row) a-button typelink sizesmall danger删除/a-button /a-popconfirm /template template #pager vxe-pager :layouts[Sizes, PrevJump, PrevPage, Number, NextPage, NextJump, FullJump, Total] v-model:current-pagepage.pageNo v-model:page-sizepage.pageSize :page-sizes[10, 20, 50, 100] :totalpage.total page-changehandlePageChange / /template /vxe-grid /div !-- 新增/编辑弹窗 -- a-modal :openmodalVisible :titlemodalTitle :width520 cancelhandleModalCancel okhandleModalOk :confirmLoadingconfirmLoading a-form refformRef :modelformData :rulesformRules layoutvertical a-form-item label创建时间 namecreateTime a-date-picker v-model:valueformData.createTime show-time value-formatYYYY-MM-DD HH:mm:ss placeholder请选择创建时间 stylewidth: 100% / /a-form-item a-form-item label任务类型 nametaskType a-select v-model:valueformData.taskType placeholder请选择任务类型 :optionstaskTypeOptions / /a-form-item a-form-item label昨日任务 nameyesterdayTask a-textarea v-model:valueformData.yesterdayTask placeholder请输入昨日任务 :rows3 :maxlength200 show-count / /a-form-item a-form-item label今日任务 nametodayTask a-textarea v-model:valueformData.todayTask placeholder请输入今日任务 :rows3 :maxlength200 show-count / /a-form-item a-form-item label完成任务 namefinishTask a-textarea v-model:valueformData.finishTask placeholder请输入完成任务 :rows3 :maxlength200 show-count / /a-form-item /a-form /a-modal /div /template script setup import { ref, reactive, onMounted } from vue import { message } from ant-design-vue defineOptions({ name: worktime }) const gridRef ref(null) const formRef ref(null) // 任务类型选项 const taskTypeOptions [ { label: 开发任务, value: dev }, { label: 测试任务, value: test }, { label: 运维任务, value: ops }, { label: 设计任务, value: design }, ] // 筛选表单 const searchForm reactive({ taskType: undefined, dateRange: undefined, }) // 分页 const page ref({ pageNo: 1, pageSize: 10, total: 0 }) // 弹窗状态 const modalVisible ref(false) const modalTitle ref(新增) const confirmLoading ref(false) const isEdit ref(false) // 弹窗表单 const formData reactive({ id: null, createTime: undefined, taskType: undefined, yesterdayTask: , todayTask: , finishTask: , }) // 表单校验规则创建时间、任务类型、昨日任务必填 const formRules { createTime: [{ required: true, message: 请选择创建时间, trigger: change }], taskType: [{ required: true, message: 请选择任务类型, trigger: change }], yesterdayTask: [{ required: true, message: 请输入昨日任务, trigger: blur }], } // 列配置 const columns [ { type: seq, title: 序号, width: 70, align: center }, { field: todayTask, title: 今日任务, minWidth: 200, align: center, showOverflow: true }, { field: finishTask, title: 完成任务, minWidth: 200, align: center, showOverflow: true }, { field: createTime, title: 创建时间, width: 180, align: center }, { field: operation, title: 操作, width: 140, align: center, fixed: right, slots: { default: operation }, }, ] // vxe-grid 配置 const gridOptions reactive({ columns, data: [], height: auto, border: true, showOverflow: true, align: center, rowConfig: { isHover: true }, columnConfig: { resizable: true }, }) // 模拟数据 let mockData [] let mockId 1 const generateMockData () { const taskTypes [dev, test, ops, design] const taskContents [ 完成登录模块开发, 修复已知Bug, 编写单元测试, 数据库优化, 接口联调, 代码审查, 文档编写, 环境部署, 需求评审, 性能调优, ] mockData Array.from({ length: 37 }, (_, i) { const month String(Math.floor(Math.random() * 12) 1).padStart(2, 0) const day String(Math.floor(Math.random() * 28) 1).padStart(2, 0) const hour String(Math.floor(Math.random() * 10) 8).padStart(2, 0) const minute String(Math.floor(Math.random() * 60)).padStart(2, 0) return { id: mockId, todayTask: taskContents[Math.floor(Math.random() * taskContents.length)], finishTask: taskContents[Math.floor(Math.random() * taskContents.length)], createTime: 2025-${month}-${day} ${hour}:${minute}:00, taskType: taskTypes[Math.floor(Math.random() * taskTypes.length)], yesterdayTask: taskContents[Math.floor(Math.random() * taskContents.length)], } }) } // 加载数据带筛选分页 const loadData () { let filtered [...mockData] // 筛选任务类型 if (searchForm.taskType) { filtered filtered.filter(item item.taskType searchForm.taskType) } // 筛选日期范围 if (searchForm.dateRange searchForm.dateRange.length 2) { const [start, end] searchForm.dateRange const startStr start.format(YYYY-MM-DD) const endStr end.format(YYYY-MM-DD) filtered filtered.filter(item { const itemDate item.createTime.substring(0, 10) return itemDate startStr itemDate endStr }) } page.value.total filtered.length const startIdx (page.value.pageNo - 1) * page.value.pageSize const endIdx startIdx page.value.pageSize gridOptions.data filtered.slice(startIdx, endIdx) } // 查询 const handleSearch () { page.value.pageNo 1 loadData() } // 重置 const handleReset () { searchForm.taskType undefined searchForm.dateRange undefined page.value.pageNo 1 loadData() } // 分页变化 const handlePageChange ({ currentPage, pageSize }) { page.value.pageNo currentPage page.value.pageSize pageSize loadData() } // 新增 const handleAdd () { isEdit.value false modalTitle.value 新增 Object.assign(formData, { id: null, createTime: undefined, taskType: undefined, yesterdayTask: , todayTask: , finishTask: , }) modalVisible.value true } // 编辑 const handleEdit (row) { isEdit.value true modalTitle.value 编辑 Object.assign(formData, { id: row.id, createTime: row.createTime, taskType: row.taskType, yesterdayTask: row.yesterdayTask || , todayTask: row.todayTask || , finishTask: row.finishTask || , }) modalVisible.value true } // 删除 const handleDelete (row) { const idx mockData.findIndex(item item.id row.id) if (idx ! -1) { mockData.splice(idx, 1) loadData() message.success(删除成功) } } // 弹窗取消 const handleModalCancel () { modalVisible.value false formRef.value?.resetFields() } // 弹窗确认 const handleModalOk async () { try { await formRef.value.validate() confirmLoading.value true if (isEdit.value) { const idx mockData.findIndex(item item.id formData.id) if (idx ! -1) { mockData[idx] { ...mockData[idx], ...formData } } message.success(编辑成功) } else { mockData.unshift({ ...formData, id: mockId }) message.success(新增成功) } modalVisible.value false formRef.value?.resetFields() loadData() } catch (e) { // 校验失败 } finally { confirmLoading.value false } } onMounted(() { generateMockData() loadData() }) /script style scoped langscss .worktime-container { width: 100%; height: 100vh; display: flex; flex-direction: column; padding: 12px; gap: 12px; overflow: hidden; .search-area { background: #fff; padding: 16px 16px 0; border-radius: 6px; } .table-area { flex: 1; overflow: hidden; background: #fff; border-radius: 6px; padding: 8px; } } /style