fix

src/assets/icons/svg/auth.svg

@@ -0,0 +1 @@
+<svg t="1692240958741" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2513" width="48" height="48"><path d="M841.922298 89.128417L549.846066 5.419971a138.510378 138.510378 0 0 0-76.481818 0L181.890235 89.128417A120.443807 120.443807 0 0 0 90.352941 204.754472v425.16664A408.304506 408.304506 0 0 0 511.906266 1023.772361a408.304506 408.304506 0 0 0 421.553326-393.851249V204.754472a120.443807 120.443807 0 0 0-91.537294-115.626055zM198.752368 146.941445l291.474013-83.708446a78.288475 78.288475 0 0 1 42.757552 0l292.076232 83.708446a60.221904 60.221904 0 0 1 48.177523 60.221903v46.973085a151.156978 151.156978 0 0 0-46.370866-23.486542L556.470475 143.93035a149.350321 149.350321 0 0 0-88.526198 0l-271.600785 84.310665a151.156978 151.156978 0 0 0-45.768647 23.486542V204.754472a60.221904 60.221904 0 0 1 48.177523-57.813027z m674.48532 481.775229A348.684822 348.684822 0 0 1 511.906266 963.550458a348.684822 348.684822 0 0 1-361.331421-333.629346V374.58024a90.332855 90.332855 0 0 1 63.835218-89.128417l270.998566-83.708446a88.526198 88.526198 0 0 1 52.995275 0l270.998566 83.708446A90.332855 90.332855 0 0 1 873.237688 372.171364v120.443807z" fill="" p-id="2514"></path><path d="M699.196387 402.884535l-219.809949 274.611881-156.576949-156.57695a30.110952 30.110952 0 0 0-42.757551 42.757552l180.66571 180.66571a30.110952 30.110952 0 0 0 16.862133 6.022191 30.110952 30.110952 0 0 0 12.044381 0h3.613314l6.022191-3.613314 240.887614-301.109518a30.110952 30.110952 0 0 0-46.973085-37.337581z" fill="" p-id="2515"></path></svg>

src/views/system/gameGroup/index.vue

@@ -2,37 +2,18 @@
     <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-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 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-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
             </el-form-item>
         </el-form>
 
@@ -41,53 +22,37 @@
             <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>
+                    <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>
+                    <el-button type="text" size="mini" icon="el-icon-copy-document"
+                        @click="handleEdit(scope.row, 'copy')">复制</el-button>
+                    <el-button type="text" size="mini" icon="el-icon-edit"
+                        @click="handleEdit(scope.row, 'edit')">编辑</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"
-        />
+        <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-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-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 class="transfer" filterable filter-placeholder="请输入组员" v-model="form.memberUserIds"
+                            :titles="['所有人', '组员']" :data="data">
                         </el-transfer>
                     </el-form-item>
                 </el-col>
@@ -101,148 +66,159 @@
 </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();
+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,
             },
-            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,
-                    }));
-                })
+            loading: false,
+            total: 0,
+            list: [],
+            // 新增或修改的弹窗
+            dialogTitle: '',
+            dialogVisible: false,
+            userList: [],
+            form: {
+                memberUserIds: []
             },
-            handleAdd() {
-                this.form = {};
-                this.dialogTitle = '新增分组';
-                this.dialogVisible = true;
+            // 表单校验
+            rules: {
+                groupName: [
+                    { required: true, message: "分组名称不能为空", trigger: "blur" }
+                ],
+                groupUserId: [
+                    { required: true, message: "请选择分组组长", trigger: "blur" }
+                ],
             },
-            handleEdit(row) {
-                userGroupDetails(row.id).then(res => {
-                    let { memberUserInfo } = res.data
-                    this.$set(this.form, 'memberUserIds', memberUserInfo.map(item => item.userId))
+            data: [],
+            userAll: [],
+            editType: 'add'
+        }
+    },
+    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.editType = 'add'
+            this.form = {};
+            this.dialogTitle = '新增分组';
+            this.dialogVisible = true;
+        },
+        handleEdit(row, type) {
+            this.editType = type
+            userGroupDetails(row.id).then(res => {
+                let { memberUserInfo } = res.data
+                this.$set(this.form, 'memberUserIds', memberUserInfo.map(item => item.userId))
+            })
 
+            if (type === 'copy') {
+                this.dialogTitle = '复制分组';
+                this.form = {
+                    groupName: row.groupName + '_Copy'
+                };
+            } else {
+                this.dialogTitle = '修改分组';
                 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();
-                            })
-                        }
+            }
+            this.dialogVisible = true;
+        },
+        // 提交保存
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.id && this.editType !== 'copy') {
+                        // 修改
+                        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");
-            },
-        }
+                }
+            });
+        },
+        // 取消按钮
+        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;
-            }
+.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

@@ -2,37 +2,18 @@
     <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-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 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-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
             </el-form-item>
         </el-form>
 
@@ -41,53 +22,37 @@
             <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>
+                    <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>
+                    <el-button type="text" size="mini" icon="el-icon-copy-document"
+                        @click="handleEdit(scope.row, 'copy')">复制</el-button>
+                    <el-button type="text" size="mini" icon="el-icon-edit"
+                        @click="handleEdit(scope.row, 'edit')">编辑</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"
-        />
+        <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-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-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 class="transfer" filterable filter-placeholder="请输入组员" v-model="form.memberUserIds"
+                            :titles="['所有人', '组员']" :data="data">
                         </el-transfer>
                     </el-form-item>
                 </el-col>
@@ -101,148 +66,160 @@
 </template>
 
 <script>
-    import { allUser } from '@/api/system/user';
-    import { getList, addGroup, updateGroup, userGroupDetails } from '@/api/system/group';
-    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();
+import { allUser } from '@/api/system/user';
+import { getList, addGroup, updateGroup, userGroupDetails } from '@/api/system/group';
+export default {
+    name: "index",
+    data() {
+        return {
+            showSearch: true,
+            // 查询参数
+            queryParams: {
+                groupName: '',
+                groupUserId: '',
+                pageNum: 1,
+                pageSize: 10,
             },
-            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,
-                    }));
-                })
+            loading: false,
+            total: 0,
+            list: [],
+            // 新增或修改的弹窗
+            dialogTitle: '',
+            dialogVisible: false,
+            userList: [],
+            form: {
+                memberUserIds: []
             },
-            handleAdd() {
-                this.form = {};
-                this.dialogTitle = '新增分组';
-                this.dialogVisible = true;
+            // 表单校验
+            rules: {
+                groupName: [
+                    { required: true, message: "分组名称不能为空", trigger: "blur" }
+                ],
+                groupUserId: [
+                    { required: true, message: "请选择分组组长", trigger: "blur" }
+                ],
             },
-            handleEdit(row) {
-                userGroupDetails(row.id).then(res => {
-                    let { memberUserInfo } = res.data
-                    this.$set(this.form, 'memberUserIds', memberUserInfo.map(item => item.userId))
+            data: [],
+            userAll: [],
+            editType: 'add'
+        }
+    },
+    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.editType = 'add'
+            this.form = {};
+            this.dialogTitle = '新增分组';
+            this.dialogVisible = true;
+        },
+        handleEdit(row, type) {
+            this.editType = type
+            userGroupDetails(row.id).then(res => {
+                let { memberUserInfo } = res.data
+                this.$set(this.form, 'memberUserIds', memberUserInfo.map(item => item.userId))
+            })
+
 
+            if (type === 'copy') {
+                this.dialogTitle = '复制分组';
+                this.form = {
+                    groupName: row.groupName + '_Copy'
+                };
+            } else {
+                this.dialogTitle = '修改分组';
                 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();
-                            })
-                        }
+            }
+            this.dialogVisible = true;
+        },
+        // 提交保存
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.id && this.editType !== 'copy') {
+                        // 修改
+                        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");
-            },
-        }
+                }
+            });
+        },
+        // 取消按钮
+        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;
-            }
+.transfer {
+    &>.el-transfer__buttons {
+        display: inline-flex !important;
+        flex-direction: column !important;
+        padding: 0 10px !important;
+
+        .el-button+.el-button {
+            margin-left: 0;
         }
     }
+}
 </style>