425 lines
12 KiB
Vue
425 lines
12 KiB
Vue
<template>
|
||
<!-- 装备流转记录 -->
|
||
<div class="app-container">
|
||
<el-form ref="queryForm" size="small" inline label-width="auto" :model="queryParams">
|
||
<el-card class="search-box">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item prop="keyword">
|
||
<el-input
|
||
clearable
|
||
style="width: 240px"
|
||
placeholder="请输入关键字"
|
||
v-model.trim="queryParams.keyWord"
|
||
/>
|
||
</el-form-item>
|
||
|
||
|
||
|
||
<el-form-item>
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="datetimerange"
|
||
range-separator="至"
|
||
style="width: 240px"
|
||
value-format="yyyy-MM-dd"
|
||
end-placeholder="结束日期"
|
||
start-placeholder="开始日期"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12" style="text-align: right;">
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery"> 查询</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
|
||
</el-card>
|
||
</el-form>
|
||
|
||
<el-card class="content-box">
|
||
<el-row>
|
||
<el-col :span="24" style="text-align: right;">
|
||
<el-button icon="el-icon-download" size="mini" @click="onHandleExport">导出数据</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="table-container" style="flex: 1; overflow-y: auto;">
|
||
<el-table :data="tableData" style="width: 100%" border stripe height="100%">
|
||
<el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
|
||
<el-table-column align="center" show-overflow-tooltip prop="createUser" label="操作人"/>
|
||
<el-table-column align="center" show-overflow-tooltip prop="type" label="操作类型">
|
||
<template slot-scope="scope">
|
||
<el-tag size="mini">
|
||
{{ typeInfo[scope.row.type] }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" show-overflow-tooltip prop="createTime" label="操作时间"/>
|
||
<!-- <el-table-column align="center" show-overflow-tooltip prop="changeStatus" label="流转前状态">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.changeStatus == 1" size="mini">在库</el-tag>
|
||
<el-tag v-if="scope.row.changeStatus == 2 || scope.row.changeStatus == 3" size="mini">
|
||
在用
|
||
</el-tag>
|
||
<el-tag v-if="scope.row.changeStatus == 5" size="mini"> 维修</el-tag>
|
||
</template>
|
||
</el-table-column>-->
|
||
<!-- <el-table-column align="center" show-overflow-tooltip prop="changeStatus" label="流转后状态">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.status == 1" size="mini">在库</el-tag>
|
||
<el-tag v-if="scope.row.status == 2 || scope.row.status == 3" size="mini">
|
||
在用
|
||
</el-tag>
|
||
<el-tag v-if="scope.row.status == 5" size="mini"> 维修</el-tag>
|
||
</template>
|
||
</el-table-column>-->
|
||
<!-- <el-table-column align="center" show-overflow-tooltip prop="useUint" label="使用单位"/>-->
|
||
<!-- <el-table-column align="center" show-overflow-tooltip prop="proName" label="使用项目"/>-->
|
||
<!-- <el-table-column align="center" show-overflow-tooltip prop="proLocation" label="地址"/>-->
|
||
<el-table-column align="center" show-overflow-tooltip prop="devNum" label="装备数量"/>
|
||
<el-table-column align="center" show-overflow-tooltip prop="address" label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" @click="onHandleOutRecord(scope.row)">
|
||
{{ typeInfo[scope.row.type] }}记录单
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<div class="pagination-container-fage" style="flex-shrink: 0;">
|
||
<pagination
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getRoamRecordList"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
<!-- 出库记录单 -->
|
||
<el-dialog title="出库记录单" :visible.sync="outRecordVisible" width="80%" append-to-body>
|
||
<el-row>
|
||
<el-button size="mini" type="primary" @click="onHandleDownload">下载</el-button>
|
||
<el-button size="mini" type="primary" @click="onHandlePrint">打印</el-button>
|
||
<el-button size="mini" type="primary" @click="onHandleClose">关闭</el-button>
|
||
</el-row>
|
||
<el-row class="record-row">
|
||
<el-col :span="12">
|
||
<div> 流转前使用单位：{{ outRecordParams.changeUnit }}</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div> 流转后使用单位：{{ outRecordParams.useUint }}</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div> 流转前使用工程：/</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row class="record-row">
|
||
<el-col :span="12">
|
||
<div> 流转后使用工程： {{ outRecordParams.proName }}</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div> 装备数量： {{ outRecordParams.devNum }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
|
||
<div class="dialog-table">
|
||
<el-table :data="outRecordData" style="width: 100%" border stripe>
|
||
<el-table-column align="center" show-overflow-tooltip type="index" width="100px" label="序号"/>
|
||
<el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称"/>
|
||
<!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
|
||
<el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号"/>
|
||
<el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码"/>
|
||
</el-table>
|
||
</div>
|
||
</vue-easy-print>
|
||
|
||
<el-row class="record-row" style="margin-top: 10px">
|
||
<el-col :span="24" style="text-align: right">
|
||
<div>
|
||
操作人：
|
||
<span style="margin-right: 30px"> {{ outRecordParams.createUser }}</span>
|
||
操作时间：
|
||
{{ outRecordParams.createTime }}
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getRoamRecordListAPI, getOutRecordListAPI } from '@/api/EquipmentRoamRecord'
|
||
import vueEasyPrint from 'vue-easy-print'
|
||
|
||
export default {
|
||
components: {
|
||
vueEasyPrint
|
||
},
|
||
data() {
|
||
return {
|
||
total: 0,
|
||
tableData: [],
|
||
dateRange: [],
|
||
typeInfo: {
|
||
1: '退库',
|
||
2: '出库',
|
||
3: '退役',
|
||
4: '维修'
|
||
},
|
||
queryParams: {
|
||
keyWord: '', // 关键字
|
||
type: '4', // 操作类型
|
||
startTime: '', // 操作时间
|
||
endTime: '', // 操作时间
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
|
||
// 出库记录单
|
||
outRecordVisible: false,
|
||
outRecordParams: {
|
||
changeUnit: '',
|
||
useUint: '',
|
||
proName: '',
|
||
devNum: ''
|
||
},
|
||
outRecordData: [],
|
||
recordId: ''
|
||
}
|
||
},
|
||
created() {
|
||
this.getRoamRecordList()
|
||
},
|
||
methods: {
|
||
// 获取流转记录列表
|
||
async getRoamRecordList() {
|
||
if (this.dateRange.length > 0) {
|
||
this.queryParams.startTime = this.dateRange[0]
|
||
this.queryParams.endTime = this.dateRange[1]
|
||
}
|
||
const res = await getRoamRecordListAPI(this.queryParams)
|
||
this.tableData = res.rows
|
||
this.total = res.total || 0
|
||
},
|
||
|
||
// 出库记录单
|
||
async onHandleOutRecord(row) {
|
||
const { changeUnit, useUint, proName, devNum, id, createUser, createTime } = row
|
||
this.outRecordParams = { changeUnit, useUint, proName, devNum, createUser, createTime }
|
||
this.recordId = id
|
||
const res = await getOutRecordListAPI({ id })
|
||
this.outRecordData = res.data
|
||
this.outRecordVisible = true
|
||
},
|
||
|
||
// 查询
|
||
onHandleQuery() {
|
||
this.getRoamRecordList()
|
||
},
|
||
|
||
// 重置
|
||
onHandleReset() {
|
||
this.queryParams = { keyWord: '', type: '', startTime: '', endTime: '', pageNum: 1, pageSize: 10 }
|
||
this.dateRange = []
|
||
this.getRoamRecordList()
|
||
},
|
||
|
||
// 导出数据
|
||
onHandleExport() {
|
||
// this.downLo
|
||
this.download(
|
||
'material-mall/decChange/export',
|
||
{
|
||
...this.queryParams
|
||
},
|
||
`装备流转记录.xlsx`
|
||
)
|
||
},
|
||
|
||
// 下载
|
||
onHandleDownload() {
|
||
this.download('material-mall/decChange/exportDetails', { id: this.recordId }, `出库记录单.xlsx`)
|
||
},
|
||
|
||
// 打印
|
||
onHandlePrint() {
|
||
this.$refs.recordPrintRef.print()
|
||
},
|
||
|
||
// 关闭
|
||
onHandleClose() {
|
||
this.outRecordVisible = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.record-row {
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.app-container {
|
||
// background-color: #f5f5f5; /* 设置整体灰色背景 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
|
||
.button-group {
|
||
float: right;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.el-form-item--small.el-form-item {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
|
||
.search-box {
|
||
margin-bottom: 20px;
|
||
border-radius: 8px;
|
||
padding: 0;
|
||
::v-deep .el-card__body {
|
||
padding: 20px !important;
|
||
}
|
||
}
|
||
|
||
.content-box {
|
||
border-radius: 8px;
|
||
height: calc(100vh - 210px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
|
||
::v-deep .el-card__body {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
height: 100% !important;
|
||
padding: 20px;
|
||
}
|
||
|
||
.el-row:first-child {
|
||
margin-bottom: 16px;
|
||
flex-shrink: 0;
|
||
|
||
.el-col {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
.table-container {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
margin-bottom: 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.pagination-wrapper {
|
||
flex-shrink: 0;
|
||
padding-top: 6px;
|
||
margin-top: auto;
|
||
|
||
::v-deep .pagination-container {
|
||
padding: 0px 20px !important;
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-table {
|
||
// 启用斑马纹
|
||
&.el-table--striped .el-table__body {
|
||
tr.el-table__row--striped td {
|
||
background-color: #F6FBFA !important; // 浅紫色
|
||
}
|
||
}
|
||
|
||
.el-table__header {
|
||
background: #E9F0EE;
|
||
|
||
th {
|
||
background: #E9F0EE !important;
|
||
color: #606266;
|
||
font-weight: 600;
|
||
height: 50px;
|
||
}
|
||
}
|
||
|
||
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
|
||
background-color: #CCF1E9 !important;
|
||
}
|
||
}
|
||
}
|
||
.dialog-table {
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
||
::v-deep .el-table {
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
|
||
// 启用斑马纹
|
||
&.el-table--striped .el-table__body {
|
||
tr.el-table__row--striped td {
|
||
background-color: #F6FBFA !important;
|
||
}
|
||
}
|
||
|
||
.el-table__header {
|
||
background: #E9F0EE;
|
||
|
||
th {
|
||
background: #E9F0EE !important;
|
||
color: #606266;
|
||
font-weight: 600;
|
||
height: 45px;
|
||
font-size: 14px;
|
||
border-bottom: 2px solid #e4e7ed;
|
||
}
|
||
}
|
||
|
||
.el-table__body {
|
||
tr {
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
td {
|
||
padding: 12px 8px;
|
||
font-size: 13px;
|
||
border-bottom: 1px solid #f0f2f5;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
|
||
background-color: #CCF1E9 !important;
|
||
}
|
||
|
||
// 表格边框优化
|
||
&::before {
|
||
display: none;
|
||
}
|
||
|
||
&::after {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|