@94ai/nf-conditions 3.1.13

package/package/nf-conditions.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="nf-conditions">
+    <condition-container
+      ref="conditionContainer"
+      :config="{
+         disabled,
+         size,
+         model: plan,
+         'show-message':showMessage,
+         'inline-message':inlineMessage,
+         'status-icon': statusIcon,
+      }"
+      :tag="tag"
+    >
+      <el-form-item
+        v-for="(condition,i) in plan[conditionsKey]"
+        :key="condition.key"
+        label-width="0"
+      >
+        <div class="condition-header">
+          <span class="condition-pre"><span style="color: red;margin-right: 5px;vertical-align: middle">*</span>{{ conditionDesc }} {{ (i + 1) }}</span>
+          <span class="remove-condition" @click="removeCondition(i)" v-if="!hiddenConditionReduce"><span class="remove-condition-icon">{{ deleteConditionDesc }}</span></span>
+        </div>
+        <nf-rules
+          ref="nfRules"
+          :show-message="showMessage"
+          :init-add-data="initAddRuleData"
+          :inline-message="inlineMessage"
+          :status-icon="statusIcon"
+          :logic-merge-desc="logicMergeDesc"
+          :number-require-desc="numberRequireDesc"
+          :common-len-limit-desc="commonLenLimitDesc"
+          :place-enter="placeEnter"
+          :prohibit-empty-desc="prohibitEmptyDesc"
+          :params-len-limit-desc="paramsLenLimitDesc"
+          :range-separator-desc="rangeSeparatorDesc"
+          :start-placeholder-date="startPlaceholderDate"
+          :end-placeholder-date="endPlaceholderDate"
+          :start-placeholder-time="startPlaceholderTime"
+          :end-placeholder-time="endPlaceholderTime"
+          :time-picker-placeholder="timePickerPlaceholder"
+          :date-picker-placeholder="datePickerPlaceholder"
+          :split-desc="splitDesc"
+          :condition-disabled="conditionDisabled"
+          :hidden-add="hiddenAdd"
+          :hidden-reduce="hiddenReduce"
+          :show-rule-types="showRuleTypes"
+          :default-add-data="defaultAddData"
+          :default-add-type="defaultAddType"
+          :size="size"
+          :placeholder="placeholder"
+          :times="times"
+          :second="second"
+          :disabled="disabled"
+          :disables="disables"
+          :limit="limit"
+          :操作类型="操作类型"
+          :规则类型="规则类型"
+          :计算类型="计算类型"
+          :日期类型="日期类型"
+          :外呼状态="外呼状态"
+          :规则类型下拉="规则类型下拉"
+          :操作类型下拉="操作类型下拉"
+          :计算类型下拉="计算类型下拉"
+          :日期类型下拉="日期类型下拉"
+          :外呼状态下拉="外呼状态下拉"
+          :意向标签集合="意向标签集合"
+          :规则类型下拉合并策略="规则类型下拉合并策略"
+          :计算类型下拉合并策略="计算类型下拉合并策略"
+          :操作类型下拉合并策略="操作类型下拉合并策略"
+          :日期类型下拉合并策略="日期类型下拉合并策略"
+          :外呼状态下拉合并策略="外呼状态下拉合并策略"
+          :意向标签集合合并策略="意向标签集合合并策略"
+          tag='div'
+          :valid-prefix='validPrefix + `${conditionsKey}.${i}.`'
+          :rules='condition[rulesKey]'
+          :rules-key="rulesKey"
+          @addRule="(e) => $emit('addRule', e)"
+          @reduceRule="(e) => $emit('reduceRule', e)"
+          @onChange="() => $emit('ruleChange' , plan[conditionsKey])"
+        />
+      </el-form-item>
+      <div class="condition-footer">
+        <span class="add-condition" @click="addCondition()" v-if="!hiddenConditionAdd && (!conditionLimit || plan[conditionsKey]?.length < conditionLimit)">
+          <span class="add-condition-icon">{{ addConditionDesc }}</span>
+        </span>
+      </div>
+    </condition-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+  name: "nf-conditions",
+})
+</script>
+
+<script lang="ts" setup>
+import {
+  nextTick,
+  onMounted,
+  ref
+} from 'vue-demi'
+import { generateUUID } from '@94ai/common-utils'
+import {
+  DropDownItem,
+  MergeStrategy,
+  RuleItem
+} from '@94ai/nf-rules/lib/types'
+import {
+  外呼状态 as 外呼状态默认枚举,
+  操作类型 as 操作类型默认枚举,
+  日期类型 as 日期类型默认枚举,
+  规则类型 as 规则类型默认枚举,
+  计算类型 as 计算类型默认枚举
+} from '@94ai/nf-rules'
+import ConditionContainer from './condition-container.vue'
+
+const props = withDefaults(defineProps<{
+  conditions?: {
+    rules?: RuleItem[]
+    key?: string
+  }[]
+  rulesKey?: string
+  conditionsKey?: string
+  conditionLimit?: number
+  hiddenConditionAdd?: boolean
+  hiddenConditionReduce?: boolean
+  conditionDesc?: string,
+  addConditionDesc?: string,
+  deleteConditionDesc?: string,
+  initAddData?: boolean,
+  initAddRuleData?: boolean,
+
+  /**
+   * 表单
+   */
+  size?: 'medium' | 'small' | 'mini',
+  tag?: string
+  showMessage?: boolean
+  inlineMessage?:boolean
+  statusIcon?:boolean
+  validPrefix?: string
+  /**
+   * 国际化
+   */
+  logicMergeDesc?: string,
+  placeholder?: string,
+  numberRequireDesc?: string,
+  commonLenLimitDesc?: string,
+  placeEnter?: string,
+  prohibitEmptyDesc?: string,
+  paramsLenLimitDesc?: string,
+  times?: string,
+  second?: string,
+  rangeSeparatorDesc?: string,
+  startPlaceholderDate?: string,
+  endPlaceholderDate?:string,
+  startPlaceholderTime?:string,
+  endPlaceholderTime?:string,
+  timePickerPlaceholder?: string,
+  datePickerPlaceholder?: string,
+  splitDesc?: string,
+  /**
+   * 禁用
+   */
+  disabled?:boolean
+  conditionDisabled?:boolean
+  disables?: Record<string, boolean[]>
+  hiddenAdd?:boolean
+  hiddenReduce?:boolean
+  limit?:number
+  /**
+   * 规则回显数据
+   */
+  rules?: RuleItem[],
+  /**
+   * 控制哪些规则显示
+   */
+  showRuleTypes?: (string | number)[],
+  /**
+   * 默认新增的规则数据
+   */
+  defaultAddData?: RuleItem,
+  /**
+   * 默认新增的规则类型
+   */
+  defaultAddType?: string | number
+  /**
+   * 枚举
+   */
+  操作类型?: Record<keyof typeof 操作类型默认枚举, string | number>,
+  规则类型?: Record<keyof typeof 规则类型默认枚举, string | number>,
+  计算类型?: Record<keyof typeof 计算类型默认枚举, string | number>,
+  日期类型?: Record<keyof typeof 日期类型默认枚举, string | number>,
+  外呼状态?: Record<keyof typeof 外呼状态默认枚举, string | number>,
+  /**
+   * 下拉
+   */
+  规则类型下拉?: DropDownItem[],
+  操作类型下拉?: DropDownItem[],
+  计算类型下拉?: DropDownItem[],
+  日期类型下拉?: DropDownItem[],
+  外呼状态下拉?: DropDownItem[],
+  意向标签集合?: DropDownItem[],
+  /**
+   * 下拉合并策略
+   */
+  规则类型下拉合并策略?: MergeStrategy,
+  计算类型下拉合并策略?: MergeStrategy,
+  操作类型下拉合并策略?: MergeStrategy,
+  日期类型下拉合并策略?: MergeStrategy,
+  外呼状态下拉合并策略?: MergeStrategy,
+  意向标签集合合并策略?: MergeStrategy,
+}>(), {
+  conditions: undefined,
+  rulesKey: 'rules',
+  initAddData: true,
+  initAddRuleData: true,
+  conditionsKey: 'conditions',
+  conditionLimit: 0,
+  hiddenConditionAdd: false,
+  hiddenConditionReduce: false,
+  conditionDesc: '条件',
+  addConditionDesc: '+ 添加条件',
+  deleteConditionDesc: '- 删除条件',
+
+  size: 'mini',
+  logicMergeDesc: '且',
+  placeholder: '请选择',
+  numberRequireDesc: '请输入数字',
+  commonLenLimitDesc: '总文案长度不超过2000中文字符',
+  placeEnter: '请输入',
+  prohibitEmptyDesc: '不能为空',
+  paramsLenLimitDesc: '最多可输入50个英文字符长度',
+  rangeSeparatorDesc: "至",
+  startPlaceholderDate: "开始日期",
+  endPlaceholderDate: "结束日期",
+  startPlaceholderTime: "开始时间",
+  endPlaceholderTime: "结束时间",
+  timePickerPlaceholder: '选择时间范围',
+  datePickerPlaceholder: '选择日期范围',
+  splitDesc: '输入多个时,用#分割',
+  rules: undefined,
+  tag: 'el-form',
+  showMessage: true,
+  inlineMessage: false,
+  statusIcon: false,
+  validPrefix: '',
+  disabled: false,
+  conditionDisabled: false,
+  disables: undefined,
+  hiddenAdd: false,
+  limit: 0,
+  hiddenReduce: false,
+  times: '次',
+  second: '秒',
+  规则类型下拉合并策略: 'defaultPatch',
+  计算类型下拉合并策略: 'defaultPatch',
+  操作类型下拉合并策略: 'defaultPatch',
+  日期类型下拉合并策略: 'defaultPatch',
+  外呼状态下拉合并策略: 'defaultPatch',
+  意向标签集合合并策略: 'defaultPatch',
+  showRuleTypes: () => [],
+  操作类型: () => 操作类型默认枚举,
+  规则类型: () => 规则类型默认枚举,
+  计算类型: () => 计算类型默认枚举,
+  日期类型: () => 日期类型默认枚举,
+  外呼状态: () => 外呼状态默认枚举,
+})
+const emit = defineEmits<{
+  (e: 'reduceCondition', event: Record<string, any>): void
+  (e: 'addCondition', event: Record<string, any>): void
+}>()
+
+const conditionContainer = ref()
+const nfConditionsForm = ref()
+
+onMounted(() => {
+  nfConditionsForm.value = conditionContainer.value?.$refs.nfConditionsForm
+})
+
+const getCondition = (): {
+  key: string
+  rules?: RuleItem[]
+} => {
+  return {
+    [props.rulesKey]: [],
+    key: generateUUID()
+  }
+}
+
+const initPlan = () => {
+  if (!props.conditions) {
+    return props.initAddData ? [getCondition()] : []
+  } else if (!props.conditions.length) {
+    if (props.initAddData) {
+      props.conditions.push(getCondition())
+    }
+  } else {
+    props.conditions.forEach(item => {
+      item.key ??= generateUUID()
+    })
+  }
+  return props.conditions
+}
+
+const plan = ref<{
+  'conditions'?: {
+      key?: string,
+      rules?:  RuleItem[]
+    }[],
+}>({
+  [props.conditionsKey]: initPlan()
+})
+
+const removeCondition = (j) => {
+  emit('reduceCondition', plan.value[props.conditionsKey][j])
+  plan.value[props.conditionsKey].splice(j, 1)
+}
+const addCondition = async () => {
+  plan.value[props.conditionsKey].push(getCondition())
+  await nextTick()
+  emit('addCondition', plan.value[props.conditionsKey][plan.value[props.conditionsKey].length - 1])
+}
+
+
+defineExpose({
+  addCondition,
+  removeCondition,
+  initPlan,
+  getCondition,
+  conditionContainer,
+  nfConditionsForm,
+  plan,
+})
+
+</script>

package/package/style/css.ts

@@ -0,0 +1 @@
+import '@94ai/nf-theme-chalk/lib/css/nf-conditions.css'

package/package/style/index.ts

@@ -0,0 +1 @@
+import '@94ai/nf-theme-chalk/lib/nf-conditions.scss'

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@94ai/nf-conditions",
+  "version": "3.1.13",
+  "description": "> TODO: description",
+  "keywords": [],
+  "author": "zoujiahe <zoujiahe@94ai.com>",
+  "homepage": "https://oss.xccjh.top/common-ui/#/ai-index",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://94ai.gitlab.com/ui/common-ui.git"
+  },
+  "dependencies": {
+    "@94ai/common-utils": "^3.1.13",
+    "@94ai/nf-rules": "^3.1.13",
+    "@94ai/nf-theme-chalk": "^3.1.13",
+    "vue-demi": "^0.14.5"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "element-ui": ">=2.13.2",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "types": "lib/index.d.ts",
+  "main": "lib/nf-conditions.cjs.js",
+  "module": "lib/nf-conditions.esm-bundler.js",
+  "gitHead": "a8c56183ccc8e979008e2d38bfde2d7d1448654c"
+}

package/postcss.config.js

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    // 这个工具可以实现自动添加CSS3前缀
+    autoprefixer: {
+      overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8']
+    },
+  },
+}