You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

865 lines
24 KiB

<template>
<basic-container v-loading="details.loadingObj.pageLoading">
<div class="avue-crud">
<!-- 搜索模块 -->
<div v-h5uShow="search">
<!-- 查询模块 -->
<el-form :inline="true" :model="query" class="header_search" label-width="100px">
<el-form-item label="运单号">
<el-input v-model="query.waybillNo" placeholder="请输入运单号" clearable></el-input>
</el-form-item>
<el-form-item label="订单自编号">
<el-input v-model="query.orderCode" placeholder="请输入订单自编号" clearable></el-input>
</el-form-item>
<el-form-item label="一级品类">
<el-input v-model="query.firstPackName" placeholder="请输入运单号" clearable></el-input>
</el-form-item>
<el-form-item label="二级品类">
<el-input
v-model="query.secondPackName"
placeholder="请输入运单号"
clearable
></el-input>
</el-form-item>
<el-form-item label="三级品类">
<el-input v-model="query.thirdPackName" placeholder="请输入运单号" clearable></el-input>
</el-form-item>
<el-form-item label="包条码">
<el-input
v-model="query.orderPackageCode"
placeholder="请输入运单号"
clearable
></el-input>
</el-form-item>
<el-form-item label="客户车次号">
<el-input v-model="query.trainNumber" placeholder="请输入运单号" clearable></el-input>
</el-form-item>
<el-form-item label="服务号">
<el-input v-model="query.serviceNum" placeholder="请输入运单号" clearable></el-input>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="query.createTimeArr"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
value-format="YYYY-MM-DD"
clearable
/>
</el-form-item>
<!-- 查询按钮 -->
<el-form-item class="el-btn">
<el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
<el-button icon="el-icon-delete" @click="searchReset">清 空</el-button>
</el-form-item>
</el-form>
</div>
<!-- 控件模块 -->
<el-row>
<div class="avue-crud__header">
<!-- 头部左侧按钮模块 -->
<div class="avue-crud__left">
<!-- 批量打印 -->
<el-button type="primary" icon="Printer" @click="handleBatchBarcode">
批量打印
</el-button>
<!-- 批量入库 -->
<el-button type="primary" icon="Position" @click="handleBatchPutInStorage">
批量入库
</el-button>
</div>
<!-- 头部右侧按钮模块 -->
<div class="avue-crud__right">
<el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
<el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
<el-button icon="Search" @click="searchHide" circle></el-button>
</div>
</div>
</el-row>
<!-- 表格 -->
<!-- 列表模块 -->
<tablecmt
:columnList="details.packageListColumnList"
:tableData="details.packageListData"
:loading="loadingObj.list"
@inputTxt="inputsc"
@timeCheck="timesc"
@btnCheck="btnsc"
@selectCheck="selectsc"
@selection="selectionChange"
>
<template #default="slotProps">
<template v-if="slotProps.scope.column.label === '操作'">
<el-text @click="handleShowPackageOrderList(slotProps.scope)"> 包内产品 </el-text>
<el-text @click="handleShowFlowNode(slotProps.scope)"> 流转节点 </el-text>
<el-text
v-if="Number(slotProps.scope.row.packageStatus) === 0"
@click="handlePutInStorage(slotProps.scope)"
>
直接入库
</el-text>
<el-text @click="printOrder(slotProps.scope)"> 查看二维码 </el-text>
</template>
</template>
</tablecmt>
<!-- 分页模块 -->
<el-row class="el-fy">
<div class="avue-crud__pagination flex-c-sb" style="width: 100%">
<div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
<!-- 分页模块 -->
<el-pagination
align="right"
background
@size-change="sizeChange"
@current-change="currentChange"
:current-page="page.pageNum"
:page-sizes="[30, 50, 80, 120]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
>
</el-pagination>
</div>
</el-row>
</div>
</basic-container>
<!-- 包内产品 -->
<el-dialog
title="包内产品"
v-model="details.popUpShow.packageDetailColumnListVisited"
width="80%"
:before-close="beforeClose"
append-to-body
:fullscreen="details.fullscreenObj.packageDetailColumnListVisited"
:show-close="false"
class="packageDetailColumnListVisited"
>
<template #header="{ close, titleId, titleClass }">
<div class="my-header flex-c-sb">
<h4 :id="titleId" :class="titleClass">包内产品</h4>
<div class="flex-c-c">
<!-- 全屏显示按钮 -->
<el-button type="text" v-if="!details.fullscreenObj.packageDetailColumnListVisited">
<el-icon class="" @click="handleFullScrean('open', 'packageDetailColumnListVisited')"
><FullScreen
/></el-icon>
</el-button>
<el-button type="text" v-else>
<el-icon class="" @click="handleFullScrean('close', 'packageDetailColumnListVisited')"
><CopyDocument
/></el-icon>
</el-button>
<!-- 弹窗关闭按钮 -->
<el-button type="text">
<el-icon class="" @click="close"><Close /></el-icon>
</el-button>
</div>
</div>
</template>
<tablecmt
:columnList="details.packageDetailColumnList"
:tableData="details.packageDetailData"
:loading="loadingObj.packageListLoading"
@inputTxt="inputsc"
@timeCheck="timesc"
@btnCheck="btnsc"
@selectCheck="selectsc"
@selection="selectionChange"
>
<template #default="slotProps"> </template>
</tablecmt>
<!-- 分页模块 -->
<el-pagination
align="right"
background
@size-change="sizeChange"
@current-change="currentChange"
:current-page="details.packageListPage.pageNum"
:page-sizes="[30, 50, 80, 120]"
:page-size="details.packageListPage.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="details.packageListPage.total"
>
</el-pagination>
</el-dialog>
<!-- 流转节点 -->
<el-dialog
title="流转节点"
v-model="details.popUpShow.flowNodeColumnListVisited"
width="80%"
:before-close="beforeClose"
append-to-body
:fullscreen="details.fullscreenObj.flowNodeColumnListVisited"
:show-close="false"
class="flowNodeColumnListVisited"
>
<template #header="{ close, titleId, titleClass }">
<div class="my-header flex-c-sb">
<h4 :id="titleId" :class="titleClass">流转节点</h4>
<div class="flex-c-c">
<!-- 全屏显示按钮 -->
<el-button type="text" v-if="!details.fullscreenObj.flowNodeColumnListVisited">
<el-icon class="" @click="handleFullScrean('open', 'flowNodeColumnListVisited')"
><FullScreen
/></el-icon>
</el-button>
<el-button type="text" v-else>
<el-icon class="" @click="handleFullScrean('close', 'flowNodeColumnListVisited')"
><CopyDocument
/></el-icon>
</el-button>
<!-- 弹窗关闭按钮 -->
<el-button type="text">
<el-icon class="" @click="close"><Close /></el-icon>
</el-button>
</div>
</div>
</template>
<tablecmt
:columnList="details.flowNodeColumnList"
:tableData="details.flowNodeData"
:loading="loadingObj.packageListLoading"
@inputTxt="inputsc"
@timeCheck="timesc"
@btnCheck="btnsc"
@selectCheck="selectsc"
@selection="selectionChange"
>
<template #default="slotProps"> </template>
</tablecmt>
<!-- 分页模块 -->
<el-pagination
align="right"
background
@size-change="sizeChange"
@current-change="currentChange"
:current-page="details.packageListPage.pageNum"
:page-sizes="[30, 50, 80, 120]"
:page-size="details.packageListPage.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="details.packageListPage.total"
>
</el-pagination>
</el-dialog>
<!-- 打印二维码 -->
<MyPrint v-model="details.popUpShow.QRCodeVisible" width="780px" :html="details.html" />
<!-- 列表配置显示 -->
<edittablehead
@setcolum="setnewcolum"
@closce="showdrawer"
:drawerShow="drawerShow"
:columnList="details.packageListColumnList"
v-model="details.packageListColumnList"
></edittablehead>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import functions from '@/utils/functions.js';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { getopenOrderAdvancePageList } from '@/api/waybill/TemporaryStorageList';
import {
postFindOrderDetails,
postFinaPackageTrackLogList,
getopenOrderIncomingPackage,
getShowAdvancePackgeCode,
} from '@/api/waybill/orderPackageListDetails.js';
import { showOrderPackgeCode } from '@/api/distribution/distributionStockArticle';
import {
downloadXls,
setNodeHeight,
getHtmls,
deepClone,
getObjType,
handleTranslationDataSeclect,
handleClearTableQuery,
} from '@/utils/util';
import { packageListColumnList, packageDetailColumnList } from '@/option/waybill/orderPackageList';
import { flowNodeColumnList } from '@/option/waybill/orderPackageListDetails.js';
import { useRouter } from 'vue-router';
import print from '@/utils/print';
import { ElMessage, ElMessageBox } from 'element-plus';
// 获取路由实例
const $router = useRouter();
const details = reactive<any>({
/** 是否开启搜索 */
search: true,
/** 表格搜索条件 */
query: {},
/** 时间快捷选择设置 */
shortcuts: [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
{
text: '最近三个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
},
],
/** 时间选择器数据 */
stockupDate: [],
/** 包明细表头 */
packageListColumnList: deepClone(packageListColumnList),
/** 包明细数据 */
packageListData: [],
/** 包内产品表头 */
packageDetailColumnList: deepClone(packageDetailColumnList),
/** 包内产品数据 */
packageDetailData: [],
/** 流转节点表头 */
flowNodeColumnList: deepClone(flowNodeColumnList),
/** 流转节点数据 */
flowNodeData: [],
/** 页面loading */
loadingObj: {
/** 列表加载loading */
list: false,
packageListLoading: false,
},
/** 列表复选框选中的数据 */
selectionList: [],
/** 是否显示设置表格 */
drawerShow: false,
/** 分页参数 */
page: {
pageNum: 1,
pageSize: 30,
total: 0,
},
/** 包明细分页参数 */
packageListPage: {
pageNum: 1,
pageSize: 30,
total: 0,
},
/** 弹出层显示 */
popUpShow: {
/** 流转节点 */
flowNodeColumnListVisited: false,
/** 二维码 */
QRCodeVisible: false,
/** 包内产品 */
packageDetailColumnListVisited: false,
},
/** 全屏 */
fullscreenObj: {
/** 流转节点 */
flowNodeColumnListVisited: false,
/** 包内产品 */
packageDetailColumnListVisited: false,
},
/** 列表Dom节点 */
listNode: '',
form: {},
html: '',
});
const {
search,
query,
shortcuts,
stockupDate,
data,
loadingObj,
selectionList,
drawerShow,
page,
trickleLoadingPage,
zeroAdditionalRecordingInfo,
popUpShow,
} = toRefs(details);
/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);
onMounted(() => {
const timer = setTimeout(() => {
details.listNode = document.querySelector('.maboxhi');
console.log('details.listNode :>> ', details.listNode);
details.listNode.style.transition = 'all .5s ease-out';
console.log('details.listNode :>> ', details.listNode);
clearTimeout(timer);
}, 100);
});
/** 请求页面数据 */
const onLoad = async (params = {}) => {
try {
if (Object.keys(details.query).length === 0) return (details.packageListData = []);
details.loadingObj.list = true;
const submitData = { ...details.page, ...details.query, ...params };
// 创建时间
if (
getObjType(details.query.createTimeArr) === 'array' &&
details.query.createTimeArr.length > 0
) {
submitData.createTimeStartStr = details.query.createTimeArr[0];
submitData.createTimeEndStr = details.query.createTimeArr[1];
}
delete submitData.createTimeArr;
const res = await postFindOrderDetails(submitData);
const { code, data } = res.data;
if (code !== 200) return;
details.packageListData = data.records;
details.page.total = data.total;
handleTranslationDataSeclect(details.packageListData, details.packageListColumnList);
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.list = false;
}
};
onLoad();
/** 搜索 */
const searchChange = () => {
onLoad();
};
/** 清空表单 */
const searchReset = () => {
details.query = {};
details.stockupDate = [];
details.page.pageNum = 1;
handleClearTableQuery(details.packageListColumnList);
onLoad();
};
/** 展开列表控件 */
const showdrawer = (_flag?: boolean) => {
details.drawerShow = _flag;
};
/** 是否开启搜索区 */
const searchHide = () => {
details.search = !details.search;
setNodeHeight(details.listNode, '', true);
};
/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
details.query[row.prop] = index;
if (index == '') delete details.query[row.prop];
onLoad();
};
/** 表格表头时间选择 */
const timesc = (index, row) => {
console.log(index, row);
if (!!index) {
index = dayjs(index).format('YYYY-MM-DD');
}
details.query[row.prop] = index;
if (!index) {
delete details.query[row.prop];
}
onLoad();
};
/** 表格表头输入框搜索 */
const btnsc = () => {};
/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
details.query[row.prop] = index;
if (!index && index !== 0) delete details.query[row.prop];
if (row.prop === 'certificateTypeName') {
details.query['certificateType'] = index;
if (!index) delete details.query['certificateType'];
}
onLoad();
};
/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
details.selectionList = list;
};
/** 每页数量改变执行的回调 */
const sizeChange = (pageSize: number) => {
details.page.pageSize = pageSize;
onLoad();
};
/** 页码改变执行的回调 */
const currentChange = pageNum => {
details.page.pageNum = pageNum;
onLoad();
};
/**
* 设置列表 -- 固定函数
* 弹窗的勾选回调,用于更改头部数组
* 固定搭配,只需要更换 columnList
* */
const setnewcolum = (newarr, headarr, type) => {
if (type == 1) {
details.packageListColumnList = newarr;
functions.setStorage(window.location.pathname + 'checkList', headarr);
} else if (type == 2) {
details.packageListColumnList = newarr;
functions.setStorage(window.location.pathname + 'flexList', headarr);
} else if (type == 3) {
details.packageListColumnList = newarr;
functions.setStorage(window.location.pathname + 'sortlist', headarr);
}
};
/** 弹出层开启前清除数据 */
const beforeClose = done => {
done();
details.form = {};
details.selectionList = [];
details.view = false;
};
/** 查看包内产品 */
const handleShowPackageOrderList = ({ row }) => {
// details.popUpShow.packageDetailColumnListVisited = true;
// nextTick(() => {
// // 获取弹窗内表格元素节点, 并设置高度
// const _node: any = document.querySelector('.packageDetailColumnListVisited .maboxhi');
// if (!_node) return;
// _node.style.height = '550px';
// console.log('_node :>> ', _node);
// });
ElMessage.warning('暂未开放');
};
/**
* 是否开启全屏
* @params(_type) 开启或关闭
*/
const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
let _node = '';
if (_name) _node = document.querySelector(`.${_name} .maboxhi`);
switch (_name) {
// 包内产品
case 'packageDetailColumnListVisited':
details.fullscreenObj.packageDetailColumnListVisited =
!details.fullscreenObj.packageDetailColumnListVisited;
if (_type === 'close') {
if (_node) setNodeHeight(_node, '500px');
} else {
if (_node) setNodeHeight(_node);
}
break;
default:
details.fullscreenObj[_name] = !details.fullscreenObj[_name];
if (_type === 'close') {
if (_node) setNodeHeight(_node, '500px');
} else {
if (_node) setNodeHeight(_node);
}
break;
}
};
/** 单列查看包条码 */
const batchPrintOrder = ({ row }) => {
let qr = {
ids: row.id,
};
showOrderPackgeCode(qr).then(res => {
// this.orderPackageCode = res.data
if (res.data.code !== 200) return;
console.log(res.data);
details.html = '';
details.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
});
};
/** 打印包条码 */
const printTemplate = () => {
const orderNodeList = document.querySelectorAll('.el-dialog-QRCode .el-dialog__body>div>div>div');
print(orderNodeList);
};
/** 入库 */
const handlePutInStorage = ({ row }) => {
ElMessageBox.confirm('确认直接入库吗?', '警告', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
try {
details.loadingObj.pageLoading = true;
const submitData = {
orderPackageCode: row.orderPackageCode,
/** 直接入库 */
incomingType: '3',
};
const res = await getopenOrderIncomingPackage(submitData);
const { code } = res.data;
if (code !== 200) return;
onLoad();
ElMessage({
type: 'success',
message: '入库成功',
});
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
})
.catch(() => {});
};
/** 批量入库 */
const handleBatchPutInStorage = () => {
if (details.selectionList.length === 0) return ElMessage.error('最少选择一条数据');
let orderPackageCodes = [];
const _flag = details.selectionList.every(val => {
if (Number(val.packageStatus) === 1) {
return false;
}
orderPackageCodes.push(val.orderPackageCode);
return true;
});
if (!_flag) return ElMessage.error('请选择未入库的数据');
ElMessageBox.confirm('确认直接入库吗?', '警告', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
try {
details.loadingObj.pageLoading = true;
const submitData = {
orderPackageCode: orderPackageCodes.join(','),
/** 直接入库 */
incomingType: '3',
};
const res = await getopenOrderIncomingPackage(submitData);
const { code } = res.data;
if (code !== 200) return;
onLoad();
ElMessage({
type: 'success',
message: '入库成功',
});
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
})
.catch(() => {});
};
/** 批量查看二维码 */
const handleBatchBarcode = async () => {
if (details.selectionList.length === 0)
return ElMessage.warning({ message: '请选择需要查看的数据' });
try {
details.loadingObj.pageLoading = true;
let qr = {
orderPackageCodes: details.selectionList.map(val => val.orderPackageCode).join(','),
};
const res = await getShowAdvancePackgeCode(qr);
if (res.data.code !== 200) return;
details.popUpShow.QRCodeVisible = true;
console.log(res.data);
details.html = '';
details.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
};
/** 单列查看包条码 */
const printOrder = async ({ row }) => {
try {
details.loadingObj.pageLoading = true;
details.html = '';
let qr = {
orderPackageCodes: row.orderPackageCode,
};
const res = await getShowAdvancePackgeCode(qr);
const { code, data } = res.data;
if (code !== 200) return;
details.popUpShow.QRCodeVisible = true;
details.html = getHtmls(data.dataList, data.templateHtml);
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
};
/** 显示流转节点 */
const handleShowFlowNode = async ({ row }) => {
try {
details.loadingObj.pageLoading = true;
const response = await postFinaPackageTrackLogList({ orderPackageCode: row.orderPackageCode });
const { code, data } = response.data;
if (code !== 200) return;
details.flowNodeData = data;
details.popUpShow.flowNodeColumnListVisited = true;
nextTick(() => {
// 获取弹窗内表格元素节点, 并设置高度
const _node: any = document.querySelector('.flowNodeColumnListVisited .maboxhi');
if (!_node) return;
_node.style.height = '550px';
console.log('_node :>> ', _node);
});
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
};
</script>
<style scoped lang="scss">
.fo-fl {
display: flex;
flex-wrap: wrap;
zoom: 0.9;
}
// 日期选择器
:deep(.el-date-editor.el-input) {
height: 100% !important;
width: 100% !important;
}
:deep(.el-range-editor.el-input__wrapper) {
height: 100% !important;
}
// 新增行
.add_row {
display: flex;
justify-content: space-between;
}
.add_row_title {
text-align: center;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
// 统计行
.statistics_row {
margin: 10px 0;
font-size: 14px;
zoom: 0.9;
display: flex;
> div {
margin-right: 20px;
}
}
// 卡片容器
.crad_container {
display: flex;
.card_container_item {
flex: 1;
// padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
&:first-child {
margin-right: 20px;
}
.card_container_item_title {
padding: 10px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.card_container_item_box {
padding: 10px;
}
}
}
</style>