Compare commits
No commits in common. '8282883aae9de98b91657686911a718d534f5c1f' and '78e7252d9354bd4057aa1b4030c04f9e78092383' have entirely different histories.
8282883aae
...
78e7252d93
13 changed files with 285 additions and 656 deletions
@ -1,138 +0,0 @@ |
|||||||
<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> |
|
||||||
Loading…
Reference in new issue