You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.1 KiB
139 lines
3.1 KiB
2 months ago
|
<template>
|
||
|
|
<section class="select-wrapper" v-if="show">
|
||
|
|
<!-- 左侧部门树 -->
|
||
|
|
<section class="dept-wrapper">
|
||
|
|
<DeptTree @node-click="handleDeptNodeClick" />
|
||
|
|
</section>
|
||
|
|
<section class="dept-wrapper">
|
||
|
|
<el-table v-loading="loading" :data="list" @row-click="handleClickRow">
|
||
|
|
<el-table-column label="用户编号" align="center" key="id" prop="id" />
|
||
|
|
<el-table-column
|
||
|
|
label="用户名称"
|
||
|
|
align="center"
|
||
|
|
prop="username"
|
||
|
|
:show-overflow-tooltip="true"
|
||
|
|
/>
|
||
|
|
<el-table-column
|
||
|
|
label="用户昵称"
|
||
|
|
align="center"
|
||
|
|
prop="nickname"
|
||
|
|
:show-overflow-tooltip="true"
|
||
|
|
/>
|
||
|
|
<el-table-column
|
||
|
|
label="部门"
|
||
|
|
align="center"
|
||
|
|
key="deptName"
|
||
|
|
prop="deptName"
|
||
|
|
:show-overflow-tooltip="true"
|
||
|
|
/>
|
||
|
|
</el-table>
|
||
|
|
<Pagination
|
||
|
|
:total="total"
|
||
|
|
v-model:page="queryParams.pageNo"
|
||
|
|
v-model:limit="queryParams.pageSize"
|
||
|
|
@pagination="getList"
|
||
|
|
/>
|
||
|
|
<el-button type="primary" class="close" circle size="small" @click="close">
|
||
|
|
<Icon icon="ep:close" />
|
||
|
|
</el-button>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import * as UserApi from '@/api/system/user'
|
||
|
|
import DeptTree from '@/views/system/user/DeptTree.vue'
|
||
|
|
import {getPcUserPage} from "@/api/system/user";
|
||
|
|
const show = ref(false)
|
||
|
|
const loading = ref(true) // 列表的加载中
|
||
|
|
const total = ref(0) // 列表的总页数
|
||
|
|
const list = ref([]) // 列表的数
|
||
|
|
const queryParams = reactive({
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
username: undefined,
|
||
|
|
mobile: undefined,
|
||
|
|
status: undefined,
|
||
|
|
deptId: undefined,
|
||
|
|
createTime: []
|
||
|
|
})
|
||
|
|
const emit = defineEmits(['select', 'close'])
|
||
|
|
/** 查询列表 */
|
||
|
|
const getList = async () => {
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
const data = await UserApi.getPcUserPage(queryParams)
|
||
|
|
list.value = data.list
|
||
|
|
total.value = data.total
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 处理部门被点击 */
|
||
|
|
const handleDeptNodeClick = async (row) => {
|
||
|
|
queryParams.deptId = row.id
|
||
|
|
await getList()
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleClickRow(row) {
|
||
|
|
emit('select', row)
|
||
|
|
}
|
||
|
|
function open() {
|
||
|
|
getList()
|
||
|
|
show.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
show.value = false
|
||
|
|
emit('close')
|
||
|
|
}
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.select-wrapper {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 10px;
|
||
|
|
padding-top: 50px;
|
||
|
|
border-radius: 6px;
|
||
|
|
min-height: 50vh;
|
||
|
|
position: relative;
|
||
|
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
}
|
||
|
|
.selec-wrapper {
|
||
|
|
max-width: 400px;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
gap: 5px;
|
||
|
|
|
||
|
|
.users {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row wrap;
|
||
|
|
gap: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select {
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: #f1faff;
|
||
|
|
border: 1px dashed #00a3ff;
|
||
|
|
padding: 0px 15px;
|
||
|
|
color: #00a3ff;
|
||
|
|
// color: #00a3ff;
|
||
|
|
// text-decoration: underline;
|
||
|
|
border-radius: 6px;
|
||
|
|
height: fit-content;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|