feat(cj): 允许筛选地图

package.json

@@ -14,7 +14,7 @@
         "@antv/g2": "^4.2.10",
         "@jx3box/jx3box-comment-ui": "^1.9.9",
         "@jx3box/jx3box-common": "^8.2.24",
-        "@jx3box/jx3box-common-ui": "^8.9.25",
+        "@jx3box/jx3box-common-ui": "^8.9.26",
         "@jx3box/jx3box-data": "^3.6.8",
         "@jx3box/jx3box-dict": "^2.1.1",
         "@jx3box/jx3box-editor": "^2.2.15",

src/components/cj/sidebar.vue

@@ -68,7 +68,6 @@
 import { getMenus, getRoleGameAchievements, getVirtualRoleAchievements } from "@/service/achievement";
 import RoleSelect from "@/components/common/role-select.vue";
 import Bus from "@jx3box/jx3box-common-ui/service/bus";
-import { getUserRoles } from "@/service/team";
 import User from "@jx3box/jx3box-common/js/user";
 import { showSchoolIcon } from "@jx3box/jx3box-common/js/utils";
 import { flattenDeep, cloneDeep } from "lodash";
@@ -86,8 +85,6 @@ export default {
             menu_types: [
                 { value: 1, label: "常规成就" },
                 { value: 2, label: "五甲成就" },
-                // { value: 4, label: "宠物成就" },
-                // { value: 5, label: "奇遇成就" },
                 { value: 3, label: "其他板块" },
             ],
 
@@ -266,6 +263,7 @@ export default {
                                 sub: first_node.data.sub,
                                 detail: first_node.data.detail,
                             },
+                            query: that.$route.query,
                         });
                     }, 100);
                     this.$refs.tree.store.setCurrentNode(first_node);
@@ -374,16 +372,18 @@ export default {
                     return {
                         name: "normal",
                         params: { sub: data.sub, detail: data.detail },
+                        query: this.$route.query,
                     };
                 case 2:
                     return {
                         name: "top_five",
                         params: { sub: data.sub, detail: data.detail },
+                        query: this.$route.query,
                     };
                 case 3:
                     // case 4:
                     // case 5:
-                    return { name: data.router };
+                    return { name: data.router, query: this.$route.query };
             }
             return null;
         },

src/components/common/search.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="m-search-bar" :class="$route.name == 'view' ? 'can-return' : ''">
+    <div class="m-search-bar m-cj-search" :class="$route.name == 'view' ? 'can-return' : ''">
         <div class="m-return">
             <el-button class="u-return-btn" @click="returnHandle"><i class="el-icon-arrow-left"></i>返回</el-button>
         </div>
@@ -11,9 +11,9 @@
                 :placeholder="placeholder"
                 clearable
             >
-                <span slot="prepend">
+                <template #prepend>
                     <slot><i class="el-icon-search"></i> <span class="u-text">关键词</span></slot>
-                </span>
+                </template>
                 <el-button slot="append" class="u-search-btn" type="primary" plain @click="searchHandle"
                     ><i class="el-icon-position"></i> <span class="u-text">搜索</span></el-button
                 >

src/service/achievement.js

@@ -55,12 +55,13 @@ export function getMenus(general) {
 }
 
 // 获取菜单下成就
-export function getMenuAchievements(sub, detail) {
+export function getMenuAchievements(sub, detail, params) {
     let url = `/api/cms/helper/achievements/${sub}`;
     if (detail) url += `/${detail}`;
     return $cms().get(url, {
         params: {
             client,
+            ...params,
         },
     });
 }
@@ -162,3 +163,10 @@ export function getRoleGameAchievements(jx3id) {
         },
     });
 }
+
+// 获取地图列表
+export function getMapList(params) {
+    return $.get("/api/node/v2/map/list", {
+        params,
+    });
+}

src/views/cj/index.vue

@@ -15,7 +15,18 @@
                 <Sidebar :sidebar="$store.state.sidebar" />
             </CommonNav>
         </template>
-        <Search :placeholder="placeholder" @search="search($event)" />
+        <Search :placeholder="placeholder" @search="search($event)">
+            <el-cascader
+                v-model="regionId"
+                @change="onChangeMap"
+                :props="{ emitPath: false }"
+                :show-all-levels="false"
+                :options="regions"
+                filterable
+                clearable
+                placeholder="地图"
+            ></el-cascader>
+        </Search>
         <router-view />
         <template #right>
             <Info type="achievement" />
@@ -24,18 +35,23 @@
 </template>
 
 <script>
+import { getMapList } from "@/service/achievement";
 import DefaultLayout from "@/layout/default-layout.vue";
 import AchievementCount from "@/components/cj/achievement-count.vue";
 import Search from "@/components/common/search.vue";
 import Sidebar from "@/components/cj/sidebar.vue";
 import Info from "@/components/cj/extend.vue";
 import { getAppIcon } from "@jx3box/jx3box-common/js/utils";
 import CommonNav from "@/components/common/nav.vue";
+
 export default {
     name: "App",
     data() {
         return {
             placeholder: "输入成就名称/成就描述/称号/奖励物品「回车」进行搜索",
+            regionId: null,
+
+            regions: [],
         };
     },
     components: {
@@ -55,6 +71,10 @@ export default {
         $route: {
             immediate: true,
             handler() {
+                if (this.$route.query.scene) {
+                    this.regionId = Number(this.$route.query.scene);
+                }
+
                 if (!this.$route.params.sub && !this.$route.params.detail && !this.$route.params.source_id) {
                     this.$store.state.sidebar.sub = null;
                     this.$store.state.sidebar.detail = null;
@@ -70,19 +90,87 @@ export default {
         },
     },
     methods: {
+        onChangeMap(scene) {
+            if (!scene) {
+                const query = {
+                    ...this.$route.query,
+                };
+                delete query.scene;
+                this.$router.replace({ query });
+                return;
+            }
+            const query = {
+                ...this.$route.query,
+                scene,
+            };
+            if (query.scene != this.$route.query.scene) {
+                this.$router.replace({ query });
+            }
+        },
         getAppIcon,
         search(keyword) {
             delete this.$store.state.scroll_tops["search"];
-            this.$router.push({
+            const target = {
                 name: "search",
                 params: { keyword: keyword.trim().replace(/(?:^\[)|(?:\]$)/gi, "") },
+                query: this.$route.query,
+            };
+            this.$router.push(target);
+        },
+        loadMapList() {
+            const client = this.$store.state.client;
+            const params = {
+                client,
+                _no_page: 1,
+            };
+            getMapList(params).then((res) => {
+                const data = res.data.data || [];
+                this.regions = Object.values(
+                    data.reduce((acc, cur) => {
+                        if (!cur.RegionName) return acc;
+                        if (!acc[cur.RegionName]) {
+                            acc[cur.RegionName] = {
+                                value: Number(cur.Region),
+                                label: cur.RegionName,
+                                children: [],
+                            };
+                        }
+                        acc[cur.RegionName].children.push({
+                            value: Number(cur.ID),
+                            label: cur.MapName,
+                        });
+
+                        return acc;
+                    }, {})
+                );
             });
         },
     },
+    mounted() {
+        this.loadMapList();
+    },
 };
 </script>
 
 <style lang="less">
 @import "~@/assets/css/app.less";
 @import "~@/assets/css/cj/index.less";
+
+.m-cj-search {
+    .m-search .el-input-group__prepend {
+        // border: none;
+        padding: 0;
+        .el-cascader {
+            width: 140px;
+            line-height: 38px;
+        }
+
+        .el-cascader .el-input__inner {
+            border: none;
+            height: 38px;
+            line-height: 38px;
+            background-color: #f5f7fa;
+        }
+    }
+}
 </style>

src/views/cj/normal.vue

@@ -82,7 +82,11 @@ export default {
         // 获取成就列表
         get_achievements(sub, detail) {
             if (!sub) return [];
-            getMenuAchievements(sub, detail).then(
+            const params = {};
+
+            if (this.$route.query.scene) params.scene = this.$route.query.scene;
+
+            getMenuAchievements(sub, detail, params).then(
                 (data) => {
                     data = data.data;
                     const achievements =

src/views/cj/search.vue

@@ -98,6 +98,8 @@ export default {
         // 获取成就搜索列表
         get_achievements(keyword, page, length) {
             let data = { keyword: keyword, page: page };
+            if (this.$route.query.scene) data["scene"] = this.$route.query.scene;
+
             if (typeof length !== "undefined") data["limit"] = length;
             return new Promise((resolve, reject) => {
                 searchAchievements(data).then(
@@ -168,6 +170,10 @@ export default {
 
 <style lang="less">
 .m-search-view {
+    .m-normal-op {
+        .mb(20px);
+    }
+
     .m-search-op {
         padding-bottom: 10px;
         .el-checkbox {