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.
 
 
 
 

2554 lines
70 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"></el-tab-pane>
<el-tab-pane label="零担信息" :name="2"></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">
<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">
<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>
</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-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-input v-model="Indexform.trainNumber" />
</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">
<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 == 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" 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"
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.Confirm_review" @click="ConfirmReview"
>确定审核
</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>{{ 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="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>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
const $useStore = useStore();
import { getDictionaryBiz } from '@/api/system/dict'; //字典
import { getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方
import {
$_getTrackRecord,
$_getSurveyRecord,
$_getInfo,
$_batchReturn,
$_Cancelappeal,
$_updateWorkOrderStatus,
$_updateManagerConfirmed,
} from '@/api/aftersales/aftersalesWorkOrder';
import { ref, reactive, computed, onMounted } from 'vue';
import { getToken } from '@/utils/auth';
const $router = useRouter();
const $route = useRoute();
const Indexform = ref({
packList: [],
decreaseImageEntityList: [], //处理好的图片数据
discoveryNode: '1',
}); //首页新增表单
const pageState = ref(true); //页面加载状态
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 msgHight = ref(100); //聊天框消息高度
const msgTop = ref(0); //调查记录距离页面吸顶记录
const msgState = ref(0);
const Msgloading = ref(false);
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(() => {
// if(appeal.value)return false
// else if ( $route.query.workOrderStatus != '21')return false
// return true
return {
reply:
!appeal.value &&
$route.query.workOrderStatus != '80' &&
$route.query.workOrderStatus != '30' &&
$route.query.workOrderStatus != '20' &&
$route.query.workOrderStatus != '40' &&
$route.query.workOrderStatus != '100' &&
$route.query.workOrderStatus != '110'
, //回复
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 Chathistory = res => {
Msgloading.value = true;
let filetype = ''; //文件类型
$_getSurveyRecord({
id: $route.query.id,
})
.then(res => {
MessageContent.value = []; //先清空内容,防止内容重复叠加
res.data.data.surveyRecordEntities.forEach(item => {
MessageContent.value.unshift({
time: item.createTime, //时间
content: item.processingResults, //消息内容
name: item.addDepartment, //营业部名称
username: item.addPeople, //用户名
img: filetype == 'png' ? item.pictureUrl : '',
file: filetype == 'docx' ? item.pictureUrl : '',
mp4: filetype == 'mp4' ? item.pictureUrl : '',
imgList: filetype == 'png' ? item.pictureUrl : '',
difference: item.difference,
identifying: false, //待回复标识
});
});
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(()=>{
if(CompensationParty.value.length){
console.log(CompletedView.value,'CompletedView.value');
if(CompletedView.value.includes(Mydata.value.id) || UserPermissions.value!='仓库客服'){
console.log(CompletedView.value.includes(Mydata.id),'CompletedView.value.includes(Mydata.id)');
return true
}else{
return false
}
}
})
const onLoad = () => {
pageState.value = true; //开启页面加载
if (localStorage.getItem('my_data')) {
Mydata.value = JSON.parse(localStorage.getItem('my_data')); //获取本地仓库信息
}
getDictionaryBiz('after_sales_visits').then(res => {
const matchingItem = res.data.data.find(
item => item.dictValue == JSON.parse(localStorage.getItem('TWMS-userInfo')).content.role_name
);
if (matchingItem) {
UserPermissions.value = matchingItem.dictValue; //记录当前人身份
} else {
UserPermissions.value = '仓库客服';
}
console.log(UserPermissions.value, '当前角色权限');
Chathistory(); //聊天的历史记录
routerState.value = $route.query.routerState;
updateDictionary(IndexException.value, 'pc_work_order'); //异常类型
updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节
handle(); //处理方和责任方信息
$_getInfo({ id: $route.query.id }).then(res => {
pageState.value = false; //关闭页面加载
if ($route.query.Routstate) {
appeal.value = true;
console.log(appeal.value, 'appeal.value');
}
// 只能查看申诉信息
if ($route.query.AppealReview) {
if ($route.query.AppealReview == 'false') {
console.log($route.query.AppealReview, '申诉状态');
AppealReview.value = false;
} else {
AppealReview.value = true;
console.log(AppealReview.value, '当前申诉状态');
}
}
console.log(res, '回显返回值参数');
Indexform.value = res.data.data;
if (res.data.data.warehouseId == Mydata.value.id) {
// 判断订单是否是当前登陆人发起的,用于修改订单信息(必须是待处理)
warehouseIdState.value = true;
}
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; //包件个数统计
// 责任方回显
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;
res.data.data.personResponsibleVOS.forEach(item => {
sum = Number(item.responsibilityRatio) + sum;
});
groundlineType.value = res.data.data.discoveryNode; //发现节点回显
FangAddList.value = res.data.data.personResponsibleVOS.map(res => {
return {
businessName: res.businessId, //责任人ID
personResponsibleName: res.personResponsibleName, //责任人名称
responsibilityRatio: res.responsibilityRatio + '%', //占比
description: res.description, //说明
tripartite: res.tripartite, //三方责任人
};
});
// 处理方/责任方回显
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.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 (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 (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;
});
};
onLoad(); //初始化程序
// 是否显示处理结果
const Processingrelease = () => {
if (Indexform.value.processor.length == 1 && Mydata.value.id == Indexform.value.processor[0]) {
ProcessingreleaseState.value = true; //显示处理放
} else {
ProcessingreleaseState.value = false; //关闭处理方
}
};
// 对调查经过输入框进行处理
const isShowFormItem1 = computed(() => {
return !['1', '2', '5', '6', '7'].includes(groundlineType.value);
});
// 对调查经过输入框进行处理
const isShowFormItem2 = computed(() => {
return !['2', '5', '6', '7', '8'].includes(groundlineType.value);
});
// 聊天刷新
const Chatrefresh = () => {
Chathistory();
};
// 底部按钮事件
// 回复
const addireply = () => {
$router.push({
path: '/aftersales/aftersalesWorkOrderend',
query: {
id: $route.query.id,
name: $route.query.workOrderNumber + '-回复',
businessId: $route.query.workOrderNumber,
RouterState: 'determine',
index: '0',
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: 'record',
index: '1',
},
});
};
// 待审核里面确定审核
const ConfirmReview = () => {};
// 完结
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 BatchReturn = () => {
BatchFrom.value.businessDepartment = [];
BatchFrom.value.txt = null;
dialogReturn.value = true;
};
// 客服仲裁完结
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',
EditInformation: true, //可以编辑完结信息编辑
ProcessType: $route.query.ProcessType, //类型 1 待处理 2 已处理
ProcessingresultsState: UserPermissions.value != '仓库客服' ? true : false, //
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
AppealEstablished: true, //申诉成立
},
});
};
// 申诉驳回
const AppealRejection = () => {
ElMessageBox.confirm(
'是否确认申诉驳回?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
let data = {
id: $route.query.appealID, //取消申诉ID
typesOf: '2', //申诉状态
workOrderId: $route.query.id, //异常工单ID
};
$_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('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 {
:deep(.el-input__inner) {
text-align: center;
}
width: 250px;
text-align: right;
: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;
.el-tabs__header {
}
.el-tabs__content {
// padding-right: 0;
}
.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: 32px;
.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: 50px;
height: 50px;
img {
width: 100%;
height: 100%;
}
}
.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-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: auto;
}
}
.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;
}
}
}
}
</style>