游戏分组

src/components/game-select/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <a-tree-select
+    :model-value="modelValue"
+    @update:model-value="onUpdate"
+    :data="gameListTree"
+    tree-checked-strategy="child"
+    :tree-checkable="multiple"
+    :max-tag-count="2"
+    :fieldNames="{ title: 'name', key: 'id' }"
+    allow-search
+    allow-clear
+    placeholder="请选择游戏"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted, defineProps, defineEmits } from "vue";
+import commonApi from "../../views/v1/api/common";
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Array],
+    default: "",
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const gameListTree = ref([]);
+
+const onUpdate = (val) => {
+  emit("update:modelValue", val);
+};
+
+const fetchGameList = async () => {
+  // 这里替换为你的实际API请求
+  // const response = await api.getGameList()
+  // gameListTree.value = response.data
+  const response = await commonApi.getGameOptionsApi();
+  gameListTree.value = response.data;
+
+  if (!props.multiple) {
+    gameListTree.value = response.data.map((item) => {
+      return {
+        ...item,
+        disabled: true,
+        children: item.children || [],
+      };
+    });
+  }
+
+  // // 示例数据
+  // gameListTree.value = [
+  //   {
+  //     id: 1,
+  //     name: "游戏分类1",
+  //     children: [
+  //       { id: 11, name: "游戏1" },
+  //       { id: 12, name: "游戏2" },
+  //     ],
+  //   },
+  //   {
+  //     id: 2,
+  //     name: "游戏分类2",
+  //     children: [
+  //       { id: 21, name: "游戏3" },
+  //       { id: 22, name: "游戏4" },
+  //     ],
+  //   },
+  // ];
+};
+
+onMounted(fetchGameList);
+</script>

src/views/v1/api/common.js

@@ -98,4 +98,26 @@ export default {
       params,
     });
   },
+
+  /**
+   * 获取游戏列表
+   */
+  getGameListOptionsApi(params = {}) {
+    return request({
+      url: "/v1/common/getGameListOptions",
+      method: "get",
+      params,
+    });
+  },
+
+  /**
+   * 给游戏分组用的游戏列表
+   */
+  getGameListOptionsByGroupApi(params = {}) {
+    return request({
+      url: "/v1/common/getGameListOptionsByGroup",
+      method: "get",
+      params,
+    });
+  },
 };

src/views/v1/center/gameGroup/edit.vue

@@ -87,12 +87,24 @@ const open = async (type = "add") => {
 
 // 初始化页面数据
 const initPage = async () => {
-  await getGameList();
+  if (mode.value === "add") {
+    await getGameListOptionsByGroupApi();
+  } else {
+    await getGameList();
+  }
+};
+
+// 新增显示的游戏列表
+const getGameListOptionsByGroupApi = async () => {
+  const resp = await commonApi.getGameListOptionsByGroupApi();
+  if (resp.code === 200) {
+    gameOptions.value = resp.data;
+  }
 };
 
 // 获取游戏列表
 const getGameList = async () => {
-  const resp = await commonApi.getGameListTreeApi();
+  const resp = await commonApi.getGameListTreeNoAuthApi();
   if (resp.code === 200) {
     gameOptions.value = resp.data;
   }

src/views/v1/center/iosPayWay/index.vue

@@ -10,18 +10,7 @@
       <template #tableSearch>
         <a-col :span="8">
           <a-form-item label="游戏" name="game_id">
-            <a-tree-select
-              v-model="searchForm.game_id"
-              :data="gameListTree"
-              tree-checked-strategy="child"
-              :tree-checkable="false"
-              :max-tag-count="2"
-              :fieldNames="{ title: 'name', key: 'id' }"
-              allow-search
-              allow-clear
-              placeholder="请选择游戏"
-            >
-            </a-tree-select>
+            <game-select v-model="searchForm.game_id" multiple />
           </a-form-item>
         </a-col>
       </template>
@@ -43,6 +32,7 @@ import { Message } from "@arco-design/web-vue";
 import EditForm from "./edit.vue";
 import api from "../../api/center/iosPayWay";
 import commonApi from "../../api/common";
+import GameSelect from "@/components/game-select/index.vue";
 
 // 引用定义
 const crudRef = ref();