lanan-system-vue/src/views/rescue/index.vue
2025-10-17 16:03:39 +08:00

1381 lines
50 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="客户名称" prop="connectionName">
<el-input
v-model="queryParams.connectionName"
placeholder="请输入客户名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="客户手机号" prop="map.connectionPhone">
<el-input
v-model="queryParams.connectionPhone"
placeholder="请输入客户手机号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="客户车牌号" prop="licenseNum">
<el-input
v-model="queryParams.licenseNum"
placeholder="请输入车牌号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="司机名称" prop="driverName">
<el-input
v-model="queryParams.driverName"
placeholder="请输入司机名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="司机车牌号" prop="driverCarNum">
<el-input
v-model="queryParams.driverCarNum"
placeholder="请输入救援车辆车牌号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="救援类型" prop="rescueType">
<el-select v-model="queryParams.rescueType" placeholder="请选择救援类型" clearable>
<el-option
v-for="dict in this.getDictDatas(DICT_TYPE.DLJY_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="收费类型" prop="feeType">
<el-select v-model="queryParams.feeType" placeholder="请选择收费类型" clearable>
<el-option
v-for="dict in this.getDictDatas(DICT_TYPE.FEE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="救援状态" prop="rescueStatus">
<el-select v-model="queryParams.rescueStatus" placeholder="请选择救援状态" clearable>
<el-option
v-for="dict in this.getDictDatas(DICT_TYPE.JY_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus">
<el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable>
<el-option
v-for="dict in this.getDictDatas(DICT_TYPE.JY_ORDER_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="渠道" >
<el-select v-model="queryParams.channel" placeholder="请选择渠道" clearable>
<el-option
v-for="channel in channelList"
:key="channel.id"
:label="channel.name"
:value="channel.name"
/>
</el-select>
</el-form-item>
<el-form-item label="来源" >
<el-select v-model="queryParams.source" placeholder="请选择来源" clearable>
<el-option
v-for="source in sourceList"
:key="source.id"
:label="source.name"
:value="source.name"
/>
</el-select>
</el-form-item>
<el-form-item label="救援时间" prop="maintenanceTime">
<el-date-picker
v-model="time1"
type="daterange"
value-format="yyyy-MM-dd"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-download" :loading="exportLoading" size="mini" @click="handleExport">
导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-row type="flex"
justify="center"
style="margin:-20px 0 8px;white-space:nowrap;font-size:16px;font-weight:600;">
<span style="margin-right:24px;">应收款:{{ countNum.yingskNum }}</span>
<span style="margin-right:24px;">已收款:{{ countNum.yiskNum }}</span>
<span>待收款:{{ countNum.dskNum }}</span>
</el-row>
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table-column label="序号" align="center">
<template scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="客户信息" align="center">
<el-table-column label="姓名" align="center" prop="connectionName"/>
<el-table-column label="手机号" width="130" align="center" prop="connectionPhone"/>
<el-table-column label="车牌号" width="150" align="center" prop="licenseNum">
<template slot-scope="scope">
<span v-if="editType===0 && scope.$index == editIdx"><el-input v-model="scope.row.licenseNum "></el-input><i
@click="editInfo(scope.row)" class="el-icon-check"
></i></span>
<span v-else>{{ scope.row.licenseNum }}<i @click="editInfoFront(0,scope.$index)" class="el-icon-edit"
></i></span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="救援司机" align="center">
<el-table-column label="姓名" align="center" prop="driverName"/>
<el-table-column label="手机号" width="130" align="center" prop="driverPhoneNum"/>
<el-table-column label="车牌号" width="120" align="center" prop="driverCarNum">
<template slot-scope="scope">
<span v-if="editType===1 && scope.$index == editIdx"><el-input v-model="scope.row.driverCarNum "></el-input><i
@click="editInfo(scope.row)" class="el-icon-check"
></i></span>
<span v-else>{{ scope.row.driverCarNum }}<i @click="editInfoFront(1,scope.$index)" class="el-icon-edit"></i></span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="救援时间" width="100" align="center" prop="rescueTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.rescueTime, '{y}-{m}-{d} {h}:{m}') }}</span>
</template>
</el-table-column>
<el-table-column label="救援类型" align="center" prop="rescueType">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.DLJY_TYPE" :value="scope.row.rescueType"/>
</template>
</el-table-column>
<!-- <el-table-column label="路段" align="center" prop="sectionRoad"/>-->
<el-table-column label="渠道" align="center" prop="channel"/>
<el-table-column label="来源" align="center" prop="source"/>
<el-table-column label="车辆类型" align="center" prop="carType">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.RESCUE_CAR_TYPE" :value="scope.row.carType"/>
</template>
</el-table-column>
<el-table-column width="130" label="救援地点" :show-overflow-tooltip="true" align="center" prop="rescuePosition"/>
<el-table-column width="100" label="出发里程表" align="center" prop="startScale"/>
<el-table-column width="100" label="结束里程表" align="center" prop="endScale"/>
<el-table-column width="100" label="施救里程数" align="center" prop="endScale">
<template slot-scope="scope">
<span
v-if="Number.isFinite(scope.row.startScale) &&
Number.isFinite(scope.row.endScale) &&
scope.row.endScale >= scope.row.startScale">
{{ scope.row.endScale - scope.row.startScale }}
</span>
</template>
</el-table-column>
<el-table-column label="收费类型" align="center" prop="feeType">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.FEE_TYPE" :value="scope.row.feeType"/>
</template>
</el-table-column>
<el-table-column label="支付方式" align="center" prop="payType" :formatter="payTypeFormatter" />
<el-table-column label="救援状态" align="center" prop="rescueStatus">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.JY_STATUS" :value="scope.row.rescueStatus"/>
</template>
</el-table-column>
<el-table-column label="订单状态·" align="center" prop="orderStatus">
<template slot-scope="scope">
<span v-if="scope.row.orderStatus">
<dict-tag :type="DICT_TYPE.JY_ORDER_STATUS" :value="scope.row.orderStatus"/>
</span>
<span v-else>
未成单
</span>
</template>
</el-table-column>
<el-table-column label="应收金额(元)" width="150" align="center" prop="setMoney">
<template slot-scope="scope">
<span v-if="editType===2 && scope.$index == editIdx"><el-input oninput="value=value.replace(/[^0-9.]/g,'')"
v-model="scope.row.setMoney2 "
></el-input><i @click="editInfo(scope.row,2)" class="el-icon-check"></i></span>
<span v-else>{{ scope.row.setMoney / 100 }}<i @click="editInfoFront(2,scope.$index)" class="el-icon-edit"></i></span>
</template>
</el-table-column>
<el-table-column label="实收金额(元)" width="150" align="center" prop="setMoney">
<template slot-scope="scope">
<span>{{ scope.row.payMoney / 100 }}</span>
</template>
</el-table-column>
<el-table-column label="收款时间" align="center" width="100" prop="setMoney">
<template slot-scope="scope">
<span>{{ scope.row.payTime }}</span>
</template>
</el-table-column>
<el-table-column label="是否确认收款" align="center" width="100" prop="ifConfirmPay">
<template slot-scope="scope">
<span v-if="scope.row.ifConfirmPay === '0'" style="color: #e6a23c">待确认</span>
<span v-else-if="scope.row.ifConfirmPay === '1'" style="color: #67c23a">已确认</span>
</template>
</el-table-column>
<el-table-column label="确认收款人" align="center" width="100" prop="confirmPaymentPersonName" />
<el-table-column label="确认收款时间" align="center" width="100" prop="confirmPaymentTime" />
<el-table-column label="确认收款备注" align="center" width="100" prop="confirmPaymentPersonRemark" show-overflow-tooltip/>
<!-- 0是未确认 1是已确认-->
<el-table-column label="是否开票" align="center" width="100" prop="ifBilled" >
<template slot-scope="scope">
<span v-if="scope.row.ifBilled === '1'" style="color: #67c23a">已开票</span>
<span v-else style="color: #e6a23c">未开票</span>
</template>
</el-table-column>
<el-table-column label="开票人" align="center" width="100" prop="billedUsername" />
<el-table-column fixed="right" label="操作" align="center" width="150" class-name="small-padding fixed-width">
<template slot-scope="scope">
<!-- <el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleShow(scope.row)"
>查看
</el-button> -->
<el-button
size="mini"
type="text"
icon="el-icon-circle-check"
@click="showBilled(scope.row)"
style="color: #c0c4cc"
v-if="scope.row.ifBilled === '1' "
>已开票
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-circle-check"
@click="unbilled(scope.row)"
v-else
>未开票
</el-button>
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['system:info:edit']"-->
<!-- >修改</el-button>-->
<el-button
size="mini"
type="text"
icon="el-icon-edit"
v-if="scope.row.rescueStatus==1||scope.row.rescueStatus==2"
@click="designateDriver(scope.row)"
>指派司机
</el-button>
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleMap(scope.row)"-->
<!-- >路线</el-button>-->
<!-- <el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="repayment(scope.row)"
>收款
</el-button>-->
<el-button
size="mini"
type="text"
icon="el-icon-circle-check"
v-hasPermi="['rescue:finance:confirm']"
@click="confirmPayment(scope.row)"
v-if="scope.row.ifConfirmPay === '0' "
>确认收款
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-view"
v-hasPermi="['rescue:finance:confirm']"
v-else-if="scope.row.ifConfirmPay === '1' "
@click="viewConfirmPayment(scope.row)"
style="color: #c0c4cc"
>已确认收款
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-picture-outline"
@click="watchImg(scope.row)"
>救援图片
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 未开票对话框 -->
<el-dialog title="未开票" :visible.sync="unbilledOpen" width="600px" append-to-body>
<!-- 点击显示弹框 记录开票信息(二维码)和备注 -->
<el-form ref="unbilledForm" :model="unbilledForm" label-width="120px">
<el-form-item label="图片" prop="billedQrcode">
<image-upload v-model="unbilledForm.billedQrcode"/>
</el-form-item>
<el-form-item label="备注" prop="billedRemark">
<el-input
v-model="unbilledForm.billedRemark"
type="textarea"
placeholder="请输入备注"
:autosize="{ minRows:2, maxRows:4 }"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="unbilledSubmit">确 定</el-button>
<el-button @click="unbilledCancel">取 消</el-button>
</div>
</el-dialog>
<!-- 已开票对话框(仅展示)-->
<el-dialog
title="已开票"
:visible.sync="billedOpen"
width="600px"
append-to-body
custom-class="billed-dialog-custom"
>
<el-form ref="billedFormRef" :model="billedForm" label-width="120px">
<!-- 操作人(只读) -->
<el-form-item label="操作人">
<el-input v-model="billedForm.billedUsername" :disabled="true" placeholder="—" />
</el-form-item>
<!-- 开票二维码:展示 + 预览 -->
<el-form-item label="开票二维码">
<el-image
v-if="billedForm.billedQrcode"
:src="billedForm.billedQrcode"
:preview-src-list="[billedForm.billedQrcode]"
fit="contain"
style="width:160px;height:160px;border:1px solid #eee"
/>
<span v-else class="text-gray-400">暂无二维码</span>
</el-form-item>
<!-- 发票备注(只读) -->
<el-form-item label="发票备注">
<el-input
v-model="billedForm.billedRemark"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
:disabled="true"
placeholder="—"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="billedOpen = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 救援订单详情对话框 -->
<el-dialog
title="单据详情"
:visible.sync="orderDialogVisible"
width="80%"
v-dialogDrag
append-to-body
>
<el-card class="box-card">
<!-- 卡片头 -->
<div slot="header" class="clearfix">
<i class="el-icon-plus" />
<span>工单信息</span>
</div>
<!-- 卡片内容 -->
<div>
<el-descriptions
class="margin-top"
:column="4"
:size="'medium'"
border
style="margin-bottom: 1rem"
>
<el-descriptions-item>
<template slot="label">客户名称</template>
{{ infoList.connectionName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">客户手机号</template>
{{ infoList.connectionPhone }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">客户车牌号</template>
{{ infoList.licenseNum }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">司机姓名</template>
{{ infoList.driverName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">司机手机号</template>
{{ infoList.driverPhoneNum }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">司机车牌号</template>
{{ infoList.driverCarNum }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">车辆种类</template>
{{ infoList.carType }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">救援时间</template>
{{ infoList.rescueTime }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">救援开始时间</template>
<!-- {{ infoList.rescueStartTime }} -->
{{ parseTime(infoList.rescueStartTime, '{y}-{m}-{d} {h}:{m}') }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">救援结束时间</template>
<!-- {{ infoList.rescueEndTime }} -->
{{ parseTime(infoList.rescueEndTime, '{y}-{m}-{d} {h}:{m}') }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">救援类型</template>
<dict-tag :type="DICT_TYPE.DLJY_TYPE" :value="infoList.rescueType" />
<!-- {{ infoList.rescueType }} -->
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">车辆类型</template>
<!-- {{ infoList.carType }} -->
<dict-tag :type="DICT_TYPE.RESCUE_CAR_TYPE" :value="infoList.carType"/>
</el-descriptions-item>
<el-descriptions-item :span="2">
<template slot="label">救援地点</template>
{{ infoList.rescuePosition }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">收费类型</template>
<!-- {{ infoList.feeType }} -->
<dict-tag :type="DICT_TYPE.FEE_TYPE" :value="infoList.carType"/>
</el-descriptions-item>
<el-descriptions-item :span="2">
<template slot="label">目的地</template>
{{ infoList.destination }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">救援状态</template>
<!-- {{ infoList.rescueStatus }} -->
<dict-tag :type="DICT_TYPE.JY_STATUS" :value="infoList.rescueStatus"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">路段</template>
{{ infoList.sectionRoad }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">订单状态</template>
<!-- {{ infoList.orderStatus }} -->
<dict-tag :type="DICT_TYPE.JY_ORDER_STATUS" :value="infoList.orderStatus"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">应收金额</template>
{{ (infoList.setMoney / 100).toFixed(2) }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">实付金额</template>
{{ (infoList.payMoney / 100).toFixed(2) }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">收款时间</template>
{{ infoList.payTime }}
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
<div slot="footer" class="dialog-footer">
<PrintButton
ref="printButton"
print-title="救援工单"
@click="handlePrint"
style="float: left"
>
<template #printContent>
<div class="print-content">
<h1 style="text-align: center">救援工单详情</h1>
<table class="print-table" border="1" cellspacing="0" cellpadding="8"
style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
<tbody>
<tr>
<td><strong>客户名称</strong></td>
<td>{{ infoList.connectionName }}</td>
<td><strong>客户手机号</strong></td>
<td>{{ infoList.connectionPhone }}</td>
</tr>
<tr>
<td><strong>客户车牌号</strong></td>
<td>{{ infoList.licenseNum }}</td>
<td><strong>司机姓名</strong></td>
<td>{{ infoList.driverName }}</td>
</tr>
<tr>
<td><strong>司机手机号</strong></td>
<td>{{ infoList.driverPhoneNum }}</td>
<td><strong>司机车牌号</strong></td>
<td>{{ infoList.driverCarNum }}</td>
</tr>
<tr>
<td><strong>车辆种类</strong></td>
<td>{{ infoList.carType }}</td>
<td><strong>救援时间</strong></td>
<td>{{ infoList.rescueTime }}</td>
</tr>
<tr>
<td><strong>救援开始时间</strong></td>
<!-- <td>{{ infoList.rescueStartTime }}</td> -->
<td>{{ parseTime(infoList.rescueStartTime, '{y}-{m}-{d} {h}:{m}') }}</td>
<td><strong>救援结束时间</strong></td>
<!-- <td>{{ infoList.rescueEndTime }}</td> -->
<td>{{ parseTime(infoList.rescueEndTime, '{y}-{m}-{d} {h}:{m}') }}</td>
</tr>
<tr>
<td><strong>救援类型</strong></td>
<!-- <td>{{ infoList.rescueType }}</td> -->
<td><dict-tag :type="DICT_TYPE.DLJY_TYPE" :value="infoList.rescueType" /></td>
<td><strong>车辆类型</strong></td>
<!-- <td>{{ infoList.carType }}</td> -->
<td><dict-tag :type="DICT_TYPE.RESCUE_CAR_TYPE" :value="infoList.carType"/></td>
</tr>
<tr>
<td><strong>救援地点</strong></td>
<td colspan="3">{{ infoList.rescuePosition }}</td>
</tr>
<tr>
<td><strong>收费类型</strong></td>
<!-- <td>{{ infoList.feeType }}</td> -->
<td><dict-tag :type="DICT_TYPE.FEE_TYPE" :value="infoList.carType"/></td>
<td><strong>目的地</strong></td>
<td>{{ infoList.destination }}</td>
</tr>
<tr>
<td><strong>救援状态</strong></td>
<!-- <td>{{ infoList.rescueStatus }}</td> -->
<td><dict-tag :type="DICT_TYPE.JY_STATUS" :value="infoList.rescueStatus"/></td>
<td><strong>路段</strong></td>
<td>{{ infoList.sectionRoad }}</td>
</tr>
<tr>
<td><strong>订单状态</strong></td>
<!-- <td>{{ infoList.orderStatus }}</td> -->
<td><dict-tag :type="DICT_TYPE.JY_ORDER_STATUS" :value="infoList.orderStatus"/></td>
<td><strong>应收金额</strong></td>
<td>{{ (infoList.setMoney / 100).toFixed(2) }}</td>
</tr>
<tr>
<td><strong>实付金额</strong></td>
<td>{{ (infoList.payMoney / 100).toFixed(2) }}</td>
<td><strong>收款时间</strong></td>
<td>{{ infoList.payTime }}</td>
</tr>
</tbody>
</table>
</div>
</template>
</PrintButton>
<el-button @click="orderDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<!-- 添加或修改道路救援模块对话框 -->
<el-dialog :title="title" :visible.sync="opens" width="600px" append-to-body>
<Map ref="mapComponent"></Map>
<div class="lang-for" v-for="(item,index) in ztlist" :key="index">
<span style="margin-right: 10px;">{{ item.title }}</span>
<span>{{ item.distanceMeter / 1000 }} KM</span>
</div>
<div> 总里程 {{ zong / 1000 }} KM</div>
</el-dialog>
<el-dialog title="指派司机" :visible.sync="designateFlag" width="600px" append-to-body>
<el-form>
<el-form-item label="选择司机" prop="carType">
<el-select v-model="chooseDriverId" placeholder="请选择司机">
<el-option
v-for="item in driverList"
:key="item.id"
:label="item.realName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="driverOk">确 定</el-button>
<el-button @click="designateFlag = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="联系人名称" prop="connectionName">
<el-input v-model="form.connectionName" placeholder="请输入联系人名称"/>
</el-form-item>
<el-form-item label="联系人手机号" prop="connectionPhone">
<el-input v-model="form.connectionPhone" placeholder="请输入联系人手机号"/>
</el-form-item>
<el-form-item label="车牌号" prop="licenseNum">
<el-input v-model="form.licenseNum" placeholder="请输入车牌号"/>
</el-form-item>
<el-form-item label="是否为预约单" prop="isAppointment">
<el-radio-group v-model="form.isAppointment">
<!-- <el-radio-->
<!-- v-for="dict in dict.type.yes_no"-->
<!-- :key="dict.value"-->
<!-- :label="dict.value"-->
<!-- >{{dict.label}}</el-radio>-->
</el-radio-group>
</el-form-item>
<el-form-item label="救援时间" prop="rescueTime">
<el-date-picker clearable
v-model="form.rescueTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择救援时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="救援类型 1拖车2送油3搭电4换台5扣车" prop="rescueType">
<el-select v-model="form.rescueType" placeholder="请选择救援类型 1拖车2送油3搭电4换台5扣车">
<!-- <el-option-->
<!-- v-for="dict in dict.type.dljy_type"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- ></el-option>-->
</el-select>
</el-form-item>
<el-form-item label="车辆类型 大中小" prop="carType">
<el-select v-model="form.carType" placeholder="请选择车辆类型 大中小">
<!-- <el-option-->
<!-- v-for="dict in dict.type.rescue_car_type"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- ></el-option>-->
</el-select>
</el-form-item>
<el-form-item label="救援地点 详细描述" prop="rescuePosition">
<el-input v-model="form.rescuePosition" placeholder="请输入救援地点 详细描述"/>
</el-form-item>
<el-form-item label="救援经度" prop="rescueLongitude">
<el-input v-model="form.rescueLongitude" placeholder="请输入救援经度"/>
</el-form-item>
<el-form-item label="救援纬度" prop="rescueLatitude">
<el-input v-model="form.rescueLatitude" placeholder="请输入救援纬度"/>
</el-form-item>
<el-form-item label="收费类型" prop="feeType">
<el-radio-group v-model="form.feeType">
<!-- <el-radio-->
<!-- v-for="dict in dict.type.fee_type"-->
<!-- :key="dict.value"-->
<!-- :label="dict.value"-->
<!-- >{{dict.label}}</el-radio>-->
</el-radio-group>
</el-form-item>
<el-form-item label="车辆品牌" prop="carBrand">
<el-input v-model="form.carBrand" placeholder="请输入车辆品牌"/>
</el-form-item>
<el-form-item label="目的地详细描述" prop="destinationInfo">
<el-input v-model="form.destinationInfo" placeholder="请输入目的地详细描述"/>
</el-form-item>
<el-form-item label="目的地经度" prop="destinationLongitude">
<el-input v-model="form.destinationLongitude" placeholder="请输入目的地经度"/>
</el-form-item>
<el-form-item label="目的地纬度" prop="destinationLatitude">
<el-input v-model="form.destinationLatitude" placeholder="请输入目的地纬度"/>
</el-form-item>
<el-form-item label="救援司机主键" prop="driverId">
<el-input v-model="form.driverId" placeholder="请输入救援司机主键"/>
</el-form-item>
<el-form-item label="应收金额" prop="rescueAmount">
<el-input v-model="form.rescueAmount" placeholder="请输入金额"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="订单收款" :visible.sync="repaymentOpen" width="600px" append-to-body>
<el-form ref="repaymentForm" :model="repaymentForm" :rules="rules" label-width="120px">
<el-form-item label="收款金额" prop="returnMoney">
<el-input-number v-model="repaymentForm.returnMoney" placeholder="请输入收款金额"/>
</el-form-item>
<el-form-item label="备注" prop="returnMoney">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入备注"
v-model="repaymentForm.remark"
>
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="repaymentSubmit">确 定</el-button>
<el-button @click="cancelRepayment">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="确认收款" :visible.sync="confirmPaymentOpen" width="600px" append-to-body>
<el-form ref="confirmPaymentForm" :model="confirmPaymentForm" :rules="rules" label-width="120px">
<el-form-item label="实收金额" prop="payMoney">
<el-input-number v-model="confirmPaymentForm.payMoney" placeholder="请输入实收金额"/>
</el-form-item>
<el-form-item label="备注" prop="confirmPaymentPersonRemark">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入备注"
v-model="confirmPaymentForm.confirmPaymentPersonRemark"
>
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmPaymentSubmit">确 定</el-button>
<el-button @click="cancelConfirmPayment">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="救援图片" :visible.sync="imgFlag" width="500px" append-to-body>
<image-preview v-for="item in watchImgList" :src="item" :width="200" :height="200"/>
</el-dialog>
<!-- 查看确认收款信息弹框 -->
<el-dialog title="查看收款信息" :visible.sync="viewPaymentOpen" width="600px" append-to-body>
<el-form :model="viewPaymentForm" label-width="120px">
<el-form-item label="确认收款人">
<el-input v-model="viewPaymentForm.confirmPaymentPersonName" :disabled="true"/>
</el-form-item>
<el-form-item label="确认收款时间">
<el-input v-model="viewPaymentForm.confirmPaymentTime" :disabled="true"/>
</el-form-item>
<el-form-item label="实收金额">
<el-input :value="(viewPaymentForm.payMoney / 100).toFixed(2)" :disabled="true"/>
</el-form-item>
<el-form-item label="确认收款备注">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
:disabled="true"
v-model="viewPaymentForm.confirmPaymentPersonRemark"
>
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="viewPaymentOpen = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
routeInfo,
listInfo,
getInfo,
delInfo,
addInfo,
updateInfo,
getDriver,
designateDriver,
returnOrder,
watchImg,
downloadOrder, confirmReceipt,
getInfoById,
updateBilled,
getCountNum,
channelList,
sourceList
} from '@/api/rescue/info'
import { getmap } from '@/api/Map/map'
import { getInfo as getUserInfo} from '@/api/login'
import Map from '../../components/Map/index'
import PrintButton from "@/components/PrintButton";
export default {
name: 'Info',
dicts: ['dljy_type', 'fee_type', 'rescue_car_type', 'yes_no', 'jy_status', 'jy_order_status'],
data() {
return {
channelList:[],
sourceList:[],
countNum: {
yingskNum: 0, // 应收款
yiskNum: 0, // 已收款
dskNum: 0, // 待收款
},
billedForm: {
billedUsername: '', // 操作人姓名
billedQrcode: '', // 开票二维码图片 URL
billedRemark: '' // 发票备注
},
// 表单
unbilledForm: {
id: '',
ifBilled: '',
billedUserid: '',
billedUsername: '',
billedQrcode: '',
billedRemark: ''
},
// 导出遮罩层
exportLoading: false,
chooseDriverId: '',
rescueInfoId: '',
// 遮罩层
loading: true,
ztlist: [],
time1: [],
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 道路救援模块表格数据
infoList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
orderDialogVisible: false,
unbilledOpen: false,
billedOpen:false,
open: false,
opens: false,
designateFlag: false,
zong: '',
repaymentForm: {},
confirmPaymentForm: {},
repaymentOpen: false,
confirmPaymentOpen: false,
editType: 0,
editIdx: -1,
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
connectionName: null,
isAppointment: null,
rescueType: null,
feeType: null,
carBrand: null,
destinationInfo: null,
rescueStatus: null,
rescueAmount: null,
driverName: null,
driverCarNum: null,
orderStatus: null,
rescueEnd: null,
rescueStart: null,
connectionPhone: null,
channel: null,
source: null
},
// 表单参数
form: {},
driverList: [],
imgFlag: false,
watchImgList: [],
pickerOptions: null,
loginUserInfo: {},
// 查看收款弹框相关数据
viewPaymentOpen: false,
viewPaymentForm: {
confirmPaymentPersonName: '',
confirmPaymentTime: '',
payMoney: 0,
confirmPaymentPersonRemark: ''
},
// 表单校验
rules: {
connectionName: [
{ required: true, message: '联系人名称不能为空', trigger: 'blur' }
],
connectionPhone: [
{ required: true, message: '联系人手机号不能为空', trigger: 'blur' }
],
licenseNum: [
{ required: true, message: '车牌号不能为空', trigger: 'blur' }
],
isAppointment: [
{ required: true, message: '是否为预约单不能为空', trigger: 'change' }
],
rescueType: [
{ required: true, message: '救援类型 1拖车2送油3搭电4换台5扣车不能为空', trigger: 'change' }
],
carType: [
{ required: true, message: '车辆类型 大中小不能为空', trigger: 'change' }
],
rescuePosition: [
{ required: true, message: '救援地点 详细描述不能为空', trigger: 'blur' }
],
feeType: [
{ required: true, message: '收费类型不能为空', trigger: 'change' }
],
billedQrcode: [{ required: true, message: '请上传二维码图片', trigger: 'change' }],
billedRemark: [{ required: false, message: '请输入备注', trigger: 'blur' }]
}
}
},
components: {
Map,
PrintButton
},
created() {
this.getList()
this.getChannelList()
this.getSourceList()
},
methods: {
showBilled(row) {
this.billedForm.billedUsername = row.billedUsername
this.billedForm.billedQrcode = row.billedQrcode
this.billedForm.billedRemark = row.billedRemark
this.billedOpen = true
},
// 提交
unbilledSubmit() {
// 先校验
this.$refs.unbilledForm.validate( (valid) => {
if (!valid) return;
this.unbilledForm.billedUserid = this.loginUserInfo.id
this.unbilledForm.billedUsername = this.loginUserInfo.nickname
updateBilled(this.unbilledForm).then(response => {
this.$message.success('保存成功');
this.unbilledOpen = false;
this.getList();
});
});
},
unbilled(row){
this.unbilledForm.id = row.rescueOrderId
this.unbilledForm.billedQrcode = row.billedQrcode
this.unbilledForm.billedRemark = row.billedRemark
this.unbilledForm.ifBilled = '1'
this.unbilledOpen = true
this.getLoginUserInfo()
},
unbilledCancel() {
this.unbilledOpen = false;
},
async handleShow(row){
// 打开弹窗
this.orderDialogVisible = true
console.log(row.id)
const res = await getInfoById(row.id)
this.infoList = res.data
},
handlePrint() {
this.$refs.printButton.handlePrint();
},
watchImg(data) {
watchImg(data.id).then(response => {
this.imgFlag = true
this.watchImgList = response.data
})
},
editInfo(data, type) {
if (type == 2) {
data.setMoney = data.setMoney2 * 100
}
updateInfo(data).then(response => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.editType = 0
this.editIdx = -1
this.getList()
})
},
editInfoFront(type, index) {
this.editType = type
this.editIdx = index
},
cancelRepayment() {
this.repaymentForm = {}
this.repaymentOpen = false
},
repaymentSubmit() {
this.$refs['repaymentForm'].validate(valid => {
if (valid) {
this.repaymentForm.returnMoney = this.repaymentForm.returnMoney * 100
returnOrder(this.repaymentForm).then(res => {
this.$modal.msgSuccess('收款成功')
this.repaymentOpen = false
this.repaymentForm = {}
this.getList()
})
}
})
},
repayment(data) {
this.repaymentOpen = true
this.repaymentForm.rescueOrderId = data.rescueOrderId
},
getLoginUserInfo(){
getUserInfo().then(res => {
this.loginUserInfo = res.data.user
})
},
cancelConfirmPayment() {
this.confirmPaymentForm = {}
this.confirmPaymentOpen = false
},
confirmPaymentSubmit() {
this.$refs['confirmPaymentForm'].validate(valid => {
if (valid) {
this.confirmPaymentForm.payMoney = this.confirmPaymentForm.payMoney * 100
this.confirmPaymentForm.confirmPaymentPersonId = this.loginUserInfo.id
this.confirmPaymentForm.confirmPaymentPersonName = this.loginUserInfo.nickname
this.confirmPaymentForm.ifConfirmPay = '1'
confirmReceipt(this.confirmPaymentForm).then(res => {
this.$modal.msgSuccess('收款成功')
this.confirmPaymentOpen = false
this.confirmPaymentForm = {}
this.getList()
})
}
})
},
confirmPayment(data) {
this.getLoginUserInfo()
this.confirmPaymentOpen = true
this.confirmPaymentForm.id = data.rescueOrderId
this.confirmPaymentForm.payMoney = ( data.setMoney / 100).toFixed(2)
},
// 查看确认收款信息
viewConfirmPayment(data) {
console.log('data', data)
this.viewPaymentOpen = true
this.viewPaymentForm = {
confirmPaymentPersonName: data.confirmPaymentPersonName,
confirmPaymentTime: data.confirmPaymentTime,
payMoney: data.payMoney,
confirmPaymentPersonRemark: data.confirmPaymentPersonRemark
}
},
driverOk() {
this.designateFlag = false
designateDriver(this.rescueInfoId, this.chooseDriverId).then(res => {
this.$message.success('指派成功')
this.getList()
})
},
/** 查询道路救援模块列表 */
getList() {
this.loading = true
listInfo(this.queryParams).then(response => {
this.infoList = response.data.records
this.total = response.data.total
this.loading = false
this.getStatistic(this.queryParams)
})
},
/** 应收款、已收款、代收款统计 */
getStatistic(query) {
getCountNum(query).then(res => {
this.countNum.yingskNum = res.data.yingskNum ? res.data.yingskNum / 100 : 0
this.countNum.yiskNum = res.data.yiskNum ? res.data.yiskNum / 100 : 0
this.countNum.dskNum = res.data.dskNum ? res.data.dskNum / 100 : 0
})
},
/**
* 获取渠道列表
*/
getChannelList() {
channelList().then(response => {
this.channelList = response.data
})
},
/**
* 获取来源列表
*/
getSourceList() {
sourceList().then(response => {
this.sourceList = response.data
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
connectionName: null,
connectionPhone: null,
licenseNum: null,
isAppointment: null,
rescueTime: null,
rescueType: null,
carType: null,
rescuePosition: null,
rescueLongitude: null,
rescueLatitude: null,
feeType: null,
carBrand: null,
destinationInfo: null,
destinationLongitude: null,
destinationLatitude: null,
rescueStatus: null,
driverId: null,
rescueAmount: null,
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
if (this.time1 && this.time1.length > 0) {
this.queryParams.rescueStart = this.time1[0]
this.queryParams.rescueEnd = this.time1[1]
}
this.queryParams.pageNo = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.time1 = null
this.queryParams.rescueStart = null
this.queryParams.rescueEnd = null
this.queryParams = {
pageNo: 1,
pageSize: 10,
connectionName: null,
isAppointment: null,
rescueType: null,
feeType: null,
carBrand: null,
destinationInfo: null,
rescueStatus: null,
rescueAmount: null,
driverName: null,
driverCarNum: null,
orderStatus: null,
rescueEnd: null,
rescueStart: null,
connectionPhone: null
}
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加道路救援模块'
},
pickDriver(row) {
},
designateDriver(row) {
this.designateFlag = true
this.rescueInfoId = row.id
this.getDriverList()
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getInfo(id).then(response => {
this.form = response.data
this.open = true
this.title = '修改道路救援模块'
})
},
handleMap(row) {
this.rescueInfoId = row.id
routeInfo(row.id).then(res => {
this.ztlist = res.data
this.none(res.data)
})
getmap(row.id).then(res => {
let datas = []
res.data.forEach(it => {
let temp = [it.longitude, it.latitude]
datas.push(temp)
})
this.$refs.mapComponent.initMap(datas)
})
this.opens = true
},
none(arr) {
let sum = 0
for (var i = 0; i < arr.length; i++) {
sum += arr[i].distanceMeter
}
this.zong = sum
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateInfo(this.form).then(response => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addInfo(this.form).then(response => {
this.$modal.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除道路救援模块编号为"' + ids + '"的数据项?').then(function() {
return delInfo(ids)
}).then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
}).catch(() => {
})
},
/** 导出按钮操作 */
async handleExport() {
try {
this.exportLoading = true
this.queryParams.pageNo = 1
this.queryParams.pageSize = 500
const data = await downloadOrder(this.queryParams)
this.$download.excel(data, `救援订单_${new Date().getTime()}.xls`)
} catch {
} finally {
this.exportLoading = false
}
},
payTypeFormatter(row) {
const map = {
qd: '挂账',
wx: '微信',
xj: '现金'
}
return map[row.payType] || row.payType || '-'
}
}
}
</script>
<style scoped>
.billed-dialog-custom >>> .el-dialog__body {
max-height: 500px; /* 或者你需要的高度 */
overflow-y: auto;
}
.lang-for {
width: 100%;
margin: 10px auto;
}
</style>