feat(usergold): 实现总部与其他地区互斥选择功能 （加监听）

src/views/usergold/clientCountBalance.vue

@@ -1,6 +1,6 @@
 <script setup>
 // 这是客户金币余额页面
-import {ref, onMounted, reactive, computed} from 'vue'
+import {ref, onMounted, reactive, computed, watch} from 'vue'
 import ElementPlus from 'element-plus'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import axios from 'axios'
@@ -214,6 +214,39 @@ const handleSortChange = (column) => {
   sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
   get()
 }
+
+
+
+// 标记是否已选择总部
+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('“总部”与其他地区不可同时选择，系统已为您自动调整')
+
+      }
+    },
+    { deep: true }
+)
+
 // 挂载
 onMounted(async function () {
   await getAdminData()

src/views/usergold/clientCountDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed, nextTick } from 'vue'
+import {ref, onMounted, computed, nextTick, watch} from 'vue'
 
 import { ElMessage } from 'element-plus'
 import axios from 'axios'
@@ -8,6 +8,12 @@ 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('')
@@ -359,6 +365,36 @@ const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
   get()
 }
+
+
+
+// 互斥选择总部与其他地区
+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('“总部”与其他地区不可同时选择，系统已为您自动调整')
+
+      }
+    },
+    { deep: true }
+)
+
+
+
+
 // 挂载
 onMounted(async function () {
   await get()
@@ -400,10 +436,14 @@ onMounted(async function () {
             <el-col :span="6">
               <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
+                <el-select v-model="goldDetail.markets" placeholder="请选择所属地区" style="width: 180px" clearable multiple
                            :loading="isLoadingArea">
-                  <el-option v-for="item in market" :key="item.value || item" :label="item.label || item"
-                    :value="item.value || item" />
+                  <el-option v-for="item in market"
+                             :key="item.value || item"
+                             :label="item.label || item"
+                             :value="item.value || item"
+
+                  />
                 </el-select>
               </div>
             </el-col>