342 lines
14 KiB
Vue
342 lines
14 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" label-width="60px" label-position="left">
|
||
<el-row :gutter="24" class="form-row">
|
||
<el-col :span="6">
|
||
<el-form-item label="组织" prop="ERPFACTORY">
|
||
<el-Input v-model="queryParams.ERPFACTORY" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- <el-col :span="4">-->
|
||
<!-- <el-form-item label="仓库" prop="ERPLOCATION">-->
|
||
<!-- <el-Input v-model="queryParams.ERPLOCATION" clearable />-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-col>-->
|
||
<el-col :span="6">
|
||
<el-form-item label="发货单号" prop="SHIPREQUESTNAME">
|
||
<el-Input v-model="queryParams.SHIPREQUESTNAME" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="料号" prop="MATERIALSPECNAME">
|
||
<el-Input v-model="queryParams.MATERIALSPECNAME" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="品名" prop="DESC_CN">
|
||
<el-Input v-model="queryParams.DESC_CN" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<br/>
|
||
<el-row :gutter="24" class="form-row">
|
||
<el-col :span="6">
|
||
<el-form-item label="订单状态" prop="SHIPREQUESTSTATE">
|
||
<el-select v-model="queryParams.SHIPREQUESTSTATE" placeholder="下拉选择" style="width: 160px">
|
||
<el-option v-for="item in state.orderStatus" :key="item.LABEL" :label="item.LABEL"
|
||
:value="item.VALUE" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="开始时间" prop="FROMDATE">
|
||
<el-date-picker v-model="queryParams.FROMDATE" value-format="YYYYMMDD" type="date"
|
||
placeholder="选择开始时间" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="结束时间" prop="TODATE">
|
||
<el-date-picker v-model="queryParams.TODATE" value-format="YYYYMMDD" type="date"
|
||
placeholder="选择结束时间" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div class="page-search-btns">
|
||
<el-button type="primary" @click="handleQueryInfo">搜索</el-button>
|
||
<el-button @click="resetQuery">重置</el-button>
|
||
</div>
|
||
</el-row>
|
||
<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>
|
||
<el-button type="primary" @click="exportExcel">导出</el-button>
|
||
</div>
|
||
</div>
|
||
<el-table :height="tableHeight" border v-loading="loading" :data="list" highlight-current-row row-key="id"
|
||
style="width: 100%;" @row-click="selectRow">
|
||
<template v-for="(col, index) in column" :key="index">
|
||
<el-table-column v-if="!col.hide" :label="col.header" :width="col.width" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<span>{{ scope.row[col.field] }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
<pagination v-if="page.total" :total="page.total" v-model:pageNumTo="page.pageNum"
|
||
v-model:pageSizeTo="page.pageSize" @pagination="handleQuery" />
|
||
</div>
|
||
<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>
|
||
<el-button type="primary" @click="exportExcel_d">导出</el-button>
|
||
</div>
|
||
</div>
|
||
<el-table border v-loading="loading_d" :data="list_d" highlight-current-row row-key="id"
|
||
style="width: 100%;height:200px">
|
||
<template v-for="(col, index) in column_d" :key="index">
|
||
<el-table-column v-if="!col.hide" :label="col.header" :width="col.width" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<span v-if="col.field == 'REALQUANTITY'" >{{ Number(scope.row.REQUESTQUANTITY) - Number(scope.row.SALEOUTQUANTITY)}}</span>
|
||
<span v-else>{{ scope.row[col.field] }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
<pagination v-if="page_d.total" :total="page_d.total" v-model:pageNumTo="page_d.pageNum"
|
||
v-model:pageSizeTo="page_d.pageSize" @pagination="handleQuery_d" />
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: "Invoice",
|
||
};
|
||
</script>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from "vue";
|
||
import { ElForm, ElMessageBox, ElTable } from 'element-plus'
|
||
import { getQueryPageList, getQueryList } from '@/api/common';
|
||
import exportDataToExcel from '@/utils/export-excel';
|
||
import { bTableHeight } from "../../../../composables/calcTableHeight";
|
||
|
||
const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(525);
|
||
|
||
const { proxy }: any = getCurrentInstance();
|
||
|
||
const queryFormRef = ref(ElForm);
|
||
|
||
const state = reactive({
|
||
queryParams: {
|
||
ERPLOCATION: '',
|
||
ERPRECEIVELOCATION: '',
|
||
ERPFACTORY: '',
|
||
FROMDATE: '',
|
||
TODATE: '',
|
||
SHIPREQUESTNAME: '',
|
||
SHIPREQUESTSTATE: "",
|
||
DESC_CN: "",
|
||
MATERIALSPECNAME: ""
|
||
},
|
||
orderStatus: [{
|
||
LABEL:"未完成",
|
||
VALUE:"Created"
|
||
},{
|
||
LABEL:"完成",
|
||
VALUE:"Completed"
|
||
}],
|
||
page: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
},
|
||
loading: false,
|
||
list: [],
|
||
column: [] as any,
|
||
|
||
active_row: {},
|
||
|
||
page_d: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
},
|
||
loading_d: false,
|
||
list_d: [],
|
||
column_d: [] as any,
|
||
});
|
||
|
||
const { loading, list, column, queryParams, page, page_d, loading_d, list_d, column_d, active_row } = toRefs(state)
|
||
|
||
onMounted(() => {
|
||
state.column = [
|
||
|
||
{ header: "组织", field: "ERPFACTORYNAME", hide: false },
|
||
{ header: "发货单", field: "SHIPREQUESTNAME", hide: false },
|
||
{ header: "发货单类型", field: "SHIPREQUESTTYPE", hide: false},
|
||
{ header: "发货单状态", field: "SHIPREQUESTSTATE", hide: false },
|
||
{ header: "客户编号", field: "CUSTOMERNO", hide: false },
|
||
{header: "供应商编号", field: "SUPPLIERNO", hide: true},
|
||
{header: "单据日期", field: "ORDERDATE", hide: false},
|
||
{ header: "料号", field: "MATERIALSPECNAME", hide: true },
|
||
{ header: "品名", field: "DESC_CN", hide: true },
|
||
{ header: "工厂", field: "SITENAME", hide: true },
|
||
{ header: "发货单历史状态", field: "OLDSHIPREQUESTSTATE", hide: true },
|
||
{ header: "发货单类型子项", field: "SHIPREQUESTDETAILTYPE", hide: true },
|
||
{ header: "移动类型", field: "DELIVERYTYPE", hide: true },
|
||
{ header: "计划日期", field: "SHIPPLANDATE", hide: true },
|
||
{ header: "接收方", field: "RECEIVER", hide: true },
|
||
{ header: "最后操作名称", field: "LASTEVENTNAME", hide: true },
|
||
{ header: "最后操作时间", field: "LASTEVENTTIME", hide: true },
|
||
{ header: "最后操作人", field: "LASTEVENTUSER", hide: true },
|
||
{ header: "最后操作注释", field: "LASTEVENTCOMMENT", hide: true },
|
||
]
|
||
|
||
state.column_d = [
|
||
{ header: "发货单", field: "SHIPREQUESTNAME", hide: false },
|
||
{ header: "行号", field: "SHIPREQUESTDETAILNAME", hide: false },
|
||
{ header: "发出仓库", field: "ERPLOCATION", hide: false },
|
||
{ header: "接收仓库", field: "ERPRECEIVELOCATIONNAME", hide: false },
|
||
{ header: "料号", field: "MATERIALSPECNAME", hide: false },
|
||
{ header: "品名", field: "DESC_CN", hide: false },
|
||
{ header: "物料规格", field: "DESCRIPTION ", hide: false },
|
||
{ header: "SDK规格", field: "SPECNAME", hide: false },
|
||
{ header: "阶段", field: "PHASE", hide: false },
|
||
{ header: "请求数量", field: "REQUESTQUANTITY", hide: false },
|
||
{ header: "绑定数量", field: "ASSIGNEDQUANTITY", hide: false },
|
||
{ header: "已出库数量", field: "SALEOUTQUANTITY", hide: false },
|
||
{ header: "剩余数量", field: "REALQUANTITY", hide: false },
|
||
{ header: "生产订单类型", field: "PRODUCTORDERTYPE", hide: false, width:100 },
|
||
{ header: "客户编码", field: "CUSTOMERNO", hide: false },
|
||
{ header: "是否通用料", field: "COMMONMATERIALFLAG", hide: false },
|
||
{ header: "最小收卷米数", field: "SJMS", hide: false, width:100 },
|
||
// { header: "上游单号", field: "SOURCENO", hide: false },
|
||
// { header: "上游单行号", field: "SOURCELINE", hide: false },
|
||
]
|
||
handleQuery()
|
||
updateTableHeight();
|
||
window.addEventListener('resize', handleResize);
|
||
});
|
||
function handleQueryInfo() {
|
||
state.page.pageNum = 1
|
||
state.page_d.pageNum = 1
|
||
state.page.total = 0
|
||
state.page_d.total = 0;
|
||
handleQuery()
|
||
}
|
||
function handleQuery() {
|
||
state.list_d = []
|
||
state.list = []
|
||
state.loading = true
|
||
queryFormRef.value.validate((isValid: boolean) => {
|
||
if (isValid) {
|
||
getQueryPageList({
|
||
queryId: "GetMaterialShipRequestList",
|
||
version: "10001",
|
||
params: {
|
||
userId: localStorage.getItem('userId'),
|
||
...state.queryParams
|
||
},
|
||
pageNum: state.page.pageNum,
|
||
pageSize: state.page.pageSize,
|
||
}).then((res: any) => {
|
||
state.list = res.data.list;
|
||
state.page.total = res.data.total;
|
||
state.loading = false
|
||
if (state.list.length > 0) {
|
||
for (const element of state.list) {
|
||
let dates = new Date(element.ORDERDATE).toJSON()
|
||
element.ORDERDATE = new Date(+new Date(dates) + 8 * 3600 * 1000)
|
||
.toISOString()
|
||
.replace(/T/g, ' ')
|
||
.replace(/\.[\d]{3}Z/, '')
|
||
console.log(element.ORDERDATE)
|
||
}
|
||
state.active_row = state.list[0]
|
||
if (state.active_row) {
|
||
handleQuery_d()
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
function exportExcel() {
|
||
getQueryList({
|
||
queryId: "GetMaterialShipRequestList",
|
||
version: "10001",
|
||
params: {
|
||
userId: localStorage.getItem('userId'),
|
||
...state.queryParams
|
||
},
|
||
}).then((res: any) => {
|
||
if (res.data.length > 0) {
|
||
exportDataToExcel(res.data, '入库单列表')
|
||
} else {
|
||
proxy.$ElMessage.warning('当前查询没有数据可以导出');
|
||
}
|
||
});
|
||
}
|
||
function handleQuery_d() {
|
||
state.loading_d = true
|
||
getQueryPageList({
|
||
queryId: "GetMaterialShipRequestDetailList",
|
||
version: "10001",
|
||
params: {
|
||
userId: localStorage.getItem('userId'),
|
||
DESC_CN: state.queryParams.DESC_CN,
|
||
MATERIALSPECNAME: state.queryParams.MATERIALSPECNAME,
|
||
...state.active_row
|
||
},
|
||
pageNum: state.page_d.pageNum,
|
||
pageSize: state.page_d.pageSize,
|
||
}).then((res: any) => {
|
||
state.list_d = res.data.list;
|
||
state.page_d.total = res.data.total;
|
||
state.loading_d = false
|
||
});
|
||
}
|
||
function exportExcel_d() {
|
||
getQueryList({
|
||
queryId: "GetMaterialShipRequestDetailList",
|
||
version: "10001",
|
||
params: {
|
||
userId: localStorage.getItem('userId'),
|
||
DESC_CN: state.queryParams.DESC_CN,
|
||
MATERIALSPECNAME: state.queryParams.MATERIALSPECNAME,
|
||
...state.active_row
|
||
},
|
||
}).then((res: any) => {
|
||
if (res.data.length > 0) {
|
||
exportDataToExcel(res.data, '入库单列表')
|
||
} else {
|
||
proxy.$ElMessage.warning('当前查询没有数据可以导出');
|
||
}
|
||
});
|
||
}
|
||
|
||
function resetQuery() {
|
||
queryFormRef.value.resetFields();
|
||
handleQuery();
|
||
}
|
||
|
||
function selectRow(row: any) {
|
||
state.active_row = row
|
||
handleQuery_d()
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.form-row {
|
||
padding-right: 100px;
|
||
margin-bottom: 0;
|
||
}
|
||
</style> |