lanan-system-vue/src/views/rescue/index.vue
2024-08-24 19:39:17 +08:00

703 lines
25 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="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="救援时间" 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" size="mini" @click="handleExport">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</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="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 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="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 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-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-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="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="imgFlag" width="500px" append-to-body>
<image-preview v-for="item in watchImgList" :src="item" :width="200" :height="200"/>
</el-dialog>
</div>
</template>
<script>
import { routeInfo, listInfo, getInfo, delInfo, addInfo, updateInfo,getDriver,designateDriver,returnOrder,watchImg, downloadOrder} from "@/api/rescue/info";
import { getmap } from "@/api/Map/map";
import Map from "../../components/Map/index"
export default {
name: "Info",
dicts: ['dljy_type', 'fee_type', 'rescue_car_type', 'yes_no','jy_status','jy_order_status'],
data() {
return {
chooseDriverId:'',
rescueInfoId:'',
// 遮罩层
loading: true,
ztlist:[],
time1:[],
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 道路救援模块表格数据
infoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
opens:false,
designateFlag:false,
zong:'',
repaymentForm:{},
repaymentOpen: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
},
// 表单参数
form: {},
driverList:[],
imgFlag:false,
watchImgList:[],
pickerOptions: null,
// 表单校验
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" }
],
}
};
},
components:{
Map
},
created() {
this.getList();
},
methods: {
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
},
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;
});
},
getDriverList() {
getDriver().then(response => {
this.driverList = response.rows;
});
},
// 取消按钮
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.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 {
const data = await downloadOrder(this.queryParams)
this.$download.excel(data, `救援订单_${new Date().getTime()}.xls`)
}catch {}
finally {}
}
}
};
</script>
<style scoped>
.lang-for{
width: 100%;
margin: 10px auto;
}
</style>