金豆审核做级联

src/views/audit/beanAudit.vue

@@ -6,10 +6,15 @@
         <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 240px" clearable/>
       </el-col>
       <el-col :span="6">
-        <el-text size="large">所属地区：</el-text>
-        <el-select v-model="searchForm.market" placeholder="请选择" style="width: 240px" clearable>
-          <el-option v-for="item in marketOptions" :key="item" :label="item" :value="item"/>
-        </el-select>
+            <el-text class="mx-1" size="large">所属地区：</el-text>
+            <el-cascader
+                v-model="selectedMarketPath"
+                :options="marketOptions"
+                placeholder="请选择所属地区"
+                clearable
+                style="width:180px"
+                @change="handleMarketChange"
+            />
           </el-col>
     </el-row>
     <el-row>
@@ -131,7 +136,7 @@ import {permissionMapping, findMenuById} from "@/utils/menuTreePermission.js"
 import dayjs from "dayjs";
 
 const tableData = ref([])
-const marketOptions = ref([])
+const marketOptions = ref("")
 const dateRange = ref([])
 const activeTimeRange = ref('')
 const activeName = ref('wait')
@@ -169,17 +174,46 @@ const stats = ref({
   permanentBean: 0,
   freeBean: 0
 })
+// 存储地区选择变化
+const selectedMarketPath = ref("")
 const showRejectDialog = (row) => {
   rejectRow.value.id = row.id
   reason.value = ''
   rejectDialogVisible.value = true
 }
-const getmarkets = async () => {
+// 获取地区，修改为级联下拉框
+const getmarkets = async function () {
   try {
-    const result = await API({url: '/beanConsume/getDept', data: {}})
-    marketOptions.value = result.data || []
+    // 发送POST请求
+    const result = await API({
+
+      url: '/market/selectMarket',
+    });
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    // 递归转换树形结构为级联选择器需要的格式（跳过第一级节点）
+    const transformTree = (nodes) => {
+      // 直接处理第一级节点的子节点
+      const allChildren = nodes.flatMap(node => node.children || []);
+
+      return allChildren.map(child => {
+        const grandchildren = child.children && child.children.length
+            ? transformTree([child]) // 递归处理子节点
+            : null;
+
+        return {
+          value: child.name,
+          label: child.name,
+          children: grandchildren
+        };
+      });
+    };
+    // 存储地区信息
+    marketOptions.value = transformTree(result.data)
+    console.log('转换后的地区树==============', marketOptions.value)
   } catch (error) {
-    console.error('获取地区列表失败', error)
+    console.log('请求失败', error)
   }
 }
 const handleSortChange = (column) => {
@@ -366,6 +400,7 @@ const resetSearch = function () {
     auditStartTime: '',
     auditEndTime: ''
   }
+  selectedMarketPath.value = []
   dateRange.value = []
   activeTimeRange.value = '' // 清除激活状态
 }
@@ -404,6 +439,13 @@ const adminReject = async function () {
   await get()
   await getStats()
 }
+const handleMarketChange = (value) => {
+  if (value && value.length > 0) {
+    searchForm.value.market = value[value.length - 1]
+  } else {
+    searchForm.value.market = ''
+  }
+}
 const handleDatePickerChange = () => {
   activeTimeRange.value = ''
 }