feat 改为使用 @change

src/views/usergold/clientCountBalance.vue

@@ -216,36 +216,24 @@ const handleSortChange = (column) => {
 }
 
 
+const handleMarketChange = (val) => {
+  if (!Array.isArray(val)) return
 
-// 标记是否已选择总部
-const selectedHeadquarters = computed(() => {
-  return Array.isArray(user.value.markets) &&
-      user.value.markets.includes('总部')
-})
-
-// 互斥选择总部与其他地区
-watch(
-    () => user.value.markets,
-    (newVal) => {
-      if (!Array.isArray(newVal)) return
-
-      // 选择了总部，则清除其他选项
-      if (newVal.includes('总部') && newVal.length > 1) {
-        user.value.markets = ['总部']
-        // ElMessage.info('选总部时不能选择其他地区')
-        ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您自动调整')
-
-      }
-      // 选择了非总部且包含总部，则移除总部
-      if (!newVal.includes('总部') && selectedHeadquarters.value) {
-        user.value.markets = newVal.filter(item => item !== '总部')
-        // ElMessage.info("选其他不能选择总部")
-        ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您自动调整')
+  const hasHeadquarters = val.includes('总部')
+  const hasOther = val.some(item => item !== '总部')
 
-      }
-    },
-    { deep: true }
-)
+  if (hasHeadquarters && hasOther) {
+    if (val[val.length - 1] === '总部') {
+      // 用户最后点的是总部，保留总部，清除其他
+      user.value.markets = ['总部']
+      ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您保留“总部”')
+    } else {
+      // 用户最后点的是其他，保留其他，移除总部
+      user.value.markets = val.filter(item => item !== '总部')
+      ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您去除“总部”')
+    }
+  }
+}
 
 // 挂载
 onMounted(async function () {
@@ -288,7 +276,7 @@ const exportExcel = async function () {
           </div>
           <div class="head-card-element">
             <el-text class="mx-1" size="large">所属地区：</el-text>
-            <el-select v-model="user.markets" placeholder="请选择所属地区" style="width: 180px" clearable multiple>
+            <el-select v-model="user.markets" placeholder="请选择所属地区" style="width: 180px" clearable multiple  @change="handleMarketChange">
               <el-option v-for="item in market" :key="item.value" :label="item.label" :value="item.value"/>
             </el-select>
           </div>

src/views/usergold/clientCountDetail.vue

@@ -8,13 +8,6 @@ import API from '@/util/http'
 import { writeFile, utils } from 'xlsx'
 import request from "@/util/request.js";
 
-// 标记是否已选择总部
-const selectedHeadquarters = computed(() => {
-  return Array.isArray(goldDetail.value.markets) &&
-      goldDetail.value.markets.includes('总部')
-})
-
-
 // 标记当前激活的时间范围按钮
 const activeTimeRange = ref('')
 // 日期选择器变化时清除按钮激活状态
@@ -366,31 +359,25 @@ const handleCurrentChange = function (val) {
   get()
 }
 
+const handleMarketChange = (val) => {
+  if (!Array.isArray(val)) return
 
+  const hasHeadquarters = val.includes('总部')
+  const hasOther = val.some(item => item !== '总部')
 
-// 互斥选择总部与其他地区
-watch(
-    () => goldDetail.value.markets,
-    (newVal) => {
-      if (!Array.isArray(newVal)) return
-
-      // 选择了总部，则清除其他选项
-      if (newVal.includes('总部') && newVal.length > 1) {
-        goldDetail.value.markets = ['总部']
-        // ElMessage.info('选总部时不能选择其他地区')
-        ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您自动调整')
-
-      }
-      // 选择了非总部且包含总部，则移除总部
-      if (!newVal.includes('总部') && selectedHeadquarters.value) {
-        goldDetail.value.markets = newVal.filter(item => item !== '总部')
-        // ElMessage.info("选其他不能选择总部")
-        ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您自动调整')
+  if (hasHeadquarters && hasOther) {
+    if (val[val.length - 1] === '总部') {
+      // 用户最后点的是总部，保留总部，清除其他
+      goldDetail.value.markets = ['总部']
+      ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您保留“总部”')
+    } else {
+      // 用户最后点的是其他，保留其他，移除总部
+      goldDetail.value.markets = val.filter(item => item !== '总部')
+      ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您去除“总部”')
+    }
+  }
+}
 
-      }
-    },
-    { deep: true }
-)
 
 
 
@@ -437,7 +424,7 @@ onMounted(async function () {
               <div class="head-card-element">
                 <el-text class="mx-1" size="large">所属地区：</el-text>
                 <el-select v-model="goldDetail.markets" placeholder="请选择所属地区" style="width: 180px" clearable multiple
-                           :loading="isLoadingArea">
+                           :loading="isLoadingArea"  @change="handleMarketChange">
                   <el-option v-for="item in market"
                              :key="item.value || item"
                              :label="item.label || item"