1073 lines
35 KiB
Vue
1073 lines
35 KiB
Vue
<template>
|
||
<div class="page">
|
||
<div
|
||
class="tit"
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-right: 30px;
|
||
align-items: center;
|
||
"
|
||
>
|
||
{{ title }}
|
||
<el-button
|
||
type="primary"
|
||
@click="submitForm"
|
||
size="medium"
|
||
style="margin-left: auto"
|
||
>保存</el-button
|
||
>
|
||
</div>
|
||
<div class="pagecont">
|
||
<div class="left_box">
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="90px">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="代理商"
|
||
prop="deptId"
|
||
v-if="userName == 'admin'"
|
||
data-tip="这是代理商选择框"
|
||
>
|
||
<treeselect
|
||
v-model="form.deptId"
|
||
:options="deptOptions"
|
||
:show-count="true"
|
||
placeholder="请选择代理商"
|
||
/>
|
||
</el-form-item>
|
||
<!-- <div class="text" style="color:red;">该代理商没设置收费方式，将无法保存数据，请返回运营管理设置收费方式</div> -->
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="运营区"
|
||
prop="areaName"
|
||
data-tip="这是运营区输入框"
|
||
>
|
||
<el-input v-model="form.areaName" placeholder="请输入运营区" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="运营个性化图片"
|
||
prop="picture"
|
||
label-width="140"
|
||
data-tip="这是运营个性化图片上传框"
|
||
>
|
||
<div style="display: flex; flex-wrap: wrap">
|
||
<image-upload
|
||
:limit="1"
|
||
:isShowTip="false"
|
||
v-model="form.picture"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
<div class="tip">用户地图上显示的车辆图标样式</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="运营区域" data-tip="这是运营区域选择框">
|
||
<el-select
|
||
v-model="form.province"
|
||
clearable
|
||
size="small"
|
||
placeholder="请选择省"
|
||
class="filter-item"
|
||
style="width: 90px"
|
||
@change="provinceChange($event)"
|
||
>
|
||
<el-option
|
||
v-for="item in form.provinceList"
|
||
:key="item.name"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
/>
|
||
</el-select>
|
||
|
||
<el-select
|
||
v-model="form.city"
|
||
clearable
|
||
size="small"
|
||
placeholder="请选择城市"
|
||
class="filter-item"
|
||
style="width: 100px"
|
||
@change="cityChange($event)"
|
||
>
|
||
<el-option
|
||
v-for="item in form.cityList"
|
||
:key="item.name"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
/>
|
||
</el-select>
|
||
|
||
<el-select
|
||
v-model="form.county"
|
||
clearable
|
||
size="small"
|
||
placeholder="请选择区县"
|
||
class="filter-item"
|
||
style="width: 100px"
|
||
>
|
||
<el-option
|
||
v-for="item in form.countyList"
|
||
:key="item.name"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="运营时间" prop="areaTime">
|
||
<div style="display: flex; flex-wrap: wrap">
|
||
<el-select
|
||
v-model="form.areaTime"
|
||
placeholder="请选择运营时间"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in dictList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
<div class="tip">运营区外的时间用户无法解锁骑行</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-row v-if="form.areaTime == 2">
|
||
<el-col :span="18">
|
||
<el-form-item
|
||
label="自定义运营时间"
|
||
label-width="140px"
|
||
data-tip="这是自定义运营时间选择框"
|
||
>
|
||
<el-time-picker
|
||
v-model="form.areaTimeStart"
|
||
value-format="HH:mm:ss"
|
||
placeholder="开始时间"
|
||
>
|
||
</el-time-picker>
|
||
<el-time-picker
|
||
arrow-control
|
||
v-model="form.areaTimeEnd"
|
||
value-format="HH:mm:ss"
|
||
placeholder="结束时间"
|
||
>
|
||
</el-time-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="20">
|
||
<el-form-item
|
||
label="自定义客服"
|
||
prop="customService"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch v-model="form.customService" class="drawer-switch" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<div v-if="form.customService == '1'">
|
||
<el-row v-for="(service, index) in customServices" :key="index">
|
||
<el-col :span="7">
|
||
<el-form-item
|
||
:label="'自定义客服名称' + (index + 1)"
|
||
:prop="'serviceName' + index"
|
||
label-width="80"
|
||
>
|
||
<el-input
|
||
v-model="service.name"
|
||
placeholder="请输入自定义客服名称"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="7" style="margin-left: 20px">
|
||
<el-form-item
|
||
label="电话"
|
||
:prop="'servicePhone' + index"
|
||
label-width="80"
|
||
>
|
||
<el-input
|
||
v-model="service.phone"
|
||
placeholder="请输入客服电话"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4" style="margin-top: 5px; margin-left: 10px">
|
||
<el-button
|
||
type="primary"
|
||
@click="addService"
|
||
v-if="
|
||
index === customServices.length - 1 &&
|
||
customServices.length < 3
|
||
"
|
||
>添加</el-button
|
||
>
|
||
<el-button
|
||
type="danger"
|
||
@click="removeService(index)"
|
||
v-if="index > 0"
|
||
>删除</el-button
|
||
>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="实名认证"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch
|
||
v-model="form.authentication"
|
||
class="drawer-switch"
|
||
/>
|
||
</el-form-item>
|
||
<div class="tips">开启后用户骑行前必须先进行实名认证才可使用</div>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="是否开启押金抵扣"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch
|
||
v-model="form.isDepositDeduction"
|
||
class="drawer-switch"
|
||
/>
|
||
</el-form-item>
|
||
<div class="tips">
|
||
关闭:用户需对订单付费后方可退还押金，开启:押金可以直接抵扣订单金额付款
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="还车是否拍照审核"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch v-model="form.returnVerify" class="drawer-switch" />
|
||
</el-form-item>
|
||
<div class="tips">
|
||
开启后则需用户拍摄视频后审核订单方可退还押金
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="短信通知服务"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch v-model="form.msgSwitch" class="drawer-switch" />
|
||
</el-form-item>
|
||
<div class="tips">
|
||
开启短信通知，短信费用0.1元/条，从余额中扣除
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="强制停车点还车"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch v-model="form.parkingReturn" class="drawer-switch" />
|
||
</el-form-item>
|
||
<div class="tips">开启则必须在停车点才可还车，停车点存在误差</div>
|
||
</el-col>
|
||
<el-col :span="12" v-if="form.parkingReturn == false">
|
||
<el-form-item
|
||
label="运营区外还车"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch v-model="form.areaOutReturn" class="drawer-switch" />
|
||
</el-form-item>
|
||
<div class="tips">开启后可以在运营区范围外还车</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row v-if="form.parkingReturn == false">
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="停车点外还车调度"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch
|
||
v-model="form.parkingOutDispatch"
|
||
class="drawer-switch"
|
||
/>
|
||
</el-form-item>
|
||
<div class="tips">开启后在停车点外还车会收取调度费</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="运营区外还车调度"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch
|
||
v-model="form.areaOutDispatch"
|
||
class="drawer-switch"
|
||
/>
|
||
</el-form-item>
|
||
<div class="tips">开启后在运营区外还车会收取调度费</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="运营区外调度费"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-input-number
|
||
style="width: 100%"
|
||
v-model="form.dispatchFee"
|
||
placeholder="车辆超出运行区外的调度费用"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<div class="tips">设置车辆超出运营区外产生的调度费用</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="停车点外调度费"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-input-number
|
||
style="width: 100%"
|
||
v-model="form.vehicleManagementFee"
|
||
placeholder="车辆在运营区内但没在停车区产生的调度费用"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<div class="tips">设置车辆超出停车点外产生的调度费用</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="还车误差（米）"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-input-number
|
||
v-model="form.error"
|
||
placeholder="还车误差"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<div class="tips">允许用户在规划的停车点外多少米还车</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="禁行区内断电"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-switch
|
||
v-model="form.noRidingOutage"
|
||
class="drawer-switch"
|
||
/>
|
||
</el-form-item>
|
||
<div class="tips">开启后当进入禁行区内将进行断电</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="运营区域外断电"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<div style="display: flex; flex-wrap: wrap">
|
||
<el-switch
|
||
v-model="form.areaOutOutage"
|
||
class="drawer-switch"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
<div class="tips">开启后当进入运营区域外内将进行断电</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="骑行押金"
|
||
label-width="120"
|
||
class="switch-item"
|
||
prop="deposit"
|
||
>
|
||
<el-input-number
|
||
style="width: 100%"
|
||
v-model="form.deposit"
|
||
placeholder="骑行前需要充值的押金"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<div class="tips">设置骑行前需要缴纳的押金金额</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <el-form-item-->
|
||
<!-- label="收费方式"-->
|
||
<!-- label-width="120"-->
|
||
<!-- class="switch-item"-->
|
||
<!-- prop="ruleIds"-->
|
||
<!-- >-->
|
||
<!-- <el-select-->
|
||
<!-- v-model="form.ruleIds"-->
|
||
<!-- multiple-->
|
||
<!-- placeholder="请选择收费方式"-->
|
||
<!-- >-->
|
||
<!-- <el-option-->
|
||
<!-- v-for="item in ruleOptions"-->
|
||
<!-- :key="item.ruleId"-->
|
||
<!-- :label="item.name"-->
|
||
<!-- :value="item.ruleId"-->
|
||
<!-- ></el-option>-->
|
||
<!-- </el-select>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <div class="tips">-->
|
||
<!-- 选择在收费方式菜单当中设置好的收费套餐(可多选)-->
|
||
<!-- </div>-->
|
||
<!-- </el-col>-->
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="低于电量(%)不得骑行"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-input-number
|
||
style="width: 100%"
|
||
v-model="form.undercharge"
|
||
placeholder="低于电量（%）不得骑行"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<div class="tips">当车辆电量低于多少时无法解锁用车</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="最大预约时间(分)"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-input-number
|
||
style="width: 100%"
|
||
v-model="form.timeoutMinutes"
|
||
placeholder="车辆可最长预约多少分钟"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<div class="tips">设置车辆的最大可以预约时间</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
label="预约服务费（元）"
|
||
label-width="120"
|
||
class="switch-item"
|
||
>
|
||
<el-input-number
|
||
style="width: 100%"
|
||
v-model="form.appointmentServiceFee"
|
||
placeholder="预约时每十分钟的计费"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<div class="tips">设置车辆预约时每十分钟产生的费用</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="15">
|
||
<el-form-item
|
||
label="电量低于多少值自动生成换电订单"
|
||
label-width="120"
|
||
class="switch-item"
|
||
prop="autoReplacementOrder"
|
||
>
|
||
<el-input-number
|
||
style="width: 50%"
|
||
v-model="form.autoReplacementOrder"
|
||
placeholder="电量低于多少值自动生成换电订单"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<div class="tips">
|
||
设置车辆电量低于多少时自动生成的换电维护工单
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
<div class="right_box">
|
||
<div class="right_tit">弹窗公告</div>
|
||
<editor v-model="form.agreement" :min-height="192" />
|
||
<div class="right_tit">电子围栏设置</div>
|
||
<area-map
|
||
:key="key"
|
||
v-model="form.boundaryStr"
|
||
:dataId="form.areaId"
|
||
:pathList="form.boundaryStr"
|
||
:lon="form.longitude"
|
||
:lat="form.latitude"
|
||
@center="center"
|
||
@mapList="mapList"
|
||
/>
|
||
<div class="right_tit">运营区经纬度</div>
|
||
<el-row>
|
||
<el-col :span="11">
|
||
<el-input
|
||
v-model="form.longitude"
|
||
placeholder="请输入经度"
|
||
disabled
|
||
/>
|
||
</el-col>
|
||
<el-col :span="11" style="margin-left: 20px">
|
||
<el-input
|
||
v-model="form.latitude"
|
||
placeholder="请输入纬度"
|
||
disabled
|
||
/>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import {
|
||
listArea,
|
||
getArea,
|
||
delArea,
|
||
addArea,
|
||
updateArea,
|
||
updateArea2,
|
||
} from "@/api/system/area";
|
||
import AreaMap from "@/components/AreaMap";
|
||
import { listFee } from "@/api/system/fee";
|
||
import Treeselect from "@riophae/vue-treeselect";
|
||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
import { getDistrictList } from "@/api/common/common";
|
||
import { deptTreeSelect } from "@/api/system/user";
|
||
|
||
export default {
|
||
components: { AreaMap, Treeselect },
|
||
dicts: [
|
||
"et_operating_area_status",
|
||
"et_operating_area_time",
|
||
"et_business_switch",
|
||
],
|
||
data() {
|
||
return {
|
||
dictList: null,
|
||
loading: true,
|
||
ids: [],
|
||
single: true,
|
||
multiple: true,
|
||
showSearch: true,
|
||
total: 0,
|
||
dateRange: [],
|
||
customService: false,
|
||
ruleOptions: [],
|
||
provinceList: [],
|
||
cityList: [],
|
||
countyList: [],
|
||
CITY: [],
|
||
XIAN: [],
|
||
areaList: [],
|
||
userName: null,
|
||
deptOptions: undefined,
|
||
title: "新增运营区",
|
||
open: false,
|
||
mapopen: false,
|
||
key: 0,
|
||
customServices: [{ name: "", phone: "" }],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
areaName: null,
|
||
},
|
||
form: {
|
||
status: "1",
|
||
province: "",
|
||
city: "",
|
||
county: "",
|
||
provinceList: [],
|
||
cityList: [],
|
||
countyList: [],
|
||
},
|
||
rules: {
|
||
areaName: [
|
||
{ required: true, message: "运营区域不能为空", trigger: "blur" },
|
||
],
|
||
autoReplacementOrder: [
|
||
{ required: true, message: "最低电量不能为空", trigger: "blur" },
|
||
],
|
||
deptId: [
|
||
{ required: true, message: "代理商不能为空", trigger: "blur" },
|
||
],
|
||
// ruleIds: [{ required: true, message: "收费方式不能为空", trigger: "blur" }],
|
||
deposit: [
|
||
{ required: true, message: "骑行押金不能为空", trigger: "blur" },
|
||
],
|
||
},
|
||
};
|
||
},
|
||
watch: {
|
||
'form.deptId'(newValue, oldValue) {
|
||
console.log('代理商ID变化了:', newValue);
|
||
// this.changedept()
|
||
// 在这里执行值变化后的逻辑
|
||
}
|
||
},
|
||
|
||
created() {
|
||
const areaId = this.$route.params && this.$route.params.areaId;
|
||
if (areaId) {
|
||
this.getArea(areaId);
|
||
} else {
|
||
this.reset();
|
||
}
|
||
this.getCityList();
|
||
this.userName = this.$store.state.user.name;
|
||
this.getDeptTree();
|
||
|
||
this.dictList = this.dict.type.et_operating_area_time;
|
||
console.log(this.dictList, "dictdict");
|
||
},
|
||
methods: {
|
||
// changedept() {
|
||
// console.log("111");
|
||
// listFee({ deptId: this.form.deptId }).then((response) => {
|
||
// this.ruleOptions = response.rows;
|
||
// });
|
||
// },
|
||
reset() {
|
||
this.form = {
|
||
areaTime: "1",
|
||
areaId: null,
|
||
areaName: null,
|
||
boundaryStr: null,
|
||
longitude: null,
|
||
latitude: null,
|
||
// parkingPoint: null,
|
||
agreement:
|
||
'<p><strong style=\\"color: rgb(68, 68, 68);\\">亲爱的用户，为了确保您的骑行安全，</strong></p><p><strong style=\\"color: rgb(68, 68, 68);\\">请务必遵守以下骑行提示： </strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">仅限16岁及以上用户使用。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">为确保安全，后座不允许载人。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请务必佩戴安全头盔，保护自身安全。 </span></p><p><span style=\\"color: rgb(136, 136, 136);\\">注意道路状况，避开坑洼，小心骑行。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请在规定的地点还车，避免随意停放。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">不逆行、不闯红灯，遵守所有交通法规。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">骑行时不要使用手机，保持注意力集中。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">避免急刹车和急转弯，保持适当的车速。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">夜间骑行时，确保车灯和反光标识正常。</span></p><p><br></p><p><strong style=\\"color: rgb(68, 68, 68);\\">紧急情况处理：</strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">如有紧急情况，请及时拨打客服电话。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">感谢您的理解与配合，祝您骑行愉快。</span></p>',
|
||
createBy: null,
|
||
createTime: null,
|
||
status: "1",
|
||
deptId: null,
|
||
contact: null,
|
||
phone: null,
|
||
autoReplacementOrder: 10,
|
||
remark: null,
|
||
province: null,
|
||
city: null,
|
||
county: null,
|
||
provinceList: [],
|
||
cityList: [],
|
||
countyList: [],
|
||
ruleIds: [],
|
||
areaOutOutage: true,
|
||
parkingOutDispatch: true,
|
||
areaOutDispatch: true,
|
||
noRidingOutage: true,
|
||
authentication: true,
|
||
msgSwitch: false,
|
||
parkingReturn: true,
|
||
areaOutReturn: true,
|
||
isDepositDeduction: true,
|
||
returnVerify: false,
|
||
deposit: 200,
|
||
customService: true,
|
||
undercharge: 10,
|
||
dispatchFee: 10,
|
||
vehicleManagementFee: 10,
|
||
error: 5,
|
||
timeoutMinutes: 30,
|
||
appointmentServiceFee: 2,
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
submitForm() {
|
||
this.$refs["form"].validate((valid) => {
|
||
if (valid) {
|
||
const { cityList, countyList, provinceList, ...rest } = this.form;
|
||
|
||
// 将 rest 对象中的属性赋值给 data
|
||
let data = { ...rest };
|
||
console.log("this.form=================", data);
|
||
data.customService = data.customService ? "1" : "0";
|
||
data.areaOutOutage = data.areaOutOutage ? "1" : "0";
|
||
data.parkingOutDispatch = data.parkingOutDispatch ? "1" : "0";
|
||
data.areaOutDispatch = data.areaOutDispatch ? "1" : "0";
|
||
data.noRidingOutage = data.noRidingOutage ? "1" : "0";
|
||
data.authentication = data.authentication ? "1" : "0";
|
||
data.msgSwitch = data.msgSwitch ? "1" : "0";
|
||
data.parkingReturn = data.parkingReturn ? "1" : "0";
|
||
data.areaOutReturn = data.areaOutReturn ? "1" : "0";
|
||
data.isDepositDeduction = data.isDepositDeduction ? "1" : "0";
|
||
data.returnVerify = data.returnVerify ? "1" : "0";
|
||
if (data.isDepositDeduction === "1" && data.returnVerify === "1") {
|
||
this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
|
||
return;
|
||
}
|
||
this.customServices.forEach((service, index) => {
|
||
data[`serviceName${index + 1}`] = service.name;
|
||
data[`servicePhone${index + 1}`] = service.phone;
|
||
});
|
||
if (data.isDepositDeduction === "1" && data.returnVerify === "1") {
|
||
this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
|
||
return;
|
||
}
|
||
if (data.serviceName1 == "" && data.servicePhone1 == "") {
|
||
this.$modal.msgError("最少添加一个客服电话");
|
||
return;
|
||
}
|
||
if (this.form.areaId != null) {
|
||
updateArea2({
|
||
areaId: this.form.areaId,
|
||
boundary: this.form.boundary,
|
||
boundaryStr: this.form.boundaryStr,
|
||
}).then((response) => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.mapopen = false;
|
||
this.getList();
|
||
});
|
||
} else {
|
||
addArea(data).then((response) => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
|
||
this.getList();
|
||
});
|
||
}
|
||
// console.log(data, 'data without cityList, countyList, provinceList');
|
||
// console.log(this.form,'formformformformform');
|
||
if (this.form.areaId != null) {
|
||
updateArea(data).then((response) => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.mapopen = false;
|
||
this.getList();
|
||
});
|
||
} else {
|
||
addArea(data).then((response) => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
|
||
this.getList();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
submitForm2() {
|
||
this.$refs["form"].validate((valid) => {
|
||
if (valid) {
|
||
}
|
||
});
|
||
},
|
||
addService() {
|
||
if (this.customServices.length < 3) {
|
||
this.customServices.push({ name: "", phone: "" });
|
||
}
|
||
},
|
||
removeService(index) {
|
||
if (index > 0 && this.customServices.length > 1) {
|
||
this.$delete(this.customServices, index);
|
||
this.$set(this.form, `serviceName${index + 1}`, "");
|
||
this.$set(this.form, `servicePhone${index + 1}`, "");
|
||
}
|
||
},
|
||
getArea(areaId) {
|
||
getArea(areaId).then((response) => {
|
||
this.form = response.data;
|
||
this.form.ruleIds = response.ruleIds;
|
||
response.data.customService == "1"
|
||
? (this.form.customService = true)
|
||
: (this.form.customService = false);
|
||
response.data.areaOutOutage == "1"
|
||
? (this.form.areaOutOutage = true)
|
||
: (this.form.areaOutOutage = false);
|
||
response.data.parkingOutDispatch == "1"
|
||
? (this.form.parkingOutDispatch = true)
|
||
: (this.form.parkingOutDispatch = false);
|
||
response.data.areaOutDispatch == "1"
|
||
? (this.form.areaOutDispatch = true)
|
||
: (this.form.areaOutDispatch = false);
|
||
response.data.noRidingOutage == "1"
|
||
? (this.form.noRidingOutage = true)
|
||
: (this.form.noRidingOutage = false);
|
||
response.data.authentication == "1"
|
||
? (this.form.authentication = true)
|
||
: (this.form.authentication = false);
|
||
response.data.msgSwitch == "1"
|
||
? (this.form.msgSwitch = true)
|
||
: (this.form.msgSwitch = false);
|
||
response.data.parkingReturn == "1"
|
||
? (this.form.parkingReturn = true)
|
||
: (this.form.parkingReturn = false);
|
||
response.data.areaOutReturn == "1"
|
||
? (this.form.areaOutReturn = true)
|
||
: (this.form.areaOutReturn = false);
|
||
response.data.isDepositDeduction == "1"
|
||
? (this.form.isDepositDeduction = true)
|
||
: (this.form.isDepositDeduction = false);
|
||
response.data.returnVerify == "1"
|
||
? (this.form.returnVerify = true)
|
||
: (this.form.returnVerify = false);
|
||
|
||
// 初始化 customServices 数组
|
||
this.customServices = [];
|
||
for (let i = 1; i <= 3; i++) {
|
||
if (
|
||
response.data[`serviceName${i}`] ||
|
||
response.data[`servicePhone${i}`]
|
||
) {
|
||
this.customServices.push({
|
||
name: response.data[`serviceName${i}`] || "",
|
||
phone: response.data[`servicePhone${i}`] || "",
|
||
});
|
||
}
|
||
}
|
||
|
||
// 如果 customServices 为空，添加一个默认的服务
|
||
if (this.customServices.length === 0) {
|
||
this.customServices.push({ name: "", phone: "" });
|
||
}
|
||
|
||
this.title = "修改运营区";
|
||
this.key++;
|
||
// listFee({ areaId: this.form.areaId }).then(response => {
|
||
// this.ruleOptions = response.rows;
|
||
// this.open = true;
|
||
// this.title = "修改运营区";
|
||
// this.key++;
|
||
// });
|
||
});
|
||
},
|
||
cityChange(that) {
|
||
let countyCode = 0;
|
||
let cityname = "";
|
||
let newCountyArry = [];
|
||
this.form.cityList.forEach((item, index) => {
|
||
if (item.name == that) {
|
||
countyCode = item.id;
|
||
cityname = item.name;
|
||
}
|
||
});
|
||
if (countyCode) {
|
||
this.form.countyList = [];
|
||
this.XIAN.forEach((item, index) => {
|
||
if (item.code == countyCode && item.cityCountyName == cityname) {
|
||
this.form.countyList.push(item);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
provinceChange(that) {
|
||
// 根据选中省，匹配市
|
||
let cityCode = 0;
|
||
let newCityArry = [];
|
||
this.form.provinceList.forEach((item, index) => {
|
||
if (item.name == that) {
|
||
cityCode = item.code;
|
||
}
|
||
});
|
||
// console.log(cityCode)
|
||
if (cityCode) {
|
||
this.form.cityList = [];
|
||
this.CITY.forEach((item, index) => {
|
||
if (item.code == cityCode) {
|
||
this.form.cityList.push(item);
|
||
}
|
||
}); /* 市匹配成功*/
|
||
}
|
||
},
|
||
|
||
getCityList() {
|
||
getDistrictList().then((res) => {
|
||
this.form.provinceList = JSON.parse(res.data);
|
||
// console.log("provinceList======"+JSON.stringify(this.form.provinceList))
|
||
// this.form.provinceList = res.data.districts[0].districts /* 省*/
|
||
/* 进行遍历赋值*/
|
||
/* 市区和县区*/
|
||
let newProvince = this.form.provinceList;
|
||
for (let i = 0; i < newProvince.length; i++) {
|
||
/* 省级*/
|
||
for (let j = 0; j < newProvince[i].districts.length; j++) {
|
||
/* 市级*/
|
||
let city = newProvince[i].districts[j].name;
|
||
this.CITY.push({ id: j + 1, name: city, code: i + 1 });
|
||
for (
|
||
let k = 0;
|
||
k < newProvince[i].districts[j].districts.length;
|
||
k++
|
||
) {
|
||
/* 县级*/
|
||
let xian = newProvince[i].districts[j].districts[k].name;
|
||
this.XIAN.push({
|
||
id: k + 1,
|
||
name: xian,
|
||
code: j + 1,
|
||
cityCountyName: city,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
for (let m = 0; m < newProvince.length; m++) {
|
||
newProvince[m] = { ...newProvince[m], ...{ code: m + 1 } };
|
||
}
|
||
// console.log("newProvince======"+JSON.stringify(newProvince))
|
||
this.form.provinceList = newProvince;
|
||
// this.loading = true
|
||
console.log(
|
||
console.log(this.form.provinceList, " this.form.provinceList")
|
||
);
|
||
});
|
||
},
|
||
center(data) {
|
||
this.form.longitude = data.lng;
|
||
this.form.latitude = data.lat;
|
||
},
|
||
mapList(data) {
|
||
let mapListJson = JSON.stringify(data);
|
||
console.log("mapListJson:" + mapListJson);
|
||
this.form.boundaryStr = mapListJson;
|
||
},
|
||
getDeptTree() {
|
||
deptTreeSelect().then((response) => {
|
||
this.deptOptions = response.data;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::v-deep .el-form-item__label {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 36px;
|
||
}
|
||
|
||
::v-deep .el-form-item__content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
::v-deep .el-input .el-input__inner {
|
||
height: 36px !important;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
::v-deep .el-input-number {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 36px; // 这里设置为和其他输入框一致的高度
|
||
}
|
||
|
||
::v-deep .el-input-number__input {
|
||
height: 36px !important;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
::v-deep .el-input-number__increase,
|
||
::v-deep .el-input-number__decrease {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 36px !important;
|
||
}
|
||
|
||
.tip {
|
||
font-size: 14px;
|
||
color: #888;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.tips {
|
||
font-size: 14px;
|
||
color: #888;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
::v-deep .el-form-item__content::after {
|
||
content: attr(data-tip);
|
||
display: block;
|
||
font-size: 14px;
|
||
color: #888;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.page {
|
||
padding: 10px;
|
||
|
||
.tit {
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.pagecont {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
.left_box {
|
||
padding: 10px;
|
||
width: 53%;
|
||
border: 1px solid #ccc;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.right_box {
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 10px;
|
||
margin-left: 1%;
|
||
width: 44%;
|
||
|
||
.right_tit {
|
||
margin-bottom: 20px;
|
||
font-size: 24px;
|
||
color: #000;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
// background: yellow;
|
||
}
|
||
}
|
||
}
|
||
|
||
.switch-item {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
/* 垂直居中 */
|
||
// justify-content: flex-start;
|
||
.el-switch {
|
||
margin-left: 10px;
|
||
/* 根据需要调整间距 */
|
||
}
|
||
}
|
||
</style>
|