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.
2940 lines
82 KiB
2940 lines
82 KiB
<template> |
|
<div class="content-max" v-loading="pageState" element-loading-text="Loading..."> |
|
<el-card class="box-card el_last"> |
|
<div> |
|
<el-tabs type="border-card" class="topClass" v-model="identifying"> |
|
<el-tab-pane label="订单信息" :name="1" :disabled="identifying == 2"></el-tab-pane> |
|
<el-tab-pane label="零担信息" :name="2" :disabled="identifying == 1"></el-tab-pane> |
|
</el-tabs> |
|
|
|
<el-form :model="Indexform" class="IndexFrom" ref="IndexForm" disabled> |
|
<div class="el_top"> |
|
<el-form-item label="异常类型" class="el_inputTop"> |
|
<el-select v-model="Indexform.workOrderType" style="width: 240px"> |
|
<el-option |
|
v-for="item in IndexException" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="发现节点" class="el_inputTop"> |
|
<el-select v-model="Indexform.discoveryNode" style="width: 240px"> |
|
<el-option |
|
v-for="item in DiscoveringNodes" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="异常工单号" class="el_inputTop el_Workordernumber"> |
|
<el-input |
|
v-model="Indexform.workOrderNumber" |
|
disabled |
|
:placeholder=" |
|
Indexform.workOrderNumber ? Indexform.workOrderNumber : '暂未生成工单号' |
|
" |
|
clearable |
|
/> |
|
</el-form-item> |
|
<el-form-item label="创建时间" class="el_inputTop el_Workordernumber"> |
|
<el-input v-model="Indexform.createTime" disabled clearable /> |
|
</el-form-item> |
|
</div> |
|
<el-tabs type="border-card" class="PackageInformation"> |
|
<el-tab-pane label="包件信息"> |
|
<template #label> |
|
<span class="custom-tabs-label"> |
|
<el-icon> |
|
<Box /> |
|
</el-icon> |
|
<span>包件信息</span> |
|
</span> |
|
</template> |
|
<div class="ResponsibilityBoxS"> |
|
<div class="el_btbox" v-for="(item, index) in PackageInfo" :key="index"> |
|
<el-form-item label="包条码" v-if="identifying == 1"> |
|
<el-tooltip |
|
:content="item.packageCode ? item.packageCode : '包条码'" |
|
placement="top" |
|
> |
|
<el-input |
|
v-if="identifying == 1" |
|
v-model="item.packageCode" |
|
placeholder="请输入包条码" |
|
clearable |
|
:rows="2" |
|
@change="ChangePackageInfo(item.packageCode, index)" |
|
/> |
|
</el-tooltip> |
|
</el-form-item> |
|
|
|
<el-form-item label="运单号"> |
|
<el-tooltip |
|
:content="item.waybillNumber ? item.waybillNumber : '运单号'" |
|
placement="top" |
|
> |
|
<el-input |
|
v-model="item.waybillNumber" |
|
placeholder="请输入运单号" |
|
@change="ChangePackageInfo(item.packageCode, index)" |
|
/> |
|
</el-tooltip> |
|
</el-form-item> |
|
|
|
<el-form-item label="订单自编号"> |
|
<el-tooltip :content="item.orderCode" placement="top"> |
|
<el-input v-model="item.orderCode" /> |
|
</el-tooltip> |
|
</el-form-item> |
|
|
|
<el-form-item label="一级品"> |
|
<el-input v-model="item.first" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="二级品"> |
|
<el-input v-model="item.secondary" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="品牌"> |
|
<el-input v-model="item.brandName" /> |
|
</el-form-item> |
|
</div> |
|
<div class="NumTotal"> |
|
<span>总件数:{{ NumberPackages }}</span> |
|
</div> |
|
</div> |
|
</el-tab-pane> |
|
</el-tabs> |
|
|
|
<el-tabs type="border-card" class="Basic_information"> |
|
<el-tab-pane label="基础信息"> |
|
<div class="el_information"> |
|
<div class="el_information_row"> |
|
<el-form-item label="车次号" v-if="displaySettings.trainNumber"> |
|
<el-tooltip |
|
:content="item && item.trainNumber ? item.trainNumber : '车次号'" |
|
placement="top" |
|
> |
|
<el-input v-model="Indexform.trainNumber" /> |
|
</el-tooltip> |
|
</el-form-item> |
|
|
|
<el-form-item label="配送时间" v-if="displaySettings.deliveryTime"> |
|
<el-date-picker |
|
v-model="Indexform.deliveryTime" |
|
type="datetime" |
|
format="YYYY-MM-DD" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item |
|
label="配送司机" |
|
prop="deliveryDriver" |
|
v-if="displaySettings.deliveryDriver" |
|
> |
|
<el-select |
|
v-model="Indexform.deliveryDriver" |
|
filterable |
|
default-first-option |
|
:reserve-keyword="false" |
|
> |
|
<el-option |
|
v-for="item in DeliveryDriver" |
|
:key="item.value" |
|
:label="item.driverName + '-' + item.trainNumber" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="车辆路线" v-if="displaySettings.vehicleRoute"> |
|
<el-input v-model="Indexform.vehicleRoute" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="发货时间" v-if="displaySettings.deliverGoodsTime"> |
|
<el-date-picker |
|
v-model="Indexform.deliverGoodsTime" |
|
type="datetime" |
|
format="YYYY-MM-DD" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item label="发现时间" v-if="displaySettings.discoveryTime"> |
|
<el-date-picker |
|
v-model="Indexform.discoveryTime" |
|
type="datetime" |
|
format="YYYY-MM-DD" |
|
value-format="YYYY-MM-DD" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item label="入库时间" v-if="displaySettings.warehousingTime"> |
|
<el-date-picker |
|
v-model="Indexform.warehousingTime" |
|
type="datetime" |
|
format="YYYY-MM-DD" |
|
value-format="YYYY-MM-DD" |
|
/> |
|
</el-form-item> |
|
<!-- 必填 --> |
|
<el-form-item label="运单商场" v-if="displaySettings.waybillMall"> |
|
<el-input v-model="Indexform.waybillMall" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="合作模式" v-if="displaySettings.typeServiceName"> |
|
<el-input |
|
v-model="Indexform.typeServiceName" |
|
:placeholder=" |
|
Indexform.typeServiceName ? Indexform.typeServiceName : '暂未查询到合作模式' |
|
" |
|
/> |
|
</el-form-item> |
|
|
|
<!-- 干线卸车 --> |
|
<el-form-item |
|
label="责任方" |
|
class="processor_box" |
|
style="width: 42%" |
|
v-if="displaySettings.processorEntityList" |
|
> |
|
<el-select |
|
v-model="Indexform.processorEntityList" |
|
placeholder="请选择责任方" |
|
multiple |
|
filterable |
|
clearable |
|
> |
|
<el-option |
|
v-for="item in warehouseData" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item |
|
class="processor_box" |
|
label="处理方" |
|
v-if="displaySettings.processor" |
|
style="width: 42%" |
|
> |
|
<el-select |
|
v-model="Indexform.processor" |
|
multiple |
|
filterable |
|
allow-create |
|
default-first-option |
|
:reserve-keyword="false" |
|
> |
|
<el-option |
|
v-for="item in warehouseData" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item |
|
style="min-width: 100%" |
|
label="调查经过" |
|
v-if="displaySettings.investigationPocess" |
|
> |
|
<el-input |
|
:rows="2" |
|
type="textarea" |
|
v-model="Indexform.investigationProcess" |
|
disabled |
|
placeholder="暂无调查经过" |
|
/> |
|
</el-form-item> |
|
</div> |
|
</div> |
|
</el-tab-pane> |
|
</el-tabs> |
|
|
|
<el-tabs type="border-card" class="el_nint" v-if="FangAddList.length"> |
|
<el-tab-pane> |
|
<template #label> |
|
<span class="custom-tabs-label"> |
|
<el-icon> |
|
<List /> |
|
</el-icon> |
|
<span>内部责任划分</span> |
|
</span> |
|
</template> |
|
<div class="ResponsibilityBox"> |
|
<template v-for="(item, index) in FangAddList" :key="index"> |
|
<div class="leftbox"> |
|
<!-- 提货环节 --> |
|
<el-form-item label="责任方"> |
|
<el-select v-model="item.businessName" clearable v-if="groundlineType == 1"> |
|
<el-option |
|
v-for="item in responsible" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
|
|
<el-select v-else v-model="item.businessName" filterable> |
|
<el-option |
|
v-for="item in warehouseData" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="责任人"> |
|
<el-select |
|
v-if="groundlineType != 1" |
|
v-model="item.personResponsibleName" |
|
clearable |
|
filterable |
|
> |
|
<el-option |
|
v-for="item in item.personResponsibleList" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
|
|
<el-input v-else v-model="item.personResponsibleName" placeholder="责任人" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="金额（元）" class="title"> |
|
<el-input :controls="false" v-model="item.responsibilityRatio" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="三方责任人"> |
|
<el-input v-model="item.tripartite" placeholder="三方责任人" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="说明" style="flex: 1"> |
|
<el-tooltip :content="item.description" placement="top"> |
|
<el-input |
|
type="textarea" |
|
:autosize="{ minRows: 1, maxRows: 10 }" |
|
v-model="item.description" |
|
placeholder="请输入说明 " |
|
/> |
|
</el-tooltip> |
|
</el-form-item> |
|
</div> |
|
</template> |
|
<!-- <div class="Proportion"> |
|
<span class="title">公司占比:{{ companyProportion }}%</span> |
|
</div> --> |
|
</div> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</el-form> |
|
|
|
<el-tabs |
|
type="border-card" |
|
class="el_Processingresults" |
|
v-if="Indexform.result && Indexform.result.length" |
|
> |
|
<el-tab-pane> |
|
<template #label> |
|
<span class="custom-tabs-label"> |
|
<el-icon> |
|
<EditPen /> |
|
</el-icon> |
|
<span>处理结果</span> |
|
</span> |
|
</template> |
|
<div class="selector"> |
|
<el-select |
|
disabled |
|
v-model="Indexform.result" |
|
multiple |
|
filterable |
|
default-first-option |
|
:reserve-keyword="false" |
|
> |
|
<el-option |
|
v-for="item in ProcessingResults" |
|
:key="item.dictKey" |
|
:label="item.dictValue" |
|
:value="item.dictKey" |
|
/> |
|
</el-select> |
|
</div> |
|
|
|
<div class="ProcessingResults" v-if="ProcessingList.length"> |
|
<div class="title">处理结果-理赔金额</div> |
|
<div class="Listadmiration"> |
|
<template v-for="(item, index) in ProcessingList" :key="index"> |
|
<div class="el_Processingresults_box"> |
|
<span class="el_title">{{ item.name }}</span> |
|
<div class="el_Processingresults_box_list"> |
|
<el-form-item label="金额"> |
|
<el-input v-model="item.money" disabled /> |
|
</el-form-item> |
|
|
|
<el-form-item label="支付单位"> |
|
<el-input |
|
v-model="item.paymentUnit" |
|
disabled |
|
:placeholder="item.paymentUnit || '未填写支付单位'" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="理赔支付时间"> |
|
<el-date-picker |
|
v-model="item.compensationTime" |
|
type="datetime" |
|
format="YYYY-MM-DD" |
|
value-format="YYYY-MM-DD HH:mm:ss" |
|
size="default" |
|
disabled |
|
:placeholder="item.compensationTime || '未选择支付时间'" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="支付方式"> |
|
<el-input |
|
v-model="item.text" |
|
disabled |
|
:placeholder="item.text || '未选择支付方式'" |
|
/> |
|
</el-form-item> |
|
</div> |
|
</div> |
|
</template> |
|
</div> |
|
<div class="el_tool"> |
|
<span>总金额:{{ TotalClaimAmount }}元</span> |
|
</div> |
|
</div> |
|
|
|
<!-- 处理结果说明 --> |
|
<el-form-item label="处理结果说明" class="el_resj" v-if="ProcessingList.length"> |
|
<el-input |
|
v-model="Indexform.resultDescription" |
|
:placeholder="Indexform.resultDescription || '未填写处理结果说明'" |
|
clearable |
|
:autosize="{ minRows: 1, maxRows: 4 }" |
|
type="textarea" |
|
disabled |
|
/> |
|
</el-form-item> |
|
</el-tab-pane> |
|
</el-tabs> |
|
|
|
<!-- 完结信息 --> |
|
<el-tabs type="border-card" class="demo-tabs el-endtabs" v-if="Completionpermissions"> |
|
<el-tab-pane> |
|
<template #label> |
|
<span class="custom-tabs-label"> |
|
<el-icon> |
|
<calendar /> |
|
</el-icon> |
|
<span>完结信息</span> |
|
</span> |
|
</template> |
|
|
|
<div class="payanindemnity" v-for="(item, index) in CompensationParty" :key="index"> |
|
<div class="el_pklab"> |
|
<!-- {{ item.cld }} --> |
|
<span class="title" :style="{ color: item.state != 0 ? '#000' : '#F56C6C' }">{{ |
|
item.state == 0 ? '赔款方' : '受款方' |
|
}}</span> |
|
</div> |
|
<div class="el_pkLi"> |
|
<div class="sk_input"> |
|
<span>仓库</span> |
|
<el-select v-model="item.warehouseId" disabled filterable placeholder="暂无仓库"> |
|
<el-option |
|
v-for="item in warehouseData" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</div> |
|
<!-- 责任人 --> |
|
<div class="sk_input" v-if="item.state == 0"> |
|
<span>责任人</span> |
|
<el-tooltip |
|
:content=" |
|
item.compensationPersonnel ? item.compensationPersonnel : '暂无责任人' |
|
" |
|
placement="top" |
|
> |
|
<el-input |
|
v-model="item.compensationPersonnel" |
|
placeholder="暂无责任人" |
|
clearable |
|
:rows="2" |
|
disabled |
|
/> |
|
</el-tooltip> |
|
</div> |
|
<div class="sk_input"> |
|
<span>原因</span> |
|
<el-tooltip :content="item.reason" placement="top"> |
|
<el-input v-model="item.reason" placeholder="暂无原因" disabled /> |
|
</el-tooltip> |
|
</div> |
|
<div class="sk_input"> |
|
<span>金额</span> |
|
<el-tooltip :content="item.num ? item.num : '0'" placement="top"> |
|
<el-input v-model="item.num" disabled /> |
|
</el-tooltip> |
|
</div> |
|
|
|
<div class="sk_input" v-if="item.state == 1"></div> |
|
</div> |
|
</div> |
|
<div class="paySum"> |
|
<span> |
|
<el-icon> <Coin /> </el-icon>赔款金额总和:<b>{{ TotalamountCompensation }}</b></span |
|
> |
|
<span> |
|
<el-icon> <Coin /> </el-icon>受款金额总和:<b>{{ TotalamountReceived }}</b></span |
|
> |
|
</div> |
|
</el-tab-pane> |
|
<!-- 仲裁原因 --> |
|
<!-- v-if="routerState == 'end'" --> |
|
<div class="arbitrate"> |
|
<el-form-item label="仲裁原因"> |
|
<el-input |
|
v-model="Indexform.arbitrate" |
|
type="textarea" |
|
:autosize="{ minRows: 5, maxRows: 4 }" |
|
disabled |
|
placeholder="暂无仲裁原因" |
|
/> |
|
</el-form-item> |
|
</div> |
|
</el-tabs> |
|
|
|
<!-- 照片回显 --> |
|
<el-tabs type="border-card" class="demo-tabs el-photo" v-if="Indexform.packList.length"> |
|
<el-tab-pane> |
|
<template #label> |
|
<span class="custom-tabs-label"> |
|
<el-icon> |
|
<Picture /> |
|
</el-icon> |
|
<span>{{ |
|
SelectType == 1 ? '运损照片' : SelectType == 3 ? '窜货照片' : '照片' |
|
}}</span> |
|
</span> |
|
</template> |
|
<!-- 照片 --> |
|
<div class="Transport_damage_photos"> |
|
<el-upload |
|
disabled |
|
v-model:file-list="Indexform.packList" |
|
list-type="picture-card" |
|
:on-preview="pictureList" |
|
:on-remove="ImgListRemove" |
|
:action="doubledCount" |
|
:before-upload="beforeAvatarUpload" |
|
multiple |
|
drag |
|
class="el-picture-card" |
|
> |
|
<el-icon> |
|
<Plus /> |
|
</el-icon> |
|
</el-upload> |
|
|
|
<el-dialog v-model="dialogImgList" width="30%"> |
|
<el-image |
|
:src="amplifyurl" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="amplifysrcList" |
|
:initial-index="4" |
|
fit="cover" |
|
/> |
|
</el-dialog> |
|
</div> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</div> |
|
<div class="dialog-footer"> |
|
<el-button type="primary" v-if="PermissionButton.reply" @click="addireply">回复</el-button> |
|
<el-button type="primary" v-if="PermissionButton.Processing_results" @click="addingRecord" |
|
>处理结果 |
|
</el-button> |
|
<el-button |
|
type="primary" |
|
v-if="PermissionButton.Processing_resultsSub" |
|
@click="addingRecord" |
|
>处理结果提交 |
|
</el-button> |
|
<!-- <el-button type="primary" v-if="PermissionButton.Confirm_review" @click="ConfirmReview" |
|
>确定审核 |
|
</el-button> --> |
|
<el-button type="primary" v-if="PermissionButton.result_returned" @click="resultreturnedFun" |
|
>结果打回</el-button |
|
> |
|
|
|
<el-button type="primary" v-if="PermissionButton.work_order_completion" @click="EndJump" |
|
>完结工单</el-button |
|
> |
|
<el-button type="primary" v-if="PermissionButton.repulse" @click="BatchReturn" |
|
>打回</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
v-if="PermissionButton.apply_arbitration" |
|
@click="CustomerServiceCompleted" |
|
>客服仲裁完结</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
v-if="PermissionButton.information_editing" |
|
@click="EditInformation" |
|
>修改内部责任划分</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
v-if="PermissionButton.Appeal_established" |
|
@click="AppealEstablished" |
|
>申诉成立</el-button |
|
> |
|
<el-button type="primary" v-if="PermissionButton.Appeal_rejection" @click="AppealRejection" |
|
>申诉驳回</el-button |
|
> |
|
<!-- 待处理确定 --> |
|
<el-button |
|
type="primary" |
|
v-if="PermissionButton.Processing_confirmation" |
|
@click="ResultConfirmation" |
|
>审核确认</el-button |
|
> |
|
<!-- 仓库客服处理结果确定 --> |
|
<el-button |
|
type="primary" |
|
v-if="PermissionButton.Result_determination" |
|
@click="ResultDetermination" |
|
>处理结果确定</el-button |
|
> |
|
</div> |
|
</el-card> |
|
|
|
<el-affix :offset="msgTop"> |
|
<div class="right"> |
|
<el-tabs type="border-card"> |
|
<div class="content"> |
|
<el-tab-pane |
|
label="调查记录" |
|
v-loading="Msgloading" |
|
element-loading-text="正在获取记录..." |
|
> |
|
<div class="el_Processingparty"> |
|
<div></div> |
|
<div class="el_Refresh" @click="Chatrefresh"> |
|
<el-button type="primary">刷新</el-button> |
|
</div> |
|
</div> |
|
<div class="ovhe" :style="{ height: msgHight + 'px' }" ref="scrollContainer"> |
|
<el-timeline> |
|
<el-timeline-item v-for="(item, index) in MessageContent" :key="index"> |
|
<el-card |
|
:class="{ |
|
CardidentifyingC1: item.difference == '1', |
|
CardidentifyingC2: item.difference == '2', |
|
CardidentifyingC3: item.difference == '3', |
|
'mx-1': true, |
|
}" |
|
> |
|
<div class="header"> |
|
<div class="e_ico"> |
|
<el-icon> <User /> </el-icon>: |
|
<h4 class="e_h4">{{ item.username }} 【{{ item.name }}】</h4> |
|
</div> |
|
<div class="e_ico e_time"> |
|
<h4>{{ item.time }}</h4> |
|
</div> |
|
<el-tag |
|
:class="{ |
|
identifyingC1: item.difference == '1', |
|
identifyingC2: item.difference == '2', |
|
identifyingC3: item.difference == '3', |
|
'mx-1': true, |
|
}" |
|
effect="dark" |
|
>{{ |
|
item.difference == '1' |
|
? ' 调查记录' |
|
: item.difference == '2' |
|
? '指定记录' |
|
: item.difference == '3' |
|
? '操作记录' |
|
: '' |
|
}} |
|
</el-tag> |
|
</div> |
|
|
|
<div class="e_ico"> |
|
<el-icon> <ChatRound /> </el-icon>:<span> {{ item.content }}</span> |
|
</div> |
|
|
|
<!-- <div class="img" v-if="item.img"> |
|
<el-image |
|
:src="item.img" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="item.imgList" |
|
:initial-index="4" |
|
fit="cover" |
|
/> |
|
</div> --> |
|
<div class="img" v-if="item.img"> |
|
<el-image |
|
v-for="(item, index) in item.imgList" |
|
:key="index" |
|
:src="item" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="[item]" |
|
:initial-index="4" |
|
fit="cover" |
|
/> |
|
</div> |
|
<div class="mp4" @click="AddVideoPreview(index)" v-if="item.mp4"> |
|
<span |
|
>视频: <el-icon> <VideoPlay /> </el-icon>点击预览 |
|
</span> |
|
</div> |
|
|
|
<div class="file" v-if="item.file" @click="FileDownload(index)"> |
|
<a :href="item.file"> |
|
<span |
|
>文件: |
|
<el-icon> |
|
<FolderOpened /> |
|
</el-icon> |
|
点击下载 |
|
</span> |
|
</a> |
|
</div> |
|
|
|
<div class="identifying"> |
|
<!-- <div class="e_ico"> |
|
<el-icon> <Timer /> </el-icon>: |
|
<p>{{ item.time }}</p> |
|
</div> --> |
|
<div |
|
class="tag" |
|
v-if=" |
|
(msgState == 1 || msgState == 2 || msgState == 3) && item.identifying |
|
" |
|
> |
|
<el-tag class="mx-1" effect="dark" |
|
>{{ |
|
msgState == 1 |
|
? ' 待回复' |
|
: msgState == 2 |
|
? '已回复' |
|
: msgState == 3 |
|
? '已超时' |
|
: '' |
|
}} |
|
</el-tag> |
|
</div> |
|
</div> |
|
</el-card> |
|
</el-timeline-item> |
|
</el-timeline> |
|
</div> |
|
<!-- 输入框 --> |
|
</el-tab-pane> |
|
</div> |
|
</el-tabs> |
|
</div> |
|
</el-affix> |
|
</div> |
|
<!-- 结果打回弹窗 --> |
|
<el-dialog v-model="dialogReturn" title="结果打回" width="40%" draggable class="plAllret"> |
|
<el-form |
|
v-loading="repulse" |
|
element-loading-text="正在打回中..." |
|
label-position="top" |
|
label-width="100px" |
|
:model="BatchFrom" |
|
> |
|
<el-form-item label="打回原因"> |
|
<el-input v-model="BatchFrom.txt" type="textarea" :rows="4" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="流转营业部"> |
|
<el-select |
|
v-model="BatchFrom.businessDepartment" |
|
multiple |
|
filterable |
|
default-first-option |
|
:reserve-keyword="false" |
|
placeholder="请选择活动区域" |
|
> |
|
<el-option |
|
v-for="item in warehouseData" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-form> |
|
<template #footer> |
|
<span class="dialog-footer"> |
|
<el-button @click="dialogReturn = false">取消</el-button> |
|
<el-button type="primary" @click="ConfirmReturn" :disabled="repulse"> 确定 </el-button> |
|
</span> |
|
</template> |
|
</el-dialog> |
|
</template> |
|
<script> |
|
export default { |
|
name: '/aftersales/aftersalesWorkOrderInfo', |
|
}; |
|
</script> |
|
|
|
<script setup> |
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
|
import { useRouter, useRoute } from 'vue-router'; |
|
import { useStore } from 'vuex'; |
|
import { getDictionaryBiz } from '@/api/system/dict'; //字典 |
|
import { getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方 |
|
import { |
|
$_getTrackRecord, |
|
$_getSurveyRecord, |
|
$_getInfo, |
|
$_batchReturn, |
|
$_Cancelappeal, |
|
$_updateWorkOrderStatus, |
|
$_updateManagerConfirmed, |
|
$_batchRepulseCompleted, |
|
} from '@/api/aftersales/aftersalesWorkOrder'; |
|
import { ref, reactive, computed, onMounted } from 'vue'; |
|
import { getToken } from '@/utils/auth'; |
|
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js'; |
|
import { AddressClosed, deepClone } from '@/utils/util'; |
|
const $useStore = useStore(); |
|
const $router = useRouter(); |
|
const $route = useRoute(); |
|
const Indexform = ref({ |
|
packList: [], |
|
decreaseImageEntityList: [], //处理好的图片数据 |
|
discoveryNode: '1', |
|
}); //首页新增表单 |
|
const pageState = ref(false); //页面加载状态 |
|
const ProcessingResults = ref([]); //处理结果列表选项 |
|
const IndexException = ref([]); //异常类型下拉选择 |
|
const ZFname = ref(''); //支付名字预留状态 |
|
const IndexForm = ref(null); //表格ref实力 |
|
const DiscoveringNodes = ref([]); //发现节点下拉选择 |
|
const warehouseData = ref([]); //处理方 |
|
const SelectType = ref(null); //类型 |
|
const HistoricalPackageinput = ref(''); //历史包件选择 |
|
const dialogImageUrl = ref(null); //图片 |
|
const dialogVisible = ref(null); //图片 |
|
const groundlineSet = ref(true); //干线条件都满足 |
|
const TotalClaimAmount = ref(0); //总金额 |
|
const groundlineType = ref(null); //干线状态 |
|
const Inputbox = ref(true); //调查经过输入框状态 |
|
const ShortageState = ref(false); //少货件数弹窗状态 |
|
const fleeingState = ref(false); //窜货件数弹窗 |
|
const ShortageList = ref([]); //少货件数 |
|
const fleeingList = ref([]); //窜货件数 |
|
const valueStrictly = ref(); |
|
const ProcessingreleaseState = ref(true); //是否可以填写处理结果 |
|
const routerID = ref(null); //路由参数ID |
|
const routerState = ref(''); //路由状态 |
|
const personResponsibleList = ref([]); //责任人列表 |
|
const ZFdialog = ref(false); //支付方式弹出 |
|
const companyProportion = ref(100); //公司占比 |
|
const identifying = ref(1); //订单，零担状态 |
|
const dialogHistoricalPackage = ref(false); //历史包件弹窗 |
|
const HistoricalPackageList = ref([]); //历史包件数组 |
|
const HistorIndex = ref(0); //历史包件索引 |
|
const NumberPackages = ref(0); //包件个数 |
|
const dialogImgList = ref(false); //图片预览弹窗 |
|
const amplifyurl = ref(''); //当前点击的图片 |
|
const amplifysrcList = ref([]); //图片循环列表 |
|
const ProcessingList = ref([]); //处理结果已经选择的列表 |
|
const Paymentmethod = ref([]); //支付方式 |
|
const Mydata = ref(); //当前登录人信息 |
|
const UserPermissions = ref(); //当前登录人角色身份 |
|
// ====== |
|
const MessageContent = ref([]); //调查记录 |
|
const scrollContainer = ref(null); //客服实例 |
|
const QueryId = ref(null); |
|
const msgHight = ref(100); //聊天框消息高度 |
|
const msgTop = ref(0); //调查记录距离页面吸顶记录 |
|
const msgState = ref(0); |
|
const Msgloading = ref(false); |
|
const founderform = ref({}); //工单创建人 |
|
const TotalamountCompensation = ref(0); //赔款总金额 |
|
const TotalamountReceived = ref(0); //受款总金额 |
|
const BatchFrom = ref({}); //打回内容 |
|
const dialogReturn = ref(false); //打回弹窗 |
|
const appeal = ref(false); //工单申诉状态 |
|
const AppealReview = ref(false); //申诉状态只能查看 |
|
const warehouseIdState = ref(false); //当前订单仓库状态 |
|
const CompletedView = ref([]); //是否可以看到完结信息 |
|
const CompensationParty = ref([ |
|
{ |
|
name: '', |
|
state: 0, |
|
num: null, |
|
reason: '', |
|
cld: 1, |
|
warehouseId: null, |
|
compensationPersonnel: '', |
|
}, //赔款方 |
|
// explains: '' |
|
{ |
|
name: '', |
|
state: 1, |
|
num: null, |
|
reason: '', |
|
cld: 1, |
|
warehouseId: null, |
|
compensationPersonnel: '', |
|
}, //受款方 |
|
// explains: '' |
|
]); //收/赔 |
|
|
|
// ======= |
|
|
|
const PackageInfo = ref([ |
|
//包件信息 |
|
{ |
|
packageCode: '', |
|
orderCode: '', |
|
waybillNumber: '', |
|
brandName: '', |
|
state: false, |
|
first: '', |
|
secondary: '', |
|
}, |
|
]); |
|
// 责任方列表 |
|
const FangAddList = ref([ |
|
{ |
|
businessName: '', |
|
personResponsibleName: '', |
|
responsibilityRatio: '', |
|
description: '', |
|
tripartite: '', |
|
ProportionMax: 100, |
|
}, |
|
]); |
|
// 提货责任方 |
|
const responsible = ref([ |
|
{ |
|
value: 1, |
|
label: '工厂', |
|
}, |
|
{ |
|
value: 2, |
|
label: '外包搬运', |
|
}, |
|
{ |
|
value: 3, |
|
label: '物流', |
|
}, |
|
]); |
|
|
|
onMounted(() => { |
|
msgHight.value = window.innerHeight * 0.8; |
|
console.log(msgHight.value, '处理好的页面高度'); |
|
msgTop.value = window.innerHeight * 0.1; |
|
console.log(msgTop.value, '处理好的页面高度'); |
|
// 滚动到最后 |
|
setTimeout(() => { |
|
const container = scrollContainer.value; |
|
if (container) { |
|
container.scrollTop = container.scrollHeight; |
|
} |
|
}, 0); |
|
}); |
|
|
|
// // 底部按钮权限 |
|
// const PermissionButton = computed(() => { |
|
|
|
// return { |
|
// reply:true, //回复 |
|
// Processing_results: |
|
// !appeal.value && |
|
// (($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '10') || |
|
// ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '10') || |
|
// ($route.query.RouteIndexs == '3' && $ route.query.workOrderStatus == '20') || |
|
// ($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '20') || |
|
// ($route.query.RouteIndexs == '1' && $route.query.workOrderStatus == '20')), //处理结果10 20 21 |
|
// work_order_completion: |
|
// (!appeal.value && |
|
// ($route.query.RouteIndexs == '0' || $route.query.RouteIndexs == '3') && |
|
// $route.query.workOrderStatus != '80' && |
|
// UserPermissions.value != '仓库客服' && |
|
// $route.query.workOrderStatus != '20') || |
|
// ($route.query.RouteIndexs == '2' && UserPermissions.value != '仓库客服'), //完结 |
|
// repulse: |
|
// !appeal.value && |
|
// (($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '10') || |
|
// ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '10')) && |
|
// UserPermissions.value != '仓库客服', //打回 |
|
// apply_arbitration: |
|
// !appeal.value && |
|
// (($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '70') || |
|
// ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '70')) && |
|
// UserPermissions.value != '仓库客服', //客服仲裁完结 |
|
// information_editing: |
|
// !appeal.value && |
|
// (($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '10') || |
|
// ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '10')) && |
|
// warehouseIdState.value, //信息编辑 只能待处理和当前仓库人 |
|
// Appeal_established: appeal.value && AppealReview.value && UserPermissions.value=='总部客服经理', //申诉成立 |
|
// Appeal_rejection: appeal.value && AppealReview.value && UserPermissions.value=='总部客服经理', //申诉驳回 |
|
// Processing_confirmation: |
|
// (UserPermissions.value != '仓库客服' && |
|
// $route.query.RouteIndexs == '0' && |
|
// $route.query.workOrderStatus == '40') || |
|
// (UserPermissions.value != '仓库客服' && |
|
// $route.query.RouteIndexs == '9' && |
|
// $route.query.workOrderStatus == '40'), //待审核确定 |
|
// Result_determination: |
|
// (UserPermissions.value == '仓库客服' && |
|
// $route.query.RouteIndexs == '0' && |
|
// $route.query.workOrderStatus == '21') || |
|
// (UserPermissions.value == '仓库客服' && |
|
// $route.query.RouteIndexs == '2' && |
|
// $route.query.workOrderStatus == '21'), //处理结果确定 |
|
// Confirm_review: UserPermissions.value == '总部客服经理' && $route.query.RouteIndexs == '9', |
|
// }; |
|
// }); |
|
|
|
// appeal.value && AppealReview.value, |
|
// 文件识别 |
|
const Fileidentifier = val => { |
|
if (val) { |
|
const url = val; |
|
// 获取文件名 |
|
const fileName = url.substring(url.lastIndexOf('/') + 1); |
|
// 获取文件扩展名 |
|
const extension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase(); |
|
|
|
// 判断文件类型 |
|
if (extension === 'mp4') { |
|
return 'mp4'; |
|
} |
|
if (extension === 'png' || extension === 'jpg' || extension === 'jpeg') { |
|
return 'image'; // 可以将 'png' 改为 'image' 来统一表示图片类型 |
|
} |
|
if (extension === 'docx') { |
|
return 'docx'; |
|
} |
|
|
|
// 针对其他扩展名的情况返回 undefined |
|
return undefined; |
|
} |
|
}; |
|
// 聊天记录获取 |
|
const Chathistory = res => { |
|
Msgloading.value = true; |
|
let filetype = ''; //文件类型 |
|
$_getSurveyRecord({ |
|
id: $route.query.id, |
|
}) |
|
.then(res => { |
|
MessageContent.value = []; //先清空内容，防止内容重复叠加 |
|
// res.data.data.surveyRecordEntities.forEach(item => { |
|
// if (item.pictureUrl) { |
|
// filetype = Fileidentifier(item.pictureUrl); |
|
// } |
|
// MessageContent.value.push({ |
|
// time: item.createTime, //时间 |
|
// content: item.processingResults, //消息内容 |
|
// name: item.addDepartment, //营业部名称 |
|
// username: item.processorName, //用户名 |
|
// img: filetype == 'image' ? item.pictureUrl : '', |
|
// file: filetype == 'docx' ? item.pictureUrl : '', |
|
// mp4: filetype == 'mp4' ? item.pictureUrl : '', |
|
// imgList: [filetype === 'png' ? item.pictureUrl : ''], |
|
// difference: item.difference, |
|
// identifying: false, //待回复标识 |
|
// }); |
|
// }); |
|
|
|
res.data.data.surveyRecordEntities.forEach(item => { |
|
const filetype = Fileidentifier(item.pictureUrl); |
|
console.log(filetype, '文件类型'); |
|
|
|
// 处理图片列表，根据分隔符（假设是 ';'）拆分 |
|
let imgList = []; |
|
if (filetype === 'image') { |
|
// 如果包含多个图片URL，拆分处理 |
|
if (item.pictureUrl.includes(',')) { |
|
imgList = item.pictureUrl.split(',').filter(url => url.trim() !== ''); |
|
} else { |
|
// 单个图片的情况 |
|
imgList = [item.pictureUrl]; |
|
} |
|
} |
|
|
|
// 构造消息内容 |
|
MessageContent.value.push({ |
|
time: item.createTime, // 时间 |
|
content: item.processingResults, // 消息内容 |
|
name: item.addDepartment, // 营业部名称 |
|
username: item.processorName, // 用户名 |
|
img: imgList.length > 0 ? imgList[0] : '', // 只显示第一个图片（如果有多个） |
|
file: filetype === 'docx' ? item.pictureUrl : '', |
|
mp4: filetype === 'mp4' ? item.pictureUrl : '', |
|
imgList: imgList, // 包含所有图片的列表 |
|
difference: item.difference, |
|
identifying: identifying, // 是否显示待回复按钮 |
|
}); |
|
}); |
|
|
|
setTimeout(() => { |
|
const container = scrollContainer.value; |
|
if (container) { |
|
container.scrollTop = container.scrollHeight; |
|
} |
|
}, 0); |
|
console.log(res, '聊天记录'); |
|
console.log(MessageContent.value); |
|
Msgloading.value = false; //关闭加载效果 |
|
}) |
|
.catch(res => { |
|
console.log(res, '错误信息'); |
|
Msgloading.value = false; //关闭加载效果 |
|
}); |
|
}; |
|
|
|
const DeliveryDriver = ref([]); |
|
// 图片列表 |
|
const fileList = ref([]); |
|
// 字典公共函数 |
|
function updateDictionary(targetArray, dictionaryType) { |
|
getDictionaryBiz(dictionaryType).then(res => { |
|
console.log(res, '字典'); |
|
res.data.data.forEach(item => { |
|
targetArray.push({ |
|
value: item.dictKey, |
|
label: item.dictValue, |
|
}); |
|
}); |
|
}); |
|
} |
|
|
|
// 点击图片列表回调 |
|
const pictureList = val => { |
|
console.log(val, '图片列表'); |
|
dialogImgList.value = true; |
|
console.log(val, '图片列表'); |
|
amplifyurl.value = val.url; |
|
}; |
|
// 菜单切换显示输入框 |
|
const displaySettings = computed(() => { |
|
return { |
|
trainNumber: ['3', '5', '7', '6'].includes(Indexform.value.discoveryNode), //车次号 |
|
deliveryTime: ['5', '7', '6'].includes(Indexform.value.discoveryNode), //配送时间 |
|
deliveryDriver: ['5', '7', '6'].includes(Indexform.value.discoveryNode), //配送司机 |
|
vehicleRoute: ['3'].includes(Indexform.value.discoveryNode), //车辆线路 |
|
deliverGoodsTime: ['2'].includes(Indexform.value.discoveryNode), //发货时间 |
|
warehousingTime: ['4'].includes(Indexform.value.discoveryNode), //入库时间 |
|
discoveryTime: ['4', '5', '6', '7'].includes(Indexform.value.discoveryNode), //发现时间 |
|
processorEntityList: ['3'].includes(Indexform.value.discoveryNode), //干线卸车责任方 |
|
waybillMall: true, //运单商场 |
|
typeServiceName: true, //合作模式 |
|
processor: true, //处理方 |
|
investigationPocess: true, //调查经过 |
|
}; |
|
}); |
|
// 处理方和责任方获取数据 |
|
const handle = () => { |
|
getDeptWarehouse().then(res => { |
|
res.data.data.forEach(item => { |
|
warehouseData.value.push({ |
|
value: item.id, |
|
label: item.name, |
|
}); |
|
}); |
|
}); |
|
}; |
|
// 是否可以查看完结信息 |
|
const Completionpermissions = computed(() => { |
|
const myDataStr = localStorage.getItem('my_data'); |
|
if (myDataStr) { |
|
Mydata.value = JSON.parse(myDataStr); |
|
} |
|
if (CompensationParty.value && CompensationParty.value.length) { |
|
if (CompletedView.value.includes(Mydata.value.id) || UserPermissions.value != '仓库客服') { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}); |
|
|
|
const processedText = inputtxt => { |
|
if (inputtxt.endsWith('\n') && !inputtxt.endsWith('\n ')) { |
|
return inputtxt.slice(0, -1); |
|
} |
|
return inputtxt; |
|
}; |
|
const onLoad = async () => { |
|
pageState.value = true; //开启页面加载 |
|
if (await localStorage.getItem('my_data')) { |
|
Mydata.value = await JSON.parse(localStorage.getItem('my_data')); //获取本地仓库信息 |
|
} |
|
getDictionaryBiz('after_sales_visits').then(async res => { |
|
console.log(res, 'res====>'); |
|
let userInfo = JSON.parse(localStorage.getItem('TWMS-userInfo')); //获取当然登录人信息 |
|
// 获取用户角色信息，并拆分为数组 |
|
const roleNames = JSON.parse(localStorage.getItem('TWMS-userInfo')).content.role_name.split( |
|
',' |
|
); |
|
// 根据角色名称查找匹配项目 |
|
const matchingItem = res.data.data.find(item => roleNames.includes(item.dictValue)); |
|
console.log(matchingItem, 'matchingItem'); //匹配出的当前角色信息 |
|
|
|
if (matchingItem) { |
|
UserPermissions.value = matchingItem.dictValue; //记录当前人身份 |
|
} else { |
|
UserPermissions.value = '仓库客服'; |
|
} |
|
console.log(UserPermissions.value, '当前角色权限'); |
|
await Chathistory(); //聊天的历史记录 |
|
routerState.value = $route.query.routerState; |
|
await updateDictionary(IndexException.value, 'pc_work_order'); //异常类型 |
|
await updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节 |
|
await handle(); //处理方和责任方信息 |
|
|
|
$_getInfo({ id: $route.query.id }).then(res => { |
|
console.log(res, '信息res==》'); |
|
console.log(Mydata.value, 'Mydata.value'); |
|
|
|
pageState.value = false; //关闭页面加载 |
|
if ($route.query.Routstate) { |
|
appeal.value = true; |
|
console.log(appeal.value, 'appeal.value'); |
|
} |
|
|
|
console.log(res, '回显返回值参数'); |
|
Indexform.value = res.data.data; |
|
|
|
if (res.data.data.createUser == userInfo.content.user_id) { |
|
// 判断订单是否是当前登陆人发起的，用于修改订单信息（必须是待处理） |
|
warehouseIdState.value = true; |
|
} else { |
|
warehouseIdState.value = false; |
|
} |
|
console.log(res.data.data.createUser, '工单创建人'); |
|
console.log(userInfo.content.user_id, '系统登录人'); |
|
|
|
Indexform.value['result'] = []; |
|
Indexform.value['processor'] = []; |
|
Indexform.value['processorEntityList'] = []; //责任方 |
|
|
|
//图片处理回显 |
|
Indexform.value.arbitrate = res.data.data.reasonArbitration; //仲裁原因 |
|
Indexform.value.packList = res.data.data.decreaseImageVOList.map(res => { |
|
amplifysrcList.value.push(res.imagePath); |
|
return { |
|
name: res.imageName, |
|
url: res.imagePath, |
|
}; |
|
}); |
|
// 包件回显 |
|
PackageInfo.value = res.data.data.abnormalPackageVOList; |
|
console.log(res.data.data.abnormalPackageVOList, '包件信息'); |
|
NumberPackages.value = res.data.data.abnormalPackageVOList.length; //包件个数统计 |
|
PackageInfo.value[0].packageCode ? (identifying.value = 1) : (identifying.value = 2); |
|
// 责任方回显 |
|
|
|
FangAddList.value = res.data.data.processorVOList |
|
.filter(item => item && item.typesOf && item.typesOf == '1') |
|
.map(item => { |
|
return { businessName: item.businessId }; |
|
}); |
|
console.log(FangAddList.value, '责任方回显问题'); |
|
|
|
// 公司占比回显计算 |
|
let sum = 0; |
|
|
|
groundlineType.value = res.data.data.discoveryNode; //发现节点回显 |
|
if (res.data.data.personResponsibleVOS?.length) { |
|
// res.data.data.personResponsibleVOS.forEach(item => { |
|
// sum = Number(item.responsibilityRatio) + sum; |
|
// }); |
|
FangAddList.value = res.data.data.personResponsibleVOS.map(res => { |
|
return { |
|
businessName: res.businessId, //责任人ID |
|
personResponsibleName: res.personResponsibleName, //责任人名称 |
|
responsibilityRatio: res.responsibilityRatio, //占比 |
|
description: processedText(res.description), //说明 |
|
tripartite: res.tripartite, //三方责任人 |
|
}; |
|
}); |
|
} |
|
|
|
// 处理方/责任方回显 |
|
if (res.data.data.processorVOList?.length) { |
|
res.data.data.processorVOList.forEach(item => { |
|
if (item) { |
|
if (item.typesOf == 2) { |
|
// 处理方回显 |
|
Indexform.value.processor.push(item.businessId); |
|
} else { |
|
// 责任方回显 |
|
Indexform.value.processorEntityList.push(item.businessId); |
|
} |
|
} |
|
}); |
|
} |
|
|
|
companyProportion.value = 100 - sum; |
|
getDictionaryBiz('result_handling').then(res => { |
|
console.log(res, '发现环节'); |
|
ProcessingResults.value = res.data.data; |
|
}); |
|
// 处理结果回显 |
|
if (res.data.data.processingResultsVO.processingMoneyEntityList) { |
|
ProcessingList.value = res.data.data.processingResultsVO.processingMoneyEntityList.map( |
|
item => { |
|
Indexform.value.result.push(item.resultType); |
|
return { |
|
money: item.money + '元', |
|
state: item.resultType, |
|
payment: item.compensationMethod, |
|
name: item.resultTypeName, |
|
text: item.compensationMethodName, |
|
compensationTime: item.compensationTime, //支付时间 |
|
paymentUnit: item.paymentUnit, //支付单位 |
|
}; |
|
} |
|
); |
|
console.log(ProcessingList.value, '处理结果回显'); |
|
} |
|
// 总金额回显 |
|
TotalClaimAmount.value = res.data.data.processingResultsVO.money; |
|
// 理赔支付时间 |
|
Indexform.value.compensationTime = res.data.data.processingResultsVO.compensationTime; |
|
// 处理结果说明回显 |
|
Indexform.value.resultDescription = res.data.data.processingResultsVO.resultDescription; |
|
CompensationParty.value = []; |
|
|
|
// 赔款方 |
|
if (res.data.data.completionRecordEntities.length) { |
|
res.data.data.completionRecordEntities.forEach((item, index) => { |
|
TotalamountCompensation.value += Number(item.money); |
|
CompensationParty.value.push({ |
|
state: 0, //状态 |
|
num: item.money, //金额 |
|
// name: item.indemnitor, //受款方名字 |
|
reason: item.reason, //受款方原因 |
|
// explains: item.explains, //受款方说明 |
|
cld: index + 1, |
|
id: item.id, |
|
accounting: item.accounting ? item.accounting : '', |
|
warehouseId: item.warehouseId, //仓库 |
|
compensationPersonnel: item.compensationPersonnel, //责任人 |
|
}); |
|
}); |
|
} |
|
// 受款方 |
|
if (res.data.data.completionRecipientEntityList.length) { |
|
res.data.data.completionRecipientEntityList.forEach((item, index) => { |
|
TotalamountReceived.value += Number(item.money); |
|
CompensationParty.value.push({ |
|
state: 1, //状态 |
|
num: item.money, //金额 |
|
// name: item.recipient, //受款方名字 |
|
reason: item.reasonReceivingPayment, //受款方原因 |
|
// explains: item.explains, //受款方说明 |
|
cld: index + 1, |
|
id: item.id, |
|
warehouseId: item.warehouseId, //仓库 |
|
}); |
|
}); |
|
} |
|
|
|
// 获取赔款方和受款方信息 |
|
if (CompensationParty.value.length) { |
|
CompletedView.value = CompensationParty.value.map(item => { |
|
console.log(CompensationParty.value, 'CompensationParty.value'); |
|
if (item.warehouseId) { |
|
return item.warehouseId; |
|
} |
|
}); |
|
console.log(CompletedView.value, '可以看到完结信息的仓库'); |
|
console.log(Mydata.value.id, '当前登录仓库'); |
|
} |
|
}); |
|
}); |
|
|
|
// 仲裁原因回显 |
|
console.log(Mydata.value, '记录本地登录'); |
|
getDictionaryBiz('result_handling').then(res => { |
|
console.log(res, '发现环节'); |
|
ProcessingResults.value = res.data.data; |
|
}); |
|
// 支付方式字典 |
|
getDictionaryBiz('payment_method').then(res => { |
|
//处理结果字典 |
|
console.log(res); |
|
Paymentmethod.value = res.data.data; |
|
}); |
|
}; |
|
|
|
onMounted(() => { |
|
watch( |
|
() => $route.path, // 只监听路由参数 |
|
(newParams, oldParams) => { |
|
console.log($route, '路由参数'); |
|
if (newParams == oldParams) { |
|
onLoad(); |
|
} |
|
}, |
|
{ deep: true, immediate: true } // 立即执行一次，并且深度监听 |
|
); |
|
}); |
|
|
|
onLoad(); |
|
let isAppeal = appeal.value; |
|
let userRole = UserPermissions.value; //角色名称 |
|
let routeIndex = $route.query.RouteIndexs; //菜单编号 |
|
let workOrderStatus = $route.query.workOrderStatus; //工单状态 |
|
let isWarehouseCustomerService = userRole === '仓库客服'; //角色状态 |
|
let isHeadquarterCustomerServiceManager = userRole === '总部客服经理'; //角色状态 |
|
// 处理结果权限 |
|
const isProcessingResults = () => { |
|
if (workOrderStatus == '10' || workOrderStatus == '20') { |
|
return true; |
|
} |
|
return false; |
|
}; |
|
const isProcessingResultssub = () => { |
|
if (workOrderStatus == '90') { |
|
return true; |
|
} |
|
return false; |
|
}; |
|
|
|
//完结工单权限 |
|
const isWorkOrderCompletion = () => { |
|
if (UserPermissions.value != '仓库客服') { |
|
if (workOrderStatus == '30') { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
|
|
// 完结审核打回权限 |
|
const isRepulse = () => { |
|
if (UserPermissions.value == '总部客服经理') { |
|
if (['40', '80'].includes($route.query.workOrderStatus)) { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
|
|
// 处理结果打回 |
|
const Resultreturned = () => { |
|
if (UserPermissions.value == '总部客服' || UserPermissions.value == '总部客服经理') { |
|
if (workOrderStatus == '30') { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
|
|
// 客服仲裁完结权限 |
|
const isApplyArbitration = () => { |
|
if (UserPermissions.value != '仓库客服') { |
|
if (workOrderStatus == '70') { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
|
|
// 修改提交权限 |
|
const isInformationEditing = () => { |
|
if (UserPermissions.value == '仓库客服' && warehouseIdState.value) { |
|
if (['10', '20', '90'].includes(workOrderStatus)) { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
|
|
// 待审核确定权限 |
|
const isProcessingConfirmation = () => { |
|
if (UserPermissions.value != '仓库客服') { |
|
if (['40'].includes(workOrderStatus)) { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
|
|
// 处理结果确定权限 |
|
const isResultDetermination = () => { |
|
if (workOrderStatus == '21') { |
|
return true; |
|
} |
|
return false; |
|
}; |
|
|
|
//审核确定 |
|
const isConfirmReview = () => { |
|
if (UserPermissions.value == '总部客服经理') { |
|
if (workOrderStatus == '500') { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
// 申诉成立权限 |
|
const Appealestablished = () => { |
|
if (UserPermissions.value == '总部客服经理') { |
|
if ($route.query.typesOf == '0') { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
|
|
// 申诉驳回权限 |
|
const Appealrejection = () => { |
|
if (UserPermissions.value == '总部客服经理') { |
|
if ($route.query.typesOf == '0') { |
|
return true; |
|
} |
|
} |
|
return false; |
|
}; |
|
|
|
// 权限按钮 |
|
const PermissionButton = computed(() => ({ |
|
reply: true, // 回复 |
|
Processing_results: isProcessingResults(), //处理结果 |
|
Processing_resultsSub: isProcessingResultssub(), //处理结果提交 |
|
work_order_completion: isWorkOrderCompletion(), //完结工单 |
|
repulse: isRepulse(), //打回 |
|
result_returned: Resultreturned(), //处理结果打回 |
|
apply_arbitration: isApplyArbitration(), //客服仲裁完结 |
|
information_editing: isInformationEditing(), //修改提交 |
|
Appeal_established: Appealestablished(), // 申诉成立 |
|
Appeal_rejection: Appealrejection(), // 申诉驳回 |
|
Processing_confirmation: isProcessingConfirmation(), // 待审核确定 |
|
Result_determination: isResultDetermination(), // 处理结果确定 |
|
Confirm_review: isConfirmReview(), //审核确定 |
|
})); |
|
|
|
// 聊天刷新 |
|
const Chatrefresh = () => { |
|
Chathistory(); |
|
}; |
|
|
|
// 上传图片规则 |
|
const beforeAvatarUpload = async rawFile => { |
|
if (!/^image\/(png|jpeg|gif)$|^video\/mp4$/.test(rawFile.type)) { |
|
ElMessage.error('上传格式只支持 png、jpeg、gif 和 mp4 类型!'); |
|
return false; |
|
} else if (rawFile.size / 1024 / 1024 > 40) { |
|
ElMessage.error('上传大小不能超过 40MB!'); |
|
return false; |
|
} |
|
const res = await compressImageBlob(rawFile); |
|
return res; |
|
}; |
|
|
|
// 底部按钮事件 |
|
// 回复 |
|
const addireply = () => { |
|
$useStore.commit('DEL_ONCE_TAG', '/aftersales/aftersalesWorkOrderend'); |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrderend', |
|
query: { |
|
id: $route.query.id, |
|
name: $route.query.workOrderNumber + '-回复', |
|
businessId: $route.query.workOrderNumber, |
|
RouterState: 'determine', |
|
workOrderStatus: $route.query.workOrderStatus, //工单状态 |
|
}, |
|
}); |
|
}; |
|
|
|
// 处理结果 |
|
const addingRecord = () => { |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrderend', |
|
query: { |
|
id: $route.query.id, |
|
name: $route.query.workOrderNumber + '-添加异常记录', |
|
businessId: $route.query.workOrderNumber, |
|
RouteIndexs: $route.query.RouteIndexs, //当前菜单 |
|
RouterState: 'determine', |
|
workOrderStatus: $route.query.workOrderStatus, //工单状态 |
|
}, |
|
}); |
|
}; |
|
|
|
// 完结 |
|
const EndJump = () => { |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrderend', |
|
query: { |
|
id: $route.query.id, |
|
name: $route.query.workOrderNumber + '-完结填写', |
|
RouterState: 'end', |
|
RouteIndexs: $route.query.RouteIndexs, |
|
workOrderStatus: $route.query.workOrderStatus, //当前单子状态 |
|
}, |
|
}); |
|
}; |
|
// 处理结果打回 |
|
const resultreturnedFun = () => { |
|
BatchFrom.value.businessDepartment = []; |
|
BatchFrom.value.txt = null; |
|
|
|
dialogReturn.value = true; |
|
}; |
|
// 处理结果打回确定 |
|
const ConfirmReturn = () => { |
|
// 批量打回确定按钮 |
|
|
|
let data = { |
|
processorList: [], |
|
}; |
|
// 过滤满足条件的对象 |
|
if (BatchFrom.value.businessDepartment.length) { |
|
let foundObjs = warehouseData.value.filter(obj => |
|
BatchFrom.value.businessDepartment.includes(obj.value) |
|
); |
|
data['businessId'] = foundObjs.map(item => item.value).join(','); |
|
data['businessName'] = foundObjs.map(item => item.label).join(','); |
|
// 营业部处理 |
|
foundObjs.forEach(item => { |
|
data['processorList'].push({ id: item.value, name: item.label }); |
|
}); |
|
} |
|
data.reasonReturn = BatchFrom.value.txt; //打回原因 |
|
data.workOrderIds = [$route.query.id]; //异常工单 |
|
console.log(data, '处理好的值'); |
|
data.typesOf = '1'; //普通打回 |
|
pageState.value = true; //开启加载并关闭按钮 |
|
dialogReturn.value = false; //关闭打回弹窗 |
|
$_batchReturn(data) |
|
.then(res => { |
|
console.log(res, '批量打回返回值'); |
|
if (res.data.code == 200) { |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
// 传递要刷新的菜单 |
|
$useStore.commit('EDIT_REFRESHITEM', { title: 'aftersalesWorkOrder', status: true }); //要刷新的页面 |
|
$useStore.commit('Customer_Menu', Number($route.query.RouteIndexs)); //要刷新的菜单 |
|
$router.push('/aftersales/aftersalesWorkOrder'); |
|
AddressClosed('/aftersales/aftersalesWorkOrderend'); //删除当前页面 |
|
} |
|
}) |
|
.catch(error => { |
|
console.log(error, 'error'); |
|
}) |
|
.finally(() => { |
|
pageState.value = false; //关闭加载并关闭按钮 |
|
dialogReturn.value = false; //关闭打回弹窗 |
|
}); |
|
}; |
|
// 完结打回 |
|
const BatchReturn = () => { |
|
ElMessageBox.prompt('请输入打回原因', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
inputPattern: /^(?!\s*$).+/, |
|
inputErrorMessage: '内容不能为空哦', |
|
}) |
|
.then(({ value }) => { |
|
pageState.value = true; |
|
$_batchRepulseCompleted({ |
|
workOrderIds: [$route.query.id], |
|
reasonReturn: value, |
|
}) |
|
.then(res => { |
|
if (res.data.code == 200) { |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
$useStore.commit('EDIT_REFRESHITEM', { |
|
title: 'aftersalesWorkOrder', |
|
status: true, |
|
}); |
|
$useStore.commit('Customer_Menu', 9); //要刷新的菜单 |
|
$useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面 |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrder', |
|
}); |
|
} |
|
}) |
|
.catch(error => { |
|
console.log(error); |
|
}) |
|
.finally(() => { |
|
pageState.value = false; |
|
}); |
|
}) |
|
.catch(() => {}); |
|
}; |
|
// 客服仲裁完结 |
|
const CustomerServiceCompleted = () => { |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrdermodify', |
|
query: { |
|
id: $route.query.id, |
|
name: $route.query.workOrderNumber + '-客服仲裁完结', |
|
businessId: $route.query.businessId, |
|
// warehouseId: $route.query.warehouseId, |
|
workOrderNumber: $route.query.workOrderNumber, |
|
RouterState: 'Kfend', |
|
workOrderStatus: $route.query.workOrderStatus, //当前单子状态 |
|
CompletedEditing: 'true', //可以编辑完结信息编辑 |
|
CustomerServiceCompleted: 'true', //客服仲裁完结 |
|
index: '1', |
|
}, |
|
}); |
|
}; |
|
|
|
// 信息编辑 |
|
const EditInformation = () => { |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrdermodify', |
|
query: { |
|
id: $route.query.id, |
|
name: $route.query.workOrderNumber + '-编辑', |
|
businessId: $route.query.businessId, |
|
// warehouseId: $route.query.warehouseId, |
|
workOrderNumber: $route.query.workOrderNumber, |
|
RouterState: 'Infoedit', |
|
workOrderStatus: $route.query.workOrderStatus, //当前单子状态 |
|
}, |
|
}); |
|
}; |
|
// 申诉成立 |
|
const AppealEstablished = () => { |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrdermodify', |
|
query: { |
|
id: $route.query.id, //这里的id是workOrderId是有申诉列表带入的 |
|
name: $route.query.workOrderNumber + '-申诉编辑', |
|
businessId: $route.query.businessId, |
|
// warehouseId: $route.query.warehouseId, |
|
workOrderNumber: $route.query.workOrderNumber, |
|
RouterState: 'Kfend', |
|
workOrderStatus: $route.query.workOrderStatus, //当前单子状态 |
|
Appealeditor: 'appeal', //申诉编辑 |
|
appealID: $route.query.appealID, //申诉ID |
|
typesOf: $route.query.typesOf, //申诉工单状态0待处理，1成立，2驳回 |
|
}, |
|
}); |
|
}; |
|
|
|
// 申诉驳回 |
|
const AppealRejection = () => { |
|
ElMessageBox.prompt('请填写驳回原因', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
inputPattern: /^(?!\s*$).+/, |
|
inputErrorMessage: '内容不能为空哦', |
|
}) |
|
.then(({ value }) => { |
|
console.log(value, '驳回原因'); |
|
let data = { |
|
id: $route.query.appealID, //取消申诉ID |
|
typesOf: '2', //申诉状态 |
|
workOrderId: $route.query.id, //异常工单ID |
|
handlingReason: value, //驳回原因 |
|
}; |
|
$_Cancelappeal(data) |
|
.then(res => { |
|
console.log(res, '申诉驳回返回值'); |
|
if (res.data.code == 200) { |
|
ElMessage({ |
|
showClose: true, |
|
message: '申诉驳回成功', |
|
type: 'success', |
|
}); |
|
$useStore.commit('EDIT_REFRESHITEM', { |
|
title: 'aftersalesWorkOrder', |
|
status: true, |
|
}); |
|
$useStore.commit('Customer_Menu', 6); //要刷新的菜单 |
|
$useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面 |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrder', |
|
}); |
|
} |
|
}) |
|
.catch(res => { |
|
console.log('错误信息', res); |
|
}) |
|
.finally(() => { |
|
Pageloading.value = false; //关闭加载效果 |
|
}); |
|
}) |
|
.catch(() => {}); |
|
}; |
|
|
|
// 待审核确定 |
|
const ResultConfirmation = () => { |
|
let data = { |
|
assignList: [], |
|
}; |
|
let ID = {}; |
|
ID = $route.query.id; |
|
data['assignList'].push(ID); |
|
if ($route.query.workOrderStatus != '40') { |
|
ElMessage({ |
|
message: '状态错误,已经确认过', |
|
type: 'warning', |
|
}); |
|
return; |
|
} |
|
pageState.value = true; //开启页面加载 |
|
// 完结结果确定 |
|
$_updateManagerConfirmed(data) |
|
.then(res => { |
|
if (res.data.code == 200) { |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
} |
|
$useStore.commit('EDIT_REFRESHITEM', { |
|
title: 'aftersalesWorkOrder', |
|
status: true, |
|
}); |
|
$useStore.commit('Customer_Menu', 9); //要刷新的菜单 |
|
$useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面 |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrder', |
|
}); |
|
console.log(res, '处理完毕确定'); |
|
}) |
|
.catch(res => { |
|
console.log(res, '错误信息'); |
|
}) |
|
.finally(res => { |
|
pageState.value = false; //关闭页面加载 |
|
}); |
|
// 赔款方 |
|
console.log(data, '处理好的值'); |
|
}; |
|
// 处理结果确定 |
|
const ResultDetermination = () => { |
|
//处理完毕菜单下面确定按钮用于确定处理结果（仓库客服用的） |
|
let data = { |
|
assignList: [], |
|
}; |
|
let ID = {}; |
|
ID = $route.query.id; |
|
data['assignList'].push(ID); |
|
|
|
if ($route.query.workOrderStatus != '21') { |
|
ElMessage({ |
|
message: '状态错误', |
|
type: 'warning', |
|
}); |
|
return; |
|
} |
|
// 仓库客服 |
|
console.log(data, '处理好的数据'); |
|
pageState.value = true; //开启页面加载 |
|
$_updateWorkOrderStatus(data) |
|
.then(res => { |
|
console.log(res, '确定提交存储'); |
|
if (res.data.code == 200) { |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
} |
|
$useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面 |
|
$router.push({ |
|
path: '/aftersales/aftersalesWorkOrder', |
|
}); |
|
}) |
|
.catch(res => {}) |
|
.finally(() => { |
|
pageState.value = false; //关闭页面加载 |
|
}); |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.IndexFrom { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: flex-start; |
|
border: 1px solid #ccc; |
|
|
|
:deep(.el-form-item__content) { |
|
width: 100%; |
|
|
|
.el-input { |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
|
|
.el-input__wrapper { |
|
height: 32px !important; |
|
} |
|
|
|
:deep(.el-input) { |
|
width: 100% !important; |
|
} |
|
|
|
:deep(.el-input__wrapper) { |
|
height: 30px !important; |
|
} |
|
|
|
:deep(.el-select) { |
|
width: 100%; |
|
} |
|
|
|
:deep(.el-form-item__label) { |
|
margin-left: 20px; |
|
} |
|
} |
|
|
|
.el_clzr { |
|
margin-top: 40px; |
|
|
|
:deep(.el-select) { |
|
width: 100%; |
|
} |
|
|
|
:deep(.el-input) { |
|
height: 38px; |
|
} |
|
|
|
:deep(.el-form-item__label) { |
|
margin-left: 20px; |
|
font-size: 14px; |
|
width: 100px !important; |
|
justify-content: flex-start; |
|
} |
|
|
|
.el-form-item { |
|
margin: 0; |
|
margin-bottom: 34px; |
|
} |
|
|
|
:deep(.el-input__wrapper) { |
|
height: 35px !important; |
|
} |
|
|
|
:deep(.el-form-item__content) { |
|
height: 100%; |
|
width: 90% !important; |
|
flex: none; |
|
|
|
.el-input { |
|
height: 100% !important; |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
} |
|
|
|
.Transport_damage_photos { |
|
display: flex; |
|
margin-top: 20px; |
|
flex-direction: column; |
|
|
|
.title { |
|
width: 100px; |
|
display: block; |
|
margin-bottom: 10px; |
|
font-size: 14px; |
|
font-weight: bold; |
|
color: #5b5b5b; |
|
} |
|
} |
|
|
|
.dialog-footer { |
|
width: 100%; |
|
display: flex; |
|
justify-content: flex-end; |
|
box-sizing: border-box; |
|
margin-top: 10px; |
|
} |
|
|
|
.investigate { |
|
:deep(.el-form-item__content) { |
|
width: 90% !important; |
|
box-sizing: border-box; |
|
} |
|
} |
|
|
|
.ShortageStatenum { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
|
|
.title { |
|
width: 80px; |
|
} |
|
.remove { |
|
width: 47px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
color: #ff0000; |
|
} |
|
} |
|
|
|
.moneyNum { |
|
display: flex; |
|
flex: 1; |
|
|
|
.el_btn { |
|
width: 50px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border: 1px solid #ccc; |
|
margin-left: 3px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.ResponsibilityBox { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.leftbox { |
|
display: flex; |
|
justify-content: flex-start; |
|
width: 100%; |
|
:deep(.el-form-item) { |
|
flex-direction: column; |
|
width: 14%; |
|
margin-right: 4px; |
|
.el-form-item__label { |
|
margin: 0; |
|
justify-content: flex-start; |
|
} |
|
.el-form-item__content { |
|
align-items: flex-start; |
|
} |
|
} |
|
.el_zb { |
|
width: 250px; |
|
text-align: right; |
|
:deep(.el-input__inner) { |
|
text-align: center; |
|
} |
|
:deep(.el-input) { |
|
margin-left: 10px; |
|
text-align: right; |
|
} |
|
:deep(.el-form-item__content) { |
|
flex-wrap: nowrap; |
|
} |
|
} |
|
} |
|
|
|
.maxBox { |
|
display: flex; |
|
align-items: center; |
|
width: 30%; |
|
margin-right: 16px; |
|
font-size: 14px; |
|
|
|
.brand { |
|
margin-right: 0; |
|
} |
|
|
|
.title { |
|
width: 120px; |
|
font-size: 14px; |
|
color: #606266; |
|
} |
|
|
|
.el-select { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.brand { |
|
margin-right: 0; |
|
} |
|
|
|
.el-btn { |
|
margin-left: 5%; |
|
border: none; |
|
} |
|
|
|
.el_btbox { |
|
display: flex; |
|
margin-top: 10px; |
|
width: 100%; |
|
} |
|
} |
|
|
|
.ResponsibilityBoxS { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
margin-bottom: 10px; |
|
.el-form-item { |
|
flex-direction: column; |
|
} |
|
.leftbox { |
|
display: flex; |
|
justify-content: space-between; |
|
width: 100%; |
|
.el-form-item { |
|
width: 24%; |
|
} |
|
} |
|
|
|
.maxBox { |
|
display: flex; |
|
align-items: center; |
|
width: 30%; |
|
margin-right: 20px; |
|
|
|
:deep(.el-form-item) { |
|
margin: 0; |
|
margin-right: 10px; |
|
font-size: 12px; |
|
.el-form-item__label { |
|
margin: 0; |
|
} |
|
} |
|
|
|
.title { |
|
width: 140px; |
|
color: #606266; |
|
font-size: 14px; |
|
} |
|
|
|
.el-select { |
|
width: 100%; |
|
} |
|
|
|
:deep(.el-form-item) { |
|
margin-right: 0; |
|
} |
|
} |
|
|
|
.brand { |
|
margin-right: 0; |
|
} |
|
|
|
.el-btn { |
|
margin-left: 5%; |
|
border: none; |
|
display: flex; |
|
} |
|
|
|
.el_btbox { |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
:deep(.el-form-item) { |
|
width: 17%; |
|
margin-right: 4px; |
|
align-items: flex-start; |
|
.el-form-item__label { |
|
margin-left: 0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
:deep(.PackageInformation) { |
|
margin-bottom: 10px; |
|
width: 100%; |
|
border-left: none; |
|
border-right: none; |
|
.is-active { |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
.NumTotal { |
|
width: 30%; |
|
margin-top: 10px; |
|
display: flex; |
|
align-items: center; |
|
|
|
span { |
|
width: 120px; |
|
font-size: 14px; |
|
border: 1px solid #ccc; |
|
display: flex; |
|
width: auto; |
|
padding: 4px 12px; |
|
} |
|
} |
|
|
|
.Proportion { |
|
margin-top: 16px; |
|
|
|
.title { |
|
font-size: 14px; |
|
border: 1px solid #ccc; |
|
width: auto; |
|
padding: 4px 12px; |
|
} |
|
} |
|
|
|
:deep(.is-active) { |
|
border-bottom: 1px solid #e4e7ed !important; |
|
} |
|
|
|
:deep(.topClass) { |
|
border-bottom: none; |
|
|
|
.el-tabs__content { |
|
padding: 0; |
|
} |
|
|
|
.is-active { |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
.foot_btn { |
|
position: fixed; |
|
bottom: 0; |
|
left: 50%; |
|
transform: translate(0, -50%); |
|
width: 100%; |
|
height: 40px; |
|
background-color: #ffffff; |
|
border-top: 1px solid #fff; |
|
box-shadow: 3px -1px 1px #ccc; |
|
display: flex; |
|
align-items: center; |
|
padding-left: 10px; |
|
} |
|
|
|
:deep(.el-card__body) { |
|
} |
|
|
|
:deep(.el-upload-dragger) { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.box-card { |
|
height: 100% !important; |
|
overflow-y: scroll; |
|
} |
|
|
|
:deep(.selector) { |
|
.el-select { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.ProcessingResults { |
|
width: 100%; |
|
min-height: 260px; |
|
border: 1px solid #ccc; |
|
position: relative; |
|
padding: 26px; |
|
box-sizing: border-box; |
|
margin-top: 20px; |
|
color: #606266; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
margin-bottom: 16px; |
|
|
|
.title { |
|
position: absolute; |
|
top: -20px; |
|
left: 20px; |
|
font-size: 26px; |
|
background-color: #fff; |
|
} |
|
|
|
.Listadmiration { |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin-top: 26px; |
|
justify-content: space-between; |
|
|
|
.name { |
|
display: flex; |
|
margin-bottom: 20px; |
|
height: 30px; |
|
width: 100%; |
|
justify-content: space-between; |
|
|
|
.payment_right { |
|
width: 100%; |
|
display: flex; |
|
|
|
:deep(.el-input) { |
|
height: 100% !important; |
|
} |
|
|
|
:deep(.money) { |
|
width: 100px; |
|
} |
|
} |
|
|
|
span { |
|
color: #000000; |
|
font-size: 16px; |
|
margin-right: 8px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
width: 80px; |
|
margin-left: 10px; |
|
} |
|
|
|
.el_titleName { |
|
display: flex; |
|
} |
|
} |
|
} |
|
|
|
.lptime, |
|
.ZFlptime { |
|
display: flex; |
|
|
|
.name { |
|
width: 10%; |
|
color: #606266; |
|
} |
|
|
|
.el-input { |
|
width: auto; |
|
} |
|
|
|
:deep(.el-input--prefix) { |
|
width: 200px; |
|
} |
|
} |
|
|
|
.ZFlptime { |
|
margin: 10px 0; |
|
} |
|
} |
|
|
|
.Paymentname { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
border: 1px solid #bfbfbf; |
|
margin-left: 2px; |
|
border-radius: 4px; |
|
font-size: 14px; |
|
padding: 10px; |
|
cursor: pointer; |
|
width: 140px; |
|
margin: 0 10px; |
|
overflow: hidden; |
|
} |
|
|
|
.Paymentname:hover { |
|
border: 1px solid #172e60; |
|
} |
|
|
|
.el_Processingresults { |
|
margin-top: 12px; |
|
|
|
:deep(.is-active) { |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
.el_PaymentUnit { |
|
margin: 0 4px; |
|
} |
|
|
|
:deep(.el-input-number) { |
|
width: 180px !important; |
|
} |
|
|
|
.Investigationprocess { |
|
height: auto !important; |
|
align-items: flex-start !important; |
|
flex: 1 0 44% !important; |
|
|
|
:deep(.el-form-item__content) { |
|
width: 100% !important; |
|
} |
|
} |
|
|
|
.el_tool { |
|
display: flex; |
|
align-items: center; |
|
font-size: 16px; |
|
font-weight: bold; |
|
|
|
span { |
|
font-size: 14px; |
|
border: 1px solid #ccc; |
|
padding: 4px 20px; |
|
color: #000000; |
|
font-weight: 600; |
|
} |
|
} |
|
|
|
.el_nint { |
|
width: 100%; |
|
border-right: none; |
|
border-left: none; |
|
border-bottom: none; |
|
|
|
:deep(.el-tabs__content) { |
|
padding-right: 0; |
|
} |
|
|
|
:deep(.is-active) { |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
:deep(.el_inputTop) { |
|
margin-bottom: 0 !important; |
|
} |
|
|
|
.content-max { |
|
display: flex; |
|
justify-content: space-between; |
|
width: 100%; |
|
background-color: #fff; |
|
height: 100%; |
|
:deep(.el-card) { |
|
width: 70%; |
|
} |
|
|
|
.el-affix { |
|
flex: 1 1 0%; |
|
margin-left: 10px; |
|
} |
|
|
|
.el_last { |
|
display: flex; |
|
height: 100%; |
|
|
|
:deep(.el-card__body) { |
|
display: flex; |
|
flex-direction: column; |
|
flex: 1; |
|
} |
|
|
|
:deep(.dialog-footer) { |
|
flex: 1; |
|
display: flex; |
|
align-items: flex-end; |
|
} |
|
} |
|
} |
|
|
|
.right { |
|
width: 100%; |
|
|
|
:deep(.el-card__body) { |
|
padding: 10px !important; |
|
} |
|
|
|
:deep(.el-timeline) { |
|
padding: 0; |
|
} |
|
|
|
.ovhe { |
|
padding: 6px; |
|
|
|
.header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
height: auto; |
|
.el-tag { |
|
width: 70px; |
|
} |
|
} |
|
} |
|
|
|
.content { |
|
position: relative; |
|
|
|
:deep(.el-card) { |
|
width: 100%; |
|
} |
|
} |
|
|
|
:deep(.el-card__body:last-child) { |
|
padding: 0px !important; |
|
} |
|
|
|
:deep(.el-timeline-item) { |
|
padding-bottom: 10px; |
|
} |
|
|
|
:deep(.el-card) { |
|
padding: 10px; |
|
box-sizing: border-box; |
|
} |
|
|
|
.ovhe::-webkit-scrollbar { |
|
width: 4px; |
|
height: 0px; |
|
} |
|
|
|
.ovhe::-webkit-scrollbar-thumb { |
|
background-color: #12b7f5; |
|
background-image: -webkit-linear-gradient( |
|
45deg, |
|
rgba(255, 93, 143, 1) 25%, |
|
transparent 25%, |
|
transparent 50%, |
|
rgba(255, 93, 143, 1) 50%, |
|
rgba(255, 93, 143, 1) 75%, |
|
transparent 75%, |
|
transparent |
|
); |
|
} |
|
|
|
.ovhe::-webkit-scrollbar-track { |
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|
background: #f6f6f6; |
|
} |
|
|
|
.ovhe::-webkit-scrollbar-track { |
|
background-color: #fff; |
|
/* 设置滚动条槽为透明 */ |
|
} |
|
|
|
:deep(.el-tabs__content) { |
|
padding: 0; |
|
} |
|
|
|
:deep(.el-timeline-item__node) { |
|
background-color: #8fa3ad; |
|
} |
|
|
|
:deep(.el-icon) { |
|
font-size: 16px; |
|
} |
|
} |
|
|
|
.el_Processingparty { |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
font-size: 12px; |
|
margin-bottom: 8px; |
|
box-shadow: -1px 2px 2px 0px #f5f5f5; |
|
padding: 0 4px; |
|
box-sizing: border-box; |
|
border-radius: 4px; |
|
height: 40px; |
|
|
|
span { |
|
width: 40px; |
|
} |
|
|
|
:deep(.el-select) { |
|
width: 100%; |
|
} |
|
|
|
span { |
|
font-size: 20px; |
|
} |
|
|
|
:deep(.el_Refresh) { |
|
i { |
|
font-size: 30px; |
|
} |
|
} |
|
} |
|
|
|
.ovhe { |
|
position: relative; |
|
overflow-y: scroll; |
|
scroll-behavior: smooth; |
|
|
|
.e_ico { |
|
display: flex; |
|
align-items: center; |
|
} |
|
.e_time { |
|
color: #999; |
|
font-size: 12px; |
|
} |
|
.img { |
|
width: 100%; |
|
height: 20%; |
|
overflow: scroll; |
|
.el-image { |
|
width: 20%; |
|
height: 100%; |
|
|
|
margin: 4px; |
|
} |
|
img { |
|
width: 100%; |
|
height: 50px; |
|
} |
|
} |
|
.mp4 { |
|
margin-top: 2px; |
|
|
|
span { |
|
display: flex; |
|
align-items: center; |
|
vertical-align: bottom; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.tag { |
|
display: flex; |
|
justify-content: flex-end; |
|
} |
|
|
|
.file { |
|
span { |
|
display: flex; |
|
align-items: center; |
|
vertical-align: bottom; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
:deep(.el-timeline-item__timestamp) { |
|
display: none !important; |
|
} |
|
} |
|
|
|
.identifying { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.el-tag { |
|
width: 70px; |
|
} |
|
} |
|
|
|
.identifyingC1 { |
|
background-color: #409eff; |
|
border-radius: 4px; |
|
|
|
border: none; |
|
} |
|
|
|
.identifyingC2 { |
|
background-color: #10d070; |
|
border: none; |
|
} |
|
|
|
.identifyingC3 { |
|
background-color: #d3832a; |
|
border: none; |
|
} |
|
|
|
.CardidentifyingC1, |
|
.CardidentifyingC2, |
|
.CardidentifyingC3 { |
|
box-shadow: -1px -1px 4px 0px #e3e3e3; |
|
border-top-left-radius: 20px; |
|
border-bottom: 1px solid #d5d5d563 !important; |
|
border-right: 1px solid #d5d5d563 !important; |
|
} |
|
.el-endtabs { |
|
margin-top: 10px; |
|
:deep(.is-active) { |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
:deep(.custom-tabs-label) { |
|
font-weight: bold; |
|
display: flex; |
|
align-items: center; |
|
|
|
.el-icon { |
|
margin-right: 4px; |
|
} |
|
} |
|
|
|
.payanindemnity { |
|
display: flex; |
|
align-items: center; |
|
margin-top: 20px; |
|
justify-content: space-between; |
|
|
|
.title { |
|
width: max-content; |
|
height: 100%; |
|
display: block; |
|
font-size: 14px; |
|
font-weight: bold; |
|
} |
|
|
|
.sk_input { |
|
margin: 0 5px; |
|
margin-left: 4px; |
|
width: 22%; |
|
display: flex; |
|
align-items: center; |
|
span { |
|
width: 100px; |
|
margin-right: 4px; |
|
display: flex; |
|
justify-content: flex-end; |
|
font-size: 14px; |
|
font-weight: 400; |
|
margin-right: 10px; |
|
} |
|
} |
|
|
|
.el-button { |
|
border: none; |
|
} |
|
|
|
.el_pkLi { |
|
display: flex; |
|
width: 100%; |
|
} |
|
} |
|
|
|
.paySum { |
|
margin-top: 36px; |
|
font-size: 14px; |
|
display: flex; |
|
|
|
span { |
|
margin-right: 30px; |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
|
|
:deep(.el-photo) { |
|
margin-top: 10px; |
|
|
|
.el-upload--picture-card { |
|
display: none; |
|
} |
|
|
|
.Transport_damage_photos { |
|
margin-top: 0; |
|
|
|
.el-picture-card { |
|
display: flex; |
|
padding: 6px; |
|
} |
|
.el-overlay { |
|
.el-image { |
|
width: 100% !important; |
|
} |
|
} |
|
} |
|
|
|
.el-tabs__content { |
|
padding: 0; |
|
} |
|
|
|
.el-upload-list__item { |
|
margin: 0; |
|
} |
|
} |
|
|
|
.arbitrate { |
|
margin-top: 10px; |
|
:deep(.el-form-item) { |
|
flex-direction: column; |
|
align-items: flex-start; |
|
.el-form-item__label { |
|
font-size: 14px; |
|
font-weight: bold; |
|
} |
|
.el-form-item__content { |
|
width: 100% !important; |
|
} |
|
} |
|
} |
|
|
|
.el_BatchFrom { |
|
width: 70%; |
|
} |
|
|
|
.el_form_BatchFrom { |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
:deep(.el-select-tags-wrapper) { |
|
.el-tag { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
#avue-view { |
|
background-color: #fff !important; |
|
} |
|
|
|
:deep(.el_resj) { |
|
flex-direction: column; |
|
|
|
.el-form-item__label { |
|
justify-content: center; |
|
width: fit-content; |
|
display: flex; |
|
align-items: center; |
|
padding: 0; |
|
padding: 0 4px; |
|
border-bottom: 0; |
|
color: #172e60; |
|
font-size: 14px; |
|
font-weight: bold; |
|
} |
|
} |
|
.Basic_information { |
|
width: 100%; |
|
:deep(.is-active) { |
|
font-weight: bold; |
|
} |
|
.el_information { |
|
width: 100%; |
|
display: flex; |
|
flex-wrap: wrap; |
|
|
|
:deep(.el-form-item) { |
|
width: 14%; |
|
display: flex; |
|
align-items: flex-start; |
|
flex-direction: column; |
|
flex: none; |
|
margin-right: 4px; |
|
.el-form-item__label { |
|
margin-left: 0; |
|
} |
|
.el-form-item__content { |
|
width: 100% !important; |
|
} |
|
} |
|
.el_information_row { |
|
width: 100%; |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
} |
|
.el-select { |
|
width: 100; |
|
} |
|
} |
|
.el_top { |
|
width: 100%; |
|
padding: 6px 0; |
|
display: flex; |
|
justify-content: space-between; |
|
:deep(.el-form-item) { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
width: 24%; |
|
} |
|
} |
|
|
|
.el_Processingresults_box { |
|
display: flex; |
|
flex-direction: column; |
|
width: 100%; |
|
.el_title { |
|
display: flex; |
|
width: fit-content; |
|
padding: 0 10px; |
|
margin-bottom: 4px; |
|
color: #172e60; |
|
position: relative; |
|
} |
|
.el_title::after { |
|
position: absolute; |
|
content: ''; |
|
width: 6px; |
|
height: 6px; |
|
border-radius: 50%; |
|
left: 0; |
|
top: 50%; |
|
transform: translate(0, -50%); |
|
background-color: #172e60; |
|
} |
|
.el_Processingresults_box_list { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
font-size: 14px; |
|
.el-form-item { |
|
width: 24%; |
|
.el-form-item__label { |
|
margin-bottom: 0; |
|
} |
|
} |
|
} |
|
} |
|
.el_Processing { |
|
display: flex; |
|
.processor_box { |
|
min-width: 100%; |
|
} |
|
:deep(.el-form-item) { |
|
flex: 1; |
|
.el-form-item__content { |
|
width: 100% !important; |
|
.el-select { |
|
width: 100% !important; |
|
} |
|
} |
|
} |
|
} |
|
.plAllret { |
|
:deep(.el-select) { |
|
width: 100%; |
|
} |
|
.el-select { |
|
width: 100%; |
|
} |
|
} |
|
:deep(.el-upload-list__item-thumbnail) { |
|
object-fit: inherit; |
|
} |
|
</style>
|
|
|