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

258 lines
7.9 KiB
Vue

<template>
<div class="app-container" id="scrapRecord">
<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="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-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 label="序号" align="center" type="index" />
<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="code" :show-overflow-tooltip="true" />
<el-table-column label="来源单号" align="center" prop="sourceCode" :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="maCode" :show-overflow-tooltip="true" />
<el-table-column label="报废时间" align="center" prop="scrapTime" :show-overflow-tooltip="true" />
<el-table-column label="报废数量" align="center" prop="scrapNum" :show-overflow-tooltip="true" />
<el-table-column label="报废原因" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column label="报废人" align="center" prop="userName" :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"
/>
</div>
</template>
<script>
import { scrapRecord,exportList,getUnitData,getProData } from "@/api/stquery/deviceScrapQuery";
export default {
name: "scrapRecord",
dicts: ['sys_normal_disable'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 字典表格数据
leaseAuditList: [],
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
dictName: undefined,
dictType: undefined,
status: undefined,
time:null, //申请时间
unitId:null, //来往单位id
proId:null, //工程id
types: 1, // 1申请列表 2审核列表
},
unitList:[], //来往单位集合
proList:[], //工程集合
};
},
created() {
this.getList();
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,
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 scrapRecord(params)
this.loading = false;
this.leaseAuditList = res.data.rows;
this.total = res.data.total;
},
// 获取 来往单位 列表数据
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)
},
// 表单重置
reset() {
this.form = {
dictId: undefined,
dictName: undefined,
dictType: undefined,
status: "0",
remark: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
/** 导出按钮操作 */
handleExport() {
this.download('material/scrapRecord/export', {
...this.queryParams
}, `综合查询_报废记录_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
</style>