From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/bpm/model/form/PrintTemplate/MentionModal.vue | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 110 insertions(+), 0 deletions(-)
diff --git a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
new file mode 100644
index 0000000..badeb42
--- /dev/null
+++ b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+const emit = defineEmits(['hideMentionModal', 'insertMention'])
+
+const inputRef = ref()
+const top = ref('')
+const left = ref('')
+const searchVal = ref('')
+const list = ref([
+ { id: 'startUser', name: '鍙戣捣浜�' },
+ { id: 'startUserDept', name: '鍙戣捣浜洪儴闂�' },
+ { id: 'processName', name: '娴佺▼鍚嶇О' },
+ { id: 'processNum', name: '娴佺▼缂栧彿' },
+ { id: 'startTime', name: '鍙戣捣鏃堕棿' },
+ { id: 'endTime', name: '缁撴潫鏃堕棿' },
+ { id: 'processStatus', name: '娴佺▼鐘舵��' },
+ { id: 'printUser', name: '鎵撳嵃浜�' },
+ { id: 'printTime', name: '鎵撳嵃鏃堕棿' }
+])
+const searchedList = computed(() => {
+ const searchValStr = searchVal.value.trim().toLowerCase()
+ return list.value.filter((item) => {
+ const name = item.name.toLowerCase()
+ return name.indexOf(searchValStr) >= 0
+ })
+})
+const inputKeyupHandler = (event: any) => {
+ if (event.key === 'Escape') {
+ emit('hideMentionModal')
+ }
+ if (event.key === 'Enter') {
+ const firstOne = searchedList.value[0]
+ if (firstOne) {
+ const { id, name } = firstOne
+ insertMentionHandler(id, name)
+ }
+ }
+}
+const insertMentionHandler = (id: any, name: any) => {
+ emit('insertMention', id, name)
+ emit('hideMentionModal')
+}
+
+const formFields = inject<any>('formFieldsObj')
+onMounted(() => {
+ if (formFields.value && formFields.value.length > 0) {
+ const cloneFormField = formFields.value.map((item) => {
+ return {
+ name: '[琛ㄥ崟]' + item.title,
+ id: item.field
+ }
+ })
+ list.value.push(...cloneFormField)
+ }
+ const domSelection = document.getSelection()
+ const domRange = domSelection?.getRangeAt(0)
+ if (domRange == null) return
+ const rect = domRange.getBoundingClientRect()
+
+ top.value = `${rect.top + 20}px`
+ left.value = `${rect.left + 5}px`
+
+ inputRef.value.focus()
+})
+</script>
+
+<template>
+ <div id="mention-modal" :style="{ top: top, left: left }">
+ <!-- TODO @lesan锛歝ss 鍙互鐢� unocss 鍝囷紵 -->
+ <input id="mention-input" v-model="searchVal" ref="inputRef" @keyup="inputKeyupHandler" />
+ <ul id="mention-list">
+ <li
+ v-for="item in searchedList"
+ :key="item.id"
+ @click="insertMentionHandler(item.id, item.name)"
+ >
+ {{ item.name }}
+ </li>
+ </ul>
+ </div>
+</template>
+
+<style>
+#mention-modal {
+ position: absolute;
+ border: 1px solid #ccc;
+ background-color: #fff;
+ padding: 5px;
+}
+
+#mention-modal input {
+ width: 100px;
+ outline: none;
+}
+
+#mention-modal ul {
+ padding: 0;
+ margin: 0;
+}
+
+#mention-modal ul li {
+ list-style: none;
+ cursor: pointer;
+ padding: 3px 0;
+ text-align: left;
+}
+
+#mention-modal ul li:hover {
+ text-decoration: underline;
+}
+</style>
--
Gitblit v1.8.0