348 lines
9.7 KiB
Vue
348 lines
9.7 KiB
Vue
<template>
|
|
<lay-container fluid="true" style="padding: 20px">
|
|
<!-- 搜索区域改为卡片式布局 -->
|
|
<lay-row :space="10">
|
|
<lay-col :md="24">
|
|
<lay-card>
|
|
<lay-form style="margin-top: 20px">
|
|
<lay-row>
|
|
<lay-col :md="5">
|
|
<lay-form-item label="记录状态：" label-width="80">
|
|
<lay-select v-model="searchForm.status" placeholder="请选择状态">
|
|
<lay-select-option :value="1" label="待审核"></lay-select-option>
|
|
<lay-select-option :value="2" label="审核通过"></lay-select-option>
|
|
</lay-select>
|
|
</lay-form-item>
|
|
</lay-col>
|
|
<lay-col :md="4">
|
|
<lay-form-item label-width="0">
|
|
<lay-button type="primary" @click="search">查询</lay-button>
|
|
<lay-button @click="resetSearch" style="margin-left: 10px">重置</lay-button>
|
|
</lay-form-item>
|
|
</lay-col>
|
|
</lay-row>
|
|
</lay-form>
|
|
</lay-card>
|
|
</lay-col>
|
|
<!-- 列表区域 -->
|
|
<lay-col :md="24">
|
|
<lay-card>
|
|
<div style="padding: 10px">
|
|
<span style="font-size: 18px;vertical-align: center;margin-right: 20px">个人记录列表</span>
|
|
<lay-button type="primary" @click="openNew()" size="sm">新增记录</lay-button>
|
|
</div>
|
|
<lay-table size="lg" :columns="columns" :data-source="dataSource" :page="page" @change="change">
|
|
<template v-slot:status="{ data }">
|
|
<span v-if="data.status == 1" style="color: #1E9FFF">待审核</span>
|
|
<span v-if="data.status == 2" style="color: #009688">审核通过</span>
|
|
</template>
|
|
<template v-slot:operator="{ data }">
|
|
<lay-space size="lg">
|
|
<span style="color: #00A394;cursor: pointer" @click="showDetail(data)">详情</span>
|
|
<span style="color: #00A394;cursor: pointer" @click="editRecord(data)">编辑</span>
|
|
<lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="deleteRecord(data)">
|
|
<span style="color: #00A394;cursor: pointer">删除</span>
|
|
</lay-popconfirm>
|
|
</lay-space>
|
|
</template>
|
|
</lay-table>
|
|
</lay-card>
|
|
</lay-col>
|
|
<lay-layer v-model="showForm" :title="isEdit ? '编辑记录' : '新增记录'" :type="4" :shade="true" :area="['950px', '100%']"
|
|
:btn="formButtons">
|
|
<lay-container fluid="true" style="padding: 20px">
|
|
<lay-form :model="formData">
|
|
<lay-form-item required label="考评对象" prop="targetPerson">
|
|
<lay-input v-model="formData.targetPerson" placeholder="请输入考评对象"></lay-input>
|
|
</lay-form-item>
|
|
<lay-form-item required label="考评类型" prop="evaluationType">
|
|
<lay-select v-model="formData.evaluationType" placeholder="请选择">
|
|
<lay-select-option :value="1" label="加分"></lay-select-option>
|
|
<lay-select-option :value="2" label="减分"></lay-select-option>
|
|
</lay-select>
|
|
</lay-form-item>
|
|
<lay-form-item required label="考评项目" prop="evaluationItem">
|
|
<lay-select v-model="formData.evaluationItem" placeholder="请选择">
|
|
<lay-select-option v-for="item in evaluationItems" :key="item.value" :value="item.value"
|
|
:label="item.label"></lay-select-option>
|
|
</lay-select>
|
|
</lay-form-item>
|
|
<lay-form-item required label="分值" prop="score">
|
|
<lay-input-number v-model="formData.score" placeholder="请输入分值"></lay-input-number>
|
|
</lay-form-item>
|
|
<lay-form-item required label="发生时间" prop="occurTime">
|
|
<lay-date-picker v-model="formData.occurTime" type="datetime"></lay-date-picker>
|
|
</lay-form-item>
|
|
<lay-form-item required label="证明人" prop="witness">
|
|
<lay-select v-model="formData.witness" placeholder="请选择">
|
|
<lay-select-option v-for="person in witnessList" :key="person.value" :value="person.value"
|
|
:label="person.label"></lay-select-option>
|
|
</lay-select>
|
|
</lay-form-item>
|
|
<lay-form-item label="附件" prop="attachment">
|
|
<lay-upload v-model="formData.attachment" :auto="true"></lay-upload>
|
|
</lay-form-item>
|
|
<lay-form-item label="备注" prop="remark">
|
|
<lay-textarea v-model="formData.remark" placeholder="请输入备注"></lay-textarea>
|
|
</lay-form-item>
|
|
</lay-form>
|
|
</lay-container>
|
|
</lay-layer>
|
|
</lay-row>
|
|
</lay-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
import { layer } from '@layui/layer-vue'
|
|
|
|
// 列表数据
|
|
const dataSource = ref([
|
|
{
|
|
id: 1,
|
|
occurTime: '2024-03-15 14:30',
|
|
targetPerson: '张三',
|
|
evaluationType: 1,
|
|
evaluationItem: '工作表现优异',
|
|
score: 5,
|
|
reporter: '李四',
|
|
status: 1
|
|
},
|
|
{
|
|
id: 2,
|
|
occurTime: '2024-03-14 09:15',
|
|
targetPerson: '王五',
|
|
evaluationType: 2,
|
|
evaluationItem: '迟到',
|
|
score: -2,
|
|
reporter: '李四',
|
|
status: 2
|
|
}
|
|
])
|
|
|
|
// 表单显示控制
|
|
const showForm = ref(false)
|
|
const isEdit = ref(false)
|
|
|
|
// 表单数据
|
|
const formData = reactive({
|
|
id: 0,
|
|
targetPerson: '',
|
|
evaluationType: 1,
|
|
evaluationItem: '',
|
|
score: 0,
|
|
occurTime: '',
|
|
witness: '',
|
|
attachment: [],
|
|
remark: ''
|
|
})
|
|
|
|
// 考评项目列表
|
|
const evaluationItems = [
|
|
{ value: 1, label: '工作表现优异' },
|
|
{ value: 2, label: '迟到' },
|
|
{ value: 3, label: '加班' },
|
|
{ value: 4, label: '工作失误' }
|
|
]
|
|
|
|
// 证明人列表
|
|
const witnessList = [
|
|
{ value: 1, label: '张主任' },
|
|
{ value: 2, label: '王经理' },
|
|
{ value: 3, label: '李组长' }
|
|
]
|
|
|
|
// 表格列定义
|
|
const columns = [
|
|
{
|
|
title: "序号",
|
|
width: "80px",
|
|
key: "id"
|
|
},
|
|
{
|
|
title: "发生时间",
|
|
width: "160px",
|
|
key: "occurTime"
|
|
},
|
|
{
|
|
title: "考评对象",
|
|
width: "120px",
|
|
key: "targetPerson"
|
|
},
|
|
{
|
|
title: "考评类型",
|
|
width: "100px",
|
|
key: "evaluationType",
|
|
render: (data: any) => data.evaluationType === 1 ? '加分' : '减分'
|
|
},
|
|
{
|
|
title: "考评项",
|
|
width: "150px",
|
|
key: "evaluationItem"
|
|
},
|
|
{
|
|
title: "分值",
|
|
width: "80px",
|
|
key: "score"
|
|
},
|
|
{
|
|
title: "填报人",
|
|
width: "100px",
|
|
key: "reporter"
|
|
},
|
|
{
|
|
title: "记录状态",
|
|
width: "100px",
|
|
customSlot: 'status',
|
|
key: "status"
|
|
},
|
|
{
|
|
title: '操作',
|
|
width: '180px',
|
|
customSlot: 'operator',
|
|
key: 'operator',
|
|
align: 'center',
|
|
fixed: 'right'
|
|
}
|
|
]
|
|
|
|
// 按钮事件处理
|
|
const openNew = () => {
|
|
isEdit.value = false
|
|
resetForm()
|
|
showForm.value = true
|
|
}
|
|
|
|
const editRecord = (data: any) => {
|
|
isEdit.value = true
|
|
Object.assign(formData, data)
|
|
showForm.value = true
|
|
}
|
|
|
|
const showDetail = (data: any) => {
|
|
layer.msg('查看详情：' + JSON.stringify(data))
|
|
}
|
|
|
|
const deleteRecord = async (data: any) => {
|
|
layer.msg('删除成功！', { icon: 1 })
|
|
// 实际项目中这里需要调用删除API
|
|
}
|
|
|
|
const resetForm = () => {
|
|
formData.id = 0
|
|
formData.targetPerson = ''
|
|
formData.evaluationType = 1
|
|
formData.evaluationItem = ''
|
|
formData.score = 0
|
|
formData.occurTime = ''
|
|
formData.witness = ''
|
|
formData.attachment = []
|
|
formData.remark = ''
|
|
}
|
|
|
|
// 表单按钮定义
|
|
const formButtons = ref([
|
|
{
|
|
text: "确认",
|
|
callback: async () => {
|
|
if (!formData.targetPerson) {
|
|
layer.msg('考评对象不能为空！', { icon: 2 })
|
|
return
|
|
}
|
|
// 实际项目中这里需要调用保存API
|
|
layer.msg('提交成功！', { icon: 1 })
|
|
showForm.value = false
|
|
}
|
|
},
|
|
{
|
|
text: "取消",
|
|
callback: () => {
|
|
showForm.value = false
|
|
}
|
|
}
|
|
])
|
|
|
|
// 添加搜索表单数据
|
|
const searchForm = reactive({
|
|
status: undefined as number | undefined
|
|
})
|
|
|
|
// 添加搜索方法
|
|
const search = () => {
|
|
// 实际项目中这里需要调用搜索API
|
|
console.log('搜索条件：', searchForm)
|
|
// 模拟搜索效果
|
|
if (searchForm.status) {
|
|
dataSource.value = dataSource.value.filter(item => item.status === searchForm.status)
|
|
} else {
|
|
// 重新获取所有数据
|
|
getListData()
|
|
}
|
|
}
|
|
|
|
// 重置搜索
|
|
const resetSearch = () => {
|
|
searchForm.status = undefined
|
|
// 重新获取所有数据
|
|
getListData()
|
|
}
|
|
|
|
// 分页配置
|
|
const page = reactive({
|
|
total: 100, // 总条数
|
|
current: 1, // 当前页
|
|
limit: 10, // 每页条数
|
|
showRefresh: true, // 显示刷新按钮
|
|
showLimit: true // 显示条数选择器
|
|
})
|
|
|
|
// 分页变化处理
|
|
const change = ({ current, limit }: { current: number, limit: number }) => {
|
|
page.current = current
|
|
page.limit = limit
|
|
getListData() // 重新获取数据
|
|
}
|
|
|
|
// 修改 getListData 方法
|
|
const getListData = () => {
|
|
// 实际项目中这里需要调用API并传入分页参数
|
|
// 例如: { page: page.current, limit: page.limit }
|
|
|
|
// 模拟数据
|
|
dataSource.value = [
|
|
{
|
|
id: 1,
|
|
occurTime: '2024-03-15 14:30',
|
|
targetPerson: '张三',
|
|
evaluationType: 1,
|
|
evaluationItem: '工作表现优异',
|
|
score: 5,
|
|
reporter: '李四',
|
|
status: 1
|
|
},
|
|
{
|
|
id: 2,
|
|
occurTime: '2024-03-14 09:15',
|
|
targetPerson: '王五',
|
|
evaluationType: 2,
|
|
evaluationItem: '迟到',
|
|
score: -2,
|
|
reporter: '李四',
|
|
status: 2
|
|
}
|
|
]
|
|
page.total = 100 // 设置总条数
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.layui-table-header .layui-table-cell {
|
|
background-color: #ECF8FA !important;
|
|
}
|
|
|
|
/* 移除之前的搜索区域样式 */
|
|
.layui-inline {
|
|
margin-right: 15px;
|
|
}
|
|
</style>
|