公式编辑器

HiFormulaEditor 是公式编辑组件。

安装方式

yarn add pangea-ui

引用方式

import HiFormulaEditor from "pangea-ui/hi-formula-editor";
import "pangea-ui/dist/style.css";

Props

参数名	描述	类型	默认值
title	编辑器标题	string	公式编辑
formulas	公式配置	IFormulas	[]
fields	字段配置	IFields[]	[]

interface IFormulas {
  common: string[]; // 常用公式 默认值为["SUM", "CONCAT"]
  groupList: [{ // 默认公式类型为文本函数text、时间函数date、逻辑函数logic、数学函数math
    typeName: string; // 类型名称
    type: string; // 类型
    list: [{// 公式列表
      name: string; // 公式名称
      desc: string; // 公式描述
      type: string; // 类型
      intro: { // 提示框内容
        title: string; // 提示标题
        content: string; // 提示内容
      };
    }];
  }];
}

interface IFields {
  title: string; // 标题
  list: [{
    title: string; // 名称
    name: string; // 标识
    type: string; // 类型
  }]; // 字段
}

Methods

方法名	描述	参数	返回值
show	展示弹窗方法	value: string

Events

方法名	描述	参数	返回值
ok	确定	value: string
cancel	取消

使用示例

<template>
  <button @click="show">公式编辑</button>
  <HiFormulaEditor
    ref="hiFormulaEditorRef"
    :formulas="formulas"
    :fields="fields"
    @ok="ok"
  />
</template>
<script lang="ts" setup>
import { ref } from "vue";

const value = ref("");

const formulas = ref({
  common:["USER"],
  groupList:[{
    typeName:"人员获取函数",
    type:"user",
    list:[
     {
        name:"USER",
        desc:"显示当前登录人",
        intro: {
          title:"USER()",
          content:"返回当前登录人",
        }
     }
    ]
  }],
})
const fields = [{
  title:"表单1",
  list:[{
    title:"年级",
    name:"GRADE",
    type:"单行文本"
  },{
    title:"班级",
    name:"CLASS",
    type:"单行文本"
  }]
},{
  title:"表单2",
  list:[{
    title:"姓名",
    name:"NAME",
    type:"单行文本"
  }]
}]
const hiFormulaEditorRef = ref()
const show = () => {
  hiFormulaEditorRef.value.show(value.value);
}
const ok = (val) => {
  value.value = val;
}
</script>