map/ui/dasadmin/src/views/backend/auth/userManagement/index.vue

<template>
    <!-- 用户 -->
    <div style="margin-left: 25px">
        <el-row :gutter="20">
            <el-col :span="6" style="padding: 2.2% 1.4%; border-right: 1px solid #eaebed">
                <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" />
                <el-tree
                    style="max-width: 600px; margin-top: 2.2%"
                    :data="userData"
                    :props="defaultProps"
                    node-key="id"
                    :load="loadNode"
                    lazy
                    @node-click="handleNodeClick"
                />
            </el-col>
            <el-col :span="18" style="padding: 2.2% 1.4%">
                <el-container>
                    <el-header style="display: flex; justify-content: space-between">
                        <div>
                            <el-input v-model="input2" size="large" placeholder="根据账户中文名查询" style="width: 220px; margin-right: 10px" />
                            <el-button type="primary" size="large" :icon="Search" @click="userFromQuery">查询</el-button>
                        </div>
                        <el-button type="primary" size="large" :icon="CirclePlusFilled" @click="addUserFromData">新增</el-button>
                    </el-header>
                    <el-main>
                        <el-table
                            ref="multipleTableRef"
                            :data="tableData"
                            style="width: 100%"
                            :header-cell-style="{ color: '#333333', background: '#EFF0F1' }"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="180" />
                            <el-table-column property="account" label="账户名称" width="200" />

                            <el-table-column property="userName" label="账户中文名" width="200" />
                            <!-- <el-table-column property="address" label="是否禁用" /> -->
                            <!-- <el-table-column property="updatedTime" label="令牌超时" /> -->
                            <el-table-column property="address" label="操作">
                                <template #default="scope">
                                    <span style="color: #0064aa; cursor: pointer" @click="viewUsers(scope)">查看 </span>
                                    <span style="color: #0064aa"> | </span>
                                    <span style="color: #0064aa; cursor: pointer" @click="userFromDelete(scope)"> 删除 </span>
                                    <!-- <span style="color: #0064aa"> | </span>
                                    <span style="color: #0064aa"> 门户 </span>
                                    <span style="color: #0064aa"> | </span>
                                    <span style="color: #0064aa"> 密码</span> -->
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer>
                        <div style="display: flex; justify-content: right">
                            <el-pagination
                                v-model:current-page="currentPage4"
                                v-model:page-size="pageSize4"
                                :page-sizes="[10, 15]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="paginationTotal"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            />
                        </div>
                    </el-footer>
                </el-container>
            </el-col>
        </el-row>
        <!-- 用户新增页面 -->
        <el-dialog v-model="visibleParam" title="新增账户" width="500" :before-close="handleCloseParam">
            <el-form
                ref="formRef"
                :inline="true"
                label-width="auto"
                :model="formUserAdd"
                :rules="rules"
                style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
            >
                <el-form-item label="账户名称:" prop="account">
                    <el-input v-model="formUserAdd.account" placeholder="" clearable />
                </el-form-item>

                <el-form-item label="账户密码:" prop="password">
                    <el-input v-model="formUserAdd.password" placeholder="" type="password" show-password clearable />
                </el-form-item>
                <el-form-item label="职员名称:" prop="userName">
                    <el-input v-model="formUserAdd.userName" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="职员邮箱:" prop="email">
                    <el-input v-model="formUserAdd.email" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="联系电话:" prop="phone">
                    <el-input v-model="formUserAdd.phone" placeholder="" clearable />
                </el-form-item>
                <!-- <el-form-item label="所属机构ID:" prop="orgId">
                    <el-input v-model="formUserAdd.orgId" placeholder="" clearable />
                </el-form-item> -->
                <el-form-item label="角色权限:" prop="roleList">
                    <el-select v-model="formUserAdd.roleList" placeholder="选择菜单权限" multiple style="width: 240px">
                        <el-option v-for="item in allPermissionData" :key="item.id" :label="item.roleName" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visibleParam = false"> 取消 </el-button>
                    <el-button type="primary" @click="addOnSubmit">提交</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 用户修改页面 -->
        <el-dialog v-model="visibleParamUpData" title="查看账户" width="500" :before-close="handleCloseParamUp">
            <el-form
                ref="formRef"
                :inline="true"
                label-width="auto"
                :model="formUserUpData"
                :rules="rules"
                style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
            >
                <el-form-item label="账户名称:" prop="account">
                    <el-input v-model="formUserUpData.account" placeholder="" clearable />
                </el-form-item>

                <el-form-item label="账户密码:" prop="password">
                    <el-input v-model="formUserUpData.password" placeholder="" type="password" show-password clearable />
                </el-form-item>
                <el-form-item label="职员名称:" prop="userName">
                    <el-input v-model="formUserUpData.userName" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="职员邮箱:" prop="email">
                    <el-input v-model="formUserUpData.email" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="联系电话:" prop="phone">
                    <el-input v-model="formUserUpData.phone" placeholder="" clearable />
                </el-form-item>
                <!-- <el-form-item label="所属机构ID:" prop="orgId">
                    <el-input v-model="formUserUpData.orgId" placeholder="" clearable />
                </el-form-item> -->
                <el-form-item label="角色权限:" prop="roleList">
                    <el-select v-model="formUserUpData.roleList" placeholder="选择菜单权限" multiple style="width: 240px">
                        <el-option v-for="item in allPermissionData" :key="item.id" :label="item.roleName" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visibleParamUpData = false"> 取消 </el-button>
                    <el-button type="primary" @click="upDataOnSubmit">提交</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 删除确认弹框 -->
        <el-dialog v-model="userDeleteDialog" title="操作提示" width="500" :before-close="handleCloseDelete">
            <span>确定是否删除?</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="userDeleteDialog = false">取消</el-button>
                    <el-button type="primary" @click="userDeleteDialog1"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search, CirclePlusFilled } from '@element-plus/icons-vue'
import { userQuery, userUpdate, userDelete, userAdd, userList, allRoleQuery } from '/@/api/backend'
import { ElTable, ElMessage, FormRules } from 'element-plus'
import { useAdminInfo } from '/@/stores/adminInfo'
import type Node from 'element-plus/es/components/tree/src/model/node'

const adminInfo = useAdminInfo()
const input1 = ref('')
const input2 = ref('')
interface Tree {
    label: string
    children?: Tree[]
    id: string
}

// 用户左边树
const treeQuery = reactive({
    parentOrgId: adminInfo.orgid,
    recursive: true,
})

const userData = ref()

const getTree = () => {
    console.log(treeQuery, 'treeQuery')

    userList(treeQuery).then((res) => {
        console.log(res, '树')
        userData.value = res.data
    })
}

onMounted(() => {
    getTree()
    allPermission()
})

const formQuery = reactive({
    orgId: '',
    recursive: false,
})

const treeId = ref()

const handleNodeClick = (data: Tree) => {
    console.log(data.id, 'data')

    treeId.value = data.id
    formQuery.orgId = data.id
    RyUserQuery(formQuery)
}

const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
        return resolve([])
    }

    const treeQuery = reactive({
        parentOrgId: node.data.id,
        recursive: false,
    })

    userList(treeQuery)
        .then((res) => {
            console.log(res, '树')
            // userData.value = res.data
            return resolve(res.data)
        })
        .catch((err) => {
            console.log(err)
        })
}

const defaultProps = {
    children: 'children',
    label: 'name',
}

// 用户查询
interface userQuery {
    // rows?: any[]
}
const tableData = ref()
const RyUserQuery = (data: any) => {
    userQuery(data).then((res) => {
        if (res.code == 200) {
            console.log(res, 'res111')
            tableData.value = res.rows
            paginationTotal.value = res.total
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

interface User {
    date: string
    name: string
    address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

// 用户搜索
const formQuery1 = reactive({
    userName: '',
    orgId: '',
})
const userFromQuery = () => {
    formQuery1.userName = input2.value
    formQuery1.orgId = treeId.value
    console.log(formQuery1, 'formQuery1formQuery1formQuery1')

    RyUserQuery(formQuery1)
}

// 用户增加
const visibleParam = ref(false)
interface RuleUser {
    account: string
    password: string
    userName: string
    email: string
    phone: string
    orgId: string
    roleList: number[]
}
const formUserAdd = reactive({
    account: '',
    password: '',
    userName: '',
    email: '',
    phone: '',
    orgId: '',
    roleList: [],
})
const rules = reactive<FormRules<RuleUser>>({
    account: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '用户密码不能为空',
            trigger: 'blur',
        },
    ],
})
const addUserFromData = () => {
    visibleParam.value = true
    formUserAdd.account = ''
    formUserAdd.password = ''
    formUserAdd.userName = ''
    formUserAdd.email = ''
    formUserAdd.phone = ''
    formUserAdd.orgId = ''
    formUserAdd.roleList = []
}

const handleCloseParam = (data: any) => {
    visibleParam.value = false
    console.log(data)
}
const formRef = ref()
const addOnSubmit = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            visibleParam.value = false
            formUserAdd.orgId = treeId.value
            console.log(formUserAdd, treeId.value, 'formUserAdd')

            userAdd(formUserAdd).then((res) => {
                if (res.code == 200) {
                    console.log(res, '新增')
                    formQuery.orgId = treeId.value
                    RyUserQuery(formQuery)
                } else {
                    ElMessage.error({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        }
    })
}

// 页面修改
const visibleParamUpData = ref(false)

const formUserUpData = reactive({ id: '', account: '', password: '', userName: '', email: '', phone: '', orgId: '', roleList: [] })
const viewUsers = (data: any) => {
    console.log(data, '页面修改数据')
    visibleParamUpData.value = true
    formUserUpData.id = data.row.id
    formUserUpData.account = data.row.account
    formUserUpData.password = data.row.password
    formUserUpData.userName = data.row.userName
    formUserUpData.email = data.row.email
    formUserUpData.phone = data.row.phone
    formUserUpData.orgId = data.row.orgId
    formUserUpData.roleList = data.row.roleList
}
const upDataOnSubmit = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            console.log(formUserUpData, formUserUpData.roleList, 'formUserUpData')

            userUpdate(formUserUpData).then((res) => {
                if (res.code == 200) {
                    console.log(res, '修改成功')

                    RyUserQuery(formQuery)
                } else {
                    ElMessage.error({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
            visibleParamUpData.value = false
        }
    })
}

const handleCloseParamUp = () => {
    visibleParamUpData.value = false
}

// 页面删除
const userListDelete = reactive({
    id: '',
})
const userFromDelete = (data: any) => {
    userDeleteDialog.value = true
    userListDelete.id = data.row.id
}

const userDeleteDialog = ref(false)

const handleCloseDelete = () => {
    userDeleteDialog.value = false
}

const userDeleteDialog1 = () => {
    userDeleteDialog.value = false
    userDelete(userListDelete).then((res) => {
        if (res.code == 200) {
            setTimeout(() => {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            }, 1000)
            formQuery.orgId = treeId.value
            console.log(formQuery, 'formQuery')
            RyUserQuery(formQuery)
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

// 用户权限
const allPermissionData = ref()
// 用户权限
const roleName = {
    roleName: '',
}
const allPermission = () => {
    allRoleQuery(roleName).then((res) => {
        console.log(res.rows, 'resdata')
        allPermissionData.value = res.rows
        console.log(allPermissionData.value, '89898989111')
    })
}

// 分页
const currentPage4 = ref(0)
const pageSize4 = ref(10)
const paginationTotal = ref(0)
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
    width: 99%;
    height: 823px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    // border-radius: 4px;
    background-color: #fff;
}
</style>