870 lines
32 KiB
Vue
870 lines
32 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 搜索表单 -->
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||
<el-form-item label="代理商" prop="deptId" v-if="userName == 'admin' && !deptId" >
|
||
<el-select v-model="queryParams.deptId" filterable placeholder="请选择代理商" clearable>
|
||
<el-option
|
||
v-for="item in deptOptions"
|
||
:key="item.deptId"
|
||
:label="item.deptName"
|
||
:value="item.deptId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="套餐名称" prop="name">
|
||
<el-input v-model="queryParams.name" placeholder="请输入套餐名称" clearable @keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="status">
|
||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
|
||
:value="dict.value" />
|
||
</el-select>
|
||
</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" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||
v-hasPermi="['system:fee:add']">新增</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
|
||
v-hasPermi="['system:fee:edit']">修改</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
|
||
v-hasPermi="['system:fee:remove']">删除</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
|
||
v-hasPermi="['system:fee:export']">导出</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table v-loading="loading" :data="feeList" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="id" align="center" prop="ruleId" />
|
||
<el-table-column label="代理商" align="center" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
<router-link :to="'/system/deptDetail/index/' + scope.row.deptId" class="link-type">
|
||
<span>{{scope.row.deptName}}</span>
|
||
</router-link>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="代理商" align="center" prop="deptName" v-if="userName == 'admin'"/> -->
|
||
<!-- <el-table-column label="应用运营区" align="center" prop="areaName"/>-->
|
||
<el-table-column label="套餐名称" align="center" prop="name" />
|
||
<el-table-column label="说明" :show-overflow-tooltip="true" align="center" prop="instructions" />
|
||
<el-table-column label="价格说明" align="left" prop="description" >
|
||
<template slot-scope="scope">
|
||
<div v-html="appUserNameFormatter(scope.row.description)"></div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" align="center" prop="status">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="orderNum" align="center" label="排序"></el-table-column>
|
||
<el-table-column label="操作" align="center" 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:fee:edit']">修改</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||
v-hasPermi="['system:fee:remove']">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||
@pagination="getList" />
|
||
|
||
<!-- 添加或修改收费方式对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
|
||
|
||
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
|
||
<el-form-item label="套餐名称" prop="name">
|
||
<el-input v-model="form.name" placeholder="请输入套餐名称" />
|
||
</el-form-item>
|
||
<el-row>
|
||
<el-col :span="12" v-if="userName == 'admin'">
|
||
<el-form-item label="代理商" prop="deptId" >
|
||
<el-select v-model="form.deptId" filterable placeholder="请选择代理商">
|
||
<el-option
|
||
v-for="item in deptOptions"
|
||
:key="item.deptId"
|
||
:label="item.deptName"
|
||
:value="item.deptId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="显示排序" prop="orderNum">
|
||
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="说明" prop="instructions" :show-overflow-tooltip="true">
|
||
<editor v-model="form.instructions" :min-height="192"/>
|
||
<!-- <el-input v-model="form.explain" type="textarea" placeholder="请输入内容" /> -->
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="status" v-if="title != '添加收费方式'">
|
||
<el-select v-model="form.status" placeholder="请选择状态">
|
||
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
|
||
:value="dict.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="returnVerify == '0'" label="还车结算" prop="autoRefundDeposit">
|
||
<el-col :span="4">
|
||
<el-input v-model="form.autoRefundDeposit" placeholder="请输入" />
|
||
</el-col>
|
||
小时 后自动退押金
|
||
</el-form-item>
|
||
<!-- <el-form-item label="订单超过" prop="unit">-->
|
||
<!-- <el-col :span="4">-->
|
||
<!-- <el-input v-model="form.orderExceedMinutes" placeholder="请输入" />-->
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="1.2">-->
|
||
<!-- 分钟,每-->
|
||
<!-- </el-col>-->
|
||
|
||
<!-- <el-col :span="4">-->
|
||
<!-- <el-input v-model="form.orderExceedWarn" placeholder="请输入" />-->
|
||
<!-- </el-col>-->
|
||
<!-- 分钟语音提醒一次归还设备-->
|
||
<!-- </el-form-item>-->
|
||
<el-form-item label="免费骑行" prop="freeRideTime">
|
||
<el-col :span="4">
|
||
<el-input v-model="form.freeRideTime" placeholder="请输入" />
|
||
</el-col>
|
||
分钟
|
||
</el-form-item>
|
||
<!-- 套餐名称、说明、租赁单位等字段省略，假设这些部分不需要修改 -->
|
||
<el-form-item label="租赁单位" prop="rentalUnit">
|
||
<el-radio-group v-model="form.rentalUnit" @change="handleUnitChange">
|
||
<el-radio label="minutes">按分钟</el-radio>
|
||
<el-radio label="hours">按小时</el-radio>
|
||
<!-- <el-radio label="day">按天</el-radio>-->
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<!-- 计费周期和封顶金额，只在非按天计费时显示 -->
|
||
|
||
<!-- 骑行计费规则选择 -->
|
||
<el-form-item label="骑行计费规则" prop="ridingRule">
|
||
<el-radio-group v-model="form.ridingRule" @change="handleBillingRuleChange">
|
||
<el-radio label="1">起步价计费</el-radio>
|
||
<el-radio label="2">区间计费</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<!-- 起步价计费选项 -->
|
||
<div v-if="form.ridingRule == '1'">
|
||
<el-form-item label="起步价">
|
||
<el-row :gutter="10">
|
||
<el-col :span="4">
|
||
<el-input v-model="startingPrice" placeholder="请输入起步价" />
|
||
</el-col>
|
||
<el-col :span="2" style="line-height: 32px;">
|
||
元（含
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item>
|
||
<el-input v-model="startingTime" placeholder="请输入起步时间" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="2" style="line-height: 32px;">
|
||
{{ timeUnit }})
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-form-item label="超出价">
|
||
<el-row :gutter="10">
|
||
<el-col :span="4">
|
||
<el-input v-model="timeoutPrice" placeholder="请输入超出价格" />
|
||
</el-col>
|
||
<el-col :span="2" style="line-height: 32px;">
|
||
元/
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item>
|
||
<el-input v-model="timeoutTime" placeholder="请输入超出时间" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4" style="line-height: 32px;">
|
||
{{ timeUnit }}（超出起步价后）
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<div>
|
||
注：
|
||
<br />1) 不是起步时间的仍按起步时间收取费用；超出起步时间后的均匀计算。
|
||
<br />2) 为避免免费用户使用，切勿频繁切换。
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
<!-- 区间计费选项 -->
|
||
<div v-if="form.ridingRule == '2'">
|
||
<el-form-item label="启用区间">
|
||
<!-- <el-switch v-model="form.enablelnterval" @change="toggleInterval" /> -->
|
||
</el-form-item>
|
||
<div>
|
||
<div v-for="(interval, index) in rule" :key="index" class="interval-group"
|
||
style="display: flex;flex-wrap: wrap;">
|
||
<el-form-item>
|
||
<el-row :gutter="10">
|
||
<div style="display: flex;flex-wrap: nowrap;">
|
||
<el-col :span="1">
|
||
<span>在</span>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<el-input v-model="interval.start" :placeholder="'请输入'" :disabled="true"/>
|
||
</el-col>
|
||
<el-col :span="0.5" style="line-height: 32px;">
|
||
~
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<el-input
|
||
v-model="interval.end"
|
||
:placeholder="'请输入'"
|
||
@input="handleIntervalEndChange(index)"
|
||
/>
|
||
</el-col>
|
||
<el-col :span="2.5" style="line-height: 32px;">
|
||
{{ timeUnit }} 之间，
|
||
</el-col>
|
||
<el-col :span="3" v-if="!form.enablelnterval">
|
||
每<el-input v-model="interval.eachUnit" placeholder="请输入" />
|
||
</el-col>
|
||
<el-col :span="2" style="line-height: 32px;">
|
||
<span v-if="!form.enablelnterval">{{ timeUnit }}</span> 收费
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-input v-model="interval.fee" placeholder="请输入" />
|
||
</el-col>
|
||
<el-col :span="1" style="line-height: 32px;">
|
||
元
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<el-button type="danger" icon="el-icon-delete" @click="removeInterval(index)">删除</el-button>
|
||
</el-col>
|
||
</div>
|
||
</el-row>
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item>
|
||
<el-row :gutter="10">
|
||
<el-col :span="1">
|
||
<span>大于</span>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<el-input placeholder="请输入" v-model="more.start" disabled/>
|
||
</el-col>
|
||
<el-col :span="3" style="line-height: 32px;">
|
||
{{ timeUnit }} 之后，每
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-input placeholder="请输入" v-model="more.eachUnit" />
|
||
</el-col>
|
||
<el-col :span="2" style="line-height: 32px;">
|
||
{{ timeUnit }} 收费
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<el-input placeholder="请输入" v-model="more.fee" />
|
||
</el-col>
|
||
<el-col :span="1" style="line-height: 32px;">
|
||
元
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-plus" @click="addInterval">添加区间</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<div style="color: red;">
|
||
注：
|
||
|
||
<br />1) 不是单位时间的仍按单位时间收取费用；超出起步时间后的均匀计算。
|
||
<br />2) 为避免免费用户使用，切勿频繁切换。
|
||
<br />3) 请注意第一个时间应该为0，时间区间要连贯 不能出现有时间跨度的场景 如 1-20 每30分钟收费10元 大于50分钟之后，每分钟10分钟收费30元这种情况，否则无法计算！！！！
|
||
</div>
|
||
</el-form-item>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<el-form-item v-if="form.rentalUnit != 'day'" label="计费周期" prop="chargingCycle">
|
||
<el-radio-group v-model="form.chargingCycle">
|
||
<el-radio label="1">
|
||
订单生成后
|
||
<el-input v-model="time1"
|
||
style="width: 80px; display: inline-block; margin-left: 10px;" />
|
||
小时
|
||
</el-radio>
|
||
<el-radio label="2">
|
||
自定义时刻
|
||
<el-time-picker v-model="time2" value-format="HH:mm:ss" placeholder="选择时间" style="margin-left: 10px;" />
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item v-if="form.rentalUnit != 'day'">
|
||
<div>
|
||
|
||
<br />1) 若计费周期为订单生成后X小时，每达到X小时，订单按规则重新计费，各周期内金额总和为订单总费用；
|
||
<br />2) 若计费周期为自定义时刻，每当达到该时刻，订单按规则重新计费，各周期内金额总和为订单总费用
|
||
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item v-if="form.rentalUnit != 'day'" label="封顶金额" prop="cappedAmount">
|
||
<el-col :span="4">
|
||
<el-input v-model="form.cappedAmount" placeholder="请输入封顶金额" />
|
||
</el-col>
|
||
|
||
</el-form-item>
|
||
<el-form-item v-if="form.rentalUnit != 'day'">
|
||
<div>
|
||
注：在单个计费周期内，达到封顶金额后，则订单费用不再增加；超过计费周期后，在新的周期内重新计费，订单总费用继续增加
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listFee, getFee, delFee, addFee, updateFee } from "@/api/system/fee";
|
||
import { listArea, selectAreaListByDeptId } from '@/api/system/area'
|
||
import { listDept2} from '@/api/system/dept'
|
||
|
||
export default {
|
||
name: "Fee",
|
||
dicts: ['sys_normal_disable'],
|
||
watch: {
|
||
'form.deptId': function(deptId) {
|
||
this.getAreaListByDeptId(deptId);
|
||
},
|
||
// 'rule': {
|
||
// handler(newVal) {
|
||
// newVal.forEach((interval, index) => {
|
||
// // 跳过第一条，从第二条开始更新
|
||
// if (index > 0) {
|
||
// interval.start = newVal[index - 1].end || ''; // 动态更新 start
|
||
// }
|
||
// });
|
||
|
||
// // 更新 more.start 的值为新数组最后一条的 end 值
|
||
// if (newVal.length > 0) {
|
||
// this.more.start = newVal[newVal.length - 1].end || ''; // 设置 more.start
|
||
// }
|
||
// },
|
||
// deep: true, // 深度监听
|
||
// immediate: true // 初始化立即执行
|
||
// }
|
||
},
|
||
props: {
|
||
// 用户id
|
||
deptId: {
|
||
type: Number,
|
||
default: null,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
userName: undefined,
|
||
loading: true,
|
||
ids: [],
|
||
returnVerify: '0',
|
||
single: true,
|
||
// 运营区下拉框
|
||
areaOptions: [],
|
||
deptOptions: [],
|
||
multiple: true,
|
||
showSearch: true,
|
||
total: 0,
|
||
feeList: [],
|
||
title: "",
|
||
open: false,
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
deptId:this.deptId,
|
||
name: null,
|
||
status: null,
|
||
},
|
||
//不分页
|
||
queryParams2: {
|
||
pageNum: 1,
|
||
pageSize: 999
|
||
},
|
||
time1:'24',
|
||
time2:'',
|
||
form: {
|
||
name: '',
|
||
instructions: '按小时计费',
|
||
status: "正常",
|
||
autoRefundDeposit: '0',
|
||
orderExceedMinutes: '',
|
||
orderExceedWarn: '',
|
||
freeRideTime: '5',
|
||
rentalUnit: 'minutes',
|
||
ridingRule: '1',
|
||
chargingCycle: '1',
|
||
chargingCycleValue: '24',
|
||
cappedAmount: '200',
|
||
rule: [{ start: '', end: '', eachUnit: '', fee: '' }],
|
||
timeoutTime: '',
|
||
startingTime: ''
|
||
// chargingCycle: 1, // 默认选择第一个选项
|
||
// chargingCycleValue: '', // 对应的值
|
||
},
|
||
timeoutTime: '1',
|
||
startingPrice: '5',
|
||
startingTime: '1',
|
||
timeoutPrice: '5',
|
||
enablelnterval: false,
|
||
rule: [{ start: '0', end: '', eachUnit: '', fee: '' }],
|
||
more: { start: '', end: '9999', eachUnit: '', fee: '' },
|
||
timeUnit: '分钟',
|
||
rules: {
|
||
name: [
|
||
{ required: true, message: '请输入套餐名称', trigger: 'blur' },
|
||
],
|
||
instructions: [
|
||
{ required: true, message: '请输入说明', trigger: 'blur' },
|
||
],
|
||
status: [
|
||
{ required: true, message: '请选择状态', trigger: 'change' },
|
||
],
|
||
autoRefundDeposit: [
|
||
{ required: true, message: '请输入还车结算时间', trigger: 'blur' },
|
||
],
|
||
orderExceedMinutes: [
|
||
{ required: true, message: '请输入订单超过时间', trigger: 'blur' },
|
||
],
|
||
orderExceedWarn: [
|
||
{ required: true, message: '请输入订单提醒时间', trigger: 'blur' },
|
||
],
|
||
freeRideTime: [
|
||
{ required: true, message: '请输入免费骑行时间', trigger: 'blur' },
|
||
],
|
||
rentalUnit: [
|
||
{ required: true, message: '请选择租赁单位', trigger: 'change' },
|
||
],
|
||
chargingCycle: [
|
||
{ required: true, message: '请选择计费周期', trigger: 'change' },
|
||
],
|
||
cappedAmount: [
|
||
{ required: true, message: '请输入封顶金额', trigger: 'blur' },
|
||
],
|
||
ridingRule: [
|
||
{ required: true, message: '请选择骑行计费规则', trigger: 'change' },
|
||
],
|
||
hourlyFee: [
|
||
{ required: true, message: '请输入每小时收费', trigger: 'blur' },
|
||
],
|
||
perKmFee: [
|
||
{ required: true, message: '请输入每公里收费', trigger: 'blur' },
|
||
],
|
||
sectionCharges: [
|
||
{ required: true, message: '请输入区间收费', trigger: 'blur' },
|
||
],
|
||
deptId: [
|
||
{ required: true, message: '请选择代理商', trigger: 'change' },
|
||
]
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
console.log("当前用户信息：",this.$store.state.user.name)
|
||
this.userName = this.$store.state.user.name;
|
||
this.getList();
|
||
if(this.userName === 'admin'){
|
||
listDept2({status: '0',pageNum:1,pageSize:999 }).then(response => {
|
||
this.deptOptions = response.rows;
|
||
});
|
||
}
|
||
listArea(this.queryParams2).then(response => {
|
||
this.areaOptions = response.rows;
|
||
});
|
||
},
|
||
methods: {
|
||
appUserNameFormatter(value){
|
||
return value ? value.split(',').join('<br>') : '';
|
||
},
|
||
getAreaListByDeptId(deptId){
|
||
console.log('---------------deptId:', deptId)
|
||
if(deptId){
|
||
selectAreaListByDeptId(deptId).then(response => {
|
||
console.log("根据代理商id，获取运营区和型号=========",response.data)
|
||
this.areaOptions = response.data.areaList;
|
||
let areaOptions = response.data.areaList;
|
||
if(this.form.areaId != null){
|
||
areaOptions.length > 0 ? this.form.areaId = areaOptions[0].areaId : this.form.areaId = null;
|
||
}
|
||
});
|
||
}else{
|
||
listArea(this.queryParams2).then(response => {
|
||
this.areaOptions = response.rows;
|
||
});
|
||
}
|
||
},
|
||
handleUnitChange() {
|
||
if (this.form.rentalUnit == 'minutes') {
|
||
this.timeUnit = '分钟';
|
||
} else if (this.form.rentalUnit == 'hours') {
|
||
this.timeUnit = '小时';
|
||
} else if (this.form.rentalUnit == 'day') {
|
||
this.timeUnit = '天';
|
||
// 如果需要的话，你可以取消注释下面的代码，以处理特定于“天”的逻辑
|
||
// this.form.intervals = [];
|
||
}
|
||
},
|
||
handleBillingRuleChange() {
|
||
if (this.form.ridingRule === '2' && this.rule.length === 0) {
|
||
this.addInterval();
|
||
}
|
||
},
|
||
validateMore() {
|
||
if(this.form.ridingRule == 2) {
|
||
const { start, end, eachUnit, fee } = this.more;
|
||
// 检查开始和结束值是否为空
|
||
if (start === '' || end === '') {
|
||
this.$modal.msgError('区间计费：大于分钟数不能为空');
|
||
return false;
|
||
}
|
||
|
||
// 检查分钟数和金额是否为空
|
||
if (eachUnit === '') {
|
||
this.$modal.msgError('区间计费：大于每分钟数不能为空');
|
||
return false;
|
||
}
|
||
|
||
if (fee === '') {
|
||
this.$modal.msgError('区间计费：大于分钟之后的金额不能为空');
|
||
return false;
|
||
}
|
||
|
||
// 检查开始和结束值是否为数值
|
||
if (isNaN(Number(start)) || isNaN(Number(end))) {
|
||
this.$modal.msgError('区间计费：大于分钟数必须是数值');
|
||
return false;
|
||
}
|
||
|
||
// 检查分钟数和金额是否为数值
|
||
if (isNaN(Number(eachUnit))) {
|
||
this.$modal.msgError('区间计费：大于每分钟数必须是数值');
|
||
return false;
|
||
}
|
||
|
||
if (isNaN(Number(fee))) {
|
||
this.$modal.msgError('区间计费：大于分钟之后的金额必须是数值');
|
||
return false;
|
||
}
|
||
return true; // 校验通过
|
||
}
|
||
return true;
|
||
},
|
||
validateRules() {
|
||
if(this.form.ridingRule == 2 && this.rule.length > 0){
|
||
for (let i = 0; i < this.rule.length; i++) {
|
||
const { start, end, eachUnit, fee } = this.rule[i];
|
||
if (start === '' || end === '') {
|
||
this.$modal.msgError(`区间计费：第 ${i + 1} 区间的开始或结束值不能为空`);
|
||
return false;
|
||
}
|
||
|
||
if (eachUnit === '') {
|
||
this.$modal.msgError(`区间计费：第 ${i + 1} 区间的分钟数不能为空`);
|
||
return false;
|
||
}
|
||
|
||
if (fee === '') {
|
||
this.$modal.msgError(`区间计费：第 ${i + 1} 区间的金额不能为空`);
|
||
return false;
|
||
}
|
||
|
||
// 检查开始和结束值是否为数值
|
||
if (isNaN(Number(start)) || isNaN(Number(end))) {
|
||
this.$modal.msgError(`区间计费：第 ${i + 1} 区间的开始和结束值必须是数值`);
|
||
return false;
|
||
}
|
||
|
||
if (isNaN(Number(eachUnit))) {
|
||
this.$modal.msgError(`区间计费：第 ${i + 1} 区间的分钟数必须是数值`);
|
||
return false;
|
||
}
|
||
|
||
if (isNaN(Number(fee))) {
|
||
this.$modal.msgError(`区间计费：第 ${i + 1} 区间的金额必须是数值`);
|
||
return false;
|
||
}
|
||
|
||
if (parseFloat(start) >= parseFloat(end)) {
|
||
this.$modal.msgError(`区间计费：第 ${i + 1} 区间的结束值必须小于开始值`);
|
||
return false;
|
||
}
|
||
}
|
||
return true; // 校验通过
|
||
}else {
|
||
return true; // 校验通过
|
||
}
|
||
},
|
||
addInterval() {
|
||
// this.rule.push({ start: '', end: '', eachUnit: '', fee: '' });
|
||
const lastInterval = this.rule[this.rule.length - 1];
|
||
const newInterval = { start: '', end: '', eachUnit: '', fee: '' };
|
||
|
||
// 如果存在上一条规则，则将新规则的 start 设置为上一条的 end
|
||
if (lastInterval && lastInterval.end) {
|
||
newInterval.start = lastInterval.end;
|
||
}else{
|
||
this.$modal.msgError('请先设置上一条规则的结束值');
|
||
return;
|
||
}
|
||
|
||
this.rule.push(newInterval);
|
||
},
|
||
removeInterval(index) {
|
||
this.rule.splice(index, 1);
|
||
},
|
||
getList() {
|
||
this.loading = true;
|
||
listFee(this.queryParams).then(response => {
|
||
this.feeList = response.rows;
|
||
this.total = response.total;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
reset() {
|
||
this.form = {
|
||
name: '',
|
||
instructions: '按小时计费',
|
||
status: "正常",
|
||
autoRefundDeposit: '0',
|
||
orderExceedMinutes: '',
|
||
orderExceedWarn: '',
|
||
freeRideTime: '5',
|
||
rentalUnit: 'minutes',
|
||
ridingRule: '1',
|
||
chargingCycle: '1',
|
||
chargingCycleValue: '24',
|
||
cappedAmount: '200',
|
||
areaId: null
|
||
}
|
||
this.enablelnterval = false,
|
||
this.more = { start: '', end: '9999', eachUnit: '', fee: '' }
|
||
this.rule = [{ start: '0', end: '', eachUnit: '', fee: '' }],
|
||
this.timeoutTime = '60',
|
||
this.startingPrice = '5',
|
||
this.startingTime = '60',
|
||
this.timeoutPrice = '5',
|
||
this.resetForm("form")
|
||
},
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.handleQuery();
|
||
},
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.ruleId);
|
||
this.single = selection.length !== 1;
|
||
this.multiple = !selection.length;
|
||
},
|
||
handleAdd() {
|
||
this.reset();
|
||
this.open = true;
|
||
this.title = "添加收费方式";
|
||
if(this.deptId){
|
||
this.form.deptId=this.deptId
|
||
}
|
||
},
|
||
handleUpdate(row) {
|
||
this.reset();
|
||
const ruleId = row.ruleId || this.ids;
|
||
getFee(ruleId).then(response => {
|
||
this.form = response.data;
|
||
if(this.form.rentalUnit=='minutes'){
|
||
this.timeUnit='分钟'
|
||
}else if(this.form.rentalUnit=='hours'){
|
||
this.timeUnit='小时'
|
||
}else if(this.form.rentalUnit=='day'){
|
||
this.timeUnit='天'
|
||
}
|
||
if(this.form.area){
|
||
this.returnVerify = this.form.area.returnVerify;
|
||
}
|
||
// console.log("-------returnVerify------",this.returnVerify)
|
||
// delete this.form.ridingRuleJson;
|
||
let json = JSON.parse(response.data.ridingRuleJson)
|
||
if (this.form.ridingRule == 1) {
|
||
this.timeoutTime = json.timeoutTime
|
||
this.startingPrice = json.startingPrice
|
||
this.startingTime = json.startingTime
|
||
this.timeoutPrice = json.timeoutPrice
|
||
} else {
|
||
this.rule = json.rule.slice(0, -1);
|
||
|
||
// 获取数组的最后一个元素
|
||
this.more = json.rule[json.rule.length - 1];
|
||
}
|
||
if(this.form.chargingCycle==1){
|
||
this.time1=this.form.chargingCycleValue
|
||
}else if(this.form.chargingCycle==2){
|
||
// this.data.chargingCycleValue=time2
|
||
this.time2=this.form.chargingCycleValue
|
||
}
|
||
console.log(this.form,'this.formthis.form');
|
||
this.open = true;
|
||
this.title = "修改收费方式";
|
||
});
|
||
},
|
||
handleIntervalEndChange(index) {
|
||
// 更新下一个区间的开始值
|
||
if (index < this.rule.length - 1) {
|
||
this.rule[index + 1].start = this.rule[index].end;
|
||
}
|
||
// 更新 more.start 的值
|
||
if (index === this.rule.length - 1) {
|
||
this.more.start = this.rule[index].end;
|
||
}
|
||
},
|
||
submitForm() {
|
||
if(!this.validateRules()){
|
||
return
|
||
}
|
||
if (!this.validateMore()) {
|
||
return; // 校验未通过，阻止提交
|
||
}
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
// 如何不是整数，弹窗提示
|
||
if (!/^\d+$/.test(this.startingTime)) {
|
||
this.$modal.msgError('起步时间必须为正整数');
|
||
return;
|
||
}
|
||
if (!/^\d+$/.test(this.timeoutTime)) {
|
||
this.$modal.msgError('超时时间必须为正整数');
|
||
return;
|
||
}
|
||
// this.form.rule.push(this.more)
|
||
console.log(JSON.stringify(this.form),'mmmmmmmmmmmmm');
|
||
let data = { ...this.form }; // 使用对象扩展运算符确保复制一个新对象，避免直接修改 this.form
|
||
|
||
|
||
this.rule.push(this.more)
|
||
|
||
data.ridingRuleJson = {}
|
||
if (this.form.ridingRule == 2) {
|
||
data.ridingRuleJson.rule = this.rule
|
||
data.ridingRuleJson.enablelnterval = this.enablelnterval
|
||
|
||
} else {
|
||
data.ridingRuleJson.timeoutTime = this.timeoutTime
|
||
data.ridingRuleJson.startingPrice = this.startingPrice
|
||
data.ridingRuleJson.startingTime = this.startingTime
|
||
data.ridingRuleJson.timeoutPrice = this.timeoutPrice
|
||
|
||
}
|
||
data.ridingRuleJson = JSON.stringify(data.ridingRuleJson);
|
||
if(this.form.chargingCycle==1){
|
||
data.chargingCycleValue=this.time1
|
||
}else if(this.form.chargingCycle==2){
|
||
if(!this.time2){
|
||
this.$modal.msgError('自定义时刻不能为空');
|
||
return;
|
||
}
|
||
data.chargingCycleValue=this.time2
|
||
}
|
||
// console.log(data, 'mmmmmmmmmmmmm');
|
||
if (this.form.ruleId != null) {
|
||
updateFee(data).then(() => {
|
||
this.$message.success("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
this.reset()
|
||
});
|
||
} else {
|
||
addFee(data).then(() => {
|
||
this.$message.success("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
this.reset()
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
handleDelete(row) {
|
||
const ruleIds = row.ruleId || this.ids;
|
||
this.$confirm('删除计费规则会导致正在骑行中的订单计费错乱，是否确认删除计费规则为"' + ruleIds + '"的记录？')
|
||
.then(() => {
|
||
return delFee(ruleIds);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$message.success("删除成功");
|
||
}).catch(() => { });
|
||
},
|
||
handleExport() {
|
||
this.download('system/fee/export', {
|
||
...this.queryParams
|
||
}, `fee_${new Date().getTime()}.xlsx`);
|
||
},
|
||
resetForm(formName) {
|
||
this.$refs[formName] && this.$refs[formName].resetFields();
|
||
},
|
||
toggleInterval() {
|
||
if (!this.form.enablelnterval) {
|
||
|
||
this.more = { start: '', end: '9999', eachUnit: '', fee: '' }
|
||
this.enablelnterval = false
|
||
|
||
this.rule = [{ start: '', end: '', eachUnit: '', fee: '' }]
|
||
this.timeoutTime = ''
|
||
this.startingPrice = ''
|
||
this.startingTime = ''
|
||
this.timeoutPrice = ''
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.interval-group {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-row {
|
||
align-items: center;
|
||
}
|
||
|
||
.el-col {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|