3 changed files with 325 additions and 13 deletions
@ -0,0 +1,258 @@ |
|||||
|
|
||||
|
<script lang='ts' setup> |
||||
|
import { ref, onMounted } from "vue"; |
||||
|
import tinymce from "tinymce/tinymce"; |
||||
|
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示 |
||||
|
import "tinymce/themes/silver/theme"; |
||||
|
import Editor from "@tinymce/tinymce-vue"; // 引入组件 |
||||
|
import { v4 as uuidv4 } from "uuid"; |
||||
|
|
||||
|
let onlyNumber = uuidv4().replaceAll('-','').toString(); //获取唯一编码 |
||||
|
|
||||
|
/** |
||||
|
* 初始富文本组件 |
||||
|
*/ |
||||
|
const tinymceInit = { |
||||
|
selector: "#"+onlyNumber, |
||||
|
language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称） |
||||
|
language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定 |
||||
|
skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式 |
||||
|
height: 164, // 限制高度 |
||||
|
statusbar:false, |
||||
|
toolbar:false, |
||||
|
branding: false, //是否禁用“Powered by TinyMCE” |
||||
|
menubar: false, //顶部菜单栏显示 |
||||
|
forced_root_block:'', |
||||
|
newline_behavior:"", |
||||
|
content_css: "/tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入 |
||||
|
auto_focus : true, |
||||
|
} |
||||
|
const props = defineProps({ |
||||
|
aftText:{ |
||||
|
type: String, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
aftTextCopy:{ |
||||
|
type: String, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
let $emit = defineEmits(["textChange","gongshiChange"]); |
||||
|
|
||||
|
const tinymceHtml = ref("") |
||||
|
tinymceHtml.value = props.aftText |
||||
|
const tinymceBox = ref(null) |
||||
|
|
||||
|
|
||||
|
onMounted(() => { |
||||
|
tinymce.init({}); // 初始化富文本 |
||||
|
}); |
||||
|
watch(()=>tinymceHtml.value, (val:any) => { |
||||
|
$emit('textChange',val); |
||||
|
nextTick(()=>{ |
||||
|
let formulaOne = []; |
||||
|
let formulaTwo = []; |
||||
|
tinymceBox.value.childNodes.forEach(element => { |
||||
|
|
||||
|
element.childNodes.forEach(child => { |
||||
|
formulaOne.push(child.innerText?child.innerText:child.data) |
||||
|
if(child.dataset&&child.dataset.keyid){ |
||||
|
formulaTwo.push(child.dataset.keyid) |
||||
|
}else{ |
||||
|
formulaTwo.push(child.innerText?child.innerText:child.data) |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
let suanShitwo = formulaTwo.join('').replace(/\s+/g, ""); |
||||
|
let gongShi ={ |
||||
|
formulaHtml:tinymceBox.value.innerHTML, |
||||
|
mathsString:tinymceBox.value.innerText, |
||||
|
mathsFormula:suanShitwo, |
||||
|
} |
||||
|
|
||||
|
$emit('gongshiChange',gongShi); |
||||
|
if(containsNewline(gongShi.mathsString)){ |
||||
|
errorCondition("条件不允许换行") |
||||
|
}else if(!gongShi.formulaHtml.startsWith("<p><span")){ |
||||
|
errorCondition("条件需以蓝色块开头") |
||||
|
}else if(gongShi.formulaHtml.endsWith("</span></p>")){ |
||||
|
errorCondition("条件不能以蓝色块结尾") |
||||
|
}else if(countSpanTags(gongShi.formulaHtml)>1){ |
||||
|
errorCondition("不允许出现多个蓝色块") |
||||
|
}else if(!containsSingleComparator(gongShi.mathsFormula)&&!gongShi.mathsFormula.includes("包含")&&!gongShi.mathsFormula.includes("不包含")){ |
||||
|
|
||||
|
errorCondition("不存在有效符号或关键字") |
||||
|
|
||||
|
}else if(checkEnding(gongShi.mathsFormula)){ |
||||
|
errorCondition("不能以符号或关键字为结尾") |
||||
|
}else if(checkRoleStartAndOrgEnd(gongShi.mathsFormula)||checkFormFieldStartAndOrgEnd(gongShi.mathsFormula)||checkFormFieldStartAndOrgEnd2(gongShi.mathsFormula)){ |
||||
|
errorCondition("此条件无无实际意义") |
||||
|
}else{ |
||||
|
succCondition() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
{ deep: true } |
||||
|
) |
||||
|
|
||||
|
function checkRoleStartAndOrgEnd(str: string) { |
||||
|
if (str.startsWith('roleid:') && str.endsWith('数据所属部门')) { |
||||
|
return true; |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
function checkFormFieldStartAndOrgEnd(str: string) { |
||||
|
if (str.startsWith('formField:') && str.endsWith('数据所属部门')) { |
||||
|
return true; |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function checkFormFieldStartAndOrgEnd2(str: string) { |
||||
|
if (str.startsWith('formField:') && str.endsWith('数据拥有者')) { |
||||
|
return true; |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function containsSingleComparator(str: string) { |
||||
|
// 定义需要检查的运算符 |
||||
|
const comparators = ['==', '>=', '>', '<=', '<', '!=']; |
||||
|
let found = false; // 用于标记是否找到运算符 |
||||
|
let i = 0; // 字符串索引 |
||||
|
|
||||
|
while (i < str.length - 1) { // 至少需要两个字符来形成运算符 |
||||
|
// 遍历每个可能的运算符 |
||||
|
for (const comparator of comparators) { |
||||
|
if (str.substr(i, comparator.length) === comparator) { |
||||
|
// 如果找到了一个运算符 |
||||
|
if (found) { |
||||
|
// 如果已经找到了一个运算符，则返回false |
||||
|
return false; |
||||
|
} |
||||
|
found = true; // 标记为已找到 |
||||
|
// 跳过当前找到的运算符的剩余部分，避免重复检查 |
||||
|
i += comparator.length - 1; |
||||
|
break; // 跳出内层循环 |
||||
|
} |
||||
|
} |
||||
|
i++; // 继续检查下一个字符 |
||||
|
} |
||||
|
|
||||
|
// 检查是否只找到了一个运算符 |
||||
|
return found; |
||||
|
} |
||||
|
function checkEnding(str: string) { |
||||
|
const symbols = ['==', '>=', '>', '<=', '<', '!=', '=','包含','不包含']; |
||||
|
const trimmedStr = str.trim(); |
||||
|
for (let symbol of symbols) { |
||||
|
if (trimmedStr.endsWith(symbol)) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
function containsComparator(str: string) { |
||||
|
if(str.includes("==")||str.includes("!=")||str.includes(">")||str.includes(">=")||str.includes("<")||str.includes("<=")){ |
||||
|
return true |
||||
|
}else{ |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
const containsNewline = (str: string) => { |
||||
|
//console.log("Testing string:", str); // 查看传递给函数的实际字符串 |
||||
|
return /\n/.test(str); |
||||
|
}; |
||||
|
const countSpanTags = (str: string) => { |
||||
|
// 使用正则表达式匹配所有出现的<span>（不考虑闭合标签或属性） |
||||
|
const matches = str.match(/<span\b[^>]*>/gi); |
||||
|
// 如果matches是null，表示没有找到匹配项，返回0 |
||||
|
// 否则，返回匹配项数组的长度 |
||||
|
return matches ? matches.length : 0; |
||||
|
}; |
||||
|
function errorCondition(str:string){ |
||||
|
ElMessage.closeAll() |
||||
|
ElMessage({ |
||||
|
showClose: true, |
||||
|
//message: '条件格式错误 : '+str+' , 正确条件格式如 : 年龄==10', |
||||
|
message: str, |
||||
|
type: 'error', |
||||
|
duration:3500, |
||||
|
}) |
||||
|
} |
||||
|
function succCondition(){ |
||||
|
ElMessage.closeAll() |
||||
|
ElMessage({ |
||||
|
showClose: true, |
||||
|
message: '条件格式校验通过', |
||||
|
type: 'success', |
||||
|
duration:3500, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const addIcon = (currentObject:any) =>{ |
||||
|
tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${currentObject.id}" >${currentObject.label}</span>`); |
||||
|
} |
||||
|
const addIcon_field = (currentObject:any) =>{ |
||||
|
tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${currentObject.id}" >${currentObject.treeAttrs.show}</span>`); |
||||
|
} |
||||
|
const addIcon_org = (currentObject:any) =>{ |
||||
|
let id = "orgOrPerson:"+currentObject.id |
||||
|
tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${id}" >${currentObject.label}</span>`); |
||||
|
} |
||||
|
//取消 |
||||
|
const handelCancel = (associatedFormsHideDialogTextCopy:any) =>{ |
||||
|
tinymceHtml.value = associatedFormsHideDialogTextCopy |
||||
|
} |
||||
|
const tinymceReInit = ()=>{ |
||||
|
//console.log(props.aftTextCopy) |
||||
|
|
||||
|
let str:string = props.aftTextCopy |
||||
|
tinymceHtml.value = props.aftTextCopy |
||||
|
} |
||||
|
|
||||
|
const focusEditor = ()=>{ |
||||
|
tinymce.EditorManager.get(onlyNumber)?.focus(true) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
defineExpose({ |
||||
|
tinymceHtml, |
||||
|
addIcon, |
||||
|
addIcon_org, |
||||
|
addIcon_field, |
||||
|
handelCancel, |
||||
|
tinymceReInit, |
||||
|
focusEditor, |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
<template > |
||||
|
<div > |
||||
|
<editor :id="onlyNumber" v-model="tinymceHtml" :init="tinymceInit"></editor> |
||||
|
</div> |
||||
|
<div class="isHidde"> |
||||
|
<div ref="tinymceBox" v-html="tinymceHtml"> </div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.isHidde{ |
||||
|
display:none; |
||||
|
position: fixed; |
||||
|
z-index: 1; |
||||
|
margin-top: -10px |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue