From 196be50eaa56757cf60347673ec3662fd7bf0313 Mon Sep 17 00:00:00 2001
From: Sliverber <2622874537@qq.com>
Date: Sun, 28 Jul 2024 14:23:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E8=90=A5=E5=8C=BA=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                  |   4 +-
 src/router/index.js               |   2 +-
 src/views/system/area/areaSet.vue | 323 ++++++++++++++++++++++--------
 src/views/system/area/index.vue   |  11 +-
 4 files changed, 249 insertions(+), 91 deletions(-)

diff --git a/.env.development b/.env.development
index 0346afc..e3478dc 100644
--- a/.env.development
+++ b/.env.development
@@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享电动车管理系统
 ENV = 'development'
 
 # 共享电动车管理系统/开发环境
-# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
-VUE_APP_BASE_API = 'http://192.168.2.189:8080'
+VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
+# VUE_APP_BASE_API = 'http://192.168.2.189:8080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/router/index.js b/src/router/index.js
index 26e448a..4e36bcf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -225,7 +225,7 @@ export const dynamicRoutes = [
     permissions: ['system:parking:list'],
     children: [
       {
-        path: 'index/:areaId(\\d+)',
+        path: 'index/:areaId(\\d+)?', // 将参数设置为可选
         component: () => import('@/views/system/area/areaSet'),
         name: 'Data',
         meta: { title: '运营区设置', activeMenu: '/system/areaSet' }
diff --git a/src/views/system/area/areaSet.vue b/src/views/system/area/areaSet.vue
index a2c73ac..4ddae04 100644
--- a/src/views/system/area/areaSet.vue
+++ b/src/views/system/area/areaSet.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="page">
-        <div class="tit" style="width: 100%;">{{ title }}</div>
+        <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">
@@ -25,11 +28,11 @@
                             <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>
+                            <div class="tip">用户地图上显示的车辆图标样式</div>
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="运营区域" data-tip="这是运营区域选择框">
@@ -54,15 +57,15 @@
                         </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"
+                        <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-select>
+                            <div class="tip">运营区外的时间用户无法解锁骑行</div>
+                        </div>
 
-                        </el-form-item>
+                    </el-form-item>
                     <el-row v-if="form.areaTime == 2">
                         <el-col :span="18">
                             <el-form-item label="自定义运营时间" label-width="140px" data-tip="这是自定义运营时间选择框">
@@ -82,40 +85,22 @@
                         </el-col>
                     </el-row>
                     <div v-if="form.customService == '1'">
-                        <el-row>
-                            <el-col :span="8">
-                                <el-form-item label="自定义客服名称1" prop="serviceName1" label-width="180px">
-                                    <el-input v-model="form.serviceName1" placeholder="请输入自定义客服名称" />
+                        <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="8">
-                                <el-form-item label="电话" prop="servicePhone1">
-                                    <el-input v-model="form.servicePhone1" placeholder="请输入客服电话" />
+                            <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-row>
-                        <el-row>
-                            <el-col :span="8">
-                                <el-form-item label="自定义客服名称2" prop="serviceName2" label-width="180px">
-                                    <el-input v-model="form.serviceName2" placeholder="请输入自定义客服名称" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-form-item label="电话" prop="servicePhone2">
-                                    <el-input v-model="form.servicePhone2" placeholder="请输入客服电话" />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="8">
-                                <el-form-item label="自定义客服名称3" prop="serviceName3" label-width="180px">
-                                    <el-input v-model="form.serviceName3" placeholder="请输入自定义客服名称" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-form-item label="电话" prop="servicePhone3">
-                                    <el-input v-model="form.servicePhone3" placeholder="请输入客服电话" />
-                                </el-form-item>
+                            <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>
@@ -126,7 +111,7 @@
                             </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" />
@@ -147,9 +132,9 @@
                             </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">
@@ -164,7 +149,7 @@
                             <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">
@@ -181,7 +166,23 @@
                     </el-row>
                     <el-row>
                         <el-col :span="12">
-                            <el-form-item label="还车误差（米）" label-width="120"  class="switch-item">
+                            <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>
@@ -192,27 +193,27 @@
                             </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>>
+                            <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.timeoutMinutes"
                                     placeholder="车辆可最长预约多少分钟"></el-input-number>
                             </el-form-item>
-                            <div class="tips">设置车辆的最大可以预约时间</div>>
+                            <div class="tips">设置车辆的最大可以预约时间</div>
                         </el-col>
                     </el-row>
                     <el-row>
@@ -223,12 +224,14 @@
                                         :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>
@@ -237,29 +240,18 @@
                                 <el-input-number style="width: 100%" v-model="form.deposit"
                                     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="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>
-                        </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>
-                        </el-col>
-                    </el-row>
-                   
+
+
                     <el-row>
                         <el-col :span="15">
                             <el-form-item label="电量低于多少值自动生成换电订单" label-width="120" class="switch-item"
@@ -267,6 +259,7 @@
                                 <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>
@@ -277,10 +270,9 @@
                 <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 >
+                    :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>
@@ -309,7 +301,7 @@ export default {
     dicts: ['et_operating_area_status', 'et_operating_area_time', 'et_business_switch'],
     data() {
         return {
-            dictList:null,
+            dictList: null,
             loading: true,
             ids: [],
             single: true,
@@ -327,10 +319,13 @@ export default {
             areaList: [],
             userName: null,
             deptOptions: undefined,
-            title: "",
+            title: "新增运营区",
             open: false,
             mapopen: false,
             key: 0,
+            customServices: [
+                { name: '', phone: '' }
+            ],
             queryParams: {
                 pageNum: 1,
                 pageSize: 10,
@@ -354,14 +349,100 @@ export default {
     },
     created() {
         const areaId = this.$route.params && this.$route.params.areaId;
-        this.getArea(areaId);
+        if (areaId) {
+            this.getArea(areaId);
+        }
+        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');
+
+        this.dictList = this.dict.type.et_operating_area_time
+        console.log(this.dictList, 'dictdict');
     },
     methods: {
+        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 (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;
@@ -378,19 +459,71 @@ export default {
                 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++;
-                });
-                this.getCityList();
+
+
             });
         },
+        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() {
-            this.loading = false
+            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))
@@ -455,6 +588,26 @@ export default {
     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;
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index 2ff9d18..e0f1bfe 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -12,8 +12,12 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+         <router-link :to="'/system/areaSet/index/' " class="link-type">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini"
           v-hasPermi="['system:area:add']">新增</el-button>
+          </router-link>
+        <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['system:area: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"
@@ -88,9 +92,10 @@
       </el-table-column>
       <el-table-column label="操作" align="center" width="200" 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:area:edit']">修改</el-button>
+          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:area:edit']">修改</el-button> -->
           <!-- <el-table-column label="导览地图" align="center" :show-overflow-tooltip="true">
+            
         <template slot-scope="scope">
           <router-link :to="'/system/areaSet/index/' + scope.row.areaId" class="link-type">
             <span>修改</span>