yifengyide/src/views/day_evaluation/index.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>