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.
 
 
 
 

1025 lines
26 KiB

<template>
<basic-container>
<div class="avue-crud" v-loading="details.loadingObj.pageLoading">
<!-- 搜索模块 -->
<el-row v-if="!search">
<!-- 查询模块 -->
<el-form :inline="true" :model="query" class="el-fr-d">
<el-form-item label="扫码时间:" class="el-times">
<el-date-picker
v-model="stockupDate"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
clearable
/>
</el-form-item>
<el-form-item label="卸车时间:" class="el-times">
<el-date-picker
v-model="stockupDate"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
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>
</el-row>
<!-- 控件模块 -->
<el-row>
<div class="avue-crud__header">
<!-- 头部左侧按钮模块 -->
<div class="avue-crud__left">
<el-button type="primary" icon="Edit" @click="handleEditWarehouse">
修改归属仓库
</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="el-icon-search" @click="searchHide" circle></el-button>
</div>
</div>
</el-row>
<!-- 列表模块 -->
<tablecmt
:columnList="details.columnList"
:tableData="data"
:loading="loadingObj.list"
@inputTxt="inputsc"
@timeCheck="timesc"
@btnCheck="btnsc"
@selectCheck="selectsc"
@selection="selectionChange"
>
<template #default="slotProps">
<el-text @click="handleShowDetails(slotProps.scope)"> 详情 </el-text>
</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>
<el-button class="submitBtn" type="primary" icon="CircleClose" @click="back"> 返回 </el-button>
</basic-container>
<!-- 签收包件详情 -->
<el-dialog
title="签收详情"
v-model="details.popUpShow.SiginOrderDetailsVisited"
width="80%"
append-to-body
class="truckLoadingDetailPopUp"
@close="onLoad"
>
<div class="flex-c-sb">
<el-button type="primary" icon="EditPen" @click="handleBatchSigin"> 批量签收 </el-button>
<div>
<el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
</div>
</div>
<!-- 列表模块 -->
<tablecmt
class="mt10 detailsTable"
style="height: 60vh"
:columnList="details.detailsColumnList"
:tableData="details.detailsInfo.data"
:loading="loadingObj.detailsLoading"
@inputTxt="() => {}"
@timeCheck="() => {}"
@selectCheck="() => {}"
@selection="detailsSelectionChange"
:isselectfun="
row => {
return Number(row.scanStatus) !== 3;
}
"
:isShowRefresh="false"
>
<template #default="slotProps">
<el-text
@click="handleZeroSigin(slotProps.scope)"
v-if="
Number(slotProps.scope.row.type) === 2 && Number(slotProps.scope.row.scanStatus) !== 3
"
>
零担签收
</el-text>
<el-text
@click="handleOrderSigin(slotProps.scope)"
v-if="
Number(slotProps.scope.row.type) === 1 && Number(slotProps.scope.row.scanStatus) !== 3
"
>
包件签收
</el-text>
</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="size => sizeChange(size, 2)"
@current-change="current => currentChange(current, 2)"
: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>
</el-dialog>
<!-- 零担签收 -->
<el-dialog
title="零担签收"
v-model="details.popUpShow.transferVisited"
width="30%"
append-to-body
class="truckLoadingDetailPopUp"
>
<el-form-item label="零担签收数量" label-width="100px">
<el-input-number
style="width: 100%"
:precision="0"
:max="details.zeroItem.num"
readonly
:controls="false"
v-model="details.zeroItem.enterNum"
/>
</el-form-item>
<!-- 表单按钮 -->
<div class="flex-c-c">
<el-button icon="Close" @click="details.popUpShow.transferVisited = false"> 取 消 </el-button>
<el-button type="primary" icon="Position" @click="handleZeroUnLoadSubmit"> 提 交 </el-button>
</div>
</el-dialog>
<!-- 更新签收单归属仓库 -->
<el-dialog
title="更新签收单归属仓库"
v-model="details.popUpShow.editWarehouseVisited"
width="30%"
append-to-body
class="truckLoadingDetailPopUp"
>
<div v-loading="details.loadingObj.editWarehouseLoading">
<el-form-item label="仓库" label-width="100px">
<el-select
class="w100"
v-model="details.editWarehouseInfo.warehouseId"
filterable
remote
reserve-keyword
placeholder="仓库"
:remote-method="remoteMethod"
:loading="details.loadingObj.loading"
>
<el-option
v-for="val in details.editWarehouseInfo.options"
:key="val.warehouseName"
:label="val.warehouseName"
:value="val.warehouseId"
/>
</el-select>
</el-form-item>
<!-- 表单按钮 -->
<div class="flex-c-c">
<el-button icon="Close" @click="details.popUpShow.editWarehouseVisited = false">
取 消
</el-button>
<el-button type="primary" icon="Position" @click="handleEditWarehouseInfo">
提 交
</el-button>
</div>
</div>
</el-dialog>
<!-- 列表配置显示 -->
<edittablehead
@setcolum="setnewcolum"
@closce="showdrawer"
:drawerShow="drawerShow"
:columnList="details.columnList"
></edittablehead>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters, useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
import { getMyCurrentWarehouse } from '@/api/work/work';
import { postFindWarehouseListByName } from '@/api/distribution/AddVehicleStowage';
import {
postFindSignOrderList,
postFindSignOrderDetailList,
postUpdateBelongToWarehouseBySignOrderId,
postBatchSign,
postSignPackage,
postSignZero,
} from '@/api/distribution/directGoMarket';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { downloadXls, deepClone, debounce } from '@/utils/util';
import { columnList, detailsColumnList } from '@/option/distribution/directGoMarketDetails';
import { useRouter, useRoute } from 'vue-router';
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: [],
/** 装车明细表头信息 */
columnList,
detailsColumnList,
/** 列表数据 */
data: [],
/** 页面loading */
loadingObj: {
/** 列表加载loading */
list: false,
/** 详情列表 */
detailsLoading: false,
/** 页面loading */
pageLoading: false,
/** 下拉框 */
loading: false,
/** 更新归属仓库 */
editWarehouseLoading: false,
},
/** 列表复选框选中的数据 */
selectionList: [],
/** 是否显示设置表格 */
drawerShow: false,
/** 分页参数 */
page: {
pageNum: 1,
pageSize: 30,
total: 0,
},
/** 修改归属仓库信息 */
editWarehouseInfo: {
warehouseId: '',
/** 仓库 */
options: [],
},
/** 弹出层显示 */
popUpShow: {
/** 零担确认签收数 */
transferVisited: false,
/** 签收包件详情 */
SiginOrderDetailsVisited: false,
/** 更新签收单归属仓库 */
editWarehouseVisited: false,
},
/** 列表Dom节点 */
listNode: '',
form: {},
/** 页面数据 */
pageInfo: {
/** 配送ID */
loadId: '',
/** 页面类型
* TripartiteTransfer -- 三方中转
* VehicleStowage -- 车辆配载
* */
type: '',
},
// 字典
/** 装卸状态 */
scanStatusOption: [
{ label: '装车', value: 1 },
{ label: '卸车', value: 2 },
{ label: '签收', value: 3 },
],
/** 有无数据 */
isDataOption: [
{ label: '是', value: 1 },
{ label: '否', value: 0 },
],
/** 类型 */
typeOption: [
{ label: '包件', value: 1 },
{ label: '零担', value: 2 },
],
/** 是否装车异常 */
loadingAbnormalOption: [
{ label: '是', value: 1 },
{ label: '否', value: 0 },
],
/** 是否卸车异常 */
unloadAbnormalOption: [
{ label: '是', value: 1 },
{ label: '否', value: 0 },
],
/** 是否补录 */
isSuppleOption: [
{ label: '是', value: 1 },
{ label: '否', value: 0 },
],
/** 签收状态 */
signStatusOption: [
{ label: '未签收', value: 0 },
{ label: '部分签收', value: 10 },
{ label: '已签收', value: 20 },
],
// 字典结束
/** 展示详情的签收单数据 */
showDetailsSiginOrder: {},
/** 被选中的零担数据 */
zeroItem: {},
/** 详情信息 */
detailsInfo: {
/** 复选框被选中数据 */
selectionList: [],
/** 查询数据 */
query: {},
/** 分页参 */
page: {
pageNum: 1,
pageSize: 30,
total: 0,
},
data: [],
},
});
const {
search,
query,
shortcuts,
stockupDate,
data,
loadingObj,
selectionList,
drawerShow,
page,
trickleLoadingPage,
} = toRefs(details);
// 获取路由实例
const $router = useRouter();
const $route = useRoute();
// vuex实例
const $store = useStore();
/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);
/** 初始化表格表头 */
const initTableSelect = columnList => {
for (const iterator of columnList) {
iterator.checkarr = details[iterator.prop.replace('Name', '') + 'Option'] || [];
}
console.log('columnList :>> ', columnList);
};
initTableSelect(details.columnList);
initTableSelect(details.detailsColumnList);
onMounted(() => {
/**
* 初始化获取本地缓存的编辑隐藏的列表
* 固定搭配,不能更改
*/
let checkListnewarr = functions.getStorage(window.location.pathname + 'checkList');
let flexListnewarr = functions.getStorage(window.location.pathname + 'flexList');
let sortlistnewarr = functions.getStorage(window.location.pathname + 'sortlist');
if (checkListnewarr) {
details.columnList.map(item => {
item.head = false;
});
checkListnewarr.map(ite => {
details.columnList.map(item => {
if (ite == item.label) {
item.head = true;
}
});
});
} else {
let arr = [];
details.columnList.map(item => {
if (item.head) {
arr.push(item.label);
}
});
functions.setStorage(window.location.pathname + 'checkList', arr);
}
if (flexListnewarr) {
details.columnList.map(item => {
item.fixed = false;
});
flexListnewarr.map(ite => {
details.columnList.map(item => {
if (ite == item.label) {
if (item.type == 6) {
item.fixed = 'right';
} else {
item.fixed = true;
}
}
});
});
} else {
let arr = [];
details.columnList.map(item => {
if (item.fixed) {
arr.push(item.label);
}
});
functions.setStorage(window.location.pathname + 'flexList', arr);
}
if (sortlistnewarr) {
details.columnList.map(item => {
item.sortable = false;
});
sortlistnewarr.map(ite => {
details.columnList.map(item => {
if (ite == item.label) {
item.sortable = true;
}
});
});
} else {
let arr = [];
details.columnList.map(item => {
if (item.sortable) {
arr.push(item.label);
}
});
functions.setStorage(window.location.pathname + 'sortlist', arr);
}
});
/** 转译数据 */
const initData = (data, row) => {
const _item = details[data + 'Option'].find(val => val.value == Number(row[data]));
row[data + 'Name'] = _item ? _item.label : '暂无数据';
};
/** 请求页面数据 */
const onLoad = debounce(async (params = {}) => {
try {
// 开启loading
details.loadingObj.list = true;
// 请求页面数据
const res = await postFindSignOrderList({
...details.page,
...details.query,
loadId: details.pageInfo.loadId,
...params,
});
const { code, data } = res.data;
if (code !== 200) return;
details.data = data.records;
for (const iterator of details.data) {
// initData('scanStatus', iterator);
// initData('type', iterator);
// initData('isData', iterator);
// initData('loadingAbnormal', iterator);
// initData('unloadAbnormal', iterator);
// initData('isSupple', iterator);
initData('signStatus', iterator);
}
details.page.total = data.total;
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.list = false;
}
}, 10);
const initOnLoad = () => {
details.page.pageNum = 1;
onLoad();
};
/** 请求详情数据 */
const onLoadDetails = async (params = {} as any) => {
try {
// 开启loading
details.loadingObj.detailsLoading = true;
// 请求页面数据
const res = await postFindSignOrderDetailList({
...details.page,
...details.query,
signOrderId: details.showDetailsSiginOrder.id,
...params,
});
const { code, data } = res.data;
if (code !== 200) return;
details.detailsInfo.data = data.records;
for (const iterator of details.detailsInfo.data) {
initData('scanStatus', iterator);
initData('type', iterator);
initData('isData', iterator);
initData('loadingAbnormal', iterator);
initData('unloadAbnormal', iterator);
initData('isSupple', iterator);
initData('isSupple', iterator);
}
details.page.total = data.total;
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.detailsLoading = false;
}
};
/** 搜索 */
const searchChange = () => {
initOnLoad();
};
/** 清空表单 */
const searchReset = () => {
details.query = {};
details.stockupDate = [];
initOnLoad();
};
/** 展开列表控件 */
const showdrawer = (_flag?: boolean, _type?: string) => {
switch (_type) {
case 'truckLoadingDetail':
details.editColumnList = details.columnList;
break;
default:
console.log('123 :>> ', 123);
details.editColumnList = details.columnList;
break;
// details.
}
details.drawerShow = _flag;
};
/** 是否开启搜索区 */
const searchHide = () => {
function getWinHight() {
var windowHight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
windowHight =
document.body.clientHeight < document.documentElement.clientHeight
? document.body.clientHeight
: document.documentElement.clientHeight;
} else {
}
return document.documentElement.clientHeight;
}
details.search = !details.search;
const timer = setTimeout(() => {
details.listNode.style.height =
getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
clearTimeout(timer);
}, 10);
};
/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
details.query[row.prop] = index;
if (index === '') delete details.query[row.prop];
initOnLoad();
};
/** 表格表头时间选择 */
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];
}
initOnLoad();
};
/** 表格表头输入框搜索 */
const btnsc = () => {};
/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
details.query[row.prop] = index;
if (!index) delete details.query[row.prop];
if (row.prop === 'certificateTypeName') {
details.query['certificateType'] = index;
if (!index) delete details.query['certificateType'];
}
initOnLoad();
};
/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
details.selectionList = list;
};
/** 每页数量改变执行的回调 */
const sizeChange = (pageSize: number, type) => {
switch (type) {
// 详情
case 2:
details.detailsInfo.page.pageSize = pageSize;
onLoadDetails(details.page);
break;
// 签收外层
default:
details.page.pageSize = pageSize;
initOnLoad();
break;
}
};
/** 页码改变执行的回调 */
const currentChange = (pageNum: number, type) => {
switch (type) {
// 详情
case 2:
details.detailsInfo.page.pageNum = pageNum;
onLoadDetails(details.page);
break;
// 签收外层
default:
details.page.pageNum = pageNum;
onLoad(details.page);
break;
}
};
/** 详情复选框选择 */
const detailsSelectionChange = list => {
details.detailsInfo.selectionList = list;
};
/**
* 设置列表 -- 固定函数
* 弹窗的勾选回调,用于更改头部数组
* 固定搭配,只需要更换 columnList
* */
const setnewcolum = (newarr, headarr, type) => {
if (type == 1) {
details.editColumnList = newarr;
functions.setStorage(window.location.pathname + 'checkList', headarr);
} else if (type == 2) {
details.editColumnList = newarr;
functions.setStorage(window.location.pathname + 'flexList', headarr);
} else if (type == 3) {
details.editColumnList = newarr;
functions.setStorage(window.location.pathname + 'sortlist', headarr);
}
};
/** 显示详情 */
const handleShowDetails = ({ row }) => {
details.showDetailsSiginOrder = row;
details.popUpShow.SiginOrderDetailsVisited = true;
onLoadDetails();
};
/** 签收 -- 订单 */
const handleOrderSigin = async ({ row }) => {
ElMessageBox.confirm('确认签收', '', {
confirmButtonText: '签收',
cancelButtonText: '取消',
type: 'success',
})
// 异常提交
.then(async () => {
try {
details.loadingObj.detailsLoading = true;
const submitData = {
signOrderId: details.showDetailsSiginOrder.id,
orderPackageCode: row.scanCode,
};
const res = await postSignPackage(submitData);
const { code } = res.data;
if (code !== 200) return;
ElMessage.success('签收成功');
onLoadDetails();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.detailsLoading = false;
}
});
};
/** 签收 -- 零担 */
const handleZeroSigin = async ({ row }) => {
details.zeroItem = { ...row };
details.zeroItem.enterNum = row.num;
details.popUpShow.transferVisited = true;
};
/** 签收 -- 零担 -- 提交 */
const handleZeroUnLoadSubmit = async () => {
try {
details.popUpShow.transferVisited = false;
details.loadingObj.detailsLoading = true;
const submitData = {
signOrderId: details.showDetailsSiginOrder.id,
carsLoadScanId: details.zeroItem.loadScanId,
enterNum: details.zeroItem.enterNum,
};
const res = await postSignZero(submitData);
const { code } = res.data;
if (code !== 200) return;
ElMessage.success('签收成功');
onLoadDetails();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.detailsLoading = false;
}
};
/** 批量签收 */
const handleBatchSigin = async () => {
if (details.detailsInfo.selectionList.length === 0)
return ElMessage.warning('最少选择一条数据!!!');
ElMessageBox.confirm('确认批量签收', '', {
confirmButtonText: '签收',
cancelButtonText: '取消',
type: 'success',
})
// 异常提交
.then(async () => {
try {
details.loadingObj.detailsLoading = true;
const submitData = {
signOrderId: details.showDetailsSiginOrder.id,
loadScanIds: details.detailsInfo.selectionList.map(val => val.loadScanId).join(','),
};
const res = await postBatchSign(submitData);
const { code } = res.data;
if (code !== 200) return;
ElMessage.success('签收成功');
onLoadDetails();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.detailsLoading = false;
}
});
};
/** 开启修改归属仓库弹窗 */
const handleEditWarehouse = () => {
if (details.selectionList.length === 0) return ElMessage.warning('最少选择一条数据!!!');
details.popUpShow.editWarehouseVisited = true;
};
/** 查询仓库 */
const remoteMethod = async val => {
// if (!val) return;
const res = await postFindWarehouseListByName({ warehouseName: val });
const { code, data } = res.data;
if (code !== 200) return;
details.editWarehouseInfo.options = data;
console.log('res :>> ', res);
};
remoteMethod('');
/** 批量修改归属仓库 */
const handleEditWarehouseInfo = async () => {
try {
details.loadingObj.editWarehouseLoading = true;
const submitData = {
signOrderIds: details.selectionList.map(val => val.id).join(','),
warehouseId: details.editWarehouseInfo.warehouseId,
};
const res = await postUpdateBelongToWarehouseBySignOrderId(submitData);
const { code } = res.data;
if (code !== 200) return;
ElMessage.success('更新成功');
details.popUpShow.editWarehouseVisited = false;
initOnLoad();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.editWarehouseLoading = false;
}
};
/** 返回上一页 */
const back = () => {
$router.push({
path: details.pageInfo.backPath,
});
$store.commit('DEL_TAG_CURRENT');
};
watch(
$route,
(newVal, oldVal) => {
if (newVal.path !== '/distribution/artery/directGoMarketDetails') return;
details.pageInfo = { ...$route.query };
onLoad();
},
{
immediate: true,
}
);
</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;
}
}
}
.pointer {
cursor: pointer;
}
.transferPopUp :deep(.el-textarea) {
width: 500px;
}
.w100 {
width: 100%;
}
// 返回按钮
.submitBtn {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
</style>