382 lines
9.8 KiB
Vue
382 lines
9.8 KiB
Vue
<template>
|
||
<!-- 钥匙取用记录组件模板 -->
|
||
<div class="p-4">
|
||
<h2 class="text-xl font-bold text-blue-400 mb-4">钥匙取用记录</h2>
|
||
|
||
<!-- 筛选条件区域 -->
|
||
<div class="filter-container mb-4">
|
||
<el-form :inline="true" :model="searchForm" class="mb-4">
|
||
<el-form-item label="钥匙柜：">
|
||
<el-select v-model="searchForm.cabinetId" placeholder="请选择钥匙柜" style="width: 180px">
|
||
<el-option v-for="item in cabinetOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="钥匙名称：">
|
||
<el-input v-model="searchForm.keyName" placeholder="请输入钥匙名称" style="width: 180px" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="申请人：">
|
||
<el-input v-model="searchForm.applicant" placeholder="请输入申请人" style="width: 180px" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="日期范围：">
|
||
<el-date-picker
|
||
v-model="searchForm.dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
style="width: 280px"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||
<el-button @click="handleReset">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 记录表格区域 -->
|
||
<el-table :data="recordList" style="width: 100%" border>
|
||
<el-table-column prop="id" label="记录ID" width="80" />
|
||
<el-table-column prop="cabinetName" label="钥匙柜" width="150" />
|
||
<el-table-column prop="keySlot" label="槽位" width="100" />
|
||
<el-table-column prop="keyName" label="钥匙名称" width="180" />
|
||
<el-table-column prop="keyType" label="钥匙类型" width="120" />
|
||
<el-table-column prop="applicant" label="申请人" width="120" />
|
||
<el-table-column prop="applyTime" label="申请时间" width="180" />
|
||
<el-table-column prop="applyReason" label="申请事由" min-width="200" show-overflow-tooltip />
|
||
<el-table-column prop="status" label="状态" width="100">
|
||
<template #default="scope">
|
||
<el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="operation" label="操作人" width="120" />
|
||
<el-table-column prop="operationTime" label="操作时间" width="180" />
|
||
</el-table>
|
||
|
||
<!-- 分页组件 -->
|
||
<div class="pagination-container mt-4">
|
||
<el-pagination
|
||
v-model:current-page="pagination.currentPage"
|
||
v-model:page-size="pagination.pageSize"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="pagination.total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
/**
|
||
* 钥匙取用记录组件
|
||
* 用于展示和查询钥匙的使用申请和取用记录
|
||
*/
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
|
||
// 搜索表单数据
|
||
const searchForm = reactive({
|
||
cabinetId: '', // 钥匙柜ID
|
||
keyName: '', // 钥匙名称
|
||
applicant: '', // 申请人
|
||
dateRange: null // 日期范围
|
||
})
|
||
|
||
// 钥匙柜选项列表
|
||
const cabinetOptions = ref([
|
||
{ value: '1', label: '指挥中心钥匙柜1#' },
|
||
{ value: '2', label: '指挥中心钥匙柜2#' }
|
||
])
|
||
|
||
// 记录列表数据
|
||
const recordList = ref([])
|
||
|
||
// 分页信息
|
||
const pagination = reactive({
|
||
currentPage: 1, // 当前页码
|
||
pageSize: 10, // 每页条数
|
||
total: 0 // 总记录数
|
||
})
|
||
|
||
/**
|
||
* 获取状态对应的标签类型
|
||
* @param status 状态字符串
|
||
* @returns 标签类型
|
||
*/
|
||
const getStatusType = (status: string): string => {
|
||
const statusMap: Record<string, string> = {
|
||
'申请中': 'info',
|
||
'已批准': 'primary',
|
||
'已领取': 'success',
|
||
'已归还': 'warning',
|
||
'已拒绝': 'danger'
|
||
}
|
||
return statusMap[status] || 'default'
|
||
}
|
||
|
||
/**
|
||
* 模拟获取记录数据
|
||
*/
|
||
const fetchRecords = () => {
|
||
// 这里应该是实际的API调用，现在使用模拟数据
|
||
const mockData = [
|
||
{
|
||
id: '1',
|
||
cabinetName: '指挥中心钥匙柜1#',
|
||
keySlot: '1号槽位',
|
||
keyName: '苏A54321',
|
||
keyType: '车辆钥匙',
|
||
applicant: '值班员1',
|
||
applyTime: '2025-10-10 09:30:00',
|
||
applyReason: '外出执行任务需要用车',
|
||
status: '已归还',
|
||
operation: '管理员1',
|
||
operationTime: '2025-10-10 11:30:00'
|
||
},
|
||
{
|
||
id: '2',
|
||
cabinetName: '指挥中心钥匙柜1#',
|
||
keySlot: '3号槽位',
|
||
keyName: '1#仓库1号门1号钥匙',
|
||
keyType: '仓库钥匙',
|
||
applicant: '值班员1',
|
||
applyTime: '2025-10-12 10:00:00',
|
||
applyReason: '需要进入仓库领取物资',
|
||
status: '已领取',
|
||
operation: '管理员1',
|
||
operationTime: '2025-10-12 10:05:00'
|
||
},
|
||
{
|
||
id: '3',
|
||
cabinetName: '指挥中心钥匙柜2#',
|
||
keySlot: '2号槽位',
|
||
keyName: '苏A123456',
|
||
keyType: '车辆钥匙',
|
||
applicant: '值班员2',
|
||
applyTime: '2025-10-12 14:20:00',
|
||
applyReason: '外出巡逻需要用车',
|
||
status: '申请中',
|
||
operation: '',
|
||
operationTime: ''
|
||
},
|
||
{
|
||
id: '4',
|
||
cabinetName: '指挥中心钥匙柜1#',
|
||
keySlot: '3号槽位',
|
||
keyName: '1#仓库1号门2号钥匙',
|
||
keyType: '仓库钥匙',
|
||
applicant: '值班员1',
|
||
applyTime: '2025-10-12 09:15:00',
|
||
applyReason: '需要进入仓库盘点物资',
|
||
status: '已批准',
|
||
operation: '管理员1',
|
||
operationTime: '2025-10-12 09:20:00'
|
||
}
|
||
]
|
||
|
||
// 根据搜索条件过滤数据
|
||
let filteredData = [...mockData]
|
||
|
||
if (searchForm.cabinetId) {
|
||
filteredData = filteredData.filter(item => {
|
||
const cabinetMap: Record<string, string> = {
|
||
'1': '指挥中心钥匙柜1#',
|
||
'2': '指挥中心钥匙柜2#'
|
||
}
|
||
return item.cabinetName === cabinetMap[searchForm.cabinetId]
|
||
})
|
||
}
|
||
|
||
if (searchForm.keyName) {
|
||
filteredData = filteredData.filter(item =>
|
||
item.keyName.includes(searchForm.keyName)
|
||
)
|
||
}
|
||
|
||
if (searchForm.applicant) {
|
||
filteredData = filteredData.filter(item =>
|
||
item.applicant.includes(searchForm.applicant)
|
||
)
|
||
}
|
||
|
||
// 更新分页信息
|
||
pagination.total = filteredData.length
|
||
|
||
// 根据分页参数截取数据
|
||
const start = (pagination.currentPage - 1) * pagination.pageSize
|
||
const end = start + pagination.pageSize
|
||
recordList.value = filteredData.slice(start, end)
|
||
}
|
||
|
||
/**
|
||
* 查询按钮点击事件处理
|
||
*/
|
||
const handleSearch = () => {
|
||
pagination.currentPage = 1
|
||
fetchRecords()
|
||
}
|
||
|
||
/**
|
||
* 重置按钮点击事件处理
|
||
*/
|
||
const handleReset = () => {
|
||
// 重置搜索表单
|
||
Object.assign(searchForm, {
|
||
cabinetId: '',
|
||
keyName: '',
|
||
applicant: '',
|
||
dateRange: null
|
||
})
|
||
|
||
// 重置分页并重新获取数据
|
||
pagination.currentPage = 1
|
||
fetchRecords()
|
||
}
|
||
|
||
/**
|
||
* 每页条数变化处理
|
||
* @param size 新的每页条数
|
||
*/
|
||
const handleSizeChange = (size: number) => {
|
||
pagination.pageSize = size
|
||
fetchRecords()
|
||
}
|
||
|
||
/**
|
||
* 页码变化处理
|
||
* @param current 新的页码
|
||
*/
|
||
const handleCurrentChange = (current: number) => {
|
||
pagination.currentPage = current
|
||
fetchRecords()
|
||
}
|
||
|
||
/**
|
||
* 组件挂载时初始化数据
|
||
*/
|
||
onMounted(() => {
|
||
fetchRecords()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/**
|
||
* 钥匙取用记录组件样式
|
||
* 保持与系统整体风格一致，使用空军蓝配色和透明背景
|
||
*/
|
||
/* 设置页面背景为透明 */
|
||
.p-4 {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* 筛选容器样式 */
|
||
.filter-container {
|
||
background: rgba(12, 43, 77, 0.7) !important;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
border: 1px solid #68c9ff;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
/* 表格样式 */
|
||
:deep(.el-table) {
|
||
background: transparent !important;
|
||
border: 1px solid #68c9ff;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
:deep(.el-table tr){
|
||
background: transparent !important;
|
||
}
|
||
|
||
:deep(.el-table__header th) {
|
||
background: rgba(12, 43, 77, 0.7) !important;
|
||
border-bottom: 1px solid #68c9ff !important;
|
||
color: #68c9ff !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
:deep(.el-table__row) {
|
||
color: #b6dfff !important;
|
||
border-bottom: 1px solid rgba(104, 201, 255, 0.3) !important;
|
||
}
|
||
|
||
:deep(.el-table__row:hover > td) {
|
||
background: rgba(104, 201, 255, 0.1) !important;
|
||
}
|
||
|
||
:deep(.el-table__row.el-table__row--striped > td) {
|
||
background: rgba(255, 255, 255, 0.02) !important;
|
||
}
|
||
|
||
/* 分页组件样式 */
|
||
.pagination-container {
|
||
background: rgba(12, 43, 77, 0.7) !important;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
border: 1px solid #68c9ff;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
:deep(.el-pagination.is-background .el-pager li) {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: #b6dfff;
|
||
border: 1px solid #68c9ff;
|
||
}
|
||
|
||
:deep(.el-pagination.is-background .el-pager li:hover:not(.disabled)) {
|
||
background: rgba(104, 201, 255, 0.2);
|
||
color: #68c9ff;
|
||
}
|
||
|
||
:deep(.el-pagination.is-background .el-pager li.active) {
|
||
background: #68c9ff;
|
||
color: #0c2b4d;
|
||
border-color: #68c9ff;
|
||
}
|
||
|
||
/* 输入框和下拉框样式 */
|
||
:deep(.el-input__wrapper) {
|
||
background: rgba(255, 255, 255, 0.05) !important;
|
||
border-color: #68c9ff !important;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
color: #b6dfff !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
:deep(.el-select) {
|
||
background: rgba(255, 255, 255, 0.05) !important;
|
||
}
|
||
|
||
:deep(.el-date-editor) {
|
||
background: rgba(255, 255, 255, 0.05) !important;
|
||
}
|
||
|
||
/* 标题样式 */
|
||
.text-xl {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.font-bold {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.text-blue-400 {
|
||
color: #68c9ff;
|
||
}
|
||
|
||
.mb-4 {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.mt-4 {
|
||
margin-top: 16px;
|
||
}
|
||
</style> |