499 lines
16 KiB
Vue
499 lines
16 KiB
Vue
<!--
|
||
功能：物料在库查询
|
||
作者：李文虎
|
||
邮箱：1439135148@qq.com
|
||
时间：2024年05月15日 15:02:29
|
||
版本：v1.0
|
||
修改记录：
|
||
修改内容：
|
||
修改人员：
|
||
修改时间：
|
||
-->
|
||
<template>
|
||
<div class="vue-element-page-wrap" ref="tableContainer">
|
||
<el-row class="page-search" justify="space-between" align="middle">
|
||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||
<el-row :gutter="20">
|
||
<span class="CommonStyle2">物料编号</span>
|
||
<el-col :span="6" class="col-height">
|
||
<el-form-item label="" prop="params.account">
|
||
<el-Input v-model="queryParams.params.MATERIALSPECNAME" placeholder="请输入物料编号" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<span class="CommonStyle2">阶段</span>
|
||
<el-col :span="6" class="col-height">
|
||
<el-form-item label="" prop="params.account">
|
||
<el-Input v-model="queryParams.params.PHASE" placeholder="请输入入库单" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- <span class="CommonStyle2">组织</span>
|
||
<el-col :span="6" class="col-height">
|
||
<el-form-item label="" prop="params.account">
|
||
<el-Input v-model="queryParams.params.ERPFACTORY" placeholder="请输入组织号！" clearable />
|
||
</el-form-item>
|
||
</el-col> -->
|
||
<span class="CommonStyle2">规格</span>
|
||
<el-col :span="6" class="col-height">
|
||
<el-form-item label="" prop="params.account">
|
||
<el-Input v-model="queryParams.params.SPECNAME" placeholder="请输入SDK规格" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<br />
|
||
<el-row :gutter="20">
|
||
|
||
<span class="CommonStyle2">仓库</span>
|
||
<el-col :span="6" class="col-height">
|
||
<el-form-item label="" prop="params.account">
|
||
<el-Input v-model="queryParams.params.ERPLOCATION" placeholder="请输入ERP仓库" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<span class="CommonStyle2">货位</span>
|
||
<el-col :span="6" class="col-height">
|
||
<el-form-item label="" prop="params.account">
|
||
<el-Input v-model="queryParams.params.LOCATIONNAME" placeholder="请输入货位" 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="exportExcel">导出</el-button>
|
||
</div>
|
||
</el-row>
|
||
|
||
<div class="vue-element-page-table">
|
||
|
||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||
<el-row :gutter="5">
|
||
<el-col :span="15">
|
||
<div class="vue-element-page-table">
|
||
<div class="page-table-operate">
|
||
<div class="page-table-title">
|
||
<span>库存信息</span>
|
||
</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="materialTableConfig.column" @updateList="updateList" />
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<el-table border v-loading="loading" :data="pageList" highlight-current-row row-key="id"
|
||
style="width: 100% " :height="tableHeight" @row-click="handle">
|
||
<el-table-column
|
||
type="index"
|
||
width="50"
|
||
label="序号"
|
||
></el-table-column>
|
||
<template v-for="(col, index) in materialTableConfig.column" :key="index">
|
||
<el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<span v-if="col.field === 'status'">
|
||
<span v-if="scope.row[col.field]" class="table-status-active">启用</span>
|
||
<span v-else class="table-status-inActive">禁用</span>
|
||
</span>
|
||
<span v-else>{{ scope.row[col.field] }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
<template v-slot:empty>
|
||
<svg-icon icon-class="noData" width="160px" height="160px" />
|
||
</template>
|
||
</el-table>
|
||
<pagination v-if="total > 0" :total="total" v-model:pageNumTo="queryParams.pageNum"
|
||
v-model:pageSizeTo="queryParams.pageSize" @pagination="handleQuery" />
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="9">
|
||
<div class="vue-element-page-table">
|
||
<div class="page-table-operate">
|
||
<div class="page-table-title">
|
||
<span class="CommonStyle">批次信息列表</span>
|
||
</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="state.materialTableConfig.column" @updateList="updateList" />
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<el-table border v-loading="loading" :data="pageList2" highlight-current-row row-key="id"
|
||
style="width: 100% " :height="tableHeight">
|
||
<template v-for="(col, index) in column2" :key="index">
|
||
<el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<span v-if="col.field === 'status'">
|
||
<span v-if="scope.row[col.field]" class="table-status-active">启用</span>
|
||
<span v-else class="table-status-inActive">禁用</span>
|
||
</span>
|
||
<span v-else>{{ scope.row[col.field] }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
<template v-slot:empty>
|
||
<svg-icon icon-class="noData" width="160px" height="160px" />
|
||
</template>
|
||
</el-table>
|
||
<pagination v-if="total1 > 0" :total1="total1" v-model:pageNumTo="queryParams.pageNum"
|
||
v-model:pageSizeTo="queryParams.pageSize" @pagination="handleQuery" />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'materialStockedQuery'
|
||
};
|
||
</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 { addStorage, updateStorage, deleteStorage } from '@/api/basics/storage';
|
||
import { msToDate } from '@/utils/CommonUtil'
|
||
import { localStorage } from "@/utils/storage";
|
||
import exportDataToExcel from "@/utils/export-excel";
|
||
import { bTableHeight } from "../../../../composables/calcTableHeight";
|
||
|
||
const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(270);
|
||
const queryFormRef = ref(ElForm);
|
||
const formDataRef = ref(ElForm);
|
||
const { proxy }: any = getCurrentInstance();
|
||
|
||
const roleTableRef = ref<InstanceType<typeof ElTable>>();
|
||
const value = ref('')
|
||
const materialTableConfig = ref({
|
||
loading: false,
|
||
column: [] as any,
|
||
data: [],
|
||
})
|
||
const state = reactive({
|
||
storageFParams: '',
|
||
queryParams: {
|
||
queryId: 'GetMATERIALRECEIVEACTList',
|
||
version: 'WEB00003',
|
||
params: {
|
||
SPECNAME: '',
|
||
PHASE: '',
|
||
MATERIALSPECNAME: '',
|
||
ERPFACTORY: '',
|
||
ERPLOCATION: '',
|
||
LOCATIONNAME : '',
|
||
SITENAME: localStorage.get('siteName') || 'SDK'
|
||
},
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
queryParams2: {
|
||
queryId: 'GetEMaterialpackingList',
|
||
version: '00002',
|
||
params: {
|
||
SDK_ID: '',
|
||
SPECNAME: '',
|
||
PHASE: '',
|
||
MATERIALSPECNAME: '',
|
||
ERPFACTORY: '',
|
||
ERPLOCATION: '',
|
||
LOCATIONNAME : '',
|
||
SITENAME: localStorage.get('siteName') || 'SDK'
|
||
},
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
|
||
total: 0,
|
||
total1: 0,
|
||
loading: false,
|
||
pageList: [] as any,
|
||
pageList2: [] as any,
|
||
dialog: {
|
||
title: '新增库位',
|
||
visible: false
|
||
},
|
||
formData: {
|
||
account: '',
|
||
name: '',
|
||
pwd: '',
|
||
phone: '',
|
||
email: '',
|
||
jobNo: ''
|
||
} as any,
|
||
rules: {
|
||
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||
pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||
},
|
||
column: [] as any,
|
||
column1: [] as any,
|
||
column2: [] as any,
|
||
selectItem: undefined as any,
|
||
currentTime: '',
|
||
storageFList: [] as any,
|
||
storageSList: [] as any,
|
||
valueF: undefined as any,
|
||
values: undefined as any
|
||
})
|
||
const {
|
||
queryParams,
|
||
queryParams2,
|
||
total,
|
||
total1,
|
||
loading,
|
||
pageList,
|
||
pageList2,
|
||
dialog,
|
||
formData,
|
||
rules,
|
||
column,
|
||
column2,
|
||
selectItem,
|
||
currentTime,
|
||
storageFList,
|
||
storageFParams,
|
||
storageSList,
|
||
valueF,
|
||
values
|
||
} = toRefs(state);
|
||
|
||
onMounted(() => {
|
||
materialTableConfig.value.column = [
|
||
|
||
{ header: '组织', field: 'ERPFACTORY', hide: true },
|
||
{ header: '组织(CN)', field: 'ORGNAME', hide: false },
|
||
{ header: '仓库', field: 'ERPLOCATION', hide: false },
|
||
{ header: '仓库(CN)', field: 'BS_ERPLOCATIONNAME', hide: false },
|
||
{ header: '货位', field: 'LOCATIONNAME', hide: false },
|
||
{ header: '货位(CN)', field: 'LOCATIONNAMEDESC', hide: false },
|
||
{ header: '物料编号', field: 'MATERIALSPECNAME', hide: false },
|
||
{ header: '品名', field: 'DESC_CN', hide: false },
|
||
{ header: '阶段', field: 'PHASE', hide: false },
|
||
{ header: 'SDK规格', field: 'SPECNAME', hide: false },
|
||
{ header: '数量', field: 'MATERIALQUANTITY', hide: false },
|
||
{ header: '单位', field: 'FNAME', hide: false },
|
||
{ header: 'SDK_ID', field: 'SDK_ID', hide: true }
|
||
]
|
||
|
||
state.column2 = [
|
||
{ header: '标签', field: 'MATERIALPACKINGNAME', hide: true },
|
||
{ header: '批次', field: 'CHARGE', hide: false },
|
||
{ header: '供应商批次', field: 'SUPPLIERCHARGE', hide: false },
|
||
{ header: '数量', field: 'MATERIALQUANTITY', hide: false },
|
||
{ header: '入库时间', field: 'RECEIVETIME', hide: false }
|
||
|
||
]
|
||
|
||
let pwd: any = localStorage.get('remeberPwd');
|
||
state.queryParams.params.ERPFACTORY = JSON.parse(localStorage.get('orgNo')) || '';
|
||
handleQuery();
|
||
updateTableHeight();
|
||
window.addEventListener('resize', handleResize);
|
||
//storageFQuery();
|
||
});
|
||
//formdata时间设置
|
||
const size = ref<'default' | 'large' | 'small'>('default');
|
||
const updateList = (col: any) => {
|
||
materialTableConfig.value.column = col
|
||
}
|
||
// 更新列
|
||
// function updateList(col: any) {
|
||
// state.column = col;
|
||
// }
|
||
//点击触发下面表********
|
||
function handle(row: any, event: any, column: any) {
|
||
state.queryParams2.params.MATERIALSPECNAME = row.MATERIALSPECNAME;
|
||
state.queryParams2.params.ERPFACTORY = row.ERPFACTORY;
|
||
state.queryParams2.params.ERPLOCATION = row.ERPLOCATION;
|
||
state.queryParams2.params.PHASE = row.PHASE;
|
||
state.queryParams2.params.SDK_ID = row.SDK_ID;
|
||
state.queryParams2.params.LOCATIONNAME = row.LOCATIONNAME;
|
||
getQueryPageList(state.queryParams2)
|
||
.then((res: any) => {
|
||
state.pageList2 = res.data.list;
|
||
state.total1 = res.data.total;
|
||
showCurrentTime();
|
||
})
|
||
}
|
||
function exportExcel() {
|
||
getQueryList(state.queryParams).then((res: any) => {
|
||
if (res.data.length > 0) {
|
||
exportDataToExcel(res.data, '库存查询')
|
||
} else {
|
||
proxy.$ElMessage.warning('当前查询没有数据可以导出');
|
||
}
|
||
});
|
||
}
|
||
function handleQueryInfo() {
|
||
state.queryParams.pageNum = 1
|
||
handleQuery()
|
||
}
|
||
//*****
|
||
function handleQuery() {
|
||
// let arr = state.queryParams.params.DateValue.toString().split(",");
|
||
// let str1 = msToDate(arr[0]);
|
||
// let str2 = msToDate(arr[1]);
|
||
// state.queryParams.params.FROMDATE = str1.withoutTime;
|
||
// state.queryParams.params.TODATE = str2.withoutTime;
|
||
// console.log(state.queryParams.params);
|
||
state.pageList = []
|
||
state.pageList2 = [];
|
||
state.total1 = 0;
|
||
getQueryPageList(state.queryParams).then((res: any) => {
|
||
state.pageList = res.data.list;
|
||
state.total = res.data.total;
|
||
showCurrentTime();
|
||
})
|
||
}
|
||
function resetQuery() {
|
||
queryFormRef.value.resetFields();
|
||
handleQuery();
|
||
}
|
||
function showCurrentTime() {
|
||
let date = new Date()
|
||
state.currentTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ":" +
|
||
(date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
|
||
}
|
||
function storageFQuery() {
|
||
getQueryList(state.storageFParams)
|
||
.then((res: any) => {
|
||
console.log(res.data);
|
||
state.storageFList = res.data;
|
||
})
|
||
.catch(() => { });
|
||
}
|
||
|
||
/**
|
||
* 新增 dialog
|
||
*/
|
||
function handleAdd() {
|
||
selectItem.value = undefined;
|
||
dialog.value = {
|
||
title: '新增库位',
|
||
visible: true
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 删除 dialog
|
||
*/
|
||
function handleDelete(row: any) {
|
||
|
||
const params = {
|
||
siteName: row.SITENAME
|
||
} as any;
|
||
deleteStorage(params).then((res: any) => {
|
||
if (res.code === '0') {
|
||
proxy.$ElMessage.success('删除成功');
|
||
}
|
||
handleQuery();
|
||
});
|
||
}
|
||
/**
|
||
* 修改库位 dialog
|
||
*/
|
||
function handleUpdate(row: any) {
|
||
state.dialog = {
|
||
title: '修改库位',
|
||
visible: true
|
||
};
|
||
state.selectItem = row;
|
||
}
|
||
|
||
function dialogOpend() {
|
||
formDataRef.value.resetFields();
|
||
if (state.selectItem) {
|
||
state.formData = {
|
||
account: state.selectItem.account,
|
||
name: state.selectItem.name,
|
||
pwd: state.selectItem.pwd,
|
||
phone: state.selectItem.phone,
|
||
email: state.selectItem.email,
|
||
jobNo: state.selectItem.jobNo,
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 取消关闭弹窗
|
||
*/
|
||
function cancel() {
|
||
state.dialog.visible = false;
|
||
}
|
||
|
||
/**
|
||
* 保存
|
||
*/
|
||
function submitForm() {
|
||
formDataRef.value.validate((isValid: boolean) => {
|
||
if (isValid) {
|
||
if (state.selectItem) {// 编辑
|
||
let params = {
|
||
dataId: state.selectItem.dataId,
|
||
...state.formData
|
||
}
|
||
updateStorage(params).then((res: any) => {
|
||
if (res.code === '0') {
|
||
proxy.$ElMessage.success('修改成功');
|
||
}
|
||
cancel();
|
||
handleQuery();
|
||
});
|
||
} else {
|
||
addStorage(state.formData).then((res: any) => {
|
||
|
||
if (res.code === '0') {
|
||
proxy.$ElMessage.success('新增成功');
|
||
}
|
||
|
||
cancel();
|
||
handleQuery();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.CommonStyle {
|
||
width: 60px;
|
||
height: 5px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 12px;
|
||
color: #323233;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.CommonStyle2 {
|
||
width: 72px;
|
||
height: 3.5px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 12px;
|
||
color: #323233;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.col-height {
|
||
padding-top: 2px;
|
||
padding-bottom: 2px;
|
||
}
|
||
</style>
|