条件规则面板

HiConditon 是一个用于设置判断条件的组件，可以对表达式的参数类型进行配置。

安装方式

yarn add pangea-ui

引用方式

import HiCondition from "pangea-ui/hi-condition";
import "pangea-ui/dist/style.css"

API

Props

参数名	描述	类型	默认值
model-value (v-model)	绑定数据	IResult
key-config	key值配置	IKeyConfig	默认为input类型
level	层级	number	3
disabled	是否禁用	boolean	false
mode	逻辑符	"AND"、"OR"、"ALL"	ALL

interface IResult {
  conditionCode:"", // 逻辑符 AND | OR
  id:"", // 唯一表示
  parentId:"", // 父节点id
  rules:[
    {
      id:"", // 唯一表示
      parentId:"", // 父节点id
      key:"", // key值
      value:"", // value值
      logic:"", // 逻辑符
    }
  ]
}
interface IKeyConfig {
  keyType: "input" | "select"; // 左侧区域展示类型
  keyOptions: [{ // 如果是select类型需要配置options属性
    {
      key: "key"; // key值
      value: "value"; // value值
      valueType: "input"; // input | select | select-multiple | dept | user | date | number | 其他arco中存在的类型 右侧区域展示类型
      valueProps: {
        options: [{ // 如果是select类型需要配置options属性
          key:"key",
          value:"value"
        }]
      }
      operate: IOperate[]; // 逻辑符类型
      matchOptions:[{ // 匹配字段  如果传入matchOptions 如果选择匹配字段类型value会根据matchOptions取下拉配置
        key:"key",
        value:"value"
      }]
    }
  }];
  operate: IOperate[]; // 如果是input类型需要配置逻辑符类型
}
interface IOperate = "Equal" | "NotEqual" | "EqualAny" | "NotEqualAny" | "Contain" | "NotContain" | "BeginWith" | "EndWith" | "ExistValue" | "NotExistValue" | "Bigger" | "BiggerOrEqual" | "Lesser" | "LesserOrEqual" | "InRange" | "NotInRange" | "Before" | "After" | "Include" | "NotInclude" 
// 等于|不等于|等于任意一个|不等于任意一个|属于|不属于|开始为|结束为|有值|没有值|大于|大于等于|小于|小于等于|在范围内|不在范围内|早于|晚于|包含|不包含

使用示例

<template>
  <HiConditon
    v-model="data"
    :key-config="keyConfig"
    :level="3"
    :disabled="false"
    mode="ALL"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";

const data = ref({
  conditionCode:"AND",
  id:"1",
  rules:[
    {
      id:"2",
      parentId:"1",
      key:"",
      value:"",
      logic:"",
    }
  ]
});

const keyConfig = ref({
  keyType: "select",
  keyOptions: [{
    key: "1",
    value: "1",
    valueType: "select", 
    valueProps:{
      options:[{
        key:"3",
        value:"3"
      }]
    },
    operate: ["Equal"],
    matchOptions:[{
      key:"key",
      value:"value"
    }]
  }]
})

</script>