UserManagement.vue

<template>
    <el-container class="UserManagement">
        <el-header height="50px">
            <div>
                <span class="title-text">用户管理</span>
            </div>
        </el-header>


        <el-main>
            <el-button type="primary" @click="addUser">新建</el-button>

            <el-table :data="userList" v-loading="isLoading">
                <el-table-column prop="name" label="用户名称" align="center"></el-table-column>
                <el-table-column prop="username" label="账号" align="center"></el-table-column>
                <el-table-column prop="accountId" label="所属公司" align="center">
                    <template #default="scope">
                        {{ companyMap[scope.row.accountId] }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                    <template #default="scope">
                        <el-button @click="editUser(scope.row)" type="text">编辑
                        </el-button>
                        <el-button @click="confirmDeleteUser(scope.row.id)" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-drawer title="新建用户" v-model="addUserVisible" :destroy-on-close="true" :direction="'rtl'">
                <div class="user-form">
                    <el-form :model="addUserForm" :rules="rules" ref="ref_addUserForm">
                        <el-form-item label="用户名称:" prop="username" :label-width="'120px'">
                            <el-input v-model.trim="addUserForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="账号:" prop="name" :label-width="'120px'">
                            <el-input v-model.trim="addUserForm.username" style="width: 100%"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:" prop="password" :label-width="'120px'">
                            <el-input v-model.trim="addUserForm.password"></el-input>
                        </el-form-item>
                        <el-form-item label="所属公司:" prop="accountId" :label-width="'120px'">
                            <el-select v-model="addUserForm.accountId" style="width: 100%">
                                <el-option v-for="(name, value) in companyMap" :label="name" :value="parseInt(value)"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="数据权限管理:" prop="type" :label-width="'120px'">
                            <el-select v-model="addUserForm.type" style="width: 100%">
                                <el-option v-for="(value, name) in getCanCreateUsernameIdMap()" :label="name" :value="value"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item style="text-align:center">
                            <el-button @click="addUserVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmAddUser">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>


            <el-drawer title="编辑用户" v-model="editUserVisible" :destroy-on-close="true" :direction="'rtl'">
                <div class="user-form">
                    <el-form :model="editUserForm" :rules="rules" ref="ref_editUserForm">
                        <el-form-item label="用户名称:" prop="username" :label-width="'120px'">
                            <el-input v-model.trim="editUserForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="账号:" prop="name" :label-width="'120px'">
                            <el-input v-model.trim="editUserForm.username" style="width: 100%"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:" prop="password" :label-width="'120px'">
                            <el-input v-model.trim="editUserForm.password"></el-input>
                        </el-form-item>
                        <el-form-item label="所属公司:" prop="accountId" :label-width="'120px'">
                            <el-select v-model="editUserForm.accountId" style="width: 100%">
                                <el-option v-for="(name, value) in companyMap" :label="name" :value="parseInt(value)"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="数据权限管理:" prop="type" :label-width="'120px'">
                            <el-select v-model="editUserForm.type" style="width: 100%">
                                <el-option v-for="(value, name) in getCanCreateUsernameIdMap()" :label="name" :value="value"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item style="text-align:center">
                            <el-button @click="editUserVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmEditUser">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>
        </el-main>
    </el-container>
</template>

<script>
import {reactive, ref, toRaw,} from "vue"
import {
    filterEmptyValueInObject, getKeyByValueInObject,
     resetForm
} from "@/PublicUtil/PublicUtil"
import userApi from './UserManagementApi'
import {ElMessageBox} from 'element-plus'
import {ElMessage} from 'element-plus'
import {getCanCreateUsernameIdMap, getCompanyMap} from '@/Request/DictionaryRequest'

export default {
    setup() {
        // scalar
        const pageNum = ref(1)
        const pageSize = ref(10)
        const total = ref()
        const isLoading = ref(false)
        const addUserVisible = ref(false)
        const editUserVisible = ref(false)

        const userList = ref([])

        const ref_addUserForm = ref()
        const ref_editUserForm = ref()
        // computed

        // mapping
        const rules = reactive(
            {
                // userName: [
                //     {
                //         required: true,
                //         message: '请输入用户名称',
                //     },
                // ],
                // userYear: [
                //     {
                //         type: 'date',
                //         required: true,
                //         message: '请输入建成年份',
                //         trigger: 'change'
                //     }
                // ],
                // groupId: [
                //     {
                //         required: true,
                //         message: '请选择集团',
                //     },
                // ],
            }
        )

        const companyMap = reactive({})

        const addUserForm = reactive(
            {
                username: '', // 用户名称
                name: '', // 账号
                password: '', // 密码
                accountId: '', // 所属公司
                type: '', // 数据权限管理
            }
        )

        const editUserForm = reactive(
            {
                username: '', // 用户名称
                name: '', // 账号
                password: '', // 密码
                accountId: '', // 所属公司
                type: '', // 数据权限管理

                id: '',
            }
        )

        // function
        const handlePageNumChange = function(num) {
            pageNum.value = num
            getUserList()
        }
        const handlePageSizeChange = function(size) {
            pageNum.value = 1
            pageSize.value = size
            getUserList()
        }

        const confirmAddUser = function() {
            ref_addUserForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        const rawData = toRaw(addUserForm)
                        const data = filterEmptyValueInObject(rawData)

                        userApi.addUser(data).then(
                            (r) => {
                                addUserVisible.value = false

                                const message = r.msg
                                ElMessage(`${message}`)

                                getUserList()
                            }
                        )
                    }
                }
            )
        }

        const editUser = function(row) {
            editUserVisible.value = true
            editUserForm.username = row.username
            editUserForm.name = row.name
            editUserForm.password = row.password
            editUserForm.accountId = row.accountId
            editUserForm.type = row.type

            editUserForm.id = row.id
        }

        const confirmEditUser = function() {
            ref_editUserForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        const rawData = toRaw(editUserForm)
                        const data = filterEmptyValueInObject(
                            {
                                username: rawData.username,
                                name: rawData.name,
                                password: rawData.password,
                                accountId: rawData.accountId,
                                type: rawData.type,
                            }
                        )
                        userApi.editUser(rawData.id, data).then(
                            (r) => {
                                const message = r.msg

                                getUserList()
                                ElMessage(`${message}`)
                            }
                        )
                        editUserVisible.value = false
                    }
                }
            )
        }

        const confirmDeleteUser = function(id) {
            ElMessageBox.confirm(
                "删除后此用户相关数据全部都会消失，你确定要删除吗？",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(
                () => {
                    userApi.deleteUser(id).then(
                        (r) => {
                            const message = r.msg

                            getUserList()
                            ElMessage(`${message}`)
                        }
                    )
                }
            )
        }

        const addUser = function() {
            resetForm(addUserForm)
            addUserVisible.value = true
        }

        const getUserList = function() {
            isLoading.value = true
            userApi.getUserList().then(
                ({data}) => {
                    isLoading.value = false

                    userList.value = data
                    // formatPaginatedTableData(
                    //     userList,
                    //     data,
                    //     total,
                    // )
                }
            )
        }

        const initialize = function() {
            getUserList()
            getCompanyMap(companyMap)
        }

        initialize()

        return {
            // scalar
            pageNum,
            pageSize,
            total,
            isLoading,
            userList,
            ref_addUserForm,
            ref_editUserForm,
            addUserVisible,
            editUserVisible,
            // mapping
            companyMap,
            addUserForm,
            editUserForm,
            rules,
            // function
            handlePageNumChange,
            handlePageSizeChange,
            addUser,
            editUser,
            confirmEditUser,
            confirmAddUser,
            confirmDeleteUser,
            getCanCreateUsernameIdMap,
            getKeyByValueInObject,
        }
    },
}
</script>
<style lang="less" scoped>
@import "./UserManagement.less";
</style>