fix

src/api/system/userBusinessGroup.js

@@ -0,0 +1,94 @@
+import request from '@/utils/request'
+
+/**
+ * 查询所有用户组
+ * @returns 
+ */
+export function getGroupAll() {
+    return request({
+        url: '/erp/userBusinessGroup/all',
+        method: 'get',
+    })
+}
+
+/**
+ * 分页查询用户组
+ * @param {*} params 
+ * @returns 
+ */
+export function getUserGroupList(params) {
+    for (const key in params) {
+        if (params[key] === null || params[key] === undefined || params[key] === '') {
+            delete params[key];
+        }
+    }
+    return request({
+        url: '/erp/userBusinessGroup/list',
+        method: 'post',
+        data: params,
+    })
+}
+
+/**
+ * 获取用户组详情
+ * @param {*} groupId 
+ * @returns 
+ */
+export function getUserGroupDetail(groupId) {
+    return request({
+        url: '/erp/userBusinessGroup/detail/' + groupId,
+        method: 'get',
+    })
+}
+
+/**
+ * 获取业务类型
+ * @returns 
+ */
+export function getUserGroupBusinessTypeAll() {
+    return request({
+        url: '/erp/userBusinessGroup/business/all',
+        method: 'get',
+    })
+}
+
+/**
+ * 新增用户组
+ * @param {*} data 
+ * @returns 
+ */
+export function addUserGroup(data) {
+    return request({
+        url: '/erp/userBusinessGroup/add',
+        method: 'post',
+        data,
+    })
+}
+
+
+
+/**
+ * 修改用户组
+ * @param {*} groupId 
+ * @param {*} data 
+ * @returns 
+ */
+export function updateUserGroup(groupId, data) {
+    return request({
+        url: '/erp/userBusinessGroup/modify/' + groupId,
+        method: 'put',
+        data,
+    })
+}
+
+/**
+ * 删除
+ * @param {*} groupId 
+ * @returns 
+ */
+export function delUserGroup(groupId) {
+    return request({
+        url: '/erp/userBusinessGroup/del/' + groupId,
+        method: 'DELETE'
+    })
+}

src/assets/icons/svg/pa.svg

@@ -0,0 +1 @@
+<svg viewBox="64 64 896 896" focusable="false" data-icon="fund-view" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 736v-64a80 80 0 0 0-160 0v64a64.19 64.19 0 0 0-64 64v96a64.19 64.19 0 0 0 64 64h160a64.19 64.19 0 0 0 64-64v-96a64.19 64.19 0 0 0-64-64z m-32 0h-96v-64a48 48 0 0 1 96 0z" fill="#231815" p-id="5332"></path><path d="M934.28 442.85l-97.59-19.52a32.13 32.13 0 0 1-23.86-20.62Q808 389.37 802 376.59a32.15 32.15 0 0 1 2.28-31.48l55.21-82.81a32 32 0 0 0-4-40.38l-53.41-53.41a32 32 0 0 0-40.38-4l-82.81 55.21a32.15 32.15 0 0 1-31.48 2.28q-12.77-6-26.13-10.82a32.13 32.13 0 0 1-20.62-23.86l-19.52-97.6A32 32 0 0 0 549.77 64h-75.54a32 32 0 0 0-31.38 25.72l-19.52 97.59a32.13 32.13 0 0 1-20.62 23.86Q389.37 216 376.59 222a32.15 32.15 0 0 1-31.48-2.28l-82.81-55.21a32 32 0 0 0-40.38 4l-53.41 53.41a32 32 0 0 0-4 40.38l55.21 82.81a32.15 32.15 0 0 1 2.28 31.48q-6 12.77-10.82 26.13a32.13 32.13 0 0 1-23.86 20.62l-97.6 19.51A32 32 0 0 0 64 474.23v75.53a32 32 0 0 0 25.72 31.38l97.59 19.52a32.13 32.13 0 0 1 23.86 20.62Q216 634.63 222 647.41a32.15 32.15 0 0 1-2.28 31.48l-55.21 82.81a32 32 0 0 0 4 40.38l53.41 53.41a32 32 0 0 0 40.38 4l82.81-55.21a32.15 32.15 0 0 1 31.48-2.28q12.77 6 26.13 10.82a32.13 32.13 0 0 1 20.62 23.86l19.52 97.59A32 32 0 0 0 474.23 960h75.53A32 32 0 0 0 576 946.32v-253.2a191.7 191.7 0 1 1 124.24-143A219.59 219.59 0 0 1 752 544c52.64 0 99.88 18.25 132.13 47.17l50.15-10a32 32 0 0 0 25.72-31.4v-75.54a32 32 0 0 0-25.72-31.38z" fill="currentColor" p-id="5333"></path></svg>

src/views/system/userBusinessGroup/index.vue

@@ -0,0 +1,280 @@
+<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 label="业务类型" prop="businessGroup">
+                <el-select v-model="queryParams.businessGroup" placeholder="请选择" clearable filterable style="width: 140px"
+                    size="small">
+                    <el-option v-for="item in businessGroupList" :key="item.id" :label="item.name" :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="业务类型" prop="businessGroup">
+                <template slot-scope="scope">
+                    <span>{{scope.row.businessGroupName}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                    <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>
+                    <el-button type="text" size="mini" style="color: red;" icon="el-icon-delete"
+                        @click="handleDel(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="businessGroup">
+                        <el-select v-model="form.businessGroup" filterable clearable>
+                            <el-option v-for="bg in businessGroupList" :key="bg.id"
+                                :label="bg.name" :value="bg.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" :loading="addLoading">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { allUser } from '@/api/system/user';
+import { getUserGroupList, addUserGroup, updateUserGroup, getUserGroupDetail, getUserGroupBusinessTypeAll, delUserGroup } from '@/api/system/userBusinessGroup';
+export default {
+    name: "index",
+    data() {
+        return {
+            showSearch: true,
+            // 查询参数
+            queryParams: {
+                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" }
+                ],
+                businessGroup: [
+                    { required: true, message: "请选择业务类型", trigger: "blur" }
+                ],
+            },
+            data: [],
+            userAll: [],
+            editType: 'add',
+            businessGroupList: [],
+            addLoading: false
+        }
+    },
+    created() {
+        this.getList();
+        this.getUserList();
+    },
+    methods: {
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.getList();
+        },
+        getList() {
+            this.loading = true;
+            getUserGroupList(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,
+                }));
+            })
+            getUserGroupBusinessTypeAll().then(res => { 
+                if (res?.data) {
+                    console.log('---->', Object.keys(res.data).map(key => ({
+                        key: key,
+                        label: res.data[key]
+                    })))
+                    const data = Object.keys(res.data).map(key => ({
+                        id: key,
+                        name: res.data[key]
+                    }))
+                    this.businessGroupList = data;
+                }
+            })
+        },
+        handleAdd() {
+            this.editType = 'add'
+            this.form = {};
+            this.dialogTitle = '新增分组';
+            this.dialogVisible = true;
+        },
+        handleEdit(row, type) {
+            this.editType = type
+            getUserGroupDetail(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',
+                    businessGroup: row.businessGroup
+                };
+            } else {
+                this.dialogTitle = '修改分组';
+                this.form = {
+                    id: row.id,
+                    groupName: row.groupName,
+                    groupUserId: row.groupUserId,
+                    businessGroup: row.businessGroup
+                };
+            }
+            this.dialogVisible = true;
+        },
+        handleDel(row) {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            delUserGroup(row.id).then(res => {
+                loading.close();
+                this.$message({
+                    type: 'success',
+                    message: '删除成功'
+                });
+                this.getList();
+            }).catch(() => loading.close())
+        },
+        // 提交保存
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    this.addLoading = true;
+                    if (this.form.id && this.editType !== 'copy') {
+                        // 修改
+                        updateUserGroup(this.form.id, this.form).then(res => {
+                            this.dialogVisible = false;
+                            this.reset();
+                            this.getList();
+                            this.addLoading = false;
+                        }).catch(() => this.addLoading = false)
+                    } else {
+                        // 新增
+                        addUserGroup(this.form).then(res => {
+                            this.dialogVisible = false;
+                            this.reset();
+                            this.getList();
+                            this.addLoading = false;
+                        }).catch(() => this.addLoading = false)
+                    }
+                }
+            });
+        },
+        // 取消按钮
+        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>