182 lines
4.2 KiB
Vue
182 lines
4.2 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<GiTable
|
|
row-key="id"
|
|
title="工作量管理"
|
|
:data="dataList"
|
|
:columns="tableColumns"
|
|
:loading="loading"
|
|
:scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
|
|
:pagination="pagination"
|
|
@page-change="onPageChange"
|
|
@page-size-change="onPageSizeChange"
|
|
@refresh="search"
|
|
>
|
|
<template #top>
|
|
<GiForm
|
|
v-model="searchForm"
|
|
search
|
|
:columns="queryFormColumns"
|
|
size="medium"
|
|
@search="search"
|
|
@reset="reset"
|
|
/>
|
|
</template>
|
|
|
|
<template #toolbar-left>
|
|
<a-button type="primary" @click="openAddModal">
|
|
<template #icon><icon-plus /></template>
|
|
<template #default>新增工作量记录</template>
|
|
</a-button>
|
|
</template>
|
|
|
|
<!-- 工作量显示 -->
|
|
<template #workload="{ record }">
|
|
<span class="font-medium text-blue-600">{{ record.workload }}小时</span>
|
|
</template>
|
|
|
|
<!-- 操作列 -->
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-link @click="editRecord(record)">编辑</a-link>
|
|
<a-link status="danger" @click="deleteRecord(record)">删除</a-link>
|
|
</a-space>
|
|
</template>
|
|
</GiTable>
|
|
</GiPageLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { Message } from '@arco-design/web-vue'
|
|
import type { TableColumnData } from '@arco-design/web-vue'
|
|
|
|
// 搜索表单
|
|
let searchForm = reactive({
|
|
userName: '',
|
|
projectName: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
|
|
// 查询条件配置
|
|
const queryFormColumns = [
|
|
{
|
|
field: 'userName',
|
|
label: '员工姓名',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入员工姓名'
|
|
}
|
|
},
|
|
{
|
|
field: 'projectName',
|
|
label: '项目名称',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入项目名称'
|
|
}
|
|
}
|
|
]
|
|
|
|
// 表格列配置
|
|
const tableColumns: TableColumnData[] = [
|
|
{ title: '员工姓名', dataIndex: 'userName', width: 120 },
|
|
{ title: '部门', dataIndex: 'deptName', width: 120 },
|
|
{ title: '项目名称', dataIndex: 'projectName', width: 200, ellipsis: true, tooltip: true },
|
|
{ title: '工作内容', dataIndex: 'workContent', width: 250, ellipsis: true, tooltip: true },
|
|
{ title: '工作量(小时)', dataIndex: 'workload', slotName: 'workload', width: 120 },
|
|
{ title: '工作日期', dataIndex: 'workDate', width: 120 },
|
|
{ title: '创建时间', dataIndex: 'createTime', width: 160 },
|
|
{ title: '操作', slotName: 'action', width: 120, fixed: 'right' }
|
|
]
|
|
|
|
// 数据状态
|
|
const loading = ref(false)
|
|
const dataList = ref([
|
|
{
|
|
id: 1,
|
|
userName: '张三',
|
|
deptName: '技术部',
|
|
projectName: '企业管理系统',
|
|
workContent: '前端开发',
|
|
workload: 8,
|
|
workDate: '2024-01-15',
|
|
createTime: '2024-01-15 10:30:00'
|
|
},
|
|
{
|
|
id: 2,
|
|
userName: '李四',
|
|
deptName: '技术部',
|
|
projectName: '移动端应用',
|
|
workContent: '后端接口开发',
|
|
workload: 6,
|
|
workDate: '2024-01-15',
|
|
createTime: '2024-01-15 11:20:00'
|
|
}
|
|
])
|
|
|
|
const pagination = reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 2,
|
|
showTotal: true,
|
|
showPageSize: true
|
|
})
|
|
|
|
// 搜索和重置
|
|
const search = async () => {
|
|
loading.value = true
|
|
// 模拟API请求
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
const reset = () => {
|
|
Object.assign(searchForm, {
|
|
userName: '',
|
|
projectName: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
pagination.current = 1
|
|
search()
|
|
}
|
|
|
|
// 分页处理
|
|
const onPageChange = (page: number) => {
|
|
searchForm.page = page
|
|
pagination.current = page
|
|
search()
|
|
}
|
|
|
|
const onPageSizeChange = (size: number) => {
|
|
searchForm.size = size
|
|
searchForm.page = 1
|
|
pagination.pageSize = size
|
|
pagination.current = 1
|
|
search()
|
|
}
|
|
|
|
// 操作方法
|
|
const openAddModal = () => {
|
|
Message.info('新增工作量记录功能开发中...')
|
|
}
|
|
|
|
const editRecord = (record: any) => {
|
|
Message.info(`编辑工作量记录: ${record.userName}`)
|
|
}
|
|
|
|
const deleteRecord = (record: any) => {
|
|
Message.info(`删除工作量记录: ${record.userName}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
search()
|
|
})
|
|
</script> |