388 lines
9.6 KiB
Vue
388 lines
9.6 KiB
Vue
<script lang="ts" setup>
|
||
import { ref, computed, reactive } from 'vue'
|
||
import { CloseOne, Male, Female, SendOne } from '@icon-park/vue-next'
|
||
import { ServeSearchUser } from '@/api/contact'
|
||
import { ServeCreateContact } from '@/api/contact'
|
||
import { ServeContactGroupList, ServeContactMoveGroup, ServeEditContactRemark } from '@/api/contact'
|
||
import { useTalkStore } from '@/store'
|
||
import { useRouter } from 'vue-router'
|
||
import xNModal from '@/components/x-naive-ui/x-n-modal/index.vue'
|
||
import { NSkeleton } from 'naive-ui'
|
||
const router = useRouter()
|
||
const talkStore = useTalkStore()
|
||
const emit = defineEmits(['update:show', 'update:uid', 'updateRemark'])
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
uid: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
})
|
||
|
||
const loading = ref(true)
|
||
const isOpenFrom = ref(false)
|
||
const userInfo: any = ref({
|
||
id: 0,
|
||
avatar: '',
|
||
gender: 0,
|
||
mobile: '',
|
||
motto: '',
|
||
nickname: '',
|
||
remark: '',
|
||
email: '',
|
||
status: 1,
|
||
text: ''
|
||
})
|
||
|
||
const editCardPopover: any = ref(false)
|
||
const modelRemark = ref('')
|
||
|
||
const options = ref<any>([])
|
||
// const groupName = computed(() => {
|
||
// const item = options.value.find((item: any) => {
|
||
// return item.key == state.group_id
|
||
// })
|
||
|
||
// if (item) {
|
||
// return item.label
|
||
// }
|
||
|
||
// return '未设置分组'
|
||
// })
|
||
|
||
const onLoadData = () => {
|
||
ServeSearchUser({
|
||
erp_user_id: props.uid
|
||
}).then(({ code, data }) => {
|
||
if (code == 200) {
|
||
userInfo.value = data
|
||
|
||
// modelRemark.value = state.remark
|
||
|
||
loading.value = false
|
||
} else {
|
||
window['$message'].info('用户信息不存在', { showIcon: false })
|
||
}
|
||
})
|
||
|
||
// ServeContactGroupList().then((res) => {
|
||
// if (res.code == 200) {
|
||
// let items = res.data.items || []
|
||
// options.value = []
|
||
// for (const iter of items) {
|
||
// options.value.push({ label: iter.name, key: iter.id })
|
||
// }
|
||
// }
|
||
// })
|
||
}
|
||
|
||
const onToTalk = () => {
|
||
talkStore.toTalk(1, props.uid, router)
|
||
emit('update:show', false)
|
||
}
|
||
|
||
// const onJoinContact = () => {
|
||
// if (!state.text.length) {
|
||
// return window['$message'].info('备注信息不能为空')
|
||
// }
|
||
|
||
// ServeCreateContact({
|
||
// friend_id: props.uid,
|
||
// remark: state.text
|
||
// }).then((res) => {
|
||
// if (res.code == 200) {
|
||
// isOpenFrom.value = false
|
||
// window['$message'].success('申请发送成功')
|
||
// } else {
|
||
// window['$message'].error(res.message)
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
// const onChangeRemark = () => {
|
||
// ServeEditContactRemark({
|
||
// friend_id: props.uid,
|
||
// remark: modelRemark.value
|
||
// }).then(({ code, message }) => {
|
||
// if (code == 200) {
|
||
// editCardPopover.value.setShow(false)
|
||
// window['$message'].success('备注成功')
|
||
// state.remark = modelRemark.value
|
||
|
||
// emit('updateRemark', {
|
||
// user_id: props.uid,
|
||
// remark: modelRemark.value
|
||
// })
|
||
// } else {
|
||
// window['$message'].error(message)
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
// const handleSelectGroup = (value) => {
|
||
// ServeContactMoveGroup({
|
||
// user_id: props.uid,
|
||
// group_id: value
|
||
// }).then(({ code, message }) => {
|
||
// if (code == 200) {
|
||
// state.group_id = value
|
||
// window['$message'].success('分组修改成功')
|
||
// } else {
|
||
// window['$message'].error(message)
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
// const reset = () => {
|
||
// loading.value = true
|
||
|
||
// Object.assign(state, {
|
||
// id: 0,
|
||
// avatar: '',
|
||
// gender: 0,
|
||
// mobile: '',
|
||
// motto: '',
|
||
// nickname: '',
|
||
// remark: '',
|
||
// email: '',
|
||
// status: 1,
|
||
// text: ''
|
||
// })
|
||
|
||
// isOpenFrom.value = false
|
||
// }
|
||
|
||
// const onUpdate = (value) => {
|
||
// if (!value) {
|
||
// setTimeout(reset, 100)
|
||
// }
|
||
|
||
// emit('update:show', value)
|
||
// }
|
||
|
||
const onAfterEnter = () => {
|
||
onLoadData()
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<x-n-modal content-style="padding:0;" :closable="false" class="w-311px min-h-445px" style="border-radius: 10px;overflow:hidden;" :show="show" :on-after-enter="onAfterEnter">
|
||
<div class="section relative px-7px pt-82px pb-20px">
|
||
<div class="absolute top-9px right-7px pointer z-10" @click="emit('update:show', false)">
|
||
<img class="w-20px h-20px" src="@/assets/image/close.png" alt="">
|
||
</div>
|
||
|
||
<template v-if="loading">
|
||
<div class="flex py-10px bg-#fff px-16px rounded-4px items-center mb-10px">
|
||
<div class="w-59px h-59px rounded-8px mr-12px overflow-hidden">
|
||
<n-skeleton circle height="59px" width="59px" />
|
||
</div>
|
||
<div class="w-full">
|
||
<n-skeleton text style="width: 80%; margin-bottom: 5px;" />
|
||
<n-skeleton text style="width: 60%;" />
|
||
</div>
|
||
</div>
|
||
<div class="bg-#fff rounded-4px mb-20px">
|
||
<div class="flex px-15px py-9px" v-for="i in 6" :key="i">
|
||
<n-skeleton text style="width: 30%; margin-right: 10px;" />
|
||
<n-skeleton text style="width: 60%;" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<n-skeleton text style="width: 100%; height: 42px; border-radius: 4px;" />
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div class="flex py-10px bg-#fff px-16px rounded-4px items-center mb-10px">
|
||
<div class="w-59px h-59px rounded-8px mr-12px overflow-hidden">
|
||
<n-image width="59" :src="userInfo.avatar" >
|
||
|
||
</n-image>
|
||
</div>
|
||
<div>
|
||
<div class="text-#000 text-16px mb-5px">{{ userInfo.nickname }}</div>
|
||
<div class="text-#ACACAC text-12px">工号：{{ userInfo.job_num }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-#fff rounded-4px mb-20px">
|
||
<div class="flex px-15px py-9px">
|
||
<div class="text-#000 text-12px w-84px">公司别</div>
|
||
<div class="text-#747474 text-12px">{{ userInfo.company_name }}</div>
|
||
</div>
|
||
<div class="flex px-15px py-9px">
|
||
<div class="text-#000 text-12px w-84px">主管</div>
|
||
<div class="text-#747474 text-12px">{{ userInfo.leaders?.map(x=>x.user_name)?.join(',') }}</div>
|
||
</div>
|
||
<div class="flex px-15px py-9px">
|
||
<div class="text-#000 text-12px w-84px">部门</div>
|
||
<div class="text-#747474 text-12px">{{ userInfo.erp_dept_position?.map(x=>x.department_name)?.join(',') }}</div>
|
||
</div>
|
||
<div class="flex px-15px py-9px">
|
||
<div class="text-#000 text-12px w-84px">手机号</div>
|
||
<div class="text-#747474 text-12px">{{ userInfo.tel_num }}</div>
|
||
</div>
|
||
<div class="flex px-15px py-9px">
|
||
<div class="text-#000 text-12px w-84px">岗位</div>
|
||
<div class="text-#747474 text-12px">{{ userInfo.erp_dept_position?.map(x=>x.position_name)?.join(',') }}</div>
|
||
</div>
|
||
<div class="flex px-15px py-9px">
|
||
<div class="text-#000 text-12px w-84px">入职日期</div>
|
||
<div class="text-#747474 text-12px">{{ userInfo.enter_date }}</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<n-button block color="#EEE9F8" text-color="#46299D" @click="onToTalk">
|
||
<div class="flex items-center justify-center py-11px">
|
||
<img class="w-19.8px h-20px mr-15px" src="@/assets/image/faxi@2x.png" alt="">
|
||
<span>发送消息</span>
|
||
</div>
|
||
</n-button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</x-n-modal>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.section {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
background-image: url('@/assets/image/zu6254@2x.png');
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
background-color: var(--im-bg-color);
|
||
|
||
.header {
|
||
width: 100%;
|
||
height: 230px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: flex;
|
||
padding: 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::before {
|
||
width: 150px;
|
||
height: 150px;
|
||
content: '';
|
||
position: absolute;
|
||
z-index: 1;
|
||
border-radius: 50%;
|
||
right: -25%;
|
||
top: -25%;
|
||
}
|
||
|
||
.nickname {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
width: 80%;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.gender {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
right: 122px;
|
||
bottom: 65px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 20px;
|
||
z-index: 1;
|
||
&:hover {
|
||
cursor: pointer;
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
padding: 20px 30px;
|
||
max-height: 300px;
|
||
.motto {
|
||
min-height: 26px;
|
||
border-radius: 5px;
|
||
padding: 5px 8px;
|
||
line-height: 25px;
|
||
background: #f3f5f7;
|
||
color: var(--im-text-color);
|
||
font-size: 12px;
|
||
margin-bottom: 20px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
height: 60px;
|
||
padding: 0 15px;
|
||
}
|
||
}
|
||
|
||
.infos {
|
||
.info-item {
|
||
height: 30px;
|
||
width: 100%;
|
||
margin: 3px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.name {
|
||
width: 45px;
|
||
flex-shrink: 0;
|
||
color: #625f5f;
|
||
}
|
||
|
||
.text {
|
||
flex: 1 auto;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.edit {
|
||
text-decoration: underline;
|
||
text-decoration-style: solid;
|
||
text-underline-offset: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
html[theme-mode='dark'] {
|
||
.section {
|
||
.header {
|
||
background: #2c2c32;
|
||
}
|
||
|
||
.motto {
|
||
background-color: rgb(44, 44, 50);
|
||
}
|
||
}
|
||
|
||
.infos {
|
||
.info-item {
|
||
.name {
|
||
color: #afabab;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|