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

526 lines
16 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="结束日期"
style="width: 240px"
>
</el-date-picker>
</el-form-item>
<el-form-item label="选择单位">
<el-select
v-model="queryParams.unitId"
filterable
clearable
@change="unitChange"
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"
filterable
clearable
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="keyWord">
<el-input
v-model="queryParams.keyWord"
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="keepUserChange"
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>
<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-form-item>
</el-form>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</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="agreementCode"
:show-overflow-tooltip="true"
/>
<el-table-column
label="往来单位"
align="center"
prop="unitName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="工程名称"
align="center"
prop="proName"
:show-overflow-tooltip="true"
/>
<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="manageTypeName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="库管员"
align="center"
prop="typeKeepName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="历史租赁总数"
align="center"
prop="outNum"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<!-- 当 manageType 为 '编码' 时,使用可点击的 span -->
<span
v-if="scope.row.manageTypeName === '编码'"
class="clickText"
@click="openHisCodeRecords(scope.row)"
>
{{ scope.row.outNum }}
</span>
<!-- 否则,直接显示数字 -->
<span v-else>
{{ scope.row.outNum }}
</span>
</template>
</el-table-column>
<el-table-column
label="在用数量"
align="center"
prop="usNum"
:show-overflow-tooltip="true"
/>
<el-table-column
label="历史归还总数"
align="center"
prop="backNum"
:show-overflow-tooltip="true"
/>
<!-- <el-table-column label="在用总价值(元)" align="center" prop="xxx" :show-overflow-tooltip="true" />
<el-table-column label="投入总价值(元)" align="center" prop="sss" :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="openHisCodeRecord"
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="handleGetHisCodeRecord"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleGetHisCodeRecord"
>查询</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="HisCodeRecords">
<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="typeModelName"
: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="getHisCodeRecords"
/>
</el-dialog>
</div>
</template>
<script>
import {
getUnitData,
getProData,
usingRecord,
} from '@/api/stquery/projUsingRecord'
import {getAllRecords, getHisCodeRecords, getTypeKeeper} from "@/api/stquery/deviceStatusRecord";
export default {
name: 'backRecord',
dicts: ['sys_normal_disable'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
openHisCodeRecord: false,
// 字典表格数据
leaseAuditList: [],
// 日期范围
dateRange: [],
dialogQuery: {
pageNum: 1,
pageSize: 10,
typeId: undefined,
maCode: undefined,
unitId: undefined,
proId: undefined,
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
dictName: undefined,
dictType: undefined,
status: undefined,
time: null, //申请时间
unitId: null, //来往单位id
proId: null, //工程id
types: 1, // 1申请列表 2审核列表
},
unitList: [], //来往单位集合
keepIdList: [], //库管员id集合
HisCodeRecords: [], //历史租赁设备列表
proList: [], //工程集合
}
},
created() {
this.getList()
this.getUnitList()
this.getProList()
this.getKeepIdList()
},
methods: {
// 获取 申请列表
async getList() {
this.loading = true
const params = {
unitId: this.queryParams.unitId,
proId: this.queryParams.proId,
userId: this.queryParams.userId,
keyWord: this.queryParams.keyWord,
// agreementCode:this.queryParams.agreementCode,
typeName: this.queryParams.typeName,
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,
}
const res = await usingRecord(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(id) {
const { data: res } = await getProData({ id })
this.proList = res
},
// 表单重置
reset() {
this.form = {
dictId: undefined,
dictName: undefined,
dictType: undefined,
status: '0',
remark: undefined,
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 搜索历史租赁设备按钮*/
handleGetHisCodeRecord() {
this.queryParams.pageNum = 1
this.getHisCodeRecords()
},
/** 重置按钮操作 */
resetQuery() {
this.getProList()
this.queryParams.time = []
this.queryParams.unitId = ''
this.queryParams.proId = ''
this.resetForm('queryForm')
this.handleQuery()
},
/** 导出按钮操作 */
handleExport() {
this.download(
'material/backRecord/export',
{
...this.queryParams,
},
`综合查询_退料记录_${new Date().getTime()}.xlsx`,
)
},
// 单位名称选择后 获取对应的工程
unitChange(val) {
this.getProList(val)
},
keepUserChange(val) {
this.getTypeKeeper(val)
},
//查看历史租赁编码设备
openHisCodeRecords(row) {
this.openHisCodeRecord = true
this.dialogQuery.maCode = ""
this.dialogQuery.typeId= row.typeId
this.dialogQuery.unitId= row.unitId
this.dialogQuery.proId= row.proId
this.getHisCodeRecords()
},
/** 查看历史租赁编码设备 */
getHisCodeRecords() {
getHisCodeRecords(this.dialogQuery).then((response) => {
this.HisCodeRecords = response.data.rows
this.dialogTotal = response.data.total
})
},
// 获取 库管员
async getTypeKeeper() {
const params = {
}
const res = await getTypeKeeper(params)
this.keepIdList = res.data
console.log('GetProData ======================', res)
},
},
}
</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>