|
@@ -14,13 +14,16 @@
|
|
|
></el-tree>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="message-info-container">
|
|
|
+ <div class="message-info-container" :class="{ big: !showCheckUser }">
|
|
|
<div class="flex direction-column message-info">
|
|
|
<div class="flex items-center p-base message-info-header">
|
|
|
<div class="flex flex-1 items-center overflow-hidden send-user">
|
|
|
<span class="m-r-mini">收件人</span>
|
|
|
<span class="flex flex-1 overflow-hidden items-center justify-between radius-base m-r-base user-name">
|
|
|
- <span class="flex-1 checked-users"> {{ viewCheckedUser }}</span>
|
|
|
+ <p class="flex-1 checked-users flex" :class="{ big: showCheckUser }">
|
|
|
+ <span class="split-names">{{ viewCheckedUser }}</span>
|
|
|
+ <span v-if="checkedUsers.length > 3">共计{{ checkedUsers.length }}个人员</span>
|
|
|
+ </p>
|
|
|
<el-button class="m-l-base" size="small" type="primary" @click="toggleCheckUser"> 选择收件人 </el-button>
|
|
|
</span>
|
|
|
</div>
|
|
@@ -42,8 +45,13 @@
|
|
|
<el-button size="small" type="primary" :disabled="!allowSend" :loading="loading" @click="onSendMessage">
|
|
|
发送
|
|
|
</el-button>
|
|
|
+ <el-button v-if="checkedUsers.length == 1" size="small" plain @click="toggleHistory">历史消息</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <message-history
|
|
|
+ v-if="showHistory"
|
|
|
+ :send-user-id="checkedUsers.length == 1 ? checkedUsers[0].id : undefined"
|
|
|
+ ></message-history>
|
|
|
</div>
|
|
|
</div>
|
|
|
<image-preview v-model="previewModalVisible" :url="props.paperPath || ''"></image-preview>
|
|
@@ -57,7 +65,7 @@ import ContentEditAble from '@/components/common/ContentEditAble.vue'
|
|
|
import ImagePreview from '../ImagePreview.vue'
|
|
|
import useFetch from '@/hooks/useFetch'
|
|
|
import useVModel from '@/hooks/useVModel'
|
|
|
-
|
|
|
+import MessageHistory from '@/components/shared/message/MessageHistory.vue'
|
|
|
import type { ExtractApiResponse } from '@/api/api'
|
|
|
|
|
|
type MarkerItem = ExtractArrayValue<ExtractApiResponse<'getUserGroup'>['chiffGroup']>
|
|
@@ -70,7 +78,7 @@ const props = defineProps<{
|
|
|
|
|
|
/** cleat warning */
|
|
|
const emit = defineEmits(['close', 'change-type', 'reply'])
|
|
|
-
|
|
|
+const showHistory = ref<boolean>(false)
|
|
|
/** 默认的收件人ID */
|
|
|
const replyUserId = useVModel(props, 'replyUserId')
|
|
|
|
|
@@ -122,7 +130,8 @@ const treeProp = {
|
|
|
children: 'markers',
|
|
|
label(treeNode: TreeNode) {
|
|
|
if (isMarker(treeNode)) {
|
|
|
- return treeNode.name || treeNode.loginName
|
|
|
+ // return treeNode.name || treeNode.loginName
|
|
|
+ return `${treeNode.loginName}-${treeNode.name}`
|
|
|
}
|
|
|
return treeNode.label
|
|
|
},
|
|
@@ -165,6 +174,9 @@ watch(
|
|
|
|
|
|
const onCheckChange = () => {
|
|
|
checkedUsers.value = (treeRef?.value?.getCheckedNodes(true) as MarkerItem[]).filter((v) => !!v.id) || []
|
|
|
+ if (checkedUsers.value.length != 1) {
|
|
|
+ showHistory.value = false
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
watch(messageContent, () => {
|
|
@@ -210,28 +222,36 @@ const onSendMessage = async () => {
|
|
|
}
|
|
|
|
|
|
getUserGroup()
|
|
|
+
|
|
|
+const toggleHistory = () => {
|
|
|
+ showHistory.value = !showHistory.value
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.message-list-modal {
|
|
|
background-color: transparent;
|
|
|
- width: 880px;
|
|
|
+ width: 750px;
|
|
|
.tree-box {
|
|
|
- width: 280px;
|
|
|
+ width: 260px;
|
|
|
height: 446px;
|
|
|
::v-deep(.el-tree) {
|
|
|
min-height: 100%;
|
|
|
}
|
|
|
}
|
|
|
.message-list {
|
|
|
- width: 280px;
|
|
|
+ width: 260px;
|
|
|
height: 446px;
|
|
|
background: #fafafa;
|
|
|
box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
.message-info-container {
|
|
|
// width: 600px;
|
|
|
- flex: 1;
|
|
|
+ // flex: 1;
|
|
|
+ width: calc(100% - 260px);
|
|
|
+ &.big {
|
|
|
+ width: 750px;
|
|
|
+ }
|
|
|
.message-info {
|
|
|
height: 446px;
|
|
|
background-color: $color--white;
|
|
@@ -245,8 +265,19 @@ getUserGroup()
|
|
|
padding: 10px 12px;
|
|
|
border: $OnePixelLine;
|
|
|
.checked-users {
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
+ // overflow: hidden;
|
|
|
+ // white-space: nowrap;
|
|
|
+ display: flex;
|
|
|
+ width: 500px;
|
|
|
+ &.big {
|
|
|
+ width: 240px;
|
|
|
+ }
|
|
|
+ .split-names {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|