750 lines
35 KiB
Vue
750 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>
|
||
</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: 10,
|
||
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" }],
|
||
|
||
},
|
||
}
|
||
},
|
||
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: {
|
||
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++;
|
||
|
||
|
||
});
|
||
},
|
||
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() {
|
||
listFee({ areaId: this.form.areaId }).then(response => {
|
||
this.ruleOptions = response.rows;
|
||
|
||
});
|
||
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>
|