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.
 
 
 
 

1614 lines
43 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">
<!-- <el-form-item label="网点:">
<el-input v-model="query.serviceNumber" placeholder="请选择网点" clearable></el-input>
</el-form-item> -->
<el-form-item label="承运时间:" class="el-times">
<el-date-picker
v-model="details.query.carrierTimeArr"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
value-format="YYYY-MM-DD"
clearable
/>
</el-form-item>
<el-form-item label="实际发车:" class="el-times">
<el-date-picker
v-model="details.query.startArr"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
value-format="YYYY-MM-DD"
clearable
/>
</el-form-item>
<el-form-item label="到车时间:" class="el-times">
<el-date-picker
v-model="details.query.arriveTimeArr"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
value-format="YYYY-MM-DD"
clearable
/>
</el-form-item>
<el-form-item label="创建时间:" class="el-times">
<el-date-picker
v-model="details.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 label="签收时间:" class="el-times">
<el-date-picker
v-model="details.query.signTimeArr"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="YYYY-MM-DD"
:shortcuts="shortcuts"
clearable
/>
</el-form-item>
<!-- <el-form-item label="车次号:" class="el-times">
<el-input v-model="query.stockupArea" placeholder="请输入车次号"></el-input>
</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>
<!-- 控件模块 -->
<div class="avue-crud__header">
<!-- 头部左侧按钮模块 -->
<div class="avue-crud__left">
<!-- 新增中转 -->
<el-button
v-if="permissionObj.TripartiteTransfer_add"
type="primary"
icon="Plus"
@click="addTransfer"
>新增中转
</el-button>
<!-- 装载清单 -->
<el-button
v-if="permissionObj.TripartiteTransfer_boatNote"
type="primary"
icon="Printer"
@click="handleShowListOfLoadedWagons"
>
装载清单
</el-button>
<!-- 装载卸车清单(财务) -->
<!-- <el-button
v-if="permissionObj.TripartiteTransfer_LoadingAndUnloadingList"
type="primary"
icon="Printer"
@click="searchReset()"
>
装载卸车清单(财务)
</el-button> -->
<!-- 发车 -->
<el-button
v-if="permissionObj.TripartiteTransfer_startCar"
type="primary"
icon="Van"
@click="handleConfirmStartCar"
>
发 车
</el-button>
<!-- 取消发车 -->
<!-- <el-button
v-if="permissionObj.TripartiteTransfer_cancelStartCar"
type="primary"
icon="CircleClose"
@click="handleCancelStartCar"
>
取消发车
</el-button> -->
<!-- 到达 -->
<el-button
v-if="permissionObj.TripartiteTransfer_arrive"
type="primary"
icon="CircleCheck"
@click="handleShowConfirm"
>
到 达
</el-button>
<!-- 修改 -->
<el-button
v-if="permissionObj.TripartiteTransfer_edit"
type="primary"
icon="Edit"
@click="editTransfer"
>
修 改
</el-button>
<!-- 取消配载 -->
<!-- <el-button type="primary" icon="CircleClose" @click="handleCancelCarsLoad">
取消配载
</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>
<!-- 列表模块 -->
<tablecmt
ref="tableNode"
:columnList="details.columnList"
:tableData="data"
:loading="loadingObj.list"
@inputTxt="inputsc"
@timeCheck="timesc"
@btnCheck="btnsc"
@selectCheck="selectsc"
@selection="selectionChange"
:tableRowClassName="
row => {
if (row.loadStatus === '10') return 'err_row';
}
"
>
<template #default="slotProps">
<template v-if="slotProps.scope.column.label === '中转批次号'">
<el-text @click="handleGoDetils(slotProps.scope)">{{
slotProps.scope.row.carsNo
}}</el-text>
</template>
<template v-if="slotProps.scope.column.label === '操作'">
<!-- 文员签收 -->
<el-text
v-if="
permissionObj.TripartiteTransfer_theClearkSignsForIt &&
!slotProps.scope.row.signTime
"
@click="handleTheClerkSignsForIt(slotProps.scope)"
>
文员签收
</el-text>
<!-- 签收图片管理 -->
<el-text
v-if="permissionObj.TripartiteTransfer_signImg"
@click="() => handleShowSiginImg(slotProps.scope)"
>
签收图片管理
</el-text>
<!-- 结算 -->
<el-text
v-if="
permissionObj.TripartiteTransfer_Account &&
Number(slotProps.scope.row.isSettlement) === 1
"
@click="handleShowCloseAnAccount(slotProps.scope)"
>
结算
</el-text>
<!-- 装车明细 -->
<el-text
v-if="permissionObj.TripartiteTransfer_loadingDetail"
@click="handleShowTruckLoadingDetails(slotProps.scope)"
>
装车明细
</el-text>
<el-text
v-if="
Number(slotProps.scope.row.loadStatus) === 0 &&
permissionObj.TripartiteTransfer_ZeroLoading
"
@click="handleZeroLoading(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
class="el-dialog-uploadSiginImg"
title="上传签收图片"
:visible.sync="details.popUpShow.uploadSiginImg"
width="780px"
:show-close="false"
v-model="details.popUpShow.uploadSiginImg"
>
<el-form label-width="100px">
<el-form-item label="中转批次号:">
<el-input readonly v-model="details.carsNo"></el-input>
</el-form-item>
<el-form-item label="图片:">
<el-upload
v-model:file-list="details.fileList"
action="/api/blade-resource/oss/endpoint/put-file"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:headers="details.headers"
:on-remove="handleRemove"
:before-upload="handleBeforeUpload"
:before-remove="handleBeforeRemove"
:on-success="handleSiginImgSuccess"
multiple
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-form>
<div class="flex-c-c mt10" v-if="permissionObj.TripartiteTransfer_signImg_submit">
<el-button @click="details.popUpShow.uploadSiginImg = false">关 闭</el-button>
<el-button type="primary" icon="Position" @click="handleSubmitSiginImg">提 交</el-button>
</div>
</el-dialog>
<!-- 确认到达信息 -->
<el-dialog
title="确认到达信息"
v-model="details.popUpShow.confirmArriveVisited"
width="30%"
:before-close="beforeClose"
append-to-body
class="confirmArriveVisited"
>
<el-form :inline="false" label-width="100px" :model="query">
<el-form-item label="到达时间">
<el-date-picker
v-model="details.form.arriveDateStr"
type="datetime"
placeholder="到达时间"
size="default"
/>
</el-form-item>
<el-form-item label="备注(非必填)">
<el-input v-model="details.form.remark" type="textarea" placeholder="备注" size="default" />
</el-form-item>
</el-form>
<div class="flex-c-c">
<el-button
@click="
() => {
details.form = {};
details.popUpShow.confirmArriveVisited = false;
}
"
>
取消
</el-button>
<el-button type="primary" icon="Promotion" @click="submitConfirmArrive">提交</el-button>
</div>
</el-dialog>
<!-- 确认到达信息 -->
<el-dialog
title="结算"
v-model="details.popUpShow.closeAnAccountVisited"
width="30%"
append-to-body
class="closeAnAccountVisited"
>
<el-form :inline="false" label-width="100px" :model="details.closeAnAccountForm">
<el-form-item label="结算金额">
<el-input-number
style="width: 100%"
:precision="2"
:min="0"
:step="1"
controls-position="right"
placeholder="请输入结算金额"
v-model="details.closeAnAccountForm.number"
/>
</el-form-item>
</el-form>
<div class="flex-c-c">
<el-button
@click="
() => {
details.form = {};
details.popUpShow.closeAnAccountVisited = false;
}
"
>
取消
</el-button>
<el-button type="primary" icon="Promotion" @click="handleSubmitCloseAnAccount"
>提交</el-button
>
</div>
</el-dialog>
<!-- 配载清单 -->
<MyPrint
v-model="details.popUpShow.listOfLoadedWagons"
width="80%"
title="配载清单"
:exportName="details.selectionList[0] ? details.selectionList[0].carsNo : ''"
isFullscreen
>
<TripartiteTransferPrintTemplate :waybillInfo="details.listOfLoadedWagonsData" />
</MyPrint>
<!-- 发车提示 -->
<DeleteWarningDialog
v-model="details.popUpShow.tipVisted"
:width="'600'"
title="异常发车警告!"
confirmButtonText="确认异常"
@close="details.popUpShow.tipVisted = false"
@confirm="startCar"
>
<template #content>
<div>
<el-text class="mx-1" size="large">
<el-icon><StarFilled /></el-icon>
装车数:{{ details.abnormalInfo.loadingNum || 0 }}
</el-text>
</div>
<div>
<el-text class="mx-1" size="large">
<el-icon><StarFilled /></el-icon>
卸车数:{{ details.abnormalInfo.unloadNum || 0 }}
</el-text>
</div>
<el-text class="mx-1" size="large">
<el-icon><StarFilled /></el-icon>
存在<strong>未卸车数据</strong>,避免误操作!<br />
如果核验无误请继续执行...
</el-text>
</template>
</DeleteWarningDialog>
<!-- 图片预览 -->
<el-dialog
v-model="details.popUpShow.dialogVisible"
width="fit-content"
:show-close="false"
:align-center="true"
class="imgDialogVisible"
>
<!-- <img w-full :src="details.dialogImageUrl" alt="Preview Image" /> -->
<el-image
:src="details.dialogImageUrl"
:preview-src-list="details.viewImgList"
:initial-index="details.viewImgIndex"
fit="cover"
/>
</el-dialog>
<!-- 列表配置显示 -->
<edittablehead
@closce="showdrawer"
:drawerShow="drawerShow"
:columnList="details.editColumnList"
v-model="details.editColumnList"
></edittablehead>
</template>
<script lang="ts">
export default {
name: '/distribution/artery/TripartiteTransfer',
};
</script>
<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters, useStore } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import {
downloadXls,
deepClone,
setNodeHeight,
debounce,
handleClearTableQuery,
getObjType,
handleSelectQuery,
ChecksWhetherTheWarehouseIsSelected,
} from '@/utils/util';
import { columnList, detailsColumnList } from '@/option/distribution/TripartiteTransfer';
import {
postArriveCars,
postTripartiteTransferPageList,
postStartCars,
postCancelStartCars,
postSignCars,
postSettlementCars,
postTripartiteTransferFindSignPhoto,
postTripartiteTransferUploadSignPhoto,
postTripartiteTransferStartCarsBefore,
} from '@/api/distribution/TripartiteTransfer.js';
import {
postFindLoadingListData,
postCancelCarsLoadByLoadId,
postRemoveCarsLoadScan,
postUpdateLoadScanFinalNodeIdById,
} from '@/api/distribution/VehicleStowage';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadRawFile, UploadFiles, UploadFile } from 'element-plus';
import { useRouter } from 'vue-router';
import type { UploadProps } from 'element-plus';
import { getToken } from '@/utils/auth';
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js';
import { dateNow } from '@/utils/date';
import { exportExcelByDom } from '@/utils/export';
import print from '@/utils/print';
// 获取路由实例
const $router = useRouter();
// vuex
const $store = useStore();
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];
},
},
],
/** 列表 */
columnList: deepClone(columnList),
/** 装车明细表头信息 */
detailsColumnList: deepClone(detailsColumnList),
/** 修改的列表信息 */
editColumnList: [],
/** 列表数据 */
data: [],
/** 页面loading */
loadingObj: {
/** 列表加载loading */
list: false,
/** 配置装车目的地详情 */
truckLoadingDetailPopUpLoading: false,
/** 页面loading */
pageLoading: false,
},
/** 列表复选框选中的数据 */
selectionList: [],
/** 是否显示设置表格 */
drawerShow: false,
/** 分页参数 */
page: {
pageNum: 1,
pageSize: 30,
total: 0,
},
/** 弹出层显示 */
popUpShow: {
/** 到达确认 */
confirmArriveVisited: false,
/** 结算弹窗 */
closeAnAccountVisited: false,
/** 装载清单 */
listOfLoadedWagons: false,
/** 上传签收图片 */
uploadSiginImg: false,
},
/** 列表Dom节点 */
listNode: '',
form: {},
/** 无用 */
options: [],
/** 付款方式 */
payMethodOptions: [
{ value: 1, label: '现付' },
{ value: 2, label: '回付' },
],
/** 配载状态 */
loadStatusOptions: [
{ label: '未发车', value: 0 },
{ label: '已发车', value: 10 },
{ label: '网点到车', value: 20 },
{ label: '网点发车', value: 30 },
{ label: '终点到车', value: 40 },
{ label: '已卸车', value: 80 },
{ label: '已签收', value: 90 },
{ label: '部分签收', value: 91 },
{ label: '取消配载', value: 100 },
],
/** 是否结算 */
isSettlementOptions: [
{ value: 1, label: '未结算' },
{ value: 2, label: '已结算' },
],
/** 客户类型 */
customerTypeOptions: [
{ value: 1, label: '商城' },
{ value: 2, label: 'C端客户' },
{ value: '1,2', label: '商城,C端客户' },
],
/** 送货方式 */
deliveryTypeOptions: [
{ value: 1, label: '自提' },
{ value: 2, label: '送货' },
],
/** 全屏 */
fullscreenObj: {
/** 配置节点 */
truckLoadingDetailPopUp: false,
comparativeStatementPopUp: false,
/** 装载清单 */
listOfLoadedWagonsPopUp: false,
},
/** 结算金额表单 */
closeAnAccountForm: { number: 0 },
listOfLoadedWagonsData: {},
/** 预览图片地址 */
dialogImageUrl: '',
/** 上传图片文件list */
fileList: [],
viewImgList: [],
viewImgIndex: 0,
/** 在上传图片的loadid */
loadId: '',
/** 在上传图片的中转批次号 */
carsNo: '',
/** 是否为签收状态 */
isSign: false,
/** 已上传的图片 */
oldImgArr: [],
// 图片上传必须携带TOKEN
headers: { 'Blade-Auth': 'Bearer ' + getToken() },
/** 异常信息 */
abnormalInfo: {
/** 装车数 */
loadingNum: 0,
/** 卸车数 */
unloadNum: 0,
},
});
/** 表格实例 */
const tableNode = ref();
const truckLoadingDetailNodeRef = ref();
// details.columnList.payMethodName.checkArr = details.payMethodOptions;
const { search, query, shortcuts, data, loadingObj, selectionList, drawerShow, page, popUpShow } =
toRefs(details);
/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);
/** 权限按钮 */
const permissionObj = reactive({
/** 新增中转 */
TripartiteTransfer_add: computed(() => {
return $store.getters.permission.TripartiteTransfer_add;
}),
/** 装载清单 */
TripartiteTransfer_boatNote: computed(() => {
return $store.getters.permission.TripartiteTransfer_boatNote;
}),
/** 装载卸车清单(财务) */
TripartiteTransfer_LoadingAndUnloadingList: computed(() => {
return $store.getters.permission.TripartiteTransfer_LoadingAndUnloadingList;
}),
/** 发车 */
TripartiteTransfer_startCar: computed(() => {
return $store.getters.permission.TripartiteTransfer_startCar;
}),
/** 取消发车 */
TripartiteTransfer_cancelStartCar: computed(() => {
return $store.getters.permission.TripartiteTransfer_cancelStartCar;
}),
/** 到达 */
TripartiteTransfer_arrive: computed(() => {
return $store.getters.permission.TripartiteTransfer_arrive;
}),
/** 修改 */
TripartiteTransfer_edit: computed(() => {
return $store.getters.permission.TripartiteTransfer_edit;
}),
/** 文员签收 */
TripartiteTransfer_theClearkSignsForIt: computed(() => {
return $store.getters.permission.TripartiteTransfer_theClearkSignsForIt;
}),
/** 签收图片管理 */
TripartiteTransfer_signImg: computed(() => {
return $store.getters.permission.TripartiteTransfer_signImg;
}),
/** 签收图片提交 */
TripartiteTransfer_signImg_submit: computed(() => {
return $store.getters.permission.TripartiteTransfer_signImg_submit;
}),
/** 结算 */
TripartiteTransfer_Account: computed(() => {
return $store.getters.permission.TripartiteTransfer_Account;
}),
/** 装车明细 */
TripartiteTransfer_loadingDetail: computed(() => {
return $store.getters.permission.TripartiteTransfer_loadingDetail;
}),
/** 零担装车 */
TripartiteTransfer_ZeroLoading: computed(
() => $store.getters.permission.TripartiteTransfer_ZeroLoading
),
});
/** 转换码值 */
const handleConversionCodeValue = (item, label, Arr) => {
const codes = Arr.map(item => item.value);
let _index = codes.indexOf(Number(item[label]));
if (_index === -1) _index = codes.indexOf(item[label]);
item[label + 'Name'] = _index !== -1 ? Arr[_index].label : '未知';
};
/** 输入框赋值 */
const handleSetOption = (label, Arr) => {
for (const iterator of details.columnList) {
if (iterator.prop === label + 'Name') {
iterator.checkarr = Arr;
break;
}
}
};
onMounted(() => {
// 表格下拉框赋值
handleSetOption('payMethod', details.payMethodOptions);
handleSetOption('loadStatus', details.loadStatusOptions);
handleSetOption('isSettlement', details.isSettlementOptions);
handleSetOption('customerType', details.customerTypeOptions);
handleSetOption('deliveryType', details.deliveryTypeOptions);
});
/** 请求页面数据 */
const onLoad = debounce(async (params = {}) => {
try {
// 开启loading
details.loadingObj.list = true;
const { carrierTimeArr, startArr, createTimeArr, arriveTimeArr, signTimeArr } = details.query;
// 承运时间
if (getObjType(carrierTimeArr) === 'array' && carrierTimeArr.length > 0) {
params.carrierTimeStartStr = carrierTimeArr[0];
params.carrierTimeEndStr = carrierTimeArr[1];
}
// 发车时间
if (getObjType(startArr) === 'array' && startArr.length > 0) {
params.startDate = startArr[0];
params.endDate = startArr[1];
}
// 到车时间
if (getObjType(arriveTimeArr) === 'array' && arriveTimeArr.length > 0) {
params.arriveTimeStartStr = arriveTimeArr[0];
params.arriveTimeEndStr = arriveTimeArr[1];
}
// 创建时间
if (getObjType(createTimeArr) === 'array' && createTimeArr.length > 0) {
params.createTimeStartStr = createTimeArr[0];
params.createTimeEndStr = createTimeArr[1];
}
// 签收时间
if (getObjType(signTimeArr) === 'array' && signTimeArr.length > 0) {
params.signTimeStartStr = signTimeArr[0];
params.signTimeEndStr = signTimeArr[1];
}
// 请求页面数据
const res = await postTripartiteTransferPageList({
...details.page,
...details.query,
...params,
});
const { code, data } = res.data;
if (code !== 200) return;
details.data = data.records;
for (const item of details.data) {
handleConversionCodeValue(item, 'payMethod', details.payMethodOptions);
handleConversionCodeValue(item, 'loadStatus', details.loadStatusOptions);
handleConversionCodeValue(item, 'isSettlement', details.isSettlementOptions);
handleConversionCodeValue(item, 'customerType', details.customerTypeOptions);
handleConversionCodeValue(item, 'deliveryType', details.deliveryTypeOptions);
}
details.page.total = data.total;
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.list = false;
}
}, 10);
// onLoad();
/** 初始化页面 */
const initPage = () => {
details.page.pageNum = 1;
onLoad();
};
initPage();
/** 搜索 */
const searchChange = () => {
onLoad();
};
/** 清空表单 */
const searchReset = () => {
details.query = {};
details.page.pageNum = 1;
handleClearTableQuery(details.columnList);
onLoad();
};
/** 展开列表控件 */
const showdrawer = (_flag?: boolean, _type?: string) => {
switch (_type) {
case 'truckLoadingDetail':
details.editColumnList = details.detailsColumnList;
break;
default:
console.log('123 :>> ', 123);
details.editColumnList = details.columnList;
break;
}
details.drawerShow = _flag;
};
/** 是否开启搜索区 */
const searchHide = () => {
details.search = !details.search;
setNodeHeight(tableNode.value.$el, '', true);
};
/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
details.query[row.prop] = index;
if (index === '') delete details.query[row.prop];
if (row.prop === 'carsNo') {
details.query.loadCarsNo = index;
if (!index && index !== 0) delete details.query['loadCarsNo'];
}
if (row.prop === 'carsLineName') {
details.query.warehouseName = index;
if (!index && index !== 0) delete details.query['carsLineName'];
}
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) => {
handleSelectQuery(index, row, details.query);
onLoad();
};
/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
console.log('list :>> ', list);
details.selectionList = list;
};
/** 每页数量改变执行的回调 */
const sizeChange = (pageSize: number) => {
details.page.pageSize = pageSize;
onLoad();
};
/** 页码改变执行的回调 */
const currentChange = pageNum => {
details.page.pageNum = pageNum;
onLoad();
};
/** 弹出层开启前清除数据 */
const beforeClose = done => {
done();
details.form = {};
details.view = false;
};
/** 显示装车详情 */
const handleShowTruckLoadingDetails = ({ row }) => {
$router.push({
path: '/distribution/artery/truckLoadingDetails',
query: {
loadId: row.id,
name: row.carsNo + '--' + '装车明细',
type: 'TripartiteTransfer',
deliveryType: row.deliveryType,
loadStatus: row.loadStatus,
},
});
};
/** 零担装车 */
const handleZeroLoading = ({ row }) => {
if (!ChecksWhetherTheWarehouseIsSelected())
return ElMessage.warning('多仓权限无法操作,请选择仓库');
$router.push({
path: '/distribution/artery/VehicleStowageZeroLoading',
query: {
loadId: row.id,
name: `${row.carsNo} - 零担装车`,
},
});
};
/** 新增中转 */
const addTransfer = async () => {
$router.push({
path: '/distribution/artery/addTripartiteTransfer',
query: { name: '新增中转', type: 'add' },
});
};
/** 修改中转 */
const editTransfer = async () => {
const _length = details.selectionList.length;
if (_length === 0) return ElMessage.warning('请选择一条修改数据');
if (_length > 1) return ElMessage.warning('只能选择一条数据修改');
if (Number(details.selectionList[0].isSettlement) === 2)
return ElMessage.warning('已结算, 无法修改');
if (Number(details.selectionList[0].loadStatus) === 10)
return ElMessage.warning('已发车, 无法修改');
if (Number(details.selectionList[0].loadStatus) === 90)
return ElMessage.warning('已签收, 无法修改');
if (Number(details.selectionList[0].loadStatus) === 91)
return ElMessage.warning('部分签收, 无法修改');
const _item = details.selectionList[0];
$router.push({
path: '/distribution/artery/addTripartiteTransfer',
query: {
name: '编辑中转',
type: 'edit',
loadId: _item.id,
},
});
};
/** 开启到达弹窗 */
const handleShowConfirm = () => {
if (details.selectionList.length === 0) {
return ElMessage({
message: '请选择到达数据',
type: 'warning',
});
} else if (details.selectionList.length !== 1) {
return ElMessage({
message: '仅支持单条数据操作',
type: 'warning',
});
}
const _item = details.selectionList[0];
details.popUpShow.confirmArriveVisited = true;
};
/** 提交到达 */
const submitConfirmArrive = async () => {
if (!details.form.arriveDateStr) {
return ElMessage({
message: '请选择到达日期',
type: 'warning',
});
}
details.popUpShow.confirmArriveVisited = false;
try {
details.loadingObj.pageLoading = true;
const submitData = {
loadId: details.selectionList.map(val => val.id).join(','),
...details.form,
};
const res = await postArriveCars(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;
}
};
/** 发车提交 */
const startCar = async () => {
try {
details.popUpShow.tipVisted = false;
details.loadingObj.pageLoading = true;
// const _arr = [];
// for (let index = 0; index < details.selectionList.length; index++) {
// const item = details.selectionList[index];
// if (item.realLoadingNumber === 0) return ElMessage.warning('存在未装车数据');
// _arr.push(item.id);
// }
const submitData = {
loadId: details.selectionList[0].id,
};
const res = await postStartCars(submitData);
const { code } = res.data;
if (code !== 200) {
return;
}
ElMessage({
type: 'success',
message: '发车成功',
});
onLoad();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
};
/** 发车 */
const handleConfirmStartCar = async () => {
try {
details.loadingObj.pageLoading = true;
if (details.selectionList.length === 0) {
return ElMessage({
message: '请选择发车数据',
type: 'warning',
});
} else if (details.selectionList.length !== 1) {
return ElMessage({
message: '仅支持单条数据操作',
type: 'warning',
});
}
const _deliveryType = details.selectionList[0].deliveryType + '';
const res = await postTripartiteTransferStartCarsBefore({
loadId: details.selectionList[0].id,
});
const { code, data } = res.data;
if (code !== 200 || getObjType(data) !== 'object') return;
if (!data.loadingNum) return ElMessage.warning('未存在装车数据,无法发车');
if (_deliveryType !== '1' && !data.unloadNum)
return ElMessage.warning('未存在卸车数据,无法发车');
details.abnormalInfo = data || {};
// 装车和卸车数据一致, 正常发车
if (_deliveryType === '1' || data.loadingNum <= data.unloadNum) {
ElMessageBox.confirm('确认发车吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
startCar();
});
return;
}
// 异常提示
details.popUpShow.tipVisted = true;
// ElMessage.warning('存在未卸完数据')
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
};
/** 取消发车 */
const handleCancelStartCar = () => {
if (details.selectionList.length === 0) {
return ElMessage({
message: '请选择发车数据',
type: 'warning',
});
} else if (details.selectionList.length !== 1) {
return ElMessage({
message: '仅支持单条数据操作',
type: 'warning',
});
}
ElMessageBox.confirm('确认取消发车吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
try {
details.loadingObj.pageLoading = true;
const submitData = {
loadId: details.selectionList.map(val => val.id).join(','),
};
const res = await postCancelStartCars(submitData);
const { code } = res.data;
if (code !== 200) {
return;
}
ElMessage({
type: 'success',
message: '取消发车成功',
});
onLoad();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
});
};
/** 查看详情 */
const handleGoDetils = ({ row }) => {
$store.commit('DEL_ONCE_TAG', '/distribution/artery/TripartiteTransferDetails');
$router.push({
path: '/distribution/artery/TripartiteTransferDetails',
query: {
name: row.carsNo + '-' + '中转详情',
loadId: row.id,
},
});
};
/** 文员签收 */
const handleTheClerkSignsForIt = ({ row }) => {
ElMessageBox.confirm('确认签收吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'success',
}).then(async () => {
try {
details.loadingObj.pageLoading = true;
const submitData = {
loadId: row.id,
};
const res = await postSignCars(submitData);
const { code } = res.data;
if (code !== 200) {
return;
}
ElMessage({
type: 'success',
message: '签收成功',
});
onLoad();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
});
};
/** 开启结算提交弹窗 */
const handleShowCloseAnAccount = ({ row }) => {
details.closeAnAccountForm = row;
details.closeAnAccountForm.number = Number(row.settlementValue || 0);
details.popUpShow.closeAnAccountVisited = true;
};
/** 结算提交 */
const handleSubmitCloseAnAccount = async () => {
try {
try {
details.loadingObj.pageLoading = true;
const submitData = {
loadId: details.closeAnAccountForm.id,
settlementValue: details.closeAnAccountForm.number,
};
const res = await postSettlementCars(submitData);
const { code, data } = res.data;
if (code !== 200) return;
ElMessage.success('结算成功');
details.popUpShow.closeAnAccountVisited = false;
initPage();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
} catch (error) {
console.log('error :>> ', error);
} finally {
}
};
/** 取消配载 */
const handleCancelCarsLoad = () => {
if (!ChecksWhetherTheWarehouseIsSelected())
return ElMessage.warning('多仓权限无法操作,请选择仓库');
if (details.selectionList.length === 0) {
return ElMessage({
message: '请选择需要取消的数据',
type: 'warning',
});
} else if (details.selectionList.length !== 1) {
return ElMessage({
message: '仅支持单条数据操作',
type: 'warning',
});
}
ElMessageBox.confirm('确认取消配载吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
const ids = [];
const _flag = details.selectionList.every(val => {
ids.push(val.id);
console.log('val :>> ', val);
return Number(val.loadStatus) === 0;
});
if (!_flag)
return ElMessage({
message: '车辆已发车, 无法取消配载计划',
type: 'warning',
});
try {
details.loadingObj.pageLoading = true;
const submitData = {
loadId: ids.join(','),
startCarType: '1',
};
const res = await postCancelCarsLoadByLoadId(submitData);
const { code } = res.data;
if (code !== 200) {
return;
}
ElMessage({
type: 'success',
message: '取消配载成功',
});
initOnload();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
});
};
/**
* 是否开启床车明细全屏
* @params(_type) 开启或关闭
*/
const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
let _node: any = '';
if (_name) _node = document.querySelectorAll(`.${_name} .maboxhi`);
console.log('_node :>> ', _node);
switch (_name) {
case 'comparativeStatementPopUp':
details.fullscreenObj.comparativeStatementPopUp =
!details.fullscreenObj.comparativeStatementPopUp;
break;
default:
details.fullscreenObj[_name] = !details.fullscreenObj[_name];
if (_type === 'close') {
if (_node) setNodeHeight(_node, '500px');
} else {
if (_node) setNodeHeight(_node);
}
break;
}
};
/** 显示装载清单 */
const handleShowListOfLoadedWagons = async () => {
try {
if (details.selectionList.length === 0) return ElMessage.warning('请选择装载清单');
if (details.selectionList.length > 1) return ElMessage.warning('只能选择一个装载清单');
details.loadingObj.pageLoading = true;
const { id } = details.selectionList[0];
const res = await postFindLoadingListData({ loadId: id });
const { code, data } = res.data;
if (code !== 200) return;
details.popUpShow.listOfLoadedWagons = true;
details.listOfLoadedWagonsData = data;
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
};
/** 显示签收图片 */
const handleShowSiginImg = async ({ row }) => {
try {
details.loadingObj.pageLoading = true;
details.loadId = row.id;
details.carsNo = row.carsNo;
details.fileList = [];
details.viewImgList = [];
details.oldImgArr = [];
details.isSign = Number(row.loadStatus) === 90 || Number(row.loadStatus) === 91 ? true : false;
const res = await postTripartiteTransferFindSignPhoto({ loadId: row.id });
const { code, data } = res.data;
if (code !== 200) return;
// 回显数据
if (getObjType(data) === 'array') {
for (let i = 0; i < data.length; i++) {
const val = data[i];
details.fileList.push({
url: val.photoUrl,
imgUrl: val.photoUrl,
});
details.oldImgArr.push(val.photoUrl);
details.viewImgList.push(val.photoUrl);
}
}
details.popUpShow.uploadSiginImg = true;
details.viewImgIndex = 0;
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
};
/** 已上传的文件 */
const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => {
details.viewImgList = details.fileList.map(val => val.url);
details.viewImgIndex = details.viewImgList.indexOf(uploadFile.url);
details.dialogImageUrl = uploadFile.url!;
details.popUpShow.dialogVisible = true;
};
/** 上传前类型检测 */
const handleBeforeUpload = async (rawFile: UploadRawFile) => {
console.log('rawFile :>> ', rawFile);
const _nameArr = rawFile.name.split('.');
if (_nameArr.length === 0) {
ElMessage.warning('异常类型文件');
return false;
}
const _name = _nameArr[_nameArr.length - 1];
const _whiteArr = ['png', 'jpg', 'jpeg'];
if (!_whiteArr.includes(_name.toLocaleLowerCase())) {
ElMessage.warning('请上传png、jpg、jpeg的类型图片');
return false;
}
const res = await compressImageBlob(rawFile);
return res;
};
/** 移除前检测 */
const handleBeforeRemove = rawFile => {
const _flag = details.isSign ? !details.oldImgArr.includes(rawFile.imgUrl) : true;
!_flag && ElMessage.warning('已签收,无法删除已提交的图片');
return _flag;
};
/** 上传成功 */
const handleSiginImgSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
details.viewImgList = details.fileList.map(val => val.url);
for (let i = 0; i < details.fileList.length; i++) {
const value = details.fileList[i];
console.log('value :>> ', value);
value.imgUrl = !value.response ? value.imgUrl : value.response.data.link;
}
};
/** 图片删除 */
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
for (let i = 0; i < details.fileList.length; i++) {
const value = details.fileList[i];
if (value.url === uploadFile.url) details.fileList.splice(i, 1);
}
};
/** 上传签收图片 */
const handleSubmitSiginImg = async () => {
if (details.fileList.length === 0) return ElMessage.warning('请上传签收图片');
try {
details.loadingObj.pageLoading = true;
const submitData = {
signOrderId: details.loadId,
signPhotoList: [],
};
for (let i = 0; i < details.fileList.length; i++) {
const value = details.fileList[i];
// 存在id, 为已存在数据, 不做上传
// if (value.id) continue
if (!value.imgUrl)
return ElMessage.warning('存在未上传完成或上传失败的数据,请等待上传完毕或移除');
submitData.signPhotoList.push({
signOrderId: details.loadId,
photoType: 1,
photoUrl: value.imgUrl,
});
}
details.popUpShow.uploadSiginImg = false;
const res = await postTripartiteTransferUploadSignPhoto(submitData);
const { code, data, msg } = res.data;
if (code !== 200) return;
ElMessage.success(msg);
} 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;
}
}
}
.pointer {
cursor: pointer;
}
.transferPopUp :deep(.el-textarea) {
width: 500px;
}
.dialog_container {
max-height: 60vh;
overflow-y: scroll;
&.fullScreen {
max-height: 85vh;
}
}
:deep(.el-table tr) {
&.err_row {
.tabculconte,
.el-tooltip,
.el-button--text,
.el-text {
// color: #e54b4b !important;
color: #f00 !important;
}
}
}
</style>