From 94f0bfcf584cb09a779fbae1d515ade59d3b9ad5 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Thu, 2 Jan 2025 17:11:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/device/index.vue | 573 +++++++++++++++---------------
 1 file changed, 296 insertions(+), 277 deletions(-)

diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue
index 01cc990..3fca87a 100644
--- a/src/views/system/device/index.vue
+++ b/src/views/system/device/index.vue
@@ -123,7 +123,7 @@
       <el-table-column label="MAC" align="center" prop="mac" v-if="columns[2].visible" />
       <!-- <el-table-column label="SN" align="center" prop="sn" sortable="custom" :sort-orders="['descending', 'ascending']"
         v-if="columns[3].visible" /> -->
-        <el-table-column label="SN" align="center" :show-overflow-tooltip="true">
+      <el-table-column label="SN" align="center" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <router-link :to="'/system/deviceDetail/index/' + scope.row.deviceId" class="link-type">
             <span>{{ scope.row.sn }}</span>
@@ -333,145 +333,111 @@
 
     <!-- 设备详情对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
-  <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
-    <el-row :gutter="20">
-      <!-- MAC、SN、车牌号一行 -->
-      <el-col :span="8">
-        <el-form-item label="MAC" prop="mac" required>
-          <el-input v-model="form.mac" placeholder="请输入设备MAC" :disabled="title == '修改设备'" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="8">
-        <el-form-item label="SN" prop="sn" required>
-          <el-input v-model="form.sn" placeholder="请输入SN" :disabled="title == '修改设备' && userName != 'admin'" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="8">
-        <el-form-item label="车牌号" prop="vehicleNum">
-          <el-input v-model="form.vehicleNum" placeholder="请输入车牌号" />
-        </el-form-item>
-      </el-col>
-    </el-row>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
+        <el-row :gutter="20">
+          <!-- MAC、SN、车牌号一行 -->
+          <el-col :span="8">
+            <el-form-item label="MAC" prop="mac" required>
+              <el-input v-model="form.mac" placeholder="请输入设备MAC" :disabled="title == '修改设备'" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="SN" prop="sn" required>
+              <el-input v-model="form.sn" placeholder="请输入SN" :disabled="title == '修改设备' && userName != 'admin'" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="车牌号" prop="vehicleNum">
+              <el-input v-model="form.vehicleNum" placeholder="请输入车牌号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-    <el-row :gutter="20">
-      <!-- 代理商、运营区、车辆型号一行 -->
-      <el-col :span="8" v-if="userName == 'admin'">
-        <el-form-item label="代理商" prop="deptId">
-          <el-select 
-            v-model="form.deptId" 
-            clearable 
-            filterable 
-            placeholder="请选择代理商" 
-            @change="handleDeptChange"
-            style="width: 100%">
-            <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="8">
-        <el-form-item label="运营区" prop="areaId">
-          <el-select 
-            v-model="form.areaId" 
-            clearable 
-            filterable 
-            placeholder="请选择运营区" 
-            @change="handleAreaChange"
-            style="width: 100%">
-            <el-option 
-              v-for="item in areaOptions" 
-              :key="item.areaId" 
-              :label="item.areaName" 
-              :value="item.areaId">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="8">
-        <el-form-item label="车辆型号" prop="modelId">
-          <el-select 
-            v-model="form.modelId" 
-            clearable 
-            placeholder="请选择车辆型号" 
-            @change="handleModelChange"
-            style="width: 100%">
-            <el-option 
-              v-for="item in modelOptions" 
-              :key="item.modelId" 
-              :label="item.model" 
-              :value="item.modelId">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
+        <el-row :gutter="20">
+          <!-- 代理商、运营区、车辆型号一行 -->
+          <el-col :span="8" v-if="userName == 'admin'">
+            <el-form-item label="代理商" prop="deptId">
+              <el-select v-model="form.deptId" clearable filterable placeholder="请选择代理商" @change="handleDeptChange"
+                style="width: 100%">
+                <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="8">
+            <el-form-item label="运营区" prop="areaId">
+              <el-select v-model="form.areaId" clearable filterable placeholder="请选择运营区" @change="handleAreaChange"
+                style="width: 100%">
+                <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName" :value="item.areaId">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="车辆型号" prop="modelId">
+              <el-select v-model="form.modelId" clearable placeholder="请选择车辆型号" @change="handleModelChange"
+                style="width: 100%">
+                <el-option v-for="item in modelOptions" :key="item.modelId" :label="item.model" :value="item.modelId">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-    <el-row :gutter="20">
-      <!-- 硬件版本 -->
-      <el-col :span="8">
-        <el-form-item label="硬件版本" prop="hardwareVersionId" v-if="hardwareVersionOptions.length > 0 && userName == 'admin'">
-          <el-select 
-            v-model="form.hardwareVersionId" 
-            clearable 
-            placeholder="请选择硬件版本" 
-            :disabled="userName != 'admin'"
-            @change="handleHardwareVersionChange"
-            style="width: 100%">
-            <el-option 
-              v-for="item in hardwareVersionOptions" 
-              :key="item.id" 
-              :label="item.version" 
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
+        <el-row :gutter="20">
+          <!-- 硬件版本 -->
+          <el-col :span="8">
+            <el-form-item label="硬件版本" prop="hardwareVersionId"
+              v-if="hardwareVersionOptions.length > 0 && userName == 'admin'">
+              <el-select v-model="form.hardwareVersionId" clearable placeholder="请选择硬件版本"
+                :disabled="userName != 'admin'" @change="handleHardwareVersionChange" style="width: 100%">
+                <el-option v-for="item in hardwareVersionOptions" :key="item.id" :label="item.version" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-    <el-row :gutter="20" v-if="title == '修改设备'">
-      <el-col :span="8">
-        <el-form-item label="剩余电量">
-          <el-input v-model="form.remainingPower" placeholder="请输入剩余电量" disabled />
-        </el-form-item>
-      </el-col>
-      <el-col :span="8">
-        <el-form-item label="电压">
-          <el-input v-model="form.voltage" placeholder="请输入电压" disabled />
-        </el-form-item>
-      </el-col>
-      <el-col :span="8">
-        <el-form-item label="经度">
-          <el-input v-model="form.longitude" placeholder="请输入经度" disabled />
-        </el-form-item>
-      </el-col>
-      <el-col :span="8">
-        <el-form-item label="纬度">
-          <el-input v-model="form.latitude" placeholder="请输入纬度" disabled />
-        </el-form-item>
-      </el-col>
-    </el-row>
+        <el-row :gutter="20" v-if="title == '修改设备'">
+          <el-col :span="8">
+            <el-form-item label="剩余电量">
+              <el-input v-model="form.remainingPower" placeholder="请输入剩余电量" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="电压">
+              <el-input v-model="form.voltage" placeholder="请输入电压" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="经度">
+              <el-input v-model="form.longitude" placeholder="请输入经度" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="纬度">
+              <el-input v-model="form.latitude" placeholder="请输入纬度" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-    <!-- 硬件版本说明 -->
-    <el-row v-if="userName == 'admin'">
-      <el-col :span="24">
-        <el-form-item label="硬件版本说明" label-width="120px">
-          <div class="version-desc">
-            {{ versionDescription || '暂无说明' }}
-          </div>
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
+        <!-- 硬件版本说明 -->
+        <el-row v-if="userName == 'admin'">
+          <el-col :span="24">
+            <el-form-item label="硬件版本说明" label-width="120px">
+              <div class="version-desc">
+                {{ versionDescription || '暂无说明' }}
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </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 slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
     <el-dialog style="font-weight: bold" title="设备详情" :close-on-click-modal="true" :visible.sync="open2" width="1300px"
       append-to-body>
       <el-form ref="form" :model="form" label-width="100px" size="mini">
@@ -541,7 +507,7 @@
               @select-changed="onSelectChange" @map-geo="onMapGeo" :init-lat="form.latitude" :init-lng="form.longitude"
               :status="form.status" :online-status="form.onlineStatus" :device-sn="form.sn" :areaId="form.areaId"
               :trip-route-str="tripRouteStr" /> -->
-              <location-map :deviceSn="form.sn" :areaId="form.areaId" height="500px"/>
+            <location-map :deviceSn="form.sn" :areaId="form.areaId" height="500px" />
           </el-col>
         </el-row>
         <el-row>
@@ -840,100 +806,100 @@ export default {
       }
     },
     /** 当选择代理商时调用 */
-handleDeptChange(val) {
-  if (!this.isUpdating) {
-    if (val) {
-      this.isUpdating = true;
-      selectAreaListByDeptId(val).then((response) => {
-        // 更新运营区选项
-        this.areaOptions = response.data.areaList || [];
-        this.modelOptions = response.data.modelList || [];
-        
-        // 清空现有值
-        this.form.areaId = null;
-        this.form.modelId = null;
-        
-        // 只有在有选项时才设置默认值
-        if (this.areaOptions.length > 0) {
-          this.form.areaId = this.areaOptions[0].areaId;
-        }
-        if (this.modelOptions.length > 0) {
-          this.form.modelId = this.modelOptions[0].modelId;
-        }
+    handleDeptChange(val) {
+      if (!this.isUpdating) {
+        if (val) {
+          this.isUpdating = true;
+          selectAreaListByDeptId(val).then((response) => {
+            // 更新运营区选项
+            this.areaOptions = response.data.areaList || [];
+            this.modelOptions = response.data.modelList || [];
 
-        // 如果没有选项，显示提示信息
-        if (this.areaOptions.length === 0) {
-          this.$message.warning('该代理商暂无运营区');
-        }
-        if (this.modelOptions.length === 0) {
-          this.$message.warning('该代理商暂无可用车型');
-        }
-      }).finally(() => {
-        this.isUpdating = false;
-      });
-    } else {
-      // 当代理商为空时，加载所有运营区
-      this.isUpdating = true;
-      listArea(this.queryParams2).then((response) => {
-        this.areaOptions = response.rows || [];
-        this.form.areaId = null;
-        this.form.modelId = null;
-        this.modelOptions = [];
-      }).finally(() => {
-        this.isUpdating = false;
-      });
-    }
-  }
-},
+            // 清空现有值
+            this.form.areaId = null;
+            this.form.modelId = null;
 
-/** 当选择运营区时调用 */
-handleAreaChange(val) {
-  if (!this.isUpdating) {
-    if (val) {
-      this.isUpdating = true;
-      selectDeptByAreaId(val).then((response) => {
-        // 只有在代理商为空时，才设置代理商
-        if (!this.form.deptId && response.data.sysDept) {
-          this.form.deptId = response.data.sysDept.deptId;
-          
-          // 获取该代理商下的车型列表
-          selectAreaListByDeptId(this.form.deptId).then((deptResponse) => {
-            this.modelOptions = deptResponse.data.modelList || [];
+            // 只有在有选项时才设置默认值
+            if (this.areaOptions.length > 0) {
+              this.form.areaId = this.areaOptions[0].areaId;
+            }
             if (this.modelOptions.length > 0) {
               this.form.modelId = this.modelOptions[0].modelId;
-            } else {
-              this.form.modelId = null;
+            }
+
+            // 如果没有选项，显示提示信息
+            if (this.areaOptions.length === 0) {
+              this.$message.warning('该代理商暂无运营区');
+            }
+            if (this.modelOptions.length === 0) {
               this.$message.warning('该代理商暂无可用车型');
             }
+          }).finally(() => {
+            this.isUpdating = false;
           });
         } else {
-          // 如果已有代理商，则使用现有的车型列表
-          this.modelOptions = response.data.modelList || [];
-          if (!this.form.modelId && this.modelOptions.length > 0) {
-            this.form.modelId = this.modelOptions[0].modelId;
-          } else if (this.modelOptions.length === 0) {
+          // 当代理商为空时，加载所有运营区
+          this.isUpdating = true;
+          listArea(this.queryParams2).then((response) => {
+            this.areaOptions = response.rows || [];
+            this.form.areaId = null;
             this.form.modelId = null;
-            this.$message.warning('该运营区暂无可用车型');
-          }
+            this.modelOptions = [];
+          }).finally(() => {
+            this.isUpdating = false;
+          });
         }
-      }).finally(() => {
-        this.isUpdating = false;
-      });
-    } else {
-      // 清空车型，但保留代理商
-      this.form.modelId = null;
-      this.modelOptions = [];
-    }
-  }
-},
+      }
+    },
 
-      /** 当选择车型时调用 */
-  handleModelChange(val) {
-    // 移除车型变化时对其他字段的影响
-    if (!val) {
-      this.form.modelId = null;
-    }
-  },
+    /** 当选择运营区时调用 */
+    handleAreaChange(val) {
+      if (!this.isUpdating) {
+        if (val) {
+          this.isUpdating = true;
+          selectDeptByAreaId(val).then((response) => {
+            // 只有在代理商为空时，才设置代理商
+            if (!this.form.deptId && response.data.sysDept) {
+              this.form.deptId = response.data.sysDept.deptId;
+
+              // 获取该代理商下的车型列表
+              selectAreaListByDeptId(this.form.deptId).then((deptResponse) => {
+                this.modelOptions = deptResponse.data.modelList || [];
+                if (this.modelOptions.length > 0) {
+                  this.form.modelId = this.modelOptions[0].modelId;
+                } else {
+                  this.form.modelId = null;
+                  this.$message.warning('该代理商暂无可用车型');
+                }
+              });
+            } else {
+              // 如果已有代理商，则使用现有的车型列表
+              this.modelOptions = response.data.modelList || [];
+              if (!this.form.modelId && this.modelOptions.length > 0) {
+                this.form.modelId = this.modelOptions[0].modelId;
+              } else if (this.modelOptions.length === 0) {
+                this.form.modelId = null;
+                this.$message.warning('该运营区暂无可用车型');
+              }
+            }
+          }).finally(() => {
+            this.isUpdating = false;
+          });
+        } else {
+          // 清空车型，但保留代理商
+          this.form.modelId = null;
+          this.modelOptions = [];
+        }
+      }
+    },
+
+    /** 当选择车型时调用 */
+    handleModelChange(val) {
+      // 移除车型变化时对其他字段的影响
+      if (!val) {
+        this.form.modelId = null;
+      }
+    },
 
     // 处理硬件版本变化
     handleHardwareVersionChange(val) {
@@ -1012,8 +978,8 @@ handleAreaChange(val) {
       // }
     },
 
-    
- 
+
+
     /** 排序触发事件 */
     handleSortChange(column, prop, order) {
       this.queryParams.orderByColumn = column.prop;
@@ -1159,19 +1125,19 @@ handleAreaChange(val) {
         this.total = response.total;
         this.loading = false;
       });
-      if(this.queryParams2.deptId){
+      if (this.queryParams2.deptId) {
         selectAreaListByDeptId(this.queryParams2.deptId).then((deptResponse) => {
-            this.modelOptions = deptResponse.data.modelList || [];
-            
-          });
-      }else{
+          this.modelOptions = deptResponse.data.modelList || [];
+
+        });
+      } else {
         listModel(this.queryParams2).then((response) => {
-        
-        
-        this.modelOptions = response.rows;
-      });
+
+
+          this.modelOptions = response.rows;
+        });
       }
-      
+
     },
     // 取消按钮
     cancel() {
@@ -1215,7 +1181,7 @@ handleAreaChange(val) {
           }
         );
       }
-     
+
       listModel(this.queryParams2).then((response) => {
         this.modelOptions = response.rows;
       });
@@ -1224,24 +1190,24 @@ handleAreaChange(val) {
       });
     },
     reset2() {
-    this.form.areaId = null;
-    this.form.deptId = null;
-    this.form.modelId = null;
-    this.areaOptions = [];
-    this.modelOptions = [];
-    
-    // 重新加载代理商列表
-    if (this.userName === "admin") {
-      listDept2({ status: "0", pageNum: 1, pageSize: 999 }).then((response) => {
-        this.deptOptions = response.rows;
+      this.form.areaId = null;
+      this.form.deptId = null;
+      this.form.modelId = null;
+      this.areaOptions = [];
+      this.modelOptions = [];
+
+      // 重新加载代理商列表
+      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;
       });
-    }
-    
-    // 重新加载运营区列表
-    listArea(this.queryParams2).then((response) => {
-      this.areaOptions = response.rows;
-    });
-  },
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -1271,7 +1237,7 @@ handleAreaChange(val) {
     },
     /** 详情按钮 */
     handleView(row) {
-      const deviceId = row.deviceId 
+      const deviceId = row.deviceId
       this.$router.push(`/system/deviceDetail/index/${deviceId}`)
       // this.$router.push({
       //   path: '/system/deviceDetail/index',
@@ -1349,33 +1315,45 @@ handleAreaChange(val) {
         // this.fetchData(response.data.deptId)
         // this.open = true;
         //     this.title = "修改设备1";
-        
-          selectAreaListByDeptId(response.data.deptId).then((res) => {
-            // 方案1: 使用Vue.set确保响应式更新
-            setTimeout(() => {
-              console.log('=调用了11');
-              
-              this.$set(this, 'modelOptions', []);
+        // this.open = true;
+        // this.title = "修改设备";
+        let deptId = '100';
+        if (response.data.deptId == null) {
+          console.log('判断1');
+          
+           deptId = '100'
+        } else {
+          console.log('判断2');
+           deptId = response.data.deptId;
+        }
+        console.log(deptId, 'deptIddeptIddeptIddeptId');
+        selectAreaListByDeptId(deptId).then((res) => {
+          // 方案1: 使用Vue.set确保响应式更新
+          setTimeout(() => {
+
+
+            this.$set(this, 'modelOptions', []);
             this.$set(this, 'areaOptions', []);
             this.$set(this, 'modelOptions', res.data.modelList);
             this.$set(this, 'areaOptions', res.data.areaList);
             this.$forceUpdate()
             this.open = true;
             this.title = "修改设备";
-            }, 800);
-           
+          }, 800);
+
+
+          // 方案2: 使用nextTick确保DOM更新
+          // this.$nextTick(() => {
+          //   this.modelOptions = res.data.modelList;
+          //   this.areaOptions = res.data.areaList;
+          // },600);
+
+          // 不再需要setTimeout和$forceUpdate
+        }).finally(() => {
+
+          this.isUpdating = false;
+        });
 
-            // 方案2: 使用nextTick确保DOM更新
-            // this.$nextTick(() => {
-            //   this.modelOptions = res.data.modelList;
-            //   this.areaOptions = res.data.areaList;
-            // },600);
-            
-            // 不再需要setTimeout和$forceUpdate
-          }).finally(() => {
-            this.isUpdating = false;
-          });
-        
       });
     },
     handleListing(row) {
@@ -1503,20 +1481,59 @@ handleAreaChange(val) {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate((valid) => {
+      this.$refs["form"].validate(async (valid) => {
         if (valid) {
-          if (this.form.deviceId != null) {
-            updateDevice(this.form).then((response) => {
+          try {
+            // 1. 如果选择了运营区，验证运营区与代理商的关系
+            if (this.form.areaId) {
+              const areaResponse = await selectDeptByAreaId(this.form.areaId);
+              const areaDeptId = areaResponse.data.sysDept?.deptId;
+
+              if (this.form.deptId && areaDeptId && this.form.deptId !== areaDeptId) {
+                this.$modal.msgError("所选运营区不属于当前代理商，请重新选择！");
+                return;
+              }
+            }
+
+            // 2. 如果选择了代理商，验证车型是否属于该代理商
+            if (this.form.deptId && this.form.modelId) {
+              const deptResponse = await selectAreaListByDeptId(this.form.deptId);
+              const validModels = deptResponse.data.modelList || [];
+              const isValidModel = validModels.some(model => model.modelId === this.form.modelId);
+
+              if (!isValidModel) {
+                this.$modal.msgError("所选车型不属于当前代理商，请重新选择！");
+                return;
+              }
+            }
+
+            // 3. 如果选择了运营区和车型，验证车型是否属于该运营区
+            if (this.form.areaId && this.form.modelId) {
+              const areaResponse = await selectDeptByAreaId(this.form.areaId);
+              const validModels = areaResponse.data.modelList || [];
+              const isValidModel = validModels.some(model => model.modelId === this.form.modelId);
+
+              if (!isValidModel) {
+                this.$modal.msgError("所选车型不属于当前运营区，请重新选择！");
+                return;
+              }
+            }
+
+            // 所有验证通过后，执行提交操作
+            if (this.form.deviceId != null) {
+              const response = await updateDevice(this.form);
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
-            });
-          } else {
-            addDevice(this.form).then((response) => {
+            } else {
+              const response = await addDevice(this.form);
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
-            });
+            }
+          } catch (error) {
+            console.error("提交表单时发生错误：", error);
+            this.$modal.msgError("操作失败：" + (error.message || "未知错误"));
           }
         }
       });
@@ -1548,6 +1565,8 @@ handleAreaChange(val) {
   },
 };
 </script>
+
+
 <style lang="scss">
 .el-dialog {
   .el-form {