npm package: @moment-design/conditionall-execution
Description: 执行条件配置组件
Author: lean
Latest version: 0.1.2

# 执行条件配置组件

## 使用组件

`安装依赖`

```
npm install @moment-design/conditionall-execution --save
```

`使用组件`

```vue
<template>
  <m-conditionall-execution
    ref="refConditionallExecution"
    :datas="datas"
    :config="deepConfig"
    :default-group-type="'or'"
    @validate:fail="validateFail"
    @validate:success="validateSuccess"
  >
  </m-conditionall-execution>
</template>
<script lang="ts" setup>
import MConditionallExecution from '@moment-design/conditionall-execution';
import '@moment-design/conditionall-execution/dist/css/index.css';
</script>
```

## API

Props

| 参数名         | 描述       | 类型       | 默认值 |
| -------------- | ---------- | ---------- | ------ |
| disabledChange | 切换且、或 | boolean    | false  |
| preview        | 预览模式   | boolean    | false  |
| datas          | 数据值     | DATAS      | []     |
| config         | 配置数据   | TypeConfig | {}     |
| defaultGroupType | 条件组连接符和新增条件组的默认逻辑类型 | 'and' \| 'or' | 'or' |

TypeConfig

| 参数名 | 描述         | 类型  | 默认值       |
| ------ | ------------ | ----- | ------------ |
| c1     | 第一列配置项 | Array | TypeConfigC1 |
| c2     | 第二列配置项 | Array | TypeConfigC2 |
| c3     | 第三列配置项 | Array | TypeConfigC3 |

TypeConfigC1

| 参数名 | 描述     | 类型                     | 默认值 |
| ------ | -------- | ------------------------ | ------ |
| type   | 类型     | input,number,select,slot | ''     |
| label  | 属性     | string                   | ''     |
| value  | 值       | string                   | ''     |
| others | 扩展属性 | any                      | {}     |

TypeConfigC2

| 参数名 | 描述               | 类型         | 默认值 |
| ------ | ------------------ | ------------ | ------ |
| label  | 属性               | string       | ''     |
| value  | 值                 | string       | ''     |
| vs     | 属于第一列的数值组 | Array[strig] | []     |
| others | 扩展属性           | any          | ''     |

TypeConfigC3

| 参数名 | 描述               | 类型         | 默认值 |
| ------ | ------------------ | ------------ | ------ |
| label  | 属性               | string       | ''     |
| value  | 值                 | string       | ''     |
| vs     | 属于第一列的数值组 | Array[strig] | []     |
| v2s    | 属于第二列的数值组 | Array[strig] | []     |
| others | 扩展属性           | any          |

Events

| 事件名           | 描述     | 参数                                                     |
| ---------------- | -------- | -------------------------------------------------------- |
| validate:fail    | 校验失败 | (datas: any[])                                           |
| validate:success | 校验成功 | (datas: any[])                                           |
| handle:slot      | 插槽事件 | (datas: any[], item: any, index: number, sindex: number) |

## 示例数据

```js
# config
export const config = {
  c1: [
    { type: 'number', label: '商品库存', value: 1 },
    { type: 'select', label: '商品类型', value: 2 },
    { type: 'select', label: '商品范围', value: 3 },
    { type: 'select', label: '适用商品分组', value: 4 },
  ],
  c2: [
    { label: '包含', value: 1, vs: [2, 3, 4] },
    { label: '不包含', value: 2, vs: [2, 3, 4] },
    { label: '小于', value: 3, vs: [1] },
    { label: '大于等于', value: 4, vs: [1] },
    { label: '大于', value: 5, vs: [1] },
    { label: '大于等于', value: 6, vs: [1] },
    { label: '等于', value: 7, vs: [1] },
    { label: '不等于', value: 8, vs: [1] },
  ],
  c3: [
    { label: '实物商品', value: 1, vs: [2], v2s: [2] },
    { label: '虚拟商品', value: 2, vs: [2] },
    { label: '电子卡券商品', value: 3, vs: [2] },
    { label: '海淘商品', value: 4, vs: [2] },
    { label: '分组1', value: 5, vs: [4] },
    { label: '分组2', value: 6, vs: [4] },
    { label: '分组3', value: 7, vs: [4] },
    { label: '分组4', value: 8, vs: [4] },
  ],
};

# datas
[
  {
    "type": "and",
    "data": [
      {
        "label": "适用商品分组",
        "type": "select",
        "c1": 4,
        "c2": 1,
        "c3": [7]
      },
      {
        "label": "适用商品分组",
        "type": "select",
        "c1": 4,
        "c2": 1,
        "c3": [6, 7]
      }
    ]
  }
]
```