调整通讯录中员工通讯录的按姓名搜索对应人员功能，调整对应样式
This commit is contained in:
parent
8c9f634d0b
commit
7544b3d324
@ -34,6 +34,10 @@ const props = defineProps({
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
customInputPlaceholder: {
|
||||
type: String,
|
||||
default: '请输入',
|
||||
}
|
||||
})
|
||||
|
||||
@ -205,7 +209,7 @@ initData()
|
||||
<template v-if="item.type === 'input'">
|
||||
<n-input
|
||||
:value="formData[item.key]"
|
||||
placeholder="请输入"
|
||||
:placeholder="customInputPlaceholder"
|
||||
@input="value => handleInputChange(value, item)"
|
||||
clearable
|
||||
v-bind="item.props"
|
||||
|
||||
@ -18,7 +18,7 @@ export function isLoggedIn() {
|
||||
*/
|
||||
export function getAccessToken() {
|
||||
// return storage.get(AccessToken) || ''
|
||||
return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b891bd3a81a1ac4e73e2aed60deeaec60792c525cc0c96e8f4a666eca6ee7a10716507b402cde5759bbcda1fa681fbe4dcdfe05abbc2b1644c68dc74ebaf8d9c9cc4eb61afaf3de52fa357dbfdfe17acf14'
|
||||
return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b8987a3f4c77465504ba46f90370546f2f3656c248bd63549a43410178becfd0d1888ecbb8e82d291e68cf9da8ec1096e2d8abd4bb9d7edc62d38469e56226683693764f82df03eaa47fe6fd21a9cb83e0e'
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -61,15 +61,22 @@ const state = reactive({
|
||||
height: '846px',
|
||||
backgroundColor: '#F9F9FD'
|
||||
}, //自定义模态框样式
|
||||
searchConfig: [
|
||||
addressBookSearchConfig: [
|
||||
{
|
||||
label: '姓名',
|
||||
key: 'name',
|
||||
key: 'nickName',
|
||||
type: 'input',
|
||||
valueType: 'string'
|
||||
}
|
||||
], // 搜索配置
|
||||
|
||||
], // 通讯录搜索配置
|
||||
groupChatListSearchConfig: [
|
||||
{
|
||||
label: '群聊名称',
|
||||
key: 'groupName',
|
||||
type: 'input',
|
||||
valueType: 'string'
|
||||
}
|
||||
], // 群聊列表搜索配置
|
||||
treeData: [],
|
||||
expandedKeys: [],
|
||||
clickKey: 3,
|
||||
@ -77,11 +84,11 @@ const state = reactive({
|
||||
treeSelectData: {},
|
||||
addressBookColumns: [
|
||||
{
|
||||
title: '姓名',
|
||||
field: 'name',
|
||||
title: '姓名 【工号】',
|
||||
field: 'nickName',
|
||||
width: 200,
|
||||
render(row, index) {
|
||||
return row.nickName
|
||||
return row.nickName + '【' + row.jobNum + '】'
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -90,8 +97,12 @@ const state = reactive({
|
||||
width: 400,
|
||||
ellipsis: true,
|
||||
render(row, index) {
|
||||
let positionName = row.nowPositions.map((item) => item.name).join(' , ')
|
||||
return positionName
|
||||
let positionNames = Array.isArray(row.depPositions)
|
||||
? row.depPositions.flatMap((dep) =>
|
||||
Array.isArray(dep.positions) ? dep.positions.map((pos) => pos.name) : []
|
||||
)
|
||||
: []
|
||||
return positionNames.join(' , ')
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -114,12 +125,57 @@ const state = reactive({
|
||||
}
|
||||
}
|
||||
], // 通讯录表格列
|
||||
groupChatListColumns: [
|
||||
{
|
||||
title: '群聊名称',
|
||||
field: 'groupName',
|
||||
width: 200,
|
||||
render(row, index) {
|
||||
return row.groupName
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '群类型',
|
||||
field: 'groupType',
|
||||
width: 400,
|
||||
ellipsis: true,
|
||||
render(row, index) {
|
||||
return row.groupType
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
field: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render(row, index) {
|
||||
return h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
text: true,
|
||||
color: '#46299d',
|
||||
onClick: () => handleEnterChat(row)
|
||||
},
|
||||
{ default: () => '进入聊天' }
|
||||
)
|
||||
}
|
||||
}
|
||||
], // 群聊列表表格列
|
||||
addressBookData: [], // 通讯录表格数据
|
||||
groupChatListData: [], // 群聊列表表格数据
|
||||
addressBookTableHeight: 524, // 通讯录表格高度
|
||||
addressBookTableWidth: 800, // 通讯录表格宽度
|
||||
addressBookPage: 1, // 通讯录表格页码
|
||||
addressBookPageSize: 10, // 通讯录表格每页条数
|
||||
addressBookTotal: 0 // 通讯录表格总条数
|
||||
addressBookTotal: 0, // 通讯录表格总条数
|
||||
addressBookSearchNickName: '', // 通讯录搜索条件-姓名
|
||||
addressBookCurrentTab: 'employeeAddressBook', // 通讯录当前tab
|
||||
groupChatListPage: 1, // 群聊列表表格页码
|
||||
groupChatListPageSize: 10, // 群聊列表表格每页条数
|
||||
groupChatListTotal: 0, // 群聊列表表格总条数
|
||||
groupChatListSearchGroupName: '', // 群聊列表搜索条件-群聊名称
|
||||
})
|
||||
|
||||
const items = computed((): ISession[] => {
|
||||
@ -143,6 +199,21 @@ watch(
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => state.addressBookSearchNickName,
|
||||
(newValue, oldValue) => {
|
||||
// console.log(newValue, 'newValue')
|
||||
if (newValue) {
|
||||
state.addressBookTableWidth = 1142
|
||||
state.addressBookPage = 1
|
||||
} else {
|
||||
state.addressBookTableWidth = 800
|
||||
state.clickKey = 3
|
||||
state.treeRefreshCount++
|
||||
}
|
||||
getDepPoisUser()
|
||||
}
|
||||
)
|
||||
|
||||
// 列表加载状态
|
||||
const loadStatus = computed(() => talkStore.loadStatus)
|
||||
@ -213,9 +284,10 @@ const showAddressBookModal = () => {
|
||||
state.isShowAddressBookModal = true
|
||||
}
|
||||
const handleTreeClick = ({ selectedKey, tree }) => {
|
||||
console.log(tree)
|
||||
// console.log(tree)
|
||||
state.clickKey = tree.key
|
||||
state.treeSelectData = tree
|
||||
state.addressBookPage = 1
|
||||
getDepPoisUser()
|
||||
}
|
||||
const calcTreeData = (data) => {
|
||||
@ -242,30 +314,8 @@ const getTreeData = () => {
|
||||
let data = res.data.nodes
|
||||
calcTreeData(data)
|
||||
state.treeData = data
|
||||
// // 获取最近点击的部门
|
||||
// let localSelect = Local.get("posimanage_treeSelectData");
|
||||
// if (localSelect && JSON.stringify(localSelect) !== "{}") {
|
||||
// state.treeSelectData = localSelect;
|
||||
// state.expandedKeys = localSelect.pathIds;
|
||||
// state.clickKey = localSelect.key;
|
||||
// } else {
|
||||
// if (JSON.stringify(state.treeSelectData) === "{}") {
|
||||
// state.treeSelectData = data[0];
|
||||
// state.clickKey = data[0].key;
|
||||
// }
|
||||
// if (
|
||||
// state.clickKey === data[0].key &&
|
||||
// !state.expandedKeys.includes(data[0].key)
|
||||
// ) {
|
||||
// state.expandedKeys.push(data[0].key);
|
||||
// }
|
||||
// if (!state.expandedKeys.includes(state.clickKey)) {
|
||||
// state.expandedKeys.push(state.clickKey);
|
||||
// }
|
||||
// }
|
||||
state.treeRefreshCount++
|
||||
getDepPoisUser()
|
||||
// state.tableConfig.refreshCount++;
|
||||
} else {
|
||||
processError(res.msg || '获取失败！')
|
||||
}
|
||||
@ -282,13 +332,14 @@ const getTreeData = () => {
|
||||
const getDepPoisUser = () => {
|
||||
let url = '/user/v2/list'
|
||||
let params = {
|
||||
departmentId: state.clickKey,
|
||||
departmentId: state.addressBookSearchNickName ? undefined : state.clickKey,
|
||||
page: state.addressBookPage,
|
||||
pageSize: state.addressBookPageSize,
|
||||
status: 'notactive'
|
||||
status: 'notactive',
|
||||
nickName: state.addressBookSearchNickName
|
||||
}
|
||||
$request.HTTP.components.postDataByParams(url, params).then((res) => {
|
||||
console.log(res)
|
||||
// console.log(res)
|
||||
if (res.status === 0 && Array.isArray(res.data.data)) {
|
||||
state.addressBookData = res.data.data || []
|
||||
state.addressBookTotal = res.data.count
|
||||
@ -310,6 +361,34 @@ const handleAddressBookPaginationSize = (pageSize) => {
|
||||
state.addressBookPage = 1
|
||||
getDepPoisUser()
|
||||
}
|
||||
//处理通讯录搜索
|
||||
const changeAddressBookSearch = (value) => {
|
||||
if (!value.nickName?.trim()) {
|
||||
state.addressBookSearchNickName = ''
|
||||
} else {
|
||||
state.addressBookSearchNickName = value.nickName
|
||||
}
|
||||
}
|
||||
//处理通讯录tab切换
|
||||
const handleAddressBookTabChange = (value) => {
|
||||
console.log(value, 'value')
|
||||
state.addressBookCurrentTab = value
|
||||
}
|
||||
//处理群聊列表搜索
|
||||
const changeGroupChatListSearch = (value) => {
|
||||
console.log(value, 'value')
|
||||
}
|
||||
//处理群聊列表页数变化
|
||||
const handleGroupChatListPagination = (value) => {
|
||||
console.log(value, 'value')
|
||||
state.groupChatListPage = value
|
||||
}
|
||||
//处理群聊列表每页条数变化
|
||||
const handleGroupChatListPaginationSize = (value) => {
|
||||
console.log(value, 'value')
|
||||
state.groupChatListPageSize = value
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -345,7 +424,7 @@ const handleAddressBookPaginationSize = (pageSize) => {
|
||||
</template>
|
||||
</n-button>
|
||||
<img
|
||||
style="width: 19px; height: 20px;"
|
||||
style="width: 19px; height: 20px;cursor: pointer;"
|
||||
src="@/assets/image/chatList/addressBook.png"
|
||||
alt=""
|
||||
@click="showAddressBookModal"
|
||||
@ -420,13 +499,29 @@ const handleAddressBookPaginationSize = (pageSize) => {
|
||||
<template #content>
|
||||
<div class="custom-modal-content">
|
||||
<n-card style="padding: 0 12px;">
|
||||
<n-tabs type="line">
|
||||
<n-tabs type="line" @update:value="handleAddressBookTabChange" tab-style="font-size: 16px; font-weight: 600;color: #8B8B8B;">
|
||||
<n-tab name="employeeAddressBook">员工通讯录</n-tab>
|
||||
<n-tab name="groupChatList">群聊列表</n-tab>
|
||||
</n-tabs>
|
||||
<xSearchForm :search-config="state.searchConfig"></xSearchForm>
|
||||
<div class="addressBook-content">
|
||||
<div class="addressBook-tree">
|
||||
<xSearchForm
|
||||
v-if="state.addressBookCurrentTab == 'employeeAddressBook'"
|
||||
:search-config="state.addressBookSearchConfig"
|
||||
customInputPlaceholder="请输入姓名"
|
||||
@change="changeAddressBookSearch"
|
||||
:cols="3"
|
||||
></xSearchForm>
|
||||
<xSearchForm
|
||||
v-if="state.addressBookCurrentTab == 'groupChatList'"
|
||||
:search-config="state.groupChatListSearchConfig"
|
||||
customInputPlaceholder="请输入群聊名称"
|
||||
@change="changeGroupChatListSearch"
|
||||
:cols="3"
|
||||
></xSearchForm>
|
||||
<div
|
||||
class="addressBook-content"
|
||||
v-if="state.addressBookCurrentTab == 'employeeAddressBook'"
|
||||
>
|
||||
<div class="addressBook-tree" v-if="!state.addressBookSearchNickName">
|
||||
<fl-tree
|
||||
:data="state.treeData"
|
||||
:expandedKeys="state.expandedKeys"
|
||||
@ -461,6 +556,33 @@ const handleAddressBookPaginationSize = (pageSize) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="groupChatList-content" v-if="state.addressBookCurrentTab == 'groupChatList'">
|
||||
<div class="groupChatList-table">
|
||||
<xNDataTable
|
||||
:columns="state.groupChatListColumns"
|
||||
:data="state.groupChatListData"
|
||||
:style="{
|
||||
height: '523px',
|
||||
width: '1148px'
|
||||
}"
|
||||
flex-height
|
||||
></xNDataTable>
|
||||
<div class="groupChatList-pagination">
|
||||
<n-pagination
|
||||
v-model:page="state.groupChatListPage"
|
||||
v-model:page-size="state.groupChatListPageSize"
|
||||
:item-count="state.groupChatListTotal"
|
||||
show-quick-jumper
|
||||
show-size-picker
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:on-update:page="handleGroupChatListPagination"
|
||||
:on-update:page-size="handleGroupChatListPaginationSize"
|
||||
>
|
||||
<template #prefix="{ itemCount }"> 共 {{ itemCount }} 条记录 </template>
|
||||
</n-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
@ -573,6 +695,9 @@ html[theme-mode='dark'] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0 12px;
|
||||
:deep(.n-tabs-tab--active) {
|
||||
color: #46299d!important;
|
||||
}
|
||||
.addressBook-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -600,5 +725,23 @@ html[theme-mode='dark'] {
|
||||
}
|
||||
}
|
||||
}
|
||||
.groupChatList-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
.groupChatList-table {
|
||||
:deep(.n-data-table-th) {
|
||||
background-color: #46299d;
|
||||
color: #fff;
|
||||
}
|
||||
.groupChatList-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 22px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user