fix

src/api/system/gameGroup.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 获取全部用户组
+export function getGroupAll() {
+    return request({
+        url: '/erp/gameUserGroup/all',
+        method: 'get',
+    })
+}
+
+// 分页查询用户组
+export function getList(params) {
+    return request({
+        url: '/erp/gameUserGroup/list',
+        method: 'post',
+        data: params,
+    })
+}
+
+// 获取用户组详情
+export function getDetail(groupId) {
+    return request({
+        url: '/erp/gameUserGroup/detail/' + groupId,
+        method: 'get',
+    })
+}
+
+// 新增用户组
+export function addGroup(data) {
+    return request({
+        url: '/erp/gameUserGroup/add',
+        method: 'post',
+        data,
+    })
+}
+
+// 修改用户组
+export function updateGroup(groupId, data) {
+    return request({
+        url: '/erp/gameUserGroup/modify/' + groupId,
+        method: 'put',
+        data,
+    })
+}
+
+// 用户组详情
+export function userGroupDetails(groupId) {
+    return request({
+        url: '/erp/gameUserGroup/detail/' + groupId,
+        method: 'GET'
+    })
+}

src/api/system/group.js

@@ -43,14 +43,6 @@ export function updateGroup(groupId, data) {
     })
 }
 
-// 删除用户组
-export function deleteGroup(groupId) {
-    return request({
-        url: '/erp/userGroup/delete/' + groupId,
-        method: 'delete'
-    })
-}
-
 // 用户组详情
 export function userGroupDetails(groupId) {
     return request({

src/assets/icons/svg/game.svg

@@ -1 +1 @@
-<svg t="1658127644059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3048" width="128" height="128"><path d="M725.333333 149.333333c141.376 0 256 114.624 256 256v298.666667a170.666667 170.666667 0 1 1-341.333333 0v-42.666667H383.978667L384 704a170.666667 170.666667 0 1 1-341.333333 0V405.333333C42.666667 263.957333 157.290667 149.333333 298.666667 149.333333h426.666666z m-21.333333 64H320c-115.84 0-210.090667 92.309333-213.248 207.36L106.666667 426.666667v277.333333a106.666667 106.666667 0 0 0 213.226666 4.629333L320 704v-85.333333a21.333333 21.333333 0 0 1 21.333333-21.333334h341.333334a21.333333 21.333333 0 0 1 21.333333 21.333334v85.333333a106.666667 106.666667 0 0 0 213.226667 4.629333L917.333333 704V426.666667c0-117.824-95.509333-213.333333-213.333333-213.333334z m10.666667 256a32 32 0 1 1 0 64 32 32 0 0 1 0-64z m-405.333334-128a32 32 0 0 1 32 32V405.333333h32a32 32 0 0 1 0 64H341.333333v32a32 32 0 0 1-64 0V469.333333h-32a32 32 0 0 1 0-64H277.333333v-32a32 32 0 0 1 32-32z m469.333334 64a32 32 0 1 1 0 64 32 32 0 0 1 0-64z m-128 0a32 32 0 1 1 0 64 32 32 0 0 1 0-64z m64-64a32 32 0 1 1 0 64 32 32 0 0 1 0-64z" fill="#4E4E4E" p-id="3049"></path></svg>
+<svg t="1658127644059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3048" width="128" height="128"><path d="M725.333333 149.333333c141.376 0 256 114.624 256 256v298.666667a170.666667 170.666667 0 1 1-341.333333 0v-42.666667H383.978667L384 704a170.666667 170.666667 0 1 1-341.333333 0V405.333333C42.666667 263.957333 157.290667 149.333333 298.666667 149.333333h426.666666z m-21.333333 64H320c-115.84 0-210.090667 92.309333-213.248 207.36L106.666667 426.666667v277.333333a106.666667 106.666667 0 0 0 213.226666 4.629333L320 704v-85.333333a21.333333 21.333333 0 0 1 21.333333-21.333334h341.333334a21.333333 21.333333 0 0 1 21.333333 21.333334v85.333333a106.666667 106.666667 0 0 0 213.226667 4.629333L917.333333 704V426.666667c0-117.824-95.509333-213.333333-213.333333-213.333334z m10.666667 256a32 32 0 1 1 0 64 32 32 0 0 1 0-64z m-405.333334-128a32 32 0 0 1 32 32V405.333333h32a32 32 0 0 1 0 64H341.333333v32a32 32 0 0 1-64 0V469.333333h-32a32 32 0 0 1 0-64H277.333333v-32a32 32 0 0 1 32-32z m469.333334 64a32 32 0 1 1 0 64 32 32 0 0 1 0-64z m-128 0a32 32 0 1 1 0 64 32 32 0 0 1 0-64z m64-64a32 32 0 1 1 0 64 32 32 0 0 1 0-64z" p-id="3049"></path></svg>

src/assets/icons/svg/gameServer.svg

@@ -1 +1 @@
-<svg t="1691406231914" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3608" id="mx_n_1691406231915" width="1em" height="1em"><path d="M326.8096 480.8704c0 9.3184 6.2464 15.5648 15.5648 15.5648h133.8368c9.3184 0 15.5648-6.2464 15.5648-15.5648v-34.2528H326.8096v34.2528z" p-id="3609"></path><path d="M917.0432 106.9568C834.816 22.016 686.8992 2.7648 512 0 337.1008 2.7648 189.184 22.016 106.9568 106.9568 22.016 189.184 2.7648 337.1008 0 512c2.7648 174.8992 22.016 322.816 106.9568 405.0432C189.184 1001.984 337.1008 1021.2352 512 1024c174.8992-2.7648 322.816-22.016 405.0432-106.9568 84.992-82.176 104.2432-230.0928 106.9568-405.0432-2.7648-174.8992-22.016-322.816-106.9568-405.0432z m-353.6896 654.0288H295.68c-18.688 0-34.2528-15.5648-34.2528-34.2528V297.216c0-18.688 15.5648-34.2528 34.2528-34.2528h233.4208c18.688 0 34.2528 15.5648 34.2528 34.2528v463.7696z m199.2192-31.1296c-3.1232 15.5648-18.688 31.1296-37.3248 31.1296h-130.7136V396.8512h133.8368c18.688 0 34.2528 15.5648 34.2528 34.2528v298.752z" p-id="3610"></path><path d="M644.3008 577.3824c0 9.3184 6.2464 15.5648 15.5648 15.5648h34.2528c9.3184 0 15.5648-6.2464 15.5648-15.5648v-31.1296l-65.3824-3.1232v34.2528zM342.3744 396.8512h133.8368c9.3184 0 15.5648-6.2464 15.5648-15.5648v-34.2528H326.8096v34.2528c0 9.3184 6.2464 15.5648 15.5648 15.5648zM644.3008 496.4352c0 9.3184 6.2464 15.5648 15.5648 15.5648h34.2528c9.3184 0 15.5648-6.2464 15.5648-15.5648v-31.1296l-65.3824-3.1232v34.2528z" p-id="3611"></path></svg>
+<svg t="1692066479746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7037" width="48" height="48"><path d="M85.333333 0h853.333334v42.666667H85.333333zM85.333333 213.333333h853.333334v42.666667H85.333333zM85.333333 42.666667h42.666667v170.666666H85.333333zM896 42.666667h42.666667v170.666666h-42.666667z" fill="#2E2F30" p-id="7038"></path><path d="M213.333333 106.666667h42.666667v42.666666H213.333333z" fill="#3A3B3D" p-id="7039"></path><path d="M85.333333 426.666667h853.333334v42.666666H85.333333zM85.333333 256h42.666667v170.666667H85.333333zM896 256h42.666667v170.666667h-42.666667z" fill="#2E2F30" p-id="7040"></path><path d="M213.333333 320h42.666667v42.666667H213.333333z" fill="#3A3B3D" p-id="7041"></path><path d="M85.333333 640h853.333334v42.666667H85.333333zM85.333333 469.333333h42.666667v170.666667H85.333333zM896 469.333333h42.666667v170.666667h-42.666667z" fill="#2E2F30" p-id="7042"></path><path d="M213.333333 533.333333h42.666667v42.666667H213.333333z" fill="#3A3B3D" p-id="7043"></path><path d="M384 810.666667h42.666667v213.333333H384zM597.333333 810.666667v42.666666h-170.666666v-42.666666zM597.333333 981.333333v42.666667h-170.666666v-42.666667zM597.333333 810.666667h42.666667v213.333333h-42.666667z" fill="#2E2F30" p-id="7044"></path><path d="M0 896h426.666667v42.666667H0zM597.333333 896h426.666667v42.666667H597.333333z" fill="#2E2F30" p-id="7045"></path><path d="M490.666667 682.666667h42.666666v128h-42.666666z" fill="#3A3B3D" p-id="7046"></path></svg>

src/layout/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <div></div>
     <sidebar class="sidebar-container" />
-    <div :class="{hasTagsView:needTagsView}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
+    <div :class="{ hasTagsView: needTagsView }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }">
         <navbar />
         <tags-view v-if="needTagsView" />
       </div>
@@ -64,55 +65,86 @@ export default {
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    },
+    canvas(dom, txt) {
+      if (!dom) return false;
+      let length = txt?.length * 50 > 247 ? txt?.length * 50 : 247; // 根据内容生成画布大小，20代表比例
+      let canvas = document.createElement('canvas');
+      canvas.id = 'myCanvas'
+      canvas.width = length;
+      canvas.id = 'myCanvas'
+      canvas.height = 150;
+      canvas.style.display = 'none';
+      document.body.appendChild(canvas);
+      let context = canvas.getContext('2d');
+      canvas.style.letterSpacing = 3 + 'px';
+      context.font = '30px "PingFangSC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif';
+      context.fillStyle = 'rgba(255,0,0,0.06)';
+      context.rotate((-13 * Math.PI) / 80); // 画布里面文字的旋转角度
+      context.fillText(txt, (length - txt.length * 13) / 2, length / 2 + 20); // 文字的位置
+      dom.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
+      return;
     }
   },
   created() {
     // 刷新页面后重新从服务器加载用户信息
-    this.$store.dispatch('GetInfo');
+    this.$store.dispatch('GetInfo').then(res => {
+      let div = document.createElement('div');
+      div.style = `width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 10000; pointer-events: none; background-color:rgba(0,0,0,.03); background-repeat: round;`;
+      this.$nextTick(() => {
+        let main = document.getElementById('app');
+        if (main) {
+          main.appendChild(div);
+          this.canvas(div, res.data.userInfo.nickname);
+          let myCanvas = document.getElementById('myCanvas')
+          document.body.removeChild(myCanvas)
+        }
+      })
+    });
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
-
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px)
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>

src/views/system/gameGroup/index.vue

@@ -0,0 +1,248 @@
+<template>
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+            <el-form-item label="分组名称" prop="groupName">
+                <el-input
+                    v-model="queryParams.groupName"
+                    placeholder="请输入分组名称"
+                    clearable
+                    @keyup.enter.native="handleQuery"
+                />
+            </el-form-item>
+            <el-form-item label="组长" prop="groupUserId">
+                <el-select
+                    v-model="queryParams.groupUserId"
+                    placeholder="请选择组长"
+                    clearable
+                    filterable
+                    style="width: 140px"
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in userAll"
+                        :key="item.id"
+                        :label="item.nickname"
+                        :value="item.id"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+                <el-button
+                    type="primary"
+                    icon="el-icon-plus"
+                    @click="handleAdd"
+                >新增</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-table v-loading="loading" :data="list" row-key="groupId">
+            <el-table-column label="ID" prop="id" width="100px"></el-table-column>
+            <el-table-column label="分组名称" prop="groupName"></el-table-column>
+            <el-table-column label="组长" prop="nickname">
+                <template slot-scope="scope">
+                    <span>{{scope.row.groupUserInfo ? scope.row.groupUserInfo.nickname : ''}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="120px" align="center">
+                <template slot-scope="scope">
+                    <el-button
+                        type="text"
+                        size="mini"
+                        icon="el-icon-edit"
+                        @click="handleEdit(scope.row)"
+                        
+                    >编辑</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+        />
+
+        <!-- 添加或修改菜单对话框 -->
+        <el-dialog :title="dialogTitle" v-if="dialogVisible" :visible.sync="dialogVisible" width="610px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-col :span="24">
+                    <el-form-item label="分组名称" prop="groupName">
+                        <el-input v-model="form.groupName" placeholder="请输入分组名称"/>
+                    </el-form-item>
+                    <el-form-item label="分组组长" prop="groupUserId">
+                        <el-select v-model="form.groupUserId" filterable clearable>
+                            <el-option
+                                v-for="user in userList"
+                                :key="user.id"
+                                :label="user.remark ? user.name + ' - ' + user.remark : user.name"
+                                :value="user.id"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="组员" prop="memberUserIds">
+                        <el-transfer
+                            class="transfer"
+                            filterable
+                            filter-placeholder="请输入组员"
+                            v-model="form.memberUserIds"
+                            :titles="['所有人', '组员']"
+                            :data="data">
+                        </el-transfer>
+                    </el-form-item>
+                </el-col>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import { allUser } from '@/api/system/user';
+    import { getList, addGroup, updateGroup, userGroupDetails } from '@/api/system/gameGroup';
+    export default {
+        name: "index",
+        data() {
+            return {
+                showSearch: true,
+                // 查询参数
+                queryParams: {
+                    groupName: '',
+                    groupUserId: '',
+                    pageNum: 1,
+                    pageSize: 10,
+                },
+                loading: false,
+                total: 0,
+                list: [],
+                // 新增或修改的弹窗
+                dialogTitle: '',
+                dialogVisible: false,
+                userList: [],
+                form: {
+                    memberUserIds: []
+                },
+                // 表单校验
+                rules: {
+                    groupName: [
+                        {required: true, message: "分组名称不能为空", trigger: "blur"}
+                    ],
+                    groupUserId: [
+                        {required: true, message: "请选择分组组长", trigger: "blur"}
+                    ],
+                },
+                data: [],
+                userAll: []
+            }
+        },
+        created() {
+            this.getList();
+            this.getUserList();
+        },
+        methods: {
+            /** 搜索按钮操作 */
+            handleQuery() {
+                this.getList();
+            },
+            getList() {
+                this.loading = true;
+                getList(this.queryParams).then(res => {
+                    this.total = res.data.total;
+                    this.list = res.data.records;
+                    this.loading = false;
+                })
+                allUser().then(response => {
+                    let data = response.data
+                    this.userAll = data.map((item) => {
+                        return { id: item.userId, nickname: item.nickname }
+                    })
+                })
+            },
+            getUserList() {
+                allUser().then(res => {
+                    this.userList = res.data.map(item => ({
+                        id: item.userId,
+                        name: item.nickname,
+                        remark: item.remark,
+                    }));
+                    let resData = res.data.filter(item => item.userId !== 1)
+                    this.data = resData.map(item => ({
+                        key: item.userId,
+                        label: item.nickname,
+                    }));
+                })
+            },
+            handleAdd() {
+                this.form = {};
+                this.dialogTitle = '新增分组';
+                this.dialogVisible = true;
+            },
+            handleEdit(row) {
+                userGroupDetails(row.id).then(res => {
+                    let { memberUserInfo } = res.data
+                    this.$set(this.form, 'memberUserIds', memberUserInfo.map(item => item.userId))
+                })
+
+                this.form = {
+                    id: row.id,
+                    groupName: row.groupName,
+                    groupUserId: row.groupUserId,
+                };
+                this.dialogTitle = '修改分组';
+                this.dialogVisible = true;
+            },
+            // 提交保存
+            submitForm() {
+                this.$refs["form"].validate(valid => {
+                    if (valid) {
+                        if (this.form.id) {
+                            // 修改
+                            updateGroup(this.form.id, this.form).then(res => {
+                                this.dialogVisible = false;
+                                this.reset();
+                                this.getList();
+                            })
+                        } else {
+                            // 新增
+                            addGroup(this.form).then(res => {
+                                this.dialogVisible = false;
+                                this.reset();
+                                this.getList();
+                            })
+                        }
+                    }
+                });
+            },
+            // 取消按钮
+            cancel() {
+                this.dialogVisible = false;
+                this.reset();
+            },
+            // 表单重置
+            reset() {
+                this.form = {
+                    id: undefined,
+                    groupName: undefined,
+                    groupUserId: undefined,
+                };
+                this.resetForm("form");
+            },
+        }
+    }
+</script>
+
+<style lang="scss">
+    .transfer{
+        &>.el-transfer__buttons{
+            display: inline-flex !important;
+            flex-direction: column !important;
+            padding: 0 10px !important;
+            .el-button + .el-button{
+                margin-left: 0;
+            }
+        }
+    }
+</style>

src/views/system/group/index.vue

@@ -53,13 +53,6 @@
                         @click="handleEdit(scope.row)"
                         
                     >编辑</el-button>
-                    <el-button
-                        type="text"
-                        size="mini"
-                        icon="el-icon-delete"
-                        @click="handleDelete(scope.row)"
-                        
-                    >删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -109,7 +102,7 @@
 
 <script>
     import { allUser } from '@/api/system/user';
-    import { getList, addGroup, updateGroup, deleteGroup, userGroupDetails } from '@/api/system/group';
+    import { getList, addGroup, updateGroup, userGroupDetails } from '@/api/system/group';
     export default {
         name: "index",
         data() {
@@ -201,14 +194,6 @@
                 this.dialogTitle = '修改分组';
                 this.dialogVisible = true;
             },
-            handleDelete(row) {
-                this.$confirm('确定删除此分组吗？').then(() => {
-                    deleteGroup(row.id).then(res => {
-                        this.$message.success('删除成功!');
-                        this.getList();
-                    })
-                })
-            },
             // 提交保存
             submitForm() {
                 this.$refs["form"].validate(valid => {