332 lines
11 KiB
Vue

<!--拣配未出库看板-->
<!--页面渲染区域-->
<template>
<div class="vue-element-page-wrap" ref="tableContainer">
<el-row class="page-search" justify="space-between" align="bottom">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px" label-position="left">
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="物料类型" prop="params.MaterialType">
<el-select v-model="queryParams.params.MaterialType" class="m-2" filterable placeholder="" size="small"
@change="selectTing">
<el-option v-for="item in MaterialType" :key="item.Key" :label="item.Value" :value="item.Value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="5">
<el-form-item label="物料总数" prop="params.sum">
<el-Input v-model="queryParams.params.sum" disabled clearable />
</el-form-item>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="5">
<el-form-item label="物料编码" prop="params.MATERIALSPECNAME">
<el-Input v-model="queryParams.params.MATERIALSPECNAME" clearable />
</el-form-item>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="5">
<el-form-item label="批次" prop="params.CHARGE">
<el-Input v-model="queryParams.params.CHARGE" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="单号" prop="params.SHIPREQUESTNAME">
<el-Input v-model="queryParams.params.SHIPREQUESTNAME" clearable />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="page-search-btns">
<el-button type="primary" @click="handleQueryInfo">搜索</el-button>
<!-- <el-button type="primary" @click="InAdvanceQuery">刷新</el-button>-->
<el-button type="primary" @click="exportExcel">导出</el-button>
</div>
</el-row>
<!--table 区域-->
<div class="vue-element-page-table">
<div class="page-table-operate">
<div class="page-table-title">
<div class="page-table-title-left">
<span>物料信息列表</span>
</div>
</div>
<div class="page-table-operateBtns">
<el-popover :persistent="false" placement="right" popper-class="config-table-wrap" trigger="click">
<template #reference>
<el-button class="operateBtns-setting">
<svg-icon icon-class="table_title" width="16px" height="16px" />
</el-button>
</template>
<ConfigTable :list="Column" @updateList="updateList" />
</el-popover>
</div>
</div>
<el-table border v-loading="loading" :data="MaterialList" highlight-current-row row-key="id" style="width: 100%"
:height="tableHeight" @row-click="BoxListActive">
<template v-for="(col, index) in Column" :key="index">
<el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row[col.field] }}</span>
</template>
</el-table-column>
</template>
</el-table>
<div>
<pagination v-if="total > 0" :total="total" v-model:pageNumTo="queryParams.pageNum"
v-model:pageSizeTo="queryParams.pageSize" @pagination="HandleQuery" />
</div>
</div>
<div class="vue-element-page-table">
<div class="page-table-operate">
<div class="page-table-title">
<div class="page-table-title-left">
<span>BOX信息</span>
</div>
</div>
</div>
<el-table border v-loading="loading" :data="BoxDetailList" highlight-current-row row-key="id" style="width: 100%;min-height:200px;"
>
<template v-for="(col, index) in Column1" :key="index">
<el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row[col.field] }}</span>
</template>
</el-table-column>
</template>
</el-table>
<div>
<pagination v-if="total1 > 0" :total="total1" v-model:pageNumTo="state.queryParamsActivate.pageNum"
v-model:pageSizeTo="state.queryParamsActivate.pageSize" @pagination="SelectMaterialPacking" />
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'ReservedPreStockOut'
};
</script>
<!--script区域-->
<script lang="ts" setup>
/*引入区域*/
import { reactive, ref, onMounted, toRefs, getCurrentInstance, nextTick } from "vue";
import { ElForm, ElMessageBox, ElTable } from "element-plus";
import { getQueryList, getQueryPageList } from "@/api/common";
import { msToDate } from '@/utils/CommonUtil';
import exportDataToExcel from "@/utils/export-excel";
import { bTableHeight } from "../../../../composables/calcTableHeight";
const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(440);
const { proxy }: any = getCurrentInstance();
/*对象生成赋值区域*/
const queryFormRef = ref(ElForm);
const size = ref<'default' | 'large' | 'small'>('small');//formdata时间设置
const state = reactive({
timer: 0,
count: 0,
queryParams: {
queryId: "GetShipRequestDetailList",
version: "",
params: {
SITENAME: localStorage.getItem("siteName") || 'SDK',
MaterialType: '材料',
//显示部分
sum: 0,
MATERIALSPECNAME: '',
CHARGE: '',
SHIPREQUESTNAME: '',
},
pageNum: 1,
pageSize: 10
},
queryParamsActivate: {
queryId: "GetBoxInformation",
version: "00001",
params: {
SITENAME: localStorage.getItem("siteName") || 'SDK',
ERPLOCATION: '',
ERPFACTORY: '',
MATERIALSPECNAME: '',
RECEIVEACTNO: '',
SHIPREQUESTNAME: '',
SHIPREQUESTDETAILNAME: '',
STOCKSTATE: ''
},
pageNum: 1,
pageSize: 10
}, MaterialType: [
{
Key: '材料',
Value: '材料'
},
{
Key: '备件',
Value: '备件'
},
],
Column: [] as any,
total: 0,
total1: 0,
loading: false,
BoxHistoryList: [] as any,
ERPFactoryList: [] as any,
ERPLocationList: [] as any,
MaterialList: [] as any,
ProcessGroupNameList: [] as any,
Column1: [] as any,
BoxDetailList: [] as any
});
const {
queryParams,
Column,
total,
total1,
loading,
BoxHistoryList,
MaterialList,
ERPFactoryList,
ERPLocationList,
ProcessGroupNameList,
Column1,
BoxDetailList,
MaterialType,
} = toRefs(state);
//时间范围定义
/*钩子函数区域*/
onMounted(() => {
state.Column = [
{ header: "工厂", field: "SITENAME", hide: false },
{ header: "物料编号", field: "MATERIALSPECNAME", hide: false },
{ header: "物料描述", field: "DESCRIPTION", hide: false },
{ header: "抬头文本", field: "RECEIVEACTNO", hide: false },
{ header: "发货单号", field: "SHIPREQUESTNAME", hide: false },
{ header: "行项", field: "SHIPREQUESTDETAILNAME", hide: false },
{ header: "最后操作时间", field: "LASTEVENTTIME", hide: false },
{ header: "最后操作的注解", field: "LASTEVENTCOMMENT", hide: false },
{ header: "物料总数量", field: "MATERIALQUANTITY", hide: false },
{ header: "位置", field: "LOCATIONNAME", hide: false },
{ header: "仓库", field: "ERPLOCATION", hide: false },
{ header: "组织", field: "ERPFACTORY", hide: false },
{ header: "库存状态", field: "STOCKSTATE", hide: false },
{ header: "物料类型", field: "MATERIALTYPE", hide: false },
];
state.Column1 = [
{ header: "标签", field: "MATERIALPACKINGNAME", hide: false },
{ header: "批次", field: "CHARGE", hide: false },
{ header: "物料总数量", field: "MATERIALQUANTITY", hide: false },
{ header: "最后的操作时间", field: "LASTEVENTTIME", hide: false },
{ header: "最后的操作人员", field: "LASTEVENTUSER", hide: false },
];
InAdvanceQuery();
updateTableHeight();
window.addEventListener('resize', handleResize);
});
/*其它函数区域*/
//提前查询数量
function InAdvanceQuery() {
(state.queryParams.params.MaterialType == '材料') ? (state.queryParams.version = '11111') : (state.queryParams.version = '11112');
getQueryPageList(state.queryParams)
.then((res: any) => {
state.MaterialList = res.data.list;
state.total = res.data.total
if (res.data.list.length > 0) {
state.queryParams.params.sum = 0;
for (let i = 0; i < res.data.list.length; i++) {
state.queryParams.params.sum += (res.data.list[i].MATERIALQUANTITY == "" ? 0 : res.data.list[i].MATERIALQUANTITY);
}
} else {
ElMessageBox.alert('查无数据', '提醒框', {
confirmButtonText: 'OK',
})
}
})
.catch(() => { });
}
const updateList = (col: any) => {
state.Column = col
}
function handleQueryInfo() {
state.queryParams.pageNum = 1
state.queryParamsActivate.pageNum = 1;
state.BoxDetailList = [];
state.total1 = 0
HandleQuery()
}
function HandleQuery() {
(state.queryParams.params.MaterialType == '材料') ? (state.queryParams.version = '11113') : (state.queryParams.version = '11114');
getQueryPageList(state.queryParams)
.then((res: any) => {
state.MaterialList = res.data.list;
state.total = res.data.total
if (res.data.list.length > 0) {
state.queryParams.params.sum = 0;
for (let i = 0; i < res.data.list.length; i++) {
state.queryParams.params.sum += (res.data.list[i].MATERIALQUANTITY == "" ? 0 : res.data.list[i].MATERIALQUANTITY);
}
} else{
ElMessageBox.alert('查无数据', '提醒框', {
confirmButtonText: 'OK',
})
}
})
.catch(() => { });
}
function exportExcel() {
(state.queryParams.params.MaterialType == '材料') ? (state.queryParams.version = '11122') : (state.queryParams.version = '11133');
getQueryList(state.queryParams).then((res: any) => {
if (res.data.length > 0) {
exportDataToExcel(res.data, '物料信息列表')
} else {
proxy.$ElMessage.warning('当前查询没有数据可以导出');
}
});
}
let tempRow = ''
let tempevent = ''
let tempcolumn = ''
function BoxListActive(row: any, event: any, column: any) {
tempRow = row
tempcolumn = column
tempevent = event
state.queryParamsActivate.params.ERPFACTORY = row.ERPFACTORY;
state.queryParamsActivate.params.ERPLOCATION = row.ERPLOCATION;
state.queryParamsActivate.params.MATERIALSPECNAME = row.MATERIALSPECNAME;
state.queryParamsActivate.params.RECEIVEACTNO = row.RECEIVEACTNO;
state.queryParamsActivate.params.SHIPREQUESTDETAILNAME = row.SHIPREQUESTDETAILNAME;
state.queryParamsActivate.params.SHIPREQUESTNAME = row.SHIPREQUESTNAME;
state.queryParamsActivate.params.STOCKSTATE = row.STOCKSTATE;
getQueryPageList(state.queryParamsActivate)
.then((res: any) => {
state.BoxDetailList = res.data.list;
state.total1 = res.data.total
})
.catch(() => { });
}
function SelectMaterialPacking() {
BoxListActive(tempRow, tempevent, tempcolumn)
}
//选择状态查询
function selectTing(value: any) {
InAdvanceQuery();
}
</script>
<!--style 区域-->
<style></style>