22 changed files with 1269 additions and 81 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,89 @@ |
|||||
|
export const funcList = [ |
||||
|
{ |
||||
|
id: "1", |
||||
|
name: "函数列表", |
||||
|
children: [ |
||||
|
{ |
||||
|
id: "11", |
||||
|
name: "SUM", |
||||
|
type:'func', |
||||
|
dataType: "number", |
||||
|
dataTypeName: "数字", |
||||
|
desc: ` |
||||
|
<ul> |
||||
|
<li style="font-weight:700; color: #4A538A; padding: 5px 0 ;">合计公式 SUM(1,2)=3</li> |
||||
|
<li style="font-weight: 700; padding: 5px 0 ;"> |
||||
|
用法：<span style="color: #871ab3;">SUM(<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">参数1</span>,<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">...</span>)</span> |
||||
|
</li> |
||||
|
<li style="font-weight: 700; padding: 5px 0 ;"> |
||||
|
示例：<span style="color: #871ab3;">SUM(<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">语文成绩</span>,<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">数学成绩</span>,<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">其他语种成绩</span>)</span>返回三门课程总成绩 |
||||
|
</li> |
||||
|
</ul> |
||||
|
`,
|
||||
|
}, |
||||
|
{ |
||||
|
id: "14", |
||||
|
name: "AVG", |
||||
|
type:'func', |
||||
|
dataType: "number", |
||||
|
dataTypeName: "数字", |
||||
|
desc: ` |
||||
|
<ul> |
||||
|
<li style="font-weight:700; color: #4A538A; padding: 5px 0 ;">平均公式 AVG(1,2)=1.5</li> |
||||
|
<li style="font-weight: 700; padding: 5px 0 ;"> |
||||
|
用法：<span style="color: #871ab3;">AVG(<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">参数1</span>,<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">...</span>)</span> |
||||
|
</li> |
||||
|
<li style="font-weight: 700; padding: 5px 0 ;"> |
||||
|
示例：<span style="color: #871ab3;">SUM(<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">语文成绩</span>,<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">数学成绩</span>,<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">其他语种成绩</span>)</span>返回三门课程成绩的平均值 |
||||
|
</li> |
||||
|
</ul> |
||||
|
`,
|
||||
|
}, |
||||
|
{ |
||||
|
id: "12", |
||||
|
name: "MIN", |
||||
|
type:'func', |
||||
|
dataType: "number", |
||||
|
dataTypeName: "数字", |
||||
|
desc: ` |
||||
|
<ul> |
||||
|
<li style="font-weight:700; color: #4A538A, padding: 5px 0 ;">取最小 SUM(1,2)=1</li> |
||||
|
<li style="font-weight: 700; padding: 5px 0 ;"> |
||||
|
用法：<span style="color: #871ab3;">MIN(<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">参数1</span>,<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">...</span>)</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
`,
|
||||
|
}, |
||||
|
{ |
||||
|
id: "13", |
||||
|
name: "MAX", |
||||
|
type:'func', |
||||
|
dataType: "number", |
||||
|
dataTypeName: "数字", |
||||
|
desc: ` |
||||
|
<ul> |
||||
|
<li style="font-weight:700; color: #4A538A; padding: 5px 0 ;">取最大 SUM(1,2)=2</li> |
||||
|
<li style="font-weight: 700; padding: 5px 0 ;"> |
||||
|
<span style="color: #871ab3;">MAX(<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">参数1</span>,<span style=" background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px; margin: 0px 5px;">...</span>)</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
`,
|
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
export interface fieldList{ |
||||
|
id: string, |
||||
|
name: string, |
||||
|
children?:fieldChildren[] |
||||
|
} |
||||
|
|
||||
|
export interface fieldChildren{ |
||||
|
id: string, |
||||
|
type:string, |
||||
|
name: string, |
||||
|
dataType: string, |
||||
|
dataTypeName: string, |
||||
|
} |
||||
@ -0,0 +1,509 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-12-29 16:27:26 |
||||
|
@ 备注: 数学公式 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { ref, onMounted } from "vue"; |
||||
|
import typeColors from "./unitcss"; |
||||
|
import { funcList,fieldList,fieldChildren } from "./matchFunction" |
||||
|
/** |
||||
|
* 富文本组件 |
||||
|
*/ |
||||
|
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文件需自己创建并引入 |
||||
|
} |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
show:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
}, |
||||
|
subUnit:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
unitInfo:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
formListmap:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
const tinymceHtml = ref("") |
||||
|
const emits = defineEmits(["update:show","updataDigit"]); |
||||
|
const is_Show = computed({ |
||||
|
get: () => props.show, |
||||
|
set: (val) => { |
||||
|
emits("update:show", val); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const valueType = ref<number>(1) |
||||
|
const digit = ref<number>(2) |
||||
|
//数值取值 |
||||
|
const options = [ |
||||
|
{ |
||||
|
label:"四舍五入", |
||||
|
value:1 |
||||
|
}, |
||||
|
{ |
||||
|
label:"向上取整", |
||||
|
value:2 |
||||
|
}, |
||||
|
{ |
||||
|
label:"向下取整", |
||||
|
value:3 |
||||
|
}, |
||||
|
{ |
||||
|
label:"舍去取整", |
||||
|
value:4 |
||||
|
} |
||||
|
] |
||||
|
const descContent = ref<any>() |
||||
|
const funcCurCollapse = ref("1") |
||||
|
const itemMouseenter = (item) => { |
||||
|
descContent.value = item.desc; |
||||
|
}; |
||||
|
const itemMouseleave = () => { |
||||
|
descContent.value = ""; |
||||
|
}; |
||||
|
|
||||
|
//提价标签 |
||||
|
const addTag = (data:any,type:string) => { |
||||
|
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>`); |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
* 计算器 |
||||
|
*/ |
||||
|
const computeNumber = (val:string) =>{ |
||||
|
if(val === "C"){ |
||||
|
tinymceHtml.value = ""; |
||||
|
}else{ |
||||
|
tinymce.activeEditor.execCommand('mceInsertContent', false, val); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
//字段标签 |
||||
|
const fieldList = reactive<fieldList[]>() |
||||
|
const formFieldKey = ref("1") |
||||
|
const muBiaoZiDuan = ref<string>("目标字段") |
||||
|
const fileKey = ref<string>("") |
||||
|
const fieldCont = ref<fieldList[]>() |
||||
|
const unitListAry = ref<fieldChildren[]>() |
||||
|
watch(()=>props.show,(val:boolean) => { |
||||
|
// console.log("监听组件属性--->",props.subUnit) |
||||
|
valueType.value = props.subUnit.control.mathFormula.takingMethod |
||||
|
digit.value = props.subUnit.control.mathFormula.digit |
||||
|
tinymceHtml.value = props.subUnit.control.mathFormula.formulaHtml |
||||
|
// { |
||||
|
// "modelValue": "", |
||||
|
// "mathFormula": { |
||||
|
// "formulaHtml": "<p><span class=\"hanshu\" style=\"margin: 0 5px; color: #871ab3; padding: 3px 5px;\" contenteditable=\"false\">SUM</span><span class=\"exp\" style=\"margin: 0 5px; color: #871ab3; padding: 3px 5px;\" contenteditable=\"false\">(</span><span style=\"margin: 0 5px; background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px;\" contenteditable=\"false\" data-keyid=\"digitpage1704175153669\">数值</span>,<span style=\"margin: 0 5px; background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px;\" contenteditable=\"false\" data-keyid=\"digitpage1704175154851\">数值</span>,<span style=\"margin: 0 5px; background: #1e87b6; color: #fff; padding: 3px 5px; border-radius: 3px;\" contenteditable=\"false\" data-keyid=\"digitpage1704175156234\">数值</span><span class=\"exp\" style=\"margin: 0 5px; color: #871ab3; padding: 3px 5px;\" contenteditable=\"false\">)</span></p>", |
||||
|
// "mathsString": "SUM(数值,数值,数值)", |
||||
|
// "mathsFormula": "SUM(digitpage1704175153669,digitpage1704175154851,digitpage1704175156234)" |
||||
|
// } |
||||
|
// } |
||||
|
if(val){ |
||||
|
props.unitInfo.forEach((item:any)=>{ |
||||
|
if(item.label == "label值" ){ |
||||
|
muBiaoZiDuan.value = item.value |
||||
|
} |
||||
|
if(item.label == "字段标识" ){ |
||||
|
fileKey.value = item.value |
||||
|
} |
||||
|
}) |
||||
|
let zuJian = [] |
||||
|
if(props.formListmap && props.formListmap.length > 0){ |
||||
|
props.formListmap.forEach((items:any)=>{ |
||||
|
// console.log("监听组件属性--->",items) |
||||
|
if(items.type == "digitpage"){ |
||||
|
zuJian.push({ |
||||
|
id: items.name, |
||||
|
type:"field", |
||||
|
name: items.item.label, |
||||
|
dataType: "number", |
||||
|
dataTypeName: "数字", |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
let zuJianMaxt = [] |
||||
|
unitListAry.value = zuJian |
||||
|
zuJianMaxt.push({ |
||||
|
id: "1", |
||||
|
name: "表格字段", |
||||
|
children:unitListAry |
||||
|
}) |
||||
|
fieldCont.value = zuJianMaxt |
||||
|
} |
||||
|
}) |
||||
|
const tinymceBox = ref(null) |
||||
|
|
||||
|
|
||||
|
//关闭计算编辑器 |
||||
|
const handleClose = () => { |
||||
|
emits("update:show", false); |
||||
|
tinymceBox.value = "" |
||||
|
tinymceHtml.value = "" |
||||
|
} |
||||
|
|
||||
|
//确定公式 |
||||
|
const sendDigitFunc = () => { |
||||
|
let pattern = "(<p>)(.*)(<\/p>)"; |
||||
|
// let kjkdls = a(tinymceBox.value.innerHTML).find("p"); |
||||
|
// console.log("kjkdls------------------->",kjkdls) |
||||
|
// 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); |
||||
|
let suanShioen = formulaOne.join('').replace(/\s+/g, ""); |
||||
|
let suanShitwo = formulaTwo.join('').replace(/\s+/g, ""); |
||||
|
// console.log("suanShioen",suanShioen); |
||||
|
// console.log("suanShitwo",suanShitwo); |
||||
|
let gongShi ={ |
||||
|
formulaHtml:tinymceBox.value.innerHTML, |
||||
|
mathsString:tinymceBox.value.innerText, |
||||
|
mathsFormula:suanShitwo, |
||||
|
takingMethod:valueType.value, |
||||
|
digit:digit.value |
||||
|
} |
||||
|
emits("updataDigit",fileKey.value, gongShi); |
||||
|
handleClose(); |
||||
|
} |
||||
|
//改变四舍五入取值 |
||||
|
const sswrval = () => { |
||||
|
if(valueType.value == 1){ |
||||
|
digit.value = digit.value==0 ? 2 : digit.value; |
||||
|
}else{ |
||||
|
digit.value = 0 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
tinymce.init({}); // 初始化富文本 |
||||
|
}); |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="is_Show" |
||||
|
title="公式编辑" |
||||
|
width="800px" |
||||
|
:before-close="handleClose" |
||||
|
> |
||||
|
<el-row> |
||||
|
<el-col :span="10"> |
||||
|
<el-text>{{ muBiaoZiDuan }} = </el-text> |
||||
|
</el-col> |
||||
|
<el-col :span="14" style="text-align:right;"> |
||||
|
<el-select v-model="valueType" class="m-2 kuandu" placeholder="Select" @change="sswrval"> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
<el-text v-if="valueType==1">保留</el-text> |
||||
|
<el-input-number |
||||
|
v-if="valueType==1" |
||||
|
v-model="digit" |
||||
|
class="mx-4 kuandu" |
||||
|
:min="0" |
||||
|
:max="10" |
||||
|
controls-position="right" |
||||
|
/> |
||||
|
<el-text>位小数</el-text> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="16"> |
||||
|
<editor id="tinymce" ref="hjks" 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 :gutter="20"> |
||||
|
<el-col :span="6"> |
||||
|
<div class="bian_kuang colBoxContent"> |
||||
|
|
||||
|
<el-collapse v-model="formFieldKey"> |
||||
|
<el-collapse-item v-for="(group,group_idx) in fieldCont" :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> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="bian_kuang 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> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="bian_kuang mathMsg"> |
||||
|
<div v-html="descContent" /> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="isHidde"> |
||||
|
<div ref="tinymceBox" v-html="tinymceHtml"> </div> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" @click="sendDigitFunc">确定</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.butkey{ |
||||
|
width:45px; |
||||
|
height:40px; |
||||
|
margin-bottom:15px; |
||||
|
} |
||||
|
.kuandu{ |
||||
|
width:110px; |
||||
|
} |
||||
|
.bian_kuang{ |
||||
|
border:1px solid #ebeef5; |
||||
|
height:300px; |
||||
|
width:100%; |
||||
|
overflow:hidden; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.isHidde{ |
||||
|
display:none; |
||||
|
position: fixed; |
||||
|
z-index: 1; |
||||
|
margin-top: -10px |
||||
|
} |
||||
|
.colBoxContent{ |
||||
|
width:100%; |
||||
|
height:300px; |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
.item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin: 8px 0; |
||||
|
padding: 0 8px; |
||||
|
cursor: pointer; |
||||
|
.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:5px 5px; |
||||
|
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> |
||||
|
<style> |
||||
|
.el-dialog__body { |
||||
|
margin-top: 0% !important; |
||||
|
padding-top: 0% !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,62 @@ |
|||||
|
const typeColors = [ |
||||
|
{ |
||||
|
name: "string", |
||||
|
typeStyle: { background: "#3e5ca0", color: "#fff" }, |
||||
|
viewStyle: { |
||||
|
background: "#1e87b6", |
||||
|
color: "#fff", |
||||
|
padding: "3px 5px", |
||||
|
borderRadius: "3px", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "date", |
||||
|
typeStyle: { background: "#3e5ca0", color: "#fff" }, |
||||
|
viewStyle: { |
||||
|
background: "#1e87b6", |
||||
|
color: "#fff", |
||||
|
padding: "3px 5px", |
||||
|
borderRadius: "3px", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "dateTime", |
||||
|
typeStyle: { background: "#3e5ca0", color: "#fff" }, |
||||
|
viewStyle: { |
||||
|
background: "#1e87b6", |
||||
|
color: "#fff", |
||||
|
padding: "3px 5px", |
||||
|
borderRadius: "3px", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "boolean", |
||||
|
typeStyle: { background: "#3e5ca0", color: "#fff" }, |
||||
|
viewStyle: { |
||||
|
background: "#1e87b6", |
||||
|
color: "#fff", |
||||
|
padding: "3px 5px", |
||||
|
borderRadius: "3px", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "number", |
||||
|
typeStyle: { background: "#ff7519", color: "#fff" }, |
||||
|
viewStyle: { |
||||
|
background: "#1e87b6", |
||||
|
color: "#fff", |
||||
|
padding: "3px 5px", |
||||
|
borderRadius: "3px", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "func", |
||||
|
typeStyle: { background: "#3e5ca0", color: "#fff" }, |
||||
|
viewStyle: { |
||||
|
color: "#871ab3", |
||||
|
padding: "3px 5px", |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export default typeColors; |
||||
Loading…
Reference in new issue