From 235d6ddf716ae985d10a1cd7413979fbb099cd2f Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Wed, 28 Feb 2024 14:06:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/components.d.ts                    |   1 +
 src/views/sysworkflow/codepage/page.vue      | 612 +++++++------------
 src/views/sysworkflow/codepage/page_jsgs.vue | 413 +++++++++++++
 3 files changed, 634 insertions(+), 392 deletions(-)
 create mode 100644 src/views/sysworkflow/codepage/page_jsgs.vue

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 2fbfb8aef..9b8df6bf0 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -67,6 +67,7 @@ declare module '@vue/runtime-core' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElStep: typeof import('element-plus/es')['ElStep']
     ElSteps: typeof import('element-plus/es')['ElSteps']
diff --git a/src/views/sysworkflow/codepage/page.vue b/src/views/sysworkflow/codepage/page.vue
index e9b3fc8b4..b47deb9b1 100644
--- a/src/views/sysworkflow/codepage/page.vue
+++ b/src/views/sysworkflow/codepage/page.vue
@@ -1,413 +1,241 @@
 <!--
 @ 作者: 秦东
-@ 时间: 2023-12-11 13:28:37
-@ 备注: 模拟计算公式编辑器
+@ 时间: 2024-02-20 08:59:00
+@ 备注: 实验表单
 -->
-<template>
+<script lang='ts' setup>
+
+const size = ref('default')
+const labelPosition = ref('right')
+
+const ruleForm = reactive<any>({
+	name: 'Hello',
+  region: '',
+  count: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+const editMycontRules = reactive({
+	name: [{ required: true, message: "请输入姓名", trigger: "blur" }],	
+})
+const editPostFormRef = ref(ElForm);	//编辑表单
+const submitForm = async (formEl: FormInstance | undefined) => {
+	editPostFormRef.value.validate((isValid: boolean) => {
+		if (isValid) {
 
-	<el-dialog
-    v-model="isShow"
-    title="公式编辑"
-    width="800px"
-    :before-close="handleClose"
-  >		
-		<div>目标字段 =</div>
-		<el-row :gutter="20">
-		  <el-col :span="16">
-			<editor ref="hjks" id="tinymce" v-model="tinymceHtml" :init="tinymceInit"></editor>
-		  </el-col>
-		  <el-col :span="8">
+		}
+	})
+}
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+  value: `${idx + 1}`,
+  label: `${idx + 1}`,
+}))
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+const inline = ref(false)
+const labelWidth = ref<any>("")
+const labelSuffix = ref<any>("")
+const hideRequiredAsterisk = ref(false)
+const requireAsteriskPosition  = ref('right')
+const showMessage =  ref(true)
+const inlineMessage = ref(false)
+const statusIcon = ref(false)
+</script>
+<template>
+	<el-row>
+		<el-col :span="24">
 			<el-row>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('(')">(</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber(')')">)</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('C')">C</el-button>
+				<el-col :span="8">对齐方式：</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="labelPosition" label="label position">
+						<el-radio-button label="left">Left</el-radio-button>
+						<el-radio-button label="right">Right</el-radio-button>
+						<el-radio-button label="top">Top</el-radio-button>
+					</el-radio-group>	
 				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('+')">+</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('1')">1</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('2')">2</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('3')">3</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('-')">-</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('4')">4</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('5')">5</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('6')">6</el-button>
-				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('*')">×</el-button>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">尺寸控制：</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="size" label="size control">
+						<el-radio-button label="large">large</el-radio-button>
+						<el-radio-button label="default">default</el-radio-button>
+						<el-radio-button label="small">small</el-radio-button>
+					</el-radio-group>
 				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('7')">7</el-button>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">行内表单模式：</el-col>
+				<el-col :span="16">
+					<el-switch v-model="inline" active-text="Open" inactive-text="Close" />
 				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('8')">8</el-button>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">标签宽度：</el-col>
+				<el-col :span="16">
+					<el-input v-model="labelWidth" placeholder="Please input">
+						<template #append>PX</template>
+					</el-input>
 				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('9')">9</el-button>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">标签后缀：</el-col>
+				<el-col :span="16">
+					<el-input v-model="labelSuffix" placeholder="Please input">
+					</el-input>
 				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('/')">÷</el-button>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否隐藏必填字段标签旁边的红色星号。：</el-col>
+				<el-col :span="16">
+					<el-switch v-model="hideRequiredAsterisk" active-text="Open" inactive-text="Close" />
 				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('%')">%</el-button>
+			</el-row>
+		
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">星号的位置</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="requireAsteriskPosition" label="label position">
+						<el-radio-button label="left">Left</el-radio-button>
+						<el-radio-button label="right">Right</el-radio-button>
+					</el-radio-group>	
 				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('0')">0</el-button>
+			</el-row>
+		
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否显示校验错误信息:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="showMessage" active-text="Open" inactive-text="Close" />
 				</el-col>
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('.')">.</el-button>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否以行内形式展示校验信息:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="inlineMessage" active-text="Open" inactive-text="Close" />
 				</el-col>
-				
-				<el-col :span="6">
-					<el-button plain class="butkey" @click="computeNumber('=')">=</el-button>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否在输入框中显示校验结果反馈图标:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="statusIcon" active-text="Open" inactive-text="Close" />
 				</el-col>
 			</el-row>
-		  </el-col>
-		</el-row>
-
+		</el-col>
+		<el-col :span="24">
 		
-		<el-row>
-			<el-col :span="4">
-				<el-button type="primary" @click="testAndVerify">校验公式</el-button>
-			</el-col>
-			<el-col :span="16">{{suanShitwo}}</el-col>
-			<el-col :span="4"></el-col>
-		</el-row>
-
-		<div class="tipBox">{{ errorMsg }}</div>
-		<el-row :gutter="10">
-			<el-col :span="6">
-				<div class="colBox">
-					<div class="colBoxTitle">当前表单字段</div>
-					<div class="colBoxContent">
-					
-						<el-collapse v-model="fieldCurCollapse">
-
-							<el-collapse-item  v-for="(group,group_idx) in fieldList" :key="group_idx" :title="group.name" :name="group.id">
-								<div v-for="(i,idx) in group.children" :key="idx" class="item" @mouseenter="itemMouseenter(i)" @mouseleave="itemMouseleave" @click="addTag(i,'field')">
-									<div class="name">{{i.name}}</div>
-									<div class="type" :style="typeColors.find(x=>x.name==i.dataType)?.typeStyle">
-										{{i.dataTypeName}}
-									</div>
-								</div>
-							</el-collapse-item>
-						</el-collapse>
-					
-					
-					</div>
-				</div>
-			</el-col>
-			<el-col :span="6">
-				<div class="colBox">
-					<div class="colBoxTitle">函数列表</div>
-					<div class="colBoxContent">
-						
-						<el-collapse v-model="funcCurCollapse">
-
-							<el-collapse-item  v-for="(group,group_idx) in funcList" :key="group_idx" :title="group.name" :name="group.id">
-								<div v-for="(i,idx) in group.children" :key="idx" class="item" @mouseenter="itemMouseenter(i)" @mouseleave="itemMouseleave" @click="addTag(i,'func')">
-									<div class="name">{{i.name}}</div>
-									<div class="type" :style="typeColors.find(x=>x.name==i.dataType)?.typeStyle">
-										{{i.dataTypeName}}
-									</div>
-								</div>
-							</el-collapse-item>
-						</el-collapse>
-
-
-					</div>
-				</div>
-			</el-col>
-			<el-col :span="12">
-				<div class="colBox">
-					<div class="colBoxTitle">说明</div>
-					<div class="colBoxContent">
-						
-						<div  class="mathMsg">
-							<div v-html="descContent">
-						</div>
-						</div>
-					</div>
-				</div>
-			</el-col>
-		</el-row>
-
-		{{tinymceHtml}}
-		<hr />
-		{{ removeHTMLTag(tinymceHtml) }}
-		<div ref="tinymceBox" v-html="tinymceHtml"> </div>
-		<template #footer>
-      <span class="dialog-footer">
-        <el-button @click="isShow = false">关闭</el-button>
-        <el-button type="primary" @click="isShow = false">确定</el-button>
-		
-      </span>
-    </template>
-	</el-dialog>
+			<el-form
+				ref="editPostFormRef"
+				:model="ruleForm"
+				:label-width="labelWidth"
+				:label-position="labelPosition"
+				:size="size"
+				:rules="editMycontRules"
+				:inline="inline"
+				:label-suffix="labelSuffix"
+				:hide-required-asterisk="hideRequiredAsterisk"
+				:require-asterisk-position="requireAsteriskPosition"
+				:show-message="showMessage"
+				:inline-message="inlineMessage"
+				:status-icon="statusIcon"
+				form-row-2
+			>
+				<el-form-item label="Activity name" prop="name">
+					<el-input v-model="ruleForm.name" />
+				</el-form-item>
+				<el-form-item label="Activity zone" prop="region">
+					<el-select v-model="ruleForm.region" placeholder="Activity zone">
+						<el-option label="Zone one" value="shanghai" />
+						<el-option label="Zone two" value="beijing" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="Activity count" prop="count">
+					<el-select-v2
+						v-model="ruleForm.count"
+						placeholder="Activity count"
+						:options="options"
+					/>
+				</el-form-item>
+				<el-form-item label="Activity time" required>
+					<el-col :span="11">
+						<el-form-item prop="date1">
+						<el-date-picker
+							v-model="ruleForm.date1"
+							type="date"
+							label="Pick a date"
+							placeholder="Pick a date"
+							style="width: 100%"
+						/>
+						</el-form-item>
+					</el-col>
+					<el-col class="text-center" :span="2">
+						<span class="text-gray-500">-</span>
+					</el-col>
+					<el-col :span="11">
+						<el-form-item prop="date2">
+							<el-time-picker
+								v-model="ruleForm.date2"
+								label="Pick a time"
+								placeholder="Pick a time"
+								style="width: 100%"
+							/>
+						</el-form-item>
+					</el-col>
+				</el-form-item>
+				<el-form-item label="Instant delivery" prop="delivery">
+					<el-switch v-model="ruleForm.delivery" />
+				</el-form-item>
+				<el-form-item label="Activity type" prop="type">
+					<el-checkbox-group v-model="ruleForm.type">
+						<el-checkbox label="Online activities" name="type" />
+						<el-checkbox label="Promotion activities" name="type" />
+						<el-checkbox label="Offline activities" name="type" />
+						<el-checkbox label="Simple brand exposure" name="type" />
+					</el-checkbox-group>
+				</el-form-item>
+				<el-form-item label="Resources" prop="resource">
+					<el-radio-group v-model="ruleForm.resource">
+						<el-radio label="Sponsorship" />
+						<el-radio label="Venue" />
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item label="Activity form" prop="desc">
+					<el-input v-model="ruleForm.desc" type="textarea" />
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm(ruleFormRef)">
+						Create
+					</el-button>
+					<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+				</el-form-item>
+			</el-form>
+		</el-col>
+	</el-row>
 </template>
-<script lang='ts' setup>
-import { ref, onMounted } from "vue";
-import typeColors from "./unitcss";
-import { fieldList,funcList } from "./mathFunction"
-/**
- * 富文本组件
- */
-import tinymce from "tinymce/tinymce";
-import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
-import "tinymce/themes/silver/theme";
-import Editor from "@tinymce/tinymce-vue"; // 引入组件
-/**
- * 初始富文本组件
- */
-const tinymceInit = {
-	language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
-	language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
-	skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式
-	height: 260, // 限制高度
-	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文件需自己创建并引入
-}
-onMounted(() => {
-  tinymce.init({}); // 初始化富文本
-	console.log("funcList",funcListw)
-});
-const errorMsg = ref("") //错误信息
-const tinymceHtml = ref("")
-let fieldCurCollapse = ref("");
-let funcCurCollapse = ref("");
-const funcListw = ref(funcList);
-const descContent = ref(""); //函数说明
-const isShow = ref(true)
-
-const hjks = ref<any>(null)
-
-const tinymceBox = ref(null)
-//数学函数说明操作
-const itemMouseenter = (item) => {
-  descContent.value = item.desc;
-};
-const itemMouseleave = () => {
-  descContent.value = "";
-};
-
-//添加数据标签
-const addTag = (data:any,type:string) => {
-	console.log("tinymce----->",hjks);
-	
-	let viewStyle = type == "field" ? typeColors.find((x) => x.name == data.dataType)?.viewStyle : typeColors.find((x) => x.name == "func")?.viewStyle;
-	let viewStyleStr = "margin:0 5px;";
-	Object.keys(viewStyle).map((key) => {
-		let keyStr = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-		viewStyleStr += `${keyStr}:${viewStyle[key]};`;
-	});
-	if (type == "field") {
-		tinymce.activeEditor.execCommand('mceInsertContent', false, `<span style="${viewStyleStr}" contenteditable="false" data-keyid="${data.id}">${data.name}</span>`);
-	}else{
-		tinymce.activeEditor.execCommand('mceInsertContent', false, `<span class="hanshu" style="${viewStyleStr}" contenteditable="false">${data.name}</span><span  class="exp"  style="${viewStyleStr}" contenteditable="false">(</span><span  class="exp" style="${viewStyleStr}"  contenteditable="false">)</span>`);
-	}
-
-	// nextTick(()=>{
-		
-	
-	// })
-
-	
-	// console.log("tinymceBox--3--->",fsdf);
-	// if(tinymceBox.value.childNodes.length >=0){
-	// 	tinymceBox.value.childNodes.forEach(element =>{
-	// 		console.log("tinymceBox---4-->",element.value.childNodes);
-	// 	})
-	// }
-	
-}
-const suanShioen = ref<any[]>()
-const suanShitwo = ref<any[]>()
-//验证公式
-const testAndVerify = () => {
-	let pattern = "(<p>)(.*)(<\/p>)"; 
-	
-	console.log("tinymceBox----->",tinymceBox);
-	console.log("tinymceBox--1--->",tinymceBox.value.innerHTML);
-	console.log("tinymceBox--2--->",tinymceBox.value.innerText);
-	console.log("tinymceBox--3--->",tinymceBox.value);
-	let fsdf = tinymceBox.value.innerHTML.match(pattern);
-	console.log("tinymceBox--4--->",fsdf,fsdf[2]);
-
-	console.log("tinymceBox--5--->",tinymceBox.value.childNodes);
-	let formulaOne = [];
-	let formulaTwo = [];
-	tinymceBox.value.childNodes.forEach(element => {
-		console.log("element----->",element.childNodes);
-		element.childNodes.forEach(child => {
-			console.log("child--classList--->",child.classList);
-			console.log("child----->",child.innerText,child.data);
-			formulaOne.push(child.innerText?child.innerText:child.data)
-
-			if(child.dataset&&child.dataset.keyid){
-				console.log("child.dataset--222222--->",child.dataset.keyid);
-				formulaTwo.push(child.dataset.keyid)
-			}else{
-				formulaTwo.push(child.innerText?child.innerText:child.data)
-			}
-
-			// if(child.classList){
-			// 	formulaTwo.push(child.innerHTML)
-			// 	if(child.classList.value == "hanshu" || child.classList.value == "exp"){
-			// 		formulaOne.push(child.innerHTML)
-			// 	}
-			// 	if(child.dataset && child.dataset.key){
-			// 		formulaTwo.push(child.dataset.keyid)
-			// 	}
-			// }else{
-			// 	formulaOne.push(child.data)
-			// 	formulaTwo.push(child.data)
-			// }
-
-
-		})
-		
-
-	});
-	console.log("formulaOne------>",formulaOne);
-	console.log("formulaTwo",formulaTwo);
-	suanShioen.value = formulaOne.join('').replace(/\s+/g, "");
-	suanShitwo.value = formulaTwo.join('').replace(/\s+/g, "");
-	console.log("suanShioen",suanShioen.value);
-	console.log("suanShitwo",suanShitwo.value);
-}
-
-
-
-// watch(tinymceBox,() => {
-// 	console.log("tinymceBox--见识--->",tinymceBox);
-// },{ deep:true, immediate: true  })
-
-const removeHTMLTag = (str:any) => {
-//   str = str.replace(/<\/?[^>]*>/g, ""); //去除HTML tag
-//   str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空白
-//   str = str.replace(/\n[\s| | ]*\r/g, "\n"); //去除多余空行
-//   str = str.replace(/&nbsp;/gi, ""); //去掉&nbsp;
-  return str;
-}
-/**
- * 计算器
- */
-const computeNumber = (val:string) =>{
-	if(val === "C"){
-		tinymceHtml.value = "";
-	}else{
-		tinymce.activeEditor.execCommand('mceInsertContent', false, val);
-	}
-	
-}
-</script>
 <style  lang='scss' scoped>
-.butkey{
-	width:45px;
-	height:40px;
-	margin-bottom:15px;
-}
-.tipBox{
-	width:100%;
-	height:30px;
-	line-height:30px;
-}
-.el-row {
-  // margin-top: 20px;
-}
-.yincnag{
-	display:none;
-}
-.tox-tinymce{
-	border-radius: 0px;
-}
-.colBox{
-	border: 1px solid #eee;
-	border-radius: 0px;
-	.colBoxTitle{
-		width:100%;
-		line-height:35px;
-		border-bottom: 1px solid #eee;
-		padding-left: 15px;
-	}
-	.colBoxContent{
-		width:100%;
-		height:300px;
-		overflow: hidden;
-		overflow-y: auto;
-		.item {
-        display: flex;
-        align-items: center;
-        margin: 8px 0;
-        padding: 0 8px;
-        .name {
-          color: #000;
-          font-weight: 700;
-					
-        }
-        .type {
-          min-width: 50px;
-          padding: 1px 5px;
-          border-radius: 5px;
-          color: #fff;
-          margin-left: auto;
-          font-weight: 700;
-					text-align: center;
-        }
-      }
-	}
-	.mathMsg{
-		text-align: left;
-		padding:10px 15px;
-		ul {
-			list-style-type: circle;
-			li{
-				cursor: pointer;
-				.info {
-					font-weight: 700;
-					color: #4a538a;
-				}
-				.example {
-					font-weight: 700;
-					.func {
-						color: #871ab3;
-					}
-					.param {
-						background: #1e87b6;
-						color: #fff;
-						padding: 3px 5px;
-						border-radius: 3px;
-						margin: 0px 5px;
-					}
-				}
-			}
-			
-		}
-	}
-}
 
 </style>
-
diff --git a/src/views/sysworkflow/codepage/page_jsgs.vue b/src/views/sysworkflow/codepage/page_jsgs.vue
new file mode 100644
index 000000000..e9b3fc8b4
--- /dev/null
+++ b/src/views/sysworkflow/codepage/page_jsgs.vue
@@ -0,0 +1,413 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-12-11 13:28:37
+@ 备注: 模拟计算公式编辑器
+-->
+<template>
+
+	<el-dialog
+    v-model="isShow"
+    title="公式编辑"
+    width="800px"
+    :before-close="handleClose"
+  >		
+		<div>目标字段 =</div>
+		<el-row :gutter="20">
+		  <el-col :span="16">
+			<editor ref="hjks" id="tinymce" v-model="tinymceHtml" :init="tinymceInit"></editor>
+		  </el-col>
+		  <el-col :span="8">
+			<el-row>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('(')">(</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber(')')">)</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('C')">C</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('+')">+</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('1')">1</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('2')">2</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('3')">3</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('-')">-</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('4')">4</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('5')">5</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('6')">6</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('*')">×</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('7')">7</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('8')">8</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('9')">9</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('/')">÷</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('%')">%</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('0')">0</el-button>
+				</el-col>
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('.')">.</el-button>
+				</el-col>
+				
+				<el-col :span="6">
+					<el-button plain class="butkey" @click="computeNumber('=')">=</el-button>
+				</el-col>
+			</el-row>
+		  </el-col>
+		</el-row>
+
+		
+		<el-row>
+			<el-col :span="4">
+				<el-button type="primary" @click="testAndVerify">校验公式</el-button>
+			</el-col>
+			<el-col :span="16">{{suanShitwo}}</el-col>
+			<el-col :span="4"></el-col>
+		</el-row>
+
+		<div class="tipBox">{{ errorMsg }}</div>
+		<el-row :gutter="10">
+			<el-col :span="6">
+				<div class="colBox">
+					<div class="colBoxTitle">当前表单字段</div>
+					<div class="colBoxContent">
+					
+						<el-collapse v-model="fieldCurCollapse">
+
+							<el-collapse-item  v-for="(group,group_idx) in fieldList" :key="group_idx" :title="group.name" :name="group.id">
+								<div v-for="(i,idx) in group.children" :key="idx" class="item" @mouseenter="itemMouseenter(i)" @mouseleave="itemMouseleave" @click="addTag(i,'field')">
+									<div class="name">{{i.name}}</div>
+									<div class="type" :style="typeColors.find(x=>x.name==i.dataType)?.typeStyle">
+										{{i.dataTypeName}}
+									</div>
+								</div>
+							</el-collapse-item>
+						</el-collapse>
+					
+					
+					</div>
+				</div>
+			</el-col>
+			<el-col :span="6">
+				<div class="colBox">
+					<div class="colBoxTitle">函数列表</div>
+					<div class="colBoxContent">
+						
+						<el-collapse v-model="funcCurCollapse">
+
+							<el-collapse-item  v-for="(group,group_idx) in funcList" :key="group_idx" :title="group.name" :name="group.id">
+								<div v-for="(i,idx) in group.children" :key="idx" class="item" @mouseenter="itemMouseenter(i)" @mouseleave="itemMouseleave" @click="addTag(i,'func')">
+									<div class="name">{{i.name}}</div>
+									<div class="type" :style="typeColors.find(x=>x.name==i.dataType)?.typeStyle">
+										{{i.dataTypeName}}
+									</div>
+								</div>
+							</el-collapse-item>
+						</el-collapse>
+
+
+					</div>
+				</div>
+			</el-col>
+			<el-col :span="12">
+				<div class="colBox">
+					<div class="colBoxTitle">说明</div>
+					<div class="colBoxContent">
+						
+						<div  class="mathMsg">
+							<div v-html="descContent">
+						</div>
+						</div>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+
+		{{tinymceHtml}}
+		<hr />
+		{{ removeHTMLTag(tinymceHtml) }}
+		<div ref="tinymceBox" v-html="tinymceHtml"> </div>
+		<template #footer>
+      <span class="dialog-footer">
+        <el-button @click="isShow = false">关闭</el-button>
+        <el-button type="primary" @click="isShow = false">确定</el-button>
+		
+      </span>
+    </template>
+	</el-dialog>
+</template>
+<script lang='ts' setup>
+import { ref, onMounted } from "vue";
+import typeColors from "./unitcss";
+import { fieldList,funcList } from "./mathFunction"
+/**
+ * 富文本组件
+ */
+import tinymce from "tinymce/tinymce";
+import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
+import "tinymce/themes/silver/theme";
+import Editor from "@tinymce/tinymce-vue"; // 引入组件
+/**
+ * 初始富文本组件
+ */
+const tinymceInit = {
+	language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
+	language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
+	skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式
+	height: 260, // 限制高度
+	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文件需自己创建并引入
+}
+onMounted(() => {
+  tinymce.init({}); // 初始化富文本
+	console.log("funcList",funcListw)
+});
+const errorMsg = ref("") //错误信息
+const tinymceHtml = ref("")
+let fieldCurCollapse = ref("");
+let funcCurCollapse = ref("");
+const funcListw = ref(funcList);
+const descContent = ref(""); //函数说明
+const isShow = ref(true)
+
+const hjks = ref<any>(null)
+
+const tinymceBox = ref(null)
+//数学函数说明操作
+const itemMouseenter = (item) => {
+  descContent.value = item.desc;
+};
+const itemMouseleave = () => {
+  descContent.value = "";
+};
+
+//添加数据标签
+const addTag = (data:any,type:string) => {
+	console.log("tinymce----->",hjks);
+	
+	let viewStyle = type == "field" ? typeColors.find((x) => x.name == data.dataType)?.viewStyle : typeColors.find((x) => x.name == "func")?.viewStyle;
+	let viewStyleStr = "margin:0 5px;";
+	Object.keys(viewStyle).map((key) => {
+		let keyStr = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+		viewStyleStr += `${keyStr}:${viewStyle[key]};`;
+	});
+	if (type == "field") {
+		tinymce.activeEditor.execCommand('mceInsertContent', false, `<span style="${viewStyleStr}" contenteditable="false" data-keyid="${data.id}">${data.name}</span>`);
+	}else{
+		tinymce.activeEditor.execCommand('mceInsertContent', false, `<span class="hanshu" style="${viewStyleStr}" contenteditable="false">${data.name}</span><span  class="exp"  style="${viewStyleStr}" contenteditable="false">(</span><span  class="exp" style="${viewStyleStr}"  contenteditable="false">)</span>`);
+	}
+
+	// nextTick(()=>{
+		
+	
+	// })
+
+	
+	// console.log("tinymceBox--3--->",fsdf);
+	// if(tinymceBox.value.childNodes.length >=0){
+	// 	tinymceBox.value.childNodes.forEach(element =>{
+	// 		console.log("tinymceBox---4-->",element.value.childNodes);
+	// 	})
+	// }
+	
+}
+const suanShioen = ref<any[]>()
+const suanShitwo = ref<any[]>()
+//验证公式
+const testAndVerify = () => {
+	let pattern = "(<p>)(.*)(<\/p>)"; 
+	
+	console.log("tinymceBox----->",tinymceBox);
+	console.log("tinymceBox--1--->",tinymceBox.value.innerHTML);
+	console.log("tinymceBox--2--->",tinymceBox.value.innerText);
+	console.log("tinymceBox--3--->",tinymceBox.value);
+	let fsdf = tinymceBox.value.innerHTML.match(pattern);
+	console.log("tinymceBox--4--->",fsdf,fsdf[2]);
+
+	console.log("tinymceBox--5--->",tinymceBox.value.childNodes);
+	let formulaOne = [];
+	let formulaTwo = [];
+	tinymceBox.value.childNodes.forEach(element => {
+		console.log("element----->",element.childNodes);
+		element.childNodes.forEach(child => {
+			console.log("child--classList--->",child.classList);
+			console.log("child----->",child.innerText,child.data);
+			formulaOne.push(child.innerText?child.innerText:child.data)
+
+			if(child.dataset&&child.dataset.keyid){
+				console.log("child.dataset--222222--->",child.dataset.keyid);
+				formulaTwo.push(child.dataset.keyid)
+			}else{
+				formulaTwo.push(child.innerText?child.innerText:child.data)
+			}
+
+			// if(child.classList){
+			// 	formulaTwo.push(child.innerHTML)
+			// 	if(child.classList.value == "hanshu" || child.classList.value == "exp"){
+			// 		formulaOne.push(child.innerHTML)
+			// 	}
+			// 	if(child.dataset && child.dataset.key){
+			// 		formulaTwo.push(child.dataset.keyid)
+			// 	}
+			// }else{
+			// 	formulaOne.push(child.data)
+			// 	formulaTwo.push(child.data)
+			// }
+
+
+		})
+		
+
+	});
+	console.log("formulaOne------>",formulaOne);
+	console.log("formulaTwo",formulaTwo);
+	suanShioen.value = formulaOne.join('').replace(/\s+/g, "");
+	suanShitwo.value = formulaTwo.join('').replace(/\s+/g, "");
+	console.log("suanShioen",suanShioen.value);
+	console.log("suanShitwo",suanShitwo.value);
+}
+
+
+
+// watch(tinymceBox,() => {
+// 	console.log("tinymceBox--见识--->",tinymceBox);
+// },{ deep:true, immediate: true  })
+
+const removeHTMLTag = (str:any) => {
+//   str = str.replace(/<\/?[^>]*>/g, ""); //去除HTML tag
+//   str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空白
+//   str = str.replace(/\n[\s| | ]*\r/g, "\n"); //去除多余空行
+//   str = str.replace(/&nbsp;/gi, ""); //去掉&nbsp;
+  return str;
+}
+/**
+ * 计算器
+ */
+const computeNumber = (val:string) =>{
+	if(val === "C"){
+		tinymceHtml.value = "";
+	}else{
+		tinymce.activeEditor.execCommand('mceInsertContent', false, val);
+	}
+	
+}
+</script>
+<style  lang='scss' scoped>
+.butkey{
+	width:45px;
+	height:40px;
+	margin-bottom:15px;
+}
+.tipBox{
+	width:100%;
+	height:30px;
+	line-height:30px;
+}
+.el-row {
+  // margin-top: 20px;
+}
+.yincnag{
+	display:none;
+}
+.tox-tinymce{
+	border-radius: 0px;
+}
+.colBox{
+	border: 1px solid #eee;
+	border-radius: 0px;
+	.colBoxTitle{
+		width:100%;
+		line-height:35px;
+		border-bottom: 1px solid #eee;
+		padding-left: 15px;
+	}
+	.colBoxContent{
+		width:100%;
+		height:300px;
+		overflow: hidden;
+		overflow-y: auto;
+		.item {
+        display: flex;
+        align-items: center;
+        margin: 8px 0;
+        padding: 0 8px;
+        .name {
+          color: #000;
+          font-weight: 700;
+					
+        }
+        .type {
+          min-width: 50px;
+          padding: 1px 5px;
+          border-radius: 5px;
+          color: #fff;
+          margin-left: auto;
+          font-weight: 700;
+					text-align: center;
+        }
+      }
+	}
+	.mathMsg{
+		text-align: left;
+		padding:10px 15px;
+		ul {
+			list-style-type: circle;
+			li{
+				cursor: pointer;
+				.info {
+					font-weight: 700;
+					color: #4a538a;
+				}
+				.example {
+					font-weight: 700;
+					.func {
+						color: #871ab3;
+					}
+					.param {
+						background: #1e87b6;
+						color: #fff;
+						padding: 3px 5px;
+						border-radius: 3px;
+						margin: 0px 5px;
+					}
+				}
+			}
+			
+		}
+	}
+}
+
+</style>
+