1. 游戏分组

2. 产品归属

src/views/v1/api/center/gameGroup.js

@@ -0,0 +1,65 @@
+import { request } from "@/utils/request.js";
+
+/**
+ * 游戏分组 API接口
+ */
+export default {
+  /**
+   * 数据列表
+   * @returns
+   */
+  getPageList(params = {}) {
+    return request({
+      url: "/v1/center/GameGroup/index",
+      method: "get",
+      params,
+    });
+  },
+
+  /**
+   * 添加数据
+   * @returns
+   */
+  save(params = {}) {
+    return request({
+      url: "/v1/center/GameGroup/save",
+      method: "post",
+      data: params,
+    });
+  },
+
+  /**
+   * 更新数据
+   * @returns
+   */
+  update(id, data = {}) {
+    return request({
+      url: "/v1/center/GameGroup/update?id=" + id,
+      method: "put",
+      data,
+    });
+  },
+
+  /**
+   * 读取数据
+   * @returns
+   */
+  read(id) {
+    return request({
+      url: "/v1/center/GameGroup/read?id=" + id,
+      method: "get",
+    });
+  },
+
+  /**
+   * 删除数据
+   * @returns
+   */
+  destroy(data) {
+    return request({
+      url: "/v1/center/GameGroup/destroy",
+      method: "delete",
+      data,
+    });
+  },
+};

src/views/v1/api/center/gameMain.js

@@ -1,20 +1,19 @@
-import { request } from '@/utils/request.js'
+import { request } from "@/utils/request.js";
 
 /**
- * 主包管理 API接口
+ * 产品管理 API接口
  */
 export default {
-
   /**
    * 数据列表
    * @returns
    */
   getPageList(params = {}) {
     return request({
-      url: '/v1/center/GameMain/index',
-      method: 'get',
-      params
-    })
+      url: "/v1/center/GameMain/index",
+      method: "get",
+      params,
+    });
   },
 
   /**
@@ -23,10 +22,10 @@ export default {
    */
   save(params = {}) {
     return request({
-      url: '/v1/center/GameMain/save',
-      method: 'post',
-      data: params
-    })
+      url: "/v1/center/GameMain/save",
+      method: "post",
+      data: params,
+    });
   },
 
   /**
@@ -35,10 +34,10 @@ export default {
    */
   update(id, data = {}) {
     return request({
-      url: '/v1/center/GameMain/update?id=' + id,
-      method: 'put',
-      data
-    })
+      url: "/v1/center/GameMain/update?id=" + id,
+      method: "put",
+      data,
+    });
   },
 
   /**
@@ -47,9 +46,9 @@ export default {
    */
   read(id) {
     return request({
-      url: '/v1/center/GameMain/read?id=' + id,
-      method: 'get'
-    })
+      url: "/v1/center/GameMain/read?id=" + id,
+      method: "get",
+    });
   },
 
   /**
@@ -58,10 +57,9 @@ export default {
    */
   destroy(data) {
     return request({
-      url: '/v1/center/GameMain/destroy',
-      method: 'delete',
-      data
-    })
+      url: "/v1/center/GameMain/destroy",
+      method: "delete",
+      data,
+    });
   },
-
-}
+};

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

@@ -16,11 +16,11 @@
       :rules="rules"
       :auto-label-width="true"
     >
-      <a-form-item label="主包归属" field="main_id">
+      <a-form-item label="产品归属" field="main_id">
         <a-select
           v-model="formData.main_id"
           :options="mainGameOptions"
-          placeholder="请选择主包归属"
+          placeholder="请选择产品归属"
           :disabled="mode == 'edit'"
           allow-clear
         />
@@ -193,7 +193,7 @@ const formData = reactive({ ...initialFormData });
 
 // 验证规则
 const rules = {
-  main_id: [{ required: true, message: "主包归属必需填写" }],
+  main_id: [{ required: true, message: "产品归属必需填写" }],
   name: [{ required: true, message: "游戏名称必需填写" }],
   os: [{ required: true, message: "平台必需选择" }],
   divide: [{ required: true, message: "分成比例必需填写" }],

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

@@ -131,7 +131,7 @@ const options = reactive({
 // SaTable 列配置
 const columns = reactive([
   { title: "游戏名称", dataIndex: "name", width: 130 },
-  // { title: "主包归属", dataIndex: "main_game_name", width: 130 },
+  // { title: "产品归属", dataIndex: "main_game_name", width: 130 },
   { title: "包名", dataIndex: "package_name", width: 130 },
   {
     title: "平台",

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

@@ -0,0 +1,147 @@
+<template>
+  <component
+    is="a-modal"
+    :width="tool.getDevice() === 'mobile' ? '100%' : '600px'"
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :ok-loading="loading"
+    @cancel="close"
+    @before-ok="submit"
+  >
+    <!-- 表单信息 start -->
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :auto-label-width="true"
+    >
+      <a-form-item label="分组名" field="name">
+        <a-input v-model="formData.name" placeholder="请输入分组名" />
+      </a-form-item>
+      <a-form-item label="游戏列表" field="game_list">
+        <a-tree-select
+          v-model="formData.game_list"
+          :data="gameOptions"
+          tree-checked-strategy="child"
+          :tree-checkable="true"
+          :max-tag-count="2"
+          :fieldNames="{ title: 'name', key: 'id' }"
+          allow-search
+          allow-clear
+          placeholder="请选择游戏列表"
+        />
+      </a-form-item>
+      <a-form-item label="排序" field="sort">
+        <a-input v-model="formData.sort" placeholder="请输入排序" />
+      </a-form-item>
+    </a-form>
+    <!-- 表单信息 end -->
+  </component>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from "vue";
+import tool from "@/utils/tool";
+import { Message, Modal } from "@arco-design/web-vue";
+import api from "../../api/center/gameGroup";
+import commonApi from "../../api/common";
+
+const emit = defineEmits(["success"]);
+// 引用定义
+const visible = ref(false);
+const loading = ref(false);
+const formRef = ref();
+const mode = ref("");
+const gameOptions = ref([]);
+
+let title = computed(() => {
+  return "游戏分组" + (mode.value == "add" ? "-新增" : "-编辑");
+});
+
+// 表单初始值
+const initialFormData = {
+  id: null,
+  name: "",
+  game_list: "",
+  sort: null,
+};
+
+// 表单信息
+const formData = reactive({ ...initialFormData });
+
+// 验证规则
+const rules = {
+  name: [{ required: true, message: "分组名必需填写" }],
+};
+
+// 打开弹框
+const open = async (type = "add") => {
+  mode.value = type;
+  // 重置表单数据
+  Object.assign(formData, initialFormData);
+  formRef.value.clearValidate();
+  visible.value = true;
+  await initPage();
+};
+
+// 初始化页面数据
+const initPage = async () => {
+  await getGameList();
+};
+
+// 获取游戏列表
+const getGameList = async () => {
+  const resp = await commonApi.getGameListTreeApi();
+  if (resp.code === 200) {
+    gameOptions.value = resp.data;
+  }
+};
+
+// 设置数据
+const setFormData = async (data) => {
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      formData[key] = data[key];
+      if (key === "game_list") {
+        formData[key] = data[key].split(",").map(Number);
+      }
+    }
+  }
+};
+
+// 数据保存
+const submit = async (done) => {
+  const validate = await formRef.value?.validate();
+  if (!validate) {
+    loading.value = true;
+    let data = { ...formData };
+    let result = {};
+    if (mode.value === "add") {
+      // 添加数据
+      data.id = undefined;
+      data.game_list = data.game_list.join(",");
+      result = await api.save(data);
+    } else {
+      // 修改数据
+      data.game_list = data.game_list.join(",");
+      result = await api.update(data.id, data);
+    }
+    if (result.code === 200) {
+      Message.success("操作成功");
+      emit("success");
+      done(true);
+    }
+    // 防止连续点击提交
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+  done(false);
+};
+
+// 关闭弹窗
+const close = () => (visible.value = false);
+
+defineExpose({ open, setFormData });
+</script>

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

@@ -0,0 +1,103 @@
+<template>
+  <div class="ma-content-block">
+    <sa-table
+      ref="crudRef"
+      :options="options"
+      :columns="columns"
+      :searchForm="searchForm"
+    >
+      <!-- 搜索区 tableSearch -->
+      <template #tableSearch>
+        <a-col :sm="8" :xs="24">
+          <a-form-item label="分组名" field="name">
+            <a-input
+              v-model="searchForm.name"
+              placeholder="请输入分组名"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+      </template>
+
+      <!-- Table 自定义渲染 -->
+    </sa-table>
+
+    <!-- 编辑表单 -->
+    <edit-form ref="editRef" @success="refresh" />
+    <view-form ref="viewRef" />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive } from "vue";
+import { Message } from "@arco-design/web-vue";
+import EditForm from "./edit.vue";
+import ViewForm from "./view.vue";
+import api from "../../api/center/gameGroup";
+
+// 引用定义
+const crudRef = ref();
+const editRef = ref();
+const viewRef = ref();
+
+// 搜索表单
+const searchForm = ref({
+  name: "",
+});
+
+// SaTable 基础配置
+const options = reactive({
+  api: api.getPageList,
+  rowSelection: { showCheckedAll: true },
+  view: {
+    show: true,
+    auth: ["/v1/center/GameGroup/view"],
+    func: async (record) => {
+      viewRef.value?.open(record);
+    },
+  },
+  add: {
+    show: true,
+    auth: ["/v1/center/GameGroup/save"],
+    func: async () => {
+      editRef.value?.open();
+    },
+  },
+  edit: {
+    show: true,
+    auth: ["/v1/center/GameGroup/update"],
+    func: async (record) => {
+      editRef.value?.open("edit");
+      editRef.value?.setFormData(record);
+    },
+  },
+  delete: {
+    show: true,
+    auth: ["/v1/center/GameGroup/destroy"],
+    func: async (params) => {
+      const resp = await api.destroy(params);
+      if (resp.code === 200) {
+        Message.success(`删除成功！`);
+        crudRef.value?.refresh();
+      }
+    },
+  },
+});
+
+// SaTable 列配置
+const columns = reactive([{ title: "分组名", dataIndex: "name", width: 180 }]);
+
+// 页面数据初始化
+const initPage = async () => {};
+
+// SaTable 数据请求
+const refresh = async () => {
+  crudRef.value?.refresh();
+};
+
+// 页面加载完成执行
+onMounted(async () => {
+  initPage();
+  refresh();
+});
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <component
+    is="a-modal"
+    v-model:visible="visible"
+    :width="tool.getDevice() === 'mobile' ? '100%' : '60%'"
+    title="查看详情"
+    :footer="false"
+  >
+    <!-- 详情 start -->
+    <a-form>
+      <a-form-item label="分组名">
+        {{ formData?.name }}
+      </a-form-item>
+      <a-form-item label="游戏列表">
+        <div class="flex flex-wrap">
+          <a-tag
+            class="mr-2 mb-2"
+            v-for="game in formData?.game_list_str"
+            :key="game"
+            color="blue"
+            >{{ game }}</a-tag
+          >
+        </div>
+      </a-form-item>
+      <a-form-item label="排序">
+        {{ formData?.sort }}
+      </a-form-item>
+    </a-form>
+    <!-- 详情 end -->
+  </component>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import tool from "@/utils/tool";
+import api from "../../api/center/gameGroup";
+
+const emit = defineEmits(["success"]);
+
+// 引用定义
+const rowData = ref();
+const formData = ref();
+const visible = ref(false);
+const loading = ref(false);
+
+// 打开弹框
+const open = async (record) => {
+  rowData.value = record;
+  formData.value = {};
+  visible.value = true;
+  await initPage();
+};
+
+// 初始化页面数据
+const initPage = async () => {
+  loading.value = true;
+  const resp = await api.read(rowData.value?.id);
+  if (resp.code === 200) {
+    formData.value = resp.data;
+  }
+  loading.value = false;
+};
+
+defineExpose({ open });
+</script>

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

@@ -51,7 +51,7 @@ const formRef = ref();
 const mode = ref("");
 
 let title = computed(() => {
-  return "主包管理" + (mode.value == "add" ? "-新增" : "-编辑");
+  return "产品管理" + (mode.value == "add" ? "-新增" : "-编辑");
 });
 
 // 表单初始值