xkit-editor 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/components/condition-editor.vue

@@ -1,641 +0,0 @@
-<template>
-  <div class="condition-editor">
-    <template v-if="inlineVisible">
-      <el-select :model-value="currentMode" placeholder="请选择状态" @change="handleModeChange" class="w-full">
-        <el-option v-for="option in modeOptions" :key="String(option.value)" :label="option.label" :value="option.value" />
-      </el-select>
-
-      <div v-if="currentMode === CONDITION_MODE" class="condition-actions">
-        <el-button type="primary" plain size="small" @click="handleOpen" class="w-full">
-          配置条件
-        </el-button>
-        <div v-if="Array.isArray(modelValue) && modelValue.length > 0" class="condition-preview">
-          已配置 {{ builderConditionCount }} 条条件
-        </div>
-      </div>
-    </template>
-
-    <el-dialog v-model="dialogVisible" title="配置显示条件" width="860px" append-to-body>
-      <div class="condition-dialog">
-        <x-condition-builder
-          v-model="builderValue"
-          :items="builderItems"
-          :init-button-attrs="{ label: '添加条件' }"
-          class="condition-builder"
-        />
-      </div>
-      <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSave">确定</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, unref, watch, type ComputedRef } from 'vue'
-import { dayjs, ElButton, ElDialog, ElOption, ElSelect } from 'element-plus'
-import { XConditionBuilder, genId, type OptionItem, type XConditionNode, type XFormItem } from 'xkit-ui'
-import { listEditorLocalDicts } from '../utils/local-dict-center'
-
-type StateKind = 'visible' | 'disabled' | 'static'
-type FieldValueKind = 'number' | 'date' | 'boolean' | 'text' | 'option-single' | 'option-multiple' | 'tree-option'
-type EditorOperator =
-  | 'eq'
-  | 'neq'
-  | 'gt'
-  | 'gte'
-  | 'lt'
-  | 'lte'
-  | 'contains'
-  | 'not_contains'
-  | 'in'
-  | 'not_in'
-  | 'exists'
-  | 'empty'
-
-type FieldMeta = {
-  label: string
-  name: string
-  item: XFormItem
-  type: string
-  valueKind: FieldValueKind
-  options?: OptionItem[]
-  hasOptions: boolean
-  isTree: boolean
-  multiple: boolean
-}
-
-const CONDITION_MODE = 'condition'
-const unaryOperators = new Set<EditorOperator>(['exists', 'empty'])
-const multiValueOperators = new Set<EditorOperator>(['contains', 'not_contains', 'in', 'not_in'])
-
-const props = withDefaults(defineProps<{
-  modelValue?: any
-  defaultValue?: boolean
-  stateKind?: StateKind
-  inlineVisible?: boolean
-  autoOpenKey?: string | number
-}>(), {
-  inlineVisible: true
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: any): void
-}>()
-
-const editorContext = inject<ComputedRef<{ form?: { body?: XFormItem[] }; selectedItem?: any }> | null>('x-editor-context', null)
-
-const dialogVisible = ref(false)
-const builderValue = ref<XConditionNode | undefined>(undefined)
-
-const stateKind = computed<StateKind>(() => props.stateKind ?? (props.defaultValue === true ? 'visible' : 'disabled'))
-
-const modeOptions = computed(() => {
-  if (stateKind.value === 'visible') {
-    return [
-      { label: '始终显示', value: true },
-      { label: '始终隐藏', value: false },
-      { label: '满足条件时显示', value: CONDITION_MODE }
-    ]
-  }
-  if (stateKind.value === 'static') {
-    return [
-      { label: '默认编辑', value: false },
-      { label: '始终只读', value: true },
-      { label: '满足条件时只读', value: CONDITION_MODE }
-    ]
-  }
-  return [
-    { label: '始终可用', value: false },
-    { label: '始终禁用', value: true },
-    { label: '满足条件时禁用', value: CONDITION_MODE }
-  ]
-})
-
-const currentMode = computed(() => {
-  if (typeof props.modelValue === 'boolean') return props.modelValue
-  if (Array.isArray(props.modelValue)) return CONDITION_MODE
-  return props.defaultValue ?? true
-})
-
-const collectFormItems = (items: XFormItem[] = []) => {
-  const result: XFormItem[] = []
-  items.forEach((item) => {
-    if (item?.type === 'group' && Array.isArray(item.body)) {
-      result.push(...collectFormItems(item.body))
-      return
-    }
-    result.push(item)
-  })
-  return result
-}
-
-const normalizeType = (type: unknown) => String(type || 'input').replace(/^el-/, '').replace(/^x-/, '')
-
-const normalizeDictOptions = (options: unknown) => {
-  if (typeof options === 'string') return { type: 'dict', code: options }
-  if (!options || typeof options !== 'object') return undefined
-  const source = options as Record<string, unknown>
-  if (source.type === 'dict' && typeof source.code === 'string') {
-    return { type: 'dict', code: source.code }
-  }
-  return undefined
-}
-
-const resolveConditionOptions = (item: XFormItem): OptionItem[] | undefined => {
-  const options = unref((item as Record<string, any>).options)
-  if (Array.isArray(options)) return options
-
-  const dictOptions = normalizeDictOptions(options)
-  if (!dictOptions) return undefined
-
-  return listEditorLocalDicts().find((dict) => dict.code === dictOptions.code)?.options
-}
-
-const hasTreeOptions = (options?: OptionItem[]) => {
-  return Boolean(options?.some((option) => Array.isArray(option?.children) && option.children.length > 0))
-}
-
-const createFieldMeta = (item: XFormItem): FieldMeta | undefined => {
-  if (!item?.name || item.type === 'group') return undefined
-  const type = normalizeType(item.type)
-  const options = resolveConditionOptions(item)
-  const hasOptions = Array.isArray(options)
-  const isTree = ['cascader', 'tree-select'].includes(type) || hasTreeOptions(options)
-  const multiple = Boolean((item as any).multiple || ['checkboxes'].includes(type))
-  let valueKind: FieldValueKind = 'text'
-
-  if (isTree) {
-    valueKind = 'tree-option'
-  } else if (hasOptions || ['select', 'radios', 'radio'].includes(type)) {
-    valueKind = multiple ? 'option-multiple' : 'option-single'
-  } else if (['input-number', 'input-number-range', 'slider'].includes(type)) {
-    valueKind = 'number'
-  } else if (['date-picker', 'date-range-picker', 'date-range-picker-v2'].includes(type)) {
-    valueKind = 'date'
-  } else if (['switch', 'checkbox'].includes(type)) {
-    valueKind = 'boolean'
-  }
-
-  return {
-    label: typeof item.label === 'string' && item.label ? item.label : item.name,
-    name: item.name,
-    item,
-    type,
-    valueKind,
-    options,
-    hasOptions,
-    isTree,
-    multiple
-  }
-}
-
-const fieldMetas = computed(() => {
-  const items = editorContext?.value?.form?.body ?? []
-  const currentName = editorContext?.value?.selectedItem?.name
-  const metas = collectFormItems(items)
-    .map(createFieldMeta)
-    .filter(Boolean) as FieldMeta[]
-  const filtered = metas.filter((item) => item.name !== currentName)
-  return filtered.length > 0 ? filtered : metas
-})
-
-const findFieldMeta = (field?: string) => fieldMetas.value.find((item) => item.name === field)
-
-const fieldOptions = computed(() => fieldMetas.value.map((item) => ({ label: item.label, value: item.name })))
-
-const operatorOptionsByKind: Record<FieldValueKind, Array<{ label: string; value: EditorOperator }>> = {
-  number: [
-    { label: '等于', value: 'eq' },
-    { label: '不等于', value: 'neq' },
-    { label: '大于', value: 'gt' },
-    { label: '大于等于', value: 'gte' },
-    { label: '小于', value: 'lt' },
-    { label: '小于等于', value: 'lte' },
-    { label: '有值', value: 'exists' },
-    { label: '为空', value: 'empty' }
-  ],
-  date: [
-    { label: '等于', value: 'eq' },
-    { label: '不等于', value: 'neq' },
-    { label: '晚于', value: 'gt' },
-    { label: '不早于', value: 'gte' },
-    { label: '早于', value: 'lt' },
-    { label: '不晚于', value: 'lte' },
-    { label: '有值', value: 'exists' },
-    { label: '为空', value: 'empty' }
-  ],
-  boolean: [
-    { label: '等于', value: 'eq' },
-    { label: '不等于', value: 'neq' }
-  ],
-  text: [
-    { label: '等于', value: 'eq' },
-    { label: '不等于', value: 'neq' },
-    { label: '包含', value: 'contains' },
-    { label: '不包含', value: 'not_contains' },
-    { label: '有值', value: 'exists' },
-    { label: '为空', value: 'empty' }
-  ],
-  'option-single': [
-    { label: '等于', value: 'eq' },
-    { label: '不等于', value: 'neq' },
-    { label: '属于其中之一', value: 'in' },
-    { label: '不属于其中之一', value: 'not_in' },
-    { label: '有值', value: 'exists' },
-    { label: '为空', value: 'empty' }
-  ],
-  'option-multiple': [
-    { label: '包含', value: 'contains' },
-    { label: '不包含', value: 'not_contains' },
-    { label: '属于其中之一', value: 'in' },
-    { label: '不属于其中之一', value: 'not_in' },
-    { label: '有值', value: 'exists' },
-    { label: '为空', value: 'empty' }
-  ],
-  'tree-option': [
-    { label: '等于', value: 'eq' },
-    { label: '不等于', value: 'neq' },
-    { label: '包含', value: 'contains' },
-    { label: '不包含', value: 'not_contains' },
-    { label: '属于其中之一', value: 'in' },
-    { label: '不属于其中之一', value: 'not_in' },
-    { label: '有值', value: 'exists' },
-    { label: '为空', value: 'empty' }
-  ]
-}
-
-const getOperatorOptions = (row: any) => {
-  const meta = findFieldMeta(row.field)
-  return meta ? operatorOptionsByKind[meta.valueKind] : []
-}
-
-const isMultiValueOperator = (operator?: EditorOperator) => Boolean(operator && multiValueOperators.has(operator))
-
-const getValueOptions = (row: any) => findFieldMeta(row.field)?.options ?? []
-
-const isValueEditorVisible = (row: any, valueKind: FieldValueKind) => {
-  const meta = findFieldMeta(row.field)
-  return Boolean(meta && meta.valueKind === valueKind && row.operator && !unaryOperators.has(row.operator))
-}
-
-const getDateValueFormat = (meta?: FieldMeta) => {
-  const sourceValueFormat = (meta?.item as any)?.valueFormat
-  if (typeof sourceValueFormat === 'string' && sourceValueFormat) return sourceValueFormat
-
-  const pickerType = String((meta?.item as any)?._type || 'date')
-  if (['year', 'years', 'yearrange'].includes(pickerType)) return 'YYYY'
-  if (['month', 'months', 'monthrange'].includes(pickerType)) return 'YYYY-MM'
-  if (['datetime', 'datetimerange'].includes(pickerType)) return 'YYYY-MM-DD HH:mm:ss'
-  return 'YYYY-MM-DD'
-}
-
-const resetConditionRowValue = (row: any) => {
-  row.value = undefined
-}
-
-const builderItems = computed<XFormItem[]>(() => [
-  {
-    name: 'field',
-    label: false,
-    type: 'select',
-    placeholder: '选择字段',
-    options: fieldOptions.value,
-    style: { width: '180px' },
-    pipeOut(value: string, row: any) {
-      if (row.field !== value) {
-        row.operator = undefined
-        resetConditionRowValue(row)
-      }
-      return value
-    }
-  },
-  {
-    name: 'operator',
-    label: false,
-    type: 'select',
-    placeholder: '选择判断',
-    options: getOperatorOptions,
-    visible: (row: any) => Boolean(row.field),
-    style: { width: '150px' },
-    pipeOut(value: EditorOperator, row: any) {
-      if (row.operator !== value) resetConditionRowValue(row)
-      return value
-    }
-  },
-  {
-    name: 'value',
-    label: false,
-    type: 'select',
-    placeholder: '选择值',
-    options: getValueOptions,
-    visible: (row: any) => isValueEditorVisible(row, 'option-single') || isValueEditorVisible(row, 'option-multiple'),
-    attrs: (row: any) => ({
-      multiple: isMultiValueOperator(row.operator),
-      collapseTags: true,
-      maxCollapseTags: 10,
-      collapseTagsTooltip: true
-    }),
-    style: { width: '220px' }
-  },
-  {
-    name: 'value',
-    label: false,
-    type: 'cascader',
-    placeholder: '选择值',
-    options: getValueOptions,
-    visible: (row: any) => isValueEditorVisible(row, 'tree-option'),
-    attrs: (row: any) => ({
-      multiple: isMultiValueOperator(row.operator),
-      collapseTags: true,
-      maxCollapseTags: 10,
-      collapseTagsTooltip: true
-    }),
-    style: { width: '240px' }
-  },
-  {
-    name: 'value',
-    label: false,
-    type: 'input-number',
-    placeholder: '输入数值',
-    visible: (row: any) => isValueEditorVisible(row, 'number'),
-    style: { width: '160px' }
-  },
-  {
-    name: 'value',
-    label: false,
-    type: 'date-picker',
-    placeholder: '选择日期',
-    visible: (row: any) => isValueEditorVisible(row, 'date'),
-    attrs: (row: any) => {
-      const meta = findFieldMeta(row.field)
-      return {
-        type: (meta?.item as any)?._type,
-        valueFormat: getDateValueFormat(meta)
-      }
-    },
-    style: { width: '180px' }
-  },
-  {
-    name: 'value',
-    label: false,
-    type: 'select',
-    placeholder: '选择值',
-    options: [
-      { label: '是', value: true },
-      { label: '否', value: false }
-    ],
-    visible: (row: any) => isValueEditorVisible(row, 'boolean'),
-    style: { width: '140px' }
-  },
-  {
-    name: 'value',
-    label: false,
-    type: 'input',
-    placeholder: '输入内容',
-    visible: (row: any) => isValueEditorVisible(row, 'text'),
-    style: { width: '220px' }
-  }
-])
-
-const createEmptyBuilderValue = (): XConditionNode => ({
-  id: genId('cond'),
-  level: 0,
-  type: 'group',
-  data: { relationType: 'and' },
-  children: []
-})
-
-const toValueList = (value: any) => {
-  if (Array.isArray(value)) return value
-  if (value === undefined || value === null || value === '') return []
-  return [value]
-}
-
-const normalizeDateValue = (value: any, field: string): any => {
-  const meta = findFieldMeta(field)
-  if (meta?.valueKind !== 'date') return value
-  const format = getDateValueFormat(meta)
-  if (Array.isArray(value)) return value.map((item) => normalizeDateValue(item, field))
-  if (value instanceof Date) return dayjs(value).format(format)
-  return value
-}
-
-const createVarExpression = (field: string) => ['var', `form.${field}`]
-
-const buildPositiveExpression = (operator: EditorOperator, left: any[], value: any) => {
-  if (operator === 'eq') return ['==', left, value]
-  if (operator === 'neq') return ['!=', left, value]
-  if (operator === 'gt') return ['>', left, value]
-  if (operator === 'gte') return ['>=', left, value]
-  if (operator === 'lt') return ['<', left, value]
-  if (operator === 'lte') return ['<=', left, value]
-  if (operator === 'exists') return ['exists', left]
-  if (operator === 'empty') return ['empty', left]
-  if (operator === 'in') return ['in', left, toValueList(value)]
-  if (operator === 'contains') {
-    const values = toValueList(value)
-    if (values.length > 1) return ['or', ...values.map((item) => ['includes', left, item])]
-    return ['includes', left, values[0]]
-  }
-  return undefined
-}
-
-const isMultipleField = (field: string) => {
-  const meta = findFieldMeta(field)
-  return Boolean(meta?.multiple || meta?.valueKind === 'option-multiple')
-}
-
-const buildAnyIncludesExpression = (left: any[], values: any[]) => {
-  if (values.length > 1) return ['or', ...values.map((item) => ['includes', left, item])]
-  return ['includes', left, values[0]]
-}
-
-const buildExpressionFromCondition = (field: string, operator: EditorOperator, value: any) => {
-  const left = createVarExpression(field)
-  const normalizedValue = normalizeDateValue(value, field)
-  if (operator === 'in' && isMultipleField(field)) return buildAnyIncludesExpression(left, toValueList(normalizedValue))
-  if (operator === 'not_in' && isMultipleField(field)) {
-    return ['not', buildAnyIncludesExpression(left, toValueList(normalizedValue))]
-  }
-  if (operator === 'not_in') return ['not', ['in', left, toValueList(normalizedValue)]]
-  if (operator === 'not_contains') {
-    const values = toValueList(normalizedValue)
-    return ['not', buildAnyIncludesExpression(left, values)]
-  }
-  return buildPositiveExpression(operator, left, normalizedValue)
-}
-
-const buildExpressionFromNode = (node?: XConditionNode): any[] | undefined => {
-  if (!node) return undefined
-  if (node.type === 'group') {
-    const relation = node.data?.relationType === 'or' ? 'or' : 'and'
-    const children = (node.children || []).map((child) => buildExpressionFromNode(child)).filter(Boolean) as any[]
-    if (children.length === 0) return undefined
-    return [relation, ...children]
-  }
-  const field = node.data?.field
-  const operator = node.data?.operator as EditorOperator | undefined
-  if (!field || !operator) return undefined
-  if (multiValueOperators.has(operator) && toValueList(node.data?.value).length === 0) return undefined
-  if (!unaryOperators.has(operator) && (node.data?.value === undefined || node.data?.value === null || node.data?.value === '')) {
-    return undefined
-  }
-  return buildExpressionFromCondition(field, operator, node.data?.value)
-}
-
-const extractVarPath = (value: any) => {
-  if (Array.isArray(value) && value[0] === 'var' && typeof value[1] === 'string') return value[1] as string
-  return undefined
-}
-
-const stripScopePrefix = (path: string) => {
-  const prefixes = ['form.', 'formData.', 'row.', 'rowData.']
-  const matched = prefixes.find((prefix) => path.startsWith(prefix))
-  return matched ? path.slice(matched.length) : path
-}
-
-const createConditionNode = (level: number, fieldPath: string, operator: EditorOperator, value?: any): XConditionNode => ({
-  id: genId('cond'),
-  level,
-  type: 'condition',
-  data: {
-    field: stripScopePrefix(fieldPath),
-    operator,
-    value
-  }
-})
-
-const parseExpressionToNode = (expression: any, level = 0): XConditionNode | undefined => {
-  if (!Array.isArray(expression)) return undefined
-  const [operator, ...args] = expression
-  if (operator === 'and' || operator === 'or') {
-    const children = args.map((item) => parseExpressionToNode(item, level + 1)).filter(Boolean) as XConditionNode[]
-    return {
-      id: genId('cond'),
-      level,
-      type: 'group',
-      data: { relationType: operator },
-      children
-    }
-  }
-  if (operator === 'not') {
-    const inner = parseExpressionToNode(args[0], level)
-    if (!inner || inner.type !== 'condition') return undefined
-    if (inner.data?.operator === 'in') inner.data.operator = 'not_in'
-    if (inner.data?.operator === 'contains') inner.data.operator = 'not_contains'
-    return inner
-  }
-  if (typeof operator !== 'string') return undefined
-  if (operator === 'exists' || operator === 'empty') {
-    const fieldPath = extractVarPath(args[0])
-    return fieldPath ? createConditionNode(level, fieldPath, operator, undefined) : undefined
-  }
-  const fieldPath = extractVarPath(args[0])
-  if (!fieldPath) return undefined
-  if (operator === '==') return createConditionNode(level, fieldPath, 'eq', args[1])
-  if (operator === '!=') return createConditionNode(level, fieldPath, 'neq', args[1])
-  if (operator === '>') return createConditionNode(level, fieldPath, 'gt', args[1])
-  if (operator === '>=') return createConditionNode(level, fieldPath, 'gte', args[1])
-  if (operator === '<') return createConditionNode(level, fieldPath, 'lt', args[1])
-  if (operator === '<=') return createConditionNode(level, fieldPath, 'lte', args[1])
-  if (operator === 'in') return createConditionNode(level, fieldPath, 'in', args[1])
-  if (operator === 'includes') return createConditionNode(level, fieldPath, 'contains', args[1])
-  return undefined
-}
-
-const buildBuilderValue = (expression: any) => {
-  const parsed = parseExpressionToNode(expression, 0)
-  return parsed?.type === 'group' ? parsed : createEmptyBuilderValue()
-}
-
-const builderConditionCount = computed(() => {
-  const countExpression = (expression: any): number => {
-    if (!Array.isArray(expression)) return 0
-    const [operator, ...args] = expression
-    if (operator === 'and' || operator === 'or') return args.reduce((sum, item) => sum + countExpression(item), 0)
-    if (operator === 'not') return countExpression(args[0])
-    return 1
-  }
-  return Array.isArray(props.modelValue) ? countExpression(props.modelValue) : 0
-})
-
-const ensureConditionMode = () => {
-  if (!Array.isArray(props.modelValue)) emit('update:modelValue', [])
-}
-
-const handleModeChange = (val: any) => {
-  if (val === true || val === false) {
-    emit('update:modelValue', val)
-    return
-  }
-  ensureConditionMode()
-}
-
-const handleOpen = () => {
-  ensureConditionMode()
-  builderValue.value = buildBuilderValue(props.modelValue)
-  dialogVisible.value = true
-}
-
-const handleSave = () => {
-  const expression = buildExpressionFromNode(builderValue.value)
-  emit('update:modelValue', expression ?? [])
-  dialogVisible.value = false
-}
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (dialogVisible.value && Array.isArray(val)) {
-      builderValue.value = buildBuilderValue(val)
-    }
-  }
-)
-
-watch(
-  () => props.autoOpenKey,
-  (key, oldKey) => {
-    if (key === undefined || key === oldKey) return
-    handleOpen()
-  }
-)
-
-defineExpose({
-  open: handleOpen
-})
-</script>
-
-<style scoped>
-.condition-editor {
-  width: 100%;
-}
-
-.condition-actions {
-  margin-top: 8px;
-}
-
-.condition-preview {
-  margin-top: 4px;
-  font-size: 12px;
-  color: #606266;
-  background: #f8f9fa;
-  padding: 4px 8px;
-  border-radius: 4px;
-  word-break: break-all;
-}
-
-.condition-dialog {
-  min-height: 220px;
-  padding: 16px;
-}
-
-.condition-builder {
-  min-height: 200px;
-}
-
-.w-full {
-  width: 100%;
-}
-</style>