地区问题

src/views/walletManage/components/WalletDetailTemplate.vue

@@ -24,10 +24,12 @@ const { flag } = storeToRefs(adminStore)
 const tableData = ref([])
 const total = ref(0)
 const loading = ref(false)
-
+const marketLists = ref([])
+const selectedMarketPath = ref([])
 const selectData = ref({
   jwcode: '',
-  walletId: ''
+  walletId: '',
+  market: ''
 })
 
 const getObj = ref({
@@ -87,6 +89,8 @@ const getWalletData = async () => {
       pageSize: getObj.value.pageSize,
       userWalletRecord: {
         walletId: selectData.value.walletId,
+        market: selectData.value.market,
+        jwcode: selectData.value.jwcode
       }
     }
 
@@ -127,6 +131,8 @@ const search = function () {
 // 重置
 const reset = function () {
   selectData.value.jwcode = ''
+  selectData.value.market = ''
+  selectedMarketPath.value = []
   getObj.value.pageNum = 1
   getWalletData()
 }
@@ -260,8 +266,46 @@ const getTagText = (state) => {
   }
 }
 
+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.id,
+      label: child.name,
+      children: grandchildren
+    };
+  });
+};
+const selectMarket = async function () {
+  try {
+    const selectMarketResult = await API({ url: '/market/selectMarket' });
+    marketLists.value = transformTree(selectMarketResult.data)
+    console.log('转换后的地区树==============:', marketLists.value);
+  } catch (error) {
+    console.error('获取地区树失败：', error);
+    return {};
+  }
+};
+
+const handleMarketChange = (value) => {
+  if (value && value.length > 0) {
+    // 级联选择器绑定了 id，直接取数组最后一级（叶子节点）的 id 即可
+    const lastValueId = value[value.length - 1];
+    selectData.value.market = lastValueId;
+  } else {
+    selectData.value.market = '';
+  }
+};
+
 onMounted(() => {
   selectData.value.walletId = props.type
+  selectMarket()
 })
 
 </script>
@@ -272,7 +316,12 @@ onMounted(() => {
       <div class="head-card">
         <div class="head-card-element">
           <el-text class="mx-1" size="large">{{ $t('common_list.jwcode') }}：</el-text>
-          <el-input v-model="selectData.jwcode" style="width: 240px" placeholder="请输入精网号" clearable />
+          <el-input v-model="selectData.jwcode" style="width: 12.5vw" placeholder="请输入精网号" clearable />
+        </div>
+        <div class="head-card-element">
+          <el-text class="mx-1" size="large">{{ $t('common.market') }}：</el-text>
+          <el-cascader v-model="selectedMarketPath" :options="marketLists" :placeholder="$t('common.marketPlaceholder')"
+            clearable style="width:180px" @change="handleMarketChange" />
         </div>
         <div class="head-card-btn">
           <el-button type="success" @click="reset">{{ $t('common.reset') }}</el-button>
@@ -409,6 +458,12 @@ onMounted(() => {
 
 .head-card-element {
   margin-right: 20px;
+  white-space: nowrap;
+
+  .mx-1 {
+    font-size: 16px;
+    margin: 0 10px;
+  }
 }
 
 .head-card-btn {