devicesmgt/sgzb-ui/src/views/stquery/deviceStatusRecord.vue

626 lines
19 KiB
Vue

<template>
<div class="app-container" id="backRecord">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="80px"
>
<!-- <el-form-item label="退料日期">
<el-date-picker
v-model="queryParams.time"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="往来单位">
<el-select v-model="queryParams.unitId" clearable @change="GetProData" style="width: 240px" placeholder="请选择">
<el-option
v-for="item in unitList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="工程名称">
<el-select v-model="queryParams.proId" clearable @change="GetUnitData" style="width: 240px" placeholder="请选择">
<el-option
v-for="item in proList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="协议号" prop="agreementCode">
<el-input
v-model="queryParams.agreementCode"
placeholder="请输入协议号"
clearable
:maxlength="20"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="机具名称" prop="typeName">
<el-input
v-model="queryParams.typeName"
placeholder="请输入机具名称"
clearable
:maxlength="20"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="规格型号" prop="typeModelName">
<el-input
v-model="queryParams.typeModelName"
placeholder="请输入规格型号"
clearable
:maxlength="20"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="库管员" prop="userId">
<el-select
v-model="queryParams.userId"
filterable
clearable
@change="unitChange"
style="width: 240px"
placeholder="请选择"
>
<el-option
v-for="item in keepIdList"
:key="item.userId"
:label="item.userName"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="关键字" prop="keyWord">
<el-input
v-model="queryParams.keyWord"
placeholder="请输入关键字"
clearable
:maxlength="20"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item>
<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
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
<span style="margin-left: 20px; color: red"
>保有量=在库+在用+在修+修试后待入库</span
>
</el-form-item>
</el-form>
<!-- <el-col :span="1.5">
</el-col> -->
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
<el-table v-loading="loading" :data="leaseAuditList">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column
align="center"
label="序号"
type="index"
:index="
indexContinuation(queryParams.pageNum, queryParams.pageSize)
"
/>
<el-table-column
label="机具名称"
align="center"
prop="typeName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="规格型号"
align="center"
prop="typeModelName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="单位"
align="center"
prop="unit"
:show-overflow-tooltip="true"
/>
<el-table-column
label="在库数量"
align="center"
prop="num"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<!-- 当 manageType 为 '编码' 时,使用可点击的 span -->
<span
v-if="scope.row.manageType === '编码'"
class="clickText"
@click="openRecords(scope.row)"
>
{{ scope.row.num }}
</span>
<!-- 否则,直接显示数字 -->
<span v-else>
{{ scope.row.num }}
</span>
</template>
</el-table-column>
<el-table-column
label="在用数量"
align="center"
prop="usNum"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span
class="clickText"
@click="openUserRecords(scope.row)"
>{{ scope.row.usNum }}</span>
</template>
</el-table-column>
<el-table-column
label="在修数量"
align="center"
prop="repairNum"
:show-overflow-tooltip="true"
/>
<el-table-column
label="修试后待入库"
align="center"
prop="repairInputNum"
:show-overflow-tooltip="true"
/>
<!-- <el-table-column
label="新购待入库"
align="center"
prop="inputNum"
:show-overflow-tooltip="true"
/> -->
<el-table-column
label="总保有量"
align="center"
prop="allNum"
:show-overflow-tooltip="true"
/>
<!-- <el-table-column label="总保有量资产(万元)" align="center" prop="proName" :show-overflow-tooltip="true" /> -->
<el-table-column
label="管理模式"
align="center"
prop="manageType"
:show-overflow-tooltip="true"
/>
<el-table-column
label="库管员"
align="center"
prop="typeKeepName"
:show-overflow-tooltip="true"
/>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:page-sizes="[5, 10, 15, 20, 30]"
@pagination="getList"
/>
<!-- 在库编码设备弹窗-->
<el-dialog
:title="title"
:visible.sync="openRecord"
width="1200px"
append-to-body
>
<el-form
:model="dialogQuery"
ref="dialogQuery"
size="small"
:inline="true"
label-width="80px"
>
<el-form-item label="机具编码" prop="maCode">
<el-input
v-model="dialogQuery.maCode"
placeholder="请输入机具编码"
clearable
:maxlength="30"
style="width: 240px"
@keyup.enter.native="handleDialogQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleDialogQuery"
>查询</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="dialogList">
<el-table-column
label="序号"
align="center"
width="80"
type="index"
:index="indexContinuation(dialogQuery.pageNum, dialogQuery.pageSize)"
>
</el-table-column>
<el-table-column
label="类型名称"
align="center"
prop="typeName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="规格型号"
align="center"
prop="modelName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="编码"
align="center"
prop="maCode"
:show-overflow-tooltip="true"
/>
</el-table>
<pagination
v-show="dialogTotal > 0"
:total="dialogTotal"
:page.sync="dialogQuery.pageNum"
:limit.sync="dialogQuery.pageSize"
@pagination="getUseMaCodeList"
/>
</el-dialog>
<!-- 在用编码设备弹窗-->
<el-dialog
:title="title"
:visible.sync="openUseRecord"
width="1200px"
append-to-body
>
<!-- <el-form
:model="dialogQuery"
ref="dialogQuery"
size="small"
:inline="true"
label-width="80px"
>
<el-form-item label="机具编码" prop="maCode">
<el-input
v-model="dialogQuery.maCode"
placeholder="请输入机具编码"
clearable
:maxlength="20"
style="width: 240px"
@keyup.enter.native="handleDialogQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleDialogQuery"
>查询</el-button>
</el-form-item>
</el-form>-->
<el-table v-loading="loading" :data="UserRecords">
<el-table-column
label="序号"
align="center"
width="80"
type="index"
:index="indexContinuation(dialogQuery.pageNum, dialogQuery.pageSize)"
>
</el-table-column>
<el-table-column
label="类型名称"
align="center"
prop="typeName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="规格型号"
align="center"
prop="modelName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="编码"
align="center"
prop="maCode"
:show-overflow-tooltip="true"
/>
<el-table-column
label="所在工程"
align="center"
prop="proName"
:show-overflow-tooltip="true"
/>
</el-table>
<pagination
v-show="dialogTotal > 0"
:total="dialogTotal"
:page.sync="dialogQuery.pageNum"
:limit.sync="dialogQuery.pageSize"
@pagination="getUserRecords"
/>
</el-dialog>
</div>
</template>
<script>
import {
statusList,
exportList,
getUnitData,getUseMaCode,
getProData, getTypeKeeper,
getUserRecords,
} from '@/api/stquery/deviceStatusRecord'
import {getRecords} from "@/api/claimAndRefund/secondStore";
export default {
name: 'backRecord',
dicts: ['sys_normal_disable'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 弹出层标题
title: '',
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 字典表格数据
leaseAuditList: [],
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
dictName: undefined,
dictType: undefined,
status: undefined,
maCode: undefined,
time: null, //申请时间
unitId: null, //来往单位id
proId: null, //工程id
types: 1, // 1申请列表 2审核列表
maType: '1', // 1机具 2调试
},
//记录弹窗
openRecord: false,
openUseRecord: false,
dialogQuery: {
pageNum: 1,
pageSize: 10,
typeId: undefined,
maCode: undefined,
},
unitList: [], //来往单位集合
dialogList: [], //在库编码设备列表
UserRecords: [], //在用设备列表
keepIdList: [], //库管员id集合
proList: [], //工程集合
dialogTotal: 0,
}
},
created() {
this.getList()
this.getKeepIdList()
/* this.getUnitList();
this.getProList(); */
},
methods: {
// 获取 申请列表
async getList() {
this.loading = true
const params = {
/* unitId:this.queryParams.unitId,
proId:this.queryParams.proId,
keyWord:this.queryParams.keyWord,
agreementCode:this.queryParams.agreementCode, */
typeName: this.queryParams.typeName,
userId: this.queryParams.userId,
typeModelName: this.queryParams.typeModelName,
/* startTime:this.queryParams.time && this.queryParams.time[0],
endTime:this.queryParams.time && this.queryParams.time[1], */
pageSize: this.queryParams.pageSize,
pageNum: this.queryParams.pageNum,
maType: '1'
}
const res = await statusList(params)
console.log('机具状态', res)
this.loading = false
this.leaseAuditList = res.data.rows
this.total = res.data.total
},
// 获取 库管员列表
async getKeepIdList() {
this.loading = true
const params = {
}
const res = await getTypeKeeper(params)
console.log('机具状态', res)
this.loading = false
this.keepIdList = res.data
},
// 获取 来往单位 列表数据
async getUnitList() {
const params = {
id: this.queryParams.proId,
}
const res = await getUnitData(params)
this.unitList = res.data
console.log('GetUnitData ======================', res)
},
// 获取 工程名称 列表数据
async getProList() {
const params = {
id: this.queryParams.unitId,
}
const res = await getProData(params)
this.proList = res.data
console.log('GetProData ======================', res)
},
// 获取 库管员
async getTypeKeeper() {
const params = {
}
const res = await getTypeKeeper(params)
this.keepIdList = res.data
console.log('GetProData ======================', res)
},
// 表单重置
reset() {
this.form = {
dictId: undefined,
dictName: undefined,
dictType: undefined,
status: '0',
remark: undefined,
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 搜索在用编码按钮操作 */
handleDialogQuery() {
this.queryParams.pageNum = 1
this.getUseMaCodeList()
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.time = []
this.resetForm('queryForm')
this.handleQuery()
},
/** 导出按钮操作 */
handleExport() {
this.download(
'material/storageStatus/export',
{
...this.queryParams,
},
`综合查询_机具仓储状态_${new Date().getTime()}.xlsx`,
)
},
unitChange(val) {
this.getTypeKeeper(val)
},
//查看编码在库数据
openRecords(row) {
this.openRecord = true
this.dialogQuery.maCode = ""
this.dialogQuery.typeId= row.typeId
this.getUseMaCodeList()
},
//查看在用设备
openUserRecords(row) {
this.openUseRecord = true
this.dialogQuery.typeId= row.typeId
this.getUserRecords()
},
/** 查询编码机具列表 */
getUseMaCodeList() {
getUseMaCode(this.dialogQuery).then((response) => {
this.dialogList = response.data.rows
this.dialogTotal = response.data.total
})
},
/** 查询在用设备列表 */
getUserRecords() {
getUserRecords(this.dialogQuery).then((response) => {
this.UserRecords = response.data.rows
this.dialogTotal = response.data.total
})
},
// 表单合并行
/* mergeRow ({ row, column, rowIndex, columnIndex}) {
if (rowIndex == 0) {
return {
rowspan: 3,
colspan: 1
}
}
} */
},
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
.clickText {
color: #02a7f0;
cursor: pointer;
}
</style>