462 lines
12 KiB
Vue
462 lines
12 KiB
Vue
<template>
|
|
<div class="car-use-log">
|
|
<el-card class="mb-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold text-blue-400">车辆出入库记录</h2>
|
|
</div>
|
|
|
|
<!-- 搜索栏 -->
|
|
<div class="search-bar mb-4 p-3 bg-blue-900/20 rounded">
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-select
|
|
v-model="searchForm.carId"
|
|
placeholder="选择车辆"
|
|
size="small"
|
|
>
|
|
<el-option
|
|
v-for="item in carListOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select
|
|
v-model="searchForm.action"
|
|
placeholder="动作类型"
|
|
size="small"
|
|
>
|
|
<el-option
|
|
v-for="item in actionOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select
|
|
v-model="searchForm.actionUser"
|
|
placeholder="动作执行人员"
|
|
size="small"
|
|
>
|
|
<el-option
|
|
v-for="item in userListOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6" class="text-right">
|
|
<el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
|
|
<el-button size="small" @click="handleReset">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 出入库记录表格 -->
|
|
<el-table
|
|
:data="logData"
|
|
style="width: 100%"
|
|
stripe
|
|
:row-key="row => row.Id"
|
|
>
|
|
<el-table-column
|
|
v-for="column in tableColumns"
|
|
:key="column.field"
|
|
:prop="column.field"
|
|
:label="column.title"
|
|
:width="column.width"
|
|
:align="column.align"
|
|
v-if="!column.hidden"
|
|
>
|
|
<template v-if="column.field === 'CarId'" slot-scope="scope">
|
|
<el-tag>{{ getCarLabel(scope.row.CarId) }}</el-tag>
|
|
</template>
|
|
<template v-else-if="column.field === 'Action'" slot-scope="scope">
|
|
<el-tag :type="getActionType(scope.row.Action)">{{ getActionLabel(scope.row.Action) }}</el-tag>
|
|
</template>
|
|
<template v-else-if="column.field === 'ActionUser'" slot-scope="scope">
|
|
<el-tag>{{ getUserLabel(scope.row.ActionUser) }}</el-tag>
|
|
</template>
|
|
<template v-else-if="column.field === 'CreateDate'" slot-scope="scope">
|
|
{{ formatDateTime(scope.row.CreateDate) }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<div class="mt-4 flex justify-end">
|
|
<el-pagination
|
|
layout="prev, pager, next, jumper, sizes, total"
|
|
:total="total"
|
|
:page-size="pageSize"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- 新增记录弹窗 -->
|
|
<el-dialog
|
|
title="新增出入库记录"
|
|
:visible.sync="dialogVisible"
|
|
width="500px"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
>
|
|
<el-form
|
|
:model="formData"
|
|
:rules="rules"
|
|
ref="formRef"
|
|
label-width="120px"
|
|
class="mt-4"
|
|
>
|
|
<el-form-item label="车辆" prop="CarId">
|
|
<el-select v-model="formData.CarId" placeholder="请选择车辆">
|
|
<el-option
|
|
v-for="item in carListOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="动作" prop="Action">
|
|
<el-select v-model="formData.Action" placeholder="请选择动作类型">
|
|
<el-option
|
|
v-for="item in actionOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="动作执行人员" prop="ActionUser">
|
|
<el-select v-model="formData.ActionUser" placeholder="请选择执行人员">
|
|
<el-option
|
|
v-for="item in userListOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="动作时间" prop="CreateDate">
|
|
<el-date-picker
|
|
v-model="formData.CreateDate"
|
|
type="datetime"
|
|
placeholder="请选择动作时间"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="fixed bottom-4 right-4">
|
|
<el-button type="primary" icon="el-icon-plus" circle size="medium" @click="handleAdd" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CarUseLog',
|
|
data() {
|
|
return {
|
|
// 表格数据
|
|
logData: [],
|
|
total: 0,
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
|
|
// 搜索表单
|
|
searchForm: {
|
|
carId: '',
|
|
action: '',
|
|
actionUser: ''
|
|
},
|
|
|
|
// 新增记录对话框
|
|
dialogVisible: false,
|
|
formData: {
|
|
Id: '',
|
|
CarId: '',
|
|
Action: '',
|
|
ActionUser: '',
|
|
CreateDate: ''
|
|
},
|
|
|
|
// 验证规则
|
|
rules: {
|
|
CarId: [
|
|
{ required: true, message: '请选择车辆', trigger: 'change' }
|
|
],
|
|
Action: [
|
|
{ required: true, message: '请选择动作类型', trigger: 'change' }
|
|
],
|
|
ActionUser: [
|
|
{ required: true, message: '请选择执行人员', trigger: 'change' }
|
|
],
|
|
CreateDate: [
|
|
{ required: true, message: '请选择动作时间', trigger: 'change' }
|
|
]
|
|
},
|
|
|
|
// 车辆列表选项
|
|
carListOptions: [
|
|
{ label: '京A12345', value: 1 },
|
|
{ label: '京B54321', value: 2 },
|
|
{ label: '京C67890', value: 3 }
|
|
],
|
|
|
|
// 动作类型选项
|
|
actionOptions: [
|
|
{ label: '出库', value: '出库' },
|
|
{ label: '入库', value: '入库' }
|
|
],
|
|
|
|
// 人员列表选项
|
|
userListOptions: [
|
|
{ label: '张三', value: '张三' },
|
|
{ label: '李四', value: '李四' },
|
|
{ label: '王五', value: '王五' },
|
|
{ label: '赵六', value: '赵六' }
|
|
]
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
tableColumns() {
|
|
return [
|
|
{field:'Id',title:'车辆记录ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
|
{field:'CarId',title:'车辆',type:'int',bind:{ key:'车辆列表',data:[]},link:true,width:150,align:'left'},
|
|
{field:'Action',title:'动作（出库/入库）',type:'string',bind:{ key:'车辆出入状态',data:[]},width:150,align:'left'},
|
|
{field:'ActionUser',title:'动作执行人员',type:'string',bind:{ key:'人员列表',data:[]},width:150,align:'left'},
|
|
{field:'CreateDate',title:'动作时间',type:'datetime',width:180,align:'left'}
|
|
]
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.loadData()
|
|
},
|
|
|
|
methods: {
|
|
// 加载数据
|
|
loadData() {
|
|
// 模拟数据加载
|
|
this.logData = [
|
|
{
|
|
Id: 1,
|
|
CarId: 1,
|
|
Action: '出库',
|
|
ActionUser: '张三',
|
|
CreateDate: '2024-01-20 09:30:00'
|
|
},
|
|
{
|
|
Id: 2,
|
|
CarId: 1,
|
|
Action: '入库',
|
|
ActionUser: '张三',
|
|
CreateDate: '2024-01-20 18:45:00'
|
|
},
|
|
{
|
|
Id: 3,
|
|
CarId: 2,
|
|
Action: '出库',
|
|
ActionUser: '李四',
|
|
CreateDate: '2024-01-21 10:15:00'
|
|
},
|
|
{
|
|
Id: 4,
|
|
CarId: 3,
|
|
Action: '出库',
|
|
ActionUser: '王五',
|
|
CreateDate: '2024-01-21 14:20:00'
|
|
},
|
|
{
|
|
Id: 5,
|
|
CarId: 2,
|
|
Action: '入库',
|
|
ActionUser: '李四',
|
|
CreateDate: '2024-01-21 19:30:00'
|
|
}
|
|
]
|
|
this.total = this.logData.length
|
|
},
|
|
|
|
// 搜索
|
|
handleSearch() {
|
|
// 模拟搜索逻辑
|
|
console.log('搜索条件:', this.searchForm)
|
|
this.loadData()
|
|
},
|
|
|
|
// 重置
|
|
handleReset() {
|
|
this.searchForm = {
|
|
carId: '',
|
|
action: '',
|
|
actionUser: ''
|
|
}
|
|
this.loadData()
|
|
},
|
|
|
|
// 新增
|
|
handleAdd() {
|
|
this.formData = {
|
|
Id: '',
|
|
CarId: '',
|
|
Action: '',
|
|
ActionUser: '',
|
|
CreateDate: new Date()
|
|
}
|
|
this.dialogVisible = true
|
|
},
|
|
|
|
// 提交表单
|
|
handleSubmit() {
|
|
this.$refs.formRef.validate((valid) => {
|
|
if (valid) {
|
|
// 模拟提交操作
|
|
console.log('提交数据:', this.formData)
|
|
this.dialogVisible = false
|
|
this.loadData()
|
|
this.$message.success('记录添加成功')
|
|
}
|
|
})
|
|
},
|
|
|
|
// 分页处理
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val
|
|
this.loadData()
|
|
},
|
|
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
this.loadData()
|
|
},
|
|
|
|
// 格式化日期时间
|
|
formatDateTime(dateTime) {
|
|
if (!dateTime) return ''
|
|
const date = new Date(dateTime)
|
|
return date.toLocaleString('zh-CN')
|
|
},
|
|
|
|
// 获取车辆标签
|
|
getCarLabel(value) {
|
|
const item = this.carListOptions.find(opt => opt.value === value)
|
|
return item ? item.label : value
|
|
},
|
|
|
|
// 获取动作标签
|
|
getActionLabel(value) {
|
|
const item = this.actionOptions.find(opt => opt.value === value)
|
|
return item ? item.label : value
|
|
},
|
|
|
|
// 获取动作类型（用于标签颜色）
|
|
getActionType(value) {
|
|
return value === '出库' ? 'warning' : 'success'
|
|
},
|
|
|
|
// 获取用户标签
|
|
getUserLabel(value) {
|
|
const item = this.userListOptions.find(opt => opt.value === value)
|
|
return item ? item.label : value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.car-use-log {
|
|
padding: 20px;
|
|
}
|
|
|
|
.search-bar {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 表格背景透明 */
|
|
:deep(.el-table) {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
:deep(.el-table__body-wrapper) {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
:deep(.el-table__row) {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* 表头透明 */
|
|
:deep(.el-table__header) {
|
|
background: transparent !important;
|
|
}
|
|
|
|
:deep(.el-table__header) th {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
color: #68c9ff !important;
|
|
border-color: rgba(104, 201, 255, 0.3) !important;
|
|
}
|
|
|
|
/* 确保表头在各种状态下都保持透明 */
|
|
:deep(.el-table th.is-leaf) {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* 表格边框 */
|
|
:deep(.el-table__row td) {
|
|
border-color: rgba(104, 201, 255, 0.2) !important;
|
|
color: #91d5ff !important;
|
|
}
|
|
|
|
/* 表格悬停效果 */
|
|
:deep(.el-table__row:hover td) {
|
|
background-color: rgba(104, 201, 255, 0.1) !important;
|
|
}
|
|
|
|
:deep(.el-dialog) {
|
|
background-color: rgba(0, 58, 97, 0.4) !important;
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(104, 201, 255, 0.3);
|
|
}
|
|
|
|
:deep(.el-dialog__header) {
|
|
background-color: rgba(0, 58, 97, 0.6) !important;
|
|
border-bottom: 1px solid rgba(104, 201, 255, 0.3);
|
|
}
|
|
|
|
:deep(.el-dialog__title) {
|
|
color: #91d5ff !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
:deep(.el-dialog__footer) {
|
|
background-color: rgba(0, 58, 97, 0.6) !important;
|
|
border-top: 1px solid rgba(104, 201, 255, 0.3);
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
:deep(.el-form-label) {
|
|
color: #68c9ff !important;
|
|
font-weight: 500;
|
|
}
|
|
</style> |