1.车型关联收费方式

src/views/system/area/areaSet.vue

@@ -418,33 +418,33 @@
             </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="低于电量(%)不得骑行"
-                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"
               >
@@ -628,7 +628,7 @@ export default {
   watch: {
     'form.deptId'(newValue, oldValue) {
       console.log('运营商ID变化了:', newValue);
-      this.changedept()
+      // this.changedept()
       // 在这里执行值变化后的逻辑
     }
   },
@@ -648,12 +648,12 @@ export default {
     console.log(this.dictList, "dictdict");
   },
   methods: {
-    changedept() {
+    // changedept() {
-      console.log("111");
+    //   console.log("111");
-      listFee({ deptId: this.form.deptId }).then((response) => {
+    //   listFee({ deptId: this.form.deptId }).then((response) => {
-        this.ruleOptions = response.rows;
+    //     this.ruleOptions = response.rows;
-      });
+    //   });
-    },
+    // },
     reset() {
       this.form = {
         areaTime: "1",

src/views/system/area/index.vue

@@ -103,7 +103,7 @@
           </router-link>
         </template>
       </el-table-column>
-      <el-table-column label="收费方式" align="center" prop="ruleStr" :show-overflow-tooltip="true" />
+<!--      <el-table-column label="收费方式" align="center" prop="ruleStr" :show-overflow-tooltip="true" />-->
       <!--      <el-table-column label="联系人" align="center" prop="contact" />-->
       <!--      <el-table-column label="联系人电话" align="center" prop="phone" />-->
       <el-table-column label="状态" align="center" key="status">
@@ -349,14 +349,14 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-col :span="12">
+<!--          <el-col :span="12">-->
-            <el-form-item label="收费方式">
+<!--            <el-form-item label="收费方式">-->
-              <el-select v-model="form.ruleIds" multiple placeholder="请选择收费方式">
+<!--              <el-select v-model="form.ruleIds" multiple placeholder="请选择收费方式">-->
-                <el-option v-for="item in ruleOptions" :key="item.ruleId" :label="item.name"
+<!--                <el-option v-for="item in ruleOptions" :key="item.ruleId" :label="item.name"-->
-                  :value="item.ruleId"></el-option>
+<!--                  :value="item.ruleId"></el-option>-->
-              </el-select>
+<!--              </el-select>-->
-            </el-form-item>
+<!--            </el-form-item>-->
-          </el-col>
+<!--          </el-col>-->
           <el-col :span="12">
             <el-form-item label="低于电量（%）不得骑行" label-width="150">
               <el-input-number style="width: 50%" v-model="form.undercharge"

src/views/system/fee/index.vue

@@ -52,7 +52,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="id" align="center" prop="ruleId" />
       <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="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" >
@@ -104,18 +104,18 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+<!--          <el-col :span="12">-->
-            <el-form-item label="应用运营区" prop="areaId">
+<!--            <el-form-item label="应用运营区" prop="areaId">-->
-              <el-select v-model="form.areaId" clearable placeholder="请选择运营区">
+<!--              <el-select v-model="form.areaId" clearable placeholder="请选择运营区">-->
-                <el-option
+<!--                <el-option-->
-                  v-for="item in areaOptions"
+<!--                  v-for="item in areaOptions"-->
-                  :key="item.areaId"
+<!--                  :key="item.areaId"-->
-                  :label="item.areaName"
+<!--                  :label="item.areaName"-->
-                  :value="item.areaId"
+<!--                  :value="item.areaId"-->
-                ></el-option>
+<!--                ></el-option>-->
-              </el-select>
+<!--              </el-select>-->
-            </el-form-item>
+<!--            </el-form-item>-->
-          </el-col>
+<!--          </el-col>-->
         </el-row>
         <el-form-item label="说明" prop="instructions" :show-overflow-tooltip="true">
           <editor v-model="form.instructions" :min-height="192"/>
@@ -346,7 +346,7 @@
 <script>
 import { listFee, getFee, delFee, addFee, updateFee } from "@/api/system/fee";
 import { listArea, selectAreaListByDeptId } from '@/api/system/area'
-import { listDept, listDept2, listDeptExcludeChild } from '@/api/system/dept'
+import { listDept2} from '@/api/system/dept'
 
 export default {
   name: "Fee",

src/views/system/model/index.vue

@@ -75,6 +75,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="车型" align="center" prop="model" />
       <el-table-column label="运营商" align="center" prop="operatorName" />
+      <el-table-column label="运营区" align="center" prop="areaName" />
       <el-table-column label="满电电压(V)" align="center" prop="fullVoltage" />
       <el-table-column label="亏电电压(V)" align="center" prop="lowVoltage" />
       <el-table-column label="满电续航(km)" align="center" prop="fullEndurance" />
@@ -130,6 +131,16 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="运营区" prop="areaId">
+          <el-select v-model="form.areaId" style="width: 100%" clearable placeholder="请选择运营商">
+            <el-option
+              v-for="item in areaOptions"
+              :key="item.areaId"
+              :label="item.areaName"
+              :value="item.areaId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="满电电压(V)" label-width="90" prop="fullVoltage">
           <el-input style="width: 85%" v-model="form.fullVoltage" placeholder="请输入满电电压" />
         </el-form-item>
@@ -142,6 +153,20 @@
         <el-form-item label="骑行低电量提醒(%)" label-width="120" prop="lowBatteryReminder">
           <el-input style="width: 78%" v-model="form.lowBatteryReminder" placeholder="请输入骑行低电量提醒" />
         </el-form-item>
+        <el-form-item label="应用收费方式" label-width="120" prop="ruleIds">
+          <el-select
+            v-model="form.ruleIds"
+            multiple
+            style="width: 85%"
+            placeholder="请选择收费方式">
+            <el-option
+              v-for="item in ruleOptions"
+              :key="item.ruleId"
+              :label="item.name"
+              :value="item.ruleId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -156,6 +181,8 @@ import { listModel, getModel, delModel, addModel, updateModel } from "@/api/syst
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { listDept2 } from '@/api/system/dept'
+import { listFee } from '@/api/system/fee'
+import { listArea, optionselect as getAreaOptionselect, selectAreaListByDeptId } from '@/api/system/area'
 
 export default {
   name: "Model",
@@ -164,11 +191,15 @@ export default {
     return {
       // 遮罩层
       loading: true,
+      isUpdating: false, // 标志位
       // 选中数组
       ids: [],
       // 运营商树选项
       deptOptions: [],
+      // 区域列表
+      areaOptions: [],
       userName: undefined,
+      ruleOptions: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -229,8 +260,50 @@ export default {
     if(this.userName == 'admin'){
       this.getDeptTree();
     }
+    this.getAreaList();
+  },
+  watch: {
+    'form.operator'(newVal,oldVal) {
+      if (!this.isUpdating) {
+        this.fetchData2(newVal,oldVal);
+      }
+    },
   },
   methods: {
+    /** 当选择运营商时  根据运营商id，获取运营区和型号 */
+    fetchData2(deptId,oldVal) {
+      console.log("deptId1111",deptId)
+      console.log("oldVal1111",oldVal)
+      if (deptId) {
+        this.isUpdating = true; // 设置标志位
+        selectAreaListByDeptId(deptId).then((response) => {
+          this.areaOptions = response.data.areaList;
+          let areaOptions = response.data.areaList;
+          areaOptions.length > 0
+            ? (this.form.areaId = areaOptions[0].areaId)
+            : (this.form.areaId = null);
+          this.ruleOptions = response.data.ruleList;
+          // this.form.ruleIds = null
+          // ruleOptions.length > 0
+          //   ? (this.form.ruleIds = ruleOptions.map((rule) => rule.ruleId))
+          //   : (this.form.ruleIds = null);
+        }).finally(() => {
+          this.isUpdating = false; // 清除标志位
+        });
+      } else {
+        this.reset2();
+      }
+    },
+    getAreaList() {
+      getAreaOptionselect().then((response) => {
+        this.areaOptions = response.data;
+      });
+    },
+    getRuleList() {
+      listFee({ deptId: this.form.modelId }).then(response => {
+        this.ruleOptions = response.rows;
+      });
+    },
     /** 查询车辆型号列表 */
     getList() {
       this.loading = true;
@@ -266,6 +339,26 @@ export default {
       };
       this.resetForm("form");
     },
+    reset2() {
+      console.log(111111111111111111);
+      this.form.areaId = null;
+      this.form.deptId = null;
+      // this.form.ruleId = null;
+      this.form.ruleIds = null;
+      if (this.userName === "admin") {
+        listDept2({ status: "0", pageNum: 1, pageSize: 999 }).then(
+          (response) => {
+            this.deptOptions = response.rows;
+          }
+        );
+      }
+      listFee(this.queryParams).then(response => {
+        this.ruleOptions = response.rows;
+      });
+      listArea(this.queryParams).then((response) => {
+        this.areaOptions = response.rows;
+      });
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -303,6 +396,7 @@ export default {
       const modelId = row.modelId || this.ids
       getModel(modelId).then(response => {
         this.form = response.data;
+        this.form.ruleIds = response.ruleIds
         this.open = true;
         this.title = "修改车辆型号";
       });