g82tt/WarehouseClient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新项目：修复CarManager组件并提交全部文件

Browse Source
This commit is contained in:
g82tt
2025-10-17 14:09:07 +08:00
parent 85b63b23cd
commit 64a731b4a5
46 changed files with 5631 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

378
src/views/Key/KeyRecord.vue Normal file
View File

@@ -0,0 +1,378 @@
<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__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>