装备流转记录页面完善
This commit is contained in:
BianLzhaoMin
parent
5853f12ce8
commit
02d08c2e32
|
|
@ -8,3 +8,12 @@ export const getRoamRecordListAPI = (data) => {
|
|||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取出库记录单
|
||||
export const getOutRecordListAPI = (data) => {
|
||||
return request({
|
||||
url: '/material-mall/decChange/getDevDetails',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,32 +2,49 @@
|
|||
<!-- 装备流转记录 -->
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-form ref="queryForm" size="small" label-width="auto" :model="queryParams">
|
||||
<el-row :gutter="10" style="display: flex; justify-content: space-between">
|
||||
<el-col>
|
||||
<el-form-item>
|
||||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item>
|
||||
<el-input v-model="queryParams.deptName" placeholder="请输入操作类型" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item>
|
||||
<el-input v-model="queryParams.deptName" placeholder="请输入操作时间" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-form ref="queryForm" size="small" inline label-width="auto" :model="queryParams">
|
||||
<el-form-item prop="keyword">
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 240px"
|
||||
placeholder="请输入关键字"
|
||||
v-model.trim="queryParams.keyWord"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-col style="text-align: right">
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">导出数据</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item prop="type">
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
style="width: 240px"
|
||||
v-model="queryParams.type"
|
||||
placeholder="请选择操作类型"
|
||||
>
|
||||
<el-option label="入库" value="1" />
|
||||
<el-option label="出库" value="2" />
|
||||
<el-option label="退役" value="3" />
|
||||
<el-option label="维修" value="4" />
|
||||
</el-select>
|
||||
</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-form-item>
|
||||
<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-button icon="el-icon-refresh" size="mini" @click="onHandleExport">导出数据</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
|
|
@ -35,7 +52,9 @@
|
|||
<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 v-if="scope.row.type == 2" size="mini">出库</el-tag>
|
||||
<el-tag v-if="scope.row.type == 2" size="mini">
|
||||
{{ typeInfo[scope.row.type] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" show-overflow-tooltip prop="createTime" label="操作时间" />
|
||||
|
|
@ -48,26 +67,102 @@
|
|||
<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="操作" />
|
||||
<el-table-column align="center" show-overflow-tooltip prop="address" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="onHandleOutRecord(scope.row)">出库记录单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
<!-- 出库记录单 -->
|
||||
<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%">
|
||||
<el-table :data="outRecordData" style="width: 100%">
|
||||
<el-table-column align="center" show-overflow-tooltip type="index" 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>
|
||||
</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 } from '@/api/EquipmentRoamRecord'
|
||||
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: '', // 关键字
|
||||
handleType: '', // 操作类型
|
||||
handleTime: '', // 操作时间
|
||||
keyWord: '', // 关键字
|
||||
type: '', // 操作类型
|
||||
startTime: '', // 操作时间
|
||||
endTime: '', // 操作时间
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
|
||||
// 出库记录单
|
||||
outRecordVisible: false,
|
||||
outRecordParams: {
|
||||
changeUnit: '',
|
||||
useUint: '',
|
||||
proName: '',
|
||||
devNum: '',
|
||||
},
|
||||
outRecordData: [],
|
||||
recordId: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -76,13 +171,73 @@ export default {
|
|||
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)
|
||||
console.log(res, '流转记录列表')
|
||||
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></style>
|
||||
<style scoped>
|
||||
.record-row {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue