309 lines
8.0 KiB
Vue
309 lines
8.0 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<GiTable
|
|
row-key="id"
|
|
title="责献积分制度、与企业共同发展"
|
|
:data="dataList"
|
|
:columns="tableColumns"
|
|
:loading="loading"
|
|
:scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
|
|
: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-space>
|
|
<a-button type="primary" @click="openAddModal">
|
|
<template #icon><icon-plus /></template>
|
|
<template #default>积分记录</template>
|
|
</a-button>
|
|
<a-button @click="openRuleModal">
|
|
<template #icon><icon-settings /></template>
|
|
<template #default>积分规则</template>
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
|
|
<!-- 积分显示 -->
|
|
<template #currentPoints="{ record }">
|
|
<span class="font-medium text-blue-600">{{ record.currentPoints }}分</span>
|
|
</template>
|
|
|
|
<!-- 积分等级 -->
|
|
<template #pointLevel="{ record }">
|
|
<a-tag :color="getLevelColor(record.pointLevel)">
|
|
{{ record.pointLevel }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<!-- 操作列 -->
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-link @click="viewDetail(record)">详情</a-link>
|
|
<a-link @click="viewHistory(record)">积分记录</a-link>
|
|
</a-space>
|
|
</template>
|
|
</GiTable>
|
|
|
|
<!-- 积分规则说明 -->
|
|
<a-card title="积分规则说明" class="mt-4" size="small">
|
|
<a-row :gutter="24">
|
|
<a-col :span="8">
|
|
<a-card title="获得积分" size="small">
|
|
<a-list size="small">
|
|
<a-list-item>项目按期完成：+10分</a-list-item>
|
|
<a-list-item>客户满意度优秀：+8分</a-list-item>
|
|
<a-list-item>技术创新贡献：+15分</a-list-item>
|
|
<a-list-item>团队协作优秀：+5分</a-list-item>
|
|
<a-list-item>培训新人：+6分</a-list-item>
|
|
</a-list>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-card title="扣除积分" size="small">
|
|
<a-list size="small">
|
|
<a-list-item>项目延期：-5分</a-list-item>
|
|
<a-list-item>客户投诉：-10分</a-list-item>
|
|
<a-list-item>违反规章制度：-8分</a-list-item>
|
|
<a-list-item>迟到早退：-2分</a-list-item>
|
|
<a-list-item>工作失误：-3分</a-list-item>
|
|
</a-list>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-card title="积分等级" size="small">
|
|
<a-list size="small">
|
|
<a-list-item><a-tag color="red">新手</a-tag> 0-50分</a-list-item>
|
|
<a-list-item><a-tag color="orange">熟练</a-tag> 51-100分</a-list-item>
|
|
<a-list-item><a-tag color="blue">专家</a-tag> 101-200分</a-list-item>
|
|
<a-list-item><a-tag color="green">大师</a-tag> 201-300分</a-list-item>
|
|
<a-list-item><a-tag color="purple">传奇</a-tag> 300分以上</a-list-item>
|
|
</a-list>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</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: '',
|
|
deptName: '',
|
|
pointLevel: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
|
|
// 查询条件配置
|
|
const queryFormColumns = [
|
|
{
|
|
field: 'userName',
|
|
label: '员工姓名',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入员工姓名'
|
|
}
|
|
},
|
|
{
|
|
field: 'deptName',
|
|
label: '部门',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入部门名称'
|
|
}
|
|
},
|
|
{
|
|
field: 'pointLevel',
|
|
label: '积分等级',
|
|
type: 'select' as const,
|
|
props: {
|
|
placeholder: '请选择积分等级',
|
|
options: [
|
|
{ label: '新手', value: '新手' },
|
|
{ label: '熟练', value: '熟练' },
|
|
{ label: '专家', value: '专家' },
|
|
{ label: '大师', value: '大师' },
|
|
{ label: '传奇', value: '传奇' }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
|
|
// 表格列配置
|
|
const tableColumns: TableColumnData[] = [
|
|
{ title: '员工姓名', dataIndex: 'userName', width: 120 },
|
|
{ title: '员工工号', dataIndex: 'userCode', width: 120 },
|
|
{ title: '部门', dataIndex: 'deptName', width: 120 },
|
|
{ title: '岗位', dataIndex: 'position', width: 120 },
|
|
{ title: '当前积分', dataIndex: 'currentPoints', slotName: 'currentPoints', width: 120 },
|
|
{ title: '积分等级', dataIndex: 'pointLevel', slotName: 'pointLevel', width: 100 },
|
|
{ title: '本月获得', dataIndex: 'monthGain', width: 100 },
|
|
{ title: '本月扣除', dataIndex: 'monthDeduct', width: 100 },
|
|
{ title: '累计获得', dataIndex: 'totalGain', width: 100 },
|
|
{ title: '累计扣除', dataIndex: 'totalDeduct', width: 100 },
|
|
{ title: '最后更新', dataIndex: 'lastUpdate', width: 160 },
|
|
{ title: '操作', slotName: 'action', width: 150, fixed: 'right' }
|
|
]
|
|
|
|
// 数据状态
|
|
const loading = ref(false)
|
|
const dataList = ref([
|
|
{
|
|
id: 1,
|
|
userName: '张三',
|
|
userCode: 'EMP001',
|
|
deptName: '技术部',
|
|
position: '前端工程师',
|
|
currentPoints: 285,
|
|
pointLevel: '大师',
|
|
monthGain: 25,
|
|
monthDeduct: 2,
|
|
totalGain: 320,
|
|
totalDeduct: 35,
|
|
lastUpdate: '2024-01-15 16:30:00'
|
|
},
|
|
{
|
|
id: 2,
|
|
userName: '李四',
|
|
userCode: 'EMP002',
|
|
deptName: '技术部',
|
|
position: '后端工程师',
|
|
currentPoints: 156,
|
|
pointLevel: '专家',
|
|
monthGain: 18,
|
|
monthDeduct: 0,
|
|
totalGain: 156,
|
|
totalDeduct: 0,
|
|
lastUpdate: '2024-01-14 14:20:00'
|
|
},
|
|
{
|
|
id: 3,
|
|
userName: '王五',
|
|
userCode: 'EMP003',
|
|
deptName: '市场部',
|
|
position: '市场专员',
|
|
currentPoints: 78,
|
|
pointLevel: '熟练',
|
|
monthGain: 12,
|
|
monthDeduct: 5,
|
|
totalGain: 95,
|
|
totalDeduct: 17,
|
|
lastUpdate: '2024-01-13 10:15:00'
|
|
},
|
|
{
|
|
id: 4,
|
|
userName: '赵六',
|
|
userCode: 'EMP004',
|
|
deptName: '技术部',
|
|
position: '架构师',
|
|
currentPoints: 350,
|
|
pointLevel: '传奇',
|
|
monthGain: 30,
|
|
monthDeduct: 0,
|
|
totalGain: 350,
|
|
totalDeduct: 0,
|
|
lastUpdate: '2024-01-15 18:00:00'
|
|
}
|
|
])
|
|
|
|
const pagination = reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 4,
|
|
showTotal: true,
|
|
showPageSize: true
|
|
})
|
|
|
|
// 获取等级颜色
|
|
const getLevelColor = (level: string) => {
|
|
const colorMap: Record<string, string> = {
|
|
'新手': 'red',
|
|
'熟练': 'orange',
|
|
'专家': 'blue',
|
|
'大师': 'green',
|
|
'传奇': 'purple'
|
|
}
|
|
return colorMap[level] || 'gray'
|
|
}
|
|
|
|
// 搜索和重置
|
|
const search = async () => {
|
|
loading.value = true
|
|
// 模拟API请求
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
const reset = () => {
|
|
Object.assign(searchForm, {
|
|
userName: '',
|
|
deptName: '',
|
|
pointLevel: '',
|
|
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 openRuleModal = () => {
|
|
Message.info('积分规则配置功能开发中...')
|
|
}
|
|
|
|
const viewDetail = (record: any) => {
|
|
Message.info(`查看积分详情: ${record.userName}`)
|
|
}
|
|
|
|
const viewHistory = (record: any) => {
|
|
Message.info(`查看积分记录: ${record.userName}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
search()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mt-4 {
|
|
margin-top: 16px;
|
|
}
|
|
</style> |